@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}

/* Paperozi — used for the "Lucida" brand wordmark only */
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
  font-weight: 100; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
  font-weight: 200; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-weight: 900; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root{
  --ink:        #1C2227;   /* 쿨 블루블랙 - 본문/헤드라인 */
  --ink-soft:   #4C5860;   /* 보조 텍스트, 쿨 슬레이트 그레이 */
  --ink-faint:  #7E8B94;   /* 캡션, 메타 정보 */
  --paper:      #EEF1F4;   /* 배경 - 쿨 그레이 화이트 */
  --paper-rgb:  238,241,244; /* 헤더 블러 배경 등 rgba()가 필요한 곳용 */
  --paper-2:    #E1E7EB;   /* 은은한 섹션 구분 배경 */
  --card:       #F7F9FB;   /* 카드 배경 */
  --line:       #D2DAE0;   /* 헤어라인 */
  --line-soft:  #E4E9ED;
  --moss:       #2F6F77;   /* 메인 틸/페트롤 (다크룸·필름 캐니스터 톤) */
  --moss-dark:  #1F4C52;
  --moss-tint:  #D8E7E8;   /* 틸 배경 틴트 */
  --moss-tint-onDark: #D8E7E8; /* 항상 어두운 표면(히어로/realq-card 등) 위 텍스트용 — 테마와 무관하게 항상 밝은 값 유지 */
  --moss-dark-fixed: #1F4C52; /* flip-card-back처럼 항상 어두운 틸 배경이 필요한 곳 — 테마와 무관하게 항상 어두운 값 유지 */
  --clay:       #55598F;   /* 인디고/스틸블루 포인트 */
  --clay-tint:  #E3E3F1;
  --rust:       #B24B5D;   /* 오답/경고 */
  --rust-tint:  #F3DCE0;
  --dark:       #12171B;   /* 다크 섹션 배경 */
  --dark-2:     #1B2227;
  --on-dark:    #E7ECEE;

  --font-ui:  'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Paperozi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-brand: 'Paperozi', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-card: 0 1px 2px rgba(18,23,27,.06), 0 8px 24px -12px rgba(18,23,27,.18);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:        #E7ECEE;
    --ink-soft:   #A9B4BC;
    --ink-faint:  #78838C;
    --paper:      #12171B;
    --paper-rgb:  18,23,27;
    --paper-2:    #1B2227;
    --card:       #1E262C;
    --line:       #2C3740;
    --line-soft:  #232C33;
    --moss:       #32747C;
    --moss-dark:  #7FC7CE;
    --moss-tint:  #1A3236;
    --clay:       #60649D;
    --clay-tint:  #24273D;
    --rust:       #B24B5D;
    --rust-tint:  #3A2328;
    --dark:       #0A0D0F;
    --dark-2:     #12171B;
    --on-dark:    #E7ECEE;
    --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ink:        #E7ECEE;
  --ink-soft:   #A9B4BC;
  --ink-faint:  #78838C;
  --paper:      #12171B;
  --paper-rgb:  18,23,27;
  --paper-2:    #1B2227;
  --card:       #1E262C;
  --line:       #2C3740;
  --line-soft:  #232C33;
  --moss:       #32747C;
  --moss-dark:  #7FC7CE;
  --moss-tint:  #1A3236;
  --clay:       #60649D;
  --clay-tint:  #24273D;
  --rust:       #B24B5D;
  --rust-tint:  #3A2328;
  --dark:       #0A0D0F;
  --dark-2:     #12171B;
  --on-dark:    #E7ECEE;
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--moss); color:var(--on-dark); }

h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:700; color:var(--ink); margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1em; }

.mono{ font-family:var(--font-mono); }

/* ---------- Layout shell ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--paper-rgb),.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-brand); font-weight:800; font-size:21px; letter-spacing:-.01em; white-space:nowrap; }
.brand-mark{ width:30px; height:30px; flex:none; }
.nav{ display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.nav a{
  padding:8px 12px; border-radius:999px; font-size:14.5px; font-weight:500; color:var(--ink-soft);
  transition:background .15s, color .15s;
}
.nav a:hover{ background:var(--paper-2); color:var(--ink); }
.nav a.active{ background:var(--moss); color:var(--on-dark); }
.nav-sep{ width:1px; align-self:center; height:16px; background:var(--line); margin:0 4px; flex:none; }
.nav-exam{ background:var(--clay) !important; color:var(--on-dark) !important; }
.nav-exam:hover{ background:var(--clay) !important; opacity:.9; }

.hamburger{ display:none; }
.theme-toggle{ background:none; border:1px solid var(--line); border-radius:999px; width:34px; height:34px; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.theme-toggle:hover{ border-color:var(--moss); background:var(--paper-2); }

.global-search-bar{ border-top:1px solid var(--line); }
.global-search-bar .wrap{ padding:10px 24px; }
.global-search{ position:relative; max-width:520px; margin:0 auto; }
.global-search-input{
  width:100%; padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); font-family:var(--font-ui); font-size:13.5px; color:var(--ink);
}
.global-search-input:focus{ outline:none; border-color:var(--moss); }
.global-search-results{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-card); max-height:70vh; overflow-y:auto; padding:8px 0; text-align:left;
}
.global-search-results.open{ display:block; }
.gs-group{ padding:6px 0; }
.gs-group + .gs-group{ border-top:1px solid var(--line); }
.gs-group-label{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--clay); padding:4px 16px;
}
.gs-item{ display:flex; flex-direction:column; gap:2px; padding:8px 16px; }
.gs-item:hover{ background:var(--paper-2); }
.gs-item-title{ font-size:13.5px; color:var(--ink); font-weight:600; }
.gs-item-sub{ font-size:11.5px; color:var(--ink-faint); }
.gs-item-related{ font-size:11px; color:var(--moss-dark); font-weight:600; }
.gs-more{ padding:6px 16px; font-size:11.5px; }
.gs-more a{ color:var(--ink-faint); text-decoration:none; }
.gs-more a:hover{ color:var(--moss-dark); text-decoration:underline; }
.gs-empty{ padding:16px; font-size:13px; color:var(--ink-faint); text-align:center; }
.gs-viewall{ border-top:1px solid var(--line); padding:8px 16px; text-align:center; }
.gs-viewall a{ font-size:12.5px; font-weight:600; color:var(--moss-dark); text-decoration:none; }
.gs-viewall a:hover{ text-decoration:underline; }

.search-page-bar{ display:flex; gap:10px; margin-bottom:20px; }
.search-page-input{ flex:1; max-width:420px; }
.search-group{ margin-bottom:22px; }
.search-group-header{
  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--clay); padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:4px;
}
.search-group-count{ color:var(--ink-faint); text-transform:none; letter-spacing:0; }
.search-item{ display:flex; flex-direction:column; gap:3px; padding:12px 4px; border-bottom:1px solid var(--line); }
.search-item:hover{ background:var(--paper-2); }
.search-item-title{ font-size:15px; color:var(--ink); font-weight:600; }
.search-item-sub{ font-size:12px; color:var(--ink-faint); }
.search-item-snippet{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.search-item-snippet mark{ background:var(--moss-tint); color:var(--ink); font-weight:600; border-radius:2px; }
.search-item-related{ font-size:11.5px; color:var(--moss-dark); font-weight:600; }
.search-more-btn{
  margin-top:8px; font-size:12.5px; color:var(--moss-dark); background:none; border:1px solid var(--line);
  border-radius:6px; padding:6px 14px; cursor:pointer;
}
.search-more-btn:hover{ background:var(--paper-2); }

main{ min-height:70vh; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

.site-footer{
  border-top:1px solid var(--line); margin-top:80px; padding:36px 24px 60px;
  color:var(--ink-faint); font-size:13px; text-align:center;
}

/* ---------- Small "L" mark (signature element) ---------- */
.aperture{ display:inline-block; }

/* ---------- Home ---------- */
.hero{
  background:
    radial-gradient(900px 480px at 14% -10%, rgba(216,231,232,.16), transparent 60%),
    radial-gradient(640px 520px at 90% 35%, rgba(85,89,143,.24), transparent 65%),
    var(--dark);
  color:var(--on-dark);
  padding:96px 24px 72px;
  position:relative; overflow:hidden;
}
.hero-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }

.hero-strips{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.strip-col{ position:absolute; top:-10%; height:120%; transform-origin:center; overflow:hidden; }
.strip-track{ display:flex; flex-direction:column; animation:strip-flow linear infinite; }
.strip-track svg{ display:block; width:100%; height:auto; flex:none; }
@keyframes strip-flow{
  from{ transform:translateY(0); }
  to{ transform:translateY(calc(-1 * var(--flow-distance, 800px))); }
}
@media (prefers-reduced-motion: reduce){ .strip-track{ animation:none; } }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--moss-tint-onDark); background:transparent; border:1px solid rgba(231,236,238,.16);
  padding:6px 12px; border-radius:999px; margin-bottom:26px;
}
.hero h1{
  font-family:var(--font-brand); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(38px,5.4vw,64px); color:var(--on-dark); line-height:1.12; margin-bottom:22px;
}
.hero h1 em{ font-style:normal; color:var(--moss-tint-onDark); }
.hero p.lead{ font-size:17px; color:#C7D2D6; max-width:44ch; margin-bottom:32px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; border-radius:999px; font-weight:600; font-size:14.5px;
  border:1px solid transparent; background:none; transition:transform .15s, opacity .15s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--clay); color:var(--on-dark); }
.btn-primary:hover{ opacity:.92; }
/* ⚠ .btn-ghost는 어두운 배경 전용이다 (히어로처럼 --dark 위). 색이 테마를 따르지
   않고 항상 밝은 --on-dark로 고정이라, 밝은 배경에 쓰면 라이트 테마에서 대비가
   1.05:1이 되어 사실상 보이지 않는다. 밝은 배경에서는 .btn-quiet를 쓸 것. */
.btn-ghost{ border-color:rgba(231,236,238,.35); color:var(--on-dark); }
.btn-ghost:hover{ background:rgba(231,236,238,.08); }
.btn-dark{ background:var(--dark); color:var(--on-dark); }
.btn-outline{ border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ background:var(--paper-2); }
/* 밝은 배경용 보조 버튼 — 주 버튼(.btn-outline)보다 한 단계 조용하되 읽히는 대비 유지.
   테두리를 투명하게 두면 다크모드 배경(거의 검정) 위에서 버튼 경계 자체가
   사라져 눌러도 되는 영역인지 알 수 없다 — .btn-outline과 같은 --line 테두리를
   유지하고, 위계는 글자색(ink-soft vs ink)만으로 준다. */
.btn-quiet{ border-color:var(--line); color:var(--ink-soft); }
.btn-quiet:hover{ background:var(--paper-2); color:var(--ink); }

.hero-visual{ position:relative; aspect-ratio:1/1; }
.hero-visual::before{
  content:''; position:absolute; inset:-18%; z-index:-1;
  background:radial-gradient(circle, rgba(85,89,143,.28), transparent 68%);
  filter:blur(36px);
}

