/* 첫기타 — 스타일 v6 (Claude Design 리디자인: 악기점의 온기 · 가로 실선 · 번호 · 다크 패널)
   원칙: 한 화면에 한 가지 · 강조색 채움 버튼은 헤더의 '첫 기타 추천' 하나(.btn-solid) · 검색은 헤더 한 곳 · 숫자 자랑 카드 없음 */
:root {
  /* 종이 3단 */
  --paper: #F8F4ED;          /* 페이지 배경 */
  --paper-raised: #FFFDF9;   /* 카드·섹션 */
  --paper-sunk: #F3EDE2;     /* 요약·표 머리 */
  --paper-tint: #FBF6EF;     /* 강조 카드·선택 */
  --line: #E4DACB;
  --line-strong: #DDD2C2;
  --line-input: #C8B9A3;
  /* 잉크 */
  --ink: #241C14;            /* 제목 */
  --ink-body: #3A2F24;       /* 본문 11.2:1 */
  --ink-muted: #5C5043;      /* 보조 6.3:1 */
  --ink-caption: #6F604F;    /* 캡션 5.1:1 */
  --ink-faint: #83705A;      /* 장식(캐럿) */
  /* 강조 — 테라코타 */
  --accent: #A8401B;         /* 흰 글씨 5.9:1, 종이 위 글씨 5.6:1 */
  --accent-hover: #7E2E12;
  --on-accent: #FFF9F4;      /* 강조색 채움 위 글씨 */
  --accent-tint: #F3E3D8;
  --neutral-tint: #EFE9DE;
  /* 상태 (밝은 배경용) */
  --ok: #2A722E;
  --ok-soft: #E8F3E9;
  --warn: #B42318;
  --warn-soft: #FBEAE7;
  /* 다크 패널 — 도구·총예산·파트너 같은 '기계적인 자리'에만 */
  --dark: #241C14;
  --dark-deep: #1B150F;
  --dark-line: #3D3023;
  --dark-text: #FAF7F1;
  --dark-body: #CFC3B4;
  --dark-caption: #9A8876;
  --dark-accent: #C79A7B;
  --dark-accent-text: #F5E3D6;
  --dark-ok: #7CB08E;
  --dark-warn: #E4913C;

  /* 이전 이름 — HTML 인라인 스타일과 스크립트가 참조한다 */
  --bg: var(--paper);
  --surface: var(--paper-raised);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --accent-dark: var(--accent);
  --accent-darker: var(--accent-hover);
  --accent-soft: var(--accent-tint);

  --radius: 14px;
  --shadow: 0 24px 60px -30px rgba(36, 28, 20, .38);
  /* 누르는 카드(홈 선택 카드 · 도구 카드) 그림자. 딱딱한 턱 대신 얕게 번지는 그림자로 — 3px 턱 + 60px 번짐은 너무 깊었다 */
  --card-rest: 0 1px 2px rgba(36, 28, 20, .05), 0 4px 14px -8px rgba(36, 28, 20, .14);
  --card-lift: 0 2px 4px rgba(36, 28, 20, .05), 0 12px 26px -14px rgba(36, 28, 20, .24);
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw - 4px, 40px);   /* 480px 이하 20 → 880px 이상 40. 분기점 없이 이어진다 */
  --measure: 38em;                          /* 읽는 글의 줄 길이 상한 (한글 약 40자) */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
@media (max-width: 960px) { html { scroll-padding-top: 76px; } }
body { margin: 0; font-family: var(--font); font-size: clamp(16px, 15.4px + .16vw, 17px); line-height: 1.7; color: var(--ink-body); background: var(--paper); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
::selection { background: #EBCDB9; color: var(--ink); }
.dark ::selection, .site-footer ::selection, .tool-card ::selection, .next ::selection, .banner-cta ::selection, .r-total ::selection, .sample-note ::selection { background: #6B4A36; color: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.3; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(30px, 22px + 2.05vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
h2 { font-size: clamp(25px, 20px + 1.25vw, 36px); font-weight: 700; letter-spacing: -.025em; }
h3 { font-size: clamp(18px, 16px + .4vw, 21px); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; color: var(--ink); }
small, .small { font-size: .9375rem; color: var(--ink-muted); }
code { font-family: var(--mono); background: var(--neutral-tint); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
mark { background: var(--accent-tint); color: var(--accent-hover); padding: 0 2px; border-radius: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input, button, select, textarea { font-family: inherit; }
a, button, summary, label, select, input, textarea { touch-action: manipulation; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(820px + var(--gutter) * 2); }

/* 섹션 라벨 — "02 — 악기별로 시작하기" */
.label, .eyebrow { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .14em; line-height: 1.4; color: var(--accent); margin-bottom: 10px; }
.label.plain, .eyebrow.plain { color: var(--ink-caption); }

/* ── 접근성 보조 ─────────────────────────── */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.totop { position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink); font-size: 1.1rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.totop.show { opacity: 1; pointer-events: auto; }

/* ── 헤더: 한 줄 (로고 · 메뉴 · 검색 · 버튼 하나) ── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(248, 244, 237, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; flex: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand .mark { width: 36px; height: 36px; display: block; flex: none; }
.brand .word { display: flex; flex-direction: column; gap: 3px; }
.brand .word b { font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.brand .word small { font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .18em; color: var(--ink-caption); }
.navbar { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.nav { display: flex; gap: 4px; list-style: none; margin: 0 0 0 8px; padding: 0; }
.nav > li { position: relative; margin: 0; }
.nav a { display: block; padding: 12px; border-radius: 8px; color: var(--ink-body); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--neutral-tint); }
.nav > li > a.active, .nav .has-sub.active-parent > a { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav .sub { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; list-style: none; margin: 6px 0 0; z-index: 60; }
.nav .sub a { padding: 12px; font-weight: 500; }
.nav .sub a.active { color: var(--accent); font-weight: 700; }
.nav > li:hover > .sub, .nav > li:focus-within > .sub { display: block; }
.nav .has-sub > a::after { content: ' ▾'; font-size: 11px; color: var(--ink-faint); }
.site-search { margin-left: auto; width: 248px; }
.site-search input { width: 100%; height: 44px; font: inherit; font-size: 15px; padding: 0 14px 0 36px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236F604F' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center; color: var(--ink); }
.site-search input::placeholder { color: var(--ink-caption); }
.site-search input { text-overflow: ellipsis; }
.site-search input:focus { outline: none; border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.top-cta { flex: none; display: flex; gap: 6px; align-items: center; }
.design-switch { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.design-switch:hover { color: var(--ink); background: var(--neutral-tint); }
.icon-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--ink-body); padding: 0; }
.icon-btn:hover { background: var(--neutral-tint); }
.icon-btn .lens { width: 15px; height: 15px; border: 1.8px solid currentColor; border-radius: 50%; position: relative; }
.icon-btn .lens::after { content: ''; position: absolute; width: 6px; height: 1.8px; background: currentColor; right: -5px; bottom: -3px; transform: rotate(45deg); }
.icon-btn .bars, .icon-btn .bars::before, .icon-btn .bars::after { width: 18px; height: 1.8px; background: currentColor; position: relative; display: block; transition: transform .2s; }
.icon-btn .bars::before, .icon-btn .bars::after { content: ''; position: absolute; left: 0; }
.icon-btn .bars::before { top: -6px; }
.icon-btn .bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.navbar .drawer-cta { display: none; }
@media (min-width: 1121px) { .nav a { font-size: 16px; } }
@media (max-width: 1120px) { .site-search { width: 210px; } .nav a { padding: 12px 9px; } .site-header .container { gap: 18px; } }
@media (max-width: 960px) {
  .site-header .container { height: 60px; gap: 10px; }
  .brand .mark { width: 32px; height: 32px; }
  .brand .word b { font-size: 15px; }
  .brand .word small { font-size: 8px; letter-spacing: .16em; }
  .icon-btn { display: inline-flex; }
  .top-cta { margin-left: auto; }
  .top-cta .btn { display: none; }
  .navbar { display: none; position: absolute; left: 0; right: 0; top: 60px; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px var(--gutter) 28px; flex-direction: column; align-items: stretch; gap: 8px; }
  .navbar.open { display: flex; }
  /* 서랍을 열면 주행동이 맨 위 — 스크롤해야 보이면 주행동이 아니다 */
  .navbar .drawer-cta { display: flex; order: -2; min-height: 52px; font-size: 17px; }
  .site-search { order: -1; width: 100%; margin: 0 0 6px; }
  .site-search input { height: 48px; font-size: 16px; }
  .nav { flex-direction: column; gap: 0; margin: 0; }
  .nav > li { border-bottom: 1px solid var(--line); }
  .nav > li:last-child { border-bottom: 0; }
  .nav a { display: flex; align-items: center; min-height: 52px; padding: 0 2px; font-size: 17px; border-radius: 0; }
  .nav a:hover { background: none; }
  .nav > li > a.active, .nav .has-sub.active-parent > a { box-shadow: none; color: var(--accent); }
  .nav .sub { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 8px 14px; margin: 0; background: transparent; min-width: 0; }
  .nav .sub a { min-height: 44px; font-size: 16px; color: var(--ink-muted); }
  .nav .has-sub > a { pointer-events: none; color: var(--ink-caption); font-size: 13px; letter-spacing: .1em; min-height: 40px; }
  .nav .has-sub > a::after { content: ''; }
}

/* ── 버튼 ─────────────────────────────────
   .btn-solid : 강조색 채움. 헤더(와 서랍)의 '첫 기타 추천' 전용 — 화면에 하나.
   .btn-primary : 강조 선 버튼. 본문의 주된 다음 걸음.
   .btn-ghost : 중립 선 버튼. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; border: 1.5px solid transparent; cursor: pointer; text-align: center; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { text-decoration: none; }
.btn-sm { min-height: 46px; padding: 0 20px; font-size: 15px; }
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-solid:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-primary { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-primary:hover { background: var(--paper-tint); color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-body); font-weight: 600; }
.btn-ghost:hover { background: var(--paper-raised); border-color: var(--line-input); color: var(--ink); }
.btn:disabled { background: var(--neutral-tint); border-color: var(--neutral-tint); color: var(--ink-faint); cursor: not-allowed; }
.btn.on { background: var(--dark-warn); border-color: var(--dark-warn); color: var(--dark); }
.btn:active { transform: translateY(1px); }
.btn-block { display: flex; width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 16px; color: var(--accent); }

/* 다크 패널 위 */
.dark { background: var(--dark); color: var(--dark-body); }
.dark h2, .dark h3, .dark h4, .dark strong { color: var(--dark-text); }
.dark .label { color: var(--dark-accent); }
.dark a:not(.btn) { color: var(--dark-accent-text); }
.dark .btn-primary, .dark .btn-ghost { border: 1.5px solid var(--dark-accent); color: var(--dark-accent-text); background: transparent; }
.dark .btn-primary:hover, .dark .btn-ghost:hover { background: rgba(245, 227, 214, .08); color: #fff; }
.dark .small, .dark small { color: var(--dark-caption); }

/* ── 홈 첫 화면: 질문 하나 + 선택 3개 ── */
.hero.home { padding: clamp(28px, 4.6vw, 44px) 0 clamp(40px, 7.5vw, 72px); background: linear-gradient(180deg, #FAF7F1, var(--paper)); }
.hero.home .intro { max-width: 780px; margin-bottom: clamp(30px, 4.2vw, 40px); }
.hero.home .label { color: var(--ink-caption); margin-bottom: 14px; }
.hero.home h1 { font-size: clamp(36px, 5.6vw, 62px); line-height: 1.18; letter-spacing: -.035em; margin: 0 0 20px; }
.hero.home .lead { font-size: clamp(17px, 15px + .5vw, 21px); color: var(--ink-muted); margin: 0; max-width: var(--measure); }
.choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
/* 카드 '안에' 버튼이 있으면 그 버튼만 눌리는 것처럼 읽힌다 → 카드 자체가 버튼이다(2026-09-19 사용자 요청).
   눌리는 물건의 단서: 아래쪽 두께(3px 턱) · 둥근 화살표 · hover 때 올라오고 · 누르면 내려간다. 안쪽의 상자 버튼은 없고, 가는 곳은 아래 줄의 글자로만 적는다 */
.choice { display: flex; flex-direction: column; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; color: var(--ink); box-shadow: var(--card-rest); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease; }
.choice:hover { color: var(--ink); }
.choice .cph { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--paper-sunk); }
.choice .cph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.choice .txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 24px 0; flex: 1; }
.choice .num { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--accent); }
.choice .q { display: block; font-size: clamp(21px, 1.9vw, 25px); font-weight: 800; letter-spacing: -.025em; line-height: 1.32; text-wrap: balance; }
.choice .d { display: block; margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-muted); }
.choice .go { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding: 12px 16px 12px 24px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.choice .go::after { content: '→'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--accent); font-size: 18px; line-height: 1; transition: transform .16s ease, background-color .16s ease, color .16s ease; }
@media (hover: hover) {
  .choice:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--card-lift); }
  .choice:hover .cph img { transform: scale(1.04); }
  .choice:hover .go { color: var(--accent-hover); }
  .choice:hover .go::after { transform: translateX(3px); background: var(--accent); color: var(--on-accent); }
}
/* 세 장이 나란히 서려면 한 장이 15em 은 돼야 한다 → 960 이하는 한 줄에 한 장, 사진은 왼쪽 */
@media (max-width: 960px) {
  .choice-list { grid-template-columns: minmax(0, 1fr); }
  .choice { display: grid; grid-template-columns: clamp(190px, 34vw, 300px) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .choice .cph { grid-row: 1 / -1; aspect-ratio: auto; min-height: 100%; }
  .choice .txt { padding: 20px 22px 0; }
  .choice .go { margin: 16px 0 0; padding: 10px 14px 10px 22px; }
}
@media (min-width: 961px) { .hero.home h1 br { display: none; } .hero.home .intro { max-width: none; } }
/* 노트북(1366x768 · 1280x720)에서도 질문과 카드 세 장의 버튼까지 첫 화면에 들어오게 */
@media (min-width: 961px) and (max-height: 800px) { .hero.home { padding-top: 28px; } .hero.home .intro { margin-bottom: 26px; } .hero.home h1 { margin-bottom: 14px; } .choice .txt { padding-top: 18px; gap: 6px; } .choice .go { margin-top: 14px; padding-top: 10px; padding-bottom: 10px; } }
/* 약속 네 가지: 흐린 구분점(·)을 넓게 띄우면 항목이 흩어져 보이고, 항목 안의 가운뎃점과 섞여 몇 개인지 헷갈린다 → 항목마다 체크 표시, 구분점 없음 */
.trust { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.trust span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.trust span::before { content: ''; flex: none; width: 11px; height: 6px; margin-top: -4px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 600px) {
  .hero.home .label { font-size: 13px; letter-spacing: .12em; margin-bottom: 14px; }
  .choice { grid-template-columns: clamp(108px, 31vw, 150px) minmax(0, 1fr); border-radius: 14px; }
  /* 좁은 화면에서 사진이 카드 높이만큼 늘어나면 가로 16:9 사진이 세로 띠처럼 잘린다
     → 사진은 글 칸 높이까지만, 아래 턱은 카드 전체 폭으로 내린다 */
  .choice .cph { grid-row: 1; min-height: 0; }
  /* 가르는 선은 사진을 가로지르지 않고 글 칸에서만 — 카드 아래가 두꺼운 줄 하나로 보이지 않게 */
  .choice .txt { padding: 16px 16px 14px 14px; gap: 6px; border-bottom: 1px solid var(--line); }
  .choice .num { font-size: 12px; }
  .choice .q { font-size: 19px; }
  .choice .d { font-size: 15px; line-height: 1.6; }
  .choice .go { grid-column: 1 / -1; margin: 0; padding: 9px 14px 9px 16px; font-size: 14px; border-top: 0; }
  .choice .go::after { width: 34px; height: 34px; font-size: 16px; }
  .trust { gap: 8px 20px; font-size: 14px; margin-top: 24px; }
}
.continue { background: var(--paper-tint); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 12px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
[data-set-stage].active { background: var(--ok-soft); border-color: #BFDCC2; color: var(--ok); }

/* ── 섹션 ─────────────────────────────── */
.section { padding: clamp(44px, 9vw, 88px) 0; }
.section.tight { padding: clamp(40px, 6.5vw, 80px) 0; }
.section.alt { background: var(--paper-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.alt + .section:not(.alt), .section + .section.alt { border-top: 1px solid var(--line); }
.section.dark { background: var(--dark); border: 0; padding: clamp(40px, 8vw, 80px) 0; }
.section-head { margin-bottom: clamp(22px, 3.4vw, 40px); }
.section-head h2 { margin: 0; }
.section-head p { color: var(--ink-muted); max-width: 680px; margin: 14px 0 0; }
.section-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 20px; flex-wrap: wrap; }
.section-head .more, .more { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .section-head .label { font-size: 13px; letter-spacing: .12em; } }

/* ── 내부 페이지 머리 ─────────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 500; color: var(--ink-caption); padding-top: 9px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; color: var(--ink-caption); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: #B3A695; }
.page-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(16px, 2.4vw, 28px); }
.page-hero h1 { max-width: 880px; }
.page-hero .lead { font-size: clamp(17px, 15.5px + .36vw, 20px); line-height: 1.75; color: var(--ink-muted); max-width: 760px; margin: 16px 0 0; }
.page-hero .notice { margin-top: 20px; }
.banner { border-radius: 14px; overflow: hidden; aspect-ratio: 21/8; margin: 28px 0 8px; border: 1px solid var(--line-strong); }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.hero-search { display: flex; gap: 8px; margin: 16px 0 12px; }
.hero-search input { flex: 1; font: inherit; font-size: 17px; height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised); color: var(--ink); min-width: 0; }
.hero-search input:focus { outline: none; border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.popular { font-size: 15px; color: var(--ink-muted); }
.popular a { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 6px 0 0; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-raised); color: var(--ink-body); }

/* ── 그리드 · 카드 ────────────────────── */
.grid { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
a.card { color: inherit; }
a.card:hover { border-color: var(--line-input); transform: translateY(-2px); color: inherit; }
.card-img { aspect-ratio: 1; background: var(--paper-sunk); }
.card-img.wide { aspect-ratio: 16/10; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: clamp(20px, 2.4vw, 30px); flex: 1; }
.card-body h3 { margin-bottom: 10px; }
.card-body p { color: var(--ink-muted); font-size: 16px; margin-bottom: 0; }
.card-body .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.card.accent { background: var(--paper-tint); border-left: 3px solid var(--accent); }
.card.dark { background: var(--dark); border-color: var(--dark); }
.card.dark .card-body p { color: var(--dark-body); }

.tag { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: .03em; line-height: 1; padding: 6px 8px; border-radius: 5px; background: var(--accent-tint); color: var(--accent-hover); white-space: nowrap; }
.tag.gray { background: var(--neutral-tint); color: #4B4036; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.sample { background: var(--neutral-tint); color: var(--ink-muted); border: 1px solid #E0D6C6; letter-spacing: .08em; }
.feed .card-body .cat { display: flex; gap: 6px; margin-bottom: 10px; }
.feed .card-body .date { font-size: 14px; font-weight: 500; color: var(--ink-caption); margin-top: 12px; }
.inst-card .card-body h3 small { display: block; font-weight: 500; color: var(--ink-caption); font-size: 14px; margin-top: 2px; }
.inst-card ul { margin: 12px 0 0; padding-left: 1.1em; font-size: 16px; color: var(--ink-muted); }
.inst-card .links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pillar .num { display: inline-flex; font-size: 16px; font-weight: 800; color: var(--accent); margin-bottom: 10px; }
.pillar ul { margin: 8px 0 0; padding-left: 1.1em; font-size: 16px; }
.pillar ul a { color: var(--ink-body); }

/* ── 안내 상자 ────────────────────────── */
.callout { background: var(--paper-tint); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); padding: 22px 26px; border-radius: 12px; margin: 20px 0; color: var(--ink-body); }
.callout.ok { border-left-color: var(--ok); background: var(--ok-soft); border-color: #CFE3D2; }
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); border-color: #F0D2CC; }
.callout p:last-child { margin-bottom: 0; }
.notice { position: relative; font-size: 15px; line-height: 1.75; color: var(--ink-muted); background: var(--paper-sunk); padding: 20px 24px 20px 60px; border-radius: 12px; }
.notice::before { content: 'i'; position: absolute; left: 24px; top: 22px; width: 22px; height: 22px; border-radius: 50%; background: #E0CDB8; color: var(--ink-muted); font-weight: 700; font-size: 13px; line-height: 22px; text-align: center; margin-top: 1px; }
.summary { background: var(--paper-sunk); border-radius: 14px; padding: 28px 30px; margin: 28px 0; }
.summary > b { display: block; font-size: 14px; letter-spacing: .1em; color: var(--accent-hover); margin-bottom: 12px; }
.next { margin-top: 44px; padding: 26px 28px; background: var(--dark); border-radius: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px 20px; flex-wrap: wrap; color: var(--dark-body); }
.next strong { font-size: 21px; line-height: 1.35; color: var(--dark-text); }
.next .small { color: var(--dark-body); }
.next .btn-primary, .next .btn-ghost { border: 1.5px solid var(--dark-accent); color: var(--dark-accent-text); background: transparent; }
.next .btn-primary:hover, .next .btn-ghost:hover { background: rgba(245, 227, 214, .08); color: #fff; }
.next a:not(.btn) { color: var(--dark-accent-text); }
.banner-cta { background: var(--dark); color: var(--dark-body); border-radius: 14px; padding: 34px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.banner-cta h3 { color: var(--dark-text); margin-bottom: 6px; font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -.02em; }
.banner-cta p { color: var(--dark-body); margin: 0; }
.banner-cta .btn-primary, .banner-cta .btn-ghost { border: 1.5px solid var(--dark-accent); color: var(--dark-accent-text); background: transparent; }
.banner-cta .btn-primary:hover, .banner-cta .btn-ghost:hover { background: rgba(245, 227, 214, .08); color: #fff; }
.newsletter { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 14px; padding: 26px 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; }
.newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter input { flex: 1; font: inherit; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised); min-width: 180px; color: var(--ink); }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .next { padding: 22px 20px; } .next strong { font-size: 19px; } .next .btn { width: 100%; } }

/* ── 홈: 악기별 시작 (3:4 사진 + 아래 글) ── */
.inst-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.inst-tile { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.inst-tile:hover { color: var(--ink); }
.inst-tile .ph { aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper-sunk); }
.inst-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.inst-tile:hover img { transform: scale(1.03); }
.inst-tile .lbl { display: flex; flex-direction: column; gap: 5px; font-weight: 700; line-height: 1.3; }
.inst-tile .lbl small { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ink-muted); }
/* 760 이하는 세로 사진 두 장씩, 글은 사진 아래 (2026-09-19 사용자 요청으로 되돌림: 601~760 에서 사진을 왼쪽으로 눕혔던 배치는 쓰지 않는다) */
@media (max-width: 760px) { .inst-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .inst-tile { gap: 12px; } .inst-tile .lbl { gap: 2px; } }
@media (max-width: 600px) { .inst-tile .ph { border-radius: 10px; } .inst-tile .lbl small { font-size: 14px; } }

/* ── 홈: 추천 예시 + 지금 쓰는 도구 ── */
/* 2026-09-19 재설계(사용자 요청: "이쪽 디자인도 더 멋지게"). 왼쪽은 추천 결과 화면의 축소판(답 네 개 → 타입 사진 + 다크 총예산 패널),
   오른쪽은 사진이 든 도구 카드 두 장. 머리글 줄과 상자 줄을 같은 격자에 올려 데모 상자와 도구 카드의 위·아래가 맞는다 */
.demo-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 3.4vw, 48px); }
.demo-wrap .section-head { grid-area: 1 / 1; margin-bottom: 24px; }
.demo-wrap .tools-label { grid-area: 1 / 2; align-self: end; margin-bottom: 24px; }
.demo-box { grid-area: 2 / 1; display: flex; flex-direction: column; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
/* 답 네 개: 고른 선택지처럼(체크 + 굵은 답), 사이는 꺾쇠로 잇는다 */
.demo-q { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; background: var(--paper-tint); border-bottom: 1px solid var(--line); }
.demo-q li { position: relative; margin: 0; padding: 16px 10px 16px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.demo-q li + li::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--line-input); border-right: 1.5px solid var(--line-input); transform: translate(-50%, -50%) rotate(45deg); }
.demo-q .k { font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; color: var(--accent); white-space: nowrap; }
.demo-q b { display: flex; align-items: baseline; gap: 7px; font-size: 16px; line-height: 1.35; color: var(--ink); }
.demo-q b::before { content: ''; flex: none; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-4px) rotate(-45deg); }
/* 결과: 왼쪽 타입 사진 + 이름, 오른쪽 다크 총예산 패널(추천 결과의 .r-total 과 같은 모양) */
.demo-out { flex: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 20px; padding: 20px; }
.demo-pick { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.demo-pick .ph { position: relative; display: block; flex: 1; min-height: 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--paper-sunk); }
.demo-pick .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-pick .txt { display: flex; flex-direction: column; gap: 5px; padding: 0 2px 2px; }
.demo-pick .eyebrow { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--ink-caption); }
.demo-pick .txt b { font-size: clamp(20px, 1.75vw, 23px); font-weight: 800; letter-spacing: -.025em; line-height: 1.3; color: var(--ink); }
.demo-pick .txt small { font-size: 15px; color: var(--ink-muted); }
.demo-total { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 12px; background: var(--dark); color: var(--dark-body); font-variant-numeric: tabular-nums; }
.demo-total ::selection { background: #6B4A36; color: #fff; }
.demo-total .label { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--dark-accent); }
.demo-total .sum { font-size: clamp(28px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--dark-text); white-space: nowrap; }
.demo-total ul { list-style: none; margin: 2px 0 0; padding: 0; }
.demo-total li { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; border-top: 1px solid var(--dark-line); font-size: 15px; line-height: 1.45; }
.demo-total li b { color: var(--dark-text); font-weight: 600; white-space: nowrap; }
.demo-total .btn { margin-top: auto; border-color: var(--dark-accent); color: var(--dark-accent-text); padding: 0 16px; }
.demo-total .btn:hover { background: rgba(245, 227, 214, .08); border-color: var(--dark-accent-text); color: #fff; }
/* 도구 카드: 홈 선택 카드(.choice)와 같은 규칙 — 카드 자체가 버튼(아래 턱 · 둥근 화살표 · hover 때 올라옴). 사진은 도구 페이지의 3D 물건과 같은 것 */
.tool-links { grid-area: 2 / 2; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
.tool-link { display: grid; grid-template-columns: minmax(140px, 42%) minmax(0, 1fr); grid-template-rows: 1fr auto; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; color: var(--ink); box-shadow: var(--card-rest); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease; }
.tool-link:hover { color: var(--ink); }
.tool-link .tph { grid-row: 1 / -1; position: relative; display: block; min-height: 100%; overflow: hidden; background: var(--dark); }
.tool-link .tph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tool-link .txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 22px 0; }
.tool-link b { display: block; font-size: clamp(21px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.025em; line-height: 1.3; }
.tool-link small { display: block; font-size: 15px; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; }
.tool-link .go { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 10px 14px 10px 22px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.tool-link .go::after { content: '→'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--accent); font-size: 18px; line-height: 1; transition: transform .16s ease, background-color .16s ease, color .16s ease; }
@media (hover: hover) {
  .tool-link:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--card-lift); }
  .tool-link:hover .tph img { transform: scale(1.04); }
  .tool-link:hover .go { color: var(--accent-hover); }
  .tool-link:hover .go::after { transform: translateX(3px); background: var(--accent); color: var(--on-accent); }
}
/* 1120 이하에서는 두 덩이가 나란히 서면 다크 총예산 패널이 15em 아래로 좁아진다 → 데모가 위, 도구 두 장이 아래에 나란히 */
@media (max-width: 1120px) {
  .demo-wrap { display: block; }
  .demo-wrap .tools-label { display: block; margin: 36px 0 14px; }
  .tool-links { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .tool-links { gap: 14px; }
  /* 두 장이 나란히 서면 한 장이 좁다(글 칸 15em 미만) → 사진은 위, 글은 아래 */
  .tool-link { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .tool-link .tph { grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) { .demo-out { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .demo-box { border-radius: 14px; }
  .demo-q { grid-template-columns: 1fr 1fr; }
  .demo-q li { padding: 12px 8px 12px 16px; gap: 4px; }
  .demo-q li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .demo-q li:nth-child(3)::before { display: none; }
  .demo-q b { font-size: 15px; }
  .demo-out { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .demo-pick { gap: 12px; }
  .demo-pick .ph { flex: none; }
  .demo-total { padding: 20px; }
  .demo-wrap .tools-label { margin: 28px 0 12px; }
  .tool-links { gap: 12px; }
  .tool-link { border-radius: 14px; }
  .tool-link .tph { aspect-ratio: 4 / 3; }
  .tool-link .txt { padding: 14px 14px 0; }
  .tool-link b { font-size: 18px; }
  .tool-link small { display: none; }
  .tool-link .go { margin-top: 10px; padding: 8px 10px 8px 14px; font-size: 14px; }
  .tool-link .go::after { width: 34px; height: 34px; font-size: 16px; }
}

/* ── 홈: 가이드 줄 목록 ── */
.row-list { border-top: 1px solid var(--line); }
.row-item { display: flex; align-items: center; gap: 28px; padding: 28px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.row-item:hover { color: var(--ink); background: rgba(248, 244, 237, .6); }
.row-item .thumb { width: 132px; aspect-ratio: 16/10; flex: none; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper-sunk); }
.row-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-item .body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row-item .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.row-item b { font-size: 22px; line-height: 1.35; letter-spacing: -.015em; }
.row-item .mins { margin-left: auto; flex: none; font-size: 14px; font-weight: 500; color: var(--ink-caption); }
@media (max-width: 600px) { .row-item { gap: 16px; padding: 20px 0; } .row-item .thumb { width: clamp(92px, 26vw, 124px); aspect-ratio: 4/3; } .row-item b { font-size: 17px; line-height: 1.4; } .row-item .mins { display: none; } .row-item .tags .tag.gray { display: none; } }

/* ── 홈: 자주 묻는 질문 (선 구분) ── */
.faq-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 48px; }
.faq-wrap h2 { font-size: clamp(25px, 2.6vw, 30px); }
@media (max-width: 960px) { .faq-wrap { grid-template-columns: 1fr; gap: 12px; } }
.faq-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.faq-list li { margin: 0; border-bottom: 1px solid var(--line-strong); }
.faq-list a { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 26px 4px; color: var(--ink); font-size: 19px; font-weight: 700; line-height: 1.5; }
.faq-list a::after { content: '→'; margin-left: auto; flex: none; font-weight: 400; font-size: 20px; color: var(--accent); transition: transform .15s; }
.faq-list a:hover::after { transform: translateX(3px); }
@media (max-width: 600px) { .faq-list a { padding: 20px 0; font-size: 17px; } }

/* ── 홈: 파트너 · 주간 알림 (다크) ── */
.dark-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.dark-card { padding: 34px; border: 1px solid #453729; border-radius: 14px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.dark-card h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 0; letter-spacing: -.02em; line-height: 1.35; }
.dark-card p { margin: 0; font-size: 16px; color: var(--dark-body); }
.dark-card .label { margin: 0; }
.dark-card .btn { margin-top: 6px; }
.dark-card > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; }
.dark-card form { display: flex; gap: 10px; margin-top: 6px; width: 100%; flex-wrap: wrap; }
.dark-card input[type=email] { flex: 1; min-width: 180px; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #5A4A38; background: var(--dark-deep); color: var(--dark-text); font: inherit; font-size: 16px; }
.dark-card input[type=email]::placeholder { color: var(--dark-caption); }
.dark-card input[type=email]:focus { outline: none; border-color: var(--dark-accent); box-shadow: 0 0 0 3px rgba(199, 154, 123, .25); }
.dark-card button[type=submit] { height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--dark-accent-text); color: var(--dark); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.dark-card button[type=submit]:hover { background: #fff; }
.dark-card .form-status { color: var(--dark-body); width: 100%; }
.dark-card .form-status.ok { color: var(--dark-ok); }
.dark-card .form-status.err { color: var(--dark-warn); }
@media (max-width: 760px) { .dark-duo { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (max-width: 600px) { .dark-card { padding: 24px 20px; } .dark-card .btn, .dark-card button[type=submit] { width: 100%; } }

/* ── 로드맵 단계 · 순서 목록 ───────────── */
.stage { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(32px, 5vw, 60px) 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.stage:first-of-type { border-top: 0; }
.stage-img { border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--line-strong); }
/* 넓은 화면에서는 글이 사진보다 훨씬 길다 — 사진을 붙박이로 두어 읽는 동안 따라오게 한다(화면이 낮으면 끈다) */
@media (min-width: 961px) and (min-height: 861px) { .stage-img { position: sticky; top: 96px; } }
.stage-img img { width: 100%; height: 100%; object-fit: cover; }
.stage-num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; font-size: 16px; font-weight: 800; color: var(--accent); margin-right: 10px; }
.stage h2 { display: flex; align-items: baseline; }
.stage .period { color: var(--accent); font-weight: 600; font-size: 14px; letter-spacing: .1em; margin-bottom: 8px; }
.stage ul { margin-bottom: 14px; }
.stage .done { background: var(--ok-soft); border-radius: 10px; padding: 12px 16px; font-size: 16px; }
.stage .done strong { color: var(--ok); }
/* 글이 사진보다 훨씬 길어서 좁은 2열에서는 왼쪽이 통째로 빈다 → 960 이하에서는 사진을 위로 올린다(2026-09-21 사용자 지적) */
@media (max-width: 960px) { .stage { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; } }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; border-top: 1px solid var(--line); }
.steps li { position: relative; padding: 14px 0 14px 44px; margin: 0; counter-increment: s; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-weight: 800; font-size: 16px; color: var(--accent); }

/* ── 표 ───────────────────────────────── */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin: 18px 0 26px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper-raised); }
table { border-collapse: collapse; width: 100%; font-size: 16px; min-width: 560px; }
th, td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
th { background: var(--paper-sunk); font-size: 14px; font-weight: 700; color: #4B4036; white-space: nowrap; padding: 16px 20px; }
td { color: var(--ink-body); }
td:first-child { font-weight: 600; color: var(--ink); }
tbody tr:nth-child(even) td { background: var(--paper-tint); }
tr:last-child td { border-bottom: 0; }
td.num { text-align: right; white-space: nowrap; }
td.num, td.p, .r-total, .teacher .price, .m-bpm, .t-side, .row-item .mins, .feed .date, .article .meta, .notice-list time { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { th, td { padding: 14px; font-size: 15px; } }

/* ── 탭(세그먼트) · 칩 · 필터 ─────────── */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--neutral-tint); border-radius: 11px; margin-bottom: 24px; max-width: 100%; }
.tab { font: inherit; font-weight: 600; font-size: 16px; min-height: 46px; padding: 0 22px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; color: var(--ink-muted); }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--paper-raised); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(36, 28, 20, .1); }
.tabpanel { display: none; }
.tabpanel.active { display: block; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 26px; }
.chip { display: inline-flex; align-items: center; min-height: 46px; font: inherit; font-size: 15px; font-weight: 600; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper-raised); cursor: pointer; color: var(--ink-body); }
.chip:hover { border-color: var(--line-input); color: var(--ink); }
.chip.active { border: 1.5px solid var(--accent); background: var(--paper-tint); color: var(--accent-hover); font-weight: 700; }
.guide-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.filters > b { font-size: 15px; color: var(--ink); margin-right: 6px; }
.filters select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 36px 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2383705A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink-body); cursor: pointer; max-width: 100%; }
.filters select.set { border: 1.5px solid var(--accent); background-color: var(--paper-tint); color: var(--accent-hover); font-weight: 700; }
.filters select:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-tint); }
.filters .count { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.search { width: 100%; font: inherit; font-size: 17px; height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised); outline: none; color: var(--ink); }
.search:focus { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* ── 첫 기타 추천: 한 화면에 질문 하나 ── */
.pick { padding: clamp(28px, 5.8vw, 56px) 0 clamp(56px, 9vw, 88px); }
.pick .step-label { display: block; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--accent); margin-bottom: 14px; }
.pick-head { max-width: 820px; margin-bottom: 28px; }
.pick-head h1 { font-size: clamp(30px, 22px + 2.05vw, 48px); margin: 0 0 14px; }
.pick-head p { font-size: clamp(17px, 15.5px + .36vw, 20px); color: var(--ink-muted); margin: 0; }
.pick.center .pick-head { margin-left: auto; margin-right: auto; text-align: center; }
.progress-bar { display: flex; gap: 6px; margin: 0 0 40px; }
.progress-bar i { height: 4px; flex: 1; border-radius: 2px; background: var(--line); }
.progress-bar i.on { background: var(--accent); }
.pick-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.pick-bar button { font: inherit; font-size: 16px; font-weight: 600; color: var(--ink-body); background: none; border: 0; min-height: 44px; padding: 0 4px; cursor: pointer; }
.pick-bar button:hover { color: var(--ink); }
.inst-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.inst-opt { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); box-shadow: 0 1px 2px rgba(36, 28, 20, .05); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
  .inst-opt:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); }
  .inst-opt:hover .ph img { transform: scale(1.05); }
  .inst-opt.on:hover { box-shadow: 0 0 0 3px var(--accent-tint), var(--shadow); }
}
.inst-opt.on { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* 고른 카드에는 체크 표시 — 이제 누른다고 넘어가지 않으므로 '골라졌다'는 것이 카드에 남아야 한다 */
.inst-opt.on::after { content: ''; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF9F4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 0 0 3px var(--paper-raised); }
.inst-opt .ph { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--paper-sunk); }
.inst-opt .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.inst-opt b { display: block; font-size: 20px; line-height: 1.3; }
.inst-opt small { display: block; font-size: 14px; margin-top: 4px; }
.inst-opt.unsure { background: var(--paper-sunk); }
.inst-opt.unsure small { color: var(--accent); font-weight: 600; }
@media (max-width: 960px) { .inst-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .inst-opt.unsure { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; } .inst-opt.unsure .ph { width: 96px; flex: none; } }
@media (min-width: 761px) and (max-width: 960px) { .inst-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .progress-bar { margin-bottom: 28px; gap: 4px; } .inst-opt { padding: 12px; gap: 10px; } .inst-opt b { font-size: 18px; } }
.q-card { max-width: 820px; margin: 0 auto; }
.opts { display: flex; flex-direction: column; gap: 14px; border: 0; margin: 0; padding: 0; min-width: 0; }
.opts label { position: relative; display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 24px 28px; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.opts label::before { content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-input); background: var(--paper-raised); transition: border .12s; }
.opts label:hover { border-color: var(--line-input); }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts label:has(input:checked) { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.opts label:has(input:checked)::before { border: 6px solid var(--accent); }
.opts label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* :has() 를 모르는 옛 웹뷰(카카오톡 인앱 브라우저 등)용 — main.js 가 붙이는 .on. 규칙을 합치면 옛 브라우저가 둘 다 버린다 */
.opts label.on { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.opts label.on::before { border: 6px solid var(--accent); }
.opts .t { display: block; font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--ink); }
.opts .d { display: block; font-size: 16px; line-height: 1.6; color: var(--ink-muted); margin-top: 3px; }
.q-nav { display: flex; gap: 12px; margin-top: 28px; }
.q-nav .btn { min-height: 52px; font-size: 17px; }
.q-nav .next-btn { flex: 1; }
/* 고르기 전: 점선 · 흐린 글씨로 '아직'임을 보여 주고 버튼이 할 일을 말한다("하나를 골라 주세요"). 고른 뒤: 강조색 선 + 연한 바탕으로 켜진다. 채움은 아니다(채움은 헤더의 하나뿐) */
.q-nav .next-btn:disabled { background: transparent; border: 1.5px dashed var(--line-input); color: var(--ink-caption); font-weight: 600; cursor: not-allowed; }
.q-nav .next-btn:not(:disabled) { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }
.q-nav .next-btn:not(:disabled):hover { background: #EBD3C3; }
.q-nav .next-btn.just-on { animation: next-on .5s ease-out 1; }
@keyframes next-on { 0% { box-shadow: 0 0 0 0 rgba(168, 64, 27, .35); } 100% { box-shadow: 0 0 0 12px rgba(168, 64, 27, 0); } }
/* 1단계의 버튼 + 안내 상자: 카드 다섯 장과 같은 격자에 올린다 — 안내는 1~3열, 버튼은 4~5열.
   (이전: 버튼은 420px 로 오른쪽에, 안내는 다른 섹션에서 왼쪽 88px 아래에 있어 둘 다 카드와 축이 안 맞았다. 2026-09-19 사용자 지적)
   DOM 순서는 버튼 → 안내다. 좁은 화면에서는 그 순서대로 쌓이고, 넓은 화면에서는 자리를 지정해 안내가 왼쪽에 온다 */
.start-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 28px; }
.start-row .q-nav.start { grid-column: 4 / -1; grid-row: 1; margin-top: 0; }
.start-row .notice { grid-column: 1 / 4; grid-row: 1; margin: 0; max-width: none; }
/* 960 이하(카드 4열·2열): 한 줄에 둘을 세우면 안내가 좁고 길어진다 → 버튼, 안내 순서로 쌓고 가운데 축에 맞춘다. 버튼은 720px 을 넘기지 않는다 */
@media (max-width: 960px) {
  .start-row { display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .start-row .q-nav.start, .start-row .notice { width: 100%; max-width: 720px; }   /* 둘의 폭이 같아야 한다 — 14px 씩 어긋나면 '거의 맞는데 안 맞는' 모양이 된다 */
}
/* 단계별 안내 상자: 1단계는 위 줄에 들어가므로 아래 것을 숨기고, 문항 단계는 가운데 820px 열과 같은 축에 두고 사이를 좁힌다 */
.pick[data-stage="inst"] + .pick-foot { display: none; }
.pick[data-stage="q"] { padding-bottom: clamp(28px, 4vw, 40px); }
.pick[data-stage="q"] + .pick-foot .notice { margin-left: auto; margin-right: auto; }
/* 열과 '거의 같은' 폭이 가장 어색하다(768px 에서 열 700 · 안내 672). 열과 똑같이 넓히면 줄 길이 45em 을 넘으므로, 601 부터는 늘 양쪽으로 48px 이상 들어간 각주로 둔다. 600 이하는 열과 같은 폭 */
@media (min-width: 601px) { .pick[data-stage="q"] + .pick-foot .notice { max-width: min(42rem, calc(100% - 96px)); } }
/* 폰: 선택지가 많으면(장르 6개) 버튼이 화면 아래로 밀린다 → 버튼 줄을 화면 아래에 붙여 둔다 */
@media (max-width: 600px) {
  .q-nav { position: sticky; bottom: 0; z-index: 5; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--paper) 78%, rgba(248, 244, 237, 0)); }
  /* 버튼 줄이 화면 아래에 붙으려면 카드와 같은 상자 안에 있어야 한다 → 폰에서는 감싼 줄을 푼다 */
  .start-row { display: contents; }
  .start-row .q-nav.start { width: auto; max-width: none; margin-top: 20px; }
  .start-row .notice { margin-top: 20px; max-width: none; }
}
@media (max-width: 600px) { .opts label { padding: 18px; gap: 12px; align-items: flex-start; } .opts label::before { margin-top: 2px; width: 18px; height: 18px; } .opts label:has(input:checked)::before { border-width: 5px; } .opts .t { font-size: 18px; } .opts .d { font-size: 15px; } }
.quiz .err, .err { color: var(--warn); font-size: 15px; }
.inst-help { margin-top: clamp(40px, 6vw, 64px); scroll-margin-top: 96px; }
/* 4종 비교: 네 장이 같은 순서로 쌓여 있어 같은 줄끼리 견주어 읽는다. 1121 이상에서는 subgrid 로 줄 높이까지 맞춘다 */
.cmp-head { margin-bottom: clamp(20px, 3vw, 32px); }
.cmp-head h2 { font-size: clamp(22px, 18px + 1vw, 30px); margin: 0 0 8px; }
.cmp-head p { margin: 0; color: var(--ink-muted); max-width: var(--measure); }
.cmp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(14px, 1.6vw, 20px); }
.cmp-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; padding-bottom: 22px; margin-bottom: clamp(14px, 1.6vw, 20px); }
.cmp-card > * { margin-left: 22px; margin-right: 22px; min-width: 0; }
.cmp-card .cmp-ph { display: block; margin: 0 0 18px; aspect-ratio: 16/10; overflow: hidden; background: var(--dark); }
.cmp-card .cmp-ph img { width: 100%; height: 100%; object-fit: cover; }
.cmp-card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 0; margin-bottom: 8px; font-size: 21px; }
.cmp-card h3 small { font-size: 13px; font-weight: 500; color: var(--ink-caption); }
.cmp-lead { margin-top: 0; margin-bottom: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.cmp-facts { margin-top: 0; margin-bottom: 18px; border-top: 1px solid var(--line); }
.cmp-facts > div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cmp-facts dt { font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--ink-caption); padding-top: 1px; }
.cmp-facts dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-facts dd small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-caption); margin-top: 1px; }
.cmp-fit { margin-bottom: 16px; }
.cmp-fit > b, .cmp-note > b { display: block; font-size: 13px; letter-spacing: .04em; color: var(--accent-hover); margin-bottom: 8px; }
.cmp-fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cmp-fit li { position: relative; margin: 0; padding-left: 24px; font-size: 15px; line-height: 1.55; color: var(--ink-body); }
.cmp-fit li::before { content: ''; position: absolute; left: 2px; top: .42em; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.cmp-note { margin-top: 0; margin-bottom: 18px; padding: 14px 16px; background: var(--paper-sunk); border-radius: 10px; font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.cmp-note > b { color: var(--ink-body); margin-bottom: 4px; }
.cmp-card .btn { align-self: end; width: auto; }
/* 네 장이 나란히 서려면 한 장이 15em 은 돼야 한다 → 1120 이하는 두 장씩, 폰은 한 장씩 */
@media (max-width: 1120px) { .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmp-card .cmp-ph { aspect-ratio: 16/9; } }
@media (max-width: 600px) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } .cmp-card { display: block; padding-bottom: 18px; } .cmp-card > * { margin-left: 18px; margin-right: 18px; } .cmp-card .btn { display: flex; width: calc(100% - 36px); } }
.pick-foot { padding: 0 0 clamp(44px, 7.5vw, 72px); }

