/* 예얍 홈페이지(yeyap.co.kr)의 옷 — web/index.html(첫 화면)과 web/pricing.html(요금·결제 안내)이 함께 쓴다.
   WHY(2026-10-03): 요금 페이지가 따로 생기면서, index.html 안에 있던 <style>을 글자 그대로 이 파일로 옮겼다(진본 하나 — 두 화면이 같은 색·상단 바·버튼·바닥글).
   이 파일은 우리 서버에서 준다(외부 서버 요청 0건 — privacy.html 2번 다.·6번의 전제). 사장님 화면(style.css)·약관 문서(legal.css)는 이 파일을 쓰지 않는다. */
/* =====================================================================
   예얍 YEY~AP! 홈페이지 — 2026-10-02 다시 디자인
   WHY(사용자): "공비서 원장님 홈페이지처럼 깔끔하게, 회원가입은 오른쪽 위, 한눈에 보기 쉽게". 기준은 그 사이트 실측값
     (2026-10-02): Pretendard, PC 제목 54·40px, 부제 18px, 카드 본문 16px/500, 카드 둥글기 16~24px, 구역 간격 위아래 80px 안팎,
     가운데 제목 + 카드 묶음, 알약 버튼, 상단 바 60px. 폰 글자는 사장님이 읽기 편하게 그 사이트(13~14px)보다 크게(16px) 잡았다.
   색은 전부 아래 토큰에서만 정한다: 밝은 값(:root) → 어두운 값(OS 설정) → 어두운 값(data-theme="dark").
   YEY~AP! 브랜드 색(2026-10-01 사용자): 흰색·아이보리 #FFF9E8 바탕, 글자 차콜 #2E2A22·브라운 #6F675A, 선 #E9DFC8,
     노랑 #FFD51F(accent)·진한 노랑 #F4B800(누름)·연한 노랑 #FFF3A8(칩·안내 상자).
   바탕 배치: 페이지는 흰색(--bg), 구역 띠와 카드는 아이보리(--soft). 아이보리 띠(.sec--soft) 안의 카드는 흰색(--surface).
   ★ 노랑(accent)은 **면(바탕)으로만** 쓴다 — 밝은 화면에서 글자색으로 쓰면 안 보인다(accent/흰색 1.4).
     쓰는 곳: 주 버튼, [회원가입], 로고 알약, 첫 제목 '예얍이 받아요'의 형광펜 띠, 아이콘 바탕, 단계 번호, 요금 체크, 마지막 권유 패널.
     어두운 화면에서만 노랑 글자(--hl-ink) 허용.
   대비(WCAG 계산): ink/흰색 14.3 · ink/아이보리 13.6 · muted/흰색 5.6 · muted/아이보리 5.3 · 버튼 글자(on-accent/accent) 10.1 ·
     대화 목업의 옅은 글자(chat-meta) 대화 바탕 위 5.5·날짜 알약 위 4.8
   ===================================================================== */
:root{
  --bg:#FFFFFF; --soft:#FFF9E8; --surface:#FFFFFF; --card:var(--soft); --ink:#2E2A22; --muted:#6F675A;
  --accent:#FFD51F; --accent-press:#F4B800; --accent-soft:#FFF3A8; --on-accent:#2E2A22;
  --line:#E9DFC8; --line-strong:rgba(46,42,34,.24); --card-line:#F1E8CF; --hover:rgba(46,42,34,.05); --focus:#2E2A22;
  --hl-ink:#2E2A22; --hl-band:#FFD51F; --mark-ink:#2E2A22; --glow:rgba(255,243,168,.62);
  --time-bg:#2E2A22; --time-ink:#FFFFFF;
  --btn-ring:rgba(244,184,0,.65); --btn-shadow:0 12px 22px -14px rgba(214,160,0,.95);
  --shadow-phone:0 24px 48px -24px rgba(46,42,34,.30); --shadow-soft:0 18px 40px -28px rgba(46,42,34,.28);
  --foot-bg:#2E2A22; --foot-ink:#FFFFFF; --foot-muted:#D2C9B8; --foot-line:rgba(255,255,255,.16);
  /* 마지막 권유 패널: 밝은 화면은 노랑 면 + 차콜 버튼, 어두운 화면은 어두운 면 + 노랑 버튼(넓은 노랑은 어두운 화면에서 번쩍인다) */
  --cta-bg:#FFD51F; --cta-ink:#2E2A22; --cta-btn-bg:#2E2A22; --cta-btn-hover:#1D1A15; --cta-btn-ink:#FFFFFF;
  /* 대화 목업 전용. 바탕·알약만 브랜드 아이보리에 어울리게 따뜻한 톤으로 맞췄다(말풍선 노랑은 카톡을 본뜬 값 그대로) */
  --frame:#2E2A22; --frame-line:transparent;
  --chat-bg:#F2EBDB; --chat-ink:#2E2A22; --chat-meta:#645D51; --chat-pill:#E7DDC6; --chat-line:#E0D5BD;
  --bubble-me:#FFE14A; --on-bubble-me:#191919; --bubble-bot:#FFFFFF; --bubble-bot-line:transparent;
  --qr-bg:#FFFFFF; --qr-line:#DCD0B6; --avatar-bg:#FFF3A8; --avatar-ink:#2E2A22;
  --ig-bg:#FFFFFF; --ig-ink:#111111; --ig-meta:#6B6B6B; --ig-me:#3F4DD8; --ig-them:#EFEFEF; --ig-line:#DBDBDB;
  /* 사장님 화면 목업 = 실제 web/style.css 색. 실제 화면에 어두운 모드가 없어서 두 모드 모두 같은 값 */
  --app-bg:#EEF1F4; --app-card:#FFFFFF; --app-line:#DFE3E8; --app-line-2:#E9EDF1;
  --app-text:#1F2328; --app-text-2:#434A54; --app-muted:#5A626C; --app-muted-2:#666D76;
  --app-ink:#20232C; --app-on-dark:#FFFFFF; --app-accent:#3557A8;
  --app-soft:#E8EEFB; --app-soft-ink:#2F55B0; --app-bad-ink:#94301C;
  --app-wait-bg:#FDF2D9; --app-wait-ink:#78560A; --app-gray-soft:#EEF0F3; --app-gray-ink:#414952;
  --gutter:20px;
  /* 내려받기 전·실패 때는 기기 글꼴로 보인다(차례는 Pretendard 공식 안내 그대로) */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17140E; --soft:#211D15; --surface:#2A251B; --ink:#F7F1E3; --muted:#BFB4A0;
    --accent:#FFD51F; --accent-press:#F4B800; --accent-soft:#3A3115; --on-accent:#2E2A22;
    --line:#3A3326; --line-strong:rgba(247,241,227,.26); --card-line:#3A3326; --hover:rgba(247,241,227,.06); --focus:#FFD51F;
    --hl-ink:#FFD51F; --hl-band:transparent; --mark-ink:#2E2A22; --glow:rgba(255,213,31,.07);
    --time-bg:#F7F1E3; --time-ink:#17140E;
    --btn-ring:transparent; --btn-shadow:none;
    --shadow-phone:none; --shadow-soft:none;
    --foot-bg:#0F0D09; --foot-ink:#F7F1E3; --foot-muted:#BFB4A0; --foot-line:rgba(247,241,227,.14);
    --cta-bg:#3A3115; --cta-ink:#F7F1E3; --cta-btn-bg:#FFD51F; --cta-btn-hover:#F4B800; --cta-btn-ink:#2E2A22;
    --frame:#0B0908; --frame-line:rgba(244,238,232,.32);
    --chat-bg:#262019; --chat-ink:#F4EEE8; --chat-meta:#B3A89F; --chat-pill:#332B25; --chat-line:#3A312B;
    --bubble-me:#FFE14A; --on-bubble-me:#191919; --bubble-bot:#2E2723; --bubble-bot-line:rgba(244,238,232,.12);
    --qr-bg:#2E2723; --qr-line:#4A403A; --avatar-bg:#3A3115; --avatar-ink:#F7F1E3;
    --ig-bg:#000000; --ig-ink:#F5F5F5; --ig-meta:#A8A8A8; --ig-me:#3F4DD8; --ig-them:#262626; --ig-line:#262626;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#17140E; --soft:#211D15; --surface:#2A251B; --ink:#F7F1E3; --muted:#BFB4A0;
  --accent:#FFD51F; --accent-press:#F4B800; --accent-soft:#3A3115; --on-accent:#2E2A22;
  --line:#3A3326; --line-strong:rgba(247,241,227,.26); --card-line:#3A3326; --hover:rgba(247,241,227,.06); --focus:#FFD51F;
  --hl-ink:#FFD51F; --hl-band:transparent; --mark-ink:#2E2A22; --glow:rgba(255,213,31,.07);
  --time-bg:#F7F1E3; --time-ink:#17140E;
  --btn-ring:transparent; --btn-shadow:none;
  --shadow-phone:none; --shadow-soft:none;
  --foot-bg:#0F0D09; --foot-ink:#F7F1E3; --foot-muted:#BFB4A0; --foot-line:rgba(247,241,227,.14);
  --cta-bg:#3A3115; --cta-ink:#F7F1E3; --cta-btn-bg:#FFD51F; --cta-btn-hover:#F4B800; --cta-btn-ink:#2E2A22;
  --frame:#0B0908; --frame-line:rgba(244,238,232,.32);
  --chat-bg:#262019; --chat-ink:#F4EEE8; --chat-meta:#B3A89F; --chat-pill:#332B25; --chat-line:#3A312B;
  --bubble-me:#FFE14A; --on-bubble-me:#191919; --bubble-bot:#2E2723; --bubble-bot-line:rgba(244,238,232,.12);
  --qr-bg:#2E2723; --qr-line:#4A403A; --avatar-bg:#3A3115; --avatar-ink:#F7F1E3;
  --ig-bg:#000000; --ig-ink:#F5F5F5; --ig-meta:#A8A8A8; --ig-me:#3F4DD8; --ig-them:#262626; --ig-line:#262626;
  color-scheme:dark;
}
@media (min-width:768px){ :root{ --gutter:32px; } }

/* ---------- 바탕 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; padding-top:env(safe-area-inset-top,0px);
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; font-weight:400; line-height:1.6; letter-spacing:normal;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:700; color:var(--ink); text-wrap:balance; }
p,ul,ol,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
p,li{ text-wrap:pretty; }
a{ color:inherit; }
b{ font-weight:700; }
svg{ display:block; }
[hidden]{ display:none !important; }
::selection{ background:var(--accent-soft); color:var(--ink); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
/* 메뉴로 이동하거나 키보드 초점이 옮겨 갈 때 고정 상단 바(60px)와 폰의 떠 있는 신청 버튼 밑에 가려지지 않게 */
html{ scroll-padding-top:calc(76px + env(safe-area-inset-top,0px)); }
@media (max-width:767px){ html{ scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{ width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
/* 가운뎃점으로 이은 짧은 낱말 묶음이 줄 끝에서 갈라지지 않게 */
.nw{ white-space:nowrap; }
.skip{
  position:absolute; left:12px; top:-120px; z-index:100;
  display:inline-flex; align-items:center; min-height:48px; padding:0 16px; border-radius:12px;
  background:var(--ink); color:var(--bg); font-size:15px; font-weight:700; text-decoration:none;
}
.skip:focus{ top:calc(8px + env(safe-area-inset-top,0px)); }

/* 좌우 여백은 이 한 곳에서만 정한다. 본문 폭 1140px = 기준 사이트 실측 */
.wrap{
  width:100%; max-width:calc(1140px + 2 * var(--gutter)); margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right,0px));
}

/* ---------- 구역·제목 공통 ----------
   제목 묶음은 가운데(작은 이름표 → 큰 제목 → 한 줄 설명), 그 아래 카드 묶음. 구역마다 흰색과 아이보리 띠를 번갈아 둔다. */
.sec{ padding-block:56px; }
.sec--soft{ background:var(--soft); --card:var(--surface); }
@media (min-width:768px){ .sec{ padding-block:80px; } }
@media (min-width:1024px){ .sec{ padding-block:88px; } }
.sec-head{ max-width:780px; margin:0 auto 32px; text-align:center; }
@media (min-width:1024px){ .sec-head{ margin-bottom:48px; } }
h2{ font-size:24px; line-height:1.4; }
h3{ font-size:18px; line-height:1.45; }
@media (min-width:768px){ h2{ font-size:32px; line-height:1.45; } }
@media (min-width:1024px){ h2{ font-size:40px; line-height:1.5; } h3{ font-size:20px; } }
.sub{ margin-top:12px; font-size:16px; line-height:1.6; color:var(--muted); }
@media (min-width:1024px){ .sub{ font-size:18px; } }
.footnote{ max-width:780px; font-size:14px; line-height:1.6; color:var(--muted); }
.mk{ position:relative; top:-.42em; margin-left:1px; font-size:max(13px, .72em); font-weight:700; line-height:0; color:inherit; }
/* ※ 앞에 보이지 않는 낱말 잇기(U+2060)를 넣어 ※가 앞 낱말과 떨어져 줄 첫머리로 가지 않게 한다 */
.mk::before{ content:"\2060"; }
.fig-cap{ font-size:14px; line-height:1.5; color:var(--muted); }

/* ---------- 칩·버튼 ---------- */
.chip{
  display:inline-flex; align-items:center; min-height:32px; padding:4px 14px; border-radius:999px;
  background:var(--accent-soft); color:var(--ink); font-size:14px; font-weight:700; line-height:1.4;
}
.sec-head .chip{ margin-bottom:14px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-list li{
  display:inline-flex; align-items:center; min-height:34px; padding:4px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:600; line-height:1.4;
}
/* 시각 칩: 밝은 화면은 검은 알약, 어두운 화면은 뒤집힌 알약 */
.t-chip{
  display:inline-flex; align-items:center; min-height:28px; padding:2px 10px; border-radius:999px;
  background:var(--time-bg); color:var(--time-ink);
  font-size:14px; font-weight:700; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.when{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.ctx{ font-size:14px; font-weight:500; line-height:1.5; color:var(--muted); }
/* 버튼은 알약 모양(기준 사이트 실측: 높이 56px, 둥글기 끝까지). 흰 바탕에서 노랑이 묻히지 않게 안쪽 테두리 한 줄과 옅은 그림자를 둔다 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:56px; padding:10px 28px; border:0; border-radius:999px;
  font:inherit; font-size:17px; font-weight:700; line-height:1.3;
  text-align:center; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:inset 0 0 0 1.5px var(--btn-ring), var(--btn-shadow); }
.btn-primary:hover,.btn-primary:active{ background:var(--accent-press); }
.btn-secondary{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-strong); }
.btn-secondary:hover{ background:var(--hover); }
/* 마지막 권유 패널 안 버튼(밝은 화면 차콜, 어두운 화면 노랑) */
.btn-cta{ background:var(--cta-btn-bg); color:var(--cta-btn-ink); }
.btn-cta:hover,.btn-cta:active{ background:var(--cta-btn-hover); }
.btn-block{ width:100%; }
.btn .ic{ width:20px; height:20px; }

/* ---------- 0. 상단 바: 왼쪽 로고 · PC 메뉴 · 오른쪽 [로그인] [회원가입] ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:var(--bg); border-bottom:1px solid transparent;
  box-shadow:0 calc(-1 * env(safe-area-inset-top,0px)) 0 0 var(--bg);
  transition:border-color .2s ease;
}
.topbar.is-scrolled{ border-bottom-color:var(--line); }
.topbar-in{ display:flex; align-items:center; gap:8px; min-height:60px; }
.logo{ display:inline-flex; align-items:center; min-height:48px; flex:none; text-decoration:none; }
/* 확정 로고(크림빛 흰색 입체 워드마크)는 원본 그대로 쓰고, 밝은 바탕에서 묻히지 않게 노란 알약 위에 얹는다. 높이만 정해 비율을 지킨다 */
.logo-pill{ display:inline-flex; align-items:center; padding:5px 13px; border-radius:999px; background:var(--accent); box-shadow:0 4px 12px -6px rgba(46,42,34,.35); }
.logo-img{ display:block; height:24px; width:auto; }
@media (min-width:1024px){ .logo-pill{ padding:5px 14px; } .logo-img{ height:28px; } }
.topnav{ display:none; }
@media (min-width:1024px){
  .topnav{ display:flex; align-items:center; gap:4px; margin-left:28px; }
  .topnav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:10px; font-size:16px; font-weight:500; text-decoration:none; color:var(--muted); }
  .topnav a:hover{ color:var(--ink); background:var(--hover); }
  /* 지금 보고 있는 페이지(요금 페이지의 '요금')는 진한 글자로 */
  .topnav a[aria-current="page"]{ color:var(--ink); font-weight:700; }
}
.top-actions{ margin-left:auto; display:flex; align-items:center; gap:4px; flex:none; }
@media (min-width:1024px){ .top-actions{ gap:10px; } }
.top-login{
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px; border-radius:10px;
  font-size:15px; font-weight:600; line-height:1.2; color:var(--ink); white-space:nowrap; text-decoration:none;
}
.top-login:hover{ background:var(--hover); }
/* 보이는 높이 40px, 누르는 칸 48px(::after로 위아래 4px씩 넓힌다) */
.top-join{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 18px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); box-shadow:inset 0 0 0 1.5px var(--btn-ring);
  font-size:15px; font-weight:700; line-height:1.2; white-space:nowrap; text-decoration:none;
}
.top-join::after{ content:""; position:absolute; inset:-4px 0; }
.top-join:hover,.top-join:active{ background:var(--accent-press); }
@media (min-width:1024px){ .top-login{ font-size:16px; font-weight:500; } }
/* 320px 폰: 글꼴이 바뀌기 전(글자 폭이 넓은 기기 글꼴)에도 한 줄에 들어가게 여백을 조금 줄인다 */
@media (max-width:359px){ .logo-pill{ padding:5px 10px; } .top-login{ padding:0 8px; } .top-join{ padding:0 14px; } }

/* ---------- 1. 히어로: 가운데 제목·버튼 + 대화 카드 2장 ---------- */
.hero{ padding-block:28px 24px; background:radial-gradient(76% 44% at 50% 26%, var(--glow), transparent 74%), var(--bg); }
@media (min-width:1024px){ .hero{ padding-block:72px 40px; } }
.hero-copy{ max-width:860px; margin-inline:auto; text-align:center; }
.hero h1{ margin-top:16px; font-size:clamp(28px, 7.8vw, 32px); line-height:1.36; }
@media (min-width:600px){ .hero h1{ font-size:44px; line-height:1.4; } }
@media (min-width:1024px){ .hero h1{ margin-top:20px; font-size:54px; } }
/* 제목의 뜻 덩어리: 줄은 덩어리 사이에서만 바뀐다 */
.ph{ display:inline-block; }
/* '예얍이 받아요'는 늘 제 줄에, 글자 길이만큼만 형광펜 띠 */
.hero h1 .hl{ display:table; margin-inline:auto; }
/* 폰은 세 줄: 카톡 1차 상담부터 / 예약금까지 / 예얍이 받아요 */
@media (max-width:599px){ .hero h1 .ph{ display:block; } .hero h1 .hl{ display:table; } }
.hl{ padding-inline:.06em; color:var(--hl-ink); background:linear-gradient(transparent 58%, var(--hl-band) 58%, var(--hl-band) 92%, transparent 92%); }
.lead{ max-width:640px; margin:16px auto 0; font-size:16px; line-height:1.65; color:var(--muted); }
@media (min-width:1024px){ .lead{ margin-top:20px; font-size:18px; } }
.cta-row{ margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.cta-row .btn-primary{ width:100%; max-width:340px; }
@media (min-width:600px){
  .cta-row{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px; }
  .cta-row .btn-primary{ width:auto; min-width:220px; }
}
/* 폰: 둘째 버튼은 밑줄 글자로(주 버튼 하나만 눈에 띄게) */
@media (max-width:599px){
  .cta-row .btn-secondary{
    min-height:48px; padding:0 6px; background:transparent; box-shadow:none; font-size:16px;
    text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px;
  }
  .cta-row .btn-secondary:hover{ background:transparent; }
}
/* 가격 줄(첫 화면·마지막 권유 공통): 가격 숫자 없이 두 가지만 */
.price-line{ margin-top:18px; font-size:17px; font-weight:700; line-height:1.45; color:var(--ink); }
.price-line .dot{ margin-inline:.35em; color:var(--muted); font-weight:500; }
@media (min-width:1024px){ .price-line{ margin-top:22px; font-size:18px; } }
/* '한 달 무료 체험' 바로 밑 안심 문구(첫 화면·시작하는 법·마지막 권유 공통) */
.trial-note{ margin-top:4px; font-size:15px; font-weight:500; line-height:1.6; color:var(--ink); }
.hero-note{ margin-top:10px; font-size:14px; line-height:1.6; color:var(--muted); }

/* 폰·태블릿에서 카드 묶음을 세로로 쌓으면 화면 두세 장 분량이라, 옆으로 밀어 보는 한 줄로 둔다(다음 카드가 살짝 보여 밀 수 있음을 알린다).
   페이지 자체는 옆으로 넘치지 않는다: 줄만 좌우 여백 밖으로 빼고 안쪽에 같은 여백을 다시 준다. 900px부터는 보통 격자. */
.swipe{
  position:relative;  /* 안에 든 화면 읽기 전용 글(.sr-only, 절대 위치)이 줄 밖으로 새어 페이지가 옆으로 밀리지 않게, 이 줄을 기준 상자로 삼는다 */
  display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
  margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
}
.swipe::-webkit-scrollbar{ display:none; }
.swipe > *{ scroll-snap-align:start; }
@media (min-width:600px){ .swipe{ grid-auto-columns:46%; } }
/* 손가락으로 밀 수 없는 기기(마우스)에서 좁은 창으로 볼 때는 얇은 가로 막대를 보여 준다. 터치 기기 화면은 그대로 */
@media (hover:hover) and (pointer:fine) and (max-width:899px){
  .swipe{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; padding-bottom:8px; }
  .swipe::-webkit-scrollbar{ display:block; height:8px; }
  .swipe::-webkit-scrollbar-thumb{ border-radius:999px; background:var(--line-strong); }
}
/* 줄이 화면 양끝까지 닿아 있어 초점 테두리는 안쪽에 그린다 */
.swipe:focus-visible{ outline-offset:-3px; }
@media (min-width:900px){
  .swipe{ grid-auto-flow:row; grid-auto-columns:auto; overflow:visible; margin-inline:0; padding-inline:0; }
  .swipe-hint{ display:none; }
}

/* 대화 카드 2장: 손님이 오는 두 곳(인스타 DM → 카카오톡)을 폰 화면으로 보여 준다(2026-10-04 — 전에는 1차 상담 · 예약금). 폰 아래쪽은 카드 밑변에 붙여 화면이 이어지는 것처럼 */
.hero-cards{ margin-top:32px; }
/* 두 장뿐이라 600px부터는 밀지 않고 반씩 나란히 */
@media (min-width:600px){ .hero-cards{ grid-auto-columns:calc(50% - 6px); } .hero-cap .swipe-hint{ display:none; } }
@media (min-width:900px){ .hero-cards{ margin-top:48px; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; } }
.hero-card{
  min-width:0; display:flex; flex-direction:column; padding:22px 18px 0; border-radius:28px;
  background:var(--surface); border:1px solid var(--line); overflow:hidden;
}
/* 그림자는 격자일 때만(미는 줄에서는 위아래가 잘린다) */
@media (min-width:900px){ .hero-card{ box-shadow:var(--shadow-soft); } }
@media (min-width:1024px){ .hero-card{ padding:40px 40px 0; } }
.hc-text{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.hc-title{ font-size:20px; font-weight:700; line-height:1.4; color:var(--ink); text-wrap:balance; }
@media (min-width:1024px){ .hc-title{ font-size:24px; } }
/* 제목 밑 한 줄: 그림만 보고 오해하지 않게(예: 입금 확인은 사장님이 한다) */
.hc-sub{ margin-top:-4px; font-size:15px; font-weight:500; line-height:1.5; color:var(--muted); }
@media (min-width:1024px){ .hc-sub{ font-size:16px; } }
.hero-card .phone{
  flex:1 1 auto; display:flex; width:min(320px, 100%); margin:22px auto 0; padding-bottom:0;
  border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:none;
}
@media (min-width:1024px){ .hero-card .phone{ width:min(340px, 100%); margin-top:28px; } }
.hero-card .screen{ flex:1 1 auto; border-bottom-left-radius:0; border-bottom-right-radius:0; padding-bottom:18px; }
.hero-cap{ margin-top:14px; text-align:center; }
/* 폰에서는 첫 문답만 보인다(버튼 예약 순서는 '예약 흐름' 구역에 있음) */
@media (max-width:599px){ .hero .chat .more{ display:none; } }
/* 가장 좁은 폰: 계좌번호가 숫자 중간에서 끊기지 않게 말풍선을 조금 넓힌다 */
@media (max-width:359px){ .hero-card .bubble{ max-width:88%; } }
/* 글자 한두 개(＋, ○) 때문에 글꼴 조각을 더 받지 않게, 그 글자만 기기 글꼴로 그린다 */
.sysf{ font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }

/* 폰 틀(어두운 화면에서는 밝은 1.5px 테두리로 윤곽을 살린다) */
.phone{
  width:min(290px, 100%); padding:10px; border-radius:44px;
  background:var(--frame); border:1.5px solid var(--frame-line); box-shadow:var(--shadow-phone);
}
@media (min-width:1024px){ .owner-fig .phone{ width:min(340px, 100%); } }
.screen{ display:flex; flex-direction:column; border-radius:34px; overflow:hidden; background:var(--chat-bg); color:var(--chat-ink); }
.statusbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:10px 20px 6px; font-size:13px; font-weight:700; line-height:1; }
.statusbar .batt{ justify-self:end; width:24px; height:12px; }
.island{ width:76px; height:22px; border-radius:999px; background:var(--frame); }
.chat-head{ display:flex; align-items:center; gap:8px; padding:6px 14px 9px; border-bottom:1px solid var(--chat-line); font-size:15px; font-weight:700; line-height:1.3; }
.chat-head .ic{ width:18px; height:18px; }
.avatar{ flex:none; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--avatar-bg); color:var(--avatar-ink); font-size:13px; font-weight:700; }
.chat{ display:flex; flex-direction:column; gap:8px; padding:10px 12px 14px; }
.chat-day{ align-self:center; padding:3px 12px; border-radius:999px; background:var(--chat-pill); color:var(--chat-meta); font-size:13px; font-weight:500; line-height:1.5; }
.bubble{ max-width:78%; padding:8px 12px; border-radius:16px; font-size:14px; line-height:1.55; overflow-wrap:anywhere; text-align:left; }
.bubble.me{ align-self:flex-end; background:var(--bubble-me); color:var(--on-bubble-me); border-top-right-radius:4px; }
.bubble.bot{ align-self:flex-start; background:var(--bubble-bot); color:var(--chat-ink); border-top-left-radius:4px; box-shadow:0 0 0 1px var(--bubble-bot-line); }
.qr{ display:flex; flex-wrap:wrap; gap:6px; margin-top:-2px; }
.qr span{
  display:inline-flex; align-items:center; min-height:34px; padding:0 10px; border-radius:999px;
  background:var(--qr-bg); border:1px solid var(--qr-line); color:var(--chat-ink);
  font-size:14px; font-weight:500; line-height:1.2; white-space:nowrap;
}
@media (min-width:1024px){ .hero .bubble,.chatbox .bubble,.consult-card .bubble{ font-size:15px; } }
/* 인스타그램 DM 그림(.screen--ig): 흰(어두운 화면은 검은) 바탕, 보낸 말은 파란 말풍선, 받은 말은 회색. 위에는 '자주 묻는 질문' 묶음, 답 안에 카톡 채널 링크(글자) */
.screen--ig{ background:var(--ig-bg); color:var(--ig-ink); }
.screen--ig .chat-head{ border-bottom-color:var(--ig-line); }
.screen--ig .ig-who{ display:flex; flex-direction:column; line-height:1.25; }
.screen--ig .ig-who small{ font-size:12px; font-weight:500; color:var(--ig-meta); }
.screen--ig .chat-day{ background:transparent; color:var(--ig-meta); padding:0; }
.screen--ig .bubble{ border-radius:18px; }
.screen--ig .bubble.me{ background:var(--ig-me); color:#FFFFFF; border-top-right-radius:18px; border-bottom-right-radius:4px; }
.screen--ig .bubble.bot{ background:var(--ig-them); color:var(--ig-ink); box-shadow:none; border-top-left-radius:18px; border-bottom-left-radius:4px; }
.ig-faq{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px; border-radius:16px; border:1px solid var(--ig-line); }
.ig-faq-t{ font-size:12px; font-weight:600; color:var(--ig-meta); }
.ig-faq span{ display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--ig-line); font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap; }
/* 답 안의 카톡 링크는 글자로만 그린다 — 인스타그램이 링크를 카드로 보여 주는지는 아직 실측 전이다(2026-10-04 적대검증) */
.ig-url{ text-decoration:underline; text-underline-offset:2px; font-weight:600; }

/* 폰 틀 없는 작은 대화 조각 */
.chatbox{ display:flex; flex-direction:column; gap:6px; width:min(440px, 100%); padding:12px 10px; border-radius:16px; background:var(--chat-bg); color:var(--chat-ink); }
.chatbox .bubble{ padding:7px 11px; }
.chat-from{ margin:0 0 -2px 2px; font-size:13px; font-weight:700; line-height:1.4; color:var(--chat-meta); text-align:left; }

/* ---------- 2. 규칙 숫자 띠(가짜 실적 대신 제품 규칙 숫자) ---------- */
.band{ padding-block:44px 8px; }
@media (min-width:1024px){ .band{ padding-block:64px 12px; } }
.rules{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 16px; text-align:center; }
@media (min-width:900px){ .rules{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; } }
.rules li{ min-width:0; }
.num{ font-size:36px; font-weight:800; line-height:1.15; color:var(--ink); }
@media (min-width:1024px){ .num{ font-size:48px; } }
.num .unit{ margin-left:2px; font-size:.5em; font-weight:700; }
.num .mk{ top:-1.05em; font-size:.4em; }
.rules .cap{ max-width:240px; margin:8px auto 0; font-size:15px; font-weight:500; line-height:1.5; color:var(--muted); }
@media (min-width:1024px){ .rules .cap{ font-size:16px; } }
.band .footnote{ margin:28px auto 0; text-align:center; }
@media (min-width:1024px){ .band .footnote{ margin-top:40px; } }

/* ---------- 3. 24시간 1차 상담: 따로 뺀 구역(상단 메뉴 '1차 상담', id=consult) ----------
   WHY(2026-10-01·10-02 사용자): 예얍의 첫 번째 강점은 '1차 상담'이다 — "내용이 너무 부족해, 따로 카테고리를 빼서 이것만 강조".
   위에서부터: 하루 그림(사장님이 답하기 어려운 시간 내내 예얍은 켜져 있다) → 그 시간에 온 문의 대화 세 장(그림의 번호와 같다)
     → 답하는 문의 종류 · 답한 다음의 길. 빠른 답장 버튼은 실제 카톡과 같은 모양·같은 세 개(예약하기·가격보기·위치안내)로 그린다. */
/* 하루 그림: 줄 = 영업일 / 쉬는 날 / 예얍. 막대 한 칸의 너비(--w)와 번호 위치(--x)는 24시간 가운데 차지하는 비율이다
   (가상의 가게: 오전 10시~오후 7시 영업 → 0~10시 41.667% · 10~19시 37.5% · 19~24시 20.833%). */
.day{ padding:20px 16px 16px; border-radius:24px; background:var(--card); border:1px solid var(--card-line); }
@media (min-width:1024px){ .day{ padding:40px 40px 28px; } }
.day-chart{ display:grid; row-gap:16px; }
.day-row{ display:grid; row-gap:8px; min-width:0; }
.day-name{ font-size:14px; font-weight:700; line-height:1.3; color:var(--ink); }
.day-bar{ position:relative; display:flex; min-width:0; height:40px; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.day-seg{ flex:0 0 var(--w); min-width:0; display:grid; place-items:center; font-size:13px; font-weight:600; line-height:1; color:var(--muted); white-space:nowrap; }
.day-seg + .day-seg{ border-left:1px solid var(--line); }
.day-seg.busy{ background:var(--accent-soft); color:var(--ink); }
/* 예얍 줄만 노란 면(면으로만 쓰는 노랑) — 세 줄 가운데 이 줄이 가장 먼저 보인다 */
.day-seg.on{ border-radius:12px; background:var(--accent); color:var(--on-accent); font-size:15px; font-weight:800; box-shadow:inset 0 0 0 1.5px var(--btn-ring); }
.day-axis{ position:relative; height:16px; font-size:13px; line-height:16px; color:var(--muted); font-variant-numeric:tabular-nums; }
.day-axis span{ position:absolute; left:var(--x); transform:translateX(-50%); white-space:nowrap; }
.day-axis span:first-child{ transform:none; }
.day-axis span:last-child{ left:auto; right:0; transform:none; }
@media (min-width:700px){
  .day-row{ grid-template-columns:72px minmax(0,1fr); column-gap:16px; align-items:center; }
  .day-axis{ margin-left:88px; }
}
@media (min-width:1024px){
  .day-chart{ row-gap:20px; }
  .day-bar{ height:48px; }
  .day-name{ font-size:16px; }
  .day-seg{ font-size:15px; }
  .day-seg.on{ font-size:18px; }
}
.day .fig-cap{ margin-top:12px; text-align:center; }
/* 번호 동그라미: 하루 그림의 시각 표시와 아래 대화 카드가 같은 번호를 쓴다 */
.pin-no{
  flex:none; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--time-bg); color:var(--time-ink); font-size:13px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
}
.day-pin{ position:absolute; left:var(--x); top:-11px; transform:translateX(-50%); box-shadow:0 0 0 2px var(--card); }
.consult{ margin-top:16px; }
@media (min-width:1024px){ .consult{ margin-top:20px; } }
@media (min-width:900px){ .consult-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } }
.consult-card{
  min-width:0; display:flex; flex-direction:column; gap:8px; padding:18px 16px 20px; border-radius:24px;
  background:var(--chat-bg); color:var(--chat-ink); border:1px solid var(--card-line);
}
@media (min-width:1024px){ .consult-card{ padding:24px 22px 26px; } }
.consult-card .when{ margin-bottom:4px; }
.consult-card .ctx{ color:var(--chat-meta); }
.consult-card .bubble{ max-width:88%; }
.consult .fig-cap{ margin-top:14px; text-align:center; }
/* 답하는 문의 종류 · 답한 다음의 길: 두 상자(폰은 위아래) */
.consult-more{ margin-top:20px; display:grid; gap:12px; }
@media (min-width:900px){ .consult-more{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:28px; } }
.consult-box{ min-width:0; display:flex; flex-direction:column; padding:20px; border-radius:20px; background:var(--card); border:1px solid var(--card-line); }
@media (min-width:1024px){ .consult-box{ padding:32px; } }
.consult-box h3{ font-size:18px; }
@media (min-width:1024px){ .consult-box h3{ font-size:20px; } }
.consult-box .txt{ margin-top:10px; color:var(--muted); }
.consult-box .path-wrap{ margin-top:16px; }
.consult-box .fine{ margin-top:auto; padding-top:14px; }
@media (min-width:480px){ .ask-list{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:16px; } .ask-list .wide{ grid-column:1 / -1; } }
.consult-note{ margin:20px auto 0; text-align:center; }

/* ---------- 4. 예얍이 맡는 일: 기능 카드(아이콘 + 제목 + 한두 줄 + 옅은 꼬리말) ---------- */
.feat-grid{ display:grid; gap:12px; }
@media (min-width:700px){ .feat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } }
@media (min-width:1024px){ .feat-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } }
/* 기본(폰): 아이콘 왼쪽·글 오른쪽. PC: 아이콘 위·글 아래 */
.feat{
  min-width:0; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; align-items:start;
  padding:20px; border-radius:20px; background:var(--card); border:1px solid var(--card-line);
}
.feat-ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--accent); color:var(--mark-ink); }
.feat-body{ min-width:0; }
.feat h3{ font-size:18px; line-height:1.4; }
.feat .desc{ margin-top:6px; font-size:16px; font-weight:500; line-height:1.55; color:var(--ink); }
.feat .tail{ margin-top:8px; font-size:14px; font-weight:500; line-height:1.5; color:var(--muted); }
@media (min-width:1024px){
  .feat{ display:block; padding:32px; }
  .feat-ic{ margin-bottom:18px; }
  .feat h3{ font-size:20px; }
  .feat .desc{ margin-top:8px; }
  .feat .tail{ margin-top:14px; }
}
/* 폰의 기능 묶음은 두 칸 타일: 아이콘·제목·꼬리말만 보인다. 그래서 꼬리말에는 조건이 아니라 '무엇을·언제'를 쓴다
   (긴 설명은 바로 아래 '예약 흐름'·'사장님 화면'에 같은 내용이 있고, 조건은 타일 밑 ※ 각주에 있다) */
