/* 포트폴리오 상세 — 10/5 확정 고도화(pd-5y) 라이브판
   ⛔손편집 금지. 시안을 고친 뒤 _gen/mk_pf_view5y.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; }

/* pd-5x(상세 고도화판) 추가 스타일 — pd-5 토큰(--ink·--g500·--g700·--line·--tint·--tint-b·--blue-d)을 그대로 쓴다.
   새 시각 언어를 들이지 않고, 기존 .dmeta·.box·.gal-it 결을 따른다. */

/* 첫 화면 핵심 3줄 (헤더 메타 아래) */
.x-key{ margin:4px auto 34px; max-width:1040px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; }
.x-k{ padding:22px 26px 24px; }
.x-k + .x-k{ border-left:1px solid var(--line); }
.x-kl{ display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--blue-d); }
.x-k p{ margin-top:9px; font-size:15.5px; font-weight:500; line-height:1.7; letter-spacing:-.02em; color:var(--ink); word-break:keep-all; }
@media (max-width:820px){
  .x-key{ grid-template-columns:1fr; }
  .x-k + .x-k{ border-left:0; border-top:1px solid var(--line); }
  .x-k{ padding:18px 4px; }
}

/* 대표 이미지(목록 카드와 같은 이미지) */
.shotbox .x-zimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.shotbox:has(.x-zimg)::before{ display:none; }
.shotbox .hint{ z-index:2; }

/* 본문 문단: 첫 줄 소제목 */
.mod p.x-lh{ margin-top:22px; font-size:19px; font-weight:600; line-height:1.6; letter-spacing:-.025em; color:var(--ink); }
.mod p.x-lh + p{ margin-top:8px; }

