/* 5FUNNEL STUDIO — generated by theme_build.py from the approved prototype. Edit the prototype, not this file. */

/* Layout: a clickable copy of the proposed site. Dark studio ground with paper sections, hairlines, square controls, one accent.
   Single visual world on purpose (the site itself is dark-first), so no theme switch. Dev notes float over each page and can be hidden. */
:root{
  --ink:#0b0b0d; --ink-2:#151518; --paper:#f4f3ef;
  --on-d1:#f2f1ec; --on-d2:rgba(242,241,236,.72); --on-d3:rgba(242,241,236,.46); --rule-d:rgba(242,241,236,.14);
  --on-l1:#101012; --on-l2:rgba(16,16,18,.74); --on-l3:rgba(16,16,18,.55); --rule-l:rgba(16,16,18,.14);
  --accent:#5f8cf7; --note:#ffd166; --note-ink:#1a1405;
  --font:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--on-d1);font-family:var(--font);font-size:15px;line-height:1.7;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{max-width:100%;display:block}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:900px){.wrap{padding-left:clamp(24px,4vw,56px);padding-right:clamp(24px,4vw,56px)}}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--on-d3)}
.paper{background:var(--paper);color:var(--on-l1)}
.paper .label{color:var(--on-l3)}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid currentColor;padding:13px 20px;font-size:13px;letter-spacing:.02em;transition:background .25s,color .25s}
.btn.solid{background:var(--on-d1);color:var(--ink);border-color:var(--on-d1)}
.paper .btn.solid{background:var(--on-l1);color:var(--paper);border-color:var(--on-l1)}
.btn:hover{background:var(--on-d1);color:var(--ink)}
.paper .btn:hover{background:var(--on-l1);color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.arr{transition:transform .3s var(--ease);display:inline-block}
a:hover .arr,button:hover .arr{transform:translateX(5px)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* dev bar + notes */
.devbar{position:sticky;top:0;z-index:60;background:var(--note);color:var(--note-ink);font-size:13px;padding:8px 0;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.devbar .wrap{display:flex;gap:12px 20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.devbar b{font-weight:700}
.devbar button{border:1px solid currentColor;padding:4px 10px;font-size:12px}
body.nodev .dev{display:none}
.dev{background:var(--note);color:var(--note-ink);font-size:13.5px;line-height:1.65;padding:14px 16px;display:grid;gap:6px;max-width:760px}
.dev b{font-weight:700}
.dev ul{margin:0;padding-left:1.1em;display:grid;gap:3px}
.dev-row{padding-block:18px 0}

/* header */
.hdr{position:sticky;top:var(--devh,0px);z-index:50;background:rgba(11,11,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-d)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.hdr .logo svg{height:22px;width:auto;display:block}
.hdr nav{display:flex;gap:clamp(14px,2.4vw,30px);font-size:14px}
.hdr nav a{padding:6px 0;color:var(--on-d2);border-bottom:1px solid transparent}
.hdr nav a[aria-current=page]{color:var(--on-d1);border-bottom-color:var(--on-d1)}
.hdr nav a:hover{color:var(--on-d1)}
@media(max-width:560px){.hdr .logo svg{height:16px}.hdr nav{gap:14px;font-size:13px}}

/* page switching */
.page[hidden]{display:none!important}
.sec{padding-block:clamp(72px,9vw,130px)}
.sec+.sec{border-top:1px solid var(--rule-d)}
.paper.sec+.sec,.sec+.paper.sec{border-top:0}
.h2{margin:14px 0 0;font-size:clamp(32px,4.4vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
.lede{margin:18px 0 0;max-width:56ch;font-size:clamp(15px,1.25vw,17px);color:var(--on-d2)}
.paper .lede{color:var(--on-l2)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.more{font-size:14px;border-bottom:1px solid var(--rule-d);padding-bottom:3px}

/* hero */
.hero{position:relative;min-height:min(92vh,980px);display:grid;align-content:end;overflow:hidden;padding-block:120px 48px}
.hero .bg{position:absolute;inset:0}
.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1) brightness(.55);transition:opacity 1.6s ease}
.hero .bg img.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.25),rgba(11,11,13,.85))}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero h1{margin:0;font-size:clamp(64px,15vw,250px);font-weight:800;letter-spacing:-.06em;line-height:.85}
.hero h1 small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.3em;font-weight:500;margin:0 0 16px 4px;color:var(--on-d2)}
.hero .sig{margin:28px 0 0;font-size:clamp(22px,2.6vw,38px);font-weight:700;letter-spacing:-.03em}
.hero .q{margin:6px 0 0;font-size:clamp(16px,1.6vw,22px);color:var(--on-d2)}
.hero .actions{margin-top:32px}
.hero .tag{position:absolute;right:0;bottom:0;font-family:var(--mono);font-size:11px;color:var(--on-d3)}

/* statement */
.stmt h2{max-width:20ch}
.stmt h2 em{font-style:normal;color:var(--accent)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,72px);list-style:none;padding:0}
.trio li{border-top:1px solid var(--on-l1);padding-top:16px;display:grid;gap:8px}
.trio b{font-size:18px}
.trio span{color:var(--on-l2);font-size:15px}
.trio .n{font-family:var(--mono);font-size:12px;color:var(--on-l3)}
@media(max-width:800px){.trio{grid-template-columns:1fr}}

/* video cards */
.vcard{display:grid;gap:10px;text-align:left;width:100%}
.vmedia{position:relative;overflow:hidden;background:var(--ink-2);aspect-ratio:4/5}
.vmedia img,.vmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vmedia img{transition:transform 1.2s var(--ease),filter .6s}
@media(hover:hover){.vmedia img{filter:grayscale(1) contrast(1.05)}.vcard:hover .vmedia img,.vcard:focus-visible .vmedia img{filter:none;transform:scale(1.04)}}
.vmedia video{opacity:0;transition:opacity .4s}
.vcard.playing video{opacity:1}
.vmedia .len{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:11px;background:rgba(11,11,13,.72);padding:3px 7px}
.vname{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.vmeta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--on-d3)}
.vmeta .m{border:1px solid var(--rule-d);padding:0 6px;color:var(--on-d2)}
.sel{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(36px,4vw,56px)}
.vcard{align-content:start}
@media(max-width:900px){.sel{grid-template-columns:repeat(2,1fr)}}

/* services (we can do) */
.svc-list{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;border-top:1px solid var(--on-d1)}
.svc-list a{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,.9fr) 40px;gap:20px;align-items:baseline;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--rule-d);transition:color .3s}
.svc-list .n{font-family:var(--mono);font-size:12px;color:var(--on-d3)}
.svc-list b{font-size:clamp(26px,3.6vw,54px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.svc-list span.p{color:var(--on-d2);font-size:15px}
.svc-list .arr{justify-self:end;font-size:20px}
.svc-list a:hover b{color:var(--accent)}
@media(max-width:760px){.svc-list a{grid-template-columns:32px 1fr 24px}.svc-list span.p{grid-column:2}}
.tabs{display:inline-flex;border:1px solid var(--rule-d);margin-top:clamp(48px,6vw,80px)}
.tabs button{padding:11px 16px;font-size:13px;color:var(--on-d3)}
.tabs button[aria-selected=true]{background:var(--on-d1);color:var(--ink)}
table.ledger{width:100%;border-collapse:collapse;margin-top:22px}
.ledger th{font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--on-d3);text-align:left;padding:0 12px 12px 0;border-bottom:1px solid var(--rule-d)}
.ledger td{padding:18px 12px 18px 0;border-bottom:1px solid var(--rule-d);font-size:14px;color:var(--on-d2);vertical-align:baseline}
.ledger td.cl{font-size:clamp(19px,2vw,28px);font-weight:700;color:var(--on-d1);letter-spacing:-.025em}
.ledger .again{display:inline-block;margin-left:10px;font-size:11px;font-weight:500;border:1px solid var(--accent);color:var(--accent);padding:1px 7px;vertical-align:middle;letter-spacing:.04em}
.ledger tr{cursor:pointer;transition:background .25s}
.ledger tbody tr:hover{background:rgba(242,241,236,.04)}
.ledger .go{text-align:right}
@media(max-width:760px){.ledger .hide-m{display:none}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(36px,4vw,56px);list-style:none;padding:0}
.steps li{border-top:1px solid var(--on-l1);padding-top:14px;display:grid;gap:6px;align-content:start}
.steps .n{font-size:clamp(34px,3.8vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1}
.steps b{font-size:17px}
.steps span{font-size:14px;color:var(--on-l2)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}

/* mood list (작업 분위기) */
.mood{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule-d);position:relative}
.mood li{position:relative}
.mood a{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--rule-d)}
.mood .n{font-family:var(--mono);font-size:12px;color:var(--on-d3)}
.mood .t{font-size:clamp(40px,7vw,108px);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--on-d3);transition:color .3s}
.mood .c{font-size:13px;color:var(--on-d3)}
.mood:hover .t{color:rgba(242,241,236,.22)}
.mood a:hover .t,.mood a:focus-visible .t{color:var(--on-d1)}
.mood a:hover .n{color:var(--accent)}
.peek{position:fixed;width:min(36vw,520px);aspect-ratio:16/10;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .3s,transform .5s var(--ease)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover}
@media(hover:none){.peek{display:none}}
.draft{font-family:var(--mono);font-size:11px;border:1px dashed var(--on-d3);padding:2px 8px;color:var(--on-d2)}