/* 결과 */
.result { display: none; }
.result.show { display: block; }
.r-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.r-head h1, .r-head h2 { margin: 0; font-size: clamp(30px, 22px + 2.05vw, 48px); line-height: 1.22; letter-spacing: -.03em; }
.r-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.r-chips span { font-size: 13px; font-weight: 600; color: #4B4036; background: var(--neutral-tint); border: 1px solid #E0D6C6; padding: 8px 10px; border-radius: 6px; line-height: 1; }
.r-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.r-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.r-photo { aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper-sunk); }
.r-photo img { width: 100%; height: 100%; object-fit: cover; }
.r-photo.sq img { object-fit: contain; }
.r-why { background: var(--paper-raised); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 12px; padding: 24px; }
.r-why > b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.r-why p { font-size: 18px; line-height: 1.75; color: var(--ink-body); margin: 0 0 10px; }
.r-why p.small { font-size: 16px; color: var(--ink-muted); }
.r-why p:last-child { margin-bottom: 0; }
.r-block h3 { margin-bottom: 14px; }
.r-block .table-wrap { margin: 0 0 10px; }
.r-block .table-wrap table { min-width: 0; }
.r-block td .note { display: block; font-size: 14px; font-weight: 400; color: var(--ink-muted); margin-top: 2px; }
.r-block td.p { white-space: nowrap; }
.r-block p { font-size: 16px; color: var(--ink-muted); margin: 0 0 8px; }
.r-models > p:last-child { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-caption); }   /* 표기 원칙 각주 — 카드 목록과 섞이지 않게 선으로 끊는다 */
.r-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
.r-total { background: var(--dark); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.r-total .label { margin: 0; font-size: 13px; letter-spacing: .12em; color: var(--dark-accent); }
.r-total .sum { font-size: clamp(30px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--dark-text); }
.r-total ul { list-style: none; margin: 0; padding: 0; }
.r-total li { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--dark-line); font-size: 15px; line-height: 1.5; color: var(--dark-body); }
.r-total li:first-child { border-top: 0; padding-top: 0; }
.r-total li b { color: var(--dark-text); white-space: nowrap; font-weight: 600; }
.r-total p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dark-caption); }
.r-next { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.r-next > b { font-size: 18px; color: var(--ink); }
.r-next a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--ink-body); }
.r-next a::after { content: '→'; color: var(--ink-caption); }
.r-next a:hover { border-color: var(--line-input); color: var(--ink); }
.r-next a.main { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; }
.r-next a.main::after { color: var(--accent); }

@media (max-width: 600px) { .r-why { padding: 16px; } .r-why p { font-size: 16px; } .r-total { padding: 20px; } .r-next { padding: 18px; } }

/* ── 용어 · 목록 ──────────────────────── */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.term { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 12px; padding: 22px 24px; }
.term h3, .term h4 { margin: 0 0 6px; font-size: 18px; letter-spacing: 0; }
.term h3 small, .term h4 small { font-weight: 500; color: var(--ink-caption); margin-left: 6px; font-size: 14px; }
.term p { margin: 0; color: var(--ink-muted); font-size: 16px; }
.term .tag { margin-top: 10px; }
.empty { color: var(--ink-muted); padding: 24px 0; }
@media (max-width: 600px) { .terms { grid-template-columns: 1fr; } }
.notice-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.notice-list li { display: flex; gap: 14px; padding: 14px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 16px; align-items: baseline; }
.notice-list time { color: var(--ink-caption); flex: none; font-size: 14px; }

