/* ============================================================
   steve — 잡스가 만들었던, 그리고 만들었을 인터페이스 표본실
   레지스터: 제도(製圖) 용지 / 엔지니어링 도면
   ============================================================ */

/* ---------- 서체 ----------
   Pretendard 하나로 통일한다. 파일은 프로젝트 안에 있어 외부 요청이 없다. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* ---------- 토큰 ---------- */
:root {
  --ground:      #EFF1F2;
  --ground-2:    #E4E8EA;
  --surface:     #FFFFFF;   /* 사진의 흰 배경과 같은 값 */
  --surface-2:   #E9EDEF;
  --ink:         #14181A;
  --ink-2:       #5E696E;
  --ink-3:       #8B979C;
  --line:        rgba(20, 24, 26, .14);
  --line-faint:  rgba(20, 24, 26, .07);   /* 자리만 잡는 아주 옅은 선 */
  --line-2:      rgba(20, 24, 26, .30);
  --accent:      #0B7A91;          /* 본다이 블루 — iMac G3 */
  --accent-2:    #00A2C0;
  --accent-wash: rgba(11, 122, 145, .10);
  --friction:    #A85440;          /* 의미색: 마찰 / 나쁜 예 */
  --on-accent:   #FFFFFF;
  --shadow:      0 1px 2px rgba(20,24,26,.06), 0 8px 24px -12px rgba(20,24,26,.22);

  /* 본문·라벨·계측기 전부 같은 서체를 쓴다. 구분은 크기·자간·숫자 정렬로 한다 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: var(--sans);

  --t-xs:   .6875rem;
  --t-sm:   .8125rem;
  --t-md:   .9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.375rem;
  --t-xl:   clamp(1.6rem, 3.4vw, 2.2rem);
  --t-2xl:  clamp(2.4rem, 7.4vw, 4.6rem);

  --gut: clamp(18px, 4vw, 40px);
  --plate-radius: 10px;
  --row-h: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0D1012; --ground-2: #101416; --surface: #15191C; --surface-2: #1D2327;
    --ink: #E7ECEE; --ink-2: #8B979C; --ink-3: #6B767B;
    --line: rgba(231,236,238,.13); --line-2: rgba(231,236,238,.28);
    --line-faint: rgba(231,236,238,.07);
    --accent: #2FC6E2; --accent-2: #6FE0F2; --accent-wash: rgba(47,198,226,.12);
    --friction: #D2775E;
    --on-accent: #0D1012;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

/* 명시 토글이 미디어 쿼리를 양방향으로 이깁니다 */
:root[data-theme="dark"] {
  --ground: #0D1012; --ground-2: #101416; --surface: #15191C; --surface-2: #1D2327;
  --ink: #E7ECEE; --ink-2: #8B979C; --ink-3: #6B767B;
  --line: rgba(231,236,238,.13); --line-2: rgba(231,236,238,.28);
  --line-faint: rgba(231,236,238,.07);
  --accent: #2FC6E2; --accent-2: #6FE0F2; --accent-wash: rgba(47,198,226,.12);
  --friction: #D2775E;
  --on-accent: #0D1012;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}
:root[data-theme="light"] {
  --ground: #EFF1F2; --ground-2: #E4E8EA; --surface: #FFFFFF; --surface-2: #E9EDEF;
  --ink: #14181A; --ink-2: #5E696E; --ink-3: #8B979C;
  --line: rgba(20,24,26,.14); --line-2: rgba(20,24,26,.30);
  --line-faint: rgba(20,24,26,.07);
  --accent: #0B7A91; --accent-2: #00A2C0; --accent-wash: rgba(11,122,145,.10);
  --friction: #A85440;
  --on-accent: #FFFFFF;
  --shadow: 0 1px 2px rgba(20,24,26,.06), 0 8px 24px -12px rgba(20,24,26,.22);
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.82;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;          /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
  overflow-x: clip;              /* 전폭 히어로가 가로 스크롤을 만들지 않도록 */
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }
svg { display: block; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 공통 조판 ---------- */
.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

.mono {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  letter-spacing: -.028em;
  line-height: 1.14;
  text-wrap: balance;
  font-weight: 800;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.rule {
  margin: 14px 0 12px;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--line-2) 0 3px, transparent 3px 7px);
}

/* ============================================================
   헤더 / 도입
   ============================================================ */
/* 표지는 본다이 블루로 채운다. 두 테마 모두 흰 글씨가 읽히도록
   밝은 테마 액센트(#0B7A91)를 고정값으로 쓴다 — 어두운 테마의 시안은 흰 글씨와 대비가 안 난다. */
.masthead {
  background: #0B7A91;
}
.masthead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.masthead__tag {
  color: rgba(255, 255, 255, .94);   /* 11~12px 소형 텍스트라 대비를 넉넉히 */
  font-weight: 400;               /* h1이지만 표제가 아니라 표지 문구다 */
  letter-spacing: .11em;
  line-height: 1.6;
}
.masthead__tag b { color: #FFFFFF; font-weight: 600; }
/* 표지 제목만 한 단계 크게 — 옆의 연도 라벨과 위계를 준다 */
h1.masthead__tag { font-size: .75rem; }

.masthead__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
   상단 고정 탭 — 누르면 해당 표본이 바로 아래에 열린다
   ============================================================ */
.tabsbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ground);
}

/* 한 줄짜리 바. 좁아지면 가로로 밀어서 고른다 */
.tabs {
  display: flex;
  overflow-x: auto;
  /* 탭이 폭을 다 채우지 못해도 선이 이어지도록. 탭 밑줄과 같은 높이에 놓인다 */
  background-image: linear-gradient(var(--line-faint), var(--line-faint));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 1 1 0;                        /* 열한 개가 같은 폭을 나눠 갖는다 */
  min-width: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 6px 12px;
  /* 음수 마진을 쓰면 .tabs의 overflow-x:auto가 세로도 잘라 밑줄이 사라진다.
     밑줄은 상자 안에 두고, 바의 옅은 선 바로 위에 놓이게 한다. */
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-faint);   /* 선택되면 색만 바뀐다 */
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
/* 호버는 글자까지 액센트로, 누르는 순간은 꽉 채워서 — 단계가 손에 잡히도록 */
.tab:hover { background: var(--accent-wash); }
.tab:hover .tab__name { color: var(--accent); }

.tab:active { background: var(--accent); }
.tab:active .tab__name { color: var(--on-accent); }

/* 열한 개가 한 줄에 다 들어가야 하므로 본문보다 한 단계 작게.
   말줄임(...)을 쓰지 않는다 — 표본 이름은 잘리면 안 된다. */
.tab__name {
  font-weight: 650;
  font-size: 12px;
  letter-spacing: -.03em;
  transition: color .15s ease;
}

.tab[aria-selected="true"] { border-bottom-color: var(--accent); }
.tab[aria-selected="true"] .tab__name { color: var(--accent); }

/* ============================================================
   표본판 (plate)
   ============================================================ */
/* 8판이 같은 자리를 나눠 쓴다. flow-root라 안쪽 판의 마진이 밖으로 새지 않고,
   높이는 JS가 가장 높은 판을 실측해 min-height로 잡아둔다 — 탭을 눌러도 안 덜컹거리도록. */
.panels { display: flow-root; }

.plate {
  position: relative;
  display: flex;
  flex-direction: column;          /* min-height로 남는 높이를 본문이 흡수하도록 */
  margin: clamp(14px, 2vw, 24px) 0 clamp(20px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--plate-radius);
  box-shadow: var(--shadow);
}
.plate[hidden] { display: none; }

.plate__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 44px;                /* 칩이 들어와도 바가 두꺼워지지 않도록 */
  padding: 0 clamp(16px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--plate-radius) var(--plate-radius) 0 0;
}
.plate__fig  { color: var(--accent); font-weight: 700; }
.plate__spec { color: var(--ink-3); }
.plate__spec b { color: var(--ink-2); font-weight: 500; }
.plate__spec--wrap { line-height: 1.7; }
.plate__spec--future b { color: var(--accent); }
.plate__bar-spacer { flex: 1; }

