/* =========================================================================== 행간(行間) — 디자인 시스템 --------------------------------------------------------------------------- 구조 1. 토큰 : 스킨 3종 × 라이트/다크 팔레트. 색은 전부 여기서만 정의합니다. 2. 기본 : reset, 타이포 스케일, 접근성 3. 셸 : 상태바 / 앱바 / 탭바 / 드로어 4. 컴포넌트 : 카드, 선택지, 통계, 어휘장, 히트맵 … 5. 화면별 : 홈 / 훈련 / 학습 / 결과 / 어휘장 / 기록 / 설정 컴포넌트 CSS는 절대 하드코딩 색을 쓰지 않고 토큰(var(--ink) 등)만 참조합니다. 그래서 한 글자만 바꾸면 앱 전체 인상이 통째로 바뀝니다. =========================================================================== */ /* ========================================================================= 1. 토큰 ========================================================================= */ :root { /* 타이포 스케일 — 설정의 '글자 크기'가 --fs 배율만 바꿉니다 */ --fs: 1; --t-2xs: calc(10px * var(--fs)); --t-xs: calc(11.5px * var(--fs)); --t-sm: calc(13px * var(--fs)); --t-base: calc(14.5px * var(--fs)); --t-md: calc(16px * var(--fs)); --t-lg: calc(19px * var(--fs)); --t-xl: calc(23px * var(--fs)); --t-2xl: calc(29px * var(--fs)); --t-3xl: calc(44px * var(--fs)); /* 간격 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* 스킨이 채워 넣는 값들의 기본값 (정석 라이트와 동일) */ --font-display: "Pretendard", "Apple SD Gothic Neo", sans-serif; --font-body: "Pretendard", "Apple SD Gothic Neo", sans-serif; --font-label: "IBM Plex Mono", monospace; --tracking-display: -0.035em; --tracking-body: -0.012em; --tracking-label: 0.1em; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --pill: 999px; --shadow-card: none; --shadow-pop: 0 20px 50px rgba(16, 22, 31, 0.16); --grid-line: transparent; } /* ---------- 스킨 A · 정석(定石) : 문제집 · 흰 지면 · 남색 · 괘선 ---------- 그림자를 쓰지 않습니다. 위계를 전부 1px 괘선과 여백으로만 만듭니다. 문항 번호·통계는 모노 숫자로 찍어 시험지 인상을 냅니다. */ [data-skin="jeongseok"] { --font-display: "Pretendard", "Apple SD Gothic Neo", sans-serif; --font-body: "Pretendard", "Apple SD Gothic Neo", sans-serif; --font-label: "IBM Plex Mono", monospace; --tracking-display: -0.035em; --tracking-body: -0.012em; --tracking-label: 0.1em; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --shadow-card: none; } [data-skin="jeongseok"], [data-skin="jeongseok"][data-theme="light"] { --paper: #eceff4; --surface: #ffffff; --surface-2: #e3e8ef; --line: #d5dce5; --line-strong: #97a4b4; --ink: #0e141d; --ink-2: #47546a; --ink-3: #7d8b9d; --accent: #1948b4; --accent-ink: #ffffff; --accent-soft: #dee8fb; --ok: #0f7a4d; --ok-soft: #d8f0e3; --bad: #cd2f2f; --bad-soft: #fadedd; --grid-line: transparent; --shadow-pop: 0 20px 50px rgba(14, 20, 29, 0.18); } @media (prefers-color-scheme: dark) { [data-skin="jeongseok"] { --paper: #0f131a; --surface: #171c25; --surface-2: #1f2531; --line: #2a323e; --line-strong: #4b5765; --ink: #e9eef5; --ink-2: #9aa8b9; --ink-3: #6c7a8b; --accent: #6f9dfb; --accent-ink: #0a1020; --accent-soft: #16233c; --ok: #3fbd85; --ok-soft: #10281e; --bad: #f4685f; --bad-soft: #2c1716; --grid-line: transparent; --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.6); } } [data-skin="jeongseok"][data-theme="dark"] { --paper: #0f131a; --surface: #171c25; --surface-2: #1f2531; --line: #2a323e; --line-strong: #4b5765; --ink: #e9eef5; --ink-2: #9aa8b9; --ink-3: #6c7a8b; --accent: #6f9dfb; --accent-ink: #0a1020; --accent-soft: #16233c; --ok: #3fbd85; --ok-soft: #10281e; --bad: #f4685f; --bad-soft: #2c1716; --grid-line: transparent; --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.6); } /* ---------- 스킨 B · 탐험(探險) : 게임 · 보라 · 두툼한 하드 섀도 ---------- --shadow-card가 blur 0짜리 하드 오프셋입니다. 카드가 판때기처럼 떠 보이고, 누르면 그만큼 내려앉습니다(4. 컴포넌트의 스킨 전용 규칙). 라벨도 모노가 아닌 굵은 산세리프라 시험지가 아니라 게임 HUD처럼 읽힙니다. */ [data-skin="tamheom"] { --font-display: "Pretendard", "Apple SD Gothic Neo", sans-serif; --font-body: "Pretendard", "Apple SD Gothic Neo", sans-serif; --font-label: "Pretendard", sans-serif; --tracking-display: -0.04em; --tracking-body: -0.01em; --tracking-label: 0.04em; --radius-sm: 14px; --radius: 20px; --radius-lg: 26px; } [data-skin="tamheom"], [data-skin="tamheom"][data-theme="light"] { --paper: #ebe6ff; --surface: #ffffff; --surface-2: #e4dcff; --line: #d5cbfa; --line-strong: #a08fea; --ink: #1b1640; --ink-2: #564f8c; --ink-3: #8b83b9; --accent: #6340f0; --accent-ink: #ffffff; --accent-soft: #e2daff; --ok: #0bb673; --ok-soft: #d0f6e5; --bad: #ff4d6a; --bad-soft: #ffdce2; --grid-line: transparent; --shadow-card: 0 4px 0 #d5cbfa; --shadow-pop: 0 26px 60px rgba(52, 34, 148, 0.3); } @media (prefers-color-scheme: dark) { [data-skin="tamheom"] { --paper: #120f28; --surface: #1c1740; --surface-2: #262056; --line: #352c74; --line-strong: #6152ad; --ink: #f0edff; --ink-2: #a9a2d8; --ink-3: #7c74ab; --accent: #9b7bff; --accent-ink: #140f2e; --accent-soft: #2e2468; --ok: #2ad995; --ok-soft: #0f3328; --bad: #ff6f86; --bad-soft: #3a1a28; --grid-line: transparent; --shadow-card: 0 4px 0 #352c74; --shadow-pop: 0 26px 60px rgba(0, 0, 0, 0.62); } } [data-skin="tamheom"][data-theme="dark"] { --paper: #120f28; --surface: #1c1740; --surface-2: #262056; --line: #352c74; --line-strong: #6152ad; --ink: #f0edff; --ink-2: #a9a2d8; --ink-3: #7c74ab; --accent: #9b7bff; --accent-ink: #140f2e; --accent-soft: #2e2468; --ok: #2ad995; --ok-soft: #0f3328; --bad: #ff6f86; --bad-soft: #3a1a28; --grid-line: transparent; --shadow-card: 0 4px 0 #352c74; --shadow-pop: 0 26px 60px rgba(0, 0, 0, 0.62); } /* ---------- 스킨 C · 활판(活版) : 책 · 명조 · 미색 종이 · 주묵 ---------- UI 전체가 명조입니다(--font-body까지). 명조는 산세리프보다 작아 보이고 자간이 넓어 보이므로 --tracking-body를 거의 0으로 두고 행간을 넉넉히 씁니다. 활판만 --accent와 --bad가 같은 주묵색입니다 — 붉은 첨삭펜=오답이라는 관습을 따른 것으로, 의도된 예외입니다. */ [data-skin="hwalpan"] { --font-display: "Noto Serif KR", "Batang", serif; --font-body: "Noto Serif KR", "Batang", serif; --font-label: "IBM Plex Mono", monospace; --tracking-display: -0.03em; --tracking-body: -0.002em; --tracking-label: 0.16em; --radius-sm: 1px; --radius: 2px; --radius-lg: 2px; --shadow-card: none; } [data-skin="hwalpan"], [data-skin="hwalpan"][data-theme="light"] { --paper: #eae2d2; --surface: #fbf7ed; --surface-2: #e0d7c2; --line: #d3c8ae; --line-strong: #a1937a; --ink: #231d15; --ink-2: #5c5244; --ink-3: #8d8270; --accent: #8c2f22; --accent-ink: #fbf7ed; --accent-soft: #f0ded6; --ok: #2c6047; --ok-soft: #dde7dd; --bad: #8c2f22; --bad-soft: #f0ded6; --grid-line: #dbd0b4; --shadow-pop: 0 18px 44px rgba(35, 29, 21, 0.22); } @media (prefers-color-scheme: dark) { [data-skin="hwalpan"] { --paper: #17130d; --surface: #201b13; --surface-2: #2b2419; --line: #372f22; --line-strong: #5e5340; --ink: #ece3d1; --ink-2: #a89d88; --ink-3: #7a7161; --accent: #d9705e; --accent-ink: #17130d; --accent-soft: #35211c; --ok: #6fae8c; --ok-soft: #1b2a21; --bad: #d9705e; --bad-soft: #35211c; --grid-line: #2c2519; --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.62); } } [data-skin="hwalpan"][data-theme="dark"] { --paper: #17130d; --surface: #201b13; --surface-2: #2b2419; --line: #372f22; --line-strong: #5e5340; --ink: #ece3d1; --ink-2: #a89d88; --ink-3: #7a7161; --accent: #d9705e; --accent-ink: #17130d; --accent-soft: #35211c; --ok: #6fae8c; --ok-soft: #1b2a21; --bad: #d9705e; --bad-soft: #35211c; --grid-line: #2c2519; --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.62); } /* 본문 글꼴 사용자 지정 (설정 > 본문 글꼴). 스킨의 --font-body를 덮어씁니다. */ [data-font="nanum"] { --font-body: "NanumSquare", "Apple SD Gothic Neo", sans-serif; } [data-font="pretendard"] { --font-body: "Pretendard", "Apple SD Gothic Neo", sans-serif; } [data-font="noto-sans"] { --font-body: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; } [data-font="plex"] { --font-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", sans-serif; } [data-font="noto-serif"] { --font-body: "Noto Serif KR", "Batang", serif; } /* ========================================================================= 2. 기본 ========================================================================= */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-body); letter-spacing: var(--tracking-body); color: var(--ink); /* 좁은 화면에서는 프레임이 화면을 꽉 채우므로 배경도 같은 종이색으로 둡니다. (조금이라도 다르면 가장자리에 띠처럼 비칩니다) */ background: var(--paper); -webkit-font-smoothing: antialiased; display: flex; align-items: center; justify-content: center; transition: background 0.35s var(--ease), color 0.35s var(--ease); } button { font: inherit; letter-spacing: inherit; color: inherit; border: none; background: none; cursor: pointer; } input { font: inherit; letter-spacing: inherit; color: inherit; } svg { display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- 타이포 ---------- */ .display { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800; line-height: 1.34; letter-spacing: var(--tracking-display); color: var(--ink); margin: 0; text-wrap: balance; } .h1 { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; letter-spacing: var(--tracking-display); margin: 0; color: var(--ink); } /* .kicker는 라틴 문자 전용(모노 + 넓은 자간). .section-label은 한글이 들어가므로 본문 글꼴에 자간을 거의 주지 않습니다. */ .kicker { font-family: var(--font-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); margin: 0; } .section-label { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.01em; color: var(--ink-3); margin: 0 0 var(--sp-3); } .section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } .lede { font-size: var(--t-sm); line-height: 1.85; color: var(--ink-2); margin: 0; } .empty-note { font-size: var(--t-sm); line-height: 1.7; color: var(--ink-3); text-align: center; padding: var(--sp-10) var(--sp-4); margin: 0; } .num { font-variant-numeric: tabular-nums; } /* ========================================================================= 3. 셸 ========================================================================= */ .frame { position: relative; display: flex; flex-direction: column; flex: 0 0 auto; width: min(430px, 100vw); max-width: 100vw; min-width: 0; /* 안쪽 콘텐츠가 프레임을 넓히지 못하도록 */ height: 100dvh; margin: 0 auto; background: var(--paper); overflow: hidden; transition: background 0.35s var(--ease); } @media (min-width: 480px) { body { background: radial-gradient(130% 100% at 50% 0%, var(--surface) 0%, var(--surface-2) 70%); } .frame { height: min(900px, 94dvh); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-pop); } /* 탐험만 기기 모서리를 크게 굴립니다. 정석·활판은 지면이라 각을 살립니다. */ [data-skin="tamheom"] .frame { border-radius: 30px; } } /* 스크린샷/임베드용 — showcase.html의 iframe에서 쓰는 축소 모드 */ .frame.embed { height: 100%; border-radius: 0; border: none; box-shadow: none; } /* ---------- 상태바 ---------- */ .statusbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 13px var(--sp-6) 2px; font-family: var(--font-label); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .statusbar-icons { display: flex; align-items: center; gap: var(--sp-1); color: var(--ink); } /* ---------- 앱바 ---------- */ .appbar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); } .appbar-title { flex: 1; min-width: 0; } /* 키커·제목 모두 잘라 내야 좁은 기기에서 앱바가 프레임을 밀어내지 않습니다. */ .appbar-title .kicker { margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar-title .h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar-right { display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { position: relative; overflow: hidden; flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform 0.15s var(--ease), background 0.15s var(--ease); } .icon-btn:active { transform: scale(0.9); background: var(--surface-2); } .icon-btn svg { width: 18px; height: 18px; } .chip { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); padding: 7px 11px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); font-family: var(--font-label); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .chip-icon { width: 13px; height: 13px; } .chip.is-live { border-color: var(--accent); color: var(--accent); } .chip-static { cursor: default; } /* ---------- 진행 막대 ---------- */ .progress-track { flex: 0 0 auto; height: 2px; background: var(--line); } .progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.45s var(--ease); } /* ---------- 스크롤 영역 ---------- */ .viewport { position: relative; flex: 1 1 auto; overflow: hidden; } .screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: none; } .screen.active { display: block; } .scr-inner { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-5) var(--sp-5) var(--sp-10); } .stack { display: flex; flex-direction: column; gap: var(--sp-3); } .stack-tight { display: flex; flex-direction: column; gap: var(--sp-2); } .screen.enter-forward { animation: enterForward 0.4s var(--ease) both; } .screen.enter-back { animation: enterBack 0.4s var(--ease) both; } .screen.exit-forward { animation: exitForward 0.4s var(--ease) both; } .screen.exit-back { animation: exitBack 0.4s var(--ease) both; } @keyframes enterForward { from { transform: translateX(26px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes exitForward { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-14px); opacity: 0; } } @keyframes enterBack { from { transform: translateX(-26px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes exitBack { from { transform: translateX(0); opacity: 1; } to { transform: translateX(14px); opacity: 0; } } @keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------- 리플 ---------- */ .rippleable { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.14; transform: scale(0); animation: rippleAnim 0.55s var(--ease) forwards; pointer-events: none; } @keyframes rippleAnim { to { transform: scale(1); opacity: 0; } } /* ---------- 탭바 ---------- */ .tabbar { position: relative; flex: 0 0 auto; display: flex; border-top: 1px solid var(--line); background: var(--paper); padding: var(--sp-2) var(--sp-2) 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .tabbar.tabbar-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; position: absolute; inset-inline: 0; bottom: 0; } .tab-indicator { position: absolute; top: 3px; left: 0; height: 2px; width: 22px; background: var(--accent); border-radius: var(--pill); transition: transform 0.32s var(--ease-spring); } .tab-btn { position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--sp-2) 2px var(--sp-1); color: var(--ink-3); transition: color 0.2s var(--ease); } .tab-btn svg { width: 20px; height: 20px; transition: transform 0.28s var(--ease-spring); } .tab-btn span { font-size: var(--t-2xs); font-weight: 700; letter-spacing: -0.01em; } .tab-btn.active { color: var(--accent); } .tab-btn.active svg { transform: translateY(-1px) scale(1.06); } .home-indicator { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 16px; background: var(--paper); } .home-indicator span { width: 116px; height: 4px; border-radius: var(--pill); background: var(--line-strong); opacity: 0.55; } /* ---------- 드로어 ---------- */ .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); z-index: 20; } .backdrop.open { opacity: 1; pointer-events: auto; } .drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(80%, 306px); background: var(--surface); border-right: 1px solid var(--line); z-index: 21; padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); transform: translateX(-100%); transition: transform 0.32s var(--ease); } .drawer.open { transform: translateX(0); } .drawer-brand { display: flex; align-items: baseline; gap: var(--sp-2); } .brand-hanja { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; letter-spacing: 0.1em; color: var(--ink); } .brand-kr { font-family: var(--font-label); font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); } .drawer-nav { display: flex; flex-direction: column; gap: 2px; } .drawer-link { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-3); text-align: left; color: var(--ink); font-size: var(--t-base); font-weight: 600; padding: var(--sp-3); border-radius: var(--radius-sm); } .drawer-link svg { width: 17px; height: 17px; color: var(--ink-3); } .drawer-link:active { background: var(--surface-2); } .drawer-section { padding-top: var(--sp-4); border-top: 1px solid var(--line); } .drawer-foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); } .drawer-version { font-size: var(--t-2xs); letter-spacing: 0.01em; color: var(--ink-3); } /* ========================================================================= 4. 컴포넌트 ========================================================================= */ /* ---------- 버튼 ---------- */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: 700; font-size: var(--t-base); border-radius: var(--radius-sm); padding: 15px var(--sp-5); transition: transform 0.12s var(--ease), background 0.15s var(--ease); } .btn:active { transform: scale(0.975); } .btn svg { width: 16px; height: 16px; } .btn-block { display: flex; width: 100%; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); } .btn-ghost { background: transparent; color: var(--ink-2); font-weight: 600; padding: var(--sp-3); } .btn-danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); } .btn-sm { font-size: var(--t-sm); padding: 10px var(--sp-4); } .btn-row { display: flex; gap: var(--sp-2); } .btn-row .btn { flex: 1; } /* ---------- 통계 타일 ---------- */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); } .stat-row-2 { grid-template-columns: repeat(2, 1fr); } .stat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-3) var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } .stat-value { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); line-height: 1.2; } .stat-unit { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); } .stat-label { font-size: var(--t-2xs); font-weight: 600; color: var(--ink-3); } /* ---------- 오늘의 훈련 CTA ---------- */ .cta-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; text-align: left; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); padding: var(--sp-5); transition: transform 0.15s var(--ease); } .cta-card:active { transform: scale(0.985); } .cta-kicker { font-family: var(--font-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: 0.72; margin: 0 0 3px; } .cta-title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; letter-spacing: var(--tracking-display); margin: 0; } .cta-arrow { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--pill); border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; } .cta-arrow svg { width: 16px; height: 16px; } /* ---------- 세트 카드 ---------- */ .card-list { display: flex; flex-direction: column; gap: var(--sp-2); } .card { position: relative; overflow: hidden; display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-card); transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); } .card:active { transform: scale(0.99); border-color: var(--line-strong); } .card.is-done { border-left: 3px solid var(--ok); } .card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .card-number { font-family: var(--font-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--ink-3); } .card-title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; letter-spacing: var(--tracking-display); color: var(--ink); margin: 0 0 var(--sp-3); } .card-bottom { display: flex; align-items: center; gap: var(--sp-2); } .badge { font-family: var(--font-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.06em; padding: 3px 8px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink-2); } .badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.bad { background: var(--bad-soft); color: var(--bad); } .badge.accent { background: var(--accent-soft); color: var(--accent); } .tag { font-size: var(--t-2xs); font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: 3px 8px; border-radius: var(--pill); } .intensity { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .intensity .bar { width: 3px; border-radius: 1px; background: var(--line-strong); opacity: 0.5; } .intensity .bar:nth-child(1) { height: 5px; } .intensity .bar:nth-child(2) { height: 8.5px; } .intensity .bar:nth-child(3) { height: 12px; } .intensity .bar.filled { background: var(--accent); opacity: 1; } .card-rate { margin-left: auto; font-family: var(--font-label); font-size: var(--t-2xs); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } /* ---------- 필터 / 검색 ---------- */ .toolbar { display: flex; flex-direction: column; gap: var(--sp-3); } .searchbar { display: flex; align-items: center; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 var(--sp-3); } .searchbar svg { width: 15px; height: 15px; color: var(--ink-3); flex: 0 0 auto; } .searchbar input { flex: 1; min-width: 0; background: none; border: none; outline: none; padding: 11px 0; font-size: var(--t-sm); color: var(--ink); } .searchbar input::placeholder { color: var(--ink-3); } .filter-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .filter-row::-webkit-scrollbar { display: none; } .filter-chip { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease); } .filter-chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* ---------- 지문 ---------- */ .passage-body { font-size: var(--t-base); line-height: 2.05; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-4) var(--sp-5); } /* 활판 — 카드가 아니라 펼친 책의 한 면이 되도록 좌우 테두리를 걷어내고 위아래 괘선만 남깁니다. 배경도 종이색 그대로 두어 지문이 지면에 얹힙니다. 괘선 간격(2.15em)은 아래 line-height와 반드시 같아야 글줄이 칸에 앉습니다. */ [data-skin="hwalpan"] .passage-body { line-height: 2.15; background-color: transparent; border-left: none; border-right: none; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: var(--sp-5) 2px var(--sp-6); background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(2.15em - 1px), var(--grid-line) calc(2.15em - 1px), var(--grid-line) 2.15em ); background-position: 0 0.62em; } mark.voc { position: relative; background: transparent; border-bottom: 1.5px dotted var(--line-strong); font-weight: 700; padding: 0 1px; color: var(--ink-2); transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } mark.voc::after { content: attr(data-num); position: absolute; top: -0.75em; right: -0.45em; font-family: var(--font-label); font-size: 8.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; } mark.voc.is-current { background: var(--accent-soft); border-bottom: 1.5px solid var(--accent); color: var(--accent); } mark.voc.is-current::after { color: var(--accent); } mark.voc.is-done { border-bottom: 1.5px solid var(--line-strong); color: var(--ink); } /* ---------- 문항 ---------- */ .question-card { display: flex; flex-direction: column; gap: var(--sp-3); animation: riseIn 0.32s var(--ease) both; } .question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); } .question-prompt { flex: 1; font-size: var(--t-md); font-weight: 700; line-height: 1.6; margin: 0; color: var(--ink); text-wrap: pretty; } .bookmark-btn { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--pill); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease); } .bookmark-btn svg { width: 15px; height: 15px; } .bookmark-btn.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .choice-list { display: flex; flex-direction: column; gap: 6px; } .choice-btn { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); font-size: var(--t-sm); line-height: 1.6; color: var(--ink); box-shadow: var(--shadow-card); transition: border-color 0.15s var(--ease), background 0.15s var(--ease), opacity 0.2s var(--ease); } .choice-mark { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px; border-radius: var(--pill); border: 1px solid var(--line-strong); font-family: var(--font-label); font-size: var(--t-2xs); font-weight: 600; display: flex; align-items: center; justify-content: center; color: var(--ink-3); } .choice-btn:active { background: var(--surface-2); } .choice-btn.is-correct { border-color: var(--ok); background: var(--ok-soft); } .choice-btn.is-correct .choice-mark { border-color: var(--ok); background: var(--ok); color: var(--surface); } .choice-btn.is-correct .choice-mark svg { width: 13px; height: 13px; } .choice-btn.is-incorrect { border-color: var(--bad); background: var(--bad-soft); animation: shakeX 0.45s var(--ease); } .choice-btn.is-incorrect .choice-mark { border-color: var(--bad); color: var(--bad); } .choice-btn.is-incorrect .choice-mark svg { width: 13px; height: 13px; } .choice-btn.is-muted { opacity: 0.42; } @keyframes shakeX { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } } .icon-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawCheck 0.3s var(--ease) 0.05s forwards; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } .explain-panel { padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); animation: riseIn 0.3s var(--ease) both; } .explain-panel.ok { border-left-color: var(--ok); } .explain-panel.bad { border-left-color: var(--bad); } .explain-label { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 700; margin: 0 0 6px; } .explain-panel.ok .explain-label { color: var(--ok); } .explain-panel.bad .explain-label { color: var(--bad); } .explain-label svg { width: 14px; height: 14px; } .explain-text { font-size: var(--t-sm); line-height: 1.8; color: var(--ink-2); margin: 0; } .explain-meaning { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px dashed var(--line); font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); } .explain-meaning b { color: var(--ink); } /* ---------- 스킨 전용 마감 ---------- 토큰만으로 안 되는 '손맛'만 여기서 처리합니다. 색은 여전히 토큰만 씁니다. */ /* 탐험 — 하드 섀도 위에 얹힌 판때기. 누르면 그 두께만큼 실제로 내려앉습니다. */ [data-skin="tamheom"] .choice-btn { border-width: 2px; font-weight: 600; transition: transform 0.1s var(--ease), box-shadow 0.1s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease), opacity 0.2s var(--ease); } [data-skin="tamheom"] .btn-primary, [data-skin="tamheom"] .btn-secondary { box-shadow: var(--shadow-card); } [data-skin="tamheom"] .btn:active, [data-skin="tamheom"] .choice-btn:active { transform: translateY(3px); box-shadow: none; } [data-skin="tamheom"] .choice-mark { border-width: 2px; font-weight: 800; } /* 정석 — 문항 번호를 시험지처럼 각지게. 원 대신 네모 칸입니다. */ [data-skin="jeongseok"] .choice-mark { border-radius: 3px; border-color: var(--line); background: var(--surface-2); } /* 활판 — 해설은 책 여백의 첨삭이므로 상자 대신 세로 괘선 하나로만 답니다. */ [data-skin="hwalpan"] .explain-panel { background: transparent; border: none; border-left: 2px solid var(--accent); border-radius: 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); } [data-skin="hwalpan"] .explain-panel.ok { border-left-color: var(--ok); } [data-skin="hwalpan"] .explain-panel.bad { border-left-color: var(--bad); } /* ---------- 결과 ---------- */ .result-hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) 0 var(--sp-4); } .result-ring { position: relative; width: 148px; height: 148px; animation: riseIn 0.45s var(--ease) both; } .result-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .result-ring .track { stroke: var(--line); } .result-ring .value { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--ease); } .result-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .result-score { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); line-height: 1; } .result-rate { font-family: var(--font-label); font-size: var(--t-2xs); letter-spacing: var(--tracking-label); color: var(--ink-3); } .result-verdict { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tracking-display); color: var(--ink); margin: 0; text-align: center; } .result-sub { font-size: var(--t-sm); color: var(--ink-2); margin: 0; text-align: center; } .record-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.01em; color: var(--accent-ink); background: var(--accent); padding: 5px 11px; border-radius: var(--pill); animation: riseIn 0.4s var(--ease) 0.2s both; } /* ---------- 오답 / 복습 카드 ---------- */ .review-item { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); background: var(--surface); box-shadow: var(--shadow-card); } .review-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); } .review-word { font-family: var(--font-display); font-size: var(--t-base); font-weight: 800; color: var(--ink); letter-spacing: var(--tracking-display); } .review-word .hanja { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); margin-left: 4px; } .review-source { font-family: var(--font-label); font-size: var(--t-2xs); letter-spacing: 0.08em; color: var(--ink-3); white-space: nowrap; } .review-prompt { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-2); line-height: 1.6; } .review-answer-row { display: flex; gap: 6px; font-size: var(--t-xs); line-height: 1.7; margin: 2px 0; color: var(--ink-2); } .review-answer-row .rar-tag { flex: 0 0 auto; font-family: var(--font-label); font-size: var(--t-2xs); padding: 1px 6px; border-radius: var(--pill); height: fit-content; margin-top: 2px; } .review-answer-row.mine .rar-tag { background: var(--bad-soft); color: var(--bad); } .review-answer-row.correct .rar-tag { background: var(--ok-soft); color: var(--ok); } .review-answer-row.correct { color: var(--ink); font-weight: 600; } .review-explain { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px dashed var(--line); font-size: var(--t-xs); line-height: 1.75; color: var(--ink-2); } /* ---------- 어휘장 ---------- */ .vocab-grid { display: flex; flex-direction: column; gap: 6px; } .vocab-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-card); transition: border-color 0.15s var(--ease); } .vocab-row:active { border-color: var(--line-strong); } .vocab-main { flex: 1; min-width: 0; } .vocab-word { font-family: var(--font-display); font-size: var(--t-base); font-weight: 800; letter-spacing: var(--tracking-display); color: var(--ink); } .vocab-word .hanja { font-size: var(--t-2xs); font-weight: 500; color: var(--ink-3); margin-left: 5px; } .vocab-meaning { font-size: var(--t-xs); line-height: 1.55; color: var(--ink-2); margin: 2px 0 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .vocab-flags { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; color: var(--ink-3); } .vocab-flags svg { width: 14px; height: 14px; } .vocab-flags .on-mark { color: var(--accent); } .vocab-flags .bad-mark { color: var(--bad); } /* 어휘 상세 시트 */ .sheet-wrap { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; pointer-events: none; } .sheet-wrap.open { pointer-events: auto; } .sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.28s var(--ease); } .sheet-wrap.open .sheet-scrim { opacity: 1; } .sheet { position: relative; width: 100%; max-height: 78%; overflow-y: auto; background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--sp-3) var(--sp-5) var(--sp-8); transform: translateY(100%); transition: transform 0.32s var(--ease); } .sheet-wrap.open .sheet { transform: translateY(0); } /* 손잡이는 눌러서 닫는 버튼이다. 막대만으론 탭 영역이 너무 작아 폭 전체를 감싼다. */ .sheet-close { display: block; width: 100%; padding: 6px 0 var(--sp-4); } .sheet-grip { display: block; width: 38px; height: 4px; border-radius: var(--pill); background: var(--line-strong); margin: 0 auto; opacity: 0.6; transition: opacity 0.15s var(--ease); } .sheet-close:active .sheet-grip { opacity: 1; } .sheet-title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--tracking-display); color: var(--ink); margin: 0; } .sheet-title .hanja { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); margin-left: 7px; } .sheet-body { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); } .def-block .def-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.01em; color: var(--ink-3); margin: 0 0 5px; } .def-block p { font-size: var(--t-sm); line-height: 1.8; color: var(--ink); margin: 0; } .def-block .quote { color: var(--ink-2); border-left: 2px solid var(--line-strong); padding-left: var(--sp-3); } /* ---------- 히트맵 ---------- */ .heatmap { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-card); } .heatmap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; scrollbar-width: none; } .heatmap-grid::-webkit-scrollbar { display: none; } .hm-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--surface-2); } [data-skin="jeongseok"] .hm-cell { border-radius: 2px; } [data-skin="tamheom"] .hm-cell { border-radius: 5px; } .hm-cell.l1 { background: var(--accent); opacity: 0.3; } .hm-cell.l2 { background: var(--accent); opacity: 0.55; } .hm-cell.l3 { background: var(--accent); opacity: 0.78; } .hm-cell.l4 { background: var(--accent); opacity: 1; } .hm-cell.today { outline: 1.5px solid var(--ink); outline-offset: 1px; } .heatmap-legend { display: flex; align-items: center; gap: 5px; font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3); } .heatmap-legend .hm-cell { width: 9px; height: 9px; } /* ---------- 세트별 정답률 막대 ---------- */ .bars { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-card); } .bar-row { display: grid; grid-template-columns: 34px 1fr 38px; align-items: center; gap: var(--sp-3); } .bar-row .bar-name { font-family: var(--font-label); font-size: var(--t-2xs); color: var(--ink-3); letter-spacing: 0.06em; } .bar-track { height: 6px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; } .bar-value { height: 100%; border-radius: var(--pill); background: var(--accent); width: 0; transition: width 0.7s var(--ease); } .bar-value.none { background: var(--line-strong); } .bar-row .bar-num { font-family: var(--font-label); font-size: var(--t-2xs); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; } /* ---------- 설정 ---------- */ .setting-group { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); } .setting-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-4); border-bottom: 1px solid var(--line); } .setting-row:last-child { border-bottom: none; } .setting-main { flex: 1; min-width: 0; } .setting-title { font-size: var(--t-base); font-weight: 600; color: var(--ink); margin: 0; } .setting-desc { font-size: var(--t-2xs); line-height: 1.55; color: var(--ink-3); margin: 2px 0 0; } .setting-value { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); flex: 0 0 auto; } /* 스킨 선택 */ .skin-list { display: flex; flex-direction: column; gap: var(--sp-2); } .skin-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-card); transition: border-color 0.15s var(--ease); } .skin-card.is-selected { border-color: var(--accent); border-width: 1.5px; } .swatch { flex: 0 0 auto; display: flex; width: 54px; height: 40px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); } .swatch i { flex: 1; display: block; } .swatch i:nth-child(2) { flex: 0.5; } .swatch i:nth-child(3) { flex: 0.35; } .skin-name { font-family: var(--font-display); font-size: var(--t-base); font-weight: 800; letter-spacing: var(--tracking-display); color: var(--ink); margin: 0; } .skin-desc { font-size: var(--t-2xs); line-height: 1.5; color: var(--ink-3); margin: 2px 0 0; } .check-dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: var(--pill); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: transparent; } .is-selected .check-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .check-dot svg { width: 12px; height: 12px; } /* 세그먼티드 컨트롤 (테마 / 글자 크기) */ .segmented { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--pill); flex: 0 0 auto; } .segmented button { padding: 6px 12px; border-radius: var(--pill); font-size: var(--t-2xs); font-weight: 600; color: var(--ink-2); transition: background 0.18s var(--ease), color 0.18s var(--ease); } .segmented button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); } /* 글꼴 카드 */ .font-card { position: relative; overflow: hidden; display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-card); transition: border-color 0.15s var(--ease); } .font-card.is-selected { border-color: var(--accent); border-width: 1.5px; } .font-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .font-card-label { font-size: var(--t-base); font-weight: 700; color: var(--ink); } .font-card-meta { font-family: var(--font-label); font-size: var(--t-2xs); letter-spacing: 0.05em; color: var(--ink-3); margin: 2px 0 var(--sp-3); } .font-card-sample { font-size: var(--t-md); font-weight: 600; line-height: 1.5; color: var(--ink); margin: 0; } /* ---------- 토스트 ---------- */ .toast { position: absolute; left: 50%; bottom: 88px; transform: translate(-50%, 14px); z-index: 40; background: var(--ink); color: var(--paper); font-size: var(--t-xs); font-weight: 600; padding: 10px 16px; border-radius: var(--pill); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); max-width: 84%; text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- 쿠팡 파트너스 ---------- */ .partner-box { display: flex; flex-direction: column; gap: var(--sp-2); } .partner-disclosure { font-size: var(--t-2xs); line-height: 1.6; color: var(--ink-3); margin: 0; } .partner-status { font-size: var(--t-xs); line-height: 1.7; color: var(--ink-2); margin: 0; } .partner-status b { color: var(--accent); } /* ========================================================================= 5. 스플래시 ========================================================================= */ .splash { position: absolute; inset: 0; z-index: 50; overflow: hidden; cursor: pointer; background: var(--paper); transition: opacity 0.5s var(--ease); } .splash.is-hidden { opacity: 0; pointer-events: none; } .splash-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); animation: splashZoom 4s var(--ease) forwards; } @keyframes splashZoom { to { transform: scale(1); } } .splash-overlay { position: absolute; inset: 0; background: linear-gradient(185deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.86) 100%); } .splash-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--sp-10) var(--sp-6) var(--sp-8); text-align: center; color: #fff; animation: riseIn 0.6s var(--ease) both; } .splash-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); } .splash-hanja { font-family: var(--font-display); font-size: var(--t-md); font-weight: 800; letter-spacing: 0.32em; padding: 7px 14px 7px 20px; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: var(--pill); } .splash-kicker { font-family: var(--font-label); font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin: 0; } .splash-title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; line-height: 1.4; letter-spacing: var(--tracking-display); margin: 0; } .splash-lede { font-size: var(--t-sm); line-height: 1.8; color: rgba(255, 255, 255, 0.78); max-width: 290px; margin: 0; } .splash-coupang-btn { margin-top: var(--sp-3); padding: 12px 20px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(4px); color: #fff; font-size: var(--t-xs); font-weight: 700; transition: transform 0.15s var(--ease), background 0.15s var(--ease); } .splash-coupang-btn:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.24); } .splash-disclosure { font-size: 9.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); max-width: 280px; margin: var(--sp-2) 0 0; } .splash-hint { font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.68); margin: 0; animation: splashPulse 1.9s ease-in-out infinite; } @keyframes splashPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }