/* 산혼 v9 시안 — biz/designmd/산혼v3/DESIGN.md 값만 (흰 바탕 · 로고 남색 · 버튼 파랑 하나 · Pretendard). 원리 참고: biz/office/docs/참고_이상한마케팅_원리_1018.md */
:root{--bg:#FFFFFF;--surf:#F3F7FC;--ink:#111A2B;--mut:#4A5568;--line:#DCE3EC;--brand:#102854;--acc:#1A63D6;--onbrand:#B8C6DB;
--h1:clamp(34px,6.2vw,76px);--h2:clamp(28px,4.4vw,52px);--lead:clamp(17px,1.6vw,21px);--f1:15px;--f2:17px;
--sec:clamp(80px,11vw,152px);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font:400 var(--f2)/1.7 Pretendard,"Pretendard Variable",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all;overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}ul,ol{list-style:none}a{color:inherit}
.w{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.skip{position:absolute;left:16px;top:-64px;background:var(--brand);color:#fff;padding:12px 16px;border-radius:10px;z-index:60}.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
br.m{display:none}
h1{font-size:var(--h1);line-height:1.14;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:var(--h2);line-height:1.2;font-weight:800;letter-spacing:-.03em;color:var(--brand);text-wrap:balance}
em{font-style:normal;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:.12em;text-underline-offset:.14em}
.eyebrow{font-size:var(--f1);font-weight:700;color:var(--acc);margin-bottom:16px;letter-spacing:.02em}
.eyebrow a{color:inherit}
.lead{font-size:var(--lead);color:var(--mut);margin-top:20px;max-width:36em;line-height:1.65}
.note{font-size:var(--f1);color:var(--mut);margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:10px;background:var(--acc);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .12s ease-out}
.btn:active{transform:scale(.97)}.btn.s{min-height:42px;padding:0 16px;font-size:var(--f1)}
.btn.line{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.ghost{display:inline-flex;align-items:center;min-height:54px;padding:0 22px;border:1.5px solid var(--ink);border-radius:10px;font-weight:700;text-decoration:none}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
/* 머리 */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.2);border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--brand);text-decoration:none;letter-spacing:.02em}.logo small{font-weight:600;color:var(--mut)}
.top nav{display:flex;gap:28px;margin-left:auto;font-size:var(--f1);font-weight:600}.top nav a{text-decoration:none;color:var(--mut)}
.pickbar{background:var(--brand);color:var(--onbrand);font-size:14px}.pickbar .w{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:8px;padding-bottom:8px}
.pickbar a{color:#fff;opacity:.7}.pickbar a[aria-current]{opacity:1;font-weight:700;text-decoration:underline}
section{padding-block:var(--sec)}
/* 첫 화면 A: 우리 영상 표지 벽 위 큰 글 */
.ha{position:relative;overflow:hidden;background:var(--brand);color:#fff;padding-block:clamp(96px,14vw,184px)}
.ha .wallbg{position:absolute;inset:-4% -2%;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;opacity:.55;filter:grayscale(.1);transform:rotate(-4deg) scale(1.08)}
.ha .wallbg img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.ha::after{content:"";position:absolute;inset:0;background:rgba(16,40,84,.78)}
.ha .w{position:relative;z-index:1}.ha .eyebrow{color:var(--onbrand)}.ha .lead{color:var(--onbrand)}.ha em{text-decoration-color:#fff}
.ghost.inv{color:#fff;border-color:rgba(255,255,255,.7)}
/* 첫 화면 B: 단언 + 표지 3장 겹치기 */
.hbgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.proof{display:flex;align-items:baseline;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);max-width:34em}
.proof b{font-size:clamp(28px,3vw,40px);font-weight:800;color:var(--brand);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}.proof span{font-size:var(--f1);color:var(--mut)}
.stack{position:relative;height:clamp(380px,40vw,540px)}
.stack img{position:absolute;width:58%;border-radius:14px;box-shadow:0 18px 40px rgba(16,40,84,.18);border:4px solid #fff}
.stack .s1{left:0;top:8%;transform:rotate(-5deg)}.stack .s2{left:24%;top:0;z-index:2}.stack .s3{right:-4%;top:14%;transform:rotate(5deg)}
/* 첫 화면 C: 고르기 */
.hc{background:var(--surf)}
.pick{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:40px;max-width:900px}
.pick a{display:flex;flex-direction:column;gap:4px;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;transition:border-color .15s ease-out}
.pick a b{font-size:clamp(18px,1.8vw,21px)}.pick a span{font-size:var(--f1);color:var(--mut)}
@media (hover:hover){.pick a:hover{border-color:var(--brand)}}
/* 결과물 벽 (어두운 칸은 여기 한 곳) */
.work{background:var(--brand);color:#fff}.work h2{color:#fff}.eyebrow.inv{color:var(--onbrand)}.lead.inv,.note.inv{color:var(--onbrand)}
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:48px}
.wall img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px}
/* 일하는 법 */
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.sticky{position:sticky;top:100px}
.steps3{counter-reset:s;border-top:2px solid var(--brand)}
.steps3 li{padding:28px 0;border-bottom:1px solid var(--line)}
.steps3 b{display:block;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--brand)}
.steps3 p{margin-top:8px;color:var(--mut)}
/* 고르기 */
.who{background:var(--surf)}
.paths{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:14px;margin-top:44px}
.path{display:flex;flex-direction:column;gap:8px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none}
.path.main{grid-row:span 2;background:var(--brand);color:#fff;border-color:var(--brand)}
.path .k{font-size:var(--f1);color:var(--mut)}.path.main .k,.path.main p{color:var(--onbrand)}
.path b{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.path p{color:var(--mut);font-size:var(--f1)}.path .pr{margin-top:auto;padding-top:12px;font-weight:700}
.path:nth-child(4){grid-column:2/4}
@media (hover:hover){.path:not(.main):hover{border-color:var(--brand)}}
/* 원칙 */
.r3 li{padding:26px 0;border-bottom:1px solid var(--line)}.r3 li:first-child{border-top:2px solid var(--brand)}
.r3 b{font-size:clamp(20px,2.2vw,26px);color:var(--brand);letter-spacing:-.02em}.r3 p{margin-top:6px;color:var(--mut)}
/* 값 */
.price{background:var(--surf)}
.pt{width:100%;border-collapse:collapse;margin-top:40px;background:#fff;border-radius:12px;overflow:hidden}
.pt th,.pt td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line)}
.pt thead th{font-size:var(--f1);color:var(--mut);font-weight:600;background:var(--bg)}
.pt tbody th a{font-weight:700;color:var(--brand)}.pt td{font-variant-numeric:tabular-nums}
/* 자주 묻는 것 */
.qa details{border-bottom:1px solid var(--line)}.qa details:first-child{border-top:2px solid var(--brand)}
.qa summary{cursor:pointer;padding:22px 0;font-weight:700;list-style:none}.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";float:right;color:var(--acc);font-weight:400}.qa details[open] summary:after{content:"−"}
.qa p{padding-bottom:22px;color:var(--mut)}
/* 끝 */
.end{text-align:left;border-top:1px solid var(--line)}.end .btn{margin-top:32px}.end .ghost{margin-top:32px;margin-left:8px}
.foot{padding-block:40px 120px;background:var(--surf);font-size:14px;color:var(--mut)}.foot p+p{margin-top:6px}
.bar{display:none}
/* ALL IN ONE 쪽 */
.hsgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.combo{position:relative;padding-bottom:40px}.combo .cm img{border-radius:12px;box-shadow:0 14px 36px rgba(16,40,84,.14)}
.combo .cr{position:absolute;right:0;bottom:0;width:32%}.combo .cr img{border-radius:12px;border:4px solid #fff;box-shadow:0 14px 36px rgba(16,40,84,.2)}
.hs .note{margin-top:0}
.get3{background:var(--surf)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:44px;border-top:2px solid var(--brand);padding-top:28px}
.g3 b{font-size:clamp(20px,2.2vw,26px);color:var(--brand)}.g3 p{margin-top:8px;color:var(--mut)}
.t3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;align-items:start}
.tier{position:relative;padding:28px;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:6px}
.tier.rec{border:2px solid var(--brand)}
.tag{position:absolute;top:-13px;left:24px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px}
.tn{font-weight:700;color:var(--mut)}.tv{font-size:clamp(28px,2.8vw,36px);font-weight:800;color:var(--brand);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ts{font-size:var(--f1);color:var(--mut)}
.tier ul{margin:16px 0 20px;border-top:1px solid var(--line)}
.tier li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--f1)}
.tier li span{color:var(--mut)}.tier li b{text-align:right;font-weight:600}
.tier .btn{width:100%}
.ddak9 .box{background:var(--surf);border-radius:16px;padding:clamp(28px,4vw,48px)}
.ddak9 h2{font-size:clamp(24px,3vw,36px)}.ddak9 ul{margin:20px 0 28px}.ddak9 li{padding:8px 0;color:var(--mut);border-bottom:1px solid var(--line)}
@media (max-width:1000px){.top nav{display:none}.hbgrid,.hsgrid,.two{grid-template-columns:1fr}.sticky{position:static}
 .stack{height:auto;display:flex;gap:10px;margin-top:8px}.stack img{position:static;width:33%;transform:none!important}
 .wall{grid-template-columns:repeat(4,1fr)}.paths{grid-template-columns:1fr 1fr}.path.main{grid-row:auto;grid-column:1/3}.path:nth-child(4){grid-column:auto}
 .t3{grid-template-columns:1fr;max-width:520px}}
@media (max-width:640px){br.m{display:inline}br.d{display:none}
 .top .btn.s{display:none}.top .w{height:58px}
 .wall{grid-template-columns:repeat(3,1fr);gap:8px}.ha .wallbg{grid-template-columns:repeat(4,1fr)}
 .pick,.paths,.g3{grid-template-columns:1fr}.path.main{grid-column:auto}
 .proof{flex-direction:column;gap:4px}
 .acts .btn,.acts .ghost{flex:1 1 100%}
 .pt th,.pt td{padding:14px 12px;font-size:15px}.pt thead th:nth-child(3),.pt td:nth-child(3){display:none}
 .bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
 .bar .btn{flex:1}.end .ghost{margin-left:0;margin-top:12px}}
@media (prefers-reduced-motion:no-preference){.hero h1,.hero .lead,.hero .acts{animation:up .7s var(--ease) both}.hero .lead{animation-delay:.08s}.hero .acts{animation-delay:.16s}
 @keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}
/* 10-18 밤 팀장 관문 반영: 첫 화면 위 여백 줄이기 · 휴대폰 첫 화면에 표지 보이기 · 증거 두 줄 */
.hb,.hs{padding-block:clamp(48px,7vw,96px) var(--sec)}
.proof.p2{margin-top:12px;padding-top:0;border-top:0}
@media (max-width:640px){.hb .hbgrid{display:flex;flex-direction:column-reverse;gap:24px}.stack{height:200px;overflow:hidden}.stack img{width:31%;height:200px;object-fit:cover;object-position:top}}
/* 10-18 밤 H&H 원리: 묶음 값 비교 · 가볍게 시작 줄 · 시작 순서 */
.path .save{font-size:13px;color:var(--onbrand);margin-top:-4px}
.light{margin-top:40px;border-top:2px solid var(--brand);padding-top:20px}
.light .lh{font-weight:700;color:var(--brand)}
.light ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.light a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none}
.light a b{font-size:16px;line-height:1.45}.light a span{font-size:14px;color:var(--mut);font-variant-numeric:tabular-nums}
@media (hover:hover){.light a:hover{border-color:var(--brand)}}
.flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;counter-reset:f}
.flow3 li{padding:18px 0;border-top:2px solid var(--brand);display:flex;flex-direction:column;gap:4px}
.flow3 b{color:var(--brand)}.flow3 span{font-size:var(--f1);color:var(--mut)}
@media (max-width:1000px){.light ul{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.light ul,.flow3{grid-template-columns:1fr}.flow3{gap:0}}
/* 10-18 밤: ALL IN ONE 필요한 것·알아둘 것 */
.nk{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.nk>div{border-top:2px solid var(--brand);padding-top:18px}
.nk h3{font-size:19px;color:var(--brand);margin-bottom:8px}
.nk li{padding:8px 0;border-bottom:1px solid var(--line);color:var(--mut);font-size:var(--f1)}
@media (max-width:640px){.nk{grid-template-columns:1fr}}
/* 10-18 밤 웹 소품 상세: 휴대폰 틀 안 견본 · 값 빈칸 */
.phone{justify-self:center;width:300px;max-width:100%;aspect-ratio:9/18.5;border:10px solid var(--ink);border-radius:36px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(16,40,84,.18)}
.phone iframe{width:100%;height:100%;border:0;display:block}
.blank{color:#B42318}
.tv.blank{font-size:20px}
@media (max-width:640px){.phone{width:260px}}
/* 10-18 밤 상품 장면 그림 (나노바나나 2.1) */
.hfig{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(16,40,84,.16)}.hfig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.tiles figure{margin:0}.tiles img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px}
.tiles figcaption{display:flex;flex-direction:column;gap:2px;margin-top:12px}.tiles b{color:#fff;font-size:19px}.tiles span{color:var(--onbrand);font-size:var(--f1)}
.newp{margin-top:40px;border-top:2px solid var(--brand);padding-top:20px}.newp .lh{font-weight:700;color:var(--brand)}
.np2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.np2 a{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;padding-bottom:18px}
.np2 img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:10px}.np2 b{padding:0 18px;font-size:19px;color:var(--brand)}.np2 span{padding:0 18px;color:var(--mut);font-size:var(--f1)}
@media (hover:hover){.np2 a:hover{border-color:var(--brand)}}
@media (max-width:1000px){.tiles{grid-template-columns:1fr 1fr}.hfig{max-width:520px}}
@media (max-width:640px){.np2{grid-template-columns:1fr}.hb .hbgrid{flex-direction:column}.hfig img{aspect-ratio:4/3}}
.hfig img{object-position:center 78%}
.hfig img{aspect-ratio:1/1;object-position:center bottom}
.proof b{white-space:normal}.proof{flex-wrap:wrap}
@media (max-width:640px){.hs .proof{margin-top:20px;padding-top:14px}.hs .hsgrid{gap:20px}}

/* 자세히 보기 (10-19 사장님: 눌러지는 칸인지 알게 모든 칸 오른쪽 위에) */
.path,.np2 a{position:relative}
.path .more,.np2 a .more{position:absolute;top:18px;right:18px;z-index:1;font-size:14px;font-weight:700;line-height:1;color:var(--acc);background:var(--surf);padding:8px 12px;border-radius:999px;white-space:nowrap;transition:transform .2s var(--ease)}
.path.main .more{color:var(--brand);background:#fff}
.np2 a .more{top:12px;right:12px;background:#fff;box-shadow:0 2px 8px rgba(16,40,84,.15)}
.path .k{padding-right:120px}
.path:hover .more,.np2 a:hover .more{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.path .more,.np2 a .more{transition:none}}