/*
 * 라운디로밍 홈페이지(roaming.roundy.cc) 스타일 — 이 파일 하나에만 CSS 를 둔다(인라인 style·<style>·스크립트 금지 = 엄격한 CSP).
 * 디자인(대표 결정 2026-11-01) : 히어로 = 시안 C(노을 하늘 · 별 · 구름 · 점선 호를 나는 R1 심볼) — 아래 끝은 뾰족한 산 능선 대신 둥글고 흐린
 *   구름 바다(.sea)가 다음 구획 바탕으로 녹아든다(대표 피드백). 히어로 아래 여행지 띠 = 수평 한 줄 · 작은 글자 · 느리게(사선 두 줄에서 바꿈).
 *   욱일기로 보일 수 있는 무늬는 두지 않는다 : 방사형 빛줄기 · 지평선의 둥근 해 원반 없음. 노을은 하늘 그라데이션과 지평선의 넓고 흐린
 *   수평 빛 번짐(.glow — 원형 중심 없음)으로만. 본문 = 시안 B(흰 바탕 · 큰 굵은 제목 · 그라데이션 테두리 카드 · 네이비 띠 단계 카드).
 * 색 토큰 = apps/functions/src/delivery/brand.ts 의 BRAND·WEB_CSS(:root) 값 그대로. :root 밖에서는 #색을 쓰지 않는다.
 *   파생색(보라 · 노을 · 코랄)은 새 #색 없이 :root 에서 color-mix(in oklch, 브랜드 토큰) 로만 만든다(가드 : color-mix 피연산자 = 토큰 · transparent · 퍼센트).
 * 드리프트 가드 : tools/site-guard.test.mjs (brand.ts 를 읽어 값을 대조한다 — 색을 바꾸려면 brand.ts 를 먼저 바꾼다).
 * 밝은 배경 고정(다크 모드 없음) — 발권·설치 페이지와 같다.
 * 글꼴 = 자체 호스팅(외부 CDN 0 — CSP font-src 'self') : Pretendard = /fonts/pretendard-1.3.9/(어드민 사본 그대로 — 페이지가 <link> 로 싣는다).
 * 글꼴 토큰(--sans · --mono) = brand.ts WEB_CSS 값 그대로 — 고정폭은 시스템 글꼴. 이름은 자체 호스팅 Pretendard · 시스템 글꼴 · 일반 글꼴만
 *   (가드 SITE_FONT_FAMILIES — JetBrains Mono 같은 웹 글꼴은 싣지 않는다).
 * 글자 대비 = WCAG AA 4.5:1 이상(가드 TEXT_ON_BACKGROUND 가 글자색 × 놓이는 바탕을 계산한다 — 그라데이션은 모든 정지점·보간점 · 반투명 바탕은
 *   아래 바탕 위 합성 · 그라데이션 글자는 정지점 색마다). 글자가 놓이는 히어로 하늘(.sky)은 어두운 색만 쓰고, 밝은 노을(.horizon)은 글자 아래쪽
 *   여백(히어로 padding-bottom) 안에만 둔다.
 * 움직임 = prefers-reduced-motion 이면 0(맨 끝 블록 — 가드가 확인한다).
 */
