/* 첫기타 — 일렉 판(스튜디오 화이트, 2026-10-14 사용자 선택: 브랜드 쇼룸 계열 시안 '스튜디오 화이트' — '카탈로그'에서 바꿨다).
   e/*.html 만 이 파일을 style.css 뒤에 불러온다(tools/build_e.py). 1안 구성요소는 색 변수만 바꿔 그대로 쓰고,
   헤더 · 푸터 · 페이지 머리 · 구역 머리 · 카드 모서리를 스튜디오 모양으로 다시 입힌다. 홈은 .sh(스튜디오 홈) 전용 칸이다(tools/e/home-main.html).
   악기 회사의 신제품 발표 페이지처럼: 밝은 촬영 스튜디오(회색 종이 배경) · 흰 판 · 큰 검은 글씨 · 강조는 레이크 플래시드 블루 하나 · 검은 띠는 푸터 하나. */
html[data-theme="electric"] {
  --paper: #FFFFFF; --paper-raised: #FFFFFF; --paper-sunk: #F5F5F3; --paper-tint: #F7F7F5;
  --line: #E2E1DE; --line-strong: #CFCECB; --line-input: #B3B2AE;
  --ink: #0A0A0A; --ink-body: #2A2A2A; --ink-muted: #565656; --ink-caption: #6A6A6A; --ink-faint: #8A8A86;
  --accent: #2E5E8E; --accent-hover: #224A72; --on-accent: #FFFFFF; --accent-tint: #E7EEF6; --neutral-tint: #EFEFEC;
  --dark: #0A0A0A; --dark-deep: #050505; --dark-line: #262626; --dark-text: #FFFFFF; --dark-body: rgba(255, 255, 255, .72); --dark-caption: rgba(255, 255, 255, .52); --dark-accent: #8FB3DA; --dark-accent-text: #DCE8F5;
  --studio: #ECEBE9; --studio-2: #F5F5F3;
  --radius: 20px;
  --shadow: 0 1px 0 rgba(10, 10, 10, .04), 0 28px 60px -34px rgba(10, 10, 10, .32);
  --card-rest: 0 1px 0 rgba(10, 10, 10, .04); --card-lift: 0 1px 0 rgba(10, 10, 10, .04), 0 24px 50px -30px rgba(10, 10, 10, .35);
}
html[data-theme="electric"] ::selection { background: #CFDDEC; color: #0A0A0A; }

/* ── 헤더: 흰 유리 + 파란 피크 로고, 알약 모양 검색 · 주행동 ── */
html[data-theme="electric"] .site-header { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
html[data-theme="electric"] .brand .mark > path:first-of-type { fill: #2E5E8E; }
html[data-theme="electric"] .brand .mark > rect { fill: #1D3F62; }
html[data-theme="electric"] .brand .word b { color: #0A0A0A; }
/* 가로 메뉴에서만 — 960 이하 서랍에서는 하위 목록이 그림자 진 떠 있는 카드로 보였다(2026-10-14) */
@media (min-width: 961px) {
  html[data-theme="electric"] .nav a { border-radius: 8px; }
  html[data-theme="electric"] .nav a:hover { background: var(--studio-2); }
  html[data-theme="electric"] .nav .sub { border-radius: 16px; box-shadow: var(--shadow); }
}
html[data-theme="electric"] .site-search input { border: 0; border-radius: 22px; background-color: var(--studio-2); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="electric"] .site-search input:focus { border: 0; background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
html[data-theme="electric"] .btn { border-radius: 999px; }
html[data-theme="electric"] .btn-solid { background: var(--accent); }
html[data-theme="electric"] .btn-solid:hover { background: var(--accent-hover); }

/* ── 푸터: 페이지에서 단 하나의 검은 띠 ── */
html[data-theme="electric"] .site-footer { background: #0A0A0A; border-top: 0; }
html[data-theme="electric"] .f-brand .mark path:nth-of-type(1) { fill: #1D3F62; }
html[data-theme="electric"] .f-brand .mark path:nth-of-type(2) { fill: #4A7DB0; }
html[data-theme="electric"] .f-strings { display: block; height: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
html[data-theme="electric"] .f-strings i { display: none; }
html[data-theme="electric"] .biz { border-top-color: rgba(255, 255, 255, .14); }
html[data-theme="electric"] .site-footer ::selection { background: #2E5E8E; color: #fff; }

/* ── 페이지 머리: 촬영 스튜디오 배경지 띠 + 큰 검은 글씨. 구역 머리도 같은 글씨 ── */
html[data-theme="electric"] .page-hero { background: linear-gradient(180deg, #E3E2E0, var(--studio) 70%); border-bottom: 1px solid var(--line); }
html[data-theme="electric"] main > .crumbs:has(+ .page-hero, + * > .page-hero:first-child) { background: #E3E2E0; box-shadow: 0 0 0 100vmax #E3E2E0; clip-path: inset(0 -100vmax); }
html[data-theme="electric"] .page-hero h1, html[data-theme="electric"] .section-head h2 { letter-spacing: -.045em; font-weight: 800; color: #0A0A0A; }
html[data-theme="electric"] .label, html[data-theme="electric"] .eyebrow { letter-spacing: .02em; color: var(--ink-caption); }
html[data-theme="electric"] .section.alt { background: var(--studio-2); border-color: var(--line); }

/* ── 카드 · 상자: 흰 판 + 큰 둥근 모서리 + 옅은 그림자(스튜디오 바닥에 놓인 물건) ── */
html[data-theme="electric"] :is(.card, .choice, .tool-link, .m-card, .inst-opt, .cmp-card, .teacher, .demo-box, .r-total, .q-card, .callout, .notice) { border-radius: 20px; }   /* .stage(로드맵 단계)는 위 선 하나로 나뉘는 구역이라 둥글리지 않는다 */
html[data-theme="electric"] :is(.opts label, .row-item) { border-radius: 14px; }
/* 폰 화면의 카드(2026-10-14 점검): 사진이 카드 높이만큼 늘어나 세로 띠로 잘리고 글 칸이 좁았다 */
@media (max-width: 600px) {
  html[data-theme="electric"] .grid-4 > .card > .card-img { align-self: flex-start; width: 104px; height: 104px; min-height: 0; margin: 16px 0 16px 16px; border-radius: 12px; overflow: hidden; }
  html[data-theme="electric"] .grid-4 > .card > .card-img + .card-body { padding: 16px 16px 16px 14px; }
}
@media (max-width: 380px) {
  html[data-theme="electric"] .grid-4 > .card > .card-img { width: 84px; height: 84px; margin: 14px 0 14px 14px; }
  html[data-theme="electric"] .grid-4 > .card > .card-img + .card-body { padding: 14px 14px 14px 12px; }
}
@media (max-width: 600px) {
  html[data-theme="electric"] .choice { display: flex; flex-direction: column; }
  html[data-theme="electric"] .choice .cph { aspect-ratio: 2 / 1; min-height: 0; }
  html[data-theme="electric"] .choice .txt { padding: 16px 18px 14px; }
  html[data-theme="electric"] .choice .go { padding: 10px 14px 10px 18px; }
}
html[data-theme="electric"] .ask-fab { background: #0A0A0A; }
html[data-theme="electric"] .ask-fab svg { stroke: #8FB3DA; }

/* ═════ 스튜디오 홈(.sh) ═════ */
.sh { font-size: 17px; }
.sh-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.sh h1, .sh h2, .sh h3, .sh p { margin: 0; }
.sh ul, .sh ol { padding: 0; list-style: none; margin: 0; }
.sh li { margin: 0; }
.sh a { color: inherit; text-decoration: none; }
/* 화살표 단추 — 누르는 자리의 단서 */
.sh-arr { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; }
.sh-arr::before { content: ''; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 첫 화면: 스튜디오에 선 기타 + 바닥에 걸친 흰 '사양 막대'(선택 셋) */
.sh-studio { position: relative; height: clamp(440px, 60vh, 580px); overflow: hidden; background: linear-gradient(180deg, #CBC9C8 0%, #D8D7D5 52%, #E6E5E3 82%, #ECEBE9 100%); }
.sh-studio > img { position: absolute; right: 0; top: 0; height: calc(100% - 64px); width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 86%, transparent 100%), linear-gradient(0deg, transparent 0, #000 14%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 86%, transparent 100%), linear-gradient(0deg, transparent 0, #000 14%); mask-composite: intersect; }
.sh-studio::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(236, 235, 233, .94) 0%, rgba(236, 235, 233, .8) 30%, rgba(236, 235, 233, 0) 56%); pointer-events: none; }
.sh-studio .sh-wrap { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; }
.sh-kick { font-size: 15px; font-weight: 600; color: var(--ink-muted); margin-bottom: 14px !important; }
.sh h1 { font-size: clamp(42px, 5.6vw, 84px); line-height: 1.04; font-weight: 800; letter-spacing: -.052em; color: #0A0A0A; }
.sh h1 span { display: block; }
.sh-lede { margin-top: 20px !important; max-width: 26em; text-wrap: balance; font-size: clamp(17px, 1.4vw, 20px); color: #3A3A3A; }
.sh-promise { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px !important; font-size: 15px; font-weight: 600; color: var(--ink-body); }
.sh-promise li { display: inline-flex; align-items: center; gap: 8px; }
.sh-promise li::before { content: ''; width: 10px; height: 5.5px; margin-top: -3px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.sh #continue { margin: 18px 0 0; }
.sh-spec { position: relative; z-index: 2; margin-top: -78px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.sh-ch { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0 18px; padding: 22px 22px 18px; color: #0A0A0A; transition: background-color .18s ease; }
.sh-ch + .sh-ch { box-shadow: inset 1px 0 0 var(--line); }
.sh-ch .ph { grid-row: 1 / -1; align-self: start; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--studio); }
.sh-ch .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.sh-ch .tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sh-ch .q { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.sh-ch .d { font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.sh-ch .go { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--accent); }
.sh-ch .go .sh-arr { width: 34px; height: 34px; }
@media (hover: hover) {
  .sh-ch:hover { background: var(--studio-2); }
  .sh-ch:hover .ph img { transform: scale(1.05); }
  .sh-ch:hover .sh-arr { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(3px); }
}
.sh-ch:active { background: var(--studio); }

/* 구역 공통 */
.sh-sec { padding: clamp(72px, 10vw, 136px) 0; }
.sh-sec.tight { padding-top: 0; }
.sh-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; margin-bottom: clamp(30px, 4vw, 56px); }
.sh-h2 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.1; font-weight: 800; letter-spacing: -.045em; color: #0A0A0A; max-width: 15em; text-wrap: balance; }
.sh-head p { max-width: 30em; margin-top: 14px !important; color: var(--ink-muted); font-size: 18px; }
.sh-more { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.sh-more .sh-arr { width: 34px; height: 34px; }
.sh-more:hover .sh-arr { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 제품 라인업: 네 악기를 한 판에 나란히 */
.sh-lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-radius: 28px; overflow: hidden; background: #fff; }
.sh-model { display: flex; flex-direction: column; color: #0A0A0A; background: #fff; }
.sh-model .ph { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #CFCFCF; }
.sh-model .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sh-model .tx { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 16px 6px; }
.sh-model b { font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.sh-model .d { font-size: 15.5px; color: var(--ink-muted); }
.sh-model .lk { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 700; color: var(--accent); }
@media (hover: hover) { .sh-model:hover .ph img { transform: scale(1.04); } .sh-model:hover b { color: var(--accent); } }
.sh-lineup-foot { display: flex; justify-content: center; margin-top: 30px; }

/* 추천 예시: 고른 답 → 견적(main.js 가 data-style="studio" 로 그린다) */
.sh-demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sh-opts { margin-top: 34px !important; }
.sh-opts li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sh-opts li:first-child { border-top: 1px solid var(--line); }
.sh-opts .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-size: 13px; font-weight: 800; }
.sh-opts .k { font-size: 16px; color: var(--ink-muted); }
.sh-opts .v { font-size: 17.5px; font-weight: 700; color: #0A0A0A; text-align: right; }
.sh-opts + p { margin-top: 18px !important; font-size: 15.5px; color: var(--ink-caption); }
.sh-quote { border-radius: 28px; background: var(--studio-2); padding: clamp(26px, 3.4vw, 48px); }
.sh-quote .lab { font-size: 15px; font-weight: 600; color: var(--ink-caption); }
.sh-quote h3 { margin-top: 6px !important; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.035em; color: #0A0A0A; }
.sh-quote .tot { margin-top: 26px; }
.sh-quote .tot b { display: block; font-size: clamp(52px, 6.6vw, 92px); line-height: .96; font-weight: 800; letter-spacing: -.055em; color: #0A0A0A; font-variant-numeric: tabular-nums; }
.sh-quote .tot b small { font-size: .38em; font-weight: 700; letter-spacing: -.02em; margin-left: 6px; }
.sh-quote .tot span { display: block; margin-top: 10px; font-size: 15.5px; color: var(--ink-muted); }
.sh-quote dl { margin: 26px 0 0; border-top: 1px solid var(--line-strong); }
.sh-quote dl div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.sh-quote dt { color: var(--ink-body); }
.sh-quote dd { margin: 0; font-weight: 700; color: #0A0A0A; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-quote .ln { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; height: 52px; padding: 0 10px 0 24px; border: 1.5px solid var(--accent); border-radius: 26px; font-size: 16px; font-weight: 700; color: var(--accent); }
.sh-quote .ln .sh-arr { width: 34px; height: 34px; border: 0; background: var(--accent); color: #fff; }
.sh-quote .ln:hover { background: var(--accent-tint); }

/* 도구: 액세서리 두 점 */
.sh-band { background: var(--studio); }
.sh-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sh-tool { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #fff; color: #0A0A0A; transition: transform .2s ease, box-shadow .2s ease; }
.sh-tool .ph { aspect-ratio: 16 / 10; overflow: hidden; background: #D6D6D6; }
.sh-tool .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sh-tool .tx { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: clamp(22px, 2.6vw, 34px); }
.sh-tool b { font-size: 28px; font-weight: 800; letter-spacing: -.035em; }
.sh-tool .d { grid-column: 1; font-size: 16px; color: var(--ink-muted); }
.sh-tool .sh-arr { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); }
@media (hover: hover) { .sh-tool:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .sh-tool:hover .ph img { transform: scale(1.04); } .sh-tool:hover .sh-arr { background: var(--accent); border-color: var(--accent); color: #fff; } }

/* 가이드: 사진 카드 셋(main.js 가 그린다, 2026-10-14 다시 손봄 — 글 줄만 있던 목록이 밋밋했다) */
.sh-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sh-guide { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: #0A0A0A; transition: transform .2s ease, box-shadow .2s ease; }
.sh-guide .ph { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--studio); }
.sh-guide .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sh-guide .tx { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 20px; }
.sh-guide .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-guide .tags span { padding: 3px 10px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); font-size: 13px; font-weight: 700; }
.sh-guide .tags span + span { background: var(--studio-2); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.sh-guide b { font-size: clamp(19px, 1.65vw, 22px); line-height: 1.38; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.sh-guide .d { font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.sh-guide .ft { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ink-caption); }
.sh-guide .ft .sh-arr { width: 34px; height: 34px; color: var(--accent); }
@media (hover: hover) {
  .sh-guide:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
  .sh-guide:hover .ph img { transform: scale(1.04); }
  .sh-guide:hover b { color: var(--accent); }
  .sh-guide:hover .sh-arr { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(3px); }
}

/* 자주 묻는 질문: 왼쪽 제목(붙박이) · 오른쪽 펼치는 답. 답은 faq.html 의 앞 네 개 */
.sh-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sh-faq-head { position: sticky; top: 104px; }
.sh-faq-head .sh-h2 { font-size: clamp(30px, 3.4vw, 46px); }
.sh-faq-head p { margin-top: 14px !important; font-size: 17px; color: var(--ink-muted); max-width: 22em; }
.sh-faq-head .sh-more { margin-top: 22px; }
.sh-qas { border-top: 2px solid #0A0A0A; }
.sh-qa { border-bottom: 1px solid var(--line); }
.sh-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 18px 4px; cursor: pointer; list-style: none; font-size: clamp(18px, 1.6vw, 20.5px); font-weight: 750; letter-spacing: -.02em; color: #0A0A0A; transition: color .15s ease; }
.sh-qa summary::-webkit-details-marker { display: none; }
.sh-qa summary i { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background-color .18s ease, border-color .18s ease; }
.sh-qa summary i::before, .sh-qa summary i::after { content: ''; position: absolute; left: 10px; right: 10px; top: calc(50% - 1px); height: 2px; border-radius: 1px; background: var(--accent); transition: transform .2s ease; }
.sh-qa summary i::after { transform: rotate(90deg); }
.sh-qa[open] summary i { background: var(--accent); border-color: var(--accent); }
.sh-qa[open] summary i::before, .sh-qa[open] summary i::after { background: #fff; }
.sh-qa[open] summary i::after { transform: rotate(0deg); }
@media (hover: hover) { .sh-qa summary:hover { color: var(--accent); } .sh-qa summary:hover i { border-color: var(--accent); } }
.sh-qa .a { padding: 0 4px 26px; max-width: 42em; font-size: 16.5px; line-height: 1.75; color: var(--ink-body); }
.sh-qa .a p { margin: 0 0 10px !important; }
.sh-qa .a p:last-child { margin-bottom: 0 !important; }
.sh-qa .a ul { display: grid; gap: 6px; margin: 4px 0 12px !important; }
.sh-qa .a li { position: relative; padding-left: 18px; }
.sh-qa .a li::before { content: ''; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sh-qa .a a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .sh-qa[open] .a { animation: sh-qa-in .22s ease-out; } }
@keyframes sh-qa-in { from { opacity: 0; transform: translateY(-4px); } }

/* 문의: 사양 막대와 같은 판 + 알림 신청(켜져 있을 때) */
.sh-asks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-radius: 24px; overflow: hidden; }
.sh-ask { display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 26px 24px 22px; color: #0A0A0A; transition: background-color .18s ease; }
.sh-ask + .sh-ask { box-shadow: inset 1px 0 0 var(--line); }
.sh-ask b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.sh-ask span:not(.sh-arr) { font-size: 15.5px; color: var(--ink-muted); }
.sh-ask .sh-arr { margin-top: auto; color: var(--accent); }
@media (hover: hover) { .sh-ask:hover { background: var(--studio-2); } .sh-ask:hover .sh-arr { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(3px); } }
.sh .sh-nl { margin-top: 24px; border-radius: 24px; }

@media (max-width: 960px) {
  .sh-hero { background: var(--studio); padding-bottom: 28px; }
  .sh-studio { height: auto; overflow: visible; background: none; }
  .sh-studio::after { display: none; }
  .sh-studio > img { position: relative; right: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 66% 60%; -webkit-mask-image: none; mask-image: none; }
  .sh-studio .sh-wrap { height: auto; padding-top: 24px; padding-bottom: 0; }
  .sh-lede { max-width: 34em; }
  .sh-spec { grid-template-columns: 1fr; margin-top: 26px; }
  .sh-ch { grid-template-columns: 150px minmax(0, 1fr); padding: 18px 18px 16px; }
  .sh-ch + .sh-ch { box-shadow: inset 0 1px 0 var(--line); }
  /* 태블릿은 네 악기를 한 줄로(두 줄이면 세로 사진이 화면 둘을 채웠다), 도구도 두 장 나란히 */
  .sh-model .tx { padding: 18px 10px 6px; }
  .sh-model b { font-size: 20px; }
  .sh-model .d { font-size: 14.5px; text-wrap: balance; }
  .sh-tool b { font-size: 24px; }
  .sh-demo, .sh-faq { grid-template-columns: minmax(0, 1fr); }
  .sh-faq-head { position: static; }
  .sh-guides { grid-template-columns: 1fr; gap: 16px; }
  .sh-guide { flex-direction: row; }
  .sh-guide .ph { flex: 0 0 40%; aspect-ratio: auto; min-height: 100%; }
  .sh-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-ask:nth-child(3) { box-shadow: inset 0 1px 0 var(--line); }
  .sh-ask:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}
@media (max-width: 760px) { .sh-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .sh h1 { font-size: 40px; }
  .sh-studio > img { aspect-ratio: 5 / 4; }
  .sh-ch { grid-template-columns: 104px minmax(0, 1fr); gap: 0 14px; padding: 16px 16px 14px; }
  .sh-ch .q { font-size: 18.5px; }
  .sh-ch .d { font-size: 15px; }
  .sh-ch .go { margin-top: 10px; }
  .sh-lineup { border-radius: 22px; }
  .sh-model .tx { padding: 16px 8px 4px; }
  .sh-model b { font-size: 19px; }
  .sh-model .d { font-size: 14.5px; }
  /* 문항 · 답은 한 줄에(답을 아래 줄로 내리면 빈 칸이 커 보였다) */
  .sh-opts li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; }
  .sh-opts .v { font-size: 16.5px; }
  .sh-quote .tot b { font-size: min(52px, 13vw); }
  .sh-quote .tot b small { white-space: nowrap; }   /* '만 원'이 '만' / '원' 두 줄로 갈라졌다 */
  .sh-tools { grid-template-columns: 1fr; }
  .sh-tool .ph { aspect-ratio: 4 / 3; }
  .sh-guide { flex-direction: column; }
  .sh-guide .ph { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .sh-guide .tx { padding: 18px 18px 16px; }
  .sh-qa summary { min-height: 64px; font-size: 18px; }
  .sh-asks { grid-template-columns: 1fr; }
  .sh-ask { min-height: 0; }
  .sh-ask + .sh-ask, .sh-ask:nth-child(3), .sh-ask:nth-child(4) { box-shadow: inset 0 1px 0 var(--line); }
  .sh-ask .sh-arr { margin-top: 10px; }
}
/* 폰: 선택 카드의 글 칸이 사진 옆에 끼어 세 글자마다 줄이 바뀌었다 → 작은 사진 옆에는 제목만, 설명 · 버튼은 카드 폭 전체로 */
@media (max-width: 600px) {
  .sh-ch { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 0 14px; }
  .sh-ch .ph { grid-row: 1; grid-column: 1; align-self: center; aspect-ratio: 1; border-radius: 14px; }
  .sh-ch .tx { display: contents; }
  .sh-ch .q { grid-row: 1; grid-column: 2; }
  .sh-ch .d { grid-column: 1 / -1; margin-top: 12px; }
  .sh-ch .go { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .sh *, .sh *::before, .sh *::after { transition: none !important; } }

/* ── 1안에 남아 있던 테라코타 번호(손그림 색) → 스튜디오: 첫 번호는 검정(어두운 구역은 밝은 파랑), 나머지는 파랑 ── */
html[data-theme="electric"] .reg-sec { --reg-pick-1: #4A7DB0; }
html[data-theme="electric"] .path-pick { background: #0A0A0A; }
html[data-theme="electric"] .gq-steps li::before { background: #0A0A0A; }
html[data-theme="electric"] .gq-steps li:not(:last-child)::after { background: linear-gradient(180deg, #0A0A0A, var(--accent)); }

/* ── 전 페이지 디자인 점검(2026-10-14, diag-2026-10-14 — 사용자: "모든 페이지와 각 부분의 디자인을 확인해서 미비한 곳 수정") ── */
html[data-theme="electric"] { --dark-warn: #8FB3DA; }   /* 튜너 · 메트로놈의 켜진 칩 · 박 점 · 바늘 · 슬라이더(옛 앰버). 다크 폼 오류색은 style.css 에서 따로 */
/* 안내 상자 · 결과 이유: 굵은 왼쪽 선 없이(둥근 모서리에서 휘었다) */
html[data-theme="electric"] .callout { border-radius: 18px; }
html[data-theme="electric"] .r-why { border-left: 1px solid var(--line-strong); border-radius: 20px; }
/* 검은 안내 띠: 같은 화면 카드와 같은 모서리 · 주행동(첫 단추)은 흰 채움, 보조는 선 · 폰에서는 단추가 띠 폭을 다 쓴다 */
html[data-theme="electric"] .next { border-radius: 20px; }
html[data-theme="electric"] .next .btn-primary { background: #fff; border-color: #fff; color: #0A0A0A; }
html[data-theme="electric"] .next .btn-primary:hover { background: #DCE8F5; border-color: #DCE8F5; color: #0A0A0A; }
@media (max-width: 600px) { html[data-theme="electric"] .next > div:last-child { flex: 1 1 100%; } }
/* 등록 안내 카드의 채움 단추는 어두운 구역(강사)에서만 — 흰 구역(입점)은 선 단추(채움 주행동은 헤더 하나) */
html[data-theme="electric"] .reg-go-act .btn { background: transparent; border-color: var(--accent); color: var(--accent); }
html[data-theme="electric"] .reg-go-act .btn:hover { background: var(--accent-tint); border-color: var(--accent-hover); color: var(--accent-hover); }
html[data-theme="electric"] .section.dark .reg-go-act .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="electric"] .section.dark .reg-go-act .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
/* 홈 선택 카드: 제목이 두 줄인 카드만 '가는 곳' 줄이 25px 아래에 있었다 → 셋 다 카드 아래에 */
.sh-ch .go { margin-top: auto; padding-top: 14px; }
/* 홈 문의 카드(폰 한 줄씩): 화살표 원이 설명 아래 혼자 한 줄을 차지했다 → 오른쪽 가운데. 601~960 은 두 장씩이라 화살표를 카드 아래에 */
@media (min-width: 601px) and (max-width: 960px) { .sh-ask .sh-arr { margin-top: auto; } .sh-ask { min-height: 168px; } }
@media (max-width: 600px) {
  .sh-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; align-items: center; padding: 20px 20px 20px 22px; }
  .sh-ask > :not(.sh-arr) { grid-column: 1; }
  .sh-ask .sh-arr { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
/* 검색칸은 어디서나 알약(검색 · 404 의 큰 검색칸이 10px 사각이었다) · 입점 링크 · 용어 찾기도 */
html[data-theme="electric"] .hero-search input { border-radius: 999px; padding: 0 22px; }
html[data-theme="electric"] .p-link { border-radius: 999px; }
html[data-theme="electric"] input.search { border-radius: 999px; padding-left: 20px; padding-right: 20px; }
/* 404 의 가운데 정렬 문단 */
main .container[style*="text-align:center"] > .lead { margin-inline: auto; }
/* 로드맵 단계 번호: 큰 제목 옆에 작은 숫자가 각주처럼 떠 있었다 → 검은 동그라미 */
html[data-theme="electric"] .stage-num { width: 36px; height: 36px; min-width: 36px; margin-right: 12px; border-radius: 50%; background: #0A0A0A; color: #fff; font-size: 16px; vertical-align: .18em; }
/* 앰프 · 이펙터 종류 카드: 같은 줄에서 'N개 보기' 단추 높이가 달랐다 → 단추를 카드 아래에 */
.g-tcard { display: flex; flex-direction: column; }
.g-tcard > .g-tcard-in { flex: 1; display: flex; flex-direction: column; }
.g-tcard-in > .g-tb { flex: 1; display: flex; flex-direction: column; }
.g-tcard-in > .g-tb > :last-child { margin-top: auto; }
@container (min-width: 600px) { .g-tcard > .g-tcard-in { display: grid; } .g-tcard-in > .g-tb { justify-content: center; } }
/* '직접 고르기' 칩: 데스크톱에서는 접어서 다 보인다(옆으로 미는 줄은 마우스로 끝까지 못 갔다) */
@media (min-width: 1121px) { .chips.b-chips.g-chips { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; -webkit-mask-image: none; mask-image: none; } }
/* 결과 카드 브랜드 알약: 2열 결과 카드에서 한글 이름이 '티씨 일…'로 잘렸다 → 좁은 카드는 로고만 */
@container (max-width: 520px) { #gear-page .m-card.has-shot .m-logo + small { display: none; } }
/* '자세히 보기' 대화상자의 닫기 단추가 글 위에 떠서 글을 가렸다 → 흰 바탕 + 옅은 그림자 */
html[data-theme="electric"] .sheet-x { background: #fff; box-shadow: 0 2px 10px -4px rgba(10, 10, 10, .25); }
/* 추천 문항 단계: 위 줄('일렉 · 2 / 5 · 처음부터')을 질문 열(820)에 맞춘다 */
.pick[data-stage="q"] .pick-bar { max-width: 820px; margin-left: auto; margin-right: auto; }
/* 가이드 본문 그림: 1:1 사진이 720×720 으로 화면을 다 차지했다 */
.article figure img { max-height: 520px; object-fit: cover; }
html[data-theme="electric"] :is(.brand, .f-brand) .mark path[stroke] { stroke: #FFFFFF; }   /* 로고의 숫자 1(옛 크림색) */
/* 넓게 벌린 작은 라벨('첫 기타 추천 · STEP 1 / 5', 묶음 이름, 단계 번호): 글자가 흩어져 보였다 — 스튜디오는 자간을 거의 두지 않는다 */
html[data-theme="electric"] :is(.pick .step-label, .checklist li.group, .path-step .n, .prog-steps .n, .stage .period, .summary > b, .choice .num, .demo-total .label, .r-total .label, .sample-note .label, .t-live, .ask .num, .s-sub, .demo-pick .eyebrow, .g-rank, .level-result .lr-txt span, .fgrp legend, .reg-steps li::before, .section-head .label, .hero.home .label) { letter-spacing: .02em; }
/* 중고 현장 체크리스트(961 이상): '0 / 18 확인'이 맨 위에만 있고 목록 오른쪽 500px 이 비어 있었다 → 그 자리에 진행 카드를 두고 목록을 따라 내려온다 */
@media (min-width: 961px) {
  .cl-wrap { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
  .cl-wrap > .checklist { grid-column: 1; grid-row: 1; }
  html[data-theme="electric"] .cl-wrap > p.progress { grid-column: 2; grid-row: 1; justify-self: start; position: sticky; top: calc(var(--header-h, 72px) + 24px); display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 10px 10px 22px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 17px; }
}
@media (min-width: 961px) and (max-height: 480px) { html[data-theme="electric"] .cl-wrap > p.progress { position: static; } }
@media (max-width: 600px) { html[data-theme="electric"] .stage-num { width: 30px; height: 30px; min-width: 30px; margin-right: 8px; font-size: 14px; } html[data-theme="electric"] .stage h2 { text-wrap: balance; } }
/* 검은 안내 띠가 두 개 연달아 오면 무겁다(기타 종류 끝) — 두 번째는 밝은 카드 */
html[data-theme="electric"] .next.light { margin-top: 16px; background: #fff; color: var(--ink-muted); box-shadow: 0 0 0 1px var(--line); }
html[data-theme="electric"] .next.light strong { color: var(--ink); }
html[data-theme="electric"] .next.light .small { color: var(--ink-muted); }
html[data-theme="electric"] .next.light .btn { background: transparent; border-color: var(--accent); color: var(--accent); }
html[data-theme="electric"] .next.light .btn:hover { background: var(--accent-tint); color: var(--accent-hover); }
/* 강사 등록 구역 아래 조건 문단: 태블릿에서 한 줄이 45em 을 넘었다 */
.reg-sec .ft-terms { max-width: calc(45em + 38px); }

/* ── 첫 기타 추천 UI/UX 손질(2026-10-14 사용자: "내 조건으로 추천받기 · 도구의 기타 추천 디자인 전체를 확인해서 좋게") ── */
/* 진행 막대는 맨 위(질문 위) — 지금 몇 번째인지 먼저 보이고, 제목과 선택지는 붙어 있다 */
#pick-stage > .progress-bar, #pick-stage .q-card > .progress-bar { margin: 0 0 clamp(22px, 3vw, 32px); }
#pick-stage .pick-head { margin-bottom: clamp(22px, 2.6vw, 30px); }
.pick-bar .pb-inst { display: inline-flex; align-items: center; min-height: 28px; margin-right: 10px; padding: 0 12px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-hover); font-size: 14px; font-weight: 700; }
/* 선택지: 고른 것은 파란 동그라미 안에 흰 체크 + 옅은 파랑 바탕(굵은 고리 하나로는 고른 건지 덜 분명했다) */
html[data-theme="electric"] .opts label { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
html[data-theme="electric"] .opts label::before { box-sizing: border-box; width: 24px; height: 24px; border-width: 2px; }
html[data-theme="electric"] .opts label:has(input:checked), html[data-theme="electric"] .opts label.on { background: #F3F7FB; }
html[data-theme="electric"] .opts label:has(input:checked)::before, html[data-theme="electric"] .opts label.on::before { border: 0; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (prefers-reduced-motion: reduce) { html[data-theme="electric"] .opts label { transition: none; } }
/* 1단계 안내: 회색 상자가 '다음' 단추만큼 무거웠다 → 상자 없이 작은 글 */
html[data-theme="electric"] .start-row .notice { background: none; padding: 2px 0 2px 34px; font-size: 15px; }
html[data-theme="electric"] .start-row .notice::before { left: 0; top: 3px; }
/* 결과: 답 칩은 알약 · 첫 화면은 사진과 '고른 이유'를 나란히(사진이 첫 화면을 다 차지해 이유와 모델이 밀려 있었다) */
html[data-theme="electric"] .r-chips span { padding: 7px 13px; border-radius: 999px; background: #fff; border-color: var(--line-strong); color: var(--ink-body); font-size: 14px; }
@media (min-width: 961px) {
  #result .r-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: stretch; }
  #result .r-main > :not(.r-photo):not(.r-why) { grid-column: 1 / -1; }
  #result .r-photo { aspect-ratio: 1; height: 100%; }
  #result .r-why { display: flex; flex-direction: column; justify-content: center; }
}
/* 결과 아래 줄: 고르기 전에는 무엇을 하면 다음이 열리는지 말한다 */
.r-step-act .r-hint { align-self: center; font-size: 15px; color: var(--ink-caption); }
.has-pick .r-step-act .r-hint { display: none; }
@media (max-width: 600px) { .r-step-act .r-hint { flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 1.45; } }
/* 제품 카드: 설명 · 사양표는 접어 둔다('설명 · 사양 보기') — 이름 · 한 줄 · 가격 · 맞는 점 · 단추만으로 훑어 고른다 */
.m-more { margin: 0; }
.m-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 15px; font-weight: 600; color: var(--ink-muted); cursor: pointer; list-style: none; }
.m-more > summary::-webkit-details-marker { display: none; }
.m-more > summary::after { content: ''; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.m-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.m-more > summary:hover { color: var(--ink); }
.m-more > .m-what { margin-top: 6px; }
.m-more > .m-spec { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .m-more > summary::after { transition: none; } }
@container (max-width: 560px) { .m-card.has-shot > .m-fit { order: 6; } .m-card.has-shot > .m-more { order: 7; } }   /* 카드가 좁아 한 열로 쌓일 때(style.css 의 같은 질의)도 맞는 점 → 설명 · 사양 → 단추 */
#gear-page .m-card.has-shot > .m-more { grid-column: 1 / -1; }
/* 넓은 카드(직접 고르기 1240px)에서 사진 칸이 280px 까지 커져 카드가 사진 높이만큼 길고 오른쪽이 비었다 → 사진 칸은 200px 까지 */
.m-card.has-shot { grid-template-columns: clamp(120px, 24%, 200px) minmax(0, 1fr); }
/* 고른 카드는 사이트 강조색(파랑)으로 — 초록은 '맞는 점' 표식에만 */
html[data-theme="electric"] .m-card.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
html[data-theme="electric"] .m-card.is-chosen .m-mark { border-color: var(--accent); background: var(--accent); }
@media (hover: hover) { html[data-theme="electric"] .m-card[data-choose-card]:hover .m-mark { border-color: var(--accent); } }
html[data-theme="electric"] .m-choose.is-on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-hover); }

/* ── 홈 자주 묻는 질문: 줄 목록 → 둥근 카드(고른 카드는 흰 판이 떠오른다) ── */
html[data-theme="electric"] .sh-qas { display: grid; gap: 12px; border-top: 0; }
html[data-theme="electric"] .sh-qa { border: 1px solid var(--line); border-radius: 20px; background: var(--studio-2); transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
html[data-theme="electric"] .sh-qa[open] { background: #fff; border-color: var(--line-strong); box-shadow: var(--shadow); }
html[data-theme="electric"] .sh-qa summary { min-height: 72px; padding: 16px 18px 16px 22px; }
html[data-theme="electric"] .sh-qa summary::before { content: 'Q'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #0A0A0A; color: #fff; font-size: 14px; font-weight: 800; }
html[data-theme="electric"] .sh-qa[open] summary::before { background: var(--accent); }
html[data-theme="electric"] .sh-qa summary { justify-content: flex-start; }
html[data-theme="electric"] .sh-qa summary i { margin-left: auto; background: #fff; }
html[data-theme="electric"] .sh-qa[open] summary i { background: var(--accent); border-color: var(--accent); }
html[data-theme="electric"] .sh-qa .a { padding: 0 24px 24px 72px; }
@media (hover: hover) { html[data-theme="electric"] .sh-qa:not([open]):hover { border-color: var(--line-strong); background: #fff; } }
@media (max-width: 600px) {
  html[data-theme="electric"] .sh-qa summary { padding: 14px 14px 14px 16px; gap: 12px; }
  html[data-theme="electric"] .sh-qa summary::before { width: 28px; height: 28px; font-size: 13px; }
  html[data-theme="electric"] .sh-qa .a { padding: 0 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme="electric"] .sh-qa { transition: none; } }
@media (max-width: 960px) { html[data-theme="electric"] .start-row .notice { padding-right: 48px; } }   /* 상자를 걷어 내 한 줄이 45em 을 넘었다 — 단추와 같은 폭은 그대로, 글 줄만 좁힌다 */

/* ── 추천 문항: 스튜디오 판 위의 사양서(2026-10-14 사용자: "밋밋하다, 우리 사이트 느낌에 맞으면서 더 멋지게") ──
   601px 이상: 문항 전체가 회색 촬영 스튜디오 판(홈 사양 막대 · 페이지 머리와 같은 배경지) 위에 놓이고, 선택지는 그 위의 흰 카드.
   961px 이상: 오른쪽에 고른 악기 사진 + 지금까지의 답(사양서) — 답할수록 채워지고, 답한 줄을 누르면 그 질문으로 간다.
   폰(600 이하)은 질문 · 선택지 · '이전/다음'이 한 화면(844)에 들어와야 해서 판 · 사양서 없이 카드만 다듬는다 */
@media (min-width: 601px) {
  .pick[data-stage="q"] #quiz { padding: clamp(22px, 3vw, 40px) clamp(22px, 3.4vw, 48px) clamp(26px, 3.4vw, 44px); border-radius: 28px; background: linear-gradient(180deg, #E4E3E1 0%, #ECEBE9 46%, #F2F2F0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
  html[data-theme="electric"] .pick[data-stage="q"] .pick-bar { max-width: none; }
  .pick[data-stage="q"] .pick-bar .pb-inst { background: #fff; box-shadow: 0 0 0 1px var(--line); }
  .pick[data-stage="q"] .progress-bar i { background: rgba(10, 10, 10, .1); }
  .pick[data-stage="q"] .progress-bar i.on { background: var(--accent); }
  /* 선택지: 판 위의 흰 카드 — 테두리 대신 옅은 그림자, 올리면 살짝 뜬다. 고르면 파란 고리 + 체크 */
  html[data-theme="electric"] .pick[data-stage="q"] .opts label { background: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(10, 10, 10, .04), 0 12px 28px -22px rgba(10, 10, 10, .45); }
  html[data-theme="electric"] .pick[data-stage="q"] .opts label:has(input:checked), html[data-theme="electric"] .pick[data-stage="q"] .opts label.on { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 94, 142, .18), 0 16px 32px -22px rgba(46, 94, 142, .55); }
  .pick[data-stage="q"] .opts .t { font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -.02em; }
  .pick[data-stage="q"] .q-nav .btn-ghost { background: #fff; border-color: transparent; box-shadow: 0 0 0 1px var(--line); }
  .pick[data-stage="q"] .q-nav .next-btn:disabled { background: rgba(255, 255, 255, .55); border-color: rgba(10, 10, 10, .18); }
  .pick[data-stage="q"] .q-nav .next-btn:not(:disabled) { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 94, 142, .12); }
}
@media (min-width: 601px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-theme="electric"] .pick[data-stage="q"] .opts label { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  html[data-theme="electric"] .pick[data-stage="q"] .opts label:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(10, 10, 10, .04), 0 18px 34px -22px rgba(10, 10, 10, .5); }
}
.q-side { display: none; }
@media (min-width: 961px) { .pick[data-stage="q"] .q-card { max-width: none; margin: 0; } }
@media (min-width: 1121px) {   /* 사양서는 1121px 부터 — 그 아래에서는 선택지 칸이 좁아져 '이전/다음'이 첫 화면 밖으로 밀렸다(1024×768) */
  .pick[data-stage="q"] #pick-stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 310px); gap: clamp(28px, 3.4vw, 48px); align-items: start; }
  .pick[data-stage="q"] .q-card { max-width: none; margin: 0; }
  .q-side { display: block; position: sticky; top: 96px; border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 1px 0 rgba(10, 10, 10, .04), 0 24px 44px -30px rgba(10, 10, 10, .45); }
  .qs-ph { position: relative; margin: 0; aspect-ratio: 16 / 11; background: var(--studio); overflow: hidden; }
  .qs-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .qs-ph figcaption { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .qs-ph figcaption b { font-size: 16px; color: #0A0A0A; }
  .qs-ph figcaption span { font-size: 13px; color: var(--ink-caption); }
  .qs-list { list-style: none; margin: 0; padding: 8px 0; }
  .qs-list li { margin: 0; }
  .qs-list .row, .qs-list button { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 20px; text-align: left; font: inherit; background: none; border: 0; }
  .qs-list li + li .row, .qs-list li + li button { box-shadow: inset 0 1px 0 var(--line); }
  .qs-list .k { font-size: 14px; font-weight: 600; color: var(--ink-caption); }
  .qs-list .v { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; }
  .qs-list li.todo .v { color: var(--line-strong); font-weight: 600; }
  .qs-list li.now .row { background: #F3F7FB; }
  .qs-list li.now .k { color: var(--accent); }
  .qs-list li.now:not(.set) .v { color: var(--accent); font-weight: 600; }
  .qs-list li.now .row::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(46, 94, 142, .18); }
  .qs-list li.done button { cursor: pointer; }
  .qs-list .ed { font-size: 13px; font-weight: 600; color: var(--ink-caption); }
  .qs-list li.done button:hover { background: var(--studio-2); }
  .qs-list li.done button:hover .ed { color: var(--accent); }
  .qs-note { margin: 0; padding: 14px 20px 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--ink-caption); }
}
/* 폰: 판 없이 — 선택지만 그림자 진 흰 카드로 */
@media (max-width: 600px) {
  html[data-theme="electric"] .pick[data-stage="q"] .opts label { border-color: var(--line); box-shadow: 0 8px 20px -18px rgba(10, 10, 10, .45); }
  html[data-theme="electric"] .pick[data-stage="q"] .opts label:has(input:checked) { box-shadow: 0 0 0 3px rgba(46, 94, 142, .16); }
}
/* 데스크톱 문항: 선택지가 셋이면 세 장 가로, 여섯이면 3×2 — 한 줄씩 쌓이면 '이전/다음'이 첫 화면(1440×900 · 1280×800) 밖으로 밀렸다.
   가로 세 장일 때는 동그라미를 위에, 글을 아래에 둔 세로 카드 */
@media (min-width: 961px) {
  .pick[data-stage="q"] { padding-top: clamp(16px, 2vw, 28px); }
  .pick[data-stage="q"] #quiz { padding-top: clamp(20px, 2.4vw, 32px); }
  #pick-stage .opts:has(> label:nth-of-type(3):last-of-type), #pick-stage .opts:has(> label:nth-of-type(6):last-of-type) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pick-stage .opts:has(> label:nth-of-type(3):last-of-type) > label { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 20px 22px; }
  #pick-stage .opts:has(> label:nth-of-type(6):last-of-type) > label { gap: 12px; padding: 18px 18px; }   /* 여섯 개(두 줄)는 동그라미를 옆에 — 영어판은 글이 길어 세로 카드면 1440×900 에서 '이전/다음'이 밀렸다 */
}
@media (min-width: 961px) and (max-height: 820px) {   /* 낮은 창(1024×768 · 1280×720): 가로 카드도 동그라미를 옆에 — 세로가 짧아진다 */
  #pick-stage .opts:has(> label:nth-of-type(3):last-of-type) > label, #pick-stage .opts:has(> label:nth-of-type(6):last-of-type) > label { flex-direction: row; align-items: center; gap: 12px; padding: 16px 18px; }
  .pick[data-stage="q"] #quiz { padding-top: 18px; padding-bottom: 22px; }
}

/* ── 문의 팝업 — 사이트 분위기 그대로(2026-10-14 세 번째, 사용자: "디자인이 별로야, 우리 사이트 분위기에 맞게") ──
   왼쪽: 회색 촬영 스튜디오 판 + 큰 굵은 '문의하기' + 스탠드 위 기타(잠금 화면 · 홈과 같은 사진) + 메일.
   오른쪽: 흰 판 — 알약 유형 칩(고른 유형의 한 줄 설명) · 양식 · 알약 보내기. 모서리는 사이트 카드처럼 크게(28px).
   700px 이하: 사진 없이 위 띠(제목) → 칩 → 양식 */
.ask-sheet { width: min(900px, calc(100vw - 32px)); }
.ask-sheet .sheet-in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); padding: 0; border-radius: 28px; background: #fff; overflow: hidden auto; }
html[data-theme="electric"] .ask-sheet .sheet-x { position: absolute; top: 18px; right: 18px; float: none; width: 44px; height: 44px; margin: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: none; font-size: 22px; color: var(--ink-muted); z-index: 3; }
html[data-theme="electric"] .ask-sheet .sheet-x:hover { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.ask-side { position: relative; display: flex; flex-direction: column; min-height: 520px; padding: 34px 30px 26px; background: linear-gradient(180deg, #C9BFB7 0%, #D8D2CC 70%, #E5E1DD 100%); overflow: hidden; }   /* 사진이 오기 전 · 못 받았을 때의 바탕(사진 배경지 → 바닥 색) */
.ask-title { position: relative; z-index: 1; margin: 0; font-size: clamp(32px, 3.4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; color: #0A0A0A; }
.ask-title:focus { outline: none; }
.ask-sub { position: relative; z-index: 1; margin: 12px 0 0; max-width: 13em; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
/* 왼쪽 사진은 판 전체(유형마다 다른 사진, img/e/ask-<유형> — 위 40% 가 빈 배경지라 제목이 얹히고, 아래 바닥 위에 메일). 바꿀 때는 겹쳐 서서히 */
.ask-ph { position: absolute; inset: 0 0 78px; z-index: 0; margin: 0; }   /* 아래 78px 은 메일 줄 — 사진의 바닥색으로 이어진다(스탠드 위에 글씨가 겹쳤다) */
.ask-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; opacity: 0; transition: opacity .3s ease; }
.ask-ph img.on { opacity: 1; }
.ask-ph::after { content: ''; position: absolute; inset: auto 0 0; height: 14%; background: linear-gradient(180deg, rgba(229, 225, 221, 0), #E5E1DD); }
@media (prefers-reduced-motion: reduce) { .ask-ph img { transition: none; } }
.ask-mail { position: relative; z-index: 1; display: grid; gap: 2px; margin: auto 0 0; padding-top: 14px; font-size: 13.5px; color: var(--ink-muted); }
.ask-mail a { font-size: 15px; font-weight: 700; color: #0A0A0A; text-decoration: none; }
.ask-mail a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ask-main { min-width: 0; padding: 30px 32px 0; }
.ask-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 56px 0 0; }
.ask-kinds button { min-height: 42px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink-muted); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.ask-kinds button:hover { border-color: var(--ink-faint); color: var(--ink); }
.ask-kinds button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }
.ask-kd { margin: 12px 0 20px; font-size: 14.5px; color: var(--ink-caption); }
.ask-body { min-width: 0; }
.ask-form { max-width: none; gap: 16px; }
.ask-form[hidden], .ask-done[hidden] { display: none; }   /* .form 의 display:grid 가 hidden 을 덮었다 */
.ask-form textarea { min-height: 0; }
.ask-form .char-count { margin-top: -10px; font-size: 13px; }
.ask-pick { margin: 0; padding: 10px 16px; border-radius: 14px; background: var(--accent-tint); font-size: 15px; color: var(--accent-hover); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ask-chips legend { width: 100%; padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ask-chips label { position: relative; display: inline-flex; margin: 0; }
.ask-chips input { position: absolute; opacity: 0; pointer-events: none; }
.ask-chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; font-size: 15px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.ask-chips input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent); }
.ask-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask-act { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 4px 0 0; padding: 18px 0 28px; border-top: 1px solid var(--line); }
.ask-act .btn { min-height: 50px; padding: 0 26px; font-size: 16px; }
.ask-act .small { display: block; position: relative; padding-left: 22px; flex: 1 1 15em; font-size: 13.5px; line-height: 1.5; color: var(--ink-caption); }
.ask-act .small a { color: var(--ink-muted); }
.ask-act .lock { position: absolute; left: 0; top: 3px; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ask-more { margin: -6px 0 0; font-size: 14px; color: var(--ink-caption); }
.ask-more a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.ask-form > .ask-more { order: 1; } .ask-form > .ask-act { order: 2; }   /* '자세한 양식' 안내는 바닥줄 위 */
.ask-done { display: grid; justify-items: start; gap: 8px; padding: 26px 0 34px; }
.ask-done .ok { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); }
.ask-done .ok svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ask-done h3 { margin: 8px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.035em; color: #0A0A0A; }
.ask-done h3:focus { outline: none; }
.ask-done p { margin: 0; max-width: 30em; font-size: 16px; line-height: 1.65; color: var(--ink-muted); }
.ask-done .btn { margin-top: 12px; min-height: 46px; padding: 0 24px; }
.ask-form .form-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* 읽어 주기 영역이라 display:none 은 쓰지 않는다 */
@media (prefers-reduced-motion: reduce) { .ask-kinds button { transition: none; } }
@media (max-width: 700px) {
  .ask-sheet .sheet-in { grid-template-columns: minmax(0, 1fr); }
  .ask-side { min-height: 0; padding: 24px 76px 22px 22px; }
  .ask-title { font-size: 30px; }
  .ask-sub { max-width: none; margin-top: 8px; font-size: 15px; }
  .ask-ph, .ask-mail { display: none; }
  .ask-main { padding: 20px 20px 0; }
  .ask-kinds { margin-right: 0; gap: 6px; }
  .ask-kinds button { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
  .ask-kd { margin: 10px 0 16px; }
  .ask-act { padding: 16px 0 calc(20px + env(safe-area-inset-bottom, 0px)); }
  .ask-act .btn { width: 100%; }
}
@media (max-width: 600px) {
  .ask-sheet { width: 100vw; }   /* 폰: 아래에서 올라오는 시트는 화면 폭 전체(.sheet 와 같다) */
  .ask-sheet .sheet-in { border-radius: 24px 24px 0 0; }
}

/* ── 문의 페이지(헤더 '문의', 2026-10-14 사용자: "문의를 하기 쉬운 디자인으로") — 추천 문항과 같은 스튜디오 판 · 양식이 먼저 ──
   종류 카드 넷과 양식이 회색 판 위에 놓이고(601 이상), 양식 카드가 왼쪽 · 넓게, 진행 안내 · 예시가 오른쪽(961 이상). 폰은 종류 → 양식 → 안내 차례 */
@media (min-width: 601px) {
  html[data-theme="electric"] .section.ct > .container { width: calc(100% - 2 * var(--gutter)); max-width: calc(1280px - 2 * var(--gutter)); padding: clamp(22px, 3vw, 40px) clamp(22px, 3.4vw, 48px) clamp(26px, 3.4vw, 44px); border-radius: 28px; background: linear-gradient(180deg, #E4E3E1 0%, #ECEBE9 40%, #F2F2F0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
  html[data-theme="electric"] .ct-tab { border-color: transparent; background: #fff; box-shadow: 0 1px 0 rgba(10, 10, 10, .04), 0 12px 28px -22px rgba(10, 10, 10, .45); }
  html[data-theme="electric"] .ct-tab.active { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 94, 142, .18), 0 16px 32px -22px rgba(46, 94, 142, .55); }
  html[data-theme="electric"] .ct .gq-card { border-color: transparent; box-shadow: 0 1px 0 rgba(10, 10, 10, .04), 0 24px 44px -30px rgba(10, 10, 10, .45); }
  html[data-theme="electric"] .ct .gq-eg { background: #fff; border-color: transparent; }
}
@media (min-width: 601px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-theme="electric"] .ct-tab { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  html[data-theme="electric"] .ct-tab:not(.active):hover { transform: translateY(-2px); }
}
.ct .gq { grid-template-areas: "card" "info" "eg"; }
@media (min-width: 961px) {
  .ct .gq { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "card info" "card eg"; column-gap: clamp(28px, 3.6vw, 52px); }
  .ct .gq-info h2 { font-size: clamp(22px, 2vw, 28px); }
}
/* 문의 팝업 높이 고정(2026-10-14 사용자: "문의 버튼을 누를 때마다 세로 크기가 변한다 — 변하지 않되 각 문의에 알맞게 양식이"):
   팝업은 늘 같은 높이, 양식은 그 안에서 위에서부터 채우고 바닥줄(안내 · 보내기)은 늘 맨 아래. 일반 문의는 내용 칸이 남는 높이를 채운다.
   칸이 많은 양식이 높이를 넘으면 오른쪽 칸만 스크롤 */
@media (min-width: 701px) {
  .ask-sheet .sheet-in { height: min(640px, calc(100vh - 48px)); height: min(640px, calc(100dvh - 48px)); overflow: hidden; }
  .ask-side { min-height: 0; }
}
.ask-main { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ask-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ask-form:not([hidden]) { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.ask-form > .ask-act { margin-top: auto; }
.ask-form[data-ask-f="general"] > label:has(textarea) { flex: 1; display: flex; flex-direction: column; min-height: 150px; }
.ask-form[data-ask-f="general"] textarea { flex: 1; min-height: 120px; resize: none; }
.ask-done:not([hidden]) { flex: 1; align-content: center; }
@media (max-width: 700px) {
  .ask-sheet .sheet-in { display: flex; flex-direction: column; height: 90vh; height: 90dvh; overflow: hidden; }
  .ask-main { flex: 1; }
}