@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ──────────────────────────────────────────────
   위어드랩 스튜디오 — 공통 스타일
   무채색 95% + 시스템 블루 5%
   ────────────────────────────────────────────── */

:root{
  --blue:#0A84FF; --blue-hover:#0060DF; --blue-bg:#EAF4FF;
  --bg:#FFFFFF; --bg-sub:#FAFAFA; --ink:#111111;
  --body:#333333; --muted:#767676; --line:#E5E5E5;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Pretendard',sans-serif;color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;letter-spacing:-0.01em;
}
.container{max-width:1280px;margin:0 auto;padding:0 40px;}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
.rv.on{opacity:1;transform:none;}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s;}
.nav.scrolled{border-bottom-color:var(--line);}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 40px;height:60px;
  display:flex;align-items:center;justify-content:space-between;}
.nav-logo{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em;text-decoration:none;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:14px;color:var(--body);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--blue);}
/* 홈페이지 제작은 앵커가 아니라 다른 페이지다. 알약 형태로 목적지임을 구분한다. */
.nav-web{padding:7px 15px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font-weight:500;line-height:1;
  transition:color .2s,border-color .2s,background-color .2s;}
.nav-web:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-bg);}

/* ── HERO ── */
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding-top:60px;}
/* 세로 flex에서 .container의 좌우 auto 마진이 stretch를 취소시켜
   내용이 fit-content로 줄고 가운데로 몰린다. width:100%로 막아 좌측정렬을 지킨다. */
.hero>.container{width:100%;}
.hero h1{font-size:68px;font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1.22;}
.hero .sub{margin-top:30px;font-size:19px;color:var(--muted);line-height:1.7;}
.hero-foot{margin-top:96px;display:flex;align-items:flex-end;justify-content:space-between;
  padding-top:28px;border-top:1px solid var(--line);}
.hero-foot .l{font-size:14px;color:var(--muted);}
.hero-foot .r{font-size:14px;color:var(--muted);display:flex;gap:28px;}

/* ── STORY ── */
.story{padding:150px 0;background:var(--bg-sub);}
.story-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:80px;}
.eyebrow{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;}
.story h2{margin-top:16px;font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1.35;}
.story p{font-size:20px;line-height:1.9;color:var(--body);}
.story p+p{margin-top:34px;}
.story .hl{color:var(--ink);font-weight:600;}
.story .quote{
  margin-top:44px;padding:34px 38px;background:#fff;border-left:3px solid var(--blue);
  font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.5;
}
.story .last{margin-top:40px;font-size:20px;color:var(--ink);font-weight:600;}

/* ── QUESTIONS ── */
.q{padding:150px 0;}
.q h2{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.025em;}
.q-list{margin-top:60px;}
.q-row{display:flex;align-items:baseline;gap:28px;padding:26px 0;border-bottom:1px solid var(--line);
  transition:padding-left .35s cubic-bezier(.22,1,.36,1);}
.q-row:first-child{border-top:1px solid var(--line);}
.q-row:hover{padding-left:14px;}
.q-num{font-size:13px;font-weight:700;color:var(--muted);min-width:26px;}
.q-txt{font-size:36px;font-weight:600;color:var(--ink);letter-spacing:-.03em;}
.q-row:hover .q-txt{color:var(--blue);}