/* logos */
.logos{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--rule-l);border-left:1px solid var(--rule-l);margin-top:clamp(32px,4vw,48px)}
.logos span{border-right:1px solid var(--rule-l);border-bottom:1px solid var(--rule-l);aspect-ratio:3/2;display:grid;place-items:center;padding:12%}
.logos span{min-width:0}
.logos img{max-height:42px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.logos span:hover img{filter:none;opacity:1}
@media(max-width:900px){.logos{grid-template-columns:repeat(4,1fr)}}

/* blog cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,48px)}
.posts a{display:grid;gap:10px}
.posts .ph{aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.posts .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.posts a:hover .ph img{transform:scale(1.04)}
.posts b{font-size:17px;line-height:1.45;letter-spacing:-.01em}
.posts small{font-size:12px;color:var(--on-d3)}
@media(max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.posts{grid-template-columns:1fr}}

/* closing CTA */
.cta h2{max-width:16ch}

/* work page */
.phead{padding-block:clamp(56px,7vw,100px) clamp(24px,3vw,40px)}
.phead h1{margin:14px 0 0;font-size:clamp(56px,10vw,170px);font-weight:800;letter-spacing:-.055em;line-height:.92}
.phead h1 sup{font-size:.22em;font-weight:500;letter-spacing:0;color:var(--on-d3);vertical-align:top;margin-left:.3em;font-family:var(--mono)}
.filters{display:grid;gap:12px;padding-block:22px;border-top:1px solid var(--on-d1);border-bottom:1px solid var(--rule-d)}
.frow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:start}
.frow>span{font-size:13px;color:var(--on-d3);padding-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--rule-d);padding:7px 12px;font-size:13px;color:var(--on-d2);transition:all .2s}
.chip sup{font-family:var(--mono);font-size:10px;margin-left:5px;color:var(--on-d3)}
.chip:hover{border-color:var(--on-d1);color:var(--on-d1)}
.chip[aria-pressed=true]{background:var(--on-d1);color:var(--ink);border-color:var(--on-d1)}
.chip[aria-pressed=true] sup{color:inherit;opacity:.65}
@media(max-width:640px){.frow{grid-template-columns:1fr}.frow>span{padding:0}}
.wbar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-block:18px}
.wbar .count{font-family:var(--mono);font-size:13px;color:var(--on-d2)}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px) clamp(14px,1.8vw,24px)}
.wgrid .vname{font-size:18px}
@media(max-width:900px){.wgrid{grid-template-columns:repeat(2,1fr)}}
.empty{padding:40px 0;color:var(--on-d2)}
.sugg{margin-top:clamp(56px,7vw,96px);padding-top:22px;border-top:1px solid var(--on-d1)}
.sugg .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:16px}
.sugg h4{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--on-d3)}
.sugg ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-d)}
.sugg li{border-bottom:1px solid var(--rule-d)}
.sugg li>a,.sugg li>div{display:block;padding:14px 0}
.sugg b{display:flex;gap:10px;align-items:baseline;font-size:18px;letter-spacing:-.02em}
.sugg p{margin:4px 0 0;font-size:14px;color:var(--on-d2)}
.sugg small{display:block;margin-top:4px;font-size:12px;color:var(--on-d3)}
.sugg .code{font-family:var(--mono);font-size:11px;border:1px solid currentColor;padding:0 5px}
.sugg a:hover b{color:var(--accent)}
@media(max-width:760px){.sugg .cols{grid-template-columns:1fr}}

/* service page */
.svh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end}
.svh .fig{aspect-ratio:4/3;overflow:hidden}
.svh .fig img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.svh{grid-template-columns:1fr}}
.case-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,36px);margin-top:clamp(32px,4vw,52px)}
.case-stats div{border-top:1px solid var(--on-d1);padding-top:12px;display:grid;gap:6px}
.case-stats b{font-size:clamp(36px,4.6vw,76px);font-weight:700;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.case-stats span{font-size:13px;color:var(--on-d3)}
@media(max-width:760px){.case-stats{grid-template-columns:1fr 1fr}}
.dl{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--on-l1)}
.dl div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--rule-l)}
.dl dt{font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.03em}
.dl dt small{display:block;font-size:12px;font-weight:500;color:var(--on-l3);letter-spacing:0;margin-top:4px}
.dl dd{margin:0;color:var(--on-l2)}
@media(max-width:700px){.dl div{grid-template-columns:1fr;gap:6px}}
.faq{margin-top:28px;border-top:1px solid var(--on-d1)}
.faq details{border-bottom:1px solid var(--rule-d)}
.faq summary{cursor:pointer;padding:18px 0;font-size:17px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-weight:400;color:var(--on-d3)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 18px;color:var(--on-d2);max-width:70ch}

/* forms (15) */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);margin-top:28px}
.fgrid a{display:grid;gap:8px}
.fgrid .ph{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.fgrid .ph img{width:100%;height:100%;object-fit:cover}
.fgrid b{font-size:17px;display:flex;gap:8px;align-items:baseline}
.fgrid b .code{font-family:var(--mono);font-size:11px;border:1px solid var(--rule-d);padding:0 5px;font-weight:400;color:var(--on-d2)}
.fgrid p{margin:0;font-size:14px;color:var(--on-d2)}
.demo{font-family:var(--mono);font-size:10.5px;color:var(--note);border:1px solid var(--note);padding:0 6px;justify-self:start}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}

/* contact */
.cform{display:grid;gap:26px;max-width:860px;margin-top:28px}
.cform fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.cform legend{font-size:18px;font-weight:600;margin-bottom:8px}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.cform .row2{grid-template-columns:1fr}}
.cform label{display:grid;gap:6px;font-size:13px;color:var(--on-l2)}
.cform input,.cform textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--rule-l);background:#fff;color:var(--on-l1);border-radius:0}
.cform .chips .chip{border-color:var(--rule-l);color:var(--on-l2)}
.cform .chips .chip[aria-pressed=true]{background:var(--on-l1);color:var(--paper);border-color:var(--on-l1)}
.from{margin-top:18px;padding:12px 14px;border:1px solid var(--accent);color:var(--on-l1);font-size:14px;max-width:860px}
.sent{margin-top:12px;font-size:14px;color:var(--accent)}

