/* 홍보용 랜딩 — 밝은 바탕 · 빨강은 포인트(로고 · 주 단추 · 「판」)만 · 섹션 8개 · 은은한 스크롤 등장(D-071).
   사장님 2026-10-26: 「디자인을 조금 더 간결하고 스크롤 애니메이션 추가해서, 전문 웹디자이너 스타일로」 ·
   검정 바탕 + 붉은 빛 번짐 첫 화면은 REVRUN(revrun.kr)과 겹쳐 뺐다(I-038).
   ★ 공용 색 · 글꼴 · 알림은 base.css 에 있다. 여기에는 랜딩에만 쓰는 값만 둔다(색은 토큰으로 — 5-1). */
:root {
  --gray: #F5F6F8;   /* 번갈아 까는 옅은 바탕 — 차가운 회색(D-074). 따뜻한 미색 + 붉은 주황은 AI 페이지 흔한 조합이라 피했다(I-039) */
  --x: clamp(20px, 4.5vw, 72px);
  --r: 14px;
  --head-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-lg: 0 32px 64px -24px rgba(17, 20, 24, .28), 0 8px 16px -8px rgba(17, 20, 24, .1);
  --bar: color-mix(in srgb, var(--ink) 4%, var(--white));   /* 그림 속 브라우저 주소줄 */
  --frame-line: color-mix(in srgb, var(--ink) 18%, transparent);
  /* 랜딩 글자색 — 옅은 바탕(--gray · --accent-soft)에서도 4.5:1 을 넘게(I-039). 공용 --sub(4.46) · --accent-d(4.24) 대신 쓴다 */
  --muted: #5F656E;        /* 보조 글자 — 흰 5.88 · 옅은 바탕 5.34 이상 */
  --accent-ink: #C0301C;   /* 작은 빨강 글자 — 흰 5.71 · 옅은 바탕 5.18 이상(단추 바탕은 그대로 --accent-d) */
  /* 밝음 · 어두움이 바꿔 끼우는 랜딩 색(D-075). 공용 이름(--ink · --white …)은 다시 정의하지 않고 여기서 받아 쓴다 */
  color-scheme: light;
  --bg: var(--white);          /* 페이지 바탕 */
  --card: var(--white);        /* 카드 · 폼 · 그림 틀 */
  --fg: var(--ink);            /* 제목 · 진한 글자 */
  --fg-2: var(--text);         /* 본문 */
  --rule: var(--line);         /* 구분선 */
  --accent-wash: var(--accent-soft);
  --err-ink: var(--err);
  --ok-ink: var(--ok);
  --device: var(--ink);        /* 휴대폰 그림 테두리 */
  --logo-light: block; --logo-dark: none;   /* 머리 · 바닥 로고 바꿔 끼우기 */
  --icon-moon: block; --icon-sun: none;     /* 다크모드 단추 그림 */
}
/* 어두운 화면(D-075) — 기기 설정이 어둡거나(사장님이 고르지 않았을 때) 단추로 어둡게 고른 경우. 판플의 검정 + 빨강.
   ★ 아래 두 블록은 같아야 한다(시험이 대조). 붉은 빛 번짐 같은 장식은 쓰지 않는다(REVRUN 과 겹침 — I-038) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0B0C; --card: #18191D; --gray: #141417; --bar: #1E1F24;
    --fg: #F2F3F5; --fg-2: #C9CDD3; --muted: #9CA2AB; --rule: #2A2B31; --frame-line: color-mix(in srgb, #FFFFFF 18%, transparent);
    --accent-ink: #FF7462; --accent-wash: color-mix(in srgb, var(--accent) 16%, #0B0B0C); --err-ink: #FF7A66; --ok-ink: #4FD18B;
    --device: #2A2B31; --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, .7), 0 8px 16px -8px rgba(0, 0, 0, .5);
    --logo-light: none; --logo-dark: block; --icon-moon: none; --icon-sun: block;
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0B0B0C; --card: #18191D; --gray: #141417; --bar: #1E1F24;
    --fg: #F2F3F5; --fg-2: #C9CDD3; --muted: #9CA2AB; --rule: #2A2B31; --frame-line: color-mix(in srgb, #FFFFFF 18%, transparent);
    --accent-ink: #FF7462; --accent-wash: color-mix(in srgb, var(--accent) 16%, #0B0B0C); --err-ink: #FF7A66; --ok-ink: #4FD18B;
    --device: #2A2B31; --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, .7), 0 8px 16px -8px rgba(0, 0, 0, .5);
    --logo-light: none; --logo-dark: block; --icon-moon: none; --icon-sun: block;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg-2); font-size: 16px; line-height: 1.7; font-family: 'Pretendard Variable', var(--font); }   /* 랜딩만 가변 글꼴 부분 집합(index.html) */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--x); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--bg); color: var(--fg); padding: 8px 12px; border-radius: 8px; }
.br-d { display: none; }
@media (min-width: 900px) { .br-d { display: inline; } }
h1, h2, h3 { margin: 0; color: var(--fg); letter-spacing: -.03em; }
em { font-style: normal; color: var(--accent-ink); }

/* 머리 — 흰 바탕. 내려가면 아래 선이 생기고 지금 보는 섹션 메뉴가 진해진다(js/top-nav.js) */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.is-scrolled { border-bottom-color: var(--rule); }
.top-in { display: flex; align-items: center; gap: 24px; min-height: var(--head-h); }
.logo { display: inline-flex; align-items: center; }
.logo-img { display: block; height: 32px; width: auto; }   /* 판플 로고(shared/brand, D-024 · D-026) */
.logo-light { display: var(--logo-light); } .logo-dark { display: var(--logo-dark); }   /* 어두운 화면은 흰 글자 로고(D-075) */
.top-act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* 다크모드 단추(js/theme.js) — 같은 선 굵기의 해 · 달 그림(관리자 icons.js 와 같은 24 격자 · 1.8 선) */
.theme-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--frame-line); border-radius: 10px; background: transparent; color: var(--fg); cursor: pointer; transition: border-color .2s, background .2s; }
.theme-btn:hover { border-color: var(--fg); }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-moon { display: var(--icon-moon); } .theme-btn .i-sun { display: var(--icon-sun); }
.top-nav { display: flex; gap: 32px; margin-left: 48px; font-size: 15px; font-weight: 600; }
.top-nav a { color: var(--muted); text-decoration: none; transition: color .15s; }
.top-nav a:hover, .top-nav a[aria-current] { color: var(--fg); }
@media (max-width: 960px) { .top-nav { display: none; } }

/* 단추 — 주 단추(빨강)는 구역마다 하나, 나머지는 테두리 */
.btn, .btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer; white-space: nowrap; border: 1px solid transparent; border-radius: 10px;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.btn { min-height: 52px; padding: 0 24px; font-size: 16px; background: var(--accent-d); color: var(--white); }
.btn:hover { background: color-mix(in srgb, var(--accent-d) 86%, black); transform: translateY(-1px); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent-d) 60%, transparent); }
.btn-line { background: var(--bg); color: var(--fg); border-color: var(--frame-line); }
.btn-line:hover { background: var(--bg); border-color: var(--fg); box-shadow: none; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; background: var(--fg); color: var(--bg); }
.btn-sm:hover { background: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.btn-lg { min-height: 56px; font-size: 17px; }
.btn-wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: wait; transform: none; }

/* 글자 — 작은 머리말(빨강) → 굵은 제목 → 회색 설명 */
/* 머리말은 검정 글자 + 빨간 점 하나 — 빨간 글자(--accent-d)는 입력 오류 색(--err)과 같아 경고처럼 읽혀 바꿨다(사장님 2026-10-26 「어우러지지 않는 듯」 → A안) */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--fg); }
.eyebrow::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3; font-weight: 800; letter-spacing: -.04em; text-wrap: balance; }   /* 마지막 줄에 한 낱말만 남지 않게 */
.h2 .soft { color: var(--muted); }
.h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.45; font-weight: 700; }
.lead { margin: 20px 0 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.8; color: var(--fg-2); text-wrap: pretty; }   /* 설명은 진한 회색 · 마지막 줄에 한 낱말만 남지 않게 */
.note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.no { font-size: 13px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/* ① 첫 화면 — 슬로건(「판」 만 기운 빨간 판) · 단추 둘 · 실제 화면(관리자 ↔ 홈페이지) */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1.hero-slogan { font-size: clamp(44px, 6.6vw, 88px); line-height: 1.1; font-weight: 800; letter-spacing: -.05em; word-break: keep-all; }
.hero-slogan > span { display: block; }
.hero-slogan .pan { display: inline-block; margin: 0 .04em; padding: 0 .1em; border-radius: .18em; color: var(--white); background: var(--accent);
  transform: rotate(-4deg); animation: pop .6s .7s cubic-bezier(.3, 1.6, .5, 1) both; }   /* 판플 심볼처럼 기운 빨간 판 — 사장님이 남기기로 한 장식(2026-10-26) */
.hero-sub { margin: 24px 0 0; max-width: 520px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.75; color: var(--fg-2); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
@media (min-width: 901px) { .hero-slogan > span { white-space: nowrap; } }   /* 「모임의 판을」 이 두 줄로 깨지지 않게 */
@media (max-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .hero-cta .btn { flex: 1 1 100%; } }

/* 미리보기 — 위 단추에 커서를 대면 그 화면, 떼면 고른 화면(js/hero-switch.js). 커서 없는 기기는 저절로 번갈아 */
.hv-tabs { display: inline-flex; gap: 4px; margin-bottom: 16px; padding: 4px; border-radius: 12px; background: var(--gray); }
.hv-tab { min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s; }
.hv-tab:hover { color: var(--fg); }
.hv-tab[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 3px rgba(17, 20, 24, .14); }
.hv-stage { position: relative; padding: 0 9% 9% 0; }
.hv-screens { display: grid; }
.hv-shot { grid-area: 1 / 1; display: block; width: 100%; height: auto; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.hv-phone { position: absolute; right: 0; bottom: 0; width: 25%; display: grid; overflow: hidden; border-radius: 20px; border: 6px solid var(--device); background: var(--device);
  box-shadow: 0 24px 48px -12px rgba(17, 20, 24, .4); transition: transform .5s var(--ease); }
.hv-pshot { grid-area: 1 / 1; display: block; width: 100%; height: auto; transition: opacity .5s var(--ease), transform .5s var(--ease); }   /* 휴대폰도 관리자 ↔ 홈페이지 같이 바뀐다 */
.hero-visual[data-view="admin"] .is-site, .hero-visual[data-view="site"] .is-admin { opacity: 0; transform: scale(.98); }
.hero-visual[data-view="site"] .hv-phone { transform: translateY(-12px); }
.hv-label { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.hv-label b { color: var(--fg); }
@media (max-width: 520px) { .hv-label b { display: block; } }

/* 그림 속 브라우저 틀 — 첫 화면 · 운영 사례 · 구조 그림이 같이 쓴다 */
.case-browser, .eco-frame { overflow: hidden; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); }
.case-browser .dots, .case-browser .mock-bar, .eco-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bar); border-bottom: 1px solid var(--rule); }
.case-browser .dots i, .case-browser .mock-bar i, .eco-bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 16%, var(--card)); }
.hv-url, .case-browser .mock-bar span, .eco-bar b { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-browser img { display: block; width: 100%; height: auto; }
.case .case-browser > img { aspect-ratio: 1360 / 820; object-fit: cover; object-position: left top; }   /* 사례 두 그림의 높이를 맞춘다 */

/* 섹션 공통 — 흰 바탕과 옅은 바탕(.tint)을 번갈아 */
.sec { padding: clamp(88px, 11vw, 144px) 0; scroll-margin-top: var(--head-h); }
.sec.tint { background: var(--gray); }
.sec-head { max-width: 760px; }
#about { padding-top: clamp(56px, 7vw, 96px); }   /* 첫 화면과 같은 흰 바탕 — 위 여백을 줄여 다음 내용이 보이게 */

/* ② 소개 — 약속 네 가지 */
.promise { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.promise li { display: grid; gap: 8px; align-content: start; padding-top: 24px; border-top: 1px solid var(--fg); }
.promise b { font-size: 22px; font-weight: 700; color: var(--fg); }
.promise p { margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 860px) { .promise { grid-template-columns: 1fr 1fr; row-gap: 40px; } }

/* ③ 구조 그림 */
.eco { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: 120px 1fr minmax(0, 2.6fr) 1fr 120px; align-items: center; gap: 12px;
  padding: clamp(20px, 3vw, 40px); background: var(--card); border: 1px solid var(--rule); border-radius: 20px; }
.eco-end { display: grid; gap: 4px; place-items: center; text-align: center; padding: 22px 10px; background: var(--gray); border-radius: var(--r); }
.eco-end b { color: var(--fg); font-size: 15px; }
.eco-end span { font-size: 13px; color: var(--muted); }
.eco-arrow { position: relative; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent-ink); padding-bottom: 14px; }
.eco-arrow::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; background: var(--accent); transform-origin: left center; transition: transform .9s var(--ease) .35s; }
.eco-arrow::before { content: ''; position: absolute; right: 2px; bottom: -4px; border: 5px solid transparent; border-left: 8px solid var(--accent); transition: opacity .2s 1.1s; }
.reveal-on .eco:not(.in) .eco-arrow::after { transform: scaleX(0); }   /* 스크롤로 그림이 나타나면 화살표가 그어진다 */
.reveal-on .eco:not(.in) .eco-arrow::before { opacity: 0; }
.eco-core { position: relative; border: 2px solid var(--accent); border-radius: 16px; background: var(--card); padding: 18px; }
.eco-title { margin: 0 0 12px; text-align: center; font-weight: 800; font-size: 20px; color: var(--fg); }
.eco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eco-item { display: grid; gap: 2px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 10px; background: var(--accent-wash);
  cursor: pointer; transition: box-shadow .2s, border-color .2s; outline: none; }
.eco-item > b { color: var(--accent-ink); font-size: 15px; }
.eco-item > span { font-size: 13px; color: var(--muted); }
/* ⚠ 칸 자체에 transform 을 걸면 그 칸이 띄운 그림의 기준이 돼 그림이 칸 크기로 작아진다 — 커지는 것은 그림(.eco-pop)이 맡는다 */
.eco-item:hover, .eco-item:focus-visible, .eco-item.open { border-style: solid; border-color: var(--accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent); }
/* 커서를 대면 판플 칸 옆에 실제 화면 + 설명(사장님 2026-10-20 · 10-21). 칸 안에 있어 커서가 옮겨 가도 닫히지 않는다 */
.eco-pop { position: absolute; z-index: 5; top: 50%; width: min(440px, calc((100vw - 100%) / 2 - 28px)); padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(17, 20, 24, .22); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.eco-item:nth-child(odd) .eco-pop { left: calc(100% + 14px); transform: translateY(-50%) translateX(-12px) scale(.92); transform-origin: 0 50%; }
.eco-item:nth-child(even) .eco-pop { right: calc(100% + 14px); transform: translateY(-50%) translateX(12px) scale(.92); transform-origin: 100% 50%; }
.eco-frame { border-radius: 10px; box-shadow: none; }
.eco-bar { padding: 6px 10px; }
.eco-bar i { width: 7px; height: 7px; }
.eco-bar b { font-size: 11px; }
.eco-pop img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.eco-pop-cap { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.eco-pop p:last-child { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.eco-pop p:last-child b { display: block; margin-bottom: 2px; color: var(--fg); font-size: 15px; }
.eco-hint { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.eco-hint-touch { display: none; }
@media (hover: hover) {
  .eco-item:hover .eco-pop, .eco-item:focus-visible .eco-pop { opacity: 1; visibility: visible; transform: translateY(-50%); }
}
@media (hover: none) { .eco-hint-mouse { display: none; } .eco-hint-touch { display: inline; } }
/* 커서 없는 기기 · 좁은 화면: 누르면 칸 아래로 펼친다(겹쳐 띄우지 않는다) */
.eco-item.open .eco-pop { position: static; width: auto; opacity: 1; visibility: visible; transform: none; margin-top: 10px; padding: 10px; box-shadow: none; }
.eco-item.open { grid-column: 1 / -1; }   /* 펼친 칸은 한 줄을 다 쓴다(좁은 화면에서 글이 세로로 길어지지 않게) */
@media (max-width: 860px) {
  .eco { grid-template-columns: 1fr; }
  .eco-arrow { padding: 0 0 18px; }
  .eco-arrow::after { left: 50%; right: auto; top: 22px; bottom: 0; width: 2px; height: auto; transform-origin: center top; }
  .eco-arrow::before { right: auto; left: calc(50% - 4px); bottom: -6px; border: 5px solid transparent; border-top: 8px solid var(--accent); }
  .reveal-on .eco:not(.in) .eco-arrow::after { transform: scaleY(0); }
}
.money { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.money li { padding: 18px 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); font-size: 15px; color: var(--muted); }
.money b { display: block; margin-bottom: 4px; color: var(--fg); }
@media (max-width: 760px) { .money { grid-template-columns: 1fr; } }

/* ④ 서비스 · ⑥ 영업 파트너 — 제목 + 설명을 구분선 줄로. 번호는 진짜 순서(파트너 단계)에만 붙인다(I-039) */
.svc-list, .partner-steps { list-style: none; margin: 0; padding: 0; }
.svc-list { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
.svc-list li { display: grid; align-content: start; padding: 28px 0; border-top: 1px solid var(--rule); }
.partner-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; padding: 28px 0; border-top: 1px solid var(--rule); }
.partner-steps .no { grid-row: span 2; padding-top: 5px; }
.partner-steps p { grid-column: 2; }
.svc-list b, .partner-steps b { font-size: 20px; font-weight: 700; color: var(--fg); }
.svc-list p, .partner-steps p { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: var(--muted); }
.partner-steps li:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 760px) { .svc-list { grid-template-columns: minmax(0, 1fr); } }

/* 운영 사례(모토모토리조트) — 홈페이지 공개 화면 + 관리자 예시 화면 */
.case { margin-top: clamp(72px, 9vw, 112px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 48px); align-items: start;
  scroll-margin-top: calc(var(--head-h) + 24px); }
.case-copy { grid-column: 1 / -1; max-width: 760px; }
.case-lead { margin: 16px 0 0; font-size: 16px; line-height: 1.8; color: var(--fg-2); text-wrap: pretty; }
.case figure { margin: 0; display: grid; gap: 20px; min-width: 0; }
.case-stage { position: relative; padding: 0 12% 7% 0; }
.case-phone { position: absolute; right: 0; bottom: 0; width: 22%; height: auto; border-radius: 16px; border: 5px solid var(--device); background: var(--device); box-shadow: 0 20px 40px -12px rgba(17, 20, 24, .4); }
.case figcaption { font-size: 15px; line-height: 1.75; color: var(--muted); }
.case figcaption b { display: block; margin-bottom: 2px; color: var(--fg); font-size: 17px; }
.case figcaption a { color: var(--accent-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.case figcaption a:hover { text-decoration: underline; }
.case figcaption small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .case { grid-template-columns: minmax(0, 1fr); } }

/* ⑤ 입점 안내 — 패키지 세 칸(추천 하나만 테두리) · 진행 순서(선이 그어진다) · 역할 표(접힘) */
.pkg { list-style: none; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pkg li { position: relative; display: grid; gap: 8px; align-content: start; padding: 28px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); }
.pkg b { font-size: 20px; color: var(--fg); }
.pkg p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.pkg .pkg-hot { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pkg-tag { justify-self: start; padding: 3px 10px; border-radius: 99px; background: var(--accent-wash); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
@media (max-width: 860px) { .pkg { grid-template-columns: minmax(0, 1fr); } }
.steps-h { margin-top: clamp(72px, 8vw, 104px); }
.steps { position: relative; list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.steps::before, .steps::after { content: ''; position: absolute; left: 16px; right: calc((100% - 96px) / 5 - 16px); top: 15px; height: 2px; background: var(--rule); }   /* 첫 원 가운데 → 마지막 원 가운데(칸 5 · 사이 24) */
.steps::after { background: var(--accent); transform-origin: left center; transition: transform 1.4s var(--ease) .2s; }
.reveal-on .steps:not(.in)::after { transform: scaleX(0); }
.steps li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 52px; }
.steps .no { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gray); border: 2px solid var(--accent); }
.steps b { font-size: 18px; color: var(--fg); }
.steps p { margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps::before, .steps::after { left: 15px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; transform-origin: center top; }
  .reveal-on .steps:not(.in)::after { transform: scaleY(0); }
  .steps li { padding: 4px 0 28px 52px; }
}
.roles { margin-top: 48px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); }
.split { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.split th, .split td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rule); }
.split tbody tr:last-child > * { border-bottom: 0; }
.split thead th { background: var(--bar); color: var(--muted); font-size: 13px; font-weight: 700; }
.split thead th.us { background: var(--accent-wash); color: var(--accent-ink); }
.split tbody th { color: var(--fg); font-weight: 700; }
.split td.us { color: var(--fg); font-weight: 600; }
.roles .note { margin-bottom: 24px; }

/* ⑥ 영업 파트너 */
.partner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.partner .btn { margin-top: 32px; }
@media (max-width: 860px) { .partner { grid-template-columns: minmax(0, 1fr); } }

/* ⑦ FAQ · 역할 표 — 접기(꺾쇠가 돈다) */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--fg); }
.faq summary, .roles summary { position: relative; list-style: none; cursor: pointer; padding: 22px 40px 22px 0; color: var(--fg); font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker, .roles summary::-webkit-details-marker { display: none; }
.faq summary::after, .roles summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-75%) rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] > summary::after, .roles[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { margin: -6px 0 24px; font-size: 16px; line-height: 1.8; color: var(--muted); }
.faq details[open] > p, .roles[open] > :not(summary) { animation: open .35s var(--ease); }

/* ⑧ 문의 */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact-list { list-style: none; margin: 32px 0 0; padding: 0; }
.contact-list li { display: grid; gap: 2px; padding: 16px 0; border-top: 1px solid var(--rule); }
.contact-list li:last-child { border-bottom: 1px solid var(--rule); }
.contact-list b { color: var(--fg); }
.contact-list span { font-size: 15px; color: var(--muted); }
.form { display: grid; gap: 20px; padding: clamp(24px, 3vw, 40px); background: var(--card); border: 1px solid var(--rule); border-radius: 20px; box-shadow: 0 32px 64px -32px rgba(17, 20, 24, .2); }
.kind { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--fg); }
.kind label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600; text-align: center;
  transition: border-color .15s, background .15s; }
.kind label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }
.kind input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent-d); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.f { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fg); }
.f-wide { grid-column: 1 / -1; }
.f[hidden] { display: none; }
input, textarea {
  width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--fg); background: var(--card);
  border: 1px solid var(--frame-line); border-radius: 10px; padding: 12px 14px; min-height: 48px; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
textarea { resize: vertical; }
.privacy { font-size: 14px; color: var(--muted); }
.privacy summary { cursor: pointer; }
.privacy p { margin: 8px 0 0; line-height: 1.8; }
.agree { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--fg); }
.agree input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent-d); }
.form-status { margin: 0; min-height: 1.4em; font-size: 14px; font-weight: 600; }
/* 칸 바로 아래 오류(js/field-error.js) */
.f-err { font-size: 14px; font-weight: 600; color: var(--err-ink); }
.agree + .f-err { display: block; margin-top: -8px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--err-ink); }
.form-status[data-kind="err"] { color: var(--err-ink); }
.form-status[data-kind="ok"] { color: var(--ok-ink); }

/* 바닥 — 밝게 */
.foot { background: var(--gray); color: var(--muted); padding: 56px 0 40px; font-size: 14px; border-top: 1px solid var(--rule); }
.foot p { margin: 0; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.foot-name { display: flex; align-items: center; }
.foot-tag { margin-top: 8px !important; color: var(--accent-ink); font-weight: 700; }
.foot-biz { margin-top: 16px !important; line-height: 1.9; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; font-weight: 600; }
.foot-nav a { text-decoration: none; color: var(--fg-2); }
.foot-nav a:hover { color: var(--fg); }
.foot-copy { margin-top: 28px !important; padding-top: 20px; border-top: 1px solid var(--rule); }

/* 움직임 — 첫 화면은 들어올 때, 나머지는 스크롤해 보일 때(js/reveal.js 가 html.reveal-on 을 켠다 · 스크립트가 없으면 처음부터 다 보인다) */
.rise { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .36s; } .d4 { animation-delay: .5s; }
.reveal-on [data-reveal], .reveal-on [data-reveal-list] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal-on [data-reveal].in, .reveal-on [data-reveal-list].in > * { opacity: 1; transform: none; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: rotate(0) scale(.6); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .hero-slogan .pan { opacity: 1; animation: none; }
  .rise { transform: none; }
  .reveal-on [data-reveal], .reveal-on [data-reveal-list] > * { opacity: 1; transform: none; transition: none; }
  .eco-pop, .eco-item, .hv-shot, .hv-phone, .hv-pshot, .btn, .steps::after, .eco-arrow::after, .eco-arrow::before { transition: none; }
  .faq details[open] > p, .roles[open] > :not(summary) { animation: none; }
}