:host{all:initial}
.s,.s *{box-sizing:border-box}
.s{--ink:#121212;--ink2:#5c5c5c;--mute:rgba(0,0,0,.58);--line:rgba(0,0,0,.1);--bg:#fbfbfa;--card:#fff;--acc:#c83b1c;--dot:rgba(30,27,22,.16);
 --t-ai:#c83b1c;--t-design:#2a63cc;--t-verify:#1d7a5a;--t-ops:#7a6745;--t-eng:#4d4d4d;--t-product:#0a7c86;--t-harness:#6b4bd6;--t-collab:#2a63cc;--t-agent:#b0417e;
 --sans:"Plus Jakarta Sans","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
 --body:"Pretendard Variable",Pretendard,"Plus Jakarta Sans",-apple-system,sans-serif;--mono:"Geist Mono","Nanum Gothic Coding",ui-monospace,monospace;
 display:block;position:relative;background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:16px 16px;
 color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;overflow-x:clip;-webkit-font-smoothing:antialiased;min-height:100%}
.s :where(p,h1,h2,h3,figure,ul,ol,dl,dd){margin:0} .s :where(ul,ol){list-style:none;padding:0} .s a{color:inherit;text-decoration:none}
.s button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.s img{display:block;max-width:100%}
.s a:focus-visible,.s button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}