/* lightbox */
dialog.lb{width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--rule-d);background:var(--ink);color:var(--on-d1)}
dialog.lb.v{width:min(440px,calc(100vw - 32px))}
dialog.lb::backdrop{background:rgba(5,5,7,.88)}
.lb-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 14px;border-bottom:1px solid var(--rule-d)}
.lb-h p{margin:0;font-size:14px}
.lb-h small{display:block;color:var(--on-d3);font-size:12px;margin-top:2px}
.lb-x{border:1px solid var(--rule-d);padding:6px 10px;font-size:12px;flex:none}
.lb-m{background:#000;line-height:0}
.lb-m img,.lb-m video{width:100%;max-height:calc(100dvh - 190px);object-fit:contain;display:block;margin:0 auto}
.lb-f{padding:12px 14px;font-size:13px;color:var(--on-d2);line-height:1.6}

/* footer */
.ftr{border-top:1px solid var(--rule-d);padding-block:56px calc(56px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--on-d3)}
.ftr .wrap{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ftr nav{display:flex;gap:16px;flex-wrap:wrap}
.ftr nav a:hover{color:var(--on-d1)}
.ftr p{margin:0}
.ftr .sigf{color:var(--on-d1);font-size:15px;font-weight:600;margin-bottom:10px}

/* v2 additions */
.quick{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:14px;color:var(--on-d2)}
.quick span{font-family:var(--mono);font-size:11px;color:var(--on-d3);align-self:center}
.quick a{border-bottom:1px solid var(--rule-d);padding-bottom:2px}
.quick a:hover{color:var(--on-d1);border-color:var(--on-d1)}
.map{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.map th,.map td{text-align:left;padding:5px 8px 5px 0;border-bottom:1px solid rgba(26,20,5,.18);vertical-align:top}
.map th{font-weight:700}
.dev.wide{max-width:none}
.dev a{text-decoration:underline}
.subtabs{display:flex;gap:0;border-bottom:1px solid var(--rule-d);margin-top:8px}
.subtabs a{padding:14px 18px;font-size:15px;color:var(--on-d3);border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs a[aria-current=page]{color:var(--on-d1);border-bottom-color:var(--on-d1)}
.subtabs a sup{font-family:var(--mono);font-size:11px;margin-left:4px}
.indlink{font-size:14px;color:var(--accent)}
.flist{list-style:none;margin:0;padding:0;border-top:1px solid var(--on-d1)}
.frow2{display:grid;grid-template-columns:minmax(0,1.6fr) 110px minmax(0,1.4fr);gap:clamp(14px,2vw,28px);padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--rule-d);align-items:start}
.frow2 .h{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.frow2 .v{aspect-ratio:9/16;overflow:hidden;background:var(--ink-2)}
.frow2 img{width:100%;height:100%;object-fit:cover}
.frow2 h3{margin:6px 0 0;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em;line-height:1.15}
.frow2 h3 a:hover{color:var(--accent)}
.frow2 .pitch{margin:10px 0 0;color:var(--on-d2)}
.pts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--on-d2)}
.pts b{font-family:var(--mono);font-size:12px;color:var(--accent);margin-right:8px;font-weight:500}
.fit{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.fit a{font-size:12px;border:1px solid var(--rule-d);padding:2px 8px;color:var(--on-d2)}
.fit a:hover{border-color:var(--on-d1);color:var(--on-d1)}
@media(max-width:860px){.frow2{grid-template-columns:1fr 90px}.frow2>div:last-child{grid-column:1/-1}}
.lens{display:flex;gap:8px;margin:22px 0}
.inds{list-style:none;margin:0;padding:0;border-top:1px solid var(--on-d1)}
.inds li a{display:grid;grid-template-columns:minmax(0,.9fr) 120px minmax(0,1.4fr) 30px;gap:20px;padding:22px 0;border-bottom:1px solid var(--rule-d);align-items:baseline}
.inds b{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em}
.inds .c{font-family:var(--mono);font-size:12px;color:var(--accent)}
.inds .l{color:var(--on-d2);font-size:14px}
.inds a:hover b{color:var(--accent)}
@media(max-width:760px){.inds li a{grid-template-columns:1fr 24px}.inds .c,.inds .l{grid-column:1}}
.irow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(20px,3vw,48px);padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--rule-d);align-items:center}
.irow .ph{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.irow .ph img{width:100%;height:100%;object-fit:cover}
.irow h3{margin:8px 0 0;font-size:clamp(24px,2.6vw,38px);letter-spacing:-.03em}
.irow p{color:var(--on-d2);margin:10px 0 0}
@media(max-width:800px){.irow{grid-template-columns:1fr}}
.law{margin-top:18px;padding:12px 14px;border:1px solid var(--rule-d);font-size:13.5px;color:var(--on-d2);max-width:70ch}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);margin-top:28px}
.tiles a{display:grid;gap:8px}
.tiles .ph{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.tiles .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tiles a:hover .ph img{transform:scale(1.04)}
.tiles b{font-size:16px}
.tiles small{font-size:12.5px;color:var(--on-d3)}
@media(max-width:800px){.tiles{grid-template-columns:1fr 1fr}}
.paper .tiles small{color:var(--on-l3)}
.mosaic{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,3vw,44px)}
.mosaic figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2)}
.mosaic figure:first-child{grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .8s,transform 1.2s var(--ease)}
.mosaic figure:hover img{filter:none;transform:scale(1.03)}
.mosaic figcaption{position:absolute;left:12px;bottom:10px;font-size:13px;background:rgba(11,11,13,.6);padding:3px 8px}
.mosaic figure:not(:first-child){aspect-ratio:16/10}
@media(max-width:760px){.mosaic{grid-template-columns:1fr}.mosaic figure:first-child{grid-row:auto;aspect-ratio:4/3}}
.why{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.why li{border-top:1px solid var(--on-l1);padding-top:14px;display:grid;gap:8px}
.why .n{font-family:var(--mono);font-size:12px;color:var(--on-l3)}
.why b{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em}
.why span{color:var(--on-l2)}
@media(max-width:760px){.why{grid-template-columns:1fr}}
.roles{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-d)}
.roles li{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule-d);display:grid;gap:4px}
.roles b{font-size:18px}
.roles span{font-size:13px;color:var(--on-d3)}
@media(max-width:760px){.roles{grid-template-columns:1fr 1fr}}
.hform{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;max-width:900px;margin-top:28px}
.hform label{display:grid;gap:6px;font-size:13px;color:var(--on-l2)}
.hform input{font:inherit;padding:12px 14px;border:1px solid var(--rule-l);background:#fff;color:var(--on-l1);border-radius:0}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--on-l2);margin-top:12px}
@media(max-width:700px){.hform{grid-template-columns:1fr}}
.seats{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.seats li{display:grid;gap:6px;align-content:start}
.seats .box{border:1px solid var(--on-l1);height:120px}
.seats .box.w{aspect-ratio:16/9;height:auto;width:100%}
.seats .box.v{width:60px;height:107px}
.seats .box.s{width:96px;height:96px}
.seats small{color:var(--on-l3);font-size:12px}
.seats p{margin:0;font-size:14px;color:var(--on-l2)}
@media(max-width:800px){.seats{grid-template-columns:1fr 1fr}}
.promise{margin-top:32px;padding:18px 20px;border:1px solid var(--on-l1);display:grid;gap:6px;max-width:760px}
.promise small{display:block;color:var(--on-l2);font-size:13.5px}
.sectors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:28px}
.sectors article{border-top:1px solid var(--rule-d);padding-top:14px;display:grid;gap:6px}
.sectors .label{font-size:11px}
.sectors h3{font-size:20px;letter-spacing:-.02em}
.sectors p{margin:0;color:var(--on-d2)}
@media(max-width:760px){.sectors{grid-template-columns:1fr}}
.others{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-size:15px}
.others a{border-bottom:1px solid var(--rule-d)}
.others em{font-style:normal;color:var(--on-d3)}
.five{margin:16px 0 0;padding-left:1.3em;display:grid;gap:4px;color:var(--on-l2)}
.det{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px;border-top:1px solid var(--rule-d);padding-top:16px;font-size:14px}
.det span{display:block;font-size:12px;color:var(--on-d3)}
@media(max-width:700px){.det{grid-template-columns:1fr 1fr}}
.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.scenes figure{margin:0;display:grid;gap:6px;font-size:13px;color:var(--on-d2)}
.scenes img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media(max-width:760px){.scenes{grid-template-columns:1fr 1fr}}
.post{max-width:760px}
.post h2{font-size:clamp(22px,2.2vw,28px);margin:2em 0 .6em;letter-spacing:-.02em}
.post h3{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.035em;line-height:1.15;margin:.2em 0 .4em}
.post p,.post li{color:var(--on-d2);font-size:16px}
.post a{color:var(--accent);text-decoration:underline}
.post mark{background:rgba(95,140,247,.25);color:var(--on-d1)}
.post table{border-collapse:collapse;width:100%;font-size:14px;margin:1em 0}
.post th,.post td{border-bottom:1px solid var(--rule-d);padding:8px;text-align:left;vertical-align:top}
.post .eyebrow{font-family:var(--mono);font-size:12px;color:var(--on-d3);letter-spacing:.06em}
.post .osc-byline{font-size:13px;color:var(--on-d3)}
.post .osc-answer-first{border-left:2px solid var(--accent);padding-left:14px;color:var(--on-d1)}
.post figure,.post img{display:none}
.post .tw,.post .osc-table{overflow-x:auto}
.inq{margin:2em 0;padding:18px 20px;border:1px solid var(--accent);display:grid;gap:10px}
.pp{max-width:860px;color:var(--on-l2)}
.pp h1{font-size:clamp(36px,5vw,64px);color:var(--on-l1);letter-spacing:-.03em}
.pp nav{display:none}
.pp table{display:block;overflow-x:auto;max-width:100%}
.cform select{font:inherit;padding:12px 14px;border:1px solid var(--rule-l);background:#fff;color:var(--on-l1);border-radius:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.hero .bg img{transition:none}}
/* ---------- v3: new IA (Work · Style · SNS · Blog · Contact) ---------- */
.hdr nav a{letter-spacing:.02em}
.hsec{padding-block:clamp(80px,10vw,150px);border-top:1px solid var(--rule-d)}
.hsec.paper{border-top:0}
.kicker{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.kicker .big{margin:10px 0 0;font-size:clamp(56px,11vw,180px);font-weight:800;letter-spacing:-.06em;line-height:.88}
.kicker .big small{display:block;font-size:clamp(15px,1.4vw,19px);font-weight:500;letter-spacing:-.01em;color:var(--on-d2);margin-top:14px;line-height:1.5}
.paper .kicker .big small{color:var(--on-l2)}
.go-btn{display:inline-flex;align-items:center;gap:12px;font-size:15px;padding:14px 22px;border:1px solid currentColor;white-space:nowrap}
.go-btn:hover{background:var(--on-d1);color:var(--ink)}
.paper .go-btn:hover{background:var(--on-l1);color:var(--paper)}
/* home work reel */
.reel{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,18px);margin-top:clamp(36px,4vw,56px)}
.reel .vcard .vname{font-size:14px}
@media(max-width:1000px){.reel{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.reel{grid-template-columns:repeat(2,1fr)}}
/* rolling ribbons */
.roll{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.roll+.roll{margin-top:clamp(10px,1.2vw,16px)}
.track{display:flex;gap:clamp(10px,1.2vw,16px);width:max-content;animation:roll var(--dur,70s) linear infinite}
.roll.rev .track{animation-direction:reverse}
.roll:hover .track{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}
.sribbon a{display:grid;gap:8px;width:clamp(240px,26vw,380px)}
.sribbon .ph{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.sribbon .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sribbon a:hover .ph img{transform:scale(1.05)}
.sribbon b{font-size:15px;display:flex;gap:8px;align-items:baseline}
.sribbon b i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--on-d3)}
.lribbon span{display:grid;place-items:center;width:clamp(120px,12vw,170px);aspect-ratio:3/2;padding:10px 14px;border:1px solid var(--rule-l);background:#fff}
.lribbon img{max-height:44px;max-width:100%;width:auto;object-fit:contain}
@media (prefers-reduced-motion:reduce){.track{animation:none;flex-wrap:wrap;width:auto}.roll{-webkit-mask-image:none;mask-image:none}}
/* home sns */
.snsband{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,40px);margin-top:clamp(36px,4vw,60px)}
.snsband div{border-top:1px solid var(--on-d1);padding-top:14px;display:grid;gap:8px}
.snsband b{font-size:clamp(48px,7vw,120px);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.snsband span{font-size:14px;color:var(--on-d2)}
@media(max-width:760px){.snsband{grid-template-columns:1fr}}
/* style index */
.sgroups{display:flex;flex-wrap:wrap;gap:6px;margin:clamp(28px,3vw,40px) 0 0}
.sview{display:flex;gap:6px;margin-left:auto}
.sbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-block:18px;border-bottom:1px solid var(--rule-d)}
.sindex{list-style:none;margin:0;padding:0;counter-reset:s}
.sindex li a{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,.8fr) 80px;gap:20px;align-items:baseline;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--rule-d)}
.sindex .code{font-family:var(--mono);font-size:13px;color:var(--on-d3)}
.sindex .nm{font-size:clamp(30px,4.6vw,72px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--on-d2);transition:color .3s,transform .5s var(--ease)}
.sindex .tg{font-size:14px;color:var(--on-d3)}
.sindex .du{font-family:var(--mono);font-size:12px;color:var(--on-d3);text-align:right}
.sindex:hover .nm{color:rgba(242,241,236,.22)}
.sindex li a:hover .nm,.sindex li a:focus-visible .nm{color:var(--on-d1);transform:translateX(10px)}
.sindex li a:hover .code{color:var(--accent)}
@media(max-width:760px){.sindex li a{grid-template-columns:40px 1fr}.sindex .tg,.sindex .du{grid-column:2}.sindex .du{text-align:left}}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px) clamp(12px,1.6vw,22px);margin-top:28px}
.sgrid a{display:grid;gap:8px}
.sgrid .ph{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.sgrid .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sgrid a:hover .ph img{transform:scale(1.04)}
.sgrid b{font-size:18px;display:flex;gap:10px;align-items:baseline}
.sgrid b i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--on-d3)}
.sgrid small{font-size:13px;color:var(--on-d3)}
@media(max-width:900px){.sgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sgrid{grid-template-columns:1fr}}
.speek{position:fixed;width:min(38vw,560px);aspect-ratio:16/9;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .3s,transform .5s var(--ease)}
.speek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.speek img{width:100%;height:100%;object-fit:cover}
@media(hover:none){.speek{display:none}}
/* style detail */
.sd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.28fr);gap:clamp(14px,2vw,28px);align-items:end;margin-top:clamp(24px,3vw,40px)}
.sd-hero .h{aspect-ratio:16/9;overflow:hidden}
.sd-hero .v{aspect-ratio:9/16;overflow:hidden}
.sd-hero img{width:100%;height:100%;object-fit:cover}
.sd-hero figcaption{font-family:var(--mono);font-size:11px;color:var(--on-d3);margin-top:6px}
.sd-hero figure{margin:0}
@media(max-width:760px){.sd-hero{grid-template-columns:1fr .4fr}}
.timeline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(14px,2vw,28px);margin-top:28px;border-top:1px solid var(--on-d1)}
.timeline div{padding-top:14px;display:grid;gap:6px;position:relative}
.timeline div::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--accent)}
.timeline b{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:500}
.timeline span{color:var(--on-d2);font-size:15px}
@media(max-width:760px){.timeline{grid-auto-flow:row}}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule-d);margin-top:clamp(56px,7vw,96px)}
.pn a{padding:22px 0;display:grid;gap:4px}
.pn a+a{text-align:right;border-left:1px solid var(--rule-d)}
.pn small{font-family:var(--mono);font-size:11px;color:var(--on-d3)}
.pn b{font-size:clamp(20px,2.4vw,32px);letter-spacing:-.03em}
.pn a:hover b{color:var(--accent)}
/* contact extras */
.prep{padding-block:clamp(60px,8vw,110px);border-top:1px solid var(--rule-l)}
@media(max-width:560px){.hdr .wrap{gap:10px}.hdr .logo svg{height:13px}.hdr nav{gap:11px;font-size:12px}}
[hidden]{display:none!important}
.sindex .nm{font-size:clamp(28px,4vw,60px)}
/* ---------- v4 ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(32px,4vw,52px)}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cgrid{grid-template-columns:1fr}}
.ccard{position:relative;display:block;overflow:hidden;background:var(--ink-2)}
.cv{display:block;position:relative;aspect-ratio:16/9}
.cv img,.cv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv video{opacity:0;transition:opacity .6s}
.cv video.on{opacity:1}
.cv img{transition:transform 1.2s var(--ease)}
.ccard::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(11,11,13,.82));pointer-events:none}
.ccap{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline}
.ccap i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--on-d2);border:1px solid rgba(242,241,236,.4);padding:0 5px}
.ccap b{font-size:clamp(16px,1.4vw,20px);letter-spacing:-.02em}
.ccap small{grid-column:2;font-size:12px;color:var(--on-d2);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .4s var(--ease)}
.ccard:hover .ccap small,.ccard:focus-visible .ccap small{opacity:1;transform:none}
.ccard:hover .cv img{transform:scale(1.03)}
@media(hover:none){.ccap small{opacity:1;transform:none}}
.approach{padding-bottom:0}
.manifesto{margin:18px 0 0;font-size:clamp(36px,6vw,96px);font-weight:800;letter-spacing:-.05em;line-height:1.02;max-width:16ch}
.manifesto em{font-style:normal;color:var(--accent)}
.aprin{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px)}
.aprin li{border-top:1px solid var(--on-d1);padding-top:14px;color:var(--on-d2);font-size:15px;display:grid;gap:4px}
.aprin span{font-family:var(--mono);font-size:12px;color:var(--on-d3)}
.aprin b{color:var(--on-d1);font-size:20px;letter-spacing:-.02em}
@media(max-width:760px){.aprin{grid-template-columns:1fr}}
.film{margin-top:clamp(48px,6vw,90px)}
.film figure{margin:0;position:relative;width:clamp(280px,38vw,560px);aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.film img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .8s}
.film figure:hover img{filter:none}
.film figcaption{position:absolute;left:12px;bottom:10px;font-size:12px;background:rgba(11,11,13,.6);padding:3px 8px}
.filmcap{margin:14px 0 clamp(60px,8vw,110px);font-size:12px;color:var(--on-d3)}
.filmcap a{text-decoration:underline}
.ptn{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:860px){.ptn{grid-template-columns:1fr}}
.toplogos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-d);border-left:1px solid var(--rule-d)}
.toplogos li{border-right:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);aspect-ratio:16/9;display:grid;place-items:center;padding:14%;min-width:0}
.toplogos img{max-height:46px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1) invert(1) brightness(1.6);opacity:.78;transition:filter .4s,opacity .4s}
.toplogos li:hover img{opacity:1;filter:grayscale(1) invert(1) brightness(2)}
@media(max-width:560px){.toplogos{grid-template-columns:repeat(3,1fr)}}
.startp{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:18px;padding-bottom:clamp(20px,2.4vw,32px);border-bottom:2px solid var(--on-l1)}
.startp span{font-size:clamp(44px,8vw,128px);font-weight:800;letter-spacing:-.055em;line-height:.95}
.startp b{font-size:clamp(18px,1.8vw,24px);display:inline-flex;gap:10px;align-items:center}
.startp:hover b{color:var(--accent)}
.posts .pm{color:var(--accent);font-size:12px}
#homeposts{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){#homeposts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#homeposts{grid-template-columns:1fr}}
.bhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:900px){.bhero{grid-template-columns:1fr}}
.bh1{margin:14px 0 0;font-size:clamp(40px,5.4vw,88px);word-break:keep-all;font-weight:800;letter-spacing:-.055em;line-height:1}
.bh1 em{font-style:normal;color:var(--accent)}
.bcount{margin:22px 0 0;font-size:13px;color:var(--on-d3)}
.bcount b{font-size:18px;color:var(--on-d1);margin:0 4px 0 12px}
.bcount b:first-child{margin-left:0}
.latest{display:grid;gap:10px;border:1px solid var(--rule-d);padding:16px;background:var(--ink-2)}
.latest .ph{aspect-ratio:16/9;overflow:hidden;display:block}
.latest .ph img{width:100%;height:100%;object-fit:cover}
.latest b{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.35}
.latest p{margin:0;color:var(--on-d2);font-size:14px}
.latest .pm{color:var(--accent);font-size:12px}
.latest:hover b{color:var(--accent)}
.bsearch{display:flex;gap:12px;align-items:center;margin-top:24px;max-width:720px}
.bsearch input{flex:1;min-width:0;font:inherit;padding:14px 16px;background:var(--ink-2);border:1px solid var(--rule-d);color:var(--on-d1);border-radius:0}
.bsearch span{font-family:var(--mono);font-size:12px;color:var(--on-d3)}
.blayout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,3vw,48px);margin-top:36px}
@media(max-width:860px){.blayout{grid-template-columns:1fr}}
.bcats{list-style:none;margin:0;padding:0;border-top:1px solid var(--on-d1);align-self:start}
.bcats button{width:100%;display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--rule-d);font-size:14px;color:var(--on-d2)}
.bcats button[aria-current=true]{color:var(--on-d1);font-weight:600}
.bcats b{font-family:var(--mono);font-weight:400;font-size:12px}
.bposts{margin-top:0}
.ftr2{background:var(--ink);border-top:1px solid var(--rule-d);padding-block:clamp(64px,8vw,110px) calc(36px + env(safe-area-inset-bottom,0px))}
.fcta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:clamp(28px,3vw,44px);border-bottom:1px solid var(--rule-d)}
.fcta span{font-size:clamp(40px,7vw,112px);font-weight:800;letter-spacing:-.055em;line-height:.95}
.fcta b{font-size:clamp(17px,1.6vw,22px);display:inline-flex;gap:10px;align-items:center;border:1px solid var(--on-d1);padding:14px 22px}
.fcta:hover b{background:var(--on-d1);color:var(--ink)}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:clamp(32px,4vw,52px);border-bottom:1px solid var(--rule-d)}
.fcols h4{margin:0 0 12px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--on-d3);text-transform:uppercase}
.fcols a,.fcols p{display:block;margin:0 0 8px;font-size:15px;color:var(--on-d2)}
.fcols a:hover{color:var(--on-d1)}
.fcols .fmail{font-size:clamp(18px,1.8vw,24px);color:var(--on-d1);font-weight:600;overflow-wrap:anywhere}
@media(max-width:700px){.fcols{grid-template-columns:1fr 1fr}}
.fbot{display:grid;gap:6px;padding-top:24px;font-size:12px;color:var(--on-d3)}
.fbot p{margin:0}
.flogo svg{height:18px;width:auto;margin-bottom:8px}
/* ---------- v5 ---------- */
/* first hero (local site): work stills inside the 5FUNNEL letters */
.khero{position:relative;height:calc(200vh - var(--devh,0px) - 64px)}
.khero .stage{position:sticky;top:calc(var(--devh,0px) + 64px);height:calc(100vh - var(--devh,0px) - 64px);overflow:hidden;background:var(--ink)}
.kreel{position:absolute;inset:0}
.kreel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);animation:kreel 20s infinite}
.kreel img:nth-child(2){animation-delay:4s}.kreel img:nth-child(3){animation-delay:8s}.kreel img:nth-child(4){animation-delay:12s}.kreel img:nth-child(5){animation-delay:16s}
@keyframes kreel{0%{opacity:0;transform:scale(1.08)}5%{opacity:1}20%{opacity:1}25%{opacity:0;transform:scale(1)}100%{opacity:0}}
.knock{position:absolute;inset:0;background:#26262a;mix-blend-mode:multiply;display:grid;place-items:center;will-change:opacity}
.knock h1{margin:0;font:inherit}
.knock .word{display:block;color:#fff;font-weight:800;font-size:clamp(76px,21vw,360px);letter-spacing:-.045em;line-height:.8;transform-origin:center}
.knock .word-tag{display:block;color:#fff;font-weight:700;font-size:clamp(14px,2.6vw,46px);letter-spacing:.62em;line-height:1;text-align:right;margin:.55em -.62em 0 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.khero .meta{position:absolute;left:0;right:0;bottom:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.khero .meta p{margin:0;max-width:440px;font-size:15px;line-height:1.6;color:var(--on-d2)}
.khero .meta .sig{display:block;margin-bottom:8px;font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--on-d1)}
.khero .meta .answer{display:block;margin-top:6px}
.khero .meta .kinds{display:block;margin-top:14px;font-size:12px;letter-spacing:.08em;color:var(--on-d3)}
.khero .go{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.khero .tc{font-size:12px;color:var(--on-d3);letter-spacing:.06em}
.khero .tc .draft{margin-right:6px}
.khero .btn .play{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.khero .btn-sub{font-size:13px;color:var(--on-d2);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
@media(max-width:700px){.khero .meta{flex-direction:column;align-items:flex-start;bottom:28px}.khero .tc{display:none}}
@media(prefers-reduced-motion:reduce){.khero{height:auto}.kreel img{animation:none}.kreel img:first-child{opacity:1;transform:none}}

/* Work strip that slides right */
.slider{margin-top:clamp(36px,4vw,56px)}
.slide-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,23vw,340px);column-gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;--edge:calc(max(0px,(100% - 1360px) / 2) + clamp(24px,4vw,56px));scroll-padding-left:var(--edge);padding-inline:var(--edge);padding-bottom:6px;scrollbar-width:none;cursor:grab;outline-offset:4px}
.slide-track::-webkit-scrollbar{display:none}
.slide-track>*{scroll-snap-align:start}
.slide-track.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.slide-track.drag *{pointer-events:none}
.slide-track .vmedia{aspect-ratio:4/5}
.slide-ctl{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.slide-n{font-family:var(--mono);font-size:12px;color:var(--on-d3);font-variant-numeric:tabular-nums}
.sbtn{width:48px;height:48px;border:1px solid var(--rule-d);color:var(--on-d1);font-size:18px;margin-left:8px;transition:background .25s,color .25s}
.sbtn:hover{background:var(--on-d1);color:var(--ink)}
.filmgap{padding-bottom:clamp(60px,8vw,110px)}
.filmgap .dev{margin-top:14px}

/* big headings: the descender of «Blog» ran into the line under it */
.kicker .big small{margin-top:max(14px,calc(clamp(56px,11vw,180px) * .3))}
.phead h1.bh1{font-size:clamp(40px,5.4vw,84px);line-height:1.14;letter-spacing:-.045em}

/* 만드는 방법: two doors, both lists in full */
.mdoors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);margin-top:clamp(32px,4vw,52px)}
.mdoor{display:grid;grid-template-columns:clamp(84px,9vw,128px) 1fr auto;gap:clamp(14px,2vw,24px);align-items:center;text-align:left;border:1px solid var(--on-d1);padding:clamp(12px,1.4vw,18px);transition:background .25s,color .25s}
.mdoor .mph{aspect-ratio:1;overflow:hidden;background:var(--ink-2)}
.mdoor .mph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.mdoor .mtx{display:grid;gap:4px}
.mdoor b{font-size:clamp(20px,2.2vw,32px);letter-spacing:-.03em;line-height:1.2}
.mdoor small{font-size:13px;color:var(--on-d2)}
.mdoor .marr{font-size:clamp(22px,2.4vw,34px)}
.mdoor:hover{background:var(--on-d1);color:var(--ink)}
.mdoor:hover small,.mdoor:hover .label{color:var(--ink)}
.mdoor:hover .mph img{filter:none}
@media(max-width:700px){.mdoors{grid-template-columns:1fr}}
.mblock{margin-top:clamp(64px,8vw,120px);scroll-margin-top:calc(var(--devh,0px) + 80px)}
.mhead{display:grid;gap:8px;border-top:2px solid var(--on-d1);padding-top:18px}
.mhead h3{margin:0;font-size:clamp(34px,5vw,76px);font-weight:800;letter-spacing:-.05em;line-height:1.05}
.mhead sup{font-size:.3em;font-weight:500;letter-spacing:0;margin-left:10px;color:var(--accent);vertical-align:top;position:relative;top:.4em}
.mhead p{margin:0;max-width:60ch;color:var(--on-d2);font-size:15px}
.msub{margin:clamp(36px,4vw,56px) 0 0;font-size:16px;font-weight:600;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.msub span{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--on-d3)}
.ledger-wrap{overflow-x:auto}
.aiworks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(12px,1.4vw,20px);margin-top:18px}
.aiworks .vmedia{aspect-ratio:4/5}

/* SNS: top shorts first */
.sechead{display:grid;gap:6px}
.topsh{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.topsh li{display:grid;gap:6px;align-content:start}
.topsh .tv{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ink-2)}
.topsh .tv img,.topsh .tv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.topsh .tv video{opacity:0;transition:opacity .6s}
.topsh .tv video.on{opacity:1}
.topsh .rk{position:absolute;left:10px;top:8px;z-index:1;font-family:var(--mono);font-size:12px;background:rgba(11,11,13,.6);padding:2px 6px}
.topsh b{font-size:clamp(24px,2.6vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:8px;font-variant-numeric:tabular-nums}
.topsh small{font-size:12px;color:var(--accent)}
.topsh .tt{font-size:13px;color:var(--on-d2);line-height:1.45}
@media(max-width:900px){.topsh{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.topsh{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Contact (oscsnm.com 문의 페이지 순서) */
.chero{position:relative;min-height:min(78vh,760px);display:grid;align-content:end;overflow:hidden;padding-block:140px clamp(48px,6vw,80px);background:var(--ink)}
.chero .cbg{position:absolute;inset:0}
.chero .cbg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.45)}
.chero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.2),rgba(11,11,13,.8))}
.chero .wrap{position:relative;z-index:1;width:100%}
.chero h1{margin:16px 0 0;font-size:clamp(44px,7.6vw,120px);font-weight:800;letter-spacing:-.055em;line-height:1.08;text-wrap:balance}
.chero .lede{color:var(--on-d1);opacity:.85}
.chero .down{margin-top:28px;font-size:14px;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:4px}
.cformsec{background:var(--ink);padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--rule-d)}
.cformsec .from{color:var(--on-d1)}
.cform2{display:grid;gap:clamp(40px,5vw,64px);margin-top:clamp(36px,4vw,56px)}
.cform2 .q{border:0;margin:0;padding:0;display:grid;gap:18px;min-width:0}
.cform2 legend{padding:0;font-size:clamp(17px,1.6vw,21px);font-weight:600;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cform2 .qn{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--on-d3)}
.cform2 legend i,.consent2 i{font-style:normal;color:var(--accent)}
.cform2 legend small{font-size:13px;font-weight:400;color:var(--on-d3)}
.cform2 .chips .chip{border-color:var(--rule-d);color:var(--on-d2);padding:12px 16px;font-size:14px}
.cform2 .chips .chip[aria-pressed=true]{background:var(--on-d1);color:var(--ink);border-color:var(--on-d1)}
.cform2 .line{display:grid;gap:8px}
.cform2 .line input,.cform2 .line textarea{font:inherit;font-size:clamp(16px,1.4vw,19px);background:transparent;border:0;border-bottom:1px solid var(--rule-d);color:var(--on-d1);padding:10px 0;border-radius:0;width:100%;color-scheme:dark}
.cform2 .line input:focus,.cform2 .line textarea:focus{outline:none;border-bottom-color:var(--accent)}
.cform2 .line small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--on-d3)}
.cform2 .row2{display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(16px,2vw,28px)}
@media(max-width:700px){.cform2 .row2{grid-template-columns:1fr}}
.consent2{display:flex;gap:14px;align-items:flex-start;border-block:1px solid var(--rule-d);padding-block:22px;font-size:13px;color:var(--on-d2)}
.consent2 input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.consent2 b{display:block;font-size:15px;color:var(--on-d1);margin-bottom:4px}
.consent2 a{text-decoration:underline;color:var(--on-d1)}
.bigsend{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--on-d1);color:var(--ink);padding:clamp(22px,3vw,40px) clamp(22px,3.4vw,48px);font-size:clamp(28px,4.4vw,64px);font-weight:800;letter-spacing:-.04em;transition:background .25s,color .25s}
.bigsend:hover{background:var(--accent);color:#fff}
.sendnote{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-36px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--on-d3)}
.band-l{background:var(--paper);color:var(--on-l1);padding-block:clamp(64px,8vw,120px)}
.band-l .label{color:var(--on-l3)}
.band-l .h2{color:var(--on-l1)}
.band-d{background:var(--ink-2);color:var(--on-d1);border-top:0}
.band-d .label{color:var(--on-d3)}
.band-d .trio li,.band-d .why li{border-color:var(--on-d1)}
.band-d .trio span,.band-d .why span{color:var(--on-d2)}
.band-d .trio .n,.band-d .why .n{color:var(--on-d3)}
.prep.band-l,.prep.band-d{border-top:0}
.band-l .roles{border-top-color:var(--rule-l)}
.band-l .roles li{border-bottom-color:var(--rule-l)}
.band-l .roles span{color:var(--on-l3)}
.chan{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--rule-l)}
.chan li{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,32px) clamp(16px,2vw,28px) clamp(24px,3vw,40px);border-left:1px solid var(--rule-l);min-height:220px}
.chan li:first-child{border-left:0;padding-left:0}
.chan .ck{font-size:14px;color:var(--on-l2)}
.chan b{margin-top:auto;padding-top:48px;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;overflow-wrap:anywhere}
.chan small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--on-l3)}
@media(max-width:760px){.chan{grid-template-columns:1fr}.chan li{border-left:0;border-top:1px solid var(--rule-l);padding-left:0;min-height:0}.chan li:first-child{border-top:0}.chan b{padding-top:12px}}
.band-l .dev{margin-top:28px}
.snshead{padding-bottom:clamp(36px,4vw,56px)}
.snstop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.snstop h1{margin:10px 0 0;font-size:clamp(56px,9vw,140px);font-weight:800;letter-spacing:-.06em;line-height:.88}
.snstop p{margin:0;font-size:clamp(15px,1.3vw,18px);color:var(--on-d2);text-align:right}
@media(max-width:700px){.snstop p{text-align:left}}
.snshead .topsh{margin-top:clamp(24px,2.6vw,36px)}
.topnote{margin:14px 0 0;font-size:12px;color:var(--on-d3)}