/* ── 체크리스트 ───────────────────────── */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 10px; margin-bottom: 12px; transition: border-color .12s, background .12s; }
.checklist li.group { background: transparent; border: 0; font-size: 14px; font-weight: 600; letter-spacing: .14em; padding: 22px 0 8px; margin: 0; color: var(--accent); }
.checklist label { display: flex; gap: 14px; padding: 18px 20px; cursor: pointer; align-items: flex-start; min-height: 44px; }
.checklist input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.checklist .t { font-weight: 600; display: block; color: var(--ink); }
.checklist .d { color: var(--ink-muted); font-size: 16px; display: block; margin-top: 2px; }
.checklist li:has(input:checked) { background: var(--paper-tint); border: 1.5px solid var(--accent); }
.checklist li:has(input:checked) .t { color: var(--ink-muted); text-decoration: line-through; }
.checklist li.on { background: var(--paper-tint); border: 1.5px solid var(--accent); }
.checklist li.on .t { color: var(--ink-muted); text-decoration: line-through; }
.progress { font-weight: 700; color: var(--accent); margin: 0 0 14px; }

/* ── FAQ (details) — 카드가 아니라 선 ── */
details.faq { border-bottom: 1px solid var(--line-strong); margin: 0; padding: 0 4px; }
details.faq:first-of-type { border-top: 1px solid var(--line-strong); }
details.faq summary { cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--ink); padding: 24px 0; min-height: 44px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; color: var(--accent); font-weight: 400; font-size: 22px; line-height: 1; flex: none; }
details.faq[open] summary::after { content: '−'; }
details.faq .a { padding: 0 0 20px; color: var(--ink-muted); font-size: 17px; line-height: 1.75; max-width: 720px; }
details.faq .a p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { details.faq summary { font-size: 17px; padding: 20px 0; } details.faq .a { font-size: 16px; } }

/* ── 코드 다이어그램 ──────────────────── */
.sub-head { font-size: clamp(20px, 18px + .4vw, 24px); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 90px; }
.chords { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.chord-group + .chord-group { margin-top: 36px; }
.chord-group h3 { font-size: 19px; margin: 0 0 4px; }
.chord-group > p.small { margin: 0 0 16px; }
.chord { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 12px; padding: 18px 14px; text-align: center; min-width: 0; scroll-margin-top: 90px; }
.chord.hit { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.chord svg { width: 100%; max-width: 170px; height: auto; display: block; margin: 0 auto; color: var(--ink); }
.chord .name { font-weight: 800; font-size: 19px; color: var(--ink); margin-bottom: 4px; }
.chord .hint { font-size: 14px; color: var(--ink-muted); }

/* ── 튜너 · 메트로놈 (tools.html) — 다크 패널 위에 바늘·박자만 크게 ── */
.tools-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 40px 0 20px; }
.tools-head h1 { margin: 0 0 12px; font-size: clamp(30px, 22px + 2.05vw, 48px); }
.tools-head p { margin: 0; color: var(--ink-muted); font-size: 18px; max-width: 640px; }
.tools-head .tabs { margin: 0; }
.tools-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; padding-bottom: 88px; }
.tool-panel { display: none; }
.tool-panel.active { display: block; }
.side-panel { display: none; flex-direction: column; gap: 16px; }
.side-panel.active { display: flex; }
.tool-card { background: var(--dark); color: var(--dark-body); border-radius: 16px; padding: 44px; display: flex; flex-direction: column; gap: 28px; }
.tool-card .t-row .chip, .tool-card .chip { background: transparent; border: 1px solid var(--dark-line); color: var(--dark-body); }
.tool-card .chip:hover { border-color: var(--dark-accent); color: var(--dark-text); }
.tool-card .chip.active { border: 1.5px solid var(--dark-warn); background: #2C2116; color: var(--dark-text); }
.tool-card .btn-primary { border: 1.5px solid var(--dark-accent); color: var(--dark-accent-text); align-self: flex-start; }
.tool-card .btn-primary:hover { background: rgba(245, 227, 214, .08); color: #fff; }
.tool-card .btn.on { background: var(--dark-warn); border-color: var(--dark-warn); color: var(--dark); }
.tool-card .form-status { color: var(--dark-body); margin: 0; font-size: 16px; }
.tool-card .small, .tool-card small { color: var(--dark-caption); }
.tool-card strong { color: var(--dark-text); }
.t-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.t-live { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--dark-accent); }
.t-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #5A4A38; }
.t-live.on::before { background: var(--dark-ok); }
.t-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.t-label { display: block; font-size: 13px; letter-spacing: .06em; color: var(--dark-caption); }
.t-read { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.t-note { font-size: clamp(64px, 8vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--dark-text); font-variant-numeric: tabular-nums; min-height: 1em; }
.t-note.idle { color: var(--dark-line); }
.t-side { display: flex; gap: 28px; justify-content: center; text-align: center; }
.t-side strong { font-size: 17px; color: var(--dark-text); }
.t-meter { position: relative; width: 100%; max-width: 620px; margin: 0 auto; height: 64px; border: 1px solid var(--dark-line); border-radius: 10px; background: var(--dark-deep); overflow: hidden; }
.t-meter.ok { border-color: var(--dark-ok); }
.t-center { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; background: var(--dark-ok); transform: translateX(-50%); opacity: .7; }
.t-meter.ok .t-center { opacity: 1; }
.t-tick { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--dark-caption); }
.t-tick.t-l { left: 12px; } .t-tick.t-r { right: 12px; }
.t-needle { position: absolute; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: var(--dark-warn); left: 50%; transform: translateX(-50%); transition: left .09s linear; }
.t-meter.ok .t-needle { background: var(--dark-ok); }
#tuner-status { text-align: center; font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--dark-text); }
.t-meter.ok ~ #tuner-status { color: var(--dark-ok); }
.t-strings-wrap { border-top: 1px solid var(--dark-line); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
#t-strings { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; }
#t-strings .chip { justify-content: center; min-height: 56px; border-radius: 10px; font-size: 15px; font-weight: 700; }
.t-hr { display: none; }
/* ── 3D 무대 (2026-09-19) — 도구의 실물(탁상 바늘 튜너 · 호두나무 메트로놈)을 three.js 로 그린다(js/tools3d.js).
   무대에는 처음부터 같은 물건의 사진이 깔려 있고, 3D 가 준비되면 그 위에 겹쳐 뜬다 → 화면이 밀리지 않고, WebGL 이 안 되면 사진이 남는다.
   3D 를 쓸 수 있는 브라우저는 tools.html 의 인라인 스크립트가 첫 페인트 전에 html[data-tools3d=on] 을 달아 2D 막대 계기를 숨긴다(바늘이 둘이면 중복) */
.t-main, .m-main { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
.m-main { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.t-info, .m-info { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* 메트로놈: 왼쪽은 무대 + 박자 점, 오른쪽은 템포와 시작 버튼 — 세로로 긴 무대를 넣어도 시작 버튼이 첫 화면에 남는다 */
.m-left { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.m-info { gap: 18px; }
.m-info .m-bpm { justify-content: flex-start; }
.m-info .btn { align-self: stretch; }
.stage3d { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 56%, #4B3623 0%, #2E2217 52%, var(--dark-deep) 100%); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.stage3d.tall { aspect-ratio: 4 / 5; }
.stage3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease; }
.stage3d canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; cursor: grab; }
.stage3d.ready canvas { opacity: 1; }
.stage3d.ready img { opacity: 0; }
.stage3d.grab canvas { cursor: grabbing; }
html[data-tools3d="on"] .t-meter { display: none; }
@media (max-width: 760px) {
  .t-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stage3d { aspect-ratio: 16 / 10; }
  .t-info { gap: 18px; }
  /* 메트로놈: 세로 무대 옆에 템포 숫자, 그 아래로 박자 점 · 슬라이더 · 버튼이 한 줄씩 */
  .m-main { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 18px 20px; align-items: stretch; }
  .m-left, .m-info { display: contents; }
  .m-left .stage3d { grid-column: 1; grid-row: 1 / 3; }
  .m-info > .t-label { grid-column: 2; grid-row: 1; align-self: end; }
  .m-info > .m-bpm { grid-column: 2; grid-row: 2; align-self: start; }
  .m-left .m-dots, .m-info > input, .m-info > .t-row, .m-info > .btn { grid-column: 1 / -1; }
}
.m-bpm { display: flex; align-items: flex-end; justify-content: center; gap: 12px; font-size: clamp(64px, 8vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--dark-text); font-variant-numeric: tabular-nums; }
.m-bpm small { font-size: 17px; font-weight: 600; color: var(--dark-caption); letter-spacing: .06em; padding-bottom: 10px; }
#bpm { width: 100%; height: 44px; margin: 0; accent-color: var(--dark-warn); background: transparent; -webkit-appearance: none; appearance: none; }
#bpm::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--dark-line); }
#bpm::-moz-range-track { height: 6px; border-radius: 3px; background: var(--dark-line); }
#bpm::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--dark-text); border: 3px solid var(--dark-warn); cursor: pointer; }
#bpm::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--dark-text); border: 3px solid var(--dark-warn); cursor: pointer; }
.m-dots { display: flex; gap: 14px; justify-content: center; }
.m-dots .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--dark-line); transition: transform .08s, background .08s; }
.m-dots .dot.first { box-shadow: inset 0 0 0 2px var(--dark-warn); }
.m-dots .dot.lit { background: var(--dark-warn); transform: scale(1.25); }
.help-card { background: var(--paper-sunk); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.help-card > b { font-size: 17px; color: var(--ink); }
.help-card ol { list-style: none; counter-reset: h; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.help-card li { counter-increment: h; display: flex; gap: 10px; margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.help-card li::before { content: counter(h, decimal-leading-zero); font-weight: 700; color: var(--accent); flex: none; }
.help-card p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-body); }
.help-card.dashed { background: var(--paper-raised); border: 1px dashed var(--line-input); }
.help-card.dashed p { font-size: 15px; color: var(--ink-muted); }
@media (max-width: 960px) { .tools-grid { grid-template-columns: 1fr; padding-bottom: 56px; } }
@media (max-width: 600px) {
  .tools-head { padding: 24px 0 16px; }
  .tools-head .tabs { display: flex; width: 100%; }
  .tools-head .tab { flex: 1; }
  .tool-card { padding: 24px 20px; gap: 22px; border-radius: 14px; }
  #tuner-status { font-size: 17px; }
  .t-meter { height: 52px; }
  #t-strings { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); }
  #t-strings .chip { min-height: 48px; padding: 0 4px; font-size: 13px; }
  .help-card { padding: 18px; }
}

/* ── 강사 · 레벨 · 폼 ─────────────────── */
.teach-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: stretch; }
.level-box { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.level-box > h2 { font-size: clamp(20px, 18px + .4vw, 24px); margin: 0; letter-spacing: -.01em; }
.level-check { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.level-check label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--ink-body); transition: border-color .12s, background .12s; }
.level-check label:hover { border-color: var(--line-input); }
.level-check label:has(input:checked) { border: 1.5px solid var(--accent); background: var(--paper-tint); color: var(--ink); font-weight: 600; }
.level-check label.on { border: 1.5px solid var(--accent); background: var(--paper-tint); color: var(--ink); font-weight: 600; }
.level-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.level-result { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 18px 20px; background: var(--paper-sunk); border-radius: 10px; }
.level-result .lr-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.level-result .lr-txt span { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--accent-hover); }
.level-result .lr-txt b { font-size: 20px; line-height: 1.4; color: var(--ink); }
.level-result .lr-txt small { font-size: 15px; }
.level-result .link-arrow { margin-left: auto; font-size: 15px; }
.sample-note { background: var(--dark); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; color: var(--dark-body); }
.sample-note .label { margin: 0; font-size: 13px; letter-spacing: .12em; color: var(--dark-accent); }
.sample-note b { font-size: 23px; line-height: 1.4; color: var(--dark-text); }
.sample-note p { margin: 0; font-size: 16px; line-height: 1.7; }
.sample-note .btn { margin-top: auto; border: 1.5px solid var(--dark-accent); color: var(--dark-accent-text); }
.sample-note .btn:hover { background: rgba(245, 227, 214, .08); color: #fff; }
.filter-bar { background: var(--paper-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; margin-top: 40px; }
.filter-bar .filters { margin: 0; }
.teacher-list { padding-top: 32px; }
@media (max-width: 960px) { .teach-top { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .filters select { min-height: 44px; flex: 1 1 140px; } .filters .count { width: 100%; margin: 4px 0 0; } }
@media (max-width: 600px) { .level-box { padding: 18px; } .level-result .link-arrow { margin-left: 0; } .sample-note { padding: 18px; } .sample-note b { font-size: 18px; } .filter-bar { margin-top: 24px; padding: 14px 0; } }
/* 학습 경로(teachers.html): 점을 잇는 3단계. 카드 세 장에 굵은 글씨 문단을 늘어놓던 것을 2026-09-20 에 바꿨다 */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); }
.path-step { position: relative; margin: 0; padding-top: 26px; border-top: 2px solid var(--line-strong); }
.path-step::before { content: ''; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.path-step .n { display: inline-block; margin-right: 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.path-step h3 { margin: 10px 0 14px; font-size: clamp(20px, 1.8vw, 23px); letter-spacing: -.02em; }
.path-facts { margin: 0; }
.path-facts > div { padding: 11px 0; border-top: 1px solid var(--line); }
.path-facts > div:first-child { border-top: 0; padding-top: 0; }
.path-facts dt { margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-caption); }
.path-facts dd { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-body); }
/* 961px 부터는 세 줄기의 '목표 · 어디서 · 역할' 줄이 가로로 맞도록 subgrid 를 쓴다(4종 비교 카드와 같은 방법) */
@media (min-width: 961px) { .path { grid-template-rows: auto auto auto auto auto; }
  .path-step { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
  .path-facts { display: contents; } }
@media (max-width: 960px) { .path { grid-template-columns: 1fr; gap: 28px; } }
/* 강습소 유형: 장점 ✓ · 단점 ! 을 줄로 나누고, 확인할 것은 가라앉은 바탕 한 줄 */
.sc-for { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--ink-body); }
.sc-for b, .sc-tip b { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-caption); }
.sc-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sc-list li { position: relative; margin: 0; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--ink-body); }
.sc-list li.ok::before { content: ''; position: absolute; left: 3px; top: .34em; width: 12px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.sc-list li.watch::before { content: '!'; position: absolute; left: 4px; top: 0; font-size: 15px; font-weight: 800; color: var(--warn); }
.sc-tip { margin: auto 0 0; padding: 13px 15px; background: var(--paper-sunk); border-radius: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.sc-card .card-body { display: flex; flex-direction: column; height: 100%; }
.form-h { margin: 0 0 6px; font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -.02em; }
#inquiry .grid-2 { align-items: start; }   /* 두 폼의 길이가 다르다 — 짧은 쪽 아래에 빈 자리를 만들지 않는다 */
.teacher { flex-direction: row; gap: 22px; padding: 26px; }
.teacher .ph { width: 120px; height: 120px; flex: none; border-radius: 12px; overflow: hidden; background: var(--paper-sunk); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: var(--accent); }
.teacher .ph img { width: 100%; height: 100%; object-fit: cover; }
.teacher .card-body { padding: 0; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.teacher h3 { margin: 0; font-size: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.teacher h3 small { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.teacher .row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.teacher p { margin: 0; font-size: 15px; line-height: 1.6; }
.teacher .career { font-size: 14px; color: var(--ink-caption); }
.teacher .price { font-weight: 700; color: var(--ink); font-size: 15px; }
.teacher .link-arrow { font-size: 15px; align-self: flex-start; }
@media (max-width: 600px) { .teacher { padding: 16px; gap: 14px; } .teacher .ph { width: 76px; height: 76px; border-radius: 10px; font-size: 26px; } .teacher h3 { font-size: 18px; } }
.form { container-type: inline-size; display: grid; gap: 14px; }
.form label { display: grid; gap: 7px; font-weight: 600; font-size: 14px; color: var(--ink-body); }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; font-weight: 400; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised); width: 100%; color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@container (max-width: 430px) { .form .two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } }
.form .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.form-status { margin: 10px 0 0; font-size: 15px; color: var(--ink-muted); min-height: 1.2em; }
.form-status.ok { color: var(--ok); font-weight: 600; }
.form-status.err { color: var(--warn); font-weight: 600; }
/* ── 판매처·브랜드·공방 (2026-09-19 재설계, 사용자 요청: "여기 디자인도 다시") ──
   이전에는 네 구역이 전부 같은 흰 글 상자였다. 지금은 구역마다 역할에 맞는 모양을 쓴다:
   고르는 자리(상황별) = 사진 카드(.choice 그대로) · 목록(디렉터리) = 가로 줄 · 파트너 안내 = 다크 구역 · 문의 = 절차 + 폼 */
.where-hero .wh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(28px, 4vw, 64px); align-items: end; }
.wh-note { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 14px; padding: 22px 24px; }
.wh-note b { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 18px; line-height: 1.35; color: var(--ink); }
.wh-note b small { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink-caption); white-space: nowrap; }
.wh-note ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.wh-note li { position: relative; margin: 0; padding-left: 24px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.wh-note li::before { content: ''; position: absolute; left: 2px; top: .48em; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 960px) { .where-hero .wh { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; } .wh-note { max-width: 42rem; } }
/* 상황별 네 장: 홈 선택 카드와 같은 부품. 1121 부터 네 장 한 줄, 961~1120 은 두 장씩(한 장이 15em 글 칸을 못 채우므로 사진을 왼쪽으로 눕힌다), 960 이하는 .choice 의 한 줄 한 장 */
.routes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.routes .cph { aspect-ratio: 3 / 2; }
.routes .q { font-size: clamp(20px, 1.7vw, 23px); }
@media (max-width: 1120px) {
  .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routes .choice { display: grid; grid-template-columns: clamp(140px, 32%, 200px) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .routes .cph { grid-row: 1 / -1; aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 960px) { .routes { grid-template-columns: minmax(0, 1fr); } .routes .choice { grid-template-columns: clamp(190px, 34vw, 300px) minmax(0, 1fr); } }
@media (max-width: 600px) { .routes .choice { grid-template-columns: clamp(108px, 31vw, 150px) minmax(0, 1fr); } .routes .q { font-size: 19px; } }
/* 디렉터리: 가로 줄 — 이름·태그 | 설명 | 링크·제휴 표기 */
.p-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.p-row { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) auto; gap: 10px clamp(24px, 3vw, 48px); align-items: center; margin: 0; padding: 24px 4px; border-bottom: 1px solid var(--line); }
.p-name { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-name b { font-size: 20px; line-height: 1.35; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.p-row .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.p-desc { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-muted); max-width: var(--measure); }
.p-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.p-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--accent); border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--accent); white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.p-link:hover { background: var(--paper-tint); border-color: var(--accent-hover); color: var(--accent-hover); text-decoration: none; }
.p-more { margin: 24px 0 0; font-size: 15px; color: var(--ink-muted); }
.p-more a { font-weight: 700; white-space: nowrap; }
@media (max-width: 960px) {
  .p-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: 20px 2px; }
  .p-desc { grid-column: 1 / -1; grid-row: 2; }
  .p-act { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  .p-row { grid-template-columns: minmax(0, 1fr); }
  .p-act { grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .p-name b { font-size: 19px; }
}
/* 파트너 프로그램: 다크 구역(파트너 안내는 v6 에서 다크를 쓰는 자리). 세 단계는 번호를 잇는 한 줄 위에 선다 */
.prog-head { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.prog-head .label { color: var(--dark-accent); }
.prog-head h2 { color: var(--dark-text); margin: 0 0 14px; }
.prog-head p { margin: 0; color: var(--dark-body); }
.prog-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); counter-reset: none; }
.prog-steps > li { position: relative; margin: 0; padding-top: 30px; border-top: 1px solid var(--dark-line); }
.prog-steps > li::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--dark-accent); }
.prog-steps .n { display: block; font-size: 14px; font-weight: 800; letter-spacing: .14em; color: var(--dark-accent); margin-bottom: 12px; }
.prog-steps h3 { margin: 0 0 12px; font-size: clamp(20px, 1.8vw, 23px); letter-spacing: -.02em; color: var(--dark-text); }
.prog-steps p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--dark-body); max-width: var(--measure); }
.prog-steps ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.prog-steps ul li { position: relative; margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--dark-caption); }
.prog-steps ul li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 1.5px; background: var(--dark-accent); }
.prog-offer { margin-top: clamp(36px, 5vw, 60px); padding: 26px 28px; border: 1px solid #453729; border-radius: 14px; background: var(--dark-deep); display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; }
.prog-offer p { margin: 0; max-width: 42em; font-size: 16px; line-height: 1.7; color: var(--dark-body); }
.prog-offer strong { color: var(--dark-text); }
.prog-offer .btn { flex: none; }
.prog ::selection { background: #6B4A36; color: #fff; }
@media (max-width: 960px) {
  .prog-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .prog-steps > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; padding: 26px 0; }
  .prog-steps .n { grid-row: 1 / span 3; margin: 3px 0 0; }
  .prog-steps h3, .prog-steps p, .prog-steps ul { grid-column: 2; }
  .prog-offer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) { .prog-offer { padding: 22px 20px; } .prog-offer .btn { width: 100%; } .prog-steps > li { grid-template-columns: 44px minmax(0, 1fr); } }
/* 문의: 왼쪽은 접수 뒤 절차, 오른쪽은 폼. 이전에는 680px 폼이 820px 상자 안에 들어 있어 오른쪽이 비었다 */
.reg { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.reg-info h2 { margin: 0 0 14px; }
.reg-info > p { margin: 0; color: var(--ink-muted); max-width: var(--measure); }
.reg-steps { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: reg; border-top: 1px solid var(--line); }
.reg-steps li { counter-increment: reg; display: grid; grid-template-columns: 44px minmax(0, 1fr); margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.reg-steps li::before { content: '0' counter(reg); grid-row: 1 / span 2; font-size: 14px; font-weight: 800; letter-spacing: .12em; color: var(--accent); padding-top: 3px; }
.reg-steps b { font-size: 17px; color: var(--ink); }
.reg-steps span { font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
/* 강사 페이지 '강사 · 강습소이신가요'(2026-09-22): 모집 링크가 도착하는 곳. 같은 번호 단계를 761 부터 2×2 로 — 네 칸 한 줄은 칸이 15em 밑으로 내려간다 */
.ft { max-width: 980px; }
.ft .lead { max-width: var(--measure); }
.ft-terms { max-width: var(--measure); margin: 20px 0 0; }
.ft-go { margin: 24px 0 0; }
@media (min-width: 761px) { .ft-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); } .ft-steps li { align-content: start; } }
.reg .form { max-width: none; }
.reg .form .actions .btn { min-width: 200px; }
@media (max-width: 960px) { .reg { grid-template-columns: minmax(0, 1fr); } .reg-info { max-width: 42rem; } .reg .card { max-width: 720px; } }
@media (max-width: 600px) { .reg .form .actions .btn { width: 100%; } }
/* ── 추천 모델 카드 · 모델/브랜드 대화상자 · 브랜드 이야기 (2026-09-19, js/catalog-ui.js 가 그린다) ──
   사용자 요청: "내가 고른 것에 맞는 기타를 여러 개, 어떤 기타이고 어떤 브랜드인지 자세히 · 브랜드를 누르면 역사와 그 기타의 특징이".
   결과 화면은 이미 길다 → 카드에는 '고르는 데 필요한 것'(브랜드 · 어떤 기타 · 핵심 사양 넷 · 내 답과 맞는 점)만 두고, 전체 사양 · 주의점 · 브랜드 역사는 대화상자에 둔다 */
.r-models > p:first-of-type { margin-bottom: 16px; }
.r-models .tabs { margin-bottom: 16px; }
.m-cap { margin: 0 0 14px; max-width: var(--measure); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--ink-caption); }
.m-list { container-type: inline-size; list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }   /* 카드 배치를 '카드 폭'으로 가르려면 목록이 컨테이너여야 한다 — 카드 자신은 제 컨테이너가 될 수 없다 */
.m-card { container-type: inline-size; margin: 0; padding: clamp(18px, 2.2vw, 24px); background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; }
.m-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.m-brands { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* 브랜드 단추: 누르면 그 브랜드의 역사가 열린다 — 글자만 두면 누르는 것인지 모른다(UX 원칙 8) */
.m-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--line-input); border-radius: 999px; background: var(--paper); font: inherit; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .15s, background-color .15s; }
.m-brand b { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
/* 로고가 있으면 이름 글자는 화면에서만 숨긴다(읽어 주는 이름은 남는다). 로고는 바탕색이 제각각이라 흰 칸에 담는다 */
.m-brand.has-logo { padding-left: 5px; }
.m-brand.has-logo b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 4px 10px; border-radius: 999px; background: #fff; }
.m-logo img { display: block; height: 20px; width: auto; max-width: 96px; object-fit: contain; }
.b-logo { display: inline-flex; align-items: center; justify-content: center; height: 64px; min-width: 120px; margin: 0 0 14px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.b-logo img { display: block; height: 40px; width: auto; max-width: 200px; object-fit: contain; }
/* 모양 참고용 그림: 카드에서는 왼쪽 세로 칸, 대화상자에서는 오른쪽에 띄운다 */
.m-card.has-shot { display: grid; grid-template-columns: clamp(120px, 24%, 280px) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 24px); row-gap: 10px; align-items: start; }
.m-card.has-shot > .m-shot { grid-column: 1; grid-row: 1 / span 12; margin-top: 8px; }   /* 사진 위에 약간의 여백 */
/* .m-mark 는 격자에 자리를 주지 않는다 — 자리를 주면 붙박이(absolute) 기준이 그 칸이 되어 사진 오른쪽으로 밀린다 */
.m-card.has-shot > :not(.m-shot):not(.m-mark) { grid-column: 2; }
.m-shot, .s-shot { margin: 0; }
.m-shot img, .s-shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--paper-sunk); }
.m-shot figcaption, .s-shot figcaption { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-caption); text-align: center; }
.m-shot figcaption a, .s-shot figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.is-photo img { background: #fff; }
.s-shot { float: right; width: clamp(140px, 30%, 210px); margin: 4px 0 14px 24px; }
/* 카드가 좁으면(화면이 아니라 '카드 폭' 기준) 사진을 왼쪽에 두지 않는다 — 글이 오른쪽으로 몰려 답답하다(2026-09-20 사용자 지적).
   한 열로 풀고 브랜드 · 가격 · 이름을 먼저, 사진은 가운데, 그다음 설명 · 사양 · 단추 순서로 쌓는다.
   폰뿐 아니라 961~1180px 처럼 옆에 총예산 패널이 붙어 본문 칸이 좁아지는 폭에서도 같은 배치가 된다 */
@container (max-width: 560px) {
  .m-card.has-shot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }   /* 기본 규칙의 align-items:start 를 풀어야 사양표가 카드 폭을 다 쓴다 */
  .m-card.has-shot > .m-top { order: 1; }
  .m-card.has-shot > .m-name { order: 2; }
  .m-card.has-shot > .m-shot { order: 3; align-self: center; width: min(72%, 280px); margin: 2px 0 4px; }
  .m-card.has-shot > .m-note { order: 4; }
  .m-card.has-shot > .m-what { order: 5; }
  .m-card.has-shot > .m-spec { order: 6; }
  .m-card.has-shot > .m-fit { order: 7; }
  .m-card.has-shot > .m-act { order: 8; }
  /* 브랜드 알약과 가격은 무슨 일이 있어도 한 줄. 넘칠 것 같으면 줄을 바꾸는 대신 로고와 가격이 같이 작아진다.
     cqw 는 카드 폭 기준이라 화면 크기가 아니라 '이 카드가 실제로 얼마나 좁은지'에 맞춰 줄어든다.
     cqw 를 모르는 브라우저는 clamp 를 통째로 버리고 원래 크기를 쓴다 — 그래도 알약이 줄어들어 한 줄은 지킨다. */
  .m-card.has-shot .m-top { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
  .m-card.has-shot .m-price { padding-top: 0; font-size: clamp(14px, 4.4cqw, 18px); }
  .m-card.has-shot .m-brands { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px; }   /* 알약이 줄어들 수 있어야 한다 — flex:none 이면 가격과 함께 칸을 넘는다 */
  .m-card.has-shot .m-brand { max-width: 100%; min-height: 36px; padding-right: 9px; }
  .m-card.has-shot .m-logo { height: auto; padding: 3px 7px; }
  .m-card.has-shot .m-logo img { height: clamp(15px, 5cqw, 20px); max-width: clamp(52px, 20cqw, 84px); }
  .m-card .m-brand .m-ctry { display: none; }   /* 좁은 칸에서는 나라 표기를 접는다 — 대화상자에서 본다 */
  .m-act { flex-wrap: wrap; gap: 10px; }
  .m-act .btn { flex: 1; }
  .m-act .m-shop { flex: 1 1 100%; margin-left: 0; }
}
@media (max-width: 600px) { .s-shot { width: 120px; margin-left: 16px; } }
.m-brand { max-width: 100%; min-width: 0; }
.m-brand small { font-size: 13px; color: var(--ink-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 폰의 사진 있는 카드: 글 열이 200px 남짓이라 '로고 단추 + 가격'이 한 줄에 안 들어간다(가로 로고 브랜드에서 4px 넘쳤다) → 가격을 아랫줄로 내린다 */
.m-brand::after { content: '›'; align-self: center; font-size: 18px; line-height: 1; color: var(--accent); margin-left: 2px; }
.m-brand:hover { border-color: var(--accent); background: var(--paper-tint); }
.m-price { flex: none; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 8px; }
.m-name { font-size: clamp(19px, 1.7vw, 22px); font-weight: 800; letter-spacing: -.02em; line-height: 1.35; color: var(--ink); }
.r-block .m-note { margin: -4px 0 0; font-size: 15px; font-weight: 600; color: var(--accent-hover); }
.m-card .m-what { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-body); max-width: var(--measure); }   /* 줄 길이 45em — 직접 고르기 목록처럼 넓은 자리에서도 지킨다 */
.m-spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin: 4px 0 0; border-top: 1px solid var(--line); }
.m-spec > div, .s-spec > div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; }   /* 표는 16px(글씨 척도). 15px 였을 때 데스크톱 16px 이상 비율이 80% 밑으로 내려갔다(2026-09-22 density.py) */
.m-spec dt, .s-spec dt { color: var(--ink-caption); font-weight: 600; }
.m-spec dd, .s-spec dd { margin: 0; color: var(--ink); font-weight: 600; }
/* 사양 두 열은 한 칸이 15em(240px) 은 돼야 읽힌다 — 좁아지면 한 열로, 더 좁아지면 이름 아래 값으로 쌓는다.
   순서 주의: 위의 '.m-spec > div' 기본 규칙보다 뒤에 와야 먹는다 */
