/* pd-5.html(확정 포트폴리오 상세 시안)의 인라인 스타일 — 2026-08-12
   ⛔손편집 금지. 시안을 고친 뒤 scratchpad/mk_pf_view.py 로 다시 뽑을 것 */
/* ══════════════════════════════════════════════════════════════════════
   pd-5 (라이트 개편판)
   ① 대표 이미지 스크롤 확대(컨테이너 폭 → 화면 꽉 참)
   ② 우측 sticky 프로젝트 개요 — GNB(햄버거) 우측 끝선에 정렬, 본문 폭 확대
   ③ BEFORE↔AFTER = 서사 섹션마다 붙였다 뗄 수 있는 모듈
   ④ 목업·도식 다수 — 기기 목업은 실사급으로 작도하고 PSD/PNG 슬롯을 열어 둠
   ⑤ 화면 최상단 스크롤 진행 바(하늘색)  ※목차 박스는 제거됨
   ★모든 섹션은 data-mod 모듈 — 관리자 On/Off·순서 변경을 가정한다.
   ══════════════════════════════════════════════════════════════════════ */
:root{ --tdur:.25s; --tfn:cubic-bezier(.4,0,.2,1); --line2:#EDF1F7; }
html{ scroll-behavior:smooth; }
body{ background:#fff; padding-top:76px; overflow-x:hidden; }
img,svg{ display:block; }
button{ font-family:inherit; }

/* GNB와 같은 격자 — 개요 패널 우측 끝이 햄버거 끝선과 맞는다 */
.wrap{ max-width:1520px; margin:0 auto; padding:0 32px; }
@media(max-width:820px){ .wrap{ padding:0 20px; } }

/* ── ★상단 스크롤 진행 바 ─────────────────────────────────── */
.prog{
  position:fixed; top:76px; left:0; height:3px; width:0; z-index:70;
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue-l) 100%);
  box-shadow:0 0 10px rgba(77,162,255,.6);
  transition:width .12s linear;
}

/* ══════════════════════════════════════════════════════════════
   ★★§6 섹션 카테고리 바 — 미디어 상세(.mf-tabs · data-tb="5")와 같은 위계.
   값(높이·폰트·밑줄 모션·stuck 다크)은 md-final 에서 그대로 옮겼다.
   ⛔새 인터랙션을 만들지 않는다 — 두 상세 페이지가 같은 문법을 써야 한다.
   ══════════════════════════════════════════════════════════════ */
.pd-tabs{
  position:sticky; top:76px; z-index:70; margin-top:6px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s, box-shadow .45s var(--ease);
}
.pd-tabs-in{ display:flex; align-items:center; gap:24px; }
.pd-tabnav{
  flex:1 1 auto; min-width:0; display:flex; gap:2px;
  /* ★묶음 탭의 펼침 메뉴가 잘리면 안 되므로 넓은 화면에서는 overflow 를 열어 둔다.
     좁은 화면(≤900px)에서만 가로 스크롤로 되돌린다 — 아래 미디어쿼리 참고. */
  overflow:visible; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pd-tabnav::-webkit-scrollbar{ display:none; }

/* ══ 묶음 탭 (마우스를 올리면 하위 섹션이 펼쳐진다) ══════════════ */
.tg{ position:relative; flex:0 0 auto; }
.tg-c{ width:13px; height:13px; margin-left:5px; opacity:.5; transition:transform .3s var(--ease), opacity .3s; }
.tg:hover .tg-c, .tg:focus-within .tg-c{ transform:rotate(180deg); opacity:.9; }
.tg-h{ display:inline-flex; align-items:center; }
.tg-menu{
  position:absolute; top:calc(100% - 5px); left:4px; min-width:186px; padding:7px;
  background:#fff; border:1px solid var(--line); border-radius:13px;
  box-shadow:0 18px 40px rgba(12,30,64,.16), 0 2px 6px rgba(12,30,64,.06);
  opacity:0; visibility:hidden; transform:translateY(-7px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.tg:hover .tg-menu, .tg:focus-within .tg-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.tg-menu a{
  display:block; padding:9px 12px; border-radius:9px; white-space:nowrap;
  font-size:13.5px; font-weight:500; color:var(--g600);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.tg-menu a::after{ display:none; }          /* 묶음 안에서는 밑줄 대신 배경으로 표시 */
.tg-menu a:hover{ background:var(--tint); color:var(--blue-d); }
.tg-menu a.on{ background:var(--tint); color:var(--blue-d); font-weight:600; }
/* 상단에 붙어 어두워졌을 때 — 펼침 메뉴도 같이 뒤집는다 */
.pd-tabs.stuck .tg-menu{ background:#12233f; border-color:rgba(255,255,255,.12); box-shadow:0 18px 44px rgba(0,0,0,.42); }
.pd-tabs.stuck .tg-menu a{ color:rgba(255,255,255,.66); }
.pd-tabs.stuck .tg-menu a:hover,
.pd-tabs.stuck .tg-menu a.on{ background:rgba(77,162,255,.18); color:#fff; }
.pd-tabnav a{
  position:relative; flex:0 0 auto; padding:17px 12px 16px;
  font-size:14px; font-weight:500; line-height:1.2; letter-spacing:-.024em;
  color:var(--g500); white-space:nowrap; transition:color .25s var(--ease);
}
.pd-tabnav a:hover{ color:var(--ink); }
.pd-tabnav a.on{ color:var(--ink); font-weight:600; }
/* ★밑줄은 좌 → 우 (§7 공통 규칙) */
.pd-tabnav a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left center;
  transition:transform .38s var(--ease);
}
.pd-tabnav a.on::after{ transform:scaleX(1); }
.pd-tabcta{ flex:0 0 auto; display:flex; align-items:center; gap:9px; }
.pd-tabcta a{ font-size:13.5px; font-weight:600; border-radius:999px; padding:9px 16px; transition:background-color var(--tdur) var(--tfn), border-color var(--tdur) var(--tfn), color var(--tdur) var(--tfn); }
.pd-tabcta .c1{ background:var(--blue); color:#fff; display:inline-flex; align-items:center; gap:6px; }
.pd-tabcta .c1:hover{ background:var(--blue-d); }
.pd-tabcta .c2{ border:1px solid var(--line); color:var(--g700); }
.pd-tabcta .c2:hover{ border-color:var(--blue); color:var(--blue-d); }
/* ★스크롤로 붙으면 어두운 배경 (요청 §6) */
.pd-tabs.stuck{
  background:rgba(10,25,48,.94); border-bottom-color:rgba(255,255,255,.10);
  box-shadow:0 12px 34px rgba(10,28,62,.30);
}
.pd-tabs.stuck .pd-tabnav a{ color:rgba(255,255,255,.60); }
.pd-tabs.stuck .pd-tabnav a:hover{ color:#fff; }
.pd-tabs.stuck .pd-tabnav a.on{ color:#fff; }
.pd-tabs.stuck .pd-tabnav a::after{ background:var(--blue-l); }
.pd-tabs.stuck .pd-tabcta .c2{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.24); }
.pd-tabs.stuck .pd-tabcta .c2:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.44); }
@media(max-width:900px){
  .pd-tabcta{ display:none; }     /* 미디어 상세와 동일 — 좁으면 목차만 남긴다 */
  .pd-tabnav a{ padding:14px 10px 13px; font-size:13.5px; }
  /* 좁은 화면에선 펼침 메뉴를 접고 가로 스크롤로 되돌린다(터치엔 hover 가 없다) */
  .pd-tabnav{ overflow-x:auto; }
  .tg-menu{ display:none; }
  .tg-c{ display:none; }
}
/* 다크 본문에서의 펼침 메뉴 */
body.pd-dark .tg-menu{ background:#101f37; border-color:rgba(255,255,255,.10); box-shadow:0 18px 44px rgba(0,0,0,.5); }
body.pd-dark .tg-menu a{ color:rgba(255,255,255,.64); }
body.pd-dark .tg-menu a:hover,
body.pd-dark .tg-menu a.on{ background:rgba(77,162,255,.18); color:#fff; }

/* ══════════════════════════════════════════════════════════════════════
   ★★2026-08-07 §5 — 다크 톤 (같은 페이지에서 토글)
   우측 상단 토글로 body.pd-dark 를 켜고 끈다 → 같은 페이지·같은 콘텐츠로 두 모드를 본다.
   (별도 파일 pd-5-dark.html 은 남겨 뒀지만, 확인은 이 페이지에서 하시면 된다)
   방식: 토큰 재정의로 대부분을 뒤집고, background:#fff 로 하드코딩된 '표면'만 개별 지정.
   ⛔파란 버튼 위의 color:#fff 는 다크에서도 그대로 흰 글씨다(건드리지 않는다).
   ══════════════════════════════════════════════════════════════════════ */
body.pd-dark{
  --ink:#F2F6FC;                    /* 제목·본문 강조 */
  --g700:#B7C6DD;                   /* 본문 */
  --g500:#8397B4;                   /* 보조 */
  --line:rgba(255,255,255,.13);
  --line2:rgba(255,255,255,.075);
  --bg2:#101F38;
  --tint:rgba(77,162,255,.14);
  --tint-b:rgba(77,162,255,.34);
  --blue-d:#8CC2FF;                 /* 다크 위에서 읽히는 밝은 파랑 */
  --pd-surface:#0F1D33;             /* 카드·패널 표면 (구 #fff) */
  --pd-surface-2:#13233D;           /* 한 단계 밝은 표면(호버·강조) */
  background:#0A1526;
  color:var(--g700);
}
/* ── 표면: background:#fff 로 굳어 있던 곳 ── */
body.pd-dark .spec,
body.pd-dark .fnode,
body.pd-dark .tl li .dot,
body.pd-dark .gal-nav button,
body.pd-dark .rcard,
body.pd-dark .adm-btn,
body.pd-dark .adm-panel,
body.pd-dark .adm-it .mv button,
body.pd-dark .fhub .chips span{ background:var(--pd-surface); }
body.pd-dark .gal-nav button{ color:var(--ink); }
body.pd-dark .adm-btn{ color:var(--ink); }
body.pd-dark .adm-it .mv button{ color:var(--g500); }
/* 개요 패널 머리 — 라이트에서는 var(--ink)(짙은 남색) 배경 + 흰 글씨였다.
   다크에서 --ink 는 '밝은 색'이 되므로 그대로 두면 반전돼 읽히지 않는다 → 명시 지정. */
body.pd-dark .spec .st{ background:#16294A; color:#F2F6FC; }
body.pd-dark .spec{ box-shadow:0 20px 44px -34px rgba(0,0,0,.8); }
/* 허브 카드의 흰 그라데이션 */
body.pd-dark .fhub{ background:linear-gradient(160deg,var(--pd-surface-2),#0C1A2E);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.7); }
/* 비포/애프터 슬라이더 손잡이·구분선은 이미지 위라 흰색 유지가 맞다 */
body.pd-dark .ba-bar{ box-shadow:0 0 0 1px rgba(0,0,0,.35); }
body.pd-dark .ba-knob{ box-shadow:0 10px 26px -10px rgba(0,0,0,.7); }
/* ★도입 전·후 비교 판 — 라이트 회색 그라데이션이라 다크에서 그 부분만 하얗게 떴고,
   BEFORE 배지는 '흰 배지 + 옅은 회색 글씨'가 돼 읽히지 않았다(대비 1.42, 실측). */
body.pd-dark .ba-before{ background:linear-gradient(135deg,#152742,#0E1B30); }
body.pd-dark .ba-after{ background:linear-gradient(135deg,#16304F,#102542); }
body.pd-dark .ba-before .ba-tag{ color:#DCE6F5; background:rgba(255,255,255,.10); }
/* 이미지 플레이스홀더 — 라이트 회색 그라데이션(#F2F5FA→#E3E8F1)이 다크에서 하얗게 뜬다.
   대표 이미지(.zoom .shotbox) · 본문 화면 갤러리(.shot) 둘 다 같은 문법이라 함께 뒤집는다.
   격자 선도 어두운 배경에서 보이도록 밝은 쪽으로. */
body.pd-dark .zoom .shotbox{ background:linear-gradient(135deg,#152744,#0E1B30); }
body.pd-dark .shot{ background:linear-gradient(135deg,#152744,#0E1B30); }
body.pd-dark .zoom .shotbox::before,
body.pd-dark .shot::before{
  background-image:linear-gradient(rgba(160,185,220,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(160,185,220,.10) 1px,transparent 1px);
}
body.pd-dark .mx-ph,
body.pd-dark .ph{ background:#132441; }
/* 갤러리 썸네일 자리 — 어두운 판 위에서 안내문이 묻혔다(대비 2.73) */
body.pd-dark .gal-it .th span{ color:#93A7C4; }
/* 상단 진행 바 아래 헤더(GNB)는 navbar.css 소관 — 다크 배경에서 로고·햄버거가 묻히지 않게 */
body.pd-dark .gnb{ background:rgba(10,21,38,.82); border-bottom-color:rgba(255,255,255,.1); }
body.pd-dark .gnb-link,
body.pd-dark .gnb .logo{ color:#E7EFFB; }
body.pd-dark .burger .ln{ background:#E7EFFB; }
/* ★로고 배지 — background:var(--ink) 라서 다크에서 배경만 밝아지고 글자는 흰색 그대로였다
   (흰 배지에 흰 '박' = 아무것도 안 보임). 다크에서는 파란 배지로 세운다. */
body.pd-dark .gnb-logo .m{ background:var(--blue); color:#fff; }
/* ★헤더 버튼 2종 — color:var(--ink) 를 쓰는데 다크에서 --ink 가 '밝은 색'이 되므로
   밝은 배경 + 밝은 글씨가 돼 읽히지 않았다(실측). 다크 전용으로 명시한다. */
body.pd-dark .gnb-ghost{ background:transparent; border-color:rgba(255,255,255,.28); color:#E7EFFB; }
body.pd-dark .gnb-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }
body.pd-dark .gnb-cta{ background:var(--blue); color:#fff; }
/* ⛔GNB 드롭다운(.dd)·햄버거 오버레이·모달(.mdl)은 사이트 공용 컴포넌트라 그대로 둔다.
   열렸을 때만 보이고, 여기서 뒤집으면 다른 페이지와 문법이 갈린다. */
/* 본문 구분선·인용 등 톤 보정 */
body.pd-dark .cta{ background:#0C1A2E; }
@media(prefers-color-scheme:dark){ body.pd-dark{ color-scheme:dark; } }

/* ══════════════════════════════════════════════════════════════
   ★★§7·§8 PSD 목업 섹션 — 배경·프레임은 PSD, 화면 콘텐츠는 이미지 교체.
   ⛔FX(유리 반사·글로우) 레이어는 쓰지 않는다 — 화면이 뿌옇게 덮여 가독성이 떨어진다는
     지적에 따라 목업 3종도 FX 가 없는 것으로 골랐다(ending3 · meet7 · hand-tab1).
   ══════════════════════════════════════════════════════════════ */
.mk-stage{ position:relative; width:100%; overflow:hidden; border-radius:14px;
  background:#0D1526; isolation:isolate; }
.mk-stage .mk-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mk-clip{ position:absolute; inset:0; -webkit-mask-size:100% 100%; mask-size:100% 100%;
         -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.mk-shot{ position:absolute; top:0; left:0; transform-origin:0 0; overflow:hidden; will-change:transform; }
.mk-shot img{ width:100%; height:100%; object-fit:cover; display:block; }

.pdmk{ margin-top:26px; display:grid; gap:22px; }
.pdmk .hero{ grid-column:1 / -1; }
@media(min-width:820px){ .pdmk{ grid-template-columns:1fr 1fr; } }
.pdmk figure{ margin:0; }
.pdmk figcaption{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.5px; color:var(--g500); }
.pdmk .slot{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--blue-d);
  background:var(--tint); border:1px solid var(--tint-b); border-radius:999px; padding:4px 9px; }
body.pd-dark .pdmk .slot{ background:rgba(77,162,255,.16); border-color:rgba(77,162,255,.34); }

/* ── ★★§7 관리자 패널 안 '화면 이미지 등록' 슬롯 ── */
.adm-mk{ margin:2px 0 10px; padding:10px 11px 11px; border-radius:12px;
  background:var(--bg2); border:1px solid var(--line); }
.adm-mk .hd{ margin:0 0 8px; font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--g500); }
.adm-mk .row{ display:flex; align-items:center; gap:9px; padding:5px 0; }
.adm-mk .row + .row{ border-top:1px solid var(--line2); }
.adm-mk .th{ width:44px; height:28px; flex:0 0 auto; border-radius:6px; border:1px dashed var(--line);
  background:#fff center/cover no-repeat; }
.adm-mk .th.on{ border-style:solid; }
.adm-mk .tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.adm-mk .tx b{ font-size:12px; font-weight:600; color:var(--ink); }
.adm-mk .tx i{ font-style:normal; font-size:10.5px; color:var(--g500); }
.adm-mk .pick{ flex:0 0 auto; cursor:pointer; font-size:11.5px; font-weight:600; color:var(--blue-d);
  background:var(--tint); border:1px solid var(--tint-b); border-radius:999px; padding:5px 11px;
  transition:background-color var(--tdur) var(--tfn); }
.adm-mk .pick:hover{ background:#fff; }
.adm-mk .del{ flex:0 0 auto; width:22px; height:22px; border-radius:6px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--g500); font-size:13px; line-height:1; }
.adm-mk .del:hover{ border-color:#E9A9B4; color:#C6342F; }
/* ★★2026-08-07 — 목업을 이름이 아니라 그림으로 고르게. 흐름 = ①목업 고르기 → ②이미지 등록.
   .row 를 두 줄로 흐르게 두고, 목록(.gal)은 줄 전체를 차지하며 아래로 펼쳐진다. */
.adm-mk .row{ flex-wrap:wrap; row-gap:6px; }
.adm-mk .ktag{ flex:0 0 auto; font-size:9.5px; font-weight:700; color:var(--g500);
  background:var(--bg2); border-radius:4px; padding:2px 4px; }
/* ①목업 줄은 폭을 다 쓰고, ②이미지 줄이 그 아래로 내려간다 */
.adm-mk .line2{ flex:1 0 100%; display:flex; align-items:center; gap:7px; }
.adm-mk .line2 .hint{ font-size:10px; color:var(--g500); }
.adm-mk .kind{ flex:1 0 100%; min-width:0; display:flex; align-items:center; gap:7px; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:9px; padding:4px 7px; text-align:left;
  transition:border-color var(--tdur) var(--tfn); font-family:inherit; }
.adm-mk .kind:hover{ border-color:var(--tint-b); }
.adm-mk .kind.open{ border-color:var(--blue); }
.adm-mk .kth{ width:34px; height:22px; flex:0 0 auto; border-radius:4px;
  background:var(--bg2) center/cover no-repeat; }
.adm-mk .ktx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.adm-mk .ktx b{ font-size:11.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-mk .ktx i{ font-style:normal; font-size:10px; color:var(--g500); }
.adm-mk .kch{ flex:0 0 auto; font-size:9px; color:var(--g500); }

/* 목업 목록 — 그림 + 한글 이름. 마스크가 있는 것만 뜬다 */
.adm-mk .gal{ flex:1 0 100%; margin-top:7px; max-height:184px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  padding:8px; border-radius:9px; background:#fff; border:1px solid var(--line); }
.adm-mk .gal .g{ cursor:pointer; background:none; border:1px solid transparent; border-radius:7px;
  padding:3px; font-family:inherit; text-align:center; transition:border-color var(--tdur) var(--tfn); }
.adm-mk .gal .g:hover{ border-color:var(--tint-b); }
.adm-mk .gal .g.on{ border-color:var(--blue); background:var(--tint); }
.adm-mk .gal .gi{ display:block; width:100%; aspect-ratio:3/2; border-radius:5px;
  background:var(--bg2) center/cover no-repeat; }
.adm-mk .gal .gc{ display:block; margin-top:3px; font-size:9.5px; line-height:1.35; color:var(--g700);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.adm-mk .gal .empty{ grid-column:1/-1; margin:0; padding:14px 0; text-align:center;
  font-size:11px; color:var(--g500); }

body.pd-dark .adm-mk .kind,
body.pd-dark .adm-mk .gal,
body.pd-dark .adm-mk .tag{ background:var(--pd-surface); }
body.pd-dark .adm-mk{ background:rgba(255,255,255,.05); }
body.pd-dark .adm-mk .th{ background-color:var(--pd-surface); }
body.pd-dark .adm-mk .del{ background:var(--pd-surface); color:var(--g500); }

/* ── ★★§5 다크·라이트 전환 모듈 (화면 우측 상단 고정) ──
   같은 페이지에서 body.pd-dark 를 켜고 끈다. 선택은 localStorage 에 남는다. */
.pd-mode{
  /* ★자리 C 확정(2026-08-07). top 은 sticky 카테고리 바(76~127px) 아래로 내린다 —
     92px 로 두면 바의 '가견적 계산' 버튼을 그대로 덮는다(실측). */
  position:fixed; right:20px; top:140px; z-index:75;
  display:inline-flex; align-items:center; gap:3px; padding:4px;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  box-shadow:0 10px 26px rgba(10,28,62,.16);
  transition:background-color .45s var(--ease), border-color .45s;
}
.pd-mode button{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:0; background:transparent; border-radius:999px;
  padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--g500);
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
.pd-mode button svg{ width:14px; height:14px; }
.pd-mode button:hover{ color:var(--ink); }
.pd-mode button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
/* ── 자리별 변형 ─────────────────────────────────────────────
   ★확정 자리는 C(우측 상단 고정) = .pd-mode 기본값이다. 아래 두 클래스는 지금 쓰지 않지만,
   나중에 다크모드를 사이트 전체로 넓혀 GNB 안으로 옮길 때 그대로 쓰려고 남겨 둔다.
   인라인으로 들어갈 때는 떠 있는 그림자·블러를 걷어내고 주변 높이에 맞춘다. */
.pd-mode.at-gnb, .pd-mode.at-tabs{
  position:static; box-shadow:none; backdrop-filter:none; background:var(--bg2);
  padding:3px; margin-right:10px;
}
.pd-mode.at-gnb button, .pd-mode.at-tabs button{ padding:6px 11px; font-size:12px; }
.pd-mode.at-gnb button svg, .pd-mode.at-tabs button svg{ width:13px; height:13px; }
.pd-tabs.stuck .pd-mode.at-tabs{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); }
.pd-tabs.stuck .pd-mode.at-tabs button{ color:rgba(255,255,255,.66); }
.pd-tabs.stuck .pd-mode.at-tabs button[aria-pressed="true"]{ background:var(--blue); color:#fff; }
body.pd-dark .pd-mode{ background:rgba(16,31,56,.92); border-color:rgba(255,255,255,.16); }
body.pd-dark .pd-mode button{ color:#8397B4; }
body.pd-dark .pd-mode button:hover{ color:#fff; }
body.pd-dark .pd-mode button[aria-pressed="true"]{ background:var(--blue); color:#fff; }
@media(max-width:900px){
  .pd-mode{ right:12px; top:126px; }   /* 좁은 화면은 바가 낮아진다 */
  .pd-mode button{ padding:6px 10px; font-size:11.5px; }
  .pd-mode button span{ display:none; }   /* 좁으면 아이콘만 */
}

/* ★§5+§6 — 다크 모드에서 카테고리 바도 같이 뒤집는다.
   (라이트 고정이면 다크 본문 위에 흰 띠가 남는다) */
body.pd-dark .pd-tabs{ background:rgba(10,21,38,.90); border-bottom-color:rgba(255,255,255,.08); }
body.pd-dark .pd-tabnav a{ color:rgba(255,255,255,.55); }
body.pd-dark .pd-tabnav a:hover, body.pd-dark .pd-tabnav a.on{ color:#fff; }
body.pd-dark .pd-tabnav a::after{ background:var(--blue-l); }
body.pd-dark .pd-tabcta .c2{ background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.24); }

/* ── 1. 헤더 ───────────────────────────────────────────────── */
/* ★★2026-08-06 요청서 §2-2 — 헤더↔본문 상하 여백 축소 + 주요 콘텐츠 가운데 정렬.
   구값: .dh 상단 60 / .dmeta 상하 38·38 → 36 / 28·28 (헤더 아래 136px 였던 첫 글자 위치를 끌어올린다)
   ⛔'← 목록으로'(.back)는 내비게이션이라 좌측에 그대로 둔다 — 가운데로 보내면 되돌아가는 길이 흐려진다.
   ⛔'프로젝트 개요'(.spec)는 §2-2 단서대로 좌측 정렬 유지(아래 .spec 규칙에서 못박음). */
.dh{ padding:36px 0 0; text-align:center; }
.dh .back{ display:flex; width:max-content; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--g500); transition:color var(--tdur) var(--tfn); text-align:left; }
.dh .back:hover{ color:var(--blue-d); }
.dh .cat{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-size:12.5px; font-weight:600; letter-spacing:.02em; border-radius:999px; padding:7px 15px 7px 13px; border:1px solid transparent; }
.dh .cat .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.dh h1{ margin-top:14px; margin-inline:auto; font-size:clamp(28px,4vw,52px); font-weight:700; line-height:1.28; letter-spacing:-.04em; color:var(--ink); word-break:keep-all; max-width:17em; }
.dh .sum{ margin-top:18px; margin-inline:auto; font-size:clamp(15.5px,1.6vw,18px); line-height:1.86; letter-spacing:-.02em; color:var(--g700); max-width:46em; word-break:keep-all; }
.dmeta{ margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 52px; padding-bottom:28px; }
.dmeta .it{ display:flex; align-items:baseline; gap:12px; }
.dmeta .k{ font-size:13px; font-weight:500; color:var(--g500); }
.dmeta .v{ font-size:15.5px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.dmeta .v.na{ font-weight:400; color:var(--g500); }

/* ── 2. ★스크롤 확대 대표 이미지 ──────────────────────────── */
.zoom{ position:relative; height:190vh; }
.zoom .stick{ position:sticky; top:76px; height:calc(100vh - 76px); display:flex; align-items:center; justify-content:center; }
.zoom .shotbox{
  --p:0; --w0:min(880px, 72vw); --h0:46vh;
  position:relative; overflow:hidden;
  width:calc(var(--w0) + (100vw - var(--w0)) * var(--p));
  max-width:100vw;
  height:calc(var(--h0) + (100vh - 76px - var(--h0)) * var(--p));
  border-radius:calc(20px - 20px * var(--p));
  border:1px solid var(--line);
  background:linear-gradient(135deg,#F2F5FA,#E3E8F1);
  display:flex; align-items:center; justify-content:center;
}
.zoom .shotbox::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(126,138,160,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(126,138,160,.12) 1px,transparent 1px); background-size:38px 38px; }
.zoom .cap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:13px; font-weight:500; color:var(--g500); }
.zoom .cap svg{ opacity:.5; }
.zoom .hint{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--g500); opacity:calc(1 - var(--p) * 2.4); }
.zoom .hint .ar{ animation:zdown 1.6s ease-in-out infinite; }
@keyframes zdown{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
@media(max-width:820px){ .zoom{ height:120vh; } .zoom .shotbox{ width:calc(100vw - 40px + 40px * var(--p)); height:46vh; } }

/* ── 3. 본문 2단 ──────────────────────────────────────────── */
/* ★★2026-08-07 §4 — sticky '프로젝트 개요' 패널을 좌측으로.
   구값 312px/gap48 → 패널이 컨테이너 오른쪽 끝(1920 에서 1408~1720)에 몰려 있었다.
   폭을 넓히고 간격을 벌려 패널 왼쪽 끝을 44px 왼쪽으로 당긴다(1408 → 1364).
   ⛔.wrap 이 1520 중앙정렬이라 우측 여백 200px 은 그대로 — 모서리에 붙지 않는다. */
.detail{ display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:56px; align-items:start; padding:76px 0 40px; }
@media(max-width:1180px){ .detail{ grid-template-columns:1fr; gap:38px; } }
.mainCol{ min-width:0; max-width:1120px; }

/* 우측 개요 패널 — 우측 끝이 GNB 햄버거 끝선과 정렬됨 */
.aside{ position:sticky; top:100px; }
@media(max-width:1180px){ .aside{ position:static; order:-1; max-width:520px; } }
/* ★§2-2 단서 — '프로젝트 개요'만 좌측 정렬. .dh 의 가운데 정렬이 상속되지 않게 못박는다. */
.spec{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 20px 44px -34px rgba(10,28,62,.4); text-align:left; }
.spec .st{ padding:15px 22px; font-size:13.5px; font-weight:600; letter-spacing:.02em; color:#fff; background:var(--ink); }
.spec dl{ margin:0; padding:4px 22px 14px; }
.spec .row{ display:flex; gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line2); }
.spec .row:last-of-type{ border-bottom:0; }
.spec dt{ flex:0 0 76px; font-size:12.5px; font-weight:500; color:var(--g500); }
.spec dd{ margin:0; flex:1; font-size:14.5px; font-weight:600; line-height:1.6; color:var(--ink); word-break:keep-all; }
.spec dd.na{ color:var(--g500); font-weight:400; }
.spec .mts{ display:flex; border-top:1px solid var(--line); background:var(--bg2); }
.spec .mts .m{ flex:1; padding:13px 6px; text-align:center; }
.spec .mts .m + .m{ border-left:1px solid var(--line); }
.spec .mts .l{ font-size:11px; font-weight:500; color:var(--g500); line-height:1.4; }
.spec .mts .v{ margin-top:4px; font-size:15px; font-weight:600; color:var(--g500); }
.spec .tags{ display:flex; flex-wrap:wrap; gap:7px; padding:14px 22px 16px; border-top:1px solid var(--line); }
.spec .tags span{ font-size:12.5px; font-weight:500; color:var(--blue-d); }
.spec .cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 18px 18px; border-radius:999px; background:var(--blue); color:#fff; padding:14px 20px; font-size:15px; font-weight:600; transition:background-color var(--tdur) var(--tfn), transform var(--tdur) var(--tfn); }
.spec .cta:hover{ background:var(--blue-d); transform:translateY(-2px); }

/* ── 4. 모듈 공통 ─────────────────────────────────────────── */
.mod{ padding:58px 0; border-top:1px solid var(--line2); scroll-margin-top:104px; }
.mod:first-child{ padding-top:0; border-top:0; }
.mod[hidden]{ display:none; }
.mod-tag{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.1em; color:var(--blue); }
.mod-tag .sq{ width:6px; height:6px; border-radius:2px; background:var(--blue); }
.mod h2{ margin-top:13px; font-size:clamp(21px,2.5vw,30px); font-weight:600; line-height:1.48; letter-spacing:-.035em; color:var(--ink); word-break:keep-all; max-width:22em; }
.mod h2 .e{ margin-right:8px; }
.mod p{ margin-top:16px; font-size:16.5px; line-height:1.94; letter-spacing:-.018em; color:var(--g700); white-space:pre-line; word-break:keep-all; max-width:48em; }
.mod .lead{ margin-top:12px; font-size:15px; line-height:1.8; color:var(--g500); max-width:48em; }
.mod .box{ margin-top:22px; max-width:48em; border-radius:14px; background:var(--tint); border:1px solid var(--tint-b); padding:22px 24px; }
.mod .box .bt{ font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--blue-d); }
.mod .box .bv{ margin-top:9px; font-size:18px; font-weight:600; line-height:1.72; letter-spacing:-.02em; color:var(--ink); word-break:keep-all; }
.shot{ position:relative; margin-top:22px; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#F2F5FA,#E4E9F2); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.shot::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(126,138,160,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(126,138,160,.12) 1px,transparent 1px); background-size:30px 30px; }
.shot .cap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--g500); }
.shot .cap svg{ opacity:.5; }

/* ── 5. BEFORE / AFTER 모듈 ───────────────────────────────── */
.ba{ margin-top:26px; border:1px solid var(--line); border-radius:16px; padding:18px 18px 20px; background:var(--bg2); }
.ba-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ba-h .t{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.ba-h .t .ic{ width:15px; height:15px; color:var(--blue); }
.ba-h .hint{ font-size:12px; font-weight:500; color:var(--g500); }
.ba-box{ position:relative; margin-top:14px; aspect-ratio:16/9; border-radius:12px; overflow:hidden; user-select:none; touch-action:none; cursor:ew-resize; border:1px solid var(--line); }
.ba-pane{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:flex-start; padding:14px; }
.ba-after{ justify-content:flex-end; }
.ba-pane::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(126,138,160,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(126,138,160,.14) 1px,transparent 1px); background-size:30px 30px; }
.ba-before{ background:linear-gradient(135deg,#EFF1F5,#DFE3EA); }
.ba-after{ background:linear-gradient(135deg,#E9F1FF,#CFE1FE); clip-path:inset(0 0 0 50%); }
.ba-tag{ position:relative; font-size:12.5px; font-weight:600; letter-spacing:.1em; padding:7px 15px; border-radius:999px; }
.ba-before .ba-tag{ color:var(--g700); background:rgba(255,255,255,.9); }
.ba-after .ba-tag{ color:#fff; background:var(--blue); }
.ba-bar{ position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(10,28,62,.18); left:50%; }
.ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 10px 26px -10px rgba(10,28,62,.55); display:grid; place-content:center; color:var(--blue); }
.ba-knob svg{ width:18px; height:18px; }

/* ══ 6. 기기 목업 — 실사급 작도 ════════════════════════════
   ★PSD/PNG 목업을 받으면 pd-5.js의 MOCKUP 경로만 채우면 화면 영역에 그대로 들어간다.
     기기 전체를 목업 이미지 한 장으로 갈아끼우는 것도 가능하다.
     애플 로고·제품 각인은 상표라 넣지 않는다. */
.devs{ margin-top:30px; }
.dv-cap{ margin-top:18px; text-align:center; font-size:12.5px; font-weight:500; color:var(--g500); }
.dv-row{ display:flex; align-items:flex-end; justify-content:center; gap:56px; flex-wrap:wrap; margin-top:56px; }

.dv-screen{ position:relative; overflow:hidden; background:linear-gradient(150deg,#F7F9FD,#E7EDF7); }
.dv-screen::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(126,138,160,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(126,138,160,.13) 1px,transparent 1px); background-size:26px 26px; }
.dv-screen .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:var(--g500); }
.dv-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dv-glare{ position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(114deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.13) 24%, rgba(255,255,255,0) 45%); }

/* 노트북 — 큼직하게 */
.mbp{ width:min(940px,100%); margin:0 auto; }
.mbp-lid{
  position:relative; padding:12px 12px 14px; border-radius:18px 18px 5px 5px;
  background:linear-gradient(158deg,#E4E7EB 0%,#C4C9D0 16%,#A5ABB4 46%,#CBD0D7 78%,#969CA5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(10,28,62,.2), 0 26px 52px -34px rgba(10,28,62,.6);
}
.mbp-bezel{ position:relative; border-radius:9px; overflow:hidden; background:#0B0D10; padding:9px 9px 12px; }
.mbp-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:172px; height:17px; background:#0B0D10; border-radius:0 0 10px 10px; z-index:5; }
.mbp .dv-screen{ aspect-ratio:16/10; border-radius:2px; }
.mbp-base{ position:relative; height:16px; width:113%; margin-left:-6.5%; border-radius:0 0 13px 13px;
  background:linear-gradient(#D5DAE1 0%,#B7BCC4 38%,#8F959E 74%,#727880 100%);
  box-shadow:0 22px 36px -26px rgba(10,28,62,.62); }
.mbp-base::before{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:124px; height:7px; border-radius:0 0 9px 9px;
  background:linear-gradient(#8E959F,#B6BCC4); }
.mbp-shadow{ height:30px; margin:6px auto 0; width:74%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(10,28,62,.2), rgba(10,28,62,0) 72%); }

/* 데스크톱 */
.imac{ width:min(470px,100%); }
.imac-body{ padding:13px 13px 52px; border-radius:15px;
  background:linear-gradient(160deg,#F6F7F9 0%,#E1E4E9 42%,#C9CDD4 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(10,28,62,.14), 0 26px 46px -30px rgba(10,28,62,.55); }
.imac-bezel{ position:relative; border-radius:6px; overflow:hidden; background:#0B0D10; padding:8px; }
.imac .dv-screen{ aspect-ratio:16/10; border-radius:1px; }
.imac-neck{ width:100px; height:56px; margin:0 auto; background:linear-gradient(#E7EAEE,#BFC4CB); clip-path:polygon(31% 0,69% 0,100% 100%,0 100%); }
.imac-foot{ width:200px; height:10px; margin:0 auto; border-radius:0 0 7px 7px; background:linear-gradient(#D2D7DD,#A3A9B2); box-shadow:0 16px 26px -18px rgba(10,28,62,.55); }

/* 모바일 */
.iph{ width:min(212px,100%); }
.iph-body{ position:relative; padding:9px; border-radius:38px;
  background:linear-gradient(150deg,#EDEFF2 0%,#C3C8CF 34%,#9BA1AA 68%,#DEE1E6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 24px 42px -28px rgba(10,28,62,.6); }
.iph-bezel{ position:relative; border-radius:30px; overflow:hidden; background:#0B0D10; padding:4px; }
.iph .dv-screen{ aspect-ratio:9/19.5; border-radius:27px; }
.iph-island{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:72px; height:21px; border-radius:999px; background:#000; z-index:5; }
.iph-btn{ position:absolute; right:-3px; top:120px; width:3px; height:52px; border-radius:2px; background:linear-gradient(#CBD0D7,#8F959E); }
.iph-btn.v{ right:auto; left:-3px; top:88px; height:30px; }

/* ══ 7. 시스템 구성도 — 곡선 커넥터 도식 ══════════════════ */
.flow{ position:relative; margin-top:30px; border:1px solid var(--line); border-radius:18px; background:var(--bg2); padding:34px 30px; }
.flow-stage{ position:relative; }
.flow-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; }
@media(max-width:980px){ .flow-links{ display:none; } }
.flow-links path{ fill:none; stroke:#B4D0F7; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.flow-links path.fl{ stroke:var(--blue); stroke-width:2; stroke-dasharray:5 9; animation:fl-dash 1.1s linear infinite; }
@keyframes fl-dash{ to{ stroke-dashoffset:-14; } }
@media(prefers-reduced-motion:reduce){ .flow-links path.fl{ animation:none; stroke-dasharray:none; opacity:.35; } }
.flow-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.02fr 1fr; gap:0 58px; align-items:stretch; }
@media(max-width:980px){ .flow-grid{ grid-template-columns:1fr; gap:22px; } }
.flow-col{ display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.flow-ct{ font-size:11.5px; font-weight:600; letter-spacing:.14em; color:var(--blue); margin-bottom:-4px; }
.fnode{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:13px 15px;
        box-shadow:0 10px 24px -20px rgba(10,28,62,.5); transition:border-color var(--tdur) var(--tfn), transform var(--tdur) var(--tfn); }
.fnode:hover{ border-color:var(--tint-b); transform:translateY(-2px); }
.fnode .ic{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--tint); color:var(--blue-d); display:grid; place-content:center; }
.fnode .ic svg{ width:17px; height:17px; }
.fnode .tx{ min-width:0; }
.fnode .nk{ display:block; font-size:14px; font-weight:600; letter-spacing:-.02em; line-height:1.45; color:var(--ink); }
.fnode .nd{ display:block; margin-top:4px; font-size:11.5px; line-height:1.55; color:var(--g500); }
.fhub{ border:1px solid var(--tint-b); border-radius:16px; padding:26px 22px; text-align:center;
       background:linear-gradient(160deg,#fff,#EDF3FF); box-shadow:0 20px 44px -28px rgba(46,111,242,.55); }
.fhub .ic{ width:46px; height:46px; margin:0 auto; border-radius:14px; background:var(--blue); color:#fff; display:grid; place-content:center; }
.fhub .ic svg{ width:23px; height:23px; }
.fhub .nk{ margin-top:13px; font-size:16.5px; font-weight:600; letter-spacing:-.025em; color:var(--ink); }
.fhub .nd{ margin-top:7px; font-size:12.5px; line-height:1.65; color:var(--g700); }
.fhub .chips{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.fhub .chips span{ font-size:11.5px; font-weight:500; color:var(--blue-d); background:#fff; border:1px solid var(--tint-b); border-radius:999px; padding:5px 10px; }
.flow-note{ margin-top:24px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.75; color:var(--g500); }

/* ══ 8. 프로젝트 타임라인 ═════════════════════════════════ */
.tl{ margin-top:34px; position:relative; }
.tl .track{ position:absolute; left:0; right:0; top:17px; height:2px; background:var(--line); }
.tl .fill{ position:absolute; left:0; top:17px; height:2px; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-l)); transition:width 1.2s var(--ease); }
.tl ol{ position:relative; margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:820px){
  .tl .track,.tl .fill{ left:17px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .tl .fill{ height:0; width:2px; transition:height 1.2s var(--ease); }
  .tl ol{ grid-template-columns:1fr; gap:22px; padding-left:46px; }
  .tl li .dot{ position:absolute; left:-46px; }
}
.tl li{ position:relative; }
.tl li .dot{ width:36px; height:36px; border-radius:50%; border:2px solid var(--line); background:#fff; display:grid; place-content:center; font-size:12px; font-weight:600; color:var(--g500); transition:border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease); }
.tl li.on .dot{ border-color:var(--blue); background:var(--blue); color:#fff; }
.tl li .k{ margin-top:14px; font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.tl li .d{ margin-top:6px; font-size:12.5px; line-height:1.7; color:var(--g500); word-break:keep-all; }
.tl li .w{ margin-top:8px; font-size:11.5px; font-weight:600; color:var(--blue); }

/* ══ 9. 화면 갤러리 ═══════════════════════════════════════ */
.gal{ margin-top:26px; }
.gal-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gal-nav{ display:flex; gap:8px; }
.gal-nav button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); display:grid; place-content:center; cursor:pointer; transition:background-color var(--tdur) var(--tfn), border-color var(--tdur) var(--tfn); }
.gal-nav button:hover{ background:var(--bg2); border-color:var(--g500); }
.gal-nav button svg{ width:16px; height:16px; }
.gal-track{ margin-top:16px; display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px; }
.gal-track::-webkit-scrollbar{ display:none; }
.gal-it{ flex:0 0 clamp(250px,30%,360px); scroll-snap-align:start; }
.gal-it .th{ position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg,#F2F5FA,#E4E9F2); display:flex; align-items:center; justify-content:center; }
.gal-it .th::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(126,138,160,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(126,138,160,.12) 1px,transparent 1px); background-size:26px 26px; }
.gal-it .th span{ position:relative; font-size:11.5px; font-weight:500; color:var(--g500); }
.gal-it .cp{ margin-top:11px; font-size:13.5px; font-weight:600; color:var(--ink); }
.gal-it .cp em{ display:block; margin-top:4px; font-style:normal; font-size:12px; font-weight:400; color:var(--g500); }

/* ══ 10. 성과 수치 ════════════════════════════════════════ */
.nums{ margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:860px){ .nums{ grid-template-columns:repeat(2,1fr); } }
.num{ border:1px solid var(--line); border-radius:14px; padding:24px 20px; background:var(--bg2); }
.num .v{ font-size:clamp(26px,3vw,38px); font-weight:700; letter-spacing:-.04em; line-height:1.1; color:var(--g500); }
.num .l{ margin-top:10px; font-size:13.5px; font-weight:600; color:var(--ink); }
.num .s{ margin-top:5px; font-size:11.5px; color:var(--g500); }

/* ══ 11. 디자인 시스템 ════════════════════════════════════ */
.sw{ margin-top:26px; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
@media(max-width:900px){ .sw{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .sw{ grid-template-columns:repeat(2,1fr); } }
.sw .c{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.sw .c .chip{ height:72px; }
.sw .c .tx{ padding:11px 13px 13px; }
.sw .c .n{ font-size:12.5px; font-weight:600; color:var(--ink); }
.sw .c .h{ margin-top:4px; font-size:11.5px; font-weight:400; color:var(--g500); letter-spacing:.02em; }

/* ══ 12. 고객사 · 수행 범위 ═══════════════════════════════ */
.role{ display:grid; grid-template-columns:180px 1fr; gap:22px 36px; margin-top:26px; }
@media(max-width:760px){ .role{ grid-template-columns:1fr; gap:6px 0; } }
.role .k{ font-size:12.5px; font-weight:600; letter-spacing:.16em; color:var(--blue); }
.role .v{ font-size:16.5px; font-weight:500; line-height:1.8; color:var(--ink); word-break:keep-all; }
.role .v.na{ color:var(--g500); font-weight:400; }

/* ══ 13. 이전/다음 · 관련 사례 · CTA ══════════════════════ */
.dnav{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:34px 0; border-top:1px solid var(--line); }
.dnav a{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:500; color:var(--ink); transition:color var(--tdur) var(--tfn), gap var(--tdur) var(--tfn); }
.dnav a:hover{ color:var(--blue); gap:13px; }
.dnav a.off{ opacity:.3; pointer-events:none; }
.dnav .mid{ font-size:14px; color:var(--g500); }
@media(max-width:640px){ .dnav .mid{ display:none; } }

.rel{ padding:20px 0 84px; }
.rel h2{ font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.rgrid{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:860px){ .rgrid{ grid-template-columns:1fr; } }
.rcard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff;
        transition:border-color var(--tdur) var(--tfn), transform .5s var(--ease), box-shadow .5s var(--ease); }
.rcard:hover{ border-color:var(--tint-b); transform:translateY(-5px); box-shadow:0 20px 44px -30px rgba(10,28,62,.4); }
.rcard .th{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#F2F5FA,#E4E9F2); border-bottom:1px solid var(--line); }
.rcard .th::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(126,138,160,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(126,138,160,.12) 1px,transparent 1px); background-size:26px 26px; }
.rcard .bd{ padding:18px 20px 20px; }
.rcard .k{ font-size:12px; font-weight:600; color:var(--blue); }
.rcard h3{ margin-top:9px; font-size:16px; font-weight:600; line-height:1.55; letter-spacing:-.02em; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rcard .mt{ margin-top:11px; font-size:12.5px; font-weight:500; color:var(--g500); }

.cta{ background:var(--navy); padding:70px 0 84px; text-align:center; }
.cta h2{ font-size:clamp(23px,2.8vw,34px); font-weight:700; line-height:1.44; letter-spacing:-.03em; color:#fff; word-break:keep-all; }
.cta h2 .em{ color:var(--blue-l); }
.cta p{ margin-top:14px; font-size:15.5px; line-height:1.75; color:#B8C5D9; }
.cta .go{ margin-top:28px; display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:var(--blue); color:#fff; padding:14px 26px; font-size:16px; font-weight:600;
          transition:background-color var(--tdur) var(--tfn), transform .3s var(--ease); }
.cta .go:hover{ background:var(--blue-d); transform:translateY(-2px); }

/* ══ 14. 시안용 "섹션 구성" 패널 ══════════════════════════ */
.adm{ position:fixed; right:20px; bottom:20px; z-index:90; }
.adm-btn{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); padding:11px 18px; font-size:13.5px; font-weight:600; cursor:pointer; box-shadow:0 18px 40px -18px rgba(10,28,62,.45); }
.adm-btn svg{ width:15px; height:15px; color:var(--blue); }
.adm-panel{ display:none; width:min(320px,calc(100vw - 40px)); margin-bottom:10px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 26px 60px -26px rgba(10,28,62,.5); overflow:hidden; }
.adm.open .adm-panel{ display:block; }
.adm-hd{ padding:14px 16px; border-bottom:1px solid var(--line); }
.adm-hd .t{ font-size:13.5px; font-weight:600; color:var(--ink); }
.adm-hd .d{ margin-top:5px; font-size:11.5px; line-height:1.6; color:var(--g500); }
.adm-list{ max-height:min(46vh,380px); overflow-y:auto; padding:6px; }
.adm-it{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:9px; }
.adm-it:hover{ background:var(--bg2); }
.adm-it input{ position:absolute; opacity:0; width:0; height:0; }
.adm-it .bx{ width:16px; height:16px; flex:0 0 auto; border-radius:5px; border:1px solid var(--line); display:grid; place-content:center; color:transparent; cursor:pointer; }
.adm-it input:checked + .bx{ background:var(--blue); border-color:var(--blue); color:#fff; }
.adm-it .bx svg{ width:11px; height:11px; }
.adm-it .nm{ flex:1; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; }
.adm-it .mv{ display:flex; gap:3px; }
.adm-it .mv button{ width:22px; height:22px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--g500); cursor:pointer; display:grid; place-content:center; }
.adm-it .mv button:hover{ color:var(--ink); background:var(--bg2); }
.adm-it .mv svg{ width:11px; height:11px; }
.adm-ft{ padding:10px 16px 14px; border-top:1px solid var(--line); font-size:11.5px; line-height:1.6; color:var(--g500); }

/* ── 리빌 ─────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .rcard,.cta .go,.dh .back,.fnode,.spec .cta,.dnav a{ transition:none !important; }
  .rcard:hover,.fnode:hover{ transform:none; }
  .zoom{ height:auto; }
  .zoom .stick{ position:static; height:auto; padding:0 0 10px; }
  .zoom .shotbox{ width:100%; height:auto; aspect-ratio:16/9; border-radius:16px; }
  .zoom .hint{ display:none; }
  .tl .fill{ transition:none; }
  .prog{ transition:none; }
}

.rv{ opacity:1 !important; transform:none !important; } .zoom{ height:auto; } .zoom .stick{ position:static; height:auto; } .zoom .shotbox{ width:100%; height:auto; aspect-ratio:16/9; }


/* ══════ 라이브 전용 보강 — 2026-08-12 ══════
   시안은 모든 이미지가 회색 자리표시였다. 라이브는 실물이 들어오므로
   그때 필요한 규칙만 얹는다(자리표시 경로는 종전 그대로 살아 있다). */
.shot.has-img{ display:block; padding:0; background:none; border:0; }
.shot.has-img img{ display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line); }
.shot.has-img.multi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.shotbox.has-img .cap{ display:none; }
.shotbox.has-img .zoom-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* 본문 카드 그리드(json_data list1) — 시안에 없던 블록이라 여기서 정의한다 */
.mod-cards{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.mod-card{ padding:22px 20px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.mod-card h4{ font-size:16.5px; font-weight:600; color:var(--ink); letter-spacing:-.02em; }
.mod-card p{ margin-top:9px; font-size:14.5px; line-height:1.78; color:var(--g700); }
.mod-ctags{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.mod-ctags span{ font-size:12px; padding:4px 10px; border-radius:999px; background:var(--tint); color:var(--blue-d); }
body.pd-dark .mod-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
body.pd-dark .mod-card h4{ color:#EEF3FB; }
body.pd-dark .mod-card p{ color:#A9BCD8; }