:root{
  --ink:#1b1d24;--ink-soft:#54596a;--ink-faint:#868d9b;
  --paper:#E9ECF1;--surface:#ffffff;
  --line:#ECEEF6;--line-soft:#F2F3F7;
  --navy:#1A237E;--navy-deep:#13151c;--navy-wash:#EEF1FA;
  --orange:#FF9F1C;--orange-deep:#D9760A;--orange-text:#FFB04D;
  --amber:#B25E00;--amber-wash:#FFF7EC;--amber-line:#FCE7C4;
  --link:#2C6BED;
  --sans:"Pretendard","Pretendard Variable",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Roboto Mono",monospace;
  --violet:color-mix(in oklch,var(--navy) 62%,var(--orange));
  --dusk:color-mix(in oklch,var(--navy) 80%,var(--orange));
  --coral:color-mix(in oklch,var(--orange) 72%,var(--navy));
  --wrap:1200px;
  color-scheme:light;
}
*{box-sizing:border-box}
/* 앵커 이동(#plans · 처리방침 절 · 건너뛰기 링크) 시 떠 있는 헤더(.top — 위 14px + 높이 56px)에 가리지 않게 — 헤더 아래 끝 + 여백 14px */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--sans);color:var(--ink);background-color:var(--surface);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;word-break:keep-all}
img{max-width:100%;height:auto}
a{color:var(--navy);-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:8px}
h1,h2,h3{color:var(--navy-deep);margin:0}
p{margin:0 0 8px}
ul,ol{margin:0;padding:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.wrap-doc{max-width:860px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:8px;z-index:50;background:var(--surface);color:var(--navy);padding:8px 12px;border-radius:8px}

/* ── 헤더 : 떠 있는 반투명 알약(고정) ───────────────────── */
.top{position:fixed;z-index:40;top:10px;left:10px;right:10px;max-width:1180px;margin:0 auto;border-radius:999px;background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 10px 30px -14px color-mix(in srgb,var(--navy-deep) 60%,transparent),0 0 0 1px color-mix(in srgb,var(--navy) 8%,transparent)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 8px 0 10px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.sym{width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 0 0 1px var(--line)}
.sym img{width:20px;display:block}
.nm{font-size:17px;font-weight:850;color:var(--navy);letter-spacing:-0.02em}

/* ── 버튼 — 네이비 바탕 · 오렌지 글자(발권·설치 페이지와 같은 계열) · 히어로는 오렌지 바탕 · 유리 ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;text-decoration:none;border-radius:999px;border:1.5px solid transparent;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.btn-sm{font-size:14px;padding:9px 18px;background:var(--navy);color:var(--orange)}
.btn-sm:hover{background:var(--navy-deep)}
.btn-lg{font-size:17px;padding:16px 30px;background:var(--navy);color:var(--orange);box-shadow:0 14px 34px -14px color-mix(in srgb,var(--navy) 80%,transparent)}
.btn-lg:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn-sun{font-size:17px;padding:16px 30px;color:var(--navy-deep);background:linear-gradient(135deg,var(--orange-text),var(--orange));box-shadow:0 14px 40px -12px color-mix(in srgb,var(--orange) 90%,transparent)}
.btn-sun:hover{transform:translateY(-2px)}
.btn-lg::after,.btn-sun::after{content:"→";font-weight:900;transition:transform .2s ease}
.btn-lg:hover::after,.btn-sun:hover::after{transform:translateX(4px)}
.btn-glass{font-size:17px;padding:16px 26px;color:var(--surface);background:color-mix(in srgb,var(--navy-deep) 35%,transparent);border-color:color-mix(in srgb,var(--surface) 45%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-glass:hover{background:color-mix(in srgb,var(--navy-deep) 55%,transparent)}
/* 포커스 링 — 흰 바탕에선 진한 오렌지, 하늘(어두운 바탕) 위에선 흰색 */
.btn:focus-visible{outline:3px solid var(--orange-deep);outline-offset:3px}
.hero .btn:focus-visible,.nf .btn:focus-visible{outline-color:var(--surface)}

/* ── 히어로 : 노을 하늘(시안 C — 햇살·해 원반 없음) ─────────── */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:124px 0 300px;text-align:center}
/* 글자가 놓이는 하늘 — 어두운 색만(네이비 → 노을 보라). 밝은 노을은 아래 .horizon 이 글자 밑 여백에서만 칠한다 */
.sky{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg in oklch,var(--navy-deep) 0%,var(--navy) 48%,var(--dusk) 100%)}
/* 은은한 별 — 1~1.5px 점(글자 획보다 작다 · 대비 표의 바탕으로 적지 않고 렌더 측정으로 확인) */
.sky::before{content:"";position:absolute;inset:0 0 55% 0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,var(--surface),transparent),radial-gradient(1px 1px at 28% 8%,var(--surface),transparent),radial-gradient(1.5px 1.5px at 44% 24%,var(--surface),transparent),radial-gradient(1px 1px at 63% 12%,var(--surface),transparent),radial-gradient(1.5px 1.5px at 78% 26%,var(--surface),transparent),radial-gradient(1px 1px at 90% 10%,var(--surface),transparent),radial-gradient(1px 1px at 6% 40%,var(--surface),transparent),radial-gradient(1px 1px at 95% 44%,var(--surface),transparent);opacity:.5;animation:twinkle 5s ease-in-out infinite alternate}
/* 노을 — 글자 밑 여백(히어로 padding-bottom 300px) 안에서만. 위쪽은 투명이라 하늘과 이어진다 */
.horizon{position:absolute;left:0;right:0;bottom:0;height:300px;background:linear-gradient(180deg in oklch,transparent 0%,var(--violet) 36%,var(--coral) 62%,var(--orange-text) 84%,var(--amber-line) 100%)}
/* 지평선의 넓고 흐린 수평 빛 번짐 — 위아래로만 퍼지는 띠(원형 중심이 없다) */
.glow{position:absolute;left:-10%;right:-10%;bottom:70px;height:110px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--amber-wash) 55%,transparent) 55%,transparent);filter:blur(22px);animation:glow 9s ease-in-out infinite alternate}
/* 구름 — 노을 띠 안에서만 흐른다(글자 뒤로 오지 않는다) */
.cloud{position:absolute;height:40px;border-radius:999px;background:var(--surface);filter:blur(10px);opacity:.2}
.c1{width:280px;left:-300px;bottom:150px;animation:drift 60s linear infinite}
.c2{width:200px;left:-200px;bottom:196px;opacity:.14;animation:drift 85s linear infinite -30s}
.c3{width:340px;left:-340px;bottom:118px;opacity:.18;animation:drift 70s linear infinite -50s}
/* 비행 경로 — 아주 큰 원의 윗부분(점선)을 R1 심볼이 따라 난다(원의 중심은 화면 밖 아래 · 빛줄기 없음) */
.route{position:absolute;left:50%;top:84px;width:1900px;height:1900px;margin-left:-950px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--surface) 22%,transparent)}
.route-arm{position:absolute;inset:-2px;border-radius:50%;animation:fly 16s linear infinite}
.plane{position:absolute;left:50%;top:-17px;margin-left:-17px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 6px color-mix(in srgb,var(--surface) 16%,transparent),0 10px 24px -8px color-mix(in srgb,var(--navy-deep) 80%,transparent)}
.plane img{width:20px;display:block}
/* 구름 바다 두 겹 — 뾰족한 산 능선 대신 노을 아래를 낮고 둥근 구름층으로 부드럽게 끝낸다(대표 피드백 2026-11-01).
   모양 = mask 의 넓은 타원 여러 개(위가 완만한 물결 · 가장자리 흐림 — 각·지그재그 없음) + 바닥을 채우는 세로 그라데이션. 색 = background-color 하나.
   앞 층 색은 다음 구획 바탕(--navy-wash)과 같아 경계선 없이 녹아든다. 뒤 층은 반투명이라 노을이 비친다. 움직이지 않는다.
   좁은 화면은 층을 화면보다 넓게 펴서(left·right 음수) 물결이 납작하게 남는다. */
.sea{position:absolute;left:-55%;right:-55%;bottom:-1px}
.sea-back{height:150px;background-color:color-mix(in srgb,var(--navy-wash) 38%,transparent);-webkit-mask-image:radial-gradient(ellipse 24% 74% at 4% 100%,var(--navy-deep) 76%,transparent),radial-gradient(ellipse 22% 94% at 30% 100%,var(--navy-deep) 76%,transparent),radial-gradient(ellipse 21% 80% at 55% 100%,var(--navy-deep) 76%,transparent),radial-gradient(ellipse 24% 98% at 80% 100%,var(--navy-deep) 76%,transparent),radial-gradient(ellipse 18% 76% at 102% 100%,var(--navy-deep) 76%,transparent),linear-gradient(180deg,transparent 45%,var(--navy-deep) 75%);mask-image:radial-gradient(ellipse 24% 74% at 4% 100%,var(--navy-deep) 76%,transparent),radial-gradient(ellipse 22% 94% at 30% 100%,var(--navy-deep) 76%,transparent),radial-gradient(ellipse 21% 80% at 55% 100%,var(--navy-deep) 76%,transparent),radial-gradient(ellipse 24% 98% at 80% 100%,var(--navy-deep) 76%,transparent),radial-gradient(ellipse 18% 76% at 102% 100%,var(--navy-deep) 76%,transparent),linear-gradient(180deg,transparent 45%,var(--navy-deep) 75%)}
.sea-front{height:96px;background-color:var(--navy-wash);-webkit-mask-image:radial-gradient(ellipse 19% 72% at -2% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 20% 90% at 20% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 17% 70% at 42% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 21% 94% at 64% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 18% 76% at 86% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 15% 66% at 104% 100%,var(--navy-deep) 80%,transparent),linear-gradient(180deg,transparent 35%,var(--navy-deep) 62%);mask-image:radial-gradient(ellipse 19% 72% at -2% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 20% 90% at 20% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 17% 70% at 42% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 21% 94% at 64% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 18% 76% at 86% 100%,var(--navy-deep) 80%,transparent),radial-gradient(ellipse 15% 66% at 104% 100%,var(--navy-deep) 80%,transparent),linear-gradient(180deg,transparent 35%,var(--navy-deep) 62%)}
.hero-in{position:relative;max-width:980px;margin:0 auto;padding:0 16px}
.eyebrow{font-family:var(--mono);display:inline-block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-line);font-weight:800;margin:0 0 20px;padding:7px 16px;border-radius:999px;background:color-mix(in srgb,var(--surface) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--surface) 25%,transparent)}
.hero h1{font-size:clamp(40px,7vw,84px);line-height:1.08;letter-spacing:-0.05em;font-weight:880;margin:0 0 24px;color:var(--surface);text-wrap:balance}
.h1-a,.h1-b{display:block}
.h1-a{color:var(--surface)}
.h1-b{padding-bottom:.08em;background:linear-gradient(90deg,var(--amber-line),var(--orange-text) 45%,var(--amber-wash) 70%,var(--orange-text));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shine 8s linear infinite}
.hero .lead{font-size:clamp(17px,1.7vw,20px);color:var(--line);max-width:640px;margin:0 auto 10px;line-height:1.7}
.hero .lead strong{color:var(--orange-text)}
.hero .role{font-size:15px;color:var(--line);margin:0 auto 30px;max-width:620px}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta-row .btn{flex:1 1 220px;max-width:320px}

