/* =====================================================================
   디자인 E — "Dithered Launchpad" 밝은 테마 레이어 (style.css 다음에 로드)
   따뜻한 종이(오프화이트) 위의 잉크 · 관제실(mission-control) 느낌은 아주 조금만:
   가는 선 · 눈금 · 모노 숫자 · 초록 'GO' 점. 불꽃 주황은 아주 작은 표시에만 쓴다.
   D 의 형광펜 강조 · 접근성 작업은 그대로 잇는다.
   ===================================================================== */

/* ---------- 1. 토큰 ---------- */
:root{
  color-scheme:light;
  /* 종이 · 잉크 */
  --paper:#F3F1EA; --paper-2:#ECE9E0; --paper-3:#E4E0D5; --card:#FAF9F5;
  --ink:#0E1210;
  --bg:#F3F1EA; --bg-2:#ECE9E0; --bg-3:#E4E0D5; --bg-4:#D9D5C9;
  --fg:#0E1210; --fg-2:rgba(14,18,16,.76); --fg-3:rgba(14,18,16,.64); --fg-4:rgba(14,18,16,.2);
  --line:rgba(14,18,16,.09); --line-2:rgba(14,18,16,.15); --line-3:rgba(14,18,16,.26);

  /* 강조: 글자용은 깊은 초록(종이·띠 위 4.5:1 이상), 채움용은 옅은 초록 */
  --accent:#1C703F; --accent-2:#155C33;
  --green:#2E9A5A; --green-2:#1C703F; --green-3:#2F6B44;
  --go:#22A05A;                         /* 상태 점 'GO' */
  /* 종이 위에서도 글자로 4.5:1 이 되게 D 보다 한 단계 깊게 */
  --ice:#1F6F8B; --lilac:#5E4AA8; --amber:#8E590C; --clay:#A6412A; --slate:#4A6D8E;
  --hl:#C8E8CB;                         /* 형광펜 띠 (#9FE1B0 를 종이 위에 50%) */
  --hl-warm:#F5DCB0;                    /* 경고 문장용 따뜻한 띠 */

  /* 불꽃: 아주 작은 표시에만 */
  --fire:#FF5A1F; --fire-core:#FFC23D;

  --grad:linear-gradient(115deg,#1C703F 0%,#155C33 100%);
  --grad-2:linear-gradient(115deg,#8E590C,#A6412A);
  --glass:#FAF9F5; --glass-2:#EFEDE5;
  --tint-go:#EAEFE3;                    /* 종이 + 아주 옅은 초록 (호버·선택 바탕) */
  --glow:rgba(46,154,90,.18);

  /* 그림자: 종이와 같은 따뜻한 잉크 계열 · 낮고 짧게 (평평한 종이 패널) */
  --sh-1:0 1px 0 rgba(40,34,20,.03),0 10px 24px -18px rgba(40,34,20,.22);
  --sh-2:0 1px 2px rgba(40,34,20,.05),0 22px 44px -26px rgba(40,34,20,.3);
  --sh-3:0 2px 6px rgba(40,34,20,.06),0 30px 70px -34px rgba(40,34,20,.36);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --moss-tint:rgba(95,191,122,.1);
  --mono-e:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* 눈금 자 (눈썹 글 앞) */
  --tick:rgba(14,18,16,.5);
}

/* ---------- 2. 바탕: 따뜻한 종이 ---------- */
html{background:var(--bg);-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--fg)}
::selection{background:var(--hl);color:var(--fg)}
input,textarea{caret-color:var(--accent)}
/* 종이 결: multiply 로 아주 옅게 (흰 점 대신 섬유 같은 얼룩) */
body::after{mix-blend-mode:multiply;opacity:.04}
a,button,summary,.choice,.opt,.more-btn{touch-action:manipulation}
.btn,.choice,.opt,.more-btn,.burger,.qback,.steps5 span{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ---------- 3. 강조: 잉크(깊은 초록) 글자 + 옅은 초록 형광펜 띠 (D 그대로) ---------- */
.h1 b,.h2 b,.h3 b,.hero h1 b,.card h3 b,.split h3 b,.endcta h2 b,.quoteband blockquote b,.answer h2 b{
  color:var(--accent)!important;-webkit-text-fill-color:currentColor!important;
  background-image:linear-gradient(180deg,transparent 66%,var(--hl) 66%,var(--hl) 90%,transparent 90%)!important;
  background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:0 0!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.06em;
  transition:background-size .5s var(--ease-out) .12s}
.endcta h2 b,.night h2 b{background-image:linear-gradient(180deg,transparent 74%,var(--hl) 74%,var(--hl) 90%,transparent 90%)!important}
[data-reveal]:not(.in) .head-rv b,[data-reveal]:not(.in) .h2.head-rv b{background-size:0% 100%!important}
.reality h2 b,.split .b h3 b{
  background-image:linear-gradient(180deg,transparent 66%,var(--hl-warm) 66%,var(--hl-warm) 90%,transparent 90%)!important;
  background-repeat:no-repeat!important;background-size:100% 100%!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.06em}
u.hl,.hl.line{background:linear-gradient(transparent 60%,var(--hl) 60%);color:var(--fg)}

/* ---------- 4. 모티프: 관제실 눈금 · GO 점 · 배기 불꽃 ---------- */
/* 눈썹 글 앞: 짧은 눈금 자 (가는 기준선 + 5px 간격 눈금 + 끝의 긴 눈금) */
.eyebrow::before,.hero .kicker::before{height:7px;opacity:1;
  background:
    linear-gradient(var(--tick),var(--tick)) 100% 100%/1px 7px no-repeat,
    repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 5px) 0 100%/calc(100% - 2px) 4px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 0 100%/100% 1px no-repeat}
/* 히어로 키커: 눈금 자 끝에 초록 GO 점 (상태 표시등) */
.hero .kicker::before{
  background:
    radial-gradient(circle at calc(100% - 3.5px) 50%,var(--go) 0 2.6px,rgba(34,160,90,.22) 3px 3.5px,transparent 3.6px),
    repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 5px) 0 100%/calc(100% - 11px) 4px no-repeat,
    linear-gradient(var(--tick),var(--tick)) 0 100%/calc(100% - 9px) 1px no-repeat}
