/* NUBI(옛 예비반) — 스타일 (그리스 고전 컨셉 전면 적용, 2026-07-25 · NUBI 브랜드 2026-09-04) 문법: 이화그린(#00462A) 단일색, 강도(농도)로 위계 — 진한 채움=행동, 50% 채움=상태, 헤어라인=구조, 저농도 디더링 도판=배경. 배경은 베이지, 서체는 조선일보명조. 도판 출처: 메트로폴리탄 미술관 CC0 (assets/art/), 디더링 파이프라인은 WO 대화 기록 참조. */ @font-face { font-family: "ChosunilboMJ"; src: url("../assets/fonts/Chosunilbo_myungjo.woff") format("woff"); font-weight: normal; font-display: swap; } :root { --ewha: #00462a; --paper: #f3eee1; /* 베이지 배경 */ --card: #f3eee1; --field: #faf7ee; /* 입력창 — 종이보다 반 톤 밝게 */ --ink: #00462a; --ink-soft: rgba(0,70,42,.78); --line: rgba(0,70,42,.45); /* 헤어라인 */ --line-soft: rgba(0,70,42,.25); --soft: rgba(0,70,42,.08); /* 옅은 채움 (패널·틴트) */ --mid: rgba(0,70,42,.62); /* 중간 채움 (상태 색반전) */ --mark: rgba(0,70,42,.12); /* 문단 표시 */ --mark-line: #00462a; --ok: #00462a; --bad: #00462a; --lock: rgba(0,70,42,.38); /* 아래는 예전에 값으로 박혀 있던 색들 — 다크 모드(2026-09-04)를 위해 이름을 붙였다. 밝은 모드 값은 그대로다. */ --paper-rgb: 243,238,225; --ewha-rgb: 0,70,42; /* 반투명 채움·그림자용 원색 (다크에서 갈아 끼운다) */ --paper-bar: rgba(243,238,225,.96); /* 상단바 반투명 바탕 */ --paper-white: #ffffff; /* 편지지·팝업의 흰 종이 */ --paper-warm: #f8f4ec; /* 지문·문장 카드 */ --paper-cream: #fdfbf4; /* 문제 화면 상자 */ --rule-warm: #e5ddd0; /* 그 상자들의 테두리 */ --ink-body: #2b2620; /* 지문 본문 글자(따뜻한 검정) */ --ewha-deep: #00331f; /* 버튼 호버의 짙은 잉크 */ --on-ewha: #fff; /* 초록 채움 위 글자 */ --badge-bg: #e4f2ea; --badge-ink: #1d6b4f; --serif: "ChosunilboMJ", "Noto Serif KR", "Batang", serif; --sans: "ChosunilboMJ", "Noto Serif KR", "Batang", serif; } /* ── 다크 모드 (2026-09-04, 학생 요청) ── 색은 전부 위 토큰으로만 쓰므로 여기서 토큰만 바꾼다. 상단바 ☾ 버튼이 를 정하고 (localStorage yb_theme), 정한 적이 없으면 기기 설정(prefers-color-scheme)을 따른다. 같은 값을 두 번 적는 까닭: CSS 는 미디어 쿼리 안팎을 한 블록으로 못 묶는다. 고칠 때 둘 다 고친다. */ :root[data-theme="dark"] { /* 검정·흰색 (2026-09-04 사용자 지시: 색을 뒤집는 게 아니라 흑백으로). 09-07 손봄: 순백 대신 상아색 글자, 순흑 대신 숯색 바탕, 바탕→카드→입력칸 세 단. 강조색(버튼 채움)은 상아색. 금색은 로고에서 온 아주 작은 강조 */ --ewha: #e8e3d8; --paper: #0f0f0e; --card: #171716; --field: #1e1e1c; --ink: #e8e3d8; --ink-soft: rgba(232,227,216,.66); --line: rgba(232,227,216,.30); --line-soft: rgba(232,227,216,.16); --soft: rgba(232,227,216,.06); --mid: #8f8b83; --mark: rgba(232,227,216,.16); --mark-line: #e8e3d8; --ok: #e8e3d8; --bad: #e8e3d8; --lock: rgba(232,227,216,.32); --paper-bar: rgba(15,15,14,.94); --paper-white: #1c1c1a; --paper-warm: #161615; --paper-cream: #161615; --rule-warm: rgba(232,227,216,.18); --ink-body: #e3ded3; --ewha-deep: #ffffff; --on-ewha: #111110; --badge-bg: rgba(232,227,216,.14); --badge-ink: #d9d4c9; --paper-rgb: 15,15,14; --ewha-rgb: 232,227,216; --gold: #b8964f; --gold-rgb: 184,150,79; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* 검정·흰색 (2026-09-04 사용자 지시: 색을 뒤집는 게 아니라 흑백으로). 09-07 손봄: 순백 대신 상아색 글자, 순흑 대신 숯색 바탕, 바탕→카드→입력칸 세 단. 강조색(버튼 채움)은 상아색. 금색은 로고에서 온 아주 작은 강조 */ --ewha: #e8e3d8; --paper: #0f0f0e; --card: #171716; --field: #1e1e1c; --ink: #e8e3d8; --ink-soft: rgba(232,227,216,.66); --line: rgba(232,227,216,.30); --line-soft: rgba(232,227,216,.16); --soft: rgba(232,227,216,.06); --mid: #8f8b83; --mark: rgba(232,227,216,.16); --mark-line: #e8e3d8; --ok: #e8e3d8; --bad: #e8e3d8; --lock: rgba(232,227,216,.32); --paper-bar: rgba(15,15,14,.94); --paper-white: #1c1c1a; --paper-warm: #161615; --paper-cream: #161615; --rule-warm: rgba(232,227,216,.18); --ink-body: #e3ded3; --ewha-deep: #ffffff; --on-ewha: #111110; --badge-bg: rgba(232,227,216,.14); --badge-ink: #d9d4c9; --paper-rgb: 15,15,14; --ewha-rgb: 232,227,216; --gold: #b8964f; --gold-rgb: 184,150,79; color-scheme: dark; } } /* 다크에서만 손보는 자리: 도판은 초록·흰 두 색뿐이라 뒤집고 색을 빼면 검은 바탕에 흰 점이 된다. 대리석·편지지 무늬는 종이색이 깔려 있어 어두운 바탕과 안 맞아 무지로 둔다. */ :root[data-theme="dark"] .track-card::before, :root[data-theme="dark"] body[data-route="course"] .course-top::before, :root[data-theme="dark"] .gtile .gt-img { filter: invert(1) grayscale(1) brightness(.72) contrast(.85); } :root[data-theme="dark"] .topbar .brand .brand-logo.light, :root[data-theme="dark"] .fp-logo.light { display: none; } :root[data-theme="dark"] .topbar .brand .brand-logo.dark { display: block; } :root[data-theme="dark"] .fp-logo.dark { display: inline-block; } :root[data-theme="dark"] .read-guide.primary, :root[data-theme="dark"] .card.primary, :root[data-theme="dark"] .ment { background-image: none; } :root[data-theme="dark"] .site-footer { background: #000; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .track-card::before, :root:not([data-theme="light"]) body[data-route="course"] .course-top::before, :root:not([data-theme="light"]) .gtile .gt-img { filter: invert(1) grayscale(1) brightness(.72) contrast(.85); } :root:not([data-theme="light"]) .topbar .brand .brand-logo.light, :root:not([data-theme="light"]) .fp-logo.light { display: none; } :root:not([data-theme="light"]) .topbar .brand .brand-logo.dark { display: block; } :root:not([data-theme="light"]) .fp-logo.dark { display: inline-block; } :root:not([data-theme="light"]) .read-guide.primary, :root:not([data-theme="light"]) .card.primary, :root:not([data-theme="light"]) .ment { background-image: none; } :root:not([data-theme="light"]) .site-footer { background: #000; } } /* 상단바 ☾/☀ — 휴대폰에서도 보여야 하므로 .mob-btn 이 아니다 */ .theme-btn { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 0; padding: 4px 9px; font-size: 14px; line-height: 1; flex: none; cursor: pointer; } .theme-btn:hover { border-color: var(--ewha); } .theme-btn .tb-ic { font-size: 14px; line-height: 1; } .theme-btn .tb-tx { font-size: 12px; letter-spacing: .02em; margin-left: 6px; } @media (max-width: 480px) { .theme-btn { order: 1; margin-left: auto; padding: 8px 10px; font-size: 15px; } .theme-btn .tb-tx { font-size: 11.5px; margin-left: 5px; } .topbar.bar-hide { transform: translateY(-105%); } } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.7; font-size: 16px; /* 한국어 조판: 단어 중간에서 꺾이지 않게. 긴 영문·주소만 예외로 쪼갠다. */ word-break: keep-all; overflow-wrap: break-word; } a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } button { font-family: inherit; cursor: pointer; } /* ── 상단 바 ── */ .topbar { position: sticky; top: 0; z-index: 20; transition: transform .22s ease; /* 폰: 내려 읽을 때 위로 숨는다(.bar-hide, app.js initBarHide) */ background: var(--paper-bar); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 10px 18px; } /* 상단바 왼쪽 브랜드 (2026-09-04 NUBI) — 글자 워드마크. 그림 로고가 오면 안에 를 넣는다. */ .topbar .brand { font-weight: 700; font-size: 15px; letter-spacing: .2em; text-indent: .2em; display: flex; align-items: center; gap: 10px; flex: none; color: var(--ewha); text-decoration: none; } .topbar .brand .brand-logo { height: 30px; width: auto; display: block; } .topbar .brand .brand-logo.dark, .fp-logo.dark { display: none; } /* 다크 모드에서만 켠다(테마 블록). .topbar .brand .brand-logo 보다 세게 */ .topbar .brand small { color: var(--ink-soft); font-weight: 400; margin-left: 0; } .topbar nav { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; } .topbar nav a { padding: 5px 11px; border-radius: 0; font-size: 13.5px; color: var(--ink); opacity: .92; text-decoration: none; } .topbar nav a.active { background: transparent; color: var(--ink); opacity: 1; font-weight: 700; box-shadow: inset 0 -2px 0 var(--ewha); } .topbar nav a.locked { opacity: .45; pointer-events: none; } /* 피드백 텀을 가르는 칸 — 책~문제1차 / 주과제①~문제2차 / 해설~원전해설 */ .topbar nav .nav-div { flex: none; width: 1px; align-self: stretch; background: var(--line-soft); margin: 3px 7px; } .topbar nav a.locked::before { content: "🔒 "; font-size: 11px; } /* 메뉴가 옆으로 더 있을 때 가장자리를 흐려서 "밀면 더 있다"는 신호를 준다 (app.js initNavFade가 켜고 끔) */ .topbar nav.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); } .topbar nav.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); } .topbar nav.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); } .nav-tracklabel { font-size: 11.5px; font-weight: 700; color: var(--paper); background: var(--mid); border-radius: 0; padding: 3px 10px; margin: 0 2px 0 6px; letter-spacing: .03em; white-space: nowrap; align-self: center; } /* ── 모바일 미리보기 ── */ .mob-btn { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 0; padding: 5px 11px; font-size: 13px; flex: none; } .mob-btn:hover { border-color: var(--ewha); } .phone-ov { position: fixed; inset: 0; z-index: 60; background: rgba(var(--ewha-rgb),.5); display: flex; align-items: center; justify-content: center; } .phone-frame { background: #1c1c1e; border-radius: 28px; padding: 10px 10px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; } .phone-top { display: flex; align-items: center; justify-content: space-between; color: #ddd; font-size: 12px; padding: 2px 8px 8px; } .phone-top button { border: none; background: #3a3a3c; color: var(--on-ewha); border-radius: 7px; padding: 3px 10px; font-size: 12px; } .phone-frame iframe { width: 390px; height: min(844px, calc(100vh - 130px)); height: min(844px, calc(100dvh - 130px)); border: none; border-radius: 20px; background: var(--paper); } body.msim .fb-btn { right: 12px; bottom: 12px; padding: 10px 14px; } /* ── 공통 레이아웃 ── */ .wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 90px; } .wrap.wide { max-width: 1360px; } h1.page { font-size: 23px; margin-bottom: 6px; font-weight: 700; letter-spacing: .01em; } p.sub { color: var(--ink); opacity: 1; font-size: 14.5px; margin-bottom: 24px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 22px 24px; margin-bottom: 18px; } .card h2 { font-size: 16.5px; margin-bottom: 12px; } .card h3 { font-size: 15px; margin: 18px 0 8px; } /* 상급 상자 — 과제 화면의 선생님 메시지 하나에만 대리석을 깐다(app.js markPrimary). 무늬는 트랙·권마다 다른 판이고 --marble 은 applyTrack 이 갈아 끼운다. 화면당 하나가 규칙이다. 여러 상자에 깔면 "여기부터 보라"는 신호가 죽는다. 쓰는 면(입력 카드)은 무지로 남긴다 — 눈이 피로하다는 지적이 나온 곳이 거기다. 글자 대비는 대리석 위에서도 7:1을 넘겨 AAA를 지킨다(실측). */ /* 선택자를 둘로 적는 이유: `.primary` 한 클래스만 쓰면 뒤에 오는 `.ment`(같은 특정도)가 background 와 border 를 도로 덮는다. 실제로 무늬가 안 떴다. */ /* 2026-08-13: 대리석은 선생님 메시지에서 안내 상자(.read-guide)로 옮겼다. 멘트는 편지지 무늬를 쓴다. 테두리는 2px 이 굵다는 지적을 받아 1px 로 돌렸다. */ .read-guide.primary, .card.primary { background-image: var(--marble); background-size: cover; background-position: center; border-width: 1px; } /* ── 가이드 ── */ .guide-toggle { display: inline-flex; gap: 8px; margin-bottom: 24px; } .gt-btn { appearance: none; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 22px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .gt-btn:not(.active):hover { border-color: var(--ewha); color: var(--ewha); background: var(--soft); } .gt-btn.active { background: var(--ewha); border-color: var(--ewha); color: var(--on-ewha); } .guide-sec p { line-height: 1.75; font-size: 14.5px; color: var(--ink); margin: 0 0 10px; } .guide-sec p:last-child { margin-bottom: 0; } .guide-oneline { font-size: 15px; line-height: 1.9; } .guide-oneline b { color: var(--ewha); font-weight: 700; margin: 0 5px; } .guide-tracks { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; } .guide-tracks-full { gap: 0; } .guide-track { padding: 18px 0 4px; border-top: 1px solid var(--line); } .guide-track:first-child { padding-top: 0; border-top: none; } .guide-track-hd { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .guide-track-hd b { font-size: 15px; font-weight: 700; color: var(--ewha); } .guide-track-sub { font-size: 11.5px; color: var(--ink); opacity: .55; } .guide-track-line { display: block; font-size: 13.5px; margin-top: 3px; color: var(--ink); } .guide-track-full .guide-track-line-lg { font-size: 14.5px; font-weight: 600; margin: 4px 0 9px; } .guide-track-full p { line-height: 1.72; font-size: 13.5px; color: var(--ink); margin: 0 0 8px; } .guide-track-full p:last-child { margin-bottom: 0; } .guide-track-principle { opacity: .92; } .guide-track-principle b { color: var(--ewha); font-weight: 700; } .guide-books { display: flex; gap: 26px; margin-top: 14px; flex-wrap: wrap; } .guide-books-col { flex: 1; min-width: 180px; } .guide-books-col h4 { font-size: 11.5px; letter-spacing: .05em; color: var(--ewha); font-weight: 700; margin: 0 0 7px; } .guide-books-col ul { list-style: none; margin: 0; padding: 0; } .guide-books-col li { font-size: 13px; line-height: 1.7; color: var(--ink); } .gb-no { display: inline-block; min-width: 32px; opacity: .5; font-size: 11.5px; } .gb-tbd { opacity: .5; } .guide-eg { background: var(--soft); border: 1px solid var(--line); padding: 12px 15px; margin-top: 16px; font-size: 13.5px; line-height: 1.75; } .guide-eg b { color: var(--ewha); font-weight: 700; } .guide-flow { margin: 12px 0 0; padding-left: 22px; } .guide-flow li { margin-bottom: 11px; line-height: 1.72; font-size: 14.5px; } .guide-flow li:last-child { margin-bottom: 0; } .guide-cta { margin-top: 18px; } .guide-toc { background: var(--soft); border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 26px; } .guide-toc-hd { font-size: 11.5px; letter-spacing: .06em; color: var(--ewha); font-weight: 700; margin-bottom: 8px; } .guide-toc-list { display: flex; flex-direction: column; gap: 1px; } .guide-toc-item { appearance: none; border: none; background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); padding: 7px 6px; cursor: pointer; display: flex; align-items: center; gap: 11px; border-radius: 4px; transition: background .12s, color .12s; } .guide-toc-item:hover { background: var(--card); color: var(--ewha); } .guide-toc-item b { flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--ewha); color: var(--on-ewha); font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .guide-group { margin-bottom: 6px; } .guide-group-hd { display: flex; align-items: center; gap: 12px; margin: 38px 0 14px; } .guide-group:first-child .guide-group-hd { margin-top: 4px; } .guide-group-no { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ewha); color: var(--on-ewha); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .guide-group-title { font-size: 14.5px; font-weight: 700; letter-spacing: .01em; color: var(--ink); white-space: nowrap; } .guide-group-rule { flex: 1; height: 1px; background: var(--line); } .guide-eg-tracks { display: flex; flex-direction: column; margin-top: 14px; } .guide-eg-track { padding: 20px 0 4px; border-top: 1px solid var(--line); } .guide-eg-track:first-child { padding-top: 0; border-top: none; } .guide-eg-track-hd { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; } .guide-eg-track-hd b { font-size: 14.5px; font-weight: 700; color: var(--ewha); } .guide-eg-track-hd span { font-size: 12px; color: var(--ink); opacity: .58; } .guide-eg-steps { margin: 0 0 9px; padding-left: 20px; } .guide-eg-steps li { font-size: 12.5px; line-height: 1.65; color: var(--ink); opacity: .8; } .guide-eg-track p { font-size: 13.5px; line-height: 1.72; color: var(--ink); margin: 0; } /* ── 멘트 (선생님 메시지) ── */ .ment { background: var(--soft); border: 1px solid var(--line); border-radius: 0; padding: 20px 22px; margin-bottom: 22px; /* 편지지 무늬 — assets/art/paper.webp, applyTrack 이 --paper-tex 를 채운다 */ background-image: var(--paper-tex); background-size: 320px 320px; background-repeat: repeat; } .ment .who { font-size: 12.5px; color: var(--ink); font-weight: 700; margin-bottom: 8px; letter-spacing: .04em; } .ment p { margin-bottom: 10px; font-size: 15px; } .ment p:last-child { margin-bottom: 0; } /* ── 홈 진행 카드 ── */ .stage-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .stage { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 16px 20px; color: inherit; transition: border-color .15s; text-decoration: none; } .stage:hover { border-color: var(--ewha); } .stage.locked { opacity: .5; pointer-events: none; } .stage .num { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--soft); color: var(--ink); font-weight: 700; font-size: 14px; border: 1px solid var(--line); } .stage.done .num { background: var(--mid); border-color: transparent; color: var(--paper); } .stage .t { flex: 1; } .stage .t b { display: block; font-size: 15.5px; } .stage .t span { font-size: 13px; color: var(--ink-soft); } .stage .badge { font-size: 12px; color: var(--ink-soft); flex: none; } .stage.done .badge { color: var(--ink); font-weight: 600; } /* ── 홈: 속표지형 표제 (괘선 — 메달리온 — 영문 소제 — 표제 — 태그라인 — 괘선) ── */ .home-hero { text-align: center; word-break: keep-all; padding: 18px 0 2px; margin-bottom: 30px; } .fp-rule { height: 5px; border-top: 1px solid var(--ewha); border-bottom: 1px solid var(--ewha); opacity: .55; margin: 0 auto; } /* NUBI 로고 (2026-09-07 그림 확정 — 남색 N + 금색 별, assets/logo/). 히어로는 세로 원본 색, 다크는 흰색판. 글자 워드마크(.fp-brand-mark)는 그림이 못 뜰 때의 예비로 남겨 둔다. 옛 "사유하는 법학적성시험" 워드마크는 assets/wordmark.webp. */ .fp-brand { margin: 34px auto 10px; line-height: 1; } .fp-logo { display: inline-block; height: 172px; width: auto; } .fp-brand-mark { display: inline-block; font-size: 64px; font-weight: 700; letter-spacing: .3em; text-indent: .3em; color: var(--ewha); } .fp-title { font-size: 15px; font-weight: 700; letter-spacing: .12em; text-indent: .12em; line-height: 1.2; margin: 0 0 4px; } .fp-title::before { content: "- "; font-weight: 400; } .fp-title::after { content: " -"; font-weight: 400; } .fp-title-en { font-size: 15px; font-weight: 400; letter-spacing: .1em; color: var(--ink); line-height: 1.2; margin: 0 0 30px; } .fp-sub { font-size: 12.5px; color: var(--ink); max-width: 500px; margin: 0 auto 50px; line-height: 1.72; } @media (max-width: 720px) { .fp-brand { margin-top: 26px; } .fp-brand-mark { font-size: 46px; } .fp-logo { height: 128px; } .fp-sub { max-width: 100%; padding: 0 8px; margin-bottom: 40px; } } /* ── 사이트 푸터 (로기카데미아) ── */ .site-footer { margin-top: 46px; padding: 30px 20px; background: var(--ewha); display: flex; align-items: center; justify-content: center; } .footer-logo { height: 38px; width: auto; display: block; } @media (max-width: 480px) { .site-footer { margin-top: 32px; padding: 24px 16px; } .footer-logo { height: 30px; } } /* ── 상단바 시험 드롭다운 (2026-09-06, 1층위) ── */ .exam-menu { position: relative; flex: none; } .exam-cur { font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; padding: 4px 8px; border: 1px solid var(--line-soft); background: transparent; color: var(--ink); border-radius: 0; cursor: pointer; white-space: nowrap; } .exam-cur:hover, .exam-menu.open .exam-cur { border-color: var(--ewha); } .exam-caret { font-size: 10px; opacity: .7; } .exam-list { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 230px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(var(--ewha-rgb),.15); } .exam-menu.open .exam-list { display: block; } .exam-list button { display: flex; width: 100%; align-items: baseline; gap: 8px; padding: 9px 12px; border: none; border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--ink); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; border-radius: 0; } .exam-list button:last-child { border-bottom: none; } .exam-list button:hover { background: var(--soft); } .exam-list button b { letter-spacing: .08em; min-width: 46px; } .exam-list button span { color: var(--ink-soft); font-size: 12px; } .exam-list button small { margin-left: auto; font-size: 11px; color: var(--ink-soft); white-space: nowrap; } .exam-list button.on b::before { content: "✓ "; } .exam-list button.soon { opacity: .55; cursor: default; } @media (max-width: 480px) { .exam-cur { padding: 6px 8px; min-height: 32px; } .exam-list { min-width: 210px; } } /* ── 홈: 과정 머리글 · "다음 단계" 진열대 (2026-09-06, 2층위) ── */ .prog-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--line); } .prog-kicker { font-size: 11.5px; letter-spacing: .18em; text-indent: .18em; color: var(--ink-soft); } .prog-head h2 { font-size: 20px; font-weight: 700; letter-spacing: .02em; margin: 0; } .prog-head p { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; } /* ── 2층 그래픽 바 — 홈에서 히어로 아래, 트랙 카드 바로 위. 그림 타일 한 줄, 누르면 아래가 바뀐다 ── */ .gbar { display: flex; gap: 12px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .gbar::-webkit-scrollbar { display: none; } .gtile { flex: 1 1 0; min-width: 150px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s; } .gtile .gt-img { display: block; height: 92px; background: center / cover no-repeat; opacity: .85; transition: opacity .15s; } .gtile .gt-name { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; font-size: 13.5px; font-weight: 700; min-width: 0; line-height: 1.3; } .gtile .gt-name > span { flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; } .gtile .gt-name small { flex: none; margin-top: 1px; } .gtile .gt-name small { font-size: 10.5px; font-weight: 400; border: 1px solid var(--line-soft); padding: 0 5px; color: var(--ink-soft); } a.gtile:hover { border-color: var(--ewha); } a.gtile:hover .gt-img { opacity: 1; } .gtile.on { border-color: var(--ewha); box-shadow: inset 0 -3px 0 var(--ewha); } .gtile.on .gt-img { opacity: 1; } .gtile.off { opacity: .5; cursor: default; } .gtile.off .gt-img { filter: grayscale(1); } .gtile.off .gt-name { font-weight: 400; } @media (max-width: 480px) { .gbar { gap: 8px; margin: 0 0 14px; } .gtile { flex: 0 0 44%; min-width: 0; } .gtile .gt-img { height: 74px; } .gtile .gt-name { font-size: 12.5px; padding: 7px 8px; letter-spacing: -.01em; } } /* 과정 목록 페이지 — 카드 그리드 */ .shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 4px; } .prog-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 16px 18px 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s; } .prog-card .pc-idx { position: absolute; right: 14px; top: 6px; font-size: 46px; line-height: 1; font-weight: 700; color: var(--ewha); opacity: .09; } .prog-card .pc-kicker { font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); } .prog-card b { font-size: 17px; line-height: 1.3; } .prog-card .pc-medium { font-size: 12.5px; } .prog-card .pc-blurb { font-size: 13px; color: var(--ink-soft); line-height: 1.65; margin: 0; } .prog-card .pc-state { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line-soft); font-size: 12.5px; font-weight: 700; } .prog-card.locked { border-style: dashed; } .prog-card.locked > *:not(.pc-state):not(.pc-idx) { opacity: .55; } .prog-card.locked .pc-state { color: var(--ink-soft); font-weight: 400; } .prog-card.soon .pc-state { color: var(--ink-soft); } .prog-card.open { border-color: var(--ewha); box-shadow: inset 0 -3px 0 var(--ewha); } .prog-card.open .pc-state { color: var(--ewha); } a.prog-card:hover { border-color: var(--ewha); } .pc-tbd { border: 1px solid var(--line-soft); padding: 1px 6px; font-size: 11px; color: var(--ink-soft); } /* 과정 페이지 */ .program-hero { border: 1px solid var(--line); padding: 22px 24px 18px; margin: 12px 0 18px; } .program-hero h1 { font-size: 24px; margin: 6px 0 8px; } .program-hero .kv { margin-top: 10px; font-weight: 700; } /* ── 홈: 트랙 선택 ── */ .track-grid { display: flex; flex-direction: column; gap: 18px; } .track-card { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 22px 26px; position: relative; overflow: hidden; /* 처음부터 합성 레이어로 고정 — 호버 시 캔버스가 끼어도 글자 안티앨리어싱이 바뀌지 않게 */ transform: translateZ(0); } /* 디더링 도판 — 단일색 저농도 배경 */ .track-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; /* F. 패럴랙스 — js/fx.js가 --fx-par를 갱신 (기본 0) */ background-position: center calc(30% + var(--fx-par, 0px)); background-size: cover; pointer-events: none; opacity: .10; transition: opacity 1.1s ease; } /* B·E. 잉크 번짐 리빌 — js/fx.js가 fx-wait를 붙였다 떼면 농도가 배어 나옴 */ .track-card { transition: border-color .9s ease; } .track-card.fx-wait { border-color: transparent; } .track-card.fx-wait::before { opacity: 0; } .track-card.fx-wait > * { opacity: 0; } .track-card > * { transition: opacity .9s ease; } /* 캔버스 디더 산란 — 호버 동안 정적 도판을 캔버스가 대체 */ .track-card.fx-canvas-on::before { opacity: 0 !important; transition: opacity .2s ease; } .fx-dither-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .btn:not(.ghost):not(:disabled) { transition: none; } .track-card, .track-card::before, .track-card > * { transition: none; } } .track-grid .track-card:nth-child(1)::before { background-image: url("../assets/art/misi.webp"); } .track-grid .track-card:nth-child(2)::before { background-image: url("../assets/art/geosi.webp"); } .track-grid .track-card:nth-child(3)::before { background-image: url("../assets/art/nonri.webp"); } .track-grid .track-card:nth-child(4)::before { background-image: url("../assets/art/churon.webp"); } .track-card > * { position: relative; z-index: 1; } .track-card.soon { opacity: 1; } .track-card.soon::before { opacity: .06; } .track-card.soon > * { opacity: .9; } .tk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } .tk-head b { font-size: 20px; font-weight: 700; } .tk-meta { font-size: 12.5px; color: var(--ink); opacity: .95; } .tk-tagline { font-size: 13.5px; color: var(--ink); font-weight: 600; margin-left: auto; } /* 왼쪽 기둥은 책장 폭(책 여섯 권 + 틀 ≈ 500px)에 맞추고 나머지는 설명란이 가져간다 — 넓은 화면에서 책장 오른쪽이 비지 않게 (2026-09-07) */ .tk-cols { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 6px 30px; align-items: start; } .tk-col { min-width: 0; } /* 481~720px 좁은 창: 1단 컬럼에서도 6칸은 빠듯하다 — 3칸으로 */ @media (max-width: 720px) { .vol-grid { grid-template-columns: repeat(3, 1fr); } } .tk-intro { font-size: 14px; color: var(--ink); margin-bottom: 8px; } .tk-tasks { margin: 10px 0; font-size: 13.5px; } .tk-tasks b { font-size: 12.5px; color: var(--ink); font-weight: 700; display: block; margin-bottom: 4px; } .tk-tasks ul { padding-left: 18px; } .tk-tasks li { margin-bottom: 2px; } .tk-book { font-size: 13px; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; } .track-card .btn { align-self: flex-start; } .tk-sec { margin-top: 14px; } .tk-col .tk-sec:first-child { margin-top: 0; } .tk-sec > b { display: block; font-size: 13px; color: var(--ink); font-weight: 700; margin-bottom: 6px; } /* ── 권 진행 그리드 (일반부 6 + 심화부 6) ── */ .vol-wrap { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; } .vol-row { display: flex; align-items: center; gap: 10px; } .vol-label { font-size: 11px; color: var(--ink); opacity: .9; font-weight: 700; width: 40px; flex: none; letter-spacing: .04em; } .vol-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; flex: 1; } .vol-cell { border: 1px solid var(--line); border-radius: 0; background: rgba(var(--paper-rgb),.82); min-height: 76px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11.5px; color: var(--ink); line-height: 1.35; padding: 6px 5px; text-align: center; } .vol-n { font-size: 10.5px; opacity: .8; } .vol-book { display: block; font-size: 11px; font-weight: 600; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .vol-eng { display: block; font-size: 8.5px; color: var(--ink); font-style: italic; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vol-auth { display: block; font-size: 9.5px; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .vol-cell:not(.current) .vol-book, .vol-cell:not(.current) .vol-eng, .vol-cell:not(.current) .vol-auth { opacity: .88; } /* 현재 권 = 상태 — 50% 채움 색반전 (진한 채움은 버튼 전용) */ .vol-cell.current { background: var(--mid); border: 1px solid var(--mid); color: var(--paper); box-shadow: none; } .vol-cell.current .vol-book, .vol-cell.current .vol-eng, .vol-cell.current .vol-auth, .vol-cell.current > b, .vol-cell.current .frac { color: var(--paper); opacity: 1; } .vol-cell.current > b { font-size: 10.5px; font-weight: 700; } .vol-cell.current .frac { font-size: 10.5px; font-weight: 700; } .vol-cell.complete { background: var(--mid); border-color: var(--mid); color: var(--paper); } .vol-wrap.compact .vol-cell { min-height: 34px; } /* 마친 권은 눌러서 복습한다 (2026-08-22) */ .vol-cell.complete .vol-review { color: inherit; text-decoration: none; } .vol-cell.complete .vol-review:hover .frac { text-decoration: underline; } .review-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 20px; border: 1px solid var(--mid); } .review-band b { font-size: 14px; } .review-band span { font-size: 13px; opacity: .85; flex: 1 1 260px; } /* ── 권 호버 카드 — 박스에 마우스를 올리면 우측 컬럼(소개 자리)에 책 카드가 펼쳐진다. .tk-cols(grid 2열·gap 30px) 기준으로 오른쪽 절반(=우측 컬럼)에 얹는다. ── */ .vol-hovercard { position: absolute; top: 0; left: calc(50% + 15px); right: 0; z-index: 30; display: none; } .vol-cell.has-card:hover > .vol-hovercard { display: block; } /* 클릭으로 고정된 카드 — 호버가 벗어나도 열려 있는다 (app.js initPinHovercard) */ .vol-cell.has-card.pinned > .vol-hovercard { display: block; } .vol-cell.has-card.pinned { outline: 2px solid var(--ewha); outline-offset: -2px; } /* 소개 패널과 구분되는 밝은 카드 — 왼쪽 녹색 액센트 바 + 옅은 녹색 헤더 띠 */ .vhc-inner { position: relative; overflow: hidden; cursor: default; text-align: left; color: var(--ink, #00462a); background-color: var(--paper, #f3eee1); background-repeat: no-repeat; background-position: center; background-size: cover; border: 1px solid var(--line); border-left: 4px solid var(--ewha); box-shadow: 0 14px 34px rgba(var(--ewha-rgb),.22); padding: 0 18px 15px; /* 상단은 헤더 띠가 대신 채운다 */ } /* 디더 위 종이 워시 — 글씨는 그 위 z-index로 또렷 */ .vhc-inner::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--paper-rgb),.93), rgba(var(--paper-rgb),.87)); } .vhc-inner > * { position: relative; z-index: 1; } /* 헤더 — 한 줄: 권수·한글명(크게) + 영문명·저자(작게), 우측에 진도바+숫자 */ .vhc-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 0 -18px; padding: 10px 18px; background: rgba(var(--ewha-rgb),.035); border-bottom: 1px solid var(--line-soft, rgba(var(--ewha-rgb),.25)); } .vhc-titles { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; } .vhc-vol, .vhc-name { font-size: 14.5px; font-weight: 700; flex: none; line-height: 1.2; } .vol-cell.has-card .vhc-inner b { color: var(--ink, #00462a); } .vhc-meta { font-size: 10.5px; color: var(--ink-soft, rgba(var(--ewha-rgb),.72)); overflow: hidden; text-overflow: ellipsis; } .vhc-prog { display: flex; align-items: center; gap: 8px; flex: none; } .vhc-prog > span { font-size: 11px; font-weight: 700; color: var(--ink-soft, rgba(var(--ewha-rgb),.72)); } .vhc-bar { width: 46px; height: 6px; background: rgba(var(--ewha-rgb),.13); } .vhc-bar i { display: block; height: 100%; background: var(--ewha); } .vhc-blurb { font-size: 12px; line-height: 1.65; margin: 11px 0 0; } .vhc-sec { margin-top: 9px; } .vhc-sec > b { font-size: 11px; font-weight: 700; letter-spacing: .02em; } .vhc-sec p { font-size: 11.5px; line-height: 1.6; margin: 2px 0 0; } .vhc-tasks { margin: 3px 0 0; padding-left: 16px; font-size: 11.5px; line-height: 1.58; } /* ── 상태 문장 ── */ .status-line { display: flex; align-items: center; gap: 9px; background: rgba(var(--paper-rgb),.85); border: 1px solid var(--line); border-radius: 0; padding: 10px 14px; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 4px; } .status-line .st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ewha); flex: none; } .status-line.dim { color: var(--ink-soft); } .status-line.dim .st-dot { background: var(--lock); } .course-top { padding: 18px 20px; } /* 진행 화면 안내 문장 + 뒤로 가기 버튼 — 버튼만 우측 정렬 */ .course-subrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; } .course-subrow .sub { margin: 0; } .course-subrow .course-back { flex: none; margin-left: auto; } /* 진행 화면 상단 카드 — 트랙 도판을 아주 옅게 */ body[data-route="course"] .course-top { position: relative; overflow: hidden; } body[data-route="course"] .course-top::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../assets/art/misi.webp") no-repeat center 30% / cover; opacity: .07; pointer-events: none; } body[data-route="course"] .course-top > * { position: relative; z-index: 1; } /* ── 읽기 화면 ── */ .read-layout { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; } /* 좁은 화면 전용 목차 버튼 — 넓은 화면에선 숨긴다 (@media 900에서 켜짐) */ .toc-toggle { display: none; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 0; padding: 12px 14px; font-size: 14px; font-weight: 600; } .toc { position: sticky; top: 66px; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 14px; } .toc .part { font-size: 11.5px; font-weight: 700; color: var(--ink); opacity: .85; letter-spacing: .06em; margin: 14px 0 4px; text-transform: uppercase; } .toc .part:first-child { margin-top: 0; } .toc a { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 0; font-size: 13.5px; color: var(--ink); text-decoration: none; } .toc a.active { background: var(--soft); font-weight: 600; } .toc a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-soft); flex: none; } .toc a.readdone .dot { background: var(--ewha); } /* 아직 안 열린 챕터 — 앞 장 '다 읽음' 체크 전 (app.js viewRead 읽기 순서 게이트) */ .toc .toc-locked { display: flex; align-items: center; gap: 6px; padding: 5px 8px; opacity: .45; cursor: not-allowed; } .toc .toc-locked .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-soft); flex: none; } /* 책 본문 박스 — 원래(v1 기본디자인) 종이 박스 유지: 흰 카드·둥근 모서리·노토세리프·노랑 형광펜 */ .book { background: var(--paper-white); border: 1px solid var(--rule-warm); border-radius: 14px; padding: 34px 38px; color: var(--ink-body); font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif; } .book h2.chapter-title { font-family: inherit; font-size: 21px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-warm); } .book .para { font-family: inherit; font-size: var(--read-fs, 16.5px); line-height: 1.95; margin-bottom: 16px; padding: 3px 8px; border-radius: 6px; cursor: pointer; position: relative; transition: background .12s; } .book .para:hover { background: #f6f1e7; } .book .para.marked { background: #fff3c4; box-shadow: inset 3px 0 0 #e0b940; } .book .para .speaker { font-weight: 700; } .mark-hint { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink); background: var(--soft); border: 1px solid var(--ewha); border-radius: 0; padding: 14px 16px; margin-bottom: 22px; line-height: 1.65; } .mark-hint .mh-icon { font-size: 20px; flex: none; margin-top: 1px; } .mark-hint b { color: var(--ink); } .chapter-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 10px; } .memo-box { margin-top: 26px; border-top: 1px dashed var(--line); padding-top: 18px; } .memo-box label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 8px; } .memo-box .hint { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; } /* ── 장별 해설 ── */ .chapter-note { margin-top: 26px; background: var(--soft); border: 1px solid var(--line); border-radius: 0; padding: 22px 24px; } .chapter-note .cn-head { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .05em; margin-bottom: 8px; } .chapter-note h3 { font-size: 16px; margin-bottom: 12px; } .chapter-note p { font-size: 14.5px; line-height: 1.85; margin-bottom: 10px; } .chapter-note p:last-child { margin-bottom: 0; } .chapter-note.locked { opacity: .75; } .chapter-note.locked p { color: var(--ink-soft); } .chapter-note.locked .cn-head::before { content: "🔒 "; } /* ── 폼 요소 ── */ textarea, input[type="text"], input[type="number"], select { width: 100%; border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; font-family: inherit; font-size: 15px; background: var(--field); color: var(--ink); } textarea { min-height: 110px; resize: vertical; line-height: 1.8; } textarea.tall { min-height: 260px; } textarea:focus, input:focus, select:focus { outline: 2px solid var(--ewha); border-color: transparent; } .field { margin-bottom: 16px; } .field > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .field .hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; } /* 필드 안의 보조 라벨 — placeholder만으로 안 보이는 지시문을 항상 보이게 (예: task/1 한 줄 이유) */ .field label.field-sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; } .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .conf { width: 90px !important; flex: none; } .btn { display: inline-block; border: none; border-radius: 0; padding: 10px 20px; font-size: 14.5px; font-weight: 400; letter-spacing: .04em; background: var(--ewha); color: var(--paper); text-decoration: none; } /* D. 잉크 스윕 — 채움 버튼 호버 시 왼→오로 짙은 잉크가 쓸림 */ .btn:not(.ghost):not(:disabled) { background-image: linear-gradient(to right, var(--ewha-deep) 0 50%, var(--ewha) 50% 100%); background-size: 200% 100%; background-position: 100% 0; transition: background-position .35s ease; } .btn:not(.ghost):not(:disabled):hover { background-position: 0 0; } .btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); } .btn.ghost:hover { border-color: var(--ewha); background: transparent; } .btn.small { padding: 6px 13px; font-size: 13px; } .btn:disabled { background: var(--lock); cursor: not-allowed; } .btn-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; } .submitted-note { font-size: 13.5px; color: var(--ink); font-weight: 600; } /* ── 지문 인용 ── */ /* 지문 인용·문장 카드 — 원래(v1) 종이 박스: 학생이 원문을 읽는 면 */ .passage { background: var(--paper-warm); border: 1px solid var(--rule-warm); border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; color: var(--ink-body); font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif; } .passage .turn { font-family: inherit; font-size: 15.5px; line-height: 1.9; margin-bottom: 12px; } .passage .turn:last-child { margin-bottom: 0; } .passage .turn .speaker { font-weight: 700; } .passage .turn.narr { color: #6b6257; font-style: normal; } .sentence-card { background: var(--paper-warm); border: 1px solid var(--rule-warm); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; color: var(--ink-body); font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif; font-size: 15px; line-height: 1.9; } .sentence-card .sn { font-weight: 700; color: #8a5a2b; margin-right: 6px; } /* ── 채점 결과 — 단일색: 맞음=옅은 채움, 틀림=테두리 굵기로 ── 2026-08-05: 45도 빗금 채움을 걷어냈다. 글자와 줄무늬가 겹쳐 해설이 읽히지 않고 오래 보면 눈이 아프다는 지적. 강도 위계는 채움 대신 테두리 굵기로 낸다. */ .grade { border-radius: 0; padding: 12px 16px; margin-top: 10px; font-size: 14px; } .grade.ok { background: var(--soft); border: 1px solid var(--ewha); } .grade.bad { background: var(--field); border: 2px solid var(--ewha); } .grade b.v { font-weight: 700; } .grade.ok b.v, .grade.bad b.v { color: var(--ink); } /* ── 해설 ── */ .commentary .model { background: var(--soft); border: 1px solid var(--line); border-radius: 0; padding: 14px 18px; margin: 10px 0; font-family: var(--serif); font-size: 15px; line-height: 1.9; } .commentary .demo { background: var(--field); border: 2px solid var(--ewha); border-radius: 0; padding: 14px 18px; margin: 10px 0; font-family: var(--serif); font-size: 15px; line-height: 1.9; } .commentary .diag { font-size: 14.5px; color: var(--ink); margin: 8px 0 20px; } .commentary .tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ink); background: transparent; border: 1px solid var(--ewha); border-radius: 0; padding: 2px 10px; margin-right: 6px; } .commentary .tag.good { background: var(--ewha); color: var(--paper); border-color: var(--ewha); } .kv { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 4px; } /* ── 리트 문제 — 시험지 조판 (2026-08-05) ───────────────── 책 화면을 전자책처럼 꾸민 것과 같은 이치로, 문제 화면은 실제 시험지를 흉내 낸다. 흰 종이·명조·좌우 정렬·①~⑤ 선지. 색은 짙은 먹 하나로만 간다(이화그린 계열). */ /* 시험지 3색 (2026-08-13) — 초록·크림에 테라코타를 더한다. 테라코타는 "제출한 뒤에 열린 것"에만 쓴다. 문제를 풀 때는 안 보이고, 내고 나면 새로 생긴 것이 그 색으로만 표시되니 무엇이 추가됐는지 한눈에 갈린다. 문항·선지 같은 원래 있던 것에는 절대 쓰지 않는다. */ .exam { --e-ink: #14261e; --e-soft: rgba(20,38,30,.6); --e-rule: rgba(20,38,30,.3); --e-new: #a4552f; --e-new-soft: rgba(164,85,47,.09); --e-new-rule: rgba(164,85,47,.35); } .exam-sheet { background: var(--paper-cream); border: 1px solid var(--e-rule); border-radius: 0; padding: 26px 28px; margin-bottom: 14px; color: var(--e-ink); font-family: "Noto Serif KR", "ChosunilboMJ", "Batang", serif; } .exam-tag { font-size: 12.5px; letter-spacing: .06em; color: var(--e-soft); border-bottom: 1px solid var(--e-rule); padding-bottom: 7px; margin-bottom: 15px; } .exam-passage p { font-size: 16px; line-height: 2.0; text-align: justify; text-indent: 1em; margin-bottom: .45em; } .exam-passage p:last-child { margin-bottom: 0; } /* 문항 안에 붙는 지문(추리논증 조판) — 발문과 선지 사이에서 한 칸 물러나 앉는다 */ .exam-passage.in { margin: 0 0 16px; padding-left: 14px; border-top: 1px solid var(--e-rule); border-bottom: 1px solid var(--e-rule); padding-top: 14px; padding-bottom: 14px; } .exam-passage.in p { font-size: 15.5px; line-height: 1.95; } .exam-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; } .exam-no { flex: none; font-weight: 700; font-size: 17px; } .exam-stem { flex: 1 1 260px; font-weight: 700; font-size: 16px; line-height: 1.8; } .exam-kind { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--e-soft); border: 1px solid var(--e-rule); padding: 1px 8px; white-space: nowrap; } .exam-box { border: 1px solid var(--e-ink); padding: 14px 18px; margin: 0 0 16px; } .exam-box-label { text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .18em; margin-bottom: 10px; } .exam-box p { font-size: 15px; line-height: 1.95; text-align: justify; margin-bottom: .4em; } .exam-box p:last-child { margin-bottom: 0; } .exam-choices { list-style: none; margin: 0; padding: 0; } .exam-choices label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 7px 9px; font-size: 15.5px; line-height: 1.8; } .exam-choices label:hover { background: rgba(20,38,30,.05); } .exam-choices label.on { background: rgba(20,38,30,.1); } .exam-choices input { position: absolute; opacity: 0; width: 0; height: 0; } .exam-choices .cn { flex: none; font-weight: 700; } .exam-choices label.on .cn { text-decoration: underline; text-underline-offset: 3px; } .exam-choices .ct { text-align: justify; } .exam-choices input:focus-visible + .cn { outline: 2px solid var(--e-ink); outline-offset: 2px; } /* 해설 — 제출 뒤에만 열린다. 빗금 없이 규칙선과 여백으로만 나눈다. */ .exam-sol { margin-top: 20px; border-top: 2px solid var(--e-new); padding-top: 14px; background: var(--e-new-soft); margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; padding-bottom: 4px; } .exam-sol-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; margin-bottom: 12px; } .exam-sol-verdict { font-weight: 700; font-size: 13px; padding: 2px 10px; border: 1px solid var(--e-new); color: var(--e-new); } /* 틀린 문항만 색을 채운다 — 맞은 것까지 채우면 다시 구별이 안 된다 */ /* 다른 학생들의 오답률 (2026-09-04) — 판정 줄 끝에 작게 */ .exam-rate { display: block; width: 100%; margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); } .exam-rate-note { margin-top: 6px; } .exam-sol.bad .exam-sol-verdict { background: var(--e-new); color: var(--paper-cream); } .exam-sol-body p { font-size: 15px; line-height: 1.9; text-align: justify; margin-bottom: .65em; } .exam-sol-body p:last-child { margin-bottom: 0; } .exam-sol-sec { background: var(--paper-cream); border: 1px solid var(--e-new-rule); padding: 13px 16px; margin: 12px 0; } .exam-sol-lab { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--e-new); border-bottom: 1px solid var(--e-new-rule); padding-bottom: 3px; margin-bottom: 8px; } .exam-sol-list { list-style: none; margin: 12px 0; padding: 0; } .exam-sol-list li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.85; padding: 9px 0; border-top: 1px solid rgba(20,38,30,.14); } .exam-sol-list li:first-child { border-top: 0; padding-top: 0; } .exam-sol-list li b { flex: none; } .exam-sol-list li span { text-align: justify; } /* ── 요소 검사기 (관리자 전용, 2026-08-05) ────────────── 화면을 손볼 때 쓰는 도구다. 학생에게는 안 보인다. 상자 네 겹은 브라우저 개발자 도구와 같은 색 약속을 쓴다 — 바깥 여백=주황, 테두리=노랑, 안 여백=초록, 알맹이=파랑. */ .ins-layer { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; } .ins-layer i { position: fixed; display: block; } .ins-layer .ins-m { background: rgba(246,178,107,.42); } .ins-layer .ins-b { background: rgba(255,229,143,.45); } .ins-layer .ins-p { background: rgba(147,196,125,.45); } .ins-layer .ins-c { background: rgba(111,168,220,.45); outline: 1px solid rgba(30,90,160,.75); } .ins-panel { position: fixed; z-index: 2147483001; pointer-events: none; min-width: 232px; max-width: 340px; background: rgba(18,26,22,.95); color: #eef2ee; border: 1px solid rgba(255,255,255,.16); padding: 10px 12px; font-size: 12px; line-height: 1.55; font-family: "SF Mono", Menlo, Consolas, monospace; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .ins-panel .ins-head { border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 7px; margin-bottom: 7px; } .ins-panel .ins-head b { display: block; font-size: 13px; color: #ffd98a; font-family: var(--sans); font-weight: 700; margin-bottom: 2px; } .ins-panel .ins-head code { font-size: 11px; color: #9fd8b4; word-break: break-all; } .ins-panel .ins-row { display: flex; gap: 10px; justify-content: space-between; } .ins-panel .ins-row span { color: #9aa8a0; font-family: var(--sans); flex: none; } .ins-panel .ins-row b { font-weight: 500; text-align: right; word-break: break-all; } .ins-chip { position: fixed; left: 14px; bottom: 14px; z-index: 2147483002; display: inline-flex; align-items: baseline; gap: 8px; background: var(--ewha); color: var(--paper); border: none; border-radius: 0; padding: 9px 14px; font-family: var(--sans); font-size: 13px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.3); } .ins-chip span { font-weight: 400; font-size: 11.5px; opacity: .8; } .ins-chip:hover { background: var(--ewha-deep); } /* ── 피드백 도착 알림 — 주목 최상급: 진한 채움 ── */ .notif-banner { display: flex; gap: 9px; align-items: center; background: var(--ewha); border: 1px solid var(--ewha); border-radius: 0; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; color: var(--paper); text-decoration: none; } .notif-banner:hover { background: var(--ewha-deep); } .notif-banner b { color: var(--paper); } .topbar nav a.dot { position: relative; } .topbar nav a.dot::after { content: ""; position: absolute; top: 3px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--ewha); box-shadow: 0 0 0 2px var(--paper); } /* ── 관리자 화면 ── */ .admin-status { font-size: 12px; font-weight: 600; border-radius: 0; padding: 3px 11px; margin-left: 8px; vertical-align: 2px; white-space: nowrap; } .admin-status.none { background: transparent; border: 1px solid var(--line-soft); color: var(--ink-soft); } .admin-status.wait { background: var(--mid); color: var(--paper); } .admin-status.sent { background: var(--soft); border: 1px solid var(--line); color: var(--ink); } .admin-sub { background: var(--soft); border-radius: 0; padding: 14px 16px; font-size: 14px; line-height: 1.8; margin-bottom: 4px; white-space: pre-wrap; } .roster-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 16px 20px; margin-bottom: 12px; color: inherit; transition: border-color .15s; text-decoration: none; } .roster-row:hover { border-color: var(--ewha); } /* 명부 한 줄 = 진도 줄(위) + 계정 줄(아래, 서비스 웹이 끼운다). 테두리는 묶음이 든다 (2026-09-04) */ .roster-item { border: 1px solid var(--line); margin-bottom: 12px; transition: border-color .15s; } .roster-item:hover { border-color: var(--ewha); } .roster-item .roster-row { border: none; margin-bottom: 0; } .rr-name { display: flex; flex-direction: column; gap: 2px; min-width: 220px; } .rr-name b { font-size: 15.5px; } .rr-pending { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--paper); background: var(--ewha); border-radius: 0; padding: 2px 9px; margin-top: 3px; } /* 보낼 차례 묶음 — 명부 맨 위. 밀린 칸만 모아 그 칸으로 곧장 보낸다. */ .todo { border: 1px solid var(--line); padding: 14px 16px 6px; margin-bottom: 18px; } .todo h2 { font-size: 15px; } .todo > .kv { margin: 4px 0 10px; } .todo-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line-soft); padding: 10px 13px; margin-bottom: 8px; color: inherit; text-decoration: none; transition: border-color .15s; } .todo-row:hover { border-color: var(--ewha); } .todo-row b { font-size: 14.5px; } .todo-where { font-size: 13.5px; } .todo-when { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); } @media (max-width: 480px) { .todo-when { margin-left: 0; } } /* 상단바 배지 — 밀린 건수 */ .adm-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; font-size: 11.5px; line-height: 17px; text-align: center; background: var(--ewha); color: var(--paper); vertical-align: 1px; font-variant-numeric: tabular-nums; } .rr-role { align-self: flex-start; font-size: 11.5px; border: 1px solid var(--line-soft); padding: 2px 9px; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; } .todo-row .rr-role { align-self: center; margin-top: 0; } .adm-head .rr-role { align-self: center; margin-top: 0; } .rr-info { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-soft); min-width: 180px; } .rr-overdue { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .rr-prog { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .rr-chip { font-size: 12px; border: 1px solid var(--line-soft); border-radius: 0; padding: 3px 11px; color: var(--lock); background: transparent; white-space: nowrap; } .rr-chip.on { border-color: var(--ewha); color: var(--ink); background: var(--soft); font-weight: 600; } .prog-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .prog-table th { text-align: left; font-size: 12px; color: var(--ink); opacity: .85; font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); } .prog-table td { padding: 9px 10px; border-bottom: 1px dashed var(--line-soft); } .prog-table tr:last-child td { border-bottom: none; } .prog-table tr.cur td { background: var(--soft); font-weight: 600; } .prog-table tr.wait td:last-child { font-weight: 700; } /* 이 권을 읽는 법 — 본문 위. 첫 챕터만 펴 두고 나머지는 접는다. */ .read-guide { border: 1px solid var(--line); margin: 14px 0 10px; padding: 13px 16px 15px; background: var(--soft); } .rg-title { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .03em; margin-bottom: 9px; } /* 문단 사이는 빈 줄 하나가 아니라 그 절반만 벌린다(2026-08-13 지시) */ .read-guide p { font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); margin-bottom: .45em; } .read-guide p:last-child { margin-bottom: 0; } /* 과제·문제 화면에서는 선생님 편지 위에 놓인다. 편지가 주인공이라 이쪽을 조금 죈다. */ .task-guide { margin: 0 0 14px; } .replica { border: 1px solid var(--line); padding: 4px 18px 10px; margin: 14px 0 6px; } .replica h3 { font-size: 14px; margin: 16px 0 8px; } .replica h3:first-child { margin-top: 12px; } .replica .ment { padding: 14px 16px; margin-bottom: 14px; } .replica-note { font-size: 13.5px; color: var(--ink-soft); margin: -4px 0 12px 6px; } @media (max-width: 480px) { .rr-prog { margin-left: 0; } } /* ── 관리자 학생 상세 (2026-08-11 개편) ── 트랙·권·과제 탭으로 한 번에 한 칸만 본다. 왼쪽 제출물, 오른쪽 피드백은 따라다닌다. 예전에는 네 트랙 × 네 과제를 한 화면에 다 쌓아 스무 장 넘는 박스를 뒤져야 했다. */ .adm-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .adm-head .page { margin: 0; } .adm-back { margin-left: auto; font-size: 13px; } .adm-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); margin-top: 14px; } .adm-tabs button { font-family: inherit; font-size: 14px; padding: 10px 16px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; position: relative; } .adm-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ewha); } .adm-tabs button:disabled { color: var(--lock); cursor: default; } .adm-tabs.vol { margin-top: 0; } .adm-tabs.vol button { font-size: 13px; padding: 7px 13px; } .adm-tabs.sub { border-bottom: 1px solid var(--line); margin-top: 0; } .adm-tabs.sub button { font-size: 13.5px; padding: 9px 14px; } .adm-mute { font-size: 12px; color: var(--lock); } .adm-now { font-size: 11px; border: 1px solid var(--line); padding: 1px 7px; } .adm-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ewha); margin-left: 6px; vertical-align: 2px; } .adm-prog { border: 1px solid var(--line-soft); margin-top: 12px; } .adm-prog summary { cursor: pointer; padding: 9px 13px; font-size: 13.5px; background: var(--soft); list-style: none; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .adm-prog summary::-webkit-details-marker { display: none; } .adm-open { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); } .adm-prog-body { padding: 12px 13px; } .adm-split { display: grid; grid-template-columns: 1fr 460px; gap: 16px; margin-top: 14px; align-items: start; } .adm-pane { border: 1px solid var(--line); background: var(--card); } .adm-pane > h2 { font-size: 14px; font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 10px; align-items: center; } .adm-pane > h2 .when { font-weight: 400; font-size: 12.5px; color: var(--ink-soft); margin-left: auto; } .adm-scroll { max-height: 62vh; overflow: auto; padding: 0 14px 14px; } .adm-side { position: sticky; top: 14px; } .adm-side textarea { width: 100%; min-height: 260px; max-height: 58vh; resize: vertical; font-family: inherit; font-size: 14.5px; line-height: 1.8; padding: 12px 13px; border: 1px solid var(--line); background: var(--field); color: var(--ink); } .adm-pad { padding: 12px 14px; } .adm-row { display: flex; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; align-items: center; } .adm-draft { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: var(--soft); } .adm-draft .btn { margin-left: auto; } .adm-state { font-size: 12px; border: 1px solid var(--line-soft); padding: 2px 8px; color: var(--ink-soft); white-space: nowrap; } .adm-state.wait { background: var(--mid); color: var(--paper); border-color: var(--mid); } .adm-past { border-top: 1px solid var(--line-soft); padding: 12px 14px; font-size: 13.5px; } .adm-past h3 { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 7px; } .adm-past-item { border: 1px solid var(--line-soft); padding: 9px 11px; margin-bottom: 8px; line-height: 1.75; } .adm-past-item .when { display: block; font-size: 11.5px; color: var(--lock); margin-bottom: 3px; } @media (max-width: 980px) { .adm-split { grid-template-columns: 1fr; } .adm-scroll { max-height: none; } .adm-side { position: static; } } /* ── 제출① 선택 문단 미리보기 ── */ .sel-preview { margin-top: 8px; background: var(--soft); border: 1px solid var(--mark-line); border-radius: 0; padding: 12px 14px; font-family: var(--serif); font-size: 14.5px; line-height: 1.85; color: var(--ink); } /* ── 선생님 피드백 카드 ── */ .fb-card { border-color: var(--ewha); } .fb-card h2::before { content: "💬 "; } .fb-wait { font-size: 14px; color: var(--ink-soft); } .fb-body { background: var(--soft); border-radius: 0; padding: 14px 16px; font-size: 14.5px; line-height: 1.8; margin-bottom: 8px; } /* ── 받은 피드백 편지 (피드백함·진행 화면·과제 화면 공용) ── 안 읽은 편지는 테두리를 두 겹으로 두르고 머리띠를 채워 색을 뒤집는다. */ .fb-letters { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; } .fb-letter { border: 1px solid var(--line); background: var(--field); padding: 0 20px 16px; margin: 18px 0; } .fb-letter.unread { border: 2px solid var(--ewha); } .fb-letter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 -20px 15px; padding: 11px 20px 10px; border-bottom: 1px solid var(--line-soft); } .fb-letter.unread .fb-letter-head { background: var(--ewha); border-bottom-color: var(--ewha); } .fb-letter.unread .fb-letter-head b, .fb-letter.unread .fb-letter-where, .fb-letter.unread .fb-letter-when { color: var(--paper); } .fb-letter-head b { font-size: 15.5px; } .fb-letter-where { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); } .fb-letter-when { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); } .fb-letter-body { font-family: var(--serif); font-size: 15.5px; line-height: 1.95; color: var(--ink); } .fb-letter-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding-top: 13px; border-top: 1px dashed var(--line-soft); } .fb-letter-done { font-size: 13.5px; font-weight: 700; } .fb-letter-link { font-size: 13px; margin-left: auto; } @media (max-width: 480px) { .fb-letter { padding: 0 14px 14px; } .fb-letter-head { margin: 0 -14px 13px; padding: 10px 14px 9px; } .fb-letter-when { margin-left: 0; } .fb-letter-body { font-size: 15px; } .fb-letter-link { margin-left: 0; } } .teacher-box { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; } .teacher-box > label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } /* ── 관리자: 구글 AI 초안 줄 ── */ /* ── 피드백 플로팅 ── */ .fb-btn { position: fixed; right: 22px; bottom: 22px; z-index: 30; border: none; border-radius: 0; padding: 12px 20px; background: var(--ewha); color: var(--paper); font-size: 14px; font-weight: 400; letter-spacing: .04em; box-shadow: none; } .fb-panel { position: fixed; right: 22px; bottom: 74px; z-index: 30; width: 340px; max-width: calc(100vw - 44px); background: var(--paper); border: 1px solid var(--ewha); border-radius: 0; box-shadow: none; padding: 16px; display: none; } .fb-panel.open { display: block; } .fb-panel h3 { font-size: 14px; margin-bottom: 8px; } .fb-panel .list { max-height: 180px; overflow-y: auto; margin-top: 12px; } .fb-panel .item { font-size: 12.5px; border-top: 1px dashed var(--line-soft); padding: 7px 2px; display: flex; gap: 8px; align-items: flex-start; } .fb-panel .item .scr { font-weight: 600; flex: none; } .fb-panel .item .del { margin-left: auto; border: none; background: none; color: var(--ink); font-size: 12px; text-decoration: underline; } /* ── 설정 ── */ .settings { font-size: 13.5px; color: var(--ink); } .settings label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; } .settings input[type="checkbox"] { width: auto; accent-color: var(--ewha); } .empty { color: var(--ink-soft); font-size: 14px; padding: 8px 0; } pre.export-preview { background: var(--soft); border: 1px solid var(--line); border-radius: 0; padding: 14px; font-size: 12px; overflow-x: auto; max-height: 320px; white-space: pre-wrap; } /* ── 태블릿 가로 (아이패드 가로 1024~1180) ── */ @media (max-width: 1180px) { .wrap.wide { max-width: 100%; } .prog-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── 태블릿 세로 (아이패드 세로 768~834 — 옛 800px 지점을 넓혀 아이패드 전 기종을 받는다) ── */ @media (max-width: 900px) { .read-layout { grid-template-columns: 1fr; } /* 목차는 접어 두고 버튼으로 — 펼친 채 두면 본문이 한 화면 넘게 밀려 내려간다 */ .toc { display: none; position: static; max-height: none; } .toc.open { display: block; } .toc-toggle { display: block; } .book { padding: 22px 18px; } .topbar { flex-wrap: wrap; } .topbar nav { margin-left: 0; } .topbar nav a { padding: 8px 11px; } /* 손가락 표적 넓히기 */ .wrap { padding: 24px 18px 84px; } .card { padding: 18px 20px; } .tk-head b { font-size: 18px; } .vol-cell { min-height: 72px; } /* 홈 트랙 카드: 2단을 풀어 1단으로 — 2단을 유지하면 권 그리드 셀이 45px까지 짜부라진다 */ .tk-cols { grid-template-columns: 1fr; } .tk-tagline { margin-left: 0; width: 100%; } /* 권 책 카드: 1단에서는 소개 패널이 그리드 아래로 내려가므로, 카드도 데스크탑과 같은 논리로 그 자리(그리드 바로 아래) 위에 얹는다 */ .track-card { overflow: visible; } /* 카드가 소개 패널보다 길어도 잘리지 않게 */ /* 호버 산란 캔버스는 카드보다 훨씬 넓다 — overflow를 연 상태에선 가로 스크롤을 만들므로 숨긴다 (터치 화면엔 호버가 없어 어차피 안 보이는 효과) */ .fx-dither-canvas { display: none; } .vol-wrap { position: relative; } .vol-hovercard { position: absolute; left: 0; right: 0; top: 100%; bottom: auto; margin-top: 8px; z-index: 40; } .vhc-inner { max-height: 55vh; overflow-y: auto; } /* 폼·버튼 표적 */ .settings input[type="checkbox"], .memo-box input[type="checkbox"], .btn-row input[type="checkbox"] { width: 18px; height: 18px; } .btn.small { padding: 8px 15px; } } /* ── 터치 기기 공통 — 호버가 없으니 눌러서 여닫는다 (app.js가 .tapped를 붙인다) ── */ @media (hover: none) { .vol-cell.has-card.tapped > .vol-hovercard { display: block; } .stage:hover, .roster-row:hover, .track-card:hover { border-color: var(--line); } /* 손가락 표적 (2026-09-04 전수조사): 권 바꾸기·관리자 탭이 29px, 본문 속 링크가 14px 였다 */ .btn.small, .adm-tabs button { min-height: 38px; } .empty a, p.kv a { display: inline-block; padding: 6px 2px; margin: -6px 0; } .theme-btn { min-height: 38px; min-width: 40px; } } /* ── 모바일 (아이폰 기준) ── */ @media (max-width: 480px) { .topbar { padding: 6px 12px; gap: 8px; } .topbar .brand { font-size: 14px; } .topbar .brand .brand-logo { height: 24px; } .topbar .brand small { display: none; } .topbar nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topbar nav::-webkit-scrollbar { display: none; } .topbar nav a { white-space: nowrap; padding: 7px 10px; font-size: 13px; } .mob-btn { display: none; } .wrap { padding: 20px 14px 80px; } h1.page { font-size: 19px; } .card { padding: 16px; border-radius: 0; } .track-card { padding: 16px; } /* ── 홈 트랙 카드 정돈 ── */ .track-grid { gap: 14px; } .tk-head { gap: 4px 10px; padding-bottom: 10px; margin-bottom: 14px; } .tk-head b { font-size: 17px; } .tk-meta { font-size: 12px; } .tk-tagline { font-size: 13px; } /* 일반부·심화부 라벨: 왼쪽 기둥 → 그리드 위 머리글 (기둥 폭만큼 셀이 넓어진다) */ .vol-row { flex-direction: column; align-items: stretch; gap: 5px; } .vol-label { width: auto; font-size: 10.5px; letter-spacing: .06em; } /* 책 제목은 말줄임 대신 두 줄까지 */ .vol-book { white-space: normal; text-overflow: clip; line-height: 1.35; } /* 8.5~9.5px 영문 서명·저자는 아이폰에선 판독 불가 — 숨기고 제목만 */ .vol-eng, .vol-auth { display: none; } .vol-cell { min-height: 58px; padding: 7px 5px; } .status-line { font-size: 13px; padding: 9px 12px; } .track-card .btn { display: block; text-align: center; } .tk-sec { margin-top: 16px; } .tk-intro { font-size: 13.5px; } .ment { padding: 16px; } .book { padding: 20px 14px; } .book .para { font-size: var(--read-fs, 15.5px); line-height: 1.85; } /* 글자 크기 단추(--read-fs)가 이긴다 */ .book h2.chapter-title { font-size: 18px; } .vol-grid { grid-template-columns: repeat(3, 1fr); } .vol-label { width: 32px; font-size: 10px; } .vol-cell { min-height: 70px; } .passage { padding: 14px; } /* 시험지 조판 — 좁은 화면에서는 여백을 줄이고 이름표를 발문 밑으로 내린다 */ .exam-sheet { padding: 18px 15px; } .exam-passage p { font-size: 15.5px; line-height: 1.9; } .exam-passage.in { padding-left: 10px; } .exam-box { padding: 12px 13px; } .exam-stem { flex: 1 1 100%; font-size: 15.5px; } .exam-kind { margin-left: 0; } .exam-choices label { padding: 8px 4px; font-size: 15px; } .exam-sol-sec { padding: 11px 13px; } .sentence-card { padding: 13px 14px; } .commentary .model, .commentary .demo { padding: 12px 14px; } .fb-btn { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 9px 14px; font-size: 13px; } .fb-panel { right: 8px; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } /* 아이폰이 입력창을 누를 때 화면을 확대하지 않게 — 16px 밑으로 내려가면 확대된다 */ textarea, input[type="text"], input[type="number"], input[type="password"], select { font-size: 16px; } .wrap { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .phone-frame iframe { width: min(390px, calc(100vw - 40px)); } .btn { padding: 10px 16px; font-size: 14px; } .stage { padding: 13px 14px; gap: 12px; } .stage .badge { font-size: 11px; max-width: 108px; text-align: right; line-height: 1.45; } } /* ── 거시 트랙 추가분 (2026-07-25) ─────────────────── */ .para-heading { font-size: 1.05rem; margin: 30px 0 8px; color: var(--ink, #222); } .sec-no { display: inline-block; font-size: .78rem; font-weight: 700; color: #8a6d3b; background: #f6efe2; border-radius: 4px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; } .drawer-badge { display: inline-block; font-size: .85rem; margin-right: 6px; color: var(--badge-ink); background: var(--badge-bg); border-radius: 50%; width: 22px; height: 22px; text-align: center; line-height: 22px; } .para { position: relative; } .sym-pop { position: absolute; z-index: 30; top: 100%; left: 12px; background: var(--paper-white); border: 1px solid #d8d2c4; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; display: flex; gap: 4px; flex-wrap: wrap; } .sym-pop button { border: 1px solid #e2ddd2; background: #faf8f3; border-radius: 8px; padding: 6px 8px; cursor: pointer; font-size: 1rem; display: flex; flex-direction: column; align-items: center; min-width: 46px; } .sym-pop button small { font-size: .68rem; color: #777; margin-top: 2px; } .sym-pop button.on { background: var(--badge-bg); border-color: var(--badge-ink); } .sym-pop button.clear { font-size: .8rem; color: #a33; } .g1-group { border: 1px solid #eee7d9; border-radius: 10px; padding: 14px 16px 6px; margin-bottom: 14px; } .asm-field input { font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .sym-pop { left: 4px; right: 4px; } } /* 관리자 피드백 칸 — iOS 가 16px 아래 입력칸을 확대한다 (2026-09-04 전수조사). .adm-side textarea 가 14.5px 을 주므로 그보다 뒤에, 같은 힘으로 덮는다. */ @media (max-width: 480px) { .adm-side textarea, textarea.adm-fb { font-size: 16px; } } /* ══ 홈 트랙 카드 · 책장 (2026-09-06) ══ 왼쪽 12칸 격자 → 두 단 책장. 책등을 누르면 책이 빠져나와 책장 앞에 크게 서고(책장은 뒤에서 흐려짐), 오른쪽 설명란 자리에 책 소개가 펼쳐진다. 그림은 기존 디더 도판만 쓴다. 색은 잉크색 하나(트랙 색 없음). 클래스는 전부 bs- 접두 — .book/.shelf/.todo 가 다른 화면과 겹쳐 목업에서 세 번 사고가 났다. ※ .bs-book 에 opacity 를 애니메이션하면 안 된다(크롬이 3D 를 납작하게 누른다). transform 만 움직인다. */ .bs-stage { position: relative; } .bs-case { position: relative; padding: 12px; background: linear-gradient(90deg, rgba(0,0,0,.07), transparent 9%, transparent 91%, rgba(0,0,0,.07)), repeating-linear-gradient(0deg, rgba(0,0,0,.028) 0 1px, transparent 1px 7px), rgba(var(--ewha-rgb),.17); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.12), 0 12px 22px -12px rgba(var(--ewha-rgb),.45); transition: filter .45s ease, opacity .45s ease; } .bs-stage.open .bs-case { filter: blur(2.5px); opacity: .45; pointer-events: none; } .bs-shelf { position: relative; } /* 단 안쪽(뒤판) — 바닥면 밝은 띠는 책 뒤에 깔린다(책이 그 위에 선다) */ .bs-books { display: flex; align-items: flex-end; gap: 4px; height: 204px; padding: 0 14px; background: linear-gradient(0deg, rgba(255,255,255,.55) 0 4px, rgba(0,0,0,.10) 4px 5px, transparent 5px), linear-gradient(90deg, rgba(0,0,0,.12), transparent 9%, transparent 91%, rgba(0,0,0,.12)), linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.03) 24%, transparent 40%), repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 10px), rgba(var(--ewha-rgb),.09); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); } .bs-board { position: relative; height: 12px; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.18) 0 1px, rgba(var(--ewha-rgb),.34) 1px 2px, rgba(var(--ewha-rgb),.24) 2px); box-shadow: 0 6px 10px -3px rgba(0,0,0,.28), inset 0 -1px 0 rgba(0,0,0,.18); } .bs-label { position: absolute; left: 22px; bottom: 1px; z-index: 2; height: 13px; line-height: 12px; padding: 0 7px; font-size: 8.5px; letter-spacing: .14em; text-indent: .14em; font-weight: 700; color: var(--paper); background: var(--ewha); border: 1px solid rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.25); } /* 책등 — 양장본처럼: 머리·발치 이중 괘선 띠, 세로 제목 + 원제(이탤릭), 저자 */ .bs-spine { position: relative; flex: 1 1 0; max-width: 70px; height: 174px; min-width: 0; --sp-ink: var(--paper); --sp-rule: rgba(var(--paper-rgb),.55); background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.12)), rgba(var(--ewha-rgb),.93); color: var(--sp-ink); border: 1px solid rgba(var(--ewha-rgb),.95); padding: 0 3px; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease; display: flex; flex-direction: column; align-items: center; } .bs-spine::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -1px; height: 3px; background: rgba(0,0,0,.28); filter: blur(1.5px); z-index: -1; } .bs-spine:nth-child(2) { flex-grow: .88; height: 166px; } .bs-spine:nth-child(3) { flex-grow: 1.1; height: 180px; } .bs-spine:nth-child(4) { flex-grow: .94; height: 170px; } .bs-spine:nth-child(5) { flex-grow: 1.04; height: 176px; } .bs-spine:nth-child(6) { flex-grow: .9; height: 164px; } .bs-n { flex: none; width: 100%; margin-top: 5px; padding: 2px 0 1px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-align: center; white-space: nowrap; border-top: 3px double var(--sp-rule); border-bottom: 3px double var(--sp-rule); } .bs-mid { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-start; gap: 3px; padding: 6px 0 3px; max-width: 100%; } .bs-t { writing-mode: vertical-rl; text-orientation: mixed; font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1.1; max-height: 100%; overflow: hidden; white-space: nowrap; } .bs-t.l7 { font-size: 9.5px; letter-spacing: .01em; } .bs-t.l9 { font-size: 8.5px; letter-spacing: 0; } .bs-t.l11 { font-size: 7.5px; letter-spacing: -.01em; } .bs-e { writing-mode: vertical-rl; text-orientation: mixed; font-size: 7.5px; font-style: italic; letter-spacing: .04em; opacity: .8; max-height: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bs-a { flex: none; width: 100%; font-size: 8.5px; opacity: .9; margin-top: 2px; padding: 2px 0 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 3px double var(--sp-rule); } .bs-foot { flex: none; width: 100%; height: 6px; margin-bottom: 4px; } .bs-spine.adv .bs-n { margin-top: 10px; box-shadow: 0 -4px 0 -3px var(--sp-rule); } .bs-spine.adv .bs-foot { background: linear-gradient(180deg, var(--sp-rule) 0 1px, transparent 1px 3px, var(--sp-rule) 3px 4px, transparent 4px); } .bs-spine:hover { transform: translateY(-5px); } .bs-spine.ahead { --sp-ink: var(--ink); --sp-rule: rgba(var(--ewha-rgb),.45); background: linear-gradient(90deg, rgba(0,0,0,.06), transparent 30%, transparent 70%, rgba(0,0,0,.05)), var(--paper); border-color: var(--line); } .bs-spine.current { transform: translateY(-9px); box-shadow: 0 10px 14px -6px rgba(var(--ewha-rgb),.6); } .bs-spine.current:hover { transform: translateY(-12px); } .bs-mark { position: absolute; top: -7px; right: 12%; width: 12px; height: 36px; background: var(--paper); border: 1px solid var(--line); border-top: 0; box-shadow: 0 2px 3px rgba(0,0,0,.25); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); } .bs-spine.adv .bs-mark { width: 18px; height: 40px; clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 82%, 50% 100%, 25% 82%, 0 100%); } .bs-frac { position: absolute; bottom: -1px; left: 0; right: 0; font-size: 9px; font-weight: 700; text-align: center; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); padding: 1px 0; } .bs-spine.done .bs-foot { background: none; position: relative; height: 12px; } .bs-spine.done .bs-foot::after { content: "✓"; position: absolute; left: 50%; top: -3px; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 8.5px; line-height: 12px; text-align: center; } .bs-spine.blank { background: transparent; border: 1px dashed var(--line-soft); box-shadow: none; color: var(--ink-soft); cursor: default; } .bs-spine.blank:hover { transform: none; } .bs-spine.blank .bs-t { font-weight: 400; letter-spacing: .1em; } .bs-spine.blank .bs-n, .bs-spine.blank .bs-a { border-color: transparent; } .bs-spine.out { background: rgba(var(--ewha-rgb),.22); border-color: transparent; box-shadow: inset 0 8px 10px -6px rgba(var(--ewha-rgb),.6); color: transparent; transform: none; cursor: default; } .bs-spine.out > *, .bs-spine.out::after { visibility: hidden; } /* 무대 위 큰 책 — 정면 표지 + 뒤로 비어져 나온 종이 뭉치·뒤표지(두께) */ .bs-big { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; perspective: 1000px; z-index: 2; } .bs-stage.open .bs-big { display: flex; } .bs-book { --d: 9px; height: 86%; aspect-ratio: 2 / 3; position: relative; cursor: default; animation: bs-book-in .6s cubic-bezier(.2,.75,.2,1) both; } @keyframes bs-book-in { from { transform: scale(.22) rotateY(-80deg); } to { transform: none; } } .bs-book::after { content: ""; position: absolute; left: 4%; right: -6%; bottom: -8px; height: 14px; border-radius: 50%; background: rgba(var(--ewha-rgb),.4); filter: blur(9px); z-index: 0; } .bs-back { position: absolute; inset: 0; transform: translate(calc(var(--d) * 1.3), calc(var(--d) * 1.3)); background: var(--ewha); z-index: 1; } .bs-pages { position: absolute; inset: 0; transform: translate(calc(var(--d) * .7), calc(var(--d) * .7)); z-index: 2; background: linear-gradient(90deg, transparent calc(100% - var(--d)), rgba(0,0,0,.06) calc(100% - var(--d))), repeating-linear-gradient(90deg, #efe9da 0 1px, #d9d2c0 1px 2px); box-shadow: inset 0 0 0 1px rgba(var(--ewha-rgb),.22); } .bs-pages::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--d); background: repeating-linear-gradient(180deg, #efe9da 0 1px, #d9d2c0 1px 2px); box-shadow: inset 0 0 0 1px rgba(var(--ewha-rgb),.22); } /* 표지 — 고전 총서 꼴: 액자 → 머리띠 → 그림 창 → 장식 괘선 → 제목 판 → 발치 도장 */ .bs-cover { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 3; background: var(--paper); color: var(--ink); border: 1px solid var(--ewha); padding: 7px; box-shadow: 6px 8px 18px -8px rgba(var(--ewha-rgb),.5), inset 8px 0 6px -6px rgba(0,0,0,.3), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--ewha); } .bs-cv-top { flex: none; margin: 5px 5px 0; padding: 6px 4px 5px; background: var(--ewha); color: var(--on-ewha); text-align: center; font-size: 9.5px; letter-spacing: .16em; text-indent: .16em; white-space: nowrap; overflow: hidden; } .bs-cv-art { flex: none; margin: 6px 5px 0; height: 41%; border: 1px solid var(--ewha); background: var(--card) center / cover no-repeat; position: relative; } .bs-cv-art::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(var(--paper-rgb),.55); pointer-events: none; } .bs-cv-orn { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 14px 0; color: var(--ewha); font-size: 10px; } .bs-cv-orn::before, .bs-cv-orn::after { content: ""; flex: 1; height: 1px; background: var(--ewha); opacity: .6; } .bs-cv-body { flex: 1; margin: 0 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px 6px; min-height: 0; } .bs-cv-n { font-size: 10px; letter-spacing: .2em; text-indent: .2em; color: var(--ink-soft); } .bs-cv-t { font-size: 21px; font-weight: 700; line-height: 1.22; margin-top: 4px; word-break: keep-all; } .bs-cv-e { font-size: 11px; font-style: italic; color: var(--ink); opacity: .8; margin-top: 5px; letter-spacing: .02em; } .bs-cv-rule { width: 40px; height: 3px; border-top: 1px solid var(--ewha); border-bottom: 1px solid var(--ewha); margin: 9px 0 7px; } .bs-cv-a { font-size: 12px; letter-spacing: .08em; } .bs-cv-sub { font-size: 9px; letter-spacing: .18em; text-indent: .18em; color: var(--ink-soft); margin-top: 4px; } .bs-cv-foot { flex: none; margin: 0 5px 5px; display: flex; justify-content: flex-end; align-items: center; font-size: 8.5px; letter-spacing: .12em; padding: 0 2px; } .bs-cv-grade { border: 1px solid var(--ewha); color: var(--ewha); padding: 1px 5px; letter-spacing: .1em; } /* 오른쪽 기둥: 트랙 설명 ↔ 책 소개 */ /* 오른쪽 기둥 = 설명(또는 책 소개) + 발치(상태 문장·버튼, 우하). 책장 높이만큼 늘여 발치를 바닥에 붙인다 */ .tk-right { position: relative; display: flex; flex-direction: column; align-self: stretch; min-height: 0; } .tk-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .tk-foot .status-line { margin-bottom: 0; } .tk-foot .btn { align-self: flex-end; } .bs-view { display: none; } .tk-right.open .tk-desc { display: none; } .tk-right.open .bs-view { display: block; animation: bs-text-in .5s .12s ease both; min-width: 0; } @keyframes bs-text-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .bs-bv-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .bs-bv-head b { font-size: 17px; } .bs-bv-meta { font-size: 11.5px; color: var(--ink-soft); } .bs-bv-prog { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); } .bs-bv-prog i { display: block; width: 90px; height: 6px; background: rgba(var(--ewha-rgb),.13); } .bs-bv-prog i b { display: block; height: 100%; background: var(--ewha); } .bs-bv-blurb { font-size: 13px; line-height: 1.7; margin: 0; } .bs-bv-sec { margin-top: 10px; } .bs-bv-sec > b { font-size: 12px; } .bs-bv-sec p { font-size: 12.5px; line-height: 1.65; margin: 2px 0 0; } .bs-bv-tasks { margin: 3px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; } .bs-bv-foot { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; } .bs-bv-foot .bs-locked { font-size: 12.5px; color: var(--ink-soft); } @media (max-width: 900px) { .bs-book { height: 90%; --d: 7px; } .bs-cv-t { font-size: 17px; } /* 폰: 책등이 좁아 원제는 숨기고, 제목 자리를 지키려 키는 거의 그대로 둔다 */ .bs-books { height: 198px; padding: 0 10px; } .bs-spine { height: 168px; } .bs-spine:nth-child(2) { height: 162px; } .bs-spine:nth-child(3) { height: 174px; } .bs-spine:nth-child(4) { height: 166px; } .bs-spine:nth-child(5) { height: 170px; } .bs-spine:nth-child(6) { height: 160px; } .bs-t { font-size: 10.5px; } .bs-t.l7 { font-size: 9px; } .bs-t.l9 { font-size: 8px; } .bs-t.l11 { font-size: 7.2px; } .bs-e, .bs-a { display: none; } .tk-foot { align-items: stretch; } .tk-foot .btn { align-self: stretch; text-align: center; } } /* ══ 다크 모드 손보기 (2026-09-07) — 규칙은 아래 한 벌, 선택자 두 벌(직접 지정 / 기기 설정). 고칠 때 tools 대신 scratch 스크립트로 두 벌 같이 ══ */ /* 바탕·카드·입력칸의 높낮이: 카드는 바탕보다 반 톤 밝고 안쪽에 아주 옅은 빛 테 */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .track-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } :root[data-theme="dark"] .track-card::before { opacity: .14; filter: invert(1) grayscale(1) brightness(.7) contrast(.85); } :root[data-theme="dark"] .track-card.soon::before { opacity: .05; } :root[data-theme="dark"] .topbar { border-bottom-color: rgba(232,227,216,.14); } :root[data-theme="dark"] .topbar nav a.active { box-shadow: inset 0 -2px 0 var(--gold); } :root[data-theme="dark"] .gtile.on { border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); } :root[data-theme="dark"] .btn { box-shadow: 0 1px 0 rgba(0,0,0,.6); } :root[data-theme="dark"] .btn:hover { background: #fff; } :root[data-theme="dark"] .btn.ghost { background: transparent; } :root[data-theme="dark"] .status-line .st-dot { background: var(--gold); } :root[data-theme="dark"] .theme-btn { border-color: var(--line-soft); } :root[data-theme="dark"] .site-footer { background: #0a0a0a; border-top: 1px solid rgba(232,227,216,.12); } /* 책장 — 검은 바탕에서는 그늘이 아니라 빛으로 깊이를 그린다 */ :root[data-theme="dark"] .bs-case { background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 9%, transparent 91%, rgba(255,255,255,.05)), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px), #1b1b19; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.6), 0 12px 22px -12px rgba(0,0,0,.8); } :root[data-theme="dark"] .bs-books { background: linear-gradient(0deg, rgba(255,255,255,.14) 0 4px, rgba(0,0,0,.5) 4px 5px, transparent 5px), linear-gradient(90deg, rgba(0,0,0,.45), transparent 9%, transparent 91%, rgba(0,0,0,.45)), linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1) 24%, transparent 40%), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 10px), #121211; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } :root[data-theme="dark"] .bs-board { background: linear-gradient(180deg, rgba(255,255,255,.22) 0 1px, #2a2a27 1px 2px, #232321 2px); box-shadow: 0 6px 10px -3px rgba(0,0,0,.7), inset 0 -1px 0 rgba(0,0,0,.6); } :root[data-theme="dark"] .bs-label { background: var(--gold); color: #141410; border-color: rgba(0,0,0,.4); } /* 책등: 마친·읽는 권은 상아색 책, 아직 안 온 권은 검은 책에 상아색 괘선 */ :root[data-theme="dark"] .bs-spine { --sp-ink: #141410; --sp-rule: rgba(20,20,16,.5); background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.16)), #e3ded3; border-color: #cfcabf; } :root[data-theme="dark"] .bs-spine::after { background: rgba(0,0,0,.7); } :root[data-theme="dark"] .bs-spine.ahead { --sp-ink: var(--ink); --sp-rule: rgba(232,227,216,.4); background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 30%, transparent 70%, rgba(255,255,255,.04)), #161615; border-color: rgba(232,227,216,.35); } :root[data-theme="dark"] .bs-spine.current { box-shadow: 0 10px 14px -6px rgba(0,0,0,.9); } :root[data-theme="dark"] .bs-mark { background: var(--gold); border-color: rgba(0,0,0,.3); } :root[data-theme="dark"] .bs-frac { background: #141410; color: var(--ink); border-top-color: rgba(232,227,216,.3); } :root[data-theme="dark"] .bs-spine.done .bs-foot::after { background: #141410; color: var(--ink); } :root[data-theme="dark"] .bs-spine.out { background: #0c0c0b; box-shadow: inset 0 8px 10px -6px rgba(0,0,0,.9); } :root[data-theme="dark"] .bs-stage.open .bs-case { opacity: .35; } /* 뽑은 책 */ :root[data-theme="dark"] .bs-book::after { background: rgba(0,0,0,.8); } :root[data-theme="dark"] .bs-back { background: #cfcabf; } :root[data-theme="dark"] .bs-pages { background: linear-gradient(90deg, transparent calc(100% - var(--d)), rgba(0,0,0,.2) calc(100% - var(--d))), repeating-linear-gradient(90deg, #3a3835 0 1px, #262523 1px 2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } :root[data-theme="dark"] .bs-pages::after { background: repeating-linear-gradient(180deg, #3a3835 0 1px, #262523 1px 2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } :root[data-theme="dark"] .bs-cover { background: #1c1c1a; border-color: var(--ink); box-shadow: 6px 8px 18px -8px rgba(0,0,0,.9), inset 8px 0 6px -6px rgba(0,0,0,.7), inset 0 0 0 4px #1c1c1a, inset 0 0 0 5px var(--ink); } :root[data-theme="dark"] .bs-cv-top { background: var(--ink); color: #141410; } :root[data-theme="dark"] .bs-cv-art { filter: invert(1) grayscale(1) brightness(.8) contrast(.9); border-color: rgba(232,227,216,.5); } :root[data-theme="dark"] .bs-cv-art::after { border-color: rgba(0,0,0,.5); } :root[data-theme="dark"] .bs-cv-grade { border-color: var(--gold); color: var(--gold); } :root[data-theme="dark"] .bs-cv-rule { border-color: var(--gold); } :root[data-theme="dark"] .bs-cv-orn { color: var(--gold); } :root[data-theme="dark"] .bs-cv-orn::before, :root[data-theme="dark"] .bs-cv-orn::after { background: var(--gold); } @media (prefers-color-scheme: dark) { /* 바탕·카드·입력칸의 높낮이: 카드는 바탕보다 반 톤 밝고 안쪽에 아주 옅은 빛 테 */ :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .track-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } :root:not([data-theme="light"]) .track-card::before { opacity: .14; filter: invert(1) grayscale(1) brightness(.7) contrast(.85); } :root:not([data-theme="light"]) .track-card.soon::before { opacity: .05; } :root:not([data-theme="light"]) .topbar { border-bottom-color: rgba(232,227,216,.14); } :root:not([data-theme="light"]) .topbar nav a.active { box-shadow: inset 0 -2px 0 var(--gold); } :root:not([data-theme="light"]) .gtile.on { border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); } :root:not([data-theme="light"]) .btn { box-shadow: 0 1px 0 rgba(0,0,0,.6); } :root:not([data-theme="light"]) .btn:hover { background: #fff; } :root:not([data-theme="light"]) .btn.ghost { background: transparent; } :root:not([data-theme="light"]) .status-line .st-dot { background: var(--gold); } :root:not([data-theme="light"]) .theme-btn { border-color: var(--line-soft); } :root:not([data-theme="light"]) .site-footer { background: #0a0a0a; border-top: 1px solid rgba(232,227,216,.12); } /* 책장 — 검은 바탕에서는 그늘이 아니라 빛으로 깊이를 그린다 */ :root:not([data-theme="light"]) .bs-case { background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 9%, transparent 91%, rgba(255,255,255,.05)), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px), #1b1b19; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.6), 0 12px 22px -12px rgba(0,0,0,.8); } :root:not([data-theme="light"]) .bs-books { background: linear-gradient(0deg, rgba(255,255,255,.14) 0 4px, rgba(0,0,0,.5) 4px 5px, transparent 5px), linear-gradient(90deg, rgba(0,0,0,.45), transparent 9%, transparent 91%, rgba(0,0,0,.45)), linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1) 24%, transparent 40%), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 10px), #121211; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } :root:not([data-theme="light"]) .bs-board { background: linear-gradient(180deg, rgba(255,255,255,.22) 0 1px, #2a2a27 1px 2px, #232321 2px); box-shadow: 0 6px 10px -3px rgba(0,0,0,.7), inset 0 -1px 0 rgba(0,0,0,.6); } :root:not([data-theme="light"]) .bs-label { background: var(--gold); color: #141410; border-color: rgba(0,0,0,.4); } /* 책등: 마친·읽는 권은 상아색 책, 아직 안 온 권은 검은 책에 상아색 괘선 */ :root:not([data-theme="light"]) .bs-spine { --sp-ink: #141410; --sp-rule: rgba(20,20,16,.5); background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.16)), #e3ded3; border-color: #cfcabf; } :root:not([data-theme="light"]) .bs-spine::after { background: rgba(0,0,0,.7); } :root:not([data-theme="light"]) .bs-spine.ahead { --sp-ink: var(--ink); --sp-rule: rgba(232,227,216,.4); background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 30%, transparent 70%, rgba(255,255,255,.04)), #161615; border-color: rgba(232,227,216,.35); } :root:not([data-theme="light"]) .bs-spine.current { box-shadow: 0 10px 14px -6px rgba(0,0,0,.9); } :root:not([data-theme="light"]) .bs-mark { background: var(--gold); border-color: rgba(0,0,0,.3); } :root:not([data-theme="light"]) .bs-frac { background: #141410; color: var(--ink); border-top-color: rgba(232,227,216,.3); } :root:not([data-theme="light"]) .bs-spine.done .bs-foot::after { background: #141410; color: var(--ink); } :root:not([data-theme="light"]) .bs-spine.out { background: #0c0c0b; box-shadow: inset 0 8px 10px -6px rgba(0,0,0,.9); } :root:not([data-theme="light"]) .bs-stage.open .bs-case { opacity: .35; } /* 뽑은 책 */ :root:not([data-theme="light"]) .bs-book::after { background: rgba(0,0,0,.8); } :root:not([data-theme="light"]) .bs-back { background: #cfcabf; } :root:not([data-theme="light"]) .bs-pages { background: linear-gradient(90deg, transparent calc(100% - var(--d)), rgba(0,0,0,.2) calc(100% - var(--d))), repeating-linear-gradient(90deg, #3a3835 0 1px, #262523 1px 2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } :root:not([data-theme="light"]) .bs-pages::after { background: repeating-linear-gradient(180deg, #3a3835 0 1px, #262523 1px 2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } :root:not([data-theme="light"]) .bs-cover { background: #1c1c1a; border-color: var(--ink); box-shadow: 6px 8px 18px -8px rgba(0,0,0,.9), inset 8px 0 6px -6px rgba(0,0,0,.7), inset 0 0 0 4px #1c1c1a, inset 0 0 0 5px var(--ink); } :root:not([data-theme="light"]) .bs-cv-top { background: var(--ink); color: #141410; } :root:not([data-theme="light"]) .bs-cv-art { filter: invert(1) grayscale(1) brightness(.8) contrast(.9); border-color: rgba(232,227,216,.5); } :root:not([data-theme="light"]) .bs-cv-art::after { border-color: rgba(0,0,0,.5); } :root:not([data-theme="light"]) .bs-cv-grade { border-color: var(--gold); color: var(--gold); } :root:not([data-theme="light"]) .bs-cv-rule { border-color: var(--gold); } :root:not([data-theme="light"]) .bs-cv-orn { color: var(--gold); } :root:not([data-theme="light"]) .bs-cv-orn::before, :root:not([data-theme="light"]) .bs-cv-orn::after { background: var(--gold); } } /* ══ 폰 전수조사 1차 (2026-09-07) — 480px 이하에서만 ══ ①본문 13.5px 이하는 14px 이상으로(폰은 눈과 거리가 가깝지 않다) ②11~11.5px 머리말·표지는 12px ③과정 머리의 안내 문장이 뒤로 가기 버튼에 눌려 반 폭이 되던 것 → 세로로 ④시험 지문은 keep-all+양끝맞춤이라 글자 사이가 벌어짐 → 글자 단위 줄바꿈 ⑤과정 위 권 격자 글씨 ⑥라디오·체크 표적 */ @media (max-width: 480px) { .fp-sub, p.kv, .hint, .guide-track-principle, .guide-sec p, .prog-card p, .pc-blurb, .program-hero p, .tk-desc p, .bs-bv-blurb, .bs-bv-sec p { font-size: 14px; } .tk-intro { font-size: 14.5px; } .theme-btn .tb-tx, .prog-kicker, .pc-kicker, .guide-track-sub, .nav-tracklabel, .exam-kind, .guide-toc-hd, .gtile .gt-name small { font-size: 12px; } .guide h4 { font-size: 12.5px; } .course-subrow { flex-direction: column; align-items: stretch; gap: 10px; } .course-subrow .course-back { align-self: flex-start; } .exam-passage p, .exam-box p, .exam-choices .ct, .exam-sol-body p, .exam-sol-list li span { word-break: normal; overflow-wrap: anywhere; } .vol-n, .vol-book { font-size: 12px; } .vol-label { font-size: 11px; } .vol-eng { font-size: 9.5px; } input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; } label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) { padding: 6px 0; display: inline-flex; align-items: center; gap: 8px; } } /* ══ 폰 상단바 줄 배치 (2026-09-07 전수조사) — 1줄: 로고·시험·테마 / 2줄: 로그인 칸 또는 학생 칩(+🛠 관리) / 3줄: 메뉴. 전에는 테마 버튼이 혼자 한 줄을 차지하거나 칩이 메뉴 뒤로 밀려 줄 수가 들쭉날쭉했다 ══ */ @media (max-width: 480px) { .topbar .brand, .topbar .exam-menu { order: 0; } .topbar .theme-btn { order: 1; } .topbar nav { order: 3; width: 100%; margin-right: 0; } } /* ══ 태블릿 (2026-09-07 전수조사) ══ ①641~900px: 홈 트랙 카드를 한 기둥으로 접으면 책장(663px)에 책 여섯 권(420px)이 절반만 차서 오른쪽이 빈다 → 두 기둥 유지. 책장은 330px 안팎이 되므로 폰 규칙(원제·저자 숨김, 키 168px)이 그대로 맞는다. ②900px 이하는 손가락으로 누른다고 보고 상단바 버튼·작은 버튼을 36px 이상으로 */ @media (min-width: 641px) and (max-width: 900px) { .tk-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 900px) { .theme-btn, .exam-cur, .mob-btn, .btn.small, .course-back { min-height: 36px; } .exam-cur { padding: 6px 10px; } } /* ══ 폰·태블릿: 책장 아래 순서 (2026-09-07 사용자) — 설명이 길어 과제 버튼까지 한참 내려가야 했다. 한 기둥으로 접힌 화면에서는 책장 바로 아래에 상태 문장·과제 버튼을 먼저 두고 설명은 그 아래로. 책을 뽑았을 때도 표지 바로 아래에 책 이름·진도·버튼이 오고 소개 글은 그 뒤에 ══ */ @media (max-width: 900px) { .tk-foot { order: -1; margin-top: 0; margin-bottom: 16px; padding-top: 0; } .tk-right.open .bs-view { display: flex; flex-direction: column; } .bs-bv-head { order: 0; } .bs-bv-prog { order: 0; } .bs-bv-foot { order: 1; margin: 4px 0 14px; } .bs-bv-blurb, .bs-bv-sec { order: 2; } } /* ══ 폰·태블릿 접힘 상자 .mfold (2026-09-07, app.js mobileFolds) ══ */ .mfold { border: 1px solid var(--line); background: var(--card); margin: 0 0 14px; } .mfold > summary { list-style: none; cursor: pointer; padding: 13px 14px; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 9px; user-select: none; } .mfold > summary::-webkit-details-marker { display: none; } .mfold > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); transition: transform .15s ease; flex: none; margin-left: 2px; } .mfold[open] > summary::before { transform: rotate(45deg); } .mfold[open] > summary { border-bottom: 1px solid var(--line-soft); } .mfold > :not(summary) { margin: 0 !important; } .mfold > .card, .mfold > .ment, .mfold > .read-guide, .mfold > .course-top { border: 0; box-shadow: none; } .mfold > .tk-desc { padding: 14px; } .tk-right.open .mfold { display: none; } /* 책을 뽑았을 때는 트랙 소개 대신 책 소개 */ @media (max-width: 900px) { body[data-route="course"] .stage-list { margin-bottom: 18px; } } /* ══ 폰 디자인 (2026-09-07) — 480px 이하. 데스크톱 규칙을 줄여 쓰지 않고 폰 리듬으로 다시 잡는다 ══ */ @media (max-width: 480px) { /* 머리: 첫 줄은 얇게(로고 24px · 시험 알약 · 테마), 메뉴는 알약 띠, 활성은 잉크 채움 */ .topbar { padding: 8px 14px 0; gap: 8px 10px; border-bottom: 1px solid var(--line-soft); } .topbar .brand .brand-logo { height: 24px; } .exam-menu .exam-cur { padding: 5px 9px; font-size: 12px; min-height: 30px; letter-spacing: .04em; } .theme-btn { min-height: 30px; padding: 4px 9px; font-size: 13px; } .theme-btn .tb-tx { font-size: 11.5px; margin-left: 4px; } .topbar nav { gap: 6px; padding: 8px 0 10px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; } .topbar nav a { padding: 7px 13px; font-size: 13.5px; border: 1px solid var(--line-soft); opacity: 1; color: var(--ink); background: transparent; } .topbar nav a.active { background: var(--ewha); color: var(--paper); border-color: var(--ewha); box-shadow: none; font-weight: 700; } .topbar nav a.locked { border-style: dashed; opacity: .55; } .topbar nav .nav-div { display: none; } .topbar nav .nav-tracklabel { font-size: 12px; align-self: center; padding: 0 4px 0 0; } /* 면: 여백을 폰 리듬으로 */ .wrap { padding: 16px 14px 96px; } .card { padding: 16px 15px; margin-bottom: 14px; } .card h2 { font-size: 17px; margin-bottom: 8px; } h1.page { font-size: 21px; line-height: 1.3; margin-bottom: 6px; } p.sub, .sub { font-size: 14px; line-height: 1.6; } /* 할 일 목록: 번호 + 제목/설명 두 줄, 상태는 그 아래 작은 표지. 열린 단계는 잉크 테두리·채운 번호 */ .stage-list { gap: 10px; } .stage { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 7px; align-items: start; padding: 13px 14px 12px; } .stage .num { width: 30px; height: 30px; font-size: 13px; } .stage .t { flex: 1 1 0; min-width: 0; } .stage .t b { font-size: 15px; line-height: 1.3; } .stage .t span { font-size: 12.5px; line-height: 1.45; display: block; margin-top: 2px; } .stage .badge { grid-column: 2; justify-self: start; font-size: 12px; padding: 3px 8px; border: 1px solid var(--line-soft); max-width: 100%; } .stage:not(.locked):not(.done) { border-color: var(--ewha); } .stage:not(.locked):not(.done) .num { background: var(--ewha); color: var(--paper); border-color: var(--ewha); } .stage:not(.locked):not(.done) .badge { border-color: var(--ewha); color: var(--ink); } .stage.done .badge { border-color: transparent; padding-left: 0; } /* 으뜸 버튼은 전폭·46px. 작은 버튼은 그대로 */ .btn:not(.small):not(.ghost) { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 13px 16px; font-size: 15px; min-height: 46px; } .btn.ghost:not(.small) { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 12px 16px; min-height: 44px; } .btn-row { display: flex; flex-direction: column; gap: 8px; } .btn-row .btn { margin: 0; } /* 홈 카드: 이름 줄과 상태 문장은 상자 없이 */ .track-card { padding: 16px 15px 18px; } .tk-head { gap: 6px 10px; margin-bottom: 12px; } .tk-head b { font-size: 19px; } .tk-tagline { font-size: 13.5px; font-weight: 400; color: var(--ink-soft); } .tk-foot .status-line { background: none; border: 0; padding: 2px 0 0; margin: 0; font-size: 13.5px; } .tk-foot { gap: 10px; } /* 입력칸: 손가락 높이 */ input[type="text"], input[type="password"], input[type="number"], input[type="date"], select { min-height: 44px; padding: 10px 12px; } textarea { padding: 12px; min-height: 140px; line-height: 1.6; } label { font-size: 14px; } /* 피드백 떠 있는 버튼은 작게, 본문을 덜 가리게 */ .fb-btn { padding: 9px 12px; font-size: 13px; right: 12px; bottom: 12px; } /* 접힘 상자 손잡이는 카드와 같은 여백 */ .mfold > summary { padding: 13px 15px; } } /* ══ 폰 홈 (2026-09-07 사용자) — ①과정 타일은 옆으로 미는 띠가 아니라 한눈에: 기본 과정 한 줄 전폭, 심화 넷은 2×2. ②트랙 카드 사이는 넉넉하게(18→30px) — 카드가 붙어 보여 어디서 다음 트랙이 시작되는지 안 보였다 ══ */ @media (max-width: 480px) { .gbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; margin-bottom: 22px; padding-bottom: 0; } .gtile { flex: none; min-width: 0; } .gtile:first-child { grid-column: 1 / -1; } .gtile:first-child .gt-img { height: 84px; } .gtile .gt-img { height: 62px; } .gtile .gt-name { padding: 7px 9px 8px; font-size: 12.5px; line-height: 1.3; flex-wrap: wrap; gap: 4px 6px; } .gtile .gt-name small { font-size: 10.5px; } .track-grid { gap: 30px; } } /* ══ 아이폰·아이패드 안전 영역 (2026-09-07 사용자) ══ viewport-fit=cover 라 화면이 노치·다이내믹 아일랜드·홈 표시줄 밑까지 깔린다. 그 자리에 눌리는 것·읽는 것이 오면 안 된다. env(safe-area-inset-*) 는 세로 아이폰에선 위 47~59px(브라우저가 이미 상태줄을 비워 두면 0), 아래 34px, 가로에선 좌우 47~59px. 폰 규칙(≤480)의 padding 값을 여기서 env 를 더해 다시 적는다 — 위 폰 디자인 블록이 env 없이 덮어썼기 때문. */ html { -webkit-text-size-adjust: 100%; } body { -webkit-tap-highlight-color: transparent; } @media (max-width: 900px) { .wrap { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } .fb-btn { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); } .fb-panel { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); } } @media (max-width: 480px) { .topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-right: calc(14px + env(safe-area-inset-right, 0px)); } .topbar nav { margin-left: calc(-14px - env(safe-area-inset-left, 0px)); margin-right: calc(-14px - env(safe-area-inset-right, 0px)); padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-right: calc(14px + env(safe-area-inset-right, 0px)); } .wrap { padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-right: calc(14px + env(safe-area-inset-right, 0px)); padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .track-grid, .gbar { margin-left: 0; margin-right: 0; } } /* ══ 폰·태블릿에서 읽고 쓰기 (2026-09-07) ══ */ .read-bar { display: none; } body.typing .fb-btn, body.typing .fb-panel { display: none !important; } @media (max-width: 900px) { /* 읽기 도구줄: 목차 단추 + 글자 크기. 상단바가 숨은 뒤에도 화면 위에 붙어 있다 */ .read-bar { display: flex; gap: 8px; position: sticky; top: 0; z-index: 6; margin: 0 0 12px; padding: 6px 0; background: var(--paper); } .read-bar .toc-toggle { flex: 1 1 auto; min-width: 0; width: auto; min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .read-size { display: flex; gap: 6px; flex: none; } .read-size button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 700; padding: 0 8px; cursor: pointer; } .read-size button small { font-size: 12px; font-weight: 700; margin-left: 1px; } .read-size button:disabled { opacity: .35; cursor: default; } .book { padding: 22px 18px; } .book .para { padding: 4px 6px; margin-bottom: 14px; } .read-layout .toc { margin-bottom: 12px; } textarea { line-height: 1.65; } } @media (max-width: 480px) { .book { padding: 18px 14px; border-radius: 10px; } .book h2.chapter-title { font-size: 19px; margin-bottom: 16px; } .exam-choices label { padding: 10px 8px; font-size: 15.5px; line-height: 1.7; } .exam-passage p { font-size: var(--read-fs, 16px); } } /* 가이드 소개 절은 다른 절과 같은 .guide-sec 를 쓴다 — 숫자 상자·타일 격자는 AI 티가 나서 걷어냈다 (2026-09-07) */ /* 가이드 탭 셋 — 폰에서는 한 줄에 못 들어가므로 세로로 (2026-09-07) */ .guide-toggle { flex-wrap: wrap; margin-bottom: 14px; } .guide .guide-toggle + .sub { margin-bottom: 18px; } @media (max-width: 480px) { .guide-toggle { display: grid; grid-template-columns: 1fr; gap: 6px; } .guide-toggle .gt-btn { width: 100%; text-align: left; } } /* 히어로 영문 줄 곁말 + 표어 (2026-09-07 사용자) */ .fp-title-en small { font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); margin-left: 8px; font-style: italic; } .fp-motto { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--ink); margin: -18px 0 26px; line-height: 1.5; } @media (max-width: 720px) { .fp-title-en small { display: block; margin: 4px 0 0; } .fp-motto { font-size: 14px; margin: -14px 0 22px; } } /* 가이드 그림 촬영용(파일럿 ?demo=) — 상단바·도구·떠 있는 단추·푸터를 치운다 */ body.demo-shot .topbar, body.demo-shot .fb-btn, body.demo-shot .fb-panel, body.demo-shot .site-footer, body.demo-shot .mob-btn, body.demo-shot .card.settings { display: none !important; } /* 가이드 소개 그림 (2026-09-07) — 진짜 화면 캡처. 라이트/다크 두 장 중 하나만 */ .gi-shot { margin: 10px 0 18px; border: 1px solid var(--line); background: var(--paper); } .gi-shot img { display: block; width: 100%; height: auto; } .gi-shot img.dark { display: none; } .gi-shot figcaption { font-size: 12.5px; color: var(--ink-soft); padding: 8px 12px 9px; border-top: 1px solid var(--line-soft); line-height: 1.5; } :root[data-theme="dark"] .gi-shot img.light { display: none; } :root[data-theme="dark"] .gi-shot img.dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gi-shot img.light { display: none; } :root:not([data-theme="light"]) .gi-shot img.dark { display: block; } }