.plate__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 32px) clamp(20px, 3vw, 32px);
}
@media (max-width: 860px) {
  .plate__body { grid-template-columns: 1fr; }
}

.plate__stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.plate__note { min-width: 0; }
/* 표본 이름은 크되 가볍게 — 무게는 데모가 지고 제목은 이름표 역할만 */
.plate__title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -.035em;
  margin-bottom: 6px;
}
.plate__kr    { color: var(--ink-3); margin-bottom: 12px; display: block; }
.plate__note p { color: var(--ink-2); font-size: var(--t-md); line-height: 1.9; }
.plate__note p + p { margin-top: 14px; }
.plate__note strong { color: var(--ink); font-weight: 650; }

.verdict {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.85;
}
.verdict b { color: var(--accent); font-weight: 650; display: block; letter-spacing: .04em; }

/* 계측 readout */
.readout {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.readout b { color: var(--accent); font-weight: 600; }

/* 공용 칩 버튼 */
.chip {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 11px;
  line-height: 1.15;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"],
.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* 대화 제안 답변은 문장이므로 대문자화·자간 해제 */
.chip--say { text-transform: none; letter-spacing: .01em; }

/* ============================================================
   FIG.01 — 휠
   ============================================================ */
.wheelrig {
  display: flex;
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.ipod {
  width: 224px;
  height: 224px;
  border-radius: 50%;
  position: relative;
  flex: none;
  touch-action: none;
  cursor: grab;
  background: radial-gradient(circle at 50% 34%, var(--surface-2), var(--ground-2) 74%);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), var(--shadow);
  user-select: none;
  -webkit-user-select: none;
}
@media (prefers-color-scheme: dark) {
  .ipod { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow); }
}
.ipod:active { cursor: grabbing; }

.ipod__label {
  position: absolute;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--ink-3);
  pointer-events: none;
}
.ipod__label--menu { top: 15px;    left: 50%;  transform: translateX(-50%); }
.ipod__label--prev { left: 16px;   top: 50%;   transform: translateY(-50%); }
.ipod__label--next { right: 16px;  top: 50%;   transform: translateY(-50%); }
.ipod__label--play { bottom: 15px; left: 50%;  transform: translateX(-50%); }