/* ── 여행지 띠 — 시작 ①(대표 피드백 2026-11-01 : 사선 두 줄 → 수평 한 줄 · 작은 글자 · 차분한 바탕 · 느리게) ────────
   띠를 빼는 ②안으로 가면 이 블록(시작~끝 — 넓은 화면 규칙·키프레임 포함)과 index.html 의 「여행지 띠」 주석 블록 · tools/site-guard.mjs 대비 표의
   .place · .place .iso · .nm 의 [".places", ".top"] 을 같이 지운다. 바탕 = 구름 바다 앞 층과 같은 --navy-wash · 한 바퀴 110초 · 마우스를 올리면 멈춘다.
   양 끝은 살짝만 흐리게 — 마스크 알파가 0.9 아래로 내려가지 않는다(끝에 걸린 글자도 대비 4.5 이상 · 0.85 면 --ink-soft 글자가 4.37 — 6회차 QA 리뷰어 제안). */
.places{position:relative;padding:13px 0;background:var(--navy-wash);border-bottom:1px solid color-mix(in srgb,var(--navy) 8%,transparent)}
.places-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,color-mix(in srgb,var(--navy-deep) 90%,transparent),var(--navy-deep) 6%,var(--navy-deep) 94%,color-mix(in srgb,var(--navy-deep) 90%,transparent));mask-image:linear-gradient(90deg,color-mix(in srgb,var(--navy-deep) 90%,transparent),var(--navy-deep) 6%,var(--navy-deep) 94%,color-mix(in srgb,var(--navy-deep) 90%,transparent))}
.places-track{display:flex;width:max-content;animation:marquee 110s linear infinite}
.places:hover .places-track,.places:focus-within .places-track{animation-play-state:paused}
.place{display:inline-flex;align-items:baseline;gap:8px;padding:0 40px 0 0;font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--ink-soft);white-space:nowrap}
.place .iso{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--navy)}
@media (min-width:1000px){
  .places{padding:15px 0}
  .place{font-size:14px}
}
@keyframes marquee{to{transform:translateX(-50%)}}
/* ── 여행지 띠 — 끝 ── */