/* v6 spacing pass (owner: «6,800» comma ran into its label) — every big number/heading keeps clear of the line under it */
.snsband div{gap:14px}
.snsband b{line-height:1}
.case-stats b{line-height:1;margin-bottom:10px}
.phead h1{line-height:1.06}
.startp span,.fcta span,.chero h1{line-height:1.16}
.manifesto{line-height:1.16;max-width:none;word-break:keep-all;text-wrap:balance}
.sec:not(.paper) .steps .n{color:var(--on-d2)}

/* ---------- v7 (designer feedback 10-22) ---------- */
/* A: graphic motion inside the letters; tagline arrives after the word clears */
canvas.kreel{display:block;width:100%;height:100%}
.khero .meta{opacity:0;transform:translateY(24px)}
.kcue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--on-d3);z-index:2}
.kcue::after{content:"";display:block;width:1px;height:28px;margin:10px auto 0;background:var(--on-d3);animation:kcue 1.8s ease-in-out infinite}
@keyframes kcue{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(prefers-reduced-motion:reduce){.khero .meta{opacity:1;transform:none}.kcue{display:none}}
/* 1: calmer headings (smaller, one weight lighter) */
.kicker .big{font-size:clamp(44px,7.4vw,120px);font-weight:700;letter-spacing:-.05em}
.kicker .big small{margin-top:max(14px,calc(clamp(44px,7.4vw,120px) * .3))}
.phead h1:not(.bh1){font-size:clamp(44px,7vw,112px)!important;font-weight:700;letter-spacing:-.05em}
.snstop h1{font-size:clamp(44px,7vw,112px);font-weight:700}
.manifesto{font-size:clamp(30px,4.6vw,72px);font-weight:700}
.startp span,.fcta span{font-size:clamp(34px,5.6vw,88px);font-weight:700}
.chero h1{font-size:clamp(36px,5.6vw,88px);font-weight:700}
.snsband b{font-size:clamp(40px,5vw,80px);font-weight:700}
/* B: one frame for every work card */
.vcard.uni .vmedia::after{content:"";position:absolute;inset:0;border:1px solid rgba(242,241,236,.16);pointer-events:none;z-index:2}
.vcard.uni .vmedia img{filter:grayscale(1) brightness(.78) contrast(1.06)}
.vcard.uni .vplay{position:absolute;right:10px;bottom:10px;z-index:2;width:30px;height:30px;border:1px solid rgba(242,241,236,.6);border-radius:50%;display:grid;place-items:center;transition:opacity .3s}
.vcard.uni .vplay::before{content:"";border-left:8px solid var(--on-d1);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.vcard.uni.playing .vplay{opacity:0}
.vcard.uni .vname{font-weight:600}
/* C/E: Formats groups and quiet single exits */
.fgroup{padding-top:clamp(40px,5vw,72px)}
.fhead{display:grid;gap:6px;border-top:2px solid var(--on-d1);padding-top:16px}
.fhead small{font-size:14px;color:var(--on-d2)}
.mlink,.fcta{padding-block:clamp(48px,6vw,88px)}
.mlinkbtn{display:grid;grid-template-columns:auto 1fr auto;gap:12px 24px;align-items:baseline;border-block:1px solid var(--rule-d);padding-block:22px}
.mlinkbtn b{font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em}
.mlinkbtn .arr{font-size:14px;color:var(--on-d2)}
.mlinkbtn:hover b,.mlinkbtn:hover .arr{color:var(--accent)}
@media(max-width:640px){.mlinkbtn{grid-template-columns:1fr}}
.kshade{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,13,0) 30%,rgba(11,11,13,.82) 78%)}
.khero .meta{z-index:2}
@media(prefers-reduced-motion:reduce){.kshade{opacity:1}}
.phead.pp h1{font-size:clamp(34px,4.6vw,64px)!important}

