/* 소릿결 홈페이지 공통 — 색은 변수로만(CLAUDE.md 6절). 워드마크 값은 scripts/brand.py와 같게 */
:root{
  --paper:#FBFAF6; --wall:#EEE9DD; --ink:#1C1C19; --ink2:#4E4E46; --mute:#5E5D56; --faint:#B4B3A9;
  --seal:#8C3B2E; --sealbg:#8C3B2E; --onseal:#FFFFFF;
  --line:#DCD8CC; --line2:#ECE9E0; --card:#FFFFFF; --mat:#FFFFFF; --wash:#F5F2E9; --chip:#EEE9DD;
  --wave:#CFC9BA; --band:#1C1C19; --bandtx:#F4F1E8; --bandmute:#B9B5A9; --bandseal:#F0B4A6; --phone:#1C1C19;
  --shadow:0 1px 2px rgba(28,28,25,.04),0 8px 24px rgba(28,28,25,.05);
  --serif:"Noto Serif KR","Noto Serif CJK KR",serif; --sans:"Noto Sans KR","Noto Sans CJK KR",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"DejaVu Sans Mono",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#161613; --wall:#1E1D19; --ink:#EEEBE2; --ink2:#C6C3B4; --mute:#ABA79C; --faint:#5E5C51;
  --seal:#E09A88; --sealbg:#A4473A; --onseal:#FFFFFF;
  --line:#34332D; --line2:#2A2924; --card:#211F1B; --mat:#2A2924; --wash:#24231E; --chip:#2A2924;
  --wave:#4A4840; --band:#24221D; --bandtx:#EEEBE2; --bandmute:#A8A498; --bandseal:#E09A88; --phone:#3A3934;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#161613; --wall:#1E1D19; --ink:#EEEBE2; --ink2:#C6C3B4; --mute:#ABA79C; --faint:#5E5C51;
  --seal:#E09A88; --sealbg:#A4473A; --onseal:#FFFFFF;
  --line:#34332D; --line2:#2A2924; --card:#211F1B; --mat:#2A2924; --wash:#24231E; --chip:#2A2924;
  --wave:#4A4840; --band:#24221D; --bandtx:#EEEBE2; --bandmute:#A8A498; --bandseal:#E09A88; --phone:#3A3934;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.75;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.in{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
section[id],main[id]{scroll-margin-top:calc(76px + env(safe-area-inset-top,0px))}
.skip{position:absolute;left:-999px;top:8px}
.skip:focus{left:16px;z-index:20;background:var(--paper);padding:10px 14px;font-family:var(--sans)}

/* 워드마크 기본형 */
.wm{font-family:var(--serif);font-weight:600;letter-spacing:0;line-height:1;white-space:nowrap;text-decoration:none}
.wm i{font-style:normal;color:var(--seal);position:relative;top:-.02em}
.wm .d1{margin:0 .105em 0 .175em}.wm .d2{margin:0 .158em 0 .123em}

/* 머리 */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(251,250,246,.94);background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top .in{display:flex;align-items:center;gap:28px;height:68px}
header.top .wm{font-size:24px;padding:10px 0}
nav.gnb{display:flex;gap:26px;margin-left:auto;font-family:var(--sans);font-size:15px}
nav.gnb a{text-decoration:none;color:var(--mute);padding:10px 0}
nav.gnb a:hover{color:var(--ink)}
nav.gnb a[aria-current="page"]{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--seal)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none;border-radius:99px;padding:11px 22px;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;white-space:nowrap}
.btn.fill{background:var(--sealbg);border-color:var(--sealbg);color:var(--onseal)}
.btn.sm{padding:10px 18px;font-size:14px}
.menu{display:none}
@media (max-width:860px){
  header.top .in{gap:10px}
  nav.gnb{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px max(20px,env(safe-area-inset-left,0px)) 16px}
  nav.gnb.open{display:flex}
  nav.gnb a{padding:12px 0;font-size:17px;color:var(--ink);border-top:1px solid var(--line)}
  nav.gnb a[aria-current="page"]{box-shadow:none;color:var(--seal)}
  header.top .btn.fill{order:1;margin-left:auto;padding-inline:16px}
  header.top .btn.fill .lg{display:none}
  .menu{display:inline-flex;order:2}
}