/* ── 구획 공통(시안 B) ────────────────────────────────── */
.sec{position:relative;padding:84px 0}
.sec-head{max-width:760px;margin:0 auto 40px;text-align:center}
.kicker{font-family:var(--mono);display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--navy);font-weight:800;margin:0 0 12px}
.kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--orange),var(--coral))}
.sec h2{font-size:clamp(34px,4.6vw,56px);font-weight:880;letter-spacing:-0.045em;line-height:1.12;margin:0 0 12px}
.sub{font-size:17px;color:var(--ink-soft);margin:0}

/* ── 요금제 카드 : 그라데이션 테두리 ─────────────────────── */
.sec-plans{background:linear-gradient(180deg,var(--navy-wash) 0%,var(--surface) 360px)}
.plan-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plan{position:relative;display:flex;flex-direction:column;gap:2px;height:100%;padding:16px 15px 16px;border-radius:22px;text-decoration:none;color:var(--ink);border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,color-mix(in srgb,var(--navy) 30%,transparent),color-mix(in srgb,var(--orange) 60%,transparent)) border-box;box-shadow:0 1px 2px color-mix(in srgb,var(--navy-deep) 6%,transparent),0 12px 28px -18px color-mix(in srgb,var(--navy) 45%,transparent);transition:transform .25s ease,box-shadow .25s ease}
.plan:hover{transform:translateY(-6px);background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,var(--navy),var(--violet),var(--orange)) border-box;box-shadow:0 28px 50px -24px color-mix(in srgb,var(--violet) 60%,transparent)}
.plan:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:22px}
.plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:12px}
.plan-iso{font-family:var(--mono);display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--surface);background:linear-gradient(135deg in oklch,var(--navy),var(--link));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--navy) 70%,transparent)}
.plan-grid li:nth-child(4n+2) .plan-iso{background:linear-gradient(135deg in oklch,var(--navy),var(--violet))}
.plan-grid li:nth-child(4n+3) .plan-iso{background:linear-gradient(135deg in oklch,var(--link),var(--navy))}
.plan-grid li:nth-child(4n+4) .plan-iso{background:linear-gradient(135deg in oklch,var(--violet),var(--navy))}
.plan-go{font-size:12px;font-weight:700;color:var(--navy);background:var(--navy-wash);border-radius:999px;padding:4px 10px;transition:background-color .2s ease,color .2s ease}
.plan-go::after{content:" ↗"}
.plan:hover .plan-go{background:var(--navy);color:var(--orange)}
.plan-country{font-size:21px;font-weight:850;color:var(--navy-deep);letter-spacing:-0.03em;line-height:1.3}
.plan-kind{font-size:13px;font-weight:750;color:var(--amber)}
.plan-cities{font-size:13px;color:var(--ink-soft);margin-top:6px}
.plan-spec{font-size:12.5px;color:var(--ink-soft);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:2px}
.plan-gen{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--navy);background:var(--navy-wash);border-radius:6px;padding:1px 6px}
.plan-note{font-size:14px;color:var(--ink-soft);margin:22px auto 0;max-width:820px;text-align:center;padding:14px 18px;background:var(--surface);border:1px dashed color-mix(in srgb,var(--navy) 22%,transparent);border-radius:14px}

