/* ══════════════════════════════════════════════════════════════════════
   서가번호 — 희귀서 열람 아카이브
   앞부분은 공통 뼈대(kit.css) 그대로. 그 아래가 이 벌의 디자인이다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 기본 ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; }
img { -webkit-user-drag: none; user-select: none; }

.frame { display: block; }

/* ── 초점 ─────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1rem; background: Canvas; color: CanvasText;
}
.skip-link:focus { left: 0; }

/* ── 터치 영역 ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .site-header a, .site-header button,
  .drawer a, .drawer button,
  .dots button, .pager button, .tab {
    min-width: 44px; min-height: 44px;
  }
}

/* ── 가로 넘침 ─────────────────────────────────────────────────────── */
.scroll-x { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }
.clip { overflow: clip; }

/* ── 무JS 완성본 ───────────────────────────────────────────────────── */
.acc-item .acc-panel { display: block; }
.js .acc-item .acc-panel { display: none; }
.js .acc-item.open .acc-panel { display: block; }

.js [role="tabpanel"][hidden] { display: none; }
[role="tabpanel"][hidden] { display: block; }

.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

html:not(.js) .js-only { display: none !important; }

:where([hidden]):not([role="tabpanel"]) { display: none !important; }

/* ── 모션 끔 ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── 모바일 서랍 ───────────────────────────────────────────────────── */
.menu-btn { display: none; }
@media (max-width: 767px) { .menu-btn { display: inline-flex; } }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 60; overflow-y: auto;
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(20 14 10 / .5);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) { .drawer, .scrim { display: none; } }

/* ── 토스트 ───────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 0;
  z-index: 80; pointer-events: none;
  opacity: 0; transition: opacity .25s ease, translate .25s ease;
}
.toast.show { opacity: 1; translate: -50% -6px; }

/* ── 폼 ───────────────────────────────────────────────────────────── */
.agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agree input:focus-visible + label .box { outline: 2px solid currentColor; outline-offset: 2px; }

.spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: kit-spin .7s linear infinite;
}
@keyframes kit-spin { to { rotate: 360deg; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── 구획 리듬 ─────────────────────────────────────────────────────── */
.section { padding-block: calc(var(--section, 96px) / 2); }
.section-lead { padding-top: var(--section, 96px); }
.section-last { padding-bottom: var(--section, 96px); }


/* ══════════════════════════════════════════════════════════════════════
   여기부터 서가번호의 디자인 — 원자료 00-디자인보드.png 가 정한 것
   색 3벌(Primary/Ground/Ink)·Display 800/Body 500/Meta Mono·
   도서관 카드목록과 세로 서가.  radius 0 · shadow 0 이 기본이다.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* 색 — 원자료가 못 박은 세 값과 그 파생값뿐이다 */
  --primary: #7B2E26;
  --primary-deep: #5E221C;
  --ground: #D9C9AA;
  --card: #E3D6BC;          /* 카드 종이. ground 를 밝힌 파생값 */
  --card-lo: #CFBE9C;
  --ink: #251E18;
  --ink-80: rgb(37 30 24 / .80);
  --ink-62: rgb(37 30 24 / .62);
  --ink-42: rgb(37 30 24 / .42);
  --rule: rgb(37 30 24 / .22);
  --rule-hi: rgb(37 30 24 / .42);

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --head: 56px;
  --section: 104px;
  --pad: clamp(20px, 4.6vw, 64px);
  --wrap: 1240px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--primary); color: var(--ground); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
/* 좁은 단은 가운데로 몰지 않는다 — 정렬축(왼쪽)이 면마다 흔들리면 안 된다 */
.wrap-narrow > * { max-width: 880px; }

/* ── 활자 ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.005em; line-height: 1.18; }

.display {
  font-size: clamp(2.05rem, 5.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: .012em;
}
.display .br { display: block; }

.h-sec {
  font-size: clamp(1.35rem, 2.7vw, 1.95rem);
  letter-spacing: .008em;
}

.eyebrow, .meta, .mono {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .705rem;
  letter-spacing: .155em;
  text-transform: uppercase;
  line-height: 1.6;
}
.eyebrow { color: var(--ink-62); margin: 0 0 1.15rem; }
.meta { color: var(--ink-62); }

.lead { margin: 1.4rem 0 0; max-width: 46ch; color: var(--ink-80); font-size: 1rem; }
.note { margin: .7rem 0 0; font-size: .86rem; color: var(--ink-62); }
.note-strong { color: var(--ink-80); }

.hanja { font-size: .74em; font-weight: 600; color: var(--ink-62); margin-left: .45em; letter-spacing: .02em; }

/* ── 구획 머리 ─────────────────────────────────────────────────────── */
.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem;
  padding-bottom: 1.1rem; margin-bottom: 1.7rem;
  border-bottom: 1px solid var(--rule-hi);
}
.sec-head .h-sec { flex: 1 1 auto; }
.sec-head .meta { flex: 0 0 auto; }

