/* models / gallery / about / contact / 404 */

/* Models page */
.models-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 720px) { .models-grid { grid-template-columns: 1fr; } }

.model-card {
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.model-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
}
.model-card__title h3 { margin: 0; }
.model-card__vendor { color: var(--ink-mute); font-size: var(--fz-13); margin-top: 2px; }
.model-card__id {
  font-family: var(--font-mono);
  font-size: var(--fz-12);
  color: var(--ink-mute);
  background: var(--surface-glass-2);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
  width: fit-content;
}
.model-card__tag { font-size: var(--fz-14); line-height: 1.7; color: var(--ink); }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.gallery-shell {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.gallery-panel {
  position: sticky;
  top: 92px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.gallery-panel__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gallery-panel__group--meta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.gallery-panel__label {
  font-size: var(--fz-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-weight: 700;
}
.gallery-panel__chips,
.gallery-card__tags,
.gallery-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gallery-chip {
  border: 1px solid var(--line);
  background: var(--surface-glass-2);
  color: var(--ink-mute);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font-size: var(--fz-13);
  line-height: 1;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-2);
}
.gallery-chip:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  transform: translateY(-1px);
}
.gallery-chip.is-active {
  background: rgba(31,58,138,0.10);
  border-color: rgba(31,58,138,0.28);
  color: var(--accent);
}
.gallery-panel__meta {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  font-size: var(--fz-13);
  color: var(--ink-soft);
}
.gallery-panel__meta span:first-child {
  font-size: var(--fz-24);
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
}
.gallery-card {
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none !important;
  color: var(--ink);
  min-height: 260px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-3) var(--easing-emphasis), border-color var(--dur-2) var(--easing-standard), box-shadow var(--dur-3) var(--easing-emphasis);
}
.gallery-card:hover {
  transform: translateY(-3px);
  border-color: rgba(31,58,138,0.18);
  box-shadow: var(--shadow-card);
}
.gallery-card__genre {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fz-12);
  color: var(--accent-soft);
  font-weight: 600;
}
.gallery-card__emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-sans);
  font-size: 18px;
  line-height: 1;
}
:root[data-theme="dark"] .gallery-card__genre { color: var(--accent); }
.gallery-card__title { margin: 0; font-family: var(--font-serif); font-size: var(--fz-20); }
.gallery-card__author {
  color: var(--ink-soft);
  font-size: var(--fz-13);
  margin-top: -4px;
}
.gallery-card__excerpt {
  color: var(--ink-mute);
  font-size: var(--fz-14);
  line-height: 1.65;
  flex: 1;
  font-family: var(--font-serif);
}
.gallery-card__tags {
  margin-top: 2px;
  min-height: 28px;
}
.gallery-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(31,58,138,0.06);
  border: 1px solid rgba(31,58,138,0.10);
  color: var(--ink-mute);
  font-size: var(--fz-12);
}
.gallery-tag--empty {
  background: var(--surface-glass-2);
  border-color: var(--line);
  color: var(--ink-faint);
}
.gallery-empty {
  grid-column: 1 / -1;
  min-height: 160px;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-glass);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.gallery-empty--mine {
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, 320px);
}
.gallery-empty__mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(31,58,138,0.08);
  color: var(--accent);
}
.gallery-empty__eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: var(--fz-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gallery-empty h2 {
  margin: 0;
  font-size: var(--fz-20);
  color: var(--ink);
}
.gallery-empty p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  line-height: 1.7;
}
.gallery-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-4);
}
.gallery-empty__note {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(31,58,138,0.06);
  color: var(--ink-soft);
  line-height: 1.65;
}
.gallery-empty__note strong,
.gallery-empty__note span {
  display: block;
}
.gallery-empty__note strong {
  color: var(--ink);
  margin-bottom: 6px;
}
.gallery-card__meta {
  display: flex; gap: 10px;
  font-size: var(--fz-12);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  margin-top: auto;
}
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}
.gallery-modal[hidden] {
  display: none;
}
.gallery-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 28, 0.44);
}
.gallery-modal__dialog {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  margin: min(8vh, 48px) auto;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: calc(100vh - 96px);
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-theme="dark"] .gallery-modal__dialog {
  background: #000000;
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 24px 64px rgba(0,0,0,0.64);
}
.gallery-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-glass-2);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}
.gallery-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: var(--fz-13);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gallery-modal__title {
  margin: 0;
}
.gallery-modal__lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fz-16);
  line-height: 1.7;
}
.gallery-modal__lede[hidden] {
  display: none;
}
.gallery-modal__body {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fz-18);
  line-height: 1.9;
  white-space: pre-line;
}
.gallery-modal__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.gallery-modal__meta {
  color: var(--ink-mute);
  font-size: var(--fz-13);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 900px) {
  .gallery-empty,
  .gallery-empty--mine {
    grid-template-columns: 1fr;
  }
}