/* 상단 바(세션 · 연락) */
.tb{position:sticky;top:var(--ctl-h,0px);z-index:40;height:0}
.tb-l,.tb-r{position:absolute;top:16px;height:49px;display:flex;align-items:center;background:#fff;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.06)}
.tb-l{left:20px;width:227px;padding:0 6px 0 14px;gap:10px} .tb-r{right:20px;padding:0 14px 0 8px;gap:10px}
.tb-btn{display:flex;align-items:center;gap:8px;height:44px;padding:0 6px;border-radius:10px;min-width:44px}
.tb-btn:hover,.tb-btn[aria-expanded="true"]{background:rgba(0,0,0,.05)}
.tb-name{font-size:12px;font-weight:550;line-height:12px;letter-spacing:-.1px;white-space:nowrap} .tb-btn[aria-expanded="true"] .tb-name{color:var(--acc)}
.tb-ic{width:16px;height:12px;display:grid;gap:3px} .tb-ic i{display:block;height:2px;border-radius:2px;background:currentColor} .tb-ic i:nth-child(3){width:70%}
.tb-car{font-size:10px;transition:transform .2s} .tb-btn[aria-expanded="true"] .tb-car{transform:rotate(180deg)}
.tb-sep{width:1px;height:24px;background:var(--line)} .tb-cnt{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:12px;font-weight:500;white-space:nowrap;padding:0 6px}
.tb-av{width:25px;height:25px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.dd{position:absolute;top:calc(100% + 8px);min-width:236px;padding:14px 8px 8px;background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06)}
.tb-l .dd{left:0} .tb-r .dd{right:0}
.dd-h{padding:0 14px 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dd a{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:500}
.dd a:hover,.dd a[aria-current="page"]{background:rgba(0,0,0,.05)} .dd a small{font-size:11px;color:var(--mute);font-weight:500}

/* 첫 화면 */
.hero{position:relative;padding:154px 144px 0}
.hero-tag,.card-tag,.case-tag{display:inline-flex;align-items:center;height:30px;padding:0 8px;border-radius:4px;color:#fff;font-size:12px;font-weight:600;line-height:14.4px;letter-spacing:0;background:var(--acc)}
.hero-tag{margin-left:16px}
.hero-frame{position:relative;display:inline-block;margin-top:8px;padding:7px 16px 9px;border:2px solid var(--ink)}
.hd{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid var(--ink)} .hd1{left:-6.5px;top:-6.5px}.hd2{right:-6.5px;top:-6.5px}.hd3{left:-6.5px;bottom:-6.5px}.hd4{right:-6.5px;bottom:-6.5px}
.hero-h{font-size:96px;font-weight:700;line-height:1.1;letter-spacing:-4px;white-space:nowrap} .hero-h span{display:none} .s[data-role="ai"] .hero-h [data-role="ai"],.s[data-role="ax"] .hero-h [data-role="ax"],.s[data-role="pe"] .hero-h [data-role="pe"],.s:not([data-role]) .hero-h [data-role="ai"]{display:inline}
.hero-cur{position:absolute;left:calc(100% + 36px);top:50%;display:flex;align-items:center;gap:6px;transform:translateY(-50%)}
.hero-cur .tb-av{width:28px;height:28px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.hero-sub{margin-top:56px;max-width:1100px;font-size:22px;font-weight:600;line-height:1.5;letter-spacing:-.2px;text-wrap:balance} .hero-sub span{display:none} .s[data-sl="1"] .hero-sub [data-sl="1"],.s[data-sl="2"] .hero-sub [data-sl="2"],.s[data-sl="3"] .hero-sub [data-sl="3"],.s:not([data-sl]) .hero-sub [data-sl="1"]{display:inline}
.hero-prev{margin-top:28px;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:16px;font-weight:400;line-height:25.6px;color:var(--ink2)}
.hero-prev a{border-bottom:1.5px dotted currentColor} .hero-prev b{font-weight:600;color:var(--ink)}
/* 첫 화면 연출(1.2초 · 첫 방문만) */
.intro{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}
.s[data-intro="play"] .intro{display:block}
.intro-box{position:absolute;border:1.5px solid var(--acc);background:color-mix(in srgb,var(--acc) 6%,transparent);left:var(--ix,40%);top:var(--iy,40%);width:0;height:0;animation:ibox .75s cubic-bezier(.65,0,.35,1) .15s forwards}
.intro-cur{position:absolute;left:var(--ix,40%);top:var(--iy,40%);display:flex;align-items:flex-start;gap:4px;animation:icur .75s cubic-bezier(.65,0,.35,1) .15s forwards}
.intro-cur svg{width:18px;height:18px} .intro-cur span{margin-top:14px;padding:3px 8px;border-radius:5px;background:var(--acc);color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
@keyframes ibox{to{width:var(--iw,300px);height:var(--ih,120px)}}
@keyframes icur{to{transform:translate(var(--iw,300px),var(--ih,120px))}}
.s[data-intro="play"] .intro{animation:ifade .25s ease .95s forwards} @keyframes ifade{to{opacity:0}}
.s[data-intro="play"] .hero-frame{animation:iframe 1.2s steps(1,end)} @keyframes iframe{0%{border-color:transparent}75%{border-color:var(--ink)}}
.s[data-intro="play"] .hero-frame .hd{animation:ihd 1.2s steps(1,end)} @keyframes ihd{0%{opacity:0}75%{opacity:1}}

/* 고정 가로 구역 */
.hz{position:relative;margin-top:104px}
.hz-in{position:sticky;top:var(--ctl-h,0px);height:min(785px,calc(100svh - var(--ctl-h,0px)));overflow:hidden}
.hz-h{position:absolute;left:144px;top:40px;display:flex;align-items:baseline;gap:14px;font-size:14px;font-weight:600;color:var(--ink2)} .hz-h b{color:var(--ink);font-size:18px}
.hz-tr{position:absolute;left:0;top:120px;display:flex;gap:240px;padding:0 144px 0 160px;will-change:transform}
.hz .card.grp{margin-left:240px}

.card{flex:0 0 auto;position:relative;opacity:1;transform:none}
.s.js .card[data-rv="0"]{opacity:0;transform:translateY(30px)} .card{transition:opacity .5s cubic-bezier(.25,.46,.45,.94),transform .5s cubic-bezier(.25,.46,.45,.94)}
.card a{display:block}
.card-tag{margin-left:16px}
.card-frame{position:relative;margin-top:10px;padding:0;border:2px solid var(--ink);background:#fff}
.card-media{width:720px;height:408px;overflow:hidden;background:#f3f2ef}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:top}
.mk{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:22px;background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 6%,#f7f6f2));overflow:hidden}
.ph{position:relative;flex:0 0 auto;height:86%;aspect-ratio:1320/2868;overflow:hidden;border-radius:18px;box-shadow:0 22px 40px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.08)}
.ph.fr{padding:6px;border-radius:26px;background:#111} .ph.fr .ph-sc{border-radius:20px}
.ph-s{height:72%;opacity:.55;filter:saturate(.7)} .ph-sc{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;background:#0c0c10}
.ph-sc img,.ph-f{position:absolute;inset:0;width:100%;height:100%} .ph-sc img{object-fit:cover;object-position:top}
.ph-f{opacity:0} .ph-f:first-child{opacity:1}
.card.play .ph-f{animation:phf calc(var(--n) * 2.4s) infinite;animation-delay:calc(var(--i) * 2.4s)} .card.play .ph-f:first-child{opacity:0}
@keyframes phf{0%{opacity:0;transform:translateY(10px)}4%{opacity:1;transform:none}17%{opacity:1}21%{opacity:0}100%{opacity:0}}
.card-t{margin:16px 0 0 16px;font-size:18px;font-weight:600;line-height:25.2px;letter-spacing:0}
.card-d{margin:4px 0 0 16px;font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink2);max-width:640px}
.card a:hover .card-t{color:var(--acc)} .card a:hover .card-frame{box-shadow:0 18px 40px rgba(0,0,0,.08)}

/* 흐름 · 사람 · 연락 */
.sec{padding:120px 144px 0}
.sec-k{font-size:14px;font-weight:600;color:var(--ink2)}
.sec-h{margin-top:10px;font-size:40px;font-weight:600;line-height:44px;letter-spacing:-.5px}
.fl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;margin-top:64px}
.fl a{display:grid;gap:10px;align-content:start} .fl .card-tag{justify-self:start;margin-left:16px}
.fl .card-frame{padding:18px 20px 20px;min-height:0;display:grid;gap:10px;align-content:start}
.sec-p{margin-top:14px;font-family:var(--body);font-size:16px;line-height:1.7;color:var(--ink2);max-width:680px}
.fl .pr .card-tag{justify-self:start;margin-left:0;font-family:var(--mono)}
.pr .card-frame{padding:22px 22px 20px;display:grid;grid-template-rows:auto 1fr auto;gap:12px}
.pr-t{font-size:19px;font-weight:700;line-height:1.4;letter-spacing:-.3px} .pr-d{font-family:var(--body);font-size:14.5px;line-height:1.65;color:var(--ink2)}
.pr-n{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px dashed var(--line)} .pr-n b{font-size:28px;font-weight:700;letter-spacing:-.8px;color:var(--pc);white-space:nowrap} .pr-n span{font-family:var(--body);font-size:13px;line-height:1.5;color:var(--mute)}
.fl .pr{display:grid;grid-template-rows:auto 1fr;gap:10px}
.fl-n{font-family:var(--mono);font-size:12px;color:var(--mute)} .fl-t{font-size:22px;font-weight:700;letter-spacing:-.4px} .fl-d{font-family:var(--body);font-size:14.5px;line-height:1.6;color:var(--ink2)}
.fl-x{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600} .fl-x span:first-child{font-family:var(--mono);font-weight:400;color:var(--mute)}
.fl a:hover .fl-x span:last-child{color:var(--acc)}
.meet{display:grid;grid-template-columns:360px minmax(0,1fr);gap:72px;align-items:center}
.meet-h{font-size:40px;font-weight:600;line-height:44px;letter-spacing:-.5px}
.meet-p{margin-top:18px;font-family:var(--body);font-size:16px;line-height:1.7;color:var(--ink2);max-width:640px}
.meet-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13px;font-weight:600}
.pill:hover{box-shadow:0 0 0 1.5px var(--ink)} .pill.dk{background:var(--ink);color:#fff;box-shadow:none}
.meet-ph{position:relative;border:2px solid var(--ink);background:#fff;aspect-ratio:4/5;overflow:visible}
.meet-ph img{width:100%;height:100%;object-fit:cover}
.meet-ph .card-tag{position:absolute;left:12px;top:-42px}
.tech-h{margin-top:28px;font-size:14px;font-weight:600;color:var(--ink2)}
.tech{margin-top:12px;display:grid;background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.tech-r{display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:start;padding:16px 20px} .tech-r+.tech-r{border-top:1px solid var(--line)}
.tech-k{padding-top:5px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--acc)}
.tech ul{display:flex;flex-wrap:wrap;gap:6px} .tech li{padding:4px 10px;border-radius:999px;background:#f4f3ef;font-family:var(--body);font-size:13px;line-height:1.5;color:#2b2b2b}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.stat{background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:20px 22px}
.stat b{display:block;white-space:nowrap;font-size:clamp(24px,2.3vw,34px);font-weight:700;letter-spacing:-1px;line-height:1.1} .stat span{display:block;margin-top:6px;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--ink2)}
.chat-wrap{padding:120px 144px 0}
.chat-t{margin-left:16px;background:var(--acc)}
.chat{position:relative;margin-top:10px;width:100%;min-height:317px;padding:40px 40px 48px;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 0 0 1px var(--line)}
.chat{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:center}
.chat-ph{position:relative;border:2px solid var(--ink);background:#fff;aspect-ratio:4/5} .chat-ph img{width:100%;height:100%;object-fit:cover}
.chat-h{font-size:40px;font-weight:600;line-height:44px;letter-spacing:-.5px} .chat-sub{margin-top:16px;font-size:18px;font-weight:600;line-height:25.2px;color:var(--ink2)}
.chat-l{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px}
.foot-sp{height:96px}

/* 하단 상태 막대(세션 은유) */
.sbar{position:fixed;left:50%;bottom:24px;z-index:40;transform:translateX(-50%);height:48px;display:flex;align-items:center;gap:14px;padding:0 18px;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.06);font-family:var(--mono);font-size:12px;white-space:nowrap}
.sbar i{width:8px;height:8px;border-radius:50%;background:#20a464;box-shadow:0 0 0 3px rgba(32,164,100,.18)} .sbar em{font-style:normal;color:var(--mute)} .sbar b{font-weight:500}
.s.nosbar .sbar{display:none}

/* 상세(사례 · 프로젝트) */
.back{position:sticky;top:calc(var(--ctl-h,0px) + 16px);z-index:40;margin:16px 0 0 16px;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;background:#fff;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05)}
.back span{font-size:12.8px;font-weight:600;line-height:normal}
.case{padding:0 120px 40px}
.case-frame{position:relative;max-width:1200px;margin:-8px auto 0;padding:24px 0 64px;border-radius:32px;border:1.5px dashed rgba(0,0,0,.14);background:rgba(251,251,250,.7)}
.case-in{margin:0 auto;max-width:1020px;padding:0 24px}
.case-tag{position:absolute;left:166px;top:-15px}
.case-h{margin-top:56px;font-size:40px;font-weight:600;line-height:44px;letter-spacing:-.5px}
.case-h span{display:block} .case-h span:last-child{display:inline;color:var(--hi,var(--acc));background:color-mix(in srgb,var(--hi,var(--acc)) 12%,transparent)}
.info{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.info-c{padding:14px 16px;border-right:1px solid var(--line);min-width:0} .info-c:last-child{border-right:0}
.info-l{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--hi,var(--acc))}
.info-v{margin-top:8px;font-size:13px;font-weight:700;line-height:1.4} .info-s{margin-top:2px;font-size:12px;font-weight:500;line-height:1.45;color:var(--mute)}
.case-hero{margin-top:48px;border:2px solid var(--ink);background:#fff;position:relative}
.case-hero .ch-in{aspect-ratio:2/1;overflow:hidden} .case-hero img{width:100%;height:100%;object-fit:cover;object-position:top}
.case-sec{margin-top:64px}
.sec-l{font-size:14px;font-weight:600;line-height:19.6px;letter-spacing:0;color:var(--hi,var(--acc))}
.sec-t{margin-top:8px;font-size:18px;font-weight:600;line-height:25.2px}
.sec-b{margin-top:14px;display:grid;gap:14px;font-family:var(--body);font-size:16px;line-height:1.75;color:#2b2b2b;max-width:760px}
.sec-b b{font-weight:700;color:var(--ink)} .sec-b code{font-family:var(--mono);font-size:.88em;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px}
.sec-b table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5} .sec-b th,.sec-b td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top} .sec-b th{font-size:12px;color:var(--mute);font-weight:600}
.sec-b tr.pick td{background:color-mix(in srgb,var(--hi,var(--acc)) 8%,transparent)}
.shots{margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .shots img{border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.rec{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rec li{background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--line);padding:16px 18px}
.rec .rk{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--mute)} .rec .rv{margin-top:6px;font-family:var(--body);font-size:14.5px;line-height:1.6} .rec .rv b{font-family:var(--sans);font-size:20px;font-weight:700;margin-right:6px}
.pn{margin-top:72px;display:flex;justify-content:space-between;gap:16px}

/* 이력서(about) */
.ab{padding:0 0 0}
.idw{display:flex;justify-content:center;padding:120px 16px 0}
.idc{position:relative;width:400px;max-width:100%;padding:22px 24px 18px;background:#fff;border:2.5px solid var(--ink);border-radius:26px;transform:rotate(-3deg);box-shadow:0 22px 48px rgba(0,0,0,.08)}
.id-the{font-family:"Nanum Pen Script","Caveat",cursive;font-size:30px;line-height:1;margin-bottom:-4px}
.id-role{font-size:44px;font-weight:800;line-height:1;letter-spacing:-1.5px;color:var(--acc);padding-bottom:10px;border-bottom:1.5px dashed var(--ink)}
.id-role span{display:none} .s[data-role="ai"] .id-role [data-role="ai"],.s[data-role="ax"] .id-role [data-role="ax"],.s[data-role="pe"] .id-role [data-role="pe"],.s:not([data-role]) .id-role [data-role="ai"]{display:inline}
.id-tools{margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.04em}
.id-ph{margin:16px auto 0;width:190px;aspect-ratio:4/5;border:2.5px solid var(--ink);border-radius:18px;overflow:hidden} .id-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.id-f{margin-top:16px;display:grid}
.id-f div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1.5px dashed rgba(0,0,0,.35)}
.id-f dt{font-size:10px;font-weight:800;letter-spacing:.06em} .id-f dd{font-family:"Nanum Pen Script","Caveat",cursive;font-size:22px;line-height:1;color:var(--acc)}
.id-f dd{text-align:right} .id-f dd small{display:block;margin-top:3px;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.id-foot{margin-top:12px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:8px;font-weight:800;line-height:1.3;letter-spacing:.02em} .id-foot b{font-size:18px;font-weight:500}
.ab-hi{max-width:1152px;margin:0 auto;padding:96px 16px 0}
.ab-h{font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.5px;text-align:center}
.ab-p{margin-top:36px;display:grid;gap:22px;font-family:var(--body);font-size:16px;line-height:1.8;color:var(--ink2)} .ab-p b{color:var(--ink);font-weight:700}
.ab-k{margin-top:56px;font-size:14px;font-weight:600;color:var(--ink2)}
.st-g{margin-top:14px;display:grid;gap:40px}
.st{display:grid;gap:10px} .st .card-tag{justify-self:start;margin-left:0;font-family:var(--mono);background:var(--ink)}
.st .card-frame{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;padding:30px 32px;background:#fff}
.st-t{font-size:20px;font-weight:700;line-height:1.45;letter-spacing:-.3px} .st-b{font-family:var(--body);font-size:15.5px;line-height:1.85;color:var(--ink2)} .st-b b{color:var(--ink);font-weight:700;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--acc) 18%,transparent) 0)}
.ab-l{margin-top:32px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.ex{padding:120px 144px 0}
.ex-h{font-size:18px;font-weight:600;text-align:center}
.ex-g{margin-top:48px;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:48px;align-items:start}
.ex-cs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.s .ex-c{display:grid;gap:6px;text-align:left;padding:22px 24px;border-radius:22px;border:2px solid rgba(0,0,0,.18);background:#fff;color:var(--mute);transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .2s,color .2s}
.s .ex-c[aria-pressed="true"]{grid-column:1/-1;order:-1;padding:30px 32px;border-color:var(--ink);color:var(--ink);transform:rotate(-1deg)}
.s .ex-c:hover{border-color:var(--c)} .ex-r{font-size:18px;font-weight:600;color:inherit} .ex-c[aria-pressed="true"] .ex-r{font-size:22px}
.ex-at{font-size:14px} .ex-d{margin-top:8px;font-size:12.5px} .ex-c[aria-pressed="true"] .ex-at{color:var(--c);font-weight:600}
.ex-p{display:grid;gap:14px;font-family:var(--body);font-size:16px;line-height:1.75;color:var(--ink2)} .ex-p[hidden]{display:none}
.ex-ms{margin-top:10px;display:flex;gap:12px;overflow:hidden} .ex-m{flex:0 0 auto;height:260px;aspect-ratio:1320/2868;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line)} .ex-m img{width:100%;height:100%;object-fit:cover;object-position:top}
.ex-m.cv{aspect-ratio:16/10;height:240px;border-radius:14px}
.ex-go{justify-self:start;font-family:var(--sans);font-size:14px;font-weight:600;border-bottom:1.5px solid currentColor}
.ex-p.in{animation:exin .35s ease both} @keyframes exin{from{opacity:0;transform:translateY(8px)}}
/* Lunarc 포트폴리오 페이지 */
.lu-hero .ch-in{aspect-ratio:16/9}
.lu-app{margin-top:18px;display:flex;justify-content:flex-end}
.lu-ss{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.lu-s{display:grid;gap:12px;align-content:start} .lu-ph{aspect-ratio:1320/2868;border-radius:22px;overflow:hidden;background:#0c0c10;box-shadow:0 14px 30px rgba(0,0,0,.14),0 0 0 1px var(--line)} .lu-ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.lu-s figcaption{font-family:var(--body);font-size:13.5px;line-height:1.6;color:var(--ink2)} .lu-s figcaption b{display:block;margin-bottom:2px;font-family:var(--sans);font-size:15px;color:var(--ink)}
.lu-ar{margin-top:22px;display:grid;gap:14px;padding:22px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ar-row{display:flex;align-items:center;gap:12px} .ar-ai{padding-left:calc(33% + 12px)}
.ar-n{flex:1;display:grid;gap:4px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--ink);background:#fff} .ar-n b{font-size:15px} .ar-n span{font-family:var(--body);font-size:12.5px;color:var(--mute);line-height:1.5}
.ar-hl{border-color:var(--hi,var(--acc));background:color-mix(in srgb,var(--hi,var(--acc)) 7%,#fff)} .ar-e{font-style:normal;font-weight:700;color:var(--mute)}
.lu-cap{margin-top:26px;font-size:13px;font-weight:700;color:var(--ink2)}
.lu-pp{margin-top:10px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;counter-reset:pp}
.lu-pp li{counter-increment:pp;position:relative;display:grid;gap:4px;align-content:start;padding:12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.lu-pp li::before{content:counter(pp,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;color:var(--hi,var(--acc))} .lu-pp b{font-size:13px;line-height:1.35} .lu-pp span{font-family:var(--body);font-size:12px;line-height:1.5;color:var(--mute)}
.lu-dg{margin-top:22px;display:grid;gap:32px}
.lu-gt{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--hi,var(--acc))}
.lu-gc{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lu-c{display:grid;gap:8px;align-content:start;padding:18px 20px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s}
a.lu-c:hover{box-shadow:0 0 0 1.5px var(--ink),0 12px 28px rgba(0,0,0,.06)}
.lu-cd{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--mute)} .lu-cr{font-size:16px;font-weight:700;line-height:1.45} .lu-cr b{color:var(--hi,var(--acc))}
.lu-cb{font-family:var(--body);font-size:13.5px;line-height:1.65;color:var(--ink2)} .lu-cb b{color:var(--ink)}
.lu-go{justify-self:start;margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--ink);border-bottom:1px solid currentColor}
.lu-bd{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.lu-bd li{display:grid;gap:4px;padding:18px 14px;background:#fff} .lu-bd b{font-size:22px;font-weight:700;letter-spacing:-.6px;white-space:nowrap} .lu-bd span{font-family:var(--body);font-size:12px;color:var(--mute);line-height:1.4}
/* 목록 페이지(포트폴리오 · 프로젝트 · 이력서) */
.pg{padding:120px 144px 0}
.pg-h{font-size:40px;font-weight:600;line-height:44px;letter-spacing:-.5px} .pg-p{margin-top:14px;font-family:var(--body);font-size:16px;line-height:1.7;color:var(--ink2);max-width:680px}
.chips{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13px;font-weight:600}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 48px}
.grid .card-media{width:100%;height:auto;aspect-ratio:720/408}
.rs{margin-top:48px;display:grid;gap:56px}
.rs-b{background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:28px 32px}
.rs-b h2{font-size:18px;font-weight:600;line-height:25.2px} .rs-b h3{font-size:15px;font-weight:700;margin-top:22px}
.rs-kv{margin-top:14px;display:grid;gap:10px;font-family:var(--body);font-size:14.5px;line-height:1.65}
.rs-kv li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px} .rs-kv .k{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--mute);text-transform:uppercase;padding-top:3px}
.rs-st{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .rs-st p{font-family:var(--body);font-size:14px;line-height:1.7;color:#2b2b2b}
.rs-st b{display:block;font-family:var(--sans);font-size:15px;margin-bottom:8px}
.rs-items{margin-top:12px;display:grid}
.rs-items li{display:grid;grid-template-columns:120px 150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--line);font-family:var(--body);font-size:14px;line-height:1.6}
.rs-items .th{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--mute)} .rs-items .d{font-weight:700}
.rs-note{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:4px;background:var(--acc);color:#fff;font-size:11px;font-weight:600;vertical-align:2px}
.stk{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stk li{border-radius:12px;box-shadow:0 0 0 1px var(--line);padding:14px 16px;background:#fcfcfb}
.stk .l{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--acc)} .stk .t{margin-top:8px;font-size:14px;font-weight:700;line-height:1.5} .stk .u{margin-top:8px;font-family:var(--body);font-size:12.5px;line-height:1.5;color:var(--mute)}

@media (prefers-reduced-motion:reduce){.card.play .ph-f{animation:none} .card.play .ph-f:first-child{opacity:1}
 .intro{display:none!important} .card{transition:none} .s.js .card[data-rv="0"]{opacity:1;transform:none}}
@media (max-width:900px){
 .tb-l{left:12px;width:auto} .tb-r{right:12px} .tb-cnt,.tb-sep{display:none} .tb-r .tb-name{display:none}
 .hero{padding:124px 16px 0} .hero-tag{margin-left:0} .hero-frame{padding:2px 10px 4px} .hero-h{font-size:clamp(36px,11vw,64px);letter-spacing:-2px;white-space:normal} .hero-cur{display:none}
 .hero-sub{font-size:18px;line-height:1.5;margin-top:36px} .hero-prev{font-size:14px}
 .hz{margin-top:56px} .hz-in{position:static;height:auto;overflow:visible} .hz-h{position:static;padding:0 16px} .hz-tr{position:static;flex-direction:column;gap:48px;padding:24px 16px 0;transform:none!important}
 .card-media{width:100%;height:auto;aspect-ratio:720/408} .hz .card.grp{margin-left:0} .hz .card[data-grp]::before,.hz .card.grp::after{display:none} .card-tag{margin-left:0} .card-t,.card-d{margin-left:0}
 .sec,.pg{padding:72px 16px 0} .fl,.grid,.stats,.rs-st,.stk,.rec,.shots{grid-template-columns:minmax(0,1fr)} .grid{gap:48px}
 .meet{grid-template-columns:minmax(0,1fr);gap:48px} .tech-r{grid-template-columns:minmax(0,1fr);gap:8px} .meet-ph{max-width:320px} .meet-h,.sec-h,.pg-h,.chat-h,.case-h{font-size:30px;line-height:1.2}
 .chat-wrap{padding:72px 16px 0} .chat{grid-template-columns:minmax(0,1fr);gap:56px} .chat-ph{max-width:200px} .chat{padding:28px 20px 40px} .chat-t{margin-left:16px}
 .sbar{display:none} .case{padding:34px 12px 24px} .case-frame{border-radius:20px} .case-in{padding:0 14px} .case-tag{left:20px} .case-h{margin-top:40px}
 .info{grid-template-columns:repeat(2,minmax(0,1fr))} .info-c:nth-child(2){border-right:0} .info-c:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .rs-kv li,.rs-items li{grid-template-columns:minmax(0,1fr);gap:4px} .lu-ss{grid-template-columns:repeat(2,minmax(0,1fr))} .ar-row{flex-direction:column;align-items:stretch} .ar-e{transform:rotate(90deg);align-self:center} .ar-ai{padding-left:0} .lu-pp{grid-template-columns:repeat(2,minmax(0,1fr))} .lu-gc{grid-template-columns:minmax(0,1fr)} .lu-bd{grid-template-columns:repeat(2,minmax(0,1fr))} .lu-app{justify-content:flex-start} .ex{padding:72px 16px 0} .ex-g{grid-template-columns:minmax(0,1fr)} .idw{padding-top:110px} .ab-hi{padding-top:64px} .ab-h{font-size:30px} .st .card-frame{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 18px} .ex-m{height:200px} .rs-b{padding:22px 18px}
}
/* ── Lunarc 위계판(10-03): 주장 → 증거 → 화면 → 대표 사례 3 → 일하는 방식 → 나머지 → 한계 ── */
.lu-h span:last-child{font-size:inherit}
.lu-sub{margin-top:20px;max-width:640px;font-family:var(--body);font-size:17px;line-height:1.7;color:var(--ink2)}
.lu-pf{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lu-pf li{display:grid;gap:6px;align-content:start;padding:20px 22px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.lu-pf b{font-family:var(--sans);font-size:40px;font-weight:700;line-height:1;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;color:var(--ink)} .lu-pf span{font-family:var(--body);font-size:13.5px;line-height:1.55;color:var(--ink2)}
.lu-meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;font-weight:600;color:var(--mute)} .lu-meta span+span::before{content:"·";margin-right:18px;color:var(--line)}
.lx-s{margin-top:24px;display:grid;gap:28px}
.lx{display:grid;gap:14px;padding:32px 34px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.lx-k{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--hi,var(--acc))}
.lx-t{font-size:26px;font-weight:700;line-height:1.35;letter-spacing:-.6px;text-wrap:balance}
.lx-l{max-width:720px;font-family:var(--body);font-size:15.5px;line-height:1.75;color:var(--ink2)}
.lx-f{margin-top:6px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.lx-r{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--ink2)} .lx-r b{color:var(--ink)}
.lx-go{flex:none;font-family:var(--mono);font-size:12.5px;color:var(--ink);border-bottom:1px solid currentColor}
.lx-ring{margin-top:6px;display:grid;gap:6px;counter-reset:rg}
.lx-ring li{counter-increment:rg;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 16px;border-radius:10px;border:1px solid color-mix(in srgb,var(--hi,var(--acc)) 28%,var(--line));background:color-mix(in srgb,var(--hi,var(--acc)) 4%,#fff)}
.lx-ring li:nth-child(2){margin-inline:14px} .lx-ring li:nth-child(3){margin-inline:28px} .lx-ring li:nth-child(4){margin-inline:42px} .lx-ring li:nth-child(5){margin-inline:56px}
.lx-ring li.core{margin-inline:70px;background:var(--ink);border-color:var(--ink)} .lx-ring li.core b,.lx-ring li.core span{color:#fff}
.lx-ring b{font-size:14px} .lx-ring span{font-family:var(--body);font-size:13.5px;line-height:1.55;color:var(--ink2)}
.lx-eq{margin-top:6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-size:14px;color:var(--mute)}
.lx-eq span{display:inline-flex;align-items:baseline;gap:3px} .lx-eq b{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--ink);letter-spacing:-1px} .lx-eq i{font-style:normal;font-size:20px}
.lx-eq .hl b{color:var(--hi,var(--acc))}
.lx-tb{display:grid;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.lx-tb .tr{display:grid;grid-template-columns:1.1fr 1.6fr 1.1fr .6fr;gap:16px;padding:13px 16px;border-top:1px solid var(--line);font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--ink2)}
.lx-op .tr{grid-template-columns:1.1fr 1fr 1.4fr}
.lx-tb .th{border-top:0;background:#f6f6f4;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--mute)}
.lx-tb .tr.ok{background:color-mix(in srgb,var(--hi,var(--acc)) 6%,#fff)}
.lx-tb b{display:block;font-family:var(--sans);font-size:14px;color:var(--ink)} .lx-tb em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.lx-tb .tr.ok em{color:var(--hi,var(--acc))}
.lx-tb .no{font-weight:700;color:var(--mute);text-decoration:line-through} .lx-tb .yes{font-weight:700;color:var(--hi,var(--acc))}
.hw{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.hw-c{padding:22px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line)} .hw-c .lu-cap{margin-top:0}
.sp{margin-top:16px;height:190px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end}
.sp li{height:100%;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;gap:4px}
.sp i{align-self:end;width:100%;max-width:34px;border-radius:4px 4px 0 0;background:var(--hi,var(--acc))}
.sp li:last-child i{background:var(--ink)}
.sp-n{align-self:end;font-family:var(--mono);font-size:12px;color:var(--ink)} .sp b{font-family:var(--mono);font-size:11.5px} .sp em{font-style:normal;font-size:10px;color:var(--mute);white-space:nowrap}
.tc{margin-top:16px;display:grid;gap:22px;position:relative}
.tc li{position:relative;padding-left:22px} .tc li::before{content:"";position:absolute;left:3px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--hi,var(--acc))}
.tc li:not(:last-child)::after{content:"";position:absolute;left:7px;top:19px;bottom:-20px;width:1.5px;background:var(--line)}
.tc-k{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--mute)} .tc-c{margin-top:3px;font-family:var(--mono);font-size:16px;font-weight:600} .tc-d{margin-top:2px;font-family:var(--body);font-size:13px;line-height:1.55;color:var(--ink2)}
.hw-bd{margin-top:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ot{margin-top:18px;border-top:1px solid var(--line)}
.ot li>a,.ot li>div{display:grid;grid-template-columns:130px minmax(0,1fr) 90px;gap:20px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--line)}
.ot li>a:hover{background:#fff}
.ot-d{font-size:12.5px;font-weight:700;color:var(--mute)} .ot-r{font-size:15px;font-weight:600;line-height:1.5} .ot-r b{color:var(--hi,var(--acc))}
.ot-go{justify-self:end;font-family:var(--mono);font-size:12px;color:var(--ink)}
.lm{margin-top:18px;display:grid;gap:10px}
.lm li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:20px;align-items:baseline;padding:16px 20px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.lm b{font-size:14px} .lm span{font-family:var(--body);font-size:14.5px;line-height:1.7;color:var(--ink2)}
.lu-ss-sm{grid-template-columns:repeat(4,minmax(0,170px));justify-content:start}
@media (max-width:760px){
 .lu-pf,.hw,.hw-bd{grid-template-columns:minmax(0,1fr)} .lu-pf b{font-size:34px}
 .lx{padding:22px 18px} .lx-t{font-size:21px}
 .lx-ring li{grid-template-columns:minmax(0,1fr);gap:2px} .lx-ring li:nth-child(n){margin-inline:0}
 .lx-tb .tr,.lx-op .tr{grid-template-columns:minmax(0,1fr);gap:4px} .lx-tb .th{display:none}
 .lx-f{flex-direction:column;align-items:flex-start}
 .ot li>a,.ot li>div{grid-template-columns:minmax(0,1fr);gap:4px} .ot-go{justify-self:start}
 .lm li{grid-template-columns:minmax(0,1fr);gap:4px}
 .lu-ss-sm{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ── 화면을 제목 아래로(10-03) · LangPickle 위계판 ── */
.lu-top{margin-top:36px}
.lp-ss{margin-top:36px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.lp-s{display:grid;gap:8px;align-content:start} .lp-s img{width:100%;aspect-ratio:400/869;object-fit:cover;border-radius:14px;background:#0c0c10;box-shadow:0 0 0 1px var(--line)}
.lp-s figcaption{font-size:12.5px;font-weight:600;color:var(--ink2);text-align:center}
.lp-pp{grid-template-columns:repeat(8,minmax(0,1fr))} .lp-pp li.bug{box-shadow:0 0 0 1.5px var(--hi,var(--acc));background:color-mix(in srgb,var(--hi,var(--acc)) 6%,#fff)}
.lp-bug,.lp-tt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-bug>div,.lp-tt>div{display:grid;gap:6px;align-content:start;padding:18px 20px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.lp-bk{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--mute)} .lp-bt{font-size:18px;font-weight:700;line-height:1.4} .lp-bt b{color:var(--hi,var(--acc))}
.lp-bd{font-family:var(--body);font-size:13.5px;line-height:1.65;color:var(--ink2)}
.lp-tt .bad{box-shadow:0 0 0 1.5px #c2412d;background:#fdf4f2} .lp-tt .bad .lp-bt{color:#b3361f} .lp-tt .ok .lp-bt{color:var(--ink)}
.lp-ab .tr{grid-template-columns:1fr 1fr 1.5fr} .lx-tb .bad{color:#b3361f;font-weight:600}
.lp-fn{margin-top:16px;display:grid;gap:8px}
.lp-fn li{display:flex;align-items:baseline;gap:14px;padding:12px 16px;border-radius:10px;background:color-mix(in srgb,var(--hi,var(--acc)) 8%,#fff)}
.lp-fn li:nth-child(1){width:100%} .lp-fn li:nth-child(2){width:72%} .lp-fn li:nth-child(3){width:56%;background:var(--hi,var(--acc))} .lp-fn li:nth-child(3) b,.lp-fn li:nth-child(3) span{color:#fff}
.lp-fn b{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;min-width:34px} .lp-fn span{font-family:var(--body);font-size:13.5px;color:var(--ink2)}
.lp-dc{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lp-dc li{display:grid;gap:4px;padding:16px;border-radius:10px;box-shadow:0 0 0 1px var(--line)} .lp-dc b{font-size:28px;font-weight:700} .lp-dc span{font-family:var(--body);font-size:13px;color:var(--ink2)}
@media (max-width:760px){
 .lp-ss{grid-template-columns:repeat(3,minmax(0,1fr))} .lp-pp{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lp-bug,.lp-tt{grid-template-columns:minmax(0,1fr)} .lp-ab .tr{grid-template-columns:minmax(0,1fr)}
 .lp-fn li:nth-child(n){width:100%}
}
/* LangPickle 재구성(10-03): 합류 뒤 작업 */
.lp-op .tr{grid-template-columns:1.1fr 2fr .5fr}
.lp-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} .lp-2 .lp-fn{margin-top:12px}
.lp-2 .lp-bd{margin-top:10px} .lp-2 .lp-bd b,.lp-rl b,.lp-3 .lp-bd b{color:var(--ink)}
.lp-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lp-3>div{display:grid;gap:6px;align-content:start;padding:18px 20px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.lp-3 .bad{box-shadow:0 0 0 1.5px #c2412d;background:#fdf4f2} .lp-3 .bad .lp-bt{color:#b3361f}
.lp-hw{margin-top:22px}
.lp-rl{display:grid;gap:8px}
.lp-rl li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:baseline;padding:14px 18px;border-radius:10px;background:color-mix(in srgb,var(--hi,var(--acc)) 5%,#fff)}
.lp-rl b{font-size:14.5px} .lp-rl span{font-family:var(--body);font-size:14px;line-height:1.7;color:var(--ink2)}
@media (max-width:760px){ .lp-op .tr{grid-template-columns:minmax(0,1fr)} .lp-2,.lp-3{grid-template-columns:minmax(0,1fr)} .lp-rl li{grid-template-columns:minmax(0,1fr);gap:4px} }
/* Mk · Shift 위계판(10-03) */
.mk-log{margin-top:36px;padding:22px 24px;border-radius:16px;background:#111214;color:#e8e8e3;font-family:var(--mono);box-shadow:0 14px 30px rgba(0,0,0,.14)}
.mk-lh{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#9a9a93;padding-bottom:12px;border-bottom:1px solid #2a2b2e}
.mk-lh span:first-child::before{content:"$ ";color:#6fcf97}
.mk-log ol{margin-top:14px;display:grid;gap:8px}
.mk-log li{display:grid;grid-template-columns:200px minmax(0,1fr) 110px;gap:14px;align-items:center;font-size:13px}
.mk-log li i{height:6px;border-radius:3px;background:linear-gradient(90deg,#6fcf97 var(--w),#2a2b2e var(--w))}
.mk-log li b{font-weight:500;color:#6fcf97;text-align:right}
.mk-sum{margin-top:14px;padding-top:12px;border-top:1px solid #2a2b2e;font-size:15px;font-weight:600;color:#6fcf97}
.mk-inc .tr{grid-template-columns:1.5fr 1.5fr .5fr} .mk-aud .tr,.sh-gd .tr{grid-template-columns:1fr 2.2fr .5fr} .sh-ab .tr{grid-template-columns:1.4fr 1fr 1.2fr}
.mk-gr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mk-gr>div{display:grid;gap:6px;align-content:start;padding:20px 22px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.mk-big{font-size:34px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--hi,var(--acc))}
.sh-rep{margin-top:36px;display:grid;gap:10px} .sh-rep img{width:100%;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 14px 30px rgba(0,0,0,.08)}
.sh-rep figcaption{font-size:12.5px;color:var(--mute);font-family:var(--body)}
.sh-note{max-width:760px;margin-top:6px}
@media (max-width:760px){ .mk-log li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px} .mk-log li i{grid-column:1/-1;order:3} .mk-lh{flex-direction:column}
 .mk-inc .tr,.mk-aud .tr,.sh-gd .tr,.sh-ab .tr{grid-template-columns:minmax(0,1fr)} .mk-gr{grid-template-columns:minmax(0,1fr)} }
/* TL;DR 3카드(10-03) */
.tl{margin-top:56px} .tl-k{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--hi,var(--acc))}
.tl-g{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tl-c{display:grid;gap:10px;align-content:start;padding:22px 24px;border-radius:18px;background:color-mix(in srgb,var(--hi,var(--acc)) 5%,#fff);box-shadow:0 0 0 1px var(--line)}
.tl-t{font-size:17px;font-weight:700;color:var(--hi,var(--acc))} .tl-b{font-family:var(--body);font-size:15px;line-height:1.75;color:var(--ink2)}
.tl-b mark{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--hi,var(--acc)) 20%,transparent) 0);color:var(--ink);font-weight:600}
@media (max-width:760px){ .tl-g{grid-template-columns:minmax(0,1fr)} }
/* 전후 비교(10-03, 이전 판은 흑백) */
.ba{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px;align-items:start;padding:28px;border-radius:20px;background:color-mix(in srgb,var(--hi,var(--acc)) 4%,#fff);box-shadow:0 0 0 1px var(--line)}
.ba-c{display:grid;gap:14px;justify-items:center}
.ba-ph{width:min(240px,100%);aspect-ratio:560/1235;border-radius:26px;overflow:hidden;background:#0c0c10;box-shadow:0 14px 30px rgba(0,0,0,.14),0 0 0 1px var(--line)} .ba-ph img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ba-old .ba-ph img{filter:grayscale(1);opacity:.8}
.ba-c figcaption{max-width:300px;font-family:var(--body);font-size:14px;line-height:1.7;color:var(--ink2)} .ba-c figcaption b{display:block;margin-bottom:4px;font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.ba-new figcaption b{color:var(--hi,var(--acc))}
.ba-ar{align-self:center;font-style:normal;font-size:28px;color:var(--ink)}
.ba-n{margin-top:10px;font-size:12.5px;color:var(--mute)}
@media (max-width:760px){ .ba{grid-template-columns:minmax(0,1fr);padding:20px} .ba-ar{transform:rotate(90deg);justify-self:center} }

/* 대비 AA(10-03 컷오버 게이트): 보조 글자 .45→.58, 강조 #e0482a→#c83b1c, 파랑 #2f6fe4→#2a63cc, 갈색 #8a7550→#7a6745 */
.s .lx-go{display:inline-flex;align-items:center;min-height:44px;border-bottom:0!important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* 터치 타깃 44px(10-03 컷오버 게이트): 상단 버튼 37→44 · 홈 링크 · 알약 · 뒤로 40→44 · 필터 칩 36→44 · 사례 링크 */
.sv{container-type:size;width:100%;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:5.5cqmin 6cqmin;background:color-mix(in srgb,var(--c) 9%,#fff);color:var(--ink)}.sv-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:clamp(9px,3cqmin,13px);color:color-mix(in srgb,var(--c) 80%,#000)}.sv-mid{align-self:center} .sv-v{font-size:clamp(22px,17cqmin,120px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--c);white-space:nowrap} .sv-d{margin-top:2.6cqmin;font-family:var(--body);font-size:clamp(10px,3.6cqmin,17px);line-height:1.45;color:var(--ink2);max-width:36ch}.sv-ch{height:26cqh;display:flex;gap:4cqmin;align-items:stretch} .sv-b{flex:1;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px} .sv-b i{align-self:end;display:block;border-radius:4px 4px 0 0;background:var(--c);opacity:.85}.sv-b span{font-family:var(--mono);font-size:clamp(8px,2.4cqmin,11px);text-align:center;color:var(--ink2)} @container (max-width:300px){.sv-ch,.sv-d{display:none}}