/* ---------- v7b hero: type-led (Tom&Nick · DFY · PlusX) ---------- */
.knock{background:transparent;mix-blend-mode:normal}
.knock .word{color:var(--on-d1)}
.knock .word-tag{color:var(--on-d2)}
.kshade{display:none}
.kstate{position:absolute;inset:0;z-index:1;display:grid;align-content:center;padding-inline:max(var(--gut),calc((100% - 1360px) / 2 + clamp(24px,4vw,56px)));opacity:0;pointer-events:none}
.kl{margin:0;font-size:clamp(44px,8.6vw,150px);font-weight:700;letter-spacing:-.05em;line-height:1.02;display:flex;flex-wrap:wrap;align-items:center;gap:0 .26em}
.kw{color:rgba(242,241,236,.28);animation:kw 4.8s infinite}
.kl:nth-child(1) .kw{animation-delay:0s}
.kl:nth-child(2) .kw:nth-child(1){animation-delay:.6s}
.kl:nth-child(2) .kw:nth-child(2){animation-delay:1.2s}
.kl:nth-child(2) .kw:nth-child(4){animation-delay:1.8s}
@keyframes kw{0%,8%{color:rgba(242,241,236,.28)}14%,62%{color:var(--on-d1)}74%,100%{color:rgba(242,241,236,.28)}}
.kclip{display:inline-block;height:.78em;aspect-ratio:16/10;overflow:hidden;border-radius:999px;background:var(--ink-2);vertical-align:middle;position:relative}
.kclip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kcap{margin:18px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--on-d3)}
.khero .meta .sig{display:none}
@media(max-width:700px){.kl{font-size:clamp(40px,13vw,72px)}.kstate{align-content:start;padding-top:18vh}}
@media(prefers-reduced-motion:reduce){.kstate{opacity:1}.kw{animation:none;color:var(--on-d1)}.knock{display:none}}
/* v8: work cards look sharper — no dimming, 16:9 works shown whole (not cropped and blown up) over a blurred fill */
.vcard.uni .vmedia img.vpic{filter:grayscale(1) contrast(1.04)}
@media(hover:hover){.vcard.uni:hover .vmedia img.vpic,.vcard.uni:focus-visible .vmedia img.vpic{filter:none}}
@media(hover:none){.vcard.uni .vmedia img.vpic{filter:none}}
.vmedia.wide img.vpic,.vmedia.wide video{object-fit:contain}
.vmedia.wide img.vpic{transform:none!important}
.vmedia img.vbg{filter:blur(18px) brightness(.45) saturate(.6)!important;transform:scale(1.25)!important}
/* v8: shoot cards — vertical works shown whole in the 16:9 frame over a blurred fill, instead of a cropped, 3–6x blown-up strip */
.cv.tall img:not(.cvbg),.cv.tall video{object-fit:contain}
.cv.tall img.cvbg{filter:blur(22px) brightness(.4) saturate(.6);transform:scale(1.3)!important}
.ccard:hover .cv.tall img:not(.cvbg){transform:none}
.film figure.fv{width:clamp(170px,17vw,250px);aspect-ratio:9/16}
.film figure.fv figcaption{right:12px;left:12px;font-size:11.5px;line-height:1.4}
/* v8: breathing room between the big line (+ caption) and the intro copy below; big line aligned to the same left edge as the copy */
@media(min-width:701px){.kstate{padding-bottom:clamp(170px,30vh,300px);padding-inline:max(var(--gut),calc(max(0px,(100% - 1360px) / 2) + clamp(24px,4vw,56px)))}}
@media(min-width:701px) and (max-height:760px){.kl{font-size:clamp(44px,min(8.6vw,15vh),150px)}}
/* v8: GNB hidden during the first scroll interaction, shown once it completes */
.hdr{transition:transform .45s var(--ease),opacity .35s}
body.gnb-off .hdr:not(:focus-within){transform:translateY(-100%);opacity:0;pointer-events:none}
/* v10 (owner: the finished first frame came too late, people were already past it) — the reveal finishes in the first
   ~60vh of scroll and the finished frame then holds for another ~60vh; a scroll that stops half way is carried to that frame (JS) */