.aperture-blades{ transform-origin:0 0; animation:shutter-click 5s ease-in-out infinite; }
.shutter-flash{ opacity:0; pointer-events:none; animation:shutter-flash 5s ease-in-out infinite; }
.shutter-btn{ transform-origin:271px 148px; animation:shutter-press 5s ease-in-out infinite; }
@keyframes shutter-click{
  0%, 88% { transform:scale(1); }
  94% { transform:scale(.24); }
  100% { transform:scale(1); }
}
@keyframes shutter-flash{
  0%, 87% { opacity:0; }
  94% { opacity:.5; }
  100% { opacity:0; }
}
@keyframes shutter-press{
  0%, 86% { transform:translateY(0); }
  90% { transform:translateY(2px); }
  96%, 100% { transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .aperture-blades, .shutter-flash, .shutter-btn{ animation:none; }
}

.schedule-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.schedule-widget{
  display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:start; padding:26px 0;
}
.schedule-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-month-label{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--ink); }
.cal-nav{
  background:none; border:1px solid var(--line); border-radius:6px; width:22px; height:22px; padding:0;
  line-height:1; color:var(--ink-soft); font-size:14px; display:flex; align-items:center; justify-content:center;
}
.cal-nav:hover{ border-color:var(--clay); color:var(--clay); }
.schedule-cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
.schedule-cal-grid.dow{ margin-bottom:2px; }
.schedule-cal-grid.dow span{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); text-align:center; }
.schedule-cal-grid.dow span:first-child{ color:var(--rust); }
.cal-cell{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; color:var(--ink-soft); border-radius:6px; position:relative;
}
.cal-cell:nth-child(7n+1){ color:var(--rust); }
.cal-cell.today{ background:var(--moss); color:#fff; font-weight:700; }
.cal-cell.holiday{ color:var(--rust); font-weight:700; }
.cal-cell.today.holiday{ color:#fff; box-shadow:inset 0 0 0 2px var(--rust); }
.cal-cell.has-event::after{
  content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--clay);
}
.cal-cell.today.has-event::after{ background:#fff; }

.schedule-list-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.schedule-list .kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--clay); display:block; margin-bottom:6px; }
.schedule-list h3{ margin:0; font-size:17px; }
.schedule-list-nav{ display:flex; align-items:center; gap:8px; flex:none; }
.schedule-page-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); white-space:nowrap; }
.cal-nav:disabled{ opacity:.35; cursor:default; }
.cal-nav:disabled:hover{ border-color:var(--line); color:var(--ink-soft); }
.schedule-empty{ font-size:13px; color:var(--ink-faint); }
.schedule-items{ display:flex; flex-direction:column; gap:10px; }
.schedule-item{ display:flex; align-items:center; gap:14px; }
.schedule-item .dday{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--clay);
  background:var(--clay-tint); border-radius:999px; padding:4px 10px; white-space:nowrap; flex:none;
}
.schedule-item-title{ font-size:14px; color:var(--ink); font-weight:500; }
.schedule-item-date{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

.section{ padding:64px 24px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.section-head .kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--clay); display:block; margin-bottom:8px; }
.section-head h2{ font-size:28px; margin:0; }
.section-head .desc{ color:var(--ink-soft); font-size:14.5px; max-width:60ch; }

.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.nav-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:26px 22px; display:flex; flex-direction:column; gap:14px; min-height:210px;
  box-shadow:var(--shadow-card); transition:transform .18s, border-color .18s;
}
.nav-card:hover{ transform:translateY(-3px); border-color:var(--moss); }
.nav-card .n{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); }
.nav-card h3{ font-size:19px; margin:0; }
.nav-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; flex:1; }
.nav-card .go{ font-size:13px; font-weight:600; color:var(--moss-dark); display:inline-flex; align-items:center; gap:6px; }
.nav-card.accent{ background:var(--moss); color:var(--on-dark); border-color:var(--moss); }
.nav-card.accent h3, .nav-card.accent p{ color:var(--on-dark); }
.nav-card.accent .n{ color:rgba(231,236,238,.7); }
.nav-card.accent .go{ color:var(--on-dark); }

.exam-band{
  background:var(--dark); color:var(--on-dark); border-radius:var(--radius-l);
  padding:40px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center;
}
.exam-band h3{ color:var(--on-dark); font-size:24px; margin-bottom:8px; }
.exam-band p{ color:#C7D2D6; margin:0; font-size:14px; max-width:60ch; }

.study-path{ list-style:none; margin:0 0 14px; padding:0; display:flex; align-items:stretch; gap:6px; }
.study-path-step{ flex:1 1 150px; min-width:0; }
.study-path-step a{
  display:flex; flex-direction:column; gap:6px; height:100%; padding:18px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-l);
  text-decoration:none; transition:transform .18s, border-color .18s;
}
.study-path-step a:hover{ transform:translateY(-3px); border-color:var(--moss); }
.study-path-step.accent a{ background:var(--moss); border-color:var(--moss); }
.study-path-step.accent .study-path-title,
.study-path-step.accent .study-path-why,
.study-path-step.accent .study-path-num{ color:var(--on-dark); }
.study-path-num{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--moss-dark); }
.study-path-title{ font-size:15.5px; font-weight:700; color:var(--ink); }
.study-path-why{ font-size:12px; color:var(--ink-soft); line-height:1.4; }
.study-path-arrow{ display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:16px; flex:none; }
.study-path-note{ font-size:12.5px; color:var(--ink-faint); margin:0; }

/* ---------- Two column app layout (mechanism / oral) ---------- */
.app-layout{ display:grid; grid-template-columns:280px 1fr; gap:0; align-items:flex-start; }
.side{
  position:sticky; top:73px; max-height:calc(100vh - 90px); overflow-y:auto;
  border-right:1px solid var(--line); padding:26px 18px 40px 0;
}
.side-search{
  width:100%; padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); font-family:var(--font-ui); font-size:13.5px; margin-bottom:16px; color:var(--ink);
}
.side-part{ margin-bottom:6px; }
.side-part > button{
  width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:8px;
  font-family:var(--font-serif); font-weight:700; font-size:14.5px; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center;
}
.side-part > button:hover{ background:var(--paper-2); }
.side-part .count{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); font-weight:400; }
.side-topics{ display:none; padding-left:8px; }
.side-part.open .side-topics{ display:block; }
.side-part.open > button .chev{ transform:rotate(90deg); }
.side-topics a{
  display:block; padding:7px 12px; font-size:13.5px; color:var(--ink-soft); border-radius:8px;
  border-left:2px solid transparent;
}
.side-topics a:hover{ color:var(--ink); background:var(--paper-2); }
.side-topics a.active{ color:var(--moss-dark); border-left-color:var(--moss); font-weight:600; background:var(--moss-tint); }
.side-group{ margin-bottom:2px; }
.side-group-btn{
  width:100%; text-align:left; background:none; border:none; padding:7px 10px 7px 6px; border-radius:6px;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--ink-soft);
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.side-group-btn:hover{ background:var(--paper-2); color:var(--ink); }
.side-group-btn .count{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); font-weight:400; display:flex; align-items:center; gap:2px; }
.side-group-btn .chev{ transition:transform .15s; font-size:11px; }
.side-group.open > .side-group-btn .chev{ transform:rotate(90deg); }
.side-group-topics{ display:none; padding-left:6px; }
.side-group.open > .side-group-topics{ display:block; }

.content-pane{ padding:32px 32px 90px 40px; max-width:820px; }
.crumb{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }
.topic-title{ font-size:26px; margin-bottom:18px; }
.topic-body p{ font-size:15.5px; color:var(--ink); }
.topic-body strong{ color:var(--moss-dark); }
.topic-body ul, .topic-body ol{ padding-left:22px; margin:0 0 1em; }
.topic-body li{ margin-bottom:5px; font-size:15px; }
.topic-body table{ width:100%; border-collapse:collapse; margin:14px 0 20px; font-size:13.5px; }
.topic-body th, .topic-body td{ border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.topic-body th{ background:var(--paper-2); font-weight:600; }
.topic-imgs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:18px 0 24px; }
.topic-imgs img{ width:100%; border-radius:var(--radius-s); border:1px solid var(--line); }
.topic-img-fig{ margin:0; }
.img-credit{ margin-top:4px; font-size:11.5px; color:var(--ink-soft); text-align:right; }

/* ---------- Interactive diagrams (replace illegible hand-drawn source images) ---------- */
.interactive-diagram{ margin:18px 0 24px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); }
.interactive-diagram svg{ width:100%; height:auto; max-width:640px; display:block; margin:0 auto; }
.interactive-diagram .check-box svg.aperture{ width:12px; height:12px; max-width:12px; display:inline; margin:0; }
.diagram-readout{ margin-top:12px; padding:10px 14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); font-size:13px; color:var(--ink-soft); text-align:center; min-height:20px; transition:color .15s; }
.diagram-readout.active{ color:var(--ink); font-weight:600; }

/* 역제곱 법칙 */
.isq-ray{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; }
.isq-source{ fill:var(--rust); }
.isq-source-label{ font-size:13px; fill:var(--on-dark); text-anchor:middle; font-family:var(--font-mono); font-weight:700; }
.isq-plane{ cursor:pointer; }
.isq-cell{ stroke:var(--ink); stroke-width:1.5; transition:filter .15s, stroke-width .15s; }
.isq-cell-1{ fill:var(--moss); opacity:.85; }
.isq-cell-2{ fill:var(--moss); opacity:.45; }
.isq-cell-3{ fill:var(--moss); opacity:.22; }
.isq-gridline{ stroke:var(--ink); stroke-width:1; opacity:.5; pointer-events:none; }
.isq-cell-label{ font-family:var(--font-mono); font-size:13px; font-weight:700; fill:var(--ink); pointer-events:none; }
.isq-axis-label{ font-family:var(--font-mono); font-size:13px; fill:var(--ink-soft); text-anchor:middle; }
.isq-plane:hover .isq-cell{ filter:brightness(1.2); stroke-width:2.5; }
.isq-plane:hover .isq-cell{ stroke:var(--clay); }

/* 감색성(분광 감도) */
.ss-axis{ stroke:var(--ink-soft); stroke-width:1.5; }
.ss-axis-arrow{ fill:var(--ink-soft); }
.ss-tick{ stroke:var(--ink-faint); stroke-width:1; }
.ss-tick-label{ font-family:var(--font-mono); font-size:11.5px; fill:var(--ink-faint); text-anchor:middle; }
.ss-band-region{ opacity:.16; }
.ss-band-label{ font-family:var(--font-mono); font-size:13px; font-weight:700; text-anchor:middle; }
.ss-row{ cursor:pointer; }
.ss-row-bar{ stroke:var(--ink); stroke-width:1; fill:var(--clay); opacity:.55; transition:opacity .15s, filter .15s; }
.ss-row:hover .ss-row-bar{ opacity:.85; filter:brightness(1.1); }
.ss-row-label{ font-family:var(--font-ui); font-size:13px; font-weight:600; fill:var(--ink); }
.ss-row-dot-ok{ fill:var(--moss); }
.ss-row-dot-no{ fill:var(--rust); }
.ss-row-dot-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-soft); }
.vl-color-label{ font-family:var(--font-ui); font-size:11.5px; font-weight:600; fill:var(--ink); text-anchor:middle; }

.vl-explain{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  margin-top:16px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden;
}
.vl-explain-cell{ background:var(--card); padding:16px 16px 18px; }
.vl-explain-cell h4{ margin:0 0 8px; font-size:13px; color:var(--ink-soft); font-weight:600; }
.vl-explain-cell p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink); }
.vl-explain-cell .vl-range{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-top:8px; display:block; }

.vl-unit-box{ display:flex; gap:16px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.vl-unit-label{ flex:none; font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--ink-faint); padding-top:2px; }
.vl-unit-body p{ margin:0 0 10px; font-size:13.5px; line-height:1.65; color:var(--ink-soft); }
.vl-unit-body p:last-child{ margin-bottom:0; }
.vl-unit-body strong{ color:var(--ink); font-weight:600; }
.vl-unit-scale{
  display:flex; align-items:center; gap:10px; width:fit-content; margin:0 0 12px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:8px 12px;
}
.vl-unit-arrow{ color:var(--ink-faint); font-size:11px; }

.hg-axis{ stroke:var(--ink-soft); stroke-width:1.5; }
.hg-axis-label{ font-family:var(--font-mono); font-size:12px; fill:var(--ink-soft); }
.hg-tick-label{ font-family:var(--font-mono); font-size:11.5px; fill:var(--ink-faint); }
.hg-bars rect{ fill:var(--clay); opacity:.65; stroke:var(--ink); stroke-width:.5; }

.hl-layer{ stroke:var(--ink); stroke-width:1; }
.hl-emulsion{ fill:var(--clay); opacity:.55; }
.hl-base{ fill:var(--paper-2); }
.hl-antihalation{ fill:var(--ink); opacity:.75; }
.hl-layer-label{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink); font-weight:600; }
.hl-layer-label-on{ fill:var(--on-dark); }
.hl-ray{ fill:none; stroke:var(--rust); stroke-width:2; }
.hl-ray-arrow{ fill:var(--rust); }
.hl-halo{ fill:var(--rust); opacity:.18; }
.hl-caption{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink); }
.hl-caption-sub{ font-family:var(--font-ui); font-size:11.5px; fill:var(--ink-soft); }

.px-body{ fill:var(--ink); }
.px-body-label{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }
.px-lens{ stroke:var(--ink); stroke-width:1.5; }
.px-lens-finder{ fill:var(--clay); }
.px-lens-taking{ fill:var(--moss); }
.px-axis{ stroke-width:1.5; stroke-dasharray:4 3; }
.px-axis-finder{ stroke:var(--clay); }
.px-axis-taking{ stroke:var(--moss); }
.px-subject{ fill:var(--paper-2); fill-opacity:.6; stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:4 3; }
.px-subject-label{ font-family:var(--font-ui); font-size:12px; fill:var(--ink); }
.px-subject-icon circle, .px-subject-icon path{ fill:var(--rust); }
.px-subject-drop{ stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:2 3; opacity:.6; }
.px-rail{ stroke:var(--ink-faint); stroke-width:2; opacity:.5; }
.px-rail-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-soft); }
.px-frame{ fill:none; stroke-width:2; }
.px-frame-finder{ stroke:var(--clay); }
.px-frame-taking{ stroke:var(--moss); }
.px-frame-label{ font-family:var(--font-ui); font-size:12px; }
.px-frame-label-finder{ fill:var(--clay); }
.px-frame-label-taking{ fill:var(--moss); }
.px-caption{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }
.px-handle{ cursor:grab; touch-action:none; }
.px-handle:active{ cursor:grabbing; }

.cov-outer{ fill:var(--paper-2); stroke:var(--ink); stroke-width:2; stroke-dasharray:5 3; }
.cov-inner{ fill:rgba(47,111,119,.18); stroke:var(--moss); stroke-width:2.5; transition:width .15s, height .15s, x .15s, y .15s; }
.pv-svg{ margin-bottom:0; }

.pxl-cell{ fill:var(--clay); stroke:var(--paper); stroke-width:1; }
.pxl-smooth{ fill:var(--clay); }
.pxl-caption{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }

.vr-box{ fill:var(--paper-2); stroke:var(--line); stroke-width:1; }
.vr-box-approx{ stroke:var(--rust); stroke-dasharray:3 2; }
.vr-title{ font-family:var(--font-ui); font-size:13px; font-weight:600; fill:var(--ink); }
.vr-sub{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }
.vr-arrow{ stroke-width:1.5; }
.vr-arrow-label{ font-family:var(--font-ui); font-size:12px; font-weight:600; fill:var(--ink-soft); }
.vr-note{ font-family:var(--font-ui); font-size:10.5px; fill:var(--ink-faint); }

.sb-subject{ fill:var(--ink); }
.sb-label{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }
.sb-source{ fill:var(--rust); }
.sb-ray{ stroke:var(--rust); stroke-width:2; }
.sb-ray-soft{ stroke:var(--moss); stroke-width:2.5; opacity:.55; }
.sb-box{ fill:var(--ink); }
.sb-box-diffuser{ fill:var(--paper-2); opacity:.9; }
.sb-shadow-hard{ fill:var(--ink); opacity:.55; }
.sb-shadow-soft{ fill:var(--ink); opacity:.22; }