@media (max-width:699px){
  .feat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .feat-grid .feat{ display:block; padding:16px 14px; }
  .feat-grid .feat-ic{ width:40px; height:40px; border-radius:12px; margin-bottom:10px; }
  .feat-grid .feat h3{ font-size:16px; }
  .feat-grid .desc{ display:none; }
  .feat-grid .tail{ margin-top:4px; }
}
.feat-note{ margin:20px auto 0; text-align:center; }
.for{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px; }
.for p{ font-size:15px; font-weight:600; line-height:1.5; }
.for .tag-list{ justify-content:center; }
@media (min-width:1024px){ .for{ margin-top:40px; } }

/* ---------- 5. 예약 흐름: 손님 한 명이 문의하고 방문하기까지를 카드 다섯 장으로(폰·태블릿은 옆으로 미는 한 줄) ---------- */
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  .step:last-child{ grid-column:1 / -1; }
}
@media (min-width:1024px){
  .steps{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:20px; }
  .step,.step:last-child{ grid-column:span 2; }
  /* 넷째 카드는 두 칸: 왼쪽 글·점 줄, 오른쪽 알림 예시 */
  .step.step--split{ grid-column:span 4; flex-direction:row; align-items:center; column-gap:40px; }
  .step--split > .step-main,.step--split > .aside{ flex:1 1 0; }
  .step--split > .aside{ margin-top:0; padding-top:0; }
}
.step{ min-width:0; display:flex; flex-direction:column; padding:18px 18px 20px; border-radius:20px; background:var(--card); border:1px solid var(--card-line); }
@media (min-width:1024px){ .step{ padding:32px; } }
.step-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.step-no{ flex:none; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--mark-ink); font-size:15px; font-weight:800; line-height:1; }
.step-main{ min-width:0; }
.step h3{ margin-top:14px; }
.step .body{ margin-top:6px; min-width:0; }
.step .body > p{ color:var(--muted); }
/* 그림(대화 조각·순서 칩)은 카드 맨 아래로 내려 옆 카드와 아랫줄을 맞춘다 */
.step > .aside{ margin-top:auto; padding-top:18px; min-width:0; }
.aside .fig-cap{ margin-top:8px; }
/* 미는 줄일 때는 카드 높이가 가장 긴 카드에 맞춰진다. 글이 가장 긴 3단계의 순서 칩만 빼서 높이를 줄인다(같은 사실이 그 단계 글에 있음). 격자일 때만 보인다 */
@media (max-width:899px){ .aside--wide{ display:none; } }
/* 버튼 순서 칩: 화살표는 앞 칩 뒤에 붙어서 줄 첫머리에 오지 않는다.
   칩을 글줄처럼 늘어놓고 text-wrap:balance로 줄마다 칩 수를 고르게 한다
   (칩 사이 빈칸 글자가 간격을 바꾸지 않게 font-size:0 — 칩 글자 크기는 .p가 정한다. 줄 사이 8px = 칩 위아래 4px씩) */