.ipod__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .09s ease, background-color .15s ease, color .15s ease;
}
.ipod__center:hover { color: var(--accent); }
.ipod__center:active { transform: translate(-50%, -50%) scale(.955); }
.ipod__center.is-playing {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* 회전 지시침 */
.ipod__needle { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.ipod__needle i {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 3px;
  height: 11px;
  margin-left: -1.5px;
  background: var(--accent);
  border-radius: 6px;
  opacity: 0;
  transition: opacity .25s ease;
}
.ipod.is-active .ipod__needle i { opacity: 1; }

.screen {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 380px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ground-2);
  overflow: hidden;
}
.screen__head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  background: var(--surface-2);
}
.screen__view { position: relative; height: 224px; overflow: hidden; }
.screen__band {
  position: absolute;
  left: 0; right: 0;
  top: 96px;
  height: var(--row-h);
  background: var(--accent);
  opacity: .14;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  pointer-events: none;
}
.screen__list { will-change: transform; padding-top: 96px; }

.row {
  height: var(--row-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.row__t { overflow: hidden; text-overflow: ellipsis; }
.row__a { margin-left: auto; color: var(--ink-3); font-size: var(--t-xs); flex: none; }
.row.is-sel { color: var(--ink); font-weight: 650; }
.row.is-sel .row__a { color: var(--ink-2); }

.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; flex: none; }
.eq i { width: 2px; background: var(--accent); animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(1) { height: 5px;  animation-delay: 0s; }
.eq i:nth-child(2) { height: 11px; animation-delay: .18s; }
.eq i:nth-child(3) { height: 7px;  animation-delay: .36s; }
@keyframes eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ============================================================
   FIG.02 — 바운스
   ============================================================ */
.abpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
@media (max-width: 560px) { .abpair { grid-template-columns: 1fr; } }

.scroller {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ground-2);
  overflow: hidden;
}
.scroller__head {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-3);
}
.scroller__head b { font-weight: 600; }
.scroller--bad  .scroller__head b { color: var(--friction); }
.scroller--good .scroller__head b { color: var(--accent); }

