@charset "UTF-8";
/* 홈페이지 v4 초안 — Figma 섹션 1627:6439(index · pricing · refund × 1440 · 834 · 390)의 값.
   색·글꼴 = v3-tokens.css(= design/canvas/_tokens.css)만. 이 파일에서 새 색을 짓지 않는다. 강조색은 --accent 하나.
   움직임은 hb 그대로: 바탕 숨쉬기(bloom) · 탭 진행 막대 · 화면 바뀜 투명도. 스크롤 등장은 없다. 움직임 줄이기면 v3-tokens.css 끝 줄이 전부 끈다. */

@font-face {
  font-family: Pretendard;
  src: url('/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-display: swap;
}

:root {
  --side: clamp(32px, calc((100vw - 1200px) / 2), 120px);   /* 1440 에서 글 칸 1200 */
  --sec: 96px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; overflow-x: clip; }   /* ⛔ 정정(2026-11-10 사용자 「전체적으로 문장 줄바꿈 쪽 확인해봐. 한 문장씩 딱 떨어지게」): 옛 판은 Figma 와 같게 word-break: normal 이라 폰에서 「편 / 리하고」처럼 낱말 가운데서 꺾였다 — 쓰지 마라. keep-all 로 낱말 사이에서만 꺾고, 문장 끝은 html 의 <br /> 로 줄을 바꾼다 */
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; z-index: 100; left: 16px; top: -60px; padding: 12px 18px; background: var(--surface); color: var(--ink); }
.skip-link:focus { top: 16px; }
[id] { scroll-margin-top: 88px; }
[hidden] { display: none !important; }
.wrap { width: calc(100% - var(--side) * 2); margin-inline: auto; }
em { font-style: normal; color: var(--accent); }
h1, h2 { color: var(--ink); font-weight: 700; letter-spacing: -0.015em; }
h3 { color: var(--ink); }