/* 섹션 번호: 모노 · 초록 */
.eyebrow .n{font-family:var(--mono-e);font-weight:500;color:var(--accent);letter-spacing:.06em}
/* 스크롤 진행 막대: 지나온 길은 잉크 연기, 끝은 배기 불꽃 */
#progress i{background:linear-gradient(90deg,rgba(14,18,16,0) 0%,rgba(14,18,16,.42) 84%,var(--fire) 99.2%,var(--fire-core) 100%)}
.hscroll .prog i b,.qprog .bar i,.timeline .line i{background:linear-gradient(90deg,rgba(28,112,63,.35),var(--accent) 90%)}

/* ---------- 5. 장식 배경: 번짐(글로우) 없이 종이 위 정합 표시 ---------- */
/* D 의 민트·금빛 번짐은 모두 걷어냄 (흐림 필터 비용도 같이 사라짐) */
.bg-glow,.bg-glow.warm,.bg-glow.cool{display:none}
body:not([data-page="home"]) .band.tint::after,
body:not([data-page="home"]) .band:not(.tint):nth-of-type(odd)::after{display:none}
/* 격자 → 정합 십자표(+) : 설계도·관제 화면의 기준점 */
.bg-grid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M32 36h8M36 32v8' stroke='%230E1210' stroke-opacity='.17' stroke-width='1'/%3E%3C/svg%3E");background-size:72px 72px;background-position:-36px -36px}
.bg-dots{background-image:radial-gradient(rgba(14,18,16,.16) 1px,transparent 1.2px);opacity:.55}
.bg-lines{background:repeating-linear-gradient(-32deg,transparent 0 46px,rgba(14,18,16,.035) 46px 47px)}
body:not([data-page="home"]) .band::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M44 48h8M48 44v8' stroke='%230E1210' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");
  background-size:96px 96px;background-position:-48px -48px;opacity:.7}
.hr-grad{opacity:.35}

/* ---------- 6. 버튼 · 링크 ---------- */
.btn{--bl:rgba(14,18,16,.72);border-color:var(--bl);color:var(--fg);background:rgba(250,249,245,.92);-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:color .24s var(--ease-out),border-color .24s var(--ease-out),transform .16s var(--ease-out),box-shadow .3s var(--ease-out)}
.btn::before{background:var(--fg);transition:transform .3s var(--ease-out)}
.btn .arr{transition:transform .24s var(--ease-out)}
.btn.ghost{--bl:rgba(14,18,16,.24);background:rgba(250,249,245,.92)}
.btn.light{--bl:rgba(14,18,16,.72);color:var(--fg)}
.btn.solid,.btn.light.solid{--bl:var(--fg);background:var(--fg);color:var(--card);border-color:var(--fg);box-shadow:0 1px 2px rgba(40,34,20,.12),0 10px 24px -14px rgba(40,34,20,.5)}
.btn.solid::before{background:var(--accent)}
.btn:hover{color:var(--card);border-color:var(--fg)}
.btn.solid:hover{color:var(--card);border-color:var(--accent);box-shadow:0 1px 2px rgba(40,34,20,.12),0 10px 24px -14px rgba(40,34,20,.5)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.link{color:var(--accent);border-bottom-color:rgba(28,112,63,.32)}
.link:hover{border-color:var(--accent)}
.callout a,.cols2 li a,.mut a,.sm a,.note a,.faq .a a,.path a,.quota a,.tbl td a,.vdesc a,
.legend small a,.form .consent a,.route a{color:var(--accent);border-bottom:1px solid rgba(28,112,63,.32)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline-color:var(--accent)}
.skip{background:var(--fg);color:var(--card)}
.skip:focus{outline-color:var(--accent)}

/* ---------- 7. 헤더 · 메가 메뉴 · 모바일 메뉴 ---------- */
.logo img{filter:brightness(0)}
.nav{background:rgba(243,241,234,0)}
.nav.solid,.nav.always{background:rgba(243,241,234,.85);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line-2)}
.nav.open{background:var(--bg)}
.mi>a,.mi>button{color:var(--fg-2)}
.mi.cur>a,.mi.cur>button{color:var(--fg)}
.drop{background:rgba(250,249,245,.98);border-color:var(--line-2);box-shadow:var(--sh-3)}
.drop a{transition:background-color .18s var(--ease-out)}
.drop a:hover,.drop a.cur{background:var(--glass-2)}
.drop-name .pz{color:var(--accent)}
@media(max-width:980px){
  .menu{background:var(--bg)}
  .drop,.drop.mega{background:none;box-shadow:none}
  .mi>a.nav-cta.m{color:var(--card)}
}
.burger i{background:var(--fg)}

/* ---------- 8. 홈 ---------- */
/* 히어로: 종이 위 발사대 (캔버스는 투명 · 잉크만 그림) */
.stage{background:var(--bg)}
.stage canvas.sky{opacity:1}
/* 글자 쪽(오른쪽 아래 열)만 종이로 살짝 눌러 줌 — 왼쪽 발사대(x 14~20%)는 가리지 않게 (x 36% 아래는 완전히 투명) */
.stage .horizon{height:52%;
  background:linear-gradient(270deg,rgba(243,241,234,.84) 0%,rgba(243,241,234,.7) 40%,rgba(243,241,234,0) 64%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%);mask-image:linear-gradient(180deg,transparent 0%,#000 42%)}
@media(max-width:767px){
  /* 휴대폰: 글자가 아래쪽에 모이므로 가운데 띠만 옅게 (발사대 자리는 남김) */
  .stage .horizon{height:50%;background:linear-gradient(180deg,rgba(243,241,234,0) 0%,rgba(243,241,234,.62) 34%,rgba(243,241,234,.5) 78%,rgba(243,241,234,.18) 100%);-webkit-mask-image:none;mask-image:none}
}
.hero .kicker{color:var(--fg-2);text-shadow:none}
.hero .kicker b{color:var(--accent)}
.hero .kicker>span{background:var(--card);box-shadow:0 0 0 1px var(--line-2),0 6px 18px -14px rgba(40,34,20,.35);
  padding:4px 11px;border-radius:6px}
@media(max-width:560px){
  .hero .kicker{display:flex;align-items:center;gap:12px}
  .hero .kicker::before{flex:none;margin-right:0}
  .hero .kicker>span{display:inline-block;white-space:nowrap;font-size:12px;letter-spacing:.02em;padding:5px 10px;line-height:1.5}
}
@media(max-width:380px){.hero .kicker::before{display:none}}
@media(max-width:340px){.hero .kicker>span{font-size:11px;letter-spacing:0}}
.word span,.word.grad span{color:var(--fg)!important}
.hero h1{color:var(--fg)}
.hero .hint{color:var(--fg-3);font-family:var(--mono-e);font-weight:500;letter-spacing:.22em}
.hero .hint i{background:repeating-linear-gradient(180deg,var(--fg-3) 0 1px,transparent 1px 5px);opacity:.8}

/* 현실 점검: 종이 패널 + 모서리 꺾쇠 (관제 화면의 계기판 틀) */
.costs{background:var(--card);border:1px solid var(--line-2);box-shadow:var(--sh-2);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:6px;position:relative}
.costs::after{content:"";position:absolute;inset:-6px;pointer-events:none;
  background:
    linear-gradient(var(--fg),var(--fg)) 0 0/12px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) 0 0/1.5px 12px no-repeat,
    linear-gradient(var(--fg),var(--fg)) 100% 0/12px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) 100% 0/1.5px 12px no-repeat,
    linear-gradient(var(--fg),var(--fg)) 0 100%/12px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) 0 100%/1.5px 12px no-repeat,
    linear-gradient(var(--fg),var(--fg)) 100% 100%/12px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) 100% 100%/1.5px 12px no-repeat;
  opacity:.55}