.scroller__view {
  /* 휴대폰 화면처럼 세로로 길게 — 관성이 붙을 거리가 있어야 차이가 드러난다 */
  height: clamp(320px, 30vw, 420px);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
.scroller__view:active { cursor: grabbing; }
.scroller__inner { will-change: transform; }

.item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  height: 50px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.item__y {
  flex: none;
  font-size: var(--t-xs);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;            /* 연도는 절대 쪼개지지 않는다 */
}
.item__txt {
  min-width: 0;                   /* 줄바꿈 대신 말줄임이 되도록 */
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.item__n,
.item__d {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item__n { color: var(--ink); font-weight: 600; letter-spacing: -.015em; }
.item__d { color: var(--ink-3); font-size: var(--t-xs); }

/* 경계 충돌 표시 — A판 전용 */
.scroller__edge {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--friction);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.scroller__edge--top { top: 0; }
.scroller__edge--bot { bottom: 0; }
.scroller__edge.is-hit { opacity: .9; }

/* ============================================================
   FIG.06 — 스케일
   ============================================================ */
.handleblock {
  width: 100%;
  max-width: 470px;
  margin-bottom: 56px;            /* 세로 중앙에서 조금 위로 올린다 */
}

.paper {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ground-2);
  padding: 18px 18px 42px;
  min-height: 186px;
  transition: min-height .28s cubic-bezier(.2, .8, .25, 1);
}
.paper__text {
  font-size: var(--t-md);
  line-height: 1.85;
  color: var(--ink);
  transition: opacity .12s linear;
}
.paper__text.is-swapping { opacity: .18; }

/* 손잡이는 눈에 먼저 띄어야 한다 — 액센트로 칠하고 위아래 화살표를 얹는다 */
.handle {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 54px;
  height: 34px;
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  cursor: ns-resize;
  touch-action: none;
  display: grid;
  place-items: center;
  border-radius: 8px 0 8px 0;
  transition: background-color .15s ease, color .15s ease;
}
.handle svg { width: 19px; height: 19px; }
.handle:hover,
.handle.is-drag {
  background: var(--accent);
  color: var(--on-accent);
}

/* 상세도 사다리 */
.ladder {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  align-items: flex-end;
  justify-content: center;
}
.ladder i {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: var(--line-2);
  transition: background-color .2s ease, height .2s ease;
}
.ladder i.is-on { background: var(--accent); height: 8px; }

/* 안 쳐도 되는 문장 */
.deadbox {
  margin-top: 12px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--ink-3);
  font-size: var(--t-sm);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.deadbox--wide { max-width: 460px; width: 100%; }
.deadbox__tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--friction);
  border: 1px solid var(--friction);
  padding: 2px 5px;
  border-radius: 6px;
  flex: none;
  margin-top: 3px;
}
.deadbox__txt { text-decoration: line-through; text-decoration-color: var(--line-2); }

/* ============================================================
   FIG.04 — 명사 후 동사
   ============================================================ */
.doc {
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ground-2);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.obj {
  position: relative;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 4px;
  transition: border-color .15s ease;
}
.obj:hover  { border-color: var(--line-2); }
.obj.is-sel { border-color: var(--accent); }

.obj__verbs {
  position: absolute;
  left: -1px;
  bottom: calc(100% + 7px);
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(5px) scale(.97);
  transform-origin: 12px 100%;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .9, .3, 1);
  z-index: 4;
}
.obj.is-sel .obj__verbs { opacity: 1; transform: none; pointer-events: auto; }

.verb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 5px 9px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.verb:hover { border-color: var(--accent); color: var(--accent); }
.verb.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* 높이는 고정, 폭은 원본 비율(320:220)을 따른다.
   높이가 안 변하니 '정사각'을 눌러도 상자가 튀지 않는다. */
.photo {
  height: 240px;
  width: 349px;                   /* 240 × 320 ÷ 220 */
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 6px;
  /* 배경 지우기 시 노출되는 투명 체커 */
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25% 75%, var(--surface-2) 75%),
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25% 75%, var(--surface-2) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  transition: width .3s cubic-bezier(.2, .8, .25, 1), filter .3s ease;
}
.photo svg { width: 100%; height: 100%; }
.photo.is-square { width: 240px; }
.photo.is-bright { filter: brightness(1.24) saturate(1.06); }
.photo.is-gray   { filter: grayscale(1) contrast(1.06); }
.photo.is-bright.is-gray { filter: grayscale(1) brightness(1.24) contrast(1.06); }
.photo.is-nobg .ph-bg { opacity: 0; }
.ph-bg { transition: opacity .3s ease; }