.draft-shelf {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.draft-shelf__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.draft-shelf__head h2,
.draft-shelf__head h3 {
  margin: 4px 0 0;
}
.draft-shelf__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.draft-shelf__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fz-13);
  color: var(--ink-soft);
}
.draft-shelf__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.draft-shelf__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px 14px;
}
.draft-shelf__item-main {
  min-width: 0;
}
.draft-shelf__item-main strong,
.draft-shelf__item-main p,
.draft-shelf__item-main span {
  display: block;
}
.draft-shelf__item-main p,
.draft-shelf__item-main span {
  margin: 4px 0 0;
  font-size: var(--fz-13);
  color: var(--ink-mute);
}
.draft-shelf__item-main p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draft-shelf__item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.draft-shelf__empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-mute);
}

@media (max-width: 720px) {
  .draft-shelf__item {
    flex-direction: column;
    align-items: stretch;
  }
  .draft-shelf__item-actions {
    justify-content: flex-end;
  }
}

/* About / FAQ */
.about-shell {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  padding: 0;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  font-weight: 600;
  font-size: var(--fz-15);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px; color: var(--accent);
  font-family: var(--font-mono);
  transition: transform var(--dur-2);
  width: 22px; text-align: center;
}
.faq-item[open] summary::after { content: "×"; }
.faq-item__body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--ink-mute);
  line-height: 1.75;
  font-size: var(--fz-14);
}

/* Contact */
.contact-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.contact-form {
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
}

@media (max-width: 900px) {
  .gallery-shell {
    grid-template-columns: 1fr;
  }
  .gallery-panel {
    position: static;
  }
}

