/* 디자인샘플 제작형(page_why) 전용 스타일 — 2026-09-16
 *
 * 0_prd/baroweb-design-sample.html 프로토타입에서 옮겨 왔다.
 * 프로토타입은 단독 HTML 이라 body/h1/h2/p/.wrap/.btn 같은 전역 셀렉터를 쓴다.
 * .wrap 과 .btn 은 테마의 핵심 클래스라 그대로 두면 이 페이지의 헤더·푸터·
 * 퀵패널이 깨진다. 그래서 전부 .dsl 아래로 스코프했고, :root 변수도
 * .dsl 이 들고 있다. @keyframes 는 dsl- 접두사를 붙였다.
 *
 * 뺀 것
 *   .intro      전체화면 로딩 오버레이 — 하위 페이지에 맞지 않는다
 *   .cur/.cur-dot 커스텀 커서 — 테마에 없고, lerp 지연 문제를 이미 겪었다
 *   .totop      우하단 맨위로 — 테마 .qk_list 와 자리가 겹친다
 *   .bar        상단 스크롤 진행바 — 테마 헤더(z-index:10000)에 가린다
 *   @font-face  base64 Pretendard 130KB — 본문 글꼴은 head.sub.php 의 Noto Sans KR(구글)을 쓴다
 */

.dsl{--paper:#F1F0F7; --surface:#FFFFFF; --ink:#0D0C26; --ink-2:#4C4B69; --ink-3:#8C8BA8; --line:rgba(13,12,38,.10);
  --cobalt:#2B3FE8; --cobalt-ink:#FFFFFF; --lilac:#D6CCFF; --orchid:#B39DF6; --haze:#C8DAFF; --blush:#F0D8F4;
  --night:#0A0920; --night-2:#15143A; --night-ink:#EDECFA; --glass:rgba(255,255,255,.62);
  --holo:linear-gradient(115deg,#C8DAFF 0%,#D6CCFF 38%,#F0D8F4 70%,#CFE6FF 100%);
  --shadow:0 30px 60px -30px rgba(30,28,90,.30);
  --f:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-en:"Bricolage Grotesque","Noto Sans KR",system-ui,sans-serif;
  --f-mono:"Geist Mono","Noto Sans KR",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);}