/* 사양표는 화면 폭이 아니라 '카드 폭'으로 접는다 — 같은 1280px 에서도 결과 카드(옆 패널이 있어 좁다)와
   직접 고르기 카드(전체 폭)는 글 열 너비가 두 배 넘게 차이 난다. 한 칸은 15em(240px) 밑으로 내려가면 안 된다 */
@container (min-width: 620px) { .m-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 470px) { .m-spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* 아주 좁은 카드(320px 안팎): 로고 두 개까지 한 줄에 담으려면 여기서 한 번 더 줄인다 */
@container (max-width: 360px) { .m-card.has-shot .m-brand { padding-left: 4px; padding-right: 7px; } .m-card.has-shot .m-brand small { font-size: 12px; } }
.m-fit { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.m-fit li { position: relative; margin: 0; padding: 7px 12px 7px 30px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-size: 14px; font-weight: 700; line-height: 1.35; }
.m-fit li::before { content: ''; position: absolute; left: 11px; top: 50%; width: 10px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: translateY(-70%) rotate(-45deg); }
.m-act { display: flex; align-items: center; justify-content: flex-start; gap: 10px 14px; flex-wrap: wrap; margin-top: 6px; }
.m-act .m-shop { margin-left: auto; }   /* 단추 둘은 왼쪽에 붙이고 검색 링크만 오른쪽 끝 */
.m-shop { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.m-shop:hover { color: var(--accent-hover); }
@media (max-width: 600px) { .m-price { font-size: 17px; } }

/* 대화상자: 데스크톱은 가운데 종이 한 장, 폰은 아래에서 올라오는 시트 */
html.sheet-open { overflow: hidden; }
.sheet { border: 0; padding: 0; background: transparent; color: inherit; width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: visible; }
.sheet::backdrop { background: rgba(36, 28, 20, .58); }
.sheet-in { position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-radius: 18px; padding: clamp(24px, 3.4vw, 44px); box-shadow: 0 30px 80px -20px rgba(20, 14, 8, .55); }
.sheet-x { position: sticky; top: 0; float: right; z-index: 2; width: 44px; height: 44px; margin: -8px -8px 0 12px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper-raised); font: inherit; font-size: 24px; line-height: 1; color: var(--ink-muted); cursor: pointer; }
.sheet-x:hover { border-color: var(--line-input); color: var(--ink); }
.s-eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--accent); }
.s-model h2, .sheet .b-head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -.025em; }
.s-what { margin: 14px 0 0; font-size: 17px; line-height: 1.75; color: var(--ink-body); }
.s-spec { margin: 22px 0 0; border-top: 1px solid var(--line); }
.s-spec > div { grid-template-columns: 6.5em minmax(0, 1fr); padding: 11px 0; font-size: 16px; }
.s-list { margin-top: 22px; }
.s-list > b, .b-part > b { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--ink-caption); }
.s-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.s-list li { position: relative; margin: 0; padding-left: 26px; font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.s-list.good li::before { content: ''; position: absolute; left: 3px; top: .5em; width: 11px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.s-list.watch li::before { content: '!'; position: absolute; left: 0; top: .22em; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-hover); font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
.s-note { margin: 22px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--paper-sunk); font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.s-links { margin: 10px 0 0; font-weight: 700; }
.s-links a { display: inline-flex; align-items: center; min-height: 44px; }
.s-links .s-checked { margin-right: 14px; font-size: 14px; font-weight: 500; color: var(--ink-caption); font-variant-numeric: tabular-nums; }
.s-sub { margin: 34px 0 0; padding-top: 28px; border-top: 1px solid var(--line-strong); font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--ink-caption); }
.sheet .b-block { margin-top: 18px; }
.sheet .b-block + .b-block { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .sheet { width: 100vw; margin: auto 0 0; max-height: 92vh; max-height: 92dvh; }
  .sheet-in { border-radius: 18px 18px 0 0; padding: 22px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: no-preference) { .sheet[open] .sheet-in { animation: sheet-in .22s ease-out; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 브랜드 한 곳: 이름 → 한 줄 소개 → 연표 → 소리 → 입문자가 만나는 라인 → 국내 → 추천 모델 → 출처 */
.b-head h2, .b-head h3 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; line-height: 1.3; }
.b-meta { margin: 6px 0 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.b-one { margin: 14px 0 0; font-size: 17px; line-height: 1.75; color: var(--ink-body); max-width: var(--measure); }
.b-story { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
.b-story::before { content: ''; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--line-input); }
.b-story li { position: relative; display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 12px; margin: 0; padding: 7px 0 7px 24px; font-size: 16px; line-height: 1.65; }
.b-story li::before { content: ''; position: absolute; left: 0; top: 1.02em; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.b-story b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-story p { margin: 0; color: var(--ink-body); max-width: var(--measure); }
.b-part { margin-top: 24px; }
.b-part p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-body); max-width: var(--measure); }
.b-lines { margin: 0; border-top: 1px solid var(--line); }
.b-lines > div { display: grid; grid-template-columns: minmax(6em, 8.5em) minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.6; }
.b-lines dt { font-weight: 700; color: var(--ink); }
.b-lines dd { margin: 0; color: var(--ink-muted); max-width: var(--measure); }
.b-models { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.b-models li { margin: 0; }
.b-models button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper-raised); font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.b-models button span { font-size: 16px; font-weight: 700; line-height: 1.35; }
.b-models button small { font-size: 14px; color: var(--ink-caption); }
.b-models button:hover { border-color: var(--accent); background: var(--paper-tint); }
.b-src { margin: 22px 0 0; font-size: 14px; color: var(--ink-caption); word-break: break-all; }
.b-src a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; display: inline-block; }
@media (max-width: 600px) { .b-story li { grid-template-columns: minmax(0, 1fr); gap: 0; } .b-lines > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* 브랜드 이야기 페이지 */
/* 칩은 스크립트가 나중에 그려서 '옆으로 더 있음' 단서(main.js)가 붙지 않는다 → 다섯 개뿐이니 밀지 않고 줄을 바꾼다 */
.chips.b-chips { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
/* 바로 가기: 로고를 보고 찾는다(2026-09-20 사용자 요청) — 흰 칸에 로고, 그 아래 이름. 로고가 없으면 이름만 남는다 */
.b-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; margin: 18px 0 8px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.b-index a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 96px; padding: 14px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.3; color: var(--ink-body); text-align: center; }
.b-index a b { font-weight: 600; }
.b-index a:hover { border-color: var(--ink); color: var(--ink); }
.i-logo { display: flex; align-items: center; justify-content: center; height: 38px; }
.i-logo img { display: block; width: auto; height: auto; max-width: 108px; max-height: 38px; object-fit: contain; }
/* 폰은 3열로 고정한다 — auto-fill 은 320px 에서 2열이 되어 35개 중 하나가 혼자 남는다 */
@media (max-width: 600px) { .b-index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .b-index a { min-height: 88px; padding: 12px 8px 10px; } .i-logo { height: 32px; } .i-logo img { max-width: 100%; max-height: 32px; } .i-logo { width: 100%; } }
.b-all > .b-block { padding: clamp(36px, 5vw, 60px) 0; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 88px; }
/* 넓은 화면: 왼쪽은 이름 · 소개 · 연표, 오른쪽은 소리 · 라인 · 모델 — 한 열로 두면 오른쪽 절반이 빈다 */
@media (min-width: 961px) { .b-all > .b-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; } .b-all .b-side > .b-part:first-child { margin-top: 6px; } }
.b-all > .b-block:last-child { border-bottom: 0; }

.r-step-note { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.linky { display: inline-flex; align-items: center; font: inherit; font-weight: 700; color: var(--accent-hover); background: none; border: 0; padding: 4px 0; min-height: 30px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linky:hover { color: var(--accent); }
/* 제품을 고르지 않고 넘어가는 두 가지 — 가격대만 담기 · 그 가격대로 바로 검색하기.
   문장 속 밑줄 링크였는데 읽기 어렵다고 해서(2026-09-20) '더 보기'와 같은 줄 카드로 바꿨다 */
.r-step-more { display: grid; gap: 10px; margin-top: 14px; }
.r-opt { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; min-height: 56px; padding: 12px 44px 12px 16px; position: relative; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink-body); }
.r-opt b { font-size: 16px; font-weight: 700; color: var(--ink); }
.r-opt small { font-size: 14px; line-height: 1.5; color: var(--ink-caption); }
.r-opt::after { content: '→'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-caption); }
@media (hover: hover) { .r-opt:hover { border-color: var(--accent); color: var(--ink); } .r-opt:hover::after { color: var(--accent); } }
@media (min-width: 761px) { .r-step-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m-choose.is-on { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight: 700; }
/* 고르는 카드: 카드 아무 데나 눌러도 골라지고, 왼쪽 동그라미에 체크가 들어간다(2026-09-20 사용자 요청) */
.m-card[data-choose-card] { position: relative; cursor: pointer; padding-left: calc(clamp(18px, 2.2vw, 24px) + 32px); }
.m-mark { position: absolute; left: clamp(14px, 1.6vw, 18px); top: clamp(18px, 2.2vw, 24px); width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-input); background: var(--paper-raised); }
.m-mark::after { content: ''; position: absolute; left: 5px; top: 7px; width: 10px; height: 5px; border-left: 2.5px solid #FFF; border-bottom: 2.5px solid #FFF; transform: rotate(-45deg); opacity: 0; }
.m-card.is-chosen { border: 1.5px solid var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
/* 목록 맨 아래의 '직접 검색해서 살게요' — 제품 카드가 아니라 고르는 칸이라 점선으로 구분한다 */
.m-self { border-style: dashed; background: var(--paper-raised); }   /* 바탕은 위 제품 카드와 같은 흰색 — 점선만 다르다(2026-09-20 사용자 지적) */
.m-self .m-name { font-size: 18px; }
.m-self .m-what { margin: 0; font-size: 15px; color: var(--ink-muted); }
.m-card.is-chosen .m-mark { border-color: var(--ok); background: var(--ok); }
.m-card.is-chosen .m-mark::after { opacity: 1; }
@media (hover: hover) { .m-card[data-choose-card]:hover { border-color: var(--line-input); } .m-card[data-choose-card]:hover .m-mark { border-color: var(--ok); } }
/* 폰에서도 동그라미는 카드 왼쪽에 제 자리를 갖는다 — 사진이나 제목 위에 얹으면 겹쳐 보인다(2026-09-20 사용자 지적) */
@media (max-width: 600px) {
  /* 폰은 한 열이라 왼쪽 여백을 두지 않는다(사진이 가운데로 와야 한다). 동그라미도 띄우지 않고 카드 맨 위 한 줄로 앉힌다 —
     그래야 가격 · 브랜드 로고 · 제품명이 모두 같은 지점에서 시작한다(2026-09-20 사용자 지적) */
  .m-card[data-choose-card] { padding-left: clamp(18px, 2.2vw, 24px); }
  .m-mark { position: relative; left: 0; top: 0; order: 0; width: 24px; height: 24px; margin-bottom: -2px; }   /* 카드 맨 위 왼쪽 한 줄 — static 으로 두면 ::after 체크가 날아간다 */
  .m-mark::after { left: 5px; top: 7px; }
  .wide-only { display: none; }   /* 좁은 화면에서는 단추 글자를 줄인다 — 두 줄로 접히면 안 된다 */
}
/* '전부 지우고 다시 시작'은 다음 단계 패널에 붙어 있으면 그 패널의 일부로 읽힌다 → 선으로 끊고 무엇을 지우는지 적는다(2026-09-20 사용자 지적) */
.bd-reset { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--line-strong); }
.bd-reset b { display: block; font-size: 16px; color: var(--ink); }
.bd-reset p { margin: 4px 0 0; max-width: var(--measure); font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.bd-ph { grid-row: 1 / span 4; display: block; width: clamp(96px, 17vw, 150px); aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-sunk); }
.bd-ph img { width: 100%; height: 100%; object-fit: cover; }
.bd-row.has-ph { grid-template-columns: max-content auto minmax(0, 1fr) auto; }
.bd-row.has-ph h3 { grid-column: 3; }
.bd-row.has-ph .bd-p { grid-column: 4; }
.bd-row.has-ph .bd-ans, .bd-row.has-ph .bd-top, .bd-row.has-ph .bd-edit { grid-column: 3 / -1; }
@media (max-width: 600px) { .bd-row.has-ph { grid-template-columns: auto minmax(0, 1fr); } .bd-ph { grid-row: 2 / span 4; width: 84px; } .bd-row.has-ph h3 { grid-column: 2; grid-row: 2; } .bd-row.has-ph .bd-p { grid-column: 2; grid-row: 3; } .bd-row.has-ph .bd-ans, .bd-row.has-ph .bd-top, .bd-row.has-ph .bd-edit { grid-column: 2; } }

/* 스크립트가 그리는 목록은 자리를 미리 잡아 둔다 — 안 그러면 뒤늦게 들어온 내용이 아래를 밀어내 화면이 출렁인다(audit 의 CLS) */
#brands { min-height: 150vh; }
#gear-types, #gear-all { min-height: 90vh; }
#gear-stage, #pick-stage { min-height: 60vh; }
#pick-direct { min-height: 120vh; }

/* 이어서 고르기(기타 → 앰프 → 이펙터 → 정리)와 '내 세트' 요약 — pick · amps · effects · build */
/* 상자 없이 결과 맨 아래에 붙는 줄 — '답 고치기 · 처음부터'와 같은 모양이다(2026-09-20 사용자 요청: 안내 문장 없이 단추만) */
.r-step-act { display: flex; flex-wrap: wrap; gap: 10px; }
.r-step-act .btn { min-height: 48px; }
/* 단추 줄은 문항의 '이전 / 결과 보기'처럼 화면 아래에 붙어 따라다닌다(2026-09-20 사용자 요청).
   · 제품을 고르기 전에는 나오지 않는다 — 결과에 .has-pick 이 붙어야 보인다(제품 카드 · '직접 검색해서 살게요' · '알아서 정하기' 중 하나를 누르면 붙는다).
   · .r-step 을 display:contents 로 풀어야 붙박이(sticky)의 기준이 결과 전체가 된다 — 상자 안에 두면 그 상자 높이만큼만 붙는다. */
.r-step { display: contents; }
.r-step-act { display: flex; position: sticky; bottom: 0; z-index: 5; order: 5; grid-column: 1 / -1; padding: 12px 0 14px; background: linear-gradient(to top, var(--paper) 82%, rgba(248, 244, 237, 0)); }
.r-step-act .go-next { display: none; }                      /* 다음 단계 단추는 무언가를 고른 뒤에 나타난다 */
.has-pick .r-step-act .go-next { display: inline-flex; }
.r-step-act .r-restart { margin-left: auto; }                /* '처음부터'는 늘 오른쪽 끝에 있다 */
/* 결과 화면에는 아래에 붙는 단추 줄이 있다 — '맨 위로' 동그라미가 그 위를 덮지 않게 올린다 */
.result.show ~ .totop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
body:has(.result.show) .totop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.r-step-more { order: 5; grid-column: 1 / -1; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
@media (max-width: 600px) {
  .r-step-act { margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .r-step-act .btn { flex: none; min-height: 50px; padding: 0 12px; }   /* 셋이 한 줄에 들어가야 한다 — 늘리면 글자가 접힌다 */
}

.bd-list { list-style: none; display: grid; gap: clamp(14px, 1.6vw, 18px); margin: 0 0 clamp(24px, 3vw, 32px); padding: 0; }
.bd-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; gap: 6px clamp(16px, 2vw, 24px); align-items: start; padding: clamp(18px, 2.2vw, 24px); background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 14px; }
.bd-row > .bd-k { grid-row: 1 / span 3; font-size: 15px; font-weight: 700; color: var(--ink-caption); }
.bd-row h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -.02em; }
.bd-row .bd-p { grid-column: 3; grid-row: 1; font-size: clamp(18px, 1.7vw, 21px); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-row .bd-ans { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.bd-row .bd-ans li { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 14px; color: var(--ink-body); }
.bd-row .bd-ans li b { font-size: 12px; font-weight: 600; color: var(--ink-caption); }
.bd-row .bd-top { grid-column: 2 / -1; margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.bd-row .bd-edit { grid-column: 2 / -1; margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.bd-row .bd-edit a { display: inline-flex; align-items: center; min-height: 34px; }
.bd-row.is-empty { border-style: dashed; background: none; }
.bd-sum { padding: clamp(24px, 3vw, 34px); border-radius: 16px; background: var(--dark); color: var(--on-dark, #F4EDE3); }
.bd-sum .label { display: block; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: #C9B49C; }
.bd-sum .total { display: block; margin: 8px 0 18px; font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bd-sum ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(244, 237, 227, .18); }
.bd-sum li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(244, 237, 227, .18); font-size: 16px; }
.bd-sum li b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 공유(2026-09-22): 어두운 총예산 패널(.r-total · .bd-sum) 안의 선 버튼과 알림 줄. 채움이 아니다 — 채움은 헤더 하나뿐 */
.btn-share { align-self: flex-start; margin-top: 4px; border: 1.5px solid var(--dark-accent); color: var(--dark-accent-text); background: transparent; }
.bd-sum .btn-share { margin-top: 18px; }
.btn-share:hover { background: rgba(245, 227, 214, .08); border-color: var(--dark-accent-text); color: #fff; }
.share-note { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--dark-accent-text); }
.share-note .share-url { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--dark-line); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--dark-text); font: inherit; font-size: 16px; }
/* 받은 링크로 연 내 세트: 맨 위에 '친구가 보낸 세트' 안내 */
.bd-shared { margin: 0 0 20px; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper-tint); }
.bd-shared b { display: block; font-size: 17px; color: var(--ink); }
.bd-shared p { margin: 4px 0 0; color: var(--ink-muted); }
.bd-shared.bad { color: var(--ink-muted); }
.bd-sum p { margin: 16px 0 0; font-size: 15px; line-height: 1.7; color: #C9B49C; }
@media (max-width: 600px) { .bd-row { grid-template-columns: minmax(0, 1fr) auto; } .bd-row > .bd-k { grid-row: auto; grid-column: 1 / -1; } .bd-row h3 { grid-column: 1; grid-row: 2; } .bd-row .bd-p { grid-column: 2; grid-row: 2; } .bd-row .bd-ans, .bd-row .bd-top, .bd-row .bd-edit { grid-column: 1 / -1; } }

/* 표기 원칙 · 출처 같은 안내는 접어 둔다(2026-09-20 사용자 지적: "굳이 쓸 필요가 없거나 좀 더 작은 툴팁으로").
   hover 툴팁은 폰에서 열 수 없어 <details> 로 만든다 — 눌러서 열고 키보드로도 된다. 내용은 그대로 남겨 신뢰 표기를 지킨다 */
.note-tip { margin: 16px 0 0; }
.note-tip > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-raised); font-size: 15px; font-weight: 600; color: var(--ink-muted); cursor: pointer; list-style: none; transition: border-color .15s, color .15s; }
.note-tip > summary::-webkit-details-marker { display: none; }
.note-tip > summary::before { content: ''; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) center 5.5px / 1.5px 5px no-repeat, linear-gradient(currentColor, currentColor) center 3px / 1.5px 1.5px no-repeat; }
.note-tip > summary::after { content: '자세히'; font-size: 13px; font-weight: 500; color: var(--ink-caption); }
.note-tip[open] > summary { border-color: var(--line-input); color: var(--ink-body); }
.note-tip[open] > summary::after { content: '접기'; }
.note-tip > summary:hover { border-color: var(--line-input); color: var(--ink-body); }
.note-tip > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.note-tip p { margin: 12px 0 0; max-width: var(--measure); font-size: 16px; line-height: 1.75; color: var(--ink-muted); }

/* ── 앰프 고르기 · 이펙터 고르기 (amps.html · effects.html — js/gear-ui.js) ──
   질문 카드(.q-card · .opts · .q-nav)와 제품 카드(.m-card)는 추천(pick) · 카탈로그의 것을 그대로 쓴다. 여기에는 이 두 페이지에만 있는 것만 둔다 */
.gear-pick { padding-top: clamp(8px, 2vw, 20px); }
.gear-pick .pick-head h2, .g-result .pick-head h2 { font-size: clamp(28px, 21px + 1.8vw, 42px); line-height: 1.25; letter-spacing: -.03em; margin: 0 0 14px; }
.g-result { max-width: 1040px; margin: 0 auto; }
.g-result .pick-head { max-width: none; margin-bottom: 22px; }
.g-result .pick-head h2 em { font-style: normal; color: var(--accent-hover); }
.g-ans { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.g-ans li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-raised); font-size: 15px; color: var(--ink-body); }
.g-ans li b { font-size: 13px; font-weight: 600; color: var(--ink-caption); }
.g-notes p { margin: 0 0 8px; max-width: var(--measure); font-size: 16px; line-height: 1.7; }
.g-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin: 24px 0 36px; }
.g-why:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.g-type { position: relative; padding: clamp(20px, 2.4vw, 28px); background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 16px; }
.g-type:first-child { border: 1.5px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.g-rank { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent-hover); }
.g-type h3 { margin: 0 0 10px; font-size: clamp(21px, 2vw, 25px); letter-spacing: -.02em; }
.g-one { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--ink-body); }
.g-watch { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.65; color: var(--ink-muted); }
.g-watch b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--ink-caption); }
.g-result .q-nav { margin-top: 24px; }
.g-result .q-nav .btn { flex: 0 1 auto; }
@media (min-width: 961px) { .g-result .m-list, #gear-all .m-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .g-result .m-list > li:last-child:nth-child(odd), #gear-all .m-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* 장비 사양은 값이 길다(노브 이름 · 단자 목록) — 카드가 두 열로 놓이는 이 페이지에서는 사양을 한 열로 둔다 */
.r-more { margin: 12px 0 0; font-size: 16px; font-weight: 600; }
.g-next-btns { display: flex; flex-wrap: wrap; gap: 10px; }
#gear-page .m-spec { grid-template-columns: minmax(0, 1fr); }
#gear-page .m-spec > div { grid-template-columns: 6.4em minmax(0, 1fr); }
/* 사진 옆에는 이름 · 한 줄 설명까지만 두고, 사양부터는 카드 폭을 다 쓴다 — 사진 옆 200px 남짓한 칸에 긴 사양 값이 대여섯 줄로 접혔다 */
#gear-page .m-card.has-shot > .m-shot { grid-row: 1 / span 4; }
#gear-page .m-card.has-shot > .m-spec, #gear-page .m-card.has-shot > .m-fit, #gear-page .m-card.has-shot > .m-act { grid-column: 1 / -1; }
#gear-page .m-what { max-width: var(--measure); }
@media (max-width: 600px) { #gear-page .m-spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.gear-pick .q-nav { max-width: 720px; }
/* 종류 칩은 16개라 좁은 화면에서 세 줄이 넘는다 → 960 이하에서는 옆으로 민다(오른쪽 끝을 흐려 더 있다는 것을 알린다) */
/* 종류 칩은 16개라 어느 폭에서도 두 줄을 넘는다 → 늘 옆으로 민다(main.js 의 more-r 가 가장자리를 흐린다) */
.chips.b-chips.g-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter, 20px) * -1); padding-right: 36px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.g-chips .chip { flex: none; }
@media (max-width: 600px) { #brands .chips.b-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 36px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); } #brands .b-chips .chip { flex: none; } }

.g-group + .g-group { margin-top: clamp(36px, 5vw, 56px); }
.g-gh { margin: 0 0 16px; font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -.02em; }
/* 열 수를 분기점으로 정한다(auto-fill 은 2열에서 3개·5개짜리 묶음의 마지막 카드가 혼자 남는다) — 2열일 때 홀수 번째 마지막 카드는 한 줄을 다 쓴다 */
.g-types { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 761px) { .g-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-types > .g-tcard:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1121px) { .g-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-types > .g-tcard:last-child:nth-child(odd) { grid-column: auto; } .g-types > .g-tcard:only-child { grid-column: 1 / -1; } }
/* 묶음에 종류가 하나뿐이면(튜너 · 멀티이펙터 · 인터페이스 …) 한 줄을 다 쓴다 — 3열 중 한 칸만 차지하면 옆이 빈다. 넓어진 카드는 아래 컨테이너 질의로 사진이 옆에 눕는다 */
.g-types > .g-tcard:only-child { grid-column: 1 / -1; }
.g-tcard { display: block; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; scroll-margin-top: 96px; }
/* 종류 카드의 사용 예시 사진(img/gt/<키>.webp, 4:3 — tools/build_gear_photos.py). 카드가 좁으면 사진이 위(16:10 로 잘라 채움), 카드가 넓으면(600px~) 사진 왼쪽 + 글 오른쪽.
   2026-09-20 사용자 지적: 넓은 카드 위쪽 띠에 작은 그림 하나가 떠 있어 어색했다 → 사진이 칸을 꽉 채우게 하고, 넓을 때는 옆으로 눕힌다(컨테이너 질의 — 화면 폭이 아니라 카드 폭으로 정한다) */
.g-ph, .g-tpic { margin: 0; }
.g-tcard { container-type: inline-size; }
.g-ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-sunk); border-bottom: 1px solid var(--line); }
.g-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-ph.is-svg img { object-fit: contain; padding: 14px 0 0; }
.g-ph figcaption { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(28, 23, 18, .62); color: #FFF9F0; font-size: 13px; line-height: 1.4; }
.g-ph.is-svg figcaption { background: none; color: var(--ink-caption); }
@container (min-width: 600px) {
  .g-tcard-in { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: stretch; }
  .g-tcard-in > .g-ph { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--line); }
}
.g-tpic img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-sunk); }
.g-tpic.is-svg img { object-fit: contain; }
.g-tpic figcaption { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-caption); text-align: center; }
.g-type.has-pic { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 26%, 150px); column-gap: clamp(14px, 2vw, 24px); align-content: start; }
.g-type.has-pic > * { grid-column: 1; }
.g-type.has-pic > .g-tpic { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
.g-tb { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2vw, 24px); min-width: 0; }
.g-tb h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 20px; letter-spacing: -.02em; }
.g-tb h4 small { font-size: 13px; font-weight: 500; color: var(--ink-caption); }
.g-tb .g-one { margin: 0; }
.g-facts { margin: 0; border-top: 1px solid var(--line); }
.g-facts > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.g-facts dt { margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--ink-caption); }
.g-facts dd { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.g-tb .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 600px) { .g-why { grid-template-columns: minmax(0, 1fr); } }