/* 404 */
.error-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.error-num {
  font-family: var(--font-serif);
  font-size: clamp(80px, 14vw, 140px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
}
.error-num .text-gradient { display: inline-block; }

/* Loading skeleton */
.skel {
  background: linear-gradient(90deg,
    rgba(31,58,138,0.06) 0%,
    rgba(31,58,138,0.10) 50%,
    rgba(31,58,138,0.06) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s linear infinite;
  border-radius: var(--radius-sm);
  height: 14px;
}
:root[data-theme="dark"] .skel {
  background: linear-gradient(90deg,
    rgba(138,180,248,0.06) 0%,
    rgba(138,180,248,0.12) 50%,
    rgba(138,180,248,0.06) 100%);
  background-size: 200% 100%;
}
@keyframes skel { 0% { background-position: 200% 0;} 100% { background-position: -200% 0;} }

/* ───── Toast (core/toast.js) ─────────────────────────────────────
 * loading-lock의 g-loading-toast와 분리된 가벼운 알림.
 * right-bottom stack, click-to-dismiss, 자동 dismiss 2.5s.
 */
.g-toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
.g-toast {
  pointer-events: auto;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 22px rgba(31,58,138,0.18);
  color: var(--ink);
  font-size: var(--fz-13);
  line-height: var(--lh-snug);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity var(--dur-2) var(--easing-standard),
              transform var(--dur-2) var(--easing-emphasis);
}
.g-toast.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.g-toast.is-out {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}
.g-toast[data-tone="warn"] {
  border-color: var(--warn, #c9821f);
  background: rgba(201,130,31,0.08);
  color: var(--ink-strong);
}
.g-toast[data-tone="err"] {
  border-color: var(--err, #b6303f);
  background: rgba(182,48,63,0.08);
  color: var(--err);
}
.g-toast[data-tone="ok"] {
  border-color: var(--ok, #1e7a5a);
  background: rgba(30,122,90,0.08);
  color: var(--ok);
}
:root[data-theme="dark"] .g-toast {
  background: var(--surface-glass-2);
}

/* ============================================================
   시력 보호 — 청광 필터 + 밝기
   ============================================================
   WHY: 글쓰기 사이트 특성상 장시간 야간 작업이 흔하다. data-theme(밤/낮)와는
   독립 axis로, 작가가 모니터/조명 환경에 맞춰 청광 비중과 화면 밝기를 미세
   조정한다. 색감을 깨지 않으려 sepia/hue-rotate가 아닌 고정 오버레이 +
   mix-blend-mode multiply 방식 채택.

   구현: body::before(청광 amber) + body::after(검정 dim) 두 의사요소.
   값은 html element의 inline CSS 변수로 주입 → FOUC 0(인라인 스크립트가
   첫 페인트 전에 세팅 가능). 자세한 동작은 core/eyecare.js 참조.

   변수 (html element에 style로 주입):
     --ec-warm-a : 청광 amber 레이어 alpha (0..0.18)
     --ec-dim-a  : 검정 dim 레이어 alpha   (0..0.40)
   ─────────────────────────────────────────────────────────── */
body::before {
  /* 청광 필터 — amber 톤을 곱하기로 입혀 색감은 살리되 청색 비중만 낮춤.
     라이트 모드: multiply가 흰 배경 × amber = amber 톤 보존하며 청색만 감쇠.
     다크 모드: multiply는 검정 × amber ≈ 검정으로 amber가 흡수돼 효과 사라짐 →
     아래 :root[data-theme="dark"] 오버라이드에서 blend mode를 normal로 전환.
     z-index 50: 본문 콘텐츠(z-index auto=0) 위에는 덮이되, nav(sticky z-index 100)와
     그 안의 popover(fpick/eyecare 메뉴 z-index 9998), loading-toast(9999) 등은
     오버레이 위로 올라와 또렷이 보이도록(2026-05-12). 기존 9997은 nav 자체가
     stacking context로 갇혀 메뉴 z-index 9998도 효과 없는 사용자 보고 원인. */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: rgba(255, 180, 80, var(--ec-warm-a, 0));
  mix-blend-mode: multiply;
  transition: background var(--dur-2) var(--easing-standard);
}
/* 2026-05-12: 다크 모드에서 multiply가 amber를 흡수해 청광 한꺼풀이 안 보이는
   사용자 보고 → normal blend로 amber 레이어가 다크 배경 위에 또렷이 덮이도록. */
:root[data-theme="dark"] body::before {
  mix-blend-mode: normal;
}
body::after {
  /* 밝기 dim — 단순 검정 반투명. brightness() 필터보다 GPU 비용 낮음.
     z-index 50: ::before와 동일 — 본문 위 덮음, nav/popover/loading 아래 위치. */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--ec-dim-a, 0));
  transition: background var(--dur-2) var(--easing-standard);
}

/* nav 아이콘 — 안경/렌즈 형상 */
.eyecare { position: relative; display: inline-flex; }
.eyecare__btn {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard),
              background var(--dur-2) var(--easing-standard);
  position: relative;
}
.eyecare__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.eyecare.is-open .eyecare__btn,
.eyecare__btn.is-active {
  border-color: var(--brand-copper);
  color: var(--brand-copper);
}
.eyecare__icon { width: 18px; height: 18px; }
/* 활성(청광>0 또는 밝기<100) 상태일 때 작은 점 표시 */
.eyecare__btn-dot {
  position: absolute;
  right: 5px; top: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-copper);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-2) var(--easing-standard),
              transform var(--dur-2) var(--easing-emphasis);
}
.eyecare__btn.is-active .eyecare__btn-dot {
  opacity: 1;
  transform: scale(1);
}

/* popover panel
   배경 투명도 0 (=완전 불투명) 강제 — glass-card 클래스가 반투명 surface-glass를 입히는데
   slider/체크박스 등 미세 컨트롤이 뒤 페이지 텍스트와 겹쳐 가독성이 떨어지는 사용자 보고
   (2026-05-11)에 따라 var(--surface) 토큰으로 light/dark 모두 solid 배경 강제. */
/* 2026-05-13 — selector를 .eyecare__panel.glass-card로 강화.
   사유: 마크업이 `<div class="eyecare__panel glass-card">`라 dark 테마에서
   `:root[data-theme="dark"] .glass-card`(specificity 0,2,0)가 단일 `.eyecare__panel`
   (specificity 0,1,0)을 이겨 다시 반투명 surface-glass 배경이 적용되는 사용자 보고.
   .eyecare__panel.glass-card로 specificity를 0,2,0으로 맞추고 cascade 우선순위로 이긴다. */
