/* =========================================================================== 행간(行間) — 디자인 시스템 --------------------------------------------------------------------------- 구조 1. 토큰 : 스킨 4종 × 라이트/다크 팔레트. 색은 전부 여기서만 정의합니다. 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; --splash-bg: #ffffff; --splash-ink: #000000; } /* ---------- 스킨 A · 기본 : 원본 재현 · 순흑 배경 · 둥근 카드 ---------- 2024년 첫 버전(유빈_문해력 - 원본/dsfkjd)의 인상을 그대로 옮긴 스킨입니다. 순흑에 가까운 배경, 흰색 강조, 나눔스퀘어의 좁은 자간, 큼직하게 둥근 모서리. 원본에는 라이트 모드가 없었습니다. 그래서 이 스킨은 테마와 무관하게 항상 같은 팔레트를 씁니다 — @media나 [data-theme] 덮어쓰기를 두지 마십시오. (다른 스킨의 블록은 [data-skin]으로 한정돼 있어 여기에 끼어들지 않습니다.) 딱 한 곳만 원본과 다릅니다. 원본은 정답·오답 표시가 둘 다 흰색이라 맞았는지 틀렸는지 색만 보고는 알 수 없었습니다. --ok/--bad는 나눠 둡니다. */ [data-skin="wonbon"] { --font-display: "NanumSquare", "Apple SD Gothic Neo", sans-serif; --font-body: "NanumSquare", "Apple SD Gothic Neo", sans-serif; --font-label: "IBM Plex Mono", monospace; --tracking-display: -0.07em; --tracking-body: -0.045em; --tracking-label: 0.12em; --radius-sm: 8px; --radius: 14px; --radius-lg: 26px; --pill: 999px; --shadow-card: none; --paper: #0a0a0a; --surface: #151515; --surface-2: #1f1f1f; --line: #262626; --line-strong: #545450; --ink: #f4f4f2; --ink-2: #9a9a96; --ink-3: #57574f; --accent: #ffffff; --accent-ink: #0a0a0a; --accent-soft: #1f1f1f; --ok: #4cc98a; --ok-soft: #0e2418; --bad: #f65a5a; --bad-soft: #2a1111; --grid-line: #1c1c1c; --splash-bg: #0a0a0a; --splash-ink: #f4f4f2; --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.8); } /* ---------- 스킨 B · 집중 : 흑백 문제집 · 전부 직각 ---------- 무채색만 씁니다. 강조도 순수한 검정이라 지면이 흑백 인쇄물처럼 보입니다. 모서리는 --pill까지 0입니다. 이 스킨에는 둥근 것이 하나도 없습니다. 딱 두 곳만 유채색입니다 — --ok(정답)와 --bad(오답). 흑백으로는 정·오답을 구분할 수 없기 때문이고, 흑백 문제집에 빨간 볼펜으로 채점하던 관습과도 맞습니다. 이 둘 말고 다른 곳에 색을 넣지 마십시오. 스킨 전체가 무너집니다. */ [data-skin="jeongseok"] { /* 아이폰·맥에서는 기기의 시스템 고딕(SF Pro + Apple SD Gothic Neo)이 그대로 잡히고, 안드로이드·윈도우에서는 Pretendard가 받습니다. Pretendard가 애초에 그 두 글꼴의 자폭을 기준으로 만들어진 글꼴이라, 어느 기기에서 열어도 인상이 어긋나지 않습니다. 라벨도 같은 이유로 기기 모노(SF Mono/Menlo)를 먼저 부릅니다. */ --font-display: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", sans-serif; --font-label: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "IBM Plex Mono", monospace; --tracking-display: -0.028em; --tracking-body: -0.006em; --tracking-label: 0.06em; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --pill: 0px; --shadow-card: none; } [data-skin="jeongseok"], [data-skin="jeongseok"][data-theme="light"] { --paper: #e8e8e8; --surface: #ffffff; --surface-2: #dcdcdc; --line: #c9c9c9; --line-strong: #6e6e6e; --ink: #000000; --ink-2: #3d3d3d; --ink-3: #757575; --accent: #000000; --accent-ink: #ffffff; --accent-soft: #dcdcdc; --ok: #10693f; --ok-soft: #d5e7dd; --bad: #c11d1d; --bad-soft: #f4d9d9; --grid-line: #d8d8d8; /* 진입 화면은 지면색입니다. 그 위에 흰 면 한 장을 얹는 것이 이 스킨의 첫 화면이라, 이 값을 --surface와 같게 두면 종이가 바탕에 묻혀 사라집니다. */ --splash-bg: #e8e8e8; --splash-ink: #000000; --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.28); } @media (prefers-color-scheme: dark) { [data-skin="jeongseok"] { --paper: #000000; /* 선이 없으므로 면은 밝기 차이만으로 떠야 합니다. 지면(#000)과 12% 이상 벌려 두십시오. 이 값을 낮추면 카드·탭바·시트가 통째로 사라집니다. */ --surface: #1c1c1c; --surface-2: #2c2c2c; --line: #333333; --line-strong: #8a8a8a; --ink: #ffffff; --ink-2: #b5b5b5; --ink-3: #8b8b8b; --accent: #ffffff; --accent-ink: #000000; --accent-soft: #333333; --ok: #4cc98a; --ok-soft: #0e2418; --bad: #f65a5a; --bad-soft: #2a1111; --grid-line: #242424; --splash-bg: #000000; --splash-ink: #ffffff; --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.8); } } [data-skin="jeongseok"][data-theme="dark"] { --paper: #000000; --surface: #1c1c1c; --surface-2: #2c2c2c; --line: #333333; --line-strong: #8a8a8a; --ink: #ffffff; --ink-2: #b5b5b5; --ink-3: #8b8b8b; --accent: #ffffff; --accent-ink: #000000; --accent-soft: #333333; --ok: #4cc98a; --ok-soft: #0e2418; --bad: #f65a5a; --bad-soft: #2a1111; --grid-line: #242424; --splash-bg: #000000; --splash-ink: #ffffff; --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.8); } /* ---------- 스킨 C · 매일 : 요즘 국내 앱의 문법 ---------- 토스·당근처럼 매일 여는 앱이 쓰는 문법입니다. 크게 굴린 모서리, 옅게 번지는 그림자, 넉넉한 여백. 이전의 blur 0 하드 섀도는 걷어냈습니다 — 게임 UI의 표식이라 '매일 여는 도구'라는 성격과 어긋났습니다. 모서리가 넷 중 가장 큽니다(20px). 집중의 0과 정면으로 맞세운 값입니다. */ [data-skin="tamheom"] { /* 제목은 G마켓 산스, 본문은 본고딕. 제목용 글꼴을 본문에까지 쓰면 긴 지문에서 자간이 벌어져 읽기가 사나워집니다. G마켓 산스는 700이 최대 굵기라 .display 같은 곳에 800~900을 주면 브라우저가 합성해 획이 뭉갭니다. */ --font-display: "GmarketSans", "Noto Sans KR", sans-serif; --font-body: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; --font-label: "Noto Sans KR", sans-serif; --tracking-display: -0.025em; --tracking-body: -0.015em; --tracking-label: 0.01em; --radius-sm: 14px; --radius: 20px; --radius-lg: 26px; } [data-skin="tamheom"], [data-skin="tamheom"][data-theme="light"] { --paper: #f5f7fb; --surface: #ffffff; --surface-2: #eef2f9; --line: #e5eaf3; --line-strong: #b9c4d8; --ink: #14181f; --ink-2: #4a5464; --ink-3: #6d7787; --accent: #2f6bff; --accent-ink: #ffffff; --accent-soft: #e8effe; --ok: #08976a; --ok-soft: #e0f5ec; --bad: #e5384f; --bad-soft: #fde7ea; --grid-line: rgba(255, 255, 255, 0.18); --splash-bg: linear-gradient(165deg, #4c7dff 0%, #2f6bff 55%, #1b3fa8 100%); --splash-ink: #ffffff; --shadow-card: 0 2px 10px rgba(20, 32, 64, 0.06); --shadow-pop: 0 24px 60px rgba(20, 32, 64, 0.18); } @media (prefers-color-scheme: dark) { [data-skin="tamheom"] { --paper: #101216; --surface: #191c22; --surface-2: #22262e; --line: #2b303a; --line-strong: #4d5563; --ink: #eef1f6; --ink-2: #a3abb9; --ink-3: #7d8695; --accent: #6f9bff; --accent-ink: #0d1017; --accent-soft: #1b2540; --ok: #34d399; --ok-soft: #0e2b22; --bad: #ff6b7f; --bad-soft: #331319; --grid-line: rgba(255, 255, 255, 0.08); --splash-bg: linear-gradient(165deg, #24314f 0%, #141922 60%, #0b0d12 100%); --splash-ink: #eef1f6; --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.45); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.6); } } [data-skin="tamheom"][data-theme="dark"] { --paper: #101216; --surface: #191c22; --surface-2: #22262e; --line: #2b303a; --line-strong: #4d5563; --ink: #eef1f6; --ink-2: #a3abb9; --ink-3: #7d8695; --accent: #6f9bff; --accent-ink: #0d1017; --accent-soft: #1b2540; --ok: #34d399; --ok-soft: #0e2b22; --bad: #ff6b7f; --bad-soft: #331319; --grid-line: rgba(255, 255, 255, 0.08); --splash-bg: linear-gradient(165deg, #24314f 0%, #141922 60%, #0b0d12 100%); --splash-ink: #eef1f6; --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.45); --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.6); } /* ---------- 스킨 D · 시험지 : 모의고사 문제지 · 명조 · 갱지 ---------- UI 전체가 명조입니다(--font-body까지). 명조는 산세리프보다 작아 보이고 자간이 넓어 보이므로 --tracking-body를 거의 0으로 두고 행간을 넉넉히 씁니다. 목표는 '오래 읽어도 편한 시험지'입니다. 실제 문제지에는 글을 두르는 상자가 없으므로 테두리를 쓰지 않습니다. 지문은 종이 위에 그대로 인쇄됩니다 (6. 스킨별 레이아웃의 시험지 구역). 시험지만 --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; --splash-bg: #ece4d2; --splash-ink: #231d15; --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; --splash-bg: #17130d; --splash-ink: #ece3d1; --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; --splash-bg: #17130d; --splash-ink: #ece3d1; --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; /* 한국어는 낱말 가운데서 끊으면 안 됩니다('자랍니다. 하 / 루 한 세트면'). 띄어쓰기에서만 넘기고, 띄어쓰기가 없는 긴 덩어리는 overflow-wrap이 받습니다. */ word-break: keep-all; overflow-wrap: break-word; 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); } /* 시험지 — 수능 국어 문제지의 지문 박스입니다. 얇은 실선 사각형에 종이색 그대로, 행간은 넉넉하게. 원고지 괘선은 쓰지 않습니다 — 실제 문제지에는 없고, 명조 본문과 겹치면 오히려 읽기가 사나워집니다. */ [data-skin="hwalpan"] .passage-body { line-height: 2.1; background-color: transparent; border: 1px solid var(--line-strong); border-radius: 0; padding: var(--sp-5) var(--sp-4) var(--sp-5); } 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 { font-weight: 500; transition: transform 0.12s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease), opacity 0.2s var(--ease); } [data-skin="tamheom"] .btn:active, [data-skin="tamheom"] .choice-btn:active { transform: scale(0.975); } [data-skin="tamheom"] .choice-mark { border: none; background: var(--accent-soft); color: var(--accent); font-weight: 700; } /* 집중 — 문항 번호를 시험지처럼 각지게. 원 대신 네모 칸입니다. */ [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; } /* display: block이 없으면 안 보입니다. .bar-track은 .bar-row(grid)의 자식이라 자동으로 블록이 되지만, 그 안의 .bar-value는 그냥 이라 inline으로 남고 inline 요소는 width·height를 무시합니다. 막대가 0px로 그려집니다. */ .bar-value { display: block; 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-bg / --splash-ink / --grid-line 세 토큰만으로 그리고, 스킨마다 아래에서 무늬를 다르게 깝니다. 그래서 진입 화면도 스킨별로 셋입니다. 본문 색은 전부 currentColor + opacity라, 어떤 스킨을 얹어도 대비가 유지됩니다. */ .splash { position: absolute; inset: 0; z-index: 50; overflow: hidden; cursor: pointer; background: var(--splash-bg); color: var(--splash-ink); transition: opacity 0.5s var(--ease); } .splash.is-hidden { opacity: 0; pointer-events: none; } /* 스킨별 무늬가 깔리는 판. 기본은 무늬 없음입니다. */ .splash-bg { position: absolute; inset: 0; animation: splashDrift 5s var(--ease) forwards; } @keyframes splashDrift { from { transform: scale(1.04); opacity: 0.72; } to { transform: scale(1); opacity: 1; } } /* 스킨별로 쓰임이 다른 장식 줄. 기본은 숨김입니다. */ .splash-rule { display: none; } .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; 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 currentColor; border-radius: var(--pill); } .splash-kicker { font-family: var(--font-label); font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: 0.62; 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; opacity: 0.76; max-width: 290px; margin: 0; } .splash-coupang-btn { margin-top: var(--sp-3); padding: 12px 20px; border-radius: var(--pill); background: transparent; border: 1px solid currentColor; color: inherit; font-size: var(--t-xs); font-weight: 700; transition: transform 0.15s var(--ease), opacity 0.15s var(--ease); } .splash-coupang-btn:active { transform: scale(0.96); opacity: 0.7; } .splash-disclosure { font-size: 9.5px; line-height: 1.6; opacity: 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; margin: 0; animation: splashPulse 1.9s ease-in-out infinite; } @keyframes splashPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } } /* ---------- 스킨별 진입 화면 ---------- 같은 마크업에 무늬만 갈아 끼웁니다. 색은 전부 토큰입니다. */ /* 기본 — 원본은 사진 한 장이 배경이었습니다. 그 사진 대신, 원본 본문이 깔고 있던 위쪽에서 번지는 회색 광원만 남겨 같은 어둠의 결을 냅니다. */ [data-skin="wonbon"] .splash-bg { background-image: radial-gradient(120% 90% at 50% 0%, #1f1f1f 0%, transparent 62%); } [data-skin="wonbon"] .splash-hanja { border-width: 1px; border-radius: var(--pill); padding: 7px 16px 7px 20px; } /* 집중 — 책상 위에 놓인 종이 한 장. 모눈과 사각 테두리를 쓰던 화면이었지만, 선을 한 줄도 쓰지 않는 스킨의 첫 화면이 선으로 가득한 것은 앞뒤가 맞지 않았습니다. 그래서 격자를 걷어내고 지면(--paper) 위에 흰 면(--surface) 한 장만 깔았습니다. 앱 안과 같은 문법입니다. .splash-rule은 기본값(display:none)으로 두어 사각 테두리를 없앱니다. */ [data-skin="jeongseok"] .splash-bg { background-image: linear-gradient(var(--surface), var(--surface)); background-repeat: no-repeat; background-position: center; /* 네 변 28px씩 물립니다. 이보다 더 물리면 맨 아래 '화면을 탭하여 시작'이 종이 밖으로 밀려나 글자가 지면 위에 뜹니다. */ background-size: calc(100% - 56px) calc(100% - 56px); } /* 표제는 테두리를 두르는 대신 면을 채웁니다. 이 화면에서 유일하게 꽉 찬 덩어리입니다. */ [data-skin="jeongseok"] .splash-hanja { border: none; background: var(--accent); color: var(--accent-ink); padding: 9px 15px 9px 21px; } [data-skin="jeongseok"] .splash-coupang-btn { border: none; background: var(--surface-2); } /* 게임 — 파란 그라디언트 위에 점무늬. 게임 로딩 화면처럼. */ [data-skin="tamheom"] .splash-bg { background-image: radial-gradient(var(--grid-line) 1.6px, transparent 1.6px); background-size: 22px 22px; } [data-skin="tamheom"] .splash-hanja { border-width: 2px; font-weight: 900; } /* 시험지 — 모의고사 문제지의 머리글. 위쪽에 굵은 줄 + 얇은 줄 이중 괘선을 긋고, 지면에는 가로 괘선을 아주 옅게 깔아 갱지 결을 냅니다. */ [data-skin="hwalpan"] .splash-bg { background-image: repeating-linear-gradient( to bottom, transparent 0 33px, var(--grid-line) 33px 34px ); } /* 종이 위의 버튼도 선으로 두르지 않습니다. 옅은 면으로 눌리는 자리만 알립니다. */ [data-skin="hwalpan"] .splash-coupang-btn { border: none; background: var(--surface-2); } [data-skin="hwalpan"] .splash-rule { display: block; position: absolute; left: var(--sp-6); right: var(--sp-6); top: 46px; height: 4px; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; } /* ========================================================================= 6. 스킨별 레이아웃 ------------------------------------------------------------------------- 1~5 구역은 안이 달라도 같은 뼈대를 씁니다. 여기서는 그 뼈대 위의 배치를 안마다 다시 잡습니다 — 요소의 순서, 통계를 읽는 방식, CTA의 무게. 마크업은 건드리지 않습니다. 순서는 flex `order`로, 구성은 grid로 바꿉니다. 그래야 index.html 하나로 네 안이 계속 유지됩니다. 색은 여전히 토큰만 씁니다. 이 구역에도 하드코딩된 색은 없습니다. ========================================================================= */ /* ---------- 집중 · 선을 한 줄도 쓰지 않는 화면 ---------- 넷 중 가장 조용해야 하는 안입니다. 그래서 선을 한 줄도 남기지 않았습니다. 기기 테두리, 탭바 윗선, 서랍 칸막이, 설정 줄 사이까지 전부 걷어냈습니다. 경계는 흰 면(--surface)과 지면(--paper)의 밝기 차이가 만들고, 위계는 글자 크기가 만듭니다. 화면에 남는 것은 지문과 선택지 글자뿐입니다. 그래서 두 색의 밝기 차이가 이 스킨의 생명줄입니다. --paper와 --surface를 가깝게 붙이면 면이 사라지고 화면이 통짜로 보입니다. 다크 쪽을 특히 조심하십시오. 순서는 문제집의 진도표를 따릅니다. 지금까지의 성적을 먼저 보고 오늘 할 것을 그 아래에서 폅니다. */ [data-skin="jeongseok"] .frame, [data-skin="jeongseok"] .card, [data-skin="jeongseok"] .chip, [data-skin="jeongseok"] .icon-btn, [data-skin="jeongseok"] .btn-secondary, [data-skin="jeongseok"] .btn-danger, [data-skin="jeongseok"] .stat-tile, [data-skin="jeongseok"] .searchbar, [data-skin="jeongseok"] .filter-chip, [data-skin="jeongseok"] .passage-body, [data-skin="jeongseok"] .bookmark-btn, [data-skin="jeongseok"] .choice-btn, [data-skin="jeongseok"] .choice-mark, [data-skin="jeongseok"] .explain-panel, [data-skin="jeongseok"] .explain-meaning, [data-skin="jeongseok"] .review-item, [data-skin="jeongseok"] .review-explain, [data-skin="jeongseok"] .vocab-row, [data-skin="jeongseok"] .heatmap, [data-skin="jeongseok"] .bars, [data-skin="jeongseok"] .setting-group, [data-skin="jeongseok"] .setting-row, [data-skin="jeongseok"] .skin-card, [data-skin="jeongseok"] .font-card, [data-skin="jeongseok"] .check-dot, [data-skin="jeongseok"] .cta-arrow, [data-skin="jeongseok"] .tabbar, [data-skin="jeongseok"] .drawer, [data-skin="jeongseok"] .drawer-section, [data-skin="jeongseok"] .drawer-foot, [data-skin="jeongseok"] .sheet, /* 완료 표시는 왼쪽 초록 막대를 지우고 카드 안의 '완료' 배지에 맡깁니다. */ [data-skin="jeongseok"] .card.is-done, [data-skin="jeongseok"] .def-block .quote { border: none; } /* 이 목록에 없는 것은 남긴 것입니다. 넷뿐이고 전부 장식이 아니라 신호입니다 — 지문의 밑줄(mark.voc), 색상 견본(.swatch), 그리고 시험지의 원문자 번호와 채점 세로줄. 견본은 담긴 색 중에 지면과 밝기가 거의 같은 것이 있어서 (기본의 흰색, 시험지의 갱지색) 가두는 선이 없으면 그 칸이 사라지고 견본이 색을 잘못 알려 줍니다. 나머지 상자를 새로 만들면 위 목록에 넣으십시오. */ /* 선이 하던 일을 면이 대신 받습니다. ---------------------------------- */ /* 탭바·서랍·시트는 지면보다 한 단 밝은 면으로 떠 있습니다. */ [data-skin="jeongseok"] .tabbar { background: var(--surface); } /* 서랍 안의 칸막이는 윗선이 아니라 여백이 만듭니다. */ [data-skin="jeongseok"] .drawer-section, [data-skin="jeongseok"] .drawer-foot { padding-top: var(--sp-6); } /* 설정 줄 사이는 2px 지면색 틈으로 끊습니다. 선이 아니라 빈 자리입니다. */ [data-skin="jeongseok"] .setting-group { background: transparent; display: flex; flex-direction: column; gap: 2px; } [data-skin="jeongseok"] .setting-row { background: var(--surface); } /* 고른 것은 선 굵기가 아니라 면 색으로 알립니다. */ [data-skin="jeongseok"] .skin-card.is-selected, [data-skin="jeongseok"] .font-card.is-selected { background: var(--accent-soft); } /* 테두리를 지우면 안 고른 동그라미가 사라지므로 옅은 면으로 자리를 남깁니다. 고른 것은 그 아래 규칙이 다시 --accent로 채웁니다. 순서를 바꾸지 마십시오 — 기본 규칙(.is-selected .check-dot)과 명시도가 같아서 뒤에 오는 쪽이 이깁니다. */ [data-skin="jeongseok"] .check-dot { background: var(--surface-2); } [data-skin="jeongseok"] .is-selected .check-dot { background: var(--accent); color: var(--accent-ink); } /* 머리글의 메뉴·기록 버튼은 지면 위에 면을 깔지 않습니다. 글자와 아이콘만 남습니다. */ [data-skin="jeongseok"] .icon-btn, [data-skin="jeongseok"] .chip { background: transparent; } [data-skin="jeongseok"] .icon-btn:active { background: var(--surface-2); } /* 위험 버튼은 원래 붉은 테두리만으로 서 있었습니다. 선을 지우면 그냥 글자가 되므로 면을 깔아 누를 자리를 남깁니다. 색은 그대로 --bad 계열입니다. */ [data-skin="jeongseok"] .btn-danger { background: var(--bad-soft); } /* 선택지 번호는 칸을 채우지 않습니다. 숫자만 본문 왼쪽에 물러서 있습니다. */ [data-skin="jeongseok"] .choice-mark { background: transparent; color: var(--ink-3); font-weight: 600; } /* 인용은 왼쪽 괘선 대신 옅은 면과 안쪽 여백으로 물러섭니다. */ [data-skin="jeongseok"] .def-block .quote { background: var(--surface-2); padding: var(--sp-3) var(--sp-4); } [data-skin="jeongseok"] [data-screen="home"] .scr-inner { gap: var(--sp-6); } /* 제목 → 진도표 → 오늘 할 것 → 복습. 기본 순서(제목 → CTA → 통계)와 반대입니다. */ [data-skin="jeongseok"] [data-screen="home"] .cta-card { order: 3; } [data-skin="jeongseok"] [data-screen="home"] .stack:nth-of-type(2) { order: 2; } [data-skin="jeongseok"] [data-screen="home"] #homeWrongWrap { order: 4; } /* 진도표. 흰 면 한 장 위에 세 줄이 놓입니다. 줄 사이에 선을 긋지 않습니다. */ [data-skin="jeongseok"] .stat-row { grid-template-columns: 1fr; gap: 0; background: var(--surface); padding: var(--sp-2) var(--sp-4); } [data-skin="jeongseok"] .stat-tile { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; background: transparent; } /* 표에서는 라벨이 먼저 오고 값이 뒤따릅니다. 마크업 순서와 반대라 order로 뒤집습니다. */ [data-skin="jeongseok"] .stat-tile .stat-label { order: 1; font-size: var(--t-sm); } [data-skin="jeongseok"] .stat-tile .stat-value { order: 2; font-size: var(--t-xl); } /* 구역 이름은 작게 물러섭니다. 괘선 대신 위쪽 여백이 구역을 끊습니다. */ [data-skin="jeongseok"] .section-label { font-size: var(--t-2xs); letter-spacing: 0.02em; margin-bottom: var(--sp-2); } [data-skin="jeongseok"] .section-label::after { display: none; } /* 지문은 흰 면 위에 그대로 인쇄됩니다. */ [data-skin="jeongseok"] .passage-body { padding: var(--sp-5); } /* 선택지는 흰 면 넉 장입니다. 번호는 채운 네모 칸으로 표시합니다. */ [data-skin="jeongseok"] .choice-list { gap: 2px; } [data-skin="jeongseok"] .choice-btn { padding: var(--sp-3) var(--sp-4); } [data-skin="jeongseok"] .choice-mark { border-radius: 0; background: var(--surface-2); color: var(--ink-2); } /* 선이 없으므로 정·오답은 면의 색으로 알립니다. */ [data-skin="jeongseok"] .choice-btn.is-correct { background: var(--ok-soft); } [data-skin="jeongseok"] .choice-btn.is-incorrect { background: var(--bad-soft); } /* ---------- 매일 · 한 손으로 쓰는 화면 ---------- 엄지가 닿는 아래쪽이 중요하고, 위쪽은 지금 상태만 알려 주면 됩니다. 그래서 통계를 맨 위 요약 카드 한 장으로 올리고, 오늘 할 것을 큰 카드로 그 아래 둡니다. 카드 사이를 넓게 벌려 한 화면에 세 덩이만 보이게 했습니다. */ [data-skin="tamheom"] [data-screen="home"] .scr-inner { gap: var(--sp-8); padding: var(--sp-5) var(--sp-5) calc(var(--sp-10) * 1.4); } /* 요약 → 제목 → 오늘 할 것 → 복습. 상태를 먼저 보여 주는 순서입니다. */ [data-skin="tamheom"] [data-screen="home"] .stack:nth-of-type(2) { order: 1; } [data-skin="tamheom"] [data-screen="home"] .stack:nth-of-type(1) { order: 2; } [data-skin="tamheom"] [data-screen="home"] .cta-card { order: 3; } [data-skin="tamheom"] [data-screen="home"] #homeWrongWrap { order: 4; } /* 타일 세 장이 아니라 한 장 안의 세 칸입니다. 칸은 선이 아니라 여백으로 나눕니다. */ [data-skin="tamheom"] .stat-row { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-5) var(--sp-2); } [data-skin="tamheom"] .stat-tile { align-items: center; gap: var(--sp-1); padding: 0; background: transparent; border: none; box-shadow: none; } [data-skin="tamheom"] .stat-tile .stat-value { font-size: var(--t-2xl); } [data-skin="tamheom"] .stat-tile .stat-label { font-size: var(--t-xs); } [data-skin="tamheom"] .display { font-size: var(--t-3xl); line-height: 1.28; } [data-skin="tamheom"] .lede { font-size: var(--t-base); } /* 오늘 할 것은 눌러 달라고 말하는 크기여야 합니다. */ [data-skin="tamheom"] .cta-card { padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } [data-skin="tamheom"] .cta-title { font-size: var(--t-lg); } [data-skin="tamheom"] .cta-arrow { width: 38px; height: 38px; border: none; background: var(--accent-ink); color: var(--accent); } /* 구역 이름 옆의 괘선을 걷어냅니다. 여백만으로 끊는 것이 이 안의 방식입니다. */ [data-skin="tamheom"] .section-label { font-size: var(--t-sm); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-4); } [data-skin="tamheom"] .section-label::after { display: none; } /* 선택지는 손가락 크기에 맞춥니다. */ [data-skin="tamheom"] .choice-list { gap: var(--sp-2); } [data-skin="tamheom"] .choice-btn { padding: var(--sp-4) var(--sp-4); border-radius: var(--radius); font-size: var(--t-base); } [data-skin="tamheom"] .choice-mark { width: 26px; height: 26px; } /* ---------- 시험지 · 갱지에 인쇄한 지면 ---------- 실제 시험지에는 상자를 두르는 선이 없습니다. 글이 종이 위에 그대로 인쇄되고, 구역은 여백으로 나뉩니다. 그래서 테두리를 전부 걷어내고 지문 박스도 없앴습니다. 대신 종이 자체를 만들었습니다. 아래 .frame::before와 ::after가 얼룩과 섬유를 두 겹으로 덮습니다. 이미지 파일이 아니라 CSS 안에 들어 있는 데이터라 따로 받아 올 것이 없습니다. */ [data-skin="hwalpan"] .frame, [data-skin="hwalpan"] .card, [data-skin="hwalpan"] .chip, [data-skin="hwalpan"] .icon-btn, [data-skin="hwalpan"] .btn-secondary, [data-skin="hwalpan"] .btn-danger, [data-skin="hwalpan"] .stat-tile, [data-skin="hwalpan"] .searchbar, [data-skin="hwalpan"] .filter-chip, [data-skin="hwalpan"] .passage-body, [data-skin="hwalpan"] .bookmark-btn, [data-skin="hwalpan"] .choice-btn, [data-skin="hwalpan"] .explain-panel, [data-skin="hwalpan"] .explain-meaning, [data-skin="hwalpan"] .review-item, [data-skin="hwalpan"] .review-explain, [data-skin="hwalpan"] .vocab-row, [data-skin="hwalpan"] .heatmap, [data-skin="hwalpan"] .bars, [data-skin="hwalpan"] .setting-group, [data-skin="hwalpan"] .setting-row, [data-skin="hwalpan"] .skin-card, [data-skin="hwalpan"] .font-card, [data-skin="hwalpan"] .check-dot, [data-skin="hwalpan"] .cta-arrow, [data-skin="hwalpan"] .tabbar, [data-skin="hwalpan"] .drawer, [data-skin="hwalpan"] .drawer-section, [data-skin="hwalpan"] .drawer-foot, [data-skin="hwalpan"] .sheet, /* 완료 표시는 카드 안의 '완료' 배지가 이미 하고 있습니다. */ [data-skin="hwalpan"] .card.is-done, [data-skin="hwalpan"] .def-block .quote { border: none; } /* 이 목록에 없는 것은 남긴 것입니다. 넷뿐이고 전부 장식이 아니라 신호입니다 — 지문의 밑줄(mark.voc), 색상 견본(.swatch), 그리고 시험지의 원문자 번호와 채점 세로줄. 견본은 담긴 색 중에 지면과 밝기가 거의 같은 것이 있어서 (기본의 흰색, 시험지의 갱지색) 가두는 선이 없으면 그 칸이 사라지고 견본이 색을 잘못 알려 줍니다. 나머지 상자를 새로 만들면 위 목록에 넣으십시오. */ /* 선이 하던 일을 종이 면이 대신 받습니다. --------------------------------- */ /* 탭바·서랍·시트는 갱지보다 한 장 밝은 종이로 얹힙니다. */ [data-skin="hwalpan"] .tabbar { background: var(--surface); } [data-skin="hwalpan"] .drawer-section, [data-skin="hwalpan"] .drawer-foot { padding-top: var(--sp-6); } /* 설정 줄 사이는 괘선이 아니라 지면색 틈입니다. */ [data-skin="hwalpan"] .setting-group { background: transparent; display: flex; flex-direction: column; gap: 2px; } [data-skin="hwalpan"] .setting-row { background: var(--surface); } /* 고른 것은 선이 아니라 옅은 주묵 면으로 알립니다. */ [data-skin="hwalpan"] .skin-card.is-selected, [data-skin="hwalpan"] .font-card.is-selected { background: var(--accent-soft); } /* 고른 것은 아래 규칙이 다시 --accent로 채웁니다. 명시도가 같으므로 순서가 곧 우선순위입니다. */ [data-skin="hwalpan"] .check-dot { background: var(--surface-2); } [data-skin="hwalpan"] .is-selected .check-dot { background: var(--accent); color: var(--accent-ink); } /* 머리글 버튼은 종이 위에 동그란 면을 깔지 않습니다. 아이콘만 인쇄된 모양입니다. */ [data-skin="hwalpan"] .icon-btn, [data-skin="hwalpan"] .chip { background: transparent; } [data-skin="hwalpan"] .icon-btn:active { background: var(--surface-2); } /* 위험 버튼은 원래 붉은 테두리만으로 서 있었습니다. 선을 지우면 그냥 글자가 되므로 면을 깔아 누를 자리를 남깁니다. 색은 그대로 --bad 계열입니다. */ [data-skin="hwalpan"] .btn-danger { background: var(--bad-soft); } /* 인용은 왼쪽 괘선 대신 안쪽 여백과 옅은 면으로 물러섭니다. */ [data-skin="hwalpan"] .def-block .quote { background: var(--surface-2); padding: var(--sp-3) var(--sp-4); } /* ---- 갱지 만들기 ------------------------------------------------------- 종이는 결 한 겹으로는 종이처럼 보이지 않습니다. 실제 갱지를 보면 세 가지가 겹쳐 있습니다 — 잘게 박힌 섬유, 뜰 때 생긴 넓고 옅은 얼룩, 그리고 가장자리로 갈수록 어두워지는 그늘. 그래서 세 겹을 나눠 깔았습니다. ::before 얼룩 — 낮은 주파수의 큰 반점. 종이 두께가 고르지 않은 자리입니다. ::after 섬유 + 그늘 — 높은 주파수의 잔 알갱이 위에 네 귀퉁이 음영. 둘 다 SVG 노이즈라 이미지 파일이 아닙니다. CSS 안의 데이터라 받아 올 것이 없고, 해상도를 타지 않습니다. pointer-events: none이라 클릭도 가로채지 않습니다. z-index 39는 토스트(40)·스플래시(50) 바로 아래입니다. 그 둘까지 덮으면 글자가 탁해집니다. 이 값을 올리지 마십시오. */ /* 얼룩. 넓게 번지는 반점이라 타일을 크게 잡습니다(520px). */ [data-skin="hwalpan"] .frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 39; opacity: 0.55; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23m)' opacity='0.5'/%3E%3C/svg%3E"); background-size: 520px 520px; } /* 섬유 + 그늘. 잔 알갱이는 작게 타일링하고, 음영은 프레임 전체에 한 번 씌웁니다. */ [data-skin="hwalpan"] .frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 39; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.3'/%3E%3C/svg%3E"), radial-gradient(118% 92% at 50% 42%, rgba(0, 0, 0, 0) 58%, rgba(90, 74, 48, 0.14) 100%); background-size: 180px 180px, 100% 100%; background-repeat: repeat, no-repeat; } /* 다크에서는 곱하기가 검은 종이를 더 검게 만들 뿐이라 결이 뭉쳐 보입니다. 그래서 반대로 뒤집습니다 — 아주 옅게 screen으로 올려 섬유가 빛을 받게 합니다. */ [data-skin="hwalpan"][data-theme="dark"] .frame::before { opacity: 0.1; mix-blend-mode: screen; } [data-skin="hwalpan"][data-theme="dark"] .frame::after { opacity: 0.14; mix-blend-mode: screen; } @media (prefers-color-scheme: dark) { [data-skin="hwalpan"] .frame::before { opacity: 0.1; mix-blend-mode: screen; } [data-skin="hwalpan"] .frame::after { opacity: 0.14; mix-blend-mode: screen; } [data-skin="hwalpan"][data-theme="light"] .frame::before { opacity: 0.55; mix-blend-mode: multiply; } [data-skin="hwalpan"][data-theme="light"] .frame::after { opacity: 0.5; mix-blend-mode: multiply; } } [data-skin="hwalpan"] [data-screen="home"] .scr-inner { gap: var(--sp-6); } /* 제목은 지면의 머리글입니다. 상자를 두르는 대신 아래로 여백을 크게 벌립니다. */ [data-skin="hwalpan"] [data-screen="home"] .stack:nth-of-type(1) { padding-bottom: var(--sp-4); gap: var(--sp-4); } /* 통계는 종이 위에 그대로 놓인 세 칸입니다. 칸을 나누는 선을 쓰지 않습니다. */ [data-skin="hwalpan"] .stat-row { gap: var(--sp-2); } [data-skin="hwalpan"] .stat-tile { align-items: center; gap: 3px; padding: var(--sp-3) var(--sp-2); background: transparent; } /* 오늘 할 것만 면을 채웁니다. 지면에서 유일하게 색이 들어가는 자리입니다. */ [data-skin="hwalpan"] .cta-card { padding: var(--sp-4) var(--sp-5); } /* 구역 이름은 작게 물러섭니다. 괘선 없이 여백으로 끊습니다. */ [data-skin="hwalpan"] .section-label { font-size: var(--t-2xs); letter-spacing: var(--tracking-label); margin-bottom: var(--sp-2); } [data-skin="hwalpan"] .section-label::after { display: none; } /* 지문은 상자 없이 종이 위에 그대로 인쇄됩니다. 행간만 넉넉히 둡니다. */ [data-skin="hwalpan"] .passage-body { background-color: transparent; line-height: 2.15; padding: var(--sp-2) 0 var(--sp-4); } /* 선택지는 원문자 번호를 단 세로 나열입니다. 원문자만 유일하게 선을 남깁니다. */ [data-skin="hwalpan"] .choice-list { gap: var(--sp-1); } [data-skin="hwalpan"] .choice-btn { background: transparent; padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; align-items: flex-start; } [data-skin="hwalpan"] .choice-mark { border-radius: var(--pill); border: 1px solid var(--ink-3); background: transparent; } /* 채점한 시험지처럼 왼쪽에 세로 표시를 긋습니다. 이 안에서 유일한 직선입니다. */ [data-skin="hwalpan"] .choice-btn.is-correct { background: transparent; border-inline-start: 3px solid var(--ok); padding-inline-start: var(--sp-3); } [data-skin="hwalpan"] .choice-btn.is-incorrect { background: transparent; border-inline-start: 3px solid var(--bad); padding-inline-start: var(--sp-3); } [data-skin="hwalpan"] .choice-btn.is-correct .choice-mark { border-color: var(--ok); } [data-skin="hwalpan"] .choice-btn.is-incorrect .choice-mark { border-color: var(--bad); }