/* ── 머리띠 ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.site-header.is-stuck { border-bottom-color: var(--rule-hi); }
.header-inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  height: var(--head);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  font-weight: 800; font-size: 1.06rem; letter-spacing: .045em;
  text-decoration: none; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
  font-family: var(--mono); font-size: .705rem; font-weight: 500;
  letter-spacing: .13em; color: var(--ink-62); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
@media (max-width: 767px) { .nav { display: none; } }

.menu-btn {
  appearance: none; background: none; border: 1px solid var(--rule-hi);
  color: var(--ink); align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
}
.menu-bar { position: relative; display: block; width: 18px; height: 1px; background: currentColor; }
.menu-bar::before, .menu-bar::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: currentColor;
}
.menu-bar::before { top: -5px; }
.menu-bar::after { top: 5px; }

/* ── 서랍 ─────────────────────────────────────────────────────────── */
.drawer { background: var(--ground); border-left: 1px solid var(--rule-hi); padding: 0 var(--pad) 2rem; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--head); border-bottom: 1px solid var(--rule);
}
.drawer-close {
  appearance: none; background: none; border: 0; color: var(--ink-62);
  font-family: var(--mono); font-size: .705rem; letter-spacing: .13em;
  text-transform: uppercase; cursor: pointer; padding: 0;
}
.drawer-nav { display: flex; flex-direction: column; padding-top: .6rem; }
.drawer-nav a {
  display: flex; align-items: center;
  padding: 1.05rem 0; text-decoration: none;
  font-size: 1.06rem; font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
.drawer-cta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.6rem; padding: 1rem 1.15rem;
  background: var(--primary); color: var(--ground);
  text-decoration: none; font-weight: 700;
}
.drawer-tel { margin: 1.1rem 0 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; }
.drawer-tel a { text-decoration: none; border-bottom: 1px solid var(--rule-hi); }

/* ── 색인 히어로 ───────────────────────────────────────────────────── */
.index-hero { display: grid; border-bottom: 1px solid var(--rule-hi); }
.hero-head { padding: clamp(30px, 5vw, 60px) var(--pad) 0; }
.hero-rest { padding: clamp(20px, 2.6vw, 34px) var(--pad) clamp(30px, 4vw, 48px); }

.hero-plate { margin: clamp(24px, 4vw, 40px) var(--pad) 0; position: relative; }
.hero-plate .frame { height: 320px; }
.hero-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cap {
  position: absolute; left: 12px; bottom: 12px; margin: 0;
  padding: 5px 9px; background: rgb(37 30 24 / .72); color: var(--ground);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
}

@media (min-width: 1024px) {
  /* 둘째 줄이 남은 높이를 다 먹고 색인은 그 바닥에 붙는다 —
     시안의 「제목과 목록 사이 빈 자리」가 화면 높이에 따라 저절로 생긴다 */
  .index-hero {
    grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
    grid-template-rows: auto 1fr;
    min-height: calc(100svh - var(--head));
  }
  /* 액자를 절대 배치로 띄운다 — 안 그러면 세로로 긴 사진의 고유 높이(576px 폭 기준 1361px)가
     격자 전체를 끌어올려 색인과 띠 단추가 첫 화면 밖으로 밀린다 */
  .hero-plate { grid-column: 1; grid-row: 1 / span 2; margin: 0; position: relative; }
  .hero-plate .frame { position: absolute; inset: 0; height: auto; min-height: 0; }
  .hero-head { grid-column: 2; grid-row: 1; padding-top: clamp(44px, 6vh, 84px); }
  .hero-rest { grid-column: 2; grid-row: 2; align-self: end; }
}