.para {
  min-height: 6.4em;              /* "짧게"를 눌러도 높이가 안 줄도록 */
  font-size: var(--t-md);
  line-height: 1.95;
  color: var(--ink-2);
  transition: color .2s ease, padding .2s ease, border-color .2s ease;
}
.para.is-quote {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  font-style: italic;
  color: var(--ink);
}
.para mark {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  transition: background-color .2s ease, color .2s ease;
}
.para.is-mark mark { background: var(--accent-wash); color: var(--accent); }

/* 재생 표시 — 샘플 음원임을 숨기지 않는다 */
.nowplaying {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--ink-3);
  min-height: 20px;
}
.nowplaying b { color: var(--accent); font-weight: 600; }
.nowplaying__tag {
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 9.5px;
}

/* ============================================================
   FIG.04 — 밀어서 열기
   ============================================================ */
.lockrig { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; }

/* 휴대폰 잠금화면처럼 세로로 길게. 시계는 위, 손잡이는 바닥에 */
.lockface {
  align-self: center;
  width: 100%;
  max-width: 320px;
  min-height: clamp(380px, 32vw, 430px);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--ground-2);
  padding: 52px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.lockface__clock {
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  font-weight: 250;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.lockface__date { color: var(--ink-3); margin-top: -14px; }

.lock {
  margin-top: auto;               /* 시계와 떨어져 화면 바닥에 앉는다 */
  position: relative;
  width: 100%;
  height: 56px;
  border: 1px solid var(--line-2);
  border-radius: 30px;
  background: var(--surface-2);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.lock__hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 44px;
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: .01em;
  pointer-events: none;
  /* 빛이 왼쪽에서 오른쪽으로 훑는다 — 밀 방향을 알려주는 유일한 단서 */
  background: linear-gradient(100deg,
      var(--ink-3) 30%, var(--ink) 42%, var(--ink-3) 54%) 0 0 / 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 2.6s linear infinite;
}
@keyframes sheen { to { background-position: -320% 0; } }

.lock__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  cursor: grab;
  color: var(--ink-2);
  will-change: transform;
}
.lock__knob svg { width: 20px; height: 20px; }
.lock__knob:active { cursor: grabbing; }
.lock.is-open .lock__knob {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.lock.is-open .lock__hint { display: none; }

.lock__fill {
  position: absolute;
  inset: 0;
  background: var(--accent-wash);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

.lockstate {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 13px 15px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: var(--surface);
  line-height: 1.8;
}
.lockstate b { color: var(--accent); }

/* ============================================================
   FIG.05 — 바뀌는 자판
   ============================================================ */
.formrig { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }

.fields { display: flex; flex-direction: column; gap: 8px; }

.field {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 13px 15px;
  background: var(--ground-2);
  cursor: text;
  transition: border-color .15s ease, background-color .15s ease;
}
.field:hover { border-color: var(--ink-3); }
.field.is-active { border-color: var(--accent); background: var(--accent-wash); }
.field__label {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-3);
}
.field.is-active .field__label { color: var(--accent); }
.field__value {
  font-size: 1.125rem;
  color: var(--ink);
  min-height: 1.5em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field__value:empty::before { content: attr(data-ph); color: var(--ink-3); }
.field__caret {
  display: none;
  width: 1px;
  height: 1.1em;
  background: var(--accent);
  vertical-align: -.15em;
  animation: caret 1.05s steps(1) infinite;
}
.field.is-active .field__caret { display: inline-block; }
@keyframes caret { 50% { opacity: 0; } }

/* 휴대폰 자판처럼 세로로 넉넉하게. 줄 수가 달라도 판 높이는 그대로 */
.kbd {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 268px;
}
.kbd__row { display: flex; gap: 6px; justify-content: center; }

.key {
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .1s ease, transform .07s ease, color .1s ease;
}
.key:hover { background: var(--accent-wash); border-color: var(--accent); }
.key:active { transform: translateY(1px); background: var(--accent); color: var(--on-accent); }
.key--wide { flex: 2.4 1 0; }
.key--util { color: var(--ink-2); font-size: 11px; letter-spacing: .04em; }
/* 맥락에 따라 새로 나타나는 키 */
.key--ctx {
  border-color: var(--accent);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .02em;
}
.key--go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); flex: 1.6 1 0; }

.kbdswap {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--ink-3);
}
.kbdswap b { color: var(--accent); font-weight: 600; }

/* ============================================================
   00 — 시작
   ============================================================ */