.eyecare__panel,
.eyecare__panel.glass-card {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  padding: 16px 16px 14px;
  /* 2026-05-12: 9998로 격상 — popover 토큰(80)일 땐 청광 오버레이(body::before/::after,
     9997)가 패널 위를 덮어 다크모드에서 반투명으로 비치는 사용자 보고. 9998은 오버레이
     보다 위라 패널 자체는 또렷한 solid surface로 노출. */
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: var(--fz-14);
  color: var(--ink);
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* glass-card hover transform이 청광 슬라이더 클릭 좌표를 흔드는 부작용 차단. */
  transform: none !important;
}
:root[data-theme="dark"] .eyecare__panel,
:root[data-theme="dark"] .eyecare__panel.glass-card {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.eyecare__panel[hidden] { display: none; }

.eyecare__group { display: flex; flex-direction: column; gap: 6px; }
.eyecare__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.eyecare__label {
  font-weight: 600;
  color: var(--ink-strong);
  font-size: var(--fz-13);
  letter-spacing: 0.01em;
}
.eyecare__hint {
  font-size: var(--fz-12);
  color: var(--ink-mute);
  line-height: 1.5;
}
.eyecare__val {
  font-variant-numeric: tabular-nums;
  font-size: var(--fz-12);
  color: var(--ink-soft);
  font-weight: 600;
}

/* 청광 4단계 segmented */
.eyecare__seg {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 3px;
  background: var(--surface-glass-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.eyecare__seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--fz-12);
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard);
}
.eyecare__seg-btn:hover { color: var(--accent); }
.eyecare__seg-btn.is-on {
  background: var(--brand-copper);
  color: #fff;
}
:root[data-theme="dark"] .eyecare__seg-btn.is-on { color: #0A1226; }

/* 밝기 슬라이더 — track + thumb */
.eyecare__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin-top: 4px;
}
.eyecare__slider::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right,
    var(--brand-copper) 0%, var(--brand-copper) calc((var(--val,100) - 60) / 40 * 100%),
    var(--line) calc((var(--val,100) - 60) / 40 * 100%), var(--line) 100%);
  border-radius: 999px;
}
.eyecare__slider::-moz-range-track {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
}
.eyecare__slider::-moz-range-progress {
  height: 4px;
  background: var(--brand-copper);
  border-radius: 999px;
}
.eyecare__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -6px;
  background: var(--accent-on, #fff);
  border: 2px solid var(--brand-copper);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.eyecare__slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--accent-on, #fff);
  border: 2px solid var(--brand-copper);
  border-radius: 50%;
  cursor: pointer;
}

/* footer reset */
.eyecare__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
.eyecare__reset {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-glass-2);
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fz-12);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard);
}
.eyecare__reset:hover {
  border-color: var(--brand-copper);
  color: var(--brand-copper);
}

@media (max-width: 480px) {
  .eyecare__panel {
    right: -8px;
    width: min(300px, calc(100vw - 16px));
  }
}


/* ──────────────────────────────────────────────────────────
 * 헤더 서체 셀렉터 (.fpick) + 본문 폰트 적용 (data-font selector)
 * 모든 페이지 공통 — 이전엔 09-tutor-coach.css에 있어 link 누락 함정 발생.
 * ────────────────────────────────────────────────────────── */
/* ─── 헤더 서체 셀렉터 (.fpick) ─── */
.fpick {
  position: relative;
  display: inline-flex;
}
/* 2026-05-12: tutor.html 에디터 버튼 행에서 서체를 다른 작업 버튼들과 분리 — 우측 정렬.
   .tutor-editor__btns(display:inline-flex)의 마지막 자식이 margin-left:auto로 우측으로 밀림. */
.fpick--right {
  margin-left: auto;
}
.fpick__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: var(--fz-13);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard),
              background var(--dur-2) var(--easing-standard);
}
.fpick__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fpick.is-open .fpick__btn {
  border-color: var(--accent);
  color: var(--accent);
}
.fpick__icon {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--accent);
}
.fpick__caret {
  width: 10px; height: 10px;
  margin-left: 2px;
  color: var(--ink-mute);
  transition: transform var(--dur-2) var(--easing-standard);
}
.fpick.is-open .fpick__caret { transform: rotate(180deg); }