/* ── 가이드 글 · 검색 ─────────────────── */
.article { max-width: 720px; margin: 0 auto; }
.article > .crumbs { padding: 0 0 17px; margin-top: -11px; }
.article .cat { display: flex; gap: 8px; margin-bottom: 18px; }
.article h1 { margin-bottom: 18px; }
.article .meta { color: var(--ink-caption); font-size: 15px; font-weight: 500; display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; align-items: center; }
/* 글 속 '이어서 읽기' 목록: 링크만 있는 줄은 버튼처럼 눌리는 자리라 누르는 높이를 24px 넘게 준다(verify.py '터치' 항목, 2026-09-22) */
.article .go-list li a { display: inline-block; padding: 4px 0; }
.article .lead { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.8; color: var(--ink-body); }
.article p, .article li { font-size: clamp(16px, .75rem + .8vw, 18px); line-height: 1.85; color: var(--ink-body); }
.article p { margin-bottom: 24px; }
.article h2 { font-size: clamp(24px, 20px + 1vw, 32px); line-height: 1.35; letter-spacing: -.02em; margin: clamp(44px, 6vw, 64px) 0 16px; }
.article h3 { font-size: clamp(19px, 17px + .45vw, 23px); margin: 36px 0 12px; }
.article figure { margin: 28px 0; }
.article figure img { border-radius: 14px; width: 100%; height: auto; border: 1px solid var(--line-strong); }
.article figcaption { font-size: 14px; color: var(--ink-caption); margin-top: 10px; }
.article .table-wrap table { min-width: 0; }
.article .callout p, .article .callout li { font-size: 17px; line-height: 1.75; }
.article .next p { color: var(--dark-body); }
.article .next .small { font-size: 15px; }
.related { max-width: 720px; margin: 48px auto 0; }
.related h2 { font-size: clamp(20px, 18px + .4vw, 24px); margin: 0 0 16px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.related-grid a { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-strong); color: var(--ink); min-height: 44px; }
.related-grid a:nth-child(-n+2) { border-top: 2px solid var(--ink); }
.related-grid a:hover { color: var(--accent); }
.related-grid span { font-size: 13px; font-weight: 600; color: var(--accent-hover); }
.related-grid b { font-size: 19px; line-height: 1.45; }
@media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; gap: 0; } .related-grid a { padding: 14px 0; } .related-grid a:nth-child(n+2) { border-top: 1px solid var(--line-strong); } .related-grid b { font-size: 17px; } }
.results h3 { margin-top: 32px; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.results .result { display: block; min-height: 44px; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.results .result:hover { background: var(--paper-raised); color: var(--ink); }
.results .result b { display: block; font-size: 18px; }
.results .result small { color: var(--ink-muted); }
.tools-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tool { display: flex; gap: 12px; align-items: center; padding: 16px 18px; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); }
.tool:hover { border-color: var(--line-input); color: var(--ink); }
.tool .ic { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--accent-hover); flex: none; }
.tool b { display: block; }
.tool small { color: var(--ink-muted); }
@media (max-width: 960px) { .tools-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tools-strip { grid-template-columns: 1fr; } }