.cost .l{color:var(--fg-2)}
.cost .v{font-variant-numeric:tabular-nums}
.cost .strike{background:var(--fg);opacity:.9;box-shadow:0 0 0 2px rgba(250,249,245,.75)}
.cost.total .v{opacity:1!important}

/* PoC 답: 사실 알약 · 결론 칩 (상태 표시등) */
.afacts span{background:rgba(250,249,245,.9);border-color:var(--line-2);color:var(--fg-2);box-shadow:0 4px 14px -12px rgba(40,34,20,.35)}
.chips4 span{border-color:var(--line-2);background:var(--card);border-radius:6px}
.answer .chips4 span{background:rgba(250,249,245,.94);box-shadow:var(--sh-1)}
.chips4 span::before{background:var(--go);box-shadow:0 0 0 3px rgba(34,160,90,.16)}
.chips4 span:nth-child(2)::before{background:var(--slate);box-shadow:0 0 0 3px rgba(74,109,142,.14)}
.chips4 span:nth-child(3)::before{background:#B87A14;box-shadow:0 0 0 3px rgba(184,122,20,.16)}
.chips4 span:nth-child(4)::before{background:var(--clay);box-shadow:0 0 0 3px rgba(166,65,42,.14)}
/* 답 장면: 가운데 글자 뒤로 부드러운 종이 '고요 구역' — 이륙 연기가 지나가도 글자·칩이 또렷하게 (장면과 함께 나타나고 사라짐) */
.answer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--vv,1);
  background:radial-gradient(min(500px,36vw) 27vh at 50% 42%,rgba(243,241,234,.9) 0%,rgba(243,241,234,.78) 62%,rgba(243,241,234,0) 100%)}
/* ↑ 세로는 눈썹·제목·결론 한 줄(높이 23~59%)만 — 칩·버튼은 제 바탕이 있으므로, 아래로 굴러오는 구름은 잉크 그대로 */
/* ↑ --vv (main.js) = 답 장면 투명도³ — 막은 글자가 읽힐 즈음에야 차오름 (점화 순간의 잉크는 씻지 않음) */
/* ↑ 가로 반경은 글자 폭만큼: 오른쪽(x≈80%)으로 올라가는 로켓·불꽃은 씻기지 않게 (글자 뒤 연기는 hero.js 고요 구역이 따로 지움) */
/* 휴대폰: 글자가 화면 대부분을 덮으므로 더 넓게 — 올라가는 로켓은 옅은 그림자로 비침 */
@media(max-width:767px){.answer::before{opacity:var(--vv,1);background:radial-gradient(95% 62% at 50% 46%,rgba(243,241,234,.88) 0%,rgba(243,241,234,.78) 62%,rgba(243,241,234,0) 100%)}}
/* 답 장면 눈썹: PoC | YOUR AMAZON BUSINESS LAUNCHPAD */
.answer .eyebrow{flex-wrap:wrap;row-gap:8px}
.answer .eyebrow .sep{display:inline-block;width:1px;height:14px;background:var(--line-3);flex:none}
.answer .eyebrow .tl{font-family:var(--mono-e);font-size:12.5px;font-weight:500;letter-spacing:.16em;color:var(--fg);text-transform:uppercase;white-space:nowrap}
@media(max-width:560px){
  .answer .eyebrow .sep{display:none}
  .answer .eyebrow .tl{flex-basis:100%;text-align:center;font-size:12.5px;letter-spacing:.12em}
}

/* 로고 띠: 흰 PNG → 잉크로 */
.marquee{background:var(--bg-2);border-color:var(--line-2)}
.marquee.logos .lg img{filter:brightness(0);opacity:.52}
.marquee.logos:hover .lg img{opacity:.52}
/* 두 줄 · 서로 반대 방향 · 로고는 이전(26~34px)의 약 2배 (52~68px)
   - 줄마다 다른 10개 (services.js data-sv-half) · main.js 가 줄마다 한 벌을 복제(aria-hidden)
   - 끊김 없는 반복: 간격을 gap 대신 각 로고의 오른쪽 여백으로 → 한 벌의 폭이 정확히 트랙의 50%
   - 한 벌(10개)이 언제나 화면 폭보다 길게: 로고 + 여백 ≥ 10.4vw (아주 넓은 화면에서 끝이 비지 않게) */
.marquee.logos{--lh:clamp(52px,6vw,68px);--lgap:clamp(28px,4vw,60px);padding:clamp(12px,1.8vw,22px) 0}
.marquee.logos .mq-track{gap:0;animation-duration:50s}
.marquee.logos .mq-track+.mq-track{margin-top:clamp(0px,.5vw,6px)}
.marquee.logos .mq-track.rev{animation-direction:reverse}
.marquee.logos .lg{margin-right:max(var(--lgap),calc(10.4vw - var(--lh)*2.4))}
.marquee.logos .lg img{height:var(--lh);width:auto}
.marquee.logos::before,.marquee.logos::after{width:clamp(36px,8vw,140px)}
/* 눈으로 같은 크기: PNG 는 모두 360×150 이지만 속 로고 크기가 89×104 ~ 300×85 로 달라서 2배 크기에서 무게가 두 배까지 차이남
   → 로고마다 k ≈ √(18000 / 속 로고 넓이), .85~1.35. transform 이라 줄 높이 · 간격 · 끊김 없는 반복 폭은 그대로 (동작 줄이기 정지 줄도 같은 값) */