/* ── 이용 방법 : 네이비 띠 ─────────────────────────────── */
.sec-steps{overflow:hidden;isolation:isolate;background:var(--navy)}
.steps-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 60% at 90% 10%,color-mix(in srgb,var(--violet) 70%,transparent),transparent 70%),radial-gradient(30% 50% at 5% 95%,color-mix(in srgb,var(--link) 55%,transparent),transparent 70%);animation:breathe 12s ease-in-out infinite alternate}
.steps-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--surface) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--surface) 6%,transparent) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,var(--navy-deep),transparent 70%);mask-image:linear-gradient(180deg,var(--navy-deep),transparent 70%)}
.sec-steps h2{color:var(--surface)}
.sec-steps .kicker{color:var(--amber-line)}
.sec-steps .sub{color:var(--line)}
.step-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.step{position:relative;background:var(--surface);border-radius:24px;padding:26px 22px 18px;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--navy-deep) 90%,transparent)}
.step-head{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.step-no{font-family:var(--mono);display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font-size:19px;font-weight:800;color:var(--navy-deep);background:linear-gradient(135deg,var(--orange-text),var(--orange));box-shadow:0 10px 20px -10px color-mix(in srgb,var(--orange) 90%,transparent)}
.step h3{font-size:23px;font-weight:850;letter-spacing:-0.03em}
.step p{font-size:15px;color:var(--ink-soft)}
.notice{position:relative;z-index:1;display:flex;gap:16px;margin:22px 0 0;padding:24px 22px 18px;border-radius:24px;background:var(--surface);border:1.5px solid var(--amber-line);box-shadow:inset 5px 0 0 var(--orange)}
.notice-mark{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:900;font-size:18px;color:var(--navy-deep);background:var(--orange)}
.notice h3{font-size:18px;color:var(--amber);margin:4px 0 12px;letter-spacing:-0.02em}
.notice ul{list-style:none;display:grid;gap:10px}
.notice li{position:relative;font-size:15px;color:var(--ink);padding-left:16px}
.notice li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.notice strong{color:var(--amber)}

/* ── 고객센터 ─────────────────────────────────────── */
.help-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;border-radius:30px;padding:40px 22px;border:1.5px solid transparent;background:linear-gradient(120deg,var(--navy-wash),var(--amber-wash)) padding-box,linear-gradient(120deg,color-mix(in srgb,var(--navy) 35%,transparent),color-mix(in srgb,var(--orange) 70%,transparent)) border-box}
.help-card h2{margin-bottom:16px}
.help-main{font-size:clamp(18px,2vw,22px);font-weight:750;color:var(--navy-deep);line-height:1.5;margin:0 0 14px;max-width:560px}
.help-sub{font-size:15px;color:var(--ink-soft);margin:0 0 4px}
.help-copy .btn-lg{margin-top:22px}
.bubbles{position:relative;height:200px;max-width:360px;width:100%;margin:0 auto}
.bubble{position:absolute;display:grid;gap:8px;padding:16px 18px;border-radius:22px;box-shadow:0 20px 40px -20px color-mix(in srgb,var(--navy-deep) 60%,transparent)}
.bubble i{display:block;height:9px;border-radius:5px}
.bq{right:0;top:0;width:62%;background:var(--navy);border-bottom-right-radius:6px;animation:bob 6s ease-in-out infinite}
.bq i{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.bq i:nth-child(2){width:60%}
.ba{left:0;bottom:0;width:78%;background:var(--surface);border-bottom-left-radius:6px;padding-left:58px;animation:bob 6.5s ease-in-out infinite 1s}
.ba i{background:var(--line)}
.ba i:nth-child(3){width:80%}
.ba i:nth-child(4){width:55%}
.b-ava{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy-wash)}
.b-ava img{width:18px}