.path{ margin-block:-4px; font-size:0; line-height:0; text-wrap:balance; }
.path li{ display:inline-flex; align-items:center; margin-block:4px; vertical-align:top; white-space:nowrap; }
.path li:not(:last-child)::after{
  content:""; flex:none; width:7px; height:7px; margin:0 11px 0 6px;
  border-top:1.5px solid var(--muted); border-right:1.5px solid var(--muted); transform:rotate(45deg);
}
.path .p{
  display:inline-flex; align-items:baseline; gap:4px; min-height:34px; padding:5px 12px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:15px; font-weight:500; line-height:1.4;
}
.path .p small{ font-size:14px; color:var(--muted); }
.path .end .p{ background:var(--ink); border-color:var(--ink); color:var(--bg); font-weight:700; }
/* 방문 전 알림 점 줄: 해당하는 점(1일 전)만 accent */
.dots{ position:relative; margin-top:14px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); max-width:380px; text-align:center; }
.dots::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:6px; height:1.5px; background:var(--line-strong); }
.dots li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; font-size:14px; line-height:1.3; color:var(--muted); }
.dots li::before{ content:""; width:13px; height:13px; border-radius:50%; background:var(--surface); border:1.5px solid var(--line-strong); }
.dots li.on{ color:var(--ink); font-weight:700; }
.dots li.on::before{ background:var(--accent); border-color:var(--ink); }
.swipe-note{ margin-top:12px; text-align:center; }
.tl-note{ margin:20px auto 0; text-align:center; }
@media (min-width:1024px){ .tl-note{ margin-top:32px; } }

/* ---------- 6. 사장님 화면: 왼쪽 버튼 사전, 오른쪽 폰 목업(아이보리 띠) ---------- */
.owner-grid{ display:grid; row-gap:28px; }
@media (min-width:1024px){
  .owner-grid{ grid-template-columns:minmax(0,1fr) 340px; grid-template-areas:"head fig" "body fig"; grid-template-rows:auto 1fr; column-gap:72px; row-gap:32px; align-items:start; }
  .owner-head{ grid-area:head; } .owner-body{ grid-area:body; }
  .owner-fig{ grid-area:fig; position:sticky; top:calc(84px + env(safe-area-inset-top,0px)); }
  /* 두 칸 구역이라 PC에서는 제목을 왼쪽에 붙인다 */
  .owner-head .sec-head{ margin-inline:0; text-align:left; }
}
.owner-head,.owner-fig,.owner-body{ min-width:0; }
.owner-head .sec-head{ margin-bottom:0; }
.owner-fig{ display:grid; justify-items:center; row-gap:12px; }
.owner-fig .fig-cap{ text-align:center; }
/* 버튼 사전: 왼쪽 = 실제 사장님 화면 버튼 그림(누를 수 없음), 오른쪽 = 한두 줄 설명 */
.keys{ display:grid; gap:8px; }
.keys li{
  min-width:0; display:grid; grid-template-columns:104px minmax(0,1fr); column-gap:14px; align-items:center;
  padding:10px 12px; border-radius:16px; background:var(--card); border:1px solid var(--card-line);
}
.keys p{ min-width:0; font-size:16px; font-weight:500; line-height:1.5; }
/* 두 칸은 폭이 넉넉할 때만: 태블릿(한 줄 구역)과 넓은 PC. 1024~1199px은 설명 칸이 좁아져 한 칸으로 둔다 */
@media (min-width:700px) and (max-width:1023px), (min-width:1200px){
  .keys{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .keys li.wide{ grid-column:1 / -1; }
}
.key-pic{
  display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:46px; padding:6px 4px;
  border-radius:12px; background:var(--app-bg); border:1px solid var(--app-line);
}
.key-pic .app-seg{ flex:1 1 auto; }
/* 버튼 그림은 폰 목업(figure) 밖이라 14px — 실제 사장님 화면의 작은 버튼(.btn.sm)·탭 막대도 14px */
.key-pic .app-btn,.key-pic .app-tab{ font-size:14px; }
.key-pic .app-seg span{ padding:5px 0; font-size:14px; }
.notify{ margin-top:12px; padding:20px; border-radius:20px; background:var(--card); border:1px solid var(--card-line); }
.notify h3{ font-size:18px; }
.notify .tag-list{ margin-top:10px; }
.notify-fig{ margin-top:14px; }
.notify-note{ margin-top:10px; font-size:15px; line-height:1.55; color:var(--muted); }
/* 폰에서는 상자째 뺀다(같은 네 가지가 기능 타일 '사장님 카톡 알림'에, 조건은 그 밑 ※ 각주에 있음). 태블릿·PC에서만 보인다 */
@media (max-width:767px){ .notify{ display:none; } }
.notify-fig .chatbox{ width:min(400px, 100%); }
.notify-fig .bubble{ max-width:90%; }
.notify-fig .fig-cap{ margin-top:8px; }
.owner-body .footnote{ margin-top:16px; }

/* 사장님 화면 목업(실제 today.html 낱말·색) */
.screen--app{ background:var(--app-bg); color:var(--app-text); }
.screen--app .statusbar{ background:var(--app-card); color:var(--app-text); }
.app-top{ padding:4px 14px 10px; background:var(--app-card); border-bottom:1px solid var(--app-line); }
.app-title{ font-size:18px; font-weight:700; line-height:1.3; }
.app-sub{ margin-top:2px; font-size:13px; font-weight:500; line-height:1.4; color:var(--app-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-sub b{ color:var(--app-wait-ink); }
.app-body{ display:flex; flex-direction:column; gap:8px; padding:10px 10px 12px; }
.app-seg{ display:flex; gap:3px; padding:3px; border-radius:10px; background:var(--app-gray-soft); }
.app-seg span{ flex:1 1 0; min-width:0; padding:6px 0; border-radius:7px; text-align:center; font-size:14px; font-weight:500; line-height:1.3; color:var(--app-muted); white-space:nowrap; }
.app-seg .on{ background:var(--app-ink); color:var(--app-on-dark); font-weight:700; }
.app-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 9px; border:1px solid var(--app-line); border-radius:8px; background:var(--app-card); color:var(--app-text); font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap; }
.app-btn.primary{ background:var(--app-accent); border-color:var(--app-accent); color:var(--app-on-dark); }
.app-btn.soft{ background:var(--app-soft); border-color:var(--app-soft); color:var(--app-soft-ink); }
.app-btn.bad{ color:var(--app-bad-ink); }
.app-tab{ display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 14px; border:1px solid var(--app-line); border-radius:8px; background:var(--app-card); color:var(--app-text); font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap; box-shadow:inset 0 2px 0 var(--app-ink); }
.app-sheet{ border:1px solid var(--app-line); border-radius:12px; background:var(--app-card); overflow:hidden; }
/* 시각 칸 52px + 줄바꿈 금지: '11:00'이 '11:0 / 0'으로 쪼개지지 않게 */
.app-row{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto;
  grid-template-areas:"time svc badge" "time who who" "time tags tags" "time acts acts";
  column-gap:8px; row-gap:2px; padding:9px 10px 10px;
}
.app-row + .app-row{ border-top:1px solid var(--app-line-2); }
.app-time{ grid-area:time; min-width:0; }
.app-time .ap{ display:block; font-size:13px; font-weight:500; line-height:1.3; color:var(--app-muted-2); white-space:nowrap; }
.app-time .hm{ display:block; font-size:16px; font-weight:700; line-height:1.25; color:var(--app-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.app-svc{ grid-area:svc; min-width:0; font-size:15px; font-weight:700; line-height:1.4; color:var(--app-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-badge{ grid-area:badge; align-self:start; padding:1px 8px; border-radius:999px; background:var(--app-gray-soft); color:var(--app-gray-ink); font-size:13px; font-weight:700; line-height:1.5; white-space:nowrap; }
.app-badge.wait{ background:var(--app-wait-bg); color:var(--app-wait-ink); }
.app-who{ grid-area:who; min-width:0; font-size:14px; font-weight:500; line-height:1.4; color:var(--app-text-2); }
.app-tags{ grid-area:tags; display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.app-tag{ padding:1px 8px; border-radius:999px; background:var(--app-wait-bg); color:var(--app-wait-ink); font-size:13px; font-weight:500; line-height:1.5; white-space:nowrap; }
.app-acts{ grid-area:acts; display:flex; gap:6px; margin-top:6px; }
.app-tabbar{ margin-top:auto; display:flex; border-top:1px solid var(--app-line); background:var(--app-card); }
.app-tabbar span{ flex:1 1 0; min-width:0; padding:10px 2px 14px; text-align:center; font-size:13px; font-weight:500; line-height:1.3; color:var(--app-muted); white-space:nowrap; }
.app-tabbar .on{ color:var(--app-text); font-weight:700; box-shadow:inset 0 2px 0 var(--app-ink); }

/* ---------- 7. 믿고 맡길 수 있게: 첫 카드는 넓게(글 + 대화 예시), 그 아래 세 장 ---------- */
.trust-list{ display:grid; gap:12px; }
@media (min-width:700px){ .trust-list{ gap:16px; } }
@media (min-width:1024px){ .trust-list{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } .feat--wide{ grid-column:1 / -1; } }
.trust-list .desc{ font-weight:400; color:var(--muted); }
/* 넓은 카드: 폰에서는 다른 카드와 같은 모양(아이콘 왼쪽·글 오른쪽), 태블릿부터 대화 예시가 붙는다 */
.feat-main{ display:contents; }
.trust-fig{ grid-column:1 / -1; min-width:0; margin-top:16px; }
.trust-fig .chatbox{ width:100%; }
.trust-fig .fig-cap{ margin-top:8px; }
/* 폰에서는 길이를 줄이려고 대화 예시를 뺀다(같은 내용이 카드 글과 자주 묻는 질문에 있음) */
@media (max-width:699px){ .trust-fig{ display:none; } }
@media (min-width:1024px){
  .feat--wide{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px; align-items:center; }
  .feat--wide .feat-main{ display:block; }
  .feat--wide .trust-fig{ grid-column:auto; margin-top:0; }
}

/* ---------- 8. 요금 ---------- */
.price-card{ display:grid; row-gap:24px; padding:24px 20px; border-radius:28px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-soft); }
/* PC: 왼쪽(가격·버튼·작은 글)은 한 덩어리로 세로 가운데에 둔다(오른쪽 목록이 길어서 위에 붙이면 아래가 빈다) */
@media (min-width:1024px){
  .price-card{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:56px; padding:56px; }
  .price-main{ display:flex; flex-direction:column; justify-content:center; }
}
.price-main,.incl{ min-width:0; }
.price{ margin-top:6px; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; }
.price .per{ font-size:20px; font-weight:600; color:var(--muted); }
.price .vat{ font-size:16px; font-weight:500; color:var(--muted); }
.price .amount{ font-size:44px; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; }
@media (min-width:1024px){ .price .amount{ font-size:56px; } }
/* 좁은 폰: 가격 줄(월 · 금액 · VAT 포함)이 한 줄에 들어가게 */
@media (max-width:389px){ .price .amount{ font-size:38px; } }
.badges{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.price-main .btn{ margin-top:22px; }
/* 둘째 버튼(요금·결제 안내 / 한 달 무료로 써 보기)은 첫 버튼 바로 아래에 붙인다 */
.price-main .btn + .btn{ margin-top:10px; }
.incl{ padding-top:22px; border-top:1px solid var(--line); }
@media (min-width:1024px){ .incl{ padding-top:0; border-top:0; padding-left:56px; border-left:1px solid var(--line); } }
.incl h3{ font-size:18px; }
/* 굵은 한 줄 + 옅은 둘째 줄 */
.checks{ margin-top:14px; display:grid; gap:10px; }
.checks li{ display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:10px; line-height:1.5; }
.checks .ic{ width:22px; height:22px; margin-top:1px; padding:3px; border-radius:50%; background:var(--accent); color:var(--mark-ink); stroke-width:2.25; }
.checks .t{ min-width:0; font-weight:600; }
.checks .sub{ display:block; margin-top:1px; font-size:15px; font-weight:400; line-height:1.5; color:var(--muted); }
.fine{ margin-top:14px; font-size:14px; line-height:1.6; color:var(--muted); }

/* ---------- 9. 시작하는 법 ---------- */
.start-steps{ display:grid; gap:12px; }
@media (min-width:900px){ .start-steps{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } }
.start-steps > li{ min-width:0; display:flex; flex-direction:column; padding:18px 18px 20px; border-radius:20px; background:var(--card); border:1px solid var(--card-line); }
@media (min-width:1024px){ .start-steps > li{ padding:32px; } }
.start-head{ display:flex; align-items:center; gap:12px; }
.big-no{ flex:none; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--mark-ink); font-size:17px; font-weight:800; line-height:1; }
.start-head h3{ min-width:0; }
.start-steps .txt{ margin-top:10px; color:var(--muted); }
.apply{ margin-top:auto; padding-top:16px; display:grid; row-gap:8px; }
.pending{ font-size:14px; line-height:1.5; color:var(--muted); text-align:center; }
.notice{ margin-top:16px; padding:22px 20px; border-radius:20px; background:var(--accent-soft); color:var(--ink); }
@media (min-width:1024px){ .notice{ margin-top:20px; padding:28px 32px; } }
.notice h3{ font-size:18px; }
.notice ul{ margin-top:8px; display:grid; gap:4px; }
.notice li{ display:grid; grid-template-columns:14px minmax(0,1fr); column-gap:8px; }
.notice li::before{ content:""; width:6px; height:6px; margin-top:.72em; border-radius:50%; background:var(--ink); }

/* ---------- 10. 자주 묻는 질문 + 아직 안 되는 것 ---------- */
.faq-col{ max-width:820px; margin-inline:auto; }
.faq-list{ display:grid; gap:10px; }
.faq-list details{ border-radius:16px; background:var(--card); border:1px solid var(--line); }
.faq-list summary{
  display:flex; align-items:center; gap:16px; min-height:60px; padding:14px 20px; border-radius:16px;
  font-size:17px; font-weight:600; line-height:1.5; cursor:pointer; list-style:none;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list .q{ flex:1 1 auto; min-width:0; }
.faq-list summary .ic{ width:20px; height:20px; color:var(--muted); transition:transform .2s ease; }
.faq-list details[open] summary .ic{ transform:rotate(180deg); }
.faq-list .a{ padding:0 20px 20px; }
.faq-list .a p{ color:var(--muted); }
.notyet{ margin-top:20px; padding:22px 20px; border-radius:20px; border:1.5px dashed var(--line-strong); }
@media (min-width:1024px){ .notyet{ padding:28px 32px; } }
.notyet h3{ font-size:18px; }
.notyet ul{ margin-top:12px; display:grid; gap:8px; }
@media (min-width:768px){ .notyet ul{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:32px; } }
.notyet li{ display:grid; grid-template-columns:14px minmax(0,1fr); column-gap:10px; line-height:1.6; }
.notyet li::before{ content:""; width:10px; height:1.5px; margin-top:.8em; background:var(--muted); }

/* ---------- 11. 마지막 권유: 패널 한 장(밝은 화면에서 노랑을 넓게 쓰는 곳은 여기 하나) ---------- */
.final{ padding-block:48px 32px; }
@media (min-width:1024px){ .final{ padding-block:88px 48px; } }
.final-panel{
  display:grid; justify-items:center; row-gap:6px; padding:36px 20px; border-radius:28px;
  background:var(--cta-bg); color:var(--cta-ink); text-align:center;
}
@media (min-width:1024px){ .final-panel{ padding:72px 48px; } }
.final-panel h2{ color:var(--cta-ink); }
.final-panel .price-line{ margin-top:12px; color:var(--cta-ink); }
.final-panel .price-line .dot{ color:var(--cta-ink); }
.final-panel .trial-note{ margin-top:0; color:var(--cta-ink); }
.final-panel .btn{ margin-top:20px; min-width:min(240px, 100%); }
.final-panel :focus-visible{ outline-color:var(--cta-ink); }

/* ---------- 11-1. 로고에 담은 뜻 ---------- */
.brand{ padding-block:0 48px; }
@media (min-width:1024px){ .brand{ padding-block:0 88px; } }
.brand-in{ display:grid; row-gap:16px; justify-items:start; padding:24px 18px; border-radius:28px; background:var(--soft); border:1px solid var(--card-line); }
@media (min-width:768px){ .brand-in{ grid-template-columns:auto minmax(0,1fr); column-gap:40px; align-items:center; padding:40px; } }
@media (min-width:1024px){ .brand-in{ column-gap:56px; padding:56px; } }
/* 아이콘 파일은 원본 그림 그대로, 둥근 사각형 바깥의 흰 여백만 투명하게 만든 것 */
.brand-icon{ display:block; width:72px; height:72px; filter:drop-shadow(0 8px 14px rgba(46,42,34,.18)); }
@media (min-width:1024px){ .brand-icon{ width:128px; height:128px; } }
.brand-body{ min-width:0; }
.brand-logo{ display:inline-flex; padding:8px 18px; border-radius:999px; background:var(--accent); }
.brand-logo img{ display:block; height:32px; width:auto; }
.brand h2{ margin-top:14px; font-size:22px; line-height:1.4; }
@media (min-width:1024px){ .brand h2{ font-size:28px; } }
.brand-lead{ margin-top:10px; max-width:40em; color:var(--muted); line-height:1.7; }
.brand-meaning{ margin:18px 0 0; display:grid; gap:12px; }
@media (min-width:768px){ .brand-meaning{ grid-template-columns:1fr 1fr; } }
.brand-meaning > div{ padding:14px 16px; border-radius:18px; background:var(--surface); border:1px solid var(--line); }
.brand-meaning dt{ display:inline-flex; align-items:center; min-height:28px; padding:2px 12px; border-radius:999px; background:var(--accent-soft); color:var(--ink); font-size:15px; font-weight:700; }
.brand-meaning dd{ margin:8px 0 0; font-size:16px; line-height:1.65; color:var(--ink); }

/* ---------- 12. 바닥글(차콜) ---------- */
.site-footer{ padding-block:36px 48px; background:var(--foot-bg); font-size:14px; line-height:1.7; color:var(--foot-muted); }
.foot-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; padding-bottom:18px; border-bottom:1px solid var(--foot-line); }
.foot-links{ display:flex; flex-wrap:wrap; column-gap:22px; }
.foot-links a{ display:inline-flex; align-items:center; min-height:48px; color:var(--foot-ink); font-size:15px; font-weight:600; text-decoration:none; }
.foot-links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.foot-info{ min-width:0; margin-top:20px; }
.foot-info a{ color:var(--foot-ink); text-underline-offset:3px; }
.foot-legal{ margin-top:6px; display:flex; flex-wrap:wrap; column-gap:20px; }
.foot-legal a{ display:inline-flex; align-items:center; min-height:44px; }
.site-footer :focus-visible{ outline-color:#FFD51F; }
.fine a,.faq-list .a a,.pending a{ color:var(--ink); text-underline-offset:3px; }

/* ---------- 폰에서 떠 있는 신청 버튼(JS가 켤 때만). 내용을 덜 가리게 가운데 알약 하나만 띄운다 ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:40;
  display:flex; justify-content:center; padding-inline:20px; pointer-events:none;
}
.sticky-cta .btn{ pointer-events:auto; min-width:min(232px, 100%); box-shadow:inset 0 0 0 1.5px var(--btn-ring), 0 14px 28px -12px rgba(46,42,34,.5); }
@media (min-width:768px){ .sticky-cta{ display:none !important; } }
/* 세로가 아주 낮은 화면(가로로 든 폰·크게 확대한 화면)에서는 상단 바와 함께 화면을 너무 가려서 띄우지 않는다 */
@media (max-height:480px){ .sticky-cta{ display:none !important; } }
@media (prefers-reduced-motion:no-preference){ .sticky-cta{ animation:bar-up .2s ease-out; } }
@keyframes bar-up{ from{ transform:translateY(120%); } to{ transform:none; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* 고대비(강제 색상) 화면에서는 바탕색·그림자가 꺼진다. 버튼과 알약의 윤곽을 테두리로 남긴다(보통 화면에서는 바뀌는 것 없음) */
@media (forced-colors:active){
  .btn,.top-join{ border:2px solid; }
  .chip,.t-chip,.notice,.final-panel{ border:1px solid; }
  /* 하루 그림: 바탕색이 꺼져도 세 줄과 번호가 보이게 윤곽을 남기고, 예얍 줄만 굵게 */
  .day-bar,.pin-no{ border:1px solid; }
  .day-seg.on{ border:3px solid; }
}