/* ── 카드목록 색인 줄 ──────────────────────────────────────────────── */
.entry-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-hi); }
.entry {
  display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) 1.25rem;
  grid-template-areas: "n b a" "n m a";
  align-items: center; gap: 0 .85rem;
  padding: .95rem 0; min-height: 56px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color .18s ease, padding-inline .18s ease;
}
.entry:hover, .entry:focus-visible { background: rgb(37 30 24 / .05); padding-inline: .5rem; }
.entry-n { grid-area: n; align-self: start; padding-top: .18rem; font-family: var(--mono); font-size: .705rem; letter-spacing: .1em; color: var(--ink-42); }
.entry-b { grid-area: b; min-width: 0; }
.entry-no {
  display: inline-block; font-family: var(--mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; color: var(--primary); margin-right: .6rem;
}
.entry-t { font-weight: 700; }
.entry-m { grid-area: m; font-size: .78rem; color: var(--ink-62); font-weight: 500; line-height: 1.5; }
.entry-ar { grid-area: a; width: 12px; height: 12px; color: var(--ink-42); justify-self: end; align-self: center; transition: transform .18s ease; }
/* 넓은 화면에서는 시안대로 한 줄 — 서지 요약이 오른쪽으로 붙는다 */
@media (min-width: 760px) {
  .entry {
    grid-template-columns: 2.15rem minmax(0, 1fr) auto 1.25rem;
    grid-template-areas: "n b m a";
  }
  .entry-n { align-self: center; padding-top: 0; }
  .entry-m { text-align: right; white-space: nowrap; }
}
.entry:hover .entry-ar { transform: translate(2px, -2px); color: var(--primary); }

/* ── 큰 띠 단추 ───────────────────────────────────────────────────── */
.bar-cta {
  display: flex; align-items: center; gap: .7rem;
  margin-top: clamp(22px, 3.4vw, 38px);
  padding: 1.15rem 1.3rem; min-height: 60px;
  background: var(--primary); color: var(--ground);
  text-decoration: none; font-weight: 700; font-size: 1.02rem;
  transition: background-color .2s ease;
}
.bar-cta:hover { background: var(--primary-deep); }
.bar-cta .bar-tail { margin-left: auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; opacity: .78; }

/* 스프라이트 아이콘은 크기를 스스로 갖지 않는다 — 안 주면 단추만큼 부풀어 오른다 */
.bar-ar { flex: 0 0 auto; width: 14px; height: 14px; }
.entry-ar, .act-ar, .pick-mark { flex: 0 0 auto; }
@media (max-width: 479px) { .bar-cta .bar-tail { display: none; } }

/* ── 단추 공통 ────────────────────────────────────────────────────── */
.btn {
  appearance: none; cursor: pointer; font-family: var(--sans); font-weight: 600;
  font-size: .9rem; line-height: 1.4; border-radius: 0;
  padding: .68rem 1.05rem; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: transparent; border: 1px solid var(--rule-hi); color: var(--ink);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { border-color: var(--ink); background: rgb(37 30 24 / .06); }
.btn-solid { background: var(--primary); border-color: var(--primary); color: var(--ground); }
.btn-solid:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: var(--ground); }
@media (max-width: 767px) { .btn, button:not(.menu-btn):not(.drawer-close) { min-height: 48px; } }

/* ── 세로 서가 ────────────────────────────────────────────────────── */
.shelf-rail { padding-bottom: .6rem; }
.shelf-strip {
  display: flex; align-items: flex-end; gap: 8px;
  list-style: none; margin: 0; padding: 22px 1px 4px;
  min-height: 300px;
  border-bottom: 2px solid var(--ink);
}
.spine {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  flex: 0 0 auto; width: 58px; height: 244px;
  padding: 12px 6px 10px; text-decoration: none;
  background: var(--spine-bg, #3B2E24); color: #E9DEC6;
  border: 1px solid rgb(20 14 10 / .55);
  transition: transform .24s ease, box-shadow .24s ease;
}
.spine::after {
  content: ""; position: absolute; inset: 8px 4px auto 4px; height: 1px;
  background: rgb(233 222 198 / .38);
}
.spine-t {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-weight: 700; font-size: .84rem; letter-spacing: .04em; line-height: 1.2;
  margin-top: 14px; max-height: 168px; overflow: hidden;
}
.spine-no {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .07em;
  text-align: center; color: rgb(233 222 198 / .72);
}
.spine:hover, .spine:focus-visible { transform: translateY(-9px); }
.spine.is-drawn { transform: translateY(-24px); border-color: var(--primary); }
.spine.is-drawn::before {
  content: ""; position: absolute; inset: -1px; border: 2px solid var(--primary);
}
.shelf-hint { margin: .9rem 0 0; }

.card-slot { margin-top: 2rem; max-width: 560px; }
.card-slot.is-swapped .bibcard { animation: card-draw .28s ease both; }
@keyframes card-draw {
  from { opacity: .2; transform: translateY(-14px); }
  to   { opacity: 1;  transform: none; }
}

/* ── 서지 카드 ────────────────────────────────────────────────────── */
.bibcard {
  background: var(--card); border: 1px solid var(--rule-hi);
  padding: 1.35rem 1.35rem 1.2rem;
  display: flex; flex-direction: column;
}
.bibcard-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding-bottom: .55rem; border-bottom: 2px solid var(--ink);
}
.bibcard-no { margin: 0; font-family: var(--mono); font-weight: 600; font-size: 1.02rem; letter-spacing: .12em; color: var(--primary); }
.bibcard-call { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-62); text-align: right; }
.bibcard-title { margin: .85rem 0 .2rem; font-size: 1.22rem; letter-spacing: .006em; }
.bibcard-by { margin: 0 0 .9rem; font-size: .85rem; color: var(--ink-62); }

