/* 상세페이지 공통 CSS — legacy/index.html의 <style> 블록 전체를 순서대로 무선별 추출 (build_keco.py) */
#home{display:none!important}

/* ═══ block ═══ */
#home{display:none!important}

/* ═══ block ═══ */
/* ============================================================
   FONTS  (로컬 — 같은 폴더의 fonts/ 안 woff2 파일 사용)
   영문 Montserrat / 한글 Pretendard
   ============================================================ */


/* ============================================================
   DESIGN TOKENS  (시안 기준)
   ============================================================ */
:root{
  --bg:#f8f8f8;
  --ink:#0b0524;
  --ink-2:#5b5b63;
  --ink-3:#b1afb8;
  --line:#e6e5df;
  --blue:#003ec4;
  --blue-sky:#55adff;
  --blue-soft:#e9f0ff;
  --cursor-blue:rgba(64,148,247,.85);
  --cursor-blue-soft:rgba(64,148,247,.24);
  --red:#e13939;
  --white:#ffffff;

  --font-en:'Montserrat','Pretendard',sans-serif;
  --font-ko:'Pretendard','Montserrat',sans-serif;

  /* 그리드: 12컬럼 / margin 20 / gutter 24 (1440 기준) */
  --margin:clamp(20px,3.4vw,48px);
  --gutter:24px;
  --maxw:1560px;
  --nav-h:84px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ko);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}

.en{font-family:var(--font-en)}
.wrap{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:var(--margin);padding-right:var(--margin);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .35s ease, color .35s ease, box-shadow .35s ease, transform .3s ease;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative;z-index:2}
.logo{
  font-family:var(--font-en);font-weight:600;
  font-size:24px;letter-spacing:-.01em;
}
nav{display:flex;align-items:center;gap:20px}
.nav-link{
  font-family:var(--font-en);font-weight:400;
  font-size:20px;letter-spacing:-.03em;
  padding:4px 12px;border-radius:4px;
  transition:background .2s,color .2s,opacity .2s;
}
.nav-link:hover{opacity:.6}
.nav-link.active{background:var(--ink);color:var(--white);opacity:1}
header.hide{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){header{transition:none}header.hide{transform:none}}


/* 홈(히어로)일 때는 흰색 글씨 오버레이 */
header.on-hero{color:var(--white)}
header.on-hero .nav-link.active{background:var(--white);color:var(--ink)}
header.scrolled{background:rgba(248,248,248,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
header.on-hero.scrolled{background:rgba(16,16,28,.35);backdrop-filter:blur(10px);box-shadow:none}
/* 상세 페이지: 이미지가 흰 배경이라 헤더도 흰색 계열(반투명) */
header.on-detail.scrolled{background:rgba(255,255,255,.72)}

.burger{display:none;flex-direction:column;gap:5px;padding:8px;position:relative;z-index:1100;touch-action:manipulation}
.burger span{width:24px;height:2px;background:currentColor;transition:.25s}
header.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.menu-open .burger span:nth-child(2){opacity:0}
header.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   VIEW SYSTEM
   ============================================================ */
.view{display:none;min-height:100vh;animation:fade .45s ease}
.view.active{display:block}
/* archive · about · contact : 헤더 아래 영역에서 수직 중앙 정렬 (상하 여백 동일) */
.view.vcenter.active{display:flex;align-items:center;padding-top:var(--nav-h)}
.view.vcenter .wrap{width:100%}
.view.vcenter .page-pad{padding-top:40px;padding-bottom:40px}
#about.view.vcenter.active{
  height:100dvh;min-height:0;align-items:flex-start;overflow:hidden;
}
#about .page-pad{padding-top:0;padding-bottom:0}
#about .wrap{height:100%;overflow:visible}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-pad{padding-top:calc(var(--nav-h) + 40px);padding-bottom:120px}

/* ============================================================
   HERO — Songhee's Archive (플로팅 오브젝트 + 말풍선)
   ============================================================ */
#home{position:relative;height:100vh;min-height:600px;overflow:hidden;
  background:linear-gradient(165deg,#bcc6f1 0%,#9daae8 55%,#8994da 100%)}
#home .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

.hero-title{
  position:absolute;left:50%;top:24%;transform:translateX(-50%);
  text-align:center;color:#fff;pointer-events:none;z-index:20;width:max-content;
}
.hero-title .script{
  font-family:'Ms Madi','Nanum Pen Script',cursive;font-weight:400;
  font-size:clamp(64px,6.4vw,128px);line-height:1.15;
}
.hero-title .line2{display:flex;align-items:flex-start;justify-content:center;gap:.08em;transform:translateX(4%);margin-top:-.15em}
.hero-title .archive{font-family:var(--font-ko);font-weight:300;letter-spacing:-.03em;font-size:clamp(30px,2.95vw,60px);line-height:1.2}
.hero-title .star{font-family:var(--font-en);font-weight:600;font-size:clamp(30px,2.95vw,60px);line-height:1.2}
.hero-title .sub{font-family:var(--font-ko);font-weight:400;font-size:clamp(13px,1.1vw,22px);margin-top:.9em;opacity:.95}

/* 오브젝트 */
.spot{
  position:absolute;left:var(--dx);top:var(--dy);width:var(--dw);
  cursor:pointer;animation:floatY var(--dur,6s) ease-in-out var(--delay,0s) infinite;
  will-change:transform;
}
.spot img{display:block;width:100%;user-select:none;-webkit-user-drag:none;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.spot.active{z-index:100}
.spot.active img,.spot:hover img{transform:scale(1.05)}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.2deg)}}

/* 이미지 파일이 없을 때: 파일명이 적힌 점선 원 */
.spot.missing img{display:none}
.spot.missing .ph2{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  border:2px dashed rgba(255,255,255,.7);border-radius:50%;color:#fff;
  font:12px/1.4 var(--font-ko);text-align:center;padding:10%;word-break:break-all;
}
.spot .ph2{display:none}

/* 말풍선 */
.bubble{
  position:absolute;padding:.7em 1.5em;
  background:rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.35);border-radius:60px;
  color:#17639d;font-family:var(--font-ko);
  font-size:clamp(13px,1.15vw,19px);line-height:1.35;
  white-space:nowrap;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
  /* --nx: 화면 밖으로 나갈 때 안쪽으로 미는 보정값(JS가 설정) */
  transform:translate(calc(var(--tx,0px) + var(--nx,0px)),var(--ty,0)) scale(.9);
  z-index:110;
}
.spot.active .bubble{opacity:1;transform:translate(calc(var(--tx,0px) + var(--nx,0px)),var(--ty,0)) scale(1)}
.side-right .bubble{left:88%;top:28%}
.side-left .bubble{right:88%;top:34%}
.side-top .bubble{bottom:94%;left:50%;--tx:-50%}
.side-bottom .bubble{top:94%;left:50%;--tx:-50%}

@media (prefers-reduced-motion: reduce){
  .spot{animation:none}
}

.hero-copyright{
  position:absolute;left:var(--margin);bottom:34px;z-index:20;
  color:#fff;font-family:var(--font-en);font-weight:500;
  font-size:14px;letter-spacing:.01em;opacity:.92;pointer-events:none;
}
/* 방문자 카운터 — 카피라이트 반대편(우측 하단) */
.hero-visits{
  position:absolute;right:var(--margin);bottom:34px;z-index:20;
  color:#fff;font-family:var(--font-en);font-weight:500;
  font-size:14px;letter-spacing:.04em;opacity:.92;pointer-events:none;
}
.hero-visits b{font-weight:700}

/* ============================================================
   WORK (list)
   ============================================================ */
.work-layout{display:grid;grid-template-columns:200px 1fr;gap:48px}
.cat-rail{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start;display:flex;flex-direction:column;gap:16px}
.cat-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-en);font-size:20px;font-weight:400;color:var(--ink);
  transition:opacity .2s;width:fit-content;
}
.cat-btn:hover{opacity:.55}
.cat-btn.active{color:var(--ink);font-weight:600}
.cat-count{
  font-family:var(--font-en);font-size:14px;font-weight:600;color:#fff;background:var(--red);
  border-radius:999px;padding:2px 6px;line-height:1.3;letter-spacing:.05em;
}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px var(--gutter)}  /* 일반(Projects): Featured보다 작게 4열 */
.work-card{cursor:pointer;display:flex;flex-direction:column}
.work-thumb{
  aspect-ratio:570/360;border-radius:12px;overflow:hidden;position:relative;
  box-shadow:inset 0 0 20px rgba(0,0,0,.06);
  transition:transform .35s ease, box-shadow .35s ease;
}
.work-card:hover .work-thumb{transform:translateY(-6px);box-shadow:inset 0 0 20px rgba(0,0,0,.06), 0 22px 40px -22px rgba(11,5,36,.4)}
.work-meta-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;gap:12px}
.work-year{font-family:var(--font-ko);color:var(--ink-3);font-size:clamp(12px,1.1vw,15px);letter-spacing:-.03em;line-height:1.5}
.work-name{font-family:var(--font-ko);font-size:clamp(12px,1.1vw,15px);font-weight:400;letter-spacing:-.03em;line-height:1.5;color:var(--ink);text-align:right}