/* ── 하단 사업자 정보 ─────────────────────────────────── */
.biz{padding:44px 0 56px;background:var(--navy-wash);border-top:1px solid var(--line)}
.biz-brand{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.biz-title{font-size:13px;margin:0 0 12px;color:var(--ink-soft);font-weight:700}
.biz-info{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px 28px;font-size:13px;color:var(--ink-soft)}
.biz-info div{display:flex;gap:10px}
.biz-info dt{flex:0 0 auto;color:var(--ink);font-weight:600;min-width:8em}
.biz-info dd{margin:0;min-width:0}
.biz-links{margin:20px 0 0;font-size:14px}

/* 자리표시 — 대표가 채울 값. 남아 있으면 배포 래퍼가 --apply 를 거부한다(tools/deploy-site.mjs). */
.tbd{font-family:var(--mono);font-size:.92em;color:var(--amber);background:var(--surface);border:1px dashed var(--orange);border-radius:5px;padding:0 4px}

/* ── 문서 페이지(개인정보처리방침) — 머리는 히어로와 같은 하늘 · 본문은 흰 카드 ── */
.doc-head{position:relative;overflow:hidden;isolation:isolate;padding:116px 0 84px}
/* 머리 아래 끝 — 히어로와 같은 구름 바다(낮게) · 앞 층 = 본문 바탕(흰색)이라 그대로 이어진다 */
.doc-head .sea-back{height:70px;background-color:color-mix(in srgb,var(--surface) 22%,transparent)}
.doc-head .sea-front{height:44px;background-color:var(--surface)}
.doc-head h1{font-size:clamp(34px,5vw,52px);font-weight:880;letter-spacing:-0.04em;line-height:1.15;color:var(--surface);margin:0 0 14px}
.doc-head .lead{font-size:15.5px;color:var(--line);margin:0;max-width:680px}
.doc-head .lead strong{color:var(--orange-text)}
.doc-body{padding-top:28px;padding-bottom:40px}
.pp-sec{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px 20px 14px;margin:0 0 14px;box-shadow:0 1px 2px color-mix(in srgb,var(--navy-deep) 5%,transparent),0 14px 30px -24px color-mix(in srgb,var(--navy) 50%,transparent)}
.pp-sec h2{font-size:18px;font-weight:800;letter-spacing:-0.02em;margin:0 0 12px}
.pp-sec p,.pp-sec li{font-size:14.5px;color:var(--ink)}
.pp-sec ul{padding-left:18px;margin:0 0 8px}
.pp-sec li{margin:3px 0}
/* 처리방침 표(처리하는 개인정보 · 처리 위탁) — 좁은 화면에서도 가로로 넘치지 않게 칸 안에서 줄을 바꾼다(body overflow-wrap). */
.pp-table{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:13.5px;line-height:1.55}
.pp-table th,.pp-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.pp-table th{background:var(--navy-wash);color:var(--navy-deep);font-weight:700;white-space:nowrap}
.pp-table td{color:var(--ink)}
.back{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;font-size:15px;font-weight:750;color:var(--navy);text-decoration:none;padding:12px 22px;border-radius:999px;border:1.5px solid var(--navy)}
.back::before{content:"←"}

/* ── 404 — 히어로와 같은 하늘 ───────────────────────────── */
.nf{position:relative;overflow:hidden;isolation:isolate;padding:132px 0 300px;text-align:center}
.nf-in{position:relative;max-width:720px;margin:0 auto;padding:0 16px}
.nf .code{font-family:var(--mono);font-size:clamp(72px,16vw,132px);font-weight:800;line-height:1;letter-spacing:-0.04em;margin:0 0 12px;background:linear-gradient(90deg,var(--amber-line),var(--orange-text) 50%,var(--amber-wash));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nf h1{font-size:clamp(28px,5vw,44px);font-weight:880;letter-spacing:-0.04em;line-height:1.2;color:var(--surface);margin:0 0 12px}
.nf .lead{font-size:16px;color:var(--line);margin:0 auto 28px;max-width:520px}

/* ── 스크롤하면 카드가 떠오른다(지원 브라우저만 — 미지원이면 그대로 보인다) ── */
@supports (animation-timeline:view()){
  .plan-grid li,.step{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}

/* ── 넓은 화면 ────────────────────────────────────── */
@media (min-width:720px){
  .wrap{padding:0 28px}
  .top{top:14px;left:24px;right:24px}
  .plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .plan{padding:20px 20px 18px}
  .step-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .help-card{padding:56px 52px}
  .biz-info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc-head{padding:136px 0 96px}
  .sea{left:-20%;right:-20%}
}
@media (min-width:1000px){
  .hero{padding:150px 0 360px}
  .horizon{height:360px}
  .glow{bottom:90px;height:130px}
  .sea{left:-6%;right:-6%}
  .sea-back{height:180px}
  .sea-front{height:116px}
  .doc-head .sea-back{height:84px}
  .doc-head .sea-front{height:52px}
  .route{top:96px}
  .plan-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sec{padding:108px 0}
  .help-card{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .nf{padding:160px 0 360px}
}

/* ── 움직임 ───────────────────────────────────────── */
@keyframes twinkle{to{opacity:.2}}
@keyframes glow{to{opacity:.55}}
@keyframes drift{to{transform:translateX(calc(100vw + 700px))}}
@keyframes fly{0%{rotate:-20deg;opacity:0}8%{opacity:1}92%{opacity:1}100%{rotate:20deg;opacity:0}}
@keyframes shine{to{background-position:-200% 0}}
@keyframes breathe{to{transform:scale(1.15)}}
@keyframes bob{50%{translate:0 -10px}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}