.fpick__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  /* WHY: 드롭다운은 솔리드 — 반투명일 때 옵션 가독성↓ */
  background: var(--bg-elev);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  /* 2026-05-12: 9998로 격상 — 1000은 본문 mark::before(맞춤법 위첨자/노란 강조)와
     같은 stacking context 안에서 시각적으로 겹쳐 보이는 사용자 보고. 청광 오버레이
     (9997) 위, loading-toast(9999) 아래 — UI 우선순위 정렬. */
  z-index: 9998;
}
:root[data-theme="dark"] .fpick__menu {
  background: #000000;
  border-color: var(--line-strong);
}
.fpick.is-open .fpick__menu { display: flex; }
.fpick__opt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-1) var(--easing-standard),
              color var(--dur-1) var(--easing-standard);
}
.fpick__opt:hover { background: rgba(31,58,138,0.08); color: var(--accent); }
.fpick__opt.is-selected { background: rgba(31,58,138,0.12); color: var(--accent); }
.fpick__opt-name { font-size: var(--fz-14); font-weight: 600; }
.fpick__opt-desc { font-size: var(--fz-12); color: var(--ink-mute); }

/* 옵션 라벨 자체에 미리보기 폰트 적용 (시각적 식별) */
.fpick__opt[data-font-preview="pretendard"]    .fpick__opt-name { font-family: "Pretendard Variable", "Pretendard", sans-serif; }
.fpick__opt[data-font-preview="notosans"]      .fpick__opt-name { font-family: "Noto Sans KR", sans-serif; }
.fpick__opt[data-font-preview="notoserif"]     .fpick__opt-name { font-family: "Noto Serif KR", serif; }
.fpick__opt[data-font-preview="nanummyeongjo"] .fpick__opt-name { font-family: "Nanum Myeongjo", serif; }
.fpick__opt[data-font-preview="gowundodum"]    .fpick__opt-name { font-family: "Gowun Dodum", sans-serif; }

/* ─── 본문 영역에만 서체 적용 (data-font attribute selector) ─── */
/* 기본(pretendard)은 base 토큰 그대로 둠 */
/* WHY: guided.html의 모든 사용자 입력 필드(textarea/input/select)와 본문/후보/자유보강
        영역에도 서체 selector를 확장한다. tutor 영역 selector는 그대로 유지. */