/* 이 표본실 전체가 증명하려는 문장. 두 컬럼에 걸쳐 머리에 놓는다 */
.quote {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote__src {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quote__orig {
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  font-weight: 250;               /* 크되 가볍게 */
  color: var(--ink-3);            /* 첫 줄은 물러선다 */
  line-height: 1.4;
  letter-spacing: -.03em;
}
/* 뒷줄이 이 표본실의 논지다 — 앞줄은 물러서고 뒷줄만 키컬러로 */
.quote__orig em {
  font-style: normal;
  color: var(--accent);
}
.quote__by { color: var(--accent); }

/* 사진은 판 오른쪽 아래에 깔린 배경. 글은 그 위에서 흐르되
   폭을 제한해 사진과 겹치지 않게 한다. */
.plate__body--start {
  position: relative;
  display: block;
  min-height: 620px;
  /* 오른쪽·아래 여백을 없애 사진이 음수 위치 없이도 판 모서리에 닿게 한다.
     음수로 빼면 overflow가 그만큼을 잘라낸다. */
  padding-right: 0;
  padding-bottom: 0;
  overflow: hidden;
  border-bottom-right-radius: 9px;
}
.plate__body--start .intro { padding-bottom: clamp(20px, 3vw, 32px); }
.plate__body--start .quote,
.plate__body--start .intro {
  position: relative;
  z-index: 1;                     /* 배경 사진 위 */
}
.plate__body--start .intro { margin-top: 28px; }

/* 좁은 화면에서는 배경 배치를 풀고 위아래로 쌓는다.
   사진이 절대 배치인 채로 남으면 글 위를 덮는다. */
@media (max-width: 860px) {
  .plate__body--start {
    min-height: 0;
    overflow: visible;
    padding-right: clamp(16px, 3vw, 32px);
    padding-bottom: clamp(20px, 3vw, 32px);
    border-bottom-right-radius: 0;
  }
  .plate__body--start .intro { padding-bottom: 0; }
  .plate__body--start .portrait {
    position: static;
    width: 100%;
    max-width: 400px;
    margin: 24px auto 0;
  }
}

/* 사진의 흰 배경과 표본판 바탕(--surface)이 같은 값이라 경계가 안 보인다.
   테두리 없이 오른쪽 아래에 붙인다. */
/* 배경 레이어 — 판의 오른쪽 아래 모서리에 밀착시킨다.
   본문 여백만큼 음수로 빼서 판 테두리까지 닿게 한다. */
.portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  width: 600px;                   /* 창 폭과 무관한 고정 크기 */
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* 그리드 칸 안에서 줄어들 수 있도록 */
.intro,
.toc__group { min-width: 0; }

/* 목차 — 눌러서 바로 그 표본으로. 두 무리를 위아래로 세워 한 줄로 읽힌다 */
.toc {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.toc__head {
  color: var(--ink-3);
  font-weight: 400;
  margin-bottom: 6px;
}
.toc__list { display: flex; flex-direction: column; }

.toc__item {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 8px 5px 0;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.8;
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, padding-left .14s ease, background-color .14s ease;
}
.toc__item span { color: var(--ink-3); transition: color .14s ease; }
/* 글 폭이 판 전체라 배경이 사진 위까지 깔린다 — 오른쪽으로 갈수록 사라지게 */
.toc__item:hover {
  color: var(--accent);
  background: linear-gradient(to right,
      var(--accent-wash) 0%,
      var(--accent-wash) 34%,
      transparent 78%);
  padding-left: 8px;
}
.toc__item:hover span { color: var(--accent); }

/* ============================================================
   FIG.03 — 끌어다 놓기
   ============================================================ */
.desk {
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ground-2);
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.desk__loose {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 210px;              /* 집어 옮길 여지가 보이도록 */
  align-content: flex-start;
}

.icon {
  width: 78px;
  padding: 9px 4px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.icon:hover { border-color: var(--line-2); }
.icon.is-lifted {
  cursor: grabbing;
  border-color: var(--accent);
  box-shadow: var(--shadow);
  opacity: .92;
  z-index: 5;
  position: relative;
}
.icon--return { transition: transform .26s cubic-bezier(.2, .8, .25, 1); }

.icon__glyph { color: var(--accent); line-height: 0; }
.icon__glyph svg { width: 26px; height: 26px; }
.icon__name {
  font-size: 10.5px;
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.desk__targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.drop {
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  padding: 13px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color .14s ease, background-color .14s ease;
}
.drop__glyph { color: var(--ink-3); line-height: 0; transition: color .14s ease; }
.drop__glyph svg { width: 24px; height: 24px; }
.drop__name  { font-size: var(--t-sm); color: var(--ink-2); }
.drop__num   { color: var(--ink-3); }

.drop.is-over {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-wash);
}
.drop.is-over .drop__glyph,
.drop.is-over .drop__name,
.drop.is-over .drop__num { color: var(--accent); }

.drop--bin.is-over {
  border-color: var(--friction);
  background: transparent;
}
.drop--bin.is-over .drop__glyph,
.drop--bin.is-over .drop__name,
.drop--bin.is-over .drop__num { color: var(--friction); }

/* ============================================================
   FIG.08 — 준비된 제안
   ============================================================ */
.ghostwrap {
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ground-2);
  overflow: hidden;
}
.ghostwrap__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
}
.ghostwrap__head b { color: var(--accent); font-weight: 600; }

/* 문서 한 장처럼 세워둔다. 제안을 소비해 글이 짧아져도 상자는 그대로 */
.ghostdoc {
  min-height: clamp(280px, 26vw, 340px);
  padding: 18px 16px 16px;
  font-size: var(--t-md);
  line-height: 2.45;              /* 알약·동그라미가 줄 사이에 끼어들 여유 */
  color: var(--ink);
}

/* 묶음 전체를 nowrap으로 두면 상자 밖으로 밀린다.
   원문은 줄바꿈을 허용하고, 알약+동그라미만 붙여 둔다. */
.ghost { white-space: normal; }

/* 원문은 지워질 후보로 남겨 둔다 */
.ghost__was {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--friction);
  margin-right: 5px;
}

/* 이미 준비된 대안 — 누르면 그대로 확정된다 */
/* 받아들이기(알약)와 버리기(동그라미)를 한 쌍으로 묶는다 */
.ghost__pair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  white-space: nowrap;
}