/* ── APP BLOCKS ── */
.app-sec{padding:130px 0;border-top:1px solid var(--line);}
.app-sec.alt{background:var(--bg-sub);}
.tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;}
.tag .nm{font-size:15px;font-weight:700;color:var(--ink);}
.badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;letter-spacing:.02em;}
.b-live{background:var(--blue-bg);color:var(--blue);}
.b-wip{background:#EFEFEF;color:var(--muted);}
.app-sec h3{font-size:44px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.3;}
/* lead 본문 — 앱 섹션과 BIZLIV(.tband)가 같은 조판을 쓴다.
   max-width는 .app-sec 쪽만: BIZLIV는 2열 그리드 안이라 컬럼 폭이 이미 제한된다. */
.app-sec .lead,.tband .lead{font-size:18px;line-height:1.85;color:var(--body);}
.app-sec .lead{margin-top:24px;max-width:520px;}
.lead p+p{margin-top:20px;}
.lead b{font-weight:600;color:var(--ink);}
.lead .close{color:var(--muted);}
.acts{margin-top:40px;display:flex;gap:12px;}
.btn{display:inline-flex;align-items:center;font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:100px;text-decoration:none;transition:all .25s;}
.btn-p{background:var(--ink);color:#fff;}
.btn-p:hover{background:var(--blue);}
.btn-g{color:var(--ink);border:1px solid var(--line);}
.btn-g:hover{border-color:var(--ink);}

/* 링크 미확정 버튼 — assets/js/config.js 에 URL을 넣으면 자동으로 활성화됩니다 */
.btn.is-off{background:#EFEFEF;color:#AAAAAA;border-color:transparent;cursor:default;pointer-events:none;}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:90px;align-items:center;}
.split.rev>*:first-child{order:2;}

/* ── SCREENSHOTS ──
   .shot[data-img] 의 경로에 파일을 넣으면 자동으로 표시되고 라벨이 사라집니다.
   파일이 없으면 회색 플레이스홀더 그대로 유지됩니다. */
.shots{display:flex;gap:18px;}
.shot{flex:1;aspect-ratio:9/19.5;background:#EAEAEA center/cover no-repeat;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#AAA;
  transition:transform .5s cubic-bezier(.22,1,.36,1);}
.shot.has-img>span{display:none;}
.shots:hover .shot{transform:translateY(-8px);}
.shots:hover .shot:nth-child(2){transition-delay:.05s;}
.shots:hover .shot:nth-child(3){transition-delay:.1s;}

/* ── STAT STRIP ── */
.stats{margin-top:56px;display:flex;gap:56px;padding-top:32px;border-top:1px solid var(--line);}
.stat .v{font-size:36px;font-weight:700;color:var(--ink);letter-spacing:-.03em;}
.stat .v em{font-style:normal;font-size:18px;color:var(--muted);margin-left:3px;}
.stat .k{margin-top:6px;font-size:14px;color:var(--muted);}

/* ── BIG NUMBER BAND ── */
.band{padding:120px 0;background:var(--ink);color:#fff;}
.band .kicker{font-size:14px;color:rgba(255,255,255,.55);letter-spacing:.04em;}
.band .big{margin-top:26px;font-size:80px;font-weight:700;letter-spacing:-.045em;line-height:1.05;}
.band .big s{text-decoration:none;color:rgba(255,255,255,.32);}
.band .big i{font-style:normal;color:var(--blue);}
.band .note{margin-top:26px;font-size:18px;color:rgba(255,255,255,.6);max-width:520px;line-height:1.75;}

/* ── FLOW (쟝고) ── */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;
  border:1px solid var(--line);}
.flow-4{grid-template-columns:repeat(4,1fr);}
.flow-i{transition:background .3s;}
.flow-i:hover{background:#fff;}
.flow-i{padding:44px 34px;border-right:1px solid var(--line);}
.flow-i:last-child{border-right:none;}
.flow-i .s{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.06em;}
.flow-i h4{margin-top:16px;font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.flow-i p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--muted);}

.mini{display:grid;grid-template-columns:minmax(0,1.2fr) 190px;gap:70px;align-items:center;}

/* ── TEXT-ONLY BAND ── */
.tband{padding:120px 0;}
.tband-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start;}
.tband h3{font-size:40px;}

/* ── PRINCIPLES ── */
.pr{padding:150px 0;background:var(--bg-sub);}
.pr-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:90px;}
.pr h2{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1.35;
  position:sticky;top:120px;}
.pr-item{padding:38px 0;border-top:1px solid var(--line);}
.pr-item:first-child{padding-top:0;border-top:none;}
.pr-n{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.06em;}
.pr-item h4{margin-top:12px;font-size:23px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.pr-item p{margin-top:14px;font-size:17px;line-height:1.8;color:var(--body);}

/* ── CONTACT ── */
.ct{padding:140px 0;}
.ct h2{font-size:44px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.3;}
.ct a{display:inline-block;margin-top:32px;font-size:26px;font-weight:600;
  color:var(--blue);text-decoration:none;letter-spacing:-.02em;
  border-bottom:1px solid transparent;transition:border-color .25s;}
.ct a:hover{border-bottom-color:var(--blue);}

footer{padding:44px 0;border-top:1px solid var(--line);}
.ft{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;
  font-size:13px;color:var(--muted);}

/* ── 404 ── */
.nf{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding-top:60px;}
/* 세로 flex에서는 .container의 좌우 auto 마진이 stretch를 취소시켜
   내용이 fit-content로 줄고 가운데로 몰린다. width:100%로 막는다. */
.nf>.container{width:100%;}
.nf .code{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.06em;}
.nf h1{margin-top:18px;font-size:44px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.3;}
.nf p{margin-top:22px;font-size:18px;line-height:1.8;color:var(--muted);}

/* ══════════════════════════════════════════════
   터치 타깃 — 최소 44×44px
   폭과 무관하게 적용한다(터치 노트북도 있으므로).
   nav는 60px flex 중앙정렬이라 패딩을 줘도 글자 위치가 변하지 않는다.
   본문 링크는 보이는 모양을 건드리지 않도록 투명 히트 영역만 겹친다.
   ══════════════════════════════════════════════ */
.nav-logo{padding:14px 0;}
.ct a,.dp-back,.nav-links a{position:relative;}
.ct a::after,.dp-back::after{content:'';position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px;}
/* nav 링크는 "앱"처럼 두 글자라 가로도 모자란다. 좌우 16px씩 넓힌다
   (gap 34px이므로 인접 링크와 2px 여유가 남아 겹치지 않는다) */
.nav-links a::after{content:'';position:absolute;left:-16px;right:-16px;
  top:50%;transform:translateY(-50%);height:44px;}
/* 이 알약은 자체 패딩이 있어 좌우로 더 넓히면 인접 링크를 덮는다 */
.nav-web::after{left:0;right:0;}

/* ── RESPONSIVE ── */
@media screen and (max-width:900px){
  .container{padding:0 22px;}
  /* nav·footer는 .container를 쓰지 않아 40px로 남아 있었다 → 본문과 좌측을 맞춘다 */
  .nav-inner,.ft{padding:0 22px;}
  .hero{min-height:78vh;} .hero h1{font-size:38px;} .hero .sub{font-size:17px;}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:14px;margin-top:60px;}
  .hero-foot .r{gap:16px;flex-wrap:wrap;}
  .story,.q,.pr{padding:90px 0;} .app-sec,.band,.tband,.ct{padding:80px 0;}
  .story-grid,.split,.mini,.pr-grid,.tband-in{grid-template-columns:1fr;gap:44px;}
  .split.rev>*:first-child{order:0;}
  .story h2,.q h2,.pr h2{font-size:27px;} .story p{font-size:17px;}
  .story .quote{font-size:20px;padding:26px 24px;}
  .q-txt{font-size:23px;} .app-sec h3,.tband h3{font-size:28px;}
  .band .big{font-size:40px;} .stats{gap:30px;flex-wrap:wrap;} .stat .v{font-size:26px;}
  .flow,.flow-4{grid-template-columns:1fr;}
  .app-sec .lead,.tband .lead{font-size:16px;line-height:1.75;}
  .flow-i{border-right:none;border-bottom:1px solid var(--line);padding:30px 24px;}
  .flow-i:last-child{border-bottom:none;}
  .mini .shot{width:150px;}
  .pr h2{position:static;} .ct h2{font-size:28px;} .ct a{font-size:20px;}
  /* 앵커 3개는 스크롤로 닿으니 접는다. 제작 페이지는 접으면 갈 길이 없어진다. */
  .nav-links a:not(.nav-web){display:none;}
  .nav-links{gap:0;}
  .nf h1{font-size:28px;} .nf p{font-size:16px;}
}

/* ══════════════════════════════════════════════
   앱 상세페이지 (/apps/*)
   메인과 같은 변수·타이포 스케일을 쓰되,
   섹션마다 형태를 달리해 카드 반복을 피한다.
   ══════════════════════════════════════════════ */

.dp-sec{padding:140px 0;}
.dp-sec.alt{background:var(--bg-sub);}
.dp-sec.line{border-top:1px solid var(--line);}
.dp-h2{margin-top:16px;font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.025em;line-height:1.35;}

/* ── 1. 헤더 ── */
.dp-hero{padding:150px 0 110px;}
.dp-back{display:inline-block;font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s;}
.dp-back:hover{color:var(--blue);}
.dp-hero h1{margin-top:30px;font-size:64px;font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1.2;
  display:flex;align-items:center;gap:16px;}
.dp-hero .tagline{margin-top:26px;font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.025em;line-height:1.45;}
.dp-hero .desc{margin-top:12px;font-size:18px;color:var(--muted);}
.dp-hero .lead{margin-top:38px;font-size:18px;line-height:1.85;color:var(--body);max-width:560px;}

/* ── 2. 어떤 불편이었나 — 전폭 고백 ── */
.confess{max-width:820px;}
.confess h2{margin-top:16px;font-size:40px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.35;}
.confess p{margin-top:38px;font-size:21px;line-height:1.9;color:var(--body);}
.confess .turn{margin-top:46px;padding-top:36px;border-top:1px solid var(--line);
  font-size:23px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.6;}

/* ── 3. 판단 — 네 항목 모두 형태가 다르다 ── */
.j-list{margin-top:56px;}
.j-list>:first-child{padding-top:0;border-top:none;}
.j{padding:96px 0;border-top:1px solid var(--line);}
.j-n{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.06em;}
.j h3{margin-top:14px;font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.35;}
.j p{margin-top:22px;font-size:18px;line-height:1.85;color:var(--body);}

/* 01 · 좌우 분할 */
.j-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start;}
.j-split h3{margin-top:14px;}
.j-split p{margin-top:0;}