/* 공통 구획 */
section.s{padding-block:96px}
.sh{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;margin-bottom:48px}
.sh h2{font-size:clamp(28px,3.2vw,38px);line-height:1.3;font-weight:600;margin:0;letter-spacing:-.01em;text-wrap:balance}
.sh p{margin:0;color:var(--mute);max-width:34em}
.lab{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--seal);margin:0 0 12px}
.eyebrow{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--seal);margin:0 0 18px}
.more{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:860px){section.s{padding-block:72px}.sh{margin-bottom:36px}}

/* 하위 페이지 머리 */
.phead{background:var(--wall);border-bottom:1px solid var(--line)}
.phead .in{padding-block:72px 64px}
.phead h1{font-size:clamp(30px,4vw,46px);line-height:1.3;font-weight:600;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
.phead p{margin:0;color:var(--mute);font-size:18px;max-width:36em}
@media (max-width:860px){.phead .in{padding-block:44px 40px}.phead p{font-size:17px}}

/* 상담 띠와 꼬리말 */
.end{background:var(--band);color:var(--bandtx);padding-block:96px}
.end .in{display:grid;grid-template-columns:1fr auto;gap:40px 64px;align-items:center}
.end h2{font-size:clamp(28px,3.4vw,42px);font-weight:600;line-height:1.3;margin:0 0 14px}
.end p{margin:0;color:var(--bandmute);font-family:var(--sans);font-size:16px;max-width:30em}
.end .acts{display:grid;gap:14px;justify-items:end}
.end .btn.fill{border-color:var(--sealbg)}
.end .mail{font-family:var(--mono);font-size:15px;color:var(--bandtx)}
@media (max-width:860px){.end{padding-block:72px}.end .in{grid-template-columns:1fr}.end .acts{justify-items:start}}
footer.foot{background:var(--band);color:var(--bandmute);border-top:1px solid color-mix(in srgb,var(--bandtx) 14%,transparent);font-family:var(--sans);font-size:13px}
footer.foot .in{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;padding-block:26px calc(26px + env(safe-area-inset-bottom,0px))}
footer.foot .wm{font-size:16px;color:var(--bandtx)}
footer.foot .wm i{color:var(--bandtx)}
footer.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
footer.foot nav a{text-decoration:none;padding:6px 0}

/* ── 홈 ── */
.hero{background:var(--wall);background-image:linear-gradient(to bottom,color-mix(in srgb,var(--paper) 55%,transparent),transparent 45%),radial-gradient(ellipse 50% 65% at 72% 40%,color-mix(in srgb,var(--paper) 80%,transparent),transparent 70%);border-bottom:1px solid var(--line)}
.hero .in{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;padding-block:72px 84px}
.hero h1{font-size:clamp(32px,3.6vw,46px);line-height:1.3;font-weight:600;letter-spacing:-.015em;margin:0 0 22px}
@media (min-width:961px){.hero h1 .nw{white-space:nowrap}}
.hero p.lead{font-size:18px;line-height:1.8;color:var(--mute);margin:0 0 30px;max-width:30em}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.from{font-family:var(--sans);font-size:14px;color:var(--mute);margin:18px 0 0;line-height:1.7}
.from b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.wallart{position:relative;padding-bottom:56px;max-width:560px;margin-left:auto;width:100%}
.frame{width:82%;background:var(--mat);padding:6%;box-shadow:0 1px 0 rgba(0,0,0,.04),0 28px 60px -18px rgba(40,32,20,.35),0 6px 14px -6px rgba(40,32,20,.18);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.frame img{width:100%;height:auto;aspect-ratio:820/793;object-fit:cover}
/* 실물 캡션 95×45 견본 — 종이 실물이라 색 고정 */
.caption{width:270px;aspect-ratio:95/45;margin:0;background:#FBFAF6;color:#1C1C19;border-radius:2px;box-shadow:0 14px 28px -12px rgba(40,32,20,.4),0 2px 4px rgba(40,32,20,.12);display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px 14px 11px 16px;position:absolute;right:0;bottom:0;z-index:1}
.caption .who{font-family:var(--sans);font-size:9.5px;color:#6E6D66;letter-spacing:.04em}
.caption .ti{font-size:17px;font-weight:600;line-height:1.2;margin-top:3px}
.caption .hj{font-size:10px;color:#6E6D66;margin-top:1px}
.caption .sp{font-family:var(--sans);font-size:8.5px;color:#6E6D66;margin-top:auto;line-height:1.45}
.caption .l{display:flex;flex-direction:column;min-width:0}
.caption .r{display:flex;flex-direction:column;align-items:center;gap:2px}
.caption .r svg{width:62px;height:62px}
.caption .r svg path{fill:#1C1C19}
.caption .r small{font-family:var(--sans);font-size:8px;color:#6E6D66}
.listen{margin:22px 0 0 auto;display:grid;gap:10px;max-width:560px;width:100%}
.play{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 18px 6px 6px;cursor:pointer;font-family:var(--sans);font-size:15px;color:var(--ink);text-align:left}
.play .k{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sealbg);display:grid;place-items:center}
.play .k svg{width:14px;height:14px;fill:var(--onseal)}
.play .t{display:grid;line-height:1.35}
.play .t small{color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums}
.wave{display:flex;align-items:center;gap:2px;height:34px;cursor:pointer;border-radius:4px}
.wave i{flex:1;background:var(--wave);border-radius:2px;min-height:2px;transition:background .15s}
.wave i.on{background:var(--seal)}
.wallnote{font-family:var(--sans);font-size:13px;color:var(--mute);line-height:1.6}
@media (max-width:960px){
  .hero .in{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:28px 52px}
  .hero .hl,.hero .hr{display:contents}
  .hero .eyebrow{order:1;margin-bottom:10px}
  .hero h1{order:2;font-size:clamp(26px,7vw,34px);margin-bottom:18px}
  .wallart{order:3;margin:0 auto;padding-bottom:48px}
  .frame{width:76%}
  .listen{order:4;margin:18px auto 30px}
  .hero p.lead{order:5;font-size:17px;margin-bottom:24px}
  .cta{order:6}
  .from{order:7}
}

/* 캡션 → 작품 페이지 → 음성 */
.chain{display:grid;grid-template-columns:1.15fr auto .8fr auto 1fr;gap:20px;align-items:start}
.chain .arrow{font-family:var(--sans);color:var(--seal);font-size:26px;align-self:center;margin-top:-90px}
.stage{display:grid;gap:18px;justify-items:center;text-align:center}
.stage .v{display:grid;place-items:center;height:370px;width:100%}
.stage h3{font-size:21px;font-weight:600;margin:0}
.stage p{margin:4px 0 0;font-family:var(--sans);font-size:15px;color:var(--mute);line-height:1.65}
.capimg{width:100%;max-width:340px;box-shadow:0 14px 30px -14px rgba(40,32,20,.45);border-radius:2px}
.phone{width:190px;border:8px solid var(--phone);border-radius:28px;overflow:hidden;box-shadow:0 22px 44px -18px rgba(40,32,20,.45);background:#fff}
.phone img{width:100%;height:340px;object-fit:cover;object-position:top}
.sound{width:100%;max-width:300px;display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.sound .row{display:flex;justify-content:space-between;gap:10px;font-family:var(--sans);font-size:13px;color:var(--mute)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;font-family:var(--sans);font-size:12px}
.seg span{padding:3px 10px}.seg span:first-child{background:var(--ink);color:var(--paper)}
@media (max-width:960px){
  .chain{grid-template-columns:1fr;gap:12px}
  .chain .arrow{transform:rotate(90deg);justify-self:center;margin:0}
  .stage .v{height:auto}
}

/* 사례 */
.case{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:96px;gap:10px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.mosaic .a{grid-column:span 3;grid-row:span 4}
.mosaic .b{grid-column:span 3;grid-row:span 2}
.mosaic .c{grid-column:span 2;grid-row:span 2}
.mosaic .d{grid-column:span 1;grid-row:span 2}
.case h3{font-size:30px;font-weight:600;margin:0 0 6px;line-height:1.3}
.case .who{font-family:var(--sans);color:var(--mute);font-size:15px;margin-bottom:24px}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0 0 26px;font-size:16px}
dl.facts dt{font-family:var(--sans);font-size:13px;color:var(--mute);padding-top:3px}
dl.facts dd{margin:0}
.made{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none}
.made li{font-family:var(--sans);font-size:13px;border-radius:3px;padding:4px 10px;color:var(--ink);background:var(--chip)}
@media (max-width:960px){.case{grid-template-columns:1fr;gap:32px}.mosaic{grid-auto-rows:62px}}

/* 비교 */
.vs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none}
.vs li{border:1px solid var(--line);border-radius:4px;padding:26px 26px 28px;background:var(--card)}
.vs h3{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--mute);margin:0 0 10px}
.vs p{margin:0;font-size:16px;line-height:1.75}
.vs li.us{border-color:var(--seal);box-shadow:inset 0 0 0 1px var(--seal)}
.vs li.us h3{color:var(--seal)}
@media (max-width:860px){.vs{grid-template-columns:1fr}}

/* 가격 카드 */
.price{background:var(--wall);border-block:1px solid var(--line)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--card);border-radius:4px;margin:0;padding:0;list-style:none}
.tier{padding:34px 32px;display:grid;gap:10px;align-content:start}
.tier+.tier{border-left:1px solid var(--line)}
.tier.k{background:var(--band);color:var(--bandtx);margin:-10px 0;border-radius:4px;box-shadow:0 20px 40px -20px rgba(0,0,0,.45);border:1px solid var(--band)}
:root[data-theme="dark"] .tier.k{border-color:var(--seal)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tier.k{border-color:var(--seal)}}
.tier .nm{font-size:22px;font-weight:600;display:flex;align-items:center;gap:10px;margin:0;line-height:1.4}
.tier .nm small{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--seal);border:1px solid currentColor;border-radius:99px;padding:0 8px}
.tier.k .nm small{color:var(--bandseal)}
.tier .amt{font-size:40px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.1}
.tier .amt span{font-size:16px;font-weight:400;margin-left:4px;color:var(--mute)}
.tier.k .amt span,.tier.k .what{color:var(--bandmute)}
.tier .what{font-family:var(--sans);font-size:14.5px;color:var(--mute);line-height:1.7}
.tier .what b{color:inherit;font-weight:700}
.tier .what .it{white-space:nowrap}
.tier.k .what b{color:var(--bandtx)}
.promise{display:flex;flex-wrap:wrap;gap:8px 28px;margin:30px 0 0;padding:18px 0 0;list-style:none;border-top:1px solid var(--line);font-family:var(--sans);font-size:14.5px;color:var(--ink)}
.promise li:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--seal);margin-right:9px;vertical-align:2px}
.pnote{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;margin-top:22px;font-family:var(--sans);font-size:14.5px;color:var(--mute);line-height:1.7}
.pnote p{margin:0;max-width:44em}
@media (max-width:860px){.tiers{grid-template-columns:1fr}.tier+.tier{border-left:0;border-top:1px solid var(--line)}.tier.k{margin:0}.promise{display:grid;gap:8px}}

/* 진행 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin:0;padding:0;list-style:none}
.steps:before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line)}
.steps .step{position:relative;padding-right:28px}
.steps .n{width:39px;height:39px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);display:grid;place-items:center;font-family:var(--sans);font-size:15px;font-weight:500;margin-bottom:20px;position:relative}
.steps .step:first-child .n{background:var(--sealbg);border-color:var(--sealbg);color:var(--onseal)}
.steps h3{font-size:19px;font-weight:600;margin:0 0 8px}
.steps p{margin:0;font-family:var(--sans);font-size:15px;color:var(--mute);line-height:1.7}
.steps .when{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:13px;color:var(--seal)}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:28px}.steps:before{left:19px;right:auto;top:0;bottom:0;width:1px;height:auto}.steps .step{padding:0 0 0 62px}.steps .n{position:absolute;left:0;top:-4px}}

/* ── 서비스: 만드는 것 ── */
.items{display:grid;gap:72px}
.item{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.item:nth-child(even) .pic{order:2}
.item .pic{background:var(--wall);border-radius:4px;padding:36px;display:grid;place-items:center;min-height:320px}
.item .pic img{box-shadow:0 14px 30px -14px rgba(40,32,20,.45);border-radius:2px;max-height:420px;width:auto}
.item h3{font-size:clamp(24px,2.6vw,30px);font-weight:600;line-height:1.35;margin:0 0 6px}
.item .tier-tag{display:inline-block;font-family:var(--sans);font-size:13px;color:var(--seal);margin-bottom:14px}
.item p{margin:0 0 12px;color:var(--ink2)}
.item ul{margin:14px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:15px;color:var(--mute)}
.item ul li{padding:7px 0;border-top:1px solid var(--line2)}
@media (max-width:860px){.items{gap:56px}.item{grid-template-columns:1fr;gap:24px}.item:nth-child(even) .pic{order:0}.item .pic{padding:24px;min-height:0}.item .pic img{max-height:360px}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two > div{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:30px 30px 32px}
.two h3{font-size:22px;font-weight:600;margin:0 0 12px}
.two p{margin:0;color:var(--ink2)}
@media (max-width:860px){.two{grid-template-columns:1fr}}

/* ── 제작 사례 ── */
.ex{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.ex .cover{border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
.ex h2{font-size:clamp(30px,3.6vw,42px);font-weight:600;line-height:1.25;margin:0 0 6px}
.ex .who{font-family:var(--sans);color:var(--mute);font-size:15px;margin-bottom:22px}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0;padding:0;list-style:none}
.thumbs li{aspect-ratio:1;background:var(--wall);border-radius:2px;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover}
.made-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.made-grid figure{margin:0;background:var(--wall);border-radius:4px;padding:20px;display:grid;gap:14px;align-content:start}
.made-grid figure img{box-shadow:0 10px 24px -12px rgba(40,32,20,.45);border-radius:2px;margin:0 auto;max-height:260px;width:auto}
.made-grid figcaption{font-family:var(--sans);font-size:14px;color:var(--ink);text-align:center}
.made-grid figcaption small{display:block;color:var(--mute);font-size:13px}
@media (max-width:960px){.ex{grid-template-columns:1fr;gap:32px}.thumbs{grid-template-columns:repeat(4,1fr)}.made-grid{grid-template-columns:1fr 1fr}}
.soon{margin-top:40px;font-family:var(--sans);font-size:15px;color:var(--mute)}

/* ── 소개 ── */
.prose{max-width:40em}
.prose p{margin:0 0 18px;color:var(--ink2)}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0;padding:0;list-style:none;counter-reset:r}
.rules li{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:28px 28px 30px;counter-increment:r}
.rules li:before{content:counter(r);display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--seal);margin-bottom:8px}
.rules h3{font-size:20px;font-weight:600;margin:0 0 8px}
.rules p{margin:0;color:var(--ink2);font-size:16px}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dodont > div{border-top:2px solid var(--ink);padding-top:20px}
.dodont > div.no{border-top-color:var(--line)}
.dodont h3{font-family:var(--sans);font-size:15px;font-weight:500;margin:0 0 12px;color:var(--mute)}
.dodont ul{margin:0;padding:0;list-style:none}
.dodont li{padding:9px 0;border-bottom:1px solid var(--line2)}
@media (max-width:860px){.rules,.dodont{grid-template-columns:1fr}}

/* ── 자주 묻는 질문 ── */
.faq{max-width:52em}
.faq h2{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--seal);margin:48px 0 6px}
.faq h2:first-child{margin-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:400;color:var(--mute);font-size:24px;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq .body{padding:0 0 22px;color:var(--ink2);max-width:40em}
.faq .body p{margin:0 0 12px}
.faq .body b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 2차 검토 반영(2026-11-01) ── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.phead p,.sh p,.pnote p,.promise li,.item p{text-wrap:pretty}
.phead p{max-width:38em}
.hang{text-indent:-.45em}
.todo{color:var(--seal);font-family:var(--sans);font-size:15px}
footer.foot nav a,.end .mail{display:inline-flex;align-items:center;min-height:44px}
/* 서비스: 그림 상자 비율을 맞춰 리듬을 고르게 */
.item .pic{height:400px;min-height:0;padding:36px;overflow:hidden}
.item .pic img{max-height:328px;max-width:100%;width:auto;object-fit:contain}
.item .pic .phone{width:170px}
.item .pic .phone img{max-height:none;width:100%;height:300px;box-shadow:none;border-radius:0}
@media (max-width:860px){.item .pic{height:300px;padding:20px}.item .pic img{max-height:250px}.item .pic .phone{width:140px}.item .pic .phone img{height:240px}}
/* 제작 사례: 관람객이 보는 순서 */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;counter-reset:f}
.flow li{counter-increment:f;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:28px 22px 24px;display:grid;gap:18px;align-content:space-between;justify-items:center;text-align:center}
.flow li img{box-shadow:0 10px 24px -12px rgba(40,32,20,.45);border-radius:2px;max-height:250px;width:auto}
.flow b{font-family:var(--sans);font-size:15px;font-weight:500}
.flow b:before{content:counter(f);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sealbg);color:var(--onseal);font-size:13px;margin-right:8px}
@media (max-width:860px){.flow{grid-template-columns:1fr}}
/* 소개: 원칙 번호를 크게 */
.rules li:before{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1;margin-bottom:12px}
/* 자주 묻는 질문: 왼쪽 분류 목차 + 질문 */
.faqwrap{display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start}
.faq{max-width:46em}
.toc{position:sticky;top:96px;display:grid;gap:2px;font-family:var(--sans);font-size:15px}
.toc a{text-decoration:none;color:var(--mute);padding:10px 0;border-left:2px solid var(--line);padding-left:14px}
.toc a:hover{color:var(--ink);border-left-color:var(--seal)}
@media (max-width:860px){.faqwrap{grid-template-columns:1fr;gap:0}.toc{display:none}}
/* 어두운 화면에서 표준 카드 채움 */
:root[data-theme="dark"] .tier.k{background:color-mix(in srgb,var(--seal) 14%,var(--card))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tier.k{background:color-mix(in srgb,var(--seal) 14%,var(--card))}}
/* 제작 사례: 단체전 두 건 */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.jump a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:22px;font-family:var(--sans);font-size:14px;color:var(--ink);text-decoration:none;background:var(--card)}
.jump small{color:var(--mute);font-size:12px}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.gcase{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:28px;display:flex;flex-direction:column}
.gcase .gpic{height:260px;display:flex;align-items:center;justify-content:center;background:var(--wall);border-radius:4px;margin-bottom:22px;overflow:hidden}
.gcase .gpic img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:top}
.gcase h3{font-size:24px;font-weight:600;line-height:1.35;margin:0 0 4px}
.gcase .who{font-family:var(--sans);color:var(--mute);font-size:14px;margin-bottom:16px}
.gcase h3+dl{margin-top:16px}
.gcase .cta{margin-top:auto}
.also{font-family:var(--sans);font-size:14px;color:var(--mute);margin:-8px 0 22px;line-height:1.7}
.also a{color:var(--ink);text-underline-offset:3px}
@media (max-width:860px){.cases{grid-template-columns:1fr}.gcase{padding:20px}.gcase .gpic{height:auto;aspect-ratio:1.9}}
.also a{display:inline-block;padding-block:12px;margin-block:-12px}
.gcase .gpic img{object-position:center}
.gcase .sample{margin-top:auto;background:var(--wash);border-radius:6px;padding:14px 16px}
.gcase .sample p{margin:0 0 8px;font-family:var(--sans);font-size:14px;font-weight:500}
.gcase .sample small{color:var(--mute);font-weight:400;margin-left:4px}
.gcase .sample audio{width:100%;height:44px}
#osd .gpic{background:#F2F0EB}#osd .gpic img{object-fit:contain}
.gthumbs{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gthumbs a{display:block;text-decoration:none;color:var(--ink)}
.gthumbs img{width:100%;height:130px;object-fit:cover;border-radius:3px;background:var(--wall)}
.gthumbs span{display:block;font-family:var(--sans);font-size:13px;margin-top:6px;line-height:1.4}
.gthumbs small{display:block;color:var(--mute);font-size:12px}
#gb .sample{margin-top:0}

/* ── 2026-11-01 개편 검토에서 남긴 개선(색감·구획은 이 판 그대로) ──
   흰 바탕 「화이트 큐브」안은 대표 주변 반응이 「밋밋하다, 기존이 낫다」여서 접음(css 보관: 세션 scratchpad) */
html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px));scroll-padding-bottom:80px}
body,button,input,select,textarea{font-feature-settings:"halt"}
@media (min-width:861px){br.mbr{display:none}}
/* 휴대폰 첫 화면: 재생 버튼 다음에 견적·상담 버튼 */
@media (max-width:960px){
  .listen{margin:16px auto 20px}
  .hero .cta{order:5;margin-bottom:28px}
  .hero p.lead{order:6}
  .hero .from{order:7}
}
@media (max-width:860px){
  .phead h1{font-size:clamp(27px,7.4vw,34px)}
  .tier .amt{font-size:34px}
}
.promise li{padding-left:1.5em;text-indent:-1.5em}
.promise li:before{margin-right:.6em}
/* 사례 음성 견본(sample.js) — 첫 화면 재생 버튼과 같은 모양 */
.gcase .sample{display:grid;gap:10px}
.gcase .sample .play{width:100%}
.pbar{height:24px;cursor:pointer;position:relative}
.pbar::before{content:"";position:absolute;left:0;right:0;top:11px;height:3px;border-radius:2px;background:var(--wave)}
.pbar i{position:absolute;left:0;top:11px;height:3px;border-radius:2px;width:0;background:var(--seal)}
/* 소개: 사례 그림 띠 */
.strip{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.strip li{aspect-ratio:1;background:var(--wall);border-radius:2px;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.strip{grid-template-columns:repeat(2,1fr)}}
.gthumbs small,.seg{font-size:13px}
.chain .arrow{color:var(--seal)}