/* ── Work 3단 구성: Featured(대형) / Projects(일반) / Etc.(소형) ── */
.work-tiers{display:flex;flex-direction:column;gap:60px}
.tier-label{
  display:flex;align-items:center;gap:8px;margin-bottom:18px;
  font-family:var(--font-en);font-size:14px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.tier-label .tier-star{color:var(--red)}
/* Featured: 웹 한 화면에 3개가 나란히 — 3열, 텍스트(eyebrow·이름·소개)로 강조 */
.work-grid.work-grid--featured{grid-template-columns:repeat(3,1fr);gap:40px var(--gutter)}
.work-card--featured .work-thumb{border-radius:14px}
.feat-meta{margin-top:12px}
.feat-left{display:flex;align-items:baseline;gap:10px}
.feat-eyebrow{font-family:var(--font-en);font-size:clamp(10px,.85vw,12px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.feat-right{margin-top:6px}
.feat-name{font-family:var(--font-ko);font-size:clamp(14px,1.25vw,17px);font-weight:600;letter-spacing:-.03em;line-height:1.4;color:var(--ink)}
.feat-sub{font-family:var(--font-ko);font-size:clamp(11px,.95vw,13px);color:var(--ink-3);letter-spacing:-.02em;line-height:1.55;margin-top:4px}
.work-grid.work-grid--etc{grid-template-columns:repeat(5,1fr);gap:24px 24px}
.work-grid--etc .work-thumb{border-radius:10px}
.work-grid--etc .work-year,.work-grid--etc .work-name{font-size:13px}

/* thumbnail placeholder themes (실제 이미지로 교체 가능) */
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph-label{font-family:var(--font-en);font-weight:600;font-size:clamp(15px,1.4vw,20px);letter-spacing:-.01em}
.t-blue{background:linear-gradient(135deg,#eaf0ff,#cdddff 60%,#a9c4ff);color:#27407e}
.t-glass{background:linear-gradient(135deg,#f0f3ff,#dde6ff);color:#3556b8}
.t-warm{background:linear-gradient(135deg,#f3ece6,#e7d9cd);color:#7a5a44}
.t-green{background:linear-gradient(135deg,#e4efe9,#cfe3d8);color:#356b53}
.t-ink{background:linear-gradient(135deg,#2a2a3a,#15151f);color:#cfd2e6}
.t-violet{background:linear-gradient(135deg,#ece9ff,#d6cdff);color:#4b3aa8}

/* ============================================================
   DETAIL (work / archive 공용)
   ============================================================ */
.back-btn{
  position:fixed;right:var(--margin);bottom:34px;z-index:40;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;
  padding:11px 20px;font-family:var(--font-en);font-size:15px;
  box-shadow:0 10px 28px -14px rgba(16,16,40,.5);
  transition:background .2s,transform .2s;
}
.back-btn:hover{background:#fff;transform:translateY(-3px)}
.detail{max-width:860px;margin:0 auto}
.detail-eyebrow{font-family:var(--font-en);font-size:13px;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;font-weight:600}
.detail-title{font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.18;margin:14px 0 10px;letter-spacing:-.02em}
.detail-sub{font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);margin-bottom:36px}
.meta-table{border-top:1px solid var(--ink);margin-bottom:48px}
.meta-row{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px}
.meta-row .k{font-family:var(--font-en);color:var(--blue);font-weight:600;font-size:13px;letter-spacing:.04em}
.detail-slot{
  border:1px dashed var(--ink-3);border-radius:14px;background:rgba(255,255,255,.4);
  min-height:340px;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ink-3);font-size:14px;padding:30px;margin-bottom:20px;line-height:1.7;
}
/* Work 상세: 헤더 바로 아래부터 상하 마진 없는 풀페이지 이미지 */
#work-detail,#archive-detail{background:#fff}
.detail-full{padding:var(--nav-h) var(--margin) 0}
.detail-full .work-shot{display:block;width:100%;max-width:1280px;margin:0 auto;height:auto}
.detail-empty{
  min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;color:var(--ink-2);font-size:15px;line-height:1.9;padding:40px;
}
.detail-empty b{color:var(--ink);font-family:var(--font-en);font-size:17px}
.detail-empty span{color:var(--ink-3);font-size:13px}

/* ============================================================
   BD3 HTML 상세 (#workDetail 안에 렌더)
   이미지: images/work/bd3/ · Figma 원본 텍스트 구조를 HTML로 재구성
   ============================================================ */
.detail-full.bd-host{padding-left:0;padding-right:0}
.bd{
  --bd-blue:#2b60ff;--bd-cornflower:#6c91ff;--bd-sky:#0088ff;--bd-sky-soft:#4fabff;
  --bd-peri:#7b9cff;--bd-violet:#5830ff;--bd-violet-soft:#9b83ff;
  --bd-blue-line:#c5e3ff;--bd-violet-line:#d8c5ff;--bd-output-line:#d7ebff;
  --bd-ink:#2e3845;--bd-body:#525252;--bd-base:#f9f9fb;
  position:relative;isolation:isolate;overflow-x:clip;line-height:1.55;color:var(--bd-ink);
  background-color:var(--bd-base);
  background-image:
    url('images/work/bd3/bg-blue-a.svg'),url('images/work/bd3/bg-violet-a.svg'),
    url('images/work/bd3/bg-blue-b.svg'),url('images/work/bd3/bg-violet-b.svg'),
    url('images/work/bd3/bg-blue-c.svg'),url('images/work/bd3/bg-violet-c.svg');
  background-repeat:no-repeat;
  background-position:center 5%,center 23%,center 41%,center 59%,center 77%,center 99%;
  background-size:max(1700px,132vw) auto,max(1700px,132vw) auto,max(1700px,132vw) auto,max(1700px,132vw) auto,max(1700px,132vw) auto,max(1700px,132vw) auto;
}
.bd img{max-width:100%;height:auto;display:block}
.bd-canvas{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--margin);position:relative}
/* 히어로: CSS 그라데이션 배경 + 누끼 오브젝트(우측), 카피 좌측 + 하단 스펙바 */
.bd-hero{
  position:relative;display:flex;flex-direction:column;
  height:clamp(612px,39.2vw,880px);
  padding:clamp(40px,3.6vw,64px) 0 clamp(22px,2.6vw,40px);
  background-color:#e7ebfa;
  background-image:
    radial-gradient(120% 95% at 80% -12%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(101deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.5) 52%, rgba(255,255,255,0) 61%),
    linear-gradient(101deg, rgba(255,255,255,0) 66%, rgba(255,255,255,.35) 71%, rgba(255,255,255,0) 77%),
    linear-gradient(180deg,#eff2fc 0%,#e5eafa 55%,#d7def7 100%);
}
.bd-hero-main{flex:1;display:flex;align-items:center}
.bd-hero-main,.bd-hero-meta-wrap{position:relative;z-index:1}
img.bd-hero-obj{
  position:absolute;right:clamp(20px,3.5vw,90px);bottom:0;z-index:0;
  height:min(96%,820px);width:auto;
  filter:drop-shadow(0 30px 44px rgba(43,96,255,.14))
}
.bd-hero-copy,.bd-hero-visual,.bd-planning-visual,.bd-meta dd{min-width:0}
.bd-hero-copy{max-width:min(43vw,620px)}
.bd-logo{width:120px;margin-bottom:26px}
.bd-hero h1{font-size:clamp(36px,4.8vw,62px);font-weight:700;letter-spacing:-0.015em;line-height:1.18;color:#111;word-break:keep-all}
.bd-title-line{display:block}
.bd-hero h1 em{font-family:var(--font-en);font-style:normal;font-weight:600;color:var(--bd-violet)}
.bd-hero-lead{margin-top:20px;max-width:620px;font-size:clamp(15px,1.4vw,18px);font-weight:500;line-height:1.62;color:var(--bd-violet);word-break:keep-all}
.bd-lead-line{display:inline}
.bd-lead-line+.bd-lead-line::before{content:" "}
.bd-hero-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0}
.bd-hero-tags li{
  font-family:var(--font-en);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(88,48,255,.55);padding:6px 12px;border-radius:999px;
  border:1px solid rgba(88,48,255,.14);background:rgba(255,255,255,.38)
}
.bd-meta{margin-top:36px;max-width:560px;padding:0;border-top:1px solid rgba(43,96,255,.26)} /* 박스 제거, 헤어라인 메타 리스트 */
.bd-meta div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:start;padding:11px 0;border-bottom:1px solid rgba(46,56,69,.08)}
.bd-meta dt{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--bd-violet-soft);text-transform:uppercase;line-height:21px}
.bd-meta dd{margin:0;font-size:14px;font-weight:600;line-height:1.5;color:var(--bd-body);word-break:keep-all}
/* 히어로 하단 가로 스펙바 (배경 위 글래스 카드) */
.bd-meta-bar{
  margin-top:clamp(24px,2.8vw,44px);max-width:none;display:grid;grid-template-columns:.75fr 1.75fr .95fr 1.15fr;
  border:1px solid rgba(255,255,255,.72);border-radius:16px;background:rgba(252,253,255,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 12px 32px rgba(43,96,255,.1);padding:4px 6px
}
.bd-meta-bar div{display:block;padding:16px 26px 14px;border-bottom:0}
.bd-meta-bar div+div{border-left:1px solid rgba(46,56,69,.1)}
.bd-meta-bar dt{margin-bottom:7px}
@media (max-width:1024px){
  .bd-meta-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-meta-bar div{padding:14px 20px 12px}
  .bd-meta-bar div+div{border-left:0}
  .bd-meta-bar div:nth-child(2n){border-left:1px solid rgba(46,56,69,.1)}
  .bd-meta-bar div:nth-child(-n+2){border-bottom:1px solid rgba(46,56,69,.08)}
}
@media (max-width:760px){
  .bd-meta-bar{grid-template-columns:1fr}
  .bd-meta-bar div{padding:12px 16px;border-bottom:1px solid rgba(46,56,69,.08)}
  .bd-meta-bar div:nth-child(2n){border-left:0}
  .bd-meta-bar div:last-child{border-bottom:0}
  .bd-meta-bar dt{margin-bottom:6px}
}
.bd-sec{padding:102px 0}
.bd-head{margin-bottom:48px}
.bd-label{font-family:var(--font-en);font-size:14px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--bd-peri)}
.bd-head h2{margin-top:12px;font-size:clamp(26px,3.5vw,40px);font-weight:700;letter-spacing:0;line-height:1.35;color:var(--bd-ink);word-break:keep-all}
.bd-head p{margin-top:16px;max-width:920px;font-size:clamp(14px,1.45vw,18px);font-weight:500;line-height:1.72;color:var(--bd-body);word-break:keep-all}
.bd-scope-zone{
  background:linear-gradient(180deg,rgba(249,249,251,0),rgba(197,227,255,.36) 20%,rgba(108,145,255,.22) 54%,rgba(216,197,255,.22) 78%,rgba(249,249,251,0));
}
.bd-scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.bd-scope-card{
  --tone:var(--bd-blue);--soft-tone:var(--bd-peri);--tone-line:var(--bd-blue-line);
  position:relative;border:1.5px solid var(--tone-line);border-radius:16px;background:rgba(255,255,255,.94);
  padding:60px 44px 44px;box-shadow:0 4px 16px rgba(0,0,0,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}
.bd-scope-card.tone-violet{--tone:var(--bd-violet);--soft-tone:var(--bd-violet-soft);--tone-line:var(--bd-violet-line)}
.bd-scope-card.tone-sky{--tone:var(--bd-sky);--soft-tone:var(--bd-sky-soft);--tone-line:var(--bd-output-line)}
.bd-card-no{
  position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;background:var(--tone);
  color:#fff;font-family:var(--font-en);font-size:16px;font-weight:700;
}
.bd-card-k{font-family:var(--font-en);font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1.1;text-align:center;color:var(--tone);text-transform:uppercase}
.bd-card-sub{margin-top:6px;text-align:center;font-size:16px;font-weight:700;color:var(--soft-tone);word-break:keep-all}
.bd-symbol-img{width:120px;height:120px;object-fit:contain;margin:30px auto 34px}
.bd-card-lead{margin:0 0 28px;padding:24px 0;border-top:1px solid #e5ebf1;border-bottom:1px solid #e5ebf1;font-size:17px;font-weight:700;line-height:1.65;color:var(--soft-tone);word-break:keep-all}
.bd-card-list{list-style:none;border-top:1px solid #e5ebf1}
.bd-card-lead+.bd-card-list{border-top:0}
.bd-card-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:20px 0 18px;border-bottom:1px solid #e5ebf1}
.bd-card-list li:last-child{border-bottom:0}
.bd-card-list li>img{width:24px;height:24px;margin-top:1px}
.bd-card-list li>div{min-width:0}
.bd-card-list b{display:block;font-size:18px;font-weight:700;color:#2e3845;word-break:keep-all}
.bd-card-list span{display:block;margin-top:6px;font-size:14px;line-height:1.62;color:#525252;word-break:keep-all}
.bd-direction{
  margin-top:52px;padding:0;
}
.bd-direction-inner{border:1px solid rgba(197,227,255,.9);border-radius:14px;background:rgba(255,255,255,.94);padding:24px 28px;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.bd-direction-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:#f2f2f2;color:var(--bd-cornflower)}
.bd-direction-tag img{width:24px;height:24px}
.bd-direction-tag b{font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:0;text-transform:uppercase}
.bd-direction p{margin-top:12px;font-size:16px;font-weight:600;line-height:1.7;color:var(--bd-ink);word-break:keep-all}
.bd-planning-zone{background:linear-gradient(180deg,rgba(249,249,251,0),rgba(108,145,255,.10) 52%,rgba(249,249,251,0))}
.bd-planning-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:42px;align-items:end}
.bd-patterns{display:grid;gap:30px}
.bd-pattern-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--bd-blue);word-break:keep-all}
.bd-pattern-title img{width:26px;height:26px}
.bd-pattern-group.tone-violet .bd-pattern-title{color:var(--bd-violet)}
.bd-mini-grid{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bd-mini-card{border:1.5px solid var(--bd-blue-line);border-radius:16px;background:rgba(255,255,255,.92);padding:28px 26px;min-height:168px;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.bd-pattern-group.tone-violet .bd-mini-card{border-color:var(--bd-violet-line)}
.bd-mini-card .n{font-family:var(--font-en);font-size:28px;font-weight:700;line-height:1;color:var(--bd-peri)}
.bd-pattern-group.tone-violet .bd-mini-card .n{color:var(--bd-violet-soft)}
.bd-mini-card b{display:block;margin-top:18px;font-size:17px;font-weight:700;color:#2e3845;word-break:keep-all}
.bd-mini-card span{display:block;margin-top:7px;font-size:14px;line-height:1.55;color:#525252;word-break:keep-all}
.bd-planning-visual{position:relative}
.bd-planning-visual img{width:min(100%,390px);margin-left:auto;filter:drop-shadow(0 24px 30px rgba(43,96,255,.14))}
.bd-core-zone{background:linear-gradient(180deg,rgba(197,227,255,.08),rgba(249,249,251,0) 24%,rgba(216,197,255,.08) 82%,rgba(249,249,251,0))}
.bd-ui-block{padding:84px 0}
.bd-ui-block+.bd-ui-block{border-top:1px solid rgba(197,227,255,.58)}
.bd-ui-layout{display:grid;grid-template-columns:336px minmax(0,1fr);gap:34px;align-items:start}
.bd-inspect-guide{
  margin-bottom:12px;border:1px dashed var(--bd-blue-line);border-radius:12px;background:rgba(255,255,255,.76);
  padding:12px 14px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;
  color:var(--bd-blue);box-shadow:0 4px 16px rgba(43,96,255,.06)
}
.bd-inspect-guide>img{width:30px;height:30px;padding:6px;border-radius:50%;background:#f2f2f2}
.bd-inspect-guide strong{display:block;font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:0}
.bd-inspect-guide span{display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--bd-body);word-break:keep-all}
.bd-inspect-guide b{font-family:var(--font-en);font-size:10px;font-weight:700;color:var(--bd-peri)}
.bd-guide-mobile{display:none!important}
.bd-callout-panel{position:sticky;top:calc(var(--nav-h) + 24px);min-width:0}
.bd-callouts{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.bd-callouts li{list-style:none}
.bd-callout{--tone:var(--bd-sky-soft);width:100%;min-height:98px;border:1.5px solid var(--bd-blue-line);border-radius:16px;background:rgba(255,255,255,.92);padding:13px 16px;display:grid;grid-template-columns:54px minmax(0,1fr);gap:13px;align-items:center;text-align:left;font:inherit;color:inherit;box-shadow:0 4px 16px rgba(0,0,0,.08);cursor:pointer;position:relative;overflow:hidden;transition:border-color .24s,background .24s,transform .24s,box-shadow .24s}
.bd-callouts li:nth-child(3n+2) .bd-callout{border-color:var(--bd-blue-line)}
.bd-callouts li:nth-child(3n) .bd-callout{border-color:var(--bd-violet-line)}
.bd-callout img{width:54px;height:54px;object-fit:cover;border-radius:12px;transition:transform .28s ease}
.bd-callout-copy{min-width:0;display:block}
.bd-callout-copy b{display:block;font-size:15px;font-weight:700;color:var(--tone);word-break:keep-all}
.bd-callout-copy>span{display:block;margin-top:5px;font-size:12px;line-height:1.5;color:var(--bd-body);word-break:keep-all}
.bd-callout-no{position:absolute;right:12px;top:10px;font-family:var(--font-en);font-size:11px;font-weight:700;color:var(--tone)}
.bd-callout-action{position:absolute;right:12px;bottom:8px;font-family:var(--font-en);font-size:9px;font-weight:700;color:var(--tone);opacity:.62;transition:opacity .24s,transform .24s}
.bd-callout.is-active{border-color:var(--tone);background:#fff;transform:translateX(5px);box-shadow:0 10px 26px rgba(43,96,255,.15)}
.bd-callout.is-active img{transform:scale(1.08)}
.bd-callout.is-active .bd-callout-action{opacity:1;transform:translateX(-3px)}
.bd-screen{position:relative;margin:0;min-width:0}
.bd-screen-frame{position:relative;border:1.5px solid var(--bd-blue-line);border-radius:12px;background:#fff;box-shadow:0 12px 34px rgba(43,96,255,.12);overflow:visible;isolation:isolate}
.bd-screen-frame::after{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;background:rgba(249,249,251,.58);opacity:0;pointer-events:none;transition:opacity .28s ease}
.bd-screen-source{width:100%;border-radius:11px;transition:filter .3s ease,opacity .3s ease,transform .3s ease}
.bd-inspection-only .bd-screen-frame{overflow:hidden}
.bd-screen-frame.is-inspecting::after{opacity:0}
.bd-screen-frame.is-inspecting .bd-screen-source{filter:none;opacity:1;transform:none}
.bd-hotspot{--tone:var(--bd-sky-soft);position:absolute;z-index:2;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid var(--tone);border-radius:8px;background:transparent;box-shadow:none;opacity:0;transform:translate(-50%,-50%) scale(.97);pointer-events:none;transition:opacity .24s,transform .24s,box-shadow .24s}
.bd-hotspot::before{content:attr(data-label);position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--tone);color:#fff;font-family:var(--font-en);font-size:11px;font-weight:700;box-shadow:0 0 0 3px #fff}
.bd-hotspot:nth-of-type(3n+2){--tone:var(--bd-peri)}
.bd-hotspot:nth-of-type(3n){--tone:var(--bd-violet-soft)}
.bd-inspection-only .bd-hotspot::before{display:none}
.bd-hotspot.is-active{opacity:1;transform:translate(-50%,-50%) scale(1);background:transparent;box-shadow:0 0 0 9999px rgba(249,249,251,.70),0 0 0 4px rgba(255,255,255,.86),0 8px 22px rgba(43,96,255,.18)}
.bd-hotspot.is-positioned{transform:scale(.97)}
.bd-hotspot.is-positioned.is-active{transform:scale(1)}
.bd-component-float{
  position:absolute;z-index:4;box-sizing:content-box;border:1.5px solid var(--tone,var(--bd-blue-line));border-radius:10px;
  background:#fff;box-shadow:0 24px 54px rgba(43,96,255,.24),0 8px 18px rgba(46,56,69,.12);overflow:hidden;
  opacity:0;transform:translateY(18px) scale(.88);transform-origin:center;pointer-events:none;
  transition:opacity .22s ease,transform .38s cubic-bezier(.16,1,.3,1)
}
.bd-component-float::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.88);pointer-events:none}
.bd-component-float.is-active{opacity:1;transform:none}
.bd-component-media{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}
.bd-component-image{position:absolute;max-width:none!important;margin:0!important;filter:none!important}
.bd-floating-disabled .bd-component-float{display:none}
@media (min-width:1025px){
  .bd-ui-layout-detail .bd-callout-panel{position:static;align-self:stretch}
  .bd-ui-layout-detail .bd-callouts li:nth-child(4){
    margin-top:clamp(280px,26vw,420px);padding-top:22px;border-top:1px dashed rgba(123,156,255,.42)
  }
  .bd-ui-layout-detail .bd-callouts li:nth-child(6){margin-top:clamp(520px,50vw,640px)}
}
.bd-screen-caption{
  margin-top:18px;border:1.5px solid var(--bd-blue-line);border-radius:16px;padding:18px 22px;background:rgba(255,255,255,.94);
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;color:var(--bd-ink);font-size:14px;font-weight:600;line-height:1.72;word-break:keep-all;box-shadow:0 4px 16px rgba(0,0,0,.06)
}
.bd-screen-caption img{width:32px;height:32px;padding:6px;border-radius:50%;background:#f2f2f2}
.bd-result-zone{background:linear-gradient(180deg,rgba(249,249,251,0),rgba(108,145,255,.12) 34%,rgba(216,197,255,.12) 72%,rgba(249,249,251,.38))}
.bd-result-wrap{max-width:1044px;margin:0 auto}
.bd-result-group+.bd-result-group{margin-top:42px}
.bd-result-title{display:flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:18px;font-weight:700;letter-spacing:0;color:var(--bd-blue);text-transform:uppercase}
.bd-result-title img{width:26px;height:26px}
.bd-result-group.tone-violet .bd-result-title{color:var(--bd-violet)}
.bd-metric-grid{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bd-metric{border:1.5px solid var(--bd-blue-line);border-radius:16px;background:rgba(255,255,255,.94);padding:36px 40px;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.bd-result-group.tone-violet .bd-metric{border-color:var(--bd-violet-line)}
.bd-metric .n{font-family:var(--font-en);font-size:clamp(34px,4vw,46px);font-weight:700;line-height:1;color:var(--bd-peri)}
.bd-result-group.tone-violet .bd-metric .n{color:var(--bd-violet-soft)}
.bd-metric b{display:block;margin-top:18px;font-size:18px;font-weight:700;color:#2e3845;word-break:keep-all}
.bd-metric span{display:block;margin-top:10px;font-size:14px;line-height:1.65;color:var(--bd-body);word-break:keep-all}
.bd-note{margin-top:18px;padding:10px 14px;border-radius:999px;background:rgba(240,223,255,.52);display:flex;align-items:center;gap:8px;font-size:13px;color:var(--bd-violet-soft);word-break:keep-all}
.bd-note img{width:20px;height:20px;flex:0 0 auto}
.bd-result-visual{position:relative;margin:58px auto 0;width:min(100%,980px)}
.bd-result-visual img{margin:0 auto;filter:drop-shadow(0 28px 36px rgba(43,96,255,.16))}
.bd-fx{opacity:0;transform:translateY(28px);transition:opacity .78s ease,transform .78s ease}
.bd-fx.in{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .bd-scope-card,.bd-mini-card,.bd-metric,.bd-screen-frame{transition:translate .28s ease,box-shadow .28s ease}
  .bd-scope-card:hover,.bd-mini-card:hover,.bd-metric:hover,.bd-screen-frame:hover{translate:0 -4px;box-shadow:0 14px 30px rgba(43,96,255,.14)}
}
@media (max-width:1200px){
  /* 오브젝트와 카피가 겹치는 폭: 카피/메타/오브젝트 세로 스택 */
  .bd-hero{height:auto;padding-bottom:0}
  .bd-hero-copy{max-width:620px}
  img.bd-hero-obj{position:static;width:min(80%,540px);height:auto;margin:clamp(28px,5vw,44px) clamp(8px,3vw,40px) 0 auto}
}
@media (max-width:1024px){
  .bd-planning-layout{grid-template-columns:1fr}
  .bd-planning-visual img{margin:8px auto 0}
  .bd-ui-layout{grid-template-columns:1fr}
  .bd-callout-panel{position:static}
  .bd-callouts{grid-template-columns:repeat(3,1fr)}
  .bd-callout{grid-template-columns:48px minmax(0,1fr);padding:12px}
  .bd-callout img{width:48px;height:48px}
  .bd-callout.is-active{transform:translateY(-3px)}
}
@media (max-width:760px){
  .bd{background-size:1120px auto,1120px auto,1120px auto,1120px auto,1120px auto,1120px auto}
  .bd-hero{padding:62px 0 0}
  .bd-sec{padding:66px 0}
  .bd-logo{width:96px;margin-bottom:24px}
  .bd-hero h1{font-size:32px;line-height:1.28;word-break:normal;overflow-wrap:anywhere}
  .bd-hero-lead,.bd-meta dd{word-break:normal;overflow-wrap:anywhere}
  .bd-lead-line{display:block}
  .bd-lead-line+.bd-lead-line::before{content:none}
  .bd-meta{padding:0;margin-top:28px}
  .bd-meta div{display:block}
  .bd-meta dt{margin-bottom:6px}
  .bd-scope-grid,.bd-mini-grid,.bd-metric-grid{grid-template-columns:1fr}
  .bd-scope-card{padding:48px 28px 32px}
  .bd-direction{padding:0}
  .bd-direction-inner{padding:22px 20px}
  .bd-inspect-guide{grid-template-columns:30px minmax(0,1fr) auto}
  .bd-guide-desktop{display:none!important}
  .bd-guide-mobile{display:block!important}
  .bd-callouts{grid-template-columns:1fr}
  .bd-callout{min-height:96px;grid-template-columns:52px minmax(0,1fr)}
  .bd-callout img{width:52px;height:52px}
  .bd-ui-block{padding:62px 0}
  .bd-screen-caption{padding:20px 22px}
  .bd-component-float{border-radius:8px;box-shadow:0 18px 38px rgba(43,96,255,.22),0 6px 14px rgba(46,56,69,.10)}
  .bd-metric{padding:30px 28px}
  .bd-note{border-radius:14px;align-items:flex-start}
  .bd-result-visual{padding:18px 10px}
}
@media (prefers-reduced-motion:reduce){
  .bd-fx{opacity:1;transform:none;transition:none}
  .bd-callout,.bd-callout img,.bd-screen-source,.bd-screen-frame::after,.bd-hotspot,.bd-component-float{transition:none}
}

/* ============================================================
   NGS-X 인터랙션 상세 (#workDetail 안에 렌더)
   이미지: images/work/ngsx/ · 배경은 원본 bg.png를 CSS 그라디언트로 재현
   ============================================================ */
.detail-full.nx-host{padding-left:0;padding-right:0}
.nx{--nx-blue:#0b6cf0;--nx-ink:#16294f;--nx-sub:#64748f;overflow-x:clip;line-height:1.5}
.nx img{max-width:100%;height:auto;display:block}
.nx-canvas{width:100%;max-width:1152px;margin:0 auto;padding:0 var(--margin);position:relative}
/* 배경 존 — 원본 bg.png를 존별로 잘라 실제 배경으로 사용 (로딩 전 폴백: 동일 색 그라디언트) */
.nx-za{background:url('images/work/ngsx/00_bg_a.webp') center top/100% 100% no-repeat,linear-gradient(180deg,#ffffff 0%,#fcfeff 40%,#f9fcff 100%)}
.nx-zb{background:url('images/work/ngsx/00_bg_b.webp') center top/100% 100% no-repeat,linear-gradient(180deg,#f9fcff 0%,#dcedfd 30%,#b9dbfa 48%,#74b4f3 78%,#58a0f3 100%)}
.nx-zc{background:url('images/work/ngsx/00_bg_c.webp') center top/100% 100% no-repeat,linear-gradient(180deg,#58a0f3 0%,#6baef3 14%,#70b0ed 32%,#7ab6ee 48%,#6ba8ea 72%,#8fb9e6 90%,#a8cef2 100%)}
.nx-zde{background:url('images/work/ngsx/00_bg_de.webp') center top/100% 100% no-repeat,linear-gradient(180deg,#a8cef2 0%,#eef7ff 12%,#ecf6ff 55%,#ffffff 95%)}
/* 존 경계 1px 흰색 실금 방지 — 이전 존을 1px 덮으며 이어붙임 */
.nx-zb,.nx-zc,.nx-zde{margin-top:-1px}
/* 진행 바 */
.nx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1300;pointer-events:none}
.nx-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0085ff,#19e0c8)}
/* 섹션 공통 */
.nx-sec{padding:100px 0}
.nx-head{text-align:center;margin-bottom:52px}
.nx-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#7fb5f6;margin-bottom:13px}
.nx-head h2{font-size:clamp(24px,3.3vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.32;color:var(--nx-blue)}
.nx-head h2.nx-ink{color:var(--nx-ink)}
.nx-head .nx-sub{margin-top:15px;font-size:clamp(14px,1.5vw,17px);color:var(--nx-sub)}
.nx-onblue .nx-eyebrow{color:rgba(255,255,255,.75)}
.nx-onblue h2{color:#fff}
.nx-onblue .nx-sub{color:rgba(255,255,255,.92)}
/* 히어로 */
.nx-hero{padding:110px 0 60px}
.nx-hero .nx-canvas{display:grid;grid-template-columns:47% 53%;align-items:center}
.nx-hero-logo{width:120px;margin-bottom:32px}
.nx-hero h1{font-size:clamp(32px,4.5vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1.24;color:var(--nx-blue)}
.nx-hl{display:block;overflow:hidden}
.nx-hl>span{display:inline-block;animation:nxRise .72s cubic-bezier(.2,.72,.18,1) both}
.nx-hl:nth-of-type(2)>span{animation-delay:.1s}
@keyframes nxRise{from{transform:translateY(112%)}to{transform:translateY(0)}}
.nx-hero-sub{margin-top:20px;font-size:clamp(14px,1.5vw,17px);font-weight:600;color:#3d7ef2;line-height:1.7}
.nx-hero-meta{margin-top:48px;width:min(100%,500px)}
.nx-visual img{width:min(78%,440px);margin-left:auto}
.nx-fade{animation:nxFadeUp .8s ease both}
@keyframes nxFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes nxFloat{from{transform:translateY(0)}to{transform:translateY(-13px)}}
.nx-visual img{animation:nxFadeUp .8s ease .55s both,nxFloat 4.5s ease-in-out 1.8s infinite alternate}
/* 소스 없는 자리 표시 (인터렉션소스에 이미지 추가되면 교체) */
.nx-todo{border:2px dashed rgba(22,41,79,.35);border-radius:14px;background:rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
  color:#41598a;font-size:12px;line-height:1.5}
.nx-todo b{display:block;font-family:var(--font-en);font-weight:600;font-size:10px;opacity:.75;margin-top:3px;word-break:break-all}
.nx-onblue .nx-todo{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.13);color:#fff}
.nx-todo.nx-scr{filter:none}
/* 스크롤 등장 */
.nx-fx{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.nx-fx.in{opacity:1;transform:none}
.nx-fx.nx-pop{transform:translateY(18px) scale(.9);transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.nx-fx.nx-pop.in{transform:none}
.nx-fx.nx-grow{transform:scaleY(0);transform-origin:50% 0;transition:opacity .5s ease,transform .7s cubic-bezier(.4,0,.2,1)}
.nx-fx.nx-grow.in{transform:none}
.nx-fx.nx-zoom{transform:translateY(24px) scale(.965);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.nx-fx.nx-zoom.in{transform:none}
/* 01 Problem */
.nx-flow{max-width:1000px;margin:0 auto}
.nx-flow .nx-line{width:76%;margin:6px auto}
.nx-flow .nx-band{width:min(100%,976px);margin:0 auto}
.nx-flow .nx-after{margin-top:32px}
/* 02 Planning — 말풍선+미모지 통그룹 */
.nx-talk{margin:0 auto 24px}
.nx-talk img{width:min(100%,640px);margin:0 auto;filter:drop-shadow(0 14px 26px rgba(35,80,160,.10))}
.nx-plan{max-width:1120px;margin:52px auto 0}
.nx-plan+.nx-plan{margin-top:40px}
/* 03 Solution 카드 — 로우 단위 통그룹 이미지 세로 스택 */
.nx-sol{max-width:1150px;margin:0 auto}
.nx-sol img + img{margin-top:18px}
/* 04 Core UI — 화면+콜아웃 병합 이미지 1장 + 배경 데코 1장 구조
   (배치 폭은 통이미지 실측: 내부 화면 크기가 원본과 일치하도록 계산) */
.nx-block{padding:92px 0}
.nx-stage{position:relative}
.nx-stage .nx-deco{position:absolute;z-index:0}
.nx-stage .nx-merged{position:relative;z-index:1;max-width:none}
.nx-st1{margin-top:56px}
.nx-st1 .nx-merged{width:106%;margin-left:-3%}
.nx-st1 .nx-deco{left:-16%;top:-6%;width:132%}
.nx-st2{margin-top:56px}
.nx-st2 .nx-merged{width:160%;margin-left:-3.4%}
.nx-st2 .nx-deco{left:-14%;top:-8%;width:130%}
.nx-st3{margin-top:52px}
.nx-st3 .nx-merged{width:104%;margin-left:-1.5%}
.nx-st4{margin-top:52px}
.nx-st4 .nx-merged{width:147%}
.nx-st4 .nx-deco{left:-12%;top:-8%;width:128%}
/* 05 디자인 시스템 — 3분할 카드 세로 스택 */
.nx-ds{width:min(100%,640px);margin:0 auto}
.nx-ds + .nx-ds{margin-top:44px}
/* 06 결과 */
.nx-result{max-width:1130px;margin:0 auto}
.nx-result .nx-impact{margin-top:66px}
.nx-result .nx-closing{margin-top:76px;width:min(100%,1160px)}
.nx-foot{text-align:center;padding:70px 0 110px}
.nx-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:16px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:14px 30px;background:#fff;transition:background .25s,color .25s,transform .25s}
.nx-back:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}
/* 카드 호버 리프트 (등장 transform과 충돌 없게 translate 사용) */
@media (hover:hover) and (pointer:fine){
  .nx-sol img,.nx-plan,.nx-result img{transition:opacity .8s ease,transform .8s ease,translate .35s ease,filter .35s ease}
  .nx-sol img:hover,.nx-plan:hover,.nx-result img:hover{translate:0 -6px;filter:drop-shadow(0 20px 32px rgba(20,60,130,.16))}
}
/* 모바일 · 태블릿 */
@media (max-width:760px){
  .nx-sec{padding:64px 0}
  .nx-block{padding:52px 0}
  .nx-hero{padding:60px 0 30px}
  .nx-hero .nx-canvas{grid-template-columns:1fr}
  .nx-visual img{width:min(72%,320px);margin:26px auto 0}
  .nx-hero-meta{margin-top:32px}
  .nx-st-list{margin-bottom:104px}
  .nx-drop::after{height:30px;left:22px}
}
/* 모션 최소화 존중 */
@media (prefers-reduced-motion:reduce){
  .nx-hl>span,.nx-fade,.nx-visual img{animation:none}
  .nx-fx,.nx-fx.nx-pop,.nx-fx.nx-grow,.nx-fx.nx-zoom{opacity:1;transform:none;transition:none}
  .nx-stage .nx-deco{transform:none !important}
}

/* ============================================================
   이지케어텍 HIS 상세 (#workDetail 안에 렌더)
   이미지: images/work/ezcaretech/ · 포인트 컬러는 실제 프로젝트 팔레트(#FF4E00)
   ============================================================ */
.detail-full.ez-host{padding-left:0;padding-right:0}
.ez{--ez-red:#ff4e00;--ez-ink:#2e3438;--ez-sub:#525566;--ez-line:#e6e7f2;
  overflow-x:clip;line-height:1.6;color:var(--ez-ink)}
.ez img{max-width:100%;height:auto;display:block}
.ez-canvas{width:100%;max-width:1152px;margin:0 auto;padding:0 var(--margin);position:relative}
.ez-sec{padding:100px 0}
.ez-head{text-align:center;margin-bottom:52px}
.ez-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ez-red);margin-bottom:13px}
.ez-head h2{font-size:clamp(24px,3.3vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.32;color:var(--ez-ink);word-break:keep-all}
.ez-head .ez-sub{margin-top:15px;font-size:clamp(14px,1.5vw,17px);color:var(--ez-sub);word-break:keep-all}
/* 히어로 — 로그인 화면의 웜톤 배경으로 이어지는 존 */
.ez-za{background:linear-gradient(180deg,#ffffff 0%,#fdf8f5 34%,#f8ece5 100%)}
.ez-hero{padding:110px 0 84px;text-align:center}
.ez-hero-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ez-red)}
.ez-hero h1{margin-top:16px;font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ez-ink);word-break:keep-all}
.ez-hero h1 em{font-style:normal;color:var(--ez-red)}
.ez-hero-sub{margin:18px auto 0;max-width:640px;font-size:clamp(14px,1.5vw,17px);color:var(--ez-sub);word-break:keep-all}
.ez-meta{margin:38px auto 0;max-width:860px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;
  border-top:1px solid var(--ez-ink);padding-top:20px}
.ez-meta .k{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ez-red)}
.ez-meta .v{margin-top:6px;font-size:14px;line-height:1.55;color:var(--ez-ink)}
.ez-hero-shot{margin-top:56px}
/* 등장 모션 */
.ez-fade{animation:ezFadeUp .8s ease both}
@keyframes ezFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.ez-fx{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.ez-fx.in{opacity:1;transform:none}
/* 스크린샷 카드 */
.ez-shot{border-radius:12px;border:1px solid var(--ez-line);box-shadow:0 24px 48px -30px rgba(46,52,56,.35);overflow:hidden;background:#fff}
/* 02 화면 설계 · 03 스킨 컬러: 시스템 스크린샷은 직각 프레임 */
.ez-block .ez-shot,.ez-skins .ez-shot{border-radius:0}
.ez-shot img{width:100%}
.ez-cap{margin-top:14px;text-align:center;font-size:13.5px;line-height:1.65;color:var(--ink-3);word-break:keep-all}
.ez-cap b{color:var(--ez-ink);font-weight:600}
/* 01 Overview 스탯 */
.ez-stats{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ez-stat{border:1px solid var(--ez-line);border-radius:14px;background:#fff;padding:26px 20px;text-align:center}
.ez-stat .n{font-family:var(--font-en);font-size:clamp(26px,3vw,36px);font-weight:600;color:var(--ez-red);line-height:1.1}
.ez-stat .n small{font-size:.55em;font-weight:600}
.ez-stat .t{margin-top:9px;font-size:13.5px;color:var(--ez-sub);line-height:1.5;word-break:keep-all}
/* 02 화면 설계 */
.ez-block{padding:36px 0}
.ez-block+.ez-block{padding-top:44px}
.ez-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
/* 진료 풀 워크플로우 필름스트립 — 와이드(최대 1680px) + 반투명 라벨 탭 독
   초와이드 화면에서 이미지가 통째로 보이면 탭이 죽으므로 폭을 제한하고,
   끝에는 필름 리더 느낌의 여백 꼬리를 둬 마지막 탭까지 좌측 정렬이 되게 함 */
.ez-flow{position:relative;width:min(100vw,1680px);margin-left:calc(50% - min(50vw,840px))}
.ez-strip{display:flex;overflow-x:auto;scrollbar-width:none;cursor:grab;background:#fff;
  border-top:1px solid var(--ez-line);border-bottom:1px solid var(--ez-line);
  box-shadow:0 30px 56px -34px rgba(46,52,56,.4)}
.ez-strip::-webkit-scrollbar{display:none}
.ez-strip.drag{cursor:grabbing}
.ez-strip img{flex:0 0 auto;height:min(56vh,460px);width:auto;max-width:none;user-select:none;-webkit-user-drag:none}
.ez-strip-end{flex:0 0 auto;width:min(600px,45vw);align-self:stretch;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(-45deg,#fff 0 14px,#fafafb 14px 28px)}
.ez-strip-end span{font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--ink-3);white-space:nowrap}
@media (min-width:1700px){
  .ez-strip{border:1px solid var(--ez-line)}
}
.ez-flow-tabs{display:flex;gap:8px;width:max-content;max-width:min(94vw,1104px);margin:18px auto 0;
  overflow-x:auto;scrollbar-width:none;padding:4px}
.ez-flow-tabs::-webkit-scrollbar{display:none}
.ez-flow-tab{flex:0 0 auto;font-family:var(--font-en);font-size:12.5px;font-weight:500;letter-spacing:.01em;
  color:#fff;background:rgba(46,52,56,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:999px;padding:9px 16px;white-space:nowrap;
  box-shadow:0 4px 14px -6px rgba(46,52,56,.45);transition:background .2s}
.ez-flow-tab:hover{background:rgba(46,52,56,.82)}
.ez-flow-tab.on{background:var(--ez-red)}
/* 03 스킨 컬러 */
.ez-skins{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ez-skins figure{margin:0}
/* 04 스타일 가이드 — 다크 존 (가이드 표지 톤) */
.ez-zg{background:linear-gradient(180deg,#f8ece5 0%,#fdf8f5 8%,#ffffff 20%) , #fff}
.ez-zdark{background:linear-gradient(180deg,#1c2126 0%,#22262b 100%);color:#eceff3}
.ez-zdark .ez-head h2{color:#fff}
.ez-zdark .ez-head .ez-sub{color:#aab3bd}
.ez-zdark .ez-cap{color:#8d98a5}
.ez-zdark .ez-cap b{color:#eceff3}
.ez-zdark .ez-shot{border-color:rgba(255,255,255,.12);box-shadow:0 26px 52px -30px rgba(0,0,0,.7)}
.ez-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 22px;margin-top:44px}
.ez-guide-grid figure{margin:0}
/* 클로징 */
.ez-close{padding:110px 0 40px;text-align:center}
.ez-close p{max-width:660px;margin:0 auto;font-size:clamp(15px,1.7vw,19px);line-height:1.8;color:var(--ez-sub);word-break:keep-all}
.ez-close p b{color:var(--ez-ink)}
.ez-foot{text-align:center;padding:56px 0 110px}
@media (hover:hover) and (pointer:fine){
  .ez-shot{transition:opacity .8s ease,transform .8s ease,translate .35s ease,box-shadow .35s ease}
  .ez-shot:hover{translate:0 -6px;box-shadow:0 30px 56px -28px rgba(46,52,56,.45)}
}
@media (max-width:760px){
  .ez-sec{padding:64px 0}
  .ez-hero{padding:60px 0 48px}
  .ez-strip img{height:300px}
  .ez-flow-tabs{margin-top:12px;max-width:94vw}
  .ez-flow-tab{padding:8px 13px;font-size:12px}
  .ez-meta{grid-template-columns:1fr 1fr;gap:16px}
  .ez-stats{grid-template-columns:1fr 1fr}
  .ez-duo,.ez-guide-grid{grid-template-columns:1fr}
  .ez-skins{grid-template-columns:1fr}
  .ez-close{padding:70px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .ez-fade{animation:none}
  .ez-fx{opacity:1;transform:none;transition:none}
}

/* ============================================================
   위시빈 회원가입 유도 캠페인 상세 (#workDetail 안에 렌더)
   이미지: images/work/wishbeen-mk/ · 포인트 컬러는 캠페인 팔레트(퍼플/옐로/다크)
   ============================================================ */
.detail-full.wb-host{padding-left:0;padding-right:0}
.wb{--wb-purple:#8b4fe0;--wb-yellow:#f0c244;--wb-ink:#241f31;--wb-sub:#5b5666;--wb-line:#e8e5f0;--wb-dark:#17131f;
  overflow-x:clip;line-height:1.6;color:var(--wb-ink)}
.wb img{max-width:100%;height:auto;display:block}
.wb-canvas{width:100%;max-width:1152px;margin:0 auto;padding:0 var(--margin);position:relative}
.wb-sec{padding:100px 0}
.wb-head{text-align:center;margin-bottom:52px}
.wb-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--wb-purple);margin-bottom:13px}
.wb-head h2{font-size:clamp(24px,3.3vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.32;color:var(--wb-ink);word-break:keep-all}
.wb-head .wb-sub{margin-top:15px;font-size:clamp(14px,1.5vw,17px);color:var(--wb-sub);word-break:keep-all}
/* 히어로 — 캠페인 다크 존 */
.wb-za{background:radial-gradient(120% 90% at 8% 0%,#2d2140 0%,#1b1626 46%,#17131f 100%);color:#fff}
.wb-hero{padding:110px 0 90px;text-align:center}
.wb-hero-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--wb-yellow)}
.wb-hero h1{margin-top:16px;font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:#fff;word-break:keep-all}
.wb-hero h1 em{font-style:normal;color:var(--wb-yellow)}
.wb-hero-sub{margin:18px auto 0;max-width:640px;font-size:clamp(14px,1.5vw,17px);color:#b6afc4;word-break:keep-all}
.wb-meta{margin:38px auto 0;max-width:860px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;
  border-top:1px solid rgba(255,255,255,.4);padding-top:20px}
.wb-meta .k{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--wb-yellow)}
.wb-meta .v{margin-top:6px;font-size:14px;line-height:1.55;color:#e8e4f0}
.wb-hero-shot{margin-top:60px}
.wb-hero-shot img{margin:0 auto;border-radius:14px;box-shadow:0 30px 60px -26px rgba(0,0,0,.75)}
.wb-hero-shot .wb-cap{color:#8f88a0}
.wb-hero-shot .wb-cap b{color:#cfc9dc}
/* 등장 모션 */
.wb-fade{animation:ezFadeUp .8s ease both}
.wb-fx{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.wb-fx.in{opacity:1;transform:none}
/* 이미지 카드 · 캡션 */
.wb-shot{border-radius:12px;border:1px solid var(--wb-line);box-shadow:0 24px 48px -30px rgba(36,31,49,.35);overflow:hidden;background:#fff}
.wb-shot img{width:100%}
.wb-cap{margin-top:14px;text-align:center;font-size:13.5px;line-height:1.65;color:var(--ink-3);word-break:keep-all}
.wb-cap b{color:var(--wb-ink);font-weight:600}
/* 01 캠페인 플로우 다이어그램 */
.wb-flow{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;gap:10px;align-items:stretch;max-width:1020px;margin:0 auto}
.wb-node{border:1px solid var(--wb-line);border-radius:14px;background:#fff;padding:22px 18px;text-align:center}
.wb-node .s{font-family:var(--font-en);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--wb-purple)}
.wb-node .t{margin-top:8px;font-size:15px;font-weight:700;letter-spacing:-.01em;word-break:keep-all}
.wb-node .d{margin-top:7px;font-size:13px;line-height:1.55;color:var(--wb-sub);word-break:keep-all}
.wb-node.hl{background:var(--wb-dark);border-color:var(--wb-dark);color:#fff}
.wb-node.hl .t{color:#fff}
.wb-node.hl .s{color:var(--wb-yellow)}
.wb-node.hl .d{color:#b6afc4}
.wb-arr{display:flex;align-items:center;justify-content:center;color:var(--wb-purple);font-size:17px}
.wb-stats{max-width:960px;margin:56px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wb-stat{border:1px solid var(--wb-line);border-radius:14px;background:#fff;padding:26px 20px;text-align:center}
.wb-stat .n{font-family:var(--font-en);font-size:clamp(26px,3vw,36px);font-weight:600;color:var(--wb-purple);line-height:1.1}
.wb-stat .t{margin-top:9px;font-size:13.5px;color:var(--wb-sub);line-height:1.5;word-break:keep-all}
/* 02 카피 분해 */
.wb-copy{max-width:880px;margin:0 auto 56px;border:1px solid var(--wb-line);border-radius:16px;background:#fff;padding:34px 30px;text-align:center}
.wb-copy-line{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.wb-token{display:flex;flex-direction:column;gap:10px;align-items:center}
.wb-token .w{font-size:clamp(18px,2.6vw,28px);font-weight:700;letter-spacing:-.02em;background:var(--wb-dark);color:#fff;border-radius:10px;padding:10px 16px;white-space:nowrap}
.wb-token .w em{font-style:normal;color:var(--wb-yellow)}
.wb-token .m{font-size:12.5px;color:var(--wb-sub);line-height:1.5;word-break:keep-all}
/* 블록 레이아웃 */
.wb-block{padding:36px 0}
.wb-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.wb-duo figure,.wb-strips figure{margin:0}
/* 02 키비주얼 듀오 — 원본보다 키우지 않고, 같은 높이의 카드 안에 정중앙 배치 */
.wb-kv{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;max-width:960px;margin:0 auto}
.wb-kv figure{margin:0;display:flex;flex-direction:column}
.wb-kv .wb-shot{flex:1;display:flex;align-items:center;justify-content:center;padding:36px 28px;min-height:280px}
.wb-kv .wb-shot img{width:auto;max-width:min(100%,380px);border-radius:10px}
/* 03 스트립 배너 스택 — 실제 폭 비율 그대로 */
.wb-strips{max-width:1020px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.wb-strip-row .tag{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.wb-strip-row .tag b{flex:0 0 auto;white-space:nowrap;font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--wb-purple)}
.wb-strip-row .tag span{font-size:12.5px;color:var(--ink-3)}
.wb-strip-row img{border-radius:6px;box-shadow:0 14px 30px -18px rgba(36,31,49,.45)}
/* 04 랜딩 구조 — 스티키 스텝 + 풀샷 */
.wb-anatomy{display:grid;grid-template-columns:330px 1fr;gap:44px;align-items:start;max-width:1080px;margin:0 auto}
.wb-steps{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:0}
.wb-step{position:relative;padding:20px 0 20px 30px}
.wb-step::before{content:"";position:absolute;left:8px;top:30px;bottom:-4px;width:1px;background:var(--wb-line)}
.wb-step:last-child::before{display:none}
.wb-step::after{content:"";position:absolute;left:4px;top:27px;width:9px;height:9px;border-radius:50%;background:var(--wb-purple)}
.wb-step .k{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--wb-purple)}
.wb-step .t{margin-top:5px;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.wb-step .d{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--wb-sub);word-break:keep-all}
.wb-note{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--ink-3);border-top:1px solid var(--wb-line);padding-top:14px;word-break:keep-all}
/* 05 모바일 듀오 — 세로 프레임 (원본 320px보다 키우지 않음) */
.wb-mobile{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:820px;margin:0 auto;align-items:start}
.wb-mobile figure{margin:0}
.wb-mobile .wb-shot{max-width:320px;margin:0 auto}
/* 존 배경 */
.wb-zgray{background:#f7f6fa}
/* 클로징 */
.wb-close{padding:110px 0 40px;text-align:center}
.wb-close p{max-width:660px;margin:0 auto;font-size:clamp(15px,1.7vw,19px);line-height:1.8;color:var(--wb-sub);word-break:keep-all}
.wb-close p b{color:var(--wb-ink)}
.wb-foot{text-align:center;padding:56px 0 110px}
@media (hover:hover) and (pointer:fine){
  .wb-shot{transition:opacity .8s ease,transform .8s ease,translate .35s ease,box-shadow .35s ease}
  .wb-shot:hover{translate:0 -6px;box-shadow:0 30px 56px -28px rgba(36,31,49,.45)}
}
@media (max-width:900px){
  .wb-anatomy{grid-template-columns:1fr}
  .wb-steps{position:static}
}
@media (max-width:760px){
  .wb-sec{padding:64px 0}
  .wb-hero{padding:96px 0 48px} /* 고정 헤더(74px) 아래로 */
  .wb-meta{grid-template-columns:1fr 1fr;gap:16px}
  .wb-flow{grid-template-columns:1fr;gap:8px}
  .wb-arr{transform:rotate(90deg)}
  .wb-stats{grid-template-columns:1fr 1fr;margin-top:40px}
  .wb-duo,.wb-kv{grid-template-columns:1fr}
  .wb-mobile{grid-template-columns:1fr 1fr;gap:14px}
  .wb-close{padding:70px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .wb-fade{animation:none}
  .wb-fx{opacity:1;transform:none;transition:none}
}

/* ============================================================
   한국환경공단 카드뉴스 상세 (#workDetail 안에 렌더)
   이미지: images/work/keco/ · 포인트 컬러는 카드뉴스 그린(1편)·블루(2편)
   ============================================================ */
.detail-full.kc-host{padding-left:0;padding-right:0}
.kc{--kc-green:#18a04c;--kc-deep:#0d6b33;--kc-blue:#3fb4d8;--kc-yellow:#ffd23f;--kc-ink:#1c2a21;--kc-sub:#5a6b5f;--kc-line:#e0ebe3;
  overflow-x:clip;line-height:1.6;color:var(--kc-ink)}
.kc img{max-width:100%;height:auto;display:block}
.kc-canvas{width:100%;max-width:1152px;margin:0 auto;padding:0 var(--margin);position:relative}
.kc-sec{padding:100px 0}
.kc-head{text-align:center;margin-bottom:52px}
.kc-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--kc-green);margin-bottom:13px}
.kc-head h2{font-size:clamp(24px,3.3vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.32;color:var(--kc-ink);word-break:keep-all}
.kc-head .kc-sub{margin-top:15px;font-size:clamp(14px,1.5vw,17px);color:var(--kc-sub);word-break:keep-all}
/* 히어로 — 카드뉴스 프레임 그린 존 */
.kc-za{background:radial-gradient(120% 90% at 8% 0%,#1a8f4a 0%,#0f7038 46%,#0a5629 100%);color:#fff}
.kc-hero{padding:110px 0 90px;text-align:center}
.kc-hero-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--kc-yellow)}
.kc-hero h1{margin-top:16px;font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:#fff;word-break:keep-all}
.kc-hero h1 em{font-style:normal;color:var(--kc-yellow)}
.kc-hero-sub{margin:18px auto 0;max-width:640px;font-size:clamp(14px,1.5vw,17px);color:#bfd8c6;word-break:keep-all}
.kc-meta{margin:38px auto 0;max-width:860px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;
  border-top:1px solid rgba(255,255,255,.35);padding-top:20px}
.kc-meta .k{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--kc-yellow)}
.kc-meta .v{margin-top:6px;font-size:14px;line-height:1.55;color:#e4f0e8}
.kc-hero-shot{margin-top:60px}
.kc-hero-shot .kc-cap{color:#9fc0aa}
.kc-hero-shot .kc-cap b{color:#dcefe2}
/* 히어로 인스타그램 피드 목업 (투명 배경 PNG 렌더) */
.kc-hero-mock{display:block;width:min(780px,92%);height:auto;margin:0 auto;
  filter:drop-shadow(0 34px 54px rgba(0,0,0,.38))}
/* 등장 모션 */
.kc-fade{animation:ezFadeUp .8s ease both}
.kc-fx{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.kc-fx.in{opacity:1;transform:none}
/* 이미지 카드 · 캡션 */
.kc-shot{border-radius:12px;border:1px solid var(--kc-line);box-shadow:0 24px 48px -30px rgba(20,42,28,.35);overflow:hidden;background:#fff}
.kc-shot img{width:100%}
.kc-cap{margin-top:14px;text-align:center;font-size:13.5px;line-height:1.65;color:var(--ink-3);word-break:keep-all}
.kc-cap b{color:var(--kc-ink);font-weight:600}
/* 01 시리즈 설계 플로우 */
.kc-flow{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;gap:10px;align-items:stretch;max-width:1020px;margin:0 auto}
.kc-node{border:1px solid var(--kc-line);border-radius:14px;background:#fff;padding:22px 18px;text-align:center}
.kc-node .s{font-family:var(--font-en);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--kc-green)}
.kc-node .t{margin-top:8px;font-size:15px;font-weight:700;letter-spacing:-.01em;word-break:keep-all}
.kc-node .d{margin-top:7px;font-size:13px;line-height:1.55;color:var(--kc-sub);word-break:keep-all}
.kc-node.hl{background:var(--kc-deep);border-color:var(--kc-deep);color:#fff}
.kc-node.hl .t{color:#fff}
.kc-node.hl .s{color:var(--kc-yellow)}
.kc-node.hl .d{color:#b9d6c2}
.kc-arr{display:flex;align-items:center;justify-content:center;color:var(--kc-green);font-size:17px}
.kc-stats{max-width:960px;margin:56px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kc-stat{border:1px solid var(--kc-line);border-radius:14px;background:#fff;padding:26px 20px;text-align:center}
.kc-stat .n{font-family:var(--font-en);font-size:clamp(26px,3vw,36px);font-weight:600;color:var(--kc-green);line-height:1.1}
.kc-stat .t{margin-top:9px;font-size:13.5px;color:var(--kc-sub);line-height:1.5;word-break:keep-all}
/* 02 카드 해부 — 스텝 + 풀샷 (세로 중앙 정렬) */
.kc-anatomy{display:grid;grid-template-columns:330px 1fr;gap:44px;align-items:center;max-width:1080px;margin:0 auto}
.kc-anatomy .kc-shot{max-width:560px;margin-left:auto}
.kc-steps{display:flex;flex-direction:column;gap:0}
.kc-step{position:relative;padding:20px 0 20px 30px}
.kc-step::before{content:"";position:absolute;left:8px;top:30px;bottom:-4px;width:1px;background:var(--kc-line)}
.kc-step:last-child::before{display:none}
.kc-step::after{content:"";position:absolute;left:4px;top:27px;width:9px;height:9px;border-radius:50%;background:var(--kc-green)}
.kc-step .k{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--kc-green)}
.kc-step .t{margin-top:5px;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.kc-step .d{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--kc-sub);word-break:keep-all}
/* 03 시리즈 컬러 듀오 · 04 다이어그램 그리드 · 05 대표 컷 그리드 */
.kc-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:880px;margin:0 auto;align-items:start}
.kc-duo figure,.kc-grid figure,.kc-grid3 figure{margin:0}
.kc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 22px;max-width:960px;margin:0 auto;align-items:start}
.kc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px;max-width:1080px;margin:0 auto;align-items:start}
/* 존 배경 */
.kc-zgray{background:#f4f9f5}
/* 클로징 */
.kc-close{padding:110px 0 40px;text-align:center}
.kc-close p{max-width:660px;margin:0 auto;font-size:clamp(15px,1.7vw,19px);line-height:1.8;color:var(--kc-sub);word-break:keep-all}
.kc-close p b{color:var(--kc-ink)}
.kc-foot{text-align:center;padding:56px 0 110px}
@media (hover:hover) and (pointer:fine){
  .kc-shot{transition:opacity .8s ease,transform .8s ease,translate .35s ease,box-shadow .35s ease}
  .kc-shot:hover{translate:0 -6px;box-shadow:0 30px 56px -28px rgba(20,42,28,.45)}
}
@media (max-width:900px){
  .kc-anatomy{grid-template-columns:1fr}
  .kc-steps{position:static}
  .kc-anatomy .kc-shot{margin:0 auto}
}
@media (max-width:760px){
  .kc-sec{padding:64px 0}
  .kc-hero{padding:60px 0 48px}
  .kc-meta{grid-template-columns:1fr 1fr;gap:16px}
  .kc-flow{grid-template-columns:1fr;gap:8px}
  .kc-arr{transform:rotate(90deg)}
  .kc-stats{grid-template-columns:1fr 1fr;margin-top:40px}
  .kc-duo,.kc-grid{grid-template-columns:1fr}
  .kc-grid3{grid-template-columns:1fr 1fr;gap:18px 12px}
  .kc-close{padding:70px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .kc-fade{animation:none}
  .kc-fx{opacity:1;transform:none;transition:none}
}

/* ============================================================
   도토리마켓 회차 포스터 상세 (#workDetail 안에 렌더)
   이미지: images/work/dotori/ · 버터 옐로 할프톤 + 도토리 브라운
   구성: 히어로(비대칭) / 고정 골격 스위처(시그니처) / 포토부스 / 클로징
   ============================================================ */
.detail-full.dt-host{padding-left:0;padding-right:0}
.dt{--dt-butter:#f8e69e;--dt-dot:#eccd72;--dt-acorn:#8a5a28;--dt-deep:#5d3a15;--dt-ink:#3f2f1b;--dt-sub:#7c6a4f;--dt-line:#efe3c6;--dt-cream:#fdf8ea;
  overflow-x:clip;line-height:1.6;color:var(--dt-ink)}
.dt img{max-width:100%;height:auto;display:block}
.dt-canvas{width:100%;max-width:1152px;margin:0 auto;padding:0 var(--margin);position:relative}
.dt-sec{padding:104px 0}
.dt h2{font-size:clamp(25px,3.2vw,37px);font-weight:700;letter-spacing:-.022em;line-height:1.3;word-break:keep-all}
.dt-sub{margin-top:15px;font-size:clamp(14px,1.45vw,16.5px);color:var(--dt-sub);word-break:keep-all}
/* 등장 모션 */
.dt-fade{animation:ezFadeUp .8s ease both}
.dt-fx{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.dt-fx.in{opacity:1;transform:none}

/* ── HERO. 비대칭 스플릿: 타입 좌 / 키비주얼 우 ── */
.dt-za{background-color:var(--dt-butter);
  background-image:radial-gradient(circle at 74% 22%,rgba(255,252,238,.82) 0%,rgba(255,252,238,0) 54%),
    radial-gradient(var(--dt-dot) 1.5px,transparent 1.6px);
  background-size:100% 100%,16px 16px}
/* 하단 패딩이 옐로 존의 깊이를 정한다. 걸친 길이 = |키비주얼 음수마진| - 이 값 */
.dt-hero{padding:72px 0 156px}
.dt-hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:52px;align-items:center}
.dt-hero-eyebrow{font-family:var(--font-en);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dt-deep)}
.dt-hero h1{margin-top:14px;font-size:clamp(29px,3.9vw,46px);font-weight:700;letter-spacing:-.026em;line-height:1.26;word-break:keep-all}
.dt-hero h1 em{font-style:normal;color:var(--dt-deep)}
.dt-hero-sub{margin-top:17px;max-width:42ch;font-size:clamp(14px,1.45vw,16.5px);color:#6f5b39;word-break:keep-all}
.dt-meta{margin-top:30px;max-width:470px;display:grid;grid-template-columns:1fr 1fr;gap:17px 24px;
  border-top:1px solid rgba(93,58,21,.26);padding-top:19px}
.dt-meta .k{font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--dt-acorn)}
.dt-meta .v{margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--dt-ink);word-break:keep-all}
/* 키 비주얼은 옐로 존 아래로 걸쳐 나가 흰 섹션 위에 뜬다(공간감).
   음수 마진이 밴드 높이를 끌어올리고, z-index로 다음 섹션 배경 위에 그려진다. */
/* align-self:end 로 붙여야 걸친 길이가 (음수마진 - 히어로 하단패딩)으로 결정된다.
   center 정렬이면 음수마진의 절반이 상쇄돼 걸침이 얕아진다.
   176 - 156 = 20px 만 옐로 존 밖으로 걸친다. */
.dt-hero-shot{position:relative;z-index:2;align-self:end;margin-bottom:-176px}
/* .dt img 의 max-width:100% 를 넘어서야 하므로 클래스 2개로 명시도를 올린다 */
.dt .dt-hero-mock{width:132%;max-width:none;margin-left:-16%;
  filter:drop-shadow(0 44px 56px rgba(93,58,21,.32))}
/* 걸쳐 나온 만큼 다음 섹션의 시작 여백을 벌려 헤드라인과 겹치지 않게 */
.dt-za + .dt-sec{padding-top:150px}

/* ── 고정 골격 스위처 (시그니처) ── */
.dt-frame-head{max-width:640px;margin-bottom:46px}
.dt-frame-head .dt-sub{max-width:52ch}
.dt-frame{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:44px;align-items:start}
.dt-stage{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--dt-line);background:#fff;
  box-shadow:0 26px 52px -32px rgba(93,58,21,.42)}
.dt-stage::before{content:"";display:block;padding-top:100%}
.dt-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.dt-stage img.on{opacity:1}
/* 고정 존 가이드. 포스터 7장 실측 좌표
   타이틀 y7~31% · 정보 3행(날짜37~39 장소40~42 시간44~46%) · 좌측 기준선 x4.8% */
.dt-guide{position:absolute;border:1.5px dashed rgba(93,58,21,.75);border-radius:5px;pointer-events:none;
  opacity:0;transform:scale(1.015);transition:opacity .45s ease,transform .45s ease}
.dt-stage.guide .dt-guide{opacity:1;transform:none}
.dt-guide--title{left:3.2%;top:5%;width:63%;height:28.5%}
.dt-guide--info{left:3.2%;top:35.5%;width:47%;height:11.6%}
.dt-guide span{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  font-family:var(--font-en);font-size:9.5px;font-weight:600;letter-spacing:.12em;color:#fff;
  background:var(--dt-deep);padding:3px 7px;border-radius:4px;white-space:nowrap}
/* 회차 판독부 */
.dt-round{display:flex;align-items:baseline;gap:5px;color:var(--dt-deep)}
.dt-round .n{font-family:var(--font-en);font-size:clamp(46px,6vw,66px);font-weight:600;line-height:.92;letter-spacing:-.035em}
.dt-round .u{font-size:16px;font-weight:600}
.dt-info{margin-top:20px;padding-top:17px;border-top:1px solid var(--dt-line);display:grid;gap:13px}
.dt-info>div{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline}
.dt-info dt{font-size:12.5px;font-weight:600;color:var(--dt-acorn)}
.dt-info dd{margin:0;font-size:13.5px;color:var(--dt-ink);word-break:keep-all}
.dt-toggle{margin-top:24px;display:inline-flex;align-items:center;gap:9px;padding:9px 11px 9px 16px;
  border:1px solid rgba(93,58,21,.32);border-radius:999px;
  font-size:13px;color:var(--dt-acorn);background:transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
/* 상태 배지로 ON/OFF 를 글자와 색으로 동시에 보여준다 */
.dt-toggle .st{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;background:rgba(93,58,21,.14);color:var(--dt-deep);
  transition:background .25s ease,color .25s ease}
.dt-toggle[aria-pressed="true"]{background:var(--dt-deep);border-color:var(--dt-deep);color:#fff}
.dt-toggle[aria-pressed="true"] .st{background:var(--dt-butter);color:var(--dt-deep)}
.dt-toggle:focus-visible{outline:2px solid var(--dt-deep);outline-offset:3px}
/* 회차 레일 */
.dt-rail{margin-top:38px;display:grid;grid-template-columns:repeat(7,1fr);gap:13px}
.dt-chip{padding:0;border:0;background:none;text-align:center;border-radius:10px}
.dt-chip img{width:100%;border-radius:10px;border:1px solid var(--dt-line);opacity:.6;
  transition:opacity .3s ease,border-color .3s ease,box-shadow .3s ease}
.dt-chip .lb{margin-top:9px;display:block;font-size:12px;color:var(--dt-sub)}
.dt-chip[aria-pressed="true"] img{opacity:1;border-color:var(--dt-deep);box-shadow:0 0 0 2px var(--dt-deep)}
.dt-chip[aria-pressed="true"] .lb{color:var(--dt-deep);font-weight:600}
.dt-chip:focus-visible{outline:2px solid var(--dt-deep);outline-offset:3px}

/* ── 포토부스. 좌우 크기·높이가 다른 오프셋 페어 ── */
.dt-zcream{background:var(--dt-cream)}
.dt-booth-head{max-width:600px;margin-bottom:50px}
.dt-mocks{display:grid;grid-template-columns:1.14fr 1fr;gap:44px;align-items:start}
.dt-mocks figure{margin:0}
.dt-mocks figure:first-child{margin-top:54px}
.dt-mock img{filter:drop-shadow(0 24px 34px rgba(93,58,21,.22))}
.dt-cap{margin-top:18px;font-size:13.5px;line-height:1.65;color:var(--dt-sub);word-break:keep-all}
.dt-cap b{color:var(--dt-ink);font-weight:600}

/* ── 클로징. 페이지에서 유일하게 중앙 정렬되는 블록 ── */
.dt-close{padding:112px 0 40px;text-align:center}
.dt-close p{max-width:640px;margin:0 auto;font-size:clamp(15px,1.7vw,19px);line-height:1.8;color:var(--dt-sub);word-break:keep-all}
.dt-close p b{color:var(--dt-ink)}
.dt-insta{display:inline-flex;align-items:center;gap:6px;margin-top:34px;padding:11px 22px;
  border:1px solid rgba(93,58,21,.3);border-radius:999px;font-size:14px;color:var(--dt-acorn);text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.dt-insta b{font-weight:600}
.dt-insta:hover{background:var(--dt-deep);border-color:var(--dt-deep);color:#fff}
.dt-foot{text-align:center;padding:56px 0 110px}
@media (hover:hover) and (pointer:fine){
  .dt-chip:hover img{opacity:1}
  .dt-mock img{transition:transform .35s ease}
  .dt-mock:hover img{transform:translateY(-6px)}
}
@media (max-width:980px){
  .dt-hero-grid{grid-template-columns:1fr;gap:38px}
  /* 단일 컬럼 구간에선 이미지가 이미 캔버스 폭이라, 과확대하면 폰 가장자리가 잘린다 */
  .dt-hero-shot{align-self:auto}
  .dt .dt-hero-mock{width:104%;margin-left:-2%}
  .dt-frame{grid-template-columns:1fr;gap:30px}
  .dt-round{align-items:baseline}
}
@media (max-width:760px){
  .dt-sec{padding:66px 0}
  .dt-hero{padding:54px 0 66px}
  .dt-hero-shot{margin-bottom:-86px}
  .dt-meta{grid-template-columns:1fr 1fr;gap:15px 18px}
  .dt-rail{grid-template-columns:repeat(4,1fr);gap:11px}
  .dt-mocks{grid-template-columns:1fr;gap:44px}
  .dt-mocks figure:first-child{margin-top:0}
  .dt-mocks figure{max-width:330px;margin-left:auto;margin-right:auto}
  .dt-close{padding:72px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .dt-fade{animation:none}
  .dt-fx{opacity:1;transform:none;transition:none}
  .dt-stage img,.dt-guide,.dt-mock img{transition:none}
}

/* ============================================================
   위시빈 메인 리뉴얼 상세 (#workDetail 안에 렌더)
   이미지: images/work/wishbeen/ · 포인트 컬러는 위시빈 오렌지
   ============================================================ */
.detail-full.ws-host{padding-left:0;padding-right:0}
.ws{--ws-orange:#ee8a2e;--ws-ink:#2b2620;--ws-sub:#63594e;--ws-line:#eee6db;
  overflow-x:clip;line-height:1.6;letter-spacing:-.028em;color:var(--ws-ink)}
.ws img{max-width:100%;height:auto;display:block}
.ws-canvas{width:100%;max-width:1152px;margin:0 auto;padding:0 var(--margin);position:relative}
.ws-sec{padding:100px 0}
.ws-head{text-align:left;margin-bottom:52px;max-width:1080px;margin-left:auto;margin-right:auto}
.ws-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ws-orange);margin-bottom:13px}
.ws-head h2{font-size:clamp(26px,3.6vw,42px);font-weight:700;letter-spacing:-.025em;line-height:1.28;color:var(--ws-ink);word-break:keep-all}
.ws-head .ws-sub{margin-top:15px;max-width:60ch;font-size:clamp(14px,1.5vw,17px);color:var(--ws-sub);word-break:keep-all}
/* 히어로 — 웜 크림 존 */
.ws-za{background:linear-gradient(180deg,#ffffff 0%,#fdf7ef 40%,#f9ecdb 100%)}
.ws-hero{padding:110px 0 84px;text-align:center}
.ws-hero-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ws-orange)}
.ws-hero h1{margin-top:16px;font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ws-ink);word-break:keep-all}
.ws-hero h1 em{font-style:normal;color:var(--ws-orange)}
.ws-hero-sub{margin:18px auto 0;max-width:660px;font-size:clamp(14px,1.5vw,17px);color:var(--ws-sub);word-break:keep-all}
/* 메타 — 티켓 스트립 (칸 사이 점선 절취선) */
.ws-meta{margin:38px auto 0;max-width:880px;display:grid;grid-template-columns:repeat(4,1fr);text-align:left;
  background:#fff;border:1px solid var(--ws-line);border-radius:18px;padding:20px 6px;
  box-shadow:0 20px 44px -34px rgba(43,38,32,.4)}
.ws-meta>div{padding:2px 24px}
.ws-meta>div+div{border-left:1.5px dashed #e8dac5}
.ws-meta .k{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ws-orange)}
.ws-meta .v{margin-top:6px;font-size:14px;line-height:1.55;color:var(--ws-ink)}
.ws-hero-shot{margin-top:56px}
/* 등장 모션 */
.ws-fade{animation:ezFadeUp .8s ease both}
.ws-fx{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.ws-fx.in{opacity:1;transform:none}
/* 브라우저 목업 프레임 */
.ws-browser{border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 1px 0 rgba(43,38,32,.06), 0 34px 70px -34px rgba(43,38,32,.45)}
.ws-browser .bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;
  background:#e9dcc3;border-bottom:1px solid #d9c9a8}
.ws-browser .bar i{width:11px;height:11px;border-radius:50%}
.ws-browser .bar i:nth-child(1){background:#ff5f57}
.ws-browser .bar i:nth-child(2){background:#febc2e}
.ws-browser .bar i:nth-child(3){background:#28c840}
.ws-browser .bar span{flex:0 1 320px;margin-left:14px;height:20px;border-radius:999px;background:#fdfaf4;
  border:1px solid #d9c9a8;font-family:var(--font-en);font-size:10.5px;letter-spacing:.02em;color:#a2937b;
  display:flex;align-items:center;justify-content:center}
.ws-browser img{width:100%;display:block}
/* 플레이트 — 웜톤 보드 위에 목업 */
.ws-plate{position:relative;border-radius:28px;padding:clamp(22px,4.2vw,58px);
  background:linear-gradient(160deg,#fdf3e6 0%,#f9e8d4 100%)}
/* 경유지 칩 — 전략 루트의 번호를 실제 화면 위에 매핑 */
.ws-stopchip{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--ws-line);border-radius:999px;padding:6px 14px 6px 7px;
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ws-ink);
  box-shadow:0 12px 26px -16px rgba(43,38,32,.45)}
.ws-stopchip i{font-style:normal;font-family:var(--font-en);font-weight:700;font-size:10.5px;letter-spacing:.02em;color:#fff;
  background:var(--ws-orange);width:21px;height:21px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center}
.ws-tour figure:nth-child(even) .ws-plate{background:linear-gradient(160deg,#f7f1e8 0%,#f1e6dc 100%)}
.ws-plate-slim{padding:clamp(18px,3vw,40px)}
.ws-plate-slim img{width:100%;display:block;border-radius:14px;box-shadow:0 24px 48px -28px rgba(43,38,32,.4)}
/* 캡션 */
.ws-cap{margin-top:14px;text-align:center;font-size:13.5px;line-height:1.65;color:var(--ink-3);word-break:keep-all}
.ws-cap b{color:var(--ws-ink);font-weight:600}
/* 일러스트 슬롯 — 파일이 없으면 슬롯째 숨김 */
.ws-il-slot img{max-width:100%;height:auto;display:block;border-radius:24px;
  box-shadow:0 22px 44px -26px rgba(43,38,32,.35)}
.ws-il-slot.empty{display:none}
.ws-il-close{max-width:560px;margin:0 auto 44px}
/* 01 Problem — 일러스트 + 에디토리얼 행 */
.ws-problem-wrap{max-width:1020px;margin:12px auto 0;display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:center}
.ws-il-problem{min-height:300px}
.ws-problems{display:flex;flex-direction:column;border-top:1px solid var(--ws-ink)}
.ws-problem{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  padding:24px 4px 22px;border-bottom:1px solid var(--ws-line)}
.ws-problem .no{font-family:var(--font-en);font-weight:700;font-size:30px;line-height:1;
  color:transparent;-webkit-text-stroke:1.1px var(--ws-orange)}
.ws-problem .t{font-size:17px;font-weight:700;letter-spacing:-.01em;word-break:keep-all}
.ws-problem .d{margin-top:6px;font-size:13.5px;line-height:1.65;color:var(--ws-sub);word-break:keep-all}
/* 02 Strategy — 에디토리얼 인덱스 (카드·알약 없이 타이포와 선으로) */
.ws-strat-head{max-width:840px;margin:0 auto 26px;text-align:left}
.ws-strat-label{display:flex;align-items:center;gap:14px;font-family:var(--font-en);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ws-ink)}
.ws-strat-label i{flex:0 0 44px;height:1px;background:var(--ws-ink);order:-1}
.ws-strat-label::after{content:"";flex:1;height:1px;background:var(--ws-line)}
.ws-strat-head h2{margin-top:26px;font-size:clamp(30px,4.6vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.22;word-break:keep-all}
.ws-mark{background:linear-gradient(180deg,transparent 66%,rgba(238,138,46,.42) 66%)}
.ws-strat-head p{margin-top:16px;max-width:480px;font-size:15px;line-height:1.7;color:var(--ws-sub);word-break:keep-all}
/* 스크롤 루트 다이어그램 — 점선 경로 + 경유지 노드 (순서 = 스크롤 순서) */
.ws-strat{max-width:840px;margin:40px auto 0}
.ws-strat-row{display:grid;grid-template-columns:40px 112px 1fr;gap:26px;align-items:start;padding:30px 0}
.ws-strat-row .body{transition:transform .25s}
.ws-strat-row .stop{position:relative;align-self:stretch}
.ws-strat-row .stop::before{content:"";position:absolute;left:50%;top:-30px;bottom:-30px;transform:translateX(-50%);
  border-left:2px dashed rgba(238,138,46,.45)}
.ws-strat-row:first-child .stop::before{top:40px}
.ws-strat-row:last-child .stop::before{bottom:calc(100% - 40px)}
.ws-strat-row .stop i{position:absolute;left:50%;top:33px;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;
  background:#fff;border:3.5px solid var(--ws-orange);box-shadow:0 0 0 5px rgba(238,138,46,.14);z-index:1}
.ws-strat-row .t{font-size:clamp(19px,2.3vw,27px);font-weight:700;letter-spacing:-.02em;word-break:keep-all}
.ws-strat-row .d{margin-top:9px;max-width:56ch;font-size:14px;line-height:1.7;color:var(--ws-sub);word-break:keep-all}
.ws-strat-row .role{font-size:19px;font-weight:700;color:var(--ws-orange);letter-spacing:-.02em;padding-top:4px}
.ws-strat-row .role em{display:block;margin-top:4px;font-style:normal;font-family:var(--font-en);font-weight:600;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ws-faint,#a8a096)}
@media (hover:hover){
  .ws-strat-row:hover .body{transform:translateX(12px)}
  .ws-strat-row:hover .stop i{box-shadow:0 0 0 7px rgba(238,138,46,.2)}
}
/* 03 After — 섹션 투어 */
.ws-tour{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:56px}
.ws-tour figure{margin:0}
/* 03 After — 끊김 없는 전체 화면 + 사이드 주석 */
.ws-canvas.wide{max-width:1400px}
.ws-walk{display:grid;grid-template-columns:264px 1fr;gap:clamp(24px,3vw,48px);align-items:start;
  width:100%;margin:0 auto}
.ws-walk-notes{position:sticky;top:120px;display:flex;flex-direction:column;gap:12px}
.ws-note{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--ws-line);
  transition:border-color .3s ease,box-shadow .3s ease,opacity .3s ease,translate .2s ease;
  opacity:.5;cursor:pointer;text-align:left}
.ws-note.on{opacity:1;border-color:var(--ws-orange);
  box-shadow:0 14px 30px -20px rgba(238,138,46,.65)}
@media (hover:hover){ .ws-note:hover{opacity:1;border-color:#f0c48c;translate:0 -2px} }
.ws-note:focus-visible{outline:2px solid var(--ws-orange);outline-offset:3px}
.ws-note .no{font-family:var(--font-en);font-weight:700;font-size:13px;letter-spacing:.02em;
  color:#fff;background:#d9cec0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.ws-note.on .no{background:var(--ws-orange)}
.ws-note .t{font-size:15px;font-weight:700;letter-spacing:-.02em;word-break:keep-all}
.ws-note .d{margin-top:5px;font-size:13px;line-height:1.6;color:var(--ws-sub);word-break:keep-all}
.ws-walk-shot{position:relative;border-radius:16px;overflow:hidden;
  box-shadow:0 34px 70px -40px rgba(43,38,32,.5),0 0 0 1px var(--ws-line)}
.ws-walk-shot img{width:100%;display:block}
.ws-walk-mark{position:absolute;left:0;right:0;pointer-events:none}
@media (max-width:900px){
  .ws-walk{grid-template-columns:1fr;gap:22px}
  .ws-walk-notes{position:static;flex-direction:column}
  .ws-note{opacity:1}
}
/* 캠페인 상세 링크 칩 */
.ws-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-size:13.5px;font-weight:600;color:var(--ws-ink);
  border:1px solid var(--ws-line);border-radius:999px;background:#fff;padding:9px 18px;cursor:pointer;
  transition:border-color .2s, translate .2s}
.ws-link:hover{border-color:var(--ws-orange);translate:0 -2px}
.ws-link em{font-style:normal;color:var(--ws-orange)}
/* 04 스크롤 대비 — 같은 폭, 달라진 길이 */
/* 04 길이 대비 — 같은 상단선에서 나란히 세워 비교 */
.ws-compare{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;max-width:1020px;margin:0 auto}
.ws-compare figure{margin:0;min-width:0;position:relative}
.ws-compare .tag{margin-bottom:11px;font-family:var(--font-en);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;color:var(--ws-sub)}
.ws-compare .after .tag{color:var(--ws-orange)}
/* 길이 마커 — 이전 메인이 끝나던 높이를 AFTER 위에 점선으로 표시 */
/* BEFORE 아래끝에 붙어(top:100%) AFTER 칸까지 가로지르는 길이 마커 */
.ws-endline{position:absolute;left:-14px;right:calc(-100% - 40px);top:100%;
  border-top:2px dashed rgba(238,138,46,.85);z-index:4}
.ws-endline span{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  background:var(--ws-orange);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:-.01em;
  border-radius:999px;padding:5px 13px;white-space:nowrap;box-shadow:0 10px 22px -10px rgba(238,138,46,.75)}
/* 05 모바일 — 심플 폰 목업 + 오토 롤링 스크롤 */
.ws-mobile{max-width:100%;margin:0 auto}
.ws-mobile figure{margin:0}
.ws-phone{position:relative;width:399px;max-width:100%;margin:0 auto;background:#17141a;border-radius:54px;padding:12px;
  box-shadow:0 40px 74px -34px rgba(43,38,32,.55), inset 0 0 0 2px rgba(255,255,255,.06)}
.ws-phone::after{content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);
  width:104px;height:26px;border-radius:999px;background:#17141a;z-index:2}
.ws-phone-scroll{height:812px;overflow-y:auto;border-radius:42px;background:#fff;
  scrollbar-width:none;overscroll-behavior:contain;cursor:grab}
.ws-phone-scroll.drag{cursor:grabbing}
.ws-phone-scroll::-webkit-scrollbar{display:none}
.ws-phone-scroll img{width:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.ws-phone-hint{margin-top:16px;text-align:center;font-size:12.5px;color:var(--ink-3)}
/* 존 배경 */
.ws-zwarm{background:#fbf7f1}
/* 클로징 — 성과 스탯 (여권 도장) */
.ws-close-stat{max-width:520px;margin:0 auto 38px;border:2.5px dashed rgba(238,138,46,.55);border-radius:20px;
  background:#fffdf8;padding:30px 24px 26px;rotate:-1.6deg}
.ws-close-stat::before{content:'ARRIVAL · 2023.05';display:block;margin-bottom:10px;
  font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.26em;color:#cbb391}
.ws-close-stat .n{font-family:var(--font-en);font-size:clamp(34px,4.4vw,48px);font-weight:600;color:var(--ws-orange);line-height:1.1}
.ws-close-stat .t{margin-top:8px;font-size:14px;color:var(--ws-sub);word-break:keep-all}
.ws-close{padding:110px 0 40px;text-align:center}
.ws-close p{max-width:660px;margin:0 auto;font-size:clamp(15px,1.7vw,19px);line-height:1.8;color:var(--ws-sub);word-break:keep-all}
.ws-close p b{color:var(--ws-ink)}
.ws-foot{text-align:center;padding:56px 0 110px}
@media (max-width:760px){
  .ws-sec{padding:64px 0}
  .ws-hero{padding:60px 0 48px}
  .ws-meta{grid-template-columns:1fr 1fr;padding:4px 0}
  .ws-meta>div{padding:14px 20px}
  .ws-meta>div+div{border-left:0}
  .ws-meta>div:nth-child(even){border-left:1.5px dashed #e8dac5}
  .ws-meta>div:nth-child(n+3){border-top:1.5px dashed #e8dac5}
  .ws-problem-wrap{grid-template-columns:1fr;gap:26px}
  .ws-il-problem{min-height:200px;max-width:300px;margin:0 auto}
  .ws-strat-row{grid-template-columns:26px 1fr;gap:14px;padding:24px 0}
  .ws-strat-row .stop::before{top:-24px;bottom:-24px}
  .ws-strat-row .stop i{width:11px;height:11px;border-width:3px;box-shadow:0 0 0 4px rgba(238,138,46,.14);top:20px}
  .ws-strat-row:first-child .stop::before{top:26px}
  .ws-strat-row:last-child .stop::before{bottom:calc(100% - 26px)}
  .ws-strat-row .role{display:flex;align-items:baseline;gap:8px;padding-top:0;font-size:16px}
  .ws-strat-row .role em{margin-top:0}
  .ws-strat-row .body{grid-column:2} /* 모바일 2열 그리드에서 본문이 26px 첫 열로 떨어지던 문제 */
  .ws-stopchip{top:10px;left:10px;gap:6px;padding:4px 10px 4px 5px;font-size:11px}
  .ws-stopchip i{width:18px;height:18px;font-size:9px}
  .ws-phone{border-radius:44px;padding:10px}
  .ws-phone::after{width:88px;height:22px;top:20px}
  .ws-phone-scroll{height:600px;border-radius:36px}
  .ws-compare{gap:12px}
  .ws-compare .ws-browser .bar{height:26px;padding:0 10px}
  .ws-compare .ws-browser .bar span{display:none}
  .ws-endline{right:calc(-100% - 24px)}
  .ws-endline span{font-size:10.5px;padding:4px 10px}
  .ws-endline span{font-size:10px;padding:4px 10px}
  .ws-close{padding:70px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .ws-fade{animation:none}
  .ws-fx{opacity:1;transform:none;transition:none}
}

/* ============================================================
   삼성화재 마이키즈컨설팅 상세 (#workDetail 안에 렌더)
   이미지: images/work/mykids/ · 2017 원본에서 재추출
     - PC 1440~1920px / 모바일 640px 원본 PNG → webp
     - 일러스트는 PSD 안의 벡터 스마트오브젝트를 리렌더 (해상도 무손실)
   구성: 히어로 / 수상 / 일러스트 시스템 / 연령 5종 스위처(시그니처) / 진단 플로우 / 결과 리포트 / 모바일웹 / 클로징
   ============================================================ */
.detail-full.mk-host{padding-left:0;padding-right:0}
.mk{--mk-sky:#4fb4de;--mk-sky-2:#8ad4ea;--mk-deep:#2a89b4;--mk-pale:#eaf7fc;--mk-mint:#e3f3ef;
  --mk-pink:#f2a2b7;--mk-green:#9ecf7f;--mk-ink:#2f4550;--mk-sub:#6f8894;--mk-line:#dbebf2;
  overflow-x:clip;line-height:1.6;color:var(--mk-ink)}
.mk img{max-width:100%;height:auto;display:block}
.mk-canvas{width:100%;max-width:1152px;margin:0 auto;padding:0 var(--margin);position:relative}
.mk-sec{padding:104px 0}
.mk h2{font-size:clamp(25px,3.2vw,37px);font-weight:700;letter-spacing:-.022em;line-height:1.3;word-break:keep-all}
.mk-sub{margin-top:15px;font-size:clamp(14px,1.45vw,16.5px);color:var(--mk-sub);word-break:keep-all}
.mk-label{font-family:var(--font-en);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mk-deep)}
.mk-head{max-width:660px;margin-bottom:48px}
.mk-fade{animation:ezFadeUp .8s ease both}
.mk-fx{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.mk-fx.in{opacity:1;transform:none}

/* ── 공용 디바이스 프레임. 스크린샷을 원본 해상도 그대로 담는 껍데기 ── */
.mk-browser{border-radius:13px;overflow:hidden;background:#fff;border:1px solid var(--mk-line);
  box-shadow:0 34px 64px -34px rgba(28,74,96,.46)}
.mk-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#f3f8fa;border-bottom:1px solid var(--mk-line)}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:#dde7ec}
.mk-bar span{flex:1;margin-left:9px;height:19px;border-radius:999px;background:#fff;border:1px solid var(--mk-line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-en);font-size:9.5px;letter-spacing:.02em;color:#a3bac5}
.mk-phone{border-radius:27px;background:#fff;border:1px solid var(--mk-line);padding:7px;
  box-shadow:0 26px 46px -26px rgba(28,74,96,.5)}
.mk-phone>*{border-radius:21px;overflow:hidden}

/* 긴 화면을 담는 스크롤 프레임. 올려두면(또는 누르면) 페이지 끝까지 훑고 내려간다.
   --vis = 프레임에 보이는 구간이 이미지 높이에서 차지하는 비율(%). 폭과 무관한 상수라
   translateY 를 % 로 걸면 어떤 컬럼 너비에서도 정확히 끝까지 스크롤된다. */
.mk-scroll{position:relative;overflow:hidden;background:#fff}
.mk-scroll img{width:100%;transition:transform 6s linear}
.mk-scroll.on img{transform:translateY(calc(var(--vis) - 100%))}
.mk-hint{position:absolute;right:9px;bottom:9px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  background:rgba(47,69,80,.72);color:#fff;font-family:var(--font-en);font-size:9.5px;
  font-weight:600;letter-spacing:.08em;pointer-events:none;
  opacity:1;transition:opacity .3s ease}
.mk-scroll.on .mk-hint{opacity:0}

/* ── HERO ── */
/* 구름이 흰 채움이라, 배경이 흰색에 가까우면 윤곽선만 남아 스케치처럼 보인다.
   전 구간을 민트로 깔아 구름이 형태로 읽히게 한다 */
.mk-zsky{position:relative;background:linear-gradient(166deg,#e6f5f1 0%,#dcf0f0 46%,#cde7f0 100%)}
.mk-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* 구름 벡터는 뺐다. 흰 채움 + 헤어라인이라 밝은 배경에서 채움이 묻히고
   윤곽선만 남아 스케치처럼 보인다. 배경은 민트 그라데이션만으로 간다 */
/* 잎·꽃잎은 색이 채워진 것만 쓴다(라인만 남은 꽃 벡터는 미완성으로 보인다).
   좌우로 고르게 흩되, 글자가 앉는 자리(아이브로우~메타 표)는 비워 둔다.
   왼쪽은 제목 위·메타 아래의 세로 여백을, 오른쪽은 목업 둘레를 쓴다 */
.mk-deco .ob{position:absolute;animation:mkFloat 9s ease-in-out infinite}
.mk-deco .ob1{width:88px;left:1.5%;top:9%;--rot:-8deg;animation-delay:-.4s}
.mk-deco .ob2{width:64px;left:9%;top:2%;--rot:14deg;animation-delay:-3.7s}
.mk-deco .ob3{width:74px;left:4%;bottom:7%;--rot:-16deg;animation-delay:-1.9s}
.mk-deco .ob4{width:17px;left:2%;bottom:31%;animation-delay:-5.1s}
.mk-deco .ob5{width:96px;right:2%;top:7%;--rot:10deg;animation-delay:-2.4s}
.mk-deco .ob6{width:42px;right:33%;top:3%;--rot:-12deg;animation-delay:-5.4s}
.mk-deco .ob7{width:88px;right:21%;bottom:2%;--rot:6deg;animation-delay:-1.6s}
.mk-deco .ob8{width:72px;right:1.5%;bottom:14%;--rot:-6deg;animation-delay:-3.1s}
.mk-deco .ob9{width:17px;right:37%;bottom:7%;animation-delay:-2.2s}
@keyframes mkFloat{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-17px) rotate(calc(var(--rot,0deg) + 4deg))}}
.mk-hero{position:relative;padding:78px 0 118px}
.mk-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:50px;align-items:center}
.mk-hero h1{margin-top:14px;font-size:clamp(29px,3.9vw,46px);font-weight:700;letter-spacing:-.026em;line-height:1.26;word-break:keep-all}
.mk-hero h1 em{font-style:normal;color:var(--mk-deep)}
.mk-hero-sub{margin-top:17px;max-width:40ch;font-size:clamp(14px,1.45vw,16.5px);color:#5d7885;word-break:keep-all}
.mk-meta{margin-top:30px;max-width:470px;display:grid;grid-template-columns:1fr 1fr;gap:17px 24px;
  border-top:1px solid rgba(47,69,80,.2);padding-top:19px}
.mk-meta .k{font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--mk-deep)}
.mk-meta .v{margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--mk-ink);word-break:keep-all}
/* 폰이 브라우저 왼쪽 아래에 걸쳐 PC·모바일 동시 대응을 한 장면에 보여준다 */
.mk-hero-shot{position:relative;z-index:2}
.mk-hero-shot .mk-phone{position:absolute;left:-7%;bottom:-13%;width:25%;z-index:3}

/* ── 수상 밴드 ── */
.mk-award{background:#fff;border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line)}
.mk-award-in{display:flex;align-items:center;justify-content:center;gap:14px 30px;flex-wrap:wrap;
  padding:30px 0;text-align:center}
.mk-award .wa{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-en);
  font-size:12.5px;font-weight:600;letter-spacing:.13em;color:var(--mk-deep)}
.mk-award .wa b{background:#e4362f;color:#fff;padding:4px 8px;border-radius:4px;font-size:11.5px;letter-spacing:.06em}
.mk-award .pz{display:inline-flex;gap:9px;flex-wrap:wrap;justify-content:center}
.mk-award .pz span{padding:6px 14px;border-radius:999px;background:var(--mk-pale);
  font-size:13px;color:var(--mk-ink)}
.mk-award .pz b{font-weight:600;color:var(--mk-deep)}

/* ── 일러스트 시스템 ── */
.mk-zmint{background:linear-gradient(180deg,#fff 0%,var(--mk-pale) 100%)}
.mk-ill{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:52px;align-items:center}
.mk-ill-notes{margin-top:30px;display:grid;gap:13px}
.mk-ill-notes li{position:relative;padding-left:19px;font-size:14.5px;color:var(--mk-sub);word-break:keep-all;list-style:none}
.mk-ill-notes li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--mk-sky-2)}
.mk-ill-notes li b{color:var(--mk-ink);font-weight:600}
.mk-ill-art img{width:100%}

/* ── 생애주기 레일 (시그니처) ──
   다섯 유형을 목록으로 늘어놓지 않고 원본 UI처럼 성장 곡선 위에 세운다.
   다섯 아이가 늘 함께 보이므로, 한 유형만 떠 있어 미완성으로 읽히지 않는다 */
.mk-life{position:relative;height:330px;margin-bottom:52px}
.mk-life svg{position:absolute;inset:0;width:100%;height:100%}
.mk-life-row{position:relative;height:100%;display:grid;grid-template-columns:repeat(5,1fr);align-items:end}
.mk-age{border:0;background:none;padding:0 0 calc(var(--i) * 22px);
  display:flex;flex-direction:column;align-items:center;transition:padding-bottom .3s ease}
.mk-age .yr{font-size:12.5px;color:var(--mk-sub);white-space:nowrap;transition:color .3s ease}
.mk-age .dot{margin-top:10px;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--mk-sky-2);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
/* 캐릭터는 모두 1000px 높이 원본이라 height 로 맞추면 시각 크기가 고르게 떨어진다 */
.mk-age .fig{height:150px;margin-top:12px;display:flex;align-items:flex-end;justify-content:center}
.mk-age .fig img{height:80%;width:auto;max-width:none;
  filter:grayscale(.5) opacity(.5);transition:filter .35s ease,height .35s ease}
.mk-age .bd{margin-top:12px;padding:4px 12px;border-radius:999px;border:1px solid var(--mk-line);
  background:#fff;font-size:12px;color:var(--mk-sub);white-space:nowrap;
  transition:background .3s ease,border-color .3s ease,color .3s ease}
.mk-age[aria-pressed="true"] .yr{color:var(--mk-deep);font-weight:600}
.mk-age[aria-pressed="true"] .dot{background:var(--mk-sky);border-color:var(--mk-sky);box-shadow:0 0 0 5px rgba(79,180,222,.22)}
.mk-age[aria-pressed="true"] .fig img{filter:none;height:100%}
.mk-age[aria-pressed="true"] .bd{background:var(--mk-sky);border-color:var(--mk-sky);color:#fff;font-weight:600}
.mk-age:focus-visible{outline:2px solid var(--mk-deep);outline-offset:3px;border-radius:10px}

/* ── 선택한 유형의 카피와 화면 ── */
.mk-type-copy{max-width:730px;margin-bottom:34px}
.mk-type-copy .age{display:inline-block;padding:5px 13px;border-radius:999px;background:var(--mk-sky);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em}
/* 유형마다 헤드라인 길이가 달라 min-height 로 잡아 두어야 화면이 튀지 않는다 */
.mk-type-copy h3{margin-top:15px;font-size:clamp(21px,2.5vw,29px);font-weight:700;
  letter-spacing:-.022em;line-height:1.34;word-break:keep-all;min-height:2.68em}
.mk-type-copy p{margin-top:13px;font-size:14.5px;line-height:1.75;color:var(--mk-sub);word-break:keep-all}
.mk-type-shot{margin:0}
/* 화면은 16:7.5(1920x900) 고정 무대 위에서 교차 페이드 */
.mk-type-stage{position:relative;border-radius:13px;overflow:hidden;
  border:1px solid var(--mk-line);background:#fff;box-shadow:0 30px 58px -34px rgba(28,74,96,.42)}
.mk-type-stage::before{content:"";display:block;padding-top:46.875%}
.mk-type-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.mk-type-stage img.on{opacity:1}
.mk-type-shot figcaption{margin-top:16px;max-width:60ch;font-size:13.5px;line-height:1.7;
  color:var(--mk-sub);word-break:keep-all}

/* ── 진단 플로우 ── */
.mk-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 28px}
.mk-step{margin:0;position:relative}
/* 등장 모션이 끝난 뒤에는 transform 을 호버 확대가 넘겨받는다.
   .mk-fx 의 .8s 를 그대로 쓰면 확대가 굼떠서 전환만 짧게 덮어쓴다 */
.mk-step.in{transition:opacity .8s ease,transform .34s cubic-bezier(.2,.7,.3,1)}
.mk-step .no{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.mk-step .no b{width:24px;height:24px;border-radius:50%;background:var(--mk-sky);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-size:11.5px;font-weight:600}
.mk-step .no span{font-size:14px;font-weight:600;color:var(--mk-ink)}
.mk-step .mk-browser{border-radius:11px}
.mk-step figcaption{margin-top:14px;font-size:13.5px;line-height:1.68;color:var(--mk-sub);word-break:keep-all}

/* ── 결과 리포트 ── */
.mk-zpale{background:var(--mk-pale)}
.mk-report{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}
.mk-notes{display:grid;gap:18px}
.mk-note{padding:22px 24px;border-radius:13px;background:#fff;border:1px solid var(--mk-line)}
.mk-note b{display:block;font-size:15px;font-weight:600;color:var(--mk-ink);margin-bottom:8px}
.mk-note p{font-size:13.5px;line-height:1.72;color:var(--mk-sub);word-break:keep-all}

/* ── 모바일웹 ── */
.mk-mobiles{display:flex;gap:26px;overflow-x:auto;padding:6px 0 20px;scroll-snap-type:x mandatory;scrollbar-width:none}
.mk-mobiles::-webkit-scrollbar{display:none}
.mk-mobiles figure{margin:0;flex:0 0 232px;scroll-snap-align:start}
.mk-mobiles figcaption{margin-top:14px;font-size:13px;color:var(--mk-sub);text-align:center;word-break:keep-all}

/* ── 클로징 ── */
.mk-close{padding:112px 0 40px;text-align:center}
.mk-close p{max-width:660px;margin:0 auto;font-size:clamp(15px,1.7vw,19px);line-height:1.8;color:var(--mk-sub);word-break:keep-all}
.mk-close p b{color:var(--mk-ink)}
.mk-foot{text-align:center;padding:56px 0 110px}

@media (hover:hover) and (pointer:fine){
  .mk-age:hover .dot{border-color:var(--mk-sky)}
  .mk-age:hover .bd{color:var(--mk-deep);border-color:var(--mk-sky-2)}
  .mk-age:hover .fig img{filter:grayscale(.15) opacity(.85)}
  .mk-age[aria-pressed="true"]:hover .fig img{filter:none}
  /* 올린 카드가 이웃 위로 올라와 크게 열린다. 1440px 원본을 담고 있어
     1.32배까지 키워도 원본 해상도 안이라 선이 뭉개지지 않는다 */
  .mk-step:hover{z-index:5;transform:scale(1.32)}
  .mk-step:hover .mk-browser{box-shadow:0 44px 74px -30px rgba(28,74,96,.52)}
}
@media (max-width:980px){
  /* 한 컬럼이 되면 본문이 폭 전체를 쓴다. 잎이 글자에 걸리므로 접는다 */
  .mk-deco{display:none}
  .mk-hero-grid{grid-template-columns:1fr;gap:44px}
  .mk-hero-shot .mk-phone{left:auto;right:2%;bottom:-11%;width:21%}
  .mk-ill{grid-template-columns:1fr;gap:38px}
  .mk-life{height:268px}
  .mk-age{padding-bottom:calc(var(--i) * 17px)}
  .mk-age .fig{height:118px}
  .mk-flow{grid-template-columns:repeat(2,1fr)}
  .mk-report{grid-template-columns:1fr;gap:32px}
}
@media (max-width:760px){
  .mk-sec{padding:66px 0}
  .mk-hero{padding:56px 0 78px}
  .mk-meta{gap:15px 18px}
  .mk-type-copy h3{min-height:0}
  /* 곡선을 5등분하면 한 칸이 70px도 안 된다. 곡선을 접고 3열 2행으로 세운다 */
  .mk-life{height:auto;margin-bottom:36px}
  .mk-life svg{display:none}
  .mk-life-row{grid-template-columns:repeat(3,1fr);gap:26px 8px;align-items:start}
  .mk-age{padding-bottom:0}
  .mk-age .fig{height:96px;margin-top:10px}
  .mk-age .yr{font-size:11.5px}
  .mk-age .bd{margin-top:9px;font-size:11.5px;padding:3px 10px}
  .mk-flow{grid-template-columns:1fr;gap:34px}
  .mk-mobiles figure{flex-basis:190px}
  .mk-close{padding:72px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .mk-fade{animation:none}
  .mk-fx{opacity:1;transform:none;transition:none}
  .mk-deco img{animation:none}
  .mk-scroll img,.mk-type-stage img,.mk-age .fig img{transition:none}
}

/* ============================================================
   CJ 원오더 (One Order) 상세 (#workDetail 안에 렌더)
   이미지: images/work/cjorder/ · 2018 원본 PSD·시안에서 재추출
     - 모바일웹 720×1280 / 키오스크 1080×1920 → 720×1280 / 매장 실사진·영상
     - 히어로와 키오스크 기기는 당시 제작한 시안 보드에서 크롭
   구성: 히어로 / 오버뷰 3채널 / 모바일웹 / 키오스크 / 매장 태블릿 / 클로징
   ============================================================ */
.detail-full.cj-host{padding-left:0;padding-right:0}
.cj{--cj-red:#e02b1d;--cj-gold:#8d6a3c;--cj-ink:#1f2733;--cj-sub:#5c6675;
  --cj-line:#e2e7ee;--cj-pale:#eef2f8;
  overflow-x:clip;line-height:1.6;color:var(--cj-ink)}
.cj img{max-width:100%;height:auto;display:block}
.cj-canvas{width:100%;max-width:1152px;margin:0 auto;padding:0 var(--margin);position:relative;z-index:1}
.cj-sec{padding:100px 0}
.cj-head{text-align:center;margin-bottom:52px}
.cj-eyebrow{font-family:var(--font-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--cj-red);margin-bottom:13px}
.cj-head h2{font-size:clamp(24px,3.3vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.32;color:var(--cj-ink);word-break:keep-all}
.cj-head .cj-sub{margin:15px auto 0;max-width:720px;font-size:clamp(14px,1.5vw,17px);color:var(--cj-sub);word-break:keep-all}
/* 등장 모션 */
.cj-fade{animation:cjFadeUp .8s ease both}
@keyframes cjFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.cj-fx{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.cj-fx.in{opacity:1;transform:none}

/* 히어로 — 사용자 제작 배경 보드(hero-bg.webp)를 풀와이드로 깔고,
   그 위에 아이폰 목업(hero-key.webp, 투명 배경)은 왼쪽 · 텍스트는 오른쪽 컬럼 */
.cj-za{position:relative;overflow:hidden;background:#eef1f8 url('images/work/cjorder/hero-bg.webp') center/cover no-repeat}
.cj-hero{padding:0}
.cj-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;
  gap:clamp(24px,3.5vw,64px);max-width:1480px;margin:0 auto;padding:56px 0 64px;position:relative;z-index:1}
.cj-hero-img{padding-left:clamp(16px,3.5vw,64px)}
.cj-hero-img img{width:100%;max-width:640px;display:block;margin:0 auto;
  filter:drop-shadow(0 42px 56px rgba(31,39,51,.22))}
.cj-hero-txt{padding-right:var(--margin);max-width:540px;text-align:left}
.cj-hero-eyebrow{font-family:var(--font-en);font-weight:600;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cj-red)}
.cj-hero h1{margin-top:16px;font-size:clamp(27px,3.4vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--cj-ink);word-break:keep-all}
.cj-hero h1 em{font-style:normal;color:var(--cj-red)}
.cj-hero-sub{margin-top:16px;font-size:clamp(14px,1.5vw,16.5px);color:var(--cj-sub);word-break:keep-all}
.cj-meta{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;text-align:left;
  border-top:1px solid var(--cj-ink);padding-top:20px}
.cj-meta .k{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--cj-red)}
.cj-meta .v{margin-top:6px;font-size:14px;line-height:1.55;color:var(--cj-ink)}
.cj-cap{margin-top:14px;text-align:center;font-size:13.5px;line-height:1.65;color:var(--ink-3);word-break:keep-all}
.cj-cap b{color:var(--cj-ink);font-weight:600}

/* 01 Overview — 3채널 카드 */
.cj-ch{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cj-ch-item{border:1px solid var(--cj-line);border-radius:14px;background:#fff;padding:28px 24px}
.cj-ch-item .n{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--cj-red)}
.cj-ch-item h3{margin-top:10px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--cj-ink)}
.cj-ch-item p{margin-top:9px;font-size:14px;line-height:1.65;color:var(--cj-sub);word-break:keep-all}
.cj-ch-item .s{margin-top:14px;padding-top:12px;border-top:1px dashed var(--cj-line);
  font-family:var(--font-en);font-size:12px;letter-spacing:.04em;color:var(--ink-3)}
.cj-note{max-width:820px;margin:34px auto 0;padding:20px 24px;border-left:3px solid var(--cj-gold);
  background:#faf7f3;font-size:14.5px;line-height:1.75;color:var(--cj-sub);word-break:keep-all}
.cj-note b{color:var(--cj-ink);font-weight:600}

/* 화면 그리드 — 모바일웹(밝은 프레임) / 키오스크(다크 프레임) */
.cj-blocklabel{display:flex;align-items:center;gap:12px;margin:52px 0 24px;
  font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--cj-ink)}
.cj-blocklabel::after{content:"";flex:1;height:1px;background:var(--cj-line)}
.cj-blocklabel span{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--cj-red)}
.cj-grid{display:grid;gap:22px}
.cj-grid.g3{grid-template-columns:repeat(3,1fr)}
.cj-grid.g4{grid-template-columns:repeat(4,1fr)}
.cj-grid figure{margin:0}
.cj-screen{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--cj-line);
  box-shadow:0 22px 44px -30px rgba(31,39,51,.42)}
.cj-screen img{width:100%}
.cj-screen.dark{border-color:#2a2f36;border-width:6px;border-radius:18px;background:#2a2f36;
  box-shadow:0 24px 48px -28px rgba(0,0,0,.55)}

/* 03 키오스크 — 실물 기기 + 카피 */
.cj-zk{background:linear-gradient(180deg,#ffffff 0%,#f5f7fa 100%)}
.cj-kiosk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center;margin-bottom:12px}
.cj-kiosk-txt p{font-size:15.5px;line-height:1.85;color:var(--cj-sub);word-break:keep-all}
.cj-kiosk-txt p+p{margin-top:16px}
.cj-kiosk-txt b{color:var(--cj-ink);font-weight:600}
.cj-kiosk-dev img{margin:0 auto;max-width:min(400px,100%);filter:drop-shadow(0 34px 44px rgba(31,39,51,.28))}

/* 04 매장 태블릿 — 다크 존 */
.cj-zdark{background:linear-gradient(180deg,#20242b 0%,#171a20 100%);color:#e9edf3}
.cj-zdark .cj-head h2{color:#fff}
.cj-zdark .cj-head .cj-sub{color:#a6b0bd}
.cj-zdark .cj-cap{color:#8d97a4}
.cj-zdark .cj-cap b{color:#e9edf3}
/* 매장 영상 — 픽스다인 원본처럼 섹션을 가로로 꽉 채우는 풀블리드 */
.cj-video{width:min(100vw,1920px);margin-left:calc(50% - min(50vw,960px));overflow:hidden;background:#000}
.cj-video video{width:100%;height:auto;aspect-ratio:16/9;display:block}
.cj-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.cj-photos figure{margin:0}
.cj-photo{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}

/* 클로징 */
.cj-close{padding:110px 0 40px;text-align:center}
.cj-close p{max-width:680px;margin:0 auto;font-size:clamp(15px,1.7vw,19px);line-height:1.8;color:var(--cj-sub);word-break:keep-all}
.cj-close p b{color:var(--cj-ink)}
.cj-foot{text-align:center;padding:56px 0 110px}
@media (hover:hover) and (pointer:fine){
  .cj-screen,.cj-photo{transition:translate .35s ease,box-shadow .35s ease}
  .cj-screen:hover{translate:0 -6px;box-shadow:0 28px 52px -26px rgba(31,39,51,.5)}
  .cj-photo:hover{translate:0 -4px}
}
@media (max-width:980px){
  .cj-grid.g4{grid-template-columns:repeat(2,1fr)}
  .cj-kiosk{grid-template-columns:minmax(0,1fr);gap:30px}
  .cj-kiosk-dev{order:-1}
  .cj-photos{grid-template-columns:repeat(2,1fr)}
  /* 히어로: 이미지 위 · 텍스트 아래로 스택 */
  .cj-hero-grid{grid-template-columns:1fr;gap:28px;padding:96px 0 56px} /* 고정 헤더(74px) 아래로 */
  .cj-hero-img{padding:0 var(--margin)}
  .cj-hero-img img{max-width:380px;filter:drop-shadow(0 26px 36px rgba(31,39,51,.2))}
  .cj-hero-txt{max-width:none;padding:0 var(--margin)}
}
@media (max-width:760px){
  .cj-sec{padding:64px 0}
  .cj-meta{grid-template-columns:1fr 1fr;gap:16px}
  .cj-ch{grid-template-columns:1fr}
  .cj-grid.g3{grid-template-columns:repeat(2,1fr)}
  .cj-grid{gap:16px}
  .cj-blocklabel{margin:38px 0 18px}
  .cj-close{padding:70px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .cj-fade{animation:none}
  .cj-fx{opacity:1;transform:none;transition:none}
}

/* ============================================================
   ARCHIVE (list)
   ============================================================ */
.arc-grid{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.arc-grid::-webkit-scrollbar{display:none}
.arc-card{flex:0 0 calc((100% - 2*var(--gutter))/3);cursor:pointer;position:relative;aspect-ratio:3/4.1;border-radius:6px;overflow:hidden;scroll-snap-align:start}
.arc-card .ph{align-items:flex-start;justify-content:flex-start;flex-direction:column}
.arc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,48,.28),transparent 38%);transition:opacity .3s;pointer-events:none}   /* 오버레이가 카드 링크 클릭을 가로채지 않도록 */
.arc-card:hover::after{opacity:.55}
.arc-thumb{position:absolute;inset:0;transition:transform .6s ease}
.arc-card:hover .arc-thumb{transform:scale(1.04)}
.arc-text{position:absolute;top:28px;left:28px;right:28px;z-index:3;color:#fff}
.arc-title{font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.25;letter-spacing:-.01em;word-break:keep-all}
.arc-desc{margin-top:14px;font-size:14px;line-height:1.6;opacity:.95;white-space:pre-line}
.arc-date{position:absolute;right:24px;bottom:22px;z-index:3;color:#fff;font-family:var(--font-en);font-size:14px;opacity:.9}
.arrows{display:flex;gap:10px;margin-top:36px}
.arrow{width:54px;height:48px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;transition:.2s}
.arrow:hover{background:var(--ink);color:#fff}
.arrow:disabled{opacity:.28;pointer-events:none}

/* ============================================================
   ARCHIVE DETAIL — 'ai' 에세이 (#arcDetail 안에 렌더)
   이미지: images/archive/ai/  ·  포스터의 민트 그린을 포인트로 사용
   ============================================================ */
.ax{--ax-green:#10b981;--ax-deep:#0a8f68;--ax-mint:#d5f5e6;
  max-width:680px;margin:0 auto;padding:56px 0 60px;
  font-size:16.5px;line-height:1.85;color:var(--ink)}
.ax p{margin:0 0 26px}
.ax-eyebrow{display:flex;align-items:baseline;gap:14px;
  font-family:var(--font-en);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ax-deep)}
.ax-eyebrow .ax-date{font-weight:500;letter-spacing:.06em;color:var(--ink-3)}
.ax-title{font-size:clamp(30px,4.2vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.28;margin:18px 0 14px}
.ax-sub{font-size:clamp(15px,1.7vw,18px);color:var(--ink-2)}
.ax-sub b{color:var(--ax-deep);font-weight:700}
.ax-rule{border:0;border-top:1px solid var(--ink);margin:36px 0 46px}
.ax-quote{font-size:clamp(20px,2.4vw,25px);font-weight:700;line-height:1.55;letter-spacing:-.01em;margin-bottom:26px}
.ax-answer{margin:36px 0;text-align:center;font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:.02em;color:var(--ax-deep)}
.ax-div{display:flex;align-items:center;gap:16px;margin:54px 0;color:var(--ax-green)}
.ax-div::before,.ax-div::after{content:"";flex:1;border-top:1px dashed var(--ink-3);opacity:.55}
.ax-div span{font-size:15px;line-height:1}
.ax h2{display:flex;align-items:baseline;gap:12px;font-size:clamp(21px,2.4vw,27px);font-weight:700;letter-spacing:-.01em;margin-bottom:22px}
.ax h2 .ax-no{font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--ax-deep);white-space:nowrap}
.ax mark{background:linear-gradient(transparent 60%,var(--ax-mint) 60%);color:inherit;font-weight:600;padding:0 2px}
.ax-vs{border:1px solid var(--line);border-radius:14px;background:#fff;padding:6px 24px;margin-bottom:26px}
.ax-vs .row{display:grid;grid-template-columns:78px 1fr;gap:16px;padding:17px 0}
.ax-vs .row+.row{border-top:1px dashed var(--line)}
.ax-vs .k{font-size:14px;font-weight:700;color:var(--ax-deep);padding-top:3px}
.ax-vs .v{font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.ax-fig{margin:38px 0 42px}
.ax-fig.wide{width:min(calc(100vw - 2*var(--margin)),900px);margin-left:50%;transform:translateX(-50%)}
.ax-fig.tall{width:min(100%,460px);margin-left:auto;margin-right:auto}
.ax-fig img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.ax-cap{margin-top:13px;text-align:center;font-size:13px;line-height:1.6;color:var(--ink-3)}
.ax-slot{border:2px dashed var(--ink-3);border-radius:14px;background:rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  text-align:center;color:var(--ink-2);font-size:13px;padding:24px}
.ax-slot b{font-family:var(--font-en);font-weight:600;font-size:12px;color:var(--ink);word-break:break-all}
.ax-end{margin-top:64px;text-align:center}
.ax-end p{margin-bottom:0}
.ax-end .ax-answer{margin:30px 0 22px}
.ax-tagline{display:inline-flex;align-items:center;gap:10px;margin-top:40px;
  font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.16em;
  color:var(--ax-deep);border:1px solid var(--ax-green);border-radius:999px;padding:10px 20px}
@media (max-width:760px){
  /* 모바일에선 .detail-full 좌우 패딩이 0이라 에세이 쪽에서 직접 확보 */
  .ax{padding:96px var(--margin) 60px;font-size:15.5px} /* 고정 헤더(74px) 아래로 — 아이브로우가 로고와 겹치던 문제 */
  .ax-vs{padding:2px 18px}
  .ax-vs .row{grid-template-columns:1fr;gap:6px}
  .ax-div{margin:42px 0}
  /* 모바일: 좌측 정렬로 통일 — 좁은 화면에서 가운데 정렬·인라인 라벨이 어색하게 꺾이는 것 방지 */
  .ax h2{flex-direction:column;align-items:flex-start;gap:7px}
  .ax-answer{text-align:left}
  .ax-end{text-align:left}
}

/* ============================================================
   ARCHIVE DETAIL — 'vibe' 바이브코딩 일지 (ax 레이아웃 재사용, 보라 포인트)
   이미지: images/archive/vibe/
   ============================================================ */
.ax.vx{--ax-green:#7c6cf0;--ax-deep:#5546c8;--ax-mint:#e7e2ff}
/* 채팅 리플레이 위젯 — 이 페이지의 메인 인터랙션 (섹션 진입 시 1회 자동 재생) */
.vx-demo{border:1px solid var(--line);border-radius:16px;background:#fff;padding:26px 24px;margin:38px 0 42px}
.vx-card{max-width:330px;margin:0 auto;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(135deg,#f6f4ff,#eef1ff);padding:14px 16px;
  transition:padding .6s cubic-bezier(.22,1,.36,1)}
.vx-card b{display:block;font-size:14px;letter-spacing:-.01em}
.vx-card span{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:4px;
  transition:line-height .6s cubic-bezier(.22,1,.36,1)}
.vx-card.air{padding:26px 22px}
.vx-card.air span{line-height:1.8}
.vx-chat{display:flex;flex-direction:column;gap:10px;margin-top:22px;min-height:150px}
.vx-msg{max-width:78%;padding:.62em 1em;border-radius:16px;font-size:14px;line-height:1.55;
  opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.vx-msg.show{opacity:1;transform:none}
.vx-msg.me{align-self:flex-end;background:var(--ax-deep);color:#fff;border-bottom-right-radius:5px}
.vx-msg.cl{align-self:flex-start;background:#f1f0f6;color:var(--ink);border-bottom-left-radius:5px}
.vx-msg.typing{display:inline-flex;gap:5px;align-items:center;padding:.85em 1.1em}
.vx-msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:vxBlink 1s infinite}
.vx-msg.typing i:nth-child(2){animation-delay:.18s}
.vx-msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes vxBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.vx-replay{display:block;margin:18px auto 0;font-family:var(--font-ko);font-size:13px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:#fff;transition:.2s;opacity:0;pointer-events:none}
.vx-replay.on{opacity:1;pointer-events:auto}
.vx-replay:hover{background:var(--ink);color:#fff}

/* ============================================================
   ABOUT (playable runner)
   ============================================================ */
.about-layout{
  --about-device-width:min(100%,1180px,calc(100dvh + 360px));
  --about-device-lift:clamp(-180px,calc(-9vw - 30px),-110px);
  --about-device-zoom:1.026;
  display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
  max-width:min(100%,var(--about-device-width));margin:0 auto;
}
.about-device{
  position:relative;width:100%;aspect-ratio:1/1;margin:0 auto;isolation:isolate;
  transform:translateY(var(--about-device-lift)) scale(var(--about-device-zoom));
  transform-origin:center center;
}
.about-device-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;user-select:none;z-index:1;
}
.about-screen-slot{
  position:absolute;left:17.06%;top:20.99%;width:63.82%;height:38.43%;z-index:2;
  overflow:hidden;border-radius:clamp(8px,.7vw,14px);background:#56bfff;
}
.about-game{
  position:relative;overflow:hidden;border:0;border-radius:inherit;
  width:100%;height:100%;display:grid;grid-template-rows:38px minmax(0,1fr) 124px;
  background:linear-gradient(180deg,#169af0 0%,#7fd4ff 58%,#7cca36 58%,#2f8f1e 100%);
  box-shadow:none;isolation:isolate;
}
.about-game::before{
  content:"";position:absolute;left:0;right:0;top:38px;bottom:0;z-index:0;
  background-image:url("images/about/about-game-bg.webp");
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:var(--bg-shift,0px) bottom;
  pointer-events:none;will-change:background-position;
}
.about-game::after{
  content:"";position:absolute;left:0;right:0;top:38px;bottom:0;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 42%,rgba(16,51,35,.08));
  pointer-events:none;
}
.about-game:focus-visible{outline:3px solid var(--blue-sky);outline-offset:5px}
.about-hud{
  position:relative;z-index:2;
  height:38px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 14px;border-bottom:1.5px solid var(--ink);background:#fff;
  font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.04em;
}
.about-pixel-title{
  margin:0;font-family:var(--font-en);font-size:13px;font-weight:900;line-height:1;letter-spacing:.07em;
  color:var(--ink);text-transform:uppercase;text-shadow:1px 0 0 rgba(27,91,255,.18),0 1px 0 rgba(27,91,255,.18);
  white-space:nowrap;
}
.about-pixel-title .b{color:var(--blue);text-shadow:1px 0 0 rgba(112,224,255,.32),0 1px 0 rgba(112,224,255,.32)}
.about-score{color:var(--cursor-blue);font-size:13px;font-weight:900;letter-spacing:.07em;text-shadow:1px 0 0 rgba(64,148,247,.16),0 1px 0 rgba(64,148,247,.16)}
.about-screen{
  position:relative;z-index:1;min-height:0;overflow:hidden;background:transparent;
}
.about-screen::before{
  content:none;
}
.about-cloud{
  position:absolute;width:68px;height:18px;border:2px solid var(--ink);border-left-width:8px;background:#fff;
  display:none;opacity:.16;transform:translateZ(0);
}
.about-cloud.c1{left:9%;top:54px}
.about-cloud.c2{right:14%;top:98px;width:96px}
.about-ground{position:absolute;left:0;right:0;bottom:26px;border-top:2px solid rgba(11,5,36,.58)}
.about-ground::after{
  content:"";position:absolute;left:0;top:10px;width:240%;height:2px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 18px,transparent 18px 34px);
  opacity:.22;transform:translateX(var(--ground-shift,0px));
}
.about-track{position:absolute;left:0;top:0;height:100%;width:var(--world-width,2400px);will-change:transform}
.about-stage{
  position:absolute;bottom:36px;width:76px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.84);border:2px solid var(--ink);color:var(--ink);opacity:.92;
}
.about-stage.is-active{opacity:1;background:#fff;border-color:var(--cursor-blue);color:var(--cursor-blue);box-shadow:4px 4px 0 var(--cursor-blue-soft)}
.about-year-sign{
  font-family:var(--font-en);font-weight:700;font-size:15px;line-height:1;color:currentColor;
}
.about-runner{
  position:absolute;left:0;bottom:16px;width:72px;height:118px;z-index:7;
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none;will-change:transform;
}
.about-runner.hit-left,.about-runner.hit-right{animation:runnerHit .18s linear 2}
.runner-sprite{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  image-rendering:auto;transform-origin:center bottom;filter:drop-shadow(0 8px 0 rgba(11,5,36,.08));
}
.about-runner.is-baby .runner-sprite{transform:scale(.82)}
.about-runner.is-running.face-left .runner-sprite{transform:scaleX(-1)}
@keyframes runnerHit{0%,100%{translate:0 0}50%{translate:0 -4px}}
.about-panel{
  position:relative;z-index:1;display:grid;grid-template-columns:78px 1fr;gap:14px;min-height:0;
  margin:6px 10px 8px;padding:10px 15px 10px 16px;border:3px solid var(--ink);
  background:rgba(255,255,246,.96);box-shadow:inset 0 0 0 2px #fff,4px 4px 0 rgba(11,5,36,.18);
}
.about-panel::before{
  content:"";position:absolute;left:12px;top:-7px;width:22px;height:7px;
  background:rgba(255,255,246,.96);border-left:3px solid var(--ink);border-top:3px solid var(--ink);border-right:3px solid var(--ink);
}
.about-panel::after{
  content:"";position:absolute;right:13px;bottom:9px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--cursor-blue);
  filter:drop-shadow(2px 2px 0 rgba(11,5,36,.18));
}
.about-panel-year{font-family:var(--font-en);font-size:22px;font-weight:900;line-height:1;color:var(--cursor-blue)}
.about-event-list{list-style:none;display:grid;gap:4px;max-height:none;overflow:visible;padding-right:0}
.about-event-list li{display:grid;grid-template-columns:40px 1fr;gap:8px;font-size:11.8px;font-weight:500;line-height:1.25;color:var(--ink);word-break:keep-all}
.about-event-list .m{font-family:var(--font-en);color:var(--cursor-blue);font-size:11px;font-weight:800}
.about-event-list.is-many{gap:1px}
.about-event-list.is-many li{font-size:10.8px;line-height:1.14}
.about-event-list.is-many .m{font-size:10px}
.about-controls{position:absolute;inset:0;z-index:4;pointer-events:none}
.about-key{
  position:absolute;border:0;border-radius:999px;background:transparent;box-shadow:none;
  font-size:0;color:transparent;opacity:0;pointer-events:auto;touch-action:none;
}
.about-key:focus-visible{opacity:1;outline:3px solid var(--blue-sky);outline-offset:3px}
.about-key-left{left:74.7%;top:76.8%;width:9.1%;height:8.1%}
.about-key-up{left:78.9%;top:71.9%;width:9.2%;height:8.1%}
.about-key-right{left:84.9%;top:76.8%;width:9.1%;height:8.1%}
.about-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap{position:relative;min-height:70vh}
.c-name-ko{font-family:var(--font-ko);font-size:clamp(30px,5vw,40px);font-weight:500}
.c-name-ko .sp1{letter-spacing:12px}
.c-name-ko .sp2{letter-spacing:1.6px}
.c-name-en{font-family:'Helvetica Neue',Helvetica,var(--font-en);font-size:clamp(30px,5vw,40px);font-weight:500;line-height:1.3;letter-spacing:0;margin-top:2px}
.c-loc{font-family:'Helvetica Neue',Helvetica,var(--font-en);font-weight:400;font-size:20px;color:var(--ink);margin-top:8px}
.c-roles{margin:46px 0 80px;display:flex;flex-direction:column;gap:8px}
.c-role{font-family:'Helvetica Neue',Helvetica,var(--font-en);font-weight:400;font-size:20px;color:var(--ink)}
.c-contact-label{display:flex;align-items:center;gap:8px;font-family:'Helvetica Neue',Helvetica,var(--font-en);font-weight:400;font-size:20px;color:var(--ink)}
.c-email{font-family:'Helvetica Neue',Helvetica,var(--font-en);font-size:20px;font-weight:400;margin-top:8px;letter-spacing:0;color:var(--blue-sky);text-decoration:underline;text-underline-position:from-font;transition:color .2s}
.c-email:hover{color:var(--blue)}
.c-illust{
  position:absolute;right:0;bottom:-10px;width:min(38vw,520px);aspect-ratio:1/1;
  display:flex;align-items:flex-end;justify-content:center;
}
.c-illust img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.c-illust span{display:none}
.c-illust--empty{
  background:radial-gradient(60% 60% at 60% 60%, rgba(27,91,255,.10), transparent 70%);
  border:1px dashed var(--ink-3);border-radius:14px;
}
.c-illust--empty span{display:block;color:var(--ink-3);font-size:13px;text-align:center;padding-bottom:16px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .work-layout{grid-template-columns:1fr;gap:30px}
  .cat-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:18px 24px;align-items:center}
  .cat-btn{font-size:20px}
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .work-grid.work-grid--etc{grid-template-columns:repeat(4,1fr)}
  .arc-card{flex-basis:calc((100% - var(--gutter))/2)}
}
@media (max-width:760px){
  :root{--nav-h:66px}
  .burger{display:flex}
  /* 히어로(모바일): 타이틀·오브젝트·말풍선 배치 */
  .hero-title{top:12%;width:92%}
  .hero-title .script{font-size:clamp(52px,15vw,84px)}
  .hero-title .archive,.hero-title .star{font-size:clamp(26px,7vw,40px)}
  .hero-title .sub{font-size:13px}
  /* 모바일: 카피라이트와 겹치지 않게 한 줄 위로 */
  .hero-visits{bottom:58px;font-size:12px}
  .spot{left:var(--mx);top:var(--my);width:var(--mw)}
  .bubble{font-size:14px;white-space:normal;width:max-content;max-width:62vw}
  .side-right .bubble,.side-left .bubble,.side-bottom .bubble{
    left:50%;right:auto;top:auto;bottom:94%;--tx:-50%;
  }
  .bubble.flip{bottom:auto !important;top:94% !important}
  /* (삭제) 구 SPA 헤더 드롭다운용 bare nav 규칙 — 정적 셸엔 그 헤더가 없고, 푸터 nav(main/work/archive/contact)까지 숨겨 모바일에서 링크가 사라지던 원인 */
  .nav-link{font-size:20px;width:100%}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .work-tiers{gap:52px}
  .work-grid.work-grid--featured{grid-template-columns:1fr;gap:34px}
  .work-grid.work-grid--etc{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  /* 모바일: Featured는 풀폭 카드라 글자 원래 크기로 */
  .feat-eyebrow{font-size:11px}
  .feat-name{font-size:17px}
  .feat-sub{font-size:13px}
  .arc-card{flex-basis:calc(100% - 48px);aspect-ratio:3/3.6}  /* 다음 카드 살짝 보이게(슬라이드 힌트) */
  /* 상세 이미지: 모바일에선 좌우 여백 없이 화면 폭 꽉 채우기 */
  .detail-full{padding:var(--nav-h) 0 0}
  .detail-full .work-shot{max-width:none}
  .meta-row{grid-template-columns:90px 1fr}
  #about .wrap{height:calc(100dvh - var(--nav-h));padding-left:14px;padding-right:14px}
  .about-layout{display:block;width:100%;height:100%;max-width:none;overflow:hidden}
  .about-device{
    left:auto;width:100%;height:100%;aspect-ratio:auto;margin:0;
    display:grid;grid-template-rows:minmax(0,1fr) 58px;gap:10px;
    transform:none;
  }
  .about-device-img{display:none}
  .about-screen-slot{
    position:relative;left:auto;top:auto;width:100%;height:100%;z-index:1;
    border:2px solid var(--ink);border-radius:7px;box-shadow:4px 4px 0 rgba(11,5,36,.18);
  }
  .about-game{height:100%;border-width:0;border-radius:5px;grid-template-rows:30px minmax(0,1fr) 116px}
  .about-game::before,.about-game::after{top:30px}
  .about-hud{height:30px;padding:0 10px;border-bottom-width:1px;font-size:9px}
  .about-pixel-title{font-size:10px;letter-spacing:.04em;text-shadow:1px 0 0 rgba(27,91,255,.18),0 1px 0 rgba(27,91,255,.18)}
  .about-score{font-size:10px;letter-spacing:.04em}
  .about-cloud{width:54px;height:14px;border-width:1px;border-left-width:6px}
  .about-cloud.c1{left:8%;top:32px}
  .about-cloud.c2{right:4%;top:56px;width:68px}
  .about-ground{bottom:18px;border-top-width:2px}
  .about-stage{bottom:26px;width:58px;height:34px;border-width:1.5px}
  .about-stage.is-active{box-shadow:3px 3px 0 var(--cursor-blue-soft)}
  .about-year-sign{font-size:12px}
  .about-runner{bottom:12px;width:52px;height:88px}
  .about-panel{
    grid-template-columns:48px 1fr;gap:6px;margin:5px 7px 7px;padding:6px 8px 7px 9px;
    min-height:0;border-width:2px;box-shadow:inset 0 0 0 1px #fff,3px 3px 0 rgba(11,5,36,.18);
  }
  .about-panel::before{left:8px;top:-5px;width:16px;height:5px;border-width:2px}
  .about-panel::after{right:9px;bottom:6px;border-left-width:4px;border-right-width:4px;border-top-width:6px}
  .about-panel-year{font-size:16px}
  .about-event-list{gap:2px;max-height:none;overflow:visible;padding-right:0}
  .about-event-list li{grid-template-columns:28px 1fr;gap:4px;font-size:9.4px;line-height:1.14}
  .about-event-list .m{font-size:8.5px}
  .about-event-list.is-many li{font-size:8.2px;line-height:1.08}
  .about-event-list.is-many .m{font-size:7.7px}
  .about-controls{
    position:relative;inset:auto;z-index:2;display:flex;justify-content:center;align-items:center;gap:10px;
    pointer-events:auto;
  }
  .about-key{
    position:relative;left:auto;top:auto;width:54px;height:50px;opacity:1;
    border:2px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);
    box-shadow:4px 4px 0 rgba(11,5,36,.18);font-size:0;
  }
  .about-key::before{
    display:grid;place-items:center;width:100%;height:100%;
    font-family:var(--font-en);font-size:24px;font-weight:900;line-height:1;color:var(--ink);
  }
  .about-key-left::before{content:"←"}
  .about-key-up::before{content:"↑"}
  .about-key-right::before{content:"→"}
  .about-key:active{transform:translate(3px,3px);box-shadow:1px 1px 0 rgba(11,5,36,.18)}
  .c-illust{position:static;width:70%;margin:50px auto 0;aspect-ratio:4/3}
  .page-pad{padding-top:calc(var(--nav-h) + 28px);padding-bottom:80px}
  .back-btn{right:auto;left:50%;bottom:20px;transform:translateX(-50%);padding:9px 16px}
  .back-btn:hover{transform:translateX(-50%) translateY(-3px)}
}

/* ============================================================
   높이 반응형 — 노트북·낮은 브라우저 창에서 세로 스크롤 방지
   (vcenter 화면은 어떤 데스크탑 높이에서도 한 화면에 들어가게)
   ============================================================ */
@media (min-width:1025px){
  /* 아카이브 카드: '3열 폭'과 '화면 높이에 맞는 폭'(비율 3/4.1 역산) 중 작은 쪽 */
  .arc-card{flex-basis:min(calc((100% - 2*var(--gutter))/3), calc((100vh - 300px)*0.7317))}
}
@media (min-width:761px) and (max-width:1024px){
  .arc-card{flex-basis:min(calc((100% - var(--gutter))/2), calc((100vh - 300px)*0.7317))}
}
@media (min-width:761px) and (max-height:820px){
  /* 세로 중앙정렬 화면들의 상하 여백 압축 */
  .view.vcenter .page-pad{padding-top:16px;padding-bottom:16px}
  /* About */
  .about-layout{gap:28px}
  .about-panel{min-height:0}
  /* Contact */
  .c-roles{margin:26px 0 44px}
  .contact-wrap{min-height:0}
  .c-illust{width:min(32vw,420px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* 접근성: 스킵 링크(키보드 포커스 시에만 노출) + 카드 링크 */
.skip-link{position:fixed;left:16px;top:-64px;z-index:3000;background:var(--ink);color:var(--white);padding:12px 18px;border-radius:8px;font-size:14px;transition:top .2s}
.skip-link:focus{top:14px}
#main-content{outline:none}
.work-card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.arc-card-link{position:absolute;inset:0;color:inherit;text-decoration:none}

/* ============================================================
   CUSTOM CURSOR — 파란 점 + 잉크 트레일 (데스크탑 전용, JS가 활성화)
   ============================================================ */
html.has-cursor, html.has-cursor *{cursor:none !important}
.cursor-dot{
  position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;
  background:var(--cursor-blue);z-index:99999;pointer-events:none;
  transform:translate(-100px,-100px);
  transition:width .22s ease, height .22s ease, opacity .25s ease;
  will-change:transform;
}
.cursor-dot::after{ /* 커진 상태에서 중심을 유지하기 위한 정렬 */
  content:"";position:absolute;inset:0;border-radius:50%;
}
.cursor-dot.grow{width:30px;height:30px;background:rgba(64,148,247,.5)}
.cursor-dot.down{width:7px;height:7px}
.cursor-canvas{position:fixed;inset:0;z-index:99998;pointer-events:none}

/* ═══ block ═══ */
/* ===== 페이지 전환 — View Transitions API (리뉴얼 공통 규칙) ===== */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.6s;animation-timing-function:cubic-bezier(.33,1,.68,1)}
::view-transition-old(root){animation:vt-out .6s cubic-bezier(.33,1,.68,1) both;z-index:1}
::view-transition-new(root){animation:vt-in .6s cubic-bezier(.33,1,.68,1) both;z-index:2;
  box-shadow:0 -16px 48px rgba(11,5,36,.07)}
@keyframes vt-in{from{transform:translateY(200%)}to{transform:none}}
@keyframes vt-out{from{transform:none;filter:brightness(1)}to{transform:translateY(-4%) scale(.99);filter:brightness(.82)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ═══ block ═══ */
.cursor-dot,.cursor-canvas{display:none!important} /* 구버전 커서 → 리뉴얼 반전 커서 */
/* ===== 반전 커서 (mix-blend-mode: difference) — 전 페이지 공통 규칙 ===== */
html.has-cur, html.has-cur *{cursor:none!important}
.cur{position:fixed;left:0;top:0;z-index:9999;width:10px;height:10px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%);will-change:transform;
  display:flex;align-items:center;justify-content:center;
  transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),opacity .3s}
.cur.on{opacity:1}
.cur.link{width:30px;height:30px}
.cur.cur-view{width:92px;height:92px}
.cur-t{font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:#000;opacity:0;transition:opacity .25s;user-select:none}
.cur.cur-view .cur-t{opacity:1}

/* ═══ block ═══ */
/* ===== 통일 푸터 (sf-) — 메인 기준 단일 모듈, 전 페이지 동일 ===== */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/Montserrat[wght].woff2") format("woff2")}
.sf{position:relative;overflow:hidden;padding-top:clamp(90px,12vw,150px);background:#f8f8f8;color:#0b0524;
  font-family:'Pretendard','Manrope',system-ui,sans-serif;font-weight:300;letter-spacing:-.03em;line-height:1.5;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
.sf *{box-sizing:border-box} .sf a{color:inherit;text-decoration:none} .sf p,.sf h2{margin:0}
.sf-en{font-family:'Manrope',system-ui,sans-serif;letter-spacing:0}
.sf-bg{position:absolute;inset:0;z-index:0}
.sf-mesh{position:absolute;inset:0;background:url("images/bg/footer.webp") center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%);mask-image:linear-gradient(to bottom,transparent,#000 42%)}
.sf-tex{position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg stroke='%230b0524' stroke-width='1' stroke-linecap='square'%3E%3Cpath d='M0 -5v10M-5 0h10'/%3E%3Cpath d='M256 -5v10M251 0h10'/%3E%3Cpath d='M0 251v10M-5 256h10'/%3E%3Cpath d='M256 251v10M251 256h10'/%3E%3Cpath d='M128 123v10M123 128h10'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(to right,rgba(11,5,36,.5) 0 1px,transparent 1px 128px),
    repeating-linear-gradient(to bottom,rgba(11,5,36,.5) 0 1px,transparent 1px 128px);background-size:256px 256px,auto,auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.sf-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(248,248,248,.4) 0%,rgba(248,248,248,0) 40%,rgba(248,248,248,.2) 100%)}
.sf-in{position:relative;z-index:2;width:min(1600px,100% - clamp(16px,2vw,40px)*2);margin-inline:auto}
.sf-grid{display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap}
.sf-me{display:block}
.sf-avatar{width:44px;height:44px;border-radius:999px;flex:none;display:grid;place-items:center;
  background:repeating-linear-gradient(-45deg,rgba(11,5,36,.05) 0 10px,transparent 10px 20px),linear-gradient(140deg,#ececf2,#e0dfe8);
  font:500 11px/1 'Manrope',sans-serif;letter-spacing:.14em;color:rgba(11,5,36,.35)}
.sf-name{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(20px,1.8vw,26px);line-height:1.6;letter-spacing:-.02em}
.sf-role{font-size:clamp(14px,1.111vw,16px);line-height:24px;color:rgba(11,5,36,.52)}
.sf .sf-label{font-size:18px;line-height:27px;color:rgba(11,5,36,.72);margin:34px 0 4px}
.sf-mail{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(23px,2.222vw,32px);line-height:1.3;letter-spacing:-.03em;display:inline-block;position:relative}
.sf-mail::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:#0b0524;transform:scaleX(0);transform-origin:right;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sf-mail:hover::after{transform:scaleX(1);transform-origin:left}
.sf-cta{margin-top:30px}
.sf-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-width:157px;height:52px;padding:0 2px;
  border-top:1px solid rgba(11,5,36,.13);font-family:'Manrope',system-ui,sans-serif;font-size:clamp(14px,1.111vw,16px);line-height:24px;font-weight:400;
  letter-spacing:0;position:relative;overflow:hidden}
.sf-btn::after{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:#0b0524;transform:scaleX(0);transform-origin:right;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sf-btn:hover::after{transform:scaleX(1);transform-origin:left}
.sf-roll{display:block;height:24px;overflow:hidden} .sf-roll span{display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sf-btn:hover .sf-roll span{transform:translateY(-24px)}
.sf-arw{transition:transform .45s cubic-bezier(.22,1,.36,1)} .sf-btn:hover .sf-arw{transform:rotate(45deg)}
.sf-right{width:min(683px,100%)}
.sf-head{font-size:clamp(26px,3.055vw,44px);line-height:1.5;font-weight:400;letter-spacing:-.03em}
.sf .sf-sub{margin-top:34px;font-size:clamp(14px,1.111vw,16px);line-height:24px;color:rgba(11,5,36,.52)}
.sf-word{margin-top:clamp(60px,8vw,110px);line-height:0}
.sf-big{display:inline-block;font-family:'Montserrat','Manrope',sans-serif;font-weight:400;letter-spacing:-.04em;line-height:.9;white-space:nowrap;user-select:none}
.sf-bar{position:relative;z-index:2;border-top:1px solid rgba(11,5,36,.13);margin-top:26px;display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;min-height:64px;padding:12px 0;font-family:'Manrope',system-ui,sans-serif;font-size:13px;color:rgba(11,5,36,.52);letter-spacing:0}
.sf-bar a:hover{color:#0b0524}
.sf-bar-r{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .sf-bar nav{display:flex;gap:26px}
.sf-visits{letter-spacing:.04em;white-space:nowrap} .sf-visits b{font-weight:600;color:#0b0524}

/* ═══ block ═══ */
/* 모바일: 가로 넘침으로 뷰포트가 확장되지 않게 (clip은 sticky·스크롤 컨테이너에 영향 없음) */
html,body{overflow-x:clip}

/* ═══ block ═══ */
@media (max-width:480px){.card-desc br,.rnx-desc br{display:none}} /* 좁은 폭: 카드 설명 고정 줄바꿈 해제 */

/* ═══ block ═══ */
.rnx{position:relative;background:#f8f8f8;color:#0b0524;padding:clamp(90px,10vw,140px) 0 clamp(40px,4vw,60px);
     font-family:'Pretendard','Manrope',sans-serif;font-weight:300}
.rnx *{box-sizing:border-box}
.rnx a{color:inherit;text-decoration:none}
.rnx-in{width:min(1560px,100% - clamp(20px,2.6vw,48px)*2);margin-inline:auto}
.rnx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
          margin-bottom:clamp(40px,4vw,64px)}
.rnx-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 12px;border-radius:100px;
  background:rgba(11,5,36,.06);font-family:'Manrope',sans-serif;font-size:12px;letter-spacing:.08em;
  color:#0b0524;text-transform:uppercase;line-height:1}
.rnx-chip svg{width:22px;height:22px;fill:#0b0524;flex:none}
.rnx-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
  min-width:157px;height:52px;padding:0 2px;border-top:1px solid rgba(11,5,36,.13);
  font-family:'Manrope',sans-serif;font-size:clamp(14px,1.111vw,16px);line-height:24px;color:#0b0524;position:relative;overflow:hidden}
.rnx-btn::after{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:#0b0524;transform:scaleX(0);transform-origin:right;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.rnx-btn:hover::after{transform:scaleX(1);transform-origin:left}
.rnx-roll{display:block;height:24px;overflow:hidden}.rnx-roll span{display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rnx-btn:hover .rnx-roll span{transform:translateY(-24px)}
.rnx-arw{transition:transform .45s cubic-bezier(.22,1,.36,1)}.rnx-btn:hover .rnx-arw{transform:rotate(45deg)}
.rnx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
@media (max-width:860px){.rnx-grid{grid-template-columns:1fr}}
.rnx-card{display:block;background:#fff;border:1px solid rgba(11,5,36,.08);box-shadow:0 24px 60px rgba(11,5,36,.07)}
.rnx-img{display:block;position:relative;aspect-ratio:668/420;overflow:hidden;background:#e9e8ee}
.rnx-img::after{content:'';position:absolute;inset:0;z-index:1;opacity:.03;pointer-events:none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg stroke='%230b0524' stroke-width='1' stroke-linecap='square'%3E%3Cpath d='M0 -5v10M-5 0h10'/%3E%3Cpath d='M256 -5v10M251 0h10'/%3E%3Cpath d='M0 251v10M-5 256h10'/%3E%3Cpath d='M256 251v10M251 256h10'/%3E%3Cpath d='M128 123v10M123 128h10'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(to right,rgba(11,5,36,.55) 0 1px,transparent 1px 128px),
    repeating-linear-gradient(to bottom,rgba(11,5,36,.55) 0 1px,transparent 1px 128px);
  background-size:256px 256px,auto,auto}
.rnx-logo{position:absolute;left:50%;top:50%;z-index:2;width:280px;height:47px;
  transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:'Manrope',sans-serif;font-size:27px;font-weight:600;letter-spacing:-.02em;color:#0b0524;
  text-shadow:0 2px 18px rgba(0,0,0,.45);transition:transform .8s cubic-bezier(.16,1.1,.3,1)}
.rnx-logo .mk{width:34px;height:34px;flex:none;border:2px solid #fff;border-radius:9px;display:grid;place-items:center}
.rnx-logo .mk::before{content:'';width:14px;height:14px;background:#0b0524;border-radius:4px}
.rnx-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.rnx-card:hover .rnx-pic{transform:scale(1.035)}
.rnx-cap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:152px;padding:24px 30px}
.rnx-desc{width:min(554px,100%);margin:0;text-align:center;font-size:clamp(15px,1.181vw,17px);
  line-height:1.7;color:#0b0524}

.rnx-card{display:flex;flex-direction:column}
.rnx-cap{flex:1;justify-content:flex-start}
.rnx-tag{margin-top:auto}
.rnx-tag{font-family:'Manrope',sans-serif;font-size:clamp(14px,1.111vw,16px);line-height:24px;
  color:rgba(11,5,36,.7);padding:0 14px;
  border-left:1px solid rgba(11,5,36,.14);border-right:1px solid rgba(11,5,36,.14)}

/* ═══ block ═══ */
.back-btn{display:none!important} /* 구버전 Back to List → 공통 플로팅으로 대체 */
.dp-float{position:fixed;bottom:22px;z-index:85;display:flex;gap:8px;align-items:center;font-family:'Manrope',system-ui,sans-serif}
.dp-float{transition:opacity .25s}.dp-float.dp-off{opacity:0;pointer-events:none} /* 푸터 바(저작권·링크)와 겹칠 때 숨김 */
.dp-float-l{left:clamp(16px,2vw,40px)}
.dp-float-r{right:clamp(16px,2vw,40px)}
.dp-pill,.dp-ic{display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:100px;
  background:rgba(248,248,248,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(11,5,36,.12);color:#0b0524;text-decoration:none;
  box-shadow:0 10px 30px rgba(11,5,36,.10);transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s}
.dp-pill{gap:10px;padding:0 18px 0 16px;font-size:14px;letter-spacing:0}
.dp-pill .dp-arw{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dp-pill:hover .dp-arw{transform:translateX(-3px)}
.dp-ic{width:44px;padding:0;cursor:pointer;border:1px solid rgba(11,5,36,.12)}
.dp-ic:hover,.dp-pill:hover{background:#fff;transform:translateY(-2px)}
.dp-ic svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.4;fill:none}
@media (max-width:700px){.dp-float{bottom:14px}.dp-pill{height:40px;padding:0 14px;font-size:13px}.dp-ic{width:40px;height:40px}}

/* ═══ block ═══ */
#header{display:none!important}
.detail-full{padding-top:0!important} /* 구헤더 높이만큼 띄우던 여백 제거 → 콘텐츠가 헤더 영역과 겹쳐 최상단부터 시작 */ /* 기존 헤더 대체 */
.rhd{position:fixed;top:0;left:0;right:0;z-index:80;height:74px;display:flex;align-items:center;pointer-events:none;mix-blend-mode:difference;color:#fff}
.rhd-in{width:calc(100% - clamp(12px,1.1vw,22px)*2);margin-inline:auto;
        display:flex;align-items:center;justify-content:space-between}
.rhd-logo,.rhd-menu{pointer-events:auto;color:#fff;
  font-family:'Manrope',sans-serif;text-decoration:none}
.rhd-logo{font-family:'Montserrat','Manrope',sans-serif;font-weight:600;font-size:24px;letter-spacing:-.01em;line-height:1.2;display:flex;align-items:center}
.rhd-logo sup{font-size:.34em;line-height:1;margin-top:.25em;opacity:.85}
.rhd-menu{font-size:clamp(14px,1.111vw,16px);height:52px;min-width:96px;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.rov{position:fixed;inset:0;z-index:90;background:#0A0A0C;color:#fff;visibility:hidden;opacity:0;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),visibility .5s;font-family:'Manrope',sans-serif}
.rov.open{visibility:visible;opacity:1}
.rov a{color:inherit;text-decoration:none}
.rov-close{position:absolute;top:11px;right:clamp(12px,1.1vw,22px);height:52px;width:52px;
  background:none;border:0;border-top:1px solid rgba(255,255,255,.14);cursor:pointer;color:#fff;
  display:grid;place-items:center}
.rov-list{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}
.rov-row{display:block;border-top:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden}
.rov-row:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.rov-row-in{display:flex;align-items:baseline;justify-content:center;gap:14px;height:90px}
.rov-num{font-style:normal;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.35);
  align-self:flex-start;margin-top:34px}
.rov-txt{font-size:clamp(30px,3.33vw,48px);line-height:1.1;font-weight:300;letter-spacing:-.03em;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rov-row:hover .rov-txt{transform:translateX(14px)}

/* ═══ block ═══ */
.noise{position:fixed;inset:-50%;width:200%;height:200%;z-index:150;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background:url("images/bg/noise.png") repeat;background-size:256px 256px;will-change:transform;animation:grain .9s steps(10) infinite}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-3%,-2%)}20%{transform:translate(2%,3%)}30%{transform:translate(-4%,1%)}40%{transform:translate(3%,-3%)}50%{transform:translate(-1%,4%)}60%{transform:translate(4%,-1%)}70%{transform:translate(-2%,-4%)}80%{transform:translate(1%,2%)}90%{transform:translate(-3%,3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.noise{animation:none!important}}

/* CLS 방지: page.js가 본문을 채우기 전 빈 컨테이너가 0 높이라 RELATED·푸터가 첫 화면에 그려졌다가 밀리던 문제 */
#workDetail:empty,#arcDetail:empty{min-height:100vh}
@media (max-width:760px){.ez-hero h1 br{display:none}} /* 모바일: 강제 줄바꿈이 '화면,' 한 단어를 고립시키던 문제 */