/* 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; } /* 자물쇠 — 3D 이모지 대신 단색 SVG(2026-09-07 사용자). 글자색(currentColor)을 따라가니 라이트·다크 모두 맞는다 */ .lock-ic, .topbar nav a.locked::before, .chapter-note.locked .cn-head::before { content: ""; display: inline-block; width: .85em; height: .85em; vertical-align: -.08em; margin-right: .3em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1.6 0h3.8V5a1.9 1.9 0 1 0-3.8 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm1.6 0h3.8V5a1.9 1.9 0 1 0-3.8 0z'/%3E%3C/svg%3E") center / contain no-repeat; } .topbar nav a.locked::before { width: 10px; height: 10px; margin-right: 4px; } /* 메뉴가 옆으로 더 있을 때 가장자리를 흐려서 "밀면 더 있다"는 신호를 준다 (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; word-break: keep-all; /* 한국어는 낱말 가운데서 끊지 않는다 */ } /* 문장마다 새 줄에서 시작한다 — 앞 문장 꼬리에 다음 문장 주어가 매달리면 읽기가 걸린다(2026-09-08 사용자) */ .fp-sub span { display: block; } .fp-sub span + span { margin-top: 4px; } @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); } /* 타일 호버 효과(테두리·그림 밝아짐)는 뺐다 — 디더 그림이 움직여 보인다(2026-09-08 사용자) */ .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; } } /* 도판은 카드가 몇 번째냐가 아니라 **어느 트랙이냐**로 정한다 (2026-09-08). nth-child 로 걸어 두었더니 심화 카드 그리드가 기본 과정 넷을 그대로 다시 깔았다. */ .track-card[data-track="misi"]::before { background-image: url("../assets/art/misi.webp"); } .track-card[data-track="geosi"]::before { background-image: url("../assets/art/geosi.webp"); } .track-card[data-track="nonri"]::before { background-image: url("../assets/art/nonri.webp"); } .track-card[data-track="churon"]::before { background-image: url("../assets/art/churon.webp"); } /* 심화 열두 트랙 — tools/make_track_art.py 가 만든다 */ .track-card[data-ptrack="misi-paper-a"]::before, .track-card[data-track="misi-paper-a"]::before { background-image: url("../assets/art/pg/misi-paper-a.webp"); } .track-card[data-ptrack="misi-paper-b"]::before, .track-card[data-track="misi-paper-b"]::before { background-image: url("../assets/art/pg/misi-paper-b.webp"); } .track-card[data-ptrack="misi-paper-books"]::before, .track-card[data-track="misi-paper-books"]::before { background-image: url("../assets/art/pg/misi-paper-books.webp"); } .track-card[data-ptrack="geosi-report-a"]::before, .track-card[data-track="geosi-report-a"]::before { background-image: url("../assets/art/pg/geosi-report-a.webp"); } .track-card[data-ptrack="geosi-report-b"]::before, .track-card[data-track="geosi-report-b"]::before { background-image: url("../assets/art/pg/geosi-report-b.webp"); } .track-card[data-ptrack="geosi-report-books"]::before, .track-card[data-track="geosi-report-books"]::before { background-image: url("../assets/art/pg/geosi-report-books.webp"); } .track-card[data-ptrack="nonri-terms-a"]::before, .track-card[data-track="nonri-terms-a"]::before { background-image: url("../assets/art/pg/nonri-terms-a.webp"); } .track-card[data-ptrack="nonri-terms-b"]::before, .track-card[data-track="nonri-terms-b"]::before { background-image: url("../assets/art/pg/nonri-terms-b.webp"); } .track-card[data-ptrack="nonri-terms-books"]::before, .track-card[data-track="nonri-terms-books"]::before { background-image: url("../assets/art/pg/nonri-terms-books.webp"); } .track-card[data-ptrack="churon-case-a"]::before, .track-card[data-track="churon-case-a"]::before { background-image: url("../assets/art/pg/churon-case-a.webp"); } .track-card[data-ptrack="churon-case-b"]::before, .track-card[data-track="churon-case-b"]::before { background-image: url("../assets/art/pg/churon-case-b.webp"); } .track-card[data-ptrack="churon-case-books"]::before, .track-card[data-track="churon-case-books"]::before { background-image: url("../assets/art/pg/churon-case-books.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 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); } /* ── 폼 요소 ── */ 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: none; } .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: minmax(0, 1fr); } /* 0 을 명시해야 칸이 화면 밖으로 안 벌어진다 */ .read-layout > * { min-width: 0; } /* 목차 단추의 긴 장 제목이 칸을 밀어내던 것 (2026-09-08) */ /* 목차는 접어 두고 버튼으로 — 펼친 채 두면 본문이 한 화면 넘게 밀려 내려간다 */ .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-d { display: none; position: absolute; inset: 0; background: center / cover no-repeat; } /* 다크용 도판 — 다크에서만 켠다 */ .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-d { display: block; } :root[data-theme="dark"] .bs-cv-art { border-color: rgba(232,227,216,.5); } /* ↑ 다크 표지 도판은 필터가 아니라 따로 뽑은 파일(_dark.webp, tools/make_art_dark.py: 상아 종이 + 숯 잉크 양화)을 자식 .bs-cv-art-d 에 건다. CSS 변수에 url()을 넣어 넘기면 크롬이 스타일시트(/css/) 기준으로 풀어 404 가 난다(09-07 실측). 반전은 초록 바탕이 흰 판이 되고(09-07 학생 제보), 필터 흑백은 점묘가 잡음이 되며, 음화는 얼굴이 검게 뒤집힌다 — 같은 날 실측. */ :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-d { display: block; } :root:not([data-theme="light"]) .bs-cv-art { 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: 13px; letter-spacing: .04em; color: var(--ink); margin-left: 10px; font-style: italic; opacity: .78; } .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: 14px 0 40px; border: 1px solid var(--line); background: var(--paper); } /* 위는 좁게(설명에 딸린 사진), 아래는 넓게(다음 설명과 떼기) — 2026-09-08 */ .gi-shot + p, .gi-grid + p { margin-top: 0; } .gi-shot img { display: block; width: 100%; height: auto; } .gi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 40px; } /* 심화 카드 넷 사진(2026-09-08) */ .gi-grid .gi-shot { margin: 0; } @media (max-width: 640px) { .gi-grid { grid-template-columns: 1fr; } } .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; } } /* ══ 다크 모드 — 리트 문제 시험지 (2026-09-07, 업데이트 뒤 학생 제보) ══ .exam 은 시험지 먹색(--e-ink 등)을 제 몸에 고정값으로 갖고 있어서 다크에서 바탕만 어두워지고 글자는 짙은 초록으로 남았다 (발문·지문이 안 보임). 다크에서는 상아색 먹·밝힌 테라코타로 바꾼다. 규칙 한 벌, 선택자 두 벌(중첩 문법은 옛 아이폰이 못 읽으니 안 쓴다). */ :root[data-theme="dark"] .exam { --e-ink: #e8e3d8; --e-soft: rgba(232,227,216,.66); --e-rule: rgba(232,227,216,.3); --e-new: #d98a5e; --e-new-soft: rgba(217,138,94,.10); --e-new-rule: rgba(217,138,94,.4); } :root[data-theme="dark"] .exam-sheet { border-color: rgba(232,227,216,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } :root[data-theme="dark"] .exam-choices label:hover { background: rgba(232,227,216,.06); } :root[data-theme="dark"] .exam-choices label.on { background: rgba(232,227,216,.12); } :root[data-theme="dark"] .exam-sol.bad .exam-sol-verdict { color: #111110; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .exam { --e-ink: #e8e3d8; --e-soft: rgba(232,227,216,.66); --e-rule: rgba(232,227,216,.3); --e-new: #d98a5e; --e-new-soft: rgba(217,138,94,.10); --e-new-rule: rgba(217,138,94,.4); } :root:not([data-theme="light"]) .exam-sheet { border-color: rgba(232,227,216,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } :root:not([data-theme="light"]) .exam-choices label:hover { background: rgba(232,227,216,.06); } :root:not([data-theme="light"]) .exam-choices label.on { background: rgba(232,227,216,.12); } :root:not([data-theme="light"]) .exam-sol.bad .exam-sol-verdict { color: #111110; } } /* ══ 다크 모드 — 라이트 전용 고정색이 남아 있던 자리 (2026-09-08, 사용자 지적: 다크에서 초록·노랑 위에 글자가 안 보인다) ══ .book .para.marked 의 노란 형광(#fff3c4)이 다크에도 남아 상아색 글자가 사라졌다(가이드 사진에도 찍혀 있었다). 같은 식으로 고정색을 쓴 .sym-pop(기호 팝업)·.passage .turn.narr·.sentence-card .sn·.sec-no·.g1-group 도 함께. 규칙 한 벌, 선택자 두 벌. */ :root[data-theme="dark"] .book .para:hover { background: rgba(232,227,216,.06); } :root[data-theme="dark"] .book .para.marked { background: rgba(184,150,79,.16); box-shadow: inset 3px 0 0 var(--gold); } :root[data-theme="dark"] .passage .turn.narr { color: var(--ink-soft); } :root[data-theme="dark"] .sentence-card .sn { color: var(--gold); } :root[data-theme="dark"] .sec-no { color: var(--gold); background: rgba(184,150,79,.14); } :root[data-theme="dark"] .sym-pop { background: #1e1e1c; border-color: rgba(232,227,216,.25); box-shadow: 0 8px 24px rgba(0,0,0,.6); } :root[data-theme="dark"] .sym-pop button { border-color: rgba(232,227,216,.25); background: #171716; color: var(--ink); } :root[data-theme="dark"] .sym-pop button small { color: var(--ink-soft); } :root[data-theme="dark"] .sym-pop button.clear { color: #e0a0a0; } :root[data-theme="dark"] .g1-group { border-color: rgba(232,227,216,.16); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .book .para:hover { background: rgba(232,227,216,.06); } :root:not([data-theme="light"]) .book .para.marked { background: rgba(184,150,79,.16); box-shadow: inset 3px 0 0 var(--gold); } :root:not([data-theme="light"]) .passage .turn.narr { color: var(--ink-soft); } :root:not([data-theme="light"]) .sentence-card .sn { color: var(--gold); } :root:not([data-theme="light"]) .sec-no { color: var(--gold); background: rgba(184,150,79,.14); } :root:not([data-theme="light"]) .sym-pop { background: #1e1e1c; border-color: rgba(232,227,216,.25); box-shadow: 0 8px 24px rgba(0,0,0,.6); } :root:not([data-theme="light"]) .sym-pop button { border-color: rgba(232,227,216,.25); background: #171716; color: var(--ink); } :root:not([data-theme="light"]) .sym-pop button small { color: var(--ink-soft); } :root:not([data-theme="light"]) .sym-pop button.clear { color: #e0a0a0; } :root:not([data-theme="light"]) .g1-group { border-color: rgba(232,227,216,.16); } } /* 시연 사진(?demo=)에서는 홈 카드 등장 효과를 건너뛴다 — 페이드 도중에 찍혀 책장 사진이 흐렸다(2026-09-08) */ body.demo-shot .track-card > *, body.demo-shot .track-card.fx-wait > * { opacity: 1 !important; transition: none !important; } body.demo-shot .track-card.fx-wait::before { opacity: .14 !important; } /* ══ 심화 과정 진열 카드 (2026-09-08, mock_programs.html → 실제 앱) ══ 논문 서류함(pp-) · 보고서 덮개 클립보드(rp-) · 약관 걸이식 폴더(tm-) · 판례 끈 묶은 봉투(cs-). 무대(.pp-stage)·큰 것(.pp-big)·오른쪽 소개(.pp-view, .pp-v-*)· 항목(.pg-item)·닫기(.pp-close)는 넷이 함께 쓴다. 다크 규칙은 :root[data-theme="dark"] 한 벌을 쓰고, 기기 설정 짝은 아래 미디어쿼리에 자동 생성해 붙였다 (tools 가 아니라 scratch port_programs.py 가 만들었다 — 고칠 때 두 벌 같이). 목업 원본: mock_programs.html(tools/build_mock_programs.py). */ /* ── 목업: 심화 과정 카드 넷 (2026-09-07). 논문(pp-)은 mock_papers.html 에서 그대로, 보고서(rp-)·약관(tm-)·판례(cs-)를 더했다. 무대(.pp-stage)·큰 것(.pp-big)·오른쪽 소개(.pp-view, .pp-v-*)·닫기(.pp-close)·항목(.pg-item)은 넷이 함께 쓴다. build: scratchpad/build_mock_programs.py */ /* ── 목업 전용: 심화 과정 카드 — 논문정밀독해 (2026-09-07) ── 기본 과정은 책장(책등→표지)이지만 논문은 책이 아니다. 서류함에 논문 묶음이 겹쳐 쌓여 있고(첫 장 머리만 보인다), 하나를 누르면 그 논문이 서류함에서 빠져나와 첫 페이지가 크게 뜨고, 오른쪽에 소개가 펼쳐진다. 자료조망(보고서)·약관논리(약관)·판례기반(판결문)은 각자 매체에 맞춰 따로 만든다. 접두어 pp- (bs-·book·shelf 와 충돌 금지). */ /* 무대 = 책장 무대와 같은 크기. 서류함(pp-tray) 위에 큰 논문(pp-big)이 뜬다 */ .pp-stage { position: relative; } .pp-stage.open .pp-tray { filter: blur(2.5px) saturate(.8); opacity: .55; transition: filter .35s, opacity .35s; } .pp-tray { position: relative; padding: 14px 14px 12px; transition: filter .35s, opacity .35s; background: linear-gradient(90deg, rgba(0,0,0,.07), transparent 8%, transparent 92%, 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); } /* 서류함 한 칸(일반부/심화부): 앞판이 낮고 뒤판이 높은 문서 정리함 */ .pp-bins { display: flex; gap: 14px; } .pp-bin { flex: 1 1 0; min-width: 0; position: relative; padding: 12px 10px 0; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.03) 22%, transparent 40%), linear-gradient(90deg, rgba(0,0,0,.10), transparent 8%, transparent 92%, rgba(0,0,0,.10)), rgba(var(--ewha-rgb),.09); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); } .pp-bin-label { position: absolute; left: 12px; top: -1px; z-index: 3; 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); } /* 앞판 — 서류함 앞의 낮은 턱. 논문 아랫부분을 가린다 */ .pp-bin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: 5; 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 -4px 8px -3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.18); } /* 논문 묶음 — 첫 장 머리만 보이도록 겹쳐 쌓인다. 1편이 맨 뒤(위), 6편이 맨 앞(아래) */ .pp-stack { position: relative; height: 356px; } .pp-paper { position: absolute; left: 6px; right: 6px; height: 230px; cursor: pointer; background: var(--paper-white, #fff); color: var(--ink); border: 1px solid rgba(var(--ewha-rgb),.55); box-shadow: 0 -2px 6px -2px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.3) inset; padding: 7px 9px 0; transition: transform .22s ease, box-shadow .22s ease; } .pp-paper:nth-child(1) { top: 0; z-index: 1; } .pp-paper:nth-child(2) { top: 36px; z-index: 2; } .pp-paper:nth-child(3) { top: 72px; z-index: 3; } .pp-paper:nth-child(4) { top: 108px; z-index: 4; } .pp-paper:nth-child(5) { top: 144px; z-index: 5; } .pp-paper:nth-child(6) { top: 180px; z-index: 6; } /* 뒤에 있는 논문은 앞 논문 그늘 속 */ .pp-paper::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; background: linear-gradient(180deg, transparent 20px, rgba(0,0,0,.05) 26px, rgba(0,0,0,.05)); } .pp-paper:hover { transform: translateY(-7px); box-shadow: 0 -4px 10px -2px rgba(0,0,0,.35); } /* 앞으로 튀어나오지 않고(z-index 그대로) 머리만 올라온다 */ /* 스테이플 — 왼쪽 위 모서리에 비스듬히 */ .pp-paper::after { content: ""; position: absolute; left: 5px; top: 4px; width: 9px; height: 2px; background: var(--ink-soft); transform: rotate(-45deg); opacity: .7; } /* 첫 장 머리: 학술지·연도 작은 대문자 → 제목 → 저자 */ .pp-j { display: block; font-size: 8px; letter-spacing: .12em; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; } .pp-t { display: block; font-size: 12px; font-weight: 700; line-height: 1.15; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; } .pp-a { display: block; font-size: 8.5px; color: var(--ink-soft); margin-top: 2px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-n { position: absolute; right: 8px; top: 6px; font-size: 8px; letter-spacing: .1em; color: var(--ink-soft); } /* 맨 앞 논문(6편)은 머리 아래 본문 줄도 보인다 */ .pp-lines { margin: 10px 0 0; height: 150px; opacity: .55; background: repeating-linear-gradient(180deg, rgba(var(--ewha-rgb),.35) 0 1px, transparent 1px 6px); } .pp-lines.two { background: linear-gradient(90deg, transparent calc(50% - 4px), var(--paper-white, #fff) calc(50% - 4px), var(--paper-white, #fff) calc(50% + 4px), transparent calc(50% + 4px)), repeating-linear-gradient(180deg, rgba(var(--ewha-rgb),.35) 0 1px, transparent 1px 6px); } /* 상태: 마친 것은 도장, 지금 것은 클립을 물고 살짝 빠져나와 있다, 앞으로 것은 옅다 */ .pp-paper.ahead { background: #f7f5ee; border-color: rgba(var(--ewha-rgb),.4); } /* opacity 는 겹치지 않은 부분만 비쳐 보여서 안 쓴다 */ .pp-paper.ahead .pp-t { color: var(--ink-soft); } .pp-paper.done .pp-stamp { position: absolute; right: 26px; top: 3px; font-size: 7px; letter-spacing: .12em; text-indent: .12em; padding: 1px 4px; border: 1px solid var(--ewha); color: var(--ewha); transform: rotate(-6deg); opacity: .8; } .pp-paper.current { transform: translateX(8px) translateY(-3px); border-color: var(--ewha); box-shadow: 0 -4px 10px -2px rgba(0,0,0,.35); } .pp-paper.current:hover { transform: translateX(8px) translateY(-7px); } .pp-clip { position: absolute; left: 22px; top: -7px; width: 7px; height: 20px; border: 1.5px solid var(--ewha); border-radius: 4px; background: transparent; } .pp-clip::after { content: ""; position: absolute; left: 1px; top: 4px; width: 2px; height: 11px; border: 1.5px solid var(--ewha); border-radius: 2px; border-top: 0; } .pp-frac { position: absolute; right: 8px; bottom: 6px; font-size: 8.5px; font-weight: 700; color: var(--ewha); } .pp-paper.blank { border-style: dashed; background: transparent; box-shadow: none; } .pp-paper.blank .pp-t { color: var(--ink-soft); font-weight: 400; } .pp-paper.out { visibility: hidden; } /* 무대 위 큰 논문 — A4 첫 페이지. 밑에 나머지 장이 비어져 나와 두께가 보인다 */ .pp-big { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2; } .pp-stage.open .pp-big { display: flex; } .pp-doc { --d: 7px; height: 92%; aspect-ratio: 1 / 1.35; position: relative; cursor: default; animation: pp-doc-in .5s cubic-bezier(.2,.75,.2,1) both; } @keyframes pp-doc-in { from { transform: translateY(40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .pp-doc::after { content: ""; position: absolute; left: 6%; right: -4%; bottom: -8px; height: 12px; border-radius: 50%; background: rgba(var(--ewha-rgb),.4); filter: blur(9px); z-index: 0; } .pp-sheets { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, transparent calc(100% - 22px), rgba(0,0,0,.08) calc(100% - 22px)), repeating-linear-gradient(90deg, #f3efe4 0 1px, #dcd6c6 1px 2px); transform: translate(calc(var(--d) * 1), calc(var(--d) * 1)); box-shadow: inset 0 0 0 1px rgba(var(--ewha-rgb),.22); } .pp-page { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--paper-white, #fff); color: var(--ink); border: 1px solid rgba(var(--ewha-rgb),.6); padding: 14px 16px 12px; overflow: hidden; box-shadow: 6px 8px 18px -8px rgba(var(--ewha-rgb),.5), inset 0 0 0 1px rgba(255,255,255,.5); font-family: "Noto Serif KR", "ChosunilboMJ", "Batang", serif; } .pp-page::after { content: ""; position: absolute; left: 7px; top: 6px; width: 11px; height: 2px; background: var(--ink-soft); transform: rotate(-45deg); opacity: .7; } .pp-pg-band { flex: none; display: flex; justify-content: space-between; font-size: 7.5px; letter-spacing: .12em; color: var(--ink-soft); border-bottom: 1px solid var(--ewha); padding-bottom: 5px; text-transform: uppercase; } .pp-pg-band b { color: var(--ewha); font-weight: 700; } .pp-pg-head { flex: none; text-align: center; padding: 14px 6px 10px; border-bottom: 1px solid rgba(var(--ewha-rgb),.35); } .pp-pg-n { font-size: 8.5px; letter-spacing: .2em; text-indent: .2em; color: var(--ink-soft); } .pp-pg-t { font-size: 17px; font-weight: 700; line-height: 1.3; margin-top: 5px; word-break: keep-all; } .pp-pg-e { font-size: 10px; font-style: italic; opacity: .8; margin-top: 4px; } .pp-pg-a { font-size: 10.5px; margin-top: 9px; letter-spacing: .06em; } .pp-pg-af { font-size: 8px; color: var(--ink-soft); margin-top: 2px; } .pp-pg-abs { flex: none; margin: 10px 8px 0; font-size: 8.5px; line-height: 1.55; color: var(--ink); } .pp-pg-abs b { font-size: 7.5px; letter-spacing: .16em; color: var(--ewha); display: block; margin-bottom: 2px; } .pp-pg-kw { flex: none; margin: 6px 8px 0; font-size: 7.5px; color: var(--ink-soft); } .pp-pg-kw b { color: var(--ewha); letter-spacing: .12em; font-weight: 700; margin-right: 4px; } /* 본문 — 두 단 가짜 글줄 */ .pp-pg-body { flex: 1; min-height: 0; margin: 10px 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pp-pg-body i { display: block; opacity: .5; background: repeating-linear-gradient(180deg, rgba(var(--ewha-rgb),.4) 0 1px, transparent 1px 5.5px); } .pp-pg-body i:first-child { background: linear-gradient(180deg, rgba(var(--ewha-rgb),.4) 0 1px, transparent 1px 5.5px) 0 0 / 60% 5.5px no-repeat, repeating-linear-gradient(180deg, rgba(var(--ewha-rgb),.4) 0 1px, transparent 1px 5.5px) 0 5.5px; } .pp-pg-foot { flex: none; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 7.5px; color: var(--ink-soft); letter-spacing: .1em; } .pp-pg-grade { border: 1px solid var(--ewha); color: var(--ewha); padding: 1px 5px; letter-spacing: .1em; } /* 오른쪽 기둥 — 책장 카드와 같은 문법 */ .pp-view { display: none; } .tk-right.open .tk-desc { display: none; } .tk-right.open .pp-view { display: block; animation: pp-text-in .5s .12s ease both; min-width: 0; } @keyframes pp-text-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .pp-v-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pp-v-head b { font-size: 17px; } .pp-v-meta { font-size: 11.5px; color: var(--ink-soft); } .pp-v-prog { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); } .pp-v-prog i { display: block; width: 90px; height: 6px; background: rgba(var(--ewha-rgb),.13); } .pp-v-prog i b { display: block; height: 100%; background: var(--ewha); } .pp-v-blurb { font-size: 13px; line-height: 1.7; margin: 0; } .pp-v-sec { margin-top: 10px; } .pp-v-sec > b { font-size: 12px; } .pp-v-sec p { font-size: 12.5px; line-height: 1.65; margin: 2px 0 0; } .pp-v-foot { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; } .pp-v-foot .pp-locked { font-size: 12.5px; color: var(--ink-soft); } /* 심화 카드는 왼쪽 그래픽 기둥을 책장(500)보다 넓게 — 항목 열두 개가 다 보여야 하니 (2026-09-07 사용자) */ .track-card[data-ptrack] .tk-cols { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); } /* 논문 — 머리를 더 보이게 */ .track-card[data-ptrack] .pp-stack { height: 420px; } .track-card[data-ptrack] .pp-paper { height: 230px; padding: 7px 11px 0; } .track-card[data-ptrack] .pp-paper:nth-child(2) { top: 40px; } .track-card[data-ptrack] .pp-paper:nth-child(3) { top: 80px; } .track-card[data-ptrack] .pp-paper:nth-child(4) { top: 120px; } .track-card[data-ptrack] .pp-paper:nth-child(5) { top: 160px; } .track-card[data-ptrack] .pp-paper:nth-child(6) { top: 200px; } .track-card[data-ptrack] .pp-paper::before { background: linear-gradient(180deg, transparent 30px, rgba(0,0,0,.05) 36px, rgba(0,0,0,.05)); } .track-card[data-ptrack] .pp-j { font-size: 9px; padding-left: 10px; } .track-card[data-ptrack] .pp-t { font-size: 13px; margin-top: 1px; } .track-card[data-ptrack] .pp-a { font-size: 9.5px; margin-top: 3px; } .track-card[data-ptrack] .pp-n { font-size: 9px; top: 8px; right: 10px; } .track-card[data-ptrack] .pp-lines { height: 150px; } .track-card[data-ptrack] .pp-paper.done .pp-stamp { font-size: 8px; right: 34px; top: 5px; } .track-card[data-ptrack] .pp-clip { left: 26px; } /* ═══════════ 자료조망독해 — 보고서 진열대 (rp-) ═══════════ 경제·정책 보고서는 표지가 얼굴이다: 기관 띠 + 제목 + 도표. 잡지 진열대처럼 두 단에 여섯 권씩 표지가 앞을 보고 기대어 있다. 누르면 표지가 크게 뜨고(도표가 커진다), 오른쪽에 소개. */ .rp-rack { position: relative; padding: 14px 14px 12px; transition: filter .35s, opacity .35s; background: linear-gradient(90deg, rgba(0,0,0,.07), transparent 8%, transparent 92%, 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); } .pp-stage.open .rp-rack { filter: blur(2.5px) saturate(.8); opacity: .55; } .rp-row { position: relative; padding: 14px 10px 0; margin-bottom: 10px; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.03) 30%, transparent 55%), rgba(var(--ewha-rgb),.09); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); } .rp-row:last-child { margin-bottom: 0; } .rp-label { position: absolute; left: 12px; top: -1px; z-index: 3; 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); } /* 진열대 가로대 — 표지 아랫부분을 받치는 철사 두 줄 */ .rp-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 5; background: linear-gradient(180deg, transparent 4px, rgba(var(--ewha-rgb),.55) 4px 6px, transparent 6px, transparent 13px, rgba(var(--ewha-rgb),.55) 13px 15px, transparent 15px); } .rp-covers { display: flex; gap: 8px; align-items: flex-end; height: 146px; } /* 덮개 클립보드(사용자 사진: 덮개가 덮인 판 + 위 금속 집게). 세 겹이다 — 뒤판(초록) → 집게에 물린 속지 몇 장(흰 윗머리가 보인다) → 그 위를 덮는 덮개(초록, 위쪽이 접혀 살짝 들려 있다). 제목은 덮개에 인쇄. 누르면 덮개를 연 모양(큰 화면)이 된다. */ .rp-cover { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 1 / 1.45; position: relative; cursor: pointer; overflow: visible; background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 30%), var(--ewha); color: var(--paper); border-radius: 4px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.28); padding: 0; transition: transform .22s, box-shadow .22s; } .rp-cover:hover { transform: translateY(-6px); box-shadow: 0 10px 16px -6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.28); } /* 덮개 — 판 전체를 덮는다. 위 가운데 집게 둘레만 U자로 파여 있고(.rp-notch), 그 홈으로 속지가 보인다 */ .rp-lid { position: absolute; inset: 0; z-index: 1; border-radius: 4px; padding: 30px 7px 6px; display: flex; flex-direction: column; background: linear-gradient(155deg, rgba(255,255,255,.14), transparent 45%, rgba(0,0,0,.12)), var(--ewha); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(0,0,0,.2); } .rp-notch { position: absolute; left: 50%; top: 0; width: 54%; margin-left: -27%; height: 26px; z-index: 2; border-radius: 0 0 4px 4px; /* 각진 U */ background: linear-gradient(180deg, #f2efe6, #fff 40%); box-shadow: inset 0 -3px 4px -2px rgba(0,0,0,.35), inset 3px 0 3px -2px rgba(0,0,0,.25), inset -3px 0 3px -2px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.12); } .rp-notch::after { content: ""; position: absolute; left: 22%; right: 22%; top: 16px; height: 1px; background: rgba(var(--ewha-rgb),.35); box-shadow: 0 3px 0 rgba(var(--ewha-rgb),.2); } /* 속지 글줄 */ /* 집게 — 덮개보다 위(z 3). 금속 판 + 리벳 둘 + 고리 */ .rp-clip { position: absolute; left: 50%; top: -4px; width: 40%; height: 14px; margin-left: -20%; z-index: 3; border-radius: 2px; background: linear-gradient(180deg, #f4f4f2, #b9bbb7 45%, #e6e7e4 55%, #9a9c98); box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.15); } .rp-clip::before { content: ""; position: absolute; left: 50%; top: -5px; width: 12px; height: 7px; margin-left: -6px; border-radius: 3px 3px 0 0; border: 2px solid #c9cbc7; border-bottom: 0; background: transparent; box-shadow: 0 -1px 1px rgba(0,0,0,.2); } .rp-clip::after { content: ""; position: absolute; left: 4px; right: 4px; top: 5px; height: 4px; background: radial-gradient(circle, #6d6f6b 1.3px, transparent 1.6px) left center / 4px 4px no-repeat, radial-gradient(circle, #6d6f6b 1.3px, transparent 1.6px) right center / 4px 4px no-repeat; } /* 덮개에 인쇄된 글 */ .rp-org { flex: none; font-size: 6.5px; letter-spacing: .12em; color: rgba(var(--paper-rgb),.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-t { flex: none; font-size: 10px; font-weight: 700; line-height: 1.25; margin-top: 6px; max-height: 50px; overflow: hidden; word-break: keep-all; letter-spacing: -.01em; color: var(--paper); } .rp-sub { flex: none; font-size: 6px; font-style: italic; color: rgba(var(--paper-rgb),.7); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-rule { flex: none; width: 22px; height: 3px; margin-top: 8px; border-top: 1px solid rgba(var(--paper-rgb),.7); border-bottom: 1px solid rgba(var(--paper-rgb),.35); } .rp-foot { flex: none; margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 6.5px; color: rgba(var(--paper-rgb),.7); letter-spacing: .08em; } .rp-foot b { font-weight: 700; color: var(--paper); } .rp-cover.ahead, .rp-cover.ahead .rp-lid { background-color: rgba(var(--ewha-rgb),.85); } /* 미진행: 판만 살짝 옅게, 글자는 다른 권과 같은 흰색(옅게 하면 초록 위에서 안 보인다) */ .rp-cover.done .rp-stamp { position: absolute; right: 7px; top: 27px; z-index: 3; font-size: 6px; letter-spacing: .1em; padding: 1px 3px; border: 1px solid rgba(var(--paper-rgb),.8); color: var(--paper); transform: rotate(-8deg); } .rp-cover.current { transform: translateY(-8px); box-shadow: 0 10px 16px -6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 2px var(--gold, #b8964f); } .rp-cover.current::before { content: ""; position: absolute; right: 6px; top: -1px; width: 8px; height: 16px; background: var(--ewha); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); z-index: 2; } /* 갈피 */ .rp-frac { position: absolute; right: 8px; top: 27px; font-size: 7px; font-weight: 700; color: var(--gold, #d9c37a); z-index: 2; } .rp-cover.out { visibility: hidden; } /* 큰 표지 */ .rp-big { height: 92%; aspect-ratio: 1 / 1.45; position: relative; animation: pp-doc-in .5s cubic-bezier(.2,.75,.2,1) both; } .rp-big::after { content: ""; position: absolute; left: 6%; right: -4%; bottom: -8px; height: 12px; border-radius: 50%; background: rgba(var(--ewha-rgb),.4); filter: blur(9px); z-index: 0; } .rp-board { position: absolute; inset: 0; z-index: 1; border-radius: 8px; background: linear-gradient(160deg, rgba(255,255,255,.10), transparent 40%), var(--ewha); box-shadow: 0 10px 22px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.25); } .rp-bclip { position: absolute; left: 50%; top: -8px; width: 42%; height: 28px; margin-left: -21%; z-index: 5; border-radius: 4px; background: linear-gradient(180deg, #f4f4f2, #b9bbb7 45%, #e6e7e4 55%, #9a9c98); box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.15); } .rp-bclip::before { content: ""; position: absolute; left: 50%; top: -10px; width: 26px; height: 14px; margin-left: -13px; border-radius: 6px 6px 0 0; border: 3px solid #c9cbc7; border-bottom: 0; } .rp-bclip::after { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; height: 8px; background: radial-gradient(circle, #6d6f6b 2.5px, transparent 3px) left center / 8px 8px no-repeat, radial-gradient(circle, #6d6f6b 2.5px, transparent 3px) right center / 8px 8px no-repeat; } .rp-bcover { position: absolute; left: 12px; right: 12px; top: 24px; bottom: 12px; z-index: 3; display: flex; flex-direction: column; overflow: hidden; background: var(--paper-white, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.4); } .rp-bband { flex: none; display: flex; justify-content: space-between; padding: 12px 14px 0; font-size: 7.5px; letter-spacing: .12em; color: var(--ink-soft); text-transform: uppercase; } .rp-bhead { flex: none; padding: 10px 16px 8px; } .rp-bn { font-size: 8.5px; letter-spacing: .2em; color: var(--ink-soft); } .rp-bt { font-size: 17px; font-weight: 700; line-height: 1.3; margin-top: 4px; word-break: keep-all; } .rp-be { font-size: 10px; font-style: italic; opacity: .8; margin-top: 3px; } .rp-bo { font-size: 9.5px; margin-top: 8px; letter-spacing: .04em; } .rp-bo small { color: var(--ink-soft); margin-left: 6px; } /* 큰 도표 — 작은 표지와 같은 그림을 크게 */ .rp-bfig { flex: 1; min-height: 0; margin: 4px 16px 0; position: relative; color: var(--ewha); } .rp-bfig svg { width: 100%; height: 100%; display: block; } .rp-bfig .rp-num b { font-size: 46px; } .rp-bfig .rp-num small { font-size: 8.5px; } .rp-bx { flex: none; display: flex; justify-content: space-between; margin: 3px 16px 0; padding: 0 8px; font-size: 6.5px; color: var(--ink-soft); letter-spacing: .06em; } .rp-bsum { flex: none; margin: 10px 16px 0; padding: 7px 9px; border: 1px solid rgba(var(--ewha-rgb),.4); font-size: 8.5px; line-height: 1.5; } .rp-bsum b { display: block; font-size: 7px; letter-spacing: .16em; color: var(--ewha); margin-bottom: 2px; } .rp-bfoot { flex: none; display: flex; justify-content: space-between; align-items: center; margin: 8px 16px 10px; font-size: 7.5px; color: var(--ink-soft); letter-spacing: .1em; } /* ═══════════ 약관논리분석 — 서랍의 걸이식 폴더 (tm-) ═══════════ 약관·규정은 낱장이 아니라 조항 묶음이고, 기업·기관은 그걸 서류 서랍에 폴더로 건다. 서랍을 위에서 내려다본 모양: 폴더 열두 개가 앞뒤로 걸려 있고 탭(왼쪽·가운데·오른쪽 번갈아)에 이름이 적혀 있다. 누르면 폴더에서 약관 첫 장이 올라온다. */ .tm-drawer { position: relative; padding: 14px 14px 12px; transition: filter .35s, opacity .35s; background: linear-gradient(90deg, rgba(0,0,0,.07), transparent 8%, transparent 92%, 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); } .pp-stage.open .tm-drawer { filter: blur(2.5px) saturate(.8); opacity: .55; } .tm-units { display: flex; gap: 14px; } .tm-unit { flex: 1 1 0; min-width: 0; } .tm-inner { position: relative; height: 236px; padding: 14px 0 0; overflow: hidden; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 5%, transparent 95%, rgba(0,0,0,.18)), rgba(var(--ewha-rgb),.16); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), inset 0 8px 10px -8px rgba(0,0,0,.35); } /* 레일 — 폴더 고리가 걸리는 쇠막대 두 줄 */ .tm-inner::before, .tm-inner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; z-index: 20; background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.35) 50%, rgba(0,0,0,.25)); } .tm-inner::before { left: 9px; } .tm-inner::after { right: 9px; } /* 서랍 앞판 — 손잡이와 명패 */ .tm-front { height: 38px; margin-top: 0; position: relative; 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 -4px 8px -3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.18); } .tm-front::before { content: ""; position: absolute; left: 50%; top: 13px; width: 40px; height: 9px; margin-left: -20px; border: 2px solid rgba(var(--paper-rgb),.8); border-top: 0; border-radius: 0 0 6px 6px; } .tm-front .tm-plate { position: absolute; left: 14px; top: 12px; height: 13px; line-height: 12px; padding: 0 7px; font-size: 8.5px; letter-spacing: .14em; font-weight: 700; color: var(--paper); background: var(--ewha); border: 1px solid rgba(0,0,0,.2); } /* 폴더 한 장: 마닐라 서류철. 고리가 레일에 걸리고, 몸통은 길게 내려가 뒤 폴더 뒤로 겹친다(앞 폴더가 뒤 폴더를 가린다). 탭은 폴더 윗변에서 잘라 올린 같은 종이 */ .tm-folder { position: relative; height: 34px; cursor: pointer; --mn: #f7f3e8; --mn-d: rgba(var(--ewha-rgb),.5); transition: transform .18s ease; } /* 갈색 마닐라는 초록·크림 팔레트와 안 맞아 크림 종이로 */ .tm-folder:nth-child(1) { z-index: 1; } .tm-folder:nth-child(2) { z-index: 2; } .tm-folder:nth-child(3) { z-index: 3; } .tm-folder:nth-child(4) { z-index: 4; } .tm-folder:nth-child(5) { z-index: 5; } .tm-folder:nth-child(6) { z-index: 6; } .tm-folder:hover { transform: translateY(-5px); } .tm-face { position: absolute; left: 12px; right: 12px; top: 15px; height: 150px; z-index: 1; padding: 0 12px; line-height: 19px; font-size: 8px; letter-spacing: .06em; color: rgba(var(--ewha-rgb),.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(180deg, #fdfbf4, var(--mn) 18px, #ede8da); border: 1px solid var(--mn-d); border-bottom: 0; box-shadow: 0 -3px 6px -3px rgba(0,0,0,.35); } /* 고리 — 몸통 양 끝에서 레일 위로 걸린다 */ .tm-face::before, .tm-face::after { content: ""; position: absolute; top: -3px; width: 10px; height: 7px; border: 1.5px solid rgba(var(--ewha-rgb),.7); border-bottom: 0; border-radius: 3px 3px 0 0; background: var(--mn); } .tm-face::before { left: -6px; } .tm-face::after { right: -6px; } .tm-tab { position: absolute; top: 0; height: 17px; line-height: 16px; padding: 0 10px 0 8px; max-width: 70%; z-index: 2; background: linear-gradient(180deg, #fffdf7, var(--mn)); color: var(--ink); border: 1px solid var(--mn-d); border-bottom: 0; border-radius: 3px 3px 0 0; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-tab::before { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 1px; background: rgba(0,0,0,.08); } .tm-tab i { font-style: normal; font-weight: 400; color: rgba(var(--ewha-rgb),.85); font-size: 8px; letter-spacing: .08em; margin-right: 4px; } .tm-folder.p0 .tm-tab { left: 22px; } .tm-folder.p1 .tm-tab { left: 22%; } .tm-folder.p2 .tm-tab { right: 22px; } .tm-folder.p0 .tm-face { text-align: right; } .tm-folder.p1 .tm-face { text-align: right; } .tm-folder.p2 .tm-face { text-align: left; } .tm-folder.ahead .tm-tab { color: var(--ink-soft); font-weight: 400; background: var(--mn); } .tm-folder.done .tm-tab::after { content: "✓"; margin-left: 5px; color: var(--ewha); font-size: 8px; } .tm-folder.current .tm-tab { border-color: var(--ewha); padding-right: 32px; } /* 밑줄 없이 테두리와 갈피 리본만 */ .tm-folder.current .tm-tab::after { content: ""; position: absolute; left: 3px; top: -1px; width: 5px; height: 12px; background: var(--ewha); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); } .tm-folder.current .tm-tab { padding-left: 14px; } .tm-folder.current .tm-face { border-color: var(--ewha); } .tm-folder.current .tm-frac { position: absolute; right: 7px; top: 0; font-size: 8.5px; font-weight: 700; color: var(--ewha); } .tm-folder.out .tm-tab { visibility: hidden; } /* 큰 약관 첫 장 */ .tm-big { --d: 6px; height: 92%; aspect-ratio: 1 / 1.35; position: relative; animation: pp-doc-in .5s cubic-bezier(.2,.75,.2,1) both; } .tm-big::after { content: ""; position: absolute; left: 6%; right: -4%; bottom: -8px; height: 12px; border-radius: 50%; background: rgba(var(--ewha-rgb),.4); filter: blur(9px); z-index: 0; } .tm-page { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px 10px; background: var(--paper-white, #fff); color: var(--ink); border: 1px solid rgba(var(--ewha-rgb),.6); box-shadow: 6px 8px 18px -8px rgba(var(--ewha-rgb),.5); font-family: "Noto Serif KR", "ChosunilboMJ", "Batang", serif; } .tm-page::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(var(--ewha-rgb),.35) 6px 8px); } /* 제본 구멍 */ .tm-pband { flex: none; display: flex; justify-content: space-between; font-size: 7.5px; letter-spacing: .12em; color: var(--ink-soft); border-bottom: 1px solid var(--ewha); padding-bottom: 5px; text-transform: uppercase; } .tm-pband b { color: var(--ewha); } .tm-pt { flex: none; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .06em; margin: 14px 0 3px; word-break: keep-all; } .tm-pe { flex: none; text-align: center; font-size: 8px; color: var(--ink-soft); letter-spacing: .08em; } .tm-pn { flex: none; text-align: center; font-size: 7.5px; color: var(--ink-soft); margin-top: 4px; } .tm-art { flex: none; margin-top: 9px; font-size: 8.5px; line-height: 1.6; } .tm-art b { display: block; font-size: 8.5px; margin-bottom: 1px; } .tm-art em { font-style: normal; background: rgba(var(--ewha-rgb),.16); padding: 0 2px; } /* 조건·예외 말 */ .tm-lines { flex: 1; min-height: 0; margin-top: 8px; opacity: .5; background: repeating-linear-gradient(180deg, rgba(var(--ewha-rgb),.4) 0 1px, transparent 1px 5.5px); } .tm-pfoot { flex: none; display: flex; justify-content: space-between; margin-top: 8px; font-size: 7.5px; color: var(--ink-soft); letter-spacing: .1em; } /* ═══════════ 판례기반추론 — 끈으로 묶은 기록 봉투 (cs-) ═══════════ 판결은 사건 기록 봉투에 담겨 서고에 눕는다. 봉투 여섯이 겹쳐 놓여 왼쪽 위 사건 표가 보이고, 끈이 단추에 감겨 있다. 누르면 봉투에서 판결문 첫 장이 나온다: 「판결」 큰 제목, 사건·당사자, 주문, 이유, 둥근 인장. */ .cs-arch { position: relative; padding: 14px 14px 12px; transition: filter .35s, opacity .35s; background: linear-gradient(90deg, rgba(0,0,0,.07), transparent 8%, transparent 92%, 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); } .pp-stage.open .cs-arch { filter: blur(2.5px) saturate(.8); opacity: .55; } .cs-row { position: relative; height: 172px; padding: 18px 10px 0; margin-bottom: 12px; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.03) 30%, transparent 55%), rgba(var(--ewha-rgb),.09); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); } .cs-row:last-child { margin-bottom: 0; } .cs-label { position: absolute; left: 12px; top: -1px; z-index: 8; 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); } .cs-env { position: absolute; top: 18px; width: 166px; height: 140px; cursor: pointer; transition: transform .22s, box-shadow .22s; background: linear-gradient(180deg, rgba(0,0,0,.03), transparent 30%), #e9e2d2; color: var(--ink); border: 1px solid rgba(var(--ewha-rgb),.5); box-shadow: -3px 0 6px -3px rgba(0,0,0,.35); } /* 뒤 봉투가 앞에 온다 — 각 봉투의 왼쪽 딱지가 보이도록 */ .cs-env:nth-child(2) { left: 8px; z-index: 1; } .cs-env:nth-child(3) { left: 90px; z-index: 2; } .cs-env:nth-child(4) { left: 172px; z-index: 3; } .cs-env:nth-child(5) { left: 254px; z-index: 4; } .cs-env:nth-child(6) { left: 336px; z-index: 5; } .cs-env:nth-child(7) { left: 418px; z-index: 6; } /* 8+82*5+166 = 584 < 줄 안폭 592 */ .cs-env:hover { transform: translateY(-6px); z-index: 7; box-shadow: -3px 6px 12px -4px rgba(0,0,0,.4); } /* 사건 표 — 왼쪽 위 흰 딱지 */ .cs-tag { position: absolute; left: 5px; top: 6px; width: 76px; height: 64px; background: var(--paper-white, #fff); border: 1px solid rgba(var(--ewha-rgb),.7); padding: 3px 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--paper-white, #fff), inset 0 0 0 2px rgba(var(--ewha-rgb),.25); } .cs-tag .cs-n { display: block; font-size: 7.5px; letter-spacing: .1em; color: var(--ewha); font-weight: 700; } .cs-tag .cs-t { display: block; font-size: 11px; font-weight: 700; line-height: 1.15; margin-top: 3px; word-break: keep-all; color: var(--ink); } .cs-tag .cs-c { display: block; font-size: 7.5px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 영문 사건명 — 딱지 아래 봉투 겉면에 인쇄체로 */ .cs-e { position: absolute; left: 6px; top: 75px; width: 74px; font-size: 8px; font-style: italic; line-height: 1.3; color: rgba(var(--ewha-rgb),.9); font-family: "Noto Serif KR", Georgia, serif; overflow: hidden; max-height: 36px; } .cs-e small { display: block; font-style: normal; font-size: 6.5px; letter-spacing: .08em; color: var(--ink-soft); margin-top: 1px; } /* 끈 묶음 — 봉투 겉면 오른쪽: 종이 단추 둘(위는 덮개에, 아래는 몸통에) 사이에 끈을 8자로 두 번 감고, 끝은 늘어져 있다 (SVG) */ .cs-tie { position: absolute; right: 10px; top: 10px; width: 40px; height: 108px; pointer-events: none; } .cs-tie .sh { fill: rgba(0,0,0,.18); } .cs-tie .btn { fill: #e7dfc9; stroke: rgba(var(--ewha-rgb),.75); stroke-width: 1.2; } .cs-tie .ring { fill: none; stroke: rgba(0,0,0,.18); stroke-width: 1; } .cs-tie .rivet { fill: rgba(var(--ewha-rgb),.9); } .cs-tie .rivet-hi { fill: rgba(255,255,255,.55); } .cs-tie .cord-o { fill: none; stroke: rgba(var(--ewha-rgb),.9); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .cs-tie .cord-i { fill: none; stroke: #efe6cf; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } /* 덮개 — 봉투 위쪽 28px 가 접혀 내려온 덮개. 접힌 선 아래로 옅은 그늘 */ .cs-env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.02) 27px, rgba(0,0,0,.16) 28px, rgba(0,0,0,.06) 29px, transparent 33px); } .cs-env.done .cs-stamp { position: absolute; left: 90px; bottom: 6px; font-size: 7.5px; letter-spacing: .12em; padding: 1px 4px; border: 1px solid var(--ewha); color: var(--ewha); transform: rotate(-6deg); } .cs-env.ahead { background: linear-gradient(180deg, rgba(0,0,0,.03), transparent 30%), #ede8dc; border-color: rgba(var(--ewha-rgb),.35); } .cs-env.ahead .cs-tag .cs-t { color: var(--ink-soft); } .cs-env.current { transform: translateY(-10px); border-color: var(--ewha); box-shadow: -3px 8px 14px -5px rgba(0,0,0,.45); } .cs-env.current .cs-frac { position: absolute; left: 90px; bottom: 6px; font-size: 8.5px; font-weight: 700; color: var(--ewha); } .cs-env.out { visibility: hidden; } /* 큰 판결문 */ .cs-big { --d: 6px; height: 92%; aspect-ratio: 1 / 1.35; position: relative; animation: pp-doc-in .5s cubic-bezier(.2,.75,.2,1) both; } .cs-big::after { content: ""; position: absolute; left: 6%; right: -4%; bottom: -8px; height: 12px; border-radius: 50%; background: rgba(var(--ewha-rgb),.4); filter: blur(9px); z-index: 0; } .cs-sheets { position: absolute; inset: 0; z-index: 1; transform: translate(var(--d), var(--d)); background: repeating-linear-gradient(90deg, #f3efe4 0 1px, #dcd6c6 1px 2px); box-shadow: inset 0 0 0 1px rgba(var(--ewha-rgb),.22); } .cs-page { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px 10px; background: var(--paper-white, #fff); color: var(--ink); border: 1px solid rgba(var(--ewha-rgb),.6); box-shadow: 6px 8px 18px -8px rgba(var(--ewha-rgb),.5); font-family: "Noto Serif KR", "ChosunilboMJ", "Batang", serif; } .cs-pband { flex: none; display: flex; justify-content: space-between; font-size: 7.5px; letter-spacing: .12em; color: var(--ink-soft); border-bottom: 1px solid var(--ewha); padding-bottom: 5px; text-transform: uppercase; } .cs-pband b { color: var(--ewha); } .cs-court { flex: none; text-align: center; font-size: 8px; letter-spacing: .2em; color: var(--ink-soft); margin-top: 12px; } .cs-ptitle { flex: none; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: .5em; text-indent: .5em; margin-top: 2px; } .cs-kv { flex: none; margin-top: 8px; font-size: 8px; line-height: 1.6; display: grid; grid-template-columns: 42px 1fr; column-gap: 4px; } .cs-kv b { font-weight: 700; letter-spacing: .1em; } .cs-sec { flex: none; margin-top: 7px; font-size: 8px; line-height: 1.55; } .cs-sec b { display: block; text-align: center; font-size: 8.5px; letter-spacing: .3em; text-indent: .3em; margin-bottom: 2px; } .cs-lines { flex: 1; min-height: 0; margin-top: 6px; opacity: .5; background: repeating-linear-gradient(180deg, rgba(var(--ewha-rgb),.4) 0 1px, transparent 1px 5.5px); } .cs-seal { position: absolute; right: 18px; bottom: 26px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ewha); color: var(--ewha); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; letter-spacing: .1em; opacity: .75; transform: rotate(-12deg); box-shadow: inset 0 0 0 2px var(--paper-white, #fff), inset 0 0 0 3px var(--ewha); } .cs-pfoot { flex: none; display: flex; justify-content: space-between; margin-top: 8px; font-size: 7.5px; color: var(--ink-soft); letter-spacing: .1em; } /* 다크 — 셋 다 종이는 숯색, 잉크 상아, 금색 미세 강조 */ :root[data-theme="dark"] .rp-rack, :root[data-theme="dark"] .tm-drawer, :root[data-theme="dark"] .cs-arch { 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"] .rp-row, :root[data-theme="dark"] .tm-inner, :root[data-theme="dark"] .cs-row { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1) 22%, transparent 40%), #141413; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } :root[data-theme="dark"] .rp-label, :root[data-theme="dark"] .cs-label, :root[data-theme="dark"] .tm-front .tm-plate { color: #141410; background: var(--ink); } :root[data-theme="dark"] .tm-front { background: linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, #2a2926 1px 2px, #232220 2px); } :root[data-theme="dark"] .cs-tag, :root[data-theme="dark"] .rp-bcover, :root[data-theme="dark"] .tm-page, :root[data-theme="dark"] .cs-page { background: #23231f; border-color: rgba(232,227,216,.35); } :root[data-theme="dark"] .rp-bcover, :root[data-theme="dark"] .tm-page, :root[data-theme="dark"] .cs-page { background: #1c1c1a; box-shadow: 6px 8px 18px -8px rgba(0,0,0,.9); } :root[data-theme="dark"] .cs-env { background: #2a2824; border-color: rgba(232,227,216,.3); } :root[data-theme="dark"] .cs-tie .btn { fill: #3a3730; stroke: var(--gold); } :root[data-theme="dark"] .cs-tie .rivet, :root[data-theme="dark"] .cs-tie .cord-o { fill: var(--gold); stroke: var(--gold); } :root[data-theme="dark"] .cs-tie .cord-o { fill: none; } :root[data-theme="dark"] .cs-tie .cord-i { stroke: #1c1c1a; } :root[data-theme="dark"] .rp-cover { background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 30%), #cfc9bc; } :root[data-theme="dark"] .rp-lid, :root[data-theme="dark"] .rp-board { background: linear-gradient(160deg, rgba(255,255,255,.12), transparent 40%), #cfc9bc; } :root[data-theme="dark"] .rp-notch { background: linear-gradient(180deg, #202020, #2a2a27 40%); } :root[data-theme="dark"] .rp-cover.ahead, :root[data-theme="dark"] .rp-cover.ahead .rp-lid { background-color: #8f8b83; } :root[data-theme="dark"] .rp-bcover { background: #1c1c1a; color: var(--ink); } :root[data-theme="dark"] .rp-cover, :root[data-theme="dark"] .rp-cover .rp-t, :root[data-theme="dark"] .rp-foot b { color: #141410; } :root[data-theme="dark"] .rp-org, :root[data-theme="dark"] .rp-sub, :root[data-theme="dark"] .rp-foot { color: rgba(20,20,16,.65); } :root[data-theme="dark"] .rp-rule { border-color: rgba(20,20,16,.5); } :root[data-theme="dark"] .rp-cover.done .rp-stamp { color: #141410; border-color: rgba(20,20,16,.7); } :root[data-theme="dark"] .rp-clip, :root[data-theme="dark"] .rp-bclip { background: linear-gradient(180deg, #d9d9d6, #8e908c 45%, #c4c5c1 55%, #6f716d); } :root[data-theme="dark"] .tm-folder { --mn: #262624; --mn-d: rgba(232,227,216,.35); } :root[data-theme="dark"] .tm-tab { background: var(--mn); color: var(--ink); } :root[data-theme="dark"] .tm-face { background: linear-gradient(180deg, #2f2f2c, var(--mn) 18px, #1f1f1d); color: rgba(232,227,216,.7); } :root[data-theme="dark"] .tm-face::before, :root[data-theme="dark"] .tm-face::after { background: var(--mn); border-color: rgba(232,227,216,.5); } :root[data-theme="dark"] .cs-tag { box-shadow: inset 0 0 0 1px #23231f, inset 0 0 0 2px rgba(232,227,216,.3); } :root[data-theme="dark"] .cs-e { color: var(--gold); } :root[data-theme="dark"] .cs-sheets { background: 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"] .rp-cover.current, :root[data-theme="dark"] .cs-env.current, :root[data-theme="dark"] .tm-folder.current .tm-tab { border-color: var(--gold); } :root[data-theme="dark"] .tm-folder.current .tm-tab { box-shadow: inset 0 -2px 0 var(--gold); } :root[data-theme="dark"] .rp-cover.current::before { background: var(--gold); } :root[data-theme="dark"] .rp-frac, :root[data-theme="dark"] .tm-frac, :root[data-theme="dark"] .cs-frac, :root[data-theme="dark"] .rp-stamp, :root[data-theme="dark"] .cs-stamp, :root[data-theme="dark"] .cs-seal, :root[data-theme="dark"] .rp-bsum b, :root[data-theme="dark"] .tm-pband b, :root[data-theme="dark"] .cs-pband b, :root[data-theme="dark"] .tm-folder.done .tm-tab::after { color: var(--gold); border-color: var(--gold); } :root[data-theme="dark"] .cs-seal { box-shadow: inset 0 0 0 2px #1c1c1a, inset 0 0 0 3px var(--gold); } :root[data-theme="dark"] .rp-big::after, :root[data-theme="dark"] .tm-big::after, :root[data-theme="dark"] .cs-big::after { background: rgba(0,0,0,.8); } /* 다크 — 종이는 카드색, 잉크는 상아, 금색 미세 강조 */ :root[data-theme="dark"] .pp-tray { 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"] .pp-bin { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1) 22%, transparent 40%), #141413; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } :root[data-theme="dark"] .pp-bin::after { background: linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, #2a2926 1px 2px, #232220 2px); box-shadow: 0 -4px 8px -3px rgba(0,0,0,.6); } :root[data-theme="dark"] .pp-bin-label { color: #141410; background: var(--ink); } :root[data-theme="dark"] .pp-paper { background: #23231f; border-color: rgba(232,227,216,.35); box-shadow: 0 -2px 6px -2px rgba(0,0,0,.7); } :root[data-theme="dark"] .pp-paper::before { background: linear-gradient(180deg, transparent 20px, rgba(0,0,0,.25) 26px, rgba(0,0,0,.25)); } :root[data-theme="dark"] .pp-paper.current { border-color: var(--gold); } :root[data-theme="dark"] .pp-clip, :root[data-theme="dark"] .pp-clip::after { border-color: var(--gold); } :root[data-theme="dark"] .pp-frac, :root[data-theme="dark"] .pp-paper.done .pp-stamp { color: var(--gold); border-color: var(--gold); } :root[data-theme="dark"] .pp-sheets { background: linear-gradient(135deg, transparent calc(100% - 22px), rgba(0,0,0,.3) calc(100% - 22px)), 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"] .pp-page { background: #1c1c1a; border-color: var(--ink); box-shadow: 6px 8px 18px -8px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04); } :root[data-theme="dark"] .pp-pg-band { border-color: var(--gold); } :root[data-theme="dark"] .pp-pg-band b, :root[data-theme="dark"] .pp-pg-abs b, :root[data-theme="dark"] .pp-pg-kw b { color: var(--gold); } :root[data-theme="dark"] .pp-pg-grade { border-color: var(--gold); color: var(--gold); } :root[data-theme="dark"] .pp-doc::after { background: rgba(0,0,0,.8); } @media (prefers-color-scheme: dark) { /* 다크 — 셋 다 종이는 숯색, 잉크 상아, 금색 미세 강조 */ :root:not([data-theme="light"]) .rp-rack, :root:not([data-theme="light"]) .tm-drawer, :root:not([data-theme="light"]) .cs-arch { 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"]) .rp-row, :root:not([data-theme="light"]) .tm-inner, :root:not([data-theme="light"]) .cs-row { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1) 22%, transparent 40%), #141413; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } :root:not([data-theme="light"]) .rp-label, :root:not([data-theme="light"]) .cs-label, :root:not([data-theme="light"]) .tm-front .tm-plate { color: #141410; background: var(--ink); } :root:not([data-theme="light"]) .tm-front { background: linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, #2a2926 1px 2px, #232220 2px); } :root:not([data-theme="light"]) .cs-tag, :root:not([data-theme="light"]) .rp-bcover, :root:not([data-theme="light"]) .tm-page, :root:not([data-theme="light"]) .cs-page { background: #23231f; border-color: rgba(232,227,216,.35); } :root:not([data-theme="light"]) .rp-bcover, :root:not([data-theme="light"]) .tm-page, :root:not([data-theme="light"]) .cs-page { background: #1c1c1a; box-shadow: 6px 8px 18px -8px rgba(0,0,0,.9); } :root:not([data-theme="light"]) .cs-env { background: #2a2824; border-color: rgba(232,227,216,.3); } :root:not([data-theme="light"]) .cs-tie .btn { fill: #3a3730; stroke: var(--gold); } :root:not([data-theme="light"]) .cs-tie .rivet, :root:not([data-theme="light"]) .cs-tie .cord-o { fill: var(--gold); stroke: var(--gold); } :root:not([data-theme="light"]) .cs-tie .cord-o { fill: none; } :root:not([data-theme="light"]) .cs-tie .cord-i { stroke: #1c1c1a; } :root:not([data-theme="light"]) .rp-cover { background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 30%), #cfc9bc; } :root:not([data-theme="light"]) .rp-lid, :root:not([data-theme="light"]) .rp-board { background: linear-gradient(160deg, rgba(255,255,255,.12), transparent 40%), #cfc9bc; } :root:not([data-theme="light"]) .rp-notch { background: linear-gradient(180deg, #202020, #2a2a27 40%); } :root:not([data-theme="light"]) .rp-cover.ahead, :root:not([data-theme="light"]) .rp-cover.ahead .rp-lid { background-color: #8f8b83; } :root:not([data-theme="light"]) .rp-bcover { background: #1c1c1a; color: var(--ink); } :root:not([data-theme="light"]) .rp-cover, :root:not([data-theme="light"]) .rp-cover .rp-t, :root:not([data-theme="light"]) .rp-foot b { color: #141410; } :root:not([data-theme="light"]) .rp-org, :root:not([data-theme="light"]) .rp-sub, :root:not([data-theme="light"]) .rp-foot { color: rgba(20,20,16,.65); } :root:not([data-theme="light"]) .rp-rule { border-color: rgba(20,20,16,.5); } :root:not([data-theme="light"]) .rp-cover.done .rp-stamp { color: #141410; border-color: rgba(20,20,16,.7); } :root:not([data-theme="light"]) .rp-clip, :root:not([data-theme="light"]) .rp-bclip { background: linear-gradient(180deg, #d9d9d6, #8e908c 45%, #c4c5c1 55%, #6f716d); } :root:not([data-theme="light"]) .tm-folder { --mn: #262624; --mn-d: rgba(232,227,216,.35); } :root:not([data-theme="light"]) .tm-tab { background: var(--mn); color: var(--ink); } :root:not([data-theme="light"]) .tm-face { background: linear-gradient(180deg, #2f2f2c, var(--mn) 18px, #1f1f1d); color: rgba(232,227,216,.7); } :root:not([data-theme="light"]) .tm-face::before, :root:not([data-theme="light"]) .tm-face::after { background: var(--mn); border-color: rgba(232,227,216,.5); } :root:not([data-theme="light"]) .cs-tag { box-shadow: inset 0 0 0 1px #23231f, inset 0 0 0 2px rgba(232,227,216,.3); } :root:not([data-theme="light"]) .cs-e { color: var(--gold); } :root:not([data-theme="light"]) .cs-sheets { background: 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"]) .rp-cover.current, :root:not([data-theme="light"]) .cs-env.current, :root:not([data-theme="light"]) .tm-folder.current .tm-tab { border-color: var(--gold); } :root:not([data-theme="light"]) .tm-folder.current .tm-tab { box-shadow: inset 0 -2px 0 var(--gold); } :root:not([data-theme="light"]) .rp-cover.current::before { background: var(--gold); } :root:not([data-theme="light"]) .rp-frac, :root:not([data-theme="light"]) .tm-frac, :root:not([data-theme="light"]) .cs-frac, :root:not([data-theme="light"]) .rp-stamp, :root:not([data-theme="light"]) .cs-stamp, :root:not([data-theme="light"]) .cs-seal, :root:not([data-theme="light"]) .rp-bsum b, :root:not([data-theme="light"]) .tm-pband b, :root:not([data-theme="light"]) .cs-pband b, :root:not([data-theme="light"]) .tm-folder.done .tm-tab::after { color: var(--gold); border-color: var(--gold); } :root:not([data-theme="light"]) .cs-seal { box-shadow: inset 0 0 0 2px #1c1c1a, inset 0 0 0 3px var(--gold); } :root:not([data-theme="light"]) .rp-big::after, :root:not([data-theme="light"]) .tm-big::after, :root:not([data-theme="light"]) .cs-big::after { background: rgba(0,0,0,.8); } /* 다크 — 종이는 카드색, 잉크는 상아, 금색 미세 강조 */ :root:not([data-theme="light"]) .pp-tray { 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"]) .pp-bin { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1) 22%, transparent 40%), #141413; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } :root:not([data-theme="light"]) .pp-bin::after { background: linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, #2a2926 1px 2px, #232220 2px); box-shadow: 0 -4px 8px -3px rgba(0,0,0,.6); } :root:not([data-theme="light"]) .pp-bin-label { color: #141410; background: var(--ink); } :root:not([data-theme="light"]) .pp-paper { background: #23231f; border-color: rgba(232,227,216,.35); box-shadow: 0 -2px 6px -2px rgba(0,0,0,.7); } :root:not([data-theme="light"]) .pp-paper::before { background: linear-gradient(180deg, transparent 20px, rgba(0,0,0,.25) 26px, rgba(0,0,0,.25)); } :root:not([data-theme="light"]) .pp-paper.current { border-color: var(--gold); } :root:not([data-theme="light"]) .pp-clip, :root:not([data-theme="light"]) .pp-clip::after { border-color: var(--gold); } :root:not([data-theme="light"]) .pp-frac, :root:not([data-theme="light"]) .pp-paper.done .pp-stamp { color: var(--gold); border-color: var(--gold); } :root:not([data-theme="light"]) .pp-sheets { background: linear-gradient(135deg, transparent calc(100% - 22px), rgba(0,0,0,.3) calc(100% - 22px)), 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"]) .pp-page { background: #1c1c1a; border-color: var(--ink); box-shadow: 6px 8px 18px -8px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04); } :root:not([data-theme="light"]) .pp-pg-band { border-color: var(--gold); } :root:not([data-theme="light"]) .pp-pg-band b, :root:not([data-theme="light"]) .pp-pg-abs b, :root:not([data-theme="light"]) .pp-pg-kw b { color: var(--gold); } :root:not([data-theme="light"]) .pp-pg-grade { border-color: var(--gold); color: var(--gold); } :root:not([data-theme="light"]) .pp-doc::after { background: rgba(0,0,0,.8); } } /* 폰·태블릿: 심화 카드 그래픽은 640px 기둥에 맞춰 그렸으니 좁은 화면에서는 무대를 통째로 줄인다(zoom + 폭 보정 = 시각 폭 100%) */ @media (max-width: 900px) { .track-card[data-ptrack] .tk-cols { grid-template-columns: 1fr; } } @media (max-width: 640px) { .track-card[data-ptrack] .pp-stage { zoom: .56; } } /* zoom 한 블록은 제 좌표계에서 부모 폭을 채우므로 폭 보정을 주면 넘친다 */ @media (min-width: 641px) and (max-width: 900px) { .track-card[data-ptrack] .pp-stage { zoom: .9; } } /* ══ 홈 2층 — 과정 조각상 다섯 (2026-09-08, 목업 mock_gallery.html 에서 옮김) ══ 옛 그림 타일 바(.gbar)를 대신한다. 그림은 tools/make_statue_figs.py 가 만들고 figures.js 가 세로비·발중심을 준다. 고른 과정 자리는 화면이 뒤집힌다(라이트는 어둡게, 다크는 밝게) — 레퍼런스의 대비를 그 칸 안에서 낸다. */ /* 배경은 없다 — 조각상과 계단 받침만 종이 위에 선다 (09-08 사용자) */ .gl-row { --stone: var(--ewha-rgb); margin: 0 0 26px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; } /* 타일 사이는 기존 gbar 와 같은 간격 */ .gl-stat { display: block; width: 100%; text-align: center; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; color: var(--ink); text-decoration: none; } /* 조각상 */ .gl-fig { display: block; position: relative; height: 440px; margin-bottom: -44px; } /* 크게 세우고 발치는 타일에 가려 잘린다 — 다 보이면 작아 보인다 */ .gl-stat .gtile { position: relative; z-index: 4; } .gl-fig { overflow: visible; } .gl-fig img { position: absolute; z-index: 2; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; display: block; transform: translateX(calc(var(--fx, .5) * -100%)); } /* 키를 맞추고, 발 중심(--fx)이 칸 한가운데 오게 민다 */ .gl-fig img.dark { display: none; } .gl-fig img.sil { display: block; } .gl-shadow { position: absolute; z-index: 3; left: 26%; right: 26%; bottom: -2px; height: 8px; border-radius: 50%; background: rgba(var(--stone),.36); filter: blur(5px); transition: opacity .55s ease; } /* 조각상은 기존 과정 타일 박스 위에 선다 — 연단 대신 (09-08 사용자) */ .gl-stat .gtile { display: block; margin-top: -1px; } .gl-stat .gtile .gt-img { display: none; } /* 타일 그림은 뺀다 — 이름만(09-08 사용자) */ .gl-stat .gtile .gt-name { justify-content: center; text-align: center; } /* 빛살 — 인물 가운데에서 곧은 선이 뻗는다. **지금 하는 과정에만** 뜬다(호버에는 안 뜬다, 09-08 사용자). 테두리를 세로로 긴 타원으로 잘라 가로선은 짧고 세로선은 길다 — 옆 조각상을 침범하지 않고 조형도 선다. */ .gl-rays { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background-color: rgba(var(--gold-rgb, 184,150,79),.9); /* 금색 살 */ /* 살 하나하나가 안쪽이 굵고 밖으로 갈수록 가늘어지는 삼각형이다(원뿔 그라데이션으로는 반대가 된다). 모양은 자바스크립트가 만든 SVG 를 mask 로 씌우고, 색은 여기 background 가 정한다. 상자를 세로로 길게 잡아 늘이니 가로살은 짧다. */ -webkit-mask: var(--rays) center / 100% 100% no-repeat; mask: var(--rays) center / 100% 100% no-repeat; } .gl-stat.cur .gl-rays { opacity: 1; } /* 금색 고양이 — 고른 칸에서만 고양이가 금색으로 바뀐다(09-08 사용자). 조각상 그림 위에 같은 자리로 겹친다. 점묘 알파가 라이트·다크가 서로 달라 두 장을 쓴다 — 고른 칸은 화면이 뒤집히니 짝도 뒤집힌다. */ .gl-fig img.cat { z-index: 3; display: none; } .gl-stat.cur .gl-fig img.catD { display: block; } :root[data-theme="dark"] .gl-stat.cur .gl-fig img.catD { display: none; } :root[data-theme="dark"] .gl-stat.cur .gl-fig img.catL { display: block; } /* 금색 윤곽 — 몸 모양을 그대로 따라간다. 고른 조각상에만 */ .gl-fig img.edge { z-index: 3; display: none; } .gl-stat.cur .gl-fig img.edge { display: block; } /* 고른 조각상 자리는 **화면을 뒤집는다** — 라이트에서는 그 상자만 어둡게, 다크에서는 그 상자만 밝게 (09-08 사용자). 상자에 금색 실테두리도 두른다. 조각상·실루엣 판을 반대쪽 그림으로 바꾸고, 빛살 색 기준(--stone)도 뒤집는다. */ .gl-stat.cur .gl-fig { --stone: 232,227,216; background: #0f0f0e; box-shadow: inset 0 0 0 1px var(--gold, #b8964f); } .gl-stat.cur .gl-fig img.light:not(.sil):not(.edge) { display: none; } .gl-stat.cur .gl-fig img.dark { display: block; } .gl-stat.cur .gl-fig img.silL { display: none; } .gl-stat.cur .gl-fig img.silD { display: block; } :root[data-theme="dark"] .gl-stat.cur .gl-fig { --stone: var(--ewha-rgb); background: #f3eee1; } :root[data-theme="dark"] .gl-stat.cur .gl-fig img.light:not(.sil):not(.edge) { display: block; } :root[data-theme="dark"] .gl-stat.cur .gl-fig img.dark { display: none; } :root[data-theme="dark"] .gl-stat.cur .gl-fig img.silL { display: block; } :root[data-theme="dark"] .gl-stat.cur .gl-fig img.silD { display: none; } /* 디더 후광 — 살 사이를 점으로 메운다. 가운데가 짙고 밖으로 갈수록 옅어진다. 살보다 뒤(같은 0층, DOM 순서로 앞) */ .gl-halo { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 62% 46% at var(--hx, 50%) var(--hy, 42%), rgba(var(--stone),.42), rgba(var(--stone),.16) 55%, transparent 92%); -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 42%); -webkit-mask-size: 3px 3px; mask-image: radial-gradient(circle, #000 40%, transparent 42%); mask-size: 3px 3px; } .gl-stat.cur .gl-halo { opacity: 1; } /* 실루엣 판 — 몸 모양대로 바탕색을 칠한 그림. 빛살(0)과 조각상(2) 사이(1)에 깔아, 점묘의 빈틈으로 빛살이 비치는 것을 막는다. CSS mask 로 하면 안 먹는다(09-08 실측) — 그냥 그림 두 장(라이트·다크)을 쓴다. */ .gl-fig img.sil { z-index: 1; } .gl-fig img.silD { display: none; } :root[data-theme="dark"] .gl-fig img.silL { display: none; } :root[data-theme="dark"] .gl-fig img.silD { display: block; } /* 호버 — 조각상도 빛살도 그대로. 타일 테두리만 진해진다 */ .gl-stat:hover .gtile { border-color: var(--ewha); } /* 눌러 들어가면 지금 쓰는 홈 화면 */ /* 다크 — 돌은 상아, 안쪽은 어둠 */ :root[data-theme="dark"] .gl-fig img.light:not(.sil):not(.edge) { display: none; } :root[data-theme="dark"] .gl-fig img.dark { display: block; } :root[data-theme="dark"] .gl-row { --stone: 232,227,216; } :root[data-theme="dark"] .gl-shadow { background: rgba(0,0,0,.85); } /* 작아질 때는 겹치는 깊이도 같이 줄인다 — 붙박이 44px 이면 폰에서 발치의 고양이가 통째로 가린다(09-08) */ @media (max-width: 1000px) { .gl-row { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } .gl-fig { height: 320px; margin-bottom: -32px; } } @media (max-width: 640px) { .gl-row { grid-template-columns: 1fr 1fr; row-gap: 18px; } .gl-fig { height: 216px; margin-bottom: -22px; } .gl-name { font-size: 12px; } } /* 같은 규칙 한 벌 더 — 테마를 고른 적이 없으면 data-theme 이 안 붙고 기기 설정만 남는다(2026-09-08). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gl-stat.cur .gl-fig img.catD { display: none; } :root:not([data-theme="light"]) .gl-stat.cur .gl-fig img.catL { display: block; } :root:not([data-theme="light"]) .gl-stat.cur .gl-fig { --stone: var(--ewha-rgb); background: #f3eee1; } :root:not([data-theme="light"]) .gl-stat.cur .gl-fig img.light:not(.sil):not(.edge) { display: block; } :root:not([data-theme="light"]) .gl-stat.cur .gl-fig img.dark { display: none; } :root:not([data-theme="light"]) .gl-stat.cur .gl-fig img.silL { display: block; } :root:not([data-theme="light"]) .gl-stat.cur .gl-fig img.silD { display: none; } :root:not([data-theme="light"]) .gl-fig img.silL { display: none; } :root:not([data-theme="light"]) .gl-fig img.silD { display: block; } :root:not([data-theme="light"]) .gl-fig img.light:not(.sil):not(.edge) { display: none; } :root:not([data-theme="light"]) .gl-fig img.dark { display: block; } :root:not([data-theme="light"]) .gl-row { --stone: 232,227,216; } :root:not([data-theme="light"]) .gl-shadow { background: rgba(0,0,0,.85); } }