@media (prefers-color-scheme:dark){.dsl :root:not([data-theme="light"]){--paper:#0B0A1F; --surface:#14132F; --ink:#EEEDFB; --ink-2:#B2B0D2; --ink-3:#7D7BA0; --line:rgba(238,237,251,.10);
  --cobalt:#7F8CFF; --cobalt-ink:#0B0A1F; --lilac:#352C6E; --orchid:#A58EF2; --haze:#1D2A5E; --blush:#3A2146;
  --night:#06051A; --night-2:#15143A; --glass:rgba(20,19,47,.66);
  --holo:linear-gradient(115deg,#1D2A5E 0%,#352C6E 40%,#4A2753 72%,#1B3560 100%);
  --shadow:0 30px 60px -30px rgba(0,0,0,.8);}}
.dsl :root[data-theme="dark"]{--paper:#0B0A1F; --surface:#14132F; --ink:#EEEDFB; --ink-2:#B2B0D2; --ink-3:#7D7BA0; --line:rgba(238,237,251,.10);
  --cobalt:#7F8CFF; --cobalt-ink:#0B0A1F; --lilac:#352C6E; --orchid:#A58EF2; --haze:#1D2A5E; --blush:#3A2146;
  --night:#06051A; --night-2:#15143A; --glass:rgba(20,19,47,.66);
  --holo:linear-gradient(115deg,#1D2A5E 0%,#352C6E 40%,#4A2753 72%,#1B3560 100%);
  --shadow:0 30px 60px -30px rgba(0,0,0,.8);}
.dsl *{box-sizing:border-box}
.dsl{scroll-behavior:smooth;overflow-x:clip}
.dsl{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip;word-break:keep-all}
.dsl a{color:inherit;text-decoration:none}
.dsl button{font:inherit;color:inherit}
.dsl :focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.dsl .wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.dsl .mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.dsl h1, .dsl h2, .dsl h3{margin:0;text-wrap:balance;letter-spacing:-.045em;font-weight:800}
.dsl h2{font-size:clamp(34px,5.4vw,68px);line-height:1.1}
.dsl p{margin:0}
.dsl .muted{color:var(--ink-2)}
.dsl section{position:relative}
.dsl .pad{padding-block:clamp(80px,12vw,160px)}
.dsl .kicker{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);margin-bottom:22px}
.dsl .kicker::before{content:"";width:22px;height:1px;background:currentColor}
.dsl .grad{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.dsl .grad-ink{background:linear-gradient(100deg,var(--cobalt),var(--orchid));-webkit-background-clip:text;background-clip:text;color:transparent}
.dsl .nav{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translateX(-50%);z-index:80;width:min(1180px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;border-radius:999px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);transition:transform .5s var(--ease)}
.dsl .nav.hide{transform:translate(-50%,-140%)}
.dsl .brand{font-weight:800;font-size:18px;letter-spacing:-.04em;white-space:nowrap;display:flex;align-items:center;gap:8px}
.dsl .brand i{width:16px;height:16px;border-radius:5px;background:var(--holo);border:1px solid var(--line);transform:rotate(45deg)}
.dsl .tabs{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;margin-left:8px}
.dsl .tabs::-webkit-scrollbar{display:none}
.dsl .tabs a{position:relative;z-index:1;white-space:nowrap;font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 13px;border-radius:999px;transition:color .3s}
.dsl .tabs a.on{color:var(--ink)}
.dsl .tabs .ind{position:absolute;z-index:0;top:0;bottom:0;border-radius:999px;background:var(--surface);box-shadow:0 1px 0 var(--line),0 4px 14px -6px rgba(30,28,90,.25);transition:left .5s var(--ease),width .5s var(--ease)}
.dsl .nav-cta{white-space:nowrap;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
@media (max-width:700px){.dsl .nav-cta span{display:none}
.dsl .nav{padding-left:14px}
.dsl .brand b{display:none}}
.dsl .hero{min-height:min(920px,100svh);padding-block:130px 40px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.dsl .aurora{position:absolute;inset:-10%;z-index:-2;filter:blur(60px) saturate(1.1);opacity:.95}
.dsl .aurora i{position:absolute;border-radius:50%;mix-blend-mode:multiply}
.dsl :root[data-theme="dark"] .aurora i{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){.dsl :root:not([data-theme="light"]) .aurora i{mix-blend-mode:screen}}
.dsl .aurora i:nth-child(1){width:46vw;height:46vw;left:48%;top:0;background:var(--haze);animation:dsl-drift1 18s ease-in-out infinite alternate}
.dsl .aurora i:nth-child(2){width:40vw;height:40vw;left:62%;top:30%;background:var(--lilac);animation:dsl-drift2 22s ease-in-out infinite alternate}
.dsl .aurora i:nth-child(3){width:30vw;height:30vw;left:35%;top:45%;background:var(--blush);animation:dsl-drift3 16s ease-in-out infinite alternate}
@keyframes dsl-drift1{to{transform:translate(-12vw,8vh) scale(1.15)}}
@keyframes dsl-drift2{to{transform:translate(-8vw,-10vh) scale(.9)}}
@keyframes dsl-drift3{to{transform:translate(14vw,-6vh) scale(1.2)}}
.dsl .grain{position:absolute;inset:0;z-index:-1;opacity:.09;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.dsl .hero-grid{flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media (max-width:920px){.dsl .hero-grid{grid-template-columns:1fr}
.dsl .stack{height:380px;margin-top:10px}
.dsl .sc{--cw:min(280px,64vw);width:var(--cw);margin:calc(var(--cw)*-.616) 0 0 calc(var(--cw)*-.5)}
.dsl .tag-float.t1{top:4%}
.dsl .tag-float.t2{bottom:2%}}
.dsl .hero h1{font-size:clamp(44px,7.4vw,104px);line-height:1.02;letter-spacing:-.055em}
.dsl .line{display:block;overflow:hidden;padding-bottom:.06em}
.dsl .line>span{display:inline-block;animation:dsl-rise 1.1s var(--ease) both}
.dsl .line:nth-child(2)>span{animation-delay:.08s}
.dsl .line:nth-child(3)>span{animation-delay:.16s}
@keyframes dsl-rise{from{transform:translateY(105%)}}
.dsl .hero h1 .line>span{white-space:nowrap}
.dsl .hero h1 .sp{white-space:normal}
.dsl .hero h1 .en{font-family:var(--f-en);font-weight:500;font-style:normal;letter-spacing:-.04em}
.dsl .hero .sub{margin-top:28px;max-width:46ch;font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);animation:dsl-fade 1s .45s var(--ease) both}
@keyframes dsl-fade{from{opacity:0;transform:translateY(12px)}}
.dsl .hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px;animation:dsl-fade 1s .55s var(--ease) both}
.dsl .btn{display:inline-flex;align-items:center;gap:12px;padding:15px 22px 15px 24px;border-radius:999px;font-weight:600;border:1px solid transparent;cursor:pointer;background:none;transition:background .3s,color .3s,border-color .3s;will-change:transform}
.dsl .btn .ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;overflow:hidden;position:relative}
.dsl .btn .ic b{display:block;transition:transform .45s var(--ease)}
.dsl .btn .ic b+b{position:absolute;transform:translateX(-160%)}
.dsl .btn:hover .ic b:first-child{transform:translateX(160%)}
.dsl .btn:hover .ic b+b{transform:none}
.dsl .btn-p{background:var(--cobalt);color:var(--cobalt-ink)}
.dsl .btn-p .ic{background:var(--cobalt-ink);color:var(--cobalt)}
.dsl .btn-g{border-color:var(--line);background:var(--glass);backdrop-filter:blur(10px)}
.dsl .btn-g:hover{border-color:var(--ink)}
.dsl .stack{position:relative;height:clamp(360px,42vw,500px);perspective:1400px;animation:dsl-fade 1.2s .3s var(--ease) both}
.dsl .stack-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.dsl .sc{position:absolute;left:50%;top:50%;width:min(360px,78vw);aspect-ratio:3/3.7;margin:calc(min(360px,78vw)*-.616) 0 0 calc(min(360px,78vw)*-.5);border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform 1s var(--ease),opacity 1s,filter 1s;display:flex;flex-direction:column}
.dsl .sc[data-p="0"]{transform:translate3d(0,0,60px) rotate(-3deg);z-index:3}
.dsl .sc[data-p="1"]{transform:translate3d(48px,-26px,0) rotate(5deg) scale(.94);z-index:2;filter:saturate(.7)}
.dsl .sc[data-p="2"]{transform:translate3d(-54px,-44px,-60px) rotate(-9deg) scale(.88);z-index:1;filter:saturate(.5);opacity:.85}
.dsl .sc[data-p="out"]{transform:translate3d(-40px,120px,120px) rotate(-14deg);opacity:0;z-index:4}
.dsl .sc-top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.dsl .sc-top b{font-weight:800;font-size:13px;letter-spacing:-.02em}
.dsl .sc-top span{display:flex;gap:6px}
.dsl .sc-top span i{width:18px;height:4px;border-radius:2px;background:var(--line)}
.dsl .sc-vis{flex:1;margin:0 10px;border-radius:14px;position:relative;overflow:hidden;background:var(--a);display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:var(--t)}
.dsl .sc-vis::before{content:"";position:absolute;right:-20%;top:-15%;width:75%;aspect-ratio:1;background:var(--b);border-radius:var(--r);animation:dsl-bob 6s ease-in-out infinite alternate}
@keyframes dsl-bob{to{transform:translateY(14px) rotate(8deg)}}
.dsl .sc-vis small{position:relative;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;opacity:.7}
.dsl .sc-vis strong{position:relative;font-size:24px;line-height:1.15;letter-spacing:-.04em;margin-top:6px}
.dsl .sc-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 14px;font-size:13px}
.dsl .sc-foot em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.dsl .sc-foot b{color:var(--cobalt);font-weight:700}
.dsl .tag-float{position:absolute;z-index:5;padding:9px 14px;border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line);font-size:13px;font-weight:600;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center;animation:dsl-floaty 5s ease-in-out infinite alternate}
.dsl .tag-float i{width:8px;height:8px;border-radius:50%;background:var(--cobalt)}
.dsl .tag-float.t1{left:0;top:14%}
.dsl .tag-float.t2{right:0;bottom:12%;animation-delay:-2s}
.dsl .tag-float.t2 i{background:var(--orchid)}
@keyframes dsl-floaty{to{transform:translateY(-12px)}}
.dsl .facts{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:clamp(20px,5vw,72px);align-items:end;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.dsl .fact b{display:block;font-family:var(--f-en);font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.dsl .fact span{font-size:13px;color:var(--ink-2)}
.dsl .scrollhint{justify-self:end;display:flex;align-items:center;gap:12px;color:var(--ink-3)}
.dsl .scrollhint i{width:1px;height:40px;background:var(--line);position:relative;overflow:hidden}
.dsl .scrollhint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:dsl-drip 1.8s var(--ease) infinite}
@keyframes dsl-drip{to{top:100%}}
@media (max-width:700px){.dsl .facts{grid-template-columns:repeat(3,1fr)}
.dsl .scrollhint{display:none}}
.dsl .statement{padding-block:clamp(90px,14vw,190px)}
.dsl .statement p{font-size:clamp(26px,3.8vw,50px);line-height:1.32;font-weight:700;letter-spacing:-.04em;max-width:22em}
.dsl .statement .w{opacity:.14;transition:opacity .25s}
.dsl .statement .w.lit{opacity:1}
.dsl .statement .w.hl{color:var(--cobalt)}
.dsl .pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.dsl .pills span{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;display:inline-flex;gap:10px;align-items:center}
.dsl .pills span svg{width:16px;height:16px;color:var(--cobalt)}
.dsl .who-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.dsl .who-head p{max-width:34ch}
.dsl .rows{border-top:1px solid var(--line)}
.dsl .row{position:relative;display:grid;grid-template-columns:140px 1fr auto;gap:20px;align-items:center;padding:26px 8px;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.dsl .row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--holo);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.dsl .row:hover::before{transform:scaleY(1)}
.dsl .row .mono{color:var(--ink-3)}
.dsl .row h3{font-size:clamp(20px,2.6vw,32px);letter-spacing:-.04em;font-weight:700;transition:transform .6s var(--ease)}
.dsl .row:hover h3{transform:translateX(12px)}
.dsl .row .arr{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .6s var(--ease),background .3s}
.dsl .row:hover .arr{transform:rotate(-45deg);background:var(--ink);color:var(--paper)}
@media (max-width:640px){.dsl .row{grid-template-columns:1fr auto}
.dsl .row .mono{grid-column:1/-1}}
.dsl .cmp-top{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:44px}
@media (max-width:820px){.dsl .cmp-top{grid-template-columns:1fr}}
.dsl .switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:6px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.dsl .switch button{position:relative;z-index:1;border:0;background:none;padding:14px 28px;border-radius:999px;font-weight:700;cursor:pointer;transition:color .4s;white-space:nowrap}
.dsl .switch button[aria-pressed="true"]{color:var(--cobalt-ink)}
.dsl .switch .knob{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;background:var(--ink);transition:transform .6s var(--ease),background .4s}
.dsl .switch.own .knob{transform:translateX(100%);background:var(--cobalt)}
.dsl .cmp-body{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}
@media (max-width:820px){.dsl .cmp-body{grid-template-columns:1fr}}
.dsl .verdict{border-radius:24px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;background:var(--night);color:var(--night-ink);position:relative;overflow:hidden;min-height:340px;transition:background .6s}
.dsl .verdict::after{content:"";position:absolute;width:320px;height:320px;right:-80px;bottom:-120px;border-radius:50%;background:var(--holo);filter:blur(30px);opacity:.0;transition:opacity .8s}
.dsl .own-on .verdict::after{opacity:.55}
.dsl .verdict .mono{opacity:.6}
.dsl .verdict .score{font-family:var(--f-en);font-size:clamp(80px,11vw,140px);font-weight:800;line-height:.9;letter-spacing:-.06em;position:relative;z-index:1}
.dsl .verdict .score small{font-size:.35em;opacity:.5}
.dsl .verdict p{position:relative;z-index:1;max-width:26ch;color:rgba(237,236,250,.78)}
.dsl .vlist{border-radius:24px;background:var(--surface);border:1px solid var(--line);padding:8px 28px}
.dsl .vrow{display:grid;grid-template-columns:96px 1fr 28px;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);perspective:600px}
.dsl .vrow:last-child{border-bottom:0}
.dsl .vrow>span:first-child{font-size:14px;color:var(--ink-3);font-weight:500}
.dsl .vrow .val{font-weight:600;transform-origin:50% 50% -10px;transition:transform .35s var(--ease),opacity .35s}
.dsl .vrow .val.out{transform:rotateX(90deg);opacity:0}
.dsl .vrow .mk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--paper);color:var(--ink-3);transition:background .4s,color .4s}
.dsl .own-on .vrow .mk{background:var(--cobalt);color:var(--cobalt-ink)}
@media (max-width:520px){.dsl .vrow{grid-template-columns:1fr 28px}
.dsl .vrow>span:first-child{grid-column:1/-1;margin-bottom:-10px}}
.dsl .hs{height:var(--hs-h,auto)}
.dsl .hs-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.dsl .hs-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.dsl .hs-meta{display:flex;align-items:center;gap:16px}
.dsl .hs-meta .mono{color:var(--ink-3)}
.dsl .hs-prog{width:140px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.dsl .hs-prog i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0;transform:scaleX(0)}
.dsl .track{display:flex;gap:20px;padding-inline:clamp(16px,4vw,40px);will-change:transform}
.dsl .card{flex:0 0 clamp(260px,26vw,340px);border-radius:22px;background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s;transform-style:preserve-3d}
.dsl .card:hover{box-shadow:var(--shadow)}
.dsl .thumb{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--a);color:var(--t);padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.dsl .thumb .tn{display:flex;justify-content:space-between;position:relative;z-index:1}
.dsl .thumb .tn i{width:44px;height:8px;border-radius:2px;background:currentColor;opacity:.9}
.dsl .thumb .tn b{width:70px;height:8px;border-radius:2px;background:currentColor;opacity:.35}
.dsl .thumb .shape{position:absolute;right:-12%;bottom:-12%;width:68%;aspect-ratio:1;background:var(--b);border-radius:var(--r);transition:transform 1s var(--ease)}
.dsl .card:hover .shape{transform:rotate(-18deg) scale(1.1)}
.dsl .thumb .tt{position:relative;z-index:1;font-size:26px;font-weight:800;letter-spacing:-.05em;line-height:1.1;max-width:60%}
.dsl .card-b{padding:18px 20px 22px;display:flex;justify-content:space-between;align-items:end;gap:12px}
.dsl .card-b h3{font-size:19px;letter-spacing:-.03em}
.dsl .card-b .mono{color:var(--ink-3);display:block;margin-bottom:4px}
.dsl .card-b .pr{font-family:var(--f-mono);font-size:13px;padding:6px 11px;border-radius:999px;background:var(--paper);white-space:nowrap}
.dsl .hs-end{flex:0 0 clamp(260px,26vw,340px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.dsl .hs-end a{display:flex;justify-content:space-between;align-items:center;padding:24px;border-radius:22px;background:var(--holo);font-weight:700;font-size:18px;transition:transform .5s var(--ease)}
.dsl .hs-end a:hover{transform:translateX(6px)}
.dsl .hs-end a span{font-family:var(--f-mono);font-size:13px;font-weight:500}
.dsl .hs.native .hs-pin{position:static;height:auto;padding-block:clamp(80px,12vw,140px)}
.dsl .hs.native .track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:10px}
.dsl .hs.native .track::-webkit-scrollbar{display:none}
.dsl .hs.native .card, .dsl .hs.native .hs-end{scroll-snap-align:start}
.dsl .night{background:var(--night);color:var(--night-ink);border-radius:clamp(24px,4vw,48px);margin-inline:clamp(8px,1.5vw,20px);overflow:hidden;isolation:isolate}
.dsl .night .muted{color:rgba(237,236,250,.62)}
.dsl .night .kicker{color:rgba(237,236,250,.6)}
.dsl .night::before{content:"";position:absolute;z-index:-1;width:60vw;height:60vw;left:-20vw;top:-30vw;background:radial-gradient(circle,rgba(179,157,246,.35),transparent 60%)}
.dsl .night::after{content:"";position:absolute;z-index:-1;width:50vw;height:50vw;right:-20vw;bottom:-25vw;background:radial-gradient(circle,rgba(92,120,255,.3),transparent 60%)}
.dsl .scope-head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;margin-bottom:48px}
@media (max-width:820px){.dsl .scope-head{grid-template-columns:1fr}}
.dsl .seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:5px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.dsl .seg button{position:relative;z-index:1;border:0;background:none;padding:11px 24px;border-radius:999px;cursor:pointer;font-weight:600;transition:color .4s}
.dsl .seg .knob{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:#fff;transition:transform .55s var(--ease)}
.dsl .seg button[aria-pressed="true"]{color:#0A0920}
.dsl .seg.light{background:var(--surface);border-color:var(--line)}
.dsl .seg.light .knob{background:var(--ink)}
.dsl .seg.light button[aria-pressed="true"]{color:var(--paper)}
.dsl .scope{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:920px){.dsl .scope{grid-template-columns:1fr}}
.dsl .wf{position:relative;aspect-ratio:4/3.3;border-radius:20px;background:#14133A;border:1px solid rgba(255,255,255,.1);overflow:hidden;max-width:100%;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.dsl .wf-bar{height:34px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;gap:6px;align-items:center;padding-inline:14px}
.dsl .wf-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.dsl .wf-body{position:absolute;inset:34px 0 0}
.dsl .blk{position:absolute;border-radius:8px;background:rgba(255,255,255,.045);transition:opacity .5s}
.dsl .blk.lines{background:repeating-linear-gradient(180deg,rgba(255,255,255,.09) 0 6px,transparent 6px 16px);background-clip:content-box;padding:10px}
.dsl .blk.grid4{background:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dsl .blk.grid4 i{border-radius:6px;background:rgba(255,255,255,.06)}
/* `.hl` 이 서로 다른 두 가지에 쓰이고 있었다 (프로토타입 원본의 결함).
     1) 수정범위 섹션 와이어프레임 위의 하이라이트 박스 — #wfBody 안의 #hl 하나
     2) 문장 강조 단어 — page_why.js 가 <em data-hl> 안의 낱말마다 붙인다
   아래 규칙은 1)용인데 2)에도 걸려서, 강조 단어가 position:absolute 로
   흐름에서 빠져 나와 다른 글자 위에 겹쳐 찍혔다.
   (실측: '독립형'과 '으로'가 -126px 겹치고 줄도 달랐다)
   원본에서도 같았다. 1)이 실제로 하나뿐이므로 그쪽으로 좁힌다. */
.dsl #wfBody .hl{position:absolute;border-radius:10px;border:1.5px solid #C6B6FF;background:rgba(179,157,246,.16);box-shadow:0 0 0 6px rgba(179,157,246,.08),0 0 40px rgba(179,157,246,.35);transition:all .8s var(--ease);pointer-events:none}
.dsl #wfBody .hl b{position:absolute;left:-1px;top:-26px;font-family:var(--f-mono);font-size:11px;font-weight:500;padding:4px 8px;border-radius:6px 6px 6px 0;background:#C6B6FF;color:#0A0920;white-space:nowrap}
.dsl .slist{list-style:none;margin:0;padding:0;counter-reset:s}
.dsl .slist li{border-top:1px solid rgba(255,255,255,.1)}
.dsl .slist li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.dsl .slist button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:18px 2px;position:relative}
.dsl .slist button:focus-visible{outline:2px solid #C6B6FF}
.dsl .slist b{font-size:18px;font-weight:600;transition:color .3s,transform .5s var(--ease)}
.dsl .slist .t{font-family:var(--f-mono);font-size:11px;color:rgba(237,236,250,.4);align-self:center}
.dsl .slist p{grid-column:1/-1;font-size:14px;color:rgba(237,236,250,.62);display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.dsl .slist p>span{overflow:hidden}
.dsl .slist li.on p{grid-template-rows:1fr}
.dsl .slist li.on p>span{padding-top:6px}
.dsl .slist li.on b{color:#C6B6FF;transform:translateX(8px)}
.dsl .slist .tm{position:absolute;left:0;bottom:-1px;height:1px;background:#C6B6FF;width:0}
.dsl .slist li.on .tm{animation:dsl-tm var(--dur,3.2s) linear forwards}
.dsl .paused .slist li.on .tm{animation:none;width:100%}
@keyframes dsl-tm{to{width:100%}}
.dsl .price-head{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;margin-bottom:44px}
@media (max-width:820px){.dsl .price-head{grid-template-columns:1fr}}
.dsl .plans{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:14px}
@media (max-width:1020px){.dsl .plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dsl .plans{grid-template-columns:1fr}}
.dsl .spot{position:relative;background:var(--surface);border-radius:22px;isolation:isolate}
.dsl .spot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),var(--orchid),var(--line) 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.dsl .spot::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--lilac) 45%,transparent),transparent 55%);opacity:0;transition:opacity .4s}
.dsl .spot:hover::after{opacity:1}
.dsl .plan{padding:28px 26px;display:flex;flex-direction:column;gap:16px;min-height:330px;transition:transform .6s var(--ease)}
.dsl .plan .mono{color:var(--ink-3)}
.dsl .plan h3{font-size:26px}
.dsl .plan .amt{font-family:var(--f-en);font-size:56px;font-weight:800;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:flex;align-items:flex-end;gap:6px}
.dsl .plan .amt small{padding-bottom:.35em}
.dsl .plan .amt small{font-family:var(--f);font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}
.dsl .plan p{font-size:14px;color:var(--ink-2);margin-top:auto}
.dsl .plan .badge{position:absolute;right:18px;top:18px;font-family:var(--f-mono);font-size:11px;padding:5px 10px;border-radius:999px;background:var(--cobalt);color:var(--cobalt-ink);transform:scale(0);transition:transform .5s var(--ease)}
.dsl .plan.pick::before{background:linear-gradient(135deg,var(--cobalt),var(--orchid));padding:2px}
.dsl .plan.pick .badge{transform:none}
.dsl .budget{margin-top:18px;border-radius:22px;padding:26px clamp(20px,3vw,34px);display:grid;grid-template-columns:auto 1fr auto;gap:18px 32px;align-items:center;background:var(--holo)}
@media (max-width:760px){.dsl .budget{grid-template-columns:1fr}}
.dsl .budget label{font-weight:700}
.dsl .budget .out{text-align:right;min-width:170px}
.dsl .budget .out b{font-family:var(--f-en);font-size:40px;font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.dsl .budget .out b small{font-family:var(--f);font-size:16px;margin-left:2px}
.dsl .budget .out #bRec{display:block;font-size:14px;font-weight:600;color:var(--ink-2)}
@media (max-width:760px){.dsl .budget .out{text-align:left}}
.dsl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ink) var(--p,20%),color-mix(in srgb,var(--ink) 18%,transparent) var(--p,20%));cursor:pointer}
.dsl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 18px -4px rgba(30,28,90,.4);transition:transform .3s var(--ease)}
.dsl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
.dsl input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--line)}
.dsl .free-head{display:grid;grid-template-columns:auto 1fr;gap:20px 56px;align-items:end;margin-bottom:44px}
@media (max-width:820px){.dsl .free-head{grid-template-columns:1fr}}
.dsl .big{font-family:var(--f-en);font-size:clamp(110px,17vw,230px);font-weight:800;line-height:.82;letter-spacing:-.07em;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start}
.dsl .big small{font-family:var(--f);font-size:.16em;letter-spacing:-.03em;margin:.4em 0 0 .3em;line-height:1.2;color:var(--ink)}
.dsl .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.dsl .bx{grid-column:span 4;padding:24px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.dsl .bx.w6{grid-column:span 6}
.dsl .bx.dark{background:var(--night);color:var(--night-ink)}
.dsl .bx.dark .d{color:rgba(237,236,250,.66)}
.dsl .bx.holo{background:var(--holo)}
.dsl .bx .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto}
.dsl .bx svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
.dsl .bx:hover svg{transform:rotate(-12deg) scale(1.12)}
.dsl .bx .v{font-family:var(--f-mono);font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid currentColor;opacity:.75;white-space:nowrap}
.dsl .bx h3{font-size:21px;letter-spacing:-.04em;margin-top:18px}
.dsl .bx .d{font-size:14px;color:var(--ink-2)}
@media (max-width:980px){.dsl .bx, .dsl .bx.w6{grid-column:span 6}}
@media (max-width:560px){.dsl .bx, .dsl .bx.w6{grid-column:span 12}}
.dsl .vmarq{overflow:hidden;padding-block:26px;margin-top:clamp(60px,8vw,100px);border-block:1px solid var(--line)}
.dsl .vtrack{display:flex;width:max-content;will-change:transform}
.dsl .vtrack span{font-size:clamp(34px,5vw,64px);font-weight:800;letter-spacing:-.05em;white-space:nowrap;padding-right:.8em;display:flex;align-items:center;gap:.8em}
.dsl .vtrack span::after{content:"";width:.5em;height:.5em;border-radius:30%;background:var(--holo);transform:rotate(45deg);border:1px solid var(--line)}
.dsl .vtrack span:nth-child(even){-webkit-text-stroke:1.2px var(--ink);color:transparent}
.dsl .proc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px)}
@media (max-width:860px){.dsl .proc{grid-template-columns:1fr}}
.dsl .proc-l{position:sticky;top:120px;align-self:start}
.dsl .proc-l .note{margin-top:20px;font-size:13px;color:var(--ink-3);border:1px dashed var(--line);padding:10px 14px;border-radius:12px;display:inline-block}
@media (max-width:860px){.dsl .proc-l{position:static}}
.dsl .steps{position:relative;padding-left:56px}
.dsl .steps .rail{position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.dsl .steps .rail i{position:absolute;inset:0;background:linear-gradient(var(--cobalt),var(--orchid));transform-origin:top;transform:scaleY(var(--pp,0))}
.dsl .st{position:relative;padding-block:28px;border-bottom:1px solid var(--line)}
.dsl .st .dot{position:absolute;left:-56px;top:28px;width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;transition:background .5s,color .5s,border-color .5s,transform .5s var(--ease)}
.dsl .st.on .dot{background:var(--cobalt);color:var(--cobalt-ink);border-color:var(--cobalt);transform:scale(1.08)}
.dsl .st h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.04em;transition:color .5s;color:var(--ink-3)}
.dsl .st.on h3{color:var(--ink)}
.dsl .st p{color:var(--ink-2);margin-top:6px}
.dsl .pf-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.dsl .pf-list{border-top:1px solid var(--line)}
.dsl .pf-item{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),color .3s}
.dsl .pf-item h3{font-size:clamp(24px,3.4vw,44px);letter-spacing:-.05em;font-weight:700}
.dsl .pf-item .mono{color:var(--ink-3)}
.dsl .pf-item .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .5s var(--ease),background .3s}
.dsl .pf-list:hover .pf-item{color:var(--ink-3)}
.dsl .pf-list .pf-item:hover{color:var(--ink);padding-left:20px}
.dsl .pf-item:hover .go{transform:rotate(-45deg);background:var(--cobalt);color:var(--cobalt-ink);border-color:var(--cobalt)}
@media (max-width:560px){.dsl .pf-item{grid-template-columns:1fr auto}
.dsl .pf-item .mono{display:none}}
.dsl .peek{position:fixed;left:0;top:0;width:280px;aspect-ratio:4/3;border-radius:18px;pointer-events:none;z-index:70;overflow:hidden;transform:translate(-50%,-50%) scale(0);transition:transform .45s var(--ease);box-shadow:var(--shadow)}
.dsl .peek.on{transform:translate(-50%,-50%) scale(1)}
.dsl .peek .pv{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;color:#0D0C26;transition:opacity .3s}
.dsl .peek .pv strong{font-size:26px;letter-spacing:-.05em;position:relative}
.dsl .peek .pv::before{content:"";position:absolute;right:-20%;top:-20%;width:70%;aspect-ratio:1;border-radius:40%;background:rgba(255,255,255,.45);animation:dsl-spin 12s linear infinite}
@keyframes dsl-spin{to{transform:rotate(360deg)}}
.dsl .cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.dsl .cats span{font-size:13px;padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);transition:background .3s,color .3s}
.dsl .cats span:hover{background:var(--ink);color:var(--paper)}
.dsl .cta{margin-inline:clamp(8px,1.5vw,20px);border-radius:clamp(24px,4vw,48px);overflow:hidden;position:relative;isolation:isolate;padding-block:clamp(80px,10vw,130px) 0}
.dsl .cta .aurora{inset:-20%}
.dsl .cta .aurora i:nth-child(1){left:-10%;top:-10%}
.dsl .cta-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
@media (max-width:820px){.dsl .cta-in{grid-template-columns:1fr}}
.dsl .cta h2{font-size:clamp(40px,6.4vw,88px)}
.dsl .tel{display:block;font-family:var(--f-en);font-weight:800;font-size:clamp(40px,5.6vw,76px);letter-spacing:-.05em;line-height:1;margin-top:10px}
.dsl .cta .hours{color:var(--ink-2);margin-top:8px}
.dsl .cta .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.dsl .cta-mq{margin-top:clamp(60px,8vw,100px);overflow:hidden;border-top:1px solid var(--line);padding-block:18px}
.dsl .cta-mq div{display:flex;width:max-content;animation:dsl-mq 30s linear infinite}
.dsl .cta-mq span{font-family:var(--f-en);font-size:clamp(48px,8vw,120px);font-weight:800;letter-spacing:-.06em;white-space:nowrap;padding-right:.4em;line-height:1}
.dsl .cta-mq span em{font-style:normal;-webkit-text-stroke:1.5px var(--ink);color:transparent}
@keyframes dsl-mq{to{transform:translateX(-50%)}}
.dsl footer{padding-block:28px 40px;color:var(--ink-3);font-size:13px}
.dsl footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dsl{scroll-behavior:auto}
.dsl, .dsl body{height:auto}
.dsl .line>span{animation:none}
.dsl .ch{display:inline-block;animation:dsl-chr 1.15s var(--ease) both;animation-delay:calc(var(--i)*28ms + .05s);transition:translate .6s var(--ease)}
.dsl .ch.up{translate:0 -.1em}
@keyframes dsl-chr{from{transform:translateY(105%) rotate(8deg);filter:blur(8px);opacity:0}}
.dsl .facts .fact{animation:dsl-fade 1s var(--ease) both}
.dsl .facts .fact:nth-child(2){animation-delay:.1s}
.dsl .facts .fact:nth-child(3){animation-delay:.2s}
.dsl .h-ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.dsl .h-ln>span{display:inline-block;transition:transform 1.2s var(--ease);transition-delay:calc(var(--i)*100ms)}
.dsl .hsplit.wait .h-ln>span{transform:translateY(112%) rotate(3deg)}
.dsl .clip{transition:clip-path 1.2s var(--ease),transform 1.2s var(--ease),opacity 1.2s;transition-delay:var(--d,0s)}
.dsl .clip.wait{clip-path:inset(100% 0 0 0 round 22px);transform:translateY(40px)}
.dsl .clip.soft.wait{clip-path:inset(0 100% 0 0);transform:none;opacity:.2}
.dsl .tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ly,0px))}
.dsl .card:hover{--ly:-6px}
.dsl .plan.pick{--ly:-8px}
.dsl .ring{position:absolute;right:26px;top:26px;width:110px;height:110px;transform:rotate(-90deg);z-index:1}
.dsl .ring circle{fill:none;stroke:rgba(255,255,255,.1);stroke-width:5}
.dsl .ring .rg{stroke:#C6B6FF;stroke-linecap:round;stroke-dasharray:307.9;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease),stroke .5s}
.dsl .ring-ticks{position:absolute;right:26px;top:26px;width:110px;height:110px;z-index:1;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;opacity:.6}
.dsl .odo{display:inline-flex;overflow:hidden;height:1em;line-height:1;vertical-align:baseline}
.dsl .odo .col{display:flex;flex-direction:column;transition:transform 1.5s var(--ease);transition-delay:calc(var(--k)*80ms)}
.dsl .odo .col span{display:block;height:1em;line-height:1}
.dsl .big .odo .col span{background:linear-gradient(170deg,var(--cobalt),var(--orchid));-webkit-background-clip:text;background-clip:text;color:transparent}
.dsl .big .odo{height:.86em}
.dsl .big .odo .col span{height:.86em;line-height:.86}
.dsl .night{margin-inline:0;border-radius:0;clip-path:inset(0 var(--ni,0px) round var(--nr,0px));will-change:clip-path}
.dsl .wf{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.dsl .blk{animation:dsl-blkIn .7s var(--ease) both;animation-delay:calc(var(--k,0)*60ms)}
@keyframes dsl-blkIn{from{opacity:0;transform:translateY(12px) scale(.96)}}
.dsl #wfBody .hl::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);background-size:250% 100%;animation:dsl-shim 2.4s linear infinite}
@keyframes dsl-shim{from{background-position:150% 0}
to{background-position:-100% 0}}
.dsl .hs{--tm:58%;background:color-mix(in srgb,var(--paper) var(--tm),var(--tint,var(--paper)));transition:background-color .9s}
@media (prefers-color-scheme:dark){.dsl :root:not([data-theme="light"]) .hs{--tm:88%}}
.dsl :root[data-theme="dark"] .hs{--tm:88%}
.dsl .card .shape{transition:transform 1s var(--ease)}
.dsl .steps .comet{position:absolute;left:14px;top:calc(10px + var(--pp,0) * (100% - 20px));width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 6px color-mix(in srgb,var(--cobalt) 18%,transparent),0 0 26px var(--orchid);z-index:1}
.dsl .steps .rail i{transform:scaleY(var(--pp,0))}
.dsl .cta h2.fill{background:linear-gradient(90deg,var(--ink) var(--f,0%),color-mix(in srgb,var(--ink) 16%,transparent) calc(var(--f,0%) + 8%));-webkit-background-clip:text;background-clip:text;color:transparent}
.dsl .cta-mq div{animation:none;will-change:transform}
.dsl .rv{transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.dsl .rv.pre{opacity:.001;transform:translateY(40px)}
.dsl .rv.pre.sc2{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.dsl .clip.wait, .dsl .hsplit.wait .h-ln>span{clip-path:none;transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dsl *, .dsl *::before, .dsl *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
.dsl .rv.pre{opacity:1;transform:none}
.dsl{scroll-behavior:auto}}


/* ── 테마와 맞추기 위한 보정 — 2026-09-16 ─────────────────────────────── */

/* 목차 바. 프로토타입은 top:14px 이라 테마 고정 헤더(z-index:10000)와 겹쳐
   글자가 서로 위에 찍힌다. 헤더 아래로 내리고 층도 그 밑에 둔다. */
.dsl .nav{top:96px;z-index:79}
@media (max-width:920px){.dsl .nav{top:80px}}
@media (max-width:700px){.dsl .nav{display:none}}   /* 좁은 화면에선 테마 메뉴로 충분하다 */

/* 프로토타입은 단독 페이지라 첫 화면이 화면 전체였다.
   여기서는 테마 헤더가 위에 있으므로 그만큼 뺀다. */
.dsl .hero{padding-top:120px}
@media (max-width:700px){.dsl .hero{padding-top:88px}}

/* 고객준비사항(#hc_07) — 프로토타입에 없던 섹션이라 새로 만든다.
   카드 형태는 같은 페이지의 .bx(무료서비스)와 결을 맞췄다. */
.dsl .ready{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
@media (max-width:1000px){.dsl .ready{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dsl .ready{grid-template-columns:1fr}}
.dsl .rd{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);
  display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.dsl .rd:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgb(0 0 0 / 10%)}
.dsl .rd-img{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#e9ecf2}
.dsl .rd-b{padding:20px 20px 24px}
.dsl .rd-b h3{font-size:19px;margin:0 0 8px}
.dsl .rd-b p{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:0}

/* 포트폴리오 전체보기 버튼 */
.dsl .pf-more{margin-top:30px;display:flex;justify-content:center}

/* 히어로 카드에 실제 샘플 썸네일을 넣으면서 추가.
   프로토타입은 이 자리에 영문 카피(SAMPLES[].h)를 박아 뒀는데,
   DB 에 그런 필드가 없어 썸네일로 바꿨다. */
.dsl .sc-vis .sc-shot{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:10px;display:block}

/* 실제 썸네일이 들어간 히어로 카드에서는 장식 도형을 끈다.
   프로토타입은 그 자리에 영문 카피만 있어서 도형이 배경 역할을 했는데,
   사진이 들어가면 그 위를 덮어 버린다. */
.dsl .sc-vis.has-shot{padding:12px}
.dsl .sc-vis.has-shot::before{display:none}
.dsl .sc-vis.has-shot small{position:absolute;left:18px;top:14px;z-index:2;
  background:rgb(0 0 0 / 45%);color:#fff;padding:3px 7px;border-radius:5px;opacity:1}

/* 테마의 하단 고정 '빠른상담' 바가 첫 화면 제목 끝을 가린다.
   프로토타입은 단독 페이지라 그 바가 없었다. */
.dsl .hero{padding-bottom:150px}
@media (max-width:700px){.dsl .hero{padding-bottom:120px}}

/* 첫 화면 높이 보정.
   프로토타입은 단독 페이지라 화면 전체를 썼다. 여기서는 위로 테마 고정 헤더(78px),
   아래로 고정 '빠른상담' 바(약 100px)가 늘 자리를 먹어서, 세로가 짧은 화면에서는
   제목 마지막 줄이 하단 바에 걸린다. 화면 높이에 맞춰 제목과 여백을 줄인다. */
@media (max-height:900px){
	.dsl .hero{min-height:auto;padding-top:104px;padding-bottom:128px}
	.dsl .hero h1{font-size:clamp(34px,4.6vw,64px)}
	.dsl .hero .sub{margin-top:18px}
	.dsl .hero .actions{margin-top:22px}
	.dsl .facts{margin-top:34px}
}
@media (max-height:760px){
	.dsl .hero h1{font-size:clamp(30px,3.9vw,52px)}
}

/* 테마 style.css:810 의 `.sub .wrap{width:1440px}` 가 살아 있다.
   프로토타입 .wrap 은 max-width 만 지정해서, 폭은 테마 값(1440px)이 그대로 먹고
   내 max-width(1240px)에만 걸려 1240px 로 굳었다. 좁은 화면에서 본문이
   화면 밖으로 밀려 가로 스크롤이 생겼다. 폭을 명시해 끊는다. */
.dsl .wrap{width:100%}
.dsl{max-width:100%}

/* .aurora(배경 그라데이션 덩어리)는 position:absolute 인데 .hero/.cta 에
   position 이 없어서 기준이 더 바깥으로 잡히고, 그러면 그 위의 overflow:hidden
   으로도 잘리지 않는다. 좁은 화면에서 38px 짜리 가로 스크롤이 이것 때문에 생겼다. */
.dsl .hero,.dsl .cta{position:relative}

/* 테마가 그리는 섹션 탭 줄(theme/response/head.php:1065, ul.sub_v_tab.tab_st_01)을
   이 페이지에서는 감춘다.
   같은 목록을 .dsl .nav 가 이미 들고 있고, 그쪽은 화면에 붙어 따라다닌다.
   이 페이지는 17,000px(약 19화면)라 y=438 에 한 번 나오고 마는 정적 줄은
   첫 화면을 넘기면 쓸 수 없다. 두 줄이 위아래로 겹쳐 보이기도 했다.
   거기에만 있던 '고객후기'·'제작 FAQ' 링크는 .dsl .nav 로 옮겼다.

   이 파일은 page_why.php 에서만 불러오므로 다른 페이지에는 영향이 없다.
   (.dsl 밖 요소라 스코프를 붙이지 않는다) */
/* 테마 style.css 의 `.sub .sub_v_box.tb_01 .tab_st_01{display:flex}` 가
   (0,3,0) 이라 단순 선택자로는 못 이긴다. 같은 경로로 더 길게 쓴다.
   !important 는 쓰지 않는다 — 이 파일은 이 페이지에서만 로드된다. */
.sub .sub_v_box.tb_01 ul.sub_v_tab.tab_st_01{display:none}
/* 상단 서브 비주얼(사진+제목)도 뺀다(2026-09-17 요청). 그 박스가 헤더 높이만큼 띄워 주던 것을 본문이 대신한다 */
.sub .sub_v_box.tb_01{display:none}
.sub #contents:has(> .wrap .dsl){margin-top:var(--header-h)}

/* 목차 바 안의 '다른 페이지' 링크 — 섹션 링크와 구분되게 살짝 죽인다 */
.dsl .tabs a.out{color:var(--ink-3)}
.dsl .tabs a.out::before{content:"";display:inline-block;width:1px;height:11px;
	background:var(--line);margin-right:12px;vertical-align:-1px}

/* 샘플 카드 썸네일 — 실제 이미지를 넣으면서 다시 잡는다.
 *
 * .thumb 은 1:1 정사각인데 등록된 썸네일은 1.31 ~ 1.63 비율이라,
 * 그냥 넣으면 색 배경 한가운데 작게 떠서 위아래로 빈 띠가 크게 남았다.
 * (실측: 칸 330x330 에 이미지 283x217 / 290x178 — 비율도 샘플마다 달라
 *  카드들이 들쭉날쭉해 보였다)
 *
 * 칸을 꽉 채우되 홈페이지 스크린샷이므로 **위쪽 기준**으로 자른다.
 * 어느 사이트든 상단이 가장 많은 정보를 담는다.
 * 안쪽 여백은 남겨서 색 프레임이 보이게 둔다 — 히어로 카드와 같은 결이다. */
.dsl .thumb.has-shot{padding:14px}
.dsl .thumb .shot{
	flex:1 1 auto; min-height:0; width:100%; height:100%;
	object-fit:cover; object-position:top center;
	border-radius:12px; display:block;
	box-shadow:0 6px 18px rgb(0 0 0 / 18%);
}

/* 숫자 롤링(odometer)이 엉뚱한 숫자를 보여 주던 것 — 프로토타입 원본의 결함.
 *
 * .col 은 0~9 를 세로로 쌓아 두고 translateY(-값*10%) 로 굴리는 구조다.
 * 그런데 .odo 가 inline-flex(가로)라서 .col 이 flex 아이템으로 **한 줄 높이까지만**
 * 늘어난다(align-items:stretch). 그러면 -90% 가 '9칸'이 아니라 '0.9칸'이 된다.
 * 실측: 9를 넣었는데 화면에는 1 이 떠 있었다(칸 140px, col 도 140px).
 *
 * col 이 자기 내용만큼(10칸) 높아지게 두면 퍼센트가 칸 수와 맞아떨어진다. */
.dsl .odo .col{align-self:flex-start;height:auto}

/* ── 포트폴리오: 글자 목록 → 썸네일 격자 (2026-09-16) ────────────────────
 *
 * 프로토타입은 상호만 큰 글자로 늘어놓고, 마우스를 올리면 커서 옆에 작은
 * 미리보기를 띄웠다. 디자인 회사 페이지에서 제작 사례가 기본 상태로 하나도
 * 안 보이는 건 아깝고, 모바일에서는 그 미리보기를 볼 방법이 아예 없다.
 * 썸네일을 바로 깐다.
 *
 * 아래는 위쪽 목록형 규칙들을 덮는다. 같은 파일 뒤쪽이라 같은 특정도면 이긴다. */
.dsl .pf-list{
	border-top:0;
	display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px;
}
@media (max-width:1240px){.dsl .pf-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){ .dsl .pf-list{grid-template-columns:repeat(2,1fr);gap:20px 16px}}
@media (max-width:460px){ .dsl .pf-list{grid-template-columns:1fr}}

.dsl .pf-item{
	display:block; grid-template-columns:none; gap:0;
	padding:0; border-bottom:0; color:var(--ink);
	transition:transform .5s var(--ease);
}
.dsl .pf-list:hover .pf-item{color:var(--ink)}        /* 목록형의 '나머지 흐리게' 해제 */
.dsl .pf-list .pf-item:hover{padding-left:0; transform:translateY(-6px)}

.dsl .pf-shot{
	position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
	border-radius:16px; background:var(--tint,#e9ecf2);
	border:1px solid var(--line);
	box-shadow:0 6px 18px rgb(0 0 0 / 8%);
	transition:box-shadow .5s var(--ease);
}
.dsl .pf-item:hover .pf-shot{box-shadow:0 16px 36px rgb(0 0 0 / 18%)}
.dsl .pf-shot img{
	width:100%; height:100%; object-fit:cover; object-position:top center;
	display:block; transition:transform .7s var(--ease);
}
.dsl .pf-item:hover .pf-shot img{transform:scale(1.045)}

/* 썸네일이 없는 건은 상호 첫 글자로 자리를 지킨다 */
.dsl .pf-ini{
	position:absolute; inset:0; display:grid; place-items:center;
	font-size:clamp(40px,5vw,64px); font-weight:800; letter-spacing:-.04em;
	color:rgb(0 0 0 / 28%);
}

/* 바로가기 화살표 — 목록형에서는 우측 끝 원형이었다. 썸네일 모서리로 옮긴다. */
.dsl .pf-item .go{
	position:absolute; right:10px; bottom:10px;
	width:34px; height:34px; border-radius:50%;
	background:rgb(255 255 255 / 92%); color:var(--ink);
	border:1px solid var(--line);
	display:grid; place-items:center; font-size:14px;
	opacity:0; transform:translateY(6px);
	transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s,color .3s;
}
.dsl .pf-item:hover .go{
	opacity:1; transform:none;
	background:var(--cobalt); color:var(--cobalt-ink); border-color:var(--cobalt);
}

.dsl .pf-b{display:block; padding:12px 2px 0}
.dsl .pf-item h3{
	font-size:clamp(16px,1.35vw,19px); line-height:1.35;
	letter-spacing:-.03em; font-weight:700; margin:0;
}
.dsl .pf-item .mono{display:block; margin-top:4px; font-size:12px; color:var(--ink-3)}