/* ========================================================================== YWC Theme — 2026-09 redesign ("Season Planner" design language) - style.css 의 구조(레이아웃·그리드·필터·상세)는 그대로 두고 시각 요소만 재정의 - 모든 규칙은 #ywc(body id) 로 시작 → 기존 모드/다크 오버라이드보다 우선 - 색은 variables.css 토큰(--color-*, --lane*)만 사용 → 라이트/다크·모드별 자동 대응 ========================================================================== */ /* ==== TOKENS (mirrored from variables.css, scoped to #ywc) ==== */ /* theme.css가 디자인 토큰을 직접 소유한다 — 다른 스타일시트(:root)에 예전 값이 남아 있어도 body#ywc 우선순위로 이 값이 적용된다. 값을 바꿀 땐 variables.css와 함께 수정. */ #ywc { /* ======================================================================== 1. COLOR PALETTE — Clean Blue / White / Cool Gray ======================================================================== */ /* --- Ink (navy-tinted neutrals, light theme) --- */ --color-primary-900: #0D1220; --color-primary-800: #1C2438; --color-primary-700: #2E374D; --color-primary-600: #4A5268; --color-primary-500: #6B7488; --color-primary-400: #A6AEBF; --color-primary-300: #CDD3DF; --color-primary-200: #E1E5EE; --color-primary-100: #EEF0F5; --color-primary-50: #F6F7FA; /* --- Competition lane: Rose --- */ --color-accent-700: #4338CA; --color-accent-600: #4F46E5; --color-accent-500: #6366F1; --color-accent-400: #818CF8; --color-accent-300: #A5B4FC; --color-accent-200: #C7D2FE; --color-accent-100: #E0E7FF; --color-accent-50: #EEF2FF; /* --- Neutral gray (navy-tinted) --- */ --color-gray-950: #070B14; --color-gray-900: #0D1220; --color-gray-800: #1C2438; --color-gray-700: #2E374D; --color-gray-600: #4A5268; --color-gray-500: #6B7488; --color-gray-400: #A6AEBF; --color-gray-300: #CDD3DF; --color-gray-200: #E1E5EE; --color-gray-100: #EEF0F5; --color-gray-50: #F6F7FA; /* --- Pre-college lane: Teal --- */ --color-teal-700: #0B6F66; --color-teal-600: #0E9384; --color-teal-500: #14B8A6; --color-teal-400: #2DD4BF; --color-teal-300: #5EEAD4; --color-teal-200: #99F6E4; --color-teal-100: #CCFBF1; --color-teal-50: #F0FDFA; /* --- Volunteer lane: Amber --- */ --color-amber-700: #A45F05; --color-amber-600: #C77A06; --color-amber-500: #F5B342; --color-amber-400: #F8C56A; --color-amber-300: #FCD34D; --color-amber-200: #FDE68A; --color-amber-100: #FEF3C7; --color-amber-50: #FFFBEB; /* --- CSIA lane: Periwinkle blue --- */ --color-csblue-700: #1D4ED8; --color-csblue-600: #2563EB; --color-csblue-500: #3B82F6; --color-csblue-400: #60A5FA; --color-csblue-300: #93C5FD; --color-csblue-200: #BFDBFE; --color-csblue-100: #DBEAFE; --color-csblue-50: #EFF6FF; /* --- Semantic --- */ --color-success-600: #15803D; --color-success-500: #22C55E; --color-success-100: #DCFCE7; --color-warning-600: #B45309; --color-warning-500: #EAB308; --color-warning-100: #FEF9C3; --color-error-600: #DC2626; --color-error-500: #EF4444; --color-error-100: #FEE2E2; /* ------------------------------------------------------------------------ Competition category accents (9 categories, indexed by data-cat) Each: -fg (label / icon / border-tint), -bg (subtle card-label fill). Used on card category labels, left-border tints, and dots — keeps the grid lively while CTAs / active states stay on the rose accent. ------------------------------------------------------------------------ */ --cat-1-fg: #4F46E5; --cat-1-bg: #EEF0FF; /* 수학 — indigo */ --cat-2-fg: #059669; --cat-2-bg: #E7F7F0; /* 과학 — emerald */ --cat-3-fg: #7C3AED; --cat-3-bg: #F3EEFE; /* 컴퓨터/IT — violet */ --cat-4-fg: #B45309; --cat-4-bg: #FBF1E3; /* 공학 — amber */ --cat-5-fg: #2563EB; --cat-5-bg: #E8F0FE; /* 경제/경영 — blue */ --cat-6-fg: #E8546A; --cat-6-bg: #FEECEF; /* 인문/사회 — rose */ --cat-7-fg: #0D9488; --cat-7-bg: #E3F6F3; /* 언어 — teal */ --cat-8-fg: #DB2777; --cat-8-bg: #FCEAF2; /* 예술/디자인 — pink */ --cat-9-fg: #64748B; --cat-9-bg: #EEF1F5; /* 연구/논문 — slate */ /* --- Surface & Background --- */ --color-bg: #F3F4F8; --color-bg-elevated: #FFFFFF; --color-bg-sunken: #ECEEF3; --color-surface: #FFFFFF; --color-surface-2: #F6F7FA; --color-overlay: rgba(13, 18, 32, 0.55); /* --- Border --- */ --color-border: #DCE0EA; --color-border-subtle: #E8EBF1; --color-border-strong: #B9C0D0; /* --- Text --- */ --color-text-primary: #0D1220; --color-text-secondary: #4A5268; --color-text-tertiary: #6B7488; --color-text-disabled: #A6AEBF; --color-text-inverse: #FFFFFF; --color-text-link: #4F46E5; /* --- Mode lane (overridden per mode on body) --- */ --lane: var(--color-accent-600); --lane-strong: var(--color-accent-700); --lane-soft: rgba(79, 70, 229, 0.10); --lane-on: #FFFFFF; /* ======================================================================== 2. TYPOGRAPHY ======================================================================== */ --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 제목용(구 serif 자리) — 세리프 대신 굵은 본문 서체로 통일 */ --font-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif; /* 페이지 타이틀·히어로 */ --font-display: var(--font-serif); /* 숫자·날짜·D-day·영문 라벨 */ --font-num: 'Space Grotesk', var(--font-sans); --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; /* --- Font Size Scale --- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* --- Font Weight --- */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* --- Line Height --- */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* --- Letter Spacing --- */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.01em; /* ======================================================================== 3. SPACING (4px base) ======================================================================== */ --space-0: 0; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ======================================================================== 4. COMPONENT TOKENS ======================================================================== */ /* --- Border Radius --- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* --- Card (clean white, subtle cool shadow) --- */ --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--radius-xl); --card-padding: var(--space-5); --card-shadow: none; --card-shadow-hover: 0 6px 20px rgba(13, 18, 32, 0.08); /* --- Button --- */ --btn-height-sm: 32px; --btn-height-md: 36px; --btn-height-lg: 44px; --btn-padding-x-sm: var(--space-3); --btn-padding-x-md: var(--space-4); --btn-padding-x-lg: var(--space-6); --btn-radius: var(--radius-md); --btn-font-size: var(--text-sm); --btn-font-weight: var(--font-medium); --btn-primary-bg: var(--lane); --btn-primary-text: var(--lane-on); --btn-primary-hover-bg: var(--lane-strong); --btn-primary-active-bg: var(--lane-strong); --btn-secondary-bg: transparent; --btn-secondary-text: var(--color-text-primary); --btn-secondary-border: var(--color-border-strong); --btn-secondary-hover-bg: var(--color-surface-2); --btn-accent-bg: var(--lane); --btn-accent-text: var(--lane-on); --btn-accent-hover-bg: var(--lane-strong); --btn-disabled-bg: var(--color-gray-100); --btn-disabled-text: var(--color-text-disabled); /* --- Input --- */ --input-height: 40px; --input-padding-x: var(--space-3); --input-bg: var(--color-bg-elevated); --input-border: var(--color-border); --input-radius: 10px; --input-font-size: var(--text-base); --input-focus-border: var(--lane); --input-focus-ring: 0 0 0 3px var(--lane-soft); --input-placeholder: var(--color-text-tertiary); /* --- Filter Chip / Tag (cool gray bg, blue active) --- */ --chip-height: 32px; --chip-padding-x: 14px; --chip-radius: var(--radius-full); --chip-font-size: var(--text-sm); --chip-bg: transparent; --chip-text: var(--color-text-primary); --chip-active-bg: var(--color-text-primary); --chip-active-text: var(--color-text-inverse); /* --- Badge --- */ --badge-padding-x: var(--space-2); --badge-padding-y: var(--space-0-5); --badge-radius: var(--radius-sm); --badge-font-size: var(--text-xs); --badge-font-weight: var(--font-medium); /* --- Navbar (white with blur) --- */ --nav-height: 82px; --nav-bg: rgba(243, 244, 248, 0.88); --nav-border: var(--color-border); /* ======================================================================== 5. BREAKPOINTS (reference — use in @media queries) mobile-first: min-width ======================================================================== */ /* sm: 640px — large phone / small tablet */ /* md: 768px — tablet */ /* lg: 1024px — small desktop */ /* xl: 1280px — desktop */ /* 2xl: 1440px — wide desktop */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1440px; /* --- Container widths --- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; /* ======================================================================== 6. TRANSITIONS ======================================================================== */ --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-colors: color var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default); --transition-shadow: box-shadow var(--duration-normal) var(--ease-default); --transition-transform: transform var(--duration-normal) var(--ease-default); --transition-all: all var(--duration-normal) var(--ease-default); /* ======================================================================== 7. Z-INDEX SCALE ======================================================================== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================================== DARK MODE — body.dark overrides (기본 테마) ========================================================================== */ body#ywc.dark { /* --- Surface & Background --- */ --color-bg: #0D1220; --color-bg-elevated: #151B2C; --color-bg-sunken: #0A0F1B; --color-surface: #151B2C; --color-surface-2: #1C2438; --color-overlay: rgba(3, 6, 14, 0.7); /* --- Border --- */ --color-border: #2A3350; --color-border-subtle: #222A40; --color-border-strong: #3A4566; /* --- Text --- */ --color-text-primary: #EEF1F7; --color-text-secondary: #CDD3DF; --color-text-tertiary: #A3ACBF; --color-text-disabled: #5B6479; --color-text-inverse: #0D1220; --color-text-link: #A5B4FC; /* --- Gray palette (inverted) --- */ --color-gray-50: #1C2438; --color-gray-100: #1C2438; --color-gray-200: #2A3350; --color-gray-300: #3A4566; --color-gray-400: #5B6479; --color-gray-500: #A3ACBF; --color-gray-600: #CDD3DF; --color-gray-700: #E1E5EE; --color-gray-800: #EEF1F7; --color-gray-900: #F5F7FB; --color-gray-950: #FFFFFF; /* --- Navbar --- */ --nav-bg: rgba(13, 18, 32, 0.86); /* --- Card --- */ --card-bg: #151B2C; --card-border: #2A3350; --card-shadow: none; --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35); /* --- Chip --- */ --chip-bg: transparent; --chip-text: #EEF1F7; --chip-active-bg: #EEF1F7; --chip-active-text: #0D1220; /* --- Input --- */ --input-bg: #1C2438; --input-border: #2A3350; --input-placeholder: #7C869C; /* --- Button --- */ --btn-secondary-bg: transparent; --btn-secondary-text: #EEF1F7; --btn-secondary-border: #3A4566; --btn-secondary-hover-bg: #1C2438; --btn-disabled-bg: #1C2438; --btn-disabled-text: #5B6479; /* --- Lanes on dark: brighter hues, translucent tints --- */ --color-accent-700: #C7D2FE; --color-accent-600: #A5B4FC; --color-accent-500: #818CF8; --color-accent-400: #A5B4FC; --color-accent-200: rgba(129, 140, 248, 0.28); --color-accent-100: rgba(129, 140, 248, 0.16); --color-accent-50: rgba(129, 140, 248, 0.09); --color-teal-700: #7EEBDC; --color-teal-600: #2DD4BF; --color-teal-500: #2DD4BF; --color-teal-200: rgba(45, 212, 191, 0.28); --color-teal-100: rgba(45, 212, 191, 0.16); --color-teal-50: rgba(45, 212, 191, 0.09); --color-amber-700: #F8C56A; --color-amber-600: #F5B342; --color-amber-500: #F5B342; --color-amber-200: rgba(245, 179, 66, 0.28); --color-amber-100: rgba(245, 179, 66, 0.16); --color-amber-50: rgba(245, 179, 66, 0.09); --color-csblue-700: #BFDBFE; --color-csblue-600: #60A5FA; --color-csblue-500: #60A5FA; --color-csblue-200: rgba(96, 165, 250, 0.28); --color-csblue-100: rgba(96, 165, 250, 0.16); --color-csblue-50: rgba(96, 165, 250, 0.09); --lane: #818CF8; --lane-strong: #A5B4FC; --lane-soft: rgba(129, 140, 248, 0.16); --lane-on: #0D1220; /* --- Semantic (dark-friendly) --- */ --color-success-100: rgba(34, 197, 94, 0.15); --color-success-600: #4ADE80; --color-warning-100: rgba(234, 179, 8, 0.15); --color-warning-600: #FBBF24; --color-error-100: rgba(239, 68, 68, 0.15); --color-error-600: #F87171; /* --- Competition category accents (dark: brighter fg, translucent bg) --- */ --cat-1-fg: #A5B4FC; --cat-1-bg: rgba(99, 102, 241, 0.14); /* indigo */ --cat-2-fg: #6EE7B7; --cat-2-bg: rgba(16, 185, 129, 0.14); /* emerald */ --cat-3-fg: #C4B5FD; --cat-3-bg: rgba(124, 58, 237, 0.16); /* violet */ --cat-4-fg: #FCD34D; --cat-4-bg: rgba(217, 119, 6, 0.16); /* amber */ --cat-5-fg: #93C5FD; --cat-5-bg: rgba(37, 99, 235, 0.16); /* blue */ --cat-6-fg: #F2889A; --cat-6-bg: rgba(232, 84, 106, 0.15); /* rose */ --cat-7-fg: #5EEAD4; --cat-7-bg: rgba(13, 148, 136, 0.16); /* teal */ --cat-8-fg: #F9A8D4; --cat-8-bg: rgba(219, 39, 119, 0.16); /* pink */ --cat-9-fg: #CBD5E1; --cat-9-bg: rgba(100, 116, 139, 0.18); /* slate */ } /* ========================================================================== MODE LANES — 모드별 레인 컬러 (라이트/다크) ========================================================================== */ body#ywc.mode--precollege { --lane: var(--color-teal-600); --lane-strong: var(--color-teal-700); --lane-soft: rgba(14, 147, 132, 0.10); --lane-on: #FFFFFF; } body#ywc.mode--csia { --lane: var(--color-csblue-600); --lane-strong: var(--color-csblue-700); --lane-soft: rgba(37, 99, 235, 0.10); --lane-on: #FFFFFF; } body#ywc.mode--volunteer { --lane: var(--color-amber-600); --lane-strong: var(--color-amber-700); --lane-soft: rgba(199, 122, 6, 0.10); --lane-on: #FFFFFF; } body#ywc.mode--planner, body#ywc.mode--myplan, body#ywc.mode--about { --lane: var(--color-text-primary); --lane-strong: var(--color-text-primary); --lane-soft: rgba(13, 18, 32, 0.08); --lane-on: var(--color-text-inverse); } body#ywc.dark.mode--precollege { --lane-soft: rgba(45, 212, 191, 0.16); --lane-on: #0D1220; } body#ywc.dark.mode--csia { --lane-soft: rgba(96, 165, 250, 0.16); --lane-on: #0D1220; } body#ywc.dark.mode--volunteer { --lane-soft: rgba(245, 179, 66, 0.16); --lane-on: #0D1220; } body#ywc.dark.mode--planner, body#ywc.dark.mode--myplan, body#ywc.dark.mode--about { --lane-soft: rgba(238, 241, 247, 0.10); } /* ==== END TOKENS ==== */ /* ── Base ─────────────────────────────────────────────────────────────── */ #ywc { background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-sans); letter-spacing: -0.005em; } #ywc ::selection { background: var(--lane-soft); color: var(--color-text-primary); } #ywc ::-webkit-scrollbar-thumb { background: var(--color-border-strong); } #ywc ::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); } #ywc :focus-visible { outline: 2px solid var(--lane); outline-offset: 2px; } #ywc a { color: var(--color-text-link); } .num, #ywc .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* ── Top nav ─────────────────────────────────────────────────────────── */ #ywc .nav { background: var(--nav-bg); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } #ywc .nav__logo-wrap { gap: 14px; } #ywc .nav__logo-img { height: 22px; margin-right: 4px; } #ywc.dark .nav__logo-img { filter: brightness(0) invert(1) brightness(0.93); } #ywc .nav__logo { font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: 0.01em; line-height: 1; color: var(--color-text-primary); } #ywc .nav__tagline { font-family: var(--font-num); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-tertiary); margin-top: 4px; } #ywc .theme-toggle { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border); color: var(--color-text-primary); background: var(--color-surface); } #ywc .theme-toggle:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); } #ywc .admin-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--lane-soft); color: var(--lane-strong); border: 1px solid transparent; } /* School logo (brand plate — visible in both themes) */ #ywc .nav__school-logo-area { background: var(--color-bg); border-color: var(--color-border); padding: 14px 16px; } #ywc .nav__school-logo { opacity: 1; pointer-events: auto; border-radius: 10px; } #ywc.dark .nav__school-logo { background: #FFFFFF; padding: 5px 9px; } /* ── Left mode nav ───────────────────────────────────────────────────── */ #ywc .mode-nav { background: var(--color-bg); border-right: 1px solid var(--color-border); padding: calc(var(--nav-height) + 16px) 14px 16px; gap: 4px; } #ywc .mode-nav__btn { min-height: 44px; padding: 0 12px; border-radius: 10px; gap: 10px; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); background: transparent; } #ywc .mode-nav__btn::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-radius: 2px; background: var(--mode-dot, transparent); flex-shrink: 0; } #ywc .mode-nav__btn[data-mode="competition"] { --mode-dot: var(--color-accent-500); } #ywc .mode-nav__btn[data-mode="precollege"] { --mode-dot: var(--color-teal-500); } #ywc .mode-nav__btn[data-mode="planner"], #ywc .mode-nav__btn[data-mode="myplan"] { --mode-dot: var(--color-text-primary); } #ywc .mode-nav__btn[data-mode="volunteer"] { --mode-dot: var(--color-amber-500); } #ywc .mode-nav__btn[data-mode="csia"] { --mode-dot: var(--color-csblue-500); } #ywc .mode-nav__btn:hover { background: var(--color-surface); color: var(--color-text-primary); } #ywc .mode-nav__btn--active, #ywc .mode-nav__btn--active:hover { background: var(--color-text-primary); color: var(--color-text-inverse); font-weight: 700; } #ywc .mode-nav__btn--active[data-mode="planner"], #ywc .mode-nav__btn--active[data-mode="myplan"] { --mode-dot: var(--color-text-inverse); } /* ── Layout rhythm ──────────────────────────────────────────────────── */ #ywc .layout { gap: 28px; } /* ── Sidebar (filters) ──────────────────────────────────────────────── */ #ywc .sidebar__body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: none; padding: 18px; gap: 16px; } #ywc .filter-section { gap: 10px; } #ywc .filter-section + .filter-section { border-top: 1px solid var(--color-border-subtle); padding-top: 16px; } #ywc .filter-section__title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--color-text-primary); text-transform: none; letter-spacing: 0; } #ywc .filter-section__hint { font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); } #ywc .sidebar__toggle { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text-primary); min-height: 40px; } /* Search */ #ywc .search-input { height: 42px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--color-text-primary); box-shadow: none; font-size: 14px; } #ywc .search-input:focus { border-color: var(--lane); box-shadow: 0 0 0 3px var(--lane-soft); } #ywc .search-input-wrap__icon { color: var(--color-text-tertiary); } /* Category tiles */ #ywc .category-grid { gap: 6px; } #ywc .category-btn { min-height: 60px; justify-content: center; border: 1px solid var(--color-border); border-radius: 10px; background: transparent; color: var(--color-text-secondary); font-size: 12px; font-weight: 600; box-shadow: none; } #ywc .category-btn__icon { color: var(--color-text-tertiary); } #ywc .category-btn:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); color: var(--color-text-primary); } #ywc .category-btn.active, #ywc .category-btn.active:hover { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-text-inverse); } #ywc .category-btn.active .category-btn__icon { color: var(--lane); } /* Chips — neutral pills, inverted when active (unified across all tabs) */ #ywc .chip { height: 32px; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--color-text-primary); background: transparent; border: 1px solid var(--color-border-strong); border-radius: 999px; box-shadow: none; } #ywc .chip:hover { background: var(--color-surface-2); border-color: var(--color-text-tertiary); box-shadow: none; } #ywc .chip.active, #ywc .chip.active:hover { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: var(--color-text-primary); font-weight: 700; } #ywc .chip--readonly { border-style: dashed; } /* Reset + generic outline buttons */ #ywc .reset-btn { height: 40px; border-radius: 10px; border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-primary); font-weight: 600; box-shadow: none; } #ywc .reset-btn:hover { background: var(--color-surface-2); } /* ── Content header ─────────────────────────────────────────────────── */ #ywc .content__header { margin-bottom: 18px; min-height: 40px; } #ywc .result-count { font-family: var(--font-num); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--color-text-secondary); } #ywc .favorites-toggle { height: 36px; padding: 0 14px; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-text-primary); border: 1px solid var(--color-border-strong); border-radius: 999px; background: transparent; } #ywc .favorites-toggle:hover { background: var(--color-surface-2); color: var(--color-text-primary); border-color: var(--color-text-tertiary); } #ywc .favorites-toggle.active { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: var(--color-text-primary); } #ywc .loading-indicator__dot { background: var(--lane); } /* ── Cards ──────────────────────────────────────────────────────────── */ #ywc .card-grid { gap: 16px; } #ywc .card { padding: 18px 20px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: none; transition: border-color var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default); } #ywc .card:hover { border-color: var(--color-border-strong); box-shadow: var(--card-shadow-hover); } #ywc .card__top { margin-bottom: 14px; gap: 8px; } #ywc .card__category-tag { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); gap: 6px; } #ywc .card__category-icon { color: var(--lane); } #ywc .card__category-tag--secondary { opacity: 0.8; } #ywc .card__title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.4; color: var(--color-text-primary); margin-bottom: 8px; } #ywc .card__desc { font-size: 13px; line-height: 1.6; color: var(--color-text-tertiary); margin-bottom: 12px; } #ywc .card__bottom { border-top: 1px solid var(--color-border-subtle); padding-top: 12px; } #ywc .card__fav-btn { color: var(--color-text-tertiary); border-radius: 8px; } #ywc .card__fav-btn:hover { color: var(--lane); background: var(--lane-soft); } #ywc .card__fav-btn--active { color: var(--lane); } /* Hashtags — quiet text tags instead of filled pills */ #ywc .card__hashtags { gap: 4px 10px; margin-bottom: 12px; } #ywc .card__hashtag, #ywc .detail__hashtag { background: transparent; border: none; padding: 0; font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); border-radius: 0; } #ywc .card__hashtag:hover, #ywc .detail__hashtag:hover { color: var(--lane-strong); background: transparent; text-decoration: underline; text-underline-offset: 3px; } #ywc .card__hashtag--counselor, #ywc .card__hashtag--reviewed { padding: 1px 8px !important; border-radius: 999px !important; border: 1px solid currentColor !important; background: transparent !important; font-weight: 700 !important; } #ywc .card__hashtag--counselor { color: #7C5CE0 !important; } #ywc .card__hashtag--reviewed { color: #15803D !important; } #ywc.dark .card__hashtag--counselor { color: #B8A4FF !important; } #ywc.dark .card__hashtag--reviewed { color: #6EE7A0 !important; } /* Badges */ #ywc .badge, #ywc .badge--sub, #ywc .badge--team { padding: 3px 8px; font-size: 11.5px; font-weight: 600; border-radius: 6px; background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); } #ywc .badge--type { background: var(--lane-soft); color: var(--lane-strong); border-color: transparent; } /* ── D-day badges (solid = 확정 · dashed = 예상) ─────────────────────── */ #ywc .card__d-day { height: 24px; padding: 0 9px; gap: 4px; font-family: var(--font-num); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; border-radius: 999px; border: 1px solid transparent; background: var(--color-surface-2); color: var(--color-text-secondary); box-shadow: none; opacity: 1; } #ywc .card__d-day--upcoming { background: var(--lane-soft); color: var(--lane-strong); } #ywc .card__d-day--today, #ywc .card__d-day--urgent { background: var(--lane); color: var(--lane-on); } #ywc .card__d-day--ended, #ywc .card__d-day--passed { background: var(--color-surface-2); color: var(--color-text-tertiary); } #ywc .card__d-day--estimated { background: transparent; border: 1.5px dashed var(--lane); color: var(--lane-strong); } #ywc .card__d-day--estimated.card__d-day--urgent { color: var(--lane-strong); background: var(--lane-soft); } #ywc .card__d-day small { font-family: var(--font-sans); font-size: 10px; font-weight: 600; opacity: 0.9; } #ywc .detail__d-day { height: 34px; padding: 0 14px; gap: 6px; font-family: var(--font-num); font-size: 15px; font-weight: 700; border-radius: 999px; border: 1px solid transparent; background: var(--lane-soft); color: var(--lane-strong); } #ywc .detail__d-day small { font-family: var(--font-sans); font-size: 12px; font-weight: 600; opacity: 0.9; } #ywc .detail__d-day--urgent, #ywc .detail__d-day--today { background: var(--lane); color: var(--lane-on); } #ywc .detail__d-day--ended, #ywc .detail__d-day--passed { background: var(--color-surface-2); color: var(--color-text-tertiary); border-color: var(--color-border); } #ywc .detail__d-day--estimated { background: transparent; border: 1.5px dashed var(--lane); color: var(--lane-strong); } /* ── Empty state / hashtag indicator ────────────────────────────────── */ #ywc .empty-state__icon { color: var(--color-border-strong); } #ywc .empty-state__text { color: var(--color-text-primary); font-weight: 700; } #ywc .empty-state__sub { color: var(--color-text-tertiary); } #ywc .hashtag-indicator { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; } #ywc .hashtag-indicator__tag { color: var(--lane-strong); font-weight: 700; } /* ── Detail pages (competition / program / AP / club) ───────────────── */ #ywc .detail-layout { max-width: 880px; padding-top: 28px; } #ywc .detail__back { color: var(--color-text-tertiary); font-weight: 600; } #ywc .detail__back:hover { color: var(--color-text-primary); } #ywc .detail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 36px 40px; box-shadow: none; } #ywc .detail__header { border-bottom: 1px solid var(--color-border-subtle); } #ywc .detail__category-tag { color: var(--color-text-secondary); font-weight: 600; } #ywc .detail__category-icon { color: var(--lane); } #ywc .detail__comp-type { color: var(--color-text-secondary); font-weight: 600; } #ywc .detail__title { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.22; letter-spacing: 0.005em; color: var(--color-text-primary); } #ywc .detail__desc { font-size: 16px; line-height: 1.65; color: var(--color-text-secondary); } #ywc .detail__fav-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border); color: var(--color-text-tertiary); background: transparent; } #ywc .detail__fav-btn:hover { color: var(--lane); border-color: var(--lane); background: var(--lane-soft); } #ywc .detail__fav-btn--active { color: var(--lane); border-color: var(--lane); background: var(--lane-soft); } /* Timeline (road) */ #ywc .progress-tracker__bar { background: var(--color-border); height: 4px; border-radius: 999px; } #ywc .progress-tracker__fill { background: var(--lane); border-radius: 999px; } #ywc .progress-tracker__dot { background: var(--color-surface); border: 2px solid var(--color-border-strong); color: var(--lane-on); } #ywc .progress-tracker__step--done .progress-tracker__dot, #ywc .progress-tracker__step--active .progress-tracker__dot { background: var(--lane); border-color: var(--lane); } #ywc .progress-tracker__label { color: var(--color-text-secondary); font-weight: 600; } #ywc .progress-tracker__step--active .progress-tracker__label, #ywc .progress-tracker__step--done .progress-tracker__label { color: var(--color-text-primary); } #ywc .progress-tracker__date { font-family: var(--font-num); color: var(--color-text-tertiary); font-size: 12px; } #ywc .progress-tracker__status { font-weight: 700; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-primary); border: 1px solid var(--color-border); } #ywc .date-status-note { color: var(--color-text-tertiary); margin: var(--space-2) 0 var(--space-3); line-height: 1.5; } /* Info grid */ #ywc .detail__info-grid { gap: 1px; background: var(--color-border-subtle); border: 1px solid var(--color-border-subtle); border-radius: 12px; overflow: hidden; } #ywc .detail__info-item { background: var(--color-surface); padding: 14px 16px; } #ywc .detail__info-label { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); letter-spacing: 0; text-transform: none; } #ywc .detail__info-value { font-size: 15px; font-weight: 600; color: var(--color-text-primary); } #ywc .detail__body, #ywc .detail__body p { color: var(--color-text-secondary); font-size: 15px; line-height: 1.8; } /* Primary CTA — lane colored */ #ywc .detail__website-link { min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--lane); color: var(--lane-on); font-weight: 700; border: none; box-shadow: none; } #ywc .detail__website-link:hover { background: var(--lane-strong); color: var(--lane-on); text-decoration: none; } /* Pathway box */ #ywc .pathway-box, #ywc .pathway { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 12px; } /* ── Footer ─────────────────────────────────────────────────────────── */ #ywc .footer { border-top: 1px solid var(--color-border-subtle); color: var(--color-text-tertiary); font-family: var(--font-num); font-size: 12px; letter-spacing: 0.08em; background: transparent; } /* Card header row: keep category on one line next to bookmark/flag/D-day */ #ywc .card__category-tags { flex-wrap: nowrap; min-width: 0; overflow: hidden; } #ywc .card__category-tag { white-space: nowrap; min-width: 0; } #ywc .card__category-tag--secondary { overflow: hidden; text-overflow: ellipsis; } #ywc .card__top-right { gap: 6px; flex-shrink: 0; } #ywc .card__comp-type-icon { font-size: 14px; } /* Detail: timeline + info grid panels */ #ywc .progress-tracker { background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); border-radius: 12px; } #ywc .detail__info-grid { padding: 0; } #ywc .detail__info-item { border-radius: 0; } /* Pre-college card: university name wraps naturally (max 2 lines) */ #ywc .card__university-badge { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--color-text-primary); } #ywc .card__university-badge__flag { display: inline; margin-right: 5px; } /* Card hover keeps its surface (legacy dark hover used a flat gray) */ #ywc .card:hover { background: var(--card-bg); } /* ── CSIA: sub-nav, user info ───────────────────────────────────────── */ #ywc .csia-subnav { gap: 4px; } #ywc .csia-subnav__btn { min-height: 42px; border-radius: 10px; color: var(--color-text-secondary); font-weight: 600; } #ywc .csia-subnav__btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); } #ywc .csia-subnav__btn--active, #ywc .csia-subnav__btn--active:hover { background: var(--lane-soft); color: var(--lane-strong); } #ywc .csia-user-info { border-top-color: var(--color-border-subtle); } #ywc .csia-user-info__name { font-family: var(--font-num); color: var(--color-text-secondary); } #ywc .csia-user-info__logout { color: var(--color-text-tertiary); } #ywc .csia-user-info__logout:hover { color: var(--color-text-primary); } /* ── CSIA: AP filter bar ────────────────────────────────────────────── */ #ywc .ap-filter-bar__label { color: var(--color-text-secondary); font-weight: 700; } #ywc .ap-filter-bar__sep { background: var(--color-border); } #ywc .ap-filter-btn, #ywc .club-sort-btn { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-primary); font-size: 13px; font-weight: 500; } #ywc .ap-filter-btn:hover, #ywc .club-sort-btn:hover { background: var(--color-surface-2); } #ywc .ap-filter-btn--active, #ywc .ap-filter-btn--active:hover, #ywc .club-sort-btn--active, #ywc .club-sort-btn--active:hover { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-text-inverse); font-weight: 700; } #ywc .ap-filter-fav-btn { border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-text-secondary); background: transparent; } #ywc .ap-filter-fav-btn--active { color: var(--lane); border-color: var(--lane); background: var(--lane-soft); } /* ── CSIA: AP cards — subject color as a stripe + swatch (calm, unified) ─ */ #ywc .ap-card-grid { gap: 16px; } #ywc .ap-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: none; } #ywc .ap-card:hover { background: var(--card-bg); border-color: var(--color-border-strong); box-shadow: var(--card-shadow-hover); } #ywc .ap-card__header { background: var(--color-surface); border-top: 4px solid var(--subject, var(--lane)); min-height: 86px; padding: 16px 20px 10px; } #ywc .ap-card__ap-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: 11px; letter-spacing: 0.16em; color: var(--color-text-tertiary); } #ywc .ap-card__ap-label::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--subject, var(--lane)); } #ywc .ap-card__name { font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-primary); } #ywc .ap-card__dday { top: 14px; right: 14px; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; font-family: var(--font-num); font-size: 12px; border-radius: 999px; background: var(--lane-soft); color: var(--lane-strong); backdrop-filter: none; opacity: 1; } #ywc .ap-card__dday--urgent { background: var(--lane); color: var(--lane-on); } #ywc .ap-card__dday--ended { background: var(--color-surface-2); color: var(--color-text-tertiary); } #ywc .ap-card__dday--submit { font-family: var(--font-sans); background: transparent; border: 1.5px dashed var(--color-border-strong); color: var(--color-text-secondary); } #ywc .ap-card__body { border-top: 1px solid var(--color-border-subtle); padding-top: 12px; } #ywc .ap-card__name-kr { color: var(--color-text-secondary); } #ywc .ap-card__exam-date { font-family: var(--font-num); font-weight: 600; color: var(--color-text-secondary); } #ywc .ap-card__exam-date svg { color: var(--lane); } #ywc .ap-card__cat-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-secondary); border: 1px solid var(--color-border); background: transparent; opacity: 1; } #ywc .ap-card__cat-tag::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--subject, var(--lane)); } #ywc .ap-card__fav { color: var(--color-text-tertiary); } #ywc .ap-card__fav--active, #ywc .ap-card__fav:hover { color: var(--lane); } /* AP detail blocks */ #ywc .ap-unit { background: var(--color-surface-2); border-color: var(--color-border-subtle); border-radius: 10px; } #ywc .ap-unit__weight { font-family: var(--font-num); color: var(--lane-strong); } #ywc .ap-score__bar-wrap { background: var(--color-surface-2); border-radius: 999px; } #ywc .ap-score__bar { background: var(--lane); border-radius: 999px; } #ywc .ap-score__pct, #ywc .ap-score__label { font-family: var(--font-num); } #ywc .ap-detail-header__title { font-family: var(--font-display); font-weight: 400; } #ywc .ap-detail-section__title { font-weight: 700; color: var(--color-text-primary); } /* ── CSIA: Roadmap ─────────────────────────────────────────────────── */ #ywc .roadmap__table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; } #ywc .rm-th { background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border-subtle); color: var(--color-text-primary); } #ywc .rm-th__cr { font-family: var(--font-num); color: var(--color-text-tertiary); } #ywc .rm-cell { border-right-color: var(--color-border-subtle); border-bottom-color: var(--color-border-subtle); } #ywc .rm-cell--blank, #ywc .rm-cell--req, #ywc .rm-cell--empty, #ywc .rm-cell--filled { background: var(--color-surface); } #ywc .rm-cell--major { border-left-color: var(--color-csblue-500); } #ywc .rm-cr { font-family: var(--font-num); background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border); } #ywc .rm-select { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; color: var(--color-text-primary); } #ywc .roadmap__act-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); } #ywc .roadmap__act-btn:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); } #ywc .rm-mini__grid { border-color: var(--color-border); background: var(--color-border-subtle); border-radius: 12px; } #ywc .rm-mini__col { background: var(--color-surface); } #ywc .rm-mini__col--off { background: var(--color-surface-2); } #ywc .rm-mini__col-head { border-bottom-color: var(--color-border-subtle); font-family: var(--font-num); } #ywc .rm-mini__pick, #ywc .rm-mini__add { background: transparent; border-color: var(--color-border-strong); color: var(--color-text-tertiary); border-radius: 8px; } /* ── Login modal ─────────────────────────────────────────────────────── */ #ywc .csia-login-overlay { background: var(--color-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #ywc .csia-login-modal { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } #ywc .csia-login-modal__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 0.01em; } #ywc .csia-login-modal__close { color: var(--color-text-tertiary); border-radius: 8px; } #ywc .csia-login-form__field label { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); } #ywc .csia-login-form__field input { height: 44px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--color-text-primary); box-shadow: none; } #ywc .csia-login-form__field input:focus { border-color: var(--color-text-secondary); box-shadow: 0 0 0 3px rgba(142, 162, 255, 0.18); outline: none; } #ywc .csia-login-form__submit { height: 46px; border-radius: 10px; background: var(--color-text-primary); color: var(--color-text-inverse); font-weight: 700; } #ywc .csia-login-form__submit:hover { opacity: 0.9; } /* ── Admin UI ───────────────────────────────────────────────────────── */ #ywc .admin-action-btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-secondary); font-size: 12.5px; font-weight: 600; } #ywc .admin-action-btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); } #ywc .edit-input, #ywc .edit-select, #ywc .edit-textarea { background: var(--input-bg); border-color: var(--input-border); color: var(--color-text-primary); border-radius: 8px; } /* Pathway */ #ywc .pathway-box__step-link { background: var(--color-surface); border-color: var(--color-border); border-radius: 10px; color: var(--color-text-primary); } #ywc .pathway-box__step-link:hover { border-color: var(--lane); } #ywc .pc-university-chips { border-top-color: var(--color-border-subtle); } /* ── CSIA: Student club cards — shared surface, club color as stripe/ring ─ */ #ywc .club-card-flip { --club: var(--lane); } #ywc .club-card--cssc { --club: #E2B23A; } #ywc .club-card--quill { --club: #B99A62; } #ywc .club-card--roundsquare { --club: #E8636E; } #ywc .club-card--mun { --club: #4A90D9; } #ywc .club-card-flip .club-card, #ywc .club-card-flip .club-card-flip__back { background: var(--card-bg); border: 1px solid var(--color-border); border-top: 4px solid var(--club); border-radius: 14px; color: var(--color-text-primary); box-shadow: none; } #ywc .club-card-flip:hover .club-card { border-color: var(--color-border-strong); border-top-color: var(--club); box-shadow: var(--card-shadow-hover); } #ywc .club-card::before, #ywc .club-card::after { display: none; animation: none; } #ywc .club-card__logo-area { border: 2px solid var(--club); box-shadow: 0 0 0 5px var(--color-bg); } #ywc .club-card--cssc .club-card__logo-area { background: #1B2A4A; } #ywc .club-card--quill .club-card__logo-area { background: #F5F0E8; } #ywc .club-card--roundsquare .club-card__logo-area { background: #FFFFFF; } #ywc .club-card--mun .club-card__logo-area { background: #0A1E3D; } #ywc .club-card--quill .club-card__logo { filter: none; } #ywc .club-card__name { color: var(--color-text-primary); font-size: 17px; } #ywc .club-card__name-kr { color: var(--color-text-secondary); opacity: 1; } #ywc .club-card__est { font-family: var(--font-num); color: var(--color-text-tertiary); letter-spacing: 0.12em; } #ywc .club-card__desc { color: var(--color-text-secondary); opacity: 1; } #ywc .club-card__door { border: 1px solid var(--color-border-strong); border-radius: 8px; color: var(--color-text-secondary); opacity: 1; } #ywc .club-card__door--active:hover, #ywc .club-card__door:hover { color: var(--color-text-primary); border-color: var(--club); opacity: 1; } #ywc .club-card__door:not(.club-card__door--active) { opacity: 0.55; } #ywc .club-card__award { background: rgba(245, 179, 66, 0.16); color: var(--color-amber-700); border: 1px solid rgba(245, 179, 66, 0.45); box-shadow: none; } #ywc .club-card-back__title { color: var(--color-text-primary); } #ywc .club-card-back__label { color: var(--color-text-tertiary); } #ywc .club-card-back__value, #ywc .club-card-back__desc { color: var(--color-text-secondary); } #ywc .club-card-back__toggle { color: var(--color-text-tertiary); } /* ── About page ─────────────────────────────────────────────────────── */ #ywc .about-hero { background: var(--color-bg); } #ywc .about-hero::before { display: none; } #ywc .about-hero__row { border-bottom-color: var(--color-border-subtle); } #ywc .about-overview { background: var(--color-surface); border-top: 1px solid var(--color-border); } #ywc .about-section-label { font-family: var(--font-num); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-secondary); } #ywc .about-hero__name, #ywc .about-overview__title, #ywc .about-projects__heading { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; color: var(--color-text-primary); } #ywc .about-hero__role { color: var(--color-text-tertiary); font-weight: 600; } #ywc .about-hero__photo img, #ywc .about-hero__photo { border-radius: 14px; } #ywc .about-hero__glow { display: none; } #ywc .about-hero__contact-label { font-family: var(--font-num); letter-spacing: 0.16em; color: var(--color-text-tertiary); } #ywc .about-stats__item { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; } #ywc .about-stats__number { font-family: var(--font-num); font-weight: 700; color: var(--color-text-primary); } #ywc .about-stats__label { color: var(--color-text-tertiary); font-weight: 600; } #ywc .about-projects__item { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; } #ywc .about-progress__line { background: var(--color-border); } #ywc .about-progress__item--active .about-progress__label { color: var(--color-text-primary); } #ywc .about-stats { gap: 12px; } #ywc .about-stats__item { padding: 16px 24px; min-width: 128px; align-items: center; } #ywc .about-projects__item { padding: 14px 18px; gap: 6px; } #ywc .about-projects__label { color: var(--color-text-tertiary); font-family: var(--font-num); } #ywc.dark .about-projects__logo[src*="ywc_logo"] { filter: brightness(0) invert(1) brightness(0.93); } /* ── Mobile (≤768px) ────────────────────────────────────────────────── */ @media (max-width: 768px) { #ywc .mode-nav { padding: 6px; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); } #ywc .mode-nav__btn { min-height: 44px; min-width: 44px; padding: 0 12px; justify-content: center; border-radius: 999px; gap: 0; } #ywc .mode-nav__btn::after { margin-left: 6px; width: 6px; height: 6px; } #ywc .nav__logo { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ywc .nav__tagline { display: none; } #ywc .nav__logo-wrap { min-width: 0; gap: 10px; } #ywc .detail { padding: 24px 20px; border-radius: 14px; } #ywc .detail__title { font-size: 26px; } #ywc .detail__header-top { flex-wrap: wrap; row-gap: 10px; align-items: center; } #ywc .detail__header-right { flex-wrap: wrap; gap: 8px; } #ywc .detail__d-day { white-space: nowrap; height: 30px; font-size: 13px; } #ywc .detail__category-tag, #ywc .detail__comp-type { white-space: nowrap; } #ywc .card { padding: 16px; } } /* ========================================================================== Season Planner (#planner) ========================================================================== */ #ywc .planner-page { padding: 28px var(--space-24) 48px var(--space-8); display: none; flex-direction: column; gap: 22px; } #ywc .planner-page > * + * { margin-top: 22px; } @media (max-width: 1400px) { #ywc .planner-page { padding-right: var(--space-16); padding-left: var(--space-6); } } @media (max-width: 1200px) { #ywc .planner-page { padding-right: var(--space-8); padding-left: var(--space-4); } } #ywc .planner-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } #ywc .planner-head__text { display: flex; flex-direction: column; gap: 8px; } #ywc .planner-head__eyebrow { font-family: var(--font-num); font-size: 12px; letter-spacing: 0.16em; color: var(--color-text-tertiary); } #ywc .planner-head__title { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: 0.01em; color: var(--color-text-primary); } #ywc .planner-head__sub { font-size: 14px; color: var(--color-text-tertiary); } #ywc .planner-legend { display: flex; gap: 16px; font-size: 12px; color: var(--color-text-tertiary); } #ywc .planner-legend__item { display: inline-flex; align-items: center; gap: 6px; } #ywc .planner-legend__bar { width: 22px; height: 10px; border-radius: 3px; background: var(--color-text-tertiary); } #ywc .planner-legend__bar--est { background: transparent; border: 1.5px dashed var(--color-text-tertiary); } #ywc .planner-legend__dot { width: 9px; height: 9px; background: var(--color-text-tertiary); transform: rotate(45deg); } #ywc .planner-interests { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #ywc .planner-interests__label { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); margin-right: 4px; } /* Timeline */ #ywc .planner-timeline { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 14px 20px 10px; --pl-name: 220px; } #ywc .planner-timeline__scroll { overflow-x: auto; } #ywc .planner-timeline__inner { min-width: 880px; } #ywc .planner-timeline__months { display: grid; grid-template-columns: var(--pl-name) minmax(0, 1fr); border-bottom: 1px solid var(--color-border); padding-bottom: 8px; } #ywc .pl-months__grid { display: grid; } #ywc .pl-month { display: flex; flex-direction: column; gap: 1px; padding-left: 6px; border-left: 1px solid var(--color-border); } #ywc .pl-month strong { font-size: 13px; font-weight: 700; color: var(--color-text-primary); } #ywc .pl-month em { font-style: normal; font-family: var(--font-num); font-size: 10px; letter-spacing: 0.1em; color: var(--color-text-tertiary); } #ywc .planner-timeline__body { position: relative; } #ywc .planner-timeline__today { position: absolute; top: 0; bottom: 0; left: calc(var(--pl-name) + (100% - var(--pl-name)) * var(--pl-today, 0)); width: 2px; background: var(--color-text-primary); opacity: 0.85; z-index: 0; pointer-events: none; } #ywc .planner-timeline__today span { position: absolute; top: 8px; left: 6px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--color-text-primary); color: var(--color-text-inverse); white-space: nowrap; } #ywc .pl-lane { border-bottom: 1px solid var(--color-border); padding: 8px 0 6px; position: relative; z-index: 1; } #ywc .pl-lane:last-child { border-bottom: none; } #ywc .pl-lane__head { display: flex; align-items: center; gap: 8px; height: 26px; font-size: 14px; } #ywc .pl-lane__head strong { font-weight: 700; color: var(--color-text-primary); } #ywc .pl-lane__count { font-size: 12px; color: var(--color-text-tertiary); font-family: var(--font-num); } #ywc .pl-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--pl-color); flex-shrink: 0; display: inline-block; } #ywc .pl-row { display: grid; grid-template-columns: var(--pl-name) minmax(0, 1fr); align-items: center; min-height: 32px; } #ywc .pl-row__name { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); padding: 0 14px 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } #ywc a.pl-row__name:hover { color: var(--color-text-primary); text-decoration: none; } #ywc .pl-row--empty .pl-row__name { font-weight: 500; color: var(--color-text-tertiary); grid-column: 1 / -1; white-space: normal; } #ywc .pl-row--preview .pl-row__name { color: var(--color-text-tertiary); } #ywc .pl-row__track { position: relative; height: 32px; overflow: hidden; } #ywc .pl-bar { position: absolute; top: 7px; height: 18px; border-radius: 4px; background: var(--pl-color); box-sizing: border-box; } #ywc .pl-bar--est { background: transparent; border: 1.5px dashed var(--pl-color); } #ywc .pl-row--preview .pl-bar { opacity: 0.55; } #ywc .pl-dot { position: absolute; top: 10px; width: 12px; height: 12px; margin-left: -6px; box-sizing: border-box; transform: rotate(45deg); background: var(--pl-color); } #ywc .pl-dot--est { background: var(--color-surface); border: 2px solid var(--pl-color); } /* Panels */ #ywc .planner-panels { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } #ywc .planner-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 18px 20px; min-width: 0; } #ywc .planner-panel__title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px; } #ywc .planner-panel__title small { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); margin-left: 4px; } #ywc .planner-list { display: flex; flex-direction: column; } #ywc .pl-empty { font-size: 13px; line-height: 1.6; color: var(--color-text-tertiary); padding: 8px 0; } #ywc .pl-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; min-height: 42px; border-bottom: 1px solid var(--color-border-subtle); text-decoration: none; color: var(--color-text-primary); font-size: 13px; } #ywc .pl-item:last-child { border-bottom: none; } #ywc .pl-item:hover { text-decoration: none; background: var(--color-surface-2); } #ywc .pl-item__date { font-family: var(--font-num); font-weight: 700; } #ywc .pl-item__main { display: flex; align-items: center; gap: 8px; min-width: 0; } #ywc .pl-item__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ywc .pl-tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); white-space: nowrap; } #ywc .pl-tag--est { border-style: dashed; } #ywc .pl-tag--plan { border-color: transparent; background: var(--color-text-primary); color: var(--color-text-inverse); } #ywc .pl-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 8px; align-items: center; padding: 10px 10px 10px 14px; margin-bottom: 8px; border-radius: 10px; background: var(--color-surface-2); } #ywc .pl-plan__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; color: var(--color-text-primary); } #ywc .pl-plan__main:hover { text-decoration: none; } #ywc .pl-plan__top { display: flex; align-items: center; gap: 8px; min-width: 0; } #ywc .pl-plan__top strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ywc .pl-plan__next { font-size: 12px; color: var(--color-text-tertiary); padding-left: 18px; } #ywc .pl-plan__dd { font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--pl-color); } #ywc .pl-plan__remove { width: 32px; height: 32px; border-radius: 8px; color: var(--color-text-tertiary); display: inline-flex; align-items: center; justify-content: center; } #ywc .pl-plan__remove:hover { background: var(--color-surface); color: var(--color-text-primary); } #ywc .pl-suggest { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); } #ywc .pl-suggest:last-child { border-bottom: none; } #ywc .pl-suggest__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-decoration: none; } #ywc .pl-suggest__main:hover { text-decoration: none; } #ywc .pl-suggest__main strong { font-size: 14px; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ywc .pl-suggest__main span { font-size: 12px; color: var(--color-text-tertiary); } #ywc .pl-suggest__add { flex-shrink: 0; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--color-border-strong); color: var(--color-text-primary); font-size: 13px; font-weight: 600; } #ywc .pl-suggest__add:hover { background: var(--color-surface-2); } @media (max-width: 1100px) { #ywc .planner-panels { grid-template-columns: 1fr; } } @media (max-width: 768px) { #ywc .planner-page { padding: 18px 12px 96px; margin-left: 0; } #ywc .planner-head__title { font-size: 30px; } #ywc .planner-timeline { --pl-name: 140px; padding: 12px; } #ywc .planner-legend { display: none; } } /* ── AP / club detail headers: neutral surface + subject/club stripe ─── */ #ywc .ap-detail-header { background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); border-top: 4px solid var(--subject, var(--lane)); border-radius: 12px; color: var(--color-text-primary); } #ywc .ap-detail-header__icon { color: var(--subject, var(--lane)); opacity: 1; } #ywc .ap-detail-header__label { font-family: var(--font-num); letter-spacing: 0.16em; color: var(--color-text-tertiary); } #ywc .ap-detail-header__title { color: var(--color-text-primary); } #ywc .ap-detail-header__title-kr { color: var(--color-text-secondary); } #ywc .club-detail__header { --club: var(--lane); background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); border-top: 4px solid var(--club); border-radius: 12px; color: var(--color-text-primary); } #ywc .club-detail__header[data-club="cssc"] { --club: #E2B23A; } #ywc .club-detail__header[data-club="quill"] { --club: #B99A62; } #ywc .club-detail__header[data-club="roundsquare"] { --club: #E8636E; } #ywc .club-detail__header[data-club="mun"] { --club: #4A90D9; } #ywc .club-detail__logo-wrap { background: var(--club-plate, #FFFFFF); border: 2px solid var(--club); } #ywc .club-detail__header[data-club="roundsquare"] .club-detail__logo-wrap { background: #FFFFFF; } #ywc .club-detail__header[data-club="quill"] .club-detail__logo-wrap { background: #F5F0E8; } #ywc .club-detail__header[data-club="quill"] .club-detail__logo { filter: none; } #ywc .club-detail__category { color: var(--color-text-tertiary); font-weight: 600; } #ywc .club-detail__name-kr { color: var(--color-text-secondary); } /* Info grid lines via cell borders (empty trailing cell stays surface) */ #ywc .detail__info-grid { gap: 0; background: var(--color-surface); border: 1px solid var(--color-border-subtle); overflow: hidden; } #ywc .detail__info-item { margin: 0 -1px -1px 0; border-right: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); } /* ========================================================================== Deployed-site components (2026-09-26 port onto deploy-latest) AI search · intro · summer list/detail · CSIA GPA/onboarding · auth ========================================================================== */ /* ── Shared page headings: display face + mono eyebrow ─────────────────── */ #ywc .spl-intro__title, #ywc .mp-intro__title, #ywc .csia-intro__title, #ywc .sp__title, #ywc .ai-hero__title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; color: var(--color-text-primary); } #ywc .spl-intro__title, #ywc .mp-intro__title, #ywc .csia-intro__title { font-size: 32px; line-height: 1.15; margin-bottom: 8px; } #ywc .spl-intro__sub, #ywc .mp-intro__sub, #ywc .csia-intro__sub { color: var(--color-text-secondary); } #ywc .spl-intro__sub b { color: var(--color-text-primary); } /* deadline ticker */ #ywc .deadline-banner { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--lane); border-radius: 10px; box-shadow: none; } #ywc .deadline-banner:hover { box-shadow: none; border-color: var(--color-border-strong, var(--color-border)); border-left-color: var(--lane); } #ywc .deadline-banner__badge { color: var(--lane); font-weight: 700; } #ywc .deadline-banner__name { color: var(--color-text-primary); } #ywc .deadline-banner__dday { background: var(--lane-soft); color: var(--lane); font-family: var(--font-num); font-weight: 700; border-radius: 6px; } #ywc .deadline-banner__dot.is-active { background: var(--lane); } #ywc .deadline-banner:hover .deadline-banner__arrow { color: var(--lane); } /* popular / recommend / featured strips */ #ywc .popular-strip__title, #ywc .ai-recommend-strip__title, #ywc .featured-section__title { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0; } #ywc .popular-strip__hint, #ywc .ai-recommend-strip__hint { color: var(--color-text-tertiary); } #ywc .popular-card, #ywc .ai-recommend-card, #ywc .featured-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: none; } #ywc .popular-card:hover, #ywc .ai-recommend-card:hover, #ywc .featured-card:hover { border-color: var(--color-border-strong, var(--color-border)); box-shadow: var(--card-shadow-hover); } /* results header + one-line summary */ #ywc .ai-results-head__count { color: var(--color-text-secondary); font-family: var(--font-num); } #ywc .ai-results-head__back { border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text-secondary); } #ywc .ai-results-head__back:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); } #ywc .ai-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--lane); border-radius: 10px; color: var(--color-text-primary); } #ywc .ai-summary__spark { color: var(--lane); } /* D-day "예상" marker (cards, summer list) */ #ywc .card__d-day small, #ywc .spl-dday small, #ywc .sp__stat-est { margin-left: 4px; font-family: var(--font-sans); font-size: 10px; font-weight: 600; opacity: 0.8; } #ywc .card__d-day--est, #ywc .spl-dday--est { border-style: dashed; } #ywc .card__d-day--rolling { background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border); } /* ── YWC intro: same navy surfaces, no aurora ──────────────────────────── */ #ywc .ywc2, body#ywc.dark .ywc2 { --s-card: var(--color-surface); --s-card-solid: var(--color-surface-2); --s-sunken: var(--color-bg); --s-hairline: var(--color-border); --s-lip: transparent; --t-strong: var(--color-text-primary); --t-body: var(--color-text-secondary); --t-faint: var(--color-text-tertiary); --brand: var(--lane); color: var(--color-text-primary); border-top: 1px solid var(--color-border); margin-top: 24px; padding-top: 56px; } #ywc .ywc2__aurora, #ywc .ywc2__grain, #ywc .ywc2__header::before { display: none; } #ywc .ywc2__eyebrow { font-family: var(--font-num); letter-spacing: 0.22em; color: var(--color-text-tertiary); } #ywc .ywc2__title, #ywc .ywc2-feat__title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; } #ywc .ywc2__title { font-size: clamp(30px, 4vw, 46px); line-height: 1.2; } #ywc .ywc2-feat__title { font-size: clamp(22px, 2.4vw, 28px); } #ywc .ywc2-feat__panel { border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } #ywc .ywc2-feat__glare { display: none; } #ywc .ywc2-feat__media::before { opacity: 0.08; } #ywc .ywc2-feat__index { font-family: var(--font-num); border-radius: 8px; } /* per-feature accents from the lane palette */ #ywc .ywc2-feat[data-feat="verified"] { --accent: var(--color-teal-500); } #ywc .ywc2-feat[data-feat="search"] { --accent: var(--color-accent-500); } #ywc .ywc2-feat[data-feat="reco"] { --accent: var(--color-csblue-500); } #ywc .ywc2-feat[data-feat="allinone"] { --accent: var(--color-amber-500); } /* ── Pre-college summer list (.spl) ────────────────────────────────────── */ #ywc .spl-tabs { border-bottom-color: var(--color-border); } #ywc .spl-tab { color: var(--color-text-tertiary); font-weight: 600; } #ywc .spl-tab:hover { color: var(--color-text-primary); } #ywc .spl-tab--active { color: var(--color-text-primary); border-bottom-color: var(--lane); } #ywc .spl-tab--active .spl-tab__n { color: var(--lane); background: var(--lane-soft); border-color: transparent; } #ywc .spl-card { border-radius: 12px; border-color: var(--card-border); border-left-width: 3px; box-shadow: none; } #ywc .spl-card-link:hover .spl-card { border-color: var(--color-border-strong, var(--color-border)); border-left-color: var(--tier-rail); box-shadow: var(--card-shadow-hover); } #ywc .spl-card--t1 { --tier-rail: var(--lane); } #ywc .spl-card__title { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; } #ywc .spl-card__abbr { font-family: var(--font-num); letter-spacing: 0.04em; } #ywc .spl-dday { font-family: var(--font-num); border-radius: 6px; } /* ── Summer detail (.sp) ───────────────────────────────────────────────── */ #ywc .sp { --sp-accent: var(--lane); --sp-accent-soft: var(--lane-soft); --sp-rule: var(--color-border); --sp-tier2: var(--lane); --sp-tier2-bg: var(--lane-soft); } #ywc .sp__eyebrow { font-family: var(--font-num); letter-spacing: 0.22em; color: var(--lane); } #ywc .sp__title { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; } #ywc .sp__cta { background: var(--lane); color: var(--lane-on); border-radius: 10px; font-weight: 700; } #ywc .sp__cta:hover { background: var(--lane-strong); } #ywc .sp__summary { background: var(--color-surface); border-radius: 14px; } #ywc .sp__stat { background: var(--color-surface-2); } #ywc .sp__stat-label { font-family: var(--font-num); letter-spacing: 0.14em; } #ywc .sp__stat--dday .sp__stat-value { font-family: var(--font-num); } #ywc .sp__h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; font-size: 24px; } #ywc .sp__table th { background: var(--color-surface-2); } /* ── CSIA: AP cards keep only a subject stripe ─────────────────────────── */ #ywc .ap-card__header { background: var(--color-surface) !important; } #ywc .ap-card__motif { color: var(--subject, var(--lane)); opacity: 0.16; } #ywc .ap-card__toprow { margin-bottom: 4px; } #ywc .ap-card__toprow .ap-card__dday { position: static; } #ywc .ap-materials-badge { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: 6px; } /* ── CSIA: nested submenu in the left rail ─────────────────────────────── */ #ywc .mode-nav__sub { border-left-color: var(--color-border); } #ywc .mode-nav__sub-btn { color: var(--color-text-secondary); border-radius: 8px; } #ywc .mode-nav__sub-btn:hover { color: var(--color-text-primary); background: var(--color-surface); } #ywc .mode-nav__sub-btn.csia-subnav__btn--active { color: var(--color-text-primary); background: var(--color-surface); font-weight: 700; } /* ── CSIA: GPA calculator ──────────────────────────────────────────────── */ #ywc .gpa__summary { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--lane); border-radius: 12px; } #ywc .gpa-sum__value, #ywc .gpa-th__gpa { color: var(--lane); font-family: var(--font-num); } #ywc .gpa__table-wrap { border-color: var(--color-border); border-radius: 12px; background: var(--color-surface); } #ywc .gpa-th { background: var(--color-surface-2); border-bottom-color: var(--color-border); border-right-color: var(--color-border); } #ywc .gpa-th__id { font-family: var(--font-num); } #ywc .gpa-col { border-right-color: var(--color-border); } #ywc .gpa-course { border-left-color: var(--color-border); } #ywc .gpa-course + .gpa-course { border-top-color: var(--color-border-subtle, var(--color-border)); } #ywc .gpa-course--graded { border-left-color: var(--lane); } #ywc .gpa-course__cr, #ywc .gpa-grade { border-color: var(--color-border); background: var(--color-surface-2); color: var(--color-text-primary); border-radius: 6px; } #ywc .gpa-course--graded .gpa-grade { color: var(--lane); border-color: var(--lane); } #ywc .gpa__scale-item { background: var(--lane-soft); color: var(--lane); border-color: transparent; font-family: var(--font-num); } #ywc .gpa__reset-btn { border-color: var(--color-border); color: var(--color-text-secondary); border-radius: 8px; } /* ── Onboarding dialogs (AP / GPA first visit) ─────────────────────────── */ #ywc .onb__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; color: var(--color-text-primary); } #ywc .onb__backdrop { background: rgba(7, 11, 20, 0.62); } /* ── Auth: signup + welcome dialogs ────────────────────────────────────── */ #ywc .auth-modal, #ywc .welcome-modal { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; } #ywc .auth-modal__title, #ywc .welcome-modal__title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; } #ywc .auth-modal__submit, #ywc .welcome-modal__btn { background: var(--lane); color: var(--lane-on); border-radius: 10px; font-weight: 700; } #ywc .auth-modal__switch-link { color: var(--lane); } #ywc .auth-choice-grid label { border-color: var(--color-border); border-radius: 8px; } #ywc .auth-choice-grid label:has(input:checked) { border-color: var(--lane); background: var(--lane-soft); color: var(--color-text-primary); } #ywc .welcome-modal__disc { fill: var(--lane); } #ywc .welcome-modal__ring { color: var(--lane); } #ywc .nav__auth-signup { background: var(--lane); color: var(--lane-on); border-radius: 10px; font-weight: 700; } #ywc .nav__auth-login { color: var(--color-text-secondary); } #ywc .nav__auth-login:hover { color: var(--color-text-primary); } /* ── My Plan = season planner (timeline on top, plan list + side panels) ── */ #ywc .layout--myplan .content { width: 100%; } #ywc .content--myplan .planner-page.mp { display: flex; max-width: 1240px; margin: 0 auto; padding: 8px 0 48px; } #ywc .planner-panels--myplan { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } #ywc .planner-panels__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } #ywc .planner-panel--plan .planner-panel__title { display: flex; align-items: baseline; gap: 8px; } #ywc .planner-panel--plan .mp-count { margin: 0; font-family: var(--font-num); font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); } #ywc .mp-controls { border-bottom-color: var(--color-border); padding: 2px 0 12px; gap: 8px 12px; } #ywc .mp-ctl__label { font-size: 12px; color: var(--color-text-tertiary); } #ywc .mp-export { border-color: var(--color-border); color: var(--color-text-secondary); border-radius: 8px; margin-left: auto; } #ywc .mp-export:hover:not(:disabled) { color: var(--color-text-primary); border-color: var(--color-text-primary); background: transparent; } #ywc .mp-band { margin: 18px 0 8px; } #ywc .mp-band__ord { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--color-text-primary); } #ywc .mp-band__hint, #ywc .mp-band__n { color: var(--color-text-tertiary); font-family: var(--font-num); font-size: 11px; } #ywc .mp-band__line { background: var(--color-border); } #ywc .mp-band--week .mp-band__dot { background: var(--color-accent-500); } #ywc .mp-row { background: var(--color-surface-2); border-color: var(--color-border); border-radius: 10px; box-shadow: none; } #ywc .mp-row--comp { --mp-rail: var(--color-accent-500); } #ywc .mp-row--summer { --mp-rail: var(--color-teal-500); } #ywc .mp-row-link:hover .mp-row { border-color: var(--color-border-strong, var(--color-border)); box-shadow: none; } #ywc .mp-row__date-m { font-family: var(--font-num); font-weight: 700; color: var(--color-text-primary); } #ywc .mp-row__date-w { font-family: var(--font-num); color: var(--color-text-tertiary); } #ywc .mp-row__title { font-weight: 700; color: var(--color-text-primary); font-family: var(--font-sans); } #ywc .mp-row__abbr { font-family: var(--font-num); color: var(--color-text-tertiary); } #ywc .mp-act { border-color: var(--color-border); color: var(--color-text-tertiary); border-radius: 8px; } #ywc .mp-act:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); } #ywc .mp-empty { padding: 28px 12px; } #ywc .mp-empty__go { border-color: var(--color-border); border-radius: 10px; } #ywc .mp-empty__go:hover { border-color: var(--color-text-primary); } @media (max-width: 1100px) { #ywc .planner-panels--myplan { grid-template-columns: 1fr; } } @media (max-width: 768px) { #ywc .content--myplan .planner-page.mp { padding: 4px 0 96px; } } /* ── Mobile polish for deployed components ─────────────────────────────── */ @media (max-width: 768px) { /* search: input on top, one joined action row below */ #ywc .ai-search-submit-group { flex-basis: 100%; margin-top: 6px; } #ywc .ai-search-submit-group .ai-search-panel__submit { flex: 1 1 auto; margin-top: 0; justify-content: center; } #ywc .theme-toggle, #ywc #themeToggle { flex-shrink: 0; width: 40px; height: 40px; } } @media (max-width: 480px) { /* the page heading already names the mode — keep the bar to logo + account */ #ywc .nav__logo { display: none; } #ywc .nav__auth-signup { padding: 0 12px; height: 36px; } #ywc .nav__auth-login { padding: 0 6px; } } /* signup button uses the mode lane; no stray outline in neutral (My Plan) mode */ #ywc .nav__auth-signup { border: 0; } /* ========================================================================== 2026-09-26 피드백 반영 - 상단 YWC 로고 옆 모드 제목 제거 (페이지 제목과 중복) - 좌측 모드 메뉴의 색 점 제거 - 과한 굵기(디스플레이 서체) 대신 Pretendard 600~700 - AI 검색창 이중 테두리 제거 ========================================================================== */ #ywc .nav__logo, #ywc .nav__tagline { display: none; } #ywc .mode-nav__btn::after { display: none; } #ywc .nav__logo-wrap, #ywc .spl-intro__title, #ywc .mp-intro__title, #ywc .csia-intro__title, #ywc .sp__title, #ywc .ai-hero__title, #ywc .detail__title, #ywc .planner-head__title, #ywc .ap-detail-header__title, #ywc .csia-login-modal__title, #ywc .about-hero__name, #ywc .about-overview__title, #ywc .about-projects__heading { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; } #ywc .detail__title { font-size: 28px; line-height: 1.3; } #ywc .sp__title { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.25; } #ywc .planner-head__title { font-size: 30px; line-height: 1.2; } #ywc .spl-intro__title, #ywc .mp-intro__title, #ywc .csia-intro__title { font-size: 26px; line-height: 1.3; } #ywc .ap-detail-header__title { font-size: 26px; } #ywc .popular-strip__title, #ywc .ai-recommend-strip__title, #ywc .featured-section__title, #ywc .ywc2__title, #ywc .ywc2-feat__title, #ywc .sp__h2, #ywc .auth-modal__title, #ywc .welcome-modal__title, #ywc .mp-band__ord { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; } #ywc .popular-strip__title, #ywc .ai-recommend-strip__title, #ywc .featured-section__title { font-size: 19px; } #ywc .ywc2__title { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.3; } #ywc .ywc2-feat__title { font-size: clamp(19px, 2vw, 23px); } #ywc .sp__h2 { font-size: 21px; } #ywc .mp-band__ord { font-size: 14px; } #ywc .detail__d-day, #ywc .card__d-day, #ywc .spl-dday, #ywc .ap-card__dday, #ywc .deadline-banner__dday { font-weight: 600; } /* AI 검색창: 바깥 상자 하나만 포커스 표시 (입력칸 자체 테두리/외곽선 없음) */ #ywc .ai-search-panel__input, #ywc .ai-search-panel__input:focus, #ywc .ai-search-panel__input:focus-visible { border: 0; outline: none; box-shadow: none; background: transparent; } #ywc .ai-search-panel__submit:focus-visible, #ywc .ai-search-panel__mode-toggle:focus-visible { outline-offset: -3px; } /* ── AP Courses: 노션 학습 자료 신청 박스 (과목 상세 페이지 대신 한 곳에서 신청) ── */ #ywc .ap-mat { margin: 4px 0 20px; padding: 18px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; } #ywc .ap-mat__title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 4px; } #ywc .ap-mat__sub { font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; } #ywc .ap-mat__form { display: flex; gap: 8px; max-width: 560px; margin-top: 14px; } #ywc .ap-mat__input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; background: var(--color-surface-2); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 10px; font: inherit; font-size: 14px; } #ywc .ap-mat__input::placeholder { color: var(--color-text-tertiary); } #ywc .ap-mat__input:focus { outline: none; border-color: var(--lane); box-shadow: 0 0 0 3px var(--lane-soft); } #ywc .ap-mat__submit { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer; background: #111827; color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 700; } #ywc .ap-mat__submit:hover { background: #000000; } #ywc.dark .ap-mat__submit { background: #05070C; color: #FFFFFF; box-shadow: inset 0 0 0 1px var(--color-border-strong); } #ywc.dark .ap-mat__submit:hover { background: #000000; } #ywc .ap-mat__submit:disabled { opacity: 0.6; cursor: default; } #ywc .ap-mat__msg { margin: 8px 0 0; font-size: 12px; color: var(--color-text-tertiary); } #ywc .ap-mat__msg--ok { color: var(--color-success-600); font-weight: 600; } #ywc .ap-mat__msg--err { color: var(--color-error-600); font-weight: 600; } #ywc .ap-mat__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #ywc .ap-mat-hint { margin: 16px 0 18px; padding: 10px 14px; font-size: 13px; color: var(--color-text-secondary); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 10px; } #ywc .ap-mat-hint a { color: var(--lane); font-weight: 600; } @media (max-width: 560px) { #ywc .ap-mat__form { flex-direction: column; } #ywc .ap-mat__submit { width: 100%; } } /* ── 2026-09-26 2차 피드백: 예전 첫 화면 복원 ───────────────────────────── - AI 검색 첫 화면(토글·히어로·남색 검색바·예시칩)은 원래 디자인(style.css) 그대로 - 제목은 예전 명조(Noto Serif KR) - 대회 카드는 카테고리별 왼쪽 색 띠 */ #ywc .card[data-cat] { border-left: 3px solid var(--cat-fg, var(--card-border)); } #ywc .card[data-cat]:hover { border-left-color: var(--cat-fg, var(--card-border)); } #ywc.dark .ai-search-panel__submit, #ywc.dark .ai-search-panel__mode-toggle { background: #6366F1; color: #FFFFFF; } #ywc.dark .ai-search-panel__submit:hover, #ywc.dark .ai-search-panel__mode-toggle:hover { background: #4F46E5; } /* ── 2026-09-26 3차 피드백 ─────────────────────────────────────────────── */ /* 노션 학습 자료 박스: 노션 아이콘 */ #ywc .ap-mat__head { display: flex; align-items: flex-start; gap: 14px; } #ywc .ap-mat__icon { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 10px; } #ywc .ap-mat__icon svg { width: 22px; height: 23px; } /* 회원가입 버튼: 모드와 무관하게 항상 검정 */ #ywc .nav__auth-signup, #ywc .nav__auth-signup:hover { background: #111827; color: #FFFFFF; border: 1px solid #111827; } #ywc .nav__auth-signup:hover { background: #000000; } #ywc.dark .nav__auth-signup, #ywc.dark .nav__auth-signup:hover { background: #05070C; border-color: var(--color-border-strong); color: #FFFFFF; } /* 상세 정보칸: 두 줄 배치일 때 가운데 구분선, 항목 수가 홀수면 마지막 칸을 가로 전체로 */ #ywc .detail__info-grid { gap: 0; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: 12px; overflow: hidden; } #ywc .detail__info-item { margin: 0 0 -1px 0; border-right: 0; border-bottom: 1px solid var(--color-border-subtle); } @media (min-width: 1025px) { #ywc .detail__info-item--left { border-right: 1px solid var(--color-border-subtle); } #ywc .detail__info-item--wide { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--color-border-subtle); } } /* 상세 해시태그: 작은 알약형 태그 */ #ywc .detail__hashtags { display: flex; flex-wrap: wrap; gap: 6px; } #ywc .detail__hashtag { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-secondary); font-size: 12px; font-weight: 500; text-decoration: none; } #ywc .detail__hashtag:hover { border-color: var(--lane); color: var(--lane); background: var(--lane-soft); text-decoration: none; } #ywc .detail__hashtag--counselor { color: #7C5CE0; border-color: rgba(124, 92, 224, 0.4); background: rgba(124, 92, 224, 0.08); font-weight: 700; } #ywc .detail__hashtag--reviewed { color: #15803D; border-color: rgba(21, 128, 61, 0.35); background: rgba(21, 128, 61, 0.08); font-weight: 700; } #ywc.dark .detail__hashtag--counselor { color: #B8A4FF; } #ywc.dark .detail__hashtag--reviewed { color: #6EE7A0; } /* ── 디자인 피드백 4차 ── */ /* AI 검색 첫 화면: 보기 전환 토글과 제목 사이 간격 축소 */ #ywc .ai-hero { margin-top: 0; padding-top: 8px; } /* 로드맵: 소인수 강좌 영역이 바깥 상자 테두리에 붙어 삐져나와 보이던 것 — 안쪽 여백 추가 */ #ywc .roadmap__table-wrap .rm-mini { margin-top: 0; padding: 16px; border-top: 1px solid var(--color-border-subtle); } #ywc .rm-mini__header { margin-bottom: 12px; } #ywc .rm-mini__hint { font-size: 11px; } /* ── Roadmap: 커리큘럼 출처·정확도 안내 ── */ #ywc .roadmap__notice { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); } #ywc .roadmap__notice svg { flex: none; color: var(--color-text-tertiary); } /* ── My Plan: 로그인 전 안내 ── */ #ywc .planner-gate { display: none; } #ywc .content--myplan.is-locked .planner-page { display: none; } #ywc .content--myplan.is-locked .planner-gate { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 520px; margin: 72px auto; padding: 40px 32px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; } #ywc .planner-gate__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--color-surface-2); color: var(--color-text-secondary); margin-bottom: 16px; } #ywc .planner-gate__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 8px; } #ywc .planner-gate__sub { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 22px; } #ywc .planner-gate__actions { display: flex; gap: 8px; } #ywc .planner-gate__login, #ywc .planner-gate__signup { height: 42px; padding: 0 20px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } #ywc .planner-gate__login { background: #111827; color: #FFFFFF; border: 1px solid #111827; } #ywc .planner-gate__login:hover { background: #000000; } #ywc.dark .planner-gate__login { background: #05070C; border-color: var(--color-border-strong); } #ywc .planner-gate__signup { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-strong); } #ywc .planner-gate__signup:hover { background: var(--color-surface-2); } @media (max-width: 768px) { #ywc .content--myplan.is-locked .planner-gate { margin: 32px auto; padding: 32px 20px; } } /* AP 상세: 점수 분포 출처 안내 */ #ywc .ap-scores__src { margin: -4px 0 12px; font-size: 12px; line-height: 1.5; color: var(--color-text-tertiary); } /* 대회 그리드: 필터 칸을 목록 높이만큼 늘려 스크롤해도 필터가 화면에 붙어 있게 (sticky가 움직일 공간 확보) */ @media (min-width: 769px) { #ywc .competition-body--grid #sidebar { align-self: stretch; } } /* #카운슬러추천 태그는 방문자에게 숨김 (관리자 화면·해시태그 편집기에서는 그대로) */ #ywc:not([data-admin="1"]) .card__hashtag--counselor, #ywc:not([data-admin="1"]) .detail__hashtag--counselor { display: none; }