.khero{height:calc(220vh - var(--devh,0px) - 64px)}
/* v11 (owner 10-23 «텍스트는 컴팩트하게, 모션이나 이미지 넣자»): a motion band under the heading, then one-line items */
.mband{display:block;width:100%;aspect-ratio:16/6.2;background:var(--ink);margin-top:clamp(26px,3vw,44px)}
.mband[data-mb="timeline"]{aspect-ratio:16/5.4}
@media(max-width:700px){.mband{aspect-ratio:4/5}.mband[data-mb="timeline"]{aspect-ratio:4/3}.mband[data-mb="credits"]{aspect-ratio:1}.mband[data-mb="variants"]{aspect-ratio:4/3}}
.mitems{--c:3;list-style:none;margin:clamp(22px,2.4vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.mitems.c2{--c:2}.mitems.c4{--c:4}.mitems.c5{--c:5}
.mitems li{border-top:1px solid var(--rule-d);padding-top:12px;display:grid;gap:4px;align-content:start}
.paper .mitems li,.band-l .mitems li{border-top-color:var(--rule-l)}
.mitems .n{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent)}
.mitems b{font-size:clamp(15px,1.25vw,18px);letter-spacing:-.02em;line-height:1.35}
.mitems li>span:last-child{font-size:13.5px;line-height:1.55;color:var(--on-d2)}
.paper .mitems li>span:last-child,.band-l .mitems li>span:last-child{color:var(--on-l2)}
@media(max-width:900px){.mitems.c4,.mitems.c5{--c:2}}
@media(max-width:560px){.mitems{--c:1!important}}
/* inquiry block: the question and its motion on the left, the four questions and the form on the right */
.inqg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
@media(max-width:860px){.inqg{grid-template-columns:1fr}}
.inqL .mband{aspect-ratio:16/10}
.qs{list-style:none;margin:0;padding:0;border-top:1px solid var(--on-l1)}
.qs li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--rule-l);font-size:16px;color:var(--on-l1)}
.qs li span{font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:3px}
.inqR .hform{grid-template-columns:1fr 1fr;max-width:none;margin-top:26px;gap:14px}
.inqR .hform .wide,.inqR .hform .chips{grid-column:1/-1}
.inqR .hform .consent{margin-top:0;display:flex;gap:8px;align-items:flex-start}
.inqR .hform input[type=checkbox]{padding:0;width:auto;margin-top:3px}
.inqR .hform .btn.wide{justify-content:space-between;padding:16px 20px}
@media(max-width:560px){.inqR .hform{grid-template-columns:1fr}}
/* other doors: a playing card per service */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(12px,1.4vw,20px);margin-top:22px}
.door .ccap i{border:0;padding:0;font-size:15px;color:var(--accent)}
.door .ccap small{opacity:1;transform:none}
/* «7,000+»: the plus sits up with the figures instead of on the baseline */
.case-stats b .plus,.snsband b .plus{display:inline-block;font-size:.55em;color:inherit;transform:translateY(-.55em);margin-left:.04em}
.hsec:not(.paper) .mband{background:var(--ink-2)}
/* v14: honeypot off screen · form error line */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-error{margin:0;font-size:14px;color:#e5484d}

/* v14: a blog post opens with its title as the page h1 (importer turns the first h3 into h1.ptitle) */
.phead .post h1.ptitle{font-size:clamp(30px,3.6vw,48px)!important;font-weight:800;letter-spacing:-.035em;line-height:1.2;margin:.3em 0 .5em}
/* site (10-26 owner «블로그 디자인 깨짐»): the blog publisher's own blocks — FAQ questions as h3, CTA boxes, sources, figures */
.post h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.45;margin:1.8em 0 .4em;color:var(--on-d1)}
.post h4{font-size:15px;margin:2em 0 .5em;color:var(--on-d1)}
.post p,.post li{line-height:1.8}
.post ul,.post ol{padding-left:1.2em}
.post figure{display:block;margin:2em 0}
.post img{display:block;max-width:100%;height:auto}
.post figcaption{margin-top:8px;font-size:13px;color:var(--on-d3)}
.post .osc-mid-cta,.post .osc-soft-cta,.post .osc-related{margin:2.4em 0;padding:20px 22px;background:var(--ink-2);border:1px solid var(--rule-d)}
.post .osc-mid-cta p,.post .osc-soft-cta p{margin:.3em 0}
.post .osc-soft-cta li{margin:.6em 0}
.post .osc-related ul{margin:0;list-style:none;padding:0;display:grid;gap:8px}
.post .inq{background:var(--ink-2);padding:22px}
.post .inq .btn.solid{justify-self:start;background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none;font-weight:600}
.post .ai-image-disclaimer,.post .osc-refs{font-size:13px;color:var(--on-d3)}
.post .osc-refs li{font-size:13px}
/* site (10-26 owner): the format page plays the whole demo, wide and tall */
.sd-hero video{width:100%;height:100%;object-fit:cover;display:block;background:#000}