.bibfields { margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.bibrow {
  display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .5rem;
  padding: .42rem 0; border-bottom: 1px solid var(--rule);
}
.bibrow dt {
  font-family: var(--mono); font-size: .655rem; letter-spacing: .1em;
  color: var(--ink-42); text-transform: uppercase; padding-top: .22rem;
}
.bibrow dd { margin: 0; font-size: .875rem; line-height: 1.6; }

.bibstate {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem;
  margin: .95rem 0 0; font-size: .875rem;
}
.bibstate b { font-weight: 700; }
.bibstate-where { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--ink-62); margin-left: auto; }
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; font-size: .72rem; line-height: 1;
  border: 1px solid currentColor;
}
.st-open   { color: #2E5B3A; }
.st-wait   { color: #6B5320; }
.st-care   { color: var(--primary); }
.st-closed { color: var(--ink-62); }

.grades { list-style: none; margin: .8rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: .28rem; }
.grades li { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr); gap: .5rem; font-size: .8rem; }
.g-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--ink-42); padding-top: .2rem; }
.g-v { color: var(--ink-80); }

.pick { margin-top: 1.05rem; width: 100%; }
.pick[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--ground); }
.pick .pick-mark { width: 13px; height: 13px; }
.pick[aria-pressed="false"] .pick-mark { opacity: .38; }

/* ── 목록 격자 ────────────────────────────────────────────────────── */
.card-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px)  { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-grid > li { display: flex; }
.card-grid .bibcard { width: 100%; }

/* ── 분류 조작대 ──────────────────────────────────────────────────── */
.axis { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.axis legend {
  font-family: var(--mono); font-size: .655rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-42); padding: 0 0 .55rem;
}
.axis-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  appearance: none; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: .855rem;
  padding: .5rem .82rem; min-height: 44px; display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; border: 1px solid var(--rule-hi); color: var(--ink); border-radius: 0;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.opt:hover { border-color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--ground); }
.opt-n { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; opacity: .72; }

.axis-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; padding-top: .4rem; }
.result-line { margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--ink-62); }
.result-line b { color: var(--ink); font-weight: 600; }

.empty {
  margin: 0; padding: 2.4rem 1.4rem; text-align: center;
  border: 1px dashed var(--rule-hi); background: rgb(37 30 24 / .03);
}
.empty p { margin: 0 0 1rem; }

/* ── 전표(선택 보존) ──────────────────────────────────────────────── */
.tray {
  position: sticky; top: var(--head); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  margin-bottom: 1.5rem; padding: .8rem 1rem;
  background: var(--card); border: 1px solid var(--ink);
}
.tray-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-42); }
.tray-v { margin: 0; font-size: .875rem; font-weight: 600; flex: 1 1 220px; min-width: 0; }
.tray-v .tray-no { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--primary); }
.tray-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tray .btn { font-size: .8rem; padding: .45rem .8rem; min-height: 40px; }
@media (max-width: 767px) { .tray .btn { min-height: 48px; } }

/* ── 도판 ─────────────────────────────────────────────────────────── */
.plate { margin: 0; }
.plate .frame { border: 1px solid var(--rule-hi); }
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate-cap {
  margin: .55rem 0 0; font-family: var(--mono); font-size: .645rem;
  letter-spacing: .1em; color: var(--ink-62); text-transform: uppercase;
}
.plate-wide .frame { height: clamp(200px, 30vw, 300px); }
.plate-sq .frame { height: clamp(210px, 26vw, 264px); }
/* 분류 면의 도판 — 시안대로 제목 아래 전폭으로 눕는다 */
.plate-hero { margin-top: clamp(26px, 4vw, 44px); }
.plate-hero .frame { height: clamp(230px, 30vw, 400px); }

/* ── 이용 순서 줄(디자인보드 03/ACTION) ────────────────────────────── */
.act-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-hi); }
.act {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 1.25rem;
  gap: .3rem .9rem; align-items: start;
  padding: 1.25rem 0; min-height: 56px;
  border-bottom: 1px solid var(--rule); text-decoration: none;
  transition: background-color .18s ease, padding-inline .18s ease;
}
.act:hover, .act:focus-visible { background: rgb(37 30 24 / .05); padding-inline: .5rem; }
.act-n { font-family: var(--mono); font-size: .705rem; letter-spacing: .1em; color: var(--ink-42); padding-top: .28rem; }
.act-t { margin: 0; font-size: 1.06rem; font-weight: 700; }
.act-d { margin: .2rem 0 0; grid-column: 2; font-size: .87rem; color: var(--ink-62); }
.act-ar { width: 12px; height: 12px; color: var(--ink-42); justify-self: end; margin-top: .35rem; transition: transform .18s ease; }
.act:hover .act-ar { transform: translate(2px, -2px); color: var(--primary); }

/* ── 정의 줄(운영 안내) ───────────────────────────────────────────── */
.deflist { margin: 0; border-top: 1px solid var(--rule-hi); }
.defrow {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem .9rem;
  padding: .95rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px) { .defrow { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.defrow dt { font-family: var(--mono); font-size: .655rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-42); padding-top: .3rem; }
.defrow dd { margin: 0; font-size: .93rem; }

/* ── 알림 상자 ────────────────────────────────────────────────────── */
.callout {
  margin: 1.8rem 0 0; padding: 1.15rem 1.25rem;
  border-left: 4px solid var(--primary); background: rgb(123 46 38 / .07);
}
.callout p { margin: 0; font-size: .92rem; }
.callout p + p { margin-top: .5rem; }
.callout .callout-k {
  display: block; font-family: var(--mono); font-size: .645rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--primary); margin-bottom: .4rem;
}

/* ── 상태 설명 줄 ─────────────────────────────────────────────────── */
.state-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-hi); }
.state-row {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: .2rem .8rem; padding: 1.05rem 0; border-bottom: 1px solid var(--rule);
}
.state-row .mark { margin-top: .28rem; }
.state-t { margin: 0; font-weight: 700; font-size: 1rem; }
.state-d { margin: .25rem 0 0; grid-column: 2; font-size: .88rem; color: var(--ink-80); }
.state-w { margin: .3rem 0 0; grid-column: 2; font-family: var(--mono); font-size: .655rem; letter-spacing: .1em; color: var(--ink-42); text-transform: uppercase; }

/* ── 표 ───────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .855rem; }
.tbl caption { text-align: left; padding-bottom: .7rem; font-size: .82rem; color: var(--ink-62); }
.tbl th, .tbl td { padding: .7rem .8rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.tbl thead th {
  font-family: var(--mono); font-size: .645rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-62); font-weight: 500; border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.tbl tbody th { font-family: var(--mono); font-weight: 600; letter-spacing: .08em; color: var(--primary); white-space: nowrap; }
.tbl-hint { margin: .8rem 0 0; }

/* ── 아코디언 ─────────────────────────────────────────────────────── */
.acc { border-top: 1px solid var(--rule-hi); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-item h3 { margin: 0; font-size: 1rem; }
.acc-trigger {
  appearance: none; width: 100%; background: none; border: 0; color: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; min-height: 56px; cursor: pointer;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 700; text-align: left;
}
.acc-sign { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.acc-sign::before, .acc-sign::after {
  content: ""; position: absolute; background: var(--primary); transition: transform .22s ease;
}
.acc-sign::before { left: 0; top: 6px; width: 14px; height: 2px; }
.acc-sign::after { left: 6px; top: 0; width: 2px; height: 14px; }
.acc-item.open .acc-sign::after { transform: scaleY(0); }
.acc-panel { padding: 0 0 1.3rem; }
.acc-panel p { margin: 0 0 .6rem; font-size: .92rem; }
.acc-panel p:last-child { margin-bottom: 0; }
.acc-panel .grade-scale { list-style: none; margin: .3rem 0 .8rem; padding: 0; display: grid; gap: .3rem; }
.acc-panel .grade-scale li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .6rem; font-size: .875rem; }
.acc-panel .grade-scale .g-k { padding-top: .16rem; }

/* ── 단계(열람 예약) ──────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 780px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
  /* 잇는 선은 첫 동그라미 한가운데에서 마지막 동그라미 한가운데까지다 */
  .steps::before {
    content: ""; position: absolute; left: 21px; right: calc(25% - 21px); top: 21px;
    height: 1px; background: var(--ink); z-index: 0;
  }
}
.step { position: relative; z-index: 1; padding-right: 1rem; }
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary); color: var(--ground);
  font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .06em;
}
.step-t { margin: .85rem 0 .2rem; font-size: 1rem; font-weight: 700; }
.step-d { margin: 0; font-size: .86rem; color: var(--ink-62); }
.step-w { margin: .35rem 0 0; font-family: var(--mono); font-size: .645rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-42); }

/* ── 폼 ───────────────────────────────────────────────────────────── */
.inquiry-form { margin-top: 1.6rem; max-width: 620px; }
.field { margin-bottom: 1.15rem; }
.field label, .field .lab {
  display: block; margin-bottom: .4rem;
  font-family: var(--mono); font-size: .655rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-62);
}
.control {
  width: 100%; font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--ink);
  background: transparent; border: 1px solid var(--rule-hi); border-radius: 0;
  padding: .78rem .9rem; min-height: 50px;
}
.control:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
textarea.control { min-height: 120px; resize: vertical; }
select.control { appearance: none; background-image: none; }
.field .err { display: none; margin: .4rem 0 0; font-size: .82rem; color: var(--primary); font-weight: 600; }
.field.invalid .control { border-color: var(--primary); border-width: 2px; }
.field.invalid .err { display: block; }
.counter { margin: .35rem 0 0; font-family: var(--mono); font-size: .645rem; letter-spacing: .1em; color: var(--ink-42); text-align: right; }

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.agree { position: relative; margin: 1.3rem 0 1.5rem; }
.agree label { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; cursor: pointer; }
.agree .box {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  border: 1px solid var(--rule-hi); background: transparent; position: relative;
}
.agree input:checked + label .box { background: var(--primary); border-color: var(--primary); }
.agree input:checked + label .box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid var(--ground); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.agree .err { display: none; margin: .4rem 0 0 1.6rem; font-size: .82rem; color: var(--primary); font-weight: 600; }
.agree.invalid .box { border-color: var(--primary); border-width: 2px; }
.agree.invalid .err { display: block; }

