/* 디자인 체계 v4 "강의장의 빨간 정장"(docs/DESIGN_SYSTEM_v4.md, 2026-10-10) — 섬 UI 덧칠 층.
   3D 월드(섬·건물·바다·마스코트)는 그대로 두고, 그 위 UI만 먹(ink)·흰 종이·빨강 한두 곳으로 정리한다.
   index.html에서 모든 css 다음에 불러온다. 토큰은 world.css :root(--v4-*). 글자·id·class·aria는 바꾸지 않는다.
   - 주 버튼: 먹 바탕+흰 글자 / 보조: 1px 먹 테두리 / 선택·진행·도장·할인 숫자: 빨강
   - 반경: 버튼·입력 10px, 패널·카드 16px, 사진 12px, 칩만 알약
   - 그림자: 떠 있는 것(HUD·패널·대화창)만 --v4-float 하나
   - 제목: Noto Serif KR 700(자체 호스팅, ../assets/fonts/serif.css), UI 이름표: Pretendard 700/800 */

:root {
  --div-plaza: #5A6878;
  --div-public: #2C6E66;
  --div-corp: #34589A;
  --div-ai: #5B4D95;
  --div-life: #8A5D24;
  --v4-field: #C5CED9;       /* 입력 테두리(흰 바탕 대비 확보) */
  --v4-track: #E3E8EE;       /* 진행 막대 바탕 */
  --v4-ink-hover: #26364C;
}

/* ── 공통: 초점 고리(3px 먹 + 흰 띠) ── */
:focus-visible,
.fj-course:focus-visible, .fj-choices button:focus-visible, .fj-scene button:focus-visible, .fj-textlink:focus-visible, .fj-next-grid button:focus-visible,
.talent-programs button:focus-visible, .tp-group > summary:focus-visible, .tp-dialog button:focus-visible, .tp-detail-more summary:focus-visible,
.cp-missions button:focus-visible, .gfx-badge button:focus-visible, .snd-btn:focus-visible, .snd button:focus-visible, .snd input:focus-visible {
  outline: 3px solid var(--v4-ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff;
}
.npc-choice:focus-visible { outline: 3px solid var(--v4-ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; transform: none; }
/* 스크립트가 옮겨 주는 초점(tabindex=-1: 패널·대화 문장·안내 상자)에는 고리를 그리지 않는다(이전 동작 유지) */
[tabindex="-1"]:focus-visible, .npc-say:focus-visible { outline: none; box-shadow: none; }
.panel:focus-visible { box-shadow: var(--v4-float); }
.map2d .pin:focus-visible { outline: none; box-shadow: none; }
.map2d .pin:focus-visible circle { stroke: var(--v4-ink); stroke-width: .5; }
.inquiry input:focus-visible, .inquiry select:focus-visible, .inquiry textarea:focus-visible,
.coupon-form-grid input:focus-visible, .coupon-form-grid select:focus-visible, #fj-search:focus-visible, .rm-num input:focus-visible, .npc-input:focus-visible {
  outline: 3px solid var(--v4-ink); outline-offset: 2px; box-shadow: 0 0 0 2px #fff;
}

body { color: var(--v4-ink); }
a { color: var(--v4-ink); }

/* ── 로딩 ── */
.loader { background: var(--v4-mist); }
.loader-line { font-family: var(--body); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--v4-ink); }
.loader-bar { height: 4px; width: 200px; border-radius: 999px; background: var(--v4-track); box-shadow: none; }
.loader-bar span { background: var(--v4-red); }

