/* 슬롭 탐지기가 슬롭처럼 생기면 곤란하다.
   Inter 없음, 인디고 없음, 그라디언트 없음, 블롭 없음. */

:root {
  --bg: #f6f3ee;
  --paper: #fffdf9;
  --ink: #1d1a17;
  --muted: #7a7169;
  --line: #e2dbd1;
  --accent: #b5461f;

  --hygiene:  #d63b3b;
  --template: #c9791b;
  --lexicon:  #b5461f;
  --hedge:    #8a7a2c;
  --rhythm:   #6b6b6b;
  --concrete: #2f7d4f;

  --sans: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17151300; --bg: #171513;
    --paper: #1f1c19;
    --ink: #ece6dd;
    --muted: #9a9088;
    --line: #35302a;
    --hygiene:  #ff6b6b;
    --template: #e8a04a;
    --lexicon:  #e57a52;
    --hedge:    #c8b45a;
    --rhythm:   #9a9a9a;
    --concrete: #5fbf85;
  }
}

/* ── 테마 9종. 우상단 스와치로 고른다. [data-theme] 는 :root 보다 특이도가 높아 OS 다크모드 값을 이긴다. ── */
:root[data-theme="paper"]    { color-scheme: light; --bg:#f6f3ee; --paper:#fffdf9; --ink:#1d1a17; --muted:#7a7169; --line:#e2dbd1; --accent:#b5461f; }
:root[data-theme="ink"]      { color-scheme: dark;  --bg:#171513; --paper:#1f1c19; --ink:#ece6dd; --muted:#9a9088; --line:#35302a; --accent:#d9603a; }
:root[data-theme="sand"]     { color-scheme: light; --bg:#f3e7cf; --paper:#fbf4e6; --ink:#3a2c18; --muted:#8a7554; --line:#e2d3b3; --accent:#c2410c; }
:root[data-theme="mint"]     { color-scheme: light; --bg:#e3f3ea; --paper:#f3fbf6; --ink:#12362a; --muted:#4f7a68; --line:#c5e2d3; --accent:#0f766e; }
:root[data-theme="sky"]      { color-scheme: light; --bg:#e4eefb; --paper:#f4f8ff; --ink:#10233f; --muted:#556b8c; --line:#c7d8f0; --accent:#2563eb; }
:root[data-theme="rose"]     { color-scheme: light; --bg:#fbe6ec; --paper:#fff4f7; --ink:#4a1a2a; --muted:#8d566a; --line:#f0c9d5; --accent:#be185d; }
:root[data-theme="lemon"]    { color-scheme: light; --bg:#faf3c8; --paper:#fffbe3; --ink:#3d3510; --muted:#857a3a; --line:#ebe0a3; --accent:#b45309; }
:root[data-theme="lavender"] { color-scheme: light; --bg:#ece6fb; --paper:#f8f5ff; --ink:#2b1d4f; --muted:#6b5a94; --line:#d9cff2; --accent:#7c3aed; }
:root[data-theme="night"]    { color-scheme: dark;  --bg:#0f172a; --paper:#16213a; --ink:#e2e8f0; --muted:#94a3b8; --line:#273349; --accent:#f59e0b; }
/* 밝은 테마는 밝은 마커색, 어두운 테마는 어두운 마커색 — OS 설정과 무관하게 */
:root[data-theme="paper"], :root[data-theme="sand"], :root[data-theme="mint"], :root[data-theme="sky"],
:root[data-theme="rose"], :root[data-theme="lemon"], :root[data-theme="lavender"] {
  --hygiene:#d63b3b; --template:#c9791b; --lexicon:#b5461f; --hedge:#8a7a2c; --rhythm:#6b6b6b; --concrete:#2f7d4f;
  --input:#3f6f8f; --confusable:#a0457f; --change:#b8860b;
}
:root[data-theme="ink"], :root[data-theme="night"] {
  --hygiene:#ff6b6b; --template:#e8a04a; --lexicon:#e57a52; --hedge:#c8b45a; --rhythm:#9a9a9a; --concrete:#5fbf85;
  --input:#6fa3c7; --confusable:#d98cc0; --change:#e0b04a;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

.top {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--serif); font-size: 20px; letter-spacing: -0.01em; }
.mascot { height: 40px; width: auto; margin: -8px 0 -8px -6px; image-rendering: pixelated; align-self: center; }
.tag { color: var(--muted); }
.themes { margin-left: auto; display: flex; gap: 6px; align-self: center; }
.themes button { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); padding: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-accent) 50%); }
.themes button:hover { transform: scale(1.15); }
.themes button.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.engine { margin-left: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.engine.err { color: var(--hygiene); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
  height: calc(100% - 52px);
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
  /* 줄바꿈이 없으면 스와치 9개 + 엔진 줄이 좁은 화면에서 가로로 넘친다.
     그러면 innerWidth 가 뷰포트보다 커져서 position: fixed 요소가 화면 밖에 붙는다. */
  .top { flex-wrap: wrap; row-gap: 8px; }
  .themes { margin-left: 0; }
  .engine { margin-left: 0; }
}

/* ── 에디터: textarea 위에 투명 글자, 아래에 하이라이트 백드롭 ── */
.editor { display: flex; flex-direction: column; min-height: 0; }
.editor-wrap { position: relative; flex: 1; min-height: 320px; }
.backdrop, #input {
  position: absolute; inset: 0;
  margin: 0; padding: 28px 32px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-y: auto;
  border: 0;
  letter-spacing: 0;
  tab-size: 4;
}
.backdrop {
  color: transparent;
  background: var(--paper);
  pointer-events: none;
  /* overflow: hidden이면 스크롤바 폭만큼 백드롭이 넓어져서 줄바꿈 지점이 어긋난다.
     같은 overflow-y: auto로 두면 둘 다 같은 스크롤바를 갖고 같은 폭으로 접힌다.
     textarea가 위에 있어 백드롭 스크롤바는 안 보인다. */
  overflow-y: auto;
}
.backdrop, #input { scrollbar-gutter: stable; }
#input {
  background: transparent;
  color: var(--ink);
  caret-color: var(--accent);
  resize: none;
  outline: none;
}
#input::placeholder { color: var(--muted); font-style: italic; }

.backdrop mark {
  color: transparent;
  background: transparent;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.backdrop mark.hygiene  { background: color-mix(in srgb, var(--hygiene) 35%, transparent); outline: 1px solid var(--hygiene); }
.backdrop mark.template { background: color-mix(in srgb, var(--template) 22%, transparent); }
.backdrop mark.lexicon  { background: color-mix(in srgb, var(--lexicon) 22%, transparent); }
.backdrop mark.hedge    { background: color-mix(in srgb, var(--hedge) 22%, transparent); }
.backdrop mark.rhythm   { border-bottom: 2px dotted var(--rhythm); }   /* underline only — stacks with a background kind */
.backdrop mark.concrete { background: color-mix(in srgb, var(--concrete) 20%, transparent); }
.backdrop mark.active   { outline: 2px solid var(--ink); }

.editor-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.hint { color: var(--muted); }
.btn {
  font: inherit; cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--hygiene);
  color: var(--hygiene);
  background: transparent;
  border-radius: 4px;
}
.btn:hover { background: color-mix(in srgb, var(--hygiene) 12%, transparent); }
.btn:disabled, .sel:disabled { opacity: 0.35; cursor: not-allowed; filter: none; }

/* ── 패널 ── */
.panel {
  border-left: 1px solid var(--line);
  padding: 18px 20px;
  overflow-y: auto;
  background: var(--bg);
}
.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.count { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.count .n { font-family: var(--serif); font-size: 34px; line-height: 1; }
.count .l { color: var(--muted); margin-top: 6px; font-size: 12px; }
.count.bad .n { color: var(--lexicon); }
.count.good .n { color: var(--concrete); }

.block { margin-bottom: 20px; }
.block-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 8px;
}
.block-title .sub { text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--ink); }
.spark { width: 100%; height: 60px; display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.spark rect { fill: var(--rhythm); opacity: 0.55; }
.spark rect.flat { fill: var(--template); opacity: 0.9; }
.spark line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.statline { display: flex; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.statline b { color: var(--ink); font-weight: 600; }

.why { padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; }
.why-kind { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.why-text { font-size: 13px; }

.markers { list-style: none; margin: 0; padding: 0; }
.markers li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 8px; margin: 0 -8px;
  border-radius: 4px; cursor: pointer;
  font-size: 13px;
}
.markers li:hover, .markers li.active { background: var(--paper); }
.markers .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; top: -1px; }
.markers .dot.hygiene  { background: var(--hygiene); }
.markers .dot.template { background: var(--template); }
.markers .dot.lexicon  { background: var(--lexicon); }
.markers .dot.hedge    { background: var(--hedge); }
.markers .dot.rhythm   { background: var(--rhythm); }
.markers .dot.concrete { background: var(--concrete); }
.markers .lbl { color: var(--muted); flex: none; min-width: 84px; font-size: 12px; }
.markers .txt { font-family: var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.markers .empty { color: var(--muted); cursor: default; }
.markers .empty:hover { background: transparent; }

/* ── 키 팝업: 첫 입력 때 한 번. 맞든 틀리든 아무 말 없이 닫힌다. ── */
.modal { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal[hidden] { display: none; }   /* display:flex 가 UA 의 [hidden]{display:none} 을 이긴다 — 명시해야 hidden 이 먹는다 */
.modal-box { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; width: min(360px, 90vw); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-title { font-family: var(--serif); font-size: 18px; }
.modal-sub { color: var(--muted); font-size: 12px; margin: 4px 0 12px; }
.modal-input { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); box-sizing: border-box; }
.modal-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ── human error 모드: 주 기능. 버튼 그룹 + 바뀐 자리 표시 ── */
.human { display: flex; align-items: center; gap: 8px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); background: var(--accent); }
.btn.ghost { border-color: var(--line); color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--paper); }
.sel { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); }
.editor-foot { flex-wrap: wrap; }
:root { --change: #b8860b; }
@media (prefers-color-scheme: dark) { :root { --change: #e0b04a; } }
.backdrop mark.change { background: color-mix(in srgb, var(--change) 32%, transparent); outline: 1px solid var(--change); }
.markers .dot.change  { background: var(--change); }

/* ── confusable: 키보드 문자와 눈으로 구분 안 되는 닮은꼴. 물결 밑줄 — 보이는 차이가 없으니 표시가 눈에 띄어야 한다. ── */
:root { --confusable: #a0457f; }
@media (prefers-color-scheme: dark) { :root { --confusable: #d98cc0; } }
.backdrop mark.confusable { background: color-mix(in srgb, var(--confusable) 30%, transparent); text-decoration: underline wavy var(--confusable); text-decoration-skip-ink: none; }
.markers .dot.confusable  { background: var(--confusable); }
.btn.conf { border-color: var(--confusable); color: var(--confusable); }
.btn.conf:hover { background: color-mix(in srgb, var(--confusable) 12%, transparent); }

/* ── input: 1차 입력 집합 밖의 문자. 위생 다음으로 강한 구조 신호. ── */
:root { --input: #3f6f8f; }
@media (prefers-color-scheme: dark) { :root { --input: #6fa3c7; } }
.backdrop mark.input { background: color-mix(in srgb, var(--input) 28%, transparent); outline: 1px dashed var(--input); }
.markers .dot.input  { background: var(--input); }

/* ── 후원 링크. 뷰포트 우하단 고정 — 패널 위에 뜨므로 패널 하단에 여백을 줘서
      마지막 마커가 가리지 않게 한다. 색은 전부 토큰이라 9개 테마를 그대로 따라간다. ── */
.coffee {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;   /* 없으면 고정 배치의 shrink-to-fit 폭이 좁게 잡혀 세 줄로 접힌다 */
  color: var(--muted);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.coffee:hover { color: var(--ink); border-color: var(--accent); }
.coffee svg { width: 13px; height: 13px; flex: none; }
.panel { padding-bottom: 56px; }

/* 좁은 화면은 페이지 전체가 스크롤되므로 고정해두면 계속 본문을 덮는다. 문서 끝 오른쪽으로 흘린다.
   이 블록은 위의 .coffee 기본 규칙보다 뒤에 있어야 한다 — 같은 특이도라 순서가 이긴다. */
@media (max-width: 900px) {
  .coffee { position: static; display: flex; width: max-content; margin: 4px 20px 18px auto; }
  .panel { padding-bottom: 18px; }
}

/* ══ 클래식 스킨 — 2006년 apple.com 오마주. 기본값이다. ═══════════════════════
   흰 바탕, 가운데 940px 컬럼, 실버 그라디언트 탭바, 파란 히어로 밴드, Aqua 알약 버튼.
   색 스와치를 누르면 data-skin="modern" 으로 넘어가 현행 디자인이 된다.
   data-theme 은 classic 에서 JS가 지우므로 토큰 충돌이 없다. */
:root[data-skin="classic"] {
  color-scheme: light;
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #111111;
  --muted: #666666;
  --line: #b5b5b5;
  --accent: #1d4f9e;
  --hygiene:#cc2222; --template:#c9791b; --lexicon:#b5461f; --hedge:#8a7a2c;
  --rhythm:#6b6b6b; --concrete:#2f7d4f;
  --input:#3f6f8f; --confusable:#a0457f; --change:#b8860b;
  --sans: "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
[data-skin="classic"] body { background: #fff; font-size: 12px; }

/* ── 탭바 + 히어로 밴드 ── */
[data-skin="classic"] .top {
  flex-wrap: wrap; align-items: flex-end; gap: 8px;
  padding: 8px 20px 0;
  background: linear-gradient(#f4f4f4, #cdcdcd);
  border-bottom: 1px solid #8a8a8a;
}
[data-skin="classic"] .brand {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0;
  padding: 6px 20px; position: relative; top: 1px;
  background: linear-gradient(#ffffff, #ededed);
  border: 1px solid #8a8a8a; border-bottom: 0;
  border-radius: 9px 9px 0 0;
}
[data-skin="classic"] .mascot { height: 30px; margin: 0 0 2px 4px; }
[data-skin="classic"] .themes { margin-left: auto; align-self: center; padding-bottom: 7px; }
[data-skin="classic"] .engine {
  margin-left: 12px; align-self: center; padding-bottom: 7px;
  font-size: 10px; color: #555;
}
/* order+flex-basis 로 태그라인만 둘째 줄로 내리고, .top 의 좌우 패딩을 음수 마진으로 상쇄해 꽉 채운다 */
[data-skin="classic"] .tag {
  /* flex-basis:100% 는 콘텐츠 폭(패딩 뺀 값)으로 확정돼 음수 마진이 폭을 못 늘린다.
     좌우 패딩 40px 을 basis 에 직접 더해야 화면을 꽉 채운다. */
  order: 10; flex: 0 0 calc(100% + 40px);
  margin: 6px -20px 0; padding: 26px 20px;
  text-align: center; font-size: 21px; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  background: linear-gradient(180deg, #7fb2ee 0%, #4382d4 45%, #2a63b4 55%, #1b4a94 100%);
  border-top: 1px solid #8a8a8a;
}

/* ── 가운데 정렬 본문 ── */
[data-skin="classic"] .layout {
  max-width: 940px; margin: 0 auto; height: auto;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px; padding: 22px 20px 44px;
}

/* ── 에디터: 테두리 있는 흰 상자 + 하단 툴바 ── */
[data-skin="classic"] .editor-wrap {
  min-height: 360px; background: #fff;
  border: 1px solid #b5b5b5; border-radius: 6px 6px 0 0; overflow: hidden;
}
[data-skin="classic"] .backdrop, [data-skin="classic"] #input { padding: 18px 20px; font-size: 15px; }
[data-skin="classic"] .editor-foot {
  background: linear-gradient(#fbfbfb, #e9e9e9);
  border: 1px solid #b5b5b5; border-top: 0; border-radius: 0 0 6px 6px;
  padding: 9px 14px;
}

/* ── Aqua 버튼 ── */
[data-skin="classic"] .btn {
  border-radius: 14px; padding: 4px 14px; font-size: 12px;
  color: #1a1a1a; border: 1px solid #9a9a9a;
  background: linear-gradient(#ffffff 0%, #f1f1f1 47%, #e1e1e1 53%, #f5f5f5 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.12);
}
[data-skin="classic"] .btn:hover { background: linear-gradient(#fff, #e6e6e6); }
[data-skin="classic"] .btn.primary {
  color: #fff; border-color: #2a5f9e;
  background: linear-gradient(#9fcdf7 0%, #5896e0 47%, #2f6fc4 53%, #6aa9ec 100%);
  text-shadow: 0 -1px 0 rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.25);
}
[data-skin="classic"] .btn.primary:hover { filter: brightness(1.06); }
[data-skin="classic"] .btn.ghost { color: #333; }
[data-skin="classic"] .sel {
  border-radius: 12px; border: 1px solid #9a9a9a; padding: 3px 8px;
  background: linear-gradient(#fff, #ececec);
}

/* ── 패널: 테두리 카드들 ── */
[data-skin="classic"] .panel { background: transparent; border-left: 0; padding: 0; overflow: visible; }
[data-skin="classic"] .count {
  border: 1px solid #b5b5b5; border-radius: 6px;
  background: linear-gradient(#ffffff, #f2f2f2);
  box-shadow: inset 0 1px 0 #fff;
}
[data-skin="classic"] .count .n { font-family: var(--sans); font-weight: 300; }
[data-skin="classic"] .block {
  border: 1px solid #b5b5b5; border-radius: 6px; background: #fff;
  padding: 0 0 12px; overflow: hidden;
}
[data-skin="classic"] .block-title {
  margin: 0 0 10px; padding: 6px 12px;
  font-size: 11px; color: #333;
  background: linear-gradient(#f4f4f4, #dedede);
  border-bottom: 1px solid #c5c5c5;
}
[data-skin="classic"] .spark { width: auto; margin: 0 12px; }
[data-skin="classic"] .statline { margin: 8px 12px 0; }
[data-skin="classic"] .markers { padding: 0 12px; }
/* .why 는 .block 이기도 하다 — 위 .block 의 padding:0 을 특이도로 되돌린다 */
[data-skin="classic"] .block.why { padding: 12px 14px; border-left: 3px solid var(--accent); }

/* ── 스킨 스와치: 유리구슬 하나. 색 스와치들 왼쪽에 선다. ── */
.themes button.skin {
  background: linear-gradient(180deg, #ffffff 0%, #a9d1f5 42%, #3f7fd0 58%, #1d4f9e 100%);
}

/* ── 그 밖 ── */
[data-skin="classic"] .modal-box { background: #fff; border-radius: 8px; }
[data-skin="classic"] .modal-title { font-family: var(--sans); font-size: 15px; }
[data-skin="classic"] .coffee {
  color: #333; border: 1px solid #9a9a9a;
  background: linear-gradient(#fff, #ebebeb);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.15);
}
@media (max-width: 900px) {
  /* 이 블록은 위의 classic .layout 규칙보다 뒤에 있어야 1단으로 접힌다 — 같은 특이도, 순서가 이긴다. */
  [data-skin="classic"] .layout { grid-template-columns: 1fr; padding: 16px 14px 30px; }
  [data-skin="classic"] .tag { font-size: 17px; padding: 20px 16px; }
  [data-skin="classic"] .editor-wrap { min-height: 260px; }
}

/* ══ 탭 메뉴 + 하단 색상 푸터 ════════════════════════════════════════════
   Text-Deslop 만 살아 있고 나머지는 "Hold up! Coming soon!" 을 띄운다. */
.tabs { display: flex; align-items: flex-end; gap: 0; position: relative; }
.tab { font: inherit; cursor: pointer; }

/* 토스트: .tabs 기준 절대배치라 탭 바로 아래 가운데에 뜬다. 레이아웃을 밀지 않는다. */
.soon {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(4px);
  margin-top: 12px; padding: 7px 16px; z-index: 30;
  white-space: nowrap; font-size: 13px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden;
  transition: opacity .14s, transform .14s, visibility .14s;
}
.soon.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.foot { display: flex; justify-content: center; padding: 20px 16px 26px; border-top: 1px solid var(--line); }
.foot .themes { margin-left: 0; }

/* ── 클래식: 2006년 탭 바 ── */
/* gap 은 row-gap 도 겸해서 탭과 파란 밴드 사이를 벌린다. 0 이어야 딱 붙는다. */
[data-skin="classic"] .top { position: relative; justify-content: center; padding: 10px 20px 0; gap: 0; }
/* 마스코트와 엔진 줄을 흐름에서 빼야 탭이 화면 정중앙에 온다. 오토 마진으로는
   좌우 폭이 달라 가운데가 안 맞는다. */
[data-skin="classic"] .mascot { position: absolute; left: 18px; bottom: 6px; height: 52px; margin: 0; }
[data-skin="classic"] .engine { position: absolute; right: 20px; bottom: 10px; margin: 0; padding: 0; }
[data-skin="classic"] .tag { margin-top: 0; }   /* 탭 아랫변이 파란 밴드에 딱 붙는다 */

[data-skin="classic"] .brand,
[data-skin="classic"] .tabs .tab {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: #1a1a1a;
  padding: 6px 15px; position: relative; top: 1px;
  border: 1px solid #8a8a8a; border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(#f0f0f0, #cfcfcf);
  margin-left: -1px;   /* 테두리 한 줄을 공유해 딱 붙는다 */
}
[data-skin="classic"] .brand { margin-left: 0; }
[data-skin="classic"] .tabs .tab:hover { background: linear-gradient(#f8f8f8, #dcdcdc); }
/* 활성 탭은 밝고 한 겹 위에 있다 */
[data-skin="classic"] .brand {
  background: linear-gradient(#ffffff, #ededed);
  padding: 8px 20px; z-index: 2;
}
[data-skin="classic"] .soon {
  background: linear-gradient(#ffffff, #eeeeee);
  border-color: #8a8a8a; border-radius: 14px;
  font-size: 12px; padding: 7px 18px;
}
[data-skin="classic"] .foot {
  border-top: 1px solid #c9c9c9;
  background: linear-gradient(#fbfbfb, #ededed);
}

/* ── 모던: 담백한 텍스트 탭 한 줄 ── */
[data-skin="modern"] .tabs { gap: 2px; align-items: baseline; }
[data-skin="modern"] .tabs .tab {
  background: transparent; border: 0; border-radius: 4px;
  color: var(--muted); font-size: 13px; padding: 4px 8px;
}
[data-skin="modern"] .tabs .tab:hover { color: var(--ink); background: var(--paper); }
[data-skin="modern"] .engine { margin-left: auto; }

@media (max-width: 900px) {
  .tabs { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  [data-skin="classic"] .top { padding: 10px 12px 0; }
  [data-skin="classic"] .mascot { position: static; height: 40px; margin: 0 0 6px; }
  [data-skin="classic"] .engine { position: static; margin: 6px 0 8px; }
  [data-skin="classic"] .brand, [data-skin="classic"] .tabs .tab { font-size: 11px; padding: 5px 9px; }
  [data-skin="classic"] .brand { padding: 6px 11px; }
  .soon { font-size: 12px; }
}

/* 내용이 짧아도 푸터가 화면 중간에 떠 있지 않게 — 클래식은 세로로 흐르는 페이지다. */
[data-skin="classic"] body { min-height: 100%; height: auto; display: flex; flex-direction: column; }
[data-skin="classic"] .layout { flex: 1 0 auto; }
[data-skin="classic"] .foot { flex: none; }

/* 모던도 세로 플렉스로 — .layout 의 height: calc(100% - 52px) 은 "헤더는 52px, 푸터는 없다"는
   가정이라 탭 줄과 하단 색상 푸터가 생긴 지금은 본문이 잘린다. 높이를 재지 말고 남는 만큼 채운다. */
[data-skin="modern"] body { height: 100%; display: flex; flex-direction: column; }
[data-skin="modern"] .layout { height: auto; flex: 1 1 auto; min-height: 0; }
[data-skin="modern"] .foot { flex: none; }
[data-skin="modern"] .top { align-items: center; flex-wrap: wrap; gap: 10px 12px; }
[data-skin="modern"] .tabs { flex-wrap: nowrap; }
[data-skin="modern"] .brand, [data-skin="modern"] .tabs .tab { white-space: nowrap; }
[data-skin="modern"] .brand { margin-right: 4px; }
[data-skin="modern"] .mascot { margin: -8px 0 -8px -6px; }

/* 히어로 밴드의 풀블리드는 헤더 좌우 패딩과 정확히 같아야 한다. 두 값을 따로 적으면
   브레이크포인트마다 어긋나므로(모바일에서 8px 씩 삐져나왔다) 변수 하나에서 뽑는다. */
[data-skin="classic"] .top { --pad: 20px; padding: 10px var(--pad) 0; }
[data-skin="classic"] .tag { flex: 0 0 calc(100% + var(--pad) * 2); margin: 0 calc(var(--pad) * -1); }
@media (max-width: 900px) {
  [data-skin="classic"] .top { --pad: 12px; }
}

@media (max-width: 900px) {
  /* 좁은 화면에선 마스코트·엔진 줄이 흐름으로 돌아온다. 순서를 올려두지 않으면
     탭과 파란 밴드 사이에 끼어서 "딱 붙는" 모양이 깨진다. */
  [data-skin="classic"] .mascot { order: -2; }
  [data-skin="classic"] .engine { order: -1; flex-basis: 100%; text-align: center; margin: 4px 0 8px; }
}

/* ── 마스코트를 히어로 밴드 안, 글자 바로 옆으로 ──────────────────────────
   .tag 를 플렉스 컨테이너로 만들어 [로고][Deslopication] 을 한 덩어리로 가운데 정렬한다.
   앞의 absolute 배치와 모바일 order/margin 규칙을 여기서 전부 되돌린다. */
[data-skin="classic"] .tag {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 26px;
}
[data-skin="classic"] .mascot {
  position: static; order: 0;
  height: 58px; width: auto; margin: 0;
  flex: none;
}
[data-skin="modern"] .tag { display: inline-flex; align-items: center; gap: 8px; }
[data-skin="modern"] .mascot { margin: -8px 0; }
@media (max-width: 900px) {
  [data-skin="classic"] .tag { font-size: 20px; gap: 9px; }
  [data-skin="classic"] .mascot { height: 44px; margin: 0; }
}