/* 02 · 전폭 + 숫자 시퀀스 */
.j-wide p{max-width:660px;}
.esc{margin-top:52px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;}
.esc .t{font-size:52px;font-weight:700;color:var(--ink);letter-spacing:-.04em;line-height:1;}
.esc .t:last-of-type{color:var(--blue);}
.esc .a{font-size:24px;color:var(--muted);line-height:1;}

/* 03 · 강조 블록 — 이 페이지에서 가장 중요한 항목 */
.j-mark{margin-top:0;}
.j-mark .in{margin-top:34px;padding:52px 56px;background:var(--bg-sub);border-left:3px solid var(--blue);}
.j-mark .in p{margin-top:0;font-size:20px;line-height:1.9;max-width:680px;}
.j-mark .in p+p{margin-top:20px;}

/* 04 · 입력 예시 대비
   DOM은 '제목 → 본문 → 예시' 순서로 두고(모바일·스크린리더 기준),
   데스크톱에서만 order로 예시를 왼쪽에 세운다. */
.j-quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:80px;align-items:center;}
.j-quote>*:first-child{order:2;}
.typed{padding:44px 40px;background:var(--bg-sub);font-size:30px;font-weight:600;
  color:var(--ink);letter-spacing:-.025em;line-height:1.4;}