/* (1)(2)(3) 항목 */
.x-items{ list-style:none; margin:20px 0 0; padding:0; max-width:48em; display:grid; gap:10px; }
.x-items li{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:4px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; }
.x-items .n{ grid-row:span 2; font-size:12.5px; font-weight:600; color:var(--blue-d); padding-top:3px; }
.x-items b{ font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.x-items em{ font-style:normal; font-size:15px; line-height:1.7; color:var(--g700); }

/* 본문 이미지 */
.x-fig{ margin:26px 0 0; max-width:48em; }
.x-fig img{ display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); background:#fff; }
.x-fig figcaption{ margin-top:10px; font-size:13.5px; color:var(--g500); }

/* 갤러리 실제 이미지 */
.gal-it .x-th{ background:#fff; }
.gal-it .x-th::before{ display:none; }
.gal-it .x-th img{ position:relative; width:100%; height:100%; object-fit:cover; object-position:left top; display:block; }

/* 첫 화면: 3줄 요약이 들어간 만큼 대표 이미지를 위로 붙여 접히는 선 위에 걸리게 */
@media (min-width:821px){
  .x-key{ margin-bottom:8px; }
  .zoom .stick{ align-items:flex-start; padding-top:20px; }
}
/* 세로로 긴 본문 이미지는 너무 커지지 않게 */
.x-fig img{ width:auto; max-width:100%; max-height:560px; }


/* pd-5y(상세 2차 고도화 시안) — pd-5x 위에 덧씌운다. 색·서체·톤은 pd-5 토큰 그대로. */

/* ── 대표 이미지: 스크롤 확대 제거 → 고정 이미지.
   ★10/5 폭 = 아래 2단 전체(본문 칸 왼쪽 끝 ~ 개요 패널 오른쪽 끝)와 같은 .wrap 폭.
   화면 높이를 넘으면 16:9 보다 납작하게 자른다(가운데 기준). ── */
.zoom.y-still{ height:auto; }
.zoom.y-still .stick{ position:static; height:auto; max-width:1520px; margin:0 auto; padding:6px 32px 0; display:block; }
.zoom.y-still .shotbox{
  width:100%; max-width:none; height:auto; aspect-ratio:16/9;   /* ★10/5 잘림 지적 → 높이 제한 걷음(카드 이미지 16:9 그대로 전체) */
  border-radius:20px;
}
@media (max-width:820px){
  .zoom.y-still .stick{ padding:0 32px; }
  .zoom.y-still .shotbox{ max-height:none; min-height:0; border-radius:14px; }
}
.detail{ padding-top:56px; }

/* ── 개요 패널 = 가로 띠(적극안) + 본문 1단 ── */
.y-bandwrap{ display:none; }
body.y-band .y-bandwrap{ display:block; }
body.y-band .aside{ display:none; }
body.y-band .dh .dmeta{ display:none; }   /* 띠가 같은 정보를 갖고 있다 */
body.y-band .detail{ grid-template-columns:minmax(0,1fr); }
body.y-band .mainCol{ max-width:1040px; margin-inline:auto; width:100%; }

.y-band .spec{
  max-width:1040px; margin:30px auto 26px; text-align:left;
  display:grid; grid-template-columns:120px minmax(0,1fr) auto;
  grid-template-areas:"st dl cta" "st tags cta";
  box-shadow:none;
}
.y-band .spec .st{ grid-area:st; display:flex; align-items:center; padding:16px 20px; line-height:1.5; }
.y-band .spec dl{ grid-area:dl; display:flex; flex-wrap:wrap; padding:0; }
.y-band .spec .row{ flex:1 1 0; min-width:120px; flex-direction:column; gap:4px; padding:14px 20px 10px; border-bottom:0; }
.y-band .spec .row + .row{ border-left:1px solid var(--line2); }
.y-band .spec dt{ flex:none; }
.y-band .spec dd{ font-size:14px; }
.y-band .spec .mts{ display:none; }   /* 성과 수치는 본문 '성과 수치' 섹션에 있다 */
.y-band .spec .tags{ grid-area:tags; padding:8px 20px 14px; border-top:1px solid var(--line2); }
.y-band .spec .cta{ grid-area:cta; align-self:center; margin:0 20px; white-space:nowrap; }
@media (max-width:900px){
  .y-band .spec{ grid-template-columns:1fr; grid-template-areas:"st" "dl" "tags" "cta"; }
  .y-band .spec .row{ flex:1 1 40%; }
  .y-band .spec .row + .row{ border-left:0; }
  .y-band .spec .cta{ margin:6px 18px 18px; }
}

/* ── 떠 있는 요소 끄기 ── */
body.y-nomode .pd-mode{ display:none; }
body.y-nofcta .fcta{ display:none !important; }

/* ── 시안 비교 토글 바(시안 전용) ── */
.y-cmp{
  position:fixed; left:16px; bottom:16px; z-index:120;
  width:300px; padding:12px 14px 14px; border-radius:14px;
  background:#0E1B30; color:#fff; font-size:12.5px; line-height:1.4;
  box-shadow:0 14px 34px rgba(10,28,62,.34);
}
.y-cmp-hd{ display:flex; align-items:center; gap:10px; }
.y-cmp-hd b{ font-size:13px; font-weight:600; }
.y-cmp-hd a{ margin-left:auto; color:#8FC2FF; font-weight:500; text-decoration:none; }
.y-cmp-hd a:hover{ text-decoration:underline; }
.y-cmp-x{ border:0; background:rgba(255,255,255,.10); color:rgba(255,255,255,.8); border-radius:999px; padding:4px 10px; font:inherit; font-size:11.5px; cursor:pointer; }
.y-cmp-bd{ margin-top:10px; display:grid; gap:7px; }
.y-cmp.shut .y-cmp-bd{ display:none; }
.y-cmp.shut{ width:auto; }
.y-cmp-r{ display:flex; align-items:center; gap:10px; }
.y-cmp-r > span{ flex:0 0 76px; color:rgba(255,255,255,.62); }
.y-seg{ flex:1; display:flex; gap:2px; padding:2px; border-radius:999px; background:rgba(255,255,255,.08); }
.y-seg button{ flex:1; border:0; background:transparent; color:rgba(255,255,255,.66); border-radius:999px; padding:5px 8px; font:inherit; font-size:12px; font-weight:500; cursor:pointer; }
.y-seg button:hover{ color:#fff; }
.y-seg button[aria-pressed="true"]{ background:var(--blue); color:#fff; font-weight:600; }
@media (max-width:820px){ .y-cmp{ left:8px; right:8px; bottom:8px; width:auto; } }

/* 우측 개요 패널이 붙는 높이 — 목차 바(76~127px)와 라이트/다크 토글(140px~) 아래로 내린다(pd-5x 는 머리가 바에 가려졌다) */
.aside{ top:148px; }
body:not(.y-nomode) .aside{ top:192px; }

/* 목차 바 '한 줄' — 칸이 11개라 간격·글자를 살짝 줄여 1440 폭 안에 넣는다 */
body.y-toc-line .pd-tabs-in{ gap:16px; }
body.y-toc-line .pd-tabnav a{ padding-inline:10px; font-size:13px; }


/* ══ ★10/5 AI 티 정리 — 넓은 자간 · 그림자 · 반복 애니메이션 걷어내기 ══ */
/* 자간: 한글 라벨로 바꾼 머리표·배지는 기본 자간 */
.mod-tag, .ba-tag, .flow-ct, .role .k, .pdmk .slot, .x-kl{ letter-spacing:0; }
.mod-tag{ font-size:13px; }
.role .k{ font-size:13.5px; }

/* 그림자·빛 번짐 */
.prog{ box-shadow:none; }
.pd-tabs.stuck{ box-shadow:none; }
.tg-menu, .pd-tabs.stuck .tg-menu, body.pd-dark .tg-menu{ box-shadow:none; }
.spec, body.pd-dark .spec{ box-shadow:none; }
.spec .cta:hover{ transform:none; }
.ba-knob{ box-shadow:none; border:1px solid var(--line); }
.rcard:hover{ transform:none; box-shadow:none; }

/* 시스템 구성도 — 평평하게: 그림자·그라데이션·아이콘 바탕 블록·흐르는 점선·호버 들림 없음 */
.flow{ background:#fff; }
.flow-links path{ stroke:#C5CFDE; stroke-width:1.5; }
.fnode{ box-shadow:none; transition:none; }
.fnode:hover{ transform:none; border-color:var(--line); }
.fnode .ic{ width:auto; height:auto; background:none; border-radius:0; color:var(--blue-d); }
.fnode .ic svg{ width:20px; height:20px; }
.fhub{ background:#fff; border-color:var(--line); box-shadow:none; }
.fhub .ic{ width:auto; height:auto; background:none; border-radius:0; color:var(--blue); }
.fhub .ic svg{ width:28px; height:28px; }
.fhub .chips span{ border-color:var(--line); color:var(--g700); }

/* 첫 화면 3줄 요약도 대표 이미지와 같은 폭으로(이미지만 넓으면 위아래 폭이 또 어긋난다) */
.x-key{ max-width:none; }
/* 수행 범위 표: 라벨과 값의 글줄 맞춤 */
.role{ align-items:baseline; }

/* ══ ★10/5 프로젝트 개요 패널 제거 — 헤드라인 아래 메타 줄과 중복 ══
   본문은 1단. 대표 이미지·3줄 요약·본문을 같은 1200px 폭·가운데 정렬로 맞춘다 */
.aside{ display:none !important; }
.detail{ grid-template-columns:minmax(0,1fr); }
.mainCol{ max-width:none; width:100%; margin-inline:auto; }
.zoom.y-still .stick{ max-width:1520px; }
.x-key{ max-width:none; }

/* ══ ★10/5 줄바꿈 — 낱말(어절) 중간에서 끊지 않고, 뜻 단위로 끊는다 ══
   ① 데이터의 \n → <br class="x-br"> (넓은 화면 전용) ② 나머지는 어절 단위 + 고르게 */
.dh, .mainCol, .x-key{ word-break:keep-all; overflow-wrap:break-word; }
.dh h1, .mod h2, .mod p.x-lh, .x-items b, .fhub .nk, .tl .k{ text-wrap:balance; }
.dh .sum, .mainCol p, .x-items em, .x-k p, .lead, figcaption, .tl .d, .role .v, .box .bv{ text-wrap:pretty; }
.x-items em{ display:block; }
@media (max-width:820px){ br.x-br{ display:none; } }
/* 폰: 3줄 요약은 한 줄이 짧아 뜻 단위 줄바꿈을 그대로 쓰고, 헤드라인 아래 설명은 고르게 */
@media (max-width:820px){
  .x-k br.x-br, .dh .sum br.x-br{ display:inline; }
  .dh .sum{ text-wrap:balance; }
}

/* ══ ★10/5 세로 시작선 = 헤더(.gnb-in)와 같은 선 — 사장님 지적(일괄 공통) ══
   왼쪽 = 로고 시작점, 오른쪽 = 햄버거 끝점. .gnb-in 과 같은 1520 틀·좌우 32px(모바일도 32 — ux-common §1) */
.wrap{ max-width:1520px; padding-inline:32px; }
.mainCol{ max-width:none; }

/* ══ ★10/5 본문 블록 폭 — 요약 박스·항목은 본문 폭 전체, 문단은 읽기 좋은 폭 유지 ══ */
.mod .box{ max-width:none; }
.x-items{ max-width:none; }
.x-items.n3{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.x-items.n3 li{ grid-template-columns:auto 1fr; align-content:start; padding:20px 22px 22px; }
.x-items.rows{ gap:0; border-top:1px solid var(--line); }
.x-items.rows li{ grid-template-columns:40px 230px minmax(0,1fr); column-gap:20px; align-items:baseline;
  padding:22px 4px; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.x-items.rows .n{ grid-row:auto; padding-top:0; }
.x-items.rows b{ font-size:17px; }
.x-items.rows em{ font-size:15.5px; line-height:1.85; }
@media (max-width:900px){
  .x-items.n3{ grid-template-columns:1fr; }
  .x-items.rows li{ grid-template-columns:32px minmax(0,1fr); row-gap:6px; }
  .x-items.rows em{ grid-column:2; }
}
/* 본문 이미지도 블록과 같은 폭까지(세로로 긴 이미지는 높이 560 제한 그대로) */
.x-fig{ max-width:none; }
/* 목차 바 첫 칸 글자도 본문 글자와 같은 세로선에서 시작(안쪽 여백 12px 만큼 당김, 밑줄은 글자 폭 그대로) */
.pd-tabnav > :first-child{ margin-left:-12px; }

/* ══ ★10/5 이미지 잘림 — 화면 전체가 보이게(남는 자리는 흰 바탕) ══ */
/* 기기 목업: 화면 비율과 캡처 비율이 달라도 좌우가 잘리지 않게 위 기준으로 넣는다 */
.mk-shot{ background:#fff; }
.mk-shot img{ object-fit:contain; object-position:center top; }
/* 화면 갤러리 썸네일: 왼쪽 위 기준 자르기 → 전체 보이기 */
.gal-it .x-th{ background:#fff; padding:10px; }
.gal-it .x-th img{ object-fit:contain; object-position:center; }

/* ══ ★10/5 제목 크게 · 제목과 설명 사이 간격 좁게 ══ */
.mod-tag + h2{ margin-top:8px; }
.mod h2{ font-size:clamp(26px,3.1vw,40px); line-height:1.3; max-width:24em; }
.mod h2 + p, .mod h2 + .lead, .mod h2 + .box, .mod h2 + p.x-lh{ margin-top:12px; }
.mod p.x-lh{ font-size:20px; }
.mod p.x-lh + p{ margin-top:4px; }
.gal-it .cp{ margin-top:14px; font-size:19px; font-weight:600; line-height:1.4; letter-spacing:-.025em; }
.gal-it .cp em{ margin-top:2px; font-size:14.5px; line-height:1.55; }
.fnode .nk{ font-size:15.5px; }
.fnode .nd{ margin-top:1px; }
.x-items b{ font-size:17.5px; line-height:1.45; }
.x-items li{ row-gap:2px; }
.tl li .k{ font-size:17px; }
.tl li .d{ margin-top:4px; }

/* ══ ★10/5 문단 폭 — 뜻 단위로 직접 나눈 줄(최대 약 46자)이 브라우저에서 한 번 더 꺾이지 않게 ══ */
.mod p{ max-width:50em; }
/* 3칸 카드: 번호를 제목 위로 올려 설명 폭 확보 */
.x-items.n3 li{ grid-template-columns:1fr; row-gap:4px; }
.x-items.n3 .n{ grid-row:auto; padding-top:0; }
.x-items.n3 em{ font-size:15px; }
.mod .lead{ max-width:52em; }

/* ══ ★10/5 이미지 전체보기 ══ */
#zoomBox, .mk-stage, .gal-it .x-th, .x-fig img{ cursor:zoom-in; }
.x-lb{ position:fixed; inset:0; z-index:300; background:rgba(8,16,30,.9); display:flex; align-items:center; justify-content:center; padding:64px 88px; }
.x-lb[hidden]{ display:none; }
.lb-fig{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; }
.lb-fig img{ display:block; max-width:min(1600px, 100%); max-height:calc(100vh - 170px); width:auto; height:auto; border-radius:10px; background:#fff; cursor:default; }
.lb-fig figcaption{ margin-top:14px; display:flex; gap:12px; align-items:baseline; color:#fff; }
.lb-fig figcaption b{ font-size:17px; font-weight:600; }
.lb-fig figcaption span{ font-size:14.5px; color:rgba(255,255,255,.7); }
.x-lb button{ position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff; border-radius:50%; width:46px; height:46px; display:grid; place-content:center; cursor:pointer; }
.x-lb button:hover{ background:rgba(255,255,255,.22); }
.x-lb button svg{ width:22px; height:22px; }
.lb-x{ top:18px; right:18px; }
.lb-nav{ top:50%; transform:translateY(-50%); display:none !important; }
.x-lb.multi .lb-nav{ display:grid !important; }
.lb-prev{ left:22px; } .lb-next{ right:22px; }
html.lb-open{ overflow:hidden; }
@media (max-width:820px){ .x-lb{ padding:56px 12px; } .lb-prev{ left:6px; } .lb-next{ right:6px; } .lb-fig figcaption{ flex-direction:column; gap:2px; align-items:center; text-align:center; } }

/* ══ ★10/5 문장 단위 줄바꿈 ══ 문장·쉼표 마디를 한 덩어리로(넓은 화면). 폰은 자동 줄바꿈 */
.x-s, .x-c{ display:inline-block; max-width:100%; }
@media (max-width:820px){ .x-s, .x-c{ display:inline; } }

/* ══ ★10/5 시스템 구성 = 도식 그림(시안 A~E 끼워 보기) ══ */
.x-arch{ margin:24px 0 0; }
.x-arch img{ display:block; width:100%; height:auto; }
.x-arch svg{ display:block; width:100%; height:auto; font-family:'Paperlogy',Pretendard,sans-serif; }
#x-arch-defs{ position:absolute; width:0; height:0; }
.x-arch-pick{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.x-arch-pick span{ font-size:13px; font-weight:600; color:var(--g500); margin-right:4px; }
.x-arch-pick button{ font:inherit; font-size:13.5px; font-weight:500; color:var(--g700); background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer; }
.x-arch-pick button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ══ ★10/5 번호 카드 정리(AI 티 질의 확정) — 박스·바탕·아이콘·알약 없이 선과 글자 위계로만 ══
   섹션마다 모양을 달리한다: 문제·진단 = 3칸 + 윗선 / 해결 기능 = 제목 왼쪽·설명 오른쪽 줄 / 수행 범위 = 한 줄 흐름 + 정보 줄 */
/* 문제·진단 3항목: 테두리 카드 → 위에 가는 선 하나, 번호는 뺀다(순서가 뜻이 없는 나열) */
.x-items.n3{ gap:40px; }
.x-items.n3 li{ padding:22px 0 0; border:0; border-top:1px solid var(--ink); border-radius:0; background:none; row-gap:8px; }
.x-items.n3 .n{ display:none; }
.x-items.n3 b{ font-size:20px; font-weight:700; line-height:1.4; letter-spacing:-.025em; }
.x-items.n3 em{ font-size:15.5px; line-height:1.75; color:var(--g700); }

/* 해결 기능: 줄 목록. 줄 사이 가는 선, 왼쪽 = 작은 번호 + 큰 제목, 오른쪽 = 문장마다 한 줄 */
.x-items.rows{ gap:0; border-top:1px solid var(--ink); }
.x-items.rows li{ grid-template-columns:minmax(220px,320px) minmax(0,1fr); column-gap:56px; row-gap:6px; align-items:start;
  padding:30px 0; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.x-items.rows .n{ grid-column:1; grid-row:1; font-size:13.5px; font-weight:600; color:var(--g500); padding:0; }
.x-items.rows b{ grid-column:1; grid-row:2; font-size:22px; font-weight:700; line-height:1.4; letter-spacing:-.025em; }
.x-items.rows .x-pts{ grid-column:2; grid-row:1 / span 2; }
.x-pts{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.x-pts li{ position:relative; display:block !important; padding:0 0 0 16px !important; background:none !important; border:0 !important; border-radius:0 !important;
  font-size:16px; line-height:1.75; color:var(--g700); }
.x-pts li::before{ content:''; position:absolute; left:1px; top:.8em; width:5px; height:1.5px; background:var(--g500); }
@media (max-width:900px){
  .x-items.n3{ gap:28px; }
  .x-items.rows li{ grid-template-columns:1fr; padding:24px 0; }
  .x-items.rows .x-pts{ grid-column:1; grid-row:3; margin-top:10px; }
}

/* 수행 범위: 단계는 한 줄 흐름(글 + 화살표 글자), 아래 정보는 라벨·값 한 줄씩 */
.x-role{ margin-top:30px; border-top:1px solid var(--ink); }
.x-role .k{ font-size:14px; font-weight:500; letter-spacing:0; color:var(--g500); }
.x-rflow{ padding:26px 0 30px; border-bottom:1px solid var(--line); }
.x-rflow ol{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:baseline; row-gap:8px; }
.x-rflow li{ font-size:22px; font-weight:700; line-height:1.45; letter-spacing:-.025em; color:var(--ink); word-break:keep-all; }
.x-rflow li + li::before{ content:'→'; margin:0 16px; font-weight:400; color:var(--g500); }
.x-rinfo{ margin:0; display:grid; grid-template-columns:1fr 1fr 2fr; }
.x-rinfo > div{ padding:22px 0; border-bottom:1px solid var(--line); }
.x-rinfo > div.wide{ grid-column:1 / -1; }
.x-rinfo dt{ font-size:14px; font-weight:500; color:var(--g500); }
.x-rinfo dd{ margin:6px 0 0; font-size:18px; font-weight:600; line-height:1.6; letter-spacing:-.02em; color:var(--ink); word-break:keep-all; }
.x-rinfo dd.na{ color:var(--g500); font-weight:500; }
@media (max-width:900px){
  .x-rflow li{ font-size:19px; }
  .x-rflow li + li::before{ margin:0 10px; }
  .x-rinfo{ grid-template-columns:1fr; }
}

/* ══ ★10/5 섹션 위아래 여백 맞춤 — 머리표(p.mod-tag)에 붙은 문단 위 여백 16px·줄높이 32px 때문에 위가 17px 더 넓었다 ══ */
.mod > .mod-tag:first-child{ margin-top:0; line-height:1.3; }

/* ══ ★10/5 기기 목업 — 노트북 왼쪽 크게, 회의실·태블릿 오른쪽 위/아래(세로 길이 절반 이하로) ══
   세 목업 모두 3:2 → 왼쪽 높이 = 오른쪽 2장 + 사이 간격·캡션 1줄이 되도록 왼쪽 폭에 75px 를 더 준다 */
@media (min-width:820px){
  .pdmk{ grid-template-columns:calc((100% - 22px - 75px) * 2 / 3 + 75px) minmax(0,1fr); align-items:start; }
  .pdmk .hero{ grid-column:1; grid-row:1 / span 2; }
}

/* ══ ★10/5 화면 갤러리 자동 흐름(회전 초밥처럼 계속 흐름) — 마우스 올리면 멈춤 ══ */
.gal-track.x-auto{ scroll-snap-type:none; }

/* ══ ★10/5 갤러리 머리 — 안내 문구 없이 제목 줄 오른쪽에 넘김 화살표 ══ */
.x-gh{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.x-gh .mod-tag{ margin-top:0; line-height:1.3; }
.x-gh .gal-nav{ flex:none; padding-bottom:4px; }
.x-gh + .gal .gal-track{ margin-top:26px; }

/* ══ ★10/5 해결 기능 줄 — 항목마다 그 화면을 오른쪽 끝에(눌러서 크게 보기) ══ */
.x-items.rows li.has-im{ grid-template-columns:minmax(200px,280px) minmax(0,1fr) minmax(0,340px); column-gap:48px; }
.x-ithumb{ grid-column:3; grid-row:1 / span 2; margin:0; aspect-ratio:16/10; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; cursor:zoom-in; }
.x-ithumb img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
@media (max-width:1100px){
  .x-items.rows li.has-im{ grid-template-columns:minmax(180px,240px) minmax(0,1fr); }
  .x-ithumb{ grid-column:1 / -1; grid-row:3; margin-top:18px; max-width:520px; }
}
@media (max-width:900px){
  .x-items.rows li.has-im{ grid-template-columns:1fr; }
  .x-ithumb{ grid-row:4; margin-top:14px; max-width:none; }
}

/* ══ ★10/5 결과 — 세로로 긴 이미지는 항목 옆에 나란히(왼쪽 쏠림·빈 여백 지적) ══ */
.x-side{ margin-top:30px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:64px; align-items:center; }
.x-side .x-lh{ margin-top:0; }
.x-side .x-items.n3{ grid-template-columns:1fr; gap:26px; }
.x-side .x-fig{ margin:0; }
.x-side .x-fig img{ width:100%; height:auto; max-height:none; }
@media (max-width:900px){ .x-side{ grid-template-columns:1fr; gap:30px; } }

/* ══ ★10/5 제목 ↔ 말풍선(인용) 상자 사이 행간 부족 ══ */
.mod h2 + .box{ margin-top:30px; }

/* ══ ★10/5 해결 기능 레이아웃(pt/pd-5y-feat.js) — 사장님 확정: 넓은 화면 = 스크롤 따라 바뀜, 좁은 화면 = 펼쳐 보기
   박스·아이콘 없이 선·글자 위계 ══ */
.xf{ margin-top:30px; border-top:1px solid var(--ink); }
.xf .x-ithumb{ grid-column:auto; grid-row:auto; margin:0; aspect-ratio:16/10; }
.xf-n{ display:block; font-size:13.5px; font-weight:600; color:var(--g500); }
.xf-t{ margin:6px 0 0; font-size:24px; font-weight:700; line-height:1.4; letter-spacing:-.025em; color:var(--ink); }
.xf .x-pts{ margin-top:16px; }

/* 넓은 화면: 스크롤 따라 바뀜 */
.xf3{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; }
.xf3-it{ min-height:62vh; padding:56px 0; display:flex; flex-direction:column; justify-content:center; opacity:.35; transition:opacity .3s; }
.xf3-it + .xf3-it{ border-top:1px solid var(--line); }
.xf3-it.on{ opacity:1; }
.xf3-stick{ position:sticky; top:calc(50vh - 200px); padding-top:56px; }
.xf3-stack{ position:relative; aspect-ratio:16/10; }
.xf3-f{ position:absolute; inset:0; opacity:0; transition:opacity .35s; }
.xf3-f.on{ opacity:1; }
.xf3-f .x-ithumb{ height:100%; }

/* 좁은 화면: 펼쳐 보기 */
.xf5-it{ border-bottom:1px solid var(--line); }
.xf5-h{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:40px minmax(0,1fr) 24px; align-items:center; width:100%; padding:22px 0; cursor:pointer; }
.xf5-h .xf-n{ font-size:14px; }
.xf5-h .xf-t{ margin:0; font-size:19px; }
.xf5-h:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.xf5-sign{ position:relative; width:16px; height:16px; justify-self:end; }
.xf5-sign::before, .xf5-sign::after{ content:''; position:absolute; left:0; top:7px; width:16px; height:2px; background:var(--ink); transition:transform .25s; }
.xf5-sign::after{ transform:rotate(90deg); }
.xf5-it.open .xf5-sign::after{ transform:rotate(0); }
.xf5-p{ display:none; gap:18px; padding:2px 0 30px; }
.xf5-it.open .xf5-p{ display:grid; }
.xf5-p .x-pts{ margin-top:0; }

/* ══ ★10/5 섹션 사이 여백 대비 — 58px+58px(116) 은 섹션 안 간격(12~30px)과 차이가 작아 끊김이 약했다.
   섹션 사이는 넓게(1440 기준 위아래 약 100px → 사이 약 200px, 폰 64px → 128px), 섹션 안은 지금처럼 촘촘하게 ══ */
.mod{ padding:clamp(64px, 7vw, 104px) 0; }
.mod:first-child{ padding-top:0; }

/* ══ ★10/5 진행 과정 아래 사용 기술·주요 기능 줄(수행 범위 합침) ══ */
.x-pinfo{ margin-top:48px; grid-template-columns:minmax(0,560px) minmax(0,1fr); border-top:1px solid var(--line); column-gap:40px; }
.x-pinfo > div{ border-bottom:0; padding-bottom:0; }
.x-pinfo dd{ margin-top:12px; }
@media (max-width:900px){ .x-pinfo{ grid-template-columns:1fr; } .x-pinfo > div + div{ border-top:1px solid var(--line); margin-top:22px; } }

/* ══ ★10/5 갤러리 아래 「사용한 색」 한 줄(디자인 기준 섹션 대체) ══ */
.x-sw{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:40px; row-gap:10px; align-items:center; }
.x-sw .k{ font-size:14px; font-weight:500; color:var(--g500); }
.x-sw ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 32px; }
.x-sw li{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--ink); }
.x-sw li i{ width:18px; height:18px; border-radius:50%; border:1px solid var(--line); flex:none; }
.x-sw li em{ font-style:normal; font-size:13px; font-weight:500; color:var(--g500); }
.x-sw p{ grid-column:2; margin:0; font-size:14.5px; line-height:1.7; color:var(--g500); max-width:none; }
@media (max-width:900px){ .x-sw{ grid-template-columns:1fr; } .x-sw p{ grid-column:1; } }

/* ══ ★10/5 태그(사장님 확정) — 02 사용한 색 = 면 태그(t2) · 03 사용 기술·주요 기능 = 글자 태그(t3) ══ */
.x-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.x-tags li{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.3; color:var(--ink); }
.x-tags li em{ font-style:normal; font-size:12.5px; font-weight:500; opacity:.7; }
.x-tags li i{ width:12px; height:12px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
/* 면 태그: 그 색 자체가 바탕 */
.x-tags.t2 li{ padding:9px 15px; border-radius:4px; }
.x-tags.t2.sw li{ min-width:150px; justify-content:space-between; padding:12px 16px; }
/* 색 바탕 위 색 코드는 회색으로 흐리지 않고 이름과 같은 글자색(굵기만 낮춤) — 10/5 지적 */
.x-tags.t2.sw li em{ opacity:1; color:inherit; font-size:13px; font-weight:500; }
.x-tags.t2.sw li.wh{ box-shadow:inset 0 0 0 1px #CBD3DF; }
/* 글자 태그: 상자 없이 # 과 글자만 */
.x-tags.t3{ gap:6px 22px; }
.x-tags.t3 li{ font-size:17px; padding:0; }
.x-tags.t3 li::before{ content:'#'; margin-right:-4px; font-weight:500; color:var(--blue); }
.x-sw{ align-items:start; }
.x-sw .k{ padding-top:8px; }

/* ══ ★10/5 인사이트 = 도입 전·후(사장님 확정) ══ */
.xi-q em{ font-style:normal; color:var(--blue); }
/* 1 도입 전·후 */
.mod .xi-q{ margin-top:26px; font-size:clamp(22px,2.3vw,30px); font-weight:700; line-height:1.5; letter-spacing:-.03em; color:var(--ink); max-width:none; }
.xi-ba{ margin-top:44px; border-top:1px solid var(--ink); }
.xi-bh, .xi-br{ display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); align-items:center; }
.xi-bh{ padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }
.xi-bh span:first-child{ color:var(--g500); } .xi-bh span:last-child{ grid-column:3; color:var(--blue); }
.xi-br{ padding:24px 0; border-bottom:1px solid var(--line); }
.mod .xi-br p{ margin:0; max-width:none; }
.mod .xi-br .b{ font-size:16px; line-height:1.7; color:var(--g500); }
.mod .xi-br .a{ font-size:19px; font-weight:700; line-height:1.55; letter-spacing:-.02em; color:var(--ink); }
.xi-br i{ font-style:normal; font-size:20px; color:var(--g500); text-align:center; }
@media (max-width:900px){
  .xi-bh{ display:none; }
  .xi-br{ grid-template-columns:1fr; row-gap:6px; }
  .xi-br i{ text-align:left; transform:rotate(90deg); width:20px; }
}

/* ══ ★10/5 사용 기술 = 로고 + 이름 ══
   주요 기능(# 글자 태그)과 같은 글자 크기·같은 줄 높이(28px)로 맞춘다. 로고는 22px, 꽉 찬 네모 로고(JS)는 조금 줄여 눈대중 크기를 맞춤 */
.x-tech{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 30px; }
.x-tech li{ display:flex; align-items:center; gap:9px; height:28px; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.x-tech .lg{ display:flex; align-items:center; gap:5px; }
.x-tech i{ display:block; width:22px; height:22px; -webkit-mask:var(--src) center / contain no-repeat; mask:var(--src) center / contain no-repeat; }
.x-tech i.sq{ width:19px; height:19px; }
.x-tags.t3 li{ height:28px; line-height:28px; font-weight:700; }
.x-tags.t3{ gap:10px 22px; }

/* ★라이브 본문 2단 이미지(관리자 image2) */
.x-fig.x-fig2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width:700px){ .x-fig.x-fig2{ grid-template-columns:1fr; } }

/* ══ ★10/8 7차 상세 구성(사장님 고름) — 머리 「이 시스템으로 하는 일」 · 도입 전·후 나란히 · 운영자의 하루 · 기능마다 전 → 후 · 흐름 도식 ══ */
.x-key.x-h3{ position:relative; }
.x-key.x-h3 .x-h3l{ grid-column:1 / -1; margin:0; padding:14px 26px 0; font-size:12.5px; font-weight:600; color:var(--blue-d); }
.x-key.x-h3 .x-k{ padding-top:12px; }
.x-key.x-h3 .x-k b{ display:block; font-size:19px; font-weight:700; line-height:1.4; letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
.x-key.x-h3 .x-k p{ margin-top:6px; font-size:15px; font-weight:400; color:var(--g700); }
@media (max-width:820px){ .x-key.x-h3 .x-h3l{ padding:14px 4px 0; } }

.x-bf{ margin-top:30px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.x-bf .x-fig{ margin:0; max-width:none; display:flex; flex-direction:column; }
.x-bf .x-fig img{ order:2; width:100%; max-height:none; border-radius:10px; }
.x-bf .x-fig figcaption{ order:1; margin:0 0 12px; display:flex; flex-direction:column; gap:3px; }
.x-bf .x-fig figcaption b{ font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.x-bf .x-fig figcaption span{ font-size:14px; color:var(--g500); line-height:1.6; }
.x-bf .x-bf-b figcaption b{ color:var(--g500); }
.x-bf .x-bf-a figcaption b{ color:var(--blue); }
@media (max-width:900px){ .x-bf{ grid-template-columns:1fr; gap:22px; } }

.x-day{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; border-top:1px solid var(--ink); }
.x-day li{ padding:18px 18px 22px 0; border-bottom:1px solid var(--line); }
.x-day li + li{ padding-left:18px; border-left:1px solid var(--line); }
.x-day b{ display:block; font-size:15px; font-weight:700; color:var(--blue); letter-spacing:0; }
.mod .x-day p{ margin:6px 0 0; font-size:15.5px; line-height:1.65; color:var(--ink); max-width:none; }
@media (max-width:1100px){ .x-day{ grid-template-columns:repeat(3, minmax(0,1fr)); } .x-day li:nth-child(4){ padding-left:0; border-left:0; } }
@media (max-width:700px){ .x-day{ grid-template-columns:1fr; } .x-day li{ padding:14px 0 16px; border-left:0 !important; } }

.x-ba3{ margin-top:30px; border-top:1px solid var(--ink); }
.x-ba3h, .x-ba3r{ display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr) minmax(0,1fr); column-gap:32px; align-items:start; }
.x-ba3h{ padding:14px 0; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--g500); }
.x-ba3h span:last-child{ color:var(--blue); }
.x-ba3r{ padding:20px 0; border-bottom:1px solid var(--line); }
.x-ba3r b{ font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.mod .x-ba3r p{ margin:0; max-width:none; }
.mod .x-ba3r .b{ font-size:15.5px; line-height:1.7; color:var(--g500); }
.mod .x-ba3r .a{ font-size:16.5px; font-weight:600; line-height:1.6; color:var(--ink); }
@media (max-width:820px){
  .x-ba3h{ display:none; }
  .x-ba3r{ grid-template-columns:1fr; row-gap:6px; }
  .mod .x-ba3r .b::before{ content:'전  '; color:var(--g500); font-weight:600; }
  .mod .x-ba3r .a::before{ content:'후  '; color:var(--blue); font-weight:600; }
}

.x-fig.x-flow{ margin:26px 0 8px; max-width:none; }
.x-fig.x-flow img{ width:100%; max-height:none; background:#FBFAF6; }

/* ══ ★10/8 7차 — 기기 연출 한 장면(mkScene) · 직접 만들어 쓰는 이유(why) ══ */
.x-scene{ margin-top:30px; max-width:none; }
.x-scene img{ width:100%; border-radius:12px; }
.x-wt{ margin-top:14px; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.x-wt > div{ padding:14px 16px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:3px; }
.x-wt > div:last-child{ border-right:0; }
.x-wt b{ font-size:16px; font-weight:700; color:var(--ink); }
.x-wt span{ font-size:14.5px; color:var(--g500); line-height:1.55; }
.x-wa{ margin-top:14px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
.x-wa > div{ border-top:2px solid var(--ink); padding-top:12px; }
.x-wa b{ display:block; font-size:17px; font-weight:700; color:var(--ink); }
.mod .x-wa p{ margin:6px 0 0; font-size:15.5px; line-height:1.65; color:var(--ink); max-width:none; }
.x-wa em{ display:block; margin-top:6px; font-style:normal; font-size:14px; color:var(--g500); }
.x-wf{ margin-top:12px; border-top:1px solid var(--line); }
.x-wf > div{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:13px 2px; border-bottom:1px solid var(--line); }
.x-wf b{ font-size:15.5px; font-weight:600; color:var(--ink); }
.x-wf span{ font-size:15px; color:var(--g500); line-height:1.6; }
.mod .x-wn{ margin:8px 0 0; font-size:15.5px; line-height:1.7; color:var(--ink); }
.x-why-side{ margin-top:10px; }
@media (max-width:1100px){ .x-wt{ grid-template-columns:repeat(3, minmax(0,1fr)); } .x-wt > div:nth-child(3){ border-right:0; } .x-wt > div:nth-child(n+4){ border-top:1px solid var(--line); } .x-wa{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:700px){ .x-wt{ grid-template-columns:1fr; } .x-wt > div{ border-right:0; border-top:1px solid var(--line); } .x-wt > div:first-child{ border-top:0; } .x-wa{ grid-template-columns:1fr; gap:18px; } .x-wf > div{ grid-template-columns:1fr; gap:4px; } }


/* 10/7 라이브: 다른 사례 카드 썸네일 */
.rcard .th img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }