/* manoa.kr 시안판 hb — 레퍼 페이지의 짜임을 우리 토큰으로(2026-10-12, 사용자 「honeybook의 레이아웃과 동일하게」 · 「모션도 최대한 동일하게」, PM 전달).
   색·글꼴 = /v3/v3-tokens.css(DESIGN, 색 = design/canvas/_tokens.css)만. 이 파일에서 새 색을 짓지 않는다. 글꼴 Pretendard 하나.
   레퍼에서 잰 짜임 값(2026-10-12, 1450×900 · 브라우저로 읽음 — 맞춤표는 docs/sessions/MARKETING.md 「hb 첫 판」):
     글 칸 1200 · 구획 위아래 80 · 카드 모서리 20 · 카드 = 흰 판 + 1px 테 · 그림자 0 · 제품 화면 그림자 0 8 24 /.06 · 하는 일 두 칸 40/60 · 사이 64 · 붙는 그림 top 140
     첫 화면 제목 64 · 구획 제목 48 · 단추 = 알약 · 탭 = 넓이 같은 칸 + 밑 막대(진행).
   레퍼에서 잰 움직임 값과 우리 판(같은 순서로 hb.js 와 이 파일에):
     ㉠ 첫 화면 기능 탭 — 15 s 직선 진행 막대가 차면 다음 탭(돌이). 화면 바뀜 = 투명도 0.4 s.
     ㉡ 하는 일 — 오른쪽 그림이 머리줄 아래(top 140)에 붙고, 글 덩이가 바뀌면 그림이 바뀐다(투명도 0.4 s ease-in-out).
     ㉢ 단추·머리 메뉴 마우스 올림 = 바탕색만 바뀜(전환 시간 0). 바닥글 고리 = 투명도 0.75 로(0.22 s).
     ㉣ 첫 화면 양옆 그림 = ±8° 기운 채 멈춤. 머리줄 = 붙어 따라옴(숨김 0).
     ㉤ 첫 등장·구획 나타남·바탕 물결 = 0 — 레퍼에 없다(레퍼의 드러남은 뺀 구획 둘(수치 띠·앱 띠)에만 있었다).
   움직임 줄이기면 v3-tokens.css 끝 줄이 animation·transition 을 끈다 — 진행 막대가 안 돌아 탭도 안 넘어간다(hb.js 는 animationend 로만 넘긴다). */

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

:root {
  --hb-sec: clamp(56px, 6vw, 80px);          /* 레퍼 구획 위아래 80 */
  --hb-r: 20px;                               /* 레퍼 카드·그림 모서리 20 */
  --hb-display: clamp(28px, 2.4vw + 12px, 48px);     /* 레퍼 첫 화면 제목 64 → 사용자 10-13 「히어로 타이틀이 너무 크다」로 48 상한 */
  --hb-h2: clamp(28px, 3.3vw, 48px);          /* 레퍼 구획 제목 48 */
  --hb-gap: 64px;                             /* 레퍼 두 칸 사이 64 */
  --hb-stick: 140px;                          /* 레퍼 붙는 그림 top 140 */
}

* { 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: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px 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: 80px; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
h1, h2 { font-family: var(--sans); color: var(--ink); font-weight: var(--fw-display); letter-spacing: var(--track-display); text-wrap: balance; }
h3 { color: var(--ink); font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; }
.eyebrow { font-size: var(--fs-small); line-height: 1.5; font-weight: 600; letter-spacing: .02em; }

/* ── 단추 — 알약. 마우스 올림은 바탕색만, 전환 시간 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; 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; }   /* 레퍼 알약 안 여백 20 · 32 */
.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; }  /* 카카오 단추 색 — 운영 판·v3 와 같다 */
.btn-kakao:hover { background: #F2D900; }
.btn-on-dark { background: var(--surface); color: var(--accent-press); }   /* 어두운 띠 위 — v3 와 같다(흰 판 위 accent-press 7.5 이상) */
.btn-on-dark:hover { background: var(--accent-soft); }
.btn-ghost-dark { background: transparent; color: var(--on-accent); border: 1px solid var(--accent-soft); }
.btn-ghost-dark:hover { background: var(--accent-press); }

/* ── ① 알림 띠 · ② 머리줄 ── */
.notice-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; padding: 9px 16px; background: var(--accent); color: var(--on-accent); font-size: 14px; line-height: 20px; font-weight: 600; text-align: center; }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--canvas); }
/* 레퍼 머리줄 = 화면 끝까지(로고 왼끝 · 단추 오른끝 24) · 메뉴 가운데 */
.header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 72px; padding-inline: clamp(16px, 1.7vw, 24px); }
.wordmark img { height: 18px; width: auto; }
.header-nav { display: flex; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.header-nav a { padding: 8px 16px; border-radius: var(--r-pill); }
.header-nav a:hover { background: var(--accent-soft); }   /* 레퍼: 메뉴 고리 올림 = 알약 바탕 */
.header-row .btn { justify-self: end; }

/* ── ③ 첫 화면 — 한 색 띠가 제품 화면 가운데까지 내려온다 ── */
.hero { position: relative; overflow: hidden; padding-top: clamp(56px, 6.5vw, 96px); text-align: center; background: linear-gradient(var(--accent-soft) calc(100% - 180px), var(--canvas) 0); }
/* 가운데서 둥글게 퍼지는 그라데이션(사용자 10-13 「히어로 중앙 기점으로 동그랗게 퍼지는 그라데이션, 프라이머리와 맞는 조합」).
   색 = accent 를 accent-soft 에 섞은 옅은 원 → 바깥 surface 빛. 띠 아래 180 px(canvas)에는 안 걸린다. 천천히 숨 쉬듯 커졌다 작아짐(12 s) — 움직임 줄이기면 tokens 끝 줄이 끈다 */
.hero::before { content: ''; position: absolute; inset: -300px -400px 180px; pointer-events: none;   /* 상자를 첫 화면보다 크게 — 커졌다 작아질 때 상자 모서리가 안 보이게(위·옆은 overflow 로 잘림, 아래 끝은 투명) */
  background: radial-gradient(circle 760px at 50% 640px, 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%);
  transform-origin: 50% 640px; animation: hb-bloom 12s ease-in-out infinite alternate; }
@keyframes hb-bloom { from { transform: scale(.88); } to { transform: scale(1.12); } }
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-product { position: relative; }
/* 글 묶음 — 폭 = 제목 폭(fit-content). 단추가 그 폭을 그대로 채운다(사용자 「cta 양쪽으로 더 길게, 히어로 타이틀 문구 폭과 맞추기」) */
.hero-copy { display: grid; justify-items: center; width: fit-content; max-width: 100%; }
.hero-copy .btn { justify-self: stretch; }
.hero-copy > .reassure, .hero-copy > .lead-steps { width: 0; min-width: 100%; }   /* 묶음 폭은 제목만 정한다(820 에서 안심 글이 단추를 넓혔다) */
.hero-copy > .lead-steps { flex-wrap: nowrap; white-space: nowrap; }
h1 { font-size: var(--hb-display); line-height: var(--lh-display); }
.ph { display: inline-block; }
@media (min-width: 601px) { .hero h1 .ph { display: block; } }   /* 태블릿·PC 쉼표 뒤 두 줄(v3 와 같다 — 레퍼도 두 줄) */
.lead { max-width: 32em; text-wrap: balance; margin-top: 16px; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
/* 설명 글 → 세 단계 그림(사용자 「lead 내용을 시각화로」). 읽는 글은 .lead 로 남겨 화면 읽기·검색에 그대로 간다(visually-hidden) */
.lead-steps { display: flex; justify-content: center; align-items: center; gap: 10px 36px; flex-wrap: wrap; margin-top: 36px; }
.lead-steps li { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 600; }
.lead-steps li + li::before { content: ''; position: absolute; left: -28px; top: 50%; width: 20px; height: 2px; border-radius: 1px; background: var(--accent); }   /* 단계 잇는 짧은 선 */
.lead-steps svg { flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero .btn { margin-top: 48px; }
.reassure { margin-top: 12px; color: var(--body); font-size: var(--fs-small); line-height: 1.5; }
.hero .btn + .reassure { margin-top: 24px; }   /* 사용자 「reassure 를 버튼 바로 밑이 아니라 간격 더 넓게」 */
.hero .reassure + .reassure { margin-top: 4px; }
/* 양옆 기운 그림은 걷었다(사용자 10-13 「hero-side-r/-l 삭제」) */
/* 기능 탭 줄 — 넓이 같은 칸 넷 · 밑 막대(옅은 길 위에 진행). 레퍼 ㉠ 15 s 직선 */
.hero-product { margin-top: clamp(48px, 6vw, 72px); }
.tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tablist button { position: relative; padding: 0 0 18px; border: 0; background: transparent; color: var(--body); font: 600 16px/1.2 var(--sans); cursor: pointer; }
.tablist button[aria-selected="true"] { color: var(--ink); }
.tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); 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); }
.hb-auto .tablist button[aria-selected="true"] .tab-bar span { animation: hb-progress 15s linear forwards; }   /* 넘김이 살아 있을 때만 차오른다 — 멈추면 꽉 찬 막대 = 지금 탭 */
@keyframes hb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stage { margin-top: 28px; border-radius: var(--hb-r); background: var(--surface); box-shadow: var(--sh-product); padding: clamp(20px, 3vw, 40px); }
.panel { display: flex; justify-content: center; }
.panel[hidden] { display: none; }
.panel.is-entering { animation: hb-fade 400ms ease forwards; }   /* 레퍼 화면 바뀜 투명도 0.4 s */
@keyframes hb-fade { from { opacity: 0; } to { opacity: 1; } }
.panel .mf { width: min(100%, 440px); }
/* 재생기 자리 미리 잡기 — flow.js 가 짓기 전(빈 .mf)에는 높이 0 이라, 지은 뒤 첫 화면의 아래 구획이 밀렸다(CLS 768×1024 0.25 · 820×1180 0.43 · 1366×1024 0.11,
   v3_check 출처: 연 지 20 ms 「하는 일」 구획이 첫 화면 밖으로). 지은 꼴 = 무대(flow.css 기본 834/1194 · data-aspect) + 다시 보기 줄 56(12 + 44). flow.css 는 DESIGN 것이라 여기서 */
.mf:empty { padding-bottom: 56px; }   /* 여백(margin)은 빈 부모를 뚫고 겹쳐 사라져서 안쪽 여백으로 */
.mf:empty::before { content: ''; display: block; aspect-ratio: 834 / 1194; }
.mf[data-aspect="4/3"]:empty::before { aspect-ratio: 4 / 3; }
.stage .mf-stage, .work-visual .mf-stage, .act-pdf .mf-stage { box-shadow: none; border: 1px solid var(--hairline); border-radius: 12px; }
.flow-note { margin-top: 16px; color: var(--muted); font-size: var(--fs-small); text-align: center; }

/* ── 구획 공통 ── */
.sec { padding: var(--hb-sec) 0; }
.sec h2 { font-size: var(--hb-h2); line-height: 1.2; }
.sec-title { text-align: center; }
.sec-lead { max-width: 40em; margin: 20px auto 0; text-wrap: pretty; text-align: center; font-size: var(--fs-lead); line-height: 1.7; }

/* ── ④ 하는 일 — 글 40 / 그림 60 · 그림 셋은 오른 칸 한 자리에 겹쳐 붙고(top 140) 글 덩이가 바뀌면 그 덩이 그림만 보인다(레퍼 ㉡) ── */
.work { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: var(--hb-gap); margin-top: clamp(48px, 6vw, 96px); }
.work-item { display: contents; }
.work-copy { grid-column: 1; display: flex; flex-direction: column; justify-content: center; min-height: max(520px, 74vh); }  /* 레퍼 덩이 간격 ≈ 1009/900 화면 → 설명이 짧아 빈 곳이 커 보여(사용자 10-13) 74vh 로 줄임 */
.work-item:nth-child(1) .work-copy { grid-row: 1; }
.work-item:nth-child(2) .work-copy { grid-row: 2; }
.work-item:nth-child(3) .work-copy { grid-row: 3; }
.work-copy h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: var(--fw-display); line-height: 1.2; letter-spacing: var(--track-display); }
.work-copy h3 + p { margin-top: 16px; color: var(--ink); font-size: var(--fs-lead); line-height: 1.6; }
.work-more { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); line-height: 1.75; }   /* 덩이 빈 공간(사용자 「설명글이 너무 적어」) — 글은 v3 탭 글 그대로 */
.work-more + .work-more { border-top: 0; padding-top: 0; margin-top: 10px; }
.work-visual { grid-column: 2; grid-row: 1 / 4; align-self: start; position: sticky; top: var(--hb-stick); padding: clamp(24px, 3vw, 48px); border-radius: var(--hb-r); background: var(--accent-soft); }
.work-visual .mf { width: min(100%, 520px); margin-inline: auto; }
.work-visual:not(.is-active) { display: none; }
.work-visual.is-active { animation: hb-fade 400ms ease-in-out; }   /* 레퍼 그림 바뀜 투명도 0.4 s ease-in-out */
.work-sec .flow-note { margin-top: 32px; }

/* ── ⑤ 새 소식 띠 — 따뜻한 바탕(surface-soft) 두 칸 ── */
.soon-sec { background: var(--surface-soft); }
.soon-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px var(--hb-gap); align-items: center; }
.soon-tag { display: inline-block; padding: 2px 10px; border: 1px solid currentColor; border-radius: 4px; color: var(--accent); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.soon-sec h2 { margin-top: 16px; }
.soon-copy h2 + p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.soon-copy .soon-now { margin-top: 10px; }
.soon-art img { display: block; width: 100%; height: auto; }
.soon-names { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.25%; margin-top: 10px; text-align: center; color: var(--ink); font-size: 15px; font-weight: 600; }  /* 카드 셋 틈 1.25 % — v3 와 같은 그림 */
.soon-art-stack { display: none; }
.soon-tagline { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* ── ⑥ 어두운 띠 — 가운데 글 + 아래 넓은 화면 ── */
.act-sec { background: var(--structural); color: var(--on-accent); }
.act-copy { max-width: 46em; margin-inline: auto; text-align: center; }
.act-sec h2 { color: var(--on-accent); }
.act-sec .sec-lead { color: var(--on-accent); }
.act-sec .fine { margin-top: 14px; color: var(--accent-soft); font-size: var(--fs-small); }
/* ⑥-2 위반 시 조치·벌칙 — 카드 셋(레퍼 수치 띠 짜임: 모서리 20 · 1px 테 · 그림자 0). 강조는 --warn 계열만(정본 design/canvas/_tokens.css:35 — hb 가 싣는 v3-tokens 에 없어 여기서만 옮겨 둠). 빨간 경고판 연출 없음 */
.act-risk { --warn-soft: #FDF3E7; max-width: 1200px; margin: 48px auto 0; }
.act-risk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }   /* 카드 높이 같게 — 고리는 바닥에 */
@media (max-width: 1100px) { .act-risk-list { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; } }   /* 두 칸이면 셋째가 홀로 남아 들쭉날쭉(820 캡처) — 한 칸으로 */
.act-risk-list li { display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 32px); border: 1px solid color-mix(in srgb, var(--on-accent) 22%, transparent); border-radius: var(--hb-r); color: var(--on-accent); }
.act-risk-law { margin-bottom: 10px; color: var(--warn-soft); font-size: var(--fs-small); font-weight: 700; }
/* 큰 수(레퍼 수치 띠 꼴) — 사용자 「축약하고 비주얼로 강조」. 색 = --warn-soft 하나(빨간 판 0) */
.act-risk-big { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--on-accent) 22%, transparent); }
.act-risk-big strong { color: var(--warn-soft); font-size: clamp(30px, 3vw, 40px); font-weight: var(--fw-display); line-height: 1.1; letter-spacing: var(--track-display); }
.act-risk-big span { color: var(--accent-soft); font-size: var(--fs-small); }
.act-risk-list .act-risk-big { margin-top: 12px; }
/* 닫힌 카드에도 제목 한 줄(사용자 10-13 「둘 다 추천대로」) — 세 칸 창에서는 두 줄 자리를 잡아 큰 수 높이를 맞춘다 */
@media (min-width: 1101px) { .act-risk-list > li > h3 { min-height: calc(2em * 1.35); } }
/* 큰 수만 보이고 나머지는 카드 안 아코디언 — 기본 닫힘(사용자 10-13). FAQ 와 같은 details/summary 꼴(키보드·화면 읽기) */
.act-risk-more summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; cursor: pointer; list-style: none; color: var(--on-accent); font-size: var(--fs-small); font-weight: 600; }
.act-risk-more summary::-webkit-details-marker { display: none; }
.act-risk-more summary::after { content: '+'; flex: none; color: var(--accent-soft); font-size: 20px; font-weight: 400; line-height: 1; }
.act-risk-more[open] summary::after { content: '−'; }
.act-risk-body { display: flex; flex-direction: column; padding-top: 14px; }
.act-risk-body > :first-child { margin-top: 0; }
.act-risk-list h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; color: var(--on-accent); }
.act-risk-list p { margin-top: 12px; line-height: 1.65; }
.act-risk-list h3 + p { margin-top: 14px; }
.act-risk-ours { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--on-accent) 22%, transparent); }
.act-risk-list .act-risk-ours { margin-top: 16px; }
.act-risk-fine { color: var(--accent-soft); font-size: var(--fs-small); }
.act-risk-link { align-self: flex-start; margin-top: 16px; color: var(--on-accent); font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: opacity .22s; }
.act-risk-link:hover { opacity: .75; }   /* 레퍼 고리 위 투명도 0.75 · 0.22 s */
.act-pdf-head { max-width: 40em; margin: 56px auto 0; text-align: center; line-height: 1.7; }   /* 표준지침 문장 — PDF 그림 바로 위로 옮김 */
.act-pdf-head + .act-pdf { margin-top: 24px; }
.act-pdf { max-width: 720px; margin: 48px auto 0; padding: clamp(20px, 3vw, 40px); border-radius: var(--hb-r); background: var(--surface); }
.act-pdf .mf { width: min(100%, 440px); margin-inline: auto; }
.act-pdf-note { max-width: 440px; margin: 16px auto 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.6; text-align: center; }

/* ── ⑦ 후기 벽 — 따뜻한 바탕 · 세 줄 벽돌 · 흰 카드(모서리 20 · 테·그림자 0) ── */
.review-sec { background: var(--surface-soft); }
.review-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.review-card { grid-column: 2; padding: 24px 20px; border-radius: var(--hb-r); background: var(--surface); }   /* 실제 후기 한 건 — 벽 가운데 줄 */
.review-card blockquote p { color: var(--ink); font-size: 17px; line-height: 1.6; }
.review-card figcaption { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
/* AI 프로필 그림과 그 고지를 걷고 사진 아닌 글자 원(PM 10-13 — 「원장님 실제 후기」 아래 AI 얼굴이 실제 원장으로 읽히지 않게) */
.review-mark { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-press); font-size: 18px; font-weight: 700; }
.review-name { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }

/* ── ⑧ 자주 묻는 질문 — 큰 제목 왼쪽 · 목록 오른쪽 ── */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.faq-wrap .sec-title { text-align: left; }
.faq { border-bottom: 1px solid var(--hairline); }
.faq:first-child { border-top: 1px solid var(--hairline); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; color: var(--ink); font-size: 19px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; color: var(--muted); font-size: 24px; font-weight: 400; line-height: 1; }
.faq[open] summary::after { content: '−'; }
.faq p { padding-bottom: 24px; line-height: 1.75; }
.faq p:has(+ .faq-actions) { padding-bottom: 16px; }
.howto { margin: 0 0 16px; padding: 0; }
.howto dt { margin-top: 14px; color: var(--ink); font-weight: 600; }
.howto dd { margin: 4px 0 0; line-height: 1.7; }
.faq .howto + p { padding-bottom: 24px; color: var(--muted); font-size: var(--fs-small); }
.faq .faq-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 24px; }

/* ── ⑨ 끝 띠 — 어두운 바탕 · 가운데 · 양옆 기운 그림(첫 화면과 같은 값) ── */
.end-sec { position: relative; overflow: hidden; background: var(--structural); color: var(--on-accent); text-align: center; }
.end-inner { display: flex; flex-direction: column; align-items: center; }
.end-sec h2 { color: var(--on-accent); }
.end-copy { position: relative; display: grid; justify-items: center; width: fit-content; max-width: 100%; }
.end-sub { margin-top: 20px; color: var(--on-accent); font-size: var(--fs-lead); }
.end-copy > .end-sub, .end-copy > .reassure { width: 0; min-width: 100%; }   /* 묶음 폭은 제목만 정한다 */
.end-inner .btn { justify-self: stretch; margin-top: 48px; }   /* 사용자 「텍스트와 버튼 간격 넓힘 · 좌우로 더 넓게」 — 폭 = 제목 폭 */
.end-sec .btn + .reassure { margin-top: 20px; }
.end-sec .reassure { color: var(--on-accent); }
.end-side { display: none; position: absolute; width: clamp(150px, 12vw, 180px); border-radius: 12px; }
@media (min-width: 1280px) {
  .end-side { display: block; }
  .end-side-l { left: -10px; top: 40px; transform: rotate(8deg); }
  .end-side-r { right: -10px; bottom: -30px; transform: rotate(-8deg); }
}

/* ── ⑩ 바닥글 — 어두운 바탕(끝 띠에 이어짐) · 고리 올림 투명도 0.75(0.22 s, 레퍼 ㉢) ── */
.site-footer { padding: 64px 0 40px; background: var(--structural); color: var(--on-accent); border-top: 1px solid color-mix(in srgb, var(--on-accent) 16%, transparent); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 40px; }
.site-footer .wordmark img { filter: invert(1); }   /* 검은 글씨 그림을 흰색으로 — 그림 파일은 안 고친다 */
.footer-tag { margin-top: 14px; color: var(--accent-soft); font-size: var(--fs-small); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: var(--fs-small); font-weight: 500; }
.footer-nav a { transition: opacity .22s; }
.footer-nav a:hover { opacity: .75; }
.business { grid-column: 1 / -1; color: var(--accent-soft); font-size: 13px; line-height: 22px; }
.business p { display: flex; flex-wrap: wrap; gap: 0 20px; }
.business .keep { white-space: nowrap; }
.copyright { margin-top: 8px; }

/* ── 폭 ── */
@media (max-width: 1100px) {
  .header-row { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 900px) {
  .header-nav { display: none; }
  .header-row { grid-template-columns: 1fr auto; }
  /* 하는 일: 붙는 그림을 풀고 덩이마다 글 → 그림(레퍼 좁은 창 꼴) */
  .work { display: block; }
  .work-item { display: block; margin-top: 56px; }
  .work-item:first-child { margin-top: 0; }
  .work-copy { min-height: 0; }
  .work-visual, .work-visual:not(.is-active) { display: block; position: static; margin-top: 24px; animation: none; }
  .soon-band { grid-template-columns: 1fr; }
  .review-wall { grid-template-columns: 1fr; }
  .review-card { grid-column: 1; }
  .faq-wrap { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* 폰: 알약 셋이 한 줄에 안 든다 — 세 칸(그림 위 · 글 아래), 잇는 선은 그림 높이에 */
  .hero-copy > .lead-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; white-space: normal; }
  .lead-steps li { flex-direction: column; gap: 8px; padding: 14px 6px 12px; border-radius: 16px; font-size: 14px; text-align: center; }
  .lead-steps li + li::before { left: -10px; top: 50%; width: 8px; }
  .tablist { gap: 6px; }
  .tablist button { font-size: 15px; padding-bottom: 14px; }
  .soon-art-wide { display: none; }
  .soon-art-stack { display: grid; gap: 16px; }
  .soon-art-stack span { display: block; margin-bottom: 6px; color: var(--ink); font-size: 15px; font-weight: 600; }
  .soon-art-stack img { border-radius: 16px; }
  .soon-tagline { text-align: left; }
  .work-visual { padding: 16px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .header-row { height: 56px; }
  .notice-bar { padding-block: 6px; }
  .hero { padding-top: 24px; }
  .hero h1 .ph { display: inline-block; }   /* 가로 폰 한 줄(v3 와 같다 — 사용자 10-12) */
  .lead { margin-top: 8px; }
  .hero .btn { margin-top: 24px; }
  .lead-steps { margin-top: 16px; }
  .reassure, .hero .btn + .reassure { margin-top: 8px; }
}