/* ---------- Design tokens ---------- */
:root{
  color-scheme: light;     /* 네이티브 컨트롤(버튼 글리프·폼·스크롤바)이 테마를 따르도록 */
  --ink:        #1C2227;   /* 쿨 블루블랙 - 본문/헤드라인 */
  --ink-soft:   #4C5860;   /* 보조 텍스트, 쿨 슬레이트 그레이 */
  --ink-faint:  #5F6970;   /* 캡션, 메타 정보 — WCAG AA(4.5:1 on --paper) */
  --paper:      #EEF1F4;   /* 배경 - 쿨 그레이 화이트 */
  --paper-rgb:  238,241,244; /* 헤더 블러 배경 등 rgba()가 필요한 곳용 */
  --paper-2:    #E1E7EB;   /* 은은한 섹션 구분 배경 */
  --card:       #F7F9FB;   /* 카드 배경 */
  --line:       #D2DAE0;   /* 헤어라인 */
  --line-soft:  #E4E9ED;
  /* 도식 전용 선·면. UI 헤어라인(--line)은 카드 위 도판에서 1.3:1밖에 안 돼
     상자 윤곽이 배경에 묻혔다. 도식 안에서만 이 값으로 갈아끼운다.
     (--diag-line ≈3:1, --diag-line-soft ≈2:1, --diag-ink-faint ≥4.5:1) */
  --diag-line:      #828D95;
  --diag-line-soft: #A8B2B9;
  --diag-fill-2:    #C6CED5;
  --diag-ink-faint: #5F6970;
  --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;
  --hl:         #FBE7A8;   /* 형광펜 하이라이트 (밝은 앰버) — ==중요 개념== */
  --hl-ink:     #4A3A12;
  --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', 'Pretendard', 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);

  /* 온보딩 투어/배너 포인트색 — 라이트는 틸(moss), 다크는 인디고(clay)로 갈아낀다. */
  --tour-accent:    var(--moss);
  --tour-on-accent: var(--on-dark);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ink:        #CED5DA;
    --ink-soft:   #A9B4BC;
    --ink-faint:  #78838C;
    --paper:      #12171B;
    --paper-rgb:  18,23,27;
    --paper-2:    #1B2227;
    --card:       #242D34;   /* paper 대비 명도차를 넓혀 카드가 패널로 읽히게 */
    --line:       #313C46;
    --line-soft:  #232C33;
    --diag-line:      #6E7A85;
    --diag-line-soft: #59636E;
    --diag-fill-2:    #414C55;
    --diag-ink-faint: #8F9AA2;
    --moss:       #32747C;
    --moss-dark:  #7FC7CE;
    --moss-tint:  #1A3236;
    --clay:       #8A8ECF;   /* 어두운 패널 위 대비 4.5:1 이상 (라벨·값 텍스트) */
    --clay-tint:  #24273D;
    --rust:       #B24B5D;
    --rust-tint:  #3A2328;
    --hl:         #B8901F;   /* 어두운 올리브 대신 밝은 앰버 — '형광펜'으로 읽히게 */
    --hl-ink:     #1C1403;   /* 밝은 마커 위 어두운 글씨 */
    --dark:       #0A0D0F;
    --dark-2:     #12171B;
    --on-dark:    #E7ECEE;
    /* 어두운 배경에선 그림자가 안 보여 계층이 사라짐 → 밝은 헤어라인 링을 얹는다 */
    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.045);
    --tour-accent:    var(--clay);
    --tour-on-accent: var(--dark);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ink:        #CED5DA;
  --ink-soft:   #A9B4BC;
  --ink-faint:  #78838C;
  --paper:      #12171B;
  --paper-rgb:  18,23,27;
  --paper-2:    #1B2227;
  --card:       #242D34;   /* paper 대비 명도차를 넓혀 카드가 패널로 읽히게 */
  --line:       #313C46;
  --line-soft:  #232C33;
  --diag-line:      #6E7A85;
  --diag-line-soft: #59636E;
  --diag-fill-2:    #414C55;
  --diag-ink-faint: #8F9AA2;
  --moss:       #32747C;
  --moss-dark:  #7FC7CE;
  --moss-tint:  #1A3236;
  --clay:       #8A8ECF;   /* 어두운 패널 위 대비 4.5:1 이상 (라벨·값 텍스트) */
  --clay-tint:  #24273D;
  --rust:       #B24B5D;
  --rust-tint:  #3A2328;
  --hl:         #B8901F;   /* 어두운 올리브 대신 밝은 앰버 — '형광펜'으로 읽히게 */
  --hl-ink:     #1C1403;   /* 밝은 마커 위 어두운 글씨 */
  --dark:       #0A0D0F;
  --dark-2:     #12171B;
  --on-dark:    #E7ECEE;
  /* 어두운 배경에선 그림자가 안 보여 계층이 사라짐 → 밝은 헤어라인 링을 얹는다 */
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.045);
  --tour-accent:    var(--clay);
  --tour-on-accent: var(--dark);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
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);
  transition:transform .28s ease;
}
.header-inner{
  /* 헤더 바 배경·구분선(.site-header)은 전체 폭, 내용은 본문(.wrap, 1360) 열 라인에 맞춤 */
  max-width:none; margin:0;
  padding:14px max(24px, calc((100% - 1360px) / 2 + 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-wm{ height:17px; width:auto; flex:none; display:block; }
.brand-wm-lt{ display:none; }
:root[data-theme="light"] .brand-wm-dk{ display:none; }
:root[data-theme="light"] .brand-wm-lt{ display:block; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .brand-wm-dk{ display:none; }
  :root:not([data-theme="dark"]) .brand-wm-lt{ display:block; }
}
.nav{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.nav-links{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; min-width:0; }
.nav a{
  padding:7px 11px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--ink-soft);
  letter-spacing:-.005em; white-space:nowrap; transition:background .15s, color .15s;
}
.nav-ico{ display:none; }
.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; }

/* 오른쪽 끝 묶음 — 문의 + 로그인/계정 (링크가 아무리 많아도 줄바꿈에 밀리지 않도록 flex:none) */
.nav-end{ margin-left:auto; flex:none; display:flex; align-items:center; gap:2px; position:relative; }

/* 로그인 상태: 이름 칩 (아바타 + 표시 이름 + 캐럿) */
#navAuthLink.nav-user{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:4px 10px 4px 4px; border:1px solid var(--line); border-radius:999px;
}
#navAuthLink.nav-user:hover{ background:var(--paper-2); border-color:var(--moss); }
#navAuthLink.nav-user.active{ background:transparent; color:var(--ink-soft); }
.nav-avatar{
  width:22px; height:22px; flex:none; border-radius:50%;
  background:var(--moss); color:var(--on-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; line-height:1; overflow:hidden;
}
.nav-avatar img{ width:100%; height:100%; object-fit:cover; }
.nav-user-name{ color:var(--ink); font-weight:600; }
.nav-caret{ font-size:10px; color:var(--ink-faint); }
.nav-points{
  font-size:11px; font-weight:700; line-height:1; padding:3px 6px; border-radius:999px;
  color:var(--moss); background:color-mix(in srgb, var(--moss) 12%, transparent);
  font-variant-numeric:tabular-nums;
}

/* 이름 칩 드롭다운 메뉴 */
.nav-menu[hidden]{ display:none; }
.nav-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  min-width:154px; padding:5px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:1px;
}
.nav-menu a, .nav-menu button{
  display:block; width:100%; text-align:left; font:inherit;
  padding:9px 11px; border:none; background:none; border-radius:7px;
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
}
.nav-menu a:hover, .nav-menu button:hover{ background:var(--paper-2); color:var(--ink); }
.nav-menu a.active{ background:transparent; color:var(--ink); }

/* 관리자: 승인 대기 인원 배지 (members.js) */
#navAuthLink.nav-user{ position:relative; }
.nav-badge{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--clay); color:#fff;
  font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
}
.nav-badge-n{
  display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:999px;
  background:var(--clay); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center;
}

/* 회원 관리 (#/members) */
.mem-filters{ align-items:center; flex-wrap:wrap; }
.mem-search{
  margin-left:auto; min-width:200px; padding:7px 11px; font:inherit; font-size:13.5px;
  border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink);
}
.mem-table td{ vertical-align:middle; }
.mem-sort{ all:unset; cursor:pointer; white-space:nowrap; }
.mem-sort:hover, .mem-sort.active{ color:var(--ink); }
.mem-sort:focus-visible{ outline:2px solid var(--ink-faint); outline-offset:2px; }
.mem-sort-arrow{ display:inline-block; width:1em; margin-left:2px; font-size:.7em; }
.mem-actions{ white-space:nowrap; }
.mem-date{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.mem-points{ display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
.mem-table .mem-practical{ margin-top:4px; }
.mem-until{ white-space:nowrap; }
.mem-actions .btn{ padding:4px 10px; font-size:.8rem; margin:2px 4px 2px 0; }
/* 버튼이 셋(정지·관리자로·탈퇴)이면 칸이 넓어져 표가 옆으로 밀린다 — 좁은 화면에선 두 줄로 접는다. */
@media (max-width:1600px){ .mem-actions{ white-space:normal; min-width:150px; } }
.mem-status{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.mem-status-pending{ background:color-mix(in srgb, var(--clay) 16%, transparent); color:var(--clay); }
.mem-status-approved{ background:color-mix(in srgb, var(--moss) 16%, transparent); color:var(--moss); }
.mem-status-suspended{ background:var(--paper-2); color:var(--ink-faint); }
.mem-status-admin{ background:color-mix(in srgb, var(--ink) 10%, transparent); color:var(--ink); }
.mem-suspended td{ color:var(--ink-faint); }
@media (max-width:640px){ .mem-search{ margin-left:0; width:100%; min-width:0; } }

.hamburger{ display:none; color:var(--ink); }
.nav-drawer-head{ display:none; }
/* 드로어 하단 설정 줄 — 데스크톱 가로 내비에서는 안 보이고,
   모바일 드로어에서도 진동이 실제로 먹히는 기기에서만 내보낸다.
   아이폰은 navigator.vibrate가 없어 켜도 아무 일도 안 일어난다. */
.nav-prefs{ display:none; }
.nav-close{ display:none; }
.nav-backdrop{ 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; color:var(--ink); }
.theme-toggle:hover{ border-color:var(--moss); background:var(--paper-2); }
/* 헤더 버튼 묶음 — 하단 플로팅 탭바(.m-lens)와 같은 리퀴드 글라스 레시피를 한 알약에:
   중립 반투명 면 + 상단 흰 하이라이트 + 안쪽 흰 테두리 + 0.5px 외곽선 + 무지개 링. */
.hd-pill{
  position:relative; isolation:isolate; flex-shrink:0; display:flex; align-items:center;
  height:36px; padding:0 3px; border-radius:999px;
  background:linear-gradient(165deg, light-dark(rgba(255,255,255,.74), rgba(255,255,255,.2)), light-dark(rgba(238,248,250,.34), rgba(36,45,52,.34)) 55%, light-dark(rgba(222,242,250,.3), rgba(140,170,195,.1)));
  box-shadow:
    inset 0 2px 2px light-dark(rgba(255,255,255,1), rgba(255,255,255,.55)),
    inset 0 -2px 5px light-dark(rgba(70,98,118,.2), rgba(0,0,0,.3)),
    inset 0 0 0 1px light-dark(rgba(255,255,255,.86), rgba(255,255,255,.3)),
    0 0 0 .5px light-dark(rgba(61,86,105,.3), rgba(165,194,218,.28)),
    0 6px 14px -6px light-dark(rgba(31,50,60,.4), rgba(0,0,0,.65));
  -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
}
.hd-pill::before{ /* 무지개 링 (탭바 렌즈와 동일) */
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from 205deg, rgba(75,137,255,.85), rgba(255,255,255,.9) 15%, rgba(255,174,106,.7) 32%, rgba(255,255,255,.95) 48%, rgba(150,110,245,.78) 68%, rgba(90,212,228,.68) 83%, rgba(75,137,255,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:.8; filter:blur(.15px);
}
.hd-pill .theme-toggle{
  position:relative; width:32px; height:30px; border:0; border-radius:999px; background:none; box-shadow:none;
  color:light-dark(#526873, #dfe8ee); display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s, transform .2s;
}
.hd-pill .theme-toggle + .theme-toggle::before{ /* 두 버튼 사이 가는 구분선 */
  content:''; position:absolute; left:-1px; top:7px; bottom:7px; width:1px;
  background:light-dark(rgba(61,86,105,.2), rgba(255,255,255,.18));
}
.hd-pill .theme-toggle:hover{ color:light-dark(#2f6f77, #fff); background:light-dark(rgba(255,255,255,.6), rgba(255,255,255,.12)); }
.hd-pill .theme-toggle:active{ transform:scale(.92); }
/* PC: 옆의 계정 칩이 1px 선만 있는 납작한 알약이라, 무지개 링·깊은 그림자는 빼고 같은 톤의 은은한 유리로 맞춘다.
   (링·두꺼운 입체감은 하단 플로팅 탭바가 있는 모바일/태블릿 폭에서만) */
@media (min-width:981px){
  .hd-pill{
    height:34px; padding:0 2px;
    background:linear-gradient(165deg, light-dark(rgba(255,255,255,.5), rgba(255,255,255,.06)), light-dark(rgba(238,248,250,.18), rgba(255,255,255,.02)));
    box-shadow:
      inset 0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.14)),
      0 0 0 1px var(--line);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .hd-pill::before{ display:none; }
  .hd-pill .theme-toggle{ width:30px; height:28px; }
  .hd-pill .theme-toggle + .theme-toggle::before{ top:6px; bottom:6px; background:var(--line); }
  .hd-pill .theme-toggle:hover{ background:light-dark(rgba(47,111,119,.1), rgba(255,255,255,.08)); color:var(--moss); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd-pill{ background:var(--paper-2); }
}
@media (prefers-reduced-transparency: reduce){
  .hd-pill{ background:var(--paper-2); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
.hd-ico{ position:relative; z-index:1; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.global-search-bar{ border-top:1px solid var(--line); }
.global-search-bar .wrap{ padding:10px 24px; }

/* 큰 모니터: 헤더 요소가 다닥다닥 붙어 보인다는 피드백 — 여백과 글자를 살짝 키운다 */
@media (min-width:1200px){
  .header-inner{ padding-top:18px; padding-bottom:18px; }
  .global-search-bar .wrap{ padding-top:15px; padding-bottom:15px; }
  .nav a{ padding:8px 13px; font-size:14.5px; }
  .global-search{ max-width:640px; }
  .global-search-input{ font-size:15px; padding-top:11px; padding-bottom:11px; }
}
.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:min(60vh, 460px); 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; display:flex; align-items:center; gap:6px;
}
.gs-group-count{
  font-size:10px; color:var(--ink-faint); background:var(--paper-2);
  border-radius:999px; padding:1px 7px; letter-spacing:0;
}
.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; align-items:flex-start; }
.search-page-input{ flex:1; max-width:420px; margin-bottom:0; }
.search-page-btn{ flex:none; padding:10px 22px; font-size:13.5px; }
.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-flash{ animation:searchFlash 1.7s ease-out; border-radius:8px; }
@keyframes searchFlash{
  0%,25%{ background:var(--moss-tint); box-shadow:0 0 0 4px var(--moss-tint); }
  100%{ background:transparent; box-shadow:0 0 0 4px transparent; }
}
.qa-item, .subtopic{ scroll-margin-top:88px; }
@media (prefers-reduced-motion:reduce){ .search-flash{ animation-duration:.01s; } }
/* ==중요 개념== 형광펜 강조 (mdToHtml 공통) */
mark.md-mark{ background:var(--hl); color:var(--hl-ink); font-weight:600; padding:.02em .28em; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* ==+장점== / ==-단점== : 장·단점 라벨을 각각 다른 색으로 */
mark.md-mark.md-pro{ background:var(--moss-tint); color:var(--moss-dark); }
mark.md-mark.md-con{ background:var(--rust-tint); color:var(--rust); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) mark.md-mark.md-con{ color:#E79AA8; }
}
:root[data-theme="dark"] mark.md-mark.md-con{ color:#E79AA8; }
.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:1360px; 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;
}
.footer-link{
  display:inline-block; margin-top:10px; color:var(--ink-faint);
  text-decoration:underline; text-underline-offset:3px; font-size:15px;
}
.footer-link:hover{ color:var(--accent, #C99A3F); }
.site-version{
  display:inline-block; margin-top:18px; font-size:11px; letter-spacing:.04em; opacity:.6;
  font-family:"JetBrains Mono","Pretendard",Menlo,monospace; cursor:help;
}

.home-support{
  text-align:center; padding:28px 24px 0; color:var(--ink-faint); font-size:13px; line-height:1.7;
}
.home-support a{
  color:var(--ink-faint); text-decoration:underline; text-underline-offset:3px;
}
.home-support a:hover{ color:var(--accent, #C99A3F); }

.guide-banner{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-top:20px; margin-bottom:28px; padding-top:12px; padding-bottom:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s);
  font-size:13.5px; color:var(--ink-soft);
}
.guide-banner-btn{
  border:0; background:var(--tour-accent); color:var(--tour-on-accent); cursor:pointer;
  font-weight:700; font-size:12.5px; padding:7px 14px; border-radius:var(--radius-s); white-space:nowrap;
}
.guide-banner-btn:hover{ opacity:.88; }
.guide-banner-close{
  margin-left:4px; border:0; background:none; cursor:pointer; font-size:16px; line-height:1;
  color:var(--ink-faint); padding:4px;
}
.guide-banner-close:hover{ color:var(--ink); }
.pdash-points{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px;
  margin:0 0 14px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--card); font-size:13px; color:var(--ink-soft); text-decoration:none;
}
.pdash-points[hidden]{ display:none; }
.pdash-points:hover{ border-color:var(--tour-accent); color:var(--ink); }
.pdash-points-main b{ color:var(--ink); font-size:14px; }
.pdash-points-go{ margin-left:auto; color:var(--ink-faint); }
/* 포인트제 도입 안내 팝업 — 틀은 .guest-lock 을 그대로 쓴다(points.js paintNotice). */
.points-notice p{ margin:0 0 8px; font-size:.92rem; color:var(--ink-soft); line-height:1.7; }
.points-notice p b{ color:var(--ink); }
.points-notice p.points-notice-once{ margin-top:12px; font-size:.82rem; color:var(--ink-faint); }

/* ---------- 온보딩 투어 ----------
   실제 화면 위 요소를 스포트라이트로 비추고 짧은 메모를 붙인다. 사이트 자체의
   카드·헤어라인·포인트색 토큰을 그대로 쓴다 — 라이트는 틸(--moss), 다크는
   인디고(--clay)로 갈아끼우는 --tour-accent 하나로 테마를 따라간다. */
.tour-scrim{
  position:fixed; inset:0; z-index:900; cursor:pointer;
  /* 카드 밖 어두운 배경을 눌러도 다음으로 넘어가게(tourPaint의 클릭 리스너) 여기서
     클릭을 받는다 — 그동안 배경(헤더 등)이 눌리던 건 이제 못 하지만, 페이지별
     안내가 있는 화면은 어차피 "다시 보기"를 다시 누를 필요가 거의 없어졌다. */
}
.tour-hole{
  position:fixed; box-shadow:0 0 0 9999px rgba(14,17,20,.64); border-radius:var(--radius-m);
  border:2px solid var(--tour-accent);
  transition:top .32s cubic-bezier(.4,0,.2,1), left .32s cubic-bezier(.4,0,.2,1),
             width .32s cubic-bezier(.4,0,.2,1), height .32s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.tour-card{
  position:fixed; z-index:901; max-width:300px; padding:16px 18px 14px;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  pointer-events:auto;   /* 카드 자체(다음/건너뛰기 버튼)는 눌러야 하므로 다시 켠다 */
  cursor:pointer;   /* 버튼이 아닌 카드 아무 곳을 눌러도 다음으로 넘어간다 */
}
.tour-step-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tour-accent); margin-bottom:8px; display:block;
}
.tour-text{
  font-family:var(--font-ui); font-size:14.5px; line-height:1.6;
  margin:0 0 14px; word-break:keep-all;
}
.tour-text strong{ color:var(--tour-accent); }
.tour-controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tour-dots{ display:flex; gap:5px; }
.tour-dots span{ width:6px; height:6px; border-radius:50%; background:var(--line); display:inline-block; }
.tour-dots span.on{ background:var(--tour-accent); }
.tour-btn{
  font-family:var(--font-ui); font-size:12.5px; font-weight:700; border-radius:var(--radius-s);
  padding:6px 13px; cursor:pointer; border:1px solid transparent; background:none; color:var(--ink-soft);
}
.tour-btn.tour-btn-primary{ background:var(--tour-accent); color:var(--tour-on-accent); }
.tour-btn.tour-btn-ghost{ color:var(--ink-faint); font-weight:600; padding:6px 8px; }
.tour-btn:hover{ opacity:.85; }
.tour-hint-card{ max-width:280px; }
.tour-sample{
  margin:0 0 14px; padding:9px 12px; background:var(--paper-2); border:1px solid var(--line-soft);
  border-radius:var(--radius-s); font-family:var(--font-ui); font-size:12.5px; line-height:1.5; color:var(--ink-soft);
}
.tour-sample-label{
  display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px;
}
.tour-sample b{ display:block; margin-bottom:2px; color:var(--ink); }
.tour-sample p{ margin:0; }
@media (max-width:520px){
  .tour-card{ max-width:calc(100vw - 32px); }
}

/* ---------- 홈 화면에 추가 배너 (js/install-prompt.js) ----------
   투어 카드와 같은 카드·버튼 토큰을 쓴다. 투어(z 900)보다 아래, 본문보다 위. */
.a2hs-sheet{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:880;
  max-width:420px; margin:0 auto; padding:14px 16px 12px;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-card), 0 12px 32px -10px rgba(14,17,20,.35);
  font-family:var(--font-ui); animation:a2hs-in .28s cubic-bezier(.4,0,.2,1);
}
@keyframes a2hs-in{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }
/* 모바일은 하단 탭바(약 70px)가 있으므로 그 위에 띄운다 — 안 그러면 배너가 탭을 가려 눌러도 이동하지 않는다 */
@media (max-width:700px){ .a2hs-sheet{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); } }
.a2hs-head{ display:flex; align-items:center; gap:12px; }
.a2hs-icon{ width:40px; height:40px; border-radius:9px; flex:none; }
.a2hs-title{ font-size:14.5px; line-height:1.4; }
.a2hs-body{ margin:8px 0 10px; font-size:13px; line-height:1.6; color:var(--ink-soft); }
.a2hs-sub{ margin:0; }
.a2hs-steps{ margin:0; padding-left:1.25em; }
.a2hs-steps li{ margin:3px 0; }
.a2hs-steps b, .a2hs-sub b{ color:var(--ink); }
.a2hs-note{ margin:8px 0 0; font-size:12px; color:var(--ink-faint); }
.a2hs-glyph{ width:16px; height:16px; vertical-align:-3px; color:var(--tour-accent); }
.a2hs-actions{ display:flex; justify-content:flex-end; gap:8px; }

/* ---------- 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:44px 24px 40px;
  position:relative; overflow:hidden;
}
.hero-inner{ position:relative; z-index:1; max-width:1360px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.hero-lead{ min-width:0; }
/* 그리드 항목의 자동 최소폭(min-width:auto)은 내용의 min-content다. 안 끊기는
   긴 한글 덩어리 하나가 트랙 자체를 화면보다 넓게 밀어내면, 왼쪽 가장자리는
   제자리인 채 오른쪽만 화면 밖으로 나가 '오른쪽에 붙은' 것처럼 보인다.
   (body가 word-break:keep-all이라 사파리는 가운뎃점에서도 안 끊는다.) */
.hero-inner > *{ min-width:0; }

.hero-strips{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

/* 히어로 배경 — 35mm SLR(소형카메라) 라인 드로잉. 필름 스트립과 같은 장식 레이어다.
   우측 일정 카드·좌측 CTA와 겹치지 않도록, 텍스트 블록 아래 빈 띠에 두고
   히어로 하단 경계로 잘라 낸다(상반부만 보인다). */
.hero-cam{
  position:absolute; z-index:0; left:24.5%; bottom:-110px; width:500px; max-width:46%;
  transform:rotate(-6deg); transform-origin:center;
  color:var(--moss-tint-onDark); opacity:.16; pointer-events:none;
}
.hero-cam svg{ display:block; width:100%; height:auto; }
/* 좁은 화면에서는 히어로가 세로로 쌓여 일정 카드가 폭을 다 쓴다 — 둘 곳이 없으니 숨긴다. */
@media (max-width:900px){ .hero-cam{ display: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:18px;
}
.hero h1{
  font-family:var(--font-brand); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(30px,4vw,46px); color:var(--on-dark); line-height:1.14; margin-bottom:14px;
}
.hero h1 em{ font-style:normal; font-family:'TenorLucida',var(--font-brand); font-weight:400; letter-spacing:.02em; font-size:1.06em; color:var(--moss-tint-onDark); }
.hero p.lead{ font-size:16px; color:#C7D2D6; max-width:44ch; margin-bottom:22px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* 히어로 우측: 미니 월 달력 + 임박 일정 — 어두운 배경 위 글래스 톤 */
.hero-sched{
  align-self:center; display:flex; flex-direction:column; gap:10px;
  width:100%; max-width:400px; margin:0 auto;
  background:rgba(231,236,238,.05); border:1px solid rgba(231,236,238,.14);
  border-radius:var(--radius-l); padding:16px 18px;
}
.hero-sched:focus-visible{ outline:2px solid var(--moss-tint-onDark); outline-offset:3px; }
.hero-sched-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hero-sched-listhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hero-sched-kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--moss-tint-onDark);
}
.hero-sched-navbtn{
  flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; color:var(--on-dark); background:rgba(231,236,238,.08);
  border:1px solid rgba(231,236,238,.2); border-radius:999px; cursor:pointer; padding:0;
}
.hero-sched-navbtn:disabled{ opacity:.35; cursor:default; }
.hero-sched-navbtn:not(:disabled):hover{ background:rgba(231,236,238,.16); }

/* 미니 달력 그리드 */
.hcal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.hcal-dow{ margin-top:8px; }
.hcal-dow span{
  text-align:center; font-family:var(--font-mono); font-size:10px; color:#8B979E;
  padding-bottom:4px;
}
.hcal-dow span:first-child{ color:#E88C8C; }
.hcal-cell{
  position:relative; min-height:34px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; padding:3px 0;
  font-size:11.5px; color:#C7D2D6; border-radius:7px;
}
.hcal-cell.hcal-empty{ visibility:hidden; }
.hcal-cell.is-holiday .hcal-num{ color:#E88C8C; }
.hcal-cell.is-today{ background:rgba(231,236,238,.1); }
.hcal-cell.is-today .hcal-num{ font-weight:700; color:var(--on-dark); }
.hcal-cell.has-event{ cursor:pointer; }
.hcal-cell.has-event:hover{ background:rgba(231,236,238,.08); }
.hcal-cell.is-sel{ background:rgba(127,199,206,.18); outline:1px solid var(--moss-tint-onDark); }
.hcal-num{ line-height:1; }
.hcal-dots{ display:flex; gap:2px; height:4px; align-items:center; }
.hcal-dot{ width:4px; height:4px; border-radius:50%; flex:none; display:inline-block; }
.hero-sched-date .hcal-dot{ margin-right:5px; vertical-align:middle; }
.hcal-dot.t-apply,  .hcal-dot.t-undefined{ background:#5FC9B0; }
.hcal-dot.t-exam{ background:#A99BF0; }
.hcal-dot.t-result{ background:#F0A868; }
.hcal-dot.t-etc{ background:#8FA0A8; }
.hcal-dot.t-history{ background:#E39BB8; }
.hero-sched-year{ color:#EFC0D2; background:rgba(227,155,184,.1); border-color:rgba(227,155,184,.3); }
.hero-sched-today{ font-size:12px; line-height:1.4; color:#EFC0D2; margin-bottom:8px; overflow-wrap:anywhere; }
.hero-sched-today .hcal-dot{ margin-right:5px; vertical-align:middle; }

.hero-sched-sep{ height:1px; background:rgba(231,236,238,.12); margin:2px 0; }
.hero-sched-items{ display:flex; flex-direction:column; gap:10px; }
.hero-sched-item{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
.hero-sched-dday{
  flex:none; font-family:var(--font-mono); font-size:10.5px; font-weight:700; white-space:nowrap;
  color:#F6E2A8; background:rgba(246,226,168,.1); border:1px solid rgba(246,226,168,.24);
  border-radius:999px; padding:3px 8px;
}
.hero-sched-meta{ min-width:0; }
.hero-sched-title{ font-size:13px; font-weight:500; color:var(--on-dark); line-height:1.35; overflow-wrap:anywhere; }
.hero-sched-date{ font-size:11px; color:#9AA7AD; margin-top:2px; }
.hero-sched-empty{ font-size:12px; color:#9AA7AD; }
.hero-sched-src{ margin-top:10px; font-size:11px; color:#9AA7AD; }

.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; }
}

.section{ padding:64px 24px; }
/* 제목과 설명문을 space-between으로 양 끝에 붙이면, 넓은 화면(.wrap 1360px)에서
   짧은 설명문이 제목과 수백 px 떨어진 채 오른쪽 끝에 혼자 떠 있게 된다.
   설명문은 제목 바로 옆에 따라붙이고, 자리가 모자라면 아래 줄로 내려 왼쪽에 맞춘다. */
.section-head{ display:flex; justify-content:flex-start; align-items:flex-end; gap:10px 26px; margin-bottom:28px; flex-wrap:wrap; }
.section-head > :first-child{ flex:none; max-width:100%; }   /* 긴 제목(쉬어가기)이 모바일 폭을 넘지 않게 */
.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; }
/* desc를 제목 옆 flex-basis(340px)로만 두면, 제목이 짧을 때 남는 공간에
   욱여넣어져 문장 폭(600~700px대)을 못 받고 절 경계 안에서도 꺾인다.
   항상 자기 줄로 내리고(flex-basis:100%) 폭도 넉넉하게 늘림. */
.section-head .desc{ color:var(--ink-soft); font-size:14.5px; flex:1 1 100%; max-width:820px; }
/* 절 단위 줄바꿈: 넓은 화면에선 span 하나가 한 줄에 붙고, 좁은 화면에서만
   그 안에서 자연스럽게 줄이 바뀐다 — 문장이 어색한 지점에서 잘리지 않게. */
.section-head .desc span{ display:inline-block; }

/* 홈 학습 맵 — 추천 순서(1→7)와 전체 목차를 하나로 통합한 컴팩트 타임라인.
   첫 화면 스크롤을 줄이려고 한 줄짜리 행으로 압축했고, 번호 뱃지는
   세로 레일로 이어 1→7 흐름을 보여준다. */
.home-map{ list-style:none; margin:0 0 12px; padding:0; }
.home-map > li{ position:relative; padding-left:40px; padding-bottom:6px; }
/* 뱃지 중심(x=14)을 지나는 세로 레일. 1번 위·7번 아래로는 뻗지 않는다. */
.home-map > li::before{
  content:''; position:absolute; left:13px; top:0; bottom:0; width:2px; background:var(--line);
}
.home-map > li:first-child::before{ top:22px; }
.home-map > li:last-child::before{ bottom:auto; height:22px; }
.home-map-card{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:10px 14px; text-decoration:none;
  transition:border-color .15s, background .15s;
}
.home-map-card:hover{ border-color:var(--moss); background:var(--paper-2); }
.home-map-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;
  font-family:var(--font-mono); font-size:12.5px; font-weight:700;
  color:var(--moss-dark); background:var(--moss-tint); border:1px solid var(--moss-tint);
}
.home-map-body{ flex:1; display:flex; align-items:baseline; gap:8px; min-width:0; }
.home-map-title{ flex:none; font-size:15px; font-weight:700; color:var(--ink); }
.home-map-desc{
  font-size:12.5px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.home-map-go{ flex:none; color:var(--ink-faint); font-size:15px; }
.home-map-card:hover .home-map-go{ color:var(--moss-dark); }
/* 6번(구술)은 4분 모의고사까지 아우르는 '실전' 단계 — 번호 뱃지를 채우고
   작은 태그만 붙인다. */
.home-map-card.accent .home-map-num{ background:var(--moss); border-color:var(--moss); color:var(--on-dark); }
.home-map-tag{
  flex:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  color:var(--moss-dark); border:1px solid var(--moss); border-radius:999px; padding:2px 7px;
}
.home-map-note{ margin:0; font-size:12px; color:var(--ink-faint); }
.home-map-note a{ color:var(--moss-dark); font-weight:600; }

/* ---------------- 홈 · 오늘의 Lucida ---------------- */
/* 섹션 전체가 도식 폭(840px)에 묶여 있다가, 넓은 화면에서만 오른쪽에 카드 열이
   붙어 1200px로 넓어진다. 머리글·도식·카드가 모두 같은 폭 안에서 시작하고 끝나야
   설명문이 도식 바깥으로 달아나지 않는다. */
.home-today-section{ padding-top:38px; padding-bottom:40px; }
.home-today-layout{
  display:grid; grid-template-columns:minmax(0,1fr); gap:22px;
  max-width:840px; margin:0 auto;
}
.home-today-head{ max-width:840px; margin-left:auto; margin-right:auto; }
/* 제목에서 이어지는 밑줄이 남는 가로 공간을 채우고, 설명문이 그 끝을 받는다. */
.home-today-head .head-rule{
  flex:1 1 40px; min-width:24px; height:1px; margin-bottom:9px; background:var(--line);
}
/* 두 줄이 될 때 절('…볼 수 있고,' / '오늘 딱 네 개만…') 사이에서 끊기게 한다.
   그냥 두면 '…보고 / 가도 괜찮습니다'처럼 한 마디 한가운데가 잘린다. 절을
   inline-block으로 묶으면 가능한 한 절 경계에서 끊고, 한 절이 한 줄보다 길어지면
   그때만 절 안에서 줄바꿈한다(좁은 화면 대비). */
.home-today-head .desc{ flex:0 1 auto; max-width:48ch; text-align:right; }
.home-today-head .desc span{ display:inline-block; }
@media (min-width:1180px){
  .home-today-layout{
    max-width:1200px; grid-template-columns:minmax(0,840px) minmax(290px,1fr);
    align-items:start; gap:26px;
  }
  .home-today-layout.is-solo{ max-width:840px; grid-template-columns:minmax(0,1fr); }
  .home-today-head{ max-width:1200px; }
  /* 오른쪽 열에서는 세로로 쌓인다 — 도식 옆 칸 폭에 3단을 욱여넣으면 카드가 아니라
     글자 조각이 된다. 카드를 도식 아래로 내려 한 줄로 두는 방법도 시도했지만,
     도식 높이(~650px) 위에 카드 줄 높이가 그대로 더해져 오히려 더 길어졌다
     (실측 922px → 1213px) — 도식과 카드가 같은 높이 안에서 나란히 가는
     지금 쪽이 더 짧다. */
  .home-today-layout:not(.is-solo) .home-today{ grid-template-columns:1fr; gap:0; align-content:start; }
  .home-today-layout:not(.is-solo) .today-card{ padding:15px 14px 36px; }
  .home-today-layout:not(.is-solo) .today-go{ left:14px; }
}
@media (max-width:760px){
  .home-today-head .head-rule{ display:none; }
  .home-today-head .desc{ flex:1 1 100%; max-width:60ch; text-align:left; }
}
/* 도식 칸. 도식은 본문 칼럼(약 750px) 폭에 맞춰 그려져 있다. .wrap(1360px)에 그대로
   풀면 가로로 늘어져 균형이 깨지므로 본문과 비슷한 폭으로 묶는다.
   홈의 다른 칸(학습 지도·아래 세 카드)이 전부 선과 여백만으로 되어 있어서,
   여기만 색면 머리띠를 두르면 배너처럼 튄다 — 같은 선 1px 규칙을 따른다. */
.home-feat{
  min-width:0; margin:0;
  border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden;
  background:var(--card);
}
.home-feat-bar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px 18px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.home-feat-lead{ min-width:0; }
.home-feat-part{
  display:block; margin-bottom:5px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--clay);
}
.home-feat-bar h3{ margin:0; font-size:18.5px; letter-spacing:-.02em; }
/* 조작할 수 있다는 신호는 도식 바로 옆에 있어야 읽힌다 — 섹션 설명문에만 적어 두면
   정작 만질 수 있는 물건 옆에는 아무 안내가 없는 셈이 된다. */
.home-feat-touch{
  display:inline-block; margin-left:9px; vertical-align:2px; white-space:nowrap;
  font-size:11.5px; font-weight:600; letter-spacing:-.01em; color:var(--moss-dark);
  border:1px solid var(--moss); border-radius:999px; padding:2px 9px;
}
.home-feat-acts{ display:flex; align-items:center; gap:8px; flex:none; }
.home-feat-swap, .home-feat-go{
  flex:none; font-family:var(--font-ui); font-size:13px; font-weight:600;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink-soft); text-decoration:none; cursor:pointer;
  transition:background .15s, color .15s;
}
.home-feat-swap:hover{ background:var(--paper-2); color:var(--ink); }
.home-feat-go{ color:var(--moss-dark); border-color:var(--moss); }
.home-feat-go:hover{ background:var(--moss-tint); }
.home-feat-diag{ padding:18px 20px; }
.home-feat-diag .interactive-diagram{ margin:0; }
@media (max-width:640px){
  .home-feat-bar{ padding:13px 15px; }
  .home-feat-diag{ padding:14px 12px; }
  .home-feat-touch{ display:block; width:max-content; margin:6px 0 0; vertical-align:baseline; }
  .home-feat-acts{ width:100%; }
  .home-feat-swap, .home-feat-go{ flex:1 1 auto; text-align:center; }
}

.home-today{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.today-card{
  position:relative; display:flex; flex-direction:column; gap:9px;
  padding:18px 18px 42px; border-top:2px solid var(--ink);
  text-decoration:none; color:inherit; transition:background .15s;
}
a.today-card:hover{ background:var(--paper-2); }
.today-kicker{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--clay);
}
.today-kicker i{ font-style:normal; font-family:inherit; color:var(--ink-faint); letter-spacing:0; text-transform:none; }
.today-title{ font-size:19px; font-weight:700; letter-spacing:-.03em; line-height:1.3; }
.today-body{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.today-go{ position:absolute; left:18px; bottom:16px; font-size:16px; color:var(--moss); }
/* 객관식 카드 — 다른 두 칸과 달리 카드 자체가 링크가 아니라, 보기를 눌러 그 자리에서
   답을 맞춰 보고 아래 링크로 이어 풀러 간다. 화살표 자리는 링크가 대신한다. */
.today-card.is-quiz{ padding-bottom:18px; cursor:default; }
.tq-opts{ display:grid; gap:6px; margin-top:2px; }
.tq-opt{
  text-align:left; font-family:var(--font-ui); font-size:13.5px; font-weight:500; color:var(--ink);
  padding:8px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); cursor:pointer; transition:background .12s, border-color .12s;
}
.tq-opt:hover{ background:var(--paper-2); border-color:var(--ink-faint); }
.today-card.is-done .tq-opt{ cursor:default; }
.today-card.is-done .tq-opt:hover{ background:var(--card); border-color:var(--line); }
.tq-opt.is-correct{
  background:var(--moss-tint); border-color:var(--moss); color:var(--moss-dark); font-weight:700;
}
.today-card.is-done .tq-opt.is-correct:hover{ background:var(--moss-tint); border-color:var(--moss); }
.tq-opt.is-wrong{ border-color:var(--rust); color:var(--ink-faint); text-decoration:line-through; }
.tq-more{
  margin-top:4px; font-size:13px; font-weight:600; color:var(--moss); text-decoration:none;
  opacity:0; max-height:0; overflow:hidden; transition:opacity .2s;
}
/* 답을 고르기 전에는 '더 풀기'가 보이지 않는다 — 카드가 먼저 묻고, 답한 뒤에 권한다. */
.today-card.is-done .tq-more{ opacity:1; max-height:40px; }
.tq-more:hover{ text-decoration:underline; }
/* 지연 로딩 중 자리 지킴 — 청크가 붙으면 실제 카드로 교체된다. */
.today-card.is-loading{ cursor:default; }
.today-skel{ display:block; height:13px; border-radius:4px; background:var(--paper-2); }
.today-skel.is-short{ width:60%; }
@media (max-width:760px){
  .home-today{ grid-template-columns:1fr; gap:0; }
  .today-card{ padding:16px 0 38px; }
  .today-go{ left:0; }
}
/* 학습 맵 + 학습 현황 — 첫 화면 스크롤을 줄이려고 두 섹션을 한 줄에 나란히 둔다.
   좁은 화면에서는 세로로 쌓는다. */
.home-map-progress-section{ padding-top:38px; padding-bottom:40px; }
.home-map-progress-row{ display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:8px 56px; }
.home-map-col .section-head, .pdash-col .section-head{ margin:0 0 18px; }
@media (max-width:860px){
  .home-map-progress-row{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- 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:var(--header-h, 73px); max-height:calc(100vh - var(--header-h, 73px) - 17px); overflow-y:auto;
  border-right:1px solid var(--line); padding:26px 18px 40px 0;
}
.side{ scrollbar-width:none; -ms-overflow-style:none; }
.side::-webkit-scrollbar{ width:0; height:0; display:none; }   /* 스크롤은 되되 막대는 숨김 */
.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-head{
  position:sticky; top:-26px; z-index:3; margin:-26px 0 0; padding:26px 0 4px;
  background:rgba(var(--paper-rgb),.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

/* 검색·필터 입력의 '지우기(×)' 버튼— app.js attachClearButtons() 가 입력을 이 래퍼로 감싼다. */
.clearable{ position:relative; display:block; }
.clearable > input{ width:100%; padding-right:34px; margin-bottom:0; }
/* 입력이 지녔던 아래 여백을 래퍼로 옮겨, ×가 입력 세로 중앙에 오게 한다. */
.clearable:has(> .side-search){ margin-bottom:16px; }
.clearable:has(> .mech-map-search){ margin-bottom:22px; max-width:340px; }
.clearable:has(> .search-page-input){ margin-bottom:0; flex:1 1 auto; max-width:420px; }
.clearable:has(> input[style*="max-width:280px"]){ max-width:280px; }
.clearable:has(> .people-search){ display:inline-flex; margin-bottom:0; }
.clearable:has(> .people-search) > input{ width:auto; }
.clear-btn{
  position:absolute; top:50%; right:7px; transform:translateY(-50%);
  width:20px; height:20px; padding:0; margin:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--line); color:var(--ink-faint); font-size:15px; line-height:1;
}
.clear-btn:hover{ color:var(--ink); background:var(--ink-faint); }
.clearable > input:placeholder-shown ~ .clear-btn{ display:none; }
@media (max-width:980px){ .clearable:has(> .people-search){ flex:1 1 100%; } }
/* 사이드바 학습 단계 머리글 — 지도(#/mechanism/map)의 4단계와 같은 묶음.
   글자 크기는 단계(15.5) > 대분류(14.5) > 중분류(13.5) > 소분류(13)로 위계 순서를
   그대로 따라간다 — 크기가 뒤집히면 어느 쪽이 상위인지 눈으로 안 읽힌다. */
.side-stage{ margin-bottom:14px; }
.side-stage-lbl{
  display:flex; align-items:center; gap:7px; margin:0 0 6px; padding:0 10px 6px;
  font-family:var(--font-serif); font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink-soft); border-bottom:1px solid var(--line);
}
.side-stage-lbl .no{
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--on-dark);
  background:var(--ink-faint); border-radius:50%; width:17px; height:17px; display:grid; place-items:center; flex:none;
}
.side-stage.cur .side-stage-lbl{ color:var(--moss-dark); }
.side-stage.cur .side-stage-lbl .no{ background:var(--moss); }
/* 열려 있는 대분류에만 붙는 한 줄 요약 */
.side-part-blurb{
  margin:0 0 4px; padding:0 10px 0 12px; font-size:11.5px; line-height:1.45; color:var(--ink-faint);
}
.crumb .pos{ font-size:11px; color:var(--ink-faint); opacity:.75; }
.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:13px; 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:13.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; }
/* 좁은 화면에서도 그림을 본문보다 먼저 보여 준다(넓은 화면의 '그림 왼쪽'과 같은 순서). HTML은 본문→그림 순이라 order로 뒤집는다. */
.diag-split{ display:flex; flex-direction:column; }
.diag-aside{ order:-1; }
/* 넓은 PC 화면(1500px+): 이론 항목에서 본문은 왼쪽, 도식은 오른쪽에 고정. 그 아래 폭에서는 기존처럼 위아래로 쌓인다. */
@media (min-width:1500px){
  .wrap-mech{ max-width:1560px; padding:0 16px; }
  .wrap-mech .app-layout{ grid-template-columns:260px 1fr; }
  .wrap-mech .content-pane{ max-width:none; padding:28px 12px 90px 28px; }
  .wrap-mech .diag-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
  .wrap-mech .diag-aside{ order:-1; position:sticky; top:84px; max-height:calc(100vh - 104px); overflow:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; }
  .wrap-mech .diag-aside:hover{ scrollbar-color:var(--line) transparent; }
  .wrap-mech .diag-aside > *:first-child{ margin-top:0; }
  .wrap-mech .topic-body > :not(.diag-split):not(.subtopic), .wrap-mech .subtopic > :not(.diag-split){ max-width:none; }
}
.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; line-height:1.7; color:var(--ink); }
.topic-body strong{ color:var(--moss-dark); }
/* 다크 모드: --moss-dark가 밝은 시안(#7FC7CE)이라 본문 위에서 진동 →
   강조는 색이 아닌 굵기로. 라이트 모드(깊은 틸)는 그대로 둔다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .topic-body strong,
  :root:not([data-theme="light"]) .deep-content strong{ color:var(--ink); font-weight:700; }
}
:root[data-theme="dark"] .topic-body strong,
:root[data-theme="dark"] .deep-content strong{ color:var(--ink); font-weight:700; }
/* 본문 속 소제목: **한 줄 굵게**를 h5.md-h 로 렌더 — 색만이 아니라 크기로 구분한다 */
.topic-body .md-h{ font-family:var(--font-serif); font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.4; margin:1.9em 0 .55em; padding-bottom:4px; border-bottom:1px solid var(--line-soft); }
.topic-body .md-h:first-child{ margin-top:0; }
/* 한 줄 정의 박스 (mechanism def 칸) */
.topic-body .topic-def{ margin:0 0 1.4em; padding:12px 16px 13px; background:var(--moss-tint); border-left:3px solid var(--moss); border-radius:0 8px 8px 0; font-size:16.5px; line-height:1.65; font-weight:500; color:var(--ink); word-break:keep-all; }
.topic-body .subtopic .topic-def{ font-size:15.5px; padding:9px 14px 10px; margin-bottom:1em; }
.topic-def-label{ display:block; font-size:12px; font-weight:700; letter-spacing:0; color:var(--moss); margin-bottom:3px; }
.topic-body .topic-def strong{ color:inherit; }
@media print{ .topic-body .topic-def{ background:none; border:1px solid #999; border-left:3px solid #333; } .topic-def-label{ color:#333; } }
.topic-body .md-h + p, .topic-body .md-h + ul, .topic-body .md-h + ol{ margin-top:0; }
.topic-body ul, .topic-body ol{ padding-left:22px; margin:0 0 1em; }
.topic-body li{ margin-bottom:5px; font-size:15px; line-height:1.7; }
.md-hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }
.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:flex; flex-wrap:wrap; gap:12px; margin:18px 0 24px; }
.topic-img-fig{ margin:0; flex:1 1 200px; max-width:300px; }
.topic-imgs img{ width:100%; max-height:360px; object-fit:cover; border-radius:var(--radius-s); border:1px solid var(--line); cursor:zoom-in; display:block; }
.img-credit{ margin-top:4px; font-size:11.5px; color:var(--ink-soft); text-align:right; }

/* 다크 모드: 어둡고 콘트라스트 낮은 사료(史料) 사진이 어두운 UI에 묻혀
   경계가 안 보이는 문제 → 인화 프린트처럼 밝은 테두리 + 매트로 감싼다.
   (필터로 밝기를 올리면 계조가 왜곡되므로 프레임만 준다) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.topic-imgs img, .qa-a img, .drawer-body .pc-img-fig img, .more-imgs img, .zone-photo-frame img){
    border:1px solid rgba(231,236,238,.24);
    box-shadow:0 0 0 3px rgba(231,236,238,.06), 0 6px 20px -12px rgba(0,0,0,.75);
    background:#c7ccd0;
  }
}
:root[data-theme="dark"] :is(.topic-imgs img, .qa-a img, .drawer-body .pc-img-fig img, .more-imgs img, .zone-photo-frame img){
  border:1px solid rgba(231,236,238,.24);
  box-shadow:0 0 0 3px rgba(231,236,238,.06), 0 6px 20px -12px rgba(0,0,0,.75);
  background:#c7ccd0;
}

/* ---------- Interactive diagrams (replace illegible hand-drawn source images) ---------- */
.interactive-diagram{ position:relative; 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; }
/* 도판 안에서만 선·흐린글자 토큰을 갈아끼운다. UI 헤어라인 --line은 카드
   배경(--card) 위에서 대비가 1.24:1(다크)·1.34:1(라이트)뿐이라 상자 윤곽이
   배경에 그대로 묻혔다. 사이트의 카드 테두리·표·입력은 건드리지 않고 SVG
   안에서만 바뀐다. 규칙을 하나씩 고치는 대신 토큰을 덮어써서 인라인
   stroke="var(--line)"(65곳)까지 한 번에 따라오게 했다. */
.interactive-diagram svg{
  --line:       var(--diag-line);
  --line-soft:  var(--diag-line-soft);
  --ink-faint:  var(--diag-ink-faint);
}

/* '크게 보기' — 모든 화면에서 노출. 눈금·라벨을 확대·이동해 볼 수 있다. */
.diag-zoom{
  display:inline-flex; position:absolute; top:8px; right:8px; z-index:2;
  align-items:center; gap:5px;
  background:rgba(var(--paper-rgb),.86); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; font:inherit; font-size:11.5px; font-weight:600; color:var(--ink-soft);
  cursor:zoom-in; backdrop-filter:blur(4px); transition:background .12s, color .12s, border-color .12s;
}
.diag-zoom:hover{ background:var(--paper-2); color:var(--ink); border-color:var(--ink-faint); }
.diag-zoom:active{ background:var(--line-soft); }
/* 우상단에 겹칠 컨트롤(칩 행 등)이 있는 다이어그램에서는 제 줄을 쓴다.
   enhanceDiagrams()가 실제로 겹치는지 재본 뒤에만 이 형태로 바꾼다. */
.diag-zoom-row{ display:flex; justify-content:flex-end; margin:-4px 0 8px; }
.diag-zoom-row .diag-zoom{ position:static; }

/* 전체화면 다이어그램 확대 뷰어 */
.diag-viewer{ display:none; position:fixed; inset:0; z-index:210; background:#0b0e10; flex-direction:column; }
.diag-viewer.open{ display:flex; }
.diag-viewer-bar{ flex:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; color:#E7ECEE; }
.diag-viewer-hint{ font-size:12px; opacity:.6; flex:1; text-align:center; }
.diag-viewer-zoom{ display:flex; align-items:center; gap:6px; flex:none; }
.dv-btn{ min-width:34px; height:30px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(231,236,238,.06); border:1px solid rgba(231,236,238,.35); color:#E7ECEE;
  border-radius:8px; font:inherit; font-size:15px; font-weight:700; line-height:1; cursor:pointer; }
.dv-btn:hover{ background:rgba(231,236,238,.16); }
.dv-btn:active{ background:rgba(231,236,238,.26); }
.dv-reset{ min-width:54px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.diag-viewer-close{ flex:none; background:none; border:1px solid rgba(231,236,238,.35); color:#E7ECEE; border-radius:8px; padding:6px 14px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.diag-viewer-scroll{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y pinch-zoom; padding:14px; cursor:grab; overscroll-behavior:contain; }
.diag-viewer-scroll.is-grabbing{ cursor:grabbing; }
.diag-viewer-stage{ min-width:100%; min-height:100%; display:flex; }
/* 뷰어에는 복제본이 아니라 본문의 카드가 통째로 들어온다(칩·슬라이더가 살아 있다).
   margin:auto = 양축 가운데 정렬. justify/align center와 달리 넘칠 때도 모든 가장자리로 스크롤된다. */
.diag-viewer-stage .interactive-diagram{ flex:none; margin:auto; box-sizing:border-box; }
/* 카드가 뷰어 안에 있는 동안은 '크게 보기'가 의미 없다. */
.diag-viewer-stage .diag-zoom, .diag-viewer-stage .diag-zoom-row{ display:none; }
/* 카드가 빠져나간 자리 표식 — 자리만 잡아두고 아무것도 그리지 않는다. */
.diag-home{ display:none; }
/* 호버 판독창을 탭으로도 여는 요소 */
.interactive-diagram [data-tap]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (max-width:560px){ .diag-viewer-hint{ display:none; } }
.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; }

/* 컴퓨터 하드웨어 워크스테이션 배치도 — 가짜 3D 면 + 장치 위에 올리면 강조 */
.hw-part{ cursor:help; }
.hw-part rect, .hw-part circle, .hw-part polygon, .hw-part ellipse{ transition:stroke .12s, stroke-width .12s; }
.hw-part:hover rect, .hw-part:hover circle, .hw-part:hover polygon, .hw-part:hover ellipse{ stroke:var(--moss); stroke-width:2; }
.hw-top{ fill:var(--card); stroke:var(--line); stroke-width:1; }
.hw-front{ fill:var(--paper); stroke:var(--line); stroke-width:1; }
.hw-side{ fill:var(--paper-2); stroke:var(--line); stroke-width:1; }
.hw-flow{ fill:none; stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:3 4; opacity:.55; }

/* TTL 측광방식 — 브랜드별 명칭·아이콘 */
.mm-note{ font-weight:600; color:var(--ink); line-height:1.6; }
.mm-brands{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px 18px; }
.mm-brand{ display:flex; align-items:center; gap:10px; font-weight:400; }
.mm-brand .mm-ic{ flex:none; width:40px; height:28px; color:var(--clay); background:var(--paper-2); border-radius:3px; margin:0; display:block; }
.mm-brand-t{ display:flex; flex-direction:column; line-height:1.4; min-width:0; }
.mm-brand-t b{ font-size:12px; color:var(--ink); }
.mm-brand-t span{ font-size:12px; color:var(--ink-soft); }

/* 버튼 토글 상세 패널 (사진 출력용 프린터 등) */
.pt-panel{ margin-top:12px; padding:12px 16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); font-size:13px; line-height:1.6; color:var(--ink); }
.pt-panel .pt-how{ margin:0 0 10px; }
.pt-cols{ display:flex; gap:24px; flex-wrap:wrap; }
.pt-cols > div{ flex:1; min-width:180px; }
.pt-cols b{ display:block; margin-bottom:2px; }
.pt-cols ul{ margin:0; padding-left:18px; }

/* 역제곱 법칙 */
.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); }

/* 이레디에이션 상태 */
.ih-core{ fill:var(--on-dark); }
.ih-brace-real{ stroke:var(--ink); stroke-width:2; }
.ih-brace-spread{ stroke:var(--rust); stroke-width:2; }

/* 플레어와 고스트 다이어그램 */
.fg-sky{ fill:var(--paper-2); stroke:var(--line); stroke-width:1; }
.fg-horizon{ fill:var(--ink); }
.fg-horizon-lift{ fill:var(--ink); opacity:.5; }
.fg-sun{ fill:#FFF3D0; stroke:#E6C24A; stroke-width:1; }
.fg-veil{ fill:#ffffff; opacity:.3; }
.fg-ghost{ fill:#FFE7B0; stroke:#E6C24A; stroke-width:1; }
.fg-axis{ stroke:#E6C24A; stroke-width:1; stroke-dasharray:4 4; }
.fg-center{ fill:var(--rust); }

/* 강한 빛 번짐 현상 정리 격자 */
.stray-light-matrix{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.slm-grid{ display:grid; grid-template-columns:auto 1fr 1fr; gap:6px; margin-top:10px; }
.slm-corner{ background:transparent; }
.slm-colhead{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-align:center; padding:6px 4px; align-self:end; }
.slm-rowhead{ font-size:12px; font-weight:600; color:var(--ink); padding:8px 10px 8px 0; display:flex; flex-direction:column; justify-content:center; }
.slm-rowhead span{ font-size:10.5px; font-weight:400; color:var(--ink-faint); }
.slm-cell{ display:flex; flex-direction:column; gap:2px; padding:9px 11px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); font-size:12px; color:var(--ink); text-decoration:none; transition:border-color .12s, background .12s; }
.slm-cell:hover{ border-color:var(--moss); background:var(--paper); }
.slm-cell b{ font-size:12.5px; }
.slm-cell span{ font-size:11px; color:var(--ink-soft); }
@media (max-width:560px){
  .slm-grid{ grid-template-columns:1fr 1fr; }
  .slm-corner, .slm-colhead{ display:none; }
  .slm-rowhead{ grid-column:1 / -1; padding-top:10px; border-top:1px solid var(--line-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(--diag-fill-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); }
.of-band-t{ font-family:var(--font-ui); font-size:12px; font-weight:600; fill:var(--on-dark); }
.of-bar{ stroke:rgba(231,236,238,.55); stroke-width:6; stroke-linecap:round; }

.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); }
.ctf-dir{ font-size:.85em; font-weight:700; margin-left:2px; }
.ctf-dir-up{ color:#2f6fe8; }
.ctf-dir-down{ color:#e0601a; }
.chip.active .ctf-dir{ color:inherit; }

.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; }
/* 화면이 넉넉하면(모바일 아님) 프리뷰 이미지 오른쪽에 조작 버튼들을 붙여 세로로
   길게 늘어지지 않게 한다 — 미리보기+조작이 스크롤 없이 한 화면에 들어오도록. */
@media (min-width:760px){
  .et-diagram{ flex-direction:row; align-items:flex-start; gap:26px; }
  .et-shared-wrap{ flex:0 0 300px; max-width:300px; margin-bottom:0; }
  .et-rows{ flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
}
.et-sky{ fill:var(--diag-fill-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; }
/* 폰에서는 이 긴 보충 설명이 카드 높이의 절반을 먹는다 — 한 급 줄이고,
   가운데 정렬 대신 왼쪽 정렬로 줄 길이를 고르게 한다(판독문도 같이). */
@media (max-width:760px){
  .et-shared-caption{ font-size:11.5px; line-height:1.6; text-align:left; }
  .et-ev-readout{ font-size:12px; }
}
.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-value-label{ font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--clay); }
.et-base-flag{ font-family:var(--font-ui); font-size:9px; font-weight:700; color:var(--rust); margin-left:5px; vertical-align:middle; }
/* 조리개·셔터·ISO 휠 피커 — 세로로 드래그해서 값을 고르는 세 칸짜리 릴(reel).
   버튼처럼 줄바꿈되거나 슬라이더처럼 가로로 늘어질 필요 없이 항상 한 덩어리다. */
.et-wheel-group{ display:flex; gap:8px; margin-bottom:16px; }
.et-wheel-col{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.et-wheel-label{ font-family:var(--font-ui); font-size:11px; font-weight:700; color:var(--ink-soft); }
.et-wheel-viewport{
  position:relative; width:100%; height:96px; overflow-y:auto; scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:var(--radius-s);
  background:var(--paper-2);
  mask-image:linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.et-wheel-viewport::-webkit-scrollbar{ display:none; }
.et-wheel-viewport::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:32px; transform:translateY(-50%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); pointer-events:none;
}
.et-wheel-list{ display:flex; flex-direction:column; padding:32px 0; }
.et-wheel-item{
  height:32px; line-height:32px; text-align:center; scroll-snap-align:center;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); cursor:pointer; user-select:none;
}
.et-wheel-item.active{ color:var(--clay); font-weight:700; font-size:13.5px; }
.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(--diag-fill-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(--diag-fill-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; }

/* 조리개와 유효구경 — D = f ÷ N. 측면도(빛다발 폭)·정면도(홍채)·f계열 띠 */
.ap-axis{ stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:5 4; opacity:.7; }
.ap-beam{ fill:var(--moss); opacity:.36; }
.ap-glass{ fill:var(--moss-tint); stroke:var(--moss); stroke-width:2; opacity:.85; }
.ap-blade{ fill:var(--ink); opacity:.85; }
.ap-sensor{ stroke:var(--clay); stroke-width:3; }
.ap-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-soft); }
.ap-dim{ stroke:var(--rust); stroke-width:1.5; }
.ap-dim-label{ font-family:var(--font-mono); font-size:12px; font-weight:700; fill:var(--rust); }
/* 정면 홍채 — 「노출을 조절하는 요인들」의 iris 인셋과 같은 규칙(밝은 날 · 어두운 구멍)을
   쓰고, 라이트/다크 양쪽에서 뒤집히지 않도록 테마 고정색(--on-dark/--dark)으로 그린다. */
.ap-barrel{ fill:var(--on-dark); stroke:var(--ink-faint); stroke-width:1; }
.ap-hole{ fill:var(--dark); }
.ap-blade-edge{ stroke:var(--dark); stroke-width:.8; opacity:.3; }
.ap-cell-sel{ fill:none; stroke:var(--clay); stroke-width:2.5; }
.ap-strip-n{ font-family:var(--font-mono); font-size:12px; fill:var(--ink-soft); }
.ap-strip-n.sel{ fill:var(--clay); font-weight:700; }
.ap-strip-d{ font-family:var(--font-mono); font-size:10.5px; fill:var(--ink-faint); }
.ap-strip-title{ font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--ink-soft); text-align:center; margin:16px 0 4px; }
.ap-strip-cell{ cursor:pointer; }
.ap-strip-cell:hover .ap-barrel{ stroke:var(--clay); stroke-width:1.6; }
.ap-strip-cell:hover .ap-strip-n{ fill:var(--clay); }
.ap-strip-cell:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }
.ap-warn{ margin-top:10px; padding:9px 12px; background:var(--rust-tint); border-radius:var(--radius-s); font-size:12px; line-height:1.55; color:var(--ink); }

/* 피사계 심도 — 조리개·초점거리·촬영거리로 심도 구간을 바꾸는 다이어그램 */
.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 (min-width: 641px){
  .md-table-wrap{ overflow-x:visible; }
  .md-table-wrap table{ min-width:0; }
  .md-table-wrap th, .md-table-wrap td{ overflow-wrap:anywhere; word-break:keep-all; }
  .md-table-wrap th{ white-space:normal; }
}

/* 좁은 화면에서는 가로 스크롤 대신 행마다 라벨:값 카드로 다시 배치한다 (사진사 연대표 등) */
@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; }
.ffp-hot{ cursor:help; }
.ffp-hot:hover rect, .ffp-hot:focus rect{ stroke:var(--rust); stroke-width:2; }

/* 아날로그/디지털 비교표 */
.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; }

/* 갈라지는 지점(포크) 리드 + 인과형 4열 표 + 오해 교정 */
.dtcmp-fork{ margin:0 0 16px; padding:13px 15px; border:1px solid var(--line); border-left:3px solid var(--ink-soft); background:var(--card); border-radius:4px; }
.dtcmp-fork p{ margin:0 0 8px; font-size:12.5px; line-height:1.65; color:var(--ink-soft); }
.dtcmp-fork p:last-child{ margin-bottom:0; }
.dtcmp-fork b{ color:var(--ink); font-weight:700; }
.dtcmp-fork .dtcmp-branch{ font-weight:600; }
.dtcmp-fork .dtcmp-branch.is-analog{ color:var(--clay); }
.dtcmp-fork .dtcmp-branch.is-digital{ color:var(--moss); }
.dtcmp-fork .dtcmp-branch b{ color:inherit; }
.dtcmp-table.is-4col th, .dtcmp-table.is-4col td{ font-size:12.5px; padding:9px 11px; line-height:1.5; }
.dtcmp-table.is-4col thead th:nth-child(4){ color:var(--ink); }
.dtcmp-table.is-4col td.dtcmp-so{ color:var(--ink-soft); }
.dtcmp-after{ margin:16px 0 22px; }
.dtcmp-after h5{ margin:0 0 7px; font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:.03em; }
.dtcmp-after ul{ margin:0; padding-left:18px; }
.dtcmp-after li{ margin-bottom:5px; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.dtcmp-after li:last-child{ margin-bottom:0; }
.dtcmp-after b{ color:var(--ink); font-weight:700; }

/* 파일 포맷 비교 */
.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; }
/* 되짚어보기 자가점검 — 문항마다 직접 누르는 확인 표시 */
.check-box .lbl .check-count{
  margin-left:8px; font-weight:500; letter-spacing:0; text-transform:none;
  color:var(--ink-faint);
}
.check-box ul.check-list{ padding-left:0; list-style:none; }
.check-box ul.check-list li{
  display:flex; align-items:flex-start; gap:9px; margin-bottom:7px; line-height:1.55;
}
.check-box ul.check-list li:last-child{ margin-bottom:0; }
.check-mark{
  flex:none; width:20px; height:20px; margin-top:1px; padding:0; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--clay) 45%, var(--line));
  border-radius:6px; background:transparent;
  font-size:12px; font-weight:700; line-height:1; color:var(--clay);
  display:flex; align-items:center; justify-content:center; transition:.12s;
}
.check-mark:hover{ border-color:var(--clay); background:color-mix(in srgb, var(--clay) 12%, transparent); }
.check-list li.checked .check-mark{ background:var(--clay); border-color:var(--clay); color:var(--on-dark); }
.check-list li.checked > span{ color:var(--ink-faint); }
/* 답 보기 — 문항이 나온 본문 덩어리로 되짚어 보내는 버튼 */
.check-reveal{
  margin-left:6px; padding:1px 9px; vertical-align:baseline; white-space:nowrap;
  font-family:inherit; font-size:11px; font-weight:600; line-height:1.75;
  color:var(--clay); background:transparent; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--clay) 35%, var(--line));
  border-radius:999px; transition:.12s;
}
.check-reveal:hover{ background:color-mix(in srgb, var(--clay) 12%, transparent); border-color:var(--clay); }
.check-list li.checked .check-reveal{ opacity:.55; }
.check-list li.checked .check-reveal:hover{ opacity:1; }
.cs-detail-panel, .topic-title{ scroll-margin-top:88px; }
.subtopic{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line-soft); }
.subtopic h4{ font-size:20.5px; }
.subtopic-group{ margin-top:44px; padding-top:12px; border-top:2px solid var(--moss); }
.subtopic-group:first-of-type{ margin-top:20px; }
.subtopic-group h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--moss-dark); margin-bottom:5px; }
.subtopic-group p{ font-size:14px; color:var(--ink-soft); margin:0; }
.subtopic-group + .subtopic{ margin-top:18px; border-top:none; padding-top:0; }

.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); }

/* 해상력 / 해상도 */
.rp-group{ cursor:pointer; }
.rp-box{ transition:filter .15s; }
.rp-group:hover .rp-box{ filter:brightness(1.08); }
.rp-lp-label{ font-family:var(--font-mono); font-size:12px; font-weight:700; fill:var(--ink); text-anchor:middle; }
.rp-cap{ font-family:var(--font-ui); font-size:10.5px; fill:var(--ink-soft); text-anchor:middle; }
.rp-limit{ stroke:var(--rust); stroke-width:1.5; stroke-dasharray:4 3; }
.rp-limit-label{ font-family:var(--font-mono); font-size:11px; font-weight:700; fill:var(--rust); text-anchor:middle; }
.rp-factors{ margin-top:12px; text-align:center; font-size:12.5px; color:var(--ink-soft); }
.rp-factors span{ display:inline-block; margin:4px 4px 0; padding:3px 9px; border:1px solid var(--line); border-radius:999px; background:var(--paper); font-weight:600; color:var(--ink); }
.res-units{ margin-top:14px; text-align:center; font-size:12.5px; color:var(--ink-soft); }
.ru-chip{ display:inline-block; margin:0 4px; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:var(--paper); font-weight:700; color:var(--ink); cursor:pointer; transition:border-color .15s, color .15s; }
.ru-chip:hover{ border-color:var(--clay); color:var(--clay); }
.res-px-cell{ fill:var(--moss); }
.res-frame{ fill:none; stroke:var(--ink); stroke-width:1.5; }
.res-dim{ stroke:var(--ink-soft); stroke-width:1; }
.res-dim-label{ font-family:var(--font-mono); font-size:11px; fill:var(--ink-soft); text-anchor:middle; }
.res-title{ font-family:var(--font-ui); font-size:12px; font-weight:700; fill:var(--ink); text-anchor:middle; }
.res-compare{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }
.res-compare-lead{ font-size:12.5px; color:var(--ink-soft); }
.res-compare-sim{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); margin:8px 0 14px; }
.res-compare .dtcmp-wrap{ overflow-x:auto; }
.res-compare-lead .term-chip{ margin-left:2px; }

/* 짝개념 다이어그램 — 관용도 / 다이나믹 레인지 / 입상성·노이즈 */
.lat-bar-track{ fill:var(--paper-2); stroke:var(--line); stroke-width:1; }
.lat-bar-range{ fill:var(--moss); opacity:.5; }
.lat-row-label{ font-family:var(--font-ui); font-size:11px; fill:var(--ink-soft); }
.lat-range-num{ font-family:var(--font-mono); font-size:10px; fill:var(--ink); text-anchor:middle; font-weight:700; }
.lat-tick{ stroke:var(--line); stroke-width:1; }
.lat-zero{ stroke:var(--clay); stroke-width:1.5; stroke-dasharray:3 3; }
.lat-factors{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:10px; }
.lat-factors span{ display:inline-block; margin:3px 3px 0; padding:2px 9px; border:1px solid var(--line); border-radius:999px; }
.dr-bracket{ fill:none; stroke:var(--moss); stroke-width:2; }
.dr-clip{ fill:var(--rust); opacity:.26; }
.dr-cap{ font-family:var(--font-mono); font-size:10.5px; fill:var(--ink-soft); }
.gn-panel-label{ font-family:var(--font-ui); font-size:11.5px; fill:var(--ink-soft); text-anchor:middle; font-weight:700; }

/* ---------- Camera Raw 패널 해부도 (로우파일 컨버터) ---------- */
.acr-panel{ fill:var(--paper); stroke:var(--line); stroke-width:1.5; }
.acr-inset{ fill:var(--paper-2); stroke:var(--line); stroke-width:1; }
.acr-slot{ fill:var(--moss-tint); stroke:var(--line-soft); stroke-width:1; }
.acr-grid{ stroke:var(--line-soft); stroke-width:1; fill:none; }
.acr-curve{ fill:none; stroke:var(--moss); stroke-width:2; }
.acr-node{ fill:var(--paper); stroke:var(--moss); stroke-width:2; }
.acr-shape{ fill:var(--ink-faint); opacity:.42; }
.acr-mark{ fill:var(--rust); }
.acr-frame{ fill:none; stroke:var(--ink); stroke-width:1.5; }
.acr-title{ font-family:var(--font-ui); font-size:13px; font-weight:700; fill:var(--ink); }
.acr-label{ font-family:var(--font-mono); font-size:11.5px; fill:var(--ink-soft); }
.acr-legend{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }
.acr-num{ fill:var(--clay); }
.acr-num-t{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; fill:var(--paper); text-anchor:middle; }

/* ---------- 로우파일 컨버터 다이어그램 — 정독용이라 다른 곳보다 크게 ---------- */
.acr-diagram{ margin-left:-10px; margin-right:-10px; padding:20px 16px; }
.acr-diagram svg{ width:100%; height:auto; max-width:none; display:block; margin:0 auto; }
/* 한글이 섞이는 라벨은 UI 폰트로 (JetBrains Mono엔 한글 글리프가 없어 시스템 모노로 떨어짐) */
.acr-diagram .acr-label{ font-family:var(--font-ui); font-size:12px; }
.acr-diagram .diagram-readout{ font-size:13.5px; line-height:1.55; }
.acr-idiag-title{ font-size:14px; color:var(--ink); margin-bottom:10px; }
.acr-idiag-sub{ font-size:12.5px; color:var(--ink-faint); margin:10px 0 4px; }
.acr-chip-row{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 4px; }
.acr-chip{
  font-family:var(--font-ui); font-size:13px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer;
}
.acr-chip:hover{ border-color:var(--moss); color:var(--ink); }
.acr-chip.active{ background:var(--moss); color:var(--on-dark); border-color:var(--moss); }
.acr-chip-hot{ border-color:var(--rust); color:var(--rust); }
.acr-chip-hot.active{ background:var(--rust); color:var(--on-dark); border-color:var(--rust); }
.acr-range-row{ display:flex; align-items:center; gap:12px; margin:16px 0 4px; font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.acr-range{ flex:1; accent-color:var(--moss); height:24px; }
.acr-range-val{ font-family:var(--font-mono); font-size:13.5px; color:var(--moss-dark); min-width:40px; text-align:right; }
.acr-splitgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0; }
.acr-splitcol{ border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:var(--paper); }
.acr-splitcol-h{ font-family:var(--font-ui); font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.acr-splitcol-i{ font-size:12.5px; color:var(--ink-soft); padding:3px 0; line-height:1.4; }
.acr-splitcol-i.moved{ color:var(--rust); font-weight:700; }
.acr-vs-swatch-lab{ font-size:12px; }
@media (max-width:560px){ .acr-splitgrid{ grid-template-columns:1fr; } .acr-diagram{ margin-left:0; margin-right:0; } }

/* ---------- 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; }
/* 손가락으로 누르는 화면에서는 31px가 너무 얕다. 글자 크기는 그대로 두고
   높이만 키운다(다이어그램 칩이 316개라 폭까지 늘리면 줄이 넘친다). */
@media (max-width:560px){
  .chip, .acr-chip{ min-height:38px; display:inline-flex; align-items:center; }
  .chip.small{ min-height:34px; }
  .chip-emoji{ min-height:0; display:flex; }
}
.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-q .tag.tag-cat{ color:var(--clay); background:var(--clay-tint); }
.qa-q .tag.tag-cat + .tag{ margin-left:6px; }
.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); }

/* 오답노트 담기/빼기 토글 (구술 예상문답 목록 · 모의구술 결과) */
.qa-note-actions{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; }
.qa-note-toggle{
  font-family:var(--font-ui); font-size:12px; padding:5px 12px; border-radius:999px;
  border:1px solid var(--clay); background:none; color:var(--clay); cursor:pointer; transition:background .15s, color .15s;
}
.qa-note-toggle:hover{ background:var(--clay-tint); }
.qa-note-toggle.active{ background:var(--clay); color:var(--on-dark); border-color:var(--clay); }
.qa-note-toggle.active:hover{ background:var(--clay); opacity:.88; }

/* ---------- History ---------- */
.tabbar{ display:inline-flex; gap:4px; margin-bottom:30px; padding:4px; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; }
.tabbar button{
  background:none; border:none; padding:8px 20px; font-size:14.5px; font-weight:600; cursor:pointer;
  color:var(--ink-soft); border-radius:999px; font-family:var(--font-serif); transition:background .15s, color .15s;
}
/* 좁은 폰에서는 탭이 한 줄에 안 들어간다(구술 4개·쉬어가기 5개). 넘친 탭이 레이아웃
   뷰포트를 넓혀 화면 전체가 밀리지 않도록, 가려지지 않게 두 줄로 접는다. */
@media (max-width:560px){
  .tabbar{ max-width:100%; flex-wrap:wrap; border-radius:20px; }
  .tabbar button{ padding:8px 12px; font-size:14px; white-space:nowrap; }
}
.tabbar button:hover{ color:var(--ink); }
.tabbar button.active{ color:var(--on-dark); background:var(--moss); }
.tabbar button.active:hover{ color:var(--on-dark); }
.tabbar button .pill-count{ margin-left:2px; }
.tabbar button.active .pill-count{ color:var(--on-dark); opacity:.8; }
/* 사진사: 연대표 / 사진사 도감 — 알약 탭 대신 두 칸 카드형 선택지.
   작은 탭이라 도감을 못 보고 지나치는 일이 잦아서, 폭을 다 쓰고 한 줄 설명을 붙였다. */
.tabbar.hist-tabbar{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:560px;
  padding:0; background:none; border:none; border-radius:0; margin-bottom:26px;
}
.hist-tabbar button{
  display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px;
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:14px;
  color:var(--ink); transition:border-color .15s, background .15s, transform .15s;
}
.hist-tabbar button:hover{ border-color:var(--moss); color:var(--ink); transform:translateY(-1px); }
.hist-tabbar button.active{ background:var(--moss-tint); border-color:var(--moss); color:var(--ink); }
.hist-tabbar button.active:hover{ color:var(--ink); transform:none; }
.hist-tabbar .ht-ico{ font-size:24px; line-height:1; flex-shrink:0; }
.hist-tabbar .ht-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hist-tabbar .ht-name{ font-size:16.5px; font-weight:700; }
.hist-tabbar .ht-sub{ font-size:12.5px; font-weight:500; color:var(--ink-soft); }
.hist-tabbar .ht-go{ margin-left:auto; font-size:22px; line-height:1; color:var(--ink-soft); transition:transform .15s; }
.hist-tabbar button:hover .ht-go{ transform:translateX(2px); color:var(--moss); }
.hist-tabbar button.active .ht-go{ visibility:hidden; }
@media (max-width:560px){
  .tabbar.hist-tabbar{ flex-wrap:nowrap; border-radius:0; gap:8px; }
  .hist-tabbar button{ padding:11px 12px; gap:9px; white-space:normal; font-size:inherit; }
  .hist-tabbar .ht-ico{ font-size:20px; }
  .hist-tabbar .ht-name{ font-size:15px; }
  .hist-tabbar .ht-sub{ font-size:11.5px; white-space:nowrap; }
}
/* 세로 화면: 카드 두 칸을 아래 본문 폭에 맞춘다(가로 화면은 560px 상한 유지) */
@media (orientation:portrait){
  .tabbar.hist-tabbar{ max-width:none; }
}
/* 아주 좁은 폰: 아이콘을 빼서 설명 줄이 한 줄에 들어가게 */
@media (max-width:400px){
  .hist-tabbar .ht-ico{ display:none; }
}

/* 연대표 — 시대별 리더: 한 번에 한 시대만 보여 준다(왼쪽 목차 + 오른쪽 본문, 좁은 화면은 선택 상자) */
.era-bar{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin:0 0 14px; }
.era-pick{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; text-align:left; font-family:var(--font-ui); font-size:14px; font-weight:600; color:var(--ink); padding:10px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); cursor:pointer; }
.era-pick .n{ font-size:12px; color:var(--moss-dark); font-variant-numeric:tabular-nums; flex:none; }
.era-pick .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.era-pick .chev{ flex:none; font-size:12px; color:var(--ink-faint); transition:transform .18s ease; }
.era-reader.pick-open .era-pick .chev{ transform:rotate(180deg); }
.era-pick:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }
.era-helix-link{ flex:none; font-size:13px; font-weight:600; color:var(--moss-dark); text-decoration:none; white-space:nowrap; padding:6px 2px; }
.era-helix-link:hover{ text-decoration:underline; }
.era-toc{ display:none; }
/* sticky 헤더(내비바 + 전체검색바, 줄바꿈 시 최대 ~130px)에 안 가리도록 — #era-N 딥링크 착지 여유. */
.era{ display:none; scroll-margin-top:132px; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.era.open{ display:block; }
.era .era-num{ font-family:var(--font-mono); font-size:13px; color:var(--clay); flex:none; }
.era .era-title{ font-size:22px; line-height:1.35; margin:0 0 16px; }
.era-body{ padding:20px 18px; }
.era-yrs-nb{ display:inline-block; white-space:nowrap; }
.era-tabs{ display:none; }
.era-step{ display:flex; justify-content:space-between; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.era-step-btn{ display:flex; flex-direction:column; gap:2px; max-width:48%; font:inherit; font-size:14px; font-weight:700; line-height:1.4; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); padding:10px 14px; cursor:pointer; text-align:left; }
.era-step-btn small{ font-size:11px; font-weight:600; color:var(--ink-faint); }
.era-step-btn.next{ text-align:right; align-items:flex-end; margin-left:auto; }
.era-step-btn:hover{ border-color:var(--moss); }
.era-col-art > summary{ list-style:none; pointer-events:none; }
.era-col-art > summary::-webkit-details-marker{ display:none; }
@media (min-width:900px) and (max-width:1199px){
  .era-reader .era-cols{ grid-template-columns:minmax(0,1fr); gap:16px 0; }
  .era-reader .era-col-art{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
  .era-col-art > summary{ pointer-events:auto; cursor:pointer; margin-bottom:0; }
  .era-col-art > summary::before{ content:'▸ '; }
  .era-col-art[open] > summary::before{ content:'▾ '; }
  .era-col-art[open] > summary{ margin-bottom:10px; }
}
.qa-dict-links.era-people-links{ flex-wrap:wrap; overflow-x:visible; padding-bottom:8px; }
.era-people-links .term-chip{ flex:none; white-space:nowrap; }
@media (min-width:900px){
  .era-reader{ display:grid; grid-template-columns:clamp(200px, 22vw, 250px) minmax(0,1fr); gap:14px 22px; align-items:start; }
  .era-bar{ grid-column:1 / -1; justify-content:flex-end; margin:0; }
  .era-pick{ display:none; }
  .era-toc{ display:flex; flex-direction:column; gap:2px; grid-column:1; grid-row:2; position:sticky; top:140px; max-height:calc(100vh - 160px); overflow-y:auto; scrollbar-width:thin; }
  .era-pane{ grid-column:2; grid-row:2; min-width:0; }
}
.era-toc-i{ display:grid; grid-template-columns:24px 1fr; grid-template-areas:"n t" ". y"; column-gap:6px; text-align:left; padding:8px 10px; border:0; border-left:3px solid var(--line); border-radius:0 8px 8px 0; background:transparent; cursor:pointer; font:inherit; }
.era-toc-i.s-A{ border-left-color:var(--moss); }
.era-toc-i.s-B{ border-left-color:var(--clay); }
.era-toc-i.s-axis{ border-left-color:var(--ink-faint); }
.era-toc-i.s-cross, .era-toc-i.s-all{ border-left-color:var(--rust); }
.era-toc-i .n{ grid-area:n; font-variant-numeric:tabular-nums; font-size:11px; color:var(--ink-faint); padding-top:2px; }
.era-toc-i .t{ grid-area:t; font-size:13px; line-height:1.4; color:var(--ink); }
.era-toc-i .y{ grid-area:y; font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--ink-faint); }
.era-toc-i:hover{ background:var(--card); }
.era-toc-i.on{ background:var(--card); box-shadow:inset 0 0 0 1px var(--line); }
.era-toc-i.on .t{ font-weight:700; color:var(--moss-dark); }
.era-toc-i:focus-visible{ outline:2px solid var(--moss); outline-offset:1px; }
@media (max-width:899px){
  .era-reader.pick-open .era-toc{ display:flex; flex-direction:column; gap:2px; max-height:56vh; overflow-y:auto; padding:8px; margin:0 0 14px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
}
@media (max-width:720px){
  .era-tabs{ display:flex; border-bottom:1px solid var(--line); margin:0 0 14px; }
  .era-tabs button{ flex:1; padding:10px 4px; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-soft); background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
  .era-reader[data-tab="flow"] .era-tabs [data-t="flow"],
  .era-reader[data-tab="detail"] .era-tabs [data-t="detail"],
  .era-reader[data-tab="exam"] .era-tabs [data-t="exam"]{ color:var(--moss-dark); border-bottom-color:var(--moss); }
  .era-reader[data-tab="flow"] :is(.era-rest, .era-exam, .era-people-links, .era-col-art),
  .era-reader[data-tab="detail"] :is(.era-flow, .era-exam, .era-col-art),
  .era-reader[data-tab="art"] :is(.era-flow, .era-rest, .era-exam, .era-people-links, .era-col-photo),
  .era-reader[data-tab="exam"] :is(.era-flow, .era-rest, .era-people-links, .era-col-art){ display:none; }
  .era-reader[data-tab="art"] .era-col-art{ border-top:0; padding-top:0; }
  .era-exam{ border:0; background:none; margin-top:0; }
  .era-exam > summary{ display:none; }
  .era-exam > :not(summary){ margin-left:0; margin-right:0; }
}
.era-sub{ margin:0 0 8px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--card); }
.era-sub > summary{ cursor:pointer; padding:10px 14px; font-size:14px; font-weight:700; line-height:1.5; color:var(--ink); list-style:none; }
.era-sub > summary::-webkit-details-marker{ display:none; }
.era-sub > summary::before{ content:'▸ '; color:var(--ink-faint); }
.era-sub[open] > summary::before{ content:'▾ '; }
.era-sub[open] > summary{ border-bottom:1px solid var(--line); }
.era-sub > :not(summary){ margin-left:14px; margin-right:14px; }
.era-sub > ul, .era-sub > ol{ padding-left:20px; margin-top:10px; margin-bottom:12px; }
.era-sub > p{ margin-top:10px; }
.viz-helix-intro{ font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0 0 12px; }
.viz-helix-go{ text-align:center; margin:12px 0 0; }
.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; }
/* 시대 도입 문단(목록 앞 리드 문장) — 브라우저 기본 16px라 주변 목록/표보다 혼자 커 보이던 것 통일 */
.era-col-photo p, .era-body .hist-clip p{ font-size:14px; line-height:1.7; color:var(--ink); margin:0 0 12px; }

/* 시대 챕터 표지 · 흐름 잡기 강조 박스 · 시험 포인트 접기 */
.era-chapter{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 16px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-faint); }
.era-chapter .ec-strand{ font-family:var(--font-ui); letter-spacing:0; font-weight:700; font-size:12px; padding:2px 9px; border-radius:999px; border:1px solid currentColor; color:var(--ink-soft); }
.era-chapter.s-A .ec-strand{ color:var(--moss); }
.era-chapter.s-B .ec-strand{ color:var(--clay); }
.era-chapter.s-cross .ec-strand, .era-chapter.s-all .ec-strand{ color:var(--rust); }
.era-flow{ margin:0 0 18px; padding:12px 16px 2px; background:var(--card); border-left:3px solid var(--moss); border-radius:0 var(--radius-m) var(--radius-m) 0; }
.era-flow-label{ font-size:12px; font-weight:700; color:var(--moss-dark); margin-bottom:8px; }
.era-exam{ margin:18px 0 6px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--card); }
.era-exam > summary{ cursor:pointer; padding:10px 14px; font-size:13px; font-weight:700; color:var(--ink); list-style:none; }
.era-exam > summary::-webkit-details-marker{ display:none; }
.era-exam > summary::before{ content:'▸ '; color:var(--ink-faint); }
.era-exam[open] > summary::before{ content:'▾ '; }
.era-exam[open] > summary{ border-bottom:1px solid var(--line); }
.era-exam > :not(summary){ margin-left:14px; margin-right:14px; }
.era-exam > ul{ padding-left:20px; margin-top:10px; margin-bottom:12px; }

.era-cols{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); 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); }

/* ── 연대표 · 나선형 조망 ── */
.era-helix-wrap{ margin:2px 0 22px; }
.eh3{ max-width:1120px; margin:0 auto; }
@media (min-width:900px){ .eh3-name{ font-size:14px; } .eh3-yrs{ font-size:10.5px; } }
.eh3-stage{ position:relative; width:100%; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
.eh3-stage.dragging{ cursor:grabbing; }
.eh3-stage:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; border-radius:8px; }
.eh3-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.eh3-probe{ position:absolute; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none; }
.eh3-node{ position:absolute; left:0; top:0; width:26px; height:26px; padding:0; border:0; border-radius:50%; font-family:var(--font-mono); font-size:10.5px; font-weight:700; line-height:26px; text-align:center; color:var(--on-dark); background:var(--ink-soft); cursor:pointer; box-shadow:0 0 0 2px var(--paper); will-change:transform; }
.eh3-node.s-A{ background:var(--moss); }
.eh3-node.s-B{ background:var(--clay); }
.eh3-node.s-axis, .eh3-node.s-cross, .eh3-node.s-all{ color:var(--paper); }
.eh3-node.s-cross::after, .eh3-node.s-all::after{ content:''; position:absolute; inset:3px; border:1.5px solid var(--paper); border-radius:50%; pointer-events:none; }
.eh3-node.s-cross::after{ inset:4px; border-radius:2px; transform:rotate(45deg); }
.eh3-node:hover{ filter:brightness(1.12); }
.eh3-node:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; }
.eh3-lab{ position:absolute; z-index:1; transform:translateY(-50%); display:flex; flex-direction:column; gap:1px; padding:2px 4px; border:0; background:none; font:inherit; cursor:pointer; text-align:left; }
.eh3-lab.l{ text-align:right; align-items:flex-end; }
.eh3-name{ font-family:var(--font-ui); font-size:12.5px; line-height:1.3; color:var(--ink); }
.eh3-yrs{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-faint); }
.eh3-lab:hover .eh3-name{ color:var(--moss-dark); }
.eh3-stage{ isolation:isolate; }
.eh3-lab{ transition:opacity .3s; }
.eh3-lab.sel .eh3-name{ font-weight:700; color:var(--moss-dark); }
.eh3-stage.has-sel .eh3-lab.fut{ opacity:.42; }
.eh3.iso-A .eh3-lab.s-B, .eh3.iso-B .eh3-lab.s-A{ opacity:.22; }
/* 위쪽 조작부 — 카드·스크럽바·버튼이 스크롤을 따라와서, 아래쪽 시대를 눌러도 설명이 계속 보인다 */
/* 구조: .eh3-ui(조작부 묶음) = .eh3-top(보기·버튼) + .eh3-card(큰 카드) + .eh3-scrub. 좁으면 묶음을 풀어 순서만 바꾼다(큰 카드는 나선 아래). */
.eh3{ display:flex; flex-direction:column; }
.eh3-ui{ display:contents; }
.eh3-top{ order:1; margin:0 0 8px; }
.eh3-scrub{ order:2; margin:0 0 10px; }
.eh3-mini{ order:3; }
.eh3-stage{ order:4; }
.eh3-card{ order:5; }
.eh3-mx{ order:6; }
.eh3[data-view="matrix"] .eh3-card{ order:3; margin-bottom:12px; }
.eh3[data-view="matrix"] .eh3-mx{ order:4; }

.eh3-ctl{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; }
.eh3-ctl button{ font:inherit; font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer; }
.eh3-ctl button:hover{ color:var(--moss-dark); border-color:var(--moss); }
.eh3-ctl .eh3-tourbtn{ color:var(--on-dark); background:var(--moss); border-color:var(--moss); }
.eh3-ctl .eh3-tourbtn:hover{ color:var(--on-dark); filter:brightness(1.1); }
.eh3-ctl .eh3-tourbtn.on{ background:var(--rust); border-color:var(--rust); }
.eh3-sep{ width:1px; height:16px; background:var(--line); margin:0 2px; }
.eh3-iso i{ display:inline-block; width:14px; height:0; border-top:3px solid var(--moss); margin:0 5px 2px 0; vertical-align:middle; }
.eh3-iso.b i{ border-top-color:var(--clay); }
.eh3-iso[aria-pressed="true"]{ color:var(--on-dark); background:var(--moss); border-color:var(--moss); }
.eh3-iso.b[aria-pressed="true"]{ background:var(--clay); border-color:var(--clay); }
.eh3-iso[aria-pressed="true"] i{ border-top-color:var(--on-dark); }
.eh3-card{ min-height:92px; margin:14px 0 6px; padding:12px 16px 10px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); }
.eh3-hint{ margin:0; padding:10px 4px 0; font-size:13px; line-height:1.7; color:var(--ink-soft); text-align:center; }
.eh3-hint b{ color:var(--ink); }
.eh3-c-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 9px; }
.eh3-c-num{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--on-dark); background:var(--ink-soft); border-radius:999px; padding:1px 8px; }
.eh3-c-head.s-A .eh3-c-num{ background:var(--moss); }
.eh3-c-head.s-B .eh3-c-num{ background:var(--clay); }
.eh3-c-head.s-cross .eh3-c-num, .eh3-c-head.s-all .eh3-c-num{ background:var(--rust); }
.eh3-c-name{ font-size:15px; color:var(--ink); }
.eh3-c-yrs{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.eh3-c-tag{ margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-soft); }
.eh3-c-head.s-A .eh3-c-tag{ color:var(--moss); }
.eh3-c-head.s-B .eh3-c-tag{ color:var(--clay); }
.eh3-c-head.s-cross .eh3-c-tag, .eh3-c-head.s-all .eh3-c-tag{ color:var(--rust); }
.eh3-c-blurb{ margin:6px 0 0; font-size:13px; line-height:1.65; color:var(--ink); }
.eh3-c-blurb.dim{ color:var(--ink-faint); }
.eh3-c-art{ margin:5px 0 0; font-size:12px; line-height:1.55; color:var(--ink-soft); }
.eh3-c-art i{ font-style:normal; font-weight:700; color:var(--clay); margin-right:6px; }
.eh3-c-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.eh3-c-acts button{ font:inherit; font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer; }
.eh3-c-acts button:hover:not(:disabled){ color:var(--moss-dark); border-color:var(--moss); }
.eh3-c-acts button:disabled{ opacity:.4; cursor:default; }
.eh3-c-acts .go{ margin-left:auto; color:var(--on-dark); background:var(--moss); border-color:var(--moss); }
.eh3-c-acts .go:hover:not(:disabled){ color:var(--on-dark); filter:brightness(1.1); }
.eh3-scrub{ display:flex; gap:3px; }
.eh3-tick{ flex:1; height:12px; padding:0; border:0; border-radius:3px; background:var(--ink-faint); opacity:.35; cursor:pointer; transition:opacity .2s, transform .2s; }
.eh3-tick.s-A{ background:var(--moss); }
.eh3-tick.s-B{ background:var(--clay); }
.eh3-tick.s-cross, .eh3-tick.s-all{ background:var(--rust); }
.eh3-tick.past{ opacity:.8; }
.eh3-tick:hover{ opacity:1; }
.eh3-tick.on{ opacity:1; transform:scaleY(1.5); }
.eh3-tick:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }
/* 보기 전환(나선·선형·매트릭스) */
.eh3-views{ display:flex; justify-content:center; gap:0; margin:0 auto 8px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--paper); }
.eh3-views button{ font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-soft); background:none; border:0; padding:5px 16px; cursor:pointer; }
.eh3-views button + button{ border-left:1px solid var(--line); }
.eh3-views button[aria-pressed="true"]{ color:var(--on-dark); background:var(--moss); }
.eh3-views button:focus-visible{ outline:2px solid var(--moss); outline-offset:-2px; }
.eh3:not([data-view="helix"]) .eh3-ctl .rot{ display:none; }
.eh3[data-view="matrix"] .eh3-stage{ display:none; }
.eh3:not([data-view="matrix"]) .eh3-mx{ display:none; }
.eh3-spin[aria-pressed="false"]{ color:var(--on-dark); background:var(--clay); border-color:var(--clay); }
.eh3-ctl button:active{ transform:scale(.96); }
/* 비교 */
.eh3-cmpgrid{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:center; }
.eh3-cmpcol{ padding:6px 8px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); min-width:0; }
.eh3-cmpcol .eh3-c-head{ gap:1px 6px; }
.eh3-cmpcol .eh3-c-tag{ margin-left:0; flex-basis:100%; }
.eh3-cmpvs{ font-size:16px; font-weight:700; color:var(--rust); }
.eh3-c-acts button[aria-pressed="true"]{ color:var(--rust); border-color:var(--rust); }
.eh3-node.cmp, .eh3-lab.cmp .eh3-name{ outline:0; }
.eh3-node.cmp{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--rust); }
.eh3-lab.cmp .eh3-name{ color:var(--rust); font-weight:700; }
.eh3-stage.has-sel .eh3-lab.cmp{ opacity:1; }
/* 같은 계열 */
.eh3-c-peers{ margin:5px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12px; }
.eh3-c-peers i{ font-style:normal; font-weight:700; color:var(--ink-faint); margin-right:2px; }
.eh3-c-peers button{ font:inherit; font-size:11.5px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:2px 9px; cursor:pointer; }
.eh3-c-peers button:hover{ color:var(--moss-dark); border-color:var(--moss); }
/* 매트릭스: 계열(행) × 실제 연대(열) */
.eh3-mx:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; border-radius:8px; }
.eh3-mx-scroll{ overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.eh3-mx-in{ min-width:860px; }
.eh3-mx-row{ display:flex; align-items:stretch; margin-bottom:8px; }
.eh3-mx-lab{ flex:0 0 78px; position:sticky; left:0; z-index:3; background:var(--paper); padding:6px 8px 0 0; font-size:12px; font-weight:700; color:var(--ink-soft); }
.eh3-mx-row.s-A .eh3-mx-lab{ color:var(--moss); }
.eh3-mx-row.s-B .eh3-mx-lab{ color:var(--clay); }
.eh3-mx-row.s-X .eh3-mx-lab{ color:var(--rust); }
.eh3-mx-track{ position:relative; flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); }
.eh3-mx-track.axis-row{ background:none; border:0; height:34px; }
.eh3-mx-track.axis-row span{ position:absolute; top:0; transform:translateX(-50%); font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }
.eh3-mx-track > i{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--line); opacity:.7; pointer-events:none; }
.eh3-bar{ position:absolute; height:26px; display:flex; align-items:center; gap:5px; padding:0 7px; min-width:30px; overflow:hidden; font:inherit; font-size:11.5px; color:var(--on-dark); background:var(--ink-soft); border:0; border-radius:7px; cursor:pointer; text-align:left; white-space:nowrap; transition:opacity .3s, transform .15s; }
.eh3-bar b{ font-family:var(--font-mono); font-size:10.5px; }
.eh3-bar span{ overflow:hidden; text-overflow:ellipsis; }
.eh3-bar.s-A{ background:var(--moss); }
.eh3-bar.s-B{ background:var(--clay); }
.eh3-bar.s-cross, .eh3-bar.s-all{ background:var(--rust); }
.eh3-bar:hover{ filter:brightness(1.1); }
.eh3-bar:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.eh3-bar.fut{ opacity:.4; }
.eh3-bar.sel{ opacity:1; box-shadow:0 0 0 2px var(--paper), 0 0 0 4px currentColor; transform:translateY(-1px); z-index:2; }
.eh3-bar.cmp{ opacity:1; outline:2px dashed var(--rust); outline-offset:2px; z-index:2; }
.eh3.iso-A .eh3-bar.s-B, .eh3.iso-B .eh3-bar.s-A{ opacity:.2; }
.eh3-mx-note{ margin:10px 4px 0; font-size:12px; line-height:1.6; color:var(--ink-faint); }

/* 아주 넓은 화면(≥1240px): 카드·조작부는 나선 옆 사이드 패널로 — 나선 폭은 그대로 넓게 쓴다.
   그보다 좁으면 큰 카드는 나선 아래에 두고, 선택한 시대는 위에서 따라오는 한 줄짜리 미니 바(.eh3-mini)로 계속 보여 준다. 매트릭스는 짧아서 미니 바를 쓰지 않는다. */
.eh3-mini{ display:none; }
.eh3-mini.show{ display:flex; align-items:center; gap:7px; position:sticky; top:calc(var(--header-h, 73px) + 6px); z-index:20; margin:0 0 8px; padding:6px 10px; background:var(--card); border:1px solid var(--line); border-radius:999px; box-shadow:0 6px 16px -12px rgba(0,0,0,.4); }
.eh3-mini .eh3-c-num{ flex:none; }
.eh3-mini .mini-name{ font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.eh3-mini .mini-yrs{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); white-space:nowrap; }
.eh3-mini .grow{ flex:1; }
.eh3-mini button{ flex:none; font:inherit; font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px 10px; cursor:pointer; }
.eh3-mini button:disabled{ opacity:.4; cursor:default; }
.eh3-mini .go{ color:var(--on-dark); background:var(--moss); border-color:var(--moss); }
.eh3[data-view="matrix"] .eh3-mini.show{ display:none; }
@media (min-width:1240px){
  .eh3:not([data-view="matrix"]){ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:0 18px; align-items:start; }
  .eh3:not([data-view="matrix"]) .eh3-stage{ grid-column:1; grid-row:1; }
  .eh3:not([data-view="matrix"]) .eh3-mini{ display:none !important; }
  .eh3:not([data-view="matrix"]) .eh3-ui{ display:block; grid-column:2; grid-row:1; position:sticky; top:calc(var(--header-h, 73px) + 8px); max-height:calc(100vh - var(--header-h, 73px) - 24px); overflow-y:auto; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:0 6px 18px -12px rgba(0,0,0,.35); }
  .eh3:not([data-view="matrix"]) .eh3-card{ margin:9px 0 7px; padding:0; border:0; background:none; min-height:92px; }
  .eh3:not([data-view="matrix"]) .eh3-cmpgrid{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .eh3:not([data-view="matrix"]) .eh3-cmpvs{ text-align:center; line-height:1; }
}

/* 대표 작가·작품 — 선택한 시대 옆에 떠 있는 원형 썸네일 */
.eh3-fb{ position:absolute; top:0; z-index:350; display:flex; align-items:center; gap:7px; padding:0; border:0; background:none; cursor:pointer; font:inherit; text-align:left; will-change:transform; }
.eh3-fb.l{ flex-direction:row-reverse; text-align:right; }
.fb-img{ flex:none; width:54px; height:54px; border-radius:50%; overflow:hidden; border:2.5px solid var(--moss); background:var(--paper-2); box-shadow:0 8px 16px -8px rgba(0,0,0,.5); transition:transform .2s; }
.eh3-fb.s-B .fb-img{ border-color:var(--clay); }
.eh3-fb.s-axis .fb-img, .eh3-fb.s-cross .fb-img, .eh3-fb.s-all .fb-img{ border-color:var(--rust); }
.fb-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.eh3-fb:hover .fb-img{ transform:scale(1.07); }
.eh3-fb:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; border-radius:30px; }
.fb-txt{ display:flex; flex-direction:column; min-width:0; padding:3px 10px 4px; background:color-mix(in srgb, var(--card) 90%, transparent); border:1px solid var(--line); border-radius:12px; backdrop-filter:blur(4px); }
.fb-txt b{ font-size:12.5px; line-height:1.3; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-txt i{ font-style:normal; font-size:10.5px; line-height:1.3; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eh3-fb.pt .fb-img{ filter:grayscale(.2); }
.eh3-fb.nar{ flex-direction:column; gap:2px; width:72px; align-items:center; text-align:center; }
.eh3-fb.nar .fb-img{ width:40px; height:40px; border-width:2px; }
.eh3-fb.nar .fb-txt{ padding:1px 5px; max-width:72px; background:none; border:0; backdrop-filter:none; }
.eh3-fb.nar .fb-txt b{ font-size:10.5px; text-shadow:0 0 4px var(--paper), 0 0 4px var(--paper); }
.eh3-fb.nar .fb-txt i{ display:none; }
.eh3-c-feat{ margin:6px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.eh3-c-feat > i{ font-style:normal; font-size:12px; font-weight:700; color:var(--ink-faint); margin-right:2px; }
.eh3-c-feat button{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:2px 10px 2px 2px; cursor:pointer; }
.eh3-c-feat button:hover{ color:var(--moss-dark); border-color:var(--moss); }
.eh3-c-feat img{ width:30px; height:30px; border-radius:50%; object-fit:cover; display:block; }
.eh3:not([data-view="matrix"]) .eh3-c-feat{ display:none; }
@media (prefers-reduced-motion: reduce){ .fb-img{ transition:none; } }

.era-helix-cap{ font-family:var(--font-ui); font-size:13px; line-height:1.65; color:var(--ink-soft); text-align:center; margin:0 auto 14px; max-width:520px; }
.era-helix-cap .a{ color:var(--moss); font-weight:700; }
.era-helix-cap .b{ color:var(--clay); font-weight:700; }
.era-helix-cap .r{ color:var(--rust); font-weight:700; }
.era-helix-cap .ehx-ax{ color:var(--ink-soft); font-weight:700; }
.era-helix-cap .ehx-key{ display:inline-block; width:26px; height:0; border-top:3.5px solid var(--line); vertical-align:middle; margin:0 4px -2px 0; }
.era-helix-cap .ehx-key.a{ border-top-color:var(--moss); }
.era-helix-cap .ehx-key.b{ border-top-color:var(--clay); }
.era-helix-cap .ehx-key.r{ border-top:2px dashed var(--rust); }
/* 칩 목록용 범례 — 칩 왼쪽 색 띠와 같은 색을 쓴다(축=회색, 전환·합류=실선 rust). */
.era-helix-cap .ehx-key.x{ border-top-color:var(--ink-faint); }
.era-helix-cap .ehx-key.c{ border-top-color:var(--rust); }
.era-helix-cap .ehx-cap-list{ display:none; }
.era-helix-list{ display:none; }
@media (max-width:560px){
  /* 폰에서도 나선을 그대로 보여 준다. 라벨은 작게, 카드는 요약만, 조작부는 필수 버튼만. */
  .eh3-name{ font-size:11.5px; line-height:1.25; }
  .eh3-yrs{ font-size:9px; }
  .eh3-lab{ padding:1px 2px; }
  .eh3-ctl button[data-d], .eh3-sep{ display:none; }
  .eh3-card{ min-height:74px; margin:10px 0 6px; padding:10px 12px 8px; }
  .eh3-c-blurb{ font-size:12.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .eh3-c-art{ display:none; }
  .eh3-c-peers{ display:none; }
  .eh3-cmpgrid{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:4px; }
  .eh3-cmpcol .eh3-c-yrs{ display:none; }
  .eh3-views button{ padding:5px 13px; }
  .eh3-mx-in{ min-width:780px; }
  .eh3-c-acts{ margin-top:6px; }
  .eh3-hint{ padding-top:4px; font-size:12.5px; }
  .era-helix-list{ display:none; }
  .era-helix-chip{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--moss); cursor:pointer; font:inherit; }
  .era-helix-chip.s-B{ border-left-color:var(--clay); }
  .era-helix-chip.s-axis{ border-left-color:var(--ink-faint); }
  .era-helix-chip.s-cross,
  .era-helix-chip.s-all{ border-left-color:var(--rust); }
  .ehc-num{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--moss-dark); flex:none; }
  .era-helix-chip.s-B .ehc-num{ color:var(--clay); }
  .ehc-name{ font-size:13.5px; color:var(--ink); flex:1; }
  /* ◇ 전환 / ◎ 합류 — 색 띠가 둘 다 rust라 색으로는 못 나누는 구분을 글리프로 살린다. */
  .ehc-mark{ font-size:11px; color:var(--rust); flex:none; }
  .ehc-yrs{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); flex:none; }
}

.people-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:28px; padding:12px 14px; 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-nav a .people-nav-num{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-right:5px; }
.people-nav-tools{ margin-left:auto; display:flex; gap:8px; align-items:center; }
/* 데스크톱: 칩 8개를 5열 격자로 — 1~5번이 윗줄, 6~8번이 아랫줄, 도구는 아랫줄 오른쪽 두 칸. 열 폭이 같아 줄이 맞는다. */
@media (min-width:981px){
  .people-nav{ display:grid; grid-template-columns:repeat(5,1fr); }
  .people-nav a{ display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.3; }
  .people-nav-tools{ grid-column:4 / 6; justify-content:flex-end; margin-left:0; min-width:0; }
  .people-nav-tools .people-search{ min-width:0; flex:1 1 90px; }
}
.people-view-toggle{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; white-space:nowrap; }
.people-view-toggle:hover{ border-color:var(--moss); color:var(--moss-dark); }
.people-search{ 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:150px; }
.people-search:focus{ outline:none; border-color:var(--moss); }
.people-search::-webkit-search-cancel-button{ cursor:pointer; }

.people-group{ margin-bottom:14px; 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:15px 18px;
}
.people-group-head:hover{ background:var(--card); }
.people-group-head .pg-num{
  flex:none; width:24px; height:24px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--ink-soft); background:var(--card); border:1px solid var(--line);
}
.people-group.open .people-group-head .pg-num{ color:var(--moss-dark); border-color:var(--moss); }
.people-group-head .pg-titlewrap{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.people-group-head h3{ font-size:17px; margin:0; }
.people-group-head .pg-era{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.02em; }
.people-group .pg-count{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.people-group .pg-count::after{ content:'명'; }
.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:18px; }
.people-group.open .people-group-body{ display:block; }
.people-group .intro{ color:var(--ink-soft); font-size:14px; line-height:1.7; margin-bottom:18px; }
.people-group .intro p{ margin:0 0 .7em; }
.people-group .intro p:last-child{ margin-bottom:0; }

/* 인물 = 증거: 이 사람이 어떤 역사적 질문에 연결되는지 (해석 레이어) */
.drawer-role{ margin:0 0 14px; padding:10px 12px; border-left:3px solid var(--clay); background:color-mix(in srgb, var(--clay) 5%, transparent); border-radius:0 var(--radius-s, 6px) var(--radius-s, 6px) 0; font-size:13px; line-height:1.65; color:var(--ink-soft); }
.drawer-role::before{ content:'한 문장 요약'; display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--clay); margin-bottom:3px; }

/* 학습 동선(arc) — 사실 서술과 시각적으로 분리된 해석 레이어 */
.harc{ margin:0 0 22px; padding:14px 16px; border:1px solid var(--line); border-left:3px solid var(--clay); border-radius:var(--radius-m); background:color-mix(in srgb, var(--clay) 5%, transparent); }
.harc-head{ font-family:var(--font-ui); font-size:13px; font-weight:700; color:var(--clay); display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:10px; }
.harc-head .harc-note{ font-weight:400; font-size:11px; color:var(--ink-faint); letter-spacing:0; }
.harc-row{ display:grid; grid-template-columns:132px 1fr; gap:12px; padding:8px 0; border-top:1px solid color-mix(in srgb, var(--clay) 14%, transparent); }
.harc-row:first-of-type{ border-top:0; }
.harc-kick{ display:flex; flex-direction:column; gap:2px; }
.harc-kick b{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--clay); }
.harc-kick span{ font-size:11px; color:var(--ink-faint); }
.harc-txt{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); }
.harc-txt p{ margin:0 0 .5em; }
.harc-txt p:last-child{ margin-bottom:0; }
@media (max-width:560px){ .harc-row{ grid-template-columns:1fr; gap:4px; } .harc-kick{ flex-direction:row; align-items:baseline; gap:6px; } }

/* 인물 카드 그리드 — 균질한 크기 */
.people-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px; align-items:start; }
.pcard{ display:flex; flex-direction:column; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; cursor:pointer; padding:0; font:inherit; color:inherit; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.pcard:hover{ border-color:var(--moss); box-shadow:0 4px 16px rgba(18,23,27,.08); transform:translateY(-2px); }
.pcard:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }
.pcard-cover{ width:100%; aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.pcard-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcard-cover-blank{ display:flex; align-items:center; justify-content:center; background:var(--paper-2); padding:10px; }
.pcard-cover-blank .pcb-name{ font-family:var(--font-ui); font-size:15px; font-weight:600; line-height:1.35; color:var(--ink-soft); text-align:center; word-break:keep-all; }
.pcard-cover-blank .pcb-init{ display:none; font-family:var(--font-mono); font-weight:700; color:var(--ink-soft); }
.pcard-info{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:5px; }
.pcard-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.pcard-tag{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--clay); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px; cursor:pointer; }
.pcard-tag:hover{ background:var(--clay-tint); border-color:var(--clay); }
.pcard h4{ font-size:14.5px; margin:0; line-height:1.35; }
.pcard-en{ display:block; font-size:11px; font-weight:500; color:var(--ink-faint); font-family:var(--font-mono); margin-top:1px; }
.pcard-meta{ font-size:11.5px; color:var(--ink-soft); font-family:var(--font-mono); }

/* 개념·사조·비교 항목 — 그리드 폭 전체 밴드 */
.concept-row{ grid-column:1/-1; display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--clay); border-radius:var(--radius-s); padding:11px 14px; cursor:pointer; font:inherit; color:inherit; transition:background .15s ease; }
.concept-row:hover{ background:var(--clay-tint); }
.concept-row:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }
.concept-kind{ flex:none; font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--clay); border:1px solid var(--clay); border-radius:999px; padding:1px 8px; }
.concept-title{ flex:1; font-size:14px; font-weight:600; color:var(--ink); }
.concept-arrow{ flex:none; color:var(--ink-faint); font-size:14px; }

/* 목록 뷰 */
.people-list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.people-list .pcard{ flex-direction:row; align-items:center; gap:12px; border:none; border-bottom:1px solid var(--line); border-radius:0; padding:9px 14px; }
.people-list .pcard:hover{ transform:none; box-shadow:none; background:var(--paper-2); }
.people-list .pcard:last-child{ border-bottom:none; }
.people-list .pcard-cover{ width:34px; height:34px; aspect-ratio:auto; flex:none; border-radius:50%; }
.people-list .pcard-cover-blank{ padding:0; }
.people-list .pcard-cover-blank .pcb-name{ display:none; }
.people-list .pcard-cover-blank .pcb-init{ display:block; font-size:13px; }
.people-list .pcard-info{ flex-direction:row; align-items:center; gap:10px; padding:0; flex-wrap:wrap; flex:1; }
.people-list .pcard h4{ font-size:14px; }
.people-list .pcard-en{ display:inline; margin:0; }
.people-list .pcard-tags{ order:3; margin-left:auto; }
.people-list .concept-row{ border-radius:0; border-top:none; border-right:none; border-bottom:1px solid var(--line); }
.people-list .concept-row:last-child{ border-bottom:none; }

/* 사조 그룹 — 개념을 소제목으로, 그 아래 작가 카드를 묶는다 (섹션 0~3, 카드 뷰) */
/* 개념·사조 = 구분선 소제목 (담는 상자 아님). 작가 그리드는 그 아래에 flush. */
.cgrp{ margin:22px 0 8px; }
.cgrp:first-child{ margin-top:4px; }
.cgrp-head{ display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; border:none; border-top:2px solid var(--ink); background:none; cursor:pointer; padding:8px 2px 0; font:inherit; color:inherit; }
.cgrp-head .concept-kind{ flex:none; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--clay); }
.cgrp-head .concept-title{ font-size:15px; font-weight:600; color:var(--ink); }
.cgrp-head .cgrp-more{ margin-left:auto; flex:none; font-size:12px; color:var(--ink-faint); }
.cgrp-head:hover .concept-title{ text-decoration:underline; }
.cgrp-head:hover .cgrp-more{ color:var(--moss-dark); }
.cgrp-head-plain{ cursor:default; border-top-color:var(--line); border-top-width:1px; }
.cgrp-head-plain:hover .concept-title{ text-decoration:none; }
.cgrp .people-grid{ margin-top:12px; }
.cgrp-misc .concept-title{ color:var(--ink-soft); font-weight:600; }
.people-grid-lead{ margin-bottom:16px; }

/* 상세 드로어 */
.people-drawer{ position:fixed; inset:0; z-index:180; visibility:hidden; pointer-events:none; transition:visibility 0s linear .24s; }
.people-drawer.open{ visibility:visible; pointer-events:auto; transition-delay:0s; }
.drawer-backdrop{ position:absolute; inset:0; background:rgba(18,23,27,.5); opacity:0; transition:opacity .2s ease; }
.people-drawer.open .drawer-backdrop{ opacity:1; }
.drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(560px, 92vw); background:var(--paper); box-shadow:-8px 0 32px rgba(18,23,27,.18); transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,.2,1); overflow-y:auto; padding:26px 28px 40px; }
.people-drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-close{ position:sticky; top:0; float:right; margin:-14px -16px 0 8px; background:var(--paper); border:none; font-size:20px; color:var(--ink-soft); cursor:pointer; padding:14px 16px; line-height:1; z-index:3; border-radius:0 0 0 10px; }
.drawer-close:hover{ color:var(--ink); }
.drawer-close-btm{ display:block; width:100%; margin-top:28px; padding:11px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-s); font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.drawer-close-btm:hover{ background:var(--line); color:var(--ink); }
.drawer-head{ margin-bottom:18px; padding-right:30px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.drawer-kind{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--clay); margin-bottom:6px; }
.drawer-head h3{ font-size:21px; margin:0 0 4px; }
.drawer-en{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); }
.drawer-meta{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
.drawer-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.drawer-body{ font-size:14px; line-height:1.75; color:var(--ink-soft); }
.drawer-body .txt table{ width:100%; font-size:13px; border-collapse:collapse; margin:10px 0; }
.drawer-body .txt th, .drawer-body .txt td{ border:1px solid var(--line); padding:6px 8px; }
.drawer-sub{ margin-top:16px; }
.drawer-sub strong{ display:block; font-size:14px; color:var(--ink); margin-bottom:4px; }
.pc-outlink{ display:inline-block; margin-top:16px; 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); }
/* 사진사 상세 — 출처 주석(본문 위첨자 번호 + 맨 아래 참고 자료) */
.hist-fn button{ font:inherit; font-size:10.5px; font-weight:700; line-height:1; color:var(--moss-dark); background:none; border:none; padding:0 1px; cursor:pointer; }
.hist-fn button:hover{ text-decoration:underline; }
.hist-fn + .hist-fn::before{ content:","; font-size:10.5px; color:var(--moss-dark); }
.hist-refs{ margin-top:22px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); }
.hist-refs-h{ font-weight:700; color:var(--ink); margin-bottom:6px; }
.hist-refs ol{ margin:0; padding-left:20px; }
.hist-refs li{ margin:3px 0; line-height:1.55; border-radius:4px; transition:background .3s; }
.hist-refs li a{ color:var(--moss-dark); }
.hist-refs li.hist-ref-hit{ background:var(--moss-tint); }
/* 사진사 상세: 좁은 화면은 요약·본문·영상·소제목·사진·링크 순으로 쌓는다(래퍼는 투명하게 두고 order로 원래 순서 유지) */
.drawer-cols, .dc-left, .dc-right{ display:contents; }
.drawer-cols{ display:flex; flex-direction:column; }
.drawer-cols .drawer-role{ order:1; }
.drawer-cols .txt{ order:2; }
.drawer-cols .dc-video{ order:3; }
.drawer-cols .dc-sub{ order:4; }
.drawer-cols .more-imgs{ order:5; }
.drawer-cols .dc-b{ order:6; }
/* 넓은 PC 화면(1500px+): 사진이 있는 카드는 서랍을 넓혀 글 왼쪽·사진/영상 오른쪽, 같은 폭 2단으로 */
@media (min-width:1500px){
  .drawer-panel.drawer-wide{ width:min(1120px, 92vw); }
  .drawer-wide .drawer-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; align-items:start; }
  .drawer-wide .drawer-cols{ align-items:stretch; }
  .drawer-wide .dc-right{ display:block; min-width:0; }
  .drawer-wide .dc-left{ display:flex; flex-direction:column; min-width:0; }
  .drawer-wide .dc-b{ display:contents; }
  .drawer-wide .dc-left .pc-outlink{ align-self:flex-start; }
  .drawer-wide .dc-left .hist-refs{ margin-top:auto; }
  .drawer-wide .dc-sub{ margin-bottom:22px; }
  .drawer-wide .drawer-cols > *, .drawer-wide .dc-left > *, .drawer-wide .dc-right > *{ order:0; }
  .drawer-wide .dc-right > :first-child, .drawer-wide .dc-video > :first-child{ margin-top:0; }
  .drawer-wide .more-imgs{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:0; }
  .drawer-wide .dc-video + .more-imgs{ margin-top:14px; }
  .drawer-wide .more-imgs .pc-img-fig:first-child{ grid-column:1 / -1; }
  .drawer-wide .more-imgs .pc-img-fig img{ height:auto; max-height:380px; object-fit:contain; background:var(--paper-2); }
  .drawer-wide .more-imgs .pc-img-fig:not(:first-child) img{ height:150px; object-fit:cover; }
}
.drawer-body .more-imgs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:14px; }
.drawer-body .pc-img-fig{ margin:0; }
.drawer-body .pc-img-fig img{ width:100%; height:100px; object-fit:cover; border-radius:var(--radius-s); cursor:zoom-in; display:block; }
.drawer-body .pc-img-fig figcaption{ font-size:10.5px; color:var(--ink-faint); line-height:1.4; margin-top:4px; }

/* 스크림은 거의 불투명 + 블러 — 예전엔 뒤 본문 글자가 그대로 비쳐서 캡션과 겹쳐 읽혔다. */
/* z-index는 투어(900)·홈 화면 배너(880)보다 위 — 예전 200은 다이어그램 뷰어(210)·영상 전체화면(215)에 깔렸다. */
.lightbox{ display:none; position:fixed; inset:0; background:rgba(14,18,21,.975); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:1000; }
.lightbox.open{ display:block; }
/* 확대하면 이 판이 스크롤된다. 가운데 정렬은 justify-content가 아니라 자식의 margin:auto로 —
   그래야 사진이 화면보다 커졌을 때 위·왼쪽이 잘려서 스크롤로도 못 가는 일이 없다. */
.lightbox-stage{ position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; display:flex; padding:56px 30px 30px; box-sizing:border-box; cursor:zoom-out; }
.lightbox-inner{ position:relative; margin:auto; max-width:min(92vw,900px); display:flex; flex-direction:column; align-items:center; }
.lightbox-inner img{ max-width:100%; max-height:calc(100vh - 170px); max-height:calc(100dvh - 170px); object-fit:contain; border-radius:var(--radius-s); cursor:zoom-in; }
.lightbox.zoomed .lightbox-stage{ padding:0; cursor:default; }
.lightbox.zoomed .lightbox-inner{ max-width:none; }
.lightbox.zoomed .lightbox-inner img{ max-width:none; max-height:none; border-radius:0; cursor:zoom-out; }
.lightbox.zoomed .lightbox-cap{ display:none; }
@media (max-width:600px){ .lightbox-stage{ padding:56px 8px 20px; } .lightbox-inner{ max-width:100%; } }
/* 라이트박스는 항상 어두운 스크림 위 → 어두운 사진의 가장자리가 스크림에 녹아버린다.
   테마와 무관하게 밝은 매트로 프린트를 받쳐 준다. */
.lightbox-inner img{ background:#c7ccd0; box-shadow:0 0 0 4px rgba(231,236,238,.10), 0 12px 40px -12px rgba(0,0,0,.8); }
/* 캡션은 자기 배경을 깔고 앉는다 — 사진 가장자리나 뒤 배경과 글자가 섞이지 않도록. */
.lightbox-cap{ color:var(--on-dark); font-size:13px; line-height:1.55; margin-top:14px; text-align:center; max-width:min(92vw,760px); padding:7px 15px; border-radius:14px; background:rgba(0,0,0,.55); }
.lightbox-cap:empty{ display:none; }
/* 닫기 버튼은 이미지 위(-40px)가 아니라 화면 모서리에 고정 — 세로로 긴 사진에서 잘려 나가지 않게. */
.lightbox-close{ position:fixed; top:12px; right:16px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; background:rgba(0,0,0,.45); border:none; border-radius:50%; color:var(--on-dark); font-size:19px; cursor:pointer; padding:0; }
.lightbox-close:hover{ background:rgba(0,0,0,.75); }

/* ---------- 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-cat-badge{ float:right; font-family:var(--font-ui); font-size:11px; letter-spacing:0; color:var(--ink-soft);
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px; }
.dict-cross-note{ font-size:12.5px; color:var(--ink-soft); margin:-6px 0 14px; }
.dict-focus-divider{ grid-column:1/-1; display:flex; align-items:center; gap:12px; margin:10px 0 2px; font-size:12.5px; color:var(--ink-soft); }
.dict-focus-divider::before,.dict-focus-divider::after{ content:''; flex:1; height:1px; background:var(--line,currentColor); opacity:.5; }
.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{ background:var(--card); border-color:var(--clay); color:var(--clay); }
.stars-mini{ font-family:var(--font-mono); font-size:10.5px; color:var(--clay); letter-spacing:1px; }
/* 메커니즘 항목 -> 구술 문항: 질문은 한 줄 문장이라 칩 대신 세로 목록으로 쌓는다. */
.related-oral-list{ display:flex; flex-direction:column; gap:6px; }
.related-oral-list a{
  display:block; padding:7px 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); font-size:12.5px; line-height:1.5; color:var(--ink-soft);
}
.related-oral-list a:hover{ border-color:var(--clay); color:var(--clay); }

/* ---------- AI 심화 설명 (Gemini) ---------- */
.deep-explain-host{ margin:6px 0 18px; }
/* ---------- 색 관리: CIE 색도도 (색역 비교 / 렌더링 인텐트) ---------- */
.cie-controls{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
.cie-chip.active{ border-color:var(--cie-c, var(--moss)); color:var(--cie-c, var(--moss-dark)); }
.cie-chip.active::before{
  content:''; width:9px; height:9px; border-radius:2px; margin-right:6px;
  background:var(--cie-c, var(--moss)); display:inline-block;
}
.cie-canvas-wrap{
  position:relative; width:100%; max-width:560px; margin:0 auto;
  aspect-ratio:1 / 1; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius-m);
}
.cie-canvas-wrap canvas{ width:100%; height:100%; display:block; }
.cie-note{ margin:12px auto 0; max-width:560px; font-size:13px; line-height:1.6; color:var(--ink-soft); }
.cie-note p{ margin:0 0 6px; }
.cie-note p:last-child{ margin-bottom:0; }
.cie-caveat{ font-size:12px; color:var(--ink-faint); line-height:1.6; }
@media (max-width:600px){
  .cie-canvas-wrap{ aspect-ratio:1 / 1.1; }
}
.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-ai-notice{
  margin:0 0 8px; padding:5px 9px; border-radius:7px;
  border:1px solid color-mix(in srgb, var(--clay) 35%, var(--line));
  background:color-mix(in srgb, var(--clay) 7%, transparent);
  font-size:11.5px; line-height:1.5; color:var(--ink-faint);
}
.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); }
.deep-usage{ margin:8px 0 0; font-size:11.5px; color:var(--ink-faint); }

/* ---------- 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);
}

/* ---------- Real-question source toggle & virtual note ---------- */
.realq-source-toggle{ gap:8px; margin-bottom:12px; }
.realq-source-note{
  font-size:12.5px; line-height:1.55; color:var(--ink-faint);
  margin:0 0 14px; padding:9px 12px; border-left:2px solid var(--rule);
}

/* ---------- Real-question portfolio-type filter ---------- */
.realq-ptype{
  border:1px solid var(--moss); border-left-width:4px; border-radius:10px; padding:12px 14px; margin-bottom:14px;
  background:var(--moss-tint);
}
.realq-ptype > summary{
  cursor:pointer; font-family:var(--font-ui); letter-spacing:0; color:var(--ink); list-style:none;
  display:flex; align-items:center; gap:12px;
}
.realq-ptype > summary::-webkit-details-marker{ display:none; }
.realq-ptype-head{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.realq-ptype-title{ font-size:15px; font-weight:700; color:var(--moss-dark); }
.realq-ptype-title::before{ content:'▸ '; }
.realq-ptype[open] .realq-ptype-title::before{ content:'▾ '; }
.realq-ptype-hint{ font-size:12.5px; font-weight:400; color:var(--ink-soft); }
.realq-ptype-cta{
  flex:none; padding:6px 12px; border-radius:999px; background:var(--moss); color:#fff;
  font-size:12.5px; font-weight:600; white-space:nowrap;
}
.realq-ptype[open] .realq-ptype-cta{ display:none; }
.realq-ptype > summary:hover .realq-ptype-cta{ filter:brightness(1.12); }
.realq-ptype-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px;
}
.realq-ptype-lbl{
  font-family:var(--font-ui); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-faint); min-width:64px;
}
/* 유형 박스: 라벨 열을 고정하고 칩은 오른쪽 칸에서 줄바꿈 — 줄이 넘어가도 칩 왼쪽 선이 맞는다 */
.realq-ptype-row:has(> .realq-ptype-chips){ flex-wrap:nowrap; align-items:flex-start; gap:12px; }
.realq-ptype-row:has(> .realq-ptype-chips) > .realq-ptype-lbl{ flex:none; width:64px; line-height:31px; }
.realq-ptype-chips{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.realq-ptype-chips .chip{ line-height:1.2; }
.realq-ptype-chips .clearable{ margin-bottom:0; }
.realq-ptype-chips input.side-search{ width:200px; max-width:100%; height:33px; padding:0 14px; font-size:13px; box-sizing:border-box; }

/* ---------- 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-grid.props-duration-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; max-width:340px; margin:0 auto; }
.opt-pill.duration-pill{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 16px; box-sizing:border-box; width:100%; }
.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-size-hint{ display:block; margin-top:4px; font-size:12px; opacity:0.75; }
.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;
}
/* 이미지는 클릭하면 전체 화면 라이트박스로(openLightbox) — 확대해도 이 박스 자체는 절대 커지지 않는다 */
.upload-feedback-col{ max-width:760px; margin:24px auto 0; text-align:left; }
/* 실기 AI 피드백·첨삭 칸 아래 "참고용" 안내 (AI_REF_NOTE, app.js) */
.ai-ref-note{ max-width:760px; margin:10px auto 0; font-size:12.5px; color:var(--ink-faint); text-align:center; line-height:1.6; }
.ai-ref-note::before{ content:"ⓘ "; }
.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-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.viz-tab{
  padding:9px 18px; border-radius:999px; border:1px solid var(--line);
  font-size:14px; font-weight:600; background:var(--card); color:var(--ink-soft);
  text-decoration:none; transition:background .15s,color .15s,border-color .15s;
}
.viz-tab:hover{ border-color:var(--moss); color:var(--ink); }
.viz-tab.active{ background:var(--moss); border-color:var(--moss); color:var(--on-dark); }
.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:repeat(2,minmax(0,1fr)); gap:32px; }
.viz-chart-col{ min-width:0; }
.viz-canvas-wrap canvas{ max-width:100%; }
.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:minmax(0,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-hub{ margin:12px 0 4px; }
.cms-hub svg{ display:block; width:100%; max-width:360px; height:auto; margin:0 auto; }
.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); }
.opt-grid.is-disabled{ opacity:.4; pointer-events:none; }

.exam-run{ display:flex; flex-direction:column; align-items:center; position:relative; }
.timer-ring{ position:relative; width:150px; height:150px; margin:10px auto 14px; }
.exam-pause-btn{
  display:block; margin:0 auto 22px; padding:6px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  font-size:12.5px; font-weight:600; cursor:pointer;
}
.exam-pause-btn:hover{ border-color:var(--clay); color:var(--clay); }
.exam-run.exam-paused .exam-card,
.exam-run.exam-paused .exam-actions,
.exam-run.exam-paused .quiz-progress-bar{
  filter:blur(7px); pointer-events:none; user-select:none;
}
.exam-pause-overlay{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--paper) 62%, transparent);
}
.exam-pause-box{
  text-align:center; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:24px 28px; max-width:320px; box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.exam-pause-box .exam-pause-title{ font-size:16px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.exam-pause-box p{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; }
.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);
}
.exam-mini-timer{
  position:fixed; right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:90;
  padding:10px 16px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink); box-shadow:0 6px 20px rgba(0,0,0,.18);
  font-family:var(--font-mono); font-size:13px; font-weight:700; cursor:pointer;
}
.exam-mini-timer.urgent{ border-color:var(--rust); color:var(--rust); background:var(--rust-tint); }
.exam-timeup-banner{
  width:100%; max-width:440px; margin:0 auto 16px; padding:10px 14px;
  border:1px solid var(--rust); background:var(--rust-tint); color:var(--rust);
  border-radius:10px; font-size:13.5px; font-weight:600; text-align:center;
}
.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); }
.quiz-opt.picked{ background:var(--clay-tint); border-color:var(--clay); color:var(--clay); font-weight:600; }
.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; }

/* 구술 모의고사 — 결과 직전 스스로 채점 단계 */
.selfgrade-list{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.selfgrade-item{ padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); transition:background .15s, border-color .15s; }
.selfgrade-item.sg-correct{ background:var(--moss-tint); border-color:transparent; }
.selfgrade-item.sg-wrong{ background:var(--rust-tint); border-color:transparent; }
.selfgrade-item .sg-q{ font-size:14.5px; font-weight:600; color:var(--ink); }
.selfgrade-item .sg-q .num{ font-family:var(--font-mono); font-size:11px; color:var(--clay); margin-right:6px; }
.selfgrade-item .sg-a{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:13.5px; color:var(--ink-soft); }
.selfgrade-item .sg-actions{ margin-top:12px; }
.selfgrade-item .sg-actions .mark-actions{ margin-top:0; }

/* ---------- 맨 위로 (긴 페이지에서 헤더까지 되짚어 올라가는 스크롤을 없앤다) ---------- */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:48px; height:48px; border-radius:50%; padding:0;
  background:var(--moss); border:1px solid var(--moss-dark); color:var(--on-dark);
  box-shadow:0 4px 14px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06);
  font-size:20px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s, transform .18s, visibility .18s, background .15s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
/* 도감 드로어(z 180)·다이어그램 뷰어(z 210) 등 자체 스크롤 패널 위로 떠야 한다 */
.to-top.on-panel{ z-index:220; }
.to-top:hover{ filter:brightness(1.12); transform:translateY(-1px); }

/* ---------- 모바일 메뉴 버튼(하단 왼쪽) ----------
   헤더의 ☰는 화면 오른쪽 맨 위 — 한 손으로 든 폰에서 엄지가 가장 닿기 어려운
   지점이고, 아래로 읽어 내려가면 헤더가 개켜져(.header-tuck) 아예 사라진다.
   그때만 같은 메뉴를 엄지 영역인 하단 왼쪽에 띄운다 — 헤더 ☰와 동시에
   보이는 일은 없다. 오른쪽 아래는 '맨 위로'가 쓰고 있어 반대쪽에 둔다. */
.nav-fab{ display:none; }

/* ---------- 메커니즘 데스크톱용 이전/다음 플로팅 버튼 ----------
   본문이 길면 이전/다음 버튼이 맨 아래로 밀려 스크롤을 다 해야 나온다.
   화면 오른쪽 가장자리에 고정해 스크롤 없이 바로 이동할 수 있게 한다.
   모바일은 이미 같은 역할의 하단 바(.mtopbar)가 있어 아래 미디어쿼리로 숨긴다. */
.mech-fab-nav{
  position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:78;
  display:none; flex-direction:column; gap:10px;
}
.mech-fab-nav.show{ display:flex; }
.mech-fab-nav a{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  font-size:19px; font-weight:600; text-decoration:none; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.04);
  transition:background .15s, border-color .15s, transform .15s;
}
.mech-fab-nav a:hover{ background:var(--paper-2); border-color:var(--moss); transform:translateY(-1px); }
.mech-fab-nav a[aria-disabled="true"]{ opacity:.28; pointer-events:none; }

/* ---------- 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); }

/* 모바일 전용 UI — 데스크톱에선 존재하지 않는다 (아래 미디어쿼리에서 실제 배치) */
.mtopbar,
.side-sheet-backdrop{ display:none; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; gap:24px; }
  .hero-visual{ display:none; }
  .hero-sched{ align-self:stretch; }
  .app-layout{ grid-template-columns:1fr; }
  /* 모바일: 목차성 툴바(메커니즘 사이드·사진사 people-nav)를 문서 흐름에서
     빼내 '아래에서 올라오는 시트'로 전환. 예전엔 본문 위에 박혀 페이지
     스크롤과 겹치고 화면을 덮었다. 하단 바의 '목차' 버튼으로 연다. */
  .side,
  .people-nav{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:75;
    max-height:82vh; margin:0; border:none; border-right:none; border-bottom:none;
    border-radius:16px 16px 0 0;
    background:var(--paper); box-shadow:0 -8px 32px rgba(0,0,0,.28);
    padding:14px 16px calc(18px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    transform:translateY(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  }
  .side.sheet-open,
  .people-nav.sheet-open{ transform:none; }
  .side::before,
  .people-nav::before{ content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--line); margin:2px auto 12px; flex-basis:100%; }
  .side-sheet-backdrop{
    display:block; position:fixed; inset:0; z-index:74; background:rgba(0,0,0,.4);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
  }
  .side-sheet-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }
  body.sheet-lock{ overflow:hidden; }
  /* 그리드 항목이 내부의 넓은 요소(가로 스크롤 다이어그램 등)에 밀려
     트랙보다 커지지 않도록 — 이게 없으면 본문이 화면 밖으로 잘린다. */
  .content-pane{ padding:22px 8px 96px; min-width:0; }
  /* 닫힌 드로어(.nav)는 화면 밖 오른쪽에 세워둔다. position:fixed라도 크롬은
     이걸 문서 가로 스크롤 폭에 넣기 때문에, 잘라내지 않으면 모든 페이지가
     275px쯤 옆으로 밀려 스크롤된다. clip은 뷰포트로 전파되지 않아(크롬)
     가로 스크롤이 그대로 남는다 — hidden이어야 막힌다. 루트 요소의 overflow는
     뷰포트로 넘어가고 html 자신은 visible로 남으므로, 중간 div에 거는 것과
     달리 안쪽 position:sticky(연대표 레일·드로어 헤더)는 깨지지 않는다. */
  html{ overflow-x:hidden; }

  /* ── 모바일 내비: 우측에서 밀려 나오는 드로어 ── */
  .nav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; top:0; right:0; z-index:95;
    width:max-content; min-width:176px; max-width:72vw; height:100dvh; flex:none;
    padding:0 0 calc(20px + env(safe-area-inset-bottom));
    background:var(--paper); border-left:1px solid var(--line);
    box-shadow:-12px 0 40px rgba(0,0,0,.28);
    /* 닫힌 상태를 translateX(102%)로 화면 밖에 두면, html{overflow-x:hidden}으로
       스크롤은 막혀도 모바일 크롬의 레이아웃 뷰포트가 375→650px로 넓어진다.
       그러면 오른쪽에 붙은 고정 요소(맨 위로 버튼 등)가 화면 밖으로 밀려난다.
       그래서 드로어는 제자리에 두고 clip-path로 오른쪽부터 드러낸다. */
    clip-path:inset(0 0 0 100%); transition:clip-path .24s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    visibility:hidden;
  }
  .nav.mobile-open{ clip-path:inset(0 0 0 -60px); visibility:visible; }
  .nav-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
    padding:calc(12px + env(safe-area-inset-top)) 12px 12px 22px;
    border-bottom:1px solid var(--line); margin-bottom:6px;
    position:sticky; top:0; background:var(--paper); z-index:1;
  }
  .nav-drawer-title{ font-family:var(--font-ui); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-faint); }
  .nav-close{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; background:none; border:none; border-radius:10px;
    font-size:17px; line-height:1; color:var(--ink-soft);
  }
  .nav-close:hover{ background:var(--paper-2); color:var(--ink); }

  .nav-links{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; width:100%; gap:0; flex-shrink:0; }
  .nav.mobile-open .nav-end{
    display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; margin:0;
    border-top:1px solid var(--line); margin-top:8px; padding-top:8px;
  }
  .nav a{
    display:flex; align-items:center; gap:13px;
    border-radius:0; padding:13px 22px; font-size:15px; font-weight:500;
    white-space:nowrap; transition:background .12s;
  }
  .nav a:hover{ background:var(--paper-2); color:var(--ink); }
  .nav a.active{
    background:color-mix(in srgb, var(--moss) 13%, transparent);
    color:var(--moss-dark); font-weight:700;
    box-shadow:inset 3px 0 0 var(--moss);
  }
  /* 항목별 글자 수가 제각각이라 줄마다 들쑥날쑥해 보이는 것을 막기 위해
     고정폭 아이콘 열을 왼쪽에 두어 시선이 아이콘 열에 먼저 정렬되게 한다. */
  .nav-ico{
    display:block; flex:none; width:18px; height:18px;
    color:var(--ink-faint); transition:color .12s;
  }
  .nav a.active .nav-ico, .nav a:hover .nav-ico{ color:currentColor; }
  #navAuthLink:not(.nav-user) .nav-ico{ display:none; }
  /* 로그인 링크(비로그인 상태): 드로어 하단 강조 버튼 */
  #navAuthLink:not(.nav-user){
    margin:12px 22px 0; padding:12px; border:1px solid var(--line); border-radius:10px;
    text-align:center; font-weight:700; color:var(--ink);
  }
  #navAuthLink:not(.nav-user):hover{ background:var(--paper-2); border-color:var(--moss); }
  /* 로그인 상태의 이름칩 서브메뉴: 펼침형 */
  .nav.mobile-open .nav-menu{
    position:static; min-width:0; padding:0; border:none; border-radius:0;
    box-shadow:none; background:none;
  }
  .nav.mobile-open .nav-menu a,
  .nav.mobile-open .nav-menu button{ padding:12px 22px 12px 34px; font-size:14px; border-radius:0; }

  html.has-haptic .nav-prefs{
    display:block; width:100%;
    border-top:1px solid var(--line); margin-top:8px; padding-top:8px;
  }
  .nav-pref-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:13px 22px; background:none; border:none;
    font:inherit; font-size:15px; font-weight:500; color:var(--ink);
    text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .nav-pref-toggle:active{ background:var(--paper-2); }
  .nav-pref-toggle:focus-visible{ outline:2px solid var(--moss); outline-offset:-2px; }
  .nav-pref-switch{
    flex:none; position:relative; width:40px; height:23px; border-radius:999px;
    background:var(--line); transition:background .18s;
  }
  .nav-pref-switch::after{
    content:''; position:absolute; top:2px; left:2px; width:19px; height:19px;
    border-radius:50%; background:var(--paper);
    box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .18s;
  }
  .nav-pref-toggle[aria-checked="true"] .nav-pref-switch{ background:var(--moss); }
  .nav-pref-toggle[aria-checked="true"] .nav-pref-switch::after{ transform:translateX(17px); }

  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:90;
    background:rgba(0,0,0,.44);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
  }
  .nav-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }
  body.nav-lock{ overflow:hidden; }
  /* .nav 은 backdrop-filter 를 가진 .site-header 안에 있어 자체 stacking
     context에 갇힌다. 드로어가 열린 동안 헤더 전체를 백드롭 위로 올려야
     드로어 링크가 백드롭에 가려지지 않고 눌린다.

     그리고 여는 동안은 backdrop-filter 를 꺼야 한다. 이 속성은 stacking
     context뿐 아니라 position:fixed 자식의 기준 박스(containing block)까지
     만들어서, 드로어의 top:0 이 뷰포트가 아니라 헤더 기준이 된다.
     거기에 위 overflow:hidden 이 sticky 를 깨뜨려 헤더가 문서 맨 위로
     떨어지므로, 아래로 스크롤한 상태에서 메뉴를 열면 드로어가 헤더를
     따라 화면 위쪽 밖으로 사라졌다(하단 ☰ 버튼이 생기면서 드러난 문제).
     끄면 드로어가 뷰포트 기준으로 돌아온다. 백드롭이 덮고 있어 블러가
     잠시 빠져도 보이지 않는다. */
  body.nav-lock .site-header{
    z-index:95;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }

  .hamburger{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; background:none; border:none; border-radius:9px;
    font-size:20px; color:var(--ink); flex:none; -webkit-tap-highlight-color:transparent;
  }
  .hamburger:hover{ background:var(--paper-2); }
  .hamburger:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }

  .nav-fab{
    position:fixed; left:20px; z-index:80;
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:50%; padding:0;
    background:rgba(var(--paper-rgb),.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line); color:var(--ink);
    box-shadow:0 4px 14px rgba(0,0,0,.3);
    font-size:20px; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent;
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .18s, transform .18s, visibility .18s;
  }
  .nav-fab.show{ opacity:1; visibility:visible; transform:none; }
  .nav-fab:active{ background:var(--paper-2); }
  .nav-fab:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }
  .hd-pill{ margin-left:auto; }
  /* 상단 고정 헤더가 모바일 화면 높이를 계속 잡아먹어서 여백을 줄인다 */
  .header-inner{ padding:10px 16px; gap:14px; }
  .global-search-bar .wrap{ padding:7px 16px; }
  .global-search-input{ padding:8px 14px; }
  /* 아래로 스크롤하면 헤더/하단바를 화면 밖으로 밀어 본문 읽기 영역을 넓힌다. */
  .site-header.header-tuck{ transform:translateY(-100%); }
  /* 한 손 조작용 하단 고정 이동 바 (메커니즘 토픽 화면 전용, JS가 노출) */
  .mtopbar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:none; align-items:stretch; gap:1px;
    background:rgba(var(--paper-rgb),.94); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    transition:transform .28s ease;
  }
  .mtopbar.show{ display:flex; }
  .mtopbar.bar-tuck{ transform:translateY(112%); }
  .mtopbar a, .mtopbar button{
    flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px;
    min-height:46px; padding:0 10px; background:none; border:none;
    font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  }
  .mtopbar a:active, .mtopbar button:active{ background:var(--paper-2); }
  .mtopbar .mtb-toc{ flex:0 0 92px; color:var(--ink); border-left:1px solid var(--line); border-right:1px solid var(--line); }
  .mtopbar a[aria-disabled="true"]{ opacity:.3; pointer-events:none; }
  /* 하단 고정 바(.mtopbar)는 높이 46px + 홈 인디케이터 안전영역이다.
     그만큼 띄우지 않으면 아이폰에서 두 버튼이 바에 걸친다. */
  .to-top, .nav-fab{ bottom:calc(64px + env(safe-area-inset-bottom)); }
  .mech-fab-nav{ display:none !important; }
  /* 사진사 도감 시트 안: 툴바(토글·검색)는 줄바꿈, 검색창은 한 줄 꽉 */
  .people-nav-tools{ margin-left:0; width:100%; flex-wrap:wrap; margin-top:4px; }
  .people-search{ flex:1 1 100%; min-width:0; }
}
/* 모바일: 첫 화면 스크롤을 줄이려 히어로 여백과 학습 맵을 더 압축한다. */
@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; }

  .hero{ padding:32px 18px 30px; }
  .hero p.lead{ font-size:15px; margin-bottom:18px; }

  /* --- 학습 맵: 좁은 화면에선 설명을 제목 아래로 접어 잘리지 않게 --- */
  .home-map-progress-section{ padding-top:32px; padding-bottom:34px; }
  .home-map-card{ align-items:flex-start; }
  .home-map-body{ flex-wrap:wrap; row-gap:2px; }
  .home-map-title{ font-size:14.5px; }
  .home-map-desc{ flex:1 1 100%; white-space:normal; font-size:11.5px; line-height:1.4; }
  .home-map-go{ display:none; }
  .home-map-num{ top:11px; }

  /* --- 용어사전 카드: 여백·버튼 압축 --- */
  .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 .era-title{ font-size:18px; }
  .era-body{ padding:16px 14px; }
  .era-cols{ grid-template-columns:minmax(0,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; }
  .interactive-diagram{ padding:12px; }
}

/* ---------- 메커니즘 전체 지도 (#/mechanism/map) ---------- */
.side-map-link{
  display:block; padding:8px 12px; margin-bottom:12px;
  font-size:13px; font-weight:600; color:var(--moss-dark);
  background:var(--moss-tint); border-radius:8px; text-align:center;
}
.side-map-link:hover{ background:var(--moss); color:var(--on-dark); }
.crumb-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.crumb-row .map-link{
  text-transform:none; letter-spacing:normal; font-family:var(--font-ui);
  font-size:12.5px; font-weight:600; color:var(--moss-dark); white-space:nowrap;
}
.crumb-row .map-link:hover{ text-decoration:underline; }
.mech-part-intro{
  margin:6px 0 16px; padding:8px 12px; font-size:12.5px; line-height:1.5;
  color:var(--ink-soft); background:var(--paper-2); border-radius:var(--radius-s);
}

.mech-map{ max-width:1360px; margin:0 auto; padding:26px 0 80px; }
.mech-map-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.mech-map-head h1{ font-size:24px; margin:0; letter-spacing:-.01em; font-family:var(--font-serif); }
.mech-map-head .back{ font-size:13px; color:var(--ink-soft); font-weight:500; }
.mech-map-head .back:hover{ color:var(--moss-dark); }
.mech-map-sub{ color:var(--ink-soft); font-size:13.5px; margin:0 0 16px; }
.mech-map-search{
  width:100%; max-width:340px; padding:9px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); font-family:var(--font-ui); font-size:13.5px; color:var(--ink); margin-bottom:22px;
}
.mech-map-search:focus{ outline:2px solid var(--moss); outline-offset:1px; border-color:transparent; }
/* 단계 바로가기 — 지도 맨 위에서 4개 단계로 바로 스크롤 */
.mech-stage-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.mech-stage-nav button{
  padding:6px 13px 6px 9px; border:1px solid var(--line); border-radius:999px; cursor:pointer;
  background:var(--card); font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:7px;
}
.mech-stage-nav button:hover{ color:var(--ink); border-color:var(--moss); background:var(--paper-2); }
.mech-stage-nav button b{
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--on-dark);
  background:var(--moss); border-radius:50%; width:18px; height:18px; display:grid; place-items:center;
}

/* 학습 단계 밴드 — 13개 대분류를 4묶음으로 갈라 준다 */
.mech-stage{ margin:0 0 30px; scroll-margin-top:76px; }
.mech-stage.hide{ display:none; }
.mech-stage-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-bottom:7px; border-bottom:2px solid var(--line);
}
.mech-stage-head .no{
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--on-dark);
  background:var(--ink-soft); border-radius:50%; width:20px; height:20px;
  display:grid; place-items:center; flex:none; align-self:center;
}
.mech-stage-head h2{ font-family:var(--font-serif); font-size:18px; font-weight:700; margin:0; letter-spacing:-.01em; }
.mech-stage-head .parts{ font-size:12px; color:var(--ink-faint); }
.mech-stage-head .tc{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.mech-stage-desc{ margin:7px 0 14px; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }

.mech-map-grid{ column-width:330px; column-gap:20px; }
.mech-map-part{
  break-inside:avoid; margin:0 0 20px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-card);
}
/* 지도 쪽도 사이드바와 같은 원칙 — 단계(18) > 대분류(15.5) > 중분류(12.5) > 소분류 칩(12) */
.mech-map-part > h2{
  font-size:15.5px; margin:0; font-family:var(--font-serif); font-weight:700;
  padding:12px 14px 11px; border-bottom:1px solid var(--line-soft);
  border-left:4px solid var(--map-accent, var(--moss));
  display:flex; align-items:baseline; gap:8px;
}
.mech-map-part > h2 a{ color:inherit; }
.mech-map-part > h2 a:hover{ color:var(--map-accent, var(--moss)); }
.mech-map-part > h2 .pc{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); font-weight:400; }
/* 대분류 이름 아래 한 줄 요약 — 이름만으로 안 보이는 "안에 무엇이 있나"를 채운다 */
.mech-map-blurb{
  margin:0; padding:9px 14px 0; font-size:11.5px; line-height:1.5; color:var(--ink-faint);
}
.mech-map-blurb + .mech-map-body{ padding-top:10px; }
.mech-map-body{ padding:12px 14px 14px; }
.mech-map-grp{ margin:0 0 12px; }
.mech-map-grp:last-child{ margin-bottom:0; }
.mech-map-grp > .lbl{
  font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--map-accent, var(--moss));
  margin:0 0 7px; display:flex; align-items:center; gap:7px;
}
.mech-map-grp > .lbl::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.mech-map-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.mech-map-pills a{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:12px; line-height:1.35;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; transition:.12s;
}
.mech-map-pills a:hover{ color:var(--ink); border-color:var(--map-accent, var(--moss)); background:var(--paper-2); }
.mech-map-pills a .sub{
  font-family:var(--font-mono); font-size:9.5px; color:var(--ink-faint);
  background:var(--paper-2); border-radius:999px; padding:0 5px; line-height:1.7;
}
.mech-map-pills a.dim{ opacity:.16; pointer-events:none; }
.mech-map-pills a.seen{ border-color:color-mix(in srgb, var(--moss) 45%, var(--line)); }
.mech-map-pills a.seen::after{
  content:'✓'; font-size:11px; font-weight:700; color:var(--moss); opacity:.8;
}
.mech-map-legend{
  margin:-4px 0 16px; font-size:12px; line-height:1.5; color:var(--ink-faint);
}
.mech-map-legend b{ color:var(--moss); }
.mech-map-part.hide, .mech-map-grp.hide{ display:none; }
@media (max-width:600px){ .mech-map-grid{ column-width:auto; } }

/* 포토샵 단축키 다이어그램 */
.psk-wrap .psk-bar{ align-items:center; }
.psk-os{ display:inline-flex; gap:0; margin-left:auto; }
.psk-os .psk-os-btn{ cursor:pointer; }
.psk-os .psk-os-btn:first-child{ border-top-right-radius:0; border-bottom-right-radius:0; }
.psk-os .psk-os-btn:last-child{ border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; }
.psk-cat{ display:none; }
.psk-cat.active{ display:block; }
.psk-wrap p.psk-note{ margin:0 0 10px; font-size:12px; color:var(--ink-faint); line-height:1.4; }
.psk-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:8px;
}
.psk-item{
  display:flex; align-items:baseline; gap:10px; padding:8px 11px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s);
  scroll-margin-top:80px;
}
.psk-item.flash{ animation:pskFlash 1.3s ease-out; }
@keyframes pskFlash{ 0%,25%{ border-color:var(--moss); background:var(--moss-tint); } 100%{ } }
.psk-keys{ flex:0 0 auto; white-space:nowrap; }
.psk-keys kbd{
  display:inline-block; font-family:var(--font-mono); font-size:11px; line-height:1.5;
  min-width:16px; text-align:center; padding:1px 5px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:4px;
}
.psk-plus{ color:var(--ink-faint); font-size:10px; margin:0 3px; }
.psk-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.35; }

/* 키보드 레이아웃 */
.psk-kbd{ overflow-x:auto; padding:6px 2px 12px; margin-bottom:4px; }
.psk-kbd-inner{ display:inline-flex; flex-direction:column; gap:5px; min-width:560px; }
.psk-kbd-row{ display:flex; gap:5px; }
.psk-key{
  box-sizing:border-box; min-width:38px; min-height:40px; padding:4px 5px 3px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--paper); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:6px; font-family:var(--font-mono); line-height:1;
}
.psk-key .k{ font-size:12px; font-weight:600; color:var(--ink-soft); }
.psk-key .kt{
  font-family:var(--font-ui); font-size:8.5px; font-weight:600; letter-spacing:-.2px;
  color:var(--ink-faint); white-space:nowrap;
}
.psk-key.wide{ min-width:58px; }
.psk-key.space{ flex:1; min-width:150px; }
.psk-key.mod .k{ color:var(--ink-faint); font-size:10px; }
.psk-key.is-hot{ border-color:var(--line); cursor:pointer; }
.psk-key.is-hot .k{ color:var(--ink); }
.psk-key.is-hot .kt{ color:var(--moss); }
.psk-key.is-hot:hover{ border-color:var(--moss); }
.psk-key.is-sel{ background:var(--moss); border-color:var(--moss); }
.psk-key.is-sel .k, .psk-key.is-sel .kt{ color:var(--on-dark); }

@media (max-width:520px){
  .psk-grid{ grid-template-columns:1fr; }
  .psk-os{ margin-left:0; }
}

/* 브라이트 프레임 (RF 뷰파인더 프레임) 다이어그램 */
.bf-body{ fill:var(--paper-2); stroke:var(--line); stroke-width:1.2; }
.bf-win{ fill:var(--paper); stroke:var(--ink-soft); stroke-width:1.2; }
.bf-win-illum{ fill:var(--clay); stroke:var(--clay); }
.bf-mask{ fill:none; stroke:var(--clay); stroke-width:2; }
.bf-mirror{ stroke:var(--moss); stroke-width:3.5; stroke-linecap:round; }
.bf-ray{ fill:none; stroke:var(--clay); stroke-width:1.6; }
.bf-ray-scene{ stroke:var(--moss); }
.bf-eye{ fill:none; stroke:var(--ink-soft); stroke-width:1.6; }
.bf-view{ fill:var(--paper-2); stroke:var(--line); stroke-width:1.2; }
.bf-frame{ fill:none; stroke:var(--clay); stroke-width:1.8; }
.bf-frame-shift{ fill:none; stroke:var(--rust); stroke-width:1.4; stroke-dasharray:4 3; }
.bf-shift-arrow{ stroke:var(--rust); stroke-width:1.4; fill:none; }
.bf-title{ font-family:var(--font-ui); font-size:12.5px; font-weight:600; fill:var(--ink); }
.bf-label{ font-family:var(--font-ui); font-size:11.5px; fill:var(--ink-soft); }
.bf-frame-label{ font-family:var(--font-ui); font-size:11px; font-weight:600; fill:var(--clay); }
.bf-caption{ font-family:var(--font-ui); font-size:12.5px; fill:var(--ink-soft); }
.bf-label-bg{ fill:var(--paper-2); stroke:none; }

/* ===================== 쉬어가기 (사진 영화) ===================== */
.movie-group{ margin-top:34px; }
.movie-group-head{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--clay); margin:0 0 14px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.movie-group-head span{ color:var(--ink-faint); font-weight:400; }
.movie-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px;
}
.movie-card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:18px 18px 16px;
  display:flex; gap:14px; align-items:flex-start;
}
.rt-body{ flex:1; min-width:0; }
.rt-thumb{
  flex:none; width:62px; height:90px; border-radius:6px; overflow:hidden;
  background:var(--paper-2) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; color:var(--ink-faint); user-select:none;
}
.rt-thumb.has-img{ font-size:0; }
.rt-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:520px){ .rt-thumb{ width:52px; height:76px; } }
.movie-mood{
  display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
  padding:2px 8px; border-radius:999px; margin-bottom:10px;
}
.movie-mood.light{ background:var(--moss-tint); color:var(--moss-dark); }
.movie-mood.heavy{ background:var(--clay-tint); color:var(--clay); }
.movie-mood.cred{ background:var(--paper-2); color:var(--ink-soft); }
.movie-title{ font-size:17px; margin:0 0 4px; }
.movie-meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin:0 0 10px; }
.movie-meta .movie-orig{ color:var(--ink-soft); }
.movie-note{ font-size:13.5px; line-height:1.62; color:var(--ink-soft); margin:0; }
.movie-links{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:13px; }
.movie-link{
  font-size:12.5px; font-weight:600; color:var(--moss-dark); text-decoration:none;
}
.movie-link:hover{ text-decoration:underline; }
.movie-link.ext{ color:var(--ink-faint); font-weight:500; }
.movie-link.ext:hover{ color:var(--ink-soft); }
.movie-books-intro{
  font-size:13px; color:var(--ink-faint); margin:-4px 0 16px; line-height:1.6;
}
.movie-foot{
  margin-top:36px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-faint);
}
.movie-foot a{ color:var(--moss-dark); }

/* ===================== 문의 ===================== */
.contact-wrap{ max-width:640px; }
.contact-form{ margin-top:6px; }
.contact-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-field{ display:block; margin-bottom:18px; }
.contact-field > span{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;
}
.contact-field > span em{ font-style:normal; color:var(--ink-faint); text-transform:none; letter-spacing:0; }
.contact-field input,
.contact-field select,
.contact-field textarea{
  width:100%; padding:10px 13px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--paper); color:var(--ink); font-family:inherit; font-size:14px; line-height:1.55;
}
.contact-field textarea{ resize:vertical; min-height:130px; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{ outline:none; border-color:var(--moss); }
.contact-actions{ display:flex; align-items:center; gap:14px; margin-top:4px; }
.contact-status{ font-size:12.5px; color:var(--ink-faint); }
.contact-status.err{ color:var(--rust); }
.contact-done{
  background:var(--moss-tint); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:18px 20px; font-size:14px; line-height:1.65;
}
@media (max-width:520px){
  .movie-grid{ grid-template-columns:1fr; }
}

/* ---------- 회원 인증 (로그인/회원가입/계정) ---------- */
.auth-wrap{ max-width:440px; }
.auth-intro, .auth-note{ font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin:0 0 18px; }
.auth-form{ margin-top:2px; }
.auth-field{ display:block; margin-bottom:16px; }
.auth-field > span{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;
}
.auth-field > span em{ font-style:normal; color:var(--ink-faint); text-transform:none; letter-spacing:0; }
.auth-field input{
  width:100%; padding:10px 13px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--paper); color:var(--ink); font-family:inherit; font-size:14px; line-height:1.55;
}
.auth-field input:focus{ outline:none; border-color:var(--moss); }
.auth-check{ display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink); line-height:1.6; margin:2px 0 18px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--paper-2); }
.auth-check input{ margin-top:2px; flex:none; }
.auth-check a{ font-weight:600; }
.auth-actions{ display:flex; align-items:center; gap:14px; margin-top:4px; flex-wrap:wrap; }
.auth-actions .btn{ padding:11px 20px; font-size:14px; }
.auth-link, .auth-swap a{ font-size:12.5px; color:var(--moss); text-decoration:none; }
.auth-link:hover, .auth-swap a:hover{ text-decoration:underline; }
.auth-status{ font-size:12.5px; color:var(--ink-faint); margin:12px 0 0; min-height:1em; }
.auth-status.err{ color:var(--rust); }
.auth-status.ok{ color:var(--moss); }
.auth-swap{ font-size:12.5px; color:var(--ink-soft); margin:18px 0 0; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:var(--ink-faint); font-size:11px; font-family:var(--font-mono); }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.auth-google{ width:100%; justify-content:center; }
.auth-kakao{
  width:100%; justify-content:center; margin-top:10px;
  background:#FEE500; border-color:#FEE500; color:#000;
}
.auth-kakao:hover{ background:#FDD800; border-color:#FDD800; }
.auth-done{
  background:var(--moss-tint); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:18px 20px; font-size:13.5px; line-height:1.7;
}
.auth-done .auth-hint{ display:block; margin-top:8px; font-size:12px; color:var(--ink-soft); }
.auth-card{
  border:1px solid var(--line); border-radius:var(--radius-m); padding:22px 24px; background:var(--card);
}
.auth-meta{ margin:0 0 18px; }
.auth-meta > div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.auth-meta > div:last-child{ border-bottom:none; }
.auth-meta dt{ color:var(--ink-faint); font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.auth-meta dd{ margin:0; color:var(--ink); text-align:right; word-break:break-all; }
.auth-badge{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:11px; background:var(--paper-2); color:var(--ink-soft); }
.auth-badge.ok{ background:var(--moss-tint); color:var(--moss-dark); }
.auth-hint{ font-size:12px; color:var(--ink-faint); line-height:1.6; margin:0 0 16px; }

/* ============================================================
   학습 진도 추적 · 학습 노트 (진도 체크마크 / 홈 대시보드 / 노트 허브 / 인라인 컴포저)
   ============================================================ */

/* 메커니즘 사이드바 — 열람한 토픽 체크마크 */
.side-topics a.seen,
.side-group-topics a.seen{ position:relative; }
.side-topics a.seen::after,
.side-group-topics a.seen::after{
  content:'✓'; margin-left:6px; font-size:11px; font-weight:700;
  color:var(--moss); opacity:.75;
}
.side-topics a.seen.active::after,
.side-group-topics a.seen.active::after{ color:var(--on-dark); opacity:.9; }

/* 홈 · 학습 현황 대시보드 (학습 맵과 나란히, .home-map-progress-row 참고) */
.pdash-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:10px; }
.pdash-row{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px; }
.pdash-label{ font-size:13px; font-weight:600; color:var(--ink-soft); display:flex; flex-direction:column; gap:1px; }
.pdash-kind{ font-size:9.5px; font-weight:600; letter-spacing:.03em; color:var(--ink-faint); text-transform:uppercase; }
.pdash-bar{ height:8px; border-radius:999px; background:var(--paper-2); overflow:hidden; }
.pdash-fill{ display:block; height:100%; border-radius:999px; background:var(--moss); transition:width .5s ease; }
.pdash-num{ font-family:var(--font-mono); font-size:12px; color:var(--ink); white-space:nowrap; }
.pdash-num i{ color:var(--ink-faint); font-style:normal; }
.pdash-recent{ border-top:1px solid var(--line-soft); padding-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pdash-recent-h{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--font-mono); width:100%; }
.pdash-recent-item{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:5px 10px; border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; color:var(--ink); text-decoration:none; background:var(--card);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pdash-recent-item:hover{ border-color:var(--moss); }
.pdash-recent-dom{ font-size:10.5px; color:var(--moss); font-weight:700; flex:none; }
.pdash-empty{ font-size:13px; color:var(--ink-faint); margin:0; }
.pdash-notes-link{ display:inline-block; margin-top:12px; font-size:12.5px; color:var(--clay); text-decoration:none; }
.pdash-notes-link:hover{ text-decoration:underline; }

/* 학습 노트 허브 (#/notes) */
.notes-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.notes-block{ margin:0 0 34px; }
.notes-block-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.notes-block-head h3{ font-size:15px; margin:0; color:var(--ink); }
.notes-block-n{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-left:6px; }
.notes-clear{ flex:none; border:1px solid var(--line); background:none; color:var(--ink-faint); font:inherit; font-size:11.5px; padding:4px 11px; border-radius:999px; cursor:pointer; }
.notes-clear:hover{ border-color:var(--rust); color:var(--rust); }
.notes-group{ margin:0 0 20px; }
.notes-group h4{ font-size:13px; margin:0 0 10px; color:var(--ink-soft); }
.notes-group-n{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-left:4px; }
.notes-mark-list{ display:flex; flex-wrap:wrap; gap:8px; }
.notes-mark-chip{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:var(--card); overflow:hidden; max-width:100%; }
.notes-mark-chip a{ padding:5px 4px 5px 12px; font-size:12.5px; color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notes-mark-chip a:hover{ color:var(--moss); }
.notes-mark-chip button{ flex:none; border:none; background:none; color:var(--ink-faint); cursor:pointer; font-size:12px; padding:5px 9px 5px 6px; }
.notes-mark-chip button:hover{ color:var(--rust); }
.notes-hint{ margin:0 0 12px; font-size:12px; color:var(--ink-faint); }
.notes-wrong-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; font-size:12.5px; color:var(--ink-soft); }
.note-kind.wrong{ background:var(--rust-tint); color:var(--rust); }
.note-row{ border:1px solid var(--line); border-radius:var(--radius-m); padding:12px 14px; margin-bottom:10px; background:var(--card); }
.note-row.resolved{ opacity:.62; }
.note-row-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.note-kind{ font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--paper-2); color:var(--ink-soft); flex:none; }
.note-kind.q{ background:var(--clay-tint); color:var(--clay); }
.note-kind.q.done{ background:var(--moss-tint); color:var(--moss-dark); }
.note-ref{ font-size:12.5px; color:var(--moss); text-decoration:none; font-weight:600; }
.note-ref:hover{ text-decoration:underline; }
.note-date{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }
.note-text{ font-size:13.5px; color:var(--ink); line-height:1.6; white-space:pre-wrap; }
.note-row-actions{ display:flex; gap:8px; margin-top:8px; }
.note-row-actions button{
  font-size:11.5px; padding:3px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink-soft); cursor:pointer;
}
.note-row-actions button:hover{ border-color:var(--moss); color:var(--ink); }
.note-row-actions button.danger:hover{ border-color:var(--rust); color:var(--rust); }
.notes-empty{ font-size:13.5px; color:var(--ink-faint); line-height:1.7; }

/* 학습 화면 인라인 메모·질문 컴포저 */
.note-composer{
  margin:22px 0 8px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius-m); background:var(--card);
}
.nc-head{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:8px; }
.nc-n{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.nc-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.nc-item{ display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.55; }
.nc-item.resolved{ opacity:.6; }
.nc-item-text{ flex:1; color:var(--ink); white-space:pre-wrap; }
.nc-item-actions{ display:flex; gap:4px; flex:none; }
.nc-item-actions button{
  width:22px; height:22px; line-height:1; border:1px solid var(--line); border-radius:6px;
  background:var(--paper); color:var(--ink-faint); cursor:pointer; font-size:12px;
}
.nc-item-actions button:hover{ border-color:var(--moss); color:var(--ink); }
.nc-text{
  width:100%; box-sizing:border-box; resize:vertical; min-height:48px;
  border:1px solid var(--line); border-radius:var(--radius-s); padding:8px 10px;
  font-family:var(--font-ui); font-size:13px; color:var(--ink); background:var(--paper);
}
.nc-text:focus{ outline:none; border-color:var(--moss); }
.nc-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.nc-kind{ font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; cursor:pointer; }
.nc-save{ font-size:12.5px; padding:6px 16px; }

/* '학습 완료' 직접 체크 — OFF는 옅은 버튼, ON은 우표 소인처럼 찍힌 도장 */
.mark-toggle{
  position:relative; flex:none; border:1px solid var(--line); background:var(--card); color:var(--ink-faint);
  border-radius:999px; font:inherit; font-size:11.5px; line-height:1; padding:4px 11px;
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.mark-toggle:hover{ border-color:var(--moss); color:var(--moss); }
/* 좁은 자리(사진사 카드) — 글자 없는 빈 도장칸: 점선 원, 도장 찍히길 기다리는 자리 */
.mark-toggle.mark-icon{
  width:30px; height:30px; padding:0; font-size:0; border-radius:999px;
  border:1.5px dashed var(--ink-faint); background:rgba(255,255,255,.55);
  display:inline-flex; align-items:center; justify-content:center;
}
.mark-toggle.mark-icon:hover{ border-style:solid; border-color:var(--moss); }

/* ON — 우표 소인(postmark) 도장: 페트롤 잉크, 이중 링, 비스듬히 찍힘. OFF와 같은 크기에서 잉크만 채워진다 */
.mark-toggle.on{
  width:30px; height:30px; padding:0; border-radius:999px;
  border:2px solid var(--moss); background:rgba(47,111,119,.08);
  color:var(--moss); font-size:15px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  transform:rotate(-12deg); box-shadow:none;
  animation:stampIn .22s cubic-bezier(.2,1.5,.5,1);
}
.mark-toggle.on:hover{ border-color:var(--moss); color:var(--moss); background:rgba(47,111,119,.16); }
.mark-toggle.on::before{
  content:''; position:absolute; inset:-3px; border-radius:999px;
  border:1.5px dashed rgba(47,111,119,.42);
}
@keyframes stampIn{
  0%{ transform:rotate(-12deg) scale(1.55); }
  60%{ transform:rotate(-12deg) scale(.93); }
  100%{ transform:rotate(-12deg) scale(1); }
}
@media (prefers-reduced-motion:reduce){ .mark-toggle.on{ animation:none; } }

/* 사진사 인물 카드 — 체크는 생몰·국가 줄(.pcard-meta)에 맞춰 오른쪽에 놓는다.
   사진 위가 아니라 평평한 배경 위라 잘 보인다. */
.pcard{ position:relative; }
.pcard-metarow{ display:flex; align-items:center; gap:8px; min-width:0; }
.pcard-metarow .pcard-meta{ flex:1 1 auto; min-width:0; }
.pcard-check{ flex:none; margin-left:auto; opacity:.6; }
/* 카드 맨 아랫줄이라, 도장칸을 메타 텍스트 높이에 맞춰 줄여 카드 밖으로 안 삐져나오게 */
.pcard-metarow .pcard-check, .pcard-metarow .pcard-check.on{ width:22px; height:22px; }
.pcard-metarow .pcard-check.on{ font-size:12px; }
.pcard:hover .pcard-check, .pcard:focus-within .pcard-check{ opacity:.95; }
.pcard-check.on{ opacity:1; }
/* 체크 전엔 사진·이름 모두 가라앉고, 체크하면 또렷하게 제 색으로 살아난다.
   컬러 사진은 체크 후에도 채도를 살짝 낮춰 갤러리 톤을 고르게 유지 */
.pcard-cover img, .pcard-cover-blank{ transition:opacity .18s ease, filter .18s ease; }
.pcard-cover img{ filter:saturate(.88); }
.pcard:not(.seen) .pcard-cover img{ opacity:.8; filter:saturate(.72) grayscale(.28); }
.pcard:not(.seen) .pcard-cover-blank{ filter:grayscale(1); opacity:.62; }
.pcard:not(.seen) .pcard-cover-blank .pcb-name{ color:var(--ink-faint); }

/* 개념·비교 행 / 개념 그룹 헤더 */
.concept-check{ margin-left:auto; }
.concept-row.seen .concept-title{ color:var(--ink-soft); }
.cgrp-head-row{ display:flex; align-items:center; gap:10px; }
.cgrp-head-row .cgrp-head{ flex:1; min-width:0; }
.cgrp.seen .cgrp-head .concept-title{ color:var(--ink-soft); }

/* 구술 문항 — 답변 액션줄의 완료 상태 표식 */
.qa-seen{ display:none; flex:none; color:var(--moss); font-weight:700; font-size:12px; margin-right:2px; }
.qa-item.seen .qa-seen{ display:inline; }
.qa-item.seen .qa-q > span:not(.num):not(.tag):not(.qa-seen){ color:var(--ink-soft); }

/* 실기출 카드 하단 */
.realq-mark{ align-self:center; }
.realq-seen-count{ font-size:12px; color:var(--ink-faint); font-family:var(--font-mono); align-self:center; }

/* 사진사 드로어 완료 토글 */
.drawer-head .mark-toggle{ margin-top:10px; }
.drawer-head .mark-toggle.on{ margin-top:6px; }

.hist-clip{
  max-height:200px; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(#000 45%, transparent);
          mask-image:linear-gradient(#000 45%, transparent);
}
.hist-gate{
  position:relative; margin-top:16px;
  border:1px dashed color-mix(in srgb, var(--rust) 45%, var(--line));
  background:var(--rust-tint); border-radius:var(--radius-m);
  padding:22px 20px; text-align:center;
}
.hist-clip + .hist-gate{ margin-top:-32px; }   /* 잘린 본문 위로 살짝 겹치기 */
.hist-gate--full{ margin:28px auto 0; max-width:440px; padding:30px 24px; }
.hist-gate-icon{ font-size:20px; line-height:1; }
.hist-gate-title{ font-family:var(--font-serif); font-weight:600; font-size:15.5px; margin:6px 0 4px; color:var(--ink); }
.hist-gate--full .hist-gate-title{ font-size:17px; }
.hist-gate-note{ font-size:12.5px; color:var(--ink-soft); margin:0 0 14px; line-height:1.65; }
.hist-gate-perks{ list-style:none; margin:0 auto 16px; padding:0; max-width:420px; text-align:left; font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
.hist-gate-perks li{ position:relative; padding-left:16px; margin-bottom:4px; }
.hist-gate-perks li::before{ content:'✓'; position:absolute; left:0; color:var(--accent,#0f766e); font-weight:700; }
.hist-gate-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ================= 접속 통계 (#/stats, 관리자 전용) ================= */
.stats-note{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 28px 24px; color: var(--ink-soft); line-height: 1.7;
}
.stats-hint{ color: var(--ink-faint); font-size: .82rem; font-weight: 400; }
.stats-filters{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.stats-cards{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px;
}
.stats-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 18px 16px; text-align: center;
}
.stats-card-n{ font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; color: var(--moss); letter-spacing: -.02em; }
.stats-card-k{ font-size: .82rem; color: var(--ink-faint); margin-top: 4px; }

.stats-block{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 20px 22px; margin-bottom: 20px;
}
.stats-block h3{
  margin: 0 0 16px; font-size: 1rem; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.stats-cols{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.stats-cols .stats-block{ margin-bottom: 20px; }

/* 막대 그래프 — 값 자체보다 형태 비교가 목적이라 축 눈금 대신 title 툴팁으로 수치를 준다 */
.stats-chart{
  display: flex; align-items: flex-end; gap: 3px; height: 160px;
  padding-bottom: 18px; overflow-x: auto;
}
.stats-bar{
  flex: 1 1 0; min-width: 8px; height: 100%; position: relative;
  display: flex; align-items: flex-end;
}
.stats-bar-fill{
  width: 100%; background: var(--moss); border-radius: 2px 2px 0 0;
  min-height: 2px; transition: background .15s;
}
.stats-bar-fill.alt{ background: var(--clay); }
.stats-bar:hover .stats-bar-fill{ background: var(--moss-dark); }
.stats-bar-x{
  position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .62rem; color: var(--ink-faint); white-space: nowrap;
}

.stats-share{ display: grid; grid-template-columns: 92px 1fr 118px; align-items: center; gap: 10px; margin-bottom: 8px; }
.stats-share-k{ font-size: .86rem; color: var(--ink); }
.stats-share-track{ background: var(--paper-2); border-radius: 999px; height: 10px; overflow: hidden; }
.stats-share-fill{ background: var(--moss); height: 100%; border-radius: 999px; }
.stats-share-v{ font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft); text-align: right; }
.stats-share-v span{ color: var(--ink-faint); }

.stats-tablewrap{ overflow-x: auto; }
.stats-table{ width: 100%; border-collapse: collapse; font-size: .88rem; }
.stats-table th{
  text-align: left; font-weight: 600; font-size: .78rem; color: var(--ink-faint);
  border-bottom: 1px solid var(--line); padding: 6px 8px;
}
.stats-table td{ padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: baseline; }
.stats-table tr:last-child td{ border-bottom: 0; }
.stats-table td.num, .stats-table th.num{ text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.stats-table a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.stats-grp-head{ cursor: pointer; }
.stats-grp-head:hover td{ background: var(--paper-2); }
.stats-caret{ display: inline-block; width: 1em; color: var(--ink-faint); transition: transform .15s; }
.stats-grp.open .stats-caret{ transform: rotate(90deg); }
.stats-grp-row{ display: none; }
.stats-grp.open .stats-grp-row{ display: table-row; }
.stats-grp-row td{ background: var(--paper-2); font-size: .84rem; color: var(--ink-soft); }
.stats-table a:hover{ color: var(--moss); border-bottom-color: var(--moss); }
.stats-path{ display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); margin-top: 2px; }

.stats-foot{ font-size: .8rem; color: var(--ink-faint); line-height: 1.7; }
.stats-foot code{ font-family: var(--font-mono); font-size: .76rem; background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 720px){
  .stats-cards{ grid-template-columns: repeat(2, 1fr); }
  .stats-cols{ grid-template-columns: 1fr; gap: 0; }
  .stats-share{ grid-template-columns: 70px 1fr 92px; }
  .stats-chart{ height: 130px; }
}

/* ---------- 사진입시 모니터 (#/admission) ---------- */
/* desc 자기 줄 내림 + 폭 확대는 .section-head .desc 공통 규칙으로 이동함. */
.adm-desc-note{ font-size: .78rem; color: var(--ink-faint); }
.btn.btn-sm{ padding: 5px 12px; font-size: .82rem; }
.adm-note{ padding: 24px 0; color: var(--ink-soft); }
.adm-note.adm-err{ color: var(--rust); }
.adm-events{ margin: 4px 0 22px; padding: 14px 16px; background: var(--moss-tint); border-radius: var(--radius-m); }
.adm-events h3{ margin: 0 0 8px; font-size: .95rem; }
.adm-events ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.adm-events li{ font-size: .9rem; line-height: 1.5; }
.adm-tier{ font-size: .95rem; font-weight: 700; color: var(--ink); margin: 4px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.adm-tier-n{ font-weight: 500; color: var(--ink-faint); font-size: .82rem; margin-left: 4px; }
/* tier(4년제/2·3년제) 하나가 한 칸. 4년제는 5개교라 목록이 길고 2·3년제는
   2개교뿐이라 짧아 옆에 빈 공간이 남는다(2026-09-15 사용자 지적) — 860px
   이상에서 .adm-tiers 를 여러 열로 갈라 짧은 tier 를 긴 tier 옆(오른쪽)에
   앉힌다. 좁은 화면은 그냥 위아래로 쌓는다. */
.adm-tiers{ display: flex; flex-direction: column; gap: 24px; }
.adm-tier-section{ display: flex; flex-direction: column; }
.adm-tier-section > .adm-card + .adm-card{ margin-top: 12px; }
/* monitored 카드가 없는(=목록뿐인) tier 칸은 옆 칸(카드가 있어 세로로 긴 tier)
   높이에 맞춰 늘어난다(2026-09-15 사용자 요청 — 왼쪽 4년제가 오른쪽 2·3년제보다
   짧아 비어 보였음). 행 자체를 늘리지 않고 행 사이 간격을 고르게 벌려서 채운다.
   :last-child 로 거는 이유: 카드가 있는 tier(h3+목록+카드)에선 목록이 마지막
   자식이 아니라서 이 규칙이 안 걸려야 하는데, 처음엔 :only-child 로 걸었다가
   h3 형제 때문에 항상 매칭 실패해 아예 안 늘어났었다(2026-09-15 실사이트 확인). */
.adm-tier-section > .adm-list:last-child{ flex: 1; justify-content: space-between; }
.adm-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 13px 14px; }
.adm-card-head{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-card-head h3{ margin: 0; font-size: 1.02rem; }
.adm-campus{ font-size: .78rem; color: var(--ink-faint); }
.adm-units{ margin: 5px 0 8px; font-size: .84rem; color: var(--ink-soft); }
.adm-card-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-cardnote{ margin: 10px 0 0; font-size: .8rem; color: var(--ink-faint); line-height: 1.5; }
.adm-muted{ color: var(--ink-faint); font-size: .82rem; }
/* link 대학(6곳) 전용 리스트 — 카드마다 내용이 버튼 몇 개뿐이라 다 똑같아 보이는
   문제(2026-09-15 사용자 지적)를 밀도 높은 행 목록으로 바꿔 해결. 한 줄에 이름·전공·
   버튼을 모으고 확인 상태는 오른쪽에 점 + 짧은 날짜로 압축(자세한 내용은 title 툴팁). */
.adm-list{ display: flex; flex-direction: column; margin-bottom: 4px; }
.adm-row{ display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--line); }
.adm-row:last-child{ border-bottom: 1px solid var(--line); }
.adm-row-accent{ align-self: stretch; width: 3px; border-radius: 2px; background: var(--moss); flex: none; }
.adm-row-main{ flex: 1; min-width: 0; }
.adm-row-top{ display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.adm-row-top h3{ margin: 0; font-size: .96rem; }
.adm-row-meta{ font-size: .78rem; color: var(--ink-faint); }
.adm-row-links{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.adm-row-status{ flex: none; display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--ink-faint); white-space: nowrap; cursor: default; }
.adm-row-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--moss); flex: none; }
.adm-row-dot-muted{ background: var(--line); }
/* monitored 카드(서울예대) 세로 길이가 무한정 늘어나지 않도록 공지 목록을
   1건 남짓만 보이도록 제한. 나머지는 스크롤. */
.adm-notices{ list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px;
  max-height: 150px; overflow-y: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; }
.adm-notices::-webkit-scrollbar{ width: 8px; }
.adm-notices::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 999px; }
/* 스크롤될 때 마지막 항목이 잘려 보이도록 아래쪽 여백 살짝 */
.adm-notices > :last-child{ padding-bottom: 2px; }
.adm-notice{ border-top: 1px solid var(--line-soft); padding-top: 10px; }
.adm-notice-top{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.adm-notice-title{ font-weight: 600; font-size: .95rem; }
.adm-atts{ margin-top: 5px; display: grid; gap: 3px; }
.adm-atts a{ font-size: .84rem; color: var(--moss); }
.adm-tag{ font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); white-space: nowrap; }
.adm-tag-new{ background: var(--moss-tint); color: var(--moss-dark); }
.adm-tag-hot{ background: var(--rust-tint); color: var(--rust); }
.adm-tag-review{ background: var(--hl); color: var(--hl-ink); }
.adm-tag-hi{ background: var(--clay-tint); color: var(--clay); }
.adm-tag-auto{ background: var(--moss-tint); color: var(--moss-dark); }
/* 서울예대 지원현황(경쟁률) 박스 */
.adm-comp{ margin: 8px 0 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); }
.adm-comp-head{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.adm-comp-label{ font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.adm-comp-nums{ display: flex; gap: 16px; margin-top: 5px; }
.adm-comp-cell{ font-size: .78rem; color: var(--ink-faint); display: flex; align-items: baseline; gap: 3px; }
.adm-comp-cell b{ font-size: 1.05rem; font-family: var(--font-mono); color: var(--ink); font-weight: 700; }
.adm-comp-rate{ font-size: 1rem; }   /* " : 1" 도 함께 키움 */
.adm-comp-rate b{ color: #A85E6B; font-size: 1.55rem; line-height: 1; }  /* --rust(#B24B5D) 보다 채도 낮춘 로즈 */
.adm-comp-foot{ margin-top: 6px; font-size: .73rem; color: var(--ink-faint); }
.adm-comp-foot a{ color: var(--moss); }
.adm-comp-note{ margin-top: 4px; font-size: .69rem; line-height: 1.45; color: var(--ink-faint); opacity: .85; }
.adm-foot, .adm-cardnote{ }
.adm-foot{ margin-top: 20px; font-size: .8rem; color: var(--ink-faint); }

/* 시험 전 체크리스트 (실기 · 면접) */
.adm-checklist{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.adm-cl-col{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; }
.adm-cl-col > h4{ margin: 0; font-size: 1rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.adm-cl-schools{ font-size: .78rem; font-weight: 500; color: var(--ink-soft); }
.adm-cl-done{ font-size: .78rem; font-weight: 500; color: var(--ink-faint); font-family: var(--font-mono); }
.adm-cl-reset{ margin-left: auto; font-size: .74rem; color: var(--ink-faint); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.adm-cl-reset:hover{ color: var(--rust); }
.adm-cl-note{ margin: 8px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-faint); }
.adm-cl-ban{ margin: 8px 0 0; padding: 7px 10px; border-radius: 6px; background: var(--paper-2); font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.adm-cl-ban b{ color: var(--rust); }
.adm-cl-group{ margin-top: 13px; }
.adm-cl-group > b{ display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: 4px; }
.adm-cl-item{ display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; line-height: 1.5; padding: 3px 0; cursor: pointer; }
.adm-cl-item input{ margin: 3px 0 0; flex: none; accent-color: var(--moss); cursor: pointer; }
.adm-cl-item.done span{ color: var(--ink-faint); text-decoration: line-through; }
.adm-cl-summary{ cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.adm-cl-summary::-webkit-details-marker{ display: none; }
.adm-cl-summary::before{ content: "▸"; font-size: .8rem; color: var(--ink-faint); }
.adm-cl-details[open] .adm-cl-summary::before{ content: "▾"; }
.adm-cl-details[open] .adm-cl-summary{ margin-bottom: 14px; }
.adm-cl-hint::after{ content: "(펼쳐보기)"; font-size: .78rem; font-weight: 400; color: var(--ink-faint); }
.adm-cl-details[open] .adm-cl-hint::after{ content: "(접기)"; }
.adm-cl-details .adm-checklist{ margin-top: 0; }

/* 넓은 화면에서만 tier 섹션들을 나란히: 4년제(길다) 왼쪽, 2·3년제(짧다) 오른쪽.
   align-items: stretch(기본값)로 두 칸의 세로 길이를 맞춘다 — 짧은 쪽은
   .adm-tier-section > .adm-list:last-child 가 행 사이 간격을 고르게 벌려 채운다
   (2026-09-15 사용자 요청). 오른쪽 칸 최대폭(430px)은 계원예술대학교 행의 버튼
   4개(입학처·모집요강·입시공지 게시판·경쟁률)가 줄바꿈 없이 한 줄에 들어가는
   최소폭 기준(2026-09-15 실측, 380px에선 경쟁률이 밀려났음). */
@media (min-width: 860px){
  .adm-tiers{ display: grid; grid-template-columns: 1fr minmax(300px, 430px); gap: 24px; }
}

@media (max-width: 720px){
  .adm-checklist{ grid-template-columns: 1fr; }
  .adm-row{ flex-wrap: wrap; }
  .adm-row-status{ margin-left: 15px; }
}

/* ---------- 메커니즘 정적 스키마 도식 공통 (mdiag-) ---------- */
.mdiag-box{ fill:var(--card); stroke:var(--line); stroke-width:1.5; }
.mdiag-box-2{ fill:var(--paper-2); stroke:var(--line); stroke-width:1.5; }
.mdiag-panel{ fill:none; stroke:var(--line); stroke-width:1.5; }
.mdiag-fill-soft{ fill:var(--diag-fill-2); }
.mdiag-t{ font-family:var(--font-ui); font-size:13px; font-weight:700; fill:var(--ink); }
.mdiag-s{ font-family:var(--font-ui); font-size:11.5px; fill:var(--ink-soft); }
.mdiag-lbl{ font-family:var(--font-mono); font-size:11px; fill:var(--ink-faint); }
.mdiag-hd{ font-family:var(--font-ui); font-size:11px; font-weight:700; fill:var(--ink-faint); letter-spacing:.02em; }
.mdiag-arrow{ fill:none; stroke:var(--ink-faint); stroke-width:1.6; }
.mdiag-ray{ fill:none; stroke:var(--moss); stroke-width:1.8; }
.mdiag-accent{ fill:var(--moss); }
.mdiag-accent-line{ stroke:var(--moss); stroke-width:1.8; fill:none; }
.mdiag-warn{ fill:var(--rust); }
.mdiag-warn-t{ font-family:var(--font-ui); font-size:11px; font-weight:700; fill:var(--rust); }
.mdiag-divider{ stroke:var(--line-soft); stroke-width:1; }
.mdiag-cap{ font-size:11.5px; color:var(--ink-faint); line-height:1.55; margin-top:10px; }

/* 판형별 필름 취급 (fh-) */
.fh-diagram .fh-steprow{ margin-top:-4px; }
.fh-spool{ fill:var(--paper-2); stroke:var(--line); stroke-width:1.5; }
.fh-roll{ fill:var(--moss); opacity:.55; }
.fh-core{ fill:var(--ink-faint); }
.fh-film{ fill:var(--moss); stroke:var(--moss-dark); stroke-width:1; opacity:.8; }
.fh-paper{ fill:var(--paper-2); stroke:var(--ink-faint); stroke-width:1; }
.fh-paper-wrap{ fill:none; stroke:var(--ink-faint); stroke-width:3; }
.fh-tape{ fill:var(--rust); opacity:.7; }
.fh-wind{ fill:none; stroke:var(--moss); stroke-width:2; }
.fh-crank{ fill:none; stroke:var(--rust); stroke-width:2.5; }
.fh-holder{ fill:var(--card); stroke:var(--line); stroke-width:1.5; }
.fh-sheet{ fill:var(--moss); opacity:.35; }
.fh-sheet-exposed{ fill:var(--rust); opacity:.28; }
.fh-notch{ fill:var(--rust); }
.fh-slide{ fill:var(--paper-2); stroke:var(--ink-faint); stroke-width:1.5; }
.fh-slide-flip{ fill:var(--ink-faint); stroke:var(--ink-soft); stroke-width:1.5; }
.fh-gg{ fill:none; stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:4 3; }

/* ── 본문 전문용어 주석 ──────────────────────────────────── */
.term-ref{
  border-bottom: 1px dashed var(--moss);
  cursor: help;
  text-decoration: none;
  font-style: normal;
}
.term-ref:focus-visible{
  outline: 2px solid var(--moss);
  outline-offset: 2px;
  border-radius: 2px;
}
.term-pop{
  position: absolute;
  z-index: 1200;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  font-family: var(--font-ui);
  font-size: .84rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.term-pop[hidden]{ display: none !important; }
.term-pop strong{ font-size: .9rem; color: var(--ink); }
.term-pop span{ color: var(--ink-soft); }
.term-pop a{
  align-self: flex-start;
  font-size: .8rem;
  color: var(--moss);
  text-decoration: none;
}
.term-pop a:hover{ text-decoration: underline; }
@media print{
  .term-ref{ border-bottom: none; }
  .term-pop{ display: none !important; }
}

/* ---------------- 비회원 미리보기 띠 (app.js mountPreviewBar) ----------------
   본문 칼럼(.wrap, 1360)과 같은 좌우 여백을 그대로 써서 히어로·달력·아래 목록과
   왼쪽/오른쪽 끝이 맞도록 한다 — 독자적으로 폭을 줄여 가운데 정렬하면 다른
   섹션과 어긋나 보인다는 피드백 반영. */
.preview-bar{
  padding-top: 18px;
}
.preview-bar-in{
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: .85rem;
}
.preview-bar-in strong{ color: var(--clay); white-space: nowrap; }
.preview-bar-in span{ color: var(--ink); }
.preview-bar-btns{ display: flex; gap: 8px; margin-left: auto; }
.preview-bar .btn{ padding: 5px 12px; font-size: .82rem; }
@media (max-width: 640px){
  .preview-bar-btns{ margin-left: 0; width: 100%; }
  .preview-bar .btn{ flex: 1; text-align: center; }
}
@media print{ .preview-bar{ display: none !important; } }

/* ---------------- 비회원 잠금 표시 ----------------
   목록에서 항목을 지우는 대신 자물쇠만 달고, 막는 것은 여는 시점뿐이다. */
/* 잠긴 화면의 안내 카드는 .hist-gate(lucidaGateCard)를 그대로 쓴다. 여기서는
   목록에 다는 자물쇠 표시만 정의한다. */
.viz-tab.locked{ opacity: .62; }

/* 사진사 도감 — 잠긴 카드/줄 */
.pcard.locked, .concept-row.locked{ opacity: .66; }
.pcard.locked{ position: relative; }
.pcard.locked .lock-badge{
  position: absolute;
  top: 8px; right: 8px;
  font-size: .95rem;
  line-height: 1;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(var(--paper-rgb), .86);
}

/* 잠긴 항목을 눌렀을 때의 안내 (app.js showGuestLock) */
.guest-lock{ display: none; }
.guest-lock.show{
  display: block;
  position: fixed;
  inset: 0;
  z-index: 120;
}
.guest-lock-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.44); }
.guest-lock-panel{
  position: relative;
  margin: 18vh auto 0;
  max-width: 380px;
  width: calc(100% - 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.guest-lock-panel h3{ margin: 0 0 10px; font-size: 1.05rem; }
.guest-lock-item{
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--clay);
  word-break: keep-all;
}
.guest-lock-desc{ margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.7; }
.guest-lock-btns{ display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.guest-lock-btns .btn{ flex: 1; text-align: center; white-space: nowrap; }

/* ── 쉬어가기 · 사진 소식 (news.js) ── */
.news-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.news-list{ display:flex; flex-direction:column; }
.news-search{ margin:26px 0 8px; }
.news-q{ width:100%; box-sizing:border-box; height:42px; padding:0 14px; font:inherit; font-size:14px; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:10px; }
.news-q:focus{ outline:2px solid var(--moss); outline-offset:1px; }
.news-hits-head{ margin:14px 0 4px; font-size:13px; color:var(--ink-soft); }
.news-pager{ display:flex; justify-content:center; align-items:center; gap:4px; margin:18px 0 4px; }
.news-pg{ min-width:34px; height:34px; padding:0 8px; background:none; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; color:var(--ink-soft); cursor:pointer; font-variant-numeric:tabular-nums; }
.news-pg:hover:not(:disabled){ background:var(--paper-2); color:var(--ink); }
.news-pg.active{ background:var(--moss); border-color:var(--moss); color:var(--on-dark); cursor:default; }
.news-pg:disabled{ opacity:.35; cursor:default; }
.news-pg-gap{ color:var(--ink-faint); padding:0 2px; }
.news-item{ padding:16px 2px; border-top:1px solid var(--line); }
.news-item:last-child{ border-bottom:1px solid var(--line); }
.news-item.is-draft{ opacity:.8; border-left:3px dashed var(--line); padding-left:12px; }
.news-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12.5px; color:var(--ink-faint); }
.news-meta time{ font-variant-numeric:tabular-nums; }
.news-cat{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); }
.news-cat::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--nc, var(--ink-faint)); }
.news-cat.c-exhibit{ --nc:var(--moss); }
.news-cat.c-gear{ --nc:var(--clay); }
.news-cat.c-call{ --nc:var(--rust); }
.news-cat.c-history{ --nc:var(--ink-soft); }
.news-draft{ color:var(--rust); font-weight:500; }
.news-pin{ color:var(--rust); font-weight:600; font-size:.92em; padding:1px 7px; border:1px solid currentColor; border-radius:999px; line-height:1.4; }
.news-title{ margin:4px 0 0; font-size:1.02rem; font-weight:600; line-height:1.5; word-break:keep-all; }
.news-title a{ color:var(--ink); text-decoration:none; }
.news-title a:hover{ color:var(--moss); text-decoration:underline; }
.news-sum{ margin:4px 0 0; color:var(--ink-soft); font-size:.92rem; line-height:1.7; max-width:66ch; word-break:keep-all; }
.news-empty{ color:var(--ink-soft); padding:24px 0; }
.news-actions{ display:flex; gap:8px; margin-top:8px; }
.news-act{ background:none; border:1px solid var(--line); border-radius:6px; padding:2px 10px; font:inherit; font-size:12.5px; color:var(--ink-soft); cursor:pointer; }
.news-act:hover{ background:var(--paper-2); color:var(--ink); }
.news-act.danger{ color:var(--rust); }

.news-admin{ margin:0 0 20px; border:1px solid var(--line); border-radius:10px; background:var(--card); padding:12px 14px; }
.news-admin > summary{ cursor:pointer; font-weight:600; }
.news-admin-help{ color:var(--ink-soft); font-size:.88rem; margin:10px 0; line-height:1.6; }
.news-admin textarea,
.news-cand input[type=text],
.news-cand input[type=date],
.news-cand select{ width:100%; box-sizing:border-box; font:inherit; font-size:.9rem; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.news-admin-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0 0; }
.news-admin-msg{ font-size:.86rem; color:var(--ink-soft); }
.news-cand{ display:flex; flex-direction:column; gap:8px; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.news-cand-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.news-cand-pick{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-weight:600; }
.news-cand-tag{ font-weight:400; font-size:.8rem; color:var(--ink-faint); }
.news-cand-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.news-cand-srcrow{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:.86rem; }
.news-cand-srcrow a{ color:var(--moss); }
.news-cand-host{ color:var(--ink-faint); font-size:.78rem; }
.news-cand-warn{ color:var(--rust); font-size:.82rem; margin:0; }
.news-cand-ok{ font-size:.88rem; }
@media (max-width:480px){
  .news-cand-row{ grid-template-columns:1fr; }
}
.news-save-msg{ margin:8px 0 0; font-size:.88rem; line-height:1.6; color:var(--rust); }
.news-save-msg:empty{ display:none; }
.news-cand.is-problem{ border-color:var(--rust); box-shadow:0 0 0 1px var(--rust); }
.news-lc{ font-size:.8rem; white-space:nowrap; }
.news-lc.lc-ok{ color:var(--moss); font-weight:600; }
.news-lc.lc-mismatch{ color:var(--rust); font-weight:600; }
.news-lc.lc-dead{ color:var(--rust); font-weight:700; }
.news-lc.lc-unknown, .news-lc.lc-wait{ color:var(--ink-faint); }
.news-lc-page{ flex-basis:100%; font-size:.8rem; line-height:1.5; color:var(--ink-soft); }
.news-lc-page:empty{ display:none; }
.nc-auto{ color:var(--moss); font-size:.8rem; }
/* 사진 소식 · 기사 대표 이미지 미리보기 (PC 에서만 목록에 보인다) */
.news-thumb{ display:none; }
@media (min-width:720px){
  .news-item.has-thumb{ display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:8px 18px; align-items:start; }
  .news-thumb{ display:block; width:168px; height:104px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:var(--paper-2); }
}
.news-cand-thumb{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.news-cand-thumb[hidden]{ display:none; }
.news-cand-thumb img{ width:132px; height:82px; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:var(--paper-2); }
.news-cand-thumb label{ font-size:.86rem; }
/* 홈 히어로 · 최근 사진 소식 한 줄 (news.js mountHome) — 소식이 있을 때만 서서히 나타난다 */
.hero-news{ display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; padding:0 14px; max-height:0; margin-top:0; opacity:0; overflow:hidden;
  border:1px solid transparent; border-radius:999px; background:rgba(231,236,238,.07); color:var(--on-dark); font-size:.86rem; line-height:1.4; text-decoration:none;
  transition:max-height .25s ease, opacity .25s ease, margin-top .25s ease, padding .25s ease, border-color .25s ease; }
.hero-news.on{ max-height:56px; opacity:1; margin-top:16px; padding-block:9px; border-color:rgba(231,236,238,.2); }
.hero-news:hover, .hero-news:focus-visible{ background:rgba(231,236,238,.13); }
.hn-lbl{ flex:none; font-size:.72rem; font-weight:700; letter-spacing:.04em; color:#17202B; background:#C99A3F; border-radius:999px; padding:1px 9px; }
.hn-tt{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hn-tt em{ font-style:normal; color:#9DAAB3; margin-right:2px; }
.hn-rest{ flex:none; color:#B9C4CB; }
@media (prefers-reduced-motion: reduce){ .hero-news{ transition:none; } }
/* 홈 히어로 · 베타 업데이트 공지 (LUCIDA_UPDATES) — 소식 줄 아래 작은 글씨, 눌러 펼침 */
.hero-updates{ margin-top:10px; max-width:min(100%, 42em); padding-left:14px; font-size:.76rem; line-height:1.5; color:#9DAAB3; }
.hero-updates summary{ display:flex; align-items:baseline; gap:8px; cursor:pointer; list-style:none; padding:2px 0; }
.hero-updates summary::-webkit-details-marker{ display:none; }
.hero-updates summary:hover .hu-tt, .hero-updates summary:focus-visible .hu-tt{ color:var(--on-dark); }
.hu-lbl{ flex:none; font-weight:700; letter-spacing:.04em; color:#B9C4CB; }
.hu-tt{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hu-more{ flex:none; color:#B9C4CB; }
.hu-more::after{ content:' ▾'; }
.hero-updates[open] .hu-more::after{ content:' ▴'; }
.hero-updates ul{ margin:6px 0 0; padding:0; list-style:none; }
.hero-updates li{ padding:2px 0; }
.hu-k{ display:inline-block; margin-right:6px; padding:0 6px; border-radius:999px; font-size:.68rem; font-weight:600; line-height:1.55; color:#B9C4CB; border:1px solid rgba(185,196,203,.4); vertical-align:1px; }
.hu-k.hu-major{ color:#17202B; background:#C99A3F; border-color:#C99A3F; font-weight:700; }
.hero-updates li em{ font-style:normal; color:#B9C4CB; margin-right:6px; }

/* ---------- MTF 차트 도식 ---------- */
.mtf-c{ fill:none; stroke-width:2.4; stroke-linecap:round; }
.mtf-c10{ stroke:var(--moss); }
.mtf-c30{ stroke:var(--rust); }
.mtf-m{ stroke-dasharray:6 4; }
.mtf-t10{ font-family:var(--font-ui); font-size:11.5px; font-weight:700; fill:var(--moss); }
.mtf-t30{ font-family:var(--font-ui); font-size:11.5px; font-weight:700; fill:var(--rust); }

/* 사진 소식 — 공지(고정) 묶음과 관리자 수정 칸 (2026-09-26) */
.news-notices{ margin:0 0 6px; border:1px solid var(--line); border-radius:10px; background:var(--paper-2); overflow:hidden; }
.news-notices .news-item{ padding:12px 14px; border-top:1px solid var(--line); }
.news-notices .news-item:first-child{ border-top:0; }
.news-notices .news-item:last-child{ border-bottom:0; }
.news-notices .news-title{ font-size:.98rem; }
.news-pin{ background:var(--rust); border-color:var(--rust); color:var(--on-dark); }
.news-auto{ align-self:center; font-size:12px; color:var(--ink-faint); }
.news-new{ color:var(--moss); font-weight:700; font-size:.92em; padding:1px 7px; border:1px solid currentColor; border-radius:999px; line-height:1.4; }
.news-fresh{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:.92rem; color:var(--ink-soft); }
.news-actions{ flex-wrap:wrap; align-items:center; }
.news-edit{ display:flex; flex-direction:column; gap:8px; padding:14px 12px; background:var(--paper); }
.news-edit input[type=text],
.news-edit input[type=date],
.news-edit select,
.news-edit textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:.9rem; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.news-edit label input[type=date]{ width:auto; margin-left:6px; padding:4px 8px; }
.news-edit .news-cand-host{ margin:0; word-break:break-all; }

/* ---- 대형카메라 무브먼트: 크레파스 영상 + 슬라이더 (diagrams.js renderMovementVideos) ---- */
.mvv{ width:100%; }
.mvv-stage{
  position:relative; aspect-ratio:16/9; margin-top:6px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-m); background:#EEF1F4;
}
.mvv-video{ display:block; width:100%; height:100%; object-fit:cover; }
.mvv-sprite{ position:absolute; inset:0; background-repeat:no-repeat; background-size:100% 2500%; }
.mvv-sprite[hidden], .mvv-sides[hidden], .mvv-play[hidden]{ display:none; }
.mvv-range-row{ margin-top:10px; }
.mvv-end{ font-family:var(--font-ui); font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.mvv-play{ margin-left:2px; padding:4px 11px; font-size:12.5px; }
.mvv-caption{ font-size:13.5px; line-height:1.75; color:var(--ink-soft); margin-top:6px; }
/* 영상 카드 크게 보기(app.js toggleVideoFull): 화면 전체에 겹쳐 띄우고, 영상은 화면 높이에 맞춘다 */
.vfs-on{
  position:fixed !important; inset:0; z-index:215; box-sizing:border-box; width:100vw; height:100dvh; margin:0 !important;
  padding:14px 20px; overflow:auto; background:var(--paper); display:flex; flex-direction:column; justify-content:center;
  border-radius:0 !important;
}
.vfs-on > *{ width:min(100%, calc((100dvh - 200px) * 16 / 9)); margin-left:auto !important; margin-right:auto !important; flex:none; }
.vfs-on > .diag-zoom:not(.vfs-btn), .vfs-on > .diag-zoom-row{ display:none; }
/* 사진사 서랍 패널의 transform 안에서는 fixed가 패널 폭에 갇히므로 크게 보기 동안 풀어 준다 */
.people-drawer.open .drawer-panel:has(.vfs-on){ transform:none; }

/* ---- 초점거리·원근 압축: 크레파스 층 합성 (diagrams.js renderFocalCrayonDiagram) ---- */
.flc{ width:100%; }
.flc-title{ font-size:13px; color:var(--ink-faint); text-align:center; margin-bottom:6px; }
.flc-stage{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-m); background:#EEF1F4;
}
.flc-layer{ position:absolute; background-repeat:no-repeat; background-size:100% 300%; background-position:0 0; will-change:left,top,width,height; }
.flc-slider{ position:relative; margin:14px 4px 22px; }
.flc-range{ width:100%; }
.flc-ticks{ position:relative; height:14px; }
.flc-ticks span{ position:absolute; top:2px; transform:translateX(-50%); font-family:var(--font-ui); font-size:11.5px; color:var(--ink-soft); white-space:nowrap; }
.flc-readout{ font-family:var(--font-mono); font-size:12.5px; color:var(--moss-dark); text-align:center; background:var(--paper-2); border-radius:8px; padding:7px 10px; }
.flc-modes{ justify-content:center; margin:0 0 8px; }
.flc-frame{ position:absolute; border:3px solid #B24B5D; border-radius:3px; box-shadow:0 0 0 999px rgba(28,34,39,.38); pointer-events:none; transition:all .06s linear; }
.flc-frame[hidden]{ display:none; }

/* 크레파스 설명 그림 (diagrams.js renderExplainFig) — 그림 위 번호 배지는 화면 폭과 무관하게 같은 크기 */
.xi-stage{ position:relative; }
.xi-stage img{ display:block; width:100%; height:auto; border-radius:8px; background:#EEF1F4; }
.xi-stage.xi-narrow{ max-width:420px; margin:0 auto; }   /* 세로 그림: 배지 기준 틀째로 폭을 줄인다 */
.xi-pin{ position:absolute; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%;
  background:#1C2227; color:#FBE7A8; font:700 12px/22px var(--font-ui); text-align:center;
  box-shadow:0 0 0 2px #EEF1F4; cursor:help; transition:transform .15s, background .15s; }
.xi-pin:focus{ outline:none; }
.xi-pin.on{ background:#B24B5D; color:#fff; transform:translate(-50%,-50%) scale(1.18); z-index:2; }
.xi-crop{ overflow:hidden; border-radius:8px; }
.xi-crop img{ border-radius:0; }
.xi-tip{ position:absolute; z-index:3; display:none; width:max-content; max-width:min(280px, calc(100% - 8px)); padding:8px 10px;
  background:#1C2227; color:#EEF1F4; border-radius:8px; font-size:12.5px; line-height:1.5; box-shadow:0 6px 18px rgba(0,0,0,.25); pointer-events:none; }
.xi-tip b{ color:#FBE7A8; font-weight:700; }
.xi-legend li.on{ color:var(--ink); }
.xi-legend li.on::before{ background:#B24B5D; color:#fff; }
.xi-cols{ display:grid; gap:6px; margin-top:8px; text-align:center; font-size:12.5px; line-height:1.35; }
.xi-cols b{ display:block; color:var(--ink); font-size:13px; }
.xi-cols span{ color:var(--ink-soft); font-size:11.5px; }
.xi-legend{ list-style:none; counter-reset:xi; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:6px 16px; }
.xi-legend li{ counter-increment:xi; position:relative; padding-left:28px; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.xi-legend li::before{ content:counter(xi); position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  background:#1C2227; color:#FBE7A8; font:700 11px/20px var(--font-ui); text-align:center; }
.xi-legend b{ color:var(--ink); font-weight:600; }
/* 가로로 아주 긴 그림(카메라 3대 나란히)은 폰 폭에서 높이가 90px 남짓이라 배지가 부품을 가린다 → 최소 폭을 두고 옆으로 민다 */
.xi-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.xi-swipe{ display:none; }
@media (max-width:560px){
  .xi-wide{ min-width:560px; }
  .xi-swipe{ display:block; text-align:right; font-size:11.5px; color:var(--ink-faint); margin-top:4px; }
}
/* 오렌지 마스크 토글: 녹감·적감층 위에 주황을 곱하기로 겹친다 */
.xi-band{ position:absolute; background:#EE8A34; mix-blend-mode:multiply; opacity:0; transition:opacity .3s; pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(178,75,93,.9); border-radius:2px; }
.xi-diagram.xi-on .xi-band{ opacity:.62; }
.xi-diagram .cf-btns{ margin-bottom:10px; }
.xi-readout{ margin-top:10px; }
/* 접안부 → 파인더 속 모습 확대 원을 잇는 점선 (아래·오른쪽 변만 그린 상자) */
.xi-lead{ position:absolute; border-bottom:2px dashed #1C2227; border-right:2px dashed #1C2227; pointer-events:none; }
.xi-credit{ margin-top:4px; text-align:right; font-size:11px; color:var(--ink-faint); }
/* 넓은 화면: 가로 그림 옆에 범례 (diagrams.js renderExplainFig의 side 조건) */
.xi-side{ container-type:inline-size; }
@container (min-width:860px){
  .xi-side .xi-body{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:22px; align-items:start; }
  .xi-side .xi-aside > :first-child{ margin-top:0; }
  .xi-side .xi-legend{ grid-template-columns:1fr; gap:8px; }
}

/* 지속광 종류 실사 격자 (diagrams.js renderLightTypePhotos) */
.lt-grid{ display:grid; grid-template-columns:repeat(var(--lt-cols,4),1fr); gap:8px; }
.lt-cell{ margin:0; }
.lt-cell img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.lt-cell figcaption{ margin-top:4px; font-size:12px; line-height:1.4; }
.lt-cell figcaption b{ display:block; }
.lt-cell figcaption span{ color:var(--ink-faint); }
@media (max-width:640px){ .lt-grid:not([style*="--lt-cols:3"]){ grid-template-columns:repeat(2,1fr); } }

/* ND·PL 필터 실사 비교 (diagrams.js renderFilterPhotos). 위 사진을 --fp 까지만 보여 가운데 선으로 비교 */
.fp-img{ display:block; width:100%; height:auto; border-radius:8px; }
.fp-wipe{ --fp:50%; position:relative; overflow:hidden; border-radius:8px; touch-action:pan-y; }
.fp-wipe img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.fp-wipe .fp-top{ clip-path:inset(0 calc(100% - var(--fp)) 0 0); }
.fp-bar{ position:absolute; top:0; bottom:0; left:var(--fp); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.45); pointer-events:none; }
.fp-bar::after{ content:'◀ ▶'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:5px 7px; border-radius:999px; background:#fff; color:#1C2227; font-size:10px; letter-spacing:2px; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.fp-tag{ position:absolute; top:8px; padding:3px 8px; border-radius:6px; background:rgba(28,34,39,.72); color:#fff; font-size:12px; font-weight:600; pointer-events:none; }
.fp-tag-l{ left:8px; } .fp-tag-r{ right:8px; }
.fp-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; }
.fp-hint{ margin-top:6px; text-align:center; font-size:12px; color:var(--ink-soft); }
.fp-diagram + .fp-diagram, .fp-diagram + .interactive-diagram{ margin-top:14px; }

/* 크레파스 조리개 그림 (diagrams.js apCrayonSrc) */
.ap-crayon img{ display:block; width:100%; height:auto; border-radius:8px; margin:6px 0 4px; background:#FBE7A8; }
/* 넓은 화면: 정면 그림과 옆 단면을 좌우로 */
.ap-diagram{ container-type:inline-size; }
@container (min-width:860px){
  .ap-figs{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; align-items:center; }
  .ap-figs .ap-crayon img{ margin:0; }
}

/* 시차·시야율 크레파스 슬라이더 (diagrams.js renderParallaxCrayon · renderCoverageCrayon) */
.pxc-stage{ position:relative; overflow:hidden; border-radius:8px; }
.pxc-stage img{ display:block; width:100%; height:auto; }
.pxc .pxc-stage{ max-width:440px; margin:0 auto; }
.pxc-cv{ display:block; width:100%; height:auto; aspect-ratio:1; }
.pxc-thumbs{ display:flex; justify-content:center; gap:14px; margin:10px 0 6px; }
.pxc-thumbs figure{ margin:0; text-align:center; }
.pxc-th{ display:block; width:132px; height:132px; border-radius:4px; }
.pxc-th-f{ outline:3px dashed #2F6F77; outline-offset:2px; }
.pxc-th-t{ outline:3px solid #B24B5D; outline-offset:2px; }
.pxc-thumbs figcaption{ font-size:12px; font-weight:700; color:var(--ink-soft, #555); margin-top:8px; }
.pxc-box, .pxc-whole{ position:absolute; box-sizing:border-box; pointer-events:none; transition:top .08s linear, left .08s, width .08s, height .08s; }
.pxc-box span, .pxc-whole span{ position:absolute; left:4px; font-size:11.5px; font-weight:700; line-height:1.2; padding:2px 5px; border-radius:4px; white-space:nowrap; }
.pxc-taking{ border:3px solid #B24B5D; }
.pxc-taking span{ bottom:4px; background:#B24B5D; color:#fff; }
.pxc-finder{ border:3px dashed #2F6F77; }
.pxc-finder span{ top:4px; background:#2F6F77; color:#fff; }
.cvc-finder{ box-shadow:0 0 0 999px rgba(178,75,93,.28); }
.cvc-finder span{ top:4px; background:#2F6F77; color:#fff; }
.pxc-whole{ inset:0; border:4px solid #B24B5D; border-radius:8px; }
.pxc-whole span{ bottom:4px; background:#B24B5D; color:#fff; }
.pxc-ends{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-faint); margin-top:-2px; }

/* 특수 렌즈 개요 카드 (diagrams.js renderSpecialLensGridDiagram) */
.sl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.sl-card{ display:flex; flex-direction:column; gap:2px; padding:0 0 8px; border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.sl-card img{ display:block; width:100%; height:auto; background:#EEF1F4; }
.sl-card b{ padding:6px 10px 0; font-size:13.5px; color:var(--ink); }
.sl-card span{ padding:0 10px; font-size:12px; color:var(--ink-soft); }
.sl-card:hover{ border-color:var(--accent, #2F6F77); }

/* 측광 방식: 방식별 찍힌 결과 */
.mm-result{ display:grid; grid-template-columns:minmax(140px,220px) 1fr; gap:10px; align-items:center; margin-bottom:10px; }
.mm-result img{ display:block; width:100%; height:auto; border-radius:6px; }
.mm-result b{ display:block; font-size:13px; color:var(--ink); margin-bottom:2px; }
.mm-result span{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
@media (max-width:480px){ .mm-result{ grid-template-columns:1fr; } }

/* 사진 칩 전환 (diagrams.js renderImgChoice) */
.ich-stage img{ display:block; width:100%; height:auto; border-radius:8px; }

/* 보기 전환(그림 ↔ SVG/영상) — diagrams.js renderViewSwitch */
.vsw-tabs{ margin:6px 0 10px; }
.vsw-pane[hidden]{ display:none; }

/* 자동노출 세 모드 나란히 — diagrams.js renderAutoExposureCompare */
.aec-top{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.aec-scene{ position:relative; flex:0 1 240px; min-width:180px; }
.aec-scene img, .aec-photo img{ display:block; width:100%; height:auto; border-radius:6px; transition:filter .25s; }
.aec-scene span{ position:absolute; left:8px; top:6px; font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:1px 8px; border-radius:10px; }
.aec-ctl{ flex:1 1 260px; }
.aec-ev{ font-weight:700; font-size:15px; }
.aec-hint{ font-size:13px; color:var(--ink-faint); line-height:1.5; }
.aec-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.aec-card{ border:1px solid var(--line, rgba(0,0,0,.12)); border-radius:10px; padding:10px; background:var(--paper); display:flex; flex-direction:column; gap:6px; }
.aec-head{ display:flex; align-items:baseline; gap:6px; }
.aec-head span{ font-size:12px; color:var(--ink-faint); }
.aec-row{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:6px; align-items:center; padding:6px 8px; border-radius:8px; background:var(--paper-2); }
.aec-row.is-lock{ outline:2px solid var(--moss); outline-offset:-2px; }
.aec-lab{ font-size:12px; color:var(--ink-faint); }
.aec-val{ font-size:18px; font-variant-numeric:tabular-nums; justify-self:end; }
.aec-who{ grid-column:1 / 3; font-size:11.5px; color:var(--ink-faint); }
.aec-row.is-lock .aec-who{ color:var(--moss); font-weight:700; }
.aec-g{ grid-column:1 / 3; width:100%; height:12px; margin-top:4px; }
.aec-g.aec-iris{ width:40px; height:40px; justify-self:center; }
.aec-verdict{ font-size:12.5px; font-weight:700; color:var(--moss); line-height:1.4; min-height:2.8em; }
.aec-verdict.warn{ color:var(--clay); }
@media (max-width:560px){
  .aec-cards{ gap:6px; }
  .aec-card{ padding:7px; }
  .aec-head{ font-size:13.5px; white-space:nowrap; }
  .aec-head span{ display:none; }
  .aec-row{ padding:5px 6px; }
  .aec-val{ font-size:15px; }
  .aec-who{ font-size:10.5px; }
}

/* 구술 모의고사 난이도 표지·힌트·꼬리질문 */
.exam-diff-badge{ display:block; width:fit-content; margin:10px auto 0; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--line); color:var(--ink-soft); }
.exam-diff-easy{ background:var(--moss-tint); color:var(--moss-dark); border-color:transparent; }
.exam-diff-hard{ background:var(--clay-tint, rgba(180,90,50,.12)); color:var(--rust, #b04a2a); border-color:transparent; }
.exam-aid{ margin-top:12px; font-size:14px; color:var(--ink-soft); line-height:1.7; }
.exam-aid .term-chip{ margin:0 4px 4px 0; cursor:default; }
.exam-hint-note{ font-size:11.5px; color:var(--ink-faint); margin-left:4px; }
.exam-aid .scratch-wrap{ margin-top:6px; text-align:left; min-width:160px; min-height:34px; }
.exam-aid .exam-hint-skel{ display:block; padding:6px 8px; line-height:1.9; letter-spacing:.02em; font-size:14.5px; color:var(--ink); text-align:left; }
.exam-aid .scratch-wrap{ display:block; max-width:100%; }
.exam-aid .hint-rev{ color:var(--moss-dark, var(--clay)); font-weight:700; }

/* ---------- 모바일 리퀴드 글라스 (홈·헤더) ----------
   유리는 겉 레이어(헤더·히어로 패널·홈 카드)에만 쓴다. 본문·도식 면은 그대로 불투명.
   토큰으로 한 곳에서 조절하고, backdrop-filter 미지원/투명도 줄이기 설정에서는 불투명으로 대체. */
:root{
  --glass-bg:     rgba(255,255,255,.26);
  --glass-bg-2:   rgba(255,255,255,.16);
  --glass-line:   rgba(255,255,255,.7);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 1px 0 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(255,255,255,.3) inset, 0 12px 32px -14px rgba(31,76,82,.32);
  --glass-blur:   blur(22px) saturate(1.8);
  --mesh-a: rgba(47,111,119,.32);
  --mesh-b: rgba(85,89,143,.30);
  --mesh-c: rgba(127,199,206,.36);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --glass-bg:     rgba(36,45,52,.34);
    --glass-bg-2:   rgba(36,45,52,.22);
    --glass-line:   rgba(255,255,255,.16);
    --glass-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 1px 0 0 rgba(255,255,255,.07) inset, 0 12px 32px -14px rgba(0,0,0,.7);
    --mesh-a: rgba(50,116,124,.44);
    --mesh-b: rgba(138,142,207,.34);
    --mesh-c: rgba(50,116,124,.28);
  }
}
:root[data-theme="dark"]{
  --glass-bg:     rgba(36,45,52,.34);
  --glass-bg-2:   rgba(36,45,52,.22);
  --glass-line:   rgba(255,255,255,.16);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 1px 0 0 rgba(255,255,255,.07) inset, 0 12px 32px -14px rgba(0,0,0,.7);
  --mesh-a: rgba(50,116,124,.44);
  --mesh-b: rgba(138,142,207,.34);
  --mesh-c: rgba(50,116,124,.28);
}
@media (max-width:700px){
  body::before{
    content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(420px 360px at 8% 4%, var(--mesh-c), transparent 70%),
      radial-gradient(460px 420px at 100% 30%, var(--mesh-b), transparent 70%),
      radial-gradient(480px 420px at 0% 85%, var(--mesh-a), transparent 70%);
  }
  /* 떠 있는 유리 헤더 */
  .site-header{
    top:8px; margin:8px 12px 0; border:1px solid var(--glass-line); border-radius:24px;
    background:var(--glass-bg); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  /* 히어로 — 어두운 유리 패널(안의 색들이 어두운 배경 전제라 톤은 유지) */
  .hero{
    margin:12px 12px 0; border-radius:28px; padding:26px 16px 18px;
    border:1px solid rgba(255,255,255,.16);
    background:
      radial-gradient(360px 240px at 10% -10%, rgba(127,199,206,.28), transparent 62%),
      radial-gradient(320px 260px at 100% 40%, rgba(138,142,207,.34), transparent 65%),
      rgba(18,23,27,.86);
    box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 18px 40px -20px rgba(18,23,27,.6);
  }
  .hero-inner{ padding:0 4px; gap:22px; }
  .hero-strips{ opacity:.5; }
  .hero-sched{
    max-width:none; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18);
    box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
    -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  }
  .hero-cta .btn{ border-radius:999px; }
  .hero-cta .btn{ flex:1 1 100%; justify-content:center; text-align:center; }

  /* 학습 맵 — 번호 타임라인 대신 작은 2열 유리 칩(설명은 접는다) */
  .home-map{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  .home-map > li{ padding:0; display:flex; }
  .home-map > li::before{ display:none; }
  .home-map-card{
    position:relative; flex:1; flex-direction:row; align-items:center; gap:10px;
    padding:9px 12px; border-radius:16px; min-height:0;
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .home-map-num{ position:static; width:24px; height:24px; font-size:11.5px; flex:none; }
  .home-map-body{ flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:0; }
  .home-map-title{ font-size:14.5px; }
  .home-map-desc{ display:none; }
  .home-map-tag{ display:none; }
  .home-map-progress-section .section-head{ margin-bottom:12px; }
  .home-map-progress-section .section-head h2{ font-size:19px; }
  .home-map-progress-section .section-head .desc{ font-size:12px; }
  .home-map-progress-section{ padding-top:22px; padding-bottom:22px; }

  /* (하단 탭바 규칙은 태블릿까지 쓰도록 아래 980px 블록으로 옮겼다) */

  /* ---- 홈 압축: 첫 화면에 꼭 필요한 것만(이어서 · 곧 있을 일정 · 갈 곳 · 오늘 카드) ---- */
  .hero{ padding:20px 14px 14px; }
  .hero .eyebrow, .hero-cta .btn-ghost, .hero-strips{ display:none; }
  .hero-lead > .hero-updates{ order:7; margin-top:0; padding-left:4px; }
  .hero h1{ font-size:27px; margin-bottom:8px; }
  .hero p.lead{ font-size:14px; margin-bottom:14px; }
  .hero-inner{ gap:14px; }
  .hero-sched{ padding:12px 14px; gap:8px; }
  .hero-sched:not(.cal-open) .hero-sched-head,
  .hero-sched:not(.cal-open) .hcal-dow,
  .hero-sched:not(.cal-open) .hcal-grid,
  .hero-sched:not(.cal-open) .hero-sched-sep,
  .hero-sched:not(.cal-open) .hero-sched-src{ display:none; }
  .hero-sched-toggle{
    align-self:flex-start; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600;
    color:var(--moss-tint-onDark); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  }
  /* 메뉴(하단 탭바·사이드)가 같은 역할이라 '무엇부터 볼까요'는 모바일에서 뺀다 */
  .home-map-col{ display:none; }
  .hero-lead{ display:contents; }
  /* display:contents 로 자식이 그리드 항목이 되면 min-content(안 끊기는 한글 덩어리)가 트랙을 밀어 우측이 잘린다 */
  .hero-inner{ grid-template-columns:minmax(0,1fr); }
  .hero-inner > *, .hero-lead > *{ min-width:0; max-width:100%; }
  .hero-inner > *, .hero-lead > *{ order:5; }
  .hero h1{ order:1; } .hero p.lead{ order:2; }
  .hero-sched{ order:3; }
  .hero-cta{ order:4; }
  .hero-news{ order:6; }
  .home-map-progress-section .section-head .desc{ display:none; }
  .home-map-progress-section .section-head{ margin-bottom:10px; }
  .home-map-progress-row{ gap:22px; }

  /* 오늘의 Lucida — 큰 도식은 접고 카드만 옆으로 넘겨 본다 */
  .home-today-section{ padding-top:6px; padding-bottom:18px; }
  .home-today-section .home-today-head .desc{ display:none; }
  .home-today-section .section-head{ margin-bottom:10px; }
  .home-today-section .section-head h2{ font-size:19px; }
  .home-today-layout > :not(.home-today){ display:none; }
  .home-today{
    display:flex !important; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -18px; padding:2px 18px 6px; scrollbar-width:none;
  }
  .home-today::-webkit-scrollbar{ display:none; }
  .home-today .today-card{
    flex:0 0 78%; scroll-snap-align:start; padding:14px 14px 36px !important; border-radius:20px;
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .home-today .today-go{ left:14px !important; }
  .home-today .today-card.is-quiz{ flex-basis:88%; }
  .home-today .is-quiz .today-body{ font-size:12.5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .home-today .is-quiz .tq-opt{ padding:7px 10px; font-size:12.5px; line-height:1.35; }
  .home-today .is-quiz .tq-opts{ gap:5px; }

  /* 학습 현황 — 2열 미니 막대만 */
  .pdash-col .section-head .desc, .pdash-recent, .pdash-empty{ display:none; }
  .pdash-col .section-head{ margin-bottom:8px; }
  .pdash-col .section-head h2{ font-size:19px; }
  .pdash-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-bottom:8px; }
  .pdash-row{ grid-template-columns:1fr auto; gap:3px 8px; }
  .pdash-label{ flex-direction:row; align-items:baseline; gap:5px; font-size:12px; }
  .pdash-kind{ display:none; }
  .pdash-bar{ grid-column:1 / -1; grid-row:2; height:5px; }
  .pdash-num{ font-size:11px; }
  .home-support{ padding-top:0; }
  .home-support p{ font-size:12px; margin:0; }
}
@media (min-width:981px){ .m-tabbar{ display:none; } }
/* 하단 탭바 — 유리 알약. 폰(~700)뿐 아니라 햄버거가 켜지는 태블릿 폭(~980)까지 쓴다.
   메커니즘 토픽 화면은 자체 하단 바(.mtopbar)가 위에 떠 있다. */
@media (max-width:980px){
  body{ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  .m-tabbar{
    position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:72;
    display:flex; align-items:stretch; padding:6px; border-radius:26px;
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .m-tabbar a, .m-tabbar button{
    flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:7px 2px 6px; border:0; border-radius:20px; background:none; font:inherit;
    font-size:10.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .m-tabbar svg{ width:22px; height:22px; }
  .m-tabbar a.active{ color:var(--moss-dark); background:color-mix(in srgb, var(--moss) 14%, transparent); }
  .m-tabbar a:active, .m-tabbar button:active{ background:color-mix(in srgb, var(--moss) 20%, transparent); }
  .to-top, .nav-fab{ bottom:calc(86px + env(safe-area-inset-bottom, 0px)); }
  .nav-fab{ display:none; }
  /* 메뉴는 하단 탭바의 '메뉴'가 연다(JS가 #hamburger.click()을 호출하므로 요소는 남긴다) */
  .hamburger{ display:none; }
}
@media (max-width:980px) and (prefers-reduced-transparency:reduce){
  .m-tabbar{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--card); }
}
@media (max-width:700px) and (prefers-reduced-transparency:reduce){
  .site-header, .home-map-card, .hero-sched{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--card); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header, .home-map-card, .m-tabbar{ background:var(--card); }
}

.hero-sched-toggle{ display:none; }
@media (max-width:700px){ .hero-sched-toggle{ display:inline-block; } }

/* 모바일 안쪽 페이지 — 목록 카드·칩·검색창에 '가벼운 유리'(반투명+헤어라인+그림자, backdrop-filter 없음).
   긴 목록에 블러를 깔면 스크롤이 끊겨서 색·테두리만 맞춘다. 본문·도식 면은 건드리지 않는다. */
@media (max-width:700px){
  .dict-card, .pcard, .mech-map-part{
    background:var(--glass-bg); border-color:var(--glass-line); box-shadow:var(--glass-shadow);
    border-radius:18px;
  }
  .chip, .tabbar{ background:var(--glass-bg-2); border-color:var(--glass-line); }
  .chip.active, .tabbar button.active{ background:var(--moss); }
  .global-search-input, .mem-search, .mech-map-search{
    background:var(--glass-bg); border-color:var(--glass-line); border-radius:999px;
  }
}
@media (max-width:700px) and (prefers-reduced-transparency:reduce){
  .dict-card, .pcard, .mech-map-part, .chip, .tabbar, .global-search-input, .mech-map-search{ background:var(--card); }
}

/* 모바일 안쪽 페이지 공통 압축 — 머리글·툴바가 첫 화면을 다 먹지 않게 */
@media (max-width:700px){
  .section{ padding-top:22px; padding-bottom:28px; }
  .section-head{ margin-bottom:14px; gap:6px 14px; }
  .section-head .kicker{ display:none; }
  .section-head h2{ font-size:22px; margin-bottom:2px; }
  .section-head .desc{ font-size:12.5px; line-height:1.55; }
  /* 용어사전: 분류 칩은 한 줄 가로 스크롤, 검색은 한 줄, 별점·모드는 한 줄 */
  .dict-toolbar{ gap:8px; margin-bottom:10px; }
  .dict-toolbar:has(> .chip){
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-18px; padding-right:18px;
  }
  .dict-toolbar:has(> .chip)::-webkit-scrollbar{ display:none; }
  .dict-toolbar:has(> .chip) > .chip{ flex:none; white-space:nowrap; }
  .dict-toolbar > .clearable{ flex:1 1 100%; }
  .dict-toolbar .star-filter{ flex-wrap:nowrap; }
  .dict-toolbar .star-filter .chip{ padding-left:10px; padding-right:10px; }
}
@media (max-width:700px){
  .mech-map{ padding-top:14px; }
  .mech-map-head h1{ font-size:21px; }
  .mech-map-sub{ font-size:12.5px; line-height:1.55; margin-bottom:10px; }
  .mech-map-legend{ font-size:11.5px; margin-bottom:10px; }
  .dict-toolbar .star-filter .chip{ font-size:12px; }
}

/* 모바일 "더 보기" (js/mobile-more.js) */
.more-hidden{ display:none !important; }
.more-btn{
  display:block; width:100%; margin:14px 0 6px; padding:13px 16px; border-radius:999px;
  font:inherit; font-size:14px; font-weight:600; color:var(--moss-dark);
  background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); cursor:pointer;
}
.more-btn:active{ background:var(--moss-tint); }
@media print{ .more-hidden{ display:revert !important; } .more-btn{ display:none !important; } }

/* =====================================================================
   리퀴드 글라스 — 전체(PC 포함)
   원칙: 유리는 '겉 레이어'(헤더·히어로 패널·팝오버·홈 카드)만 블러까지 쓰고,
         긴 목록 카드·칩·입력창은 블러 없는 '가벼운 유리'(반투명+헤어라인+그림자).
         본문 글면·도식(--card를 직접 쓰는 .interactive-diagram 등)은 불투명 그대로.
   ===================================================================== */
:root{
  --glass-pop: rgba(255,255,255,.84);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --glass-pop: rgba(30,38,44,.88); } }
:root[data-theme="dark"]{ --glass-pop: rgba(30,38,44,.88); }

/* 배경 메시 — 모든 폭 */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 460px at 6% 2%, var(--mesh-c), transparent 70%),
    radial-gradient(700px 520px at 100% 28%, var(--mesh-b), transparent 70%),
    radial-gradient(720px 520px at 0% 90%, var(--mesh-a), transparent 70%);
}
@media (max-width:700px){
  body::before{
    background:
      radial-gradient(420px 360px at 8% 4%, var(--mesh-c), transparent 70%),
      radial-gradient(460px 420px at 100% 30%, var(--mesh-b), transparent 70%),
      radial-gradient(480px 420px at 0% 85%, var(--mesh-a), transparent 70%);
  }
}

/* PC 헤더 — 전폭 유리 바 */
@media (min-width:701px){
  .site-header{
    background:var(--glass-bg); border-bottom:1px solid var(--glass-line);
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 24px -16px rgba(18,23,27,.35);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  /* PC 히어로 — 풀블리드 검은 띠 대신 둥근 어두운 유리 패널 */
  .hero{
    margin:16px 20px 0; border-radius:32px;
    border:1px solid rgba(255,255,255,.16);
    background:
      radial-gradient(760px 420px at 12% -10%, rgba(127,199,206,.26), transparent 62%),
      radial-gradient(620px 460px at 92% 40%, rgba(138,142,207,.32), transparent 65%),
      rgba(18,23,27,.88);
    box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 24px 56px -28px rgba(18,23,27,.65);
  }
  .hero-sched{
    background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18);
    box-shadow:0 1px 0 rgba(255,255,255,.12) inset;
    -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  }
  .hero-cta .btn{ border-radius:999px; }
}

/* 홈 카드(소수라 블러까지) */
.home-map-card, .today-card, .auth-card{
  background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.home-map-card{ border-radius:16px; }
.today-card{ border-radius:20px; border-top-width:1px; }
a.today-card:hover, .home-map-card:hover{ background:var(--glass-bg-2); }
.auth-card{ border-radius:22px; }
@media (min-width:701px){
  .pdash-col{
    border-radius:22px; padding:20px 22px;
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
}

/* 목록 카드·칩·입력창 — 블러 없는 가벼운 유리 */
.qa-item, .pcard, .dict-card, .movie-card, .props-card, .selfgrade-item, .note-row, .sl-card,
.mech-map-part, .people-view-toggle, .star-chip, .notes-mark-chip{
  background:var(--glass-bg); border-color:var(--glass-line); box-shadow:var(--glass-shadow); border-radius:18px;
}
.chip, .tabbar, .people-search, .side-search, .mech-map-search, .mem-search, .global-search-input{
  background:var(--glass-bg-2); border-color:var(--glass-line);
}
.chip.active, .tabbar button.active{ background:var(--moss); }

/* 팝오버·드롭다운 — 글자가 얹히니 불투명도를 높인 유리 */
.nav-menu, .global-search-results, .term-pop, .tour-card{
  background:var(--glass-pop); border-color:var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}

/* 메커니즘·사진사 좌측 목차 패널 */
@media (min-width:981px){
  .side{ border-right-color:var(--glass-line); }
}

/* 사진사 도감 목차 막대 — 알약 버튼 전부 '액체 유리'(위 하이라이트 + 아랫 그늘 + 블러·채도) */
.people-nav a, .people-nav .people-view-toggle, .people-nav .people-search{
  border-radius:999px; border:1px solid light-dark(rgba(255,255,255,.7), rgba(255,255,255,.2));
  background:linear-gradient(180deg, light-dark(rgba(255,255,255,.26), rgba(255,255,255,.07)), light-dark(rgba(255,255,255,.05), rgba(255,255,255,.015)));
  box-shadow:0 1px 0 light-dark(rgba(255,255,255,.8), rgba(255,255,255,.22)) inset, 0 -1px 0 light-dark(rgba(31,76,82,.08), rgba(0,0,0,.25)) inset, 0 6px 12px -10px light-dark(rgba(31,76,82,.3), rgba(0,0,0,.5));
  -webkit-backdrop-filter:blur(6px) saturate(1.8); backdrop-filter:blur(6px) saturate(1.8);
  transition:transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .18s, border-color .18s, background .18s;
}
.people-nav a:hover, .people-nav .people-view-toggle:hover{
  transform:translateY(-1px) scale(1.02);
  background:linear-gradient(180deg, light-dark(rgba(255,255,255,.4), rgba(255,255,255,.13)), light-dark(rgba(255,255,255,.1), rgba(255,255,255,.04)));
}
/* 막대 바탕도 비쳐 보이게 — 버튼 뒤로 배경이 흐려져 보여야 유리처럼 읽힌다 */
.people-nav{ background:light-dark(rgba(255,255,255,.18), rgba(255,255,255,.04)); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); }
.people-nav a:active, .people-nav .people-view-toggle:active{ transform:scale(.97); }
@media (prefers-reduced-transparency:reduce){
  .people-nav a, .people-nav .people-view-toggle, .people-nav .people-search{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce){
  .people-nav a, .people-nav .people-view-toggle{ transition:none; }
  .people-nav a:hover, .people-nav .people-view-toggle:hover{ transform:none; }
}

@media (prefers-reduced-transparency:reduce){
  .site-header, .home-map-card, .today-card, .pdash-col, .auth-card, .nav-menu, .global-search-results, .term-pop, .tour-card, .hero-sched{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .site-header, .home-map-card, .today-card, .pdash-col, .auth-card, .qa-item, .pcard, .dict-card, .movie-card,
  .nav-menu, .global-search-results, .term-pop, .tour-card{ background:var(--card); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header, .nav-menu, .global-search-results, .term-pop, .tour-card{ background:var(--card); }
}
@media print{
  body::before{ display:none; }
  .qa-item, .pcard, .dict-card, .movie-card, .props-card, .note-row, .mech-map-part{ background:#fff; box-shadow:none; }
}

/* ---------- 히어로 — 라이트에서는 밝은 투명 유리, 다크에서는 어두운 유리 ----------
   색을 light-dark() 토큰으로 두어 한 벌로 두 테마를 낸다(color-scheme 은 :root 가 테마별로 지정). */
.hero{
  --h-bg:     light-dark(rgba(255,255,255,.14), rgba(18,23,27,.55));
  --h-ink:    light-dark(#1C2227, #E7ECEE);
  --h-soft:   light-dark(#3E4A52, #C7D2D6);
  --h-faint:  light-dark(#56626A, #9AA7AD);
  --h-accent: light-dark(#1F4C52, #D8E7E8);
  --h-line:   light-dark(rgba(28,34,39,.16), rgba(231,236,238,.16));
  --h-fill:   light-dark(rgba(255,255,255,.34), rgba(255,255,255,.07));
  --h-hover:  light-dark(rgba(47,111,119,.12), rgba(231,236,238,.10));
  --h-tint-a: light-dark(rgba(127,199,206,.55), rgba(127,199,206,.30));
  --h-tint-b: light-dark(rgba(138,142,207,.45), rgba(138,142,207,.36));
  --h-gold:   light-dark(#6B4E00, #F6E2A8);
  --h-gold-bg:light-dark(rgba(201,154,63,.16), rgba(246,226,168,.10));
  --h-rose:   light-dark(#A23A62, #EFC0D2);
  --h-red:    light-dark(#B03A3A, #E88C8C);
  color:var(--h-ink);
  border-color:light-dark(rgba(255,255,255,.75), rgba(255,255,255,.16));
  background:
    radial-gradient(760px 420px at 12% -10%, var(--h-tint-a), transparent 62%),
    radial-gradient(620px 460px at 92% 40%, var(--h-tint-b), transparent 65%),
    var(--h-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.14)) inset, 0 24px 56px -28px light-dark(rgba(31,76,82,.35), rgba(18,23,27,.65));
}
.hero h1, .hero h1 em{ color:var(--h-ink); }
.hero h1 em{ color:var(--h-accent); }
.hero p.lead{ color:var(--h-soft); }
.hero .eyebrow{ color:var(--h-accent); border-color:var(--h-line); }
.hero .btn-ghost{ color:var(--h-ink); border-color:light-dark(rgba(28,34,39,.32), rgba(231,236,238,.35)); }
.hero .btn-ghost:hover{ background:var(--h-hover); }
.hero-cam{ color:var(--h-accent); }

.hero-sched{ background:var(--h-fill); border-color:var(--h-line); }
.hero-sched-kicker{ color:var(--h-accent); }
.hero-sched-navbtn{ color:var(--h-ink); background:var(--h-fill); border-color:var(--h-line); }
.hero-sched-navbtn:not(:disabled):hover{ background:var(--h-hover); }
.hcal-dow span{ color:var(--h-faint); }
.hcal-dow span:first-child{ color:var(--h-red); }
.hcal-cell{ color:var(--h-soft); }
.hcal-cell.is-holiday .hcal-num{ color:var(--h-red); }
.hcal-cell.is-today{ background:var(--h-hover); }
.hcal-cell.is-today .hcal-num{ color:var(--h-ink); }
.hcal-cell.has-event:hover{ background:var(--h-hover); }
.hcal-cell.is-sel{ outline-color:var(--h-accent); }
.hero-sched-sep{ background:var(--h-line); }
.hero-sched-title{ color:var(--h-ink); }
.hero-sched-date, .hero-sched-empty, .hero-sched-src{ color:var(--h-faint); }
.hero-sched-dday{ color:var(--h-gold); background:var(--h-gold-bg); border-color:light-dark(rgba(107,78,0,.28), rgba(246,226,168,.24)); }
.hero-sched-year{ color:var(--h-rose); }
.hero-sched-today{ color:var(--h-rose); }

.hero-news{ background:var(--h-fill); color:var(--h-ink); }
.hero-news.on{ border-color:var(--h-line); }
.hero-news:hover, .hero-news:focus-visible{ background:var(--h-hover); }
.hn-tt em{ color:var(--h-faint); }
.hn-rest{ color:var(--h-soft); }
.hero-updates{ color:var(--h-faint); }
.hero-updates summary:hover .hu-tt, .hero-updates summary:focus-visible .hu-tt{ color:var(--h-ink); }
.hu-lbl, .hu-more, .hero-updates li em{ color:var(--h-soft); }

/* ---------- 입력창·칩 가시성 — 유리 위에서도 윤곽이 보이게 ---------- */
.global-search-input, .mem-search, .mech-map-search, .side-search, .people-search{
  background:light-dark(rgba(255,255,255,.66), rgba(255,255,255,.08));
  border:1px solid light-dark(rgba(28,34,39,.22), rgba(255,255,255,.24));
  box-shadow:0 1px 3px light-dark(rgba(28,34,39,.08), rgba(0,0,0,.35)) inset;
}
.global-search-input::placeholder, .mem-search::placeholder, .mech-map-search::placeholder,
.side-search::placeholder, .people-search::placeholder{ color:light-dark(#56626A, #9AA7AD); opacity:1; }
.global-search-input:focus, .side-search:focus, .people-search:focus, .mech-map-search:focus{
  border-color:var(--moss); outline:2px solid color-mix(in srgb, var(--moss) 40%, transparent); outline-offset:1px;
}
.chip, .tabbar{ border-color:light-dark(rgba(28,34,39,.16), rgba(255,255,255,.2)); }
.chip{ background:light-dark(rgba(255,255,255,.5), rgba(255,255,255,.07)); }

/* ---------- 배경 색 번짐이 천천히 움직인다 ----------
   transform 만 움직여 합성(compositor)에서 처리 → 스크롤·입력에 영향이 없다. */
.hero{ background:var(--h-bg); }
.hero::before, .hero::after{
  content:''; position:absolute; inset:-25%; z-index:0; pointer-events:none; will-change:transform;
}
.hero::before{
  background:radial-gradient(34% 40% at 24% 22%, var(--h-tint-a), transparent 70%);
  animation:hero-drift-a 26s ease-in-out infinite alternate;
}
.hero::after{
  background:radial-gradient(32% 40% at 78% 58%, var(--h-tint-b), transparent 70%);
  animation:hero-drift-b 32s ease-in-out infinite alternate;
}
@keyframes hero-drift-a{
  from{ transform:translate3d(-4%,-3%,0) scale(1); }
  to  { transform:translate3d(9%,6%,0) scale(1.12); }
}
@keyframes hero-drift-b{
  from{ transform:translate3d(5%,4%,0) scale(1.08); }
  to  { transform:translate3d(-8%,-5%,0) scale(0.96); }
}
body::before{ inset:-6%; will-change:transform; animation:mesh-drift 48s ease-in-out infinite alternate; }
@keyframes mesh-drift{
  from{ transform:translate3d(-1.5%,-1%,0) scale(1); }
  to  { transform:translate3d(2%,1.5%,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after, body::before{ animation:none; }
}
@media print{ .hero::before, .hero::after{ display:none; } }

/* ---------- 알약 버튼 — 유리 질감 ----------
   위쪽 밝은 하이라이트 + 얇은 아랫선 + 작은 블러. 주요 버튼은 색이 비치는 틴트 유리. */
.btn-primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--clay) 80%, #fff 20%), color-mix(in srgb, var(--clay) 66%, transparent));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(0,0,0,.14) inset, 0 10px 20px -10px color-mix(in srgb, var(--clay) 75%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.7); backdrop-filter:blur(10px) saturate(1.7);
}
.btn-primary:hover{ opacity:1; filter:brightness(1.06); }
.btn-ghost, .hero .btn-ghost{
  background:light-dark(rgba(255,255,255,.34), rgba(255,255,255,.10));
  box-shadow:0 1px 0 light-dark(rgba(255,255,255,.85), rgba(255,255,255,.22)) inset, 0 8px 18px -12px light-dark(rgba(31,76,82,.35), rgba(0,0,0,.6));
  -webkit-backdrop-filter:blur(10px) saturate(1.6); backdrop-filter:blur(10px) saturate(1.6);
}
.chip, .tabbar button, .hero-sched-toggle, .more-btn, .star-chip{
  box-shadow:0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.14)) inset, 0 6px 14px -10px light-dark(rgba(31,76,82,.35), rgba(0,0,0,.6));
}
.chip, .hero-sched-toggle{
  -webkit-backdrop-filter:blur(8px) saturate(1.5); backdrop-filter:blur(8px) saturate(1.5);
}
.chip.active, .tabbar button.active, .btn-primary.active{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 82%, #fff 18%), color-mix(in srgb, var(--moss) 68%, transparent));
  border-color:rgba(255,255,255,.35); color:var(--on-dark);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.14) inset, 0 8px 16px -8px color-mix(in srgb, var(--moss) 75%, transparent);
}
.nav a.active{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 82%, #fff 18%), color-mix(in srgb, var(--moss) 68%, transparent));
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.14) inset, 0 6px 14px -8px color-mix(in srgb, var(--moss) 75%, transparent);
}
.nav a:hover:not(.active){ background:light-dark(rgba(255,255,255,.55), rgba(255,255,255,.10)); }
.nav a.active:hover{ color:var(--on-dark); }
.m-tabbar a.active{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 24%, transparent), color-mix(in srgb, var(--moss) 12%, transparent));
  box-shadow:0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.14)) inset;
}
@media (prefers-reduced-transparency:reduce){
  .btn-primary, .btn-ghost, .chip, .hero-sched-toggle{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* 메커니즘 '처음이면 여기부터' 버튼이 아래 필터 입력창에 붙지 않게 */
.mech-map-cta{ margin:4px 0 16px; }

/* ---------- 모바일 하단: 탭바는 항상, 토픽 이동 바는 그 위에 떠 있는 유리 알약 ----------
   둘 다 아래로 스크롤하면 함께 숨고(.bar-tuck), 위로 올리면 함께 나온다. */
@media (max-width:980px){
  .m-tabbar{ transition:transform .28s ease; }
  body:has(.mtopbar.show.bar-tuck) .m-tabbar{ transform:translateY(calc(100% + 16px)); }
  .mtopbar{
    left:12px; right:12px; bottom:calc(88px + env(safe-area-inset-bottom, 0px));
    border:1px solid var(--glass-line); border-radius:20px; overflow:hidden; padding-bottom:0;
    background:var(--glass-bg); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .mtopbar.bar-tuck{ transform:translateY(calc(100% + 100px)); }
  .mtopbar a, .mtopbar button{ min-height:42px; }
  .mtopbar .mtb-toc{ border-color:var(--glass-line); }
  body:has(.mtopbar.show) .to-top{ bottom:calc(138px + env(safe-area-inset-bottom, 0px)); }
  body:has(.mtopbar.show) .content-pane{ padding-bottom:150px; }
}

/* ---------- 모바일 읽기 화면(메커니즘·사진사 도감): 하단은 탭바 하나 + 오른쪽 '목차' 유리 버튼 ----------
   기존 이동 바(.mtopbar)에서 목차 버튼만 남겨 떠 있는 알약으로 쓴다. 이전·다음은 본문 끝 카드(.topic-nav-btns). */
@media (max-width:980px){
  .mtopbar{
    left:auto; right:14px; bottom:calc(90px + env(safe-area-inset-bottom, 0px));
    padding:0; gap:0; border:0; border-radius:999px; overflow:visible;
    background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .mtopbar > :not(.mtb-toc){ display:none !important; }
  .mtopbar .mtb-toc{
    flex:none; min-height:44px; padding:0 18px; border-radius:999px;
    font-size:13px; font-weight:700; color:var(--ink);
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  body:has(.mtopbar.show) .to-top{ bottom:calc(144px + env(safe-area-inset-bottom, 0px)); }
  body:has(.mtopbar.show) .content-pane{ padding-bottom:110px; }
  /* 탭바·목차 알약이 아래로 숨으면 ↑ 버튼도 같이 내려앉는다(혼자 허공에 뜨지 않게) */
  .to-top{ transition:opacity .18s, transform .18s, visibility .18s, background .15s, bottom .28s ease; }
  body:has(.mtopbar.show.bar-tuck) .to-top{ bottom:calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:700px){
  .topic-nav-btns{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:34px; padding-top:0; border-top:0; }
  .topic-nav-btns a{
    display:flex; align-items:center; min-height:58px; padding:12px 14px; border-radius:18px;
    font-size:13px; font-weight:600; color:var(--ink); line-height:1.35;
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
  }
  .topic-nav-btns a:last-child{ justify-content:flex-end; text-align:right; grid-column:2; }

  /* 사진사 도감 도구 줄 — 목록 맨 위, 스크롤하면 헤더가 접힌 자리에 붙는다 */
  .people-toolbar{
    position:sticky; top:8px; z-index:6; display:flex; flex-wrap:nowrap; gap:6px; align-items:center;
    margin:0 0 14px; padding:6px; border-radius:22px;
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .people-toolbar > .clearable{ flex:1 1 auto; min-width:0; order:-1; }
  .people-toolbar .people-search{ width:100%; min-width:0; padding:8px 12px; font-size:13px; }
  .people-toolbar .people-view-toggle{ flex:none; padding:7px 11px; font-size:12px; border-radius:999px; white-space:nowrap; }
}

@media (min-width:701px) and (max-width:980px){
  .people-toolbar{
    position:sticky; top:8px; z-index:6; display:flex; gap:8px; align-items:center;
    margin:0 0 16px; padding:6px; border-radius:22px;
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .people-toolbar > .clearable{ flex:1 1 auto; min-width:0; order:-1; }
  .people-toolbar .people-search{ width:100%; }
}

/* ---------- 모바일 화면 위·아래 가장자리 점진 블러 ----------
   가장자리에서 가장 세고 안쪽으로 갈수록 0이 되는 블러 띠(마스크 그라데이션). 글자가 헤더·탭바 밑으로
   또렷하게 지나가며 겹쳐 보이던 것을 흐리게 정리한다. 띠 두 개만, 클릭은 통과. */
@media (max-width:700px){
  html::before, html::after{
    content:''; position:fixed; left:0; right:0; z-index:40; pointer-events:none;
    -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  }
  html::before{
    top:0; height:calc(76px + env(safe-area-inset-top, 0px));
    background:linear-gradient(to bottom, rgba(var(--paper-rgb),.78), rgba(var(--paper-rgb),0));
    -webkit-mask-image:linear-gradient(to bottom, #000 45%, transparent);
            mask-image:linear-gradient(to bottom, #000 45%, transparent);
  }
  html::after{
    bottom:0; height:calc(150px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, rgba(var(--paper-rgb),.82), rgba(var(--paper-rgb),0));
    -webkit-mask-image:linear-gradient(to top, #000 55%, transparent);
            mask-image:linear-gradient(to top, #000 55%, transparent);
  }
}
@media (max-width:700px) and (prefers-reduced-transparency:reduce){
  html::before, html::after{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media print{ html::before, html::after{ display:none !important; } }

/* ---------- 4분 모의고사 — 선택 알약·버튼·문제 카드도 유리 ---------- */
.opt-pill, .btn-outline{
  background:light-dark(rgba(255,255,255,.42), rgba(255,255,255,.07));
  border:1px solid light-dark(rgba(28,34,39,.14), rgba(255,255,255,.18));
  box-shadow:0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.14)) inset, 0 6px 14px -10px light-dark(rgba(31,76,82,.35), rgba(0,0,0,.6));
  -webkit-backdrop-filter:blur(10px) saturate(1.6); backdrop-filter:blur(10px) saturate(1.6);
}
.opt-pill:not(:disabled):not(.selected):hover, .btn-outline:hover{ background:light-dark(rgba(255,255,255,.62), rgba(255,255,255,.12)); }
.opt-pill.selected:not(:disabled):hover{ filter:brightness(1.06); }   /* 선택된 알약은 호버해도 배경을 흰색으로 바꾸지 않는다(흰 글자가 안 보임) */
.opt-pill.selected, .btn-dark{
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 82%, #fff 18%), color-mix(in srgb, var(--moss) 66%, transparent));
  border-color:rgba(255,255,255,.35); color:var(--on-dark);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.14) inset, 0 8px 16px -8px color-mix(in srgb, var(--moss) 75%, transparent);
}
.exam-card{
  background:var(--glass-bg); border-color:var(--glass-line); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
@media (prefers-reduced-transparency:reduce){
  .opt-pill, .btn-outline, .exam-card{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .exam-card{ background:var(--card); }
}

/* 라이트 히어로 위에서 "달력 펼치기"가 흰 글자라 안 보이던 것 */
.hero-sched-toggle{ color:var(--h-accent); background:var(--h-fill); border-color:var(--h-line); }

/* ---------- 4분 모의고사: 모드 3개(구술·타이핑·객관식)는 같은 크기 탭, 구술을 고르면 그 아래에 '구술 방식' 두 가지 ---------- */
.exam-mode-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.exam-mode-grid > .opt-pill{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:12px 8px; border-radius:16px; text-align:center; }
.exam-mode-grid > .opt-pill:only-child{ grid-column:1 / -1; }
.exam-mode-t{ font-size:14px; font-weight:700; line-height:1.25; }
.exam-mode-s{ font-size:11.5px; font-weight:500; line-height:1.3; opacity:.78; }
.exam-oral-sub{ grid-column:1 / -1; order:2; display:none; }
.exam-oral-sub.open{ display:block; animation:exam-acc-open .28s ease both; }
@keyframes exam-acc-open{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.exam-oral-sub-in{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;
  padding:12px 12px 12px; border-radius:16px;
  background:light-dark(rgba(31,76,82,.06), rgba(255,255,255,.04));
  border:1px dashed color-mix(in srgb, var(--moss) 45%, transparent);
}
.exam-sub-cap{ grid-column:1 / -1; font-size:12px; font-weight:600; color:var(--ink-faint); }
.exam-oral-sub-in .opt-pill{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 8px; border-radius:14px; text-align:center; font-size:13px; }
.exam-oral-sub-in .exam-mode-t{ font-size:13px; }
/* 구술 방식은 위 탭(채움)과 구분되게 '테두리 + 옅은 색' 으로 선택 표시 */
:root .exam-oral-sub-in .opt-pill.selected{
  background:color-mix(in srgb, var(--moss) 18%, transparent); color:var(--ink);
  border:1.5px solid var(--moss); box-shadow:none;
}
@media (max-width:560px){
  .exam-mode-grid{ gap:6px; }
  .exam-mode-grid > .opt-pill{ padding:10px 4px; }
  .exam-mode-t{ font-size:13px; }
  .exam-mode-s{ font-size:10.5px; }
  .exam-oral-sub-in{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .exam-oral-sub.open{ animation:none; } }

/* 촬영실기·포트폴리오로 질문받기 상자 — 유리 톤 */
.realq-ptype{
  background:var(--glass-bg); border:1px solid var(--glass-line); border-left:1px solid var(--glass-line);
  border-radius:18px; box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.realq-ptype input[type=text], .realq-ptype input:not([type]), .realq-ptype textarea{
  background:light-dark(rgba(255,255,255,.66), rgba(255,255,255,.08));
  border:1px solid light-dark(rgba(28,34,39,.2), rgba(255,255,255,.22)); border-radius:999px;
}

/* 모의고사 선택 버튼 줄 맞춤 — 난이도는 5칸 한 줄, 분류는 같은 너비 칸으로 */
#examOralDiffGrid, #examDictDiffGrid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
#examOralDiffGrid .opt-pill, #examDictDiffGrid .opt-pill{ padding:9px 2px; text-align:center; white-space:nowrap; }
#examChapterGrid, #examDictGrid, #examRealqGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
#examChapterGrid .opt-pill, #examDictGrid .opt-pill, #examRealqGrid .opt-pill{ text-align:center; }

/* 더 보기 줄: [더 보기] [전부 펼치기] 나란히, 다 열리면 [접기] 하나 */
.more-bar{ display:flex; gap:8px; margin:14px 0 6px; }
.more-bar .more-btn{ margin:0; flex:1 1 0; width:auto; min-width:0; }
.more-bar .more-btn-all{ flex:0 0 auto; padding:13px 18px; color:var(--ink-soft); }
.more-bar .more-btn[hidden]{ display:none; }
.more-bar .more-btn[hidden] + .more-btn-all{ flex:1 1 0; color:var(--moss-dark); }
@media print{ .more-bar{ display:none !important; } }


/* 학습 맵 번호 뱃지: 카드의 backdrop-filter 가 절대위치 기준을 카드로 바꿔 뱃지가 제목 위에 겹쳤다.
   카드를 기준으로 고정하고 카드 왼쪽 레일(li 패딩 40px + 테두리 1px) 위로 다시 뺀다. */
@media (min-width:701px){
  .home-map-card{ position:relative; }
  .home-map-num{ left:-41px; top:7px; }
}

/* 오늘의 도식 카드 — 모바일 가로 스크롤 맨 앞에만(PC는 큰 도식 칸이 따로 있다) */
@media (min-width:701px){ .today-card.is-mfeat{ display:none !important; } }

/* =====================================================================
   떠 있는 버튼 리퀴드 글라스 — 맨 위로(↑)·메뉴(☰)·메커니즘 이전/다음·탭바 선택 탭
   공통: 반투명 면 + 블러 + 윗면 빛 맺힘(inset 하이라이트) + 아랫면 옅은 그림자
   ===================================================================== */
.to-top, .nav-fab, .mech-fab-nav a{
  background:light-dark(rgba(255,255,255,.42), rgba(40,50,58,.42));
  border:1px solid light-dark(rgba(255,255,255,.75), rgba(255,255,255,.18));
  color:var(--moss-dark);
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255,255,255,.95), rgba(255,255,255,.22)),
    inset 0 -6px 12px -8px light-dark(rgba(31,76,82,.28), rgba(0,0,0,.5)),
    0 10px 24px -10px light-dark(rgba(31,76,82,.45), rgba(0,0,0,.7));
  -webkit-backdrop-filter:blur(16px) saturate(1.8); backdrop-filter:blur(16px) saturate(1.8);
}
.to-top:hover, .mech-fab-nav a:hover, .nav-fab:hover{
  filter:none; background:light-dark(rgba(255,255,255,.6), rgba(52,64,72,.55)); border-color:light-dark(rgba(255,255,255,.9), rgba(255,255,255,.26));
}
@media (max-width:980px){
  /* 선택된 탭: 납작한 색 칠 대신 살짝 떠오른 유리 방울 */
  .m-tabbar a.active{
    color:var(--moss-dark);
    background:linear-gradient(180deg, light-dark(rgba(255,255,255,.7), rgba(255,255,255,.14)), light-dark(rgba(255,255,255,.28), rgba(255,255,255,.05)));
    box-shadow:
      inset 0 1px 0 light-dark(rgba(255,255,255,1), rgba(255,255,255,.28)),
      inset 0 0 0 1px light-dark(rgba(255,255,255,.55), rgba(255,255,255,.1)),
      0 6px 14px -8px light-dark(rgba(31,76,82,.5), rgba(0,0,0,.7));
  }
  .m-tabbar a.active svg{ filter:drop-shadow(0 1px 0 light-dark(rgba(255,255,255,.8), rgba(0,0,0,.3))); }
  .m-tabbar a:active, .m-tabbar button:active{ background:light-dark(rgba(255,255,255,.45), rgba(255,255,255,.1)); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .to-top, .nav-fab, .mech-fab-nav a{ background:var(--card); }
}

/* =====================================================================
   사진사 연대표 리퀴드 글라스 — 시대 카드·머리줄·표·나선 라벨·상단 탭
   시대 카드는 길어서 블러 없이 '가벼운 유리'(반투명 면 + 헤어라인 + 윗면 빛)만 쓴다.
   ===================================================================== */
.era{
  background:var(--glass-bg-2); border:1px solid var(--glass-line); border-radius:18px;
  box-shadow:inset 0 1px 0 light-dark(rgba(255,255,255,.85), rgba(255,255,255,.1)), 0 10px 26px -18px light-dark(rgba(31,76,82,.4), rgba(0,0,0,.7));
}
.era-body th{ background:light-dark(rgba(255,255,255,.45), rgba(255,255,255,.07)); }
.era-body th, .era-body td{ border-color:light-dark(rgba(28,34,39,.12), rgba(255,255,255,.1)); }
.era-helix-chip{
  background:var(--glass-bg-2); border-top-color:var(--glass-line); border-right-color:var(--glass-line); border-bottom-color:var(--glass-line); border-radius:12px;
  box-shadow:inset 0 1px 0 light-dark(rgba(255,255,255,.8), rgba(255,255,255,.08));
}
.era-helix-chip:hover{ background:var(--glass-bg); }
.hist-tabbar button:not(.active){
  background:var(--glass-bg); border-color:var(--glass-line);
  box-shadow:inset 0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.12)), 0 8px 20px -14px light-dark(rgba(31,76,82,.45), rgba(0,0,0,.7));
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
/* 시대별 리더 — 목차·선택 버튼·소제목·이전/다음·도감 칩도 같은 유리 질감.
   긴 면에는 블러를 걸지 않고(성능), 작은 조각에만 건다. */
.era-pick, .era-step-btn, .era-sub, .era-exam, .era-toc-i.on{
  background:var(--glass-bg); border-color:var(--glass-line);
  box-shadow:inset 0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.12)), 0 8px 20px -14px light-dark(rgba(31,76,82,.45), rgba(0,0,0,.7));
}
.era-pick, .era-step-btn, .era-toc-i.on{ -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.era-flow{ background:var(--glass-bg); border-top-color:var(--glass-line); border-right-color:var(--glass-line); border-bottom-color:var(--glass-line); box-shadow:inset 0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.12)); }
.era-toc-i.on{ border-left-color:inherit; box-shadow:inset 0 0 0 1px var(--glass-line), 0 8px 20px -14px light-dark(rgba(31,76,82,.45), rgba(0,0,0,.7)); }
.era-toc-i:hover{ background:var(--glass-bg-2); }
.era-reader.pick-open .era-toc{ background:var(--glass-pop); border-color:var(--glass-line); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.era-sub > summary, .era-exam > summary{ border-color:var(--glass-line); }
.era-people-links .term-chip{ background:var(--glass-bg); border-color:var(--glass-line); color:var(--clay); box-shadow:inset 0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.12)); }
.era-people-links .term-chip:hover{ background:var(--clay); color:var(--on-dark); border-color:var(--clay); }

/* =====================================================================
   유리 투명도 2차 — '서리 유리'에서 '맑은 유리'로
   흐림을 줄이고(22→10px) 면을 더 비우는 대신, 가장자리 빛(위 테두리·안쪽 테 링·아랫면 반사)을
   또렷하게 해서 유리 덩어리감은 테두리로 낸다.
   ===================================================================== */
:root{
  --glass-bg:     rgba(255,255,255,.13);
  --glass-bg-2:   rgba(255,255,255,.07);
  --glass-line:   rgba(255,255,255,.85);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 -12px 22px -16px rgba(255,255,255,.75),
    0 14px 34px -18px rgba(31,76,82,.32);
  --glass-blur:   blur(10px) saturate(1.9) brightness(1.04);
  /* 뒤 배경 색이 보여야 '맑다'가 읽힌다 — 바탕 색 덩어리를 조금 더 진하게 */
  --mesh-a: rgba(47,111,119,.48);
  --mesh-b: rgba(85,89,143,.44);
  --mesh-c: rgba(127,199,206,.52);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --glass-bg:     rgba(34,43,50,.2);
    --glass-bg-2:   rgba(34,43,50,.1);
    --glass-line:   rgba(255,255,255,.2);
    --glass-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 0 0 1px rgba(255,255,255,.05),
      inset 0 -12px 22px -16px rgba(255,255,255,.12),
      0 14px 34px -18px rgba(0,0,0,.7);
    --glass-blur:   blur(10px) saturate(1.7);
    --mesh-a: rgba(50,116,124,.56);
    --mesh-b: rgba(138,142,207,.42);
    --mesh-c: rgba(64,150,160,.40);
  }
}
:root[data-theme="dark"]{
  --glass-bg:     rgba(34,43,50,.2);
  --glass-bg-2:   rgba(34,43,50,.1);
  --glass-line:   rgba(255,255,255,.2);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -12px 22px -16px rgba(255,255,255,.12),
    0 14px 34px -18px rgba(0,0,0,.7);
  --glass-blur:   blur(10px) saturate(1.7);
  --mesh-a: rgba(50,116,124,.56);
  --mesh-b: rgba(138,142,207,.42);
  --mesh-c: rgba(64,150,160,.40);
}
/* 가운데가 흰 바탕이면 유리가 그냥 흰 판으로 읽힌다 — 화면 가운데에도 옅은 색 덩어리 둘을 더 깐다 */
body::before{
  background:
    radial-gradient(620px 460px at 6% 2%, var(--mesh-c), transparent 70%),
    radial-gradient(700px 520px at 100% 28%, var(--mesh-b), transparent 70%),
    radial-gradient(720px 520px at 0% 90%, var(--mesh-a), transparent 70%),
    radial-gradient(560px 420px at 62% 58%, var(--mesh-c), transparent 72%),
    radial-gradient(520px 380px at 30% 40%, color-mix(in srgb, var(--mesh-b) 70%, transparent), transparent 72%);
}
@media (max-width:700px){
  body::before{
    background:
      radial-gradient(420px 360px at 8% 4%, var(--mesh-c), transparent 70%),
      radial-gradient(460px 420px at 100% 30%, var(--mesh-b), transparent 70%),
      radial-gradient(480px 420px at 0% 85%, var(--mesh-a), transparent 70%),
      radial-gradient(360px 300px at 70% 62%, var(--mesh-c), transparent 72%),
      radial-gradient(320px 280px at 20% 46%, color-mix(in srgb, var(--mesh-b) 70%, transparent), transparent 72%);
  }
}
@media print{ body::before{ display:none; } }

/* 다크 모드 알약 — 흰 섞임·색 그림자 때문에 버튼이 형광등처럼 빛났다. 색은 옅은 틴트로만, 그림자는 검게. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) :is(.opt-pill.selected, .btn-dark, .chip.active, .tabbar button.active, .btn-primary.active, .nav a.active){
    background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 46%, transparent), color-mix(in srgb, var(--moss) 30%, transparent));
    border-color:color-mix(in srgb, var(--moss) 55%, rgba(255,255,255,.12));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 14px -10px rgba(0,0,0,.7);
  }
  :root:not([data-theme="light"]) .btn-primary:not(.active){
    background:linear-gradient(180deg, color-mix(in srgb, var(--clay) 52%, transparent), color-mix(in srgb, var(--clay) 34%, transparent));
    border-color:color-mix(in srgb, var(--clay) 55%, rgba(255,255,255,.12));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px -12px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"] :is(.opt-pill.selected, .btn-dark, .chip.active, .tabbar button.active, .btn-primary.active, .nav a.active){
  background:linear-gradient(180deg, color-mix(in srgb, var(--moss) 46%, transparent), color-mix(in srgb, var(--moss) 30%, transparent));
  border-color:color-mix(in srgb, var(--moss) 55%, rgba(255,255,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 14px -10px rgba(0,0,0,.7);
}
:root[data-theme="dark"] .btn-primary:not(.active){
  background:linear-gradient(180deg, color-mix(in srgb, var(--clay) 52%, transparent), color-mix(in srgb, var(--clay) 34%, transparent));
  border-color:color-mix(in srgb, var(--clay) 55%, rgba(255,255,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px -12px rgba(0,0,0,.75);
}

/* 회원 관리 — 관리자는 따로. 넓은 화면은 오른쪽 패널, 좁은 화면은 '관리자' 탭 */
.mem-admins{ display:none; }
.mem-main{ min-width:0; }
@media (min-width:1280px){
  .mem-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
  .mem-chip-admins{ display:none; }
  .mem-admins{
    display:block; position:sticky; top:84px; padding:16px 16px 6px; border-radius:18px;
    background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  }
  .mem-admins h3{ margin:0 0 10px; font-size:15px; }
  .mem-admins ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
  .mem-admin{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
    background:var(--glass-bg-2); border:1px solid var(--glass-line);
  }
  .mem-admin-who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
  .mem-admin-mail{ font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mem-admin .btn{ flex:none; padding:6px 10px; font-size:12px; }
  .mem-admins > p{ margin:10px 2px; }
}

/* =====================================================================
   하단 탭바 리퀴드 글라스 렌즈 (iOS 스타일) — 탭보다 넓은 알약이 선택된 탭 위에 얹혀 탭바 위아래로 살짝 튀어나온다.
   렌즈 안은 맑고, 무지개빛 굴절은 가장자리에서만 생긴다. 렌즈 아래 탭은 아이콘이 채워지고 글자가 커진다.
   탭바 안에 두면 부모의 backdrop-filter 때문에 뒤 화면이 안 비치므로, 탭바 바깥 형제(fixed)로 둔다.
   굴절은 SVG 변위 필터라 크롬 계열에서만 보이고, 사파리·파이어폭스는 굴절 없이 유리 질감만 남는다.
   ===================================================================== */
.m-lens{ display:none; }
@media (max-width:980px){
  /* 탭바 자체는 뿌연 흰 유리 — 렌즈가 그 위에서 '맑게' 도드라진다 */
  .m-tabbar{
    background:light-dark(rgba(255,255,255,.58), rgba(34,43,50,.55));
    -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
    touch-action:none; -webkit-user-select:none; user-select:none;
  }
  .m-lens{
    display:block; position:fixed; z-index:73; pointer-events:none; left:0; top:0;
    border-radius:999px; opacity:0;
    background:linear-gradient(180deg, light-dark(rgba(255,255,255,.34), rgba(255,255,255,.14)), light-dark(rgba(255,255,255,.1), rgba(255,255,255,.04)));
    box-shadow:
      inset 0 1.5px 0 light-dark(rgba(255,255,255,1), rgba(255,255,255,.45)),
      inset 0 0 0 1px light-dark(rgba(255,255,255,.8), rgba(255,255,255,.2)),
      inset 0 -10px 16px -10px light-dark(rgba(255,255,255,.9), rgba(255,255,255,.22)),
      0 0 0 .5px light-dark(rgba(60,70,80,.28), rgba(0,0,0,.5)),
      0 10px 22px -10px light-dark(rgba(31,50,60,.5), rgba(0,0,0,.7));
    /* 렌즈 뒤(진짜 탭 아이콘)를 강하게 흐려 복제본 위로 비쳐 보이지 않게 한다 */
    -webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(1.08);
    backdrop-filter:blur(16px) saturate(1.8) brightness(1.08);
    transition:left .38s cubic-bezier(.22,.8,.3,1), top .3s, width .3s, height .3s, transform .3s cubic-bezier(.22,.8,.3,1), opacity .2s;
  }
  /* 가장자리 무지개 빛(색수차) — 테두리 2px에만 */
  .m-lens::before{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none;
    background:conic-gradient(from 200deg, rgba(80,140,255,.75), rgba(255,255,255,.2) 18%, rgba(255,150,70,.7) 38%, rgba(255,255,255,.15) 55%, rgba(120,90,255,.7) 75%, rgba(80,230,200,.55) 90%, rgba(80,140,255,.75));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite:exclude;
    opacity:.8; filter:blur(.4px);
  }
  .m-lens::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(120% 80% at 25% 0%, rgba(255,255,255,.5), transparent 50%);
    mix-blend-mode:soft-light;
  }
  .m-lens.ready{ opacity:1; }
  .m-lens.moving{ transform:scale(1.05); }
  /* 잡고 있는 동안: 살짝 부풀고 더 맑아진다. 위치 전환은 끄고 손가락을 바로 따라온다 */
  .m-lens.holding{ transform:scale(1.07); }
  .m-lens.dragging{ transition:top .3s, width .3s, height .3s, transform .3s cubic-bezier(.22,.8,.3,1), opacity .2s; }
  body:has(.mtopbar.show.bar-tuck) .m-lens{ transform:translateY(calc(100% + 60px)); }

  /* 렌즈 아래(활성·드래그 중 미리보기) 탭: 아이콘이 굵게 채워지고 글자가 커진다 */
  .m-tabbar a svg, .m-tabbar a span{ transition:transform .3s cubic-bezier(.3,1.5,.5,1), color .2s; }
  .m-tabbar.has-lens a.active, .m-tabbar a.peek{ background:none; box-shadow:none; color:light-dark(#10161b, #fff); }
  .m-tabbar.has-lens a.active svg, .m-tabbar a.peek svg{
    stroke-width:2.2; fill:color-mix(in srgb, currentColor 30%, transparent); filter:none; transform:scale(1.14);
  }
  .m-tabbar.has-lens a.active span, .m-tabbar a.peek span{ font-weight:800; transform:scale(1.16); }
  /* 드래그 중에는 원래 활성 탭이 아니라 렌즈 아래 탭만 강조한다 */
  .m-tabbar.peeking a.active:not(.peek){ color:var(--ink-soft); }
  .m-tabbar.peeking a.active:not(.peek) svg{ stroke-width:1.8; fill:none; transform:none; }
  .m-tabbar.peeking a.active:not(.peek) span{ font-weight:600; transform:none; }
  /* 렌즈 아래 진짜 탭은 숨긴다 — 확대 복제본이 대신 보여 주므로 겹쳐 흐려 보이지 않는다 */
  .m-tabbar.has-lens a.active svg, .m-tabbar.has-lens a.active span,
  .m-tabbar a.peek svg, .m-tabbar a.peek span{ opacity:0; }
  .m-tabbar.has-lens.peeking a.active:not(.peek) svg, .m-tabbar.has-lens.peeking a.active:not(.peek) span{ opacity:1; }
  .m-lens .m-tabbar.mc a svg, .m-lens .m-tabbar.mc a span{ opacity:1 !important; }
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){ .m-lens{ transition:opacity .2s; } }
@media (max-width:980px) and (prefers-reduced-transparency:reduce){
  .m-lens{ -webkit-backdrop-filter:none; backdrop-filter:none; background:color-mix(in srgb, var(--moss) 16%, transparent); }
}

/* 렌즈 안 확대 복제본 — 사파리에서도 보이는 '렌즈 아래가 커 보이는' 효과 */
@media (max-width:980px){
  .m-lens::before{ z-index:2; }
  .m-lens-in{
    position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none;
    background:light-dark(rgba(246,251,252,.92), rgba(44,56,64,.92));
  }
  .m-lens-in::after{
    content:''; position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none;
    box-shadow:inset 0 0 12px 1px light-dark(rgba(31,76,82,.22), rgba(0,0,0,.35));
    background:radial-gradient(ellipse at 50% 40%, transparent 55%, light-dark(rgba(31,76,82,.1), rgba(0,0,0,.18)) 100%);
  }
  .m-lens-content{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px; pointer-events:none;
    font-size:10.5px; font-weight:800; white-space:nowrap;
    color:light-dark(#10161b, #fff);
    -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
  }
  /* 색 번짐은 아이콘에만 — 글자에 필터를 걸면 흐려진다 */
  .m-lens-content svg{
    width:22px; height:22px; flex-shrink:0; transform:scale(1.24);
    stroke-width:2.2; fill:color-mix(in srgb, currentColor 30%, transparent);
    filter:drop-shadow(0 0 0 rgba(255,40,90,0)) drop-shadow(0 0 0 rgba(30,130,255,0));
    transition:filter .1s ease-out;
  }
  .m-lens.fx .m-lens-content svg{
    filter:drop-shadow(2px 0 0 rgba(255,40,90,.5)) drop-shadow(-2px 0 0 rgba(30,130,255,.5));
  }
  .m-lens-content span{ transform:scale(1.24); text-shadow:none; }
}

/* 회원 관리(모바일) — 칩·검색·표·버튼·배지·셀렉트의 글자 크기를 13px 한 가지로 맞춘다 */
@media (max-width:700px){
  .mem-layout .stats-table, .mem-layout .stats-table th, .mem-layout .stats-table td,
  .mem-layout .stats-hint, .mem-layout .mem-status, .mem-layout .auth-badge,
  .mem-layout .mem-search, .mem-layout .mem-practical, .mem-layout .mem-admin-who, .mem-layout .mem-admin-mail,
  .mem-layout .mem-actions .btn, .mem-layout .chip{ font-size:13px; }
  .mem-layout .mem-actions .btn{ padding:5px 11px; }
}

/* 모바일 메뉴 드로어도 리퀴드 글라스: 반투명 + 블러, 안쪽 하이라이트 */
@media (max-width:700px){
  .nav{
    background:light-dark(rgba(246,251,252,.58), rgba(30,38,46,.55));
    backdrop-filter:blur(26px) saturate(1.8) brightness(1.06); -webkit-backdrop-filter:blur(26px) saturate(1.8) brightness(1.06);
    border-left:1px solid rgba(255,255,255,.55);
    box-shadow:1px 0 0 rgba(255,255,255,.7) inset, 0 1px 0 rgba(255,255,255,.8) inset, -12px 0 40px rgba(0,0,0,.22);
  }
  :root[data-theme="dark"] .nav, :root:not([data-theme="light"]) .nav{ border-left-color:rgba(255,255,255,.16); }
  .nav-drawer-head{ background:transparent; border-bottom-color:rgba(255,255,255,.35); }
}

/* 모바일 메뉴: 모서리 둥근 떠 있는 패널, 크기+투명도로 부드럽게 펼침(clip-path 끊김 제거) */
@media (max-width:700px){
  .nav{
    top:max(10px, env(safe-area-inset-top)); right:10px;
    height:auto; max-height:calc(100dvh - 20px - env(safe-area-inset-bottom));
    border-radius:30px; border:1px solid rgba(255,255,255,.5);
    padding-bottom:14px;
    clip-path:none;
    opacity:0; transform:scale(.88); transform-origin:92% 8%;
    transition:opacity .22s ease, transform .38s cubic-bezier(.22,1.2,.36,1), visibility 0s linear .38s;
  }
  .nav.mobile-open{
    clip-path:none; opacity:1; transform:none;
    transition:opacity .2s ease, transform .42s cubic-bezier(.22,1.2,.36,1), visibility 0s;
  }
  .nav-drawer-head{ padding:16px 12px 10px 24px; border-bottom:none; margin-bottom:2px; }
  .nav a, .nav.mobile-open .nav-menu a, .nav.mobile-open .nav-menu button{ border-radius:16px; margin:0 10px; }
  .nav a{ padding:12px 16px; }
  .nav.mobile-open .nav-menu a, .nav.mobile-open .nav-menu button{ padding:11px 16px 11px 30px; }
  .nav a.active{ box-shadow:none; background:color-mix(in srgb, var(--moss) 20%, rgba(255,255,255,.12)); }
  .nav.mobile-open .nav-end{ border-top-color:rgba(255,255,255,.28); margin:8px 10px 0; width:auto; }
  .nav-prefs, html.has-haptic .nav-prefs{ border-top-color:rgba(255,255,255,.28); margin:8px 10px 0; width:auto; }
  .nav-pref-toggle{ padding:12px 16px; border-radius:16px; }
  #navAuthLink:not(.nav-user){ margin:12px 16px 0; border-radius:16px; }
}

/* 라이트 모드: 메뉴 패널을 더 밝게, 뒤 어둠막은 옅게 */
@media (max-width:700px){
  .nav{ background:light-dark(rgba(252,254,255,.74), rgba(30,38,46,.55)); }
  .nav-backdrop{ background:light-dark(rgba(20,30,36,.22), rgba(0,0,0,.44)); }
}

/* =====================================================================
   용어사전 카드·암기모드 — 액체 유리
   카드가 수백 장이라 backdrop-filter는 쓰지 않는다(스크롤 끊김). 대신
   위쪽 사선 반사광 + 테두리 빛 + 아랫면 반사 + 호버 때 떠오르는 움직임으로 질감을 낸다.
   ===================================================================== */
.dict-card, .flip-card-front{
  background-image:
    linear-gradient(155deg, light-dark(rgba(255,255,255,.62), rgba(255,255,255,.12)) 0%, light-dark(rgba(255,255,255,.12), rgba(255,255,255,.02)) 34%, transparent 58%),
    linear-gradient(0deg, light-dark(rgba(255,255,255,.22), rgba(255,255,255,.04)) 0%, transparent 28%);
  background-color:var(--glass-bg);
  border:1px solid var(--glass-line);
  border-radius:20px;
  box-shadow:var(--glass-shadow);
}
.dict-card{ transition:transform .22s cubic-bezier(.3,1.3,.5,1), box-shadow .22s, background-color .22s; }
.dict-card:hover{
  transform:translateY(-2px);
  background-color:var(--glass-bg-2);
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255,255,255,1), rgba(255,255,255,.4)),
    inset 0 0 0 1px light-dark(rgba(255,255,255,.4), rgba(255,255,255,.08)),
    inset 0 -14px 24px -16px light-dark(rgba(255,255,255,.85), rgba(255,255,255,.14)),
    0 18px 36px -16px light-dark(rgba(31,76,82,.4), rgba(0,0,0,.75));
}
.flip-card-front, .flip-card-back{ border-radius:20px; }
.flip-card:hover .flip-card-front{
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255,255,255,1), rgba(255,255,255,.4)),
    inset 0 0 0 1px light-dark(rgba(255,255,255,.4), rgba(255,255,255,.08)),
    inset 0 -14px 24px -16px light-dark(rgba(255,255,255,.85), rgba(255,255,255,.14)),
    0 18px 36px -16px light-dark(rgba(31,76,82,.4), rgba(0,0,0,.75));
}
/* 뒷면: 글자(밝은색)가 얹히니 바탕은 틸을 진하게 두고, 위 사선 반사광과 테두리 빛만 유리처럼 */
.flip-card-back{
  background-color:transparent;
  background-image:
    linear-gradient(155deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 30%, transparent 52%),
    linear-gradient(0deg, rgba(255,255,255,.1) 0%, transparent 26%),
    linear-gradient(180deg, rgba(47,111,119,.94), rgba(31,76,82,.97));
  border-color:rgba(255,255,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -14px 24px -16px rgba(255,255,255,.3),
    0 16px 34px -16px rgba(31,76,82,.6);
}
@media (prefers-reduced-motion:reduce){
  .dict-card{ transition:none; }
  .dict-card:hover{ transform:none; }
}
@media (prefers-reduced-transparency:reduce){
  .dict-card, .flip-card-front{ background-image:none; background-color:var(--card); }
}
@media print{
  .dict-card, .flip-card-front{ background-image:none; background-color:#fff; box-shadow:none; }
}

/* 용어사전 카드 글자 크기 상향 — 설명문은 14px대, 제목은 한 단계 크게 */
.dict-card h4{ font-size:16.5px; }
.dict-card p{ font-size:14px; line-height:1.6; }
.flip-card-front h4{ font-size:18px; }
.flip-card-back p{ font-size:14.5px; line-height:1.6; opacity:1; }
@media (max-width:700px){
  .dict-card h4{ font-size:16px; }
  .dict-card p{ font-size:13.5px; }
  .flip-card-back p{ font-size:14px; }
}

/* 맞추기 · 비교 심화 · 이어지는 흐름 · 매트릭스 사건 */
.eh3-ctl .eh3-quizbtn{ color:var(--on-dark); background:var(--clay); border-color:var(--clay); }
.eh3-ctl .eh3-quizbtn:hover{ color:var(--on-dark); filter:brightness(1.1); }
.eh3-ctl .eh3-quizbtn[aria-pressed="true"]{ background:var(--rust); border-color:var(--rust); }
.eh3-c-next{ margin:5px 0 0; font-size:12px; line-height:1.55; color:var(--ink-soft); }
.eh3-c-next i{ font-style:normal; font-weight:700; color:var(--moss-dark); margin-right:6px; }
.eh3-lbl{ display:inline-block; font-style:normal; font-size:10.5px; font-weight:700; color:var(--ink-faint); margin-right:6px; }
.eh3-cmpcol .eh3-c-blurb{ font-size:12px; line-height:1.55; }
.eh3-exam{ margin:5px 0 0; padding:0; list-style:none; font-size:11.5px; line-height:1.5; color:var(--ink-soft); }
.eh3-exam li{ position:relative; padding-left:10px; margin-top:2px; }
.eh3-exam li.eh3-lbl{ display:block; padding-left:0; margin:0 0 1px; }
.eh3-exam li:not(.eh3-lbl)::before{ content:'·'; position:absolute; left:2px; color:var(--rust); font-weight:700; }
.eh3-mx-track.axis-row .eh3-ev{ position:absolute; top:17px; transform:translateX(-50%); font-size:9px; line-height:1; color:var(--rust); cursor:help; }
.eh3-mx-track > u{ position:absolute; top:0; bottom:0; width:0; border-left:1px dotted var(--rust); opacity:.4; pointer-events:none; text-decoration:none; }
.eh3-mx-ev{ margin:6px 4px 0; display:flex; flex-wrap:wrap; gap:2px 12px; font-size:11.5px; line-height:1.6; color:var(--ink-soft); }
.eh3-mx-ev i{ font-style:normal; font-weight:700; color:var(--rust); }
.eh3-mx-ev span b{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); margin-right:2px; }
.lb-link{ display:inline-block; text-decoration:none; margin-top:8px; font:inherit; font-size:13px; font-weight:700; color:var(--on-dark, #fff); background:var(--moss); border:0; border-radius:999px; padding:6px 14px; cursor:pointer; }
.lb-link:hover{ filter:brightness(1.1); }
/* 맞추기 카드 */
.eh3-quiz{ display:flex; flex-direction:column; gap:6px; }
.eh3-q-top{ display:flex; align-items:baseline; gap:10px; font-size:12px; color:var(--ink-faint); }
.eh3-q-top b{ font-size:14px; color:var(--ink); }
.eh3-q-top .sc{ margin-left:auto; font-weight:700; color:var(--moss-dark); }
.eh3-q-img{ display:block; width:100%; max-width:340px; margin:0 auto; padding:0; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--paper-2); overflow:hidden; cursor:zoom-in; }
.eh3-q-img img{ display:block; width:100%; max-height:190px; object-fit:contain; background:var(--paper-2); }
.eh3-q-ask{ margin:2px 0 0; font-size:13.5px; font-weight:700; color:var(--ink); text-align:center; }
.eh3-q-msg{ margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-soft); text-align:center; }
.eh3-q-msg span{ display:block; font-size:11.5px; color:var(--ink-faint); }
.eh3-q-msg.good{ color:var(--moss-dark); font-weight:700; }
.eh3-q-msg.bad{ color:var(--rust); font-weight:700; }
.eh3-q-big{ margin:0; text-align:center; font-size:34px; font-weight:800; color:var(--moss-dark); }
.eh3-q-big small{ font-size:15px; font-weight:600; color:var(--ink-faint); }
.eh3-mini .mini-thumb{ padding:0; width:30px; height:30px; border-radius:50%; overflow:hidden; border:2px solid var(--clay); }
.eh3-mini .mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.eh3-stage.shake{ animation:eh3shake .38s; }
@keyframes eh3shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); } 45%{ transform:translateX(6px); } 70%{ transform:translateX(-4px); } }
.eh3.quizzing .eh3-c-feat{ display:none; }
@media (prefers-reduced-motion: reduce){ .eh3-stage.shake{ animation:none; } }

/* ---- 시각화 · 노출 격자 + 미리보기 (renderVizExpo, diagrams.js) ---- */
.ve{ --ve-a:var(--moss); --ve-s:#B26A00; --ve-i:var(--clay); --ve-ok:#2E9F6E; --ve-over:#D8473A; --ve-under:#3A78D8; margin-bottom:36px; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ve{ --ve-s:#F0A944; --ve-i:#A28AFF; } }
:root[data-theme="dark"] .ve{ --ve-s:#F0A944; --ve-i:#A28AFF; }
.ve-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:16px; }
.ve-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; min-width:0; }
.ve-bar{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-bottom:10px; }
.ve-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.ve-tg{ font-size:13px; color:var(--ink-soft); display:inline-flex; gap:5px; align-items:center; cursor:pointer; user-select:none; }
.ve-gwrap{ overflow-x:auto; }
table.ve-gt{ border-collapse:separate; border-spacing:2px; width:100%; font-size:12px; font-variant-numeric:tabular-nums; table-layout:fixed; }
.ve-gt th{ font-weight:700; color:var(--ink-soft); padding:2px 0; font-size:11.5px; }
.ve-gt th.rh{ text-align:right; padding-right:6px; width:54px; color:var(--ve-s); }
.ve-gt th.ch{ color:var(--ve-a); }
.ve-gt td{ height:25px; text-align:center; border-radius:4px; cursor:pointer; color:var(--ink-soft); background:var(--paper-2); padding:0; }
.ve-gt td.ok{ background:color-mix(in srgb, var(--ve-i) calc(14% + var(--k)*46%), var(--card)); color:var(--ink); }
.ve-gt td.same{ box-shadow:inset 0 0 0 2px var(--ve-ok); font-weight:700; }
.ve-gt td.sel{ box-shadow:inset 0 0 0 3px var(--ink); font-weight:800; }
.ve-gt td.over, .ve-gt td.under{ background:transparent; color:var(--ink-faint); border:1px dashed var(--line); }
.ve-gt td:focus-visible{ outline:2px solid var(--moss); }
.ve-gleg{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--ink-soft); margin-top:8px; }
.ve-gleg i{ display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:4px; }
.ve-status{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13.5px; }
.ve-dot{ width:10px; height:10px; border-radius:50%; background:var(--ve-ok); flex:none; }
.ve-preview{ position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000; }
.ve-preview canvas{ position:absolute; inset:0; width:100%; height:100%; }
.ve-bg{ transform:scale(1.08); }
.ve-grain{ mix-blend-mode:overlay; image-rendering:pixelated; opacity:.05; }
.ve-flag{ position:absolute; left:8px; top:8px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; color:#fff; background:rgba(0,0,0,.55); }
.ve-gauges{ margin-top:12px; display:grid; gap:10px; }
.ve-g{ display:grid; grid-template-columns:62px 1fr; gap:2px 10px; align-items:center; }
.ve-g b{ font-size:13px; }
.ve-trk{ height:8px; border-radius:99px; background:var(--paper-2); overflow:hidden; }
.ve-trk i{ display:block; height:100%; border-radius:99px; transition:width .15s; }
.ve-g small{ grid-column:2; color:var(--ink-soft); font-size:12.5px; }
.ve-sum{ margin:12px 0 0; font-size:14px; }
.ve-controls{ margin-top:16px; }
.ve-row{ display:grid; grid-template-columns:96px 1fr 120px; gap:10px; align-items:center; margin:8px 0; }
.ve-row label{ font-size:13.5px; font-weight:700; }
.ve-row .v{ font-size:14px; text-align:right; font-variant-numeric:tabular-nums; }
.ve-row input[type=range]{ width:100%; }
.ve-row.a label{ color:var(--ve-a); } .ve-row.a input{ accent-color:var(--ve-a); }
.ve-row.s label{ color:var(--ve-s); } .ve-row.s input{ accent-color:var(--ve-s); }
.ve-row.i label{ color:var(--ve-i); } .ve-row.i input{ accent-color:var(--ve-i); }
.ve-row.e label{ color:var(--ink-soft); } .ve-row.e input{ accent-color:var(--ink-soft); }
.ve-presets{ margin-top:12px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ve-presets span{ font-size:13px; color:var(--ink-soft); margin-right:2px; }
.ve-foot{ margin-top:10px; font-size:12px; color:var(--ink-faint); }
.ve-sub{ font-size:16px; margin:28px 0 4px; }
@media (max-width: 860px){ .ve-grid{ grid-template-columns:1fr; } }
@media (max-width: 520px){
  .ve-row{ grid-template-columns:70px 1fr 88px; }
  table.ve-gt{ font-size:10px; border-spacing:1.5px; }
  .ve-gt td{ letter-spacing:-.05em; height:23px; }
  .ve-gt th.rh{ width:38px; padding-right:3px; font-size:10px; }
  .ve-gt th.ch{ font-size:10px; }
}

/* ---- 시각화 · 조명 패턴 (vizLightingHtml, diagrams.js) ---- */
.vl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vl-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; min-width:0; }
.vl-card h4{ font-size:14px; margin:0 0 8px; color:var(--ink-soft); }
.vl-orbit{ width:100%; height:auto; display:block; touch-action:none; user-select:none; }
.vl-handle{ cursor:grab; }
.vl-handle:active{ cursor:grabbing; }
.vl-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.vl-chips > span{ font-size:13px; color:var(--ink-soft); margin-right:2px; }
.vl-ball{ width:100%; height:auto; display:block; border-radius:10px; margin-top:12px; }
.vl-balln{ font-size:12px; color:var(--ink-faint); margin:6px 0 0; }
.vl-accnote{ font-size:12.5px; color:var(--ink-soft); margin:8px 0 0; }
.vl-hint{ font-size:12px; color:var(--ink-faint); margin:8px 0 0; }
.vl-photo{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#222; }
.vl-photo i{ position:absolute; inset:0; background-size:193.94% auto; background-position:4.84% 50%; background-repeat:no-repeat; }
.vl-photo i.flip{ transform:scaleX(-1); }
.vl-chips .chip:disabled{ opacity:.38; cursor:not-allowed; }
.vl-photo .vl-fx{ position:absolute; inset:0; pointer-events:none; }
.vl-pname{ margin:12px 0 2px; font-size:18px; font-weight:700; }
.vl-pname small{ font-size:12.5px; font-weight:400; color:var(--ink-soft); margin-left:6px; }
.vl-pdesc{ margin:0; font-size:13.5px; color:var(--ink-soft); }
.vl-pset{ margin:8px 0 0; padding:8px 10px; background:var(--paper-2); border-radius:10px; font-size:12.5px; color:var(--ink-soft); }
.vl-pset b{ color:var(--ink); }
.vl-grid{ align-items:start; }
.vl-right{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.vl-stick{ position:sticky; top:calc(var(--header-h, 73px) + 8px); z-index:20; }
.vl-stick .vl-photo{ width:min(100%, 32vh); margin:0 auto; }
.vl-stick .vl-ball{ width:min(100%, 44vh); margin:10px auto 0; }
.vl-stick .vl-pname{ margin:10px 0 0; }
@media (max-width: 820px){
  .vl-grid{ grid-template-columns:1fr; }
  .vl-right{ display:contents; }
  .vl-stick{ order:-1; display:grid; grid-template-columns:min(46%, 26vh) 1fr; gap:8px; align-items:center; padding:8px; top:calc(var(--header-h, 73px) + 4px); }
  .vl-stick .vl-photo, .vl-stick .vl-ball{ width:100%; margin:0; }
  .vl-stick .vl-pname{ grid-column:1 / -1; margin:0; font-size:14px; }
  .vl-info{ order:1; }
}

/* 특성곡선 → 사진 재현 */
.hd-photo{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.hd-photo-h{ margin:0 0 10px; font-size:15px; }
.hd-sl{ flex:1; min-width:150px; max-width:340px; accent-color:var(--moss-dark); }
.hd-off-v{ font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--ink); min-width:92px; }
.hd-legend{ font-size:12px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hd-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-left:6px; }
.hd-photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.hd-photo-grid figure{ margin:0; }
.hd-photo-grid canvas{ width:100%; height:auto; display:block; border-radius:var(--radius-s); background:#111; cursor:crosshair; }
.hd-photo-grid figcaption{ font-size:12px; color:var(--ink-soft); margin-top:5px; line-height:1.45; }
.hd-photo-note{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin:12px 0 0; }
@media(max-width:520px){ .hd-photo-grid{ grid-template-columns:1fr; } }

/* 감마 비교 · CI */
.hd-path-cmp{ stroke-width:1.8; opacity:.85; }
.hd-path-cmp.c0{ stroke:#3b82f6; } .hd-path-cmp.c1{ stroke:var(--ink-faint); } .hd-path-cmp.c2{ stroke:#e0752b; }
.hd-gline{ stroke:var(--moss-dark); stroke-width:1.4; stroke-dasharray:2,3; }
.hd-ciline{ stroke:var(--rust); stroke-width:2; }
.hd-cipt{ fill:var(--rust); stroke:var(--paper); stroke-width:1.5; }
.hd-citxt{ font-size:11px; font-weight:700; fill:var(--rust); }
.hd-stats{ margin-top:12px; }
.hd-stat-sum{ font-size:13.5px; color:var(--ink); margin-bottom:8px; text-align:center; }
.hd-stat-sum span{ color:var(--ink-soft); font-size:12px; }
.hd-gtab{ width:100%; border-collapse:collapse; font-size:12.5px; }
.hd-gtab th, .hd-gtab td{ padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; }
.hd-gtab th{ font-family:var(--font-ui); font-size:11.5px; color:var(--ink-soft); font-weight:600; }
.hd-gtab td.u{ color:var(--ink-soft); }
.hd-gtab tr.cur td{ background:var(--moss-tint); color:var(--ink); font-weight:600; }
.hd-gtab tr.cur td.u{ font-weight:400; }
.hd-sw{ display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.hd-sw.c0{ background:#3b82f6; } .hd-sw.c1{ background:var(--ink-faint); } .hd-sw.c2{ background:#e0752b; }
.hd-use-h{ margin:22px 0 6px; font-size:15px; }
.hd-use-p{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 10px; }

/* 존 시스템 실습 2 */
.zone-lab{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.zl-intro{ font-size:13px; color:var(--ink-soft); line-height:1.65; margin:0 0 10px; }
.zl-step{ font-size:13.5px; margin:12px 0 6px; color:var(--ink); }
.zl-step b{ display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--moss-dark); color:#fff; font-size:12px; align-items:center; justify-content:center; margin-right:6px; }
.zl-sub{ font-size:12px; color:var(--ink-soft); }
.zl-chips{ margin-bottom:6px; }
.zl-reco{ font-size:13px; line-height:1.6; margin:6px 0; padding:8px 12px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); }
.zl-reco:empty{ display:none; }
.zl-reco .chip{ margin-left:6px; }
.zl-bottom{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.zl-map{ width:230px; max-width:100%; flex:0 0 auto; }
.zl-read{ flex:1; min-width:220px; font-size:13px; line-height:1.7; color:var(--ink-soft); }
.zl-read b{ color:var(--ink); }
.zl-band{ fill:var(--moss-tint); opacity:.7; }
.zl-diag{ stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:3,3; }
.zl-frame{ fill:none; stroke:var(--line); }
.zl-tk{ font-size:8.5px; fill:var(--ink-faint); }
.zl-ax{ font-size:9.5px; fill:var(--ink-soft); }
.zl-curve{ fill:none; stroke:var(--ink); stroke-width:2.4; }

/* 색 관리 실습 */
.cl-read{ margin-top:12px; font-size:13.5px; line-height:1.7; padding:10px 14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); }
.cl-sub{ color:var(--ink-soft); font-size:12px; }

/* 회전 후에도 선택 표시가 버튼의 실제 레이아웃을 따른다.
   별도의 fixed 렌즈/블러 합성 레이어는 iOS에서 이전 가로 화면 크기를 남길 수 있다. */
@media (max-width:980px){
  .m-tabbar .m-lens{
    display:block !important; position:absolute; z-index:2;
    left:var(--tab-drag-left, var(--tab-center)) !important; top:50% !important;
    width:calc((100% - 14px) * .292) !important; height:calc((100% - 14px) * 1.18) !important;
    transform:translate(-50%,-50%);
    transition:left .38s cubic-bezier(.22,.8,.3,1), width .22s ease, transform .3s cubic-bezier(.22,.8,.3,1), opacity .2s;
    -webkit-backdrop-filter:blur(3px) saturate(1.3);
    backdrop-filter:blur(3px) saturate(1.3);
    background:linear-gradient(165deg, light-dark(rgba(255,255,255,.62), rgba(255,255,255,.21)), transparent 45%, light-dark(rgba(222,242,250,.2), rgba(140,170,195,.08)));
    box-shadow:inset 0 2px 2px light-dark(rgba(255,255,255,1), rgba(255,255,255,.6)),
      inset 0 -2px 5px light-dark(rgba(70,98,118,.19), rgba(0,0,0,.28)),
      inset 0 0 0 1px light-dark(rgba(255,255,255,.86), rgba(255,255,255,.35)),
      0 0 0 .5px light-dark(rgba(61,86,105,.27), rgba(165,194,218,.25)),
      0 6px 16px -6px light-dark(rgba(31,50,60,.35), rgba(0,0,0,.65));
  }
  .m-tabbar .m-lens::before{
    padding:2px; opacity:.95; filter:blur(.15px);
    background:conic-gradient(from 205deg, rgba(75,137,255,.85), rgba(255,255,255,.9) 15%, rgba(255,174,106,.7) 32%, rgba(255,255,255,.95) 48%, rgba(150,110,245,.78) 68%, rgba(90,212,228,.68) 83%, rgba(75,137,255,.85));
  }
  .m-tabbar .m-lens.holding, .m-tabbar .m-lens.moving{ transform:translate(-50%,-50%); }
  .m-tabbar .m-lens.holding{ width:calc((100% - 14px) * .315) !important; }
  .m-tabbar .m-lens.dragging{ transition:width .22s ease, transform .3s, opacity .2s; }
  body:has(.mtopbar.show.bar-tuck) .m-tabbar .m-lens{ transform:translate(-50%,-50%); }
  .m-lens-in{ background:light-dark(rgba(246,251,252,.14), rgba(44,56,64,.18)); }
  .m-lens-in::after{
    background:radial-gradient(ellipse at 50% 45%, transparent 48%, light-dark(rgba(48,81,108,.13), rgba(0,0,0,.2)) 100%);
    box-shadow:inset 0 0 9px 1px light-dark(rgba(51,93,118,.12), rgba(0,0,0,.2));
  }
  .m-lens-content svg{ transform:scale(1.4); }
  .m-lens-content span{ transform:scale(1.28); }
  .m-tabbar{ isolation:isolate; container-type:inline-size; --tab-center:calc(10% + 5.6px); --tab-point:10; }
  .m-tabbar a{ position:relative; }
  .m-tabbar.has-lens a.active, .m-tabbar a.peek{ background:none; box-shadow:none; }
  .m-tabbar::before{
    content:''; position:absolute; z-index:-1; pointer-events:none;
    left:var(--tab-drag-left, var(--tab-center)); top:50%;
    width:calc((100% - 14px) * .268); height:calc((100% - 14px) * 1.04);
    transform:translate(-50%,-50%); opacity:0;
    transition:left .38s cubic-bezier(.22,.8,.3,1), transform .3s cubic-bezier(.22,.8,.3,1), opacity .2s;
    border-radius:999px; border:1px solid var(--glass-line);
    background:linear-gradient(180deg, light-dark(rgba(255,255,255,.85), rgba(55,69,80,.96)), light-dark(rgba(238,248,250,.98), rgba(35,46,55,.98)));
    box-shadow:inset 0 1px 2px rgba(255,255,255,.6), 0 3px 10px rgba(31,50,60,.2);
  }
  .m-tabbar.has-lens a.active svg, .m-tabbar.has-lens a.active span,
  .m-tabbar a.peek svg, .m-tabbar a.peek span{ opacity:0; }
  .m-tabbar.has-lens::before, .m-tabbar.peeking::before{ display:none; }
  .m-tabbar:has(a.active)::before, .m-tabbar.peeking::before{ opacity:1; }
  .m-tabbar:has(a[data-tab="mechanism"].active){ --tab-center:calc(30% + 2.8px); --tab-point:30; }
  .m-tabbar:has(a[data-tab="history"].active){ --tab-center:50%; --tab-point:50; }
  .m-tabbar:has(a[data-tab="dictionary"].active){ --tab-center:calc(70% - 2.8px); --tab-point:70; }
  body:has(.m-lens.holding) .m-tabbar::before{ transform:translate(-50%,-50%) scale(1.07); }
  body:has(.m-lens.dragging) .m-tabbar::before{ transition:transform .3s, opacity .2s; }
  .m-tabbar{
    -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
    background:light-dark(rgba(246,251,252,.48), rgba(34,43,50,.5));
  }
  .nav{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:light-dark(rgba(246,251,252,.98), rgba(30,38,46,.98));
    transform:none; transition:opacity .2s ease, visibility .2s ease;
  }
  .nav.mobile-open{ transform:none; transition:opacity .2s ease, visibility .2s ease; }
  body.nav-lock .site-header{ z-index:50; }
  .m-lens-distort{ position:absolute; inset:0; overflow:hidden; }
  .m-lens-label-layer{ position:absolute; inset:0; overflow:hidden; }
  .m-lens-distort .m-lens-scene-tab > span{ visibility:hidden; }
  .m-lens-label-layer .m-lens-scene-tab > svg{ visibility:hidden; }
  .m-lens.refracting .m-lens-distort{ filter:url(#lensRefract); }
  .m-lens-scene{
    --lens-point:var(--tab-drag-point, var(--tab-point));
    position:absolute; display:flex; padding:6px; border:1px solid transparent;
    width:calc(100cqw + 14px); height:calc(100% / 1.18 + 14px);
    left:50%; top:50%;
    transform:translate(calc(-7px - var(--lens-point) * 1cqw), -50%);
    transition:transform .38s cubic-bezier(.22,.8,.3,1);
  }
  .m-lens.dragging .m-lens-scene{ transition:none; }
  .m-tabbar.has-lens a svg, .m-tabbar.has-lens a span{ opacity:1; }
  .m-lens-scene-tab{
    flex:1; min-width:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px; padding:7px 2px 6px;
    font-size:10.5px; font-weight:600; white-space:nowrap; color:var(--ink-soft);
  }
  .m-lens-scene-tab svg{ width:22px; height:22px; flex-shrink:0; }
  .m-lens-scene-tab.lens-selected{ color:light-dark(#526873, #fff); font-weight:700; }
  .m-lens-scene-tab.lens-selected svg{ stroke-width:1.65; fill:none; }
}
@media (max-width:700px){
  .nav{ transform:scale(.88); transform-origin:92% 8%; transition:opacity .22s ease, transform .38s cubic-bezier(.22,1.2,.36,1), visibility 0s linear .38s; }
  .nav.mobile-open{ transform:none; transition:opacity .2s ease, transform .42s cubic-bezier(.22,1.2,.36,1), visibility 0s; }
}
@media (max-width:980px) and (prefers-reduced-motion:reduce){
  .m-tabbar::before, .m-tabbar .m-lens, .nav, .nav.mobile-open{ transition:opacity .2s; }
}

/* 모바일 회전: 메뉴 패널은 화면 안에서 스크롤하고, 하단 메뉴는 손이 닿는
   폭을 유지한다. 가로 화면에서도 탭 선택 렌즈가 화면 밖으로 나가지 않는다. */
@media (max-width:980px){
  .m-tabbar{
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    max-width:480px; margin-inline:auto;
  }
  .m-tabbar .m-lens{
    width:calc((100% - 14px) * .20) !important;
  }
  .m-tabbar .m-lens.holding{ width:calc((100% - 14px) * .21) !important; }
  .nav{
    top:max(10px, env(safe-area-inset-top));
    right:max(10px, env(safe-area-inset-right));
    height:auto; max-height:calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
    width:min(300px, 86vw); min-width:0; max-width:86vw;
    border-radius:24px; padding-bottom:12px;
    clip-path:none; opacity:0; transform:none;
  }
  .nav.mobile-open{ clip-path:none; opacity:1; transform:none; }
  .nav-drawer-head{ background:var(--paper); border-radius:24px 24px 0 0; }
  .nav-links, .nav-end, .nav-prefs{ flex-shrink:0; }
  .nav a{ min-width:0; }
  .nav a > span:not(.nav-avatar){ min-width:0; overflow-wrap:anywhere; white-space:normal; }
  .wrap, .hero, .content-pane, .site-footer{ overflow-wrap:break-word; }
  .header-inner, .global-search-bar > .wrap{
    padding-left:max(18px, env(safe-area-inset-left));
    padding-right:max(18px, env(safe-area-inset-right));
  }
  .site-footer{ padding-bottom:24px; }
}
@media (max-width:980px) and (max-height:500px) and (orientation:landscape){
  .nav{ width:min(460px, 70vw); }
  .nav-drawer-head{ padding:4px 10px 4px 16px; margin:0; }
  .nav-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nav a{ margin:0 4px; padding:10px 12px; gap:8px; font-size:13px; }
  .nav.mobile-open .nav-end{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:auto; margin:4px 0 0; padding-top:4px;
  }
  .nav .nav-menu{ grid-column:1 / -1; }
  .m-tabbar{ bottom:max(6px, env(safe-area-inset-bottom)); padding-block:3px; }
  .m-tabbar a, .m-tabbar button{ padding-block:4px; }
  .m-tabbar svg{ width:19px; height:19px; }
  .m-lens-scene-tab{ padding-block:4px; }
  .m-lens-scene-tab svg{ width:19px; height:19px; }
  .hero{ padding-block:22px; }
  .hero-inner{ gap:18px; }
  .hero h1{ font-size:clamp(26px, 4vw, 36px); }
  html::before, html::after{ content:none; }
}

/* ---------- 탭바 선택 렌즈: 원 → 알약, 드래그 중 아이콘이 사라지던 굴절 필터 제거 ----------
   예전: 탭 폭 × (바 높이 × 1.18) ≈ 70×63 의 거의 정원이 알약 바 위아래로 튀어나왔다.
   지금: 바 안에 쏙 들어가는 가로로 긴 알약. 복제 장면 높이도 같은 계수로 맞춘다.
   SVG 변위 필터(#lensRefract)는 누르고 끄는 동안 아이콘·글자를 지우므로 쓰지 않고,
   무지개 테두리는 UI 톤에 맞는 흰 유리 테두리로 낮춘다. */
@media (max-width:980px){
  .m-tabbar{ --lens-k:1; }
  .m-tabbar .m-lens{
    width:calc((100% - 14px) * .22) !important;   /* 양 끝 탭(홈·메뉴)에서도 바 안쪽에 머무는 최대 폭 */
    height:calc((100% - 14px) * var(--lens-k)) !important;
  }
  .m-tabbar .m-lens.holding{ width:calc((100% - 14px) * .23) !important; }
  .m-lens-scene{ height:calc(100% / var(--lens-k) + 14px); }
  .m-lens.refracting .m-lens-distort{ filter:none; }
  .m-tabbar .m-lens::before{
    padding:1.5px; opacity:1; filter:none;
    background:linear-gradient(180deg, light-dark(rgba(255,255,255,.98), rgba(255,255,255,.55)), light-dark(rgba(255,255,255,.35), rgba(255,255,255,.12)) 55%, light-dark(rgba(255,255,255,.8), rgba(255,255,255,.3)));
  }
  .m-lens-content svg{ transform:scale(1.2); }
  .m-lens-content span{ transform:scale(1.12); }
  /* 라이트: 흰 탭바 위에서 '맑게 도드라지게' — 흰색 대신 옅은 청록 유리 + 또렷한 경계 */
  .m-tabbar .m-lens{
    background:linear-gradient(165deg, light-dark(rgba(255,255,255,.4), rgba(255,255,255,.21)), transparent 55%, light-dark(rgba(150,200,212,.3), rgba(140,170,195,.08)));
    box-shadow:inset 0 1.5px 1px light-dark(rgba(255,255,255,.75), rgba(255,255,255,.6)),
      inset 0 -3px 6px light-dark(rgba(40,100,120,.16), rgba(0,0,0,.28)),
      inset 0 0 0 1px light-dark(rgba(255,255,255,.5), rgba(255,255,255,.35)),
      0 0 0 .5px light-dark(rgba(40,95,115,.4), rgba(165,194,218,.25)),
      0 6px 14px -6px light-dark(rgba(31,76,90,.42), rgba(0,0,0,.65));
  }
  .m-lens-in{ background:light-dark(rgba(196,224,231,.3), rgba(44,56,64,.18)); }
  .m-tabbar .m-lens::before{
    background:linear-gradient(180deg, light-dark(rgba(255,255,255,.85), rgba(255,255,255,.55)), light-dark(rgba(120,175,190,.3), rgba(255,255,255,.12)) 60%, light-dark(rgba(255,255,255,.6), rgba(255,255,255,.3)));
  }
}

/* 눌림 피드백: 아이폰은 진동이 없어 누르는 순간 배경색으로 알려준다 */
@media (max-width:980px){
  .hamburger, .nav-close, .nav-fab, .to-top, .theme-toggle,
  .nav.mobile-open .nav-links a, .nav.mobile-open .nav-end a, .nav.mobile-open .nav-menu a,
  .nav.mobile-open .nav-menu button, .nav-pref-toggle{ -webkit-tap-highlight-color:transparent; transition:background .25s ease, transform .15s ease; }
  .hamburger:active, .nav-close:active, .nav-fab:active, .to-top:active, .theme-toggle:active,
  .nav.mobile-open .nav-links a:active, .nav.mobile-open .nav-end a:active, .nav.mobile-open .nav-menu a:active,
  .nav.mobile-open .nav-menu button:active, .nav-pref-toggle:active{
    background:color-mix(in srgb, var(--moss) 22%, transparent); transition-duration:.04s;
  }
  .hamburger:active, .nav-fab:active, .to-top:active{ transform:scale(.93); }
}

/* 버튼을 누른 채 끌 때 뒤 화면이 같이 스크롤되지 않게 한다 */
@media (max-width:980px){
  .hamburger, .nav-fab, .nav-close, .to-top, .hd-pill .theme-toggle, .nav-backdrop{ touch-action:none; -webkit-user-select:none; user-select:none; }
}

/* Camera Raw 실제 화면 캡처 — 세로로 긴 패널은 본문에서 폭을 줄이고, 크게 보기 뷰어 안에서는 풀어 준다. */
.acr-shot-tall .ich-stage{ max-width:340px; margin:0 auto; }
.diag-viewer .acr-shot-tall .ich-stage{ max-width:none; }
/* 위아래로 쌓이는 좁은 화면: 가로로 넓은 캡처는 720px까지, 아주 긴 패널(Crop)은 높이 640px까지 — 누르면 크게 보기로 연다.
   넓은 PC(1500px+)에서는 그림이 본문 옆 칸(diag-aside)에 가므로 높이만 화면에 맞춘다. */
.interactive-diagram[class*="acr-"]:not(.acr-shot-tall) .ich-stage{ max-width:720px; margin:0 auto; }
.acr-shot-tall .ich-stage > img{ max-height:640px; width:auto; margin:0 auto; }
@media (min-width:1500px){
  .wrap-mech .diag-aside .acr-shot-tall .ich-stage > img{ max-height:calc(100vh - 230px); }
}
.interactive-diagram[class*="acr-"] .ich-stage > img{ cursor:zoom-in; }
.diag-viewer .interactive-diagram[class*="acr-"] .ich-stage{ max-width:none; }
.diag-viewer .acr-shot-tall .ich-stage > img{ max-height:none; }
/* 크게 보기에서는 그림만 커지고 설명은 11.5px 그대로라 읽히지 않았다(다크에서 특히).
   뷰어 안에서만 글자를 키우고 한 단계 밝은 잉크로 올린다. 본문 크기는 그대로 둔다. */
.diag-viewer .mdiag-cap{ font-size:16px; line-height:1.75; color:var(--ink-soft); margin-top:14px; }
/* 히스토그램은 원본이 작은 띠라 본문 폭으로 늘리면 지나치게 크고 흐리다. */
.acr-hist .ich-stage{ max-width:380px; margin:0 auto; }
.diag-viewer .acr-hist .ich-stage{ max-width:none; }