/* ── 단추 — 알약. 마우스 올림은 바탕색만 · 전환 0 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.btn:hover { background: var(--accent-press); }
.btn-sm { height: 44px; padding: 0 22px; font-size: 15px; }
.btn-lg { height: 58px; padding: 0 32px; font-size: 17px; }
.btn-outline { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); }
.btn-outline:hover { background: var(--surface-soft); }
.btn-kakao { background: #FEE500; color: #191919; }
.btn-kakao:hover { background: #F2D900; }
.btn-on-dark { background: var(--surface); color: var(--accent-press); }
.btn-on-dark:hover { background: var(--accent-soft); }

/* ── 알림 띠 · 머리줄 ── */
.notice-bar { display: block; padding: 9px 16px; background: var(--accent); color: var(--on-accent); font-size: 14px; line-height: 1.45; font-weight: 600; text-align: center; }
/* COO ㊿-421 C2 — 띠 뒤 글이 길어져 좁은 폭에서 「결/제되지」로 낱말 안이 끊겼다(390 실측) ⇒ 두 덩이를 각각 한 줄로 · 줄이 갈리면 가운뎃점은 숨긴다 */
.notice-bar > span:not(.sep) { display: inline-block; white-space: nowrap; }
@media (max-width: 600px) { .notice-bar .sep { display: none; } .notice-bar > span:not(.sep) { display: block; } }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--canvas); }
.header-row { display: flex; align-items: center; gap: 16px; height: 72px; padding-inline: 24px; }
.wordmark { display: block; flex: none; }
.wordmark img { width: 112px; height: 18px; }
.header-nav { flex: 1; display: flex; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.header-nav a { padding: 8px 16px; border-radius: var(--r-pill); }
.header-nav a:hover, .header-nav a[aria-current="page"] { background: var(--accent-soft); }
/* 로그인 — 넓은 창은 머리 오른쪽 테두리 단추(Figma 1642:6439), ≤900 은 펼친 메뉴 맨 위 줄(1642:6459). 1112 패치 꼴 */
.header-nav .nav-login { display: none; }
.head-login { flex: none; }
.menu-btn { display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; }
.menu-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ── 공통 구획 머리 — 알약 이름표 → 큰 제목(한 단어 강조색) → 회색 한두 줄 ── */
.sec { padding: var(--sec) 0; }
.shead { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.shead-left { align-items: flex-start; text-align: left; }
.shead h2 { font-size: 44px; line-height: 1.3; letter-spacing: -0.015em; }
.shead .sub { max-width: 680px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.shead-left .sub { max-width: none; }
.pill { display: inline-flex; padding: 5px 13px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.pill-fill { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.flow-note { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }

/* ── 첫 화면 ── */
.hero { position: relative; overflow: hidden; padding: 72px 0 96px; background: var(--accent-soft); }
.hero::before { content: ''; position: absolute; inset: -300px -400px; pointer-events: none;
  background: radial-gradient(circle 760px at 50% 50%, color-mix(in srgb, var(--accent) 16%, var(--accent-soft)) 0, color-mix(in srgb, var(--accent) 7%, var(--accent-soft)) 26%,
    color-mix(in srgb, var(--surface) 60%, transparent) 52%, transparent 78%);
  animation: v4-bloom 12s ease-in-out infinite alternate; }
@keyframes v4-bloom { from { transform: scale(.88); } to { transform: scale(1.12); } }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* 제목 두 짝 · 사이드 글 · 내려받기 배지 · 태블릿 줄 (Figma 1628:6462 · 1636:6445 · 1636:6454). 모션은 CSS 만 — 끝 상태가 기본(both) */
.hero h1 { display: flex; flex-direction: column; gap: 18px; align-self: stretch; font-size: 48px; line-height: 1.35; letter-spacing: -0.02em; }
.hero h1 .pair, .hero h1 .tl { display: block; }
.hero h1 .tl { animation: v4-rise 0.5s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1 .tl-1 { animation-delay: 0s; }
.hero h1 .tl-2 { animation-delay: 0.15s; }
.hero h1 .tl-3 { animation-delay: 0.6s; }
.hero h1 .tl-4 { animation-delay: 0.75s; }
@keyframes v4-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-side { color: var(--body); font-size: 18px; font-weight: 500; line-height: 1.4; animation: v4-fade 0.4s ease 0.9s both; }
.store-block { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; }
.store-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* 공식 배지(design/homepage/배지/ · 받은 그대로 — 색 · 비율 · 글자 0). 같은 높이 = 보이는 배지 높이. 모션 0.
   Play PNG 는 646×250 에 위아래 29 px 투명 여백 → 틀이 잘라 보이는 646×192 만 남긴다: img 높이 = 틀 × 250/192 · 위로 틀 × 29/192 */
.store-badge { display: block; flex: none; height: 56px; overflow: hidden; }
.store-badge img { display: block; width: 100%; height: auto; }
.store-ios { width: 181.58px; }
.store-play { width: 188.42px; }
.store-play img { margin-top: -8.46px; }
.tablet-line { color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.5; }
/* 글 두 갈래(COO ㊿-414) — data-web-consult open = 11-12 판(웹 상담 열림 · 기본) / closed = 막는 날 판(두 앱 공개 뒤).
   data-web-pay on = 웹 결제가 운영에서 실제로 될 때만(「선택하기」) · off = 유료 둘도 「가입하기」(기본). */
html[data-web-consult="open"] [data-consult="closed"], html[data-web-consult="closed"] [data-consult="open"],
html[data-web-pay="on"] [data-pay="off"], html[data-web-pay="off"] [data-pay="on"],
html[data-render="on"] [data-render-is="off"], html[data-render="off"] [data-render-is="on"],
html[data-plan-gate="on"] [data-plan-is="off"], html[data-plan-gate="off"] [data-plan-is="on"] { display: none !important; }
/* 요금제 문(COO ㊿-419) — data-plan-gate on = 「프로 요금제에서」 글(기본) / off = 문 끈 판 글(모든 요금제가 생성). 쓰는 자리 meta(빌드가 바꿈) · 기법 칸 설명 · 상담 화면 sub · AI FAQ. 알약(끄면 자리째 숨김) · 이용 순서 2단계(DESIGN 7e616c842 에서 Figma 배치) */
/* 렌더 켬(COO ㊿-415 4번 · ⑤) — data-render on = 정식 출시 판(기본 · 사용자 「v4 = 정식 출시 정본」) / off = 되돌림(렌더 켬이 밀릴 때). 알약 · 설명 · 꼬리표 셋 · 현재는 줄 · AI FAQ · 보관 줄 둘 */
html[data-store-ios="off"] .store-ios, html[data-store-play="off"] .store-play, html[data-store-play="off"] .tm-play { display: none; }
/* 끝 판 부제(사용자 「(가)로 바꿔」 · PM 11-12) — 배지가 하나라도 켜지면 앱 글, 둘 다 꺼지면(앱 공개 전) 옛 웹 글. 숨기기만 하는 규칙이라 위 data-consult 갈래와 겹쳐도 안 싸운다. */
html[data-store-ios="on"] .end-sub-web, html[data-store-play="on"] .end-sub-web, html[data-store-ios="off"][data-store-play="off"] .end-sub-app { display: none !important; }

/* 상담 화면 재생기(큰 그림) — 탭 넷 · 밑 막대 = 진행 */
.hero-product { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hero-product .flow-note { margin-top: 0; }
.tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.tablist button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--muted); font: 600 16px/1.4 var(--sans); cursor: pointer; }
.tablist button[aria-selected="true"] { color: var(--ink); }
.tab-bar { position: relative; display: block; width: calc(100% - 8px); height: 3px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.tab-bar span { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.tablist button[aria-selected="true"] .tab-bar span { transform: scaleX(1); }
.v4-auto .tablist button[aria-selected="true"] .tab-bar span { animation: v4-progress var(--dur, 15s) linear forwards; }
@keyframes v4-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stage { display: flex; height: 600px; padding: 31px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--surface); overflow: hidden; }   /* 안쪽 위아래 32 = Figma 무대 600 · 그림 536 */
.panel { flex: 1; min-width: 0; display: flex; justify-content: center; }
.panel[hidden] { display: none; }
.panel.is-entering { animation: v4-fade 250ms ease forwards; }
@keyframes v4-fade { from { opacity: 0; } to { opacity: 1; } }
.scenes { position: relative; height: 100%; aspect-ratio: 1000 / 1432; border-radius: 14px; box-shadow: 0 12px 28px rgba(28, 26, 23, .09); overflow: hidden; }
.scenes img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.25s linear; }
.scenes:not(.is-live) img:first-child, .scenes img.on { opacity: 1; }
.mf:empty { padding-bottom: 56px; }   /* 재생기 자리 미리 잡기(CLS) — 지은 꼴 = 무대 + 다시 보기 줄 56 */
.mf[data-replay="off"]:empty { padding-bottom: 0; }   /* 다시 보기 없는 재생기(act-pdf-fig · 2026-11-10) */
.mf:empty::before { content: ''; display: block; aspect-ratio: 834 / 1194; }
.mf[data-aspect="4/3"]:empty::before { aspect-ratio: 4 / 3; }
.hero .mf-stage, .work .mf-stage { border-radius: 14px; box-shadow: 0 12px 28px rgba(28, 26, 23, .09); }
.act-pdf .mf-stage { border-radius: 4px; box-shadow: none; border: 1px solid var(--hairline); }

/* ── 출시 예정 · 기법 카드 셋 ── */
.soon-sec { padding-top: var(--sec); }
.soon-panel { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 56px; border: 1px solid var(--hairline); border-radius: 28px; background: var(--surface); }
.tech-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; }
.tech-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 16px; background: var(--canvas); }
.tech-card img { width: 100%; height: auto; }
.tech-row { display: flex; align-items: center; justify-content: space-between; }
.tech-name { color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.4; }
.tech-tag { padding: 6px 14px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; line-height: 1.4; }
.tech-line { color: var(--muted); font-size: 14px; line-height: 1.5; }
.soon-panel .flow-note { margin-top: 0; }
.soon-now { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.5; text-align: center; }

/* ── 이용 순서 4단계 + 상담 흐름 무대 ── */
.how-sec { background: var(--surface); }
.how-head { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: start; }
.how-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.step { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--canvas); text-align: left; cursor: pointer; }
.step[aria-pressed="true"] { border-color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.step-no { padding: 6px 14px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; line-height: 1.4; }
.step-name { color: var(--ink); font-size: 19px; font-weight: 700; line-height: 1.4; }
.step-desc { color: var(--muted); font-size: 15px; line-height: 1.6; }
.work { margin-top: 48px; }
.work-item { display: flex; align-items: center; gap: 48px; min-height: 536px; padding: 48px; border-radius: 24px; background: var(--accent-soft); }   /* 536 = Figma 1628:6565 */
.work-item.is-entering { animation: v4-fade 400ms ease-in-out; }
.work-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.work-copy h3 { font-size: 28px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.work-copy h3 + p { color: var(--body); font-size: 17px; line-height: 1.6; }
.work-more { color: var(--muted); font-size: 15px; line-height: 1.6; }
.work-visual { flex: none; width: min(100%, 460px); }
.work-visual .mf { width: 100%; }
.how-sec .flow-note { margin-top: 48px; }   /* Figma 1628:6571 y=1102 = 무대 끝 1054 + 48 */

/* ── 상담 화면 · 장점 6칸이 큰 그림을 3+3으로 ── */
.feat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 389px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 48px; }
.feat-col { display: flex; flex-direction: column; gap: 16px; }
.feat { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.feat img { width: 44px; height: 44px; }
.feat h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.feat p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.feat-art { height: 542px; border-radius: 24px; overflow: hidden; }
.feat-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* ── 문신사법 ── */
.act-sec { background: var(--surface); }
.act-risk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 48px; }
.act-risk-list > li { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--canvas); }
.act-risk-list h3 { font-size: 18px; font-weight: 700; line-height: 1.45; }
.act-risk-big { display: flex; flex-direction: column; gap: 4px; }
.act-risk-big strong { color: var(--ink); font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.act-risk-big span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.act-risk-more { padding-top: 16px; border-top: 1px solid var(--hairline); }
.act-risk-more summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; color: var(--accent); font-size: 15px; font-weight: 600; line-height: 1.4; }
.act-risk-more summary::-webkit-details-marker { display: none; }
.act-risk-more summary::after { content: '+'; flex: none; font-size: 20px; font-weight: 500; line-height: 1.2; }
.act-risk-more[open] summary::after { content: '\2212 '; }
.act-risk-body { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.act-risk-body p { color: var(--body); font-size: 15px; line-height: 1.65; }
.act-risk-body .act-risk-ours { padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); }
.act-risk-body .act-risk-fine { color: var(--muted); font-size: 13px; line-height: 1.55; }
.act-risk-link { align-self: flex-start; color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1.4; }
.act-risk-link::after { content: ' \2197 '; }
.act-risk-link:hover { color: var(--accent-press); }
.act-pdf { display: flex; align-items: center; gap: 48px; margin-top: 48px; padding: 48px; border-radius: 24px; background: var(--canvas); }
.act-pdf-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.act-pdf-lead { color: var(--ink); font-size: 20px; font-weight: 600; line-height: 1.55; }
.act-pdf .fine { color: var(--muted); font-size: 13px; line-height: 1.5; }
.act-pdf-note { color: var(--muted); font-size: 14px; line-height: 1.6; }
.act-pdf-fig { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 480px; min-height: 520px; padding: 0; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.act-pdf .mf { width: min(100%, 330px); }

/* ── 후기 ── */
.review-sec { background: var(--canvas); }
.review-card { position: relative; width: min(720px, 100%); margin: 48px auto 0; padding: 40px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface); }
.review-card::before { content: '\201c '; display: block; margin-bottom: 24px; color: var(--accent); font-size: 48px; font-weight: 700; line-height: .9; }
.review-card blockquote p { color: var(--ink); font-size: 18px; line-height: 1.75; }
.review-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.review-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 600; line-height: 1.2; }
.review-name { color: var(--ink); font-size: 15px; font-weight: 600; }

/* ── FAQ ── */
.faq-sec { background: var(--surface); }
.faq-list { display: flex; flex-direction: column; gap: 12px; width: min(760px, 100%); margin: 48px auto 0; }
.faq { border-radius: 14px; background: var(--canvas); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; color: var(--muted); font-size: 22px; font-weight: 500; line-height: 1.1; }
.faq[open] summary { padding-bottom: 12px; }
.faq[open] summary::after { content: '\2212 '; }
.faq > p { padding: 0 24px 20px; color: var(--body); font-size: 15px; line-height: 1.65; }
.faq > p + p, .faq .howto + p { padding-top: 0; }
.faq .howto { margin: 0; padding: 0 24px 16px; }
.howto dt { margin-top: 14px; color: var(--ink); font-weight: 600; font-size: 15px; }
.howto dd { margin: 4px 0 0; color: var(--body); font-size: 15px; line-height: 1.65; }
.faq .howto + p { color: var(--muted); font-size: 14px; }
.faq .faq-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 끝 띠 ── */
.end-sec { background: var(--canvas); }
.end-panel { display: flex; align-items: center; gap: 40px; padding: 64px; border-radius: 28px; background: var(--accent); overflow: hidden; }
.end-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.end-copy h2 { color: var(--on-accent); font-size: 36px; line-height: 1.3; letter-spacing: -0.01em; }
.end-sub { color: var(--accent-soft); font-size: 17px; line-height: 1.6; }
.end-copy .btn { margin-top: 8px; }
.end-store { margin-top: 8px; }   /* 끝 판 앱 받기 배지 — 히어로와 같은 배지 · 같은 손잡이(html data-store-ios/play) · App Store 만 ct=homepage_end 로 가름(PM 11-12) */
.end-art { position: relative; flex: none; width: 460px; height: 360px; }
.end-side { position: absolute; width: 200px; height: 286px; object-fit: cover; border-radius: 12px; box-shadow: 0 12px 28px rgba(28, 26, 23, .09); }
.end-side-l { left: 39px; top: 35px; transform: rotate(-8deg); }
.end-side-r { left: 219px; top: 33px; transform: rotate(8deg); }

/* ── 바닥 ── */
.site-footer { padding: 56px 0 40px; background: var(--canvas); border-top: 1px solid var(--hairline); }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.footer-tag { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 20px; color: var(--body); font-size: 14px; font-weight: 500; line-height: 1.5; }
.footer-nav a:hover { color: var(--accent); }
.business { margin-top: 32px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.business .pay-note { color: var(--body); }
.business p { display: flex; flex-wrap: wrap; gap: 0 20px; }
.business .keep { white-space: nowrap; }
.business .trademark { display: block; font-size: 12px; line-height: 1.6; }

/* ── 요금제 ── */
.price-sec { padding-top: 80px; --save: var(--accent); }
.price-wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.price-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.price-head h2 { font-size: 44px; }
.price-promo-wrap { width: min(820px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-inline: 28px; }
.price-promo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; }
.price-promo-name { color: var(--accent-press); font-size: 16px; font-weight: 700; line-height: 1.4; }
.price-promo-tag { padding: 4px 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; line-height: 1.4; }
.price-promo-note { color: var(--body); font-size: 14px; line-height: 1.6; text-align: center; }
.price-cycle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-soft); }
.price-cycle button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: 600 15px/1.4 var(--sans); cursor: pointer; }
.price-cycle button[aria-pressed="true"] { padding-right: 8px; background: var(--surface); color: var(--ink); }
.price-cycle button[data-cycle="m"][aria-pressed="true"] { padding-right: 20px; }
.price-cycle-badge { padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
/* COO ㊿-421 C3 — 배지에 「월 결제 정가보다」가 붙어 길어짐 ⇒ 좁은 폭에서 「월 결제 · 연 결제」가 세로로 쪼개졌다(390 실측). 글은 한 줄로 두고 연 단추만 배지를 아래로 내린다 */
.price-cycle button { white-space: nowrap; }
@media (max-width: 560px) {
  .price-cycle { border-radius: 20px; }
  .price-cycle button { border-radius: 16px; }
  .price-cycle button[data-cycle="y"] { flex-direction: column; gap: 4px; padding: 8px 14px; }
  .price-cycle-badge { white-space: normal; text-align: center; }
}
.price-cards { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* 카드 넷 줄(이름 · 가격 · 단추 · 기능)을 subgrid 로 세 카드가 함께 쓴다 — 가로 셋일 때 스타터 단추 · 기능 윗변이 다른 카드와 같은 높이(사용자 11-09).
   세로로 쌓이면 카드마다 제 줄이라 빈 칸이 안 생긴다. */
.price-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 20px; padding: 32px 28px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface); text-align: left; }
.price-card.is-rec { padding: 31px 27px; border: 2px solid var(--accent); }
.price-name { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.4; }
.price-rec { padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; line-height: 1.4; }
.price-amount { display: flex; flex-direction: column; gap: 8px; }
.price-big { display: flex; flex-direction: column; gap: 8px; }
.price-big span { color: var(--ink); font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.price-big small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.price-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.price-pct { padding: 3px 9px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; line-height: 1.4; }
.price-save-txt { color: var(--accent); font-size: 13px; font-weight: 500; line-height: 1.4; }
/* 연 보기 「~~할인 전~~ → 할인 값 · 33%」를 한 줄 짝으로(사용자 11-09 「눈에 들어오는 금액적 차이로 싸게 사는걸 느끼게」 · COO ㊿-432).
   눈 차례: 큰 할인 값 → 바로 앞 줄그은 값(작고 흐림) → 옆 33% → 그 아래 기준 글(한 단계 작게). 월 보기에선 js 가 data-m=""(빈 글)로 갈아 줄그은 값이 사라진다. */
.price-big .price-pair { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 4px; font-size: inherit; }
.price-big .price-was { color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.price-big .price-pct { align-self: center; white-space: nowrap; padding: 3px 7px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--on-accent); letter-spacing: 0; }
.price-was:empty, .price-sub:empty { display: none; }
.price-sub { color: var(--muted); font-size: 13px; line-height: 1.6; white-space: pre-line; }
.price-cta { display: flex; justify-content: center; align-items: center; height: 52px; padding: 0 32px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.2; }
.price-cta:hover { background: var(--surface-soft); }
.price-cta-fill { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.price-cta-fill:hover { background: var(--accent-press); }
.price-feats { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.price-feats li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; line-height: 1.5; }
.price-feats li::before { content: '\2713 '; grid-row: 1 / 3; color: var(--accent); font-size: 15px; font-weight: 700; }
.price-feats strong { color: var(--ink); font-size: 15px; font-weight: 600; }
.price-feats span { color: var(--muted); font-size: 14px; }
.price-notes { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 14px; line-height: 1.6; }
.price-note, .price-foot { max-width: 720px; color: var(--muted); }
.price-foot a { color: var(--accent); font-weight: 600; }
/* 카드 아래 각주 — 할인 조건(※ · 머리 꼬리표와 짝) · 요금 오르기 30일 전 알림. 접기 0 · 본문 색 14px(흐리게 안 함) */
.price-fn { max-width: 720px; display: flex; flex-direction: column; gap: 6px; }

/* ── 환불 규정 ── */
.refund-sec { padding-top: 80px; }
.refund-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.refund-head h1 { font-size: 44px; line-height: 1.3; letter-spacing: -0.015em; }
.home { color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1.5; }
.refund-body { display: flex; align-items: flex-start; gap: 48px; margin-top: 40px; }
.toc { position: sticky; top: 96px; flex: none; width: 260px; display: flex; flex-direction: column; gap: 4px; }
.toc a { padding: 8px 14px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.5; }
.toc a:hover { background: var(--surface-soft); }
.toc a.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.refund-cards { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rcard { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.rcard h2 { color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.rcard p { color: var(--body); font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.rcard .ex { padding: 12px 16px; border-radius: 10px; background: var(--surface-soft); font-size: 15px; }
.rcard .ex strong { color: var(--ink); }
.refund-end { display: flex; flex-direction: column; gap: 12px; }
.refund-end p { color: var(--body); font-size: 15px; line-height: 1.7; }
.refund-end .foot { color: var(--accent); font-size: 14px; line-height: 1.6; }
.refund-end .foot a { color: var(--accent); }
.refund-end .foot a:hover { color: var(--accent-press); }

/* ── 폭 ── */
@media (max-width: 1100px) {
  :root { --sec: 72px; }
  .price-promo-note .pn-2 { display: block; }
  .toc { display: none; }
  .refund-body { margin-top: 32px; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-col { display: contents; }
  .feat-art { grid-column: 1 / -1; order: -1; height: 440px; }
  .act-risk-list { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
}
@media (min-width: 601px) and (max-width: 1100px) { .price-promo-note .pn-1b { display: block; } }
@media (max-width: 900px) {
  .header-nav { display: none; }
  .menu-btn { margin-left: auto; }
  .head-login { display: none; }
  .site-header.menu-open .header-nav .nav-login { display: block; }
  .menu-btn { display: grid; }
  .site-header.menu-open .header-nav { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; padding: 8px 16px 16px; background: var(--canvas); border-bottom: 1px solid var(--hairline); box-shadow: 0 8px 16px rgba(20, 33, 61, 0.06); }
  .site-header.menu-open .header-nav a { padding: 12px 16px; border-radius: 12px; font-size: 16px; line-height: 22px; }
  .hero { padding: 48px 0 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero h1 { font-size: 44px; gap: 16px; }
  .hero-side { font-size: 17px; line-height: 1.65; font-weight: 500; }
  .stage { height: 640px; }
  .tech-cards { grid-template-columns: minmax(0, 1fr); }
  .how-head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .how-intro { gap: 28px; }
  .work-item { flex-direction: column; align-items: stretch; gap: 28px; min-height: 0; padding: 32px 28px; }
  .work-visual { width: 100%; max-width: 520px; margin-inline: auto; }
  .act-pdf { flex-direction: column; align-items: stretch; gap: 28px; padding: 32px 28px; }
  .act-pdf-fig { width: 100%; min-height: 0; padding: 24px 0 0; }
  .end-panel { padding: 48px 40px; }
  .end-art { display: none; }
  .footer-top { flex-direction: column; }
  .footer-nav { justify-content: flex-start; }
  .price-cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .price-head { gap: 32px; }
}
@media (max-width: 600px) {
  :root { --side: 16px; --sec: 56px; }
  .header-row { padding-inline: 16px; }
  .btn-sm { padding: 0 16px; font-size: 14px; }
  .shead h2, .price-head h2, .refund-head h1 { font-size: 28px; letter-spacing: -0.015em; }
  .shead .sub { font-size: 15px; }
  .hero h1 { font-size: 32px; gap: 12px; }
  .hero-side { font-size: 16px; }
  .store-row { gap: 12px; }
  .store-badge { height: 48px; }
  .store-ios { width: 155.64px; }
  .store-play { width: 161.5px; }
  .store-play img { margin-top: -7.25px; }
  .tablist button { font-size: 15px; }
  .stage { height: 470px; }
  .soon-panel { padding: 32px 20px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .work-item { padding: 28px 20px; }
  .work-copy h3 { font-size: 24px; }
  .feat-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .feat-art { height: 380px; }
  .act-risk-list { margin-top: 40px; }
  .act-pdf { padding: 28px 20px; }
  .act-pdf-lead { font-size: 18px; }
  .act-pdf .mf { width: min(100%, 260px); }
  .review-card { padding: 28px 24px; margin-top: 40px; }
  .review-card blockquote p { font-size: 16px; }
  .faq-list { margin-top: 40px; }
  .end-panel { padding: 40px 24px; }
  .end-copy h2 { font-size: 26px; letter-spacing: -0.01em; }
  .price-sec, .refund-sec { padding-top: 56px; }
  .price-promo-wrap { padding-inline: 0; }
  .rcard { padding: 24px 20px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .header-row { height: 56px; }
  .notice-bar { padding-block: 6px; }
}

@media (prefers-reduced-motion: reduce) { .hero h1 .tl, .hero-side { animation: none; } .scenes img { transition: none; } }

/* 폰 폭(600 이하)에서만 끊는 줄 — 사용자 줄바꿈 규칙(뜻 덩이에서 끊음 · 2026-11-09) */
.br-m { display: none; }
/* 이용 순서 셋(2026-11-10 「고르기」를 시안 비교에 합침) — 두 칸 격자에서 마지막 하나가 홀로 남으면 한 줄을 다 쓴다 */
.steps > .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 600px) { .br-m { display: inline; } }
/* 상담 화면 구획 ㉡ — 이용 순서에 없는 셋만 한 줄(사용자 「ㄴ 으로 해」 2026-11-10) */
.feat-grid.feat-3{grid-template-columns:minmax(0,1fr)}
.feat-3 .feat-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.feat-3 .feat-col{grid-template-columns:minmax(0,1fr)}}
/* 스토어 QR 창(2026-11-10) — 누른 스토어 칸 하나만 보인다(data-show). 바깥 누르기 · Esc · 닫기 단추로 닫힘(v4.js) */
.qr-dlg { box-sizing: border-box; width: min(340px, calc(100vw - 32px)); max-width: none; padding: 0; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); color: var(--ink); text-align: center; box-shadow: var(--sh-product); }
.qr-dlg::backdrop { background: rgba(28, 26, 23, .45); }
/* 위 띠: 브랜드 워드마크(앱 머리 · 홈페이지와 같은 것) — QR 가운데 로고는 넣지 않는다(읽힘) */
.qr-head { display: flex; align-items: center; justify-content: center; height: 56px; background: var(--accent-soft); }
.qr-head img { display: block; width: 93px; height: 15px; }
.qr-body { padding: 22px 28px 26px; }
.qr-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; }
.qr-close:hover { background: var(--surface); }
.qr-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qr-title { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.qr-pane { display: none; }
.qr-dlg[data-show="ios"] .qr-pane[data-store="ios"], .qr-dlg[data-show="play"] .qr-pane[data-store="play"] { display: block; }
/* 찍는 자리: 옅은 판 위 흰 칸 + 네 모서리 강조색 꺾쇠(배경 그라데이션 여덟 줄) */
.qr-svg { display: block; width: 228px; margin: 0 auto; padding: 14px; box-sizing: border-box; border-radius: 4px; background:
  linear-gradient(var(--accent), var(--accent)) left top / 26px 4px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 4px 26px no-repeat,
  linear-gradient(var(--accent), var(--accent)) right top / 26px 4px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 4px 26px no-repeat,
  linear-gradient(var(--accent), var(--accent)) left bottom / 26px 4px no-repeat, linear-gradient(var(--accent), var(--accent)) left bottom / 4px 26px no-repeat,
  linear-gradient(var(--accent), var(--accent)) right bottom / 26px 4px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 4px 26px no-repeat,
  var(--surface-soft); }   /* QR 은 design/homepage/v4-flow/_qr_build.py 가 배지 href 로 굽는다(그림 파일 · 바깥 호출 0) */
.qr-pane svg { display: block; width: 200px; height: 200px; margin: 0 auto; border-radius: 6px; }
.qr-line { margin: 18px 0 0; color: var(--body); font-size: 15px; line-height: 1.6; }
html[data-store-play="off"] .qr-pane[data-store="play"] { display: none !important; }   /* Google Play 칸도 배지 스위치를 따른다(COO ㊿-438 · ㊿-441) */