:root[data-font="notosans"] .tutor-section__editable,
:root[data-font="notosans"] .tutor-suggest-card__advice,
:root[data-font="notosans"] .tutor-suggest-card__quote,
:root[data-font="notosans"] .tutor-coach-card__body,
:root[data-font="notosans"] .tutor-sc-card__diff,
:root[data-font="notosans"] .preview-md,
:root[data-font="notosans"] .editor-prose,
:root[data-font="notosans"] .field__textarea,
:root[data-font="notosans"] .field__input,
:root[data-font="notosans"] .field__select,
:root[data-font="notosans"] .g2-seed__sentence,
:root[data-font="notosans"] .g2-seed__keywords,
:root[data-font="notosans"] .cand-card__body,
:root[data-font="notosans"] .cand-card__free,
:root[data-font="notosans"] .three-cols__free,
:root[data-font="notosans"] .guided-result__md,
:root[data-font="notosans"] .kchip {
  font-family: "Noto Sans KR", "Pretendard Variable", sans-serif;
}
:root[data-font="notoserif"] .tutor-section__editable,
:root[data-font="notoserif"] .tutor-suggest-card__advice,
:root[data-font="notoserif"] .tutor-suggest-card__quote,
:root[data-font="notoserif"] .tutor-coach-card__body,
:root[data-font="notoserif"] .tutor-sc-card__diff,
:root[data-font="notoserif"] .preview-md,
:root[data-font="notoserif"] .editor-prose,
:root[data-font="notoserif"] .field__textarea,
:root[data-font="notoserif"] .field__input,
:root[data-font="notoserif"] .field__select,
:root[data-font="notoserif"] .g2-seed__sentence,
:root[data-font="notoserif"] .g2-seed__keywords,
:root[data-font="notoserif"] .cand-card__body,
:root[data-font="notoserif"] .cand-card__free,
:root[data-font="notoserif"] .three-cols__free,
:root[data-font="notoserif"] .guided-result__md,
:root[data-font="notoserif"] .kchip {
  font-family: "Noto Serif KR", "Source Serif 4", serif;
}
:root[data-font="nanummyeongjo"] .tutor-section__editable,
:root[data-font="nanummyeongjo"] .tutor-suggest-card__advice,
:root[data-font="nanummyeongjo"] .tutor-suggest-card__quote,
:root[data-font="nanummyeongjo"] .tutor-coach-card__body,
:root[data-font="nanummyeongjo"] .tutor-sc-card__diff,
:root[data-font="nanummyeongjo"] .preview-md,
:root[data-font="nanummyeongjo"] .editor-prose,
:root[data-font="nanummyeongjo"] .field__textarea,
:root[data-font="nanummyeongjo"] .field__input,
:root[data-font="nanummyeongjo"] .field__select,
:root[data-font="nanummyeongjo"] .g2-seed__sentence,
:root[data-font="nanummyeongjo"] .g2-seed__keywords,
:root[data-font="nanummyeongjo"] .cand-card__body,
:root[data-font="nanummyeongjo"] .cand-card__free,
:root[data-font="nanummyeongjo"] .three-cols__free,
:root[data-font="nanummyeongjo"] .guided-result__md,
:root[data-font="nanummyeongjo"] .kchip {
  font-family: "Nanum Myeongjo", "Source Serif 4", serif;
}
:root[data-font="gowundodum"] .tutor-section__editable,
:root[data-font="gowundodum"] .tutor-suggest-card__advice,
:root[data-font="gowundodum"] .tutor-suggest-card__quote,
:root[data-font="gowundodum"] .tutor-coach-card__body,
:root[data-font="gowundodum"] .tutor-sc-card__diff,
:root[data-font="gowundodum"] .preview-md,
:root[data-font="gowundodum"] .editor-prose,
:root[data-font="gowundodum"] .field__textarea,
:root[data-font="gowundodum"] .field__input,
:root[data-font="gowundodum"] .field__select,
:root[data-font="gowundodum"] .g2-seed__sentence,
:root[data-font="gowundodum"] .g2-seed__keywords,
:root[data-font="gowundodum"] .cand-card__body,
:root[data-font="gowundodum"] .cand-card__free,
:root[data-font="gowundodum"] .three-cols__free,
:root[data-font="gowundodum"] .guided-result__md,
:root[data-font="gowundodum"] .kchip {
  font-family: "Gowun Dodum", "Pretendard Variable", sans-serif;
}
/* 기본 pretendard도 입력 필드/본문에 명시적으로 적용 — 다른 폰트에서 돌아왔을 때
   상속이 끊기지 않도록 (var(--font-sans)는 :root에 정의되어 있음). */
:root[data-font="pretendard"] .field__textarea,
:root[data-font="pretendard"] .field__input,
:root[data-font="pretendard"] .field__select,
:root[data-font="pretendard"] .g2-seed__sentence,
:root[data-font="pretendard"] .g2-seed__keywords,
:root[data-font="pretendard"] .cand-card__body,
:root[data-font="pretendard"] .cand-card__free,
:root[data-font="pretendard"] .three-cols__free,
:root[data-font="pretendard"] .guided-result__md,
:root[data-font="pretendard"] .kchip {
  font-family: "Pretendard Variable", "Pretendard", sans-serif;
}
/* nav/UI는 어떤 data-font에서도 항상 Pretendard 유지 (base 01-base.css의 var(--font-sans))
   본문만 위 selector로 override한다. */

@media (max-width: 980px) {
  .tutor-coach-suggest { margin-bottom: var(--space-2); }
  .fpick__menu { right: auto; left: 0; }
}
@media (max-width: 640px) {
  .tutor-editor__btns { width: 100%; }
  /* 2026-05-15 — 한자 '字' 아이콘이 모바일에서 단독 노출되어 한글 사용자에게 혼란.
     아이콘 가리고 "서체" 한글 라벨을 노출 (사장님 결정: 한글 단독 '서체' 표기). */
  .fpick__btn .fpick__icon { display: none; }
  .fpick__btn { padding: 6px 10px; }
}

/* ───── 전역 로딩 락 (core/loading-lock.js, body[data-busy="true"]) ─────
 * 2026-05-12: 09-tutor-coach.css에서 이전.
 * g- 접두사는 전역 유틸 컨벤션(.g-toast-host 와 짝). tutor-coach 기능 미사용 페이지
 * (guided/result/gallery)에서도 loading-lock이 동작하므로 모든 페이지가 로드하는
 * 공통 파일(07-misc.css)에 두어 누락 회귀를 구조적으로 차단.
 */