/* ── 상단 HUD ── */
.brand, .stampcard, .ghost-btn {
  background: rgba(255, 255, 255, .96); border: 1px solid var(--v4-line); box-shadow: var(--v4-float);
}
.brand { border-radius: 999px; padding: 6px 16px 6px 10px; }
.brand b { font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--v4-ink); }
.brand small { color: var(--v4-muted); font-weight: 600; }
.stampcard { border-radius: 999px; padding: 6px 16px; gap: 12px; color: var(--v4-ink); }
.stampcard-title { color: var(--v4-ink-2); font-weight: 600; }
.stampcard-title b { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--v4-red); letter-spacing: -.02em; }
.stamps { gap: 5px; }
.stamp { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #B9C3CF; background: #fff; }
.stamp.on { border: 0; background: var(--v4-red); }
.stamp.on::after { font-size: 11px; font-weight: 800; }
.ghost-btn { border-radius: 10px; padding: 9px 14px; color: var(--v4-ink); font-weight: 700; }
.ghost-btn:hover { background: #fff; border-color: var(--v4-ink); }
.cta {
  background: var(--v4-ink); color: #fff; border: 1px solid var(--v4-ink); border-radius: 10px;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em; padding: 11px 20px; box-shadow: var(--v4-float);
}
.cta:hover { background: var(--v4-ink-hover); }

/* ── 첫 화면 안내 카드 ── */
.intro {
  background: #fff; border: 1px solid var(--v4-line); border-radius: 16px; box-shadow: var(--v4-float);
  padding: 26px 26px 22px 18px;
}
.intro h2 {
  font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1.38; letter-spacing: -.02em; color: var(--v4-ink);
  margin: 0 0 12px; padding-top: 14px; position: relative;
}
.intro h2::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 3px; background: var(--v4-red); }
.intro h2 em, .intro h2 .v4-red { font-style: normal; color: var(--v4-red); }
.intro-areas { color: var(--v4-ink-2); font-weight: 700; }
.intro-trust { color: var(--v4-ink); font-weight: 600; }
.intro-trust .linkbtn, .linkbtn { color: var(--v4-ink); text-decoration-color: #9AA6B4; }
.intro-link { color: var(--v4-muted); }
.intro .btn-main { padding-inline: 22px; }

/* ── 두런이 말풍선·진입 버튼·알림 ── */
.guide-bubble {
  font-family: var(--body); font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--v4-ink);
  background: #fff; border: 1px solid var(--v4-line); border-radius: 12px 12px 12px 4px; box-shadow: var(--v4-float);
}
.guide-bubble::before { border-right-color: #fff; }
.enter-prompt { background: var(--v4-ink); border-radius: 10px; box-shadow: var(--v4-float); font-weight: 700; }
.toast { border-radius: 12px; border: 1px solid var(--v4-line); background: #fff; color: var(--v4-ink); box-shadow: var(--v4-float); }
.toast b { color: var(--v4-red); }
.toast button { background: var(--v4-ink); color: #fff; border-radius: 10px; }

/* ── 아래 바로가기 ── */
.dock { background: rgba(255, 255, 255, .97); border: 1px solid var(--v4-line); border-radius: 16px; box-shadow: var(--v4-float); padding: 5px; }
.dock button { border-radius: 10px; font-weight: 600; color: var(--v4-ink); }
.dock button:hover { background: var(--v4-mist); }
.dock button[aria-current="true"] { background: var(--v4-mist); color: var(--v4-ink); font-weight: 800; box-shadow: inset 0 -2px 0 var(--v4-red); }
.dock .dock-desk { background: transparent; color: var(--v4-red); font-weight: 800; }
.dock .dock-desk:hover { background: var(--v4-red-soft); }
.dot { width: 8px; height: 8px; background: var(--div-plaza); }
.dot-lobby, .dot-consult { background: var(--div-plaza); }
.dot-public { background: var(--div-public); } .dot-corp { background: var(--div-corp); }
.dot-ai { background: var(--div-ai); } .dot-life { background: var(--div-life); }
.dot-desk { background: var(--v4-red); }
.dot.done { background: var(--v4-red); box-shadow: 0 0 0 3px var(--v4-red-soft); }

.minimap { border-radius: 16px; border: 1px solid var(--v4-line); background: rgba(255, 255, 255, .96); box-shadow: var(--v4-float); }

/* ── 존 패널 ── */
.panel, .funnel-ready .panel {
  background: #fff; border: 1px solid var(--v4-line); border-radius: 16px; box-shadow: var(--v4-float);
}
.panel-head { border-bottom-color: var(--v4-line); }
.panel-place, .funnel-ready .panel-place { font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--v4-ink-2); letter-spacing: 0; }
.panel-close, .kit-close {
  background: #fff; border: 1px solid var(--v4-line); border-radius: 10px; color: var(--v4-ink); font-weight: 700;
}
.panel-close:hover, .kit-close:hover { border-color: var(--v4-ink); }
.fj-panel-tools button { color: var(--v4-ink-2); border-radius: 8px; }
.fj-panel-tools button:hover { background: var(--v4-mist); }
.fj-panel-tools span { color: var(--v4-ink); font-weight: 800; }

/* 제목: h1·h2·큰 숫자 = 명조 700, h3 이하 = Pretendard 800 */
.zone h1, .zone h2, .zone .fj-title, .fj-lobby h1, .fj-dialog h2, .tp-dialog h2, .kit h2, .mode-help h2, #funnel-entry h2 {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; color: var(--v4-ink);
}
.zone .fj-title { line-height: 1.42; }
.zone h3, .zone .fj-discovery h3, .zone .tp-catalog h3, .zone .tp-discover h3 { font-family: var(--body); font-weight: 800; color: var(--v4-ink); letter-spacing: -.02em; }
.zone .lead, .funnel-ready .has-funnel > .lead { color: var(--v4-ink-2); }
.zone .note { color: var(--v4-muted); }
.fj-eyebrow, .tp-eyebrow { color: var(--v4-muted); letter-spacing: .08em; font-weight: 800; }

.badges li, .badges li:nth-child(2) { border-radius: 999px; background: var(--v4-mist); color: var(--v4-ink-2); font-weight: 600; }
.instructor img, .talent-lead img { border-radius: 12px; }
.howto li, .axes li { background: var(--v4-mist); border-radius: 10px; }

/* ── 버튼 ── */
.btn {
  border: 1px solid var(--v4-ink); background: #fff; color: var(--v4-ink); border-radius: 10px;
  font-weight: 700; letter-spacing: -.01em; min-height: 44px;
}
.btn:hover { border-color: var(--v4-ink); background: var(--v4-mist); }
.btn-main, .fj-lobby > .btn-main, .fj-course-actions .btn-main, #coupon-to-classic, .coupon-application > button {
  background: var(--v4-ink); border-color: var(--v4-ink); color: #fff;
}
.btn-main:hover, .fj-lobby > .btn-main:hover, #coupon-to-classic:hover, .coupon-application > button:hover { background: var(--v4-ink-hover); border-color: var(--v4-ink-hover); }

/* ── 강의실 카드 ── */
.video button, .video button .vcard { --tone: #EEF1F5 !important; }
.video button { border-radius: 12px; }
.vcard { background: var(--v4-mist); color: var(--v4-ink); }
.vcard-topic { background: #fff; color: var(--v4-ink-2); border: 1px solid var(--v4-line); }
.vcard-title { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; color: var(--v4-ink); }
.vcard-meta { color: var(--v4-ink-2); }
.vcard-play { background: var(--v4-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") center/15px no-repeat; }
.video .v-band { background: rgba(255, 255, 255, .97); }
.video .v-band::before { background: var(--v4-red); }
.video img, .video iframe, .press img, .sc-photo img, .fj-lobby-photo img { border-radius: 12px; }

.callout { background: var(--v4-mist); border-radius: 12px; }
.callout h3 { color: var(--v4-ink); }

/* ── 진단소 ── */
.tabs { background: var(--v4-mist); border-radius: 12px; }
.tabs [role="tab"] { border-radius: 9px; color: var(--v4-ink-2); }
.tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--v4-ink); box-shadow: 0 0 0 1px var(--v4-line), inset 0 -2px 0 var(--v4-red); }
.diag label, .rm-options label { border: 1px solid var(--v4-line); border-radius: 10px; background: #fff; }
.diag label:has(input:checked), .rm-options label:has(input:checked) { border-color: var(--v4-red); background: #fff; box-shadow: inset 0 0 0 1px var(--v4-red); }
.diag input, .rm-options input { accent-color: var(--v4-red); }
.diag-result { background: var(--v4-mist); border-radius: 12px; }
.diag-summary { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; }
.rule li { border-radius: 10px; border-left: 3px solid var(--v4-ink); }
.rule li[data-kind="권장"] { border-left-color: #A3AEBB; }
.rule li[data-kind="확인 필요"] { border-left-color: #A68A3E; }
.rule li[data-kind="노력의무"], .rule li[data-kind="해당 시 의무"] { border-left-color: #6E7F94; }
.rule .tag, .rm-item .tag { border-radius: 999px; background: var(--v4-mist); color: var(--v4-ink); }
.rule details summary, .rm-item details summary { color: var(--v4-ink); }
.ox .ox-btns button { font-family: var(--body); font-weight: 800; font-size: 18px; border: 1px solid var(--v4-line); border-radius: 10px; }
.ox .ox-btns button:hover { border-color: var(--v4-ink); }

/* ── 자료·강의 목록 ── */
.dl a, .dl.is-pending { background: var(--v4-mist); border: 1px solid transparent; border-radius: 10px; }
.dl a:hover { border-color: var(--v4-ink); }
.kit-box { background: var(--v4-mist); border-radius: 12px; }
.kit-box h3 { color: var(--v4-ink); }
.course-group h4 { color: var(--v4-ink); }
.course-group li, .division-courses li, .sc-points li, .custom-steps li, .custom-examples li, .diff-cards > li:not(.diff-card), .rm-q { background: var(--v4-mist); border-radius: 10px; }
.custom-examples b { color: var(--v4-ink); }
.custom-steps .cs-no { background: var(--v4-ink); border-radius: 8px; }
.talent-more > summary, .coupon-bonus summary, .more-fields summary { color: var(--v4-ink); }

/* ── 부문(4색은 지도·점에서 부문 구분용으로만, 채도 낮춤) ── */
.zone-division { --div: var(--div-plaza); --div-ink: var(--v4-ink); }
.zone-division[data-division="public"] { --div: var(--div-public); --div-ink: var(--div-public); }
.zone-division[data-division="corp"] { --div: var(--div-corp); --div-ink: var(--div-corp); }
.zone-division[data-division="ai"] { --div: var(--div-ai); --div-ink: var(--div-ai); }
.zone-division[data-division="life"] { --div: var(--div-life); --div-ink: var(--div-life); }
.divisions button, .division-links button, #funnel-entry .divisions li button { border: 1px solid var(--v4-line); border-radius: 12px; }
.divisions button:hover, .division-links button:hover { border-color: var(--v4-ink); box-shadow: none; transform: none; }
.track { border-radius: 12px; }
.division-courses li em, .sc-course em, .rm-item em, .cross li em { border-radius: 999px; background: #fff; color: var(--v4-ink-2); }

/* ── 후기 키워드 칩 ── */
.voice-kw-list a, .voice-kw-list span,
.voice-kw-list li:nth-child(n) a, .voice-kw-list li:nth-child(n) span {
  background: #fff; border: 1px solid var(--v4-line); border-radius: 999px; color: var(--v4-ink);
}
.voice-kw-list a:hover { transform: none; box-shadow: none; border-color: var(--v4-ink); }
.voice-kw-list button { border-radius: 999px; border-color: var(--v4-line); color: var(--v4-ink); }
.voice-kw-list button[aria-pressed=true] { background: var(--v4-ink); border-color: var(--v4-ink); color: #fff; }

/* ── 상담·섭외 폼 ── */
.ai-notice { background: var(--v4-mist); color: var(--v4-ink-2); border-radius: 10px; }
.chips button { border: 1px solid var(--v4-line); border-radius: 999px; background: #fff; color: var(--v4-ink); font-weight: 600; }
.chips button:hover { border-color: var(--v4-ink); }
.chat-fallback { background: var(--v4-mist); border-radius: 12px; }
.inquiry input, .inquiry select, .inquiry textarea, .coupon-form-grid input, .coupon-form-grid select, #fj-search, .rm-num input {
  border: 1px solid var(--v4-field); border-radius: 10px; background: #fff; color: var(--v4-ink);
}
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus, .rm-num input:focus { border-color: var(--v4-ink); }
.inquiry [aria-invalid="true"] { border-color: var(--v4-red); }
.inquiry .consent input, .coupon-consent input { accent-color: var(--v4-ink); }
.more-fields { border: 1px solid var(--v4-line); border-radius: 12px; }
.form-status[data-state="error"], .rm-error { color: var(--v4-red); }
.form-live-flag { background: var(--v4-red-soft); color: #8E1820; border-radius: 10px; }

/* ── 쿠폰 진행 막대(존 패널·쿠폰 카드) ── */
.coupon-progress { background: #fff; border: 1px solid var(--v4-line); border-radius: 12px; }
.cp-head b { color: var(--v4-red); }
.cp-head span { color: var(--v4-ink-2); }
.cp-seg, .sh-bar { background: var(--v4-track); }
.cp-bar { height: 6px; }
.cp-seg i, .sh-bar > i { background: var(--v4-red); }
.cp-steps li.done { color: var(--v4-red); }
.cp-missions li { border: 1px solid var(--v4-line); border-radius: 10px; }
.cp-missions button { color: var(--v4-ink); border-radius: 10px; }
.cp-missions button > span { color: var(--v4-muted); }
.cp-missions small { color: var(--v4-muted); }
.cp-missions .done { background: var(--v4-mist); border-color: var(--v4-line); }
.cp-missions .done button > span { color: var(--v4-red); font-weight: 800; }
.cp-policy { color: var(--v4-muted); }
.cp-number code { color: var(--v4-ink); }

/* 쿠폰 카드 안에서는 빨강을 숫자(10%)와 진행 막대에만: 머리 글자·체크는 먹 */
.kit.coupon .cp-head b, .kit.coupon .cp-missions .done button > span { color: var(--v4-ink); }

/* 도장 조건 한 줄 */
.stamp-hint { background: var(--v4-mist); border-radius: 10px; color: var(--v4-ink); }
.stamp-hint b, .stamp-hint small { color: var(--v4-ink); }
.talent-lead small { color: var(--v4-ink-2); }

/* ── 달라요 카드 ── */
.diff-card { background: var(--v4-mist); border: 1px solid transparent; border-radius: 12px; }
.diff-card.is-open { background: #fff; border-color: var(--v4-line); }
.diff-head { border-radius: 12px; }
.diff-no { border-radius: 8px; background: #fff; color: var(--v4-ink); border: 1px solid var(--v4-line); }
.diff-card.is-open .diff-no { background: var(--v4-red); color: #fff; border-color: var(--v4-red); }
.diff-choices button, .talent-filter button { border: 1px solid var(--v4-line); border-radius: 10px; }
.diff-choices button[aria-pressed="true"], .talent-filter button[aria-pressed="true"] {
  border-color: var(--v4-red); background: #fff; color: var(--v4-red); box-shadow: inset 0 0 0 1px var(--v4-red);
}
.diff-reveal p { border: 1px solid var(--v4-line); border-radius: 10px; }

/* ── 강사 인재풀·로드맵 ── */
.talent-ai { background: var(--v4-mist); color: var(--v4-ink); border-radius: 10px; }
.t-item { background: var(--v4-mist); border: 1px solid transparent; border-radius: 12px; }
.t-item.is-open { background: #fff; border-color: var(--v4-line); }
.t-tags i { border-radius: 999px; }
.rm-step legend { font-weight: 800; }
.rm-item { border-radius: 8px; }
.rm-item[data-level="course"] .tag { background: var(--v4-red-soft); color: #9A1B25; }
.rm-check, .cross { background: var(--v4-mist); border-radius: 12px; }
.cross .tag { background: #fff; color: var(--v4-red); }

/* ── 자료 탐색 레이어(funnel.css) ── */
.fj-choices > button, .fj-course, .fj-resource, .fj-scene, .fj-notes, .tp-discover, .tp-group, .fj-review { border-radius: 12px; }
.fj-choices > button:hover, .fj-choices > button[aria-pressed=true] { border-color: var(--v4-ink); background: var(--v4-mist); }
.fj-scene, .fj-audience, .fj-video-next, .fj-notes { background: var(--v4-mist); }
.fj-scene button { border-radius: 10px; border-color: var(--v4-line); color: var(--v4-ink); }
.fj-scene button[aria-pressed=true] { background: var(--v4-ink); border-color: var(--v4-ink); }
.fj-proof { background: var(--v4-ink); border-radius: 12px; }
.fj-library-tabs button, .fj-pages button { border-radius: 10px; border-color: var(--v4-line); color: var(--v4-ink-2); }
.fj-library-tabs button[aria-selected=true] { background: var(--v4-ink); border-color: var(--v4-ink); color: #fff; }
.fj-insight, .fj-video-next { border-left-color: var(--v4-red); }
.fj-textlink, .fj-course-link, .tp-actions button { color: var(--v4-ink); }
.fj-review { background: var(--v4-mist); }
.fj-lobby-photo img { background: var(--v4-mist); }
.tp-discover { background: var(--v4-mist); }
.tp-discover button, .tp-main-action { background: var(--v4-ink); border-radius: 10px; }
.tp-group { background: #fff; }
.tp-state-note { border-left-color: var(--v4-red); background: var(--v4-mist); }

/* ── 대화창(모달) ── */
dialog, .fj-dialog, .tp-dialog {
  border: 1px solid var(--v4-line); border-radius: 16px; background: #fff; box-shadow: var(--v4-float); color: var(--v4-ink);
}
dialog::backdrop, .fj-dialog::backdrop, .tp-dialog::backdrop { background: rgba(23, 35, 52, .45); backdrop-filter: blur(3px); }
.fj-dialog-close, .tp-dialog-head button { background: var(--v4-mist); color: var(--v4-ink); }
.kit-list a { background: var(--v4-mist); border-radius: 10px; color: var(--v4-ink); }

/* ── 쿠폰 카드: 고급 교환권(흰 카드·명조 빨강 10%·가는 절취선) ── */
.kit.coupon { padding: 26px 24px 20px; }
.kit.coupon > img { width: 84px; }
.kit.coupon h2 { font-size: 22px; line-height: 1.4; margin: 6px 0 14px; }
.coupon-ticket {
  position: relative; margin: 6px 0 8px; padding: 22px 22px 18px;
  background: #fff; border: 1px solid var(--v4-line); border-radius: 16px;
}
/* 교환권 머리의 짧은 먹 띠(모서리 곡선을 따라 휘지 않게 곧게) */
.coupon-ticket::before { content: ""; position: absolute; top: -1px; left: 50%; width: 56px; margin-left: -28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--v4-ink); }
.coupon-pct {
  margin: 0 0 14px; font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; color: var(--v4-red); letter-spacing: -.02em;
}
.coupon-pct b { font-family: var(--serif); font-weight: 700; font-size: 68px; color: var(--v4-red); letter-spacing: -.04em; }
.coupon-code {
  position: relative; margin: 0 -22px 12px; padding: 16px 22px 0; border-top: 1px dashed #B9C3CF;
}
/* 절취선 양 끝의 반원 홈 */
.coupon-code::before, .coupon-code::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 1px solid var(--v4-line);
}
.coupon-code::before { left: -11px; clip-path: inset(0 0 0 50%); }
.coupon-code::after { right: -11px; clip-path: inset(0 50% 0 0); }
.coupon-code code {
  font-family: var(--body); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  background: var(--v4-mist); border: 1px solid var(--v4-line); border-radius: 10px; color: var(--v4-ink);
}
.coupon-copy { background: var(--v4-ink); color: #fff; border-radius: 10px; min-height: 44px; padding: 8px 16px; }
.coupon-copy:hover:not(:disabled) { background: var(--v4-ink-hover); }
.coupon-valid { color: var(--v4-ink); }
.coupon-terms { color: var(--v4-muted); }
.kit.coupon.is-expired .coupon-ticket::before { background: var(--v4-line); }
.coupon-bonus { border-top-color: var(--v4-line); }

/* 쿠폰 신청 폼 */
.coupon-application { background: var(--v4-mist); border: 1px solid var(--v4-line); border-radius: 16px; }
.coupon-form-intro { color: var(--v4-ink); }
.coupon-form-grid label, .coupon-consent { color: var(--v4-ink); }
.coupon-consent-details, .coupon-application-status { color: var(--v4-ink-2); }

/* ── 2D 지도 ── */
.map2d .pin text, .map2d-label { font-family: var(--body); font-weight: 700; letter-spacing: -.02em; color: var(--v4-ink); }

/* ── 동물 친구(npc.css) — 크림·파스텔·입체 버튼 대신 흰 종이·먹 ── */
:root {
  --npc-cream: #fff; --npc-ink: var(--v4-ink); --npc-sub: var(--v4-ink-2);
  --npc-lemon: var(--v4-mist); --npc-mint: var(--v4-mist); --npc-peach: var(--v4-red);
  --npc-edge: var(--v4-line); --npc-shadow: var(--v4-float);
}
.npc-tag { border: 1px solid var(--v4-line); border-radius: 12px; background: #fff; }
.npc-tag b { font-family: var(--body); font-weight: 800; font-size: 15px; }
.npc-tag-cta { font-family: var(--body); font-weight: 700; font-size: 13px; background: var(--v4-ink); color: #fff; box-shadow: none; }
.npc-tag-cta kbd { color: var(--v4-ink); }
.npc-tag-emote, .npc-emote:not(:empty) { font-family: var(--body); font-weight: 800; border: 1px solid var(--v4-line); }
.npc-box {
  background: #fff; border: 1px solid var(--v4-line); border-radius: 16px; box-shadow: var(--v4-float);
}
.npc-box.is-crisis { box-shadow: 0 0 0 1px var(--v4-red), var(--v4-float); }
.npc-face { border: 1px solid var(--v4-line); border-radius: 12px; box-shadow: var(--v4-float); }
.npc-nametag b {
  font-family: var(--body); font-weight: 800; font-size: 19px; letter-spacing: -.02em; transform: none;
  background: #fff; border: 1px solid var(--v4-line); border-radius: 999px; box-shadow: inset 4px 0 0 var(--npc-color), var(--v4-float);
  padding: 7px 16px 6px 18px;
}
.npc-badge { background: var(--v4-ink); }
.npc-card { border: 1px solid var(--v4-line); border-radius: 12px; }
.npc-card-tag { background: var(--v4-mist); color: var(--v4-ink); }
.npc-btn { background: var(--v4-ink); color: #fff; border-radius: 10px; box-shadow: none; font-weight: 700; }
.npc-prog-bar { background: var(--v4-track); }
.npc-prog-bar i { background: var(--v4-red); }
.npc-input { border: 1px solid var(--v4-field); border-radius: 10px; }
.npc-input:focus { border-color: var(--v4-ink); box-shadow: none; }
.npc-send { font-family: var(--body); font-weight: 700; font-size: 15px; background: var(--v4-ink); color: #fff; border-radius: 10px; box-shadow: none; }
.npc-choice {
  font-family: var(--body); font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  border: 1px solid var(--v4-line); border-radius: 10px; box-shadow: none; background: #fff; color: var(--v4-ink);
}
.npc-choice:hover { transform: none; box-shadow: none; border-color: var(--v4-ink); }
.npc-choice kbd { background: var(--v4-mist); color: var(--v4-ink-2); }
.npc-choice.is-main { background: var(--v4-ink); border-color: var(--v4-ink); color: #fff; box-shadow: none; }
.npc-choice.is-main kbd { background: rgba(255, 255, 255, .16); color: #fff; }
.npc-x { border-radius: 10px; }
.npc-x:hover { background: var(--v4-mist); }
.npc-chip-next, .npc-dock-people { border: 1px solid var(--v4-line); background: #fff; }
.npc-chip-next { border-radius: 14px; }
.npc-chip-next img { border-radius: 10px; }
.npc-dock-duron { background: #fff; box-shadow: var(--v4-float), 0 0 0 3px #fff, 0 0 0 4px var(--v4-line); }
.npc-dock-label { font-family: var(--body); font-weight: 700; font-size: 14px; background: var(--v4-ink); border-radius: 10px; }
.npc-dir { border: 1px solid var(--v4-line); border-radius: 16px; box-shadow: var(--v4-float); }
.npc-dir header { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.npc-dir header b { font-weight: 700; }
.npc-dir li button { border-radius: 10px; }
.npc-dir li i, .npc-hint i { border-radius: 10px; }
.npc-dir li b { font-family: var(--body); font-weight: 800; font-size: 16px; }
.npc-hint button { border: 1px solid var(--v4-line); border-radius: 12px; background: #fff; box-shadow: inset 3px 0 0 var(--npc-color); }
.npc-hint-go { font-family: var(--body); font-weight: 700; font-size: 13px; background: var(--v4-ink); color: #fff; border-radius: 999px; box-shadow: none; }

/* ── 상담 병아리 위젯(shared/chick-agent, Shadow DOM 토큰을 바깥에서 덮는다) ── */
#chick-agent {
  --ca-cream: #fff; --ca-cream-2: var(--v4-mist); --ca-white: #fff;
  --ca-ink: var(--v4-ink); --ca-body: var(--v4-ink-2); --ca-muted: var(--v4-muted);
  --ca-line: var(--v4-line); --ca-line-2: #CBD3DD;
  --ca-yellow: var(--v4-line); --ca-yellow-soft: var(--v4-mist);
  --ca-orange: var(--v4-ink); --ca-orange-hover: var(--v4-ink-hover); --ca-orange-text: var(--v4-ink);
  --ca-focus: var(--v4-ink);
  --ca-shadow: var(--v4-float);
}

/* ── 텍스트 모드 ── */
body.mode-text { background: var(--v4-mist); }
body.mode-text .hud { background: rgba(239, 242, 246, .96); }
body.mode-text .panel { border: 1px solid var(--v4-line); }

/* ── 반응형 ── */
@media (min-width: 761px) and (max-width: 1024px) {
  .cta { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 760px) {
  .brand { border-radius: 999px; padding: 0 10px 0 8px; }
  .stampcard { border-radius: 999px; padding: 0 12px; }
  .stampcard-title b { font-size: 18px; }
  .cta { border-radius: 10px; padding: 0 14px; font-size: 14px; }
  .ghost-btn { border-radius: 10px; }
  .dock { border-radius: 14px; }
  .dock button[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--v4-red); }
  .intro { border-radius: 16px; padding: 18px 16px 16px 12px; }
  .intro h2 { font-size: 21px; padding-top: 12px; margin-bottom: 8px; }
  .panel { border-radius: 16px 16px 0 0; border-bottom: 0; }
  .npc-box { border-radius: 16px 16px 0 0; }
  .npc-nametag b { font-size: 17px; }
  .npc-choice { font-size: 15px; }
  .kit.coupon { padding: 20px 16px 16px; }
  .coupon-ticket { padding: 18px 16px 14px; }
  .coupon-code { margin-inline: -16px; padding-inline: 16px; }
  .coupon-pct b { font-size: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp.on { animation: none; }
}