.marquee.logos .lg img{transform:scale(var(--k,1))}
.marquee.logos img[src*="/ballop."]{--k:1.1}.marquee.logos img[src*="/blackbriar."]{--k:1.17}.marquee.logos img[src*="/charde."]{--k:1.05}
.marquee.logos img[src*="/cosmechef."]{--k:.91}.marquee.logos img[src*="/curoheal."]{--k:.89}.marquee.logos img[src*="/egattoc."]{--k:1.34}
.marquee.logos img[src*="/elishacoy."]{--k:.88}.marquee.logos img[src*="/godbody."]{--k:1.21}.marquee.logos img[src*="/jungwonsam."]{--k:.95}
.marquee.logos img[src*="/laka."]{--k:.91}.marquee.logos img[src*="/laniju."]{--k:.87}.marquee.logos img[src*="/layerlab."]{--k:1.35}
.marquee.logos img[src*="/loloskinny."]{--k:1.32}.marquee.logos img[src*="/merssue."]{--k:.85}.marquee.logos img[src*="/papa-recipe."]{--k:.97}
.marquee.logos img[src*="/pixelpure."]{--k:1.29}.marquee.logos img[src*="/raip."]{--k:.85}.marquee.logos img[src*="/rated-green."]{--k:.96}
.marquee.logos img[src*="/sar."]{--k:1.07}.marquee.logos img[src*="/seoul-sauce."]{--k:1.15}
@media(prefers-reduced-motion:reduce){
  /* 움직임 없이 두 줄 그대로: 한 줄 10개가 화면에 들어오게 조금 작게, 넘치면 가운데 정렬로 줄바꿈 */
  .marquee.logos{--lh:clamp(30px,3vw,46px);padding:clamp(14px,2vw,24px) var(--pad)}
  .marquee.logos .mq-track{gap:6px clamp(14px,1.7vw,24px)}
  .marquee.logos .lg{margin-right:0}
  .marquee.logos::before,.marquee.logos::after{display:none}
}

/* 03 매니페스토 */
.manifesto .stage2{background:var(--bg)}
.mani .w{color:var(--fg-4)}
.mani .w.on{color:var(--fg)}
.mani .w{transition:color .18s var(--ease-out)}
.mani .w.k{background-image:linear-gradient(180deg,transparent 66%,var(--hl) 66%,var(--hl) 90%,transparent 90%);background-repeat:no-repeat;background-size:0% 100%;
  padding:0 .14em;margin:0 -.14em;transition:color .18s var(--ease-out),background-size .3s var(--ease-out)}
.mani .w.on.k{color:var(--accent)!important;-webkit-text-fill-color:currentColor!important;
  background-image:linear-gradient(180deg,transparent 66%,var(--hl) 66%,var(--hl) 90%,transparent 90%)!important;
  background-repeat:no-repeat!important;background-size:100% 100%!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}