.g-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast, 120) - 1);
  background: rgba(255,255,255,0.56);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--easing-standard);
}
:root[data-theme="dark"] .g-loading-overlay {
  background: rgba(5,9,18,0.58);
}
.g-loading-overlay.is-on {
  opacity: 1;
  pointer-events: auto;
}
.g-loading-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: var(--z-toast, 9999);
  background: rgba(31,58,138,0.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--easing-standard);
  box-shadow: 0 1px 6px rgba(31,58,138,0.18);
}
.g-loading-bar.is-on { opacity: 1; }
.g-loading-bar__stripe {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(31,58,138,0.55) 18%,
    var(--accent) 42%,
    #7A98E0 50%,
    var(--accent) 58%,
    rgba(31,58,138,0.55) 82%,
    transparent 100%);
  border-radius: 2px;
  transform: translateX(-100%);
  animation: g-loading-stripe 1.4s linear infinite;
}
@keyframes g-loading-stripe {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.g-loading-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: var(--z-toast, 9999);
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  min-width: min(420px, calc(100vw - 40px));
  max-width: min(520px, calc(100vw - 40px));
  padding: 20px 22px 22px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1.5px solid rgba(31,58,138,0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(14,28,64,0.22);
  color: var(--ink);
  font-size: var(--fz-14);
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 12px)) scale(0.98);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--easing-standard),
              transform var(--dur-2) var(--easing-standard);
}
:root[data-theme="dark"] .g-loading-toast {
  background: rgba(10,18,38,0.86);
  border-color: rgba(138,180,248,0.30);
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(0,0,0,0.46);
}
.g-loading-toast.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.g-loading-toast__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
  flex: 1;
}
.g-loading-toast__label {
  font-weight: 600;
  color: var(--ink-strong);
}
.g-loading-toast__guide {
  max-width: 34em;
  color: var(--muted);
  font-size: var(--fz-13);
  font-weight: 500;
  line-height: 1.55;
}
:root[data-theme="dark"] .g-loading-toast__guide {
  color: var(--muted);
}
/* ASCII 파종 트랙 — 경과 초 표시가 같은 대기 시간을 더 길게 느끼게 만든다(Doherty-Yablonsky).
   초·임계 힌트 대신 시선 분산용 짧은 ASCII 장면. */