.of-bg{ fill:var(--dark); }
.of-trail{ fill:none; stroke:rgba(231,236,238,.3); stroke-width:1.5; stroke-dasharray:4 4; }
.of-subject{ fill:var(--on-dark); }
.of-burst circle{ fill:#F6E2A8; }
.of-burst line{ stroke:#F6E2A8; stroke-width:2; }
.of-shutter-line{ stroke:rgba(231,236,238,.4); stroke-width:1.5; }
.of-tick{ stroke:rgba(231,236,238,.6); stroke-width:1.5; }
.of-tick-label{ font-family:var(--font-mono); font-size:11px; fill:var(--on-dark); }
.of-caption{ font-family:var(--font-ui); font-size:12.5px; fill:var(--on-dark); }
.of-caption-sub{ font-family:var(--font-ui); font-size:11.5px; fill:rgba(231,236,238,.7); }

.ct-arc{ fill:none; stroke-width:14; stroke-linecap:round; }
.ct-tick{ stroke:var(--ink-soft); stroke-width:1.5; }
.ct-tick-label{ font-family:var(--font-mono); font-size:11px; fill:var(--ink-soft); }
.ct-needle{ stroke:var(--ink); stroke-width:3; stroke-linecap:round; }
.ct-hub{ fill:var(--ink); }
.ct-reading{ font-family:var(--font-mono); font-size:14px; font-weight:700; fill:var(--ink); }
.ct-caption{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }

/* 색온도 스케일 */
.cts-side-label{ font-family:var(--font-ui); font-size:12px; fill:var(--ink-soft); }
.cts-bar{ stroke:var(--line); stroke-width:1; }
.cts-marker-group{ cursor:pointer; }
.cts-tick{ stroke:var(--ink-faint); stroke-width:1; }
.cts-dot{ stroke:var(--ink); stroke-width:1.5; transition:r .15s; }
.cts-marker-group:hover .cts-dot{ r:9; }
.cts-dot.active{ r:9; stroke:var(--clay); stroke-width:2.5; }
.cts-label{ font-family:var(--font-ui); font-size:12px; font-weight:600; fill:var(--ink); text-anchor:middle; }
.cts-label-k{ font-family:var(--font-mono); font-size:10.5px; fill:var(--ink-faint); text-anchor:middle; }
.cts-swatch-caption{ font-family:var(--font-ui); font-size:12.5px; font-weight:700; fill:var(--ink); }
.cts-scene-frame{ fill:none; stroke:var(--line); stroke-width:1.5; }
.cts-overlay{ transition:fill .2s, opacity .2s; }

/* 화이트 밸런스 */
.wb-diagram .wb-caption-row{ display:flex; justify-content:center; gap:24px; margin:10px 0 4px; font-size:13px; color:var(--ink-soft); }
.wb-diagram .wb-caption-row b{ color:var(--ink); }
.wb-row-label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:12px 0 6px; }
.wb-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.wb-chip-row .chip{ cursor:pointer; }
.ctf-arrow{ font-size:22px; fill:var(--ink-faint); }

.et-diagram{ display:flex; flex-direction:column; gap:18px; }
.et-shared-wrap{ margin-bottom:4px; }
.interactive-diagram .et-shared-preview{ width:100%; max-width:460px; height:auto; border:1px solid var(--line); border-radius:var(--radius-s); margin:0 auto; display:block; }
.et-sky{ fill:var(--paper-2); }
.et-ground{ fill:var(--ink-faint); }
.et-sun{ fill:#F6E2A8; opacity:.8; }
.et-mountain-1{ fill:var(--moss); opacity:.4; }
.et-mountain-2{ fill:var(--clay); opacity:.35; }
.et-tree-trunk{ fill:var(--ink); opacity:.5; }
.et-tree-canopy{ fill:var(--moss); opacity:.55; }
.et-runner{ fill:none; stroke:var(--ink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.et-runner circle{ fill:var(--ink); stroke:none; }
.et-fg-subject{ fill:var(--ink); }
.et-flower-petal{ fill:var(--rust); opacity:.85; }
.et-flower-center{ fill:#F6E2A8; }
.et-iris-inset{ opacity:.92; }
.et-iris-ring{ fill:none; stroke:var(--on-dark); stroke-width:4; }
.et-iris-hole{ fill:var(--dark); }
.et-wash-light{ fill:#fff; }
.et-wash-dark{ fill:#000; }
.et-ev-gauge{ margin-top:10px; }
.et-ev-gauge svg{ width:100%; max-width:460px; height:36px; display:block; margin:0 auto; }
.et-ev-track{ stroke:var(--line); stroke-width:1; }
.et-ev-zero-tick{ stroke:var(--ink); stroke-width:2; }
.et-ev-endlabel{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-soft); }
.et-ev-marker{ fill:var(--clay); stroke:var(--paper); stroke-width:2.5; transition:cx .15s; }
.et-ev-readout{ text-align:center; font-size:13px; font-weight:600; color:var(--ink); margin-top:4px; }
.et-shared-caption{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; text-align:center; }
.et-row{ padding-top:4px; }
.et-row + .et-row{ border-top:1px solid var(--line); padding-top:16px; }
.et-row-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.et-row-label{ font-family:var(--font-ui); font-weight:700; font-size:14px; color:var(--ink); }
.et-value-label{ font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--clay); }
.et-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.et-chips .chip{ font-family:var(--font-mono); font-size:12px; padding:4px 8px; }
.et-chip-base{ box-shadow:0 0 0 2px var(--rust) inset; }
.et-base-badge{ font-family:var(--font-ui); font-size:9px; font-weight:700; color:var(--rust); margin-left:3px; vertical-align:middle; }
.et-chip-base.active .et-base-badge{ color:#fff; }
.et-note{ font-size:12.5px; color:var(--ink-soft); min-height:18px; }
.et-caveat{ font-size:12px; color:var(--ink-soft); opacity:.85; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); }
.et-diffraction-warn{ font-size:12.5px; font-weight:600; color:var(--rust); margin-top:6px; }

/* 이미지 센서 크기 / 크롭 팩터 */
.cf-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cf-btns .chip{ cursor:pointer; }
.cf-sun{ fill:#F2C14E; }
.cf-mtn-1{ fill:#A9BFC9; }
.cf-mtn-2{ fill:#7E97A3; }
.cf-ground{ fill:#8FBF6B; }
.cf-tree{ fill:#4C7A3F; }
.cf-trunk{ fill:#6B4A32; }
.cf-dim{ fill:rgba(18,23,27,.55); pointer-events:none; transition:d .2s; }
.cf-rect{ fill:none; stroke:var(--on-dark); stroke-width:1.5; stroke-dasharray:4 3; opacity:.7; pointer-events:none; }
.cf-rect.active{ stroke:var(--rust); stroke-width:3; stroke-dasharray:none; opacity:1; }
/* 포컬 플레인 셔터 */
.fp-legend{ font-family:var(--font-ui); font-size:12px; font-weight:600; }
.fp-sensor{ fill:#F6E2A8; }
.fp-sensor-frame{ fill:none; stroke:var(--line); stroke-width:1.5; }
.fp-curtain-front{ fill:var(--ink); opacity:.94; }
.fp-curtain-rear{ fill:var(--clay); opacity:.9; }
.fp-caption{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }

/* 렌즈 셔터(리프 셔터) */
.ls-ring{ fill:var(--ink-faint); }
.ls-glass{ fill:var(--dark); }
.ls-blades path{ fill:#171D22; opacity:.92; stroke:rgba(231,236,238,.2); stroke-width:.75; }
.ls-flash{ fill:#fff; pointer-events:none; }
.ls-hub{ fill:#050708; }
.ls-caption{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }

/* 롤링 셔터 / 글로벌 셔터 */
.rs-sensor{ fill:var(--paper-2); }
.rs-sensor-frame{ fill:none; stroke:var(--line); stroke-width:1.5; }
.rs-row-line{ stroke:var(--line); stroke-width:1; opacity:.6; }
.rs-subject{ fill:var(--ink); }
.rs-band{ fill:var(--rust); opacity:.32; }
.rs-flash{ fill:var(--rust); opacity:0; }
.rs-label{ font-family:var(--font-ui); font-size:12px; fill:var(--ink-soft); }
.rs-result-panel{ fill:var(--card); stroke:var(--line); stroke-width:1.5; }
.rs-result-straight{ fill:var(--moss); }
.rs-result-skew{ fill:var(--rust); }

/* 카메라 구조별 형태 */
.cs-body{ fill:var(--ink); }
.cs-hump{ fill:var(--ink-faint); }
.cs-lens-taking{ fill:var(--moss); stroke:var(--ink); stroke-width:1.5; }
.cs-lens-finder{ fill:var(--clay); stroke:var(--ink); stroke-width:1.5; }
.cs-groundglass{ fill:var(--paper-2); stroke:var(--ink-soft); stroke-width:1.5; }
.cs-bellows{ fill:var(--ink-faint); opacity:.55; }
.cs-rail{ stroke:var(--ink-soft); stroke-width:2; }
.cs-mirror{ stroke:var(--rust); stroke-width:2; stroke-dasharray:3 2; }
.cs-axis-taking{ stroke:var(--moss); stroke-width:1.5; stroke-dasharray:4 3; }
.cs-axis-finder{ stroke:var(--clay); stroke-width:1.5; stroke-dasharray:4 3; }
.cs-subject{ fill:none; stroke:var(--ink); stroke-width:1.5; }
.cs-label{ font-family:var(--font-ui); font-size:12px; fill:var(--ink); }
.cs-type-label{ font-family:var(--font-ui); font-weight:700; font-size:13px; fill:var(--ink); }
.cs-mirror-surface{ stroke:#B8C4CB; stroke-width:3; stroke-linecap:round; }
.cs-ray-hint{ fill:none; stroke:var(--clay); stroke-width:1.5; stroke-dasharray:3 2; }
.cs-flash{ fill:#fff; }
.cs-fglyph{ font-family:var(--font-ui); font-size:30px; font-weight:800; fill:var(--ink); }
.cs-fglyph-view{ fill:var(--clay); }
.cs-caption-small{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }

/* 필름 사이즈 비교 */
.fz-bg{ fill:var(--paper-2); }
.fz-dof-ground{ stroke:var(--ink-faint); stroke-width:1.5; }
.fz-dof-tree{ fill:var(--moss); opacity:.55; }
.fz-dof-subject circle, .fz-dof-subject path{ fill:var(--ink); }
.fz-dof-caption{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin-top:8px; }

/* 초점거리·화각 — 드래그로 초점거리를 바꾸는 렌즈 다이어그램 */
.fl-frame-bg{ fill:var(--paper-2); }
.fl-frame-border{ fill:none; stroke:var(--line); stroke-width:1.5; }
.fl-ground{ stroke:var(--ink-faint); stroke-width:1.5; }
.fl-far{ fill:var(--moss); opacity:.6; }
.fl-mid{ fill:var(--clay); opacity:.75; }
.fl-subject circle, .fl-subject path{ fill:var(--ink); }
.fl-rail{ stroke:var(--ink-faint); stroke-width:2; opacity:.5; }
.fl-bin-edge{ stroke:var(--ink-faint); stroke-width:1; opacity:.4; }
.fl-tick{ stroke:var(--ink-faint); stroke-width:1.5; opacity:.7; }
.fl-tick-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-soft); }
.fl-lens-outer{ fill:var(--card); stroke:var(--moss); stroke-width:2.5; cursor:grab; touch-action:none; }
.fl-lens-outer:active{ cursor:grabbing; }
.fl-lens-inner{ fill:var(--moss-dark); }
.fl-caption{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin-top:10px; }

/* 피사계 심도 — 조리개·초점거리·촬영거리로 심도 구간을 바꾸는 다이어그램 */
.dof-controls{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.dof-ctrl-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dof-ctrl-label{ font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--ink-soft); min-width:52px; }
.dof-camera{ fill:var(--ink); }
.dof-camera-lens{ fill:var(--card); stroke:var(--moss); stroke-width:2; }
.dof-track{ stroke:var(--ink-faint); stroke-width:1.5; }
.dof-zone{ fill:var(--moss); opacity:.18; transition:x .15s,width .15s; }
.dof-focus-line{ stroke:var(--rust); stroke-width:1.5; stroke-dasharray:4 3; }
.dof-focus-label{ font-family:var(--font-ui); font-size:10.5px; fill:var(--rust); font-weight:600; }
.dof-person circle, .dof-person path{ fill:var(--ink); }
.dof-obj-label{ font-family:var(--font-ui); font-size:10.5px; fill:var(--ink-faint); }

/* 존시스템 — 드래그로 존을 옮기는 11단 그레이스케일 다이어그램 */
.zs-swatch{ stroke:var(--card); stroke-width:1; }
.zs-swatch.active{ stroke:var(--rust); stroke-width:3; }
.zs-pointer-tri{ fill:var(--rust); }
.zs-tick-label{ font-family:var(--font-mono); font-size:11px; fill:var(--ink-soft); }
.zs-end-label{ font-family:var(--font-ui); font-size:10.5px; fill:var(--ink-faint); }
.zs-desc{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:8px; }

/* 수차 6종 — 칩으로 전환하는 광선 다이어그램 */
.ab-axis{ stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:4 3; }
.ab-lens{ fill:var(--moss); opacity:.35; stroke:var(--moss); stroke-width:2; }
.ab-plane{ stroke:var(--ink-soft); stroke-width:1.5; stroke-dasharray:2 3; }
.ab-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }
.ab-type-label{ font-family:var(--font-ui); font-weight:700; font-size:12.5px; fill:var(--ink); }
.ab-ray{ fill:none; stroke-width:1.5; }
.ab-ray-outer{ stroke:var(--rust); }
.ab-ray-inner{ stroke:var(--moss-dark); }
.ab-ray-red{ stroke:#D6493B; }
.ab-ray-green{ stroke:var(--moss-dark); }
.ab-ray-blue{ stroke:#4C6FE0; }
.ab-focus-dot{ stroke:none; }
.ab-focus-outer{ fill:var(--rust); }
.ab-focus-inner{ fill:var(--moss-dark); }
.ab-focus-red{ fill:#D6493B; }
.ab-focus-blue{ fill:#4C6FE0; }
.ab-focus-label{ font-family:var(--font-ui); font-size:10.5px; fill:var(--ink-faint); }
.ab-blur-dot{ fill:var(--rust); opacity:.5; }
.ab-grid-line{ fill:none; stroke:var(--ink-faint); stroke-width:1.2; }
.ab-grid-warn{ stroke:var(--clay); }
.ab-curve{ fill:none; stroke:var(--rust); stroke-width:1.5; stroke-dasharray:4 3; }
.ab-subject{ fill:var(--ink); }
.ab-target-box{ fill:none; stroke:var(--line); stroke-width:1.2; }
.ab-target-sharp{ stroke:var(--moss-dark); stroke-width:2.5; }
.ab-target-blur{ stroke:var(--rust); stroke-width:3.5; opacity:.55; }
.ab-comet{ fill:var(--rust); opacity:.7; }

/* 특성곡선(HD곡선) — 5개 구간을 칩으로 강조하는 S자 곡선 */
.cc-axis{ stroke:var(--ink-soft); stroke-width:1.5; }
.cc-axis-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }
.cc-curve-base{ fill:none; stroke:var(--ink-faint); stroke-width:2; }
.cc-zone-overlay{ fill:none; stroke:var(--rust); stroke-width:4; stroke-linecap:round; }
.cc-marker-dot{ fill:var(--ink-soft); }
.cc-marker-label{ font-family:var(--font-mono); font-size:11px; font-weight:700; fill:var(--ink-soft); }
.cc-slope-tri{ fill:var(--clay); opacity:.15; stroke:var(--clay); stroke-width:1.5; stroke-dasharray:3 2; }
.cc-slope-label{ font-family:var(--font-ui); font-size:10.5px; fill:var(--clay); }
.cc-slope-gamma{ font-family:var(--font-mono); font-size:12px; font-weight:700; fill:var(--clay); }

/* 빛의 방향에 따른 구분 — 위에서 본 조명 위치 + 얼굴 음영 미리보기 */
.ld-orbit{ fill:none; stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:3 3; }
.ld-subject{ fill:var(--ink); }
.ld-scene-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }
.ld-camera{ fill:var(--ink); }
.ld-camera-lens{ fill:var(--card); stroke:var(--moss); stroke-width:1.5; }
.ld-bulb{ fill:#F5D97A; stroke:var(--ink); stroke-width:1.5; }
.ld-ray{ stroke:#F5D97A; stroke-width:1.5; stroke-dasharray:3 2; opacity:.8; }
.ld-face{ stroke:var(--ink-soft); stroke-width:1.5; }
.ld-face-dark{ fill:var(--ink); }
.ld-face-flat{ fill:var(--paper-2); }
.ld-face-lit{ fill:var(--paper-2); }
.ld-face-rim{ fill:none; stroke:#F5D97A; stroke-width:2.5; opacity:.85; }
.ld-face-outline{ fill:none; stroke:var(--ink-soft); stroke-width:1.5; }
.ld-face-grad-outline{ stroke:var(--ink-soft); stroke-width:1.5; }
.ld-face-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }
.ld-grad-lit{ stop-color:var(--paper-2); }
.ld-grad-mid{ stop-color:var(--ink-faint); }
.ld-grad-dark{ stop-color:var(--ink); }

/* 인물 조명 세팅 24종 — 24개 칩, 다중 조명 위치 + 범례 */
.ls-btns{ max-height:170px; overflow-y:auto; }
.ls-chip{ font-size:12px; padding:6px 11px; }
.ls-ray{ stroke-width:1.5; stroke-dasharray:3 2; opacity:.85; }
.ls-bulb{ stroke:var(--ink); stroke-width:1.2; }
.ls-bulb-tag{ font-family:var(--font-ui); font-size:10px; fill:var(--ink-faint); }
.ls-legend{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.ls-legend-chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-ui); font-size:11.5px; color:var(--ink-soft); background:var(--paper-2); border-radius:999px; padding:3px 10px 3px 6px; }
.ls-legend-chip i{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* 과초점 거리 — 0 / H/2 / H / ∞ 트랙 */
.hf-zone{ fill:var(--moss); opacity:.18; }
.hf-tick{ stroke:var(--ink-faint); stroke-width:1.5; }
.hf-tick-half{ stroke:var(--moss-dark); }
.hf-tick-label{ font-family:var(--font-mono); font-size:11px; fill:var(--ink-soft); }
.hf-focus-line{ stroke:var(--rust); stroke-width:1.5; stroke-dasharray:4 3; }
.hf-focus-label{ font-family:var(--font-mono); font-size:12px; font-weight:700; fill:var(--rust); }
.hf-inf-label{ font-family:var(--font-ui); font-size:20px; font-weight:700; fill:var(--ink-soft); }
.hf-region-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }
.hf-region-sharp{ fill:var(--moss-dark); font-weight:600; }

/* 가산혼합/감산혼합 — mix-blend-mode로 실제 색을 섞는 벤 다이어그램 */
.cm-diagram svg{ background:#12171B; border-radius:var(--radius-s); }
.cm-label{ font-family:var(--font-ui); font-weight:800; font-size:20px; fill:#fff; paint-order:stroke; stroke:#000; stroke-width:3px; stroke-opacity:.35; }
.cm-toggle-row{ margin-top:8px; }
.cm-ch-btn{ opacity:.4; }
.cm-ch-btn.active{ opacity:1; }

/* 선막동조/후막동조 — 진행방향 잔상 + 노출 타임라인 */
.fs-ghost circle, .fs-ghost path{ fill:var(--ink-faint); opacity:.4; }
.fs-sharp circle, .fs-sharp path{ fill:var(--moss-dark); stroke:var(--ink); stroke-width:1.5; }
.fs-bolt{ fill:#F5D97A; stroke:var(--ink); stroke-width:1; }
.fs-exposure-bar{ stroke:var(--ink-soft); stroke-width:1.5; }
.fs-exposure-tick{ stroke:var(--ink-soft); stroke-width:1.5; }
.fs-exposure-label{ font-family:var(--font-ui); font-size:10.5px; fill:var(--ink-faint); }
.fs-flash-dot{ fill:#F5D97A; stroke:var(--ink); stroke-width:1; }
.fs-dir-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }

/* 디지털 화질저하 현상 5종 */
.idq-caption{ font-family:var(--font-ui); font-size:11.5px; fill:var(--ink-faint); }

/* 이미지 서클 — 렌즈 커버리지 vs 센서 크기 */
.ic-circle-outline{ stroke:#C9A227; stroke-width:2; }
.ic-sensor{ fill:none; stroke:var(--ink); stroke-width:2; }
.ic-vignette{ fill:var(--ink); opacity:.55; }
.ic-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-faint); }

/* 착란원과 허용착란원 */
.coc-ray{ fill:none; stroke:var(--rust); stroke-width:1.5; }
.coc-dot{ fill:var(--rust); opacity:.6; }
.coc-preview-box{ fill:var(--paper-2); stroke:var(--line); stroke-width:1.5; }
.coc-threshold{ fill:none; stroke:var(--moss-dark); stroke-width:1.5; }
.coc-preview-dot{ fill:var(--rust); opacity:.75; }
.coc-verdict-row{ margin-top:10px; font-size:13px; color:var(--ink-soft); }
.coc-verdict{ font-weight:700; padding:2px 10px; border-radius:999px; }
.coc-verdict.coc-ok{ background:var(--moss-tint); color:var(--moss-dark); }
.coc-verdict.coc-bad{ background:#F6DCD8; color:var(--rust); }

/* 이점 조절법(존 포커싱) — 렌즈 배럴 심도 눈금 */
.zf-barrel{ fill:var(--paper-2); stroke:var(--line); stroke-width:1.5; rx:6; }
.zf-centerline{ stroke:var(--ink-faint); stroke-width:1; }
.zf-tick{ stroke:var(--ink-faint); stroke-width:1.5; }
.zf-tick-label{ font-family:var(--font-mono); font-size:10.5px; fill:var(--ink-soft); }
.zf-dof-tick{ stroke-width:3; }
.zf-focus-line{ stroke:var(--rust); stroke-width:2; stroke-dasharray:3 2; }
.zf-focus-label{ font-family:var(--font-ui); font-size:11px; fill:var(--rust); font-weight:600; }
.zf-zone{ transition:x .15s,width .15s; }

/* 마크다운 표 — 좁은 화면에서 잘리지 않도록 자체 가로 스크롤 컨테이너로 감싼다 */
.md-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0; }
.md-table-wrap table{ border-collapse:collapse; width:100%; min-width:420px; font-size:13.5px; }
.md-table-wrap th, .md-table-wrap td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
.md-table-wrap th{ background:var(--paper-2); font-weight:600; white-space:nowrap; }

/* 좁은 화면에서는 가로 스크롤 대신 행마다 라벨:값 카드로 다시 배치한다 (사진사 연대표 등) */
@media (max-width: 640px){
  .md-table-wrap{ overflow-x:visible; }
  .md-table-wrap table{ min-width:0; display:block; }
  .md-table-wrap thead{ display:none; }
  .md-table-wrap tbody{ display:block; }
  .md-table-wrap tr{ display:block; border:1px solid var(--line); border-radius:var(--radius-s); margin-bottom:10px; overflow:hidden; }
  .md-table-wrap td{ display:block; border:none; border-bottom:1px solid var(--line); word-break:keep-all; overflow-wrap:break-word; }
  .md-table-wrap tr td:last-child{ border-bottom:none; }
  .md-table-wrap td::before{ content:attr(data-label); display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:3px; }
}

/* 다이어그램 칩과 동기화되는 상세 설명 패널 (구조/필름사이즈 등) */
.cs-details{ margin-top:20px; }
.cs-detail-panel h4{ font-size:17px; margin-bottom:10px; }

/* RAW/JPEG 파이프라인 */
.ff-pipeline{ margin-bottom:22px; }
.ff-pipeline-caption{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin-top:8px; }

/* 아날로그/디지털 비교표 */
.dtcmp-wrap{ overflow-x:auto; margin-bottom:22px; }
.dtcmp-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dtcmp-table th, .dtcmp-table td{ border:1px solid var(--line); padding:10px 12px; vertical-align:top; text-align:left; }
.dtcmp-table thead th{ font-size:13.5px; font-weight:700; color:var(--ink); background:var(--card); }
.dtcmp-table thead th:nth-child(2){ color:var(--clay); }
.dtcmp-table thead th:nth-child(3){ color:var(--moss); }
.dtcmp-table tbody th{ background:var(--card); font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.dtcmp-table td ul{ margin:0; padding-left:16px; }
.dtcmp-table td li{ margin-bottom:4px; line-height:1.5; }
.dtcmp-table td li:last-child{ margin-bottom:0; }
.dtcmp-table td.dtcmp-shared{ color:var(--ink-soft); line-height:1.6; }
.dtcmp-note{ color:var(--ink-faint); font-size:11.5px; }

/* 파일 포맷 비교 */
.ff-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.ff-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  cursor:pointer; transition:border-color .15s, transform .15s; font-family:var(--font-ui);
}
.ff-btn:hover{ transform:translateY(-2px); }
.ff-btn.active{ border-color:var(--moss); border-width:2px; }
.ff-btn-label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.ff-badges{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.ff-badge{
  font-family:var(--font-mono); font-size:11px; padding:3px 9px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line);
}

/* 무브먼트 — 드래그 가능한 대형카메라 무브먼트 다이어그램 (옆/위 두 패널 동시 조작) */
.mv-diagram-wrap{ width:100%; }
.mv-panels{ display:flex; gap:20px; flex-wrap:wrap; }
.mv-panel{ flex:1 1 300px; min-width:260px; }
.mv-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.mv-panel-title{ font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.mv-reset-btn{ font-family:var(--font-ui); font-size:11.5px; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer; white-space:nowrap; }
.mv-reset-btn:hover{ color:var(--ink); border-color:var(--ink-faint); }
.mv-obj-legend{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin-top:14px; }
.mv-ground{ stroke:var(--ink-faint); stroke-width:1.5; }
.mv-optical-axis{ stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:4 3; }
.mv-standard{ stroke-width:13; stroke-linecap:round; }
.mv-standard-rear{ stroke:var(--clay); }
.mv-standard-front{ stroke:var(--moss); }
.mv-standard-glass{ stroke-width:4; stroke-linecap:round; opacity:.6; }
.mv-standard-glass-rear{ stroke:var(--paper); }
.mv-standard-glass-front{ stroke:var(--paper); }
.mv-standard-ext{ stroke-width:1; stroke-dasharray:3 3; opacity:.45; }
.mv-standard-ext-rear{ stroke:var(--clay); }
.mv-standard-ext-front{ stroke:var(--moss); }
.mv-bellows{ fill:var(--paper-2); stroke:var(--ink-faint); stroke-width:1; }
.mv-bellows-fold{ stroke:var(--ink-faint); stroke-width:1; opacity:.55; }
.mv-tripod-head{ fill:var(--ink-soft); opacity:.5; }
.mv-tripod-knob{ fill:var(--ink-soft); opacity:.6; }
.mv-tripod-leg{ stroke:var(--ink-soft); stroke-width:3; stroke-linecap:round; opacity:.4; }
.mv-keystone-label{ font-family:var(--font-ui); font-size:9px; fill:var(--ink-faint); }
.mv-keystone{ fill:var(--paper-2); stroke:var(--ink-soft); stroke-width:1.5; }
.mv-keystone-roof{ fill:var(--ink-soft); opacity:.55; }
.mv-keystone-win{ fill:var(--clay); opacity:.75; }
.mv-label{ font-family:var(--font-ui); font-size:12px; fill:var(--ink-soft); }
.mv-label-front{ fill:var(--moss-dark); font-weight:600; }
.mv-label-rear{ fill:var(--clay); font-weight:600; }
.mv-focusplane{ stroke:var(--rust); stroke-width:2; stroke-dasharray:5 3; opacity:.8; }
.mv-scheimpflug-pt{ fill:var(--rust); stroke:var(--card); stroke-width:1.5; }
.mv-scheimpflug-label{ font-family:var(--font-ui); font-size:10.5px; font-weight:700; fill:var(--rust); }
.mv-lens{ fill:var(--card); stroke:var(--moss); stroke-width:2.5; }
.mv-lens-inner{ fill:var(--moss-dark); }
.mv-obj-cup{ fill:var(--rust); }
.mv-obj-cup-handle{ fill:none; stroke:var(--rust); stroke-width:2.2; }
.mv-obj-bottle{ fill:var(--ink); }
.mv-obj-vase{ fill:var(--clay); }
.mv-handle{ fill:var(--moss); stroke:var(--card); stroke-width:2; cursor:grab; touch-action:none; }
.mv-handle:active{ cursor:grabbing; }
.mv-handle-r{ fill:var(--moss-dark); }
.mv-handle-rr{ fill:var(--clay); }
.mv-captions{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.mv-caption{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.mv-caption strong{ color:var(--ink); }

.check-box{
  background:var(--clay-tint); border:1px solid #C6C6E3; border-radius:var(--radius-m);
  padding:16px 18px; margin:22px 0; font-size:14px;
}
.check-box .lbl{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--clay); font-weight:700; margin-bottom:8px; display:block; }
.check-box ul{ margin:0; padding-left:18px; }
.check-box li{ margin-bottom:4px; }
.subtopic{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line-soft); }
.subtopic h4{ font-size:18px; }

.topic-nav-btns{ display:flex; justify-content:space-between; margin-top:50px; padding-top:20px; border-top:1px solid var(--line); gap:10px; }
.topic-nav-btns a{ font-size:13.5px; color:var(--ink-soft); font-weight:500; }
.topic-nav-btns a:hover{ color:var(--moss-dark); }

/* ---------- Oral Q&A ---------- */
.oral-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.chip{
  padding:7px 14px; border-radius:999px; border:1px solid var(--line); font-size:13px; font-weight:500;
  background:var(--card); color:var(--ink-soft);
}
.chip.active{ background:var(--moss); border-color:var(--moss); color:var(--on-dark); }
.chip.small{ padding:5px 11px; font-size:12px; }
.chip-emoji{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 10px 6px; border-radius:14px; }
.chip-emoji-ico{ font-size:20px; line-height:1; }
.chip-emoji-label{ font-size:11px; }
.oral-subchips{ margin-top:-8px; }
.qa-list{ display:flex; flex-direction:column; gap:10px; }
.qa-item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.qa-q{
  width:100%; text-align:left; background:none; border:none; padding:16px 20px;
  display:flex; gap:14px; align-items:flex-start; font-size:15px; font-weight:600; color:var(--ink);
}
.qa-q .num{ font-family:var(--font-mono); font-weight:400; color:var(--ink-faint); font-size:13px; padding-top:2px; }
.qa-q .tag{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--moss-dark); background:var(--moss-tint); padding:3px 8px; border-radius:999px; white-space:nowrap; }
.qa-a{ display:none; padding:0 20px 20px 52px; font-size:14.5px; color:var(--ink-soft); border-top:1px dashed var(--line); }
.qa-a.show{ display:block; padding-top:14px; }
.qa-a blockquote, .atext blockquote, .deep-content blockquote{
  margin:12px 0 0; padding-left:12px; border-left:2px solid var(--line);
  font-style:italic; color:var(--ink-faint);
}
.qa-a blockquote p, .atext blockquote p, .deep-content blockquote p{ margin:0 0 4px; font-size:inherit; }
.qa-a blockquote p:last-child, .atext blockquote p:last-child, .deep-content blockquote p:last-child{ margin-bottom:0; }
.qa-a table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; }
.qa-a th, .qa-a td{ border:1px solid var(--line); padding:6px 8px; }
.qa-a img{ border-radius:8px; margin-top:10px; border:1px solid var(--line); max-width:320px; }
.qa-item.open .qa-q{ background:var(--paper-2); }
.qa-q .wn-remove{ margin-left:auto; background:none; border:none; color:var(--ink-faint); font-size:14px; padding:2px 7px; border-radius:6px; }
.qa-q .wn-remove:hover{ color:var(--rust); background:var(--rust-tint); }

/* ---------- History ---------- */
.tabbar{ display:flex; gap:8px; margin-bottom:30px; border-bottom:1px solid var(--line); }
.tabbar button{
  background:none; border:none; padding:12px 4px; margin-right:22px; font-size:15px; font-weight:600;
  color:var(--ink-faint); border-bottom:2px solid transparent; font-family:var(--font-serif);
}
.tabbar button.active{ color:var(--ink); border-color:var(--clay); }

/* 연대표 — 항목별 정리(.people-group)와 같은 접기 패턴 */
.era{ margin-bottom:12px; scroll-margin-top:70px; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.era-head{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  padding:16px 18px; background:var(--paper-2); border:none; cursor:pointer;
}
.era-head:hover{ background:var(--card); }
.era .era-num{ font-family:var(--font-mono); font-size:13px; color:var(--clay); flex:none; }
.era h3{ font-size:18px; margin:0; flex:1; }
.era .era-chevron{ font-size:14px; color:var(--ink-soft); transition:transform .18s ease; flex:none; }
.era.open .era-chevron{ transform:rotate(180deg); }
.era-body{ display:none; padding:20px 18px; }
.era.open .era-body{ display:block; }
.era-body table{ width:100%; border-collapse:collapse; font-size:13px; margin:10px 0 16px; }
.era-body th, .era-body td{ border:1px solid var(--line); padding:7px 9px; text-align:left; }
.era-body th{ background:var(--paper-2); }
.era-body ul{ padding-left:20px; }
.era-body li{ margin-bottom:4px; font-size:14px; }

.era-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; align-items:start; }
.era-col-art{ border-left:1px solid var(--line); padding-left:24px; }
.era-col-label{ font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink-faint); margin-bottom:10px; }
.era-col-art .era-col-label{ color:var(--clay); }
.era-art-movements{ font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px; line-height:1.5; }
.era-art-note{ font-size:13px; line-height:1.6; color:var(--ink-soft); }

.people-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; padding:14px 16px; background:var(--paper-2); border-radius:var(--radius-m); position:sticky; top:8px; z-index:5; }
.people-nav a{ font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.people-nav a:hover{ color:var(--moss-dark); border-color:var(--moss); }
.people-search{ margin-left:auto; font-size:13px; font-family:var(--font-ui); color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 14px; min-width:160px; }
.people-search:focus{ outline:none; border-color:var(--moss); }
.people-search::-webkit-search-cancel-button{ cursor:pointer; }

.people-group{ margin-bottom:16px; scroll-margin-top:70px; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.people-group-head{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:var(--paper-2); border:none; padding:16px 18px;
}
.people-group-head h3{ font-size:18px; margin:0; flex:1; }
.people-group .pg-count{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.people-group .pg-chevron{ font-size:14px; color:var(--ink-soft); transition:transform .18s ease; }
.people-group.open .pg-chevron{ transform:rotate(180deg); }
.people-group-body{ display:none; padding:20px 18px; }
.people-group.open .people-group-body{ display:block; }
.people-group > .intro{ color:var(--ink-soft); font-size:14px; margin-bottom:18px; }
.people-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; }
.person-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.person-card img{ width:100%; height:170px; object-fit:cover; }
.person-card .pc-body{ padding:16px; }
.person-card h4{ font-size:16px; margin-bottom:6px; }
.pc-tag{ display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--clay); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:2px 9px; margin-bottom:6px; margin-right:5px; cursor:pointer; }
.pc-tag:hover{ background:var(--clay-tint); border-color:var(--clay); }
.person-card .pc-head{ display:block; width:100%; text-align:left; background:none; border:none; padding:0; cursor:pointer; }
.person-card .pc-preview{ display:block; font-size:13px; color:var(--ink-faint); line-height:1.5; }
.person-card .pc-chevron{ display:inline-block; margin-top:8px; font-size:12px; font-weight:600; color:var(--moss-dark); }
.person-card .pc-chevron-less{ display:none; }
.person-card.open .pc-chevron-more{ display:none; }
.person-card.open .pc-chevron-less{ display:inline-block; }
.person-card .pc-detail{ display:none; margin-top:12px; }
.person-card.open .pc-preview{ display:none; }
.person-card.open .pc-detail{ display:block; }
.pc-outlink{ display:inline-block; margin-top:14px; font-size:12.5px; font-weight:600; color:var(--moss-dark); border:1px solid var(--moss); border-radius:999px; padding:5px 14px; }
.pc-outlink:hover{ background:var(--moss-tint); }
.pc-collapse-btn{ display:block; margin:16px auto 0; padding:6px 16px; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-soft); font-size:12px; font-weight:600; cursor:pointer; }
.pc-collapse-btn:hover{ background:var(--moss-tint); color:var(--moss-dark); }
.person-card .txt{ font-size:13.5px; color:var(--ink-soft); }
.person-card .txt table{ width:100%; font-size:13.5px; border-collapse:collapse; }
.person-card .txt th, .person-card .txt td{ border:1px solid var(--line); padding:5px 6px; }
.person-card .more-imgs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:12px; }
.person-card .pc-img-fig{ margin:0; }
.person-card .pc-img-fig img{ width:100%; height:90px; object-fit:cover; border-radius:var(--radius-s); cursor:zoom-in; display:block; }
.person-card .pc-img-fig figcaption{ font-size:10.5px; color:var(--ink-faint); line-height:1.4; margin-top:4px; }
.person-card > img{ cursor:pointer; }

.lightbox{ display:none; position:fixed; inset:0; background:rgba(18,23,27,.92); z-index:200; align-items:center; justify-content:center; padding:30px; cursor:zoom-out; }
.lightbox.open{ display:flex; }
.lightbox-inner{ position:relative; max-width:min(92vw,900px); max-height:90vh; display:flex; flex-direction:column; align-items:center; }
.lightbox-inner img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--radius-s); cursor:default; }
.lightbox-cap{ color:var(--on-dark); font-size:13px; margin-top:12px; text-align:center; opacity:.85; }
.lightbox-close{ position:absolute; top:-40px; right:0; background:none; border:none; color:var(--on-dark); font-size:22px; cursor:pointer; padding:6px; }

/* ---------- Dictionary ---------- */
.dict-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.star-filter{ display:flex; gap:6px; }
.star-chip{ padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:12.5px; font-family:var(--font-mono); color:var(--ink-soft); }
.star-chip.active{ background:var(--clay); border-color:var(--clay); color:var(--on-dark); }
.dict-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.dict-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 18px; }
.dict-card .stars{ font-family:var(--font-mono); font-size:12px; color:var(--clay); margin-bottom:6px; letter-spacing:1px; }
.dict-card h4{ font-size:15.5px; margin-bottom:6px; }
.dict-card p{ font-size:13px; color:var(--ink-soft); margin:0; }
.dict-card-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.dict-card-actions .btn-deep{ margin-top:0; }
.btn-mech-link{ display:inline-block; border-color:var(--moss); color:var(--moss-dark); text-decoration:none; }
.btn-mech-link:hover{ background:var(--moss-tint); }

/* 교차링크는 보조 정보인데 질문 전문을 다 펼쳐두면 모바일에서 카드 높이의
   44%를 먹는다. native <details>로 접어두고 필요할 때만 펼치게 한다. */
.dict-oral-links{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.dict-oral-links .lbl{
  font-size:11.5px; font-weight:600; color:var(--clay);
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:5px;
}
.dict-oral-links .lbl::-webkit-details-marker{ display:none; }
.dict-oral-links .lbl::after{ content:'▾'; font-size:10px; color:var(--ink-faint); }
.dict-oral-links[open] .lbl::after{ content:'▴'; }
.dict-oral-links .lbl:hover{ color:var(--moss-dark); }
.dict-oral-links ul{ list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:3px; }
.dict-oral-links a{ font-size:12.5px; color:var(--ink-soft); }
.dict-oral-links a:hover{ color:var(--moss-dark); }

.qa-dict-links{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.term-chip{ font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--clay); background:none; color:var(--clay); cursor:pointer; }
.term-chip:hover{ background:var(--clay); color:var(--on-dark); }

.mode-toggle{ margin-left:auto; }

.flip-card{ perspective:1200px; cursor:pointer; min-height:200px; transition:height .35s ease; }
.flip-card-inner{
  position:relative; width:100%; height:100%; min-height:200px;
  transition:transform .5s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;
}
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }
.flip-card-front, .flip-card-back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius-m); border:1px solid var(--line); padding:18px;
  display:flex; flex-direction:column; overflow:hidden;
}
.flip-card-front{
  background:var(--card); align-items:center; justify-content:center; text-align:center; gap:10px;
}
.flip-card-front h4{ font-size:16.5px; margin:0; }
.flip-card-front .stars{ font-family:var(--font-mono); font-size:12px; color:var(--clay); letter-spacing:1px; }
.flip-hint{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
.flip-card-back{
  background:var(--moss-dark-fixed); border-color:var(--moss-dark-fixed); color:var(--on-dark);
  transform:rotateY(180deg); justify-content:flex-start; gap:10px; overflow-y:auto;
}
.flip-card-back .stars{ font-family:var(--font-mono); font-size:12px; color:var(--moss-tint-onDark); letter-spacing:1px; }
.flip-card-back p{ font-size:13px; line-height:1.55; margin:0; color:var(--on-dark); opacity:.92; }
.flip-card-back .dict-card-actions{ margin-top:auto; }
.flip-card-back .btn-deep{ border-color:rgba(231,236,238,.4); color:var(--on-dark); }
.flip-card-back .btn-deep:hover{ background:rgba(231,236,238,.12); }
.flip-card-back .btn-mech-link{ border-color:var(--moss-tint-onDark); color:var(--moss-tint-onDark); }
.flip-card-back .btn-mech-link:hover{ background:rgba(231,236,238,.12); }
.flip-card-back .deep-content p{ color:var(--ink); }

.related-terms{ background:var(--moss-tint); border-color:#AACBCE; }
.related-terms .lbl{ color:var(--moss-dark); }
.related-terms-list{ display:flex; flex-wrap:wrap; gap:8px; }
.term-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  font-size:12.5px; color:var(--ink-soft);
}
.term-chip:hover{ border-color:var(--clay); color:var(--clay); }
.stars-mini{ font-family:var(--font-mono); font-size:10.5px; color:var(--clay); letter-spacing:1px; }

/* ---------- AI 심화 설명 (Gemini) ---------- */
.deep-explain-host{ margin:6px 0 18px; }
.btn-deep{
  font-family:var(--font-ui); font-size:12.5px; letter-spacing:0;
  background:transparent; border:1px solid var(--clay); color:var(--clay);
  border-radius:999px; padding:6px 12px; cursor:pointer; margin-top:10px;
}
.btn-deep:hover{ background:var(--clay-tint); }
.btn-deep:disabled{ opacity:.6; cursor:default; }
.deep-explain-box{ margin-top:10px; }
.deep-loading{ font-size:13px; color:var(--ink-soft); font-style:italic; }
.loading-quote{ margin-top:6px; font-size:12px; color:var(--ink-faint); font-style:italic; opacity:.85; }
.loading-quote-text{ }
.loading-skeleton{
  margin:10px auto 0; height:6px; width:140px; max-width:70%; border-radius:3px;
  background:linear-gradient(90deg, var(--paper-2) 25%, var(--line) 50%, var(--paper-2) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .loading-skeleton{ animation:none; background:var(--paper-2); }
}
.deep-content{
  font-size:13.5px; line-height:1.6; color:var(--ink);
  background:var(--moss-tint); border:1px solid var(--moss); border-radius:var(--radius-m);
  padding:12px 14px;
}
.deep-content p{ margin:0 0 .9em; }
.deep-content p:last-child{ margin-bottom:0; }
.deep-content strong{ color:var(--moss-dark); }
.deep-error{ font-size:13px; color:var(--clay); }

/* ---------- Real interview questions ---------- */
.realq-card{
  position:relative;
  background:var(--dark); color:var(--on-dark); border-radius:var(--radius-l); padding:44px 36px;
  text-align:center; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
}
.realq-pin-btn{
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px; line-height:1;
  color:var(--on-dark); opacity:.5; cursor:pointer;
}
.realq-pin-btn:hover{ opacity:.85; }
.realq-pin-btn.pinned{ opacity:1; color:#F6E2A8; }

/* ---------- 취약점 분석 (모의구술 결과) ---------- */
.vuln-box{ margin-top:22px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--card); }
.vuln-title{ font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:10px; }
.vuln-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:14px; border-top:1px dashed var(--line); }
.vuln-row:first-of-type{ border-top:none; }
.vuln-count{ font-family:var(--font-mono); color:var(--clay); }
.realq-card .cat{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--moss-tint-onDark); margin-bottom:14px; }
.realq-card .qtext{ font-family:var(--font-serif); font-size:21px; line-height:1.5; }
.realq-actions{ display:flex; justify-content:center; gap:10px; margin-top:20px; }
.realq-timer-label{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); align-self:center; }
.realq-timer-ring{ position:relative; width:72px; height:72px; margin-bottom:16px; }
.realq-timer-ring svg{ transform:rotate(-90deg); }
.realq-timer-ring .tnum{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:17px; font-weight:700; color:var(--on-dark);
}

/* ---------- Typed answer (mock exam typing mode) ---------- */
.typed-input-wrap{ margin-top:20px; text-align:left; }
.typed-input{
  width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-m);
  font-family:var(--font-ui); font-size:15px; background:var(--card); color:var(--ink); resize:vertical; min-height:70px;
}
.mic-btn{
  margin-top:10px; padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-ui); font-size:13px; background:var(--card); color:var(--ink-soft); cursor:pointer;
}
.mic-btn.mic-active{ background:var(--rust-tint); color:var(--rust); border-color:var(--rust); }
.typed-result{ margin-top:14px; padding:14px 16px; border-radius:var(--radius-m); font-size:14px; }
.typed-result.correct{ background:var(--moss-tint); color:var(--moss-dark); }
.typed-result.wrong{ background:var(--rust-tint); color:var(--rust); }

/* ---------- Props practice (draw + timer + upload) ---------- */
.props-setup{ text-align:center; max-width:480px; margin:0 auto; padding:30px 0 0; }
.props-setup .title{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:12px; }
.props-voice-picker{ margin-top:22px; }
.props-voice-row{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.props-voice-row select{ background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-s); padding:8px 12px; font-size:13.5px; max-width:220px; }
.props-voice-row .btn-outline{ padding:8px 14px; font-size:13px; }
.props-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); padding:20px 22px; max-width:700px; margin:0 auto; }
.props-card .meta{ display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.props-card .admission{ font-family:var(--font-mono); font-size:11px; background:var(--moss-tint); color:var(--moss-dark); padding:3px 9px; border-radius:999px; font-weight:600; }
.props-card .theme{ font-weight:700; font-size:14.5px; }
.props-card .field{ font-size:14px; color:var(--ink-soft); margin-top:6px; }
.props-card .field b{ color:var(--ink); font-weight:600; }
.props-card .field.total{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-weight:700; color:var(--ink); }
.props-card .field.hint{ font-size:12px; color:var(--ink-faint); margin-top:10px; }
.cut-tag{ font-family:var(--font-mono); font-size:11px; background:var(--clay-tint); color:var(--clay); padding:2px 8px; border-radius:999px; margin-left:6px; font-weight:600; }
.own-theme-input{ font-size:14px; padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); min-width:220px; font-family:inherit; }
.own-theme-tag{ color:var(--clay); font-weight:600; }
.scratch-wrap{ position:relative; display:inline-block; min-width:120px; min-height:22px; vertical-align:middle; border-radius:6px; overflow:hidden; }
.scratch-wrap .scratch-content{ display:inline-block; padding:0 2px; }
.scratch-wrap .scratch-canvas{ position:absolute; inset:0; cursor:grab; touch-action:none; border-radius:6px; }
.scratch-wrap .scratch-reveal-btn{
  position:absolute; bottom:-2px; right:-2px; font-size:10px; padding:2px 7px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.4); background:rgba(18,23,27,0.55); color:#fff; cursor:pointer; line-height:1.6;
}
.scratch-wrap.revealed .scratch-canvas,
.scratch-wrap.revealed .scratch-reveal-btn{ display:none; }
.scratch-wrap:active .scratch-canvas{ cursor:grabbing; }
.opt-pill.duration-pill{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 16px; }
.duration-pill small{ font-size:11px; color:var(--ink-soft); font-weight:400; }
.duration-pill.selected small{ color:var(--on-dark); opacity:.85; }
.props-run{ max-width:560px; margin:0 auto; text-align:center; }
.props-timer{ margin:26px 0; }
.props-timer .tnum{ font-family:var(--font-mono); font-size:44px; font-weight:700; color:var(--moss-dark); }
.props-timer-actions{ display:flex; justify-content:center; gap:10px; margin-top:12px; }
.props-actions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.props-upload{ max-width:1000px; margin:0 auto; text-align:center; }
.upload-hint{ font-size:13.5px; color:var(--ink-soft); margin:14px 0 10px; }
.upload-fields{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; text-align:left;
  max-width:760px; margin:0 auto 14px;
}
.field-label{ flex:1; min-width:220px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.field-optional{ font-weight:400; color:var(--ink-faint); }
.field-label input{
  display:block; width:100%; margin-top:6px; padding:9px 12px; border:1px solid var(--line);
  border-radius:var(--radius-m); background:var(--card); font-family:var(--font-ui); font-size:13.5px; color:var(--ink);
}
.ox-toggle{ display:flex; gap:8px; margin-top:6px; }
.ox-btn{
  flex:1; padding:9px 0; border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--card); color:var(--ink-soft); font-weight:700; font-size:14px; cursor:pointer;
}
.ox-btn:hover{ background:var(--paper-2); }
.ox-btn.selected{ background:var(--moss); border-color:var(--moss); color:var(--on-dark); }
#propsFileInput{ font-size:13.5px; max-width:100%; }
.zoom-hint{ font-size:11px; color:var(--ink-faint); font-family:var(--font-mono); margin-top:6px; }
/* PDF는 브라우저 기본 뷰어로 표시 — 확대/펜(주석)/인쇄/다운로드 등 내장 툴을 그대로 쓸 수 있고,
   내부 상태를 우리가 건드리지 않으니 레이아웃이 절대 깨지지 않는다. 크게, 고정 크기로만 보여준다. */
.upload-pdf-preview{ display:block; width:100%; height:820px; margin:14px 0 0; border-radius:var(--radius-m); border:1px solid var(--line); }
.upload-img-preview{
  display:block; max-width:100%; max-height:780px; margin:14px auto 0;
  border-radius:var(--radius-m); border:1px solid var(--line); cursor:zoom-in;
}
/* 이미지는 클릭하면 전체 화면 라이트박스로 — 확대해도 이 박스 자체는 절대 커지지 않는다 */
.img-lightbox{
  position:fixed; inset:0; background:rgba(14,18,21,.9); z-index:9999;
  display:flex; align-items:center; justify-content:center; cursor:zoom-out; padding:24px;
}
.img-lightbox img{ max-width:96vw; max-height:96vh; object-fit:contain; border-radius:8px; }
.upload-feedback-col{ max-width:760px; margin:24px auto 0; text-align:left; }
.feedback-placeholder{
  font-size:13.5px; color:var(--ink-faint); border:1px dashed var(--line); border-radius:var(--radius-l);
  padding:26px; text-align:center;
}
.upload-feedback-col .deep-content{
  font-size:14.5px; line-height:1.75; text-align:left;
  padding:20px 22px; border-radius:var(--radius-l);
}
@media (max-width: 760px){
  .upload-pdf-preview{ height:560px; }
  .upload-img-preview{ max-height:520px; }
}

/* ---------- Visualization (exposure / film curve / zone system) ---------- */
.viz-block{ margin-bottom:56px; }
.viz-block h3{ font-size:20px; margin-bottom:6px; }
.viz-desc{ font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; }
.viz-charts{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.viz-chart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:8px; }
.viz-chart-head h4{ font-size:15px; }
.viz-stops{ display:flex; gap:6px; }
.viz-canvas-wrap{ position:relative; height:240px; }
.viz-note{ margin-top:12px; padding:10px 12px; background:var(--paper-2); border-radius:var(--radius-m); }
.viz-note p{ font-size:12px; color:var(--ink-soft); margin:0 0 4px; }
.viz-note p:last-child{ margin-bottom:0; }
.viz-note b{ color:var(--ink); }
.curve-svg-wrap{ max-width:640px; margin:0 auto; }
.curve-svg-wrap svg{ width:100%; height:auto; display:block; }
.curve-legend{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; }
.curve-legend-item{ padding:14px 16px; border-radius:var(--radius-m); border:1px solid; }
.curve-legend-item.hi{ background:var(--clay-tint); border-color:#C6C6E3; }
.curve-legend-item.lo{ background:var(--moss-tint); border-color:var(--moss); }
.curve-legend-item h4{ font-size:13.5px; margin-bottom:4px; }
.curve-legend-item p{ font-size:12.5px; color:var(--ink-soft); }
.curve-points{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.curve-point{ padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-m); transition:background .15s,border-color .15s; }
.curve-point h4{ font-size:13px; margin-bottom:4px; color:var(--moss-dark); }
.curve-point p{ font-size:12.5px; color:var(--ink-soft); }
.curve-point.active{ background:var(--moss-tint); border-color:var(--moss); }

.hd-band{ opacity:.5; }
.hd-band-toe, .hd-band-shoulder{ fill:var(--clay-tint); }
.hd-band-straight{ fill:var(--moss-tint); }
.hd-band-solar{ fill:var(--rust-tint); }
.hd-zone-tick{ font-family:var(--font-mono); font-size:9px; fill:var(--moss-dark); }
.hd-path{ stroke:var(--ink); stroke-width:2.5; }
.hd-path-solar{ stroke:var(--rust); stroke-width:2.5; stroke-dasharray:6,4; }
.hd-path-recip{ stroke:var(--clay); stroke-width:2; stroke-dasharray:5,4; }
.hd-cursor-line{ stroke:var(--moss-dark); stroke-width:1.5; stroke-dasharray:3,3; pointer-events:none; }
.hd-cursor-dot{ fill:var(--moss-dark); stroke:var(--paper); stroke-width:1.5; pointer-events:none; }
.hd-readout-note{ display:block; margin-top:4px; font-weight:400; font-size:12px; color:var(--ink-soft); }
.hd-recip-note{ margin-top:10px; padding:10px 14px; background:var(--clay-tint); border:1px solid #C6C6E3; border-radius:var(--radius-s); font-size:12.5px; color:var(--ink-soft); }
.zone-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(75px,1fr)); gap:8px; }
.zone-block{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:10px 6px; border-radius:var(--radius-m); min-height:90px; }
.zone-num{ font-size:20px; font-weight:700; }
.zone-label{ font-size:10.5px; text-align:center; line-height:1.35; opacity:.9; margin-top:6px; }

.zone-photo-wrap{ max-width:720px; margin:22px auto 0; }
.zone-photo-heading{ font-size:13.5px; margin-bottom:10px; color:var(--moss-dark); }
.zone-photo-frame{ position:relative; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line); cursor:crosshair; line-height:0; }
.zone-photo-frame img{ width:100%; height:auto; display:block; }
.zone-photo-crosshair{
  position:absolute; width:18px; height:18px; margin-left:-9px; margin-top:-9px;
  border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.5);
  pointer-events:none;
}
.zone-photo-badge{
  position:absolute; transform:translate(-50%,-140%);
  background:rgba(20,20,20,.85); color:#fff; font-family:var(--font-mono); font-size:12px; font-weight:700;
  padding:3px 9px; border-radius:999px; pointer-events:none; white-space:nowrap;
}
.zone-photo-loupe{
  position:absolute; border:2px solid #fff; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,.45);
  pointer-events:none; image-rendering:pixelated; background:#000;
}
.zone-histogram-wrap{ margin-top:14px; }
.zone-histogram-label{ font-size:11px; color:var(--ink-faint); margin-bottom:4px; text-align:center; }
.zone-histogram{ width:100%; height:auto; display:block; }
.zone-hist-bar{ fill:var(--ink-soft); }
.zone-hist-cursor{ stroke:var(--rust); stroke-width:1.5; }
.zone-photo-note{ margin-top:8px; font-size:11.5px; color:var(--ink-faint); text-align:center; }
.zone-photo-credit{ margin-top:6px; font-size:11.5px; color:var(--ink-faint); text-align:center; }
.zone-photo-credit a{ color:var(--ink-faint); }
@media (max-width: 760px){
  .viz-charts{ grid-template-columns:1fr; }
  .curve-legend, .curve-points{ grid-template-columns:1fr; }
}

/* ---------- CMS guide ---------- */
.cms-flow{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.cms-flow-step{ flex:1; min-width:110px; text-align:center; }
.cms-flow-icon{ font-size:32px; margin-bottom:6px; }
.cms-flow-step h4{ font-size:12.5px; font-weight:700; margin-bottom:2px; }
.cms-flow-step p{ font-size:11.5px; color:var(--ink-soft); }
.cms-flow-step span{ font-size:10.5px; color:var(--ink-faint); }
.cms-flow-arrow{ font-size:18px; color:var(--ink-faint); flex-shrink:0; }
.cms-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.cms-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 18px; }
.cms-card.center{ text-align:center; }
.cms-card-icon{ font-size:26px; margin-bottom:6px; }
.cms-card h4{ font-size:14px; margin-bottom:6px; }
.cms-card p{ font-size:12.5px; color:var(--ink-soft); }
.cms-card.indigo{ background:var(--moss-tint); }
.cms-card.teal{ background:var(--clay-tint); }
.cms-sub-h{ font-size:14px; font-weight:700; margin:22px 0 10px; }
.cms-list{ display:flex; flex-direction:column; gap:10px; }
.cms-list-item{ padding:12px 14px; border-radius:var(--radius-m); border:1px solid; font-size:12.5px; }
.cms-list-item .t{ font-weight:700; margin-bottom:4px; }
.cms-list-item .ex{ color:var(--ink-faint); font-family:var(--font-mono); font-size:11px; }
.cms-list-item.blue{ background:var(--moss-tint); border-color:var(--moss); color:var(--moss-dark); }
.cms-list-item.green{ background:var(--paper-2); border-color:var(--line); color:var(--ink); }
.cms-list-item.yellow{ background:var(--clay-tint); border-color:#C6C6E3; color:var(--clay); }
.cms-p{ font-size:13px; color:var(--ink-soft); margin-top:8px; }
.cms-p b{ color:var(--ink); }
.cms-swatches{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.cms-swatches figure{ text-align:center; margin:0; }
.cms-swatches svg{ width:180px; height:180px; border-radius:var(--radius-m); border:1px solid var(--line); }
.cms-swatches figcaption{ font-size:12.5px; color:var(--ink-soft); margin-top:8px; }
@media (max-width: 760px){
  .cms-pair{ grid-template-columns:1fr; }
  .cms-flow{ flex-direction:column; }
  .cms-flow-arrow{ transform:rotate(90deg); }
}

/* ---------- Mock exam ---------- */
.exam-shell{ max-width:760px; margin:0 auto; padding:50px 24px 90px; text-align:center; }
.exam-setup h2{ font-size:30px; }
.exam-opts{ display:flex; flex-direction:column; gap:26px; margin:34px 0; text-align:left; }
.opt-block label.title{ font-weight:700; display:block; margin-bottom:10px; font-size:14.5px; }
.opt-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.opt-grid-2col{ display:grid; grid-template-columns:1fr 1fr; }
.opt-pill{
  padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
}
.opt-grid-2col .opt-pill{ text-align:center; }
@media (max-width:560px){ .opt-grid-2col{ grid-template-columns:1fr; } }
.opt-pill.selected{ background:var(--moss); border-color:var(--moss); color:var(--on-dark); }

.exam-run{ display:flex; flex-direction:column; align-items:center; }
.timer-ring{ position:relative; width:150px; height:150px; margin:10px auto 26px; }
.timer-ring svg{ transform:rotate(-90deg); }
.timer-ring .tnum{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--ink);
}
.progress-label{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); margin-bottom:8px; }
.quiz-progress-bar{ width:100%; max-width:400px; height:6px; margin:10px auto 26px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.quiz-progress-fill{ height:100%; background:var(--moss); border-radius:999px; transition:width .25s ease; }
.quiz-options{ display:flex; flex-direction:column; gap:10px; margin-top:20px; text-align:left; }
.quiz-opt{
  padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--card);
  font-size:14px; color:var(--ink); text-align:left; line-height:1.5; cursor:pointer;
}
.quiz-opt:hover:not(:disabled){ background:var(--paper-2); }
.quiz-opt:disabled{ cursor:default; }
.quiz-opt.correct{ background:var(--moss-tint); border-color:var(--moss); color:var(--moss-dark); font-weight:600; }
.quiz-opt.wrong{ background:var(--rust-tint); border-color:var(--rust); color:var(--rust); }
.exam-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:40px 36px; width:100%; box-shadow:var(--shadow-card); min-height:220px;
  display:flex; flex-direction:column; justify-content:center;
}
.exam-card .qtext{ font-size:20px; font-weight:700; font-family:var(--font-serif); line-height:1.5; }
.exam-card .atext{ margin-top:20px; padding-top:20px; border-top:1px dashed var(--line); font-size:14.5px; color:var(--ink-soft); text-align:left; display:none; max-height:260px; overflow-y:auto; }
.exam-card .atext.show{ display:block; }
.exam-actions{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; justify-content:center; }
.mark-actions{ display:flex; gap:10px; margin-top:16px; }
.btn-correct{ background:var(--moss); color:var(--on-dark); }
.btn-wrong{ background:var(--rust); color:var(--on-dark); }

.exam-result{ text-align:left; }
.result-score{ font-family:var(--font-mono); font-size:52px; font-weight:700; color:var(--moss-dark); text-align:center; margin:20px 0; }
.result-list{ display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.result-item{ display:flex; gap:10px; align-items:center; padding:10px 14px; border-radius:10px; border:1px solid var(--line); font-size:13.5px; }
.result-item.wrong{ background:var(--rust-tint); }
.result-item.correct{ background:var(--moss-tint); }
.result-item .ic{ font-family:var(--font-mono); font-weight:700; }

/* ---------- 맨 위로 (긴 페이지에서 헤더까지 되짚어 올라가는 스크롤을 없앤다) ---------- */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:80;
  width:44px; height:44px; border-radius:50%; padding:0;
  background:var(--card); border:1px solid var(--line); color:var(--ink-soft);
  box-shadow:var(--shadow-card); font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ border-color:var(--moss); color:var(--moss-dark); }

/* ---------- misc ---------- */
.empty{ padding:60px 20px; text-align:center; color:var(--ink-faint); }
.pill-count{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .study-path{ flex-direction:column; }
  .study-path-arrow{ transform:rotate(90deg); padding:2px 0; }
  .schedule-widget{ grid-template-columns:1fr; }
  .schedule-widget .schedule-cal{ max-width:260px; }
  .app-layout{ grid-template-columns:1fr; }
  .side{ position:relative; top:0; max-height:none; border-right:none; border-bottom:1px solid var(--line); padding:18px 0; }
  .content-pane{ padding:26px 4px 70px; }
  .exam-band{ grid-template-columns:1fr; text-align:center; }
  .nav{ display:none; }
  .nav.mobile-open{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:12px 24px; }
  .hamburger{ display:block; background:none; border:none; font-size:22px; }
  .theme-toggle{ margin-left:auto; }
  /* 상단 고정 헤더가 모바일 화면 높이를 계속 잡아먹어서 여백을 줄인다 */
  .header-inner{ padding:10px 16px; gap:14px; }
  .global-search-bar .wrap{ padding:7px 16px; }
  .global-search-input{ padding:8px 14px; }
}
/* 모바일에서는 세로 길이가 곧 피로도라, 홈의 두 목록(학습경로·전체목차)을
   데스크톱과 다른 형태로 압축한다. 학습경로는 세로 카드 6장 대신 번호 뱃지가
   선으로 이어지는 스텝 레일로, 전체목차는 설명문을 접은 2열 타일로 바꾼다. */
@media (max-width:700px){
  .section{ padding:40px 18px; }
  .section-head{ margin-bottom:20px; }
  .section-head h2{ font-size:23px; }
  .section-head .desc{ font-size:13.5px; }

  /* --- 학습경로: 스텝 레일 --- */
  .study-path{ flex-direction:column; gap:0; margin-bottom:16px; }
  .study-path-arrow{ display:none; }
  .study-path-step{ flex:none; position:relative; padding-left:40px; }
  .study-path-step::before{
    content:''; position:absolute; left:13px; top:0; bottom:0; width:2px;
    background:var(--line);
  }
  .study-path-step:first-child::before{ top:20px; }
  .study-path-step:last-child::before{ bottom:auto; height:20px; }
  .study-path-step a{
    flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:2px 8px;
    height:auto; padding:10px 14px; margin-bottom:8px; border-radius:var(--radius-m);
  }
  .study-path-step a:hover{ transform:none; }
  .study-path-num{
    position:absolute; left:0; top:8px; z-index:1;
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); border:2px solid var(--line); font-size:12px;
  }
  .study-path-step.accent .study-path-num{ background:var(--moss); border-color:var(--moss); }
  .study-path-title{ font-size:14.5px; }
  .study-path-why{ flex:1 1 100%; font-size:11.5px; }

  /* --- 전체 목차: 2열 압축 타일 --- */
  .card-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .nav-card{ min-height:0; padding:14px 13px; gap:5px; border-radius:var(--radius-m); }
  .nav-card:hover{ transform:none; }
  .nav-card p{ display:none; }
  .nav-card .n{ font-size:10.5px; }
  .nav-card h3{ font-size:15.5px; line-height:1.3; }
  .nav-card .go{ font-size:11.5px; margin-top:auto; }

  /* --- 용어사전 카드: 여백·버튼 압축 --- */
  .dict-grid{ gap:8px; }
  .dict-card{ padding:13px 14px; }
  .dict-card-actions{ gap:6px; margin-top:8px; }
  .dict-card-actions .btn-deep{ font-size:11.5px; padding:5px 10px; }
}
@media (max-width:640px){
  .era-head{ padding:13px 14px; gap:10px; }
  .era h3{ font-size:15.5px; }
  .era-body{ padding:16px 14px; }
  .era-cols{ grid-template-columns:1fr; gap:16px 0; }
  .era-col-art{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:16px; }
  .search-page-bar{ flex-direction:column; }
  .search-page-input{ max-width:none; }
}