:root{
  --ink:#2E2E38; --mute:#676783; --line:#E3E3EB;
  --page:#F4F4F7; --card:#DEE2E8; --white:#FFFFFF;
  --accent:#FF5747; --blue:#4AA3FF; --sun:#FFC93C; --mint:#43D9A3; --violet:#8B6BFF; --pink:#FF8FB1;
  --night-a:#2B2B37; --night-b:#101018;
  --f-body:'Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-sign:'Mrs Saint Delafield','Segoe Script',cursive;
  --fh:100vh;
  color-scheme:light;
}
@supports(height:100svh){:root{--fh:100svh}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
img{display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
h1,h2,h3,p{margin:0}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;font-size:14px;line-height:1.4;padding:13px 24px;background:var(--ink);color:#fff;box-shadow:0 8px 20px rgba(46,46,56,.22);transition:background-color .25s ease,color .25s ease}
.btn:hover{background:#4C4C5E}
.btn-red{background:var(--accent);font-size:16px;padding:16px 40px;box-shadow:0 14px 28px rgba(255,87,71,.35)}
.btn-red:hover{background:color-mix(in srgb,var(--accent) 84%,#000)}
.btn-white{background:#fff;color:var(--ink);font-size:16px;padding:16px 40px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.btn-white:hover{background:#E3E6F0}

/* 섹션 공통 */
.page{position:relative;z-index:1;background:linear-gradient(180deg,#fff 0,var(--page) 900px,var(--page) 100%);margin-bottom:var(--fh)}
.sec{padding-top:128px}
.sec-h{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin-bottom:32px}
h2{font-size:36px;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.sub{font-size:14px;color:var(--mute);line-height:1.5}

/* Works */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.w2{grid-column:span 2}
.wc{position:relative;display:block;height:600px;border-radius:24px;background:var(--card);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.thumb{position:absolute;inset:0;display:grid;place-items:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wc:hover .thumb,.wc:focus-visible .thumb{transform:scale(1.1)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lab{position:absolute;left:0;bottom:0;display:grid;gap:1px;padding:14px 24px 16px 20px;background:var(--page);border-top-right-radius:22px}
.lab b{font-size:14px;font-weight:600;line-height:1.35}
.lab span{font-size:12px;color:var(--mute);line-height:1.4}
.win{width:100%;aspect-ratio:16/10;max-height:100%;background:#fff;border-radius:12px;box-shadow:0 30px 60px rgba(30,30,60,.2);overflow:hidden;display:grid;grid-template-rows:28px 1fr}
.win i{display:flex;align-items:center;padding-left:12px;background:#EFF0F5}
.win i::before{content:"";width:8px;height:8px;border-radius:50%;background:#FF6058;box-shadow:14px 0 #FFBD2E,28px 0 #28C940}
.win b,.phone b{display:grid;place-items:center;padding:12px;text-align:center;font-size:12px;font-weight:500;line-height:1.5;color:#6B6F8C;background:linear-gradient(135deg,#E9EDF8,#D4D9EE)}
.phone{height:92%;max-height:100%;aspect-ratio:9/19;border-radius:30px;border:7px solid #1E1E28;overflow:hidden;box-shadow:0 30px 60px rgba(30,30,60,.25);display:grid}
.ph[hidden]{display:none!important}
/* 푸터: 본문 아래에서 드러남 */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:0;height:var(--fh);display:flex;flex-direction:column;overflow:hidden;color:#fff;background:linear-gradient(180deg,var(--night-a) 0%,var(--night-b) 100%);padding-bottom:env(safe-area-inset-bottom,0px)}
.foot-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:88px max(24px,env(safe-area-inset-right,0px)) clamp(150px,34vh,320px) max(24px,env(safe-area-inset-left,0px))}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:#C9C9D8}
.avail i{width:8px;height:8px;border-radius:50%;background:#3DDC84;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.foot h2{font-size:clamp(30px,3.6vw,48px);color:#fff}
.foot p{max-width:30em;font-size:14px;line-height:1.8;color:#B9B9C8;text-wrap:pretty}
.scene{position:absolute;left:0;bottom:0;width:100%;height:clamp(220px,38vh,380px);display:block}
.made{position:absolute;z-index:3;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:12px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.55)}
.hop{transform-box:fill-box;transform-origin:50% 100%;animation:hop 1.9s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0) scaleY(1)}12%{transform:translateY(0) scaleY(.93)}45%{transform:translateY(-38px) scaleY(1.04)}78%{transform:translateY(0) scaleY(1)}}
.tw{animation:tw 2.8s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
.cf{transform-box:fill-box;transform-origin:center;animation:drift 5s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(-10px) rotate(-20deg)}to{transform:translateY(26px) rotate(25deg)}}
/* ===== 작업 상세 페이지 전용 스타일 (공통 base.css 뒤에 붙음) ===== */
:root{--accent:#2E7BFF;--dark:#38383F;--blue2:#46A0FF;--link:#5185BD;--soft:#F4F4F7;--tile:#E4E7EC}
body{margin:0;background:var(--dark)}
html{scroll-behavior:smooth}

/* 열린 시트: 어두운 배경 위에 흰 시트가 덮인 모양 */
.page{background:var(--dark);margin-bottom:var(--fh)}
.bar{position:sticky;top:0;z-index:20;height:52px;display:flex;align-items:center;justify-content:flex-end;padding:0 max(20px,env(safe-area-inset-right,0px)) 0 20px;background:var(--dark)}
.x{display:grid;transition:background .3s cubic-bezier(.16,1,.3,1),transform .3s;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;transition:background .2s}
.x:hover{background:rgba(255,255,255,.16)}
.x svg{width:18px;height:18px}
.sheet{margin:0 max(21px,env(safe-area-inset-left,0px)) 0;background:#fff;border-radius:28px 28px 0 0;padding:40px 24px 96px}
.in{width:100%;max-width:1232px;margin-inline:auto;display:flex;flex-direction:column;gap:108px}
.col{width:100%;max-width:1195px;margin-inline:auto}

/* 상단 소개 */
.d-head{display:flex;flex-direction:column;gap:48px}
.d-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:0 4px}
.d-t{display:flex;flex-direction:column;gap:16px}
.d-title{font-size:clamp(42px,4.2vw,60px);line-height:1.02;font-weight:600;letter-spacing:-.06em;color:var(--ink)}
.d-sub{font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.tags span{font-size:14px;line-height:1.4;color:var(--mute);background:#F1F2F6;border-radius:999px;padding:7px 16px}
.period{font-size:16px;line-height:1.5;color:var(--mute);padding-bottom:6px}

/* 이미지 카드 */
.media{position:relative;width:100%;aspect-ratio:1232/894;border-radius:28px;background:var(--tile);overflow:hidden}
.media img,.sl-c img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.16))}
.ph-d{position:absolute;inset:0;display:grid;place-content:center;gap:6px;padding:24px;text-align:center;font-size:13px;line-height:1.5;color:#8B8FA8}
.ph-d b{font-size:15px;font-weight:600;color:#6F738E}
.ph-d[hidden]{display:none!important}

/* 개요 */
.ov{display:grid;grid-template-columns:minmax(0,660px) minmax(0,395px);justify-content:space-between;gap:40px 48px;align-items:start}
.ov h2,.rs h2,.rt h2,.lk h2{text-align:left;font-size:36px;line-height:1.3;font-weight:600;letter-spacing:-.03em;margin-bottom:20px}
.ov p{font-size:18px;line-height:1.5;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.info{display:flex;flex-direction:column;gap:26px;background:var(--soft);border-radius:28px;padding:34px 32px}
.info b{display:block;font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.06em;color:var(--ink);margin-bottom:6px}
.info span{display:block;font-size:16px;line-height:1.6;letter-spacing:-.02em;color:var(--mute)}

/* 번호 섹션 */
.d-sec h3{font-size:18px;line-height:1.4;font-weight:700;color:var(--ink);margin-bottom:34px}
.subs{display:flex;flex-direction:column;gap:12px;max-width:880px}
.subs h4{font-size:16px;line-height:1.5;font-weight:700;color:var(--mute);margin:0}
.subs p{font-size:16px;line-height:1.6;color:var(--mute);text-wrap:pretty}
.subs h4+p{margin-top:2px}
.cap{margin:30px 0 0;padding-left:20px;border-left:1px solid #D9D9E2;font-size:16px;line-height:1.8;font-style:italic;color:#999}
.d-sec .media,.d-sec .slider{margin-top:40px}

/* 슬라이더 */
.slider{position:relative}
.sl-v{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-inline:max(0px,calc((100% - 1019px)/2));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sl-v::-webkit-scrollbar{display:none}
.sl-c{position:relative;flex:0 0 min(1019px,100%);aspect-ratio:1019/700;border-radius:28px;background:var(--tile);overflow:hidden;scroll-snap-align:center}
.sl-n{display:flex;justify-content:flex-end;gap:12px;padding:32px 56px 0}
.sl-n button{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#E7E3D9;color:#8E8878;transition:background .2s,opacity .2s}
.sl-n button:hover{background:#DAD5C8}
.sl-n button[disabled]{opacity:.45;cursor:default}
.sl-n svg{width:14px;height:14px}

/* 성과 */
.rs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,563px);gap:48px 40px;align-items:start}
.rs-l{position:sticky;top:124px}
.rs-l p{font-size:16px;line-height:1.6;color:var(--ink)}
.rs-r{display:flex;flex-direction:column;gap:44px;padding-top:24px}
.rcd{position:sticky;top:var(--stk,124px);display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;padding:36px 32px;background:var(--soft);border-radius:28px;box-shadow:0 14px 40px rgba(40,40,70,.10),0 1px 3px rgba(40,40,70,.06);transform:rotate(var(--r,-5deg))}
.rcd:nth-child(2){--r:5deg}.rcd:nth-child(3){--r:-5deg}.rcd:nth-child(4){--r:5deg}
.rcd .n{font-size:60px;line-height:.96;font-weight:400;letter-spacing:-.06em;color:var(--blue2);margin-bottom:14px}
.rcd b{display:block;font-size:16px;line-height:1.5;font-weight:700;color:var(--ink)}
.rcd p{font-size:16px;line-height:1.6;color:var(--mute);margin-top:2px;text-wrap:pretty}
.rcd i{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#fff;box-shadow:0 2px 8px rgba(40,40,70,.10);color:var(--ink)}
.rcd i svg{width:16px;height:16px}

/* 회고 + 프로필 */
.rt{display:grid;grid-template-columns:minmax(0,660px) minmax(0,395px);justify-content:space-between;gap:48px;align-items:start}
.rt-l p{font-size:16px;line-height:1.65;color:var(--mute);text-wrap:pretty}
.pf{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:var(--soft);border-radius:28px;padding:40px 32px 36px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 0 0 1px #EBEBF1}
.pf .av{position:relative;width:165px;height:165px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#FFE3A3,#FFB8A8);border:4px solid #fff;box-shadow:0 14px 30px rgba(46,46,56,.14)}
.pf .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf .av svg{position:absolute;left:11%;bottom:0;width:78%;height:auto}
.pf b{font-size:16px;line-height:1.3;font-weight:600;color:#8A8AA3;margin-top:6px}
.pf em{font-style:normal;font-size:14px;line-height:1.3;color:#A5A5BA;margin-top:-10px}
.pf p{font-size:14px;line-height:1.7;color:var(--mute);margin:10px 0 8px;max-width:300px;text-wrap:pretty}

/* 링크 */
.lk h2{margin-bottom:26px}
.lk h5{margin:0 0 6px;font-weight:400;font-size:14px;line-height:1.6;color:var(--mute)}
.lk ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:6px}
.lk a{font-size:14px;line-height:1.6;color:var(--link)}
.lk a:hover{text-decoration:underline}
.lk small{display:block;font-size:14px;line-height:1.7;color:var(--mute)}

/* Selected work */
.sel .sec-h{margin-bottom:32px}

@media(max-width:1000px){
  .ov,.rt,.rs{grid-template-columns:minmax(0,1fr)}
  .info{max-width:none}
  .rs-r{padding-top:8px}
  .rs-l{position:static}
  .in{gap:84px}
}
@media(max-width:810px){
  .wgrid{grid-template-columns:minmax(0,1fr)}
  .w2{grid-column:auto}
  .wc{height:440px}
  .sheet{padding:28px 14px 72px}
  .sl-n{padding:24px 16px 0}
  .sl-v{gap:14px;padding-inline:0}
  .sl-c{flex-basis:100%}
  .media,.sl-c{border-radius:20px}
  .rs-r{gap:36px}
  .rcd{--stk:84px}
  .rcd{min-height:240px;padding:28px 22px}
  .rcd .n{font-size:48px}
}
@media(max-width:620px){
  h2{font-size:30px}
  .ov h2,.rs h2,.rt h2,.lk h2{font-size:28px}
  .sheet{margin-inline:8px}
  .d-top{align-items:flex-start}
  .d-sub{font-size:18px}
  .scene{height:150px}
  .foot-in{padding-bottom:150px}
  .made{left:50%;transform:translateX(-50%);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .sl-v{scroll-behavior:auto}
  .rcd{position:relative;top:auto;transform:none}
}

/* ===== 스크롤 인터랙션 ===== */
.prog{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .35s cubic-bezier(.16,1,.3,1)}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1);transition-delay:var(--dl,0s);will-change:opacity,transform}
.js .rv.on{will-change:auto}
.js .rv.on{opacity:1;transform:none}
.d-head .media img{translate:0 var(--py,0px);transition:translate .6s cubic-bezier(.16,1,.3,1)}
.js .sl-c{transform:scale(.93);opacity:.55;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s cubic-bezier(.16,1,.3,1)}
.js .sl-c.cur{transform:none;opacity:1}
.js .wc.rv{transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .sl-c{opacity:1;transform:none}
  .d-head .media img{translate:none}
}

.x:hover{transform:rotate(90deg)}
.sl-n button{transition:background .3s,opacity .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.sl-n button:not([disabled]):hover{transform:scale(1.1)}
.sl-v{cursor:grab}.sl-v.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.sl-v.drag .sl-c{pointer-events:none}

/* 푸터 장면(메인과 동일) */
.rg{animation:sway 20s ease-in-out infinite alternate}
.rg1{--sx:-10px;animation-duration:26s}.rg2{--sx:14px;animation-duration:22s}.rg3{--sx:-18px;animation-duration:18s}.rg4{--sx:22px;animation-duration:15s}.rg5{--sx:-26px;animation-duration:12s}
@keyframes sway{from{transform:translateX(0)}to{transform:translateX(var(--sx,12px))}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.hearts rect{animation:hb 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.hearts g:nth-child(2) rect{animation-delay:.25s}
.hearts g:nth-child(3) rect{animation:blinkh 3.4s steps(1) infinite}
@keyframes hb{0%,60%,100%{transform:none}70%{transform:scale(1.22)}80%{transform:scale(.94)}}
@keyframes blinkh{0%,70%,100%{opacity:1}74%,82%{opacity:0}78%,86%{opacity:1}}
.flag{transform-box:fill-box;transform-origin:left center;animation:wave 1.6s ease-in-out infinite alternate}
@keyframes wave{from{transform:scaleX(1) skewY(0)}to{transform:scaleX(.78) skewY(7deg)}}

/* 확장: 목록·리드 */
.subs ul{margin:2px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.subs li{position:relative;padding-left:16px;font-size:16px;line-height:1.6;color:var(--mute)}
.subs li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:1px;background:var(--accent)}
.subs p+p,.rt-l p+p{margin-top:10px}
.lead{font-size:16px;line-height:1.6;color:var(--ink);margin:-14px 0 26px;max-width:880px}
.d-sec h3.ph{display:flex;align-items:center;gap:8px}
.lk .link-row{margin:0 0 14px}
.plk{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}.plk a{font-size:14px;line-height:1.6;color:var(--link)}.plk a:hover{text-decoration:underline}
/* ===== 시안 D: 게이미피케이션 ===== */
:root{--f-px:'Press Start 2P',ui-monospace,SFMono-Regular,Menlo,monospace}
.sh svg text{font-family:var(--f-body)}
.sh{translate:var(--tx,0px) calc(var(--ty,0px) + var(--sy,0px) * var(--k,0))}
.s-quest{--w:clamp(170px,16.5vw,236px);left:6%;bottom:7%;--a:.55s}
.s-ach{--w:clamp(210px,21vw,296px);right:3.2%;top:14%;--a:.4s}
.s-hud{right:15%}
/* 히어로 */
.ps{font:400 11px/1 var(--f-px);letter-spacing:.14em;color:var(--accent);animation:psb 1.1s steps(2) infinite;margin-bottom:-26px}
@keyframes psb{50%{opacity:.15}}
@property --pct{syntax:'<number>';inherits:false;initial-value:0}
.aring{position:relative;width:196px;height:196px;border-radius:50%;display:grid;place-items:center;--pct:0;background:conic-gradient(var(--accent) calc(var(--pct) * 1%),#DCE3F0 0);animation:expfill 2.6s cubic-bezier(.2,.8,.2,1) .7s forwards;margin-bottom:6px}
@keyframes expfill{to{--pct:74}}
.aring .avatar{margin:0}
.lvb{z-index:3;position:absolute;right:-2px;bottom:6px;display:grid;place-items:center;min-width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;border:3px solid #fff;font:400 9px/1 var(--f-px);box-shadow:0 8px 18px rgba(30,30,50,.28);animation:lvpop .7s cubic-bezier(.3,1.6,.5,1) 2.6s both}
@keyframes lvpop{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.me .lvb{color:#fff;font:400 9px/1 var(--f-px)}
.chips{margin-top:2px;font-size:13px;color:var(--mute);display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;align-items:center}
.chips em{font:400 9px/1 var(--f-px);font-style:normal;color:var(--accent);margin-right:2px}
.chips i{width:4px;height:4px;border-radius:50%;background:#C6CBD9}
.cn{position:absolute;z-index:3;width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;animation:cnb 2.6s ease-in-out infinite alternate;animation-delay:var(--dl,0s);filter:drop-shadow(0 8px 10px rgba(46,123,255,.25));transition:transform .2s}
.cn svg{display:block;width:100%;height:100%}
.cn:hover{transform:scale(1.25) rotate(12deg)}
@keyframes cnb{from{translate:0 -6px}to{translate:0 8px}}
.cn.got{pointer-events:none;animation:cgot .6s ease-in forwards}
@keyframes cgot{to{transform:translateY(-60px) scale(.2);opacity:0}}
/* HUD */
.hud{position:fixed;z-index:55;top:calc(16px + env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:999px;background:rgba(46,46,56,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;box-shadow:0 12px 30px rgba(30,30,50,.22),inset 0 0 0 1px rgba(255,255,255,.12)}
.hud-st{display:flex;align-items:baseline;gap:6px;font:400 9px/1 var(--f-px)}
.hud-st i{font-style:normal;color:rgba(255,255,255,.6)}
.hud-st b{font-size:13px;color:#fff;display:inline-block;min-width:8px;text-align:center}
.hud-st span{color:rgba(255,255,255,.5)}
.hud-xp{width:84px;height:7px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.hud-xp i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#5C9BFF,#8DBBFF);border-radius:4px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hud-coin{display:flex;align-items:center;gap:6px;font:400 11px/1 var(--f-px)}
.hud-coin svg{width:18px;height:18px}
.hud.bump .hud-coin{animation:bump .4s ease}
@keyframes bump{40%{transform:scale(1.35)}}
.hud-st b.sw{animation:swp .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes swp{from{transform:translateY(-8px) scale(1.6);color:#8DBBFF}}
/* 러너 (스크롤 진행) */
.runner{position:fixed;left:0;right:0;bottom:0;height:64px;z-index:45;pointer-events:none;--rk:rgba(46,46,56,.3)}
body.on-dark .runner{--rk:rgba(255,255,255,.4)}
.rtrack{position:absolute;left:20px;right:20px;bottom:12px;border-top:2px dashed var(--rk)}
.rplayer{position:absolute;bottom:12px;left:calc(20px + (100% - 80px) * var(--rp,0));width:35px;height:38px;transition:left .25s linear}
.rplayer svg{display:block;width:100%;height:100%}
.rplayer .f2{display:none}
.rplayer.run .f1{animation:f1 .32s steps(1) infinite}.rplayer.run .f2{display:block;animation:f2 .32s steps(1) infinite}
@keyframes f1{50%{visibility:hidden}}@keyframes f2{0%{visibility:hidden}50%{visibility:visible}}
.rplayer.back svg{transform:scaleX(-1)}
.rplayer.run svg{animation:hop .32s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-3px)}}
.rplayer.back.run svg{animation:none}
.rc{position:absolute;bottom:34px;left:calc(20px + (100% - 80px) * var(--cp) + 14px);width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 2.5px #fff,0 0 0 2px var(--accent);animation:rcf 1.6s ease-in-out infinite alternate}
@keyframes rcf{from{translate:0 0}to{translate:0 -4px}}
.rc.got{animation:rcg .6s ease-out forwards}
@keyframes rcg{to{translate:0 -30px;opacity:0;scale:.3}}
.rflag{position:absolute;right:14px;bottom:12px;width:24px;height:34px}
.rfw{transform-box:fill-box;transform-origin:left center;animation:wave 1.4s ease-in-out infinite alternate}
@keyframes wave{from{transform:scaleX(1)}to{transform:scaleX(.7)}}
.plus1{position:fixed;z-index:60;font:400 10px/1 var(--f-px);color:var(--accent);pointer-events:none;animation:p1 .9s ease-out forwards;text-shadow:0 2px 0 #fff}
@keyframes p1{to{transform:translateY(-34px);opacity:0}}
.made{bottom:calc(40px + env(safe-area-inset-bottom,0px))!important}
/* 스테이지 배너 */
.banner{position:fixed;left:0;right:0;top:34%;z-index:70;pointer-events:none;display:grid;justify-items:center;gap:10px}
.banner::before{content:"";position:absolute;left:0;right:0;top:50%;height:150px;margin-top:-75px;background:linear-gradient(90deg,rgba(46,123,255,0),rgba(46,123,255,.92) 18%,rgba(46,123,255,.92) 82%,rgba(46,123,255,0));transform:skewY(-3deg) scaleY(0);animation:band 2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes band{0%{transform:skewY(-3deg) scaleY(0)}14%,78%{transform:skewY(-3deg) scaleY(1)}100%{transform:skewY(-3deg) scaleY(0)}}
.banner b{position:relative;font:400 clamp(30px,5.4vw,64px)/1 var(--f-px);color:#fff;text-shadow:4px 4px 0 #1B4DB0;animation:bt 2s cubic-bezier(.2,.8,.2,1) forwards}
.banner span{position:relative;font:400 clamp(11px,1.5vw,16px)/1.4 var(--f-px);color:#DCE9FF;letter-spacing:.2em;animation:bt 2s cubic-bezier(.2,.8,.2,1) .06s forwards}
@keyframes bt{0%{opacity:0;transform:translateX(-80px) scale(1.2)}16%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateX(80px)}}
/* 업적 토스트 */
.toasts{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:78px;z-index:65;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:rgba(46,46,56,.94);color:#fff;box-shadow:0 18px 40px rgba(20,20,40,.3);animation:ti 3.8s cubic-bezier(.2,.8,.2,1) forwards}
.toast svg{width:34px;height:34px;flex:none;padding:6px;border-radius:50%;background:var(--accent)}
.toast i{display:block;font:400 8px/1.4 var(--f-px);font-style:normal;color:#8DBBFF;letter-spacing:.08em}
.toast b{display:block;font-size:14px;font-weight:600;line-height:1.4}
@keyframes ti{0%{opacity:0;transform:translateX(-40px)}8%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-30px)}}
/* 잠금 해제 */
.lockv{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:12px;background:rgba(214,219,229,.92);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:opacity .6s ease .15s;font:400 10px/1 var(--f-px);letter-spacing:.16em;color:#4A4D63}
.lockv svg{width:54px;height:54px;overflow:visible}
.lockv .shk{transform-box:fill-box;transform-origin:100% 100%;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.lockv.open .shk{transform:translateY(-7px) rotate(24deg)}
.lockv.open{opacity:0;pointer-events:none}
.lockv.open svg{animation:lkp .5s ease}
@keyframes lkp{40%{transform:scale(1.3)}}
.pt{position:fixed;z-index:80;width:9px;height:9px;border-radius:2px;pointer-events:none;animation:ptb .9s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes ptb{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
/* About: RPG 대화창 */
.dlg{position:relative;width:100%;max-width:980px;margin-inline:auto;padding:46px clamp(22px,4vw,52px) 44px;background:#fff;border:3px solid var(--ink);border-radius:20px;box-shadow:7px 7px 0 var(--ink)}
.dlg .np{position:absolute;left:26px;top:-17px;padding:8px 16px 7px;background:var(--accent);color:#fff;border:3px solid var(--ink);border-radius:999px;font:400 10px/1 var(--f-px);letter-spacing:.1em}
.dlg::after{content:"";position:absolute;right:24px;bottom:16px;border:8px solid transparent;border-top:11px solid var(--accent);animation:psb .9s steps(2) infinite}
.dlg .lead{margin:0 auto}
/* Skills / 경력 / Articles 게임 UI */
.skb{position:absolute;z-index:3;top:26px;right:30px;padding:9px 13px 8px;border-radius:999px;background:var(--ink);color:#fff;font:400 8px/1 var(--f-px);letter-spacing:.1em;opacity:0;transform:scale(.4) rotate(-12deg)}
.sk.on .skb{animation:skp .7s cubic-bezier(.3,1.6,.5,1) .15s forwards}
@keyframes skp{to{opacity:1;transform:none}}
.qb{display:inline-block;margin-left:10px;padding:5px 8px 4px;border-radius:6px;font:400 8px/1 var(--f-px);font-style:normal;letter-spacing:.06em;vertical-align:2px;white-space:nowrap}
.qb.clr{background:rgba(46,46,56,.08);color:#676783}
.qb.ing{background:var(--accent);color:#fff;animation:psb 1.2s steps(2) infinite}
.xi.open .qb.clr{background:var(--accent);color:#fff}
.rar{position:absolute;z-index:2;top:12px;left:12px;padding:7px 10px 6px;border-radius:7px;font:400 8px/1 var(--f-px);letter-spacing:.08em;background:rgba(255,255,255,.9);color:#4A4D63;box-shadow:0 4px 10px rgba(30,30,50,.12)}
.rar.r2{background:var(--accent);color:#fff}
.rar.r3{background:linear-gradient(135deg,#FFD66B,#FFAA2B);color:#4A3200}
.ac .at::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .8s ease}
.ac:hover .at::after{left:130%}
/* 푸터 */
.cont{display:flex;align-items:baseline;gap:14px;font:400 11px/1 var(--f-px);letter-spacing:.14em;color:#B9C7E6}
.cont b{font-size:30px;color:#fff;min-width:34px;text-shadow:0 0 18px rgba(46,123,255,.9)}
.cont.over b{color:#FF6A5C;text-shadow:none}
@media(max-width:810px){
  .hud{top:auto;bottom:70px;right:12px;padding:9px 12px;gap:10px}
  .hud-st,.hud-xp{display:none}
  .toasts{bottom:122px}
  .s-quest,.s-ach{display:none}
  .cn{transform:scale(.85)}
  .dlg{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){.aring{animation:none;--pct:74}.lvb{animation:none}.ps{animation:none}}

/* Skills: 게임 스킬 UI */
.sk .qi{position:relative;width:64px;height:64px;border-radius:16px;background:linear-gradient(160deg,#2E3A66,#1B2243)!important;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--sc,#2E7BFF),0 14px 26px rgba(30,60,160,.28)}
.sk .qi svg{stroke:#fff;width:38px;height:38px}
.qi .slv{position:absolute;right:-12px;bottom:-10px;padding:5px 7px 4px;border-radius:6px;background:var(--sc,#2E7BFF);color:#fff;font:400 8px/1 var(--f-px);letter-spacing:.04em;box-shadow:0 0 0 2px #fff}
.sk-l .tp{display:flex;align-items:center;gap:22px}
.sk-l .tp .nm{font:400 9px/1.7 var(--f-px);letter-spacing:.08em;color:var(--sc,#2E7BFF)}
.sk-l .tp .nm b{display:block;font:700 15px/1.4 var(--f-body);letter-spacing:0;color:var(--ink)}
.stats{display:grid;gap:9px;margin-top:18px;max-width:340px}
.st{display:grid;grid-template-columns:70px 1fr 26px;align-items:center;gap:10px;font-size:12px;color:var(--mute)}
.st i{display:block;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,#DCE3F0 0 6px,transparent 6px 8px);position:relative;overflow:hidden}
.st i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--sc,#2E7BFF) 0 6px,transparent 6px 8px);transform-origin:left;transform:scaleX(0);clip-path:inset(0 calc(100% - var(--v) * 1%) 0 0);transition:transform 1s cubic-bezier(.2,.8,.2,1) .4s}
.sk.on .st i::after{transform:scaleX(1)}
.st em{font:400 8px/1 var(--f-px);font-style:normal;color:var(--ink);text-align:right}
.sk .tech>svg{display:none}
.sk .tech{flex-direction:column;align-items:flex-start;gap:20px;margin-top:10px}
.sk-l{gap:34px!important}
.stats{margin-bottom:6px}
.sk .tech b{display:block;font:400 8px/1 var(--f-px);letter-spacing:.1em;color:var(--mute)}
.sk .tech .eq{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.sk .tech .eq u{text-decoration:none;display:inline-block;padding:7px 10px 6px;border-radius:8px;background:#EEF2FB;box-shadow:inset 0 0 0 1.5px #D3DDF3;font-size:12px;font-weight:600;color:var(--ink);transition:transform .2s,background .2s,color .2s}
.sk .tech .eq u:hover{transform:translateY(-3px);background:var(--sc,#2E7BFF);color:#fff;box-shadow:none}
.sk-r{background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.55),transparent 55%),linear-gradient(145deg,var(--g1),var(--g2))!important}
.sk-r::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 85%);mask-image:radial-gradient(circle at 50% 50%,#000,transparent 85%)}
.sk-r .hudc{position:absolute;z-index:2;left:16px;top:16px;padding:8px 11px 7px;border-radius:8px;background:rgba(27,34,67,.88);color:#fff;font:400 8px/1 var(--f-px);letter-spacing:.1em}
.sk-r .cdr{position:absolute;z-index:2;right:16px;bottom:16px;width:50px;height:50px;border-radius:50%;background:conic-gradient(var(--sc,#2E7BFF) var(--cd,0%),rgba(27,34,67,.18) 0);display:grid;place-items:center;animation:cdr 4.5s linear infinite}
.sk-r .cdr::after{content:"";width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9)}
.sk-r .cdr span{position:absolute;z-index:1;font:400 8px/1 var(--f-px);color:var(--ink)}
@property --cd{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes cdr{to{--cd:100%}}
.sk.on .qi{animation:qipop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes qipop{from{transform:scale(.4) rotate(-14deg)}to{transform:none}}

/* 히어로: 블루 계열 */
.hero-bg{background:radial-gradient(46% 42% at 50% 40%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),radial-gradient(38% 40% at 8% 16%,rgba(176,206,255,.65),rgba(176,206,255,0) 70%),radial-gradient(40% 42% at 94% 86%,rgba(190,214,255,.6),rgba(190,214,255,0) 70%)}
.aring{background:conic-gradient(from 0deg,#2E7BFF,#1E4FD8 calc(var(--pct) * 1%),#DCE3F0 0)}
.chips em{color:#2E7BFF}
.ps{background:none;color:var(--accent)}
.cn{filter:drop-shadow(0 8px 10px rgba(46,123,255,.22))}

.tg{position:absolute;inset:0;z-index:2;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:18px 16px;padding:56px 26px 70px}
.tl{display:grid;justify-items:center;gap:9px;width:104px;animation:tlf 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.7s)}
@keyframes tlf{from{translate:0 -5px}to{translate:0 6px}}
.ti{display:grid;place-items:center;width:84px;height:84px;border-radius:22px;background:#fff;color:var(--sc,#2E7BFF);box-shadow:0 14px 28px rgba(30,60,160,.18),inset 0 0 0 1.5px rgba(46,123,255,.14);transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.ti svg{width:44px;height:44px}
.ti img{width:56px;height:56px;object-fit:contain}
.ti.has svg{display:none}
.tl:hover .ti{transform:translateY(-8px) rotate(-6deg) scale(1.08);box-shadow:0 22px 34px rgba(30,60,160,.28),inset 0 0 0 2px var(--sc,#2E7BFF)}
.tl span{font-size:12px;font-weight:600;color:#1B2243;text-align:center;line-height:1.3}
.tg.n5 .tl{width:96px}.tg.n5 .ti{width:76px;height:76px}
@media(max-width:810px){.sk-r{min-height:330px!important}.tg{padding:56px 14px 66px;gap:10px 8px}.tl{width:88px}.ti{width:68px;height:68px;border-radius:18px}.ti svg{width:36px;height:36px}}
/* ===== 상세 페이지: 시안 D 게임 UI + UI 다듬기 ===== */
/* HUD는 닫기(X) 버튼과 겹치지 않게 왼쪽 위로 */
.hud{right:auto;left:max(20px,env(safe-area-inset-left,0px));top:8px;padding:9px 16px}
.bar{z-index:50}
.np2{display:block;font:400 10px/1 var(--f-px);letter-spacing:.18em;color:var(--accent);animation:psb 1.1s steps(2) infinite;margin-bottom:2px}
.d-title{margin-top:2px}
.d-head .media{box-shadow:inset 0 0 0 1px rgba(46,46,56,.06)}
/* 퀘스트 */
.qn{display:inline-flex;align-items:center;gap:10px;font:400 10px/1 var(--f-px);letter-spacing:.14em;color:var(--accent);margin-bottom:16px}
.qn::after{content:"CLEAR";padding:6px 8px 5px;border-radius:6px;background:rgba(46,123,255,.1);color:var(--accent);font-size:8px;letter-spacing:.08em;opacity:0;transform:scale(.5) rotate(-10deg);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.d-sec.done .qn::after{opacity:1;transform:none}
.d-sec h3{font-size:clamp(24px,2.6vw,32px);line-height:1.3;font-weight:600;letter-spacing:-.04em;margin-bottom:30px}
.subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px;max-width:none;counter-reset:sb}
.subs>div{background:var(--soft);border-radius:22px;padding:26px 26px 30px;box-shadow:inset 0 0 0 1px #EBEBF1;transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s}
.subs>div:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1.5px #BFD3F7,0 16px 30px rgba(46,90,200,.10)}
.subs h4{counter-increment:sb;font-size:17px;line-height:1.45;color:var(--ink);margin-bottom:8px}
.subs h4::before{content:counter(sb,decimal-leading-zero);display:block;font:400 9px/1 var(--f-px);letter-spacing:.1em;color:var(--accent);margin-bottom:12px}
/* 개요 정보 패널 */
.info{position:relative;padding-top:56px;background:#fff;box-shadow:0 0 0 3px var(--ink),6px 6px 0 var(--ink);border-radius:20px}
.info::before{content:"QUEST INFO";position:absolute;left:24px;top:-1px;transform:translateY(-50%);padding:9px 14px 8px;border-radius:999px;background:var(--accent);color:#fff;box-shadow:0 0 0 3px var(--ink);font:400 9px/1 var(--f-px);letter-spacing:.1em}
.info b{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--accent);margin-bottom:6px}
.info span{font-size:15px;color:var(--ink)}
/* 성과 보상 카드 */
.rcd .rw{position:absolute;left:28px;top:24px;font:400 8px/1 var(--f-px);font-style:normal;letter-spacing:.1em;color:var(--accent);padding:7px 9px 6px;border-radius:6px;background:rgba(46,123,255,.1)}
.rcd .n{color:var(--accent)}
/* 회고: RPG 대화창 */
.rt-l.dlg{max-width:none;margin:0;padding:48px clamp(22px,3vw,40px) 40px}
.rt-l.dlg h2{margin-bottom:16px}
.rt-l.dlg::after{display:block}
/* 링크: 아이템 버튼 */
.lk h2::before{content:"ITEMS";display:block;font:400 10px/1 var(--f-px);letter-spacing:.16em;color:var(--accent);margin-bottom:14px}
.lk ul{flex-direction:row;flex-wrap:wrap;gap:10px}
.lk a{display:inline-flex;align-items:center;padding:11px 18px;border-radius:12px;background:var(--soft);box-shadow:inset 0 0 0 1.5px #D3DDF3;font-weight:600;color:var(--ink);transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .2s,color .2s}
.lk a:hover{text-decoration:none;transform:translateY(-3px);background:var(--accent);color:#fff;box-shadow:none}
.plk a{display:inline-flex;padding:10px 16px;border-radius:12px;background:var(--soft);box-shadow:inset 0 0 0 1.5px #D3DDF3;font-weight:600;color:var(--ink)}
.plk a:hover{text-decoration:none;background:var(--accent);color:#fff}
/* 슬라이더 버튼 블루 */
.sl-n button{background:var(--ink);color:#fff}
.sl-n button:hover{background:var(--accent)}
.cap{border-left-color:var(--accent);font-style:normal}
/* Works: 메인(D)과 동일 */
#works{padding:0}
#works .wrap{max-width:none;padding:0}
@media(max-width:810px){
  .hud{left:12px;right:auto;bottom:70px;top:auto}
  .subs{grid-template-columns:minmax(0,1fr)}
  .info{margin-top:10px}
}

/* 프로필: 메인과 동일한 아바타(픽셀 ↔ 실사 호버, 경험치 링, LV 뱃지) */
.avatar{position:relative;width:180px;height:180px;border-radius:50%;overflow:hidden;background:linear-gradient(160deg,#E3EDFF,#A9C8FF);border:5px solid #fff;image-rendering:pixelated;box-shadow:0 18px 40px rgba(46,46,56,.18);margin-bottom:6px;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.avatar:hover{transform:rotate(-5deg) scale(1.06)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;image-rendering:pixelated}
.avatar .real{opacity:0;transition:opacity .45s ease;image-rendering:auto;image-rendering:-webkit-optimize-contrast;image-rendering:high-quality}
.avatar:hover .real,.avatar.show-real .real{opacity:1}
.avatar .slot{transition:opacity .45s ease}
.avatar:hover .slot,.avatar.show-real .slot{opacity:0}
.avatar .ph{position:absolute;inset:0;display:grid;place-items:end center}
.avatar svg{width:78%;height:auto;display:block}
.pf .aring{margin-bottom:0}
.pf .aring .avatar{margin:0}
.pf .lvb{right:6px;bottom:8px}
.js .pf:not(.on) .aring,.js .pf:not(.on) .lvb{animation-play-state:paused}
/* 스테이지 배너: 상세 페이지에서는 한결 차분하게 */
.banner::before{height:104px;margin-top:-52px}
.banner b{font-size:clamp(24px,4vw,46px);text-shadow:3px 3px 0 #1B4DB0}
.banner span{font-size:clamp(10px,1.2vw,13px)}

/* 이미지: 목업 이미지를 가득 채워 표시 (4:3) */
.media{aspect-ratio:16/10}
.sl-c{aspect-ratio:16/10}
.media img,.sl-c img{inset:0;width:100%;height:100%;object-fit:cover;filter:none}

/* Works 모바일: 이미지 비율대로 카드를 만들어 좌우가 잘리지 않게 */
@media(max-width:810px){
  .wc{height:auto;aspect-ratio:4/5}
  .wc.w2{aspect-ratio:4/3}
  .thumb{inset:0}
}
/* 성과 카드: REWARD 태그와 내용이 겹치지 않게 */
.rcd{padding-top:76px}
@media(max-width:810px){
  /* 모바일: 성과 카드가 겹쳐 쌓이지 않고 차례로 나열 */
  .rcd{position:relative;top:auto;min-height:0;--r:-1.6deg}
  .rcd:nth-child(2n){--r:1.6deg}
  .rs-r{gap:30px}
}

/* ===== 타이포 통일: 제목/본문의 크기·색·자간을 한 체계로 ===== */
.ov h2,.rs h2,.rt h2,.lk h2,.d-sec h3{font-size:clamp(26px,2.7vw,32px);line-height:1.35;font-weight:600;letter-spacing:-.035em;color:var(--ink);margin-bottom:22px}
.d-sec h3{margin-bottom:30px}
.ov p,.rs-l p,.rt-l p,.subs p,.rcd p,.subs li{font-size:16px;line-height:1.75;letter-spacing:-.01em;font-weight:400;color:var(--mute)}
.ov p+p,.rt-l p+p{margin-top:10px}
.subs h4,.rcd b{font-size:17px;line-height:1.5;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.info span{font-size:16px;line-height:1.6;letter-spacing:-.01em;color:var(--ink)}
.cap{font-size:15px;line-height:1.7;letter-spacing:-.01em;color:#8A8EA3}
.lk h5,.lk small{letter-spacing:-.01em}
.lead{font-size:16px;line-height:1.75;letter-spacing:-.01em;color:var(--ink)}
@media(max-width:620px){.ov h2,.rs h2,.rt h2,.lk h2,.d-sec h3{font-size:24px}}

/* 슬라이드: 장면 설명 + 번호/점 */
.sl-n{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px 22px;padding:26px max(0px,calc((100% - 1019px)/2)) 0;justify-content:stretch}
.sl-cap{grid-column:1;font-size:15px;line-height:1.6;letter-spacing:-.01em;color:var(--ink);font-weight:500;transition:opacity .25s;min-height:24px}
.sl-cap.sw{opacity:0}
.sl-dots{grid-column:2;display:flex;gap:8px;align-items:center}
.sl-dots .sl-cnt{margin-right:8px}
.sl-dots .dt{width:8px;height:8px;border-radius:999px;background:#C9D2E6;padding:0;transition:width .35s cubic-bezier(.3,1.4,.5,1),background .25s}
.sl-dots .dt.on{width:26px;background:var(--accent)}
.sl-b{grid-column:3;display:flex;gap:10px}
.sl-b button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;transition:background .25s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.sl-b button:hover{background:var(--accent);transform:scale(1.08)}
.sl-b svg{width:14px;height:14px}
.sl-cnt{font:400 11px/1 var(--f-px);letter-spacing:.06em;color:var(--mute)}
.sl-cnt b{color:var(--accent);font-weight:400}
@media(max-width:810px){
  .sl-n{grid-template-columns:minmax(0,1fr) auto;padding:20px 4px 0}
  .sl-cap{grid-column:1 / -1;order:-1}
  .sl-dots{grid-column:1}
  .sl-b{grid-column:2}
}
/* 다음 프로젝트 */
.nxt{margin-top:-24px}
.nextp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 28px;padding:30px clamp(22px,3vw,40px);border-radius:24px;background:var(--soft);box-shadow:inset 0 0 0 1.5px #D3DDF3;transition:background .3s,transform .4s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.nextp .nx-l{font:400 10px/1 var(--f-px);letter-spacing:.16em;color:var(--accent)}
.nextp .nx-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.nextp b{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.nextp em{font-style:normal;font-size:15px;color:var(--mute);letter-spacing:-.01em}
.nextp .nx-a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .35s cubic-bezier(.3,1.5,.5,1),background .25s}
.nextp .nx-a svg{width:18px;height:18px}
.nextp:hover{transform:translateY(-4px);background:#fff;box-shadow:0 0 0 3px var(--ink),6px 6px 0 var(--ink)}
.nextp:hover .nx-a{background:var(--accent);transform:translateX(4px)}
@media(max-width:620px){.nextp{grid-template-columns:minmax(0,1fr) auto}.nextp .nx-l{grid-column:1 / -1}}

/* 스크롤 이미지: 틀 안에서 긴 화면을 스크롤해 볼 수 있음 */
.scrollbox{position:relative;width:100%;aspect-ratio:16/10;border-radius:28px;background:var(--tile);overflow:hidden;margin-top:40px;box-shadow:inset 0 0 0 1px rgba(46,46,56,.06)}
.sc-in{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#9AA6C4 transparent}
.sc-in::-webkit-scrollbar{width:8px}.sc-in::-webkit-scrollbar-thumb{background:#9AA6C4;border-radius:8px}
.sc-in img{display:block;position:static;width:100%;height:auto;filter:none;inset:auto}
.sc-in .ph-d{position:absolute;inset:0}
.sc-hint{position:absolute;right:20px;bottom:18px;padding:9px 12px 8px;border-radius:999px;background:rgba(46,46,56,.88);color:#fff;font:400 9px/1 var(--f-px);letter-spacing:.12em;pointer-events:none;animation:psb 1.2s steps(2) infinite;transition:opacity .4s}
.scrollbox.sc{} .scrollbox.scrolled .sc-hint{opacity:0;animation:none}
@media(max-width:810px){.scrollbox{border-radius:20px;aspect-ratio:4/5}}

/* 4:3 목업 이미지 페이지 */
body.r43 .media,body.r43 .sl-c{aspect-ratio:4/3}

body.r43 .slider[style*="--r"] .sl-c{aspect-ratio:var(--r)}

/* 역할 한 줄: 아이콘 + 포인트 컬러 */
.rolel{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:16px!important;padding-top:14px;border-top:1px solid rgba(46,46,56,.1);font-size:14px;line-height:1.6;color:var(--mute)}
.rl-k{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent)}
.rl-k svg{width:15px;height:15px;align-self:center}
.rl-v b{font-weight:700;color:var(--accent)}
.rl-v i{font-style:normal;color:rgba(46,46,56,.3);margin:0 2px}