.ghost__now {
  font: inherit;
  max-width: 100%;
  white-space: normal;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  padding: 0 11px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .13s ease, color .13s ease;
}
.ghost__now:hover { background: var(--accent); color: var(--on-accent); }

.ghost__no {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color .13s ease, color .13s ease, background-color .13s ease;
}
.ghost__no svg { width: 10px; height: 10px; }
/* 받아들이기와 같은 방식으로 반응한다 — 호버하면 채워진다. 색만 다르다 */
.ghost__no:hover {
  background: var(--friction);
  border-color: var(--friction);
  color: #FFFFFF;
}

.ghost__kept { color: var(--ink); }

/* ============================================================
   서명
   ============================================================ */
.signature {
  border-top: 1px solid var(--line-faint);   /* 탭 바 하단선과 같은 농도 */
  padding: 10px 0 14px;
  color: var(--ink-3);
  text-align: right;
}
/* .mono의 대문자화가 상속을 이기므로 여기서 직접 끈다 */
.signature .mono { text-transform: none; }
/* 평소엔 서명의 일부로 조용히, 가리키면 링크임이 드러난다 */
.signature__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color .15s ease, border-color .15s ease;
}
.signature__link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ============================================================
   FIG.09 — 확신의 농도
   ============================================================ */
/* 채팅창 안에서 벌어지는 일로 보여준다 — 이 표본이 겨누는 대상이 그것이므로 */
.answer {
  width: 100%;
  max-width: 520px;
  min-height: clamp(260px, 26vw, 330px);
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--ground-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chatline {
  max-width: 90%;
  padding: 11px 15px;
  border-radius: 16px;
}
.chatline--me {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-right-radius: 5px;
  font-size: var(--t-md);
}
.chatline--ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}

/* 농도 차이는 글자가 클수록 눈에 잘 걸린다 */
.answer__body {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 2;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
  color: var(--ink);
}

/* 세 단계. 표시를 끄면 전부 확실한 것처럼 보인다 — 그게 지금의 상태다 */
.grade--sure { color: var(--ink); }
.grade--soft { color: var(--ink-2); }
.grade--weak {
  color: var(--ink-3);
  text-decoration: underline dotted var(--friction);
  text-underline-offset: 5px;
}
.grade--soft,
.grade--weak {
  cursor: help;
  border-radius: 3px;
  transition: background-color .14s ease, color .14s ease;
}
.grade--soft:hover,
.grade--weak:hover { background: var(--accent-wash); color: var(--accent); }
.grade.is-open { background: var(--accent-wash); color: var(--accent); }