.g-loading-runner {
  position: relative;
  width: 100%;
  min-height: 82px;
  height: 82px;
  overflow: hidden;
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  color: var(--brand-copper, #b07a3f);
  letter-spacing: 0;
  line-height: 1.15;
  user-select: none;
}
.g-loading-field {
  position: absolute;
  inset: 0;
  display: block;
}
.g-loading-field__soil {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 8px;
  color: var(--ink-faint);
  letter-spacing: 0.25em;
  opacity: 0.72;
}
.g-loading-field__farmer {
  position: absolute;
  left: 0;
  bottom: 15px;
  display: block;
  white-space: pre;
  font: inherit;
  line-height: inherit;
  text-align: left;
  color: var(--accent);
  animation: g-loading-farmer-walk 5.4s linear infinite;
}
.g-loading-field__sprout {
  position: absolute;
  bottom: 18px;
  display: inline-block;
  color: var(--ok, #1E7A5A);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translateY(8px) scale(0.55);
  animation: g-loading-sprout-rise 5.4s ease-in-out infinite;
}
.g-loading-field__sprout--1 { left: 18%; animation-delay: 0.7s; }
.g-loading-field__sprout--2 { left: 32%; animation-delay: 1.5s; }
.g-loading-field__sprout--3 { left: 46%; animation-delay: 2.3s; }
.g-loading-field__sprout--4 { left: 60%; animation-delay: 3.1s; }
.g-loading-field__sprout--5 { left: 74%; animation-delay: 3.9s; }
:root[data-theme="dark"] .g-loading-runner {
  color: var(--accent-soft, #C7B79A);
}
@keyframes g-loading-farmer-walk {
  0%   { transform: translateX(-8%); }
  12%  { transform: translateX(6%); }
  24%  { transform: translateX(20%); }
  36%  { transform: translateX(34%); }
  48%  { transform: translateX(48%); }
  60%  { transform: translateX(62%); }
  72%  { transform: translateX(76%); }
  84%  { transform: translateX(91%); }
  100% { transform: translateX(112%); }
}
@keyframes g-loading-sprout-rise {
  0%, 12%   { opacity: 0; transform: translateY(8px) scale(0.55); }
  23%, 78%  { opacity: 1; transform: translateY(0) scale(1); }
  100%      { opacity: 0; transform: translateY(-2px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .g-loading-field__farmer,
  .g-loading-field__sprout {
    animation: none;
  }
  .g-loading-field__farmer { left: 42%; }
  .g-loading-field__sprout { opacity: 1; transform: none; }
}
.g-loading-toast__spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(31,58,138,0.25);
  border-top-color: var(--accent);
  animation: g-loading-spin 0.9s linear infinite;
  margin-top: 2px;
}
@keyframes g-loading-spin { to { transform: rotate(360deg); } }

/* 락 활성 시 모든 인터랙션 차단 (네비/에디터 포함) */
body[data-busy="true"] button:not([data-loading-exempt]),
body[data-busy="true"] input:not([data-loading-exempt]),
body[data-busy="true"] select:not([data-loading-exempt]),
body[data-busy="true"] textarea:not([data-loading-exempt]),
body[data-busy="true"] a:not([data-loading-exempt]),
body[data-busy="true"] [contenteditable="true"] {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: wait !important;
  user-select: none;
}
/* 락 활성 중에도 진행바/토스트 자체는 정상 표시 */
body[data-busy="true"] .g-loading-bar,
body[data-busy="true"] .g-loading-overlay,
body[data-busy="true"] .g-loading-toast {
  opacity: 1 !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 2026-05-14 — 작성 영역 서체 크기 조절 (tutor/guided 공통).
 *   - root[data-editor-fsize]={s|m|l|xl} 별 스케일을 --editor-font-scale에 박는다.
 *   - 작성 영역 selector(.tutor-section__editable / .tutor-editor__title / .field__textarea /
 *     .g3-preview / #g3-comment / .g2-seed__text)에 font-size: calc(base * var(--editor-font-scale)).
 *   - 디폴트(--editor-font-scale: 1)는 현재 크기 보존. 'm'이 기본.
 *   - 영속화: localStorage['brunch.editor.fsize']. 페이지 hydrate inline script가 깜빡임 없이 적용.
 * ────────────────────────────────────────────────────────────────────── */
:root { --editor-font-scale: 1; }
:root[data-editor-fsize="s"]  { --editor-font-scale: 0.9; }
:root[data-editor-fsize="m"]  { --editor-font-scale: 1; }
:root[data-editor-fsize="l"]  { --editor-font-scale: 1.15; }
:root[data-editor-fsize="xl"] { --editor-font-scale: 1.3; }

/* 작성 영역 — calc로 base 보존하며 scale. line-height는 unitless가 자동 비례 적용. */
.tutor-section__editable {
  font-size: calc(var(--fz-16) * var(--editor-font-scale));
}
.tutor-editor__title {
  font-size: calc(var(--fz-22, 22px) * var(--editor-font-scale));
}
.field__textarea,
#g1-topic,
.g2-seed__text,
.g2-seed__keywords,
#g3-preview,
#g3-comment {
  font-size: calc(var(--fz-15, 15px) * var(--editor-font-scale));
}

/* fsize segmented picker (A− / A / A+ / A++) — fpick--inline 옆 또는 .tutor-editor__btns 안. */
.fsize-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: rgba(31,58,138,0.06);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
:root[data-theme="dark"] .fsize-pick {
  background: rgba(138,180,248,0.10);
  border-color: rgba(138,180,248,0.20);
}
.fsize-pick__btn {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  font-size: var(--fz-12);
  font-weight: 700;
  color: var(--ink-mute);
  border-radius: var(--radius-pill);
  cursor: pointer;
  line-height: 1;
  transition: background var(--dur-2), color var(--dur-2);
}
.fsize-pick__btn[data-fsize-value="s"]  { font-size: 10px; }
.fsize-pick__btn[data-fsize-value="m"]  { font-size: 12px; }
.fsize-pick__btn[data-fsize-value="l"]  { font-size: 14px; }
.fsize-pick__btn[data-fsize-value="xl"] { font-size: 16px; }
.fsize-pick__btn:hover { color: var(--accent); background: rgba(31,58,138,0.08); }
.fsize-pick__btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(31,58,138,0.25);
}
:root[data-theme="dark"] .fsize-pick__btn[aria-pressed="true"] {
  color: #0A1226;
}