.form-submit {
  appearance: none; cursor: pointer; width: 100%;
  padding: 1.05rem 1.2rem; min-height: 58px;
  background: var(--primary); color: var(--ground);
  border: 1px solid var(--primary); border-radius: 0;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background-color .2s ease;
}
.form-submit:hover { background: var(--primary-deep); }
.form-note { margin: .9rem 0 0; font-size: .82rem; color: var(--ink-62); }

/* 담은 자료 미리보기(폼 위) */
.picked-box { border: 1px solid var(--rule-hi); padding: 1rem 1.1rem; background: rgb(37 30 24 / .03); }
.picked-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.picked-list li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .875rem; }
.picked-list .tray-no { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--primary); }

/* ── 결과 패널 ────────────────────────────────────────────────────── */
.receipt { border: 1px solid var(--ink); background: var(--card); padding: 1.5rem 1.4rem; }
.receipt-top { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: baseline; justify-content: space-between; padding-bottom: .7rem; border-bottom: 2px solid var(--ink); }
.receipt-no { margin: 0; font-family: var(--mono); font-size: 1.1rem; font-weight: 600; letter-spacing: .14em; color: var(--primary); }
.receipt-tag { font-family: var(--mono); font-size: .645rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ground); background: var(--ink); padding: .25rem .5rem; }
.receipt .deflist { border-top: 0; }
.receipt .defrow:last-child { border-bottom: 0; }

/* ── 모바일 과업 시퀀스 ───────────────────────────────────────────── */
.taskbar { display: none; }
@media (max-width: 767px) {
  .taskbar {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 1.5rem; padding: .55rem 0; border-bottom: 1px solid var(--rule);
  }
  .taskbar a, .taskbar span.taskbar-now {
    font-family: var(--mono); font-size: .655rem; letter-spacing: .1em;
    color: var(--ink-42); text-decoration: none; padding: .3rem 0;
  }
  .taskbar span.taskbar-now { color: var(--ink); border-bottom: 1px solid var(--primary); }
  .taskbar .taskbar-sep { color: var(--ink-42); }
  .taskbar .taskbar-of { margin-left: auto; font-family: var(--mono); font-size: .655rem; letter-spacing: .1em; color: var(--ink-42); }
}

/* ── 면 머리 ──────────────────────────────────────────────────────── */
.page-head .display { max-width: 18ch; }
.page-head .lead { max-width: 44ch; }
.page-lede { display: grid; gap: clamp(22px, 3.6vw, 40px); align-items: end; }
@media (min-width: 900px) { .page-lede { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

/* ── 꼬리말 ───────────────────────────────────────────────────────── */
.site-footer { border-top: 2px solid var(--ink); margin-top: clamp(48px, 7vw, 96px); }
.footer-inner {
  max-width: var(--wrap); margin-inline: auto; padding: clamp(34px, 4.6vw, 56px) var(--pad) clamp(30px, 4vw, 44px);
  display: grid; gap: 1.5rem;
}
.footer-brand { margin: 0; font-weight: 800; font-size: 1.06rem; letter-spacing: .045em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.footer-nav a {
  font-family: var(--mono); font-size: .705rem; letter-spacing: .13em;
  color: var(--ink-62); text-decoration: none; padding: .35rem 0;
}
.footer-nav a:hover { color: var(--ink); }
.footer-biz { font-style: normal; font-size: .8rem; line-height: 1.85; color: var(--ink-62); }
.footer-biz a { text-decoration: none; border-bottom: 1px solid var(--rule-hi); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 0; }
.footer-legal a { font-size: .8rem; color: var(--ink-62); text-decoration: none; border-bottom: 1px solid var(--rule); padding: .2rem 0; }
.footer-copy { margin: 0; font-family: var(--mono); font-size: .645rem; letter-spacing: .12em; color: var(--ink-42); }

/* ── 토스트 생김새 ────────────────────────────────────────────────── */
.toast {
  background: var(--ink); color: var(--ground);
  padding: .8rem 1.15rem; max-width: min(92vw, 460px);
  font-size: .875rem; text-align: center;
  border: 1px solid var(--ink);
}

/* ── 200% 확대·좁은 폭 보정 ───────────────────────────────────────── */
@media (max-width: 479px) {
  .bibrow { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .grades li { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .bibstate-where { margin-left: 0; width: 100%; }
}