/* 표시를 끈 상태 — 전부 같은 굵기, 같은 색 */
.answer.is-flat .grade--sure,
.answer.is-flat .grade--soft,
.answer.is-flat .grade--weak {
  color: var(--ink);
  text-decoration: none;
  cursor: default;
  background: transparent;
}

.answer__why {
  width: 100%;
  max-width: 520px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.6;
}
.answer__why b {
  flex: none;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--friction);
  border: 1px solid var(--friction);
  border-radius: 3px;
  padding: 2px 5px;
  margin-top: 2px;
}

/* ============================================================
   FIG.10 — 되돌리기
   ============================================================ */
.ver {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ground-2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
}
.ver__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-3);
}
.ver__head b { font-weight: 600; }
.ver--bad  .ver__head b { color: var(--friction); }
.ver--good .ver__head b { color: var(--accent); }

.ver__text {
  flex: 1;
  padding: 13px 14px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--t-md);
  line-height: 1.9;
  color: var(--ink);
}

/* 버전 눈금 — 되돌아갈 수 있는 자리와 사라진 자리를 구분해 보여준다 */
.vstrip {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vdot {
  flex: 1 1 0;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, opacity .14s ease;
}
.vdot:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vdot.is-now {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* 지나가 버린 자리 — 다시 갈 수 없다 */
.vdot:disabled {
  cursor: not-allowed;
  opacity: .4;
  color: var(--ink-3);
  background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 5px);
}
.ver--bad .vdot.is-now { background: var(--friction); border-color: var(--friction); color: #FFFFFF; }

.ver__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 28px;
}
.ver__lost { color: var(--ink-3); }
.ver--bad  .ver__lost b { color: var(--friction); }
.ver--good .ver__lost b { color: var(--accent); }

/* ============================================================
   좁은 화면 — 손가락으로 쓰는 조건
   ============================================================ */
/* 탭이 화면보다 길어지는 구간 — 밀어서 고른다.
   .wrap의 좌우 여백은 안쪽 패딩으로 옮겨, 스크롤이 화면 끝까지 닿게 한다. */
@media (max-width: 860px) {
  .tabs {
    max-width: none;
    padding-left: var(--gut);
    padding-right: var(--gut);
    scroll-padding-inline: var(--gut);
  }
  .tab {
    flex: 0 0 auto;               /* 폭은 이름에 맡긴다 — 잘리지 않게 */
    min-width: 0;
    padding: 11px 14px 12px;
  }
}

@media (max-width: 720px) {
  /* 휠은 두 덩이가 위아래로 */
  .wheelrig { flex-direction: column; }
  .screen { width: 100%; max-width: 100%; }

  /* 표본 이름이 화면을 다 먹지 않도록 */
  .plate__title { font-size: clamp(1.7rem, 7vw, 2.1rem); }

  /* 판 위쪽 사양 줄이 여러 줄로 접히는 걸 허용 */
  .plate__bar { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 480px) {
  /* 자판은 키가 작아지므로 높이도 함께 줄인다 */
  .kbd { min-height: 0; padding: 9px 7px; gap: 6px; }
  .kbd__row { gap: 4px; }
  .key { height: 40px; font-size: var(--t-xs); }
  .key--ctx { font-size: 10px; }

  /* 파일 아이콘은 한 줄에 세 개 */
  .icon { width: 30%; }
  .desk__loose { min-height: 150px; }

  /* 답변·문서 상자는 세로 여유를 줄인다 */
  .answer { min-height: 0; }
  .ghostdoc { min-height: 0; line-height: 2.2; }
  .ver { min-height: 0; }

  /* 잠금화면은 화면 폭에 맞춘다 */
  .lockface { min-height: clamp(320px, 78vw, 380px); padding-top: 40px; }

  /* 목록 두 판은 조금 낮게 */
  .scroller__view { height: 300px; }

  /* 서명은 가운데로 — 오른쪽 끝에 붙으면 잘려 보인다 */
  .signature { text-align: center; }
}

/* ---------- 접근성 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}