/* ── 기타 ─────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 48px); align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.img-round { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 16px; }
.kv dt { color: var(--ink-caption); font-weight: 500; }
.kv dd { margin: 0; }

/* ── 푸터 (다크) ──────────────────────── */
.site-footer { background: var(--dark-deep); color: var(--dark-caption); padding: 72px 0 44px; font-size: 15px; border-top: 1px solid #34291D; }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-cols h4, .footer-cols .fh { margin: 0 0 12px; letter-spacing: 0; line-height: 1.4; font-size: 14px; font-weight: 700; color: var(--dark-body); }
.footer-cols .fbrand { font-size: 18px; font-weight: 800; color: var(--dark-text); margin-bottom: 12px; }
.footer-cols .fbrand small { font-size: 9px; font-weight: 600; letter-spacing: .18em; color: var(--dark-caption); margin-left: 6px; }
.footer-cols a { display: block; padding: 3px 0; margin: 0 0 4px; color: var(--dark-caption); font-size: 15px; line-height: 1.6; }
.footer-cols a:hover { color: var(--dark-text); }
.footer-cols p { font-size: 15px; line-height: 1.7; max-width: 280px; }
.footer-cols p.small { font-size: 14px; color: var(--dark-caption); }
.biz { font-size: 14px; color: var(--dark-caption); line-height: 1.8; margin-top: 36px; padding-top: 24px; border-top: 1px solid #34291D; }
.biz strong { color: var(--dark-body); }
.biz a { color: var(--dark-body); }
.footer-bottom { margin-top: 18px; font-size: 14px; color: var(--dark-caption); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom .legal { display: flex; gap: 4px 16px; flex-wrap: wrap; }
.footer-bottom .legal a { color: var(--dark-body); display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom .legal strong { color: var(--dark-text); }
@media (max-width: 960px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .footer-cols > div:first-child { grid-column: 1 / -1; } .site-footer { padding: 40px 0 28px; } .footer-cols a { display: flex; align-items: center; min-height: 44px; padding: 0; margin: 0; } .footer-cols h4, .footer-cols .fh { margin-bottom: 4px; } }

/* ── 반응형 배치 (2026-09-18, 기준은 ../13_반응형_레이아웃_리서치_및_점검.md) ─────────
   분기점은 셋: 600(폰↔태블릿) · 760(글 두 덩이가 나란히 설 수 있는 폭) · 960(태블릿↔데스크톱, 헤더·사이드바). 1120 은 미세 조정(헤더 간격 · 4열 카드 → 3열) 전용.
   새 구성요소도 이 셋 중에서 고른다. 여백·글자 크기는 분기점 대신 clamp() 로 잇는다. */
/* 읽는 글의 줄 길이: 한글 40자 안팎 */
.page-hero .lead, .section-head p, details.faq .a, .callout p, .callout li, .narrow > p, .narrow > ul, .narrow > ol, .stage li, .stage p,
main .container > p:not(.notice), main .container > ul:not([class]), main .container > ol:not([class]), .pick-head p, .card-body > p, .card-body > ul, .sample-note p, .help-card p, .help-card li, .dark-card p { max-width: var(--measure); }
.pick.center .pick-head p { margin-left: auto; margin-right: auto; }
/* 상자째 넓어지는 것은 상자 폭을 묶는다: 안내 상자 · 체크리스트 · 폼 · 검색칸 (태블릿·데스크톱에서 입력칸과 버튼을 화면 끝까지 늘리지 않는다) */
.notice { max-width: 42rem; }
.checklist { max-width: 680px; }
.form { max-width: 680px; }
.search, .hero-search { max-width: 640px; }
@media (min-width: 601px) { .sample-note .btn { align-self: flex-start; } }
.article .callout p, .article .callout li { max-width: none; }
/* 격자에 혼자 남는 카드를 만들지 않는다 — 2열일 때 홀수 개면 마지막 카드가 두 칸을 쓰고, 사진 카드는 가로로 눕힌다 */
@media (min-width: 601px) {
  .grid-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-2 > .card:last-child:nth-child(odd):has(> .card-img) { flex-direction: row; }
  .grid-2 > .card:last-child:nth-child(odd) > .card-img { width: 42%; flex: none; aspect-ratio: auto; min-height: 220px; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .grid-3 > :last-child:nth-child(odd), .grid-4 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid-3 > .card:last-child:nth-child(odd):has(> .card-img), .grid-4 > .card:last-child:nth-child(odd):has(> .card-img) { flex-direction: row; }
  .grid-3 > .card:last-child:nth-child(odd) > .card-img, .grid-4 > .card:last-child:nth-child(odd) > .card-img { width: 42%; flex: none; aspect-ratio: auto; min-height: 220px; }
}
/* 3열일 때 3n+1 개면 마지막 네 장을 2+2 로 (여섯 칸 격자에서 두 칸씩 → 세 칸씩) */
@media (min-width: 961px) {
  .grid-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-3 > * { grid-column: span 2; }
  .grid-3 > :nth-child(3n+1):nth-last-child(4), .grid-3 > :nth-child(3n+1):nth-last-child(4) ~ * { grid-column: span 3; }
}
/* 4열 카드는 한 장이 240px 은 돼야 글이 읽힌다 → 961~1120 에서는 3열(같은 여섯 칸 규칙) */
@media (min-width: 961px) and (max-width: 1120px) {
  .grid-4 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-4 > * { grid-column: span 2; }
  .grid-4 > :nth-child(3n+1):nth-last-child(4), .grid-4 > :nth-child(3n+1):nth-last-child(4) ~ * { grid-column: span 3; }
}
/* 강사 카드는 사진 옆 글 칸이 260px 은 돼야 읽힌다 → 960 이하에서는 한 줄에 한 명 */
@media (max-width: 960px) { #teachers.grid { grid-template-columns: 1fr; } }
.teacher p { max-width: 40em; }
/* 카드가 좁으면(2열 태블릿·폰) '항목 | 값' 표를 위아래로 쌓는다 — 화면 폭이 아니라 카드 폭을 본다 */
.card-body { container-type: inline-size; }
@container (max-width: 330px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dt { margin-top: 10px; font-size: 14px; } .kv dt:first-child { margin-top: 0; } }
.level-box { container-type: inline-size; }
@container (max-width: 560px) { .level-check { grid-template-columns: 1fr; } }
/* 추천 결과가 한 줄로 쌓일 때: 총예산이 본문 끝으로 밀리지 않게 '이유' 바로 다음에 둔다 */
@media (max-width: 960px) {
  .r-grid { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .r-main, .r-side { display: contents; }
  /* '이어서 고르기'가 '더 보기'보다 위다 — 다음 걸음이 먼저다(2026-09-20 사용자 지적) */
  .r-photo { order: 1; } .r-why { order: 2; } .r-total { order: 3; } .r-block { order: 4; } .r-next { order: 6; }
}
/* 본문 옆 패널(380~400px)은 본문이 절반 이상일 때만 나란히 선다 → 961~1120 에서는 패널을 320~340px 로 */
@media (max-width: 1120px) { .r-grid, .teach-top { grid-template-columns: minmax(0, 1fr) 320px; } .tools-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 960px) { .teach-top, .tools-grid { grid-template-columns: 1fr; } }
/* sticky 는 세로 공간이 넉넉할 때만: 옆 패널(약 740px)이 화면보다 크면 아래쪽 '다음 단계'가 끝까지 안 보인다 */
@media (max-height: 860px) { .r-side { position: static; } }
/* 가로로 든 폰(높이 480px 이하): 60px 헤더가 화면의 1/6 을 계속 덮지 않게 붙박이를 푼다 */
@media (max-height: 480px) and (max-width: 960px) { .site-header { position: relative; } html { scroll-padding-top: 16px; } }
/* 옆으로 미는 표: 첫 열(무엇에 대한 줄인지)을 붙잡아 둔다. 첫 열이 표의 40% 를 넘으면 main.js 가 .stick-first 를 붙이지 않는다 */
.table-wrap.stick-first th:first-child, .table-wrap.stick-first td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.table-wrap.stick-first td:first-child { background: var(--paper-raised); }
.table-wrap.stick-first tbody tr:nth-child(even) td:first-child { background: var(--paper-tint); }
.table-wrap.stick-first.more-l, .table-wrap.stick-first.more-l.more-r { -webkit-mask-image: none; mask-image: none; }
.table-wrap.stick-first.more-l.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, .15)); }
/* 튜너 기준음 버튼은 줄 수(4·5·6)가 몇이든 한 줄 — 4+2 로 갈라지지 않는다 */
#t-strings { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
#t-strings .chip { padding: 0 2px; white-space: normal; line-height: 1.25; text-align: center; }
/* 탭은 어느 폭에서도 한 줄이다(접히면 위아래 줄이 다른 묶음처럼 보인다). 960 이하에서는 알약 모양으로 풀어 옆으로 밀고, 폰에서는 칩도 같은 방식 (가장자리는 본문 끝까지, 단서는 main.js 의 .more-l · .more-r 흐림) */
@media (max-width: 960px) {
  .tabs:not(.tools-head .tabs) { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-inline: var(--gutter); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs:not(.tools-head .tabs) > * { flex: none; white-space: nowrap; }
  .tabs:not(.tools-head .tabs) { display: flex; max-width: none; border-radius: 0; background: none; padding-top: 0; padding-bottom: 0; gap: 8px; }
  .tabs:not(.tools-head .tabs) .tab { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper-raised); }
  .tabs:not(.tools-head .tabs) .tab.active { border: 1.5px solid var(--accent); background: var(--paper-tint); color: var(--accent-hover); box-shadow: none; }
}
@media (max-width: 600px) {
  .chips, .guide-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-inline: var(--gutter); }
  .chips::-webkit-scrollbar, .guide-filters::-webkit-scrollbar { display: none; }
  .chips > *, .guide-filters > * { flex: none; white-space: nowrap; }
  /* 직접 고르기(#pick-direct)의 칩은 .container 의 바로 자식이 아니라 한 단계 안쪽이다 — 거터 밖으로 빼면 그만큼 가로 스크롤이 생긴다 */
  .chips.d-chips { margin-left: 0; margin-right: 0; padding-left: 0; }
  .r-photo { aspect-ratio: 4/3; }
}
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
/* 추천 1단계의 악기 카드: 601~760 에서 4열이면 한 장이 128px 라 사진 왼쪽 + 글 오른쪽 2열로 눕힌다 (홈 악기 타일에는 쓰지 않는다 — 위 .inst-tiles 참고) */
@media (min-width: 601px) and (max-width: 760px) {
  .inst-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inst-opt { flex-direction: row; align-items: center; gap: 16px; }
  .inst-opt .ph { width: 96px; flex: none; }
}
/* 문항 한 장은 화면에 다 들어와야 한다 — 창이 낮으면(노트북 · 브라우저를 확대해 쓰는 화면) 여백과 제목만 줄인다.
   본문 글씨는 16px 밑으로 내리지 않는다. 2026-09-20 사용자 지적: "선택할 때 아래가 잘리고 화면이 슬라이드된다" */
@media (min-width: 601px) and (max-height: 880px) {
  .pick { padding-top: 20px; }
  /* 1단계(악기 고르기): 사진을 4:3 으로 낮추고, 안내와 시작 버튼을 다시 한 줄에 세운다(쌓으면 150px 이 더 든다) */
  .inst-opt { gap: 10px; padding: 14px; }
  .inst-opt .ph { aspect-ratio: 4/3; }
  .inst-opt b { font-size: 18px; }
  .page-hero { padding-top: 20px; padding-bottom: 20px; }
  .pick-bar { margin-bottom: 10px; }
  .pick-head { margin-bottom: 16px; }
  .pick-head h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 8px; }
  .pick-head p { font-size: 16px; }
  .progress-bar { margin-bottom: 18px; }
  .opts { gap: 10px; }
  .opts label { padding: 15px 20px; }
  .opts .t { font-size: 18px; }
  .q-nav { margin-top: 16px; }
  .q-nav .btn { min-height: 48px; }
}
@media (min-width: 601px) and (max-width: 960px) and (max-height: 880px) {
  .start-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 18px; }
  .start-row .notice { grid-column: 1; grid-row: 1; }              /* 기본 규칙의 5열 배치(1/4 · 4/-1)를 2열에 맞게 다시 준다 — 안 그러면 두 칸이 겹친다 */
  .start-row .q-nav.start { grid-column: 2; grid-row: 1; }
  .start-row .q-nav.start, .start-row .notice { width: auto; max-width: none; }
  .start-row .q-nav.start .btn { min-width: 200px; }
}
@media (min-width: 601px) and (max-height: 760px) {
  /* 선택지가 넷 이상이면 601px 부터 두 열로 — 한 열이면 여섯 줄이 화면을 넘는다 */
  .opts:has(> label:nth-of-type(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts:has(> label:nth-of-type(4)) > label:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .pick { padding-top: 12px; }
  .pick-head { margin-bottom: 12px; }
  .pick-head h2 { font-size: 26px; }
  .pick-head h1 { font-size: 30px; margin-bottom: 8px; }
  .inst-choices { gap: 10px; }
  .inst-opt { padding: 12px; }
  .inst-opt .ph { aspect-ratio: 16/10; }
  .inst-opt.unsure .ph { display: none; }   /* 낮은 창에서는 '아직 모르겠어요' 줄의 작은 사진을 뺀다 — 카드 다섯 장과 시작 버튼이 한 화면에 들어와야 한다 */
  .start-row { margin-top: 12px; }
  .start-row .notice { padding-top: 12px; padding-bottom: 12px; }
  .progress-bar { margin-bottom: 14px; }
  .opts label { padding: 12px 18px; }
  .opts .d { margin-top: 1px; }
}
@media (min-width: 601px) and (max-height: 680px) {
  .pick { padding-top: 8px; }
  .pick-head { margin-bottom: 8px; }
  .progress-bar { margin-bottom: 10px; }
  .opts { gap: 8px; }
  .opts label { padding: 10px 16px; }
  .q-nav { margin-top: 12px; }
}
@media (max-width: 380px) { .grid-4 > .card > .card-img { width: 92px; min-height: 92px; } }
@media (max-width: 600px) {
  .pick-head { margin-bottom: 18px; } .progress-bar { margin-bottom: 20px; } .opts { gap: 12px; } .q-nav { margin-top: 20px; }
  .tool-card .t-row .chip { padding: 0 13px; font-size: 14px; }
}
/* 작은 폰에서는 기준음 버튼 한 줄이면 한 칸이 35px 다 → 3+3 (베이스 4현은 네 칸 한 줄, 5현은 3+2) */
@media (max-width: 380px) { #t-strings { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } #t-strings:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.inst-tile .lbl { font-size: clamp(18px, 2.5vw, 22px); }

/* ── 전수 재확인에서 고친 것 (2026-09-18, ../15_전수_재확인.md) ── */
/* 흐르는 글(소개·중고 가이드) 안의 소제목이 앞 문단에 붙어 있었다 */
.narrow > h2:not(:first-child), main .container > h2:not(:first-child) { margin-top: clamp(40px, 5.5vw, 64px); }
.narrow > h3:not(:first-child) { margin-top: 32px; }
/* 글 묶음의 첫 소제목은 섹션 여백만으로 충분하다(약관·방침에서 머리 글 아래가 172px 비었다) */
.article > h2:first-child { margin-top: 0; }
/* 카드 안 · 가이드 글 안의 표는 칸 여백을 줄인다 — 큰 여백(18x20)은 넓은 표용이다. 좁은 상자에서는 글 칸을 먹는다 */
.card-body th, .card-body td, .article th, .article td { padding: 12px 14px; }
.card-body table { font-size: 15px; }
@media (max-width: 600px) {
  .card-body th, .card-body td, .article th, .article td { padding: 10px; }
  /* 폰에서 네 칸 이상인 표를 화면 폭에 구겨 넣으면 음절마다 줄이 바뀌고 끝 열이 잘린다 → 옆으로 밀게 둔다(첫 열은 main.js 가 붙잡는다) */
  .article .table-wrap table:has(th:nth-child(4)) { min-width: 540px; }
}
/* 추천 문항: 선택지가 넷 이상이면 두 열로 — 1280x800 노트북에서도 질문·선택지·'이전/다음'이 한 화면에 */
@media (min-width: 761px) {
  .opts:has(> label:nth-of-type(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts:has(> label:nth-of-type(4)) > label:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
}
@media (min-width: 961px) and (max-height: 860px) { .pick { padding-top: 28px; } .pick-head { margin-bottom: 18px; } .progress-bar { margin-bottom: 22px; } .opts label { padding: 18px 22px; } .q-nav, .start-row { margin-top: 20px; } }
/* 로드맵: 버튼 옆 안내 글이 버튼을 감싸며 흐르지 않게 */
.stage p:has(> [data-set-stage]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* ── 마감 (2026-09-18 완성도 점검) ─────────
   기준은 ../12_사이트_완성도_리서치_및_점검.md. 모양을 바꾸는 규칙이 아니라 상태·터치·확대·인쇄를 채우는 규칙이다. */
/* iOS 는 16px 미만 입력칸에 초점이 가면 화면을 확대한다 */
@media (max-width: 960px) { .site-search input, .form input, .form select, .form textarea, .filters select, .dark-card input[type=email], .newsletter input, .search, .hero-search input { font-size: 17px; } }
/* 서랍이 열린 동안 뒤 본문은 스크롤되지 않는다 (main.js 가 body.nav-open 을 붙인다) */
@media (max-width: 960px) { body.nav-open { overflow: hidden; } }
/* 터치 기기에는 hover 가 눌린 뒤에도 남는다 — 움직임·바탕 변화는 마우스에서만 */
@media (hover: none) {
  a.card:hover { transform: none; border-color: var(--line-strong); }
  .inst-tile:hover img { transform: none; }
  .row-item:hover, .results .result:hover { background: transparent; }
  .faq-list a:hover::after { transform: none; }
  .icon-btn:hover, .design-switch:hover { background: none; }
}
/* 눌림 상태 — 탭 하이라이트를 끈 대신 */
.row-item:active, .faq-list a:active, .results .result:active, .related-grid a:active { background: var(--paper-sunk); }
a.card:active, .tool-link:active, .inst-opt:active, .opts label:active, .chip:active, .r-next a:active, .level-check label:active { border-color: var(--line-input); background-color: var(--paper-tint); }
.icon-btn:active, .nav a:active, .tab:active { background: var(--neutral-tint); }
.footer-cols a:active, .footer-bottom .legal a:active { color: var(--dark-text); }
/* 본문이 스크립트로 그려지는 동안(가이드 목록·검색 결과·추천) 푸터가 첫 화면에 보였다가 밀려나지 않게 — 짧은 페이지(404)의 푸터도 화면 중간에 뜨지 않는다 */
main { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
/* 문의 메일처럼 한 줄에 혼자 놓인 링크도 24px 는 되게 */
.article p > a[href^="mailto:"] { display: inline-block; padding: 4px 0; }
/* 장비 카드(정사각 사진 11장): 폰에서는 사진이 한 화면씩 차지하지 않게 가로 줄로 */
@media (max-width: 600px) {
  .grid-4 > .card:has(> .card-img) { flex-direction: row; }
  .grid-4 > .card > .card-img { width: 116px; flex: none; aspect-ratio: auto; min-height: 116px; }
  .grid-4 > .card > .card-img + .card-body { padding: 16px; }
  .grid-4 > .card > .card-img + .card-body p { font-size: 15px; line-height: 1.6; }
}
.choice:active, .tool-link:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(36, 28, 20, .06); border-color: var(--accent); background-color: var(--paper-tint); }
/* 옆으로 더 있는 표: 가려진 쪽 가장자리를 흐리게 (main.js 가 more-l · more-r 을 붙인다) */
.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, .15)); }
.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(to left, #000 calc(100% - 44px), rgba(0, 0, 0, .15)); }
.more-l.more-r { -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .15), #000 44px, #000 calc(100% - 44px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(to right, rgba(0, 0, 0, .15), #000 44px, #000 calc(100% - 44px), rgba(0, 0, 0, .15)); }
.table-wrap:focus-visible { outline-offset: 0; }
/* 입력 오류는 손댄 뒤에만 표시한다 */
.form input:user-invalid, .form select:user-invalid, .form textarea:user-invalid { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dark-card input[type=email]:user-invalid { border-color: var(--dark-warn); }
/* 페이지 사이 전환 효과(@view-transition)는 쓰지 않는다.
   켜 두면 링크를 누를 때 브라우저가 옛 화면을 찍어 놓고 붙잡는데,
   안드로이드 웹뷰(카카오톡 인앱 브라우저)에서 그 화면이 풀리지 않아 "눌러도 안 넘어간다"가 된다.
   0.18초 겹침 하나 얻자고 링크가 죽을 위험을 지지 않는다. */
/* 고대비(강제 색) 모드: 그림자·바탕이 사라져도 경계와 선택이 보이게 */
@media (forced-colors: active) {
  .btn, .chip, .tab, .opts label, .inst-opt, .card, .tool-card, .r-total, .next, .banner-cta, .dark-card { border: 1px solid CanvasText; }
  .tab.active, .chip.active, .opts label.on, .inst-opt.on { outline: 2px solid Highlight; outline-offset: -2px; }
  .opts label:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .progress-bar i.on, .t-needle, .m-dots .dot.lit { background: Highlight; forced-color-adjust: none; }
}
/* 인쇄: 가이드·체크리스트를 종이로 뽑는 사람을 위해 */
@media print {
  .site-header, .site-footer, .totop, .skip, .next, .related, .banner-cta, .section.dark, .filter-bar, form { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section, .section.tight, .page-hero, .pick { padding: 12pt 0; border: 0; background: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card, .table-wrap, .callout, .summary, figure, .checklist li, details.faq, .stage, .term { break-inside: avoid; }
  .table-wrap { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  table { min-width: 0; }
  h1, h2, h3 { break-after: avoid; }
  a { color: inherit; }
  @page { margin: 16mm; }
}

/* ── 스크롤 진입 모션 ── */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .btn, .card, .choice, .choice .cph img, .choice .go, .inst-opt, .inst-opt .ph img, .inst-tile img, .tool-link, .tool-link .tph img, .tool-link .go::after, .opts label, .stage3d img, .stage3d canvas { transition: none; }
  .choice:hover, .choice:active, .inst-opt:hover, .choice:hover .cph img, .inst-opt:hover .ph img, .choice:hover .go::after, .tool-link:hover, .tool-link:active, .tool-link:hover .tph img, .tool-link:hover .go::after { transform: none; }
  .q-nav .next-btn.just-on { animation: none; }
  html { scroll-behavior: auto; }
}