.typed em{display:block;margin-bottom:16px;font-style:normal;font-size:12px;font-weight:700;
  color:var(--muted);letter-spacing:.06em;}

/* ── 2-b. 전환 문장 (오밥무 §2) ── */
.confess .pivot{margin-top:46px;font-size:30px;font-weight:700;color:var(--ink);
  letter-spacing:-.03em;line-height:1.5;}
.confess .pivot+p{margin-top:16px;}

/* ── 3-b. 사이클 — 세로 타임라인 (오밥무) ──
   메인의 .flow(가로 박스)·잡아의 .esc(가로 시퀀스)와 겹치지 않는 형태. */
.cyc{margin-top:52px;border-left:1px solid var(--line);}
.cyc-i{padding:0 0 36px 34px;}
.cyc-i:last-child{padding-bottom:0;}
.cyc-n{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.06em;}
.cyc-i h4{margin-top:8px;font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.cyc-i p{margin-top:8px;font-size:16px;line-height:1.7;color:var(--muted);}

/* ── 3-c. 판단 (오밥무) — 번호 없이 제목만, 항목마다 형태를 달리한다 ── */
.o{padding:96px 0;border-top:1px solid var(--line);}
.o h3{font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.35;}
.o p{margin-top:22px;font-size:18px;line-height:1.85;color:var(--body);}

/* 01 · 전폭 + 하단 구성 라벨 */
.o-1 h3{font-size:40px;}
.o-1 p{max-width:680px;}
.o-parts{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:44px;}
.o-parts span{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.03em;}

/* 02 · 좌우 분할 + 선택 대비 */
.o-2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start;}
.o-2 p{margin-top:0;}
.o-vs{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.o-vs div{padding:26px 28px;background:var(--bg-sub);font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--muted);}
.o-vs .pick{background:var(--blue-bg);color:var(--blue);}

/* 03 · 숫자 스트립 주도 */
.o-3 .strip{margin-top:44px;display:flex;gap:64px;flex-wrap:wrap;}
.o-3 .strip .v{font-size:46px;font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1;}
.o-3 .strip .v em{font-style:normal;font-size:20px;color:var(--muted);margin-left:4px;}
.o-3 .strip .k{margin-top:10px;font-size:14px;color:var(--muted);}
.o-3 .src{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);
  font-size:17px;line-height:1.8;color:var(--muted);max-width:640px;}

/* 04 · 우측 오프셋 좁은 칼럼 */
.o-4{padding-left:38%;}
.o-4 p{max-width:560px;}

/* ── 4. 화면 ── */
.shots-cap{margin-top:56px;}
.shots-cap figure{flex:1;min-width:0;}
.shots-cap .shot{width:100%;}
.shots-cap figcaption{margin-top:18px;font-size:14px;line-height:1.6;color:var(--muted);}
.shots-cap figure:nth-child(2) .shot{transition-delay:.05s;}
.shots-cap figure:nth-child(3) .shot{transition-delay:.1s;}

/* ── 5. 마무리 ── */
.dp-end h2{font-size:36px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.4;max-width:720px;}
.dp-end .lead{margin-top:26px;font-size:18px;line-height:1.85;color:var(--body);max-width:560px;}
.dp-end .acts{margin-top:44px;}
.dp-note{margin-top:56px;padding-top:30px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.8;color:var(--muted);max-width:620px;}

@media screen and (max-width:900px){
  .dp-sec{padding:80px 0;}
  .dp-hero{padding:100px 0 70px;}
  .dp-hero h1{font-size:38px;gap:12px;} .dp-hero .tagline{font-size:20px;}
  .dp-hero .desc{font-size:16px;} .dp-hero .lead{font-size:16px;line-height:1.75;margin-top:28px;}
  .confess h2{font-size:27px;} .confess p{font-size:17px;margin-top:28px;}
  .confess .turn{font-size:19px;margin-top:34px;padding-top:28px;}
  .j-list{margin-top:36px;} .j{padding:56px 0;}
  .j h3{font-size:24px;} .j p{font-size:16px;}
  .j-split,.j-quote{grid-template-columns:1fr;gap:28px;}
  .j-quote>*:first-child{order:0;}
  .j-split p{margin-top:0;}
  .esc{margin-top:32px;gap:12px;} .esc .t{font-size:32px;} .esc .a{font-size:18px;}
  .j-mark .in{padding:30px 26px;} .j-mark .in p{font-size:17px;}
  .typed{padding:30px 26px;font-size:22px;}
  .shots-cap{margin-top:36px;}
  .shots-cap figcaption{font-size:13px;}
  .dp-end h2{font-size:26px;} .dp-end .lead{font-size:16px;line-height:1.75;}
  .dp-h2{font-size:27px;}
  .confess .pivot{font-size:22px;margin-top:32px;}
  .cyc{margin-top:34px;} .cyc-i{padding:0 0 26px 22px;} .cyc-i h4{font-size:18px;} .cyc-i p{font-size:15px;}
  .o{padding:56px 0;} .o h3,.o-1 h3{font-size:24px;} .o p{font-size:16px;}
  .o-2{grid-template-columns:1fr;gap:24px;} .o-2 p{margin-top:0;}
  .o-parts{margin-top:30px;padding-top:20px;gap:24px;} .o-parts span{font-size:22px;}
  .o-vs{grid-template-columns:1fr;gap:12px;margin-top:26px;} .o-vs div{padding:20px 22px;font-size:17px;}
  .o-3 .strip{margin-top:30px;gap:28px;} .o-3 .strip .v{font-size:30px;} .o-3 .strip .v em{font-size:15px;}
  .o-3 .src{margin-top:30px;padding-top:20px;font-size:15px;}
  .o-4{padding-left:0;}
}

/* ── 태블릿·모바일 (768px 이하) ──
   메인 앱 카드 스크린샷은 훑어보는 자리라 가로 스와이프로 둔다.
   좌우 패딩을 음수 마진으로 상쇄해 첫 장이 본문 좌측선에 맞는다.
   (상세 §4 '화면'은 하나씩 보는 자리라 세로 유지)
   ※ 이 블록은 480 블록보다 반드시 위에 있어야 한다.
     같은 특이도라 아래쪽이 이기므로, 순서가 바뀌면 480 이하에서
     18px 상쇄값이 22px에 덮여 첫 장이 좌측선에서 4px 밀린다. */
@media screen and (max-width:768px){
  .shots:not(.shots-cap){
    margin-left:-22px;margin-right:-22px;padding:0 22px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:22px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .shots:not(.shots-cap)::-webkit-scrollbar{display:none;}
  /* 65%로 다음 장을 노출하되 280px에서 멈춘다.
     769px에서 3장 나란히(약 230px)로 돌아갈 때 크기 역전을 줄이기 위한 상한이다. */
  .shots:not(.shots-cap) .shot{flex:0 0 65%;max-width:280px;scroll-snap-align:start;}
}

/* ── 작은 화면 (480px 이하 · 320px까지 대응) ── */
@media screen and (max-width:480px){
  .container,.nav-inner,.ft{padding:0 18px;}
  /* 40px에서는 320px 폭에서 두 줄로 꺾인다 → 한 줄 유지 */
  .band .big{font-size:32px;}
  /* 상세 '화면' 3장: 하나씩 보는 자리라 세로로 쌓는다 */
  .shots-cap{flex-direction:column;gap:32px;}
  .shots-cap .shot{max-width:220px;}
  /* 스와이프 상쇄값을 이 구간의 패딩(18px)에 맞춘다 */
  .shots:not(.shots-cap){
    margin-left:-18px;margin-right:-18px;padding:0 18px;scroll-padding-left:18px;
  }
}

/* ── 인쇄 ──
   .rv 는 IntersectionObserver 가 발화해야 보인다. 인쇄·PDF 저장 시에는
   스크롤이 일어나지 않아 아직 안 보인 섹션이 통째로 빈칸으로 나온다. */
@media print{
  .rv{opacity:1 !important;transform:none !important;}
  .nav{position:static;}
}

/* ── MOTION 최소화 환경 ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;transition:none;}
  .q-row,.shot,.btn,.nav{transition:none;}
}