/* 04 시작점 찾기: 궤도 → 비행 궤적 (잉크 링 · 눈금 다이얼 · 점선 계획 경로 위로 실선이 그어짐) */
body[data-page="home"] .orbit-sec{background:var(--bg-2)}
.orbit .ring{stroke:rgba(14,18,16,.2)}
.orbit .ticks{fill:none;stroke:rgba(14,18,16,.28);stroke-width:6;stroke-dasharray:1 13.29}
.orbit .ticks.major{stroke:rgba(14,18,16,.5);stroke-width:11;stroke-dasharray:1.4 141.5}
.orbit .axis{fill:none;stroke:rgba(14,18,16,.1);stroke-width:1;stroke-dasharray:2 6}
.orbit .plan{fill:none;stroke:rgba(14,18,16,.38);stroke-width:1.2;stroke-dasharray:4 5;stroke-linecap:butt}
.orbit .plan.p2{stroke:rgba(142,89,12,.42)}
.orbit .path{stroke:var(--accent);stroke-width:2.2;filter:none}
.orbit .path2{stroke:var(--amber)}
.orbit .node{fill:var(--card);stroke:rgba(14,18,16,.5)}
.orbit .node.hot{fill:var(--go);stroke:var(--accent)}
.orbit .node.acc{fill:#B87A14;stroke:var(--amber)}
.orbit text{fill:var(--fg-2)}
.orbit text.big{fill:var(--fg)}
.orbit .core{fill:var(--card);stroke:rgba(14,18,16,.3);stroke-width:1}
.orbit .core-in{fill:none;stroke:rgba(14,18,16,.18);stroke-width:1;stroke-dasharray:2 4}
/* 위성 = 잉크 점 (빛 번짐 없음) */
.orbit .sat circle,.orbit .sat.r circle{fill:var(--fg);stroke:none;filter:none}
.orbit .sat.r circle{fill:rgba(14,18,16,.55)}
/* 픽셀 로켓 표식: 궤적 끝을 따라감 (main.js 가 위치·각도를 정함) */
.orbit .rkt{opacity:0}   /* main.js 가 위치를 정한 뒤 인라인 투명도로 보임 */
.orbit .rkt .hull{fill:var(--fg)}
.orbit .rkt .win{fill:var(--card)}
.orbit .rkt .fl{fill:var(--fire)}
.orbit .rkt .fc{fill:var(--fire-core)}
.orbit .rkt .flame{transform-box:fill-box;transform-origin:50% 0;animation:rkt-flick .36s steps(2,jump-none) infinite}
.orbit .rkt.idle .flame{animation:none;transform:scaleY(.55)}
@keyframes rkt-flick{0%{transform:scaleY(1)}100%{transform:scaleY(.62)}}
.legend{border-top-color:var(--line-2)}
.legend li{border-bottom-color:var(--line-2)}
.legend .k{color:var(--accent);font-family:var(--mono-e);font-weight:500}
/* 줄인 동작에서는 고정·스크롤 점등이 없으므로 범례를 처음부터 모두 켬 */
@media(prefers-reduced-motion:reduce){.legend li{opacity:1!important}}

/* 05 전체 서비스 가로 레일 */
.tcard{background:var(--card);border-color:var(--line-2);box-shadow:var(--sh-1)}
.tcard:not(.end)::before{display:none}
.tcard.end{background:linear-gradient(150deg,#E6EDDF 0%,var(--card) 55%,#F4ECDD 100%);border-color:rgba(28,112,63,.24)}
.tcard ul,.tcard li{border-color:var(--line)}
.tcard li a{transition:background-color .18s var(--ease-out)}
.tcard li b .arw{color:var(--accent)}
.badge{color:var(--amber);border-color:rgba(142,89,12,.38)}
/* 단계 표기(Tier n)는 관제 화면의 모노 라벨로 */
.tcard .th .mono,.svc-tier .th .mono{font-family:var(--mono-e);font-weight:500;letter-spacing:.04em}
.hscroll .prog i{background:var(--line-2)}

/* 06 받는 결과물: 종이 위 리포트 */
.rep{background:var(--card);border-color:var(--line-2);box-shadow:0 1px 2px rgba(40,34,20,.06),0 30px 60px -32px rgba(40,34,20,.4)}
.rep img{border-bottom-color:var(--line)}
.peek{background:var(--bg-2);border-color:var(--line-2);box-shadow:var(--sh-3)}

/* 07 맞는 서비스 찾기 — 밴드 색을 번갈아 */
body[data-page="home"] #fit{background:var(--bg)}
.steps5 span{border-color:var(--line-2);color:var(--fg-2);background:var(--card)}
.steps5 span.on{background:var(--fg);color:var(--card);border-color:var(--fg)}
.qlabel{color:var(--accent)}
.choice{background:linear-gradient(160deg,#E5EDDD,var(--card) 70%);border-color:rgba(28,112,63,.26);box-shadow:var(--sh-1)}
.choice[data-branch="live"]{background:linear-gradient(160deg,#E2EAE8,var(--card) 70%);border-color:rgba(31,111,139,.26)}
.choice em{color:var(--accent);opacity:1}
.choice[data-branch="live"] em{color:var(--ice)}
.choice[aria-pressed="true"]{background:var(--fg);color:var(--card);border-color:var(--fg)}
.choice[aria-pressed="true"] em{color:rgba(250,249,245,.82)}
.next{background:linear-gradient(160deg,#E7EEDF,var(--card) 70%);border-color:rgba(28,112,63,.22);box-shadow:var(--sh-1)}

/* 마지막 화면: 종이 하늘 + 가운데 종이 베일 */
.endcta{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 58%,var(--paper-2) 100%);color:var(--fg)}
.endcta .veil{background:radial-gradient(46% 42% at 50% 52%,rgba(243,241,234,.86),rgba(243,241,234,.5) 58%,rgba(243,241,234,0) 100%)}
.endcta .eyebrow{color:var(--fg-3)}
.endcta p{color:var(--fg-2)}

/* ---------- 9. 공통 구성 요소 ---------- */
/* 카드류: 밝은 종이 + 가는 선 + 낮은 그림자 */
.proc,.step,.cols2>div,.callout,.quote,.route>div,.pkc,.path,.vd,.why,.quota,.vside,.post,.opt,.tile,.split .numbox,.card{
  background:var(--card);border-color:rgba(14,18,16,.1);box-shadow:0 1px 0 rgba(40,34,20,.03),0 14px 30px -26px rgba(40,34,20,.26)}
/* 종이 밴드 위에서는 들뜬 카드 대신 한 톤 깊은 종이 칸으로 */
.band:not(.tint):not(.night) :is(.proc:not(.now),.step,.why,.route>div,.cols2>div,.quota){background:var(--bg-2);border-color:transparent;box-shadow:none}
.callout{border-left-color:var(--accent)}
.callout.warn{border-left-color:var(--clay)}
.proc.now,.pkc.feat,.path.rec{background:linear-gradient(160deg,#E5EDDD,var(--card) 62%);border-color:rgba(28,112,63,.3)}
/* GO 점 */
.cols2 h3::before{background:var(--go);box-shadow:0 0 0 4px rgba(34,160,90,.16)}
.cols2 .no h3::before{background:var(--clay);box-shadow:0 0 0 4px rgba(166,65,42,.14)}
.quote::before{color:var(--accent)}
.why .num{opacity:.78}
.vd .then,.flow{border-top-color:var(--line-2)}
.proclist .k{border-color:var(--line-3);color:var(--accent);font-family:var(--mono-e)}

/* 표 */
.tbl{border-color:var(--line-2);background:var(--card)}
.tbl th{background:var(--bg-2);border-bottom-color:var(--line-2)}
.tbl .hi{background:rgba(159,225,176,.2)}
.tbl .no{color:var(--clay)}

/* 사실 칸 (서비스 히어로) — 계기판 칸 */
.facts{background:var(--line-2);border-color:var(--line-2);box-shadow:var(--sh-1);border-radius:8px}
.facts>div{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
.facts .l{color:var(--fg-2)}

/* 태그 열 */
.tags span,.tags a{background:rgba(250,249,245,.82);border-color:var(--line-2);color:var(--fg-2)}
.tags .on{border-color:rgba(28,112,63,.4);color:var(--accent)}

/* FAQ */
.faq{border-top-color:var(--line-2)}
.faq details{border-bottom-color:var(--line-2)}
.faq summary{transition:color .18s var(--ease-out)}
.faq summary::after{color:var(--accent);transition:transform .24s var(--ease-out)}
.faq .a .tag{color:var(--amber);border-color:rgba(142,89,12,.4)}

/* 사례 타일: 번짐 대신 망점(하프톤) — 캔버스의 디더와 같은 언어 */
.tile{background:linear-gradient(165deg,var(--card) 40%,#F0EEE6)}
.tile::before{inset:0;filter:none;opacity:.9;
  background:radial-gradient(circle,rgba(14,18,16,.42) 0 1px,transparent 1.35px) 0 0/6px 6px;
  -webkit-mask-image:radial-gradient(55% 48% at 86% 14%,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);mask-image:radial-gradient(55% 48% at 86% 14%,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%)}
.tile.b::before,.tile.c::before{background:radial-gradient(circle,rgba(255,90,31,.55) 0 1px,transparent 1.35px) 0 0/6px 6px}
.tile.wait{background:var(--bg-2);box-shadow:none}
.tile.wait::before{opacity:.45}
.wall{background:var(--line-2);border-color:var(--line-2)}
.wall .lg{background:var(--card)}
.wall .lg img{filter:brightness(0);opacity:.56}
.ptn-cat .plogo{filter:brightness(0);opacity:.74}

/* 인사이트 카드: 글자 타일 + 망점 */
.post .th{background:var(--bg-2);border-bottom-color:var(--line)}
.post .th.art{background:var(--bg-2)}
.post .th.art::before{inset:-12px;filter:none;transition:transform .9s var(--ease-out);
  background:radial-gradient(circle,rgba(14,18,16,.4) 0 1px,transparent 1.35px) 0 0/6px 6px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 75%)}
.post .th.art.w::before{background:radial-gradient(circle,rgba(255,90,31,.6) 0 1px,transparent 1.35px) 0 0/6px 6px}
.post .th.art.c::before{background:radial-gradient(circle,rgba(28,112,63,.55) 0 1px,transparent 1.35px) 0 0/6px 6px}
.post .th.art i{color:rgba(14,18,16,.88)}
.post:hover .th.art::before{transform:none}
@media (hover:hover) and (pointer:fine){.post:hover .th.art::before{transform:translate3d(-8px,6px,0)}}
.post.soon:hover{box-shadow:var(--sh-1);border-color:var(--line-2)}

/* 팀 카드 (캔버스): 종이 칸 + 아래로 옅어지는 종이 베일 */
.pcard{background:linear-gradient(165deg,var(--card) 0%,var(--paper) 62%,var(--paper-2) 100%);border-color:var(--line-2);color:var(--fg)}
.pcard::before{background:linear-gradient(180deg,rgba(243,241,234,0) 35%,rgba(243,241,234,.9) 100%)}
.pcard .t{color:var(--accent)}

/* 진행 절차 타임라인 */
.timeline .line{background:var(--line-2)}
.phase::before{background:var(--card);border-color:var(--accent)}
.in .phase::before{background:var(--go);box-shadow:0 0 0 4px rgba(34,160,90,.18)}

/* 진단 퀴즈 */
.qprog .bar{background:var(--line-2)}
.opt{color:var(--fg)}
.verdict{background:linear-gradient(160deg,#E5EDDD,var(--card) 60%);border-color:rgba(28,112,63,.26);box-shadow:var(--sh-2)}
.vwhy,.vact{border-top-color:var(--line-2)}
.freebox{background:var(--bg-2);border-color:var(--line-2)}

/* 폼 */
.form input,.form select,.form textarea,.urlrow input{background:var(--card);border-color:rgba(14,18,16,.22);color:var(--fg);
  box-shadow:inset 0 1px 2px rgba(40,34,20,.04);transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.form input:focus,.form select:focus,.form textarea:focus,.urlrow input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,154,90,.16)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible,.urlrow input:focus-visible{outline-color:var(--accent)}
.form select option{background:var(--card);color:var(--fg)}
.form input:-webkit-autofill,.form select:-webkit-autofill,.form textarea:-webkit-autofill,.urlrow input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--tint-go) inset;-webkit-text-fill-color:var(--fg);caret-color:var(--fg)}
.form .consent input{accent-color:var(--accent)}
.form.free legend{color:var(--accent)}
.form .stub{color:var(--amber)}
.prod{border-top-color:var(--line-2)}
.prod-del{border-color:var(--line-3);color:var(--fg-3);background:var(--card)}
.form-err{color:#93301A;background:#F6E3DA;border-color:rgba(166,65,42,.32)}

/* '세부 내용 보기' */
.more-wrap{background:var(--bg)}
.more-btn{background:var(--card);border-color:var(--line-3);box-shadow:var(--sh-1);
  transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out),transform .16s var(--ease-out)}
.more-btn i{border-color:var(--line-3);color:var(--accent);transition:transform .28s var(--ease-out)}

/* ---------- 10. 서브페이지 히어로 · 마무리 밴드 (캔버스는 종이 위에) ---------- */
.page-hero{background:var(--bg)}
.page-hero::before{display:none}
.page-hero .pic{background:none}
/* 왼쪽 글자 칸은 종이로 조용하게, 오른쪽 그림은 그대로 */
/* 아래 가장자리만 짧게 종이로 녹임 — 발사대 바닥(높이 70~85%)이 흐려지지 않게 */
.page-hero .pic::after{background:
  linear-gradient(180deg,rgba(243,241,234,.12),rgba(243,241,234,0) 30%,rgba(243,241,234,0) 86%,var(--paper) 100%),
  linear-gradient(90deg,rgba(243,241,234,.92) 0%,rgba(243,241,234,.7) 38%,rgba(243,241,234,.1) 68%,rgba(243,241,234,0) 100%)}
@media(max-width:900px){
  .page-hero .pic::after{background:linear-gradient(180deg,rgba(243,241,234,0) 0,rgba(243,241,234,0) 86%,var(--paper) 100%)}   /* 맨 아래 가장자리만 녹임 — 발사대·땅선이 회색으로 바래지 않게 */
  .page-hero .pic{-webkit-mask-image:none;mask-image:none}   /* style.css 의 55%부터 사라지는 마스크 해제 (위 ::after 가 가장자리를 맡음) */
  .page-hero .pic{height:clamp(160px,44vw,240px);margin-bottom:24px}
}
.page-hero .crumb{color:var(--fg-3)}
.page-hero .crumb i{opacity:1;color:var(--fg-3);font-weight:400}

.night{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 45%,var(--paper-2) 100%);color:var(--fg)}
.night>.veil-end{background:radial-gradient(52% 50% at 50% 50%,rgba(243,241,234,.86),rgba(243,241,234,.42) 60%,rgba(243,241,234,0) 100%)}
.night .veil{background:linear-gradient(180deg,rgba(243,241,234,.5),rgba(243,241,234,.2) 40%,rgba(243,241,234,.8) 100%)}
.band.night{border-bottom:1px solid var(--line-2)}

/* ---------- 11. 푸터 ---------- */
.foot{background:var(--bg-2);color:var(--fg-2);border-top-color:var(--line-2)}
/* 푸터 윗변: 번짐 대신 가는 눈금 자 (작은 눈금 12px · 큰 눈금 120px) */
.foot::before{display:block;left:0;right:0;top:0;width:auto;height:7px;transform:none;filter:none;opacity:.9;
  background:
    repeating-linear-gradient(90deg,rgba(14,18,16,.3) 0 1px,transparent 1px 120px) 0 0/100% 7px no-repeat,
    repeating-linear-gradient(90deg,rgba(14,18,16,.16) 0 1px,transparent 1px 12px) 0 0/100% 4px no-repeat}
.foot .mail{border-bottom-color:var(--line-3)}
.flegal{border-top-color:var(--line-2)}

/* ---------- 12. 호버는 마우스에서만 · 누름 반응은 모든 입력에서 ---------- */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:none}
  .band:not(.tint):not(.night) :is(.proc:not(.now),.step):hover{border-color:var(--line-2)}
  .marquee.logos:hover .lg img{opacity:.82}
  .marquee.logos:hover .mq-track{animation-play-state:paused}   /* 마우스를 올리면 두 줄 모두 멈춤 (style.css 의 animation 단축 속성이 멈춤을 덮어쓰던 것 바로잡음) */
  .wall .lg:hover{background:var(--tint-go)}
  .wall .lg:hover img{opacity:.9}
  .proc:hover,.step:hover,.vd:hover,.tile:hover,.post:hover,.rep:hover{box-shadow:var(--sh-2)}
  .opt:hover{background:var(--tint-go)}
  .choice:hover{box-shadow:var(--sh-2)}
  .more-btn:hover{border-color:var(--accent);background:var(--tint-go)}
  .faq summary:hover{color:var(--accent)}
  .foot li a:hover{color:var(--accent)}
  .form input:hover,.form select:hover,.form textarea:hover,.urlrow input:hover{border-color:rgba(14,18,16,.36)}
  .form input:focus:hover,.form select:focus:hover,.form textarea:focus:hover{border-color:var(--accent)}
}
@media (hover:none),(pointer:coarse){
  .btn:hover{color:var(--fg);border-color:var(--bl);transform:none}
  .btn.solid:hover,.btn.light.solid:hover{color:var(--card);border-color:var(--fg);box-shadow:0 1px 2px rgba(40,34,20,.12),0 10px 24px -14px rgba(40,34,20,.5)}
  .btn:hover::before{transform:translateY(101%)}
  .btn:hover .arr{transform:none}
  .proc:hover,.step:hover,.vd:hover,.tile:hover,.post:hover,.rep:hover,.opt:hover,.choice:hover{transform:none;border-color:var(--line-2)}
  .choice[data-branch="new"]:hover{border-color:rgba(28,112,63,.26)}
  .choice[data-branch="live"]:hover{border-color:rgba(31,111,139,.26)}
  .choice[aria-pressed="true"]:hover{border-color:var(--fg)}
  .opt:hover{background:var(--card)}
  .item:hover{background:none}
  .item:hover .item-name{color:inherit}
  .more-btn:hover{border-color:var(--line-3);background:var(--card)}
  .faq summary:hover{color:var(--fg)}
  .repstack:hover .rep{transform:translate3d(calc(var(--n)*26px),calc(var(--n)*-16px),calc(var(--n)*-60px)) rotateY(-9deg) rotateX(2deg)}
  .wall .lg:hover{background:var(--card)}
  .tcard li a:hover{background:none}
  .tcard li a:hover .arw{opacity:0;transform:none}
  .foot li a:hover,.foot ul a:hover{color:var(--fg-2)}
  .flegal a:hover,.page-hero .crumb a:hover{color:inherit}
  .qback:hover{color:var(--fg-3)}
  .marquee.logos:hover .lg img{opacity:.52}
  .marquee:hover .mq-track{animation-play-state:running}   /* 탭으로 생긴 가짜 호버에 멈추지 않게 (멈춤은 마우스에서만) */
}
@media (hover:none) and (max-width:700px),(pointer:coarse) and (max-width:700px){.repstack:hover .rep{transform:none}}
.btn:active{transform:scale(.97);transition-duration:.12s}
.choice:active{transform:scale(.98);transition-duration:.12s}
.opt:active,.more-btn:active{transform:scale(.985);transition-duration:.12s}

/* ---------- 13. 그 밖 ---------- */
.devnote{background:var(--card);color:var(--amber);border-color:rgba(142,89,12,.5)}
.split .a{background:var(--bg)}.split .b{background:var(--bg-2)}
.split .seam span{background:var(--card)}
.code{background:#0E1210;color:#ECE9E0}
.legal h2{color:var(--fg)}

/* ---------- 14. 홈 r2 배치: 발사대는 왼쪽 · 글자는 오른쪽 열 · 마지막 화면은 같은 45° 비행의 연속 ----------
   기준(캔버스 = 고정 무대 폭의 %, 1440×900 기준 값):
   - 히어로 글자 열      x 44% ~ 격자 오른쪽 끝(95%) · 아래 끝 = 발사대 땅선(높이 86%) · 태블릿 40%
   - 현실 점검(HOLD) 카드 x 42% ~ 격자 오른쪽 끝 · 세로 가운데 · 태블릿 38%
   - PoC 답             x 50% ~ 격자 오른쪽 끝 (1024~1279: 54% · 태블릿 40%) · 왼쪽 정렬 · 제목 두 줄
                        위 여백 = 45° 비행선(x 15% · 높이 82% 에서 출발)이 열 왼쪽 끝을 지나는 높이 + 104px
                        → 비행운이 글자 묶음의 왼쪽 위로 지나감 (자리가 모자라면 화면 아래 끝에 맞춤)
   - 마지막 화면 글자    x 격자 왼쪽 끝 ~ 50% · 왼쪽 정렬 (오른쪽 절반은 위로 날아가는 로켓)
   휴대폰(<768)은 히어로 글자 크기만 줄이고 나머지는 그대로 · 마지막 화면만 글자를 아래로 */
@media(min-width:768px){
  body[data-page="home"]{--gridE:max(var(--pad),calc((100% - var(--wrap))/2 + var(--pad)))}   /* 사이트 격자 끝 (쓰는 자리의 폭 기준으로 계산됨) */
  /* 히어로: 오른쪽 열 · 글자 크기 약 72% (273.6 → 196px @1440) · 아래 끝을 발사대 땅선에 맞춤 */
  .hero{padding-bottom:14svh}
  .hero .wrap{max-width:none;padding-left:44%;padding-right:var(--gridE)}
  .hero .word{font-size:clamp(64px,13.6vw,210px)}
  .hero .tag{grid-template-columns:1fr;gap:0;margin-top:clamp(16px,2.8vh,30px)}
  .hero .ctas{margin-top:clamp(18px,2.8vh,26px)}
  /* 마지막 화면: 글자는 왼쪽 절반 — 로켓은 오른쪽 절반을 같은 45° 로 계속 오름 */
  .endcta{justify-content:flex-start;text-align:left}
  .endcta .wrap{width:100%;max-width:none;margin:0;padding-left:var(--gridE);padding-right:50%}
  .endcta .eyebrow{justify-content:flex-start}
  .endcta .eyebrow::before{display:block}
  .endcta p.eyebrow{margin:0 0 22px}
  .endcta h2{margin:0;max-width:none;font-size:clamp(40px,6vw,92px)}
  .endcta p{margin-left:0;margin-right:0}
  .endcta .ctas{justify-content:flex-start}
  .endcta .veil{background:radial-gradient(48% 56% at 26% 52%,rgba(243,241,234,.86),rgba(243,241,234,.5) 58%,rgba(243,241,234,0) 100%)}
}
/* 현실 점검 · PoC 답의 오른쪽 열은 높이 501px 이상에서만 (가로로 든 휴대폰은 style.css 의 가운데 배치 그대로 — 좁은 열에선 표가 화면을 넘침) */
@media(min-width:768px) and (min-height:501px){
  /* 현실 점검: 오른쪽 열 — 흐려진 로켓은 왼쪽에 그대로 보이고, 기울기는 카드 옆에서 */
  .reality{justify-content:flex-start;padding-left:42%;padding-right:var(--gridE)}
  .reality .wrap{width:100%;max-width:800px;margin:0;padding:0}
  .reality .head{text-align:left}
  .reality .head .eyebrow{justify-content:flex-start}
  .reality .head .eyebrow::before{display:block}
  /* PoC 답: 오른쪽 열 · 왼쪽 정렬 · 45° 비행선의 오른쪽 아래 */
  /* 세로 자리: 위 끝 = max(비행선이 열 왼쪽 끝을 지나는 높이 + 104px, 화면 가운데 자리) — 위쪽 빈 칸(::before)이 그만큼 차지하되,
     글자 묶음이 화면 아래(16px)에 닿으면 빈 칸이 줄어 묶음이 위로 올라감 (넘치지 않음) · --acolN = 열 왼쪽 끝(화면 폭 %)
     비행선과 묶음 왼쪽 위 모서리 사이 = 세로 104px (선에 수직으로 약 74px · r2 통합: 80 → 104, 1280×720 에서 날아가는 로켓 날개가 눈썹에 닿아 보여서) */
  .answer{--acolN:50;--ablk:500px;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;
    padding:calc(var(--nav-h) + 12px) var(--gridE) 16px calc(var(--acolN) * 1%)}
  .answer::before{display:block;content:"";position:static;inset:auto;z-index:auto;opacity:1;background:none;width:1px;
    flex:0 1 max(0px,calc(82svh - (var(--acolN) - 15) * 1vw + 104px - var(--nav-h) - 12px),calc((100svh - var(--ablk))/2 - var(--nav-h)/2 - 12px))}
  .answer .wrap{flex:none;width:100%;max-width:680px;margin:0;padding:0}
  .answer .eyebrow{justify-content:flex-start}
  .answer .eyebrow::before{display:block}
  .answer h2{font-size:clamp(30px,3.3vw,52px)}
  .answer .afacts{justify-content:flex-start}
  .answer .chips4{margin-inline:0;max-width:640px}
  .answer .ctas{justify-content:flex-start}
  /* 글자 뒤 종이 막: 화면 가운데 대신 글자 묶음(눈썹 ~ 결론 한 줄)에만 — 가장자리는 44px 로 녹음 */
  .answer .wrap::before{content:"";position:absolute;z-index:-1;inset:-34px -40px 36% -44px;pointer-events:none;opacity:var(--vv,1);
    background:rgba(243,241,234,.82);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent),linear-gradient(180deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent),linear-gradient(180deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-composite:intersect}
}
@media(min-width:1024px) and (max-width:1279px){.answer{--acolN:54}}
/* 1280 이상: HOLD 카드 왼쪽 끝을 히어로 글자 열(44%)과 같게 — 같은 자리에서 차례로 바뀌는 두 장면의 왼쪽 끝을 맞춤 (기우는 로켓 코 앞 여백도 넓어짐) */
@media(min-width:1280px) and (min-height:501px){.reality{padding-left:44%}}
@media(min-width:768px) and (max-width:1023px){.hero .wrap{padding-left:40%}}
@media(min-width:768px) and (max-width:1023px) and (min-height:501px){
  .reality{padding-left:40%}
  .answer{--acolN:40}
}
@media(max-width:767px){
  .hero .word{font-size:clamp(52px,15.4vw,118px)}   /* 80 → 60px @390 (약 75%) */
  /* 마지막 화면: 위쪽은 로켓 · 비행운, 글자는 아래 */
  .endcta{align-items:flex-end;justify-content:flex-start;text-align:left}
  .endcta .wrap{width:100%;padding-top:0;padding-bottom:clamp(44px,8svh,72px)}
  .endcta .eyebrow{justify-content:flex-start}
  .endcta .eyebrow::before{display:block}
  .endcta p.eyebrow{margin:0 0 18px}
  .endcta h2{margin:0}
  .endcta p{margin-left:0;margin-right:0}
  .endcta .ctas{justify-content:flex-start}
  .endcta .veil{background:linear-gradient(180deg,rgba(243,241,234,0) 34%,rgba(243,241,234,.66) 62%,rgba(243,241,234,.84) 100%)}
}
/* 가로로 든 휴대폰: 낮은 화면에 맞춘 style.css 값을 그대로 */
@media (orientation:landscape) and (max-height:500px){
  .hero{padding-bottom:10px}
  .hero .word{font-size:min(14vw,15svh)}
}

@media(prefers-reduced-motion:reduce){
  .h1 b,.h2 b,.h3 b,.hero h1 b,.endcta h2 b,.answer h2 b,.mani .w.k{transition:none}
  [data-reveal]:not(.in) .head-rv b{background-size:100% 100%!important}
  .orbit .rkt .flame{animation:none;transform:scaleY(.8)}
}
@media print{
  body::after{display:none}
  .h1 b,.h2 b,.h3 b,.hero h1 b,.endcta h2 b,.answer h2 b,.mani .w.on.k,.reality h2 b{background:none!important}
  .logo img{filter:brightness(0)}
  .costs::after,.answer::before,.foot::before{display:none}
}
@media(forced-colors:active){
  .h1 b,.h2 b,.h3 b,.mani .w.k{background:none!important}
  .costs::after{display:none}
}