/* 아싸뷰 광고주 랜딩 개편 (lp-*.php 공용) — _landing-sample/styles.css 를 옮긴 것.
   샘플은 미리보기 껍데기(tools/build-preview.sh)가 아래 세 줄을 기본으로 깔고 그렸으므로 같은 바탕을 맨 앞에 둔다. */
img { max-width: 100%; }
[hidden] { display: none !important; }

/* 아싸뷰 새 랜딩 샘플 — 디자인 토큰과 컴포넌트
   글꼴: 실서비스는 Pretendard. 샘플은 Pretendard가 없으면 Noto Sans KR로 대체된다. */

:root {
  /* 아싸뷰 디자인 시스템(피그마 Color · Typography · Spacing) 값. 이름은 샘플 코드의 기존 변수명을 유지했다. */
  --teal-50: #EEF9FA;   /* Cyan-50 */
  --teal-100: #D4F1F4;  /* Cyan-100 */
  --teal-300: #72CFDA;  /* Cyan-300 */
  --teal-500: #36B7C5;  /* Cyan-500 · 브랜드 */
  --teal-600: #1AACBC;  /* Cyan-600 · content-brand */
  --teal-700: #258FA0;  /* Cyan-700 */
  --teal-800: #1F7A87;  /* Cyan-800 */
  --teal-900: #0F4A55;  /* Cyan-900 */
  --pink-400: #DA2872;  /* Pink-500 · accent-default */
  --pink-100: #FDE8F1;  /* accent-weak */
  --pink-50: var(--pink-50);   /* accent-subtle */
  --neon: #69F0FF;      /* accent-neon */
  --ink: #1E2534;       /* content-strong */
  --ink-2: #4E5668;     /* content-default */
  --ink-3: #72798A;     /* content-subtle */
  --ink-900: #111827;   /* Neutral-900 */
  --line: #E4E6EA;      /* border-default */
  --line-strong: #C9CDD4;
  --ground: #FFFFFF;
  --mist: #F7F8F9;      /* surface-subtle */
  --sun: #FF9E3C;       /* Orange-500 */
  --azd-grad: linear-gradient(90deg, #36B7C5 0%, #DA2872 100%);   /* gradient-cta-accent-magenta — 주 CTA·히어로 제목 한 줄에만 */
  --accent: var(--teal-700);   /* 그 외 강조는 단색 */
  --inverse-grad: linear-gradient(90deg, #454D56 0%, #325782 100%); /* gradient-surface-inverse */
  --radius-l: 24px;
  --radius-m: 16px;
  --radius-s: 12px;
  --shadow-card: 0 1px 0 rgba(30, 37, 52, .04), 0 18px 40px -22px rgba(30, 37, 52, .28);
  --font: Pretendard, "Pretendard Variable", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --gutter: 20px;
  --hd-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 16px); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -1px; line-height: 1.25; font-weight: 600; } /* 제목 굵기는 최대 세미볼드(600) (2026-10-19 디렉터) */
.num { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(64px, 9vw, 112px); }
.sec--mist { background: var(--mist); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--teal-700); background: none; border-radius: 0; padding: 0; margin-bottom: 14px; letter-spacing: -0.5px; }
.eyebrow::before { content: none; }
.sec-title { font-size: clamp(30px, 3.8vw, 40px); line-height: 1.2; letter-spacing: -1.5px; }
.sec-lead { margin-top: 16px; font-size: clamp(16px, 1.6vw, 18px); font-weight: 500; color: var(--ink-2); max-width: 36em; }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.hl { background: none; padding-inline: 0; }

/* ---------- 버튼 ---------- */
.btn3d {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 26px;
  font-weight: 600; font-size: 17px; color: #fff; white-space: nowrap;
  border-radius: 12px;
  background: var(--teal-600);
  box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn3d:hover { background: var(--teal-700); }
.btn3d:active { transform: scale(.98); background: var(--teal-800); }
.btn3d--azd { background: var(--azd-grad); box-shadow: none; }
.btn3d--azd:hover { background: var(--azd-grad); filter: brightness(.94); box-shadow: none; }
.btn3d--azd:active { background: var(--azd-grad); filter: brightness(.88); box-shadow: none; }
.btn3d--sm { min-height: 42px; padding: 0 16px; font-size: 14.5px; border-radius: 12px; }
.btn3d--sm:active { transform: scale(.98); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 24px; font-weight: 600; font-size: 17px; white-space: nowrap;
  border-radius: 16px; background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn-ghost:hover { background: #F7F8FA; }
.btn-ghost:active { transform: scale(.98); background: #F1F3F6; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.link-arrow { font-weight: 600; color: var(--teal-700); display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 헤더 ---------- */
.hd {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.hd.is-stuck { border-color: var(--line); }
.hd-in { height: var(--hd-h); display: flex; align-items: center; gap: 28px; }
.logo { font-weight: 600; font-size: 24px; letter-spacing: -0.06em; color: var(--teal-600); display: inline-flex; align-items: center; gap: 6px; }
.logo small { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 8px; line-height: 1; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.nav-link:hover, .nav-item:focus-within > .nav-link { background: var(--mist); color: var(--ink); }
.nav-caret { width: 10px; height: 10px; opacity: .6; }
.nav-drop {
  position: absolute; top: 100%; left: 0; min-width: 260px; padding: 8px;
  background: #fff; border-radius: var(--radius-m); box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s ease;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: none; }
.nav-drop a { display: block; padding: 10px 12px; border-radius: 10px; }
.nav-drop a:hover { background: var(--mist); }
.nav-drop b { display: block; font-size: 15px; }
.nav-drop span { font-size: 13px; color: var(--ink-3); }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); }
.icon-btn:hover { background: var(--mist); }
.icon-btn svg { width: 22px; height: 22px; }
.hd-login { font-weight: 600; font-size: 15px; color: var(--ink-2); padding: 10px 12px; border-radius: 10px; }
.hd-login:hover { background: var(--mist); }
.hd-burger { display: none; }

/* ---------- 히어로 ---------- */
.hero { position: relative; padding-block: clamp(28px, 5vw, 64px) clamp(56px, 8vw, 96px); overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; will-change: transform; }
.hero::before { width: 520px; height: 520px; left: -200px; top: -240px; background: radial-gradient(circle, rgba(54, 183, 197, .10), rgba(54, 183, 197, .03) 40%, transparent 68%); }
.hero::after { width: 480px; height: 480px; right: -180px; top: 40px; background: radial-gradient(circle, rgba(218, 40, 114, .05), rgba(218, 40, 114, .015) 40%, transparent 68%); }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.hero-badge i { font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 99px; padding: 2px 9px; }
.hero h1 { margin-top: 24px; font-size: clamp(36px, 4.6vw, 48px); line-height: 1.18; letter-spacing: -1.5px; }
.hero h1 em { font-style: normal; background: var(--azd-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin-top: 18px; font-size: clamp(16px, 1.7vw, 18px); color: var(--ink-2); max-width: 30em; }

.starter { position: relative; width: 100%; max-width: 640px; margin-top: 10px; }
.robot-stage { position: relative; z-index: 1; width: 208px; margin: 0 auto -36px; animation: popup 1s cubic-bezier(.2, 1.35, .4, 1) .15s both; }
.robot { position: relative; width: 100%; animation: bob 4.2s ease-in-out infinite; cursor: pointer; }
.robot svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.rb-eyes { transition: transform .18s ease-out; }
.rb-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.2s infinite; }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
.rb-happy, .rb-scan { opacity: 0; }
.rb-ant-ball { transform-box: fill-box; transform-origin: center; }
.robot.is-typing .rb-ant-ball { animation: pulse 1s ease-in-out infinite; }
.robot.is-searching .rb-eye { opacity: 0; }
.robot.is-searching .rb-scan { opacity: 1; animation: scan 1s ease-in-out infinite; }
.robot.is-searching .rb-ant-ball { animation: pulse .45s ease-in-out infinite; }
.robot.is-done .rb-eye { opacity: 0; }
.robot.is-done .rb-happy { opacity: 1; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .7; } }
@keyframes scan { 0%, 100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }

.starter-card { position: relative; z-index: 2; background: #fff; border-radius: var(--radius-l); padding: 10px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(30, 37, 52, .45); text-align: left; }
.hand { position: absolute; top: -13px; z-index: 3; width: 38px; height: 26px; border-radius: 14px 14px 12px 12px; background: linear-gradient(180deg, #fff, #DDF3F6); box-shadow: inset 0 -3px 0 rgba(0, 128, 142, .18), 0 3px 6px rgba(30, 37, 52, .18); }
.hand { width: 44px; height: 30px; }
.hand--l { left: calc(50% - 110px); transform: rotate(-6deg); }
.hand--r { left: calc(50% + 66px); transform: rotate(6deg); transform-origin: 50% 100%; }
.starter.is-done .hand--r, .starter.is-hello .hand--r { animation: wave 2.2s ease-in-out 1 both; }
@keyframes wave { 0% { transform: rotate(6deg); } 15%, 85% { transform: translate(18px, -84px) rotate(8deg); } 30%, 60% { transform: translate(18px, -84px) rotate(40deg); } 45%, 75% { transform: translate(18px, -84px) rotate(-4deg); } 100% { transform: rotate(6deg); } }
@keyframes handIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes popup { from { transform: translateY(96px); } }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--mist); border-radius: 20px; padding: 4px; }
.seg button { min-height: 44px; border-radius: 16px; font-weight: 600; font-size: 15px; color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(30, 37, 52, .06); }
.seg .soon { font-size: 11px; font-weight: 600; color: var(--pink-400); background: var(--pink-100); border-radius: 99px; padding: 1px 7px; }
.panel { padding: 14px 8px 8px; }
.field { display: flex; gap: 10px; align-items: stretch; }
.field input { flex: 1; min-width: 0; min-height: 58px; border-radius: 16px; border: 1px solid var(--line); padding: 0 18px; font-size: 18px; font-weight: 600; background: #fff; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder { color: #A0A7B4; font-weight: 500; }
.field input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 5px rgba(54, 183, 197, .16); }
.field .btn3d { min-height: 58px; }
.assure { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-inline: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.assure li { display: inline-flex; align-items: center; gap: 6px; }
.assure svg { width: 16px; height: 16px; color: var(--teal-600); flex: none; }
ul.assure { list-style: none; padding-left: 4px; margin-bottom: 0; }
.panel-note { margin-top: 10px; padding-inline: 4px; font-size: 13px; color: var(--ink-3); }
.panel-note a { color: var(--teal-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.going { padding: 22px 12px 14px; text-align: center; }
.going-bar { height: 6px; border-radius: 99px; background: var(--mist); overflow: hidden; margin: 14px auto 0; max-width: 320px; }
.going-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); border-radius: 99px; }
.going.run .going-bar i { animation: fill 1.15s ease-out forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.going b { font-size: 18px; }
.going p { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.going .btn-row { justify-content: center; margin-top: 16px; }

.proof { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.proof span { display: inline-flex; align-items: center; gap: 6px; }
.stars { color: var(--sun); letter-spacing: 1px; }

/* ---------- 2. 사용 화면 재연 ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.steps { display: grid; gap: 8px; margin-top: 28px; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; text-align: left; padding: 16px; border-radius: var(--radius-m); position: relative; overflow: hidden; transition: background .2s; }
.step-n { width: 32px; height: 32px; border-radius: 50%; font-size: 15px; display: grid; place-items: center; font-weight: 600; background: var(--mist); color: var(--ink-3); transition: .2s; }
.step-t b { display: block; font-size: 17px; }
.step-t span { display: block; font-size: 14.5px; color: var(--ink-3); margin-top: 2px; }
.step[aria-current="true"] { background: #fff; box-shadow: 0 6px 16px -10px rgba(30, 37, 52, .25); }
.step[aria-current="true"] .step-n { background: var(--teal-600); color: #fff; }
.step[aria-current="true"] .step-t span { color: var(--ink-2); }
.step-bar { display: none; }  /* 진행 바 제거(2026-10-15) — 활성 카드·숫자 원으로 충분 */
.step[aria-current="true"] .step-bar.run { animation: fill var(--scene-ms, 3500ms) linear forwards; }
.demo .btn-row { margin-top: 28px; }

.phone { position: relative; width: 100%; max-width: 380px; margin-inline: auto; aspect-ratio: 380 / 590; border-radius: 40px; background: var(--ink); padding: 10px; box-shadow: 0 40px 70px -34px rgba(30, 37, 52, .7), inset 0 0 0 2px #29454E; }
.phone-in { position: relative; height: 100%; border-radius: 31px; background: var(--mist); overflow: hidden; }

.scene { position: absolute; inset: 44px 0 0; padding: 16px 14px; opacity: 0; transform: translateX(18px); transition: opacity .4s, transform .4s; pointer-events: none; font-size: 13px; text-align: left; }
.scene.on { opacity: 1; transform: none; }
.scene h4 { margin: 0 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.35; }

.m-store { display: grid; grid-template-columns: 1fr 40px; gap: 10px; align-items: center; opacity: 0; transform: translateY(8px); }
.m-store b { display: block; font-size: 13.5px; }
.m-store span { color: var(--ink-3); font-size: 11.5px; }
.m-store i { width: 40px; height: 40px; border-radius: 10px; font-style: normal; display: grid; place-items: center; font-size: 20px; background: var(--teal-50); }
.scene.on .m-store { animation: rise .4s ease forwards; animation-delay: calc(.25s + var(--d, 0) * .1s); }
.scene.on .m-store.pick { animation: rise .4s ease calc(.25s + var(--d, 0) * .1s) forwards, pick .35s ease 1.3s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes pick { to { box-shadow: 0 0 0 1px var(--teal-500); background: var(--teal-50); } }

@keyframes wake { to { background: var(--teal-600); color: #fff; } }
.m-set { opacity: 0; transform: translateY(8px); margin-top: 8px; }
.scene.on .m-set { animation: rise .4s ease forwards; animation-delay: calc(.9s + var(--d, 0) * .15s); }

.m-set p { margin-top: 6px; font-weight: 600; line-height: 1.45; }
.m-set small { display: block; color: var(--ink-3); margin-top: 2px; }

@keyframes fadeout { to { opacity: 0; height: 0; margin: 0; overflow: hidden; } }
.dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-500); margin-right: 3px; animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@keyframes slide { from { width: 0; } to { width: 50%; } }

@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- 3. 사례 ---------- */
.cases-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 16px; border-radius: 99px; font-weight: 600; font-size: 14.5px; background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.count { font-size: inherit; font-weight: 600; color: var(--ink-2); line-height: inherit; }
.count b { color: var(--teal-700); font-weight: inherit; }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.case { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card), 0 0 0 1px var(--line); transition: transform .18s; }
.case:hover { transform: translateY(-4px); }
.case-img { position: relative; aspect-ratio: 16 / 10; background: var(--teal-50); }
.case-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.case-kw { position: absolute; left: 10px; bottom: 10px; background: #fff; border-radius: 99px; padding: 5px 12px 5px 9px; font-weight: 600; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.case-kw svg { width: 14px; height: 14px; color: var(--teal-600); }
.case-body { padding: 14px 16px 16px; display: grid; gap: 10px; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.case-stats b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.03em; }
.case-stats .rank { color: var(--teal-600); }
.case-stats span { font-size: 12px; color: var(--ink-3); }
.case-title { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cases-more { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: flex-end; }
.cases-more small { color: var(--ink-3); font-size: 13px; }

.dot--pink { background: var(--pink-400); } .dot--ink { background: var(--ink-3); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 10px; background: var(--mist); color: var(--ink-2); }

/* ---------- 4. 돈 ---------- */
.pay { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.pay li { position: relative; padding: 0 18px 0 0; }
.pay li::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 4px; background: var(--teal-100); }
.pay li:last-child::before { background: linear-gradient(90deg, var(--teal-100), transparent); }
.pay li.paid::before { background: var(--accent); }
.pay-dot { display: block; position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--teal-500); }
.pay li.paid .pay-dot { box-shadow: inset 0 0 0 1px var(--pink-400); }
.pay-when { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.pay-amt { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; }
.pay-amt small { font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.pay li:not(.paid) .pay-amt { color: var(--teal-600); }
.pay-what { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); max-width: 17em; }
.pay-safe { margin: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #fff; border-radius: var(--radius-m); padding: 16px 20px; font-size: 16px; color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.pay-safe svg { width: 24px; height: 24px; flex: none; color: var(--teal-600); }
.pay-safe span { flex: 1 1 240px; } .pay-safe b { color: var(--ink); }
.pay-safe .inline-link { font-size: 14px; white-space: nowrap; }
.pay-foot { margin-top: 22px; font-size: 13.5px; color: var(--ink-3); }

.role { border-radius: var(--radius-l); padding: clamp(22px, 3vw, 36px); }

.role h3 { font-size: 15px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.role h3 b { font-size: 13px; color: #fff; background: var(--ink); border-radius: 99px; padding: 2px 10px; }

.todo { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.todo li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 16px; }
.todo li small { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink-2); }
.todo svg { width: 22px; height: 22px; flex: none; color: var(--teal-600); margin-top: 2px; }

.talk { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; background: var(--mist); border-radius: var(--radius-l); padding: clamp(22px, 3.5vw, 44px); }
.talk h3 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; }
.talk p { margin-top: 10px; color: var(--ink-2); }

/* ---------- 6. 직접 운영 ---------- */
.self { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan { background: #fff; border-radius: var(--radius-m); padding: 20px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 6px; align-content: start; }
.plan h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.plan b { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.04em; }
.plan b small { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.plan p { font-size: 13.5px; color: var(--ink-2); }

/* ---------- 7. 신뢰 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--line); }
.stat { padding: 28px 20px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { display: block; font-size: clamp(30px, 4.4vw, 50px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.1; }
.stat b small { font-size: .5em; font-weight: 600; letter-spacing: -0.02em; }
.stat > span { font-size: 14.5px; color: var(--ink-2); }

.review { background: var(--mist); border-radius: var(--radius-m); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.review b { font-size: 16.5px; letter-spacing: -0.03em; }
.review p { font-size: 14.5px; color: var(--ink-2); }
.review footer { margin-top: auto; font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; }

/* ---------- 8. 질문 ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq-list { display: grid; gap: 10px; }
.qa { background: #fff; border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; font-size: 16.5px; position: relative; letter-spacing: -0.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa p { padding: 0 20px 20px; color: var(--ink-2); font-size: 15.5px; }
.qa.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 1px var(--teal-500); } 100% { box-shadow: 0 0 0 1px var(--line); } }
.faq-help { margin-top: 20px; font-size: 14.5px; color: var(--ink-2); }
.faq-help a { font-weight: 600; color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; }

.final { background: var(--teal-900); color: #fff; border-radius: clamp(24px, 4vw, 44px); padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px); text-align: center; position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%; background: radial-gradient(closest-side, rgba(54, 183, 197, .45), transparent); pointer-events: none; }
.final > * { position: relative; }
.final h2 { font-size: clamp(26px, 3.8vw, 40px); font-weight: 600; }
.final p { margin-top: 12px; color: rgba(255, 255, 255, .78); }
.final .field { max-width: 560px; margin: 26px auto 0; }
.final .field input { border-color: transparent; }
.final .assure { justify-content: center; color: rgba(255, 255, 255, .85); }
.final .assure svg { color: var(--teal-300); }

/* ---------- 푸터 ---------- */
.ft { padding-block: 40px 120px; font-size: 13px; color: var(--ink-3); }
.ft-in { display: flex; flex-wrap: wrap; gap: 20px 48px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 28px; }
.ft p { max-width: 46em; line-height: 1.7; }

/* ---------- 떠 있는 요소 ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .98); border-top: 1px solid var(--line); display: none; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .25s ease; }
.dock.show { transform: none; }

.kakao { position: fixed; right: 18px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); z-index: 39; width: 54px; height: 54px; border-radius: 50%; background: #FEE500; color: #3A1D1D; display: grid; place-items: center; font-weight: 600; font-size: 12px; line-height: 1.1; text-align: center; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); transition: bottom .25s; }
.notes-btn { position: fixed; left: 18px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 39; min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .5); transition: bottom .25s; }
.notes-btn[aria-pressed="true"] { background: var(--pink-400); }

.toast { position: fixed; left: 50%; bottom: 96px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; padding: 12px 18px; border-radius: 14px; max-width: calc(100vw - 40px); text-align: center; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 모바일 메뉴 · 검색 ---------- */
.sheet { position: fixed; inset: 0; z-index: 70; background: rgba(30, 37, 52, .55); display: flex; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px; align-items: flex-start; justify-content: center; }
.sheet-card { width: 100%; max-width: 520px; background: #fff; border-radius: 26px; padding: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); max-height: calc(100% - 10px); overflow: auto; animation: drop .22s ease; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px 8px; }
.sheet-x { width: 44px; height: 44px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; }
.sheet-x svg { width: 20px; height: 20px; }
.mm-list { display: grid; }
.mm-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 10px; font-size: 19px; font-weight: 600; text-align: left; border-radius: 12px; }
.mm-row:active { background: var(--mist); }
.mm-row svg { width: 18px; height: 18px; color: var(--ink-3); }
.mm-row small { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.mm-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-3); padding: 10px; font-size: 14.5px; }
.mm-back svg { width: 16px; height: 16px; }
.mm-cta { display: grid; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.mm-cta .btn3d, .mm-cta .btn-ghost { width: 100%; }
.mm-cta .btn-ghost { min-height: 50px; box-shadow: inset 0 0 0 1px var(--line); }
.sr-input { display: flex; align-items: center; gap: 10px; background: var(--mist); border-radius: 16px; padding: 0 14px; }
.sr-input svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.sr-input input { flex: 1; min-width: 0; min-height: 52px; border: 0; background: none; font-size: 17px; font-weight: 600; }
.sr-input input:focus { outline: none; }
.sr-hint { margin: 14px 6px 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-inline: 4px; }
.sr-chips button { padding: 8px 14px; border-radius: 99px; background: var(--mist); font-weight: 600; font-size: 14.5px; }
.sr-res { display: grid; gap: 4px; margin-top: 10px; }
.sr-res a { display: block; padding: 12px 10px; border-radius: 12px; }
.sr-res a:hover, .sr-res a:focus { background: var(--mist); }
.sr-item { display: block; width: 100%; text-align: left; padding: 12px 10px; border-radius: 12px; }
.sr-item:hover, .sr-item:focus-visible { background: var(--mist); }
.sr-res b { display: block; font-size: 15.5px; }
.sr-res span { font-size: 13px; color: var(--ink-3); }
.sr-none { padding: 18px 10px; color: var(--ink-3); font-size: 14.5px; }

.reveal-in { animation: revealIn .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes revealIn { from { opacity: .35; transform: translateY(22px); } }

/* ---------- 로봇 강화 ---------- */
.rb-head { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(var(--tilt, 0deg)); transition: transform .3s ease-out; }
.rb-ant, .rb-ant-ball { transition: transform .3s; }

@keyframes core { 50% { opacity: .45; } }
.rb-cheek { transition: opacity .25s; }
.robot.is-excited { animation: hop .5s ease-in-out infinite; }
.robot.is-excited .rb-eye { opacity: 0; } .robot.is-excited .rb-happy { opacity: 1; }
.robot.is-excited .rb-cheek, .robot.is-done .rb-cheek { opacity: .7; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.bubble { position: absolute; left: calc(100% - 6px); top: 26px; width: max-content; max-width: 200px; margin: 0; padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; box-shadow: 0 10px 22px -10px rgba(30, 37, 52, .6); animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) 1.2s both; transform-origin: 0 100%; }
.bubble.swap { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.starter-card { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.btn-mini { min-height: 42px; padding: 0 16px; font-size: 14.5px; font-weight: 600; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.btn3d--azd { position: relative; overflow: hidden; }
.btn3d--azd::after { content: none; }  /* shine 제거(2026-10-14) */
@keyframes shine { 0%, 62% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(340%) skewX(-20deg); } }
.rise .w { display: inline-block; animation: wordUp .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 85ms + 80ms); }
@keyframes wordUp { from { opacity: 0; transform: translateY(.55em) rotate(2deg); } }
.hero::before { animation: drift 14s ease-in-out infinite alternate; } .hero::after { animation: drift 17s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.15); } }

.demo-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; min-width: 0; }
.guide { display: flex; align-items: center; gap: 4px; max-width: 380px; width: 100%; }
.guide svg { width: 64px; height: 46px; flex: none; animation: bob 3.2s ease-in-out infinite; }
.guide p { flex: 1; background: var(--ink); color: #fff; border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px -12px rgba(30, 37, 52, .4); }
.guide p.swap { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }

.inline-link { color: var(--teal-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; background: #fff; border-radius: var(--radius-l); padding: clamp(24px, 4vw, 44px); box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
.band h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 600; }
.band p { margin-top: 8px; color: var(--ink-2); }
.band-robot { position: absolute; right: 36px; top: -52px; width: 92px; height: 64px; animation: bob 3.6s ease-in-out infinite; }
.sec--final { padding-top: clamp(64px, 8vw, 96px); }
.final { overflow: visible; }
.final::before { border-radius: inherit; inset: 0; height: auto; background: radial-gradient(60% 80% at 50% 120%, rgba(54, 183, 197, .5), transparent); }
.final-robot { position: absolute !important; left: 50%; top: -58px; width: 104px; height: 73px; margin-left: -52px; animation: peek 4s ease-in-out infinite; }
@keyframes peek { 0%, 100% { transform: translateY(6px) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }

.nav-link.is-active { color: var(--teal-700); background: var(--teal-50); }

[data-stagger].stag-in > * { animation: revealIn .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
.pay.will-draw li::before { transform: scaleX(0); transform-origin: left; }
.pay.will-draw .pay-dot { transform: scale(0); }
.pay.drawn li::before { transform: none; transition: transform .55s ease; transition-delay: calc(var(--i) * .4s + .15s); }
.pay.drawn .pay-dot { transform: none; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); transition-delay: calc(var(--i) * .4s); }

/* ---------- 모바일 카드 넘김(데크) ---------- */
.deck-title, .deck-dots, .deck-hint { display: none; }

/* ---------- 주제별 페이지 ---------- */
.page[hidden] { display: none; }
.page { animation: pageIn .35s ease backwards; } /* both 로 두면 끝난 뒤에도 효과가 남아 유리의 뒤 흐림(backdrop-filter)을 막는다 */
@keyframes pageIn { from { opacity: .4; transform: translateY(10px); } }
.ph { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 88px) clamp(36px, 5vw, 64px); text-align: center; }
.ph::before { content: ""; position: absolute; width: 560px; height: 560px; left: 50%; top: -340px; margin-left: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(54, 183, 197, .18), rgba(54, 183, 197, .06) 42%, transparent 68%); pointer-events: none; }
.ph-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.ph h1 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.2; letter-spacing: -1.5px; }
.ph h1 em { font-style: normal; background: var(--azd-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-lead { margin-top: 18px; font-size: clamp(16px, 1.8vw, 19px); color: var(--ink-2); max-width: 34em; }

.btn-row--center { justify-content: center; margin-top: 28px; }
.narrow { max-width: 820px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-m); }

.cmp { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.cmp tbody th { font-weight: 600; white-space: nowrap; }
.cmp td { color: var(--ink-3); }
.cmp .cmp-me { background: var(--teal-50); color: var(--teal-900); font-weight: 600; }
.cmp thead .cmp-me { color: var(--teal-700); font-size: 16px; font-weight: 600; border-radius: 0 var(--radius-m) 0 0; }

.loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.loop li { background: #fff; border-radius: var(--radius-m); padding: 24px; box-shadow: 0 0 0 1px var(--line); position: relative; }
.loop li:not(:last-child)::after { content: "↻"; position: absolute; right: -19px; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; display: grid; place-items: center; z-index: 1; }
.loop b { font-size: 13.5px; color: var(--teal-700); }
.loop h3 { font-size: 19px; font-weight: 600; margin: 6px 0; }
.loop p { color: var(--ink-2); font-size: 15px; }

.unl { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.price-main { background: #fff; border-radius: var(--radius-l); padding: clamp(24px, 3.5vw, 40px); box-shadow: 0 0 0 1px var(--teal-500), var(--shadow-card); display: grid; gap: 10px; justify-items: start; }
.price-tag { font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 99px; padding: 4px 12px; }
.price-big { font-size: clamp(36px, 5vw, 54px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.15; }
.price-big small { font-size: 16px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }

.ticks { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 9px; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; font-size: 15.5px; }
.ticks svg { width: 20px; height: 20px; flex: none; color: var(--teal-600); margin-top: 2px; }

.ptable { width: 100%; min-width: 460px; border-collapse: collapse; background: #fff; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; overflow: hidden; }
.ptable th, .ptable td { padding: 14px 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ptable th:first-child, .ptable td:first-child { text-align: left; font-weight: 600; }
.ptable thead th { font-size: 13px; color: var(--ink-3); }
.ptable tr:last-child td { border-bottom: 0; }
.ptable a { color: var(--teal-700); font-weight: 600; }
.ptable .rank { color: var(--teal-600); font-weight: 600; }

.plans--detail .plan { padding: 26px; gap: 8px; }
.plans--detail .plan.is-hot { box-shadow: 0 0 0 1px var(--teal-500), var(--shadow-card); }
.plan-badge { justify-self: start; font-size: 12px; font-weight: 600; color: var(--teal-700); background: var(--teal-50); border-radius: 99px; padding: 2px 10px; }
.plan ul { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.plan ul li::before { content: "·"; margin-right: 6px; color: var(--teal-600); font-weight: 600; }
.plan .btn-mini { display: inline-flex; align-items: center; justify-content: center; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }

.promise { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 900px; text-align: left; }
.promise div { background: #fff; border-radius: var(--radius-m); padding: 20px; box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
.promise b { display: block; font-size: 18px; letter-spacing: -0.03em; }
.promise span { font-size: 14px; color: var(--ink-2); }
.rule { background: #fff; border-radius: var(--radius-m); padding: 24px; box-shadow: 0 0 0 1px var(--line); margin-bottom: 12px; }
.rule h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.rule p { color: var(--ink-2); font-size: 15.5px; }
.rule-eg { margin-top: 10px; padding: 12px 14px; background: var(--mist); border-radius: var(--radius-s); font-size: 14.5px !important; }

.seg--page { width: 100%; max-width: 420px; margin-top: 28px; background: #F2F4F6; box-shadow: none; }
.seg--page button[aria-selected="true"] { background: var(--ink); color: #fff; }
.track { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; gap: 12px; }
.track[hidden] { display: none; }
.track li { counter-increment: t; position: relative; background: #fff; border-radius: var(--radius-m); padding: 22px 22px 22px 76px; box-shadow: 0 0 0 1px var(--line); }
.track li::before { content: counter(t); position: absolute; left: 22px; top: 22px; width: 38px; height: 38px; border-radius: 12px; background: var(--teal-600); color: #fff; font-weight: 600; display: grid; place-items: center; }
.track h3 { font-size: 18px; font-weight: 600; }
.track p { margin-top: 4px; color: var(--ink-2); font-size: 15.5px; }

.ph-search { width: 100%; max-width: 520px; margin-top: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.ph-search:focus-within { box-shadow: 0 0 0 1px var(--teal-500), 0 0 0 7px rgba(54, 183, 197, .16); }
.faq-cat { margin: 28px 4px 8px; font-size: 14px; font-weight: 600; color: var(--teal-700); }
.faq-cat:first-child { margin-top: 0; }
.faq-empty { padding: 24px; text-align: center; color: var(--ink-3); }

/* ---------- 이용 방법: 머리 요약 ---------- */
.sum-chips { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sum-chips li { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), var(--shadow-card); padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--ink-2); display: grid; gap: 2px; min-width: 120px; }
.sum-chips b { font-size: 22px; font-weight: 600; letter-spacing: -0.04em; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 스크롤 따라 바뀌는 장면 ---------- */
.flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 6vw, 88px); padding-left: 34px; }

.who { margin-top: 20px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; max-width: 560px; }

@keyframes screenIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }

.s-tipbubble { width: fit-content; margin: 6px auto 0; background: var(--ink); color: #fff; font-weight: 600; font-size: 11.5px; border-radius: 99px; padding: 6px 12px; position: relative; }
.s-tipbubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }

/* ---------- 실제 화면 재연 ---------- */
.scr { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 22px 44px -28px rgba(30, 37, 52, .55); overflow: hidden; font-size: 13px; text-align: left; }
.scr-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.scr-bar i { width: 8px; height: 8px; border-radius: 50%; background: #E4E6EA; }
.scr-bar span { margin-left: 6px; font-weight: 600; font-size: 12.5px; }
.scr-bar em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ink-3); border: 1px dashed var(--ink-3); border-radius: 6px; padding: 0 6px; }
.scr-body { background: var(--mist); padding: 12px; display: grid; gap: 8px; }
.s-row, .s-line, .s-inf, .s-kw { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); padding: 10px 12px; }
.s-row b, .s-kw b { display: block; font-size: 13.5px; }
.s-row span, .s-kw span { color: var(--ink-3); font-size: 12px; }
.s-row--hero { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.s-row--hero span:last-child { width: 100%; }
.s-kw strong { color: var(--teal-700); font-size: 14px; }
.s-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.s-line b { font-size: 13px; white-space: nowrap; }
.s-line > span:not(.s-chip) { color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-tabs { display: flex; gap: 4px; overflow: hidden; }
.s-tabs span { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 5px 9px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); white-space: nowrap; }
.s-tabs span.on { background: var(--ink); color: #fff; box-shadow: none; }
.s-auto { background: var(--teal-50); border-radius: 12px; padding: 9px 12px; font-weight: 600; color: var(--teal-900); }
.s-auto b { font-size: 10.5px; color: #fff; background: var(--accent); border-radius: 6px; padding: 1px 6px; margin-right: 4px; }
.s-inf-top { display: flex; align-items: center; gap: 8px; }
.s-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-100); color: var(--teal-900); font-weight: 600; display: grid; place-items: center; flex: none; }
.s-grade { margin-left: auto; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.s-grade.g1 { background: #F0F1F3; color: var(--ink-2); } .s-grade.g2 { background: var(--teal-50); color: var(--teal-700); } .s-grade.g3 { background: var(--accent); color: #fff; }
.s-inf dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; }
.s-inf dt { font-size: 10.5px; color: var(--ink-3); } .s-inf dd { margin: 0; font-weight: 600; font-size: 12.5px; }
.s-chip { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 9px; background: #F0F1F3; color: var(--ink-2); white-space: nowrap; }
.s-chip--teal { background: var(--teal-50); color: var(--teal-700); } .s-chip--pink { background: var(--pink-100); color: #DA2872; } .s-chip--ink { background: var(--ink); color: #fff; }
.s-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s-kpis div { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); padding: 10px; text-align: center; }
.s-kpis b { display: block; font-size: 17px; font-weight: 600; color: var(--teal-700); letter-spacing: -0.03em; } .s-kpis span { font-size: 11px; color: var(--ink-3); }
.s-help { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; padding-inline: 2px; }
.s-cta { background: var(--teal-600); color: #fff; font-weight: 600; text-align: center; border-radius: 12px; padding: 10px; }
.s-check { width: 18px; height: 18px; border-radius: 6px; background: var(--teal-600); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--teal-600); flex: none; }
.s-check--off { background: #fff; box-shadow: 0 0 0 1px var(--line); }

.track [data-scr] { margin-top: 14px; max-width: 440px; }
.tmap-col { cursor: pointer; }
.tmap-col.no-scr { cursor: default; }
.tmap-col.no-scr:hover { transform: none; box-shadow: 0 0 0 1px var(--line); }
.tmap-col.is-on { box-shadow: 0 0 0 1px var(--teal-500), var(--shadow-card); }
.tmap-col.is-on::before { background: var(--accent); }
.tmap-screen { margin: 18px auto 0; max-width: 520px; }
.tmap-screen.swap { animation: revealIn .4s ease both; }
.tmap-screen-cap { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; text-align: center; }
.tmap-screen-cap b { color: var(--teal-700); margin-right: 6px; }
.tiers { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tier { background: #fff; border-radius: var(--radius-m); padding: 24px; box-shadow: 0 0 0 1px var(--line); opacity: .78; }
.tier.is-now { opacity: 1; box-shadow: 0 0 0 1px var(--teal-500); }
.tier-state { font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--mist); border-radius: 99px; padding: 2px 10px; }
.tier.is-now .tier-state { color: var(--teal-700); background: var(--teal-50); }
.tier h3 { font-size: 20px; font-weight: 600; margin-top: 12px; }
.tier-price { font-size: 26px; font-weight: 600; letter-spacing: -0.04em; margin-top: 2px; }
.tier-price small { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.tier ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; color: var(--ink-2); }
.tier li::before { content: "·"; margin-right: 6px; color: var(--teal-600); font-weight: 600; }
.tier { display: flex; flex-direction: column; align-items: flex-start; }
.tier-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tier-price s { font-size: 17px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.tier.is-now .tier-price { font-size: 32px; }
.tier-cta { margin-top: auto; width: 100%; }
.tier ul { margin-bottom: 22px; }
.tier-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ---------- 전후 결과(검색 화면) ---------- */
.result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.ba { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 16px; background: var(--mist); }
.ba button { min-height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--ink-3); }
.ba button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.serp-stage { position: relative; }   /* 2026-10-19 위에 얹던 로봇(.serp-robot) 제거로 윗여백도 뺌 */
.serp-robot { position: absolute; left: 50%; top: 0; width: 96px; height: 67px; margin-left: -48px; z-index: 0; animation: bob 3.4s ease-in-out infinite; }
.serp { position: relative; z-index: 1; background: #fff; border-radius: var(--radius-l); padding: 16px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -32px rgba(30, 37, 52, .5); display: grid; gap: 10px; }
.serp-bar { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--teal-500); font-weight: 600; font-size: 17px; }
.serp-bar svg { width: 20px; height: 20px; color: var(--teal-600); flex: none; }
.serp-bar em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.serp-caret { width: 2px; height: 20px; background: var(--teal-600); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.serp-hit { display: grid; grid-template-columns: auto minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-m); background: var(--teal-50); box-shadow: inset 0 0 0 1px var(--teal-500); }
.serp-rank { font-size: 20px; font-weight: 600; color: var(--teal-700); letter-spacing: -0.04em; }
.serp-body b { display: block; font-size: 15.5px; line-height: 1.4; letter-spacing: -0.02em; }
.serp-body small { font-size: 12.5px; color: var(--teal-700); font-weight: 600; }
.serp-hit img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.serp-empty { display: none; padding: 18px 14px; border-radius: var(--radius-m); border: 1px dashed var(--line); text-align: center; }
.serp-empty b { display: block; font-size: 15.5px; color: var(--ink-2); }
.serp-empty small { font-size: 13px; color: var(--ink-3); }
.serp-skel { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--line); }
.serp-skel i { display: block; height: 10px; border-radius: 99px; background: #E4E6EA; }
.serp-skel i:last-child { width: 60%; }
.serp[data-state="before"] .serp-hit { display: none; }
.serp[data-state="before"] .serp-empty { display: block; }
.serp[data-state="after"] .serp-hit { animation: hitIn .55s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes hitIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }

/* ---------- 시간 순서 지도 ---------- */
.tmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: tm; }
.tmap-col { counter-increment: tm; position: relative; background: #fff; border-radius: var(--radius-m); padding: 22px 18px 20px; box-shadow: 0 0 0 1px var(--line); transition: transform .18s, box-shadow .18s; }
.tmap-col:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--teal-500), var(--shadow-card); }
.tmap-col::before { content: counter(tm); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal-600); color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 12px; position: relative; z-index: 1; }
.tmap-col:not(:last-child)::after { content: ""; position: absolute; left: 48px; right: -30px; top: 36px; height: 3px; background: var(--teal-100); }
.tmap-col h3 { font-size: 18px; font-weight: 600; }
.tmap-when { font-size: 13px; color: var(--ink-3); margin: 2px 0 14px; min-height: 2.6em; }
.tmap-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tmap-col li b { display: block; font-size: 14.5px; letter-spacing: -0.02em; }
.tmap-col li span { font-size: 13px; color: var(--ink-2); line-height: 1.5; display: block; }
.tmap-col li em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 99px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; }
.tmap-pay { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 3px 10px; color: var(--teal-700); background: var(--teal-50); }
.tmap-pay.is-pay { color: #DA2872; background: var(--pink-100); }

/* ---------- 누적 그래프 ---------- */
.grow { margin-top: 20px; background: #fff; border-radius: var(--radius-l); padding: clamp(20px, 3vw, 32px); box-shadow: 0 0 0 1px var(--line); }

.grow-chart { position: relative; }
.grow-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.grow-chart text { font-family: var(--font); font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.grow-chart .g-end { font-size: 15px; font-weight: 600; fill: var(--ink); }

.grow-tip { position: absolute; top: 0; left: 0; pointer-events: none; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 10px; white-space: nowrap; transform: translate(-50%, -130%); opacity: 0; transition: opacity .12s; }
.grow-tip.show { opacity: 1; }

.ft-link { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.mm-row--quiet { font-size: 14px !important; font-weight: 500 !important; color: var(--ink-3); padding-block: 10px !important; }

/* ---------- 반응형 ---------- */
@media (max-width: 960px) {
  .ov { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 14px; padding-left: 30px; }
  .ov-rail { left: 11px; right: auto; top: 12px; bottom: 30px; width: 4px; height: auto; }
  .ov-rail i { width: 100% !important; height: 100%; background: linear-gradient(180deg, #36B7C5, #DA2872); }
  .ov.will-draw .ov-rail i { height: 0; } .ov.drawn .ov-rail i { height: 100%; transition: height 1.8s ease; }
  .ov-col { grid-row: auto; grid-template-rows: none; gap: 8px; background: #fff; border-radius: var(--radius-m); padding: 14px; box-shadow: 0 0 0 1px var(--line); }
  .ov-when { text-align: left; padding: 0; display: flex; align-items: baseline; gap: 8px; }
  .ov-dot { position: absolute; left: -31px; top: 14px; margin: 0; }
  .ov-lab { display: block !important; }
  .ov-cost { justify-self: start; }
  .flow { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .flow-stage { display: none; }
  .flow-inline { display: block; margin-bottom: 16px; max-width: 460px; }
  .flow-step { min-height: 0; padding-bottom: 44px; }
  .flow-step:last-child { min-height: 0; padding-bottom: 0; }
  .flow-step::before { left: -31px; }
  .flow-rail { bottom: 40px; }
  .mini-flow { grid-template-columns: minmax(0, 1fr); }
  .mini-flow li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: center; }
  .mini-flow li::before { margin: 0; grid-row: span 2; }
  .mini-flow li:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -17px; transform: none; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .result { grid-template-columns: minmax(0, 1fr); }
  .tmap { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(78%, 300px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 18px; scroll-padding-left: var(--gutter); scrollbar-width: none; }
  .tmap::-webkit-scrollbar { display: none; }
  .tmap-col { scroll-snap-align: start; }
  .tmap-col:not(:last-child)::after { right: -14px; }
  .grow-seg { min-width: 0; width: 100%; }
  .feat--3, .loop, .azd-price, .unl, .duo, .band { grid-template-columns: minmax(0, 1fr); }
  .worries--row { grid-template-columns: minmax(0, 1fr); }
  .loop li:not(:last-child)::after { right: 50%; margin-right: -15px; top: auto; bottom: -23px; margin-top: 0; }
  .band-robot { right: 20px; top: -46px; width: 76px; height: 53px; }
  .nav, .hd-login { display: none; }
  .hd-burger { display: grid; }
  .demo, .roles, .talk, .self, .faq { grid-template-columns: minmax(0, 1fr); }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .reviews { grid-template-columns: minmax(0, 1fr); }
  .dock { display: flex; }
  body.dock-on .kakao, body.dock-on .notes-btn { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .who { grid-template-columns: minmax(0, 1fr); }
  .sum-chips li { min-width: 0; flex: 1 1 28%; padding: 10px 12px; font-size: 12.5px; } .sum-chips b { font-size: 18px; }
   
  .s-inf dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo .steps { display: none; }
  .demo-stage { justify-items: stretch; gap: 12px; }
  .deck-title { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; }
  .deck-title i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--teal-700); background: var(--teal-50); border-radius: 99px; padding: 2px 10px; white-space: nowrap; }
  .deck-title.swap { animation: revealIn .35s ease both; }
  .phone { max-width: none; aspect-ratio: auto; background: none; padding: 0; border-radius: 0; box-shadow: none; margin-inline: calc(var(--gutter) * -1); width: auto; }
  .phone-in { display: flex; gap: 12px; height: auto; background: none; border-radius: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding: 4px var(--gutter) 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .phone-in::-webkit-scrollbar { display: none; }
  .phone-in::after { content: ""; flex: 0 0 8%; }
  
  .scene, .scene.on { position: relative; inset: auto; flex: 0 0 84%; min-height: 400px; transform: none; pointer-events: auto; scroll-snap-align: start; background: #fff; border-radius: 24px; padding: 18px 16px; box-shadow: 0 0 0 1px var(--line), 0 18px 34px -24px rgba(30, 37, 52, .5); font-size: 13.5px; }
  .scene { opacity: .55; transition: opacity .35s; }
  .scene.on { opacity: 1; }
  .scene:not(.on) .m-store, .scene:not(.on) .m-set { opacity: 1; transform: none; }
  
  .deck-dots { display: flex; justify-content: center; align-items: center; gap: 7px; }
  .deck-dot { width: 8px; height: 8px; border-radius: 99px; background: #C9CDD4; position: relative; overflow: hidden; transition: width .3s; }
  .deck-dot.on { width: 46px; }
  .deck-dot i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--accent); border-radius: 99px; }
  .deck-dot.on.run i { animation: fill var(--scene-ms, 3500ms) linear forwards; }
  .deck-dots.stopped .deck-dot.on i { transform: none; }
  .deck-hint { display: block; margin: 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-3); min-height: 1.4em; }
  .bubble { left: 58%; top: -10px; max-width: 46vw; font-size: 13px; padding: 8px 12px; }
  .promise { grid-template-columns: minmax(0, 1fr); }
  .pay.will-draw:not(.drawn) li::before { transform: scaleY(0); } .pay li::before { transform-origin: top; }
  .track li { padding: 20px 18px 20px 66px; } .track li::before { left: 16px; top: 20px; }
  .starter-card { transform: none; }
  :root { --hd-h: 58px; --gutter: 18px; }
  .hd-in { gap: 10px; }
  .logo { font-size: 22px; }
  .logo small { display: none; }
  .robot-stage { width: 164px; margin-bottom: -28px; }
  .hand { width: 38px; height: 26px; }
  .hand--l { left: calc(50% - 88px); } .hand--r { left: calc(50% + 50px); }
  .field { flex-direction: column; }
  .field .btn3d { width: 100%; }
  .btn-row > * { flex: 1 1 100%; }
  .steps { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { scroll-snap-align: center; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  .cases { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 22px; scrollbar-width: none; }
  .cases::-webkit-scrollbar { display: none; }
  .case { scroll-snap-align: center; }
  .pay { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pay li { padding: 0 0 26px 46px; }
  .pay li::before { left: 13px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .pay li:last-child::before { background: linear-gradient(180deg, var(--teal-100), transparent); }
  .pay-dot { position: absolute; left: 0; top: 0; }
  .pay-when { margin-top: 0; padding-top: 4px; }
  .todo { grid-template-columns: minmax(0, 1fr); }
   
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .m-store, .m-set { opacity: 1; transform: none; }
}

/* ---------- 속도: 화면 밖 섹션의 끝없는 움직임은 멈춘다 ---------- */
.is-off .robot, .is-off .rb-eye, .is-off .rb-ant-ball, .is-off .guide svg, .is-off .serp-robot, .is-off .serp-caret, .is-off .final-robot, .is-off .band-robot, .is-off .dots i, .is-off .btn3d--azd::after, .hero.is-off::before, .hero.is-off::after { animation-play-state: paused; }

.deck-dot::after { content: ""; position: absolute; inset: -16px -5px; }

/* ==========================================================
   홈 재기획 (2026-09-21) — 섹션마다 다른 생김새
   ========================================================== */

/* 첫 화면: 실제 1위 사례가 흘러가는 띠 */
.ticker { position: relative; z-index: 1; margin-top: 64px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track { display: flex; gap: 12px; width: max-content; animation: tick 46s linear infinite; }
.ticker-track span { flex: none; font-size: 14px; font-weight: 500; color: var(--ink-2); background: #fff; border-radius: 99px; padding: 8px 16px; box-shadow: 0 0 0 1px var(--line); }
.ticker-track b { color: var(--teal-700); font-weight: 600; margin-right: 4px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* 2. 합친 섹션: 사장님은 이것만 / 나머지는 알잘딱매니저가 */
.orbit { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px; }
.orbit-me, .orbit-azd { border-radius: var(--radius-l); padding: clamp(24px, 3vw, 40px); }
.orbit-me { background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: flex-start; }
.orbit-azd { position: relative; background: linear-gradient(160deg, var(--teal-50), var(--pink-50)); box-shadow: 0 0 0 1px var(--line); }
.orbit-cap { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.orbit-me .orbit-cap { color: var(--teal-300); } .orbit-azd .orbit-cap { color: var(--teal-700); }
.strong-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; flex: 1; align-content: space-evenly; }
.strong-chips li { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .78); display: grid; gap: 2px; }
.strong-chips b { font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -1px; color: #fff; line-height: 1.2; }
.orbit-robot { position: absolute; right: 24px; top: -34px; width: 88px; height: 62px; animation: bob 3.4s ease-in-out infinite; }
.orbit-chips { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.orbit-chips li { background: #fff; border-radius: 99px; padding: 10px 16px; font-size: 15px; font-weight: 400; box-shadow: 0 0 0 1px var(--line); display: inline-flex; align-items: center; gap: 8px; }
.orbit-chips li::before { content: none; }
.demo + .orbit + .talk { margin-top: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }

/* 3. 결과: 짙은 배경 + 사진 */
.sec--dark { background: radial-gradient(70% 55% at 85% 0%, rgba(50, 87, 130, .55), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(54, 183, 197, .16), transparent 70%), var(--ink-900); color: #fff; }
.sec--dark .eyebrow { color: var(--teal-100); background: none; }
.sec--dark .sec-title { color: #fff; }
.sec--dark .hl { background: none; }
.sec--dark .sec-lead { color: var(--line-strong); }
.sec--dark .ba { background: rgba(255, 255, 255, .1); }
.sec--dark .ba button { color: var(--line-strong); }
.sec--dark .ba button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.sec--dark .serp { color: var(--ink); }
.sec--dark .count, .sec--dark .cases-more small, .sec--dark .pcases-hint { color: var(--line-strong); }
.sec--dark .count b, .sec--dark .link-arrow { color: var(--teal-300); }

.pcases-top { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: clamp(40px, 6vw, 72px) 0 16px; }
.pcases-hint { font-size: 13px; margin: 0; }
.pcases { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.pcases::-webkit-scrollbar { display: none; }
.pcases.is-flow { scroll-snap-type: none; }
.pcase { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-l); overflow: hidden; scroll-snap-align: start; background: #333C4D; transition: transform .2s; }
.pcase:hover { transform: translateY(-6px); }
.pcase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcase::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(transparent, rgba(17, 24, 39, .92)); }
.pcase-rank { position: absolute; left: 14px; top: 14px; z-index: 1; font-size: 15px; font-weight: 600; color: var(--teal-800); background: #fff; border-radius: 99px; padding: 4px 14px; }
.pcase-body { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: grid; gap: 2px; }
.pcase-body b { font-size: 22px; letter-spacing: -1px; line-height: 1.25; }
.pcase-body span { font-size: 13px; color: rgba(255, 255, 255, .82); }

/* 6. 직접 운영: 분홍빛 띠 */
.sec--pink { background: linear-gradient(180deg, var(--pink-50), #fff); }

/* 7. 신뢰: 청록 띠 + 말풍선 후기 */
.sec--cyan { background: linear-gradient(135deg, var(--teal-700), var(--teal-900)); color: #fff; overflow: hidden; }
.sec--cyan .eyebrow { color: #fff; background: none; } .sec--cyan .eyebrow::before { background: #fff; } .sec--cyan .sec-title { color: #fff; }
.sec--cyan .stats { border-color: rgba(255, 255, 255, .22); }
.sec--cyan .stat { border-color: rgba(255, 255, 255, .22); }
.sec--cyan .stat > span { color: rgba(255, 255, 255, .82); }

.rv-marquee { margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rv-track { display: flex; gap: 16px; width: max-content; animation: tick 70s linear infinite; padding: 4px 8px 18px; }
.rv-marquee:hover .rv-track { animation-play-state: paused; }
.rv-dup { display: flex; gap: 16px; }
.rv { flex: none; width: min(340px, 78vw); margin: 0; background: #fff; color: var(--ink); border-radius: 20px 20px 20px 4px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.rv b { font-size: 16px; letter-spacing: -0.5px; }
.rv blockquote { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.rv figcaption { font-size: 12.5px; color: var(--ink-3); }

/* 하단 고정 버튼: 디자인 시스템의 「버튼 위 말풍선」 형태 */
.dock { flex-direction: column; gap: 8px; padding-top: 0; background: transparent; border-top: 0; backdrop-filter: none; }
.dock-tip { position: relative; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--ink-2); border-radius: 99px; padding: 6px 14px; }
.dock-tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; background: var(--ink-2); transform: translateX(-50%) rotate(45deg); }
.dock .btn3d { width: 100%; }
.dock::before { content: ""; position: absolute; inset: 22px 0 0 0; background: linear-gradient(transparent, #fff 35%); z-index: -1; }

@media (max-width: 960px) {
  .orbit { grid-template-columns: minmax(0, 1fr); }
  .pcases { grid-auto-columns: 42%; }
  
  body.dock-on .kakao, body.dock-on .notes-btn { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .pcases { grid-auto-columns: 70%; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-left: var(--gutter); }
  .orbit-robot { width: 68px; height: 48px; top: -26px; right: 16px; }
  .orbit-chips li { font-size: 14px; padding: 8px 13px; }
}
.is-off .ticker-track, .is-off .rv-track, .is-off .orbit-robot { animation-play-state: paused; }

@media (max-width: 640px) {
  .kakao { width: 46px; height: 46px; font-size: 10.5px; right: 12px; }
  .notes-btn { min-height: 32px; padding: 0 10px; font-size: 11.5px; left: 12px; opacity: .85; }
}

/* ---------- 9/21 수정: 폰에서 섹션 경계가 보이도록 여백 확대 ---------- */
.sec { padding-block: clamp(80px, 8.2vw, 104px); }   /* 2026-10-19 디렉터: 128/96 → 104/80 */
.sec-head { margin-bottom: clamp(36px, 4vw, 56px); }
.sec--final { padding-block: clamp(72px, 7.5vw, 96px); }
.pay li.paid .pay-amt { color: var(--pink-400); }
@media (max-width: 640px) {
  .hero { padding-bottom: 72px; }
  .orbit { margin-top: 64px; }
  .demo + .orbit + .talk { margin-top: 24px; }
  .demo-stage { margin-top: 8px; }
  .pcases-top { margin-top: 64px; }
  .cases-more { margin-top: 28px; }
  
  .pay-foot { margin-top: 28px; }
  
  .rv-marquee { margin-top: 48px; }
  .faq { gap: 36px; }
  .ph { padding-block: 56px 48px; }
}

/* ===== 실제 화면과 같은 디자인의 코드 샘플 (2026-09-21) — 실제 캡처를 옆에 두고 옮겼다. 크기는 모두 화면 폭 비례(--u), 움직임은 transform·opacity 만 ===== */
.phone--real { aspect-ratio: 390 / 844; max-width: 310px; }
.phone--real .phone-in { background: #fff; }
.scene--app { inset: 0; padding: 0; container-type: inline-size; overflow: hidden; }
.app { --u: calc(100cqw / 390); position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #1E2534; letter-spacing: -0.02em; text-align: left; overflow: hidden; }
.app h5, .app p { margin: 0; }
.app-chev { display: inline-block; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-left: calc(2 * var(--u)) solid #1E2534; border-bottom: calc(2 * var(--u)) solid #1E2534; transform: rotate(45deg); flex: none; }
.app-chev--r { transform: rotate(-135deg); border-color: #1AACBC; width: calc(8 * var(--u)); height: calc(8 * var(--u)); }

.app-chev--solo { margin: calc(22 * var(--u)) 0 0 calc(22 * var(--u)); }
.app-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); }
.app-bar b { font-size:calc(16 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; }
.app-bar u { justify-self: end; font-size:calc(13 * var(--u));font-weight:500;color:#A0A7B4;line-height:1.4; }
.app-prog { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(4 * var(--u)); }
.app-prog i { height: calc(2 * var(--u)); background: #E4E6EA; } .app-prog i.on { background: #36B7C5; }
.app-body { padding: calc(28 * var(--u)) calc(20 * var(--u)) 0; display: flex; flex-direction: column; min-height: 0; }
.app-t { font-size:calc(18 * var(--u));font-weight: 600;color:#1E2534;line-height:1.45; }
.app-s { margin-top: calc(8 * var(--u)) !important; font-size:calc(13 * var(--u));font-weight:400;color:#72798A;line-height:1.4; }
.app-foot { margin-top: auto; padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); position: relative; background: #fff; }

.app-btn { display: grid; place-items: center; height: calc(56 * var(--u)); border-radius: calc(10 * var(--u)); background: #4ABECB; font-size:calc(16 * var(--u));font-weight:600;color:#fff;line-height:1.4; }

.app-sum { display: flex; justify-content: space-between; margin-bottom: calc(14 * var(--u)); font-size:calc(15 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; } .app-sum em { font-style: normal; color: #1AACBC; }
/* 1. 가게 */
.app--home { background: radial-gradient(circle at 50% 38%, #fff 0 30%, #F4F7FA 70%); }
.app-robot { width: calc(96 * var(--u)); height: calc(68 * var(--u)); margin: calc(8 * var(--u)) auto 0; display: block; flex: none; }
.app-hero-t { margin-top: calc(10 * var(--u)) !important; text-align: center; font-size:calc(21 * var(--u));font-weight: 600;color:#1E2534;line-height:1.4; }
.app-hero-s { margin-top: calc(18 * var(--u)) !important; text-align: center; font-size:calc(14 * var(--u));font-weight:400;color:#72798A;line-height:1.6; }
.app-low { margin-top: auto; padding: 0 calc(14 * var(--u)) calc(14 * var(--u)); display: grid; gap: calc(18 * var(--u)); }
.app-pills { display: flex; gap: calc(8 * var(--u)); margin-inline: calc(-40 * var(--u)) calc(-14 * var(--u)); overflow: hidden; white-space: nowrap; }
.app-pills span { flex: none; background: #fff; border-radius: 99px; padding: calc(10 * var(--u)) calc(16 * var(--u)); font-size:calc(13 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(30,37,52,.06); }
.app-search { display: flex; align-items: center; justify-content: space-between; background: #fff; border: calc(1.5 * var(--u)) solid #36B7C5; border-radius: calc(16 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(20 * var(--u)); font-size:calc(15 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; }
.app-search b { display: grid; place-items: center; width: calc(96 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(200deg, #DA2872, #36B7C5); font-size:calc(14 * var(--u));font-weight:600;color:#fff;line-height:1.4; }
.app-first { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.9); border-radius: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); box-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(30,37,52,.05); }
.app-first b { display: block; font-size:calc(15 * var(--u));font-weight: 600;color:#258FA0;line-height:1.4; } .app-first span { display: block; margin-top: calc(4 * var(--u)); font-size:calc(12.5 * var(--u));font-weight:500;color:#4E5668;line-height:1.4; }
.app-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #E4E6EA; background: #FBFBFC; padding: calc(12 * var(--u)) 0 calc(10 * var(--u)); }
.app-tabbar span { display: grid; justify-items: center; gap: calc(4 * var(--u)); font-size:calc(11 * var(--u));font-weight:500;color:#4E5668;line-height:1.4; } .app-tabbar span.on { color: #1AACBC; font-weight: 600; }
.app-tabbar svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.app-dim { position: absolute; inset: 0; background: rgba(30,37,52,.5); opacity: 0; }
.app-dialog { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: 33%; background: #fff; border-radius: calc(20 * var(--u)); padding: calc(24 * var(--u)); opacity: 0; transform: translateY(calc(16 * var(--u))) scale(.97); }
.app-dialog-h { display: flex; justify-content: space-between; align-items: center; font-size:calc(17 * var(--u));font-weight: 600;color:#1E2534;line-height:1.4; } .app-dialog-h i { font-style: normal; font-weight: 400; font-size: calc(18 * var(--u)); }
.app-store { margin-top: calc(18 * var(--u)); display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--u)); background: #EDF8F9; border: calc(1.5 * var(--u)) solid #36B7C5; border-radius: calc(12 * var(--u)); padding: calc(12 * var(--u)); }
.app-store b { display: block; font-size:calc(15 * var(--u));font-weight: 600;color:#1E2534;line-height:1.4; } .app-store span { display: block; margin-top: calc(6 * var(--u)); font-size:calc(12.5 * var(--u));font-weight:400;color:#72798A;line-height:1.4; }
.app-store .fph { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(30 * var(--u)); }
.app-grad-btn { margin-top: calc(16 * var(--u)); display: grid; place-items: center; height: calc(52 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(90deg, #36B7C5, #DA2872); font-size:calc(15 * var(--u));font-weight:600;color:#fff;line-height:1.4; }
.app-links { margin-top: calc(18 * var(--u)); display: flex; justify-content: center; gap: calc(22 * var(--u)); font-size:calc(13 * var(--u));font-weight:500;color:#4E5668;line-height:1.4; }
.scene.on .app-dim { animation: appFade .35s ease 1.2s forwards; }
.scene.on .app-dialog { animation: appPop .45s cubic-bezier(.2, 1.2, .4, 1) 1.3s forwards; }
@keyframes appFade { to { opacity: 1; } }
@keyframes appPop { to { opacity: 1; transform: none; } }
.fph { display: grid; place-items: center; font-style: normal; flex: none; position: relative; overflow: hidden; }
.fph--a { background: linear-gradient(135deg, #F6D9A8, #E9A96B); } .fph--b { background: linear-gradient(135deg, #EBC89A, #C98B55); } .fph--c { background: linear-gradient(135deg, #D9C2AE, #8A6248); }
/* 2. 모집 인원 */
.app-stepper { margin-top: calc(44 * var(--u)); display: flex; justify-content: center; align-items: flex-start; gap: calc(24 * var(--u)); }
.app-stepper > i { display: grid; place-items: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); margin-top: calc(8 * var(--u)); border-radius: 50%; border: 1px solid #E4E6EA; font-style: normal; font-size: calc(24 * var(--u)); font-weight: 300; color: #1E2534; }
.app-stepper div { text-align: center; } .app-stepper b { display: block; font-size:calc(40 * var(--u));font-weight: 600;color:#1AACBC;line-height:1.1; } .app-stepper span { font-size:calc(13 * var(--u));font-weight:500;color:#72798A;line-height:1.4; }
.app-slider { position: relative; margin-top: calc(34 * var(--u)); height: calc(8 * var(--u)); border-radius: 99px; background: #E4E6EA; }
.app-slider-fill { position: absolute; inset: 0; border-radius: 99px; background: #36B7C5; transform-origin: left; transform: scaleX(.5); }
.app-slider-knob { position: absolute; inset: 0; transform: translateX(50%); } .app-slider-knob i { position: absolute; left: calc(-11 * var(--u)); top: calc(-7 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #fff; border: calc(3 * var(--u)) solid #36B7C5; box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(30,37,52,.15); }
.scene.on .app-slider-fill { animation: appFill 1.1s cubic-bezier(.3, .8, .3, 1) .4s both; } .scene.on .app-slider-knob { animation: appKnob 1.1s cubic-bezier(.3, .8, .3, 1) .4s both; }
@keyframes appFill { from { transform: scaleX(0); } } @keyframes appKnob { from { transform: translateX(0); } }
.app-tip { margin-top: calc(40 * var(--u)); background: #EDF8F9; border-radius: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(16 * var(--u)); } .app-tip b { font-size:calc(14 * var(--u));font-weight: 600;color:#1AACBC;line-height:1.4; } .app-tip p { margin-top: calc(6 * var(--u)) !important; font-size:calc(13.5 * var(--u));font-weight:500;color:#1E2534;line-height:1.6; }
.app-repeat { margin-top: calc(16 * var(--u)) !important; font-size:calc(13 * var(--u));font-weight:500;color:#72798A;line-height:1.4; }

  

  
.app-radios { margin-top: calc(22 * var(--u)); display: flex; gap: calc(18 * var(--u)); font-size:calc(15 * var(--u));font-weight:600;color:#A0A7B4;line-height:1.4; } .app-radios span { display: flex; align-items: center; gap: calc(8 * var(--u)); } .app-radios span.on { color: #1AACBC; }
.app-radios i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid #E4E6EA; } .app-radios .on i { border-color: #36B7C5; background: radial-gradient(#36B7C5 0 45%, #fff 50%); }
  
.app-swap { margin-top: calc(10 * var(--u)); display: grid; } .app-swap > * { grid-area: 1 / 1; }
.app-ai-btn { align-self: start; display: grid; place-items: center; height: calc(48 * var(--u)); border-radius: calc(10 * var(--u)); background: linear-gradient(90deg, #7857F0, #36B7C5); font-size:calc(15 * var(--u));font-weight:600;color:#fff;line-height:1.4; }
.app-set { background: #fff; border: 1px solid #E4E6EA; border-radius: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(16 * var(--u)); opacity: 0; transform: translateY(calc(14 * var(--u))); }
.app-set-h { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size:calc(15 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; } .app-set-h span { color: #5B7BEA; } .app-set-h em { font-style: normal; background: #EDF8F9; border-radius: calc(6 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)); font-size:calc(12.5 * var(--u));font-weight:600;color:#1AACBC;line-height:1.4; }
.app-set-t { margin-top: calc(14 * var(--u)) !important; font-size:calc(14.5 * var(--u));font-weight:600;color:#1E2534;line-height:1.55; } .app-set-s { margin-top: calc(6 * var(--u)) !important; font-size:calc(12.5 * var(--u));font-weight:400;color:#72798A;line-height:1.4; }
.app-thumbs { margin-top: calc(12 * var(--u)); display: flex; gap: calc(8 * var(--u)); } .app-thumbs .fph { width: calc(88 * var(--u)); height: calc(88 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(38 * var(--u)); opacity: 0; transform: scale(.9); }
.scene.on .app-ai-btn { animation: appOut .3s ease 1s forwards; } .scene.on .app-set { animation: appPop .5s ease 1.2s forwards; } .scene.on .app-thumbs .fph { animation: appPop .4s ease forwards; } .scene.on .app-thumbs .fph:nth-child(1) { animation-delay: 1.5s; } .scene.on .app-thumbs .fph:nth-child(2) { animation-delay: 1.65s; } .scene.on .app-thumbs .fph:nth-child(3) { animation-delay: 1.8s; }
@keyframes appOut { to { opacity: 0; } }
/* 4. 예약 방식 */
.app-opt { position: relative; margin-top: calc(14 * var(--u)); border: 1px solid #E4E6EA; border-radius: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(16 * var(--u)); } .app-body .app-opt:first-of-type { margin-top: calc(30 * var(--u)); }
.app-opt::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: #EDF8F9; border: calc(1.5 * var(--u)) solid #36B7C5; opacity: 0; } .app-opt > * { position: relative; }
.app-opt span { display: block; font-size: calc(30 * var(--u)); line-height: 1.2; } .app-opt b { display: block; margin-top: calc(10 * var(--u)); font-size:calc(16 * var(--u));font-weight: 600;color:#1E2534;line-height:1.4; } .app-opt p { margin-top: calc(4 * var(--u)) !important; font-size:calc(12.5 * var(--u));font-weight:400;color:#72798A;line-height:1.65; }
.app-btn--wake { position: relative; overflow: hidden; } .app-btn--wake::before { content: "다음으로"; position: absolute; inset: 0; display: grid; place-items: center; background: #EEF0F2; color: #C9CDD4; }
.scene.on .app-opt--pick::before { animation: appFade .3s ease .9s forwards; } .scene.on .app-btn--wake::before { animation: appOut .3s ease 1.2s forwards; }
/* 광고주센터 화면 */
.talk--real { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.talk-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.talk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.talk-tags li { font-size: 14px; font-weight: 600; color: var(--teal-800); background: #fff; border-radius: 99px; padding: 6px 14px; box-shadow: 0 0 0 1px var(--line); }
.real-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.real-shot { margin: 0; position: relative; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
.real-shot figcaption { position: absolute; right: 10px; top: 10px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(30, 37, 52, .82); border-radius: 99px; padding: 3px 10px; }
.real-shot--dash { grid-column: 1 / -1; }

.adm { container-type: inline-size; }
.adm-in { --u: calc(100cqw / var(--dw)); color: #1E2534; letter-spacing: -0.02em; text-align: left; overflow: hidden; }
.adm-in p { margin: 0; }
.adm-dash { padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); } .adm-h { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size:calc(18 * var(--u));font-weight: 600;color:#1E2534;line-height:1.4; } .adm-h b { color: #1AACBC; } .adm-h .app-chev { margin-left: auto; margin-right: calc(90 * var(--u)); border-color: #72798A; }
.adm-camps { margin-top: calc(16 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); }
.adm-camp { display: flex; align-items: center; gap: calc(12 * var(--u)); border: 1px solid #E4E6EA; border-radius: calc(14 * var(--u)); padding: calc(10 * var(--u)); min-width: 0; } .adm-camp > div { min-width: 0; }
.adm-camp .fph { width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(38 * var(--u)); } .adm-camp .fph i { position: absolute; left: 0; top: 0; font-style: normal; background: rgba(30,37,52,.75); border-radius: 0 0 calc(8 * var(--u)) 0; padding: calc(2 * var(--u)) calc(8 * var(--u)); font-size:calc(11 * var(--u));font-weight: 600;color:#fff;line-height:1.4; }
.adm-camp b { display: block; font-size:calc(13.5 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-camp span { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); font-size:calc(12 * var(--u));font-weight:500;color:#1E2534;line-height:1.4; }
.adm-camp u { text-decoration: none; border-radius: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; } .c-brand { background: #EDF8F9; color: #1AACBC; } .c-accent { background: #FDE8F1; color: #DA2872; }
.adm-camp--add > em { display: grid; place-items: center; width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: calc(10 * var(--u)); background: #F7F8F9; font-style: normal; font-size: calc(22 * var(--u)); color: #A0A7B4; flex: none; } .adm-camp--add b { color: #A0A7B4; white-space: normal; line-height: 1.5; } .adm-camp--add span { color: #A0A7B4; font-size: calc(11 * var(--u)); white-space: nowrap; }
.adm-select { padding-bottom: calc(18 * var(--u)); } .adm-sel-h { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(18 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid #E4E6EA; font-size:calc(15 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; } .adm-sel-h u { text-decoration: none; border: 1px solid #E4E6EA; border-radius: calc(4 * var(--u)); padding: calc(1 * var(--u)) calc(6 * var(--u)); font-size:calc(10.5 * var(--u));font-weight:600;color:#72798A;line-height:1.4; } .adm-sel-h b { color: #1AACBC; }
.adm-cands { display: flex; gap: calc(18 * var(--u)); padding: calc(18 * var(--u)) 0 0 calc(16 * var(--u)); width: max-content; }
.adm-cand { width: calc(380 * var(--u)); background: #EDF8F9; border: calc(1.5 * var(--u)) solid #36B7C5; border-radius: calc(10 * var(--u)); padding: calc(14 * var(--u)); }
.adm-cand-top { display: flex; justify-content: space-between; align-items: center; } .adm-cand-top u { text-decoration: none; background: #FDE8F1; border-radius: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(6 * var(--u)); font-size:calc(10.5 * var(--u));font-weight:600;color:#DA2872;line-height:1.4; }
.adm-check { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #36B7C5; position: relative; } .adm-check::after { content: ""; position: absolute; left: 34%; top: 22%; width: 26%; height: 44%; border: solid #fff; border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0; transform: rotate(45deg); }
.adm-who { margin-top: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); } .adm-ava { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; flex: none; }
.adm-who b { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size:calc(13 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; } .adm-who small { background: #B7BCCB; color: #fff; border-radius: calc(4 * var(--u)); padding: 0 calc(4 * var(--u)); font-size: calc(8.5 * var(--u)); } .adm-who span { display: flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(4 * var(--u)); font-size:calc(10.5 * var(--u));font-weight:500;color:#4E5668;line-height:1.4; } .adm-who span i { display: grid; place-items: center; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #111; color: #2DDB6B; font-style: normal; font-size: calc(9 * var(--u)); font-weight: 600; } .adm-who s { margin-left: auto; text-decoration: none; font-size: calc(18 * var(--u)); }
.adm-msg { margin-top: calc(12 * var(--u)) !important; background: #fff; border-radius: calc(10 * var(--u)); padding: calc(12 * var(--u)); min-height: calc(74 * var(--u)); font-size:calc(11.5 * var(--u));font-weight:400;color:#1E2534;line-height:1.6; }
.adm-grid { margin-top: calc(10 * var(--u)); background: #fff; border-radius: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(6 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); row-gap: calc(18 * var(--u)); text-align: center; } .adm-grid span { display: block; font-size:calc(10 * var(--u));font-weight:500;color:#72798A;line-height:1.4; } .adm-grid b { display: block; margin-top: calc(8 * var(--u)); font-size:calc(12 * var(--u));font-weight:600;color:#1E2534;line-height:1.4; } .adm-grid b.dim { color: #72798A; font-weight: 500; }
.adm-more { margin-top: calc(14 * var(--u)) !important; text-decoration: underline; font-size:calc(11.5 * var(--u));font-weight:500;color:#4E5668;line-height:1.4; }
.adm-rank { padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); } .adm-rep-h { display: flex; align-items: center; gap: calc(12 * var(--u)); padding-right: calc(110 * var(--u)); font-size:calc(15 * var(--u));font-weight: 600;color:#1E2534;line-height:1.4; white-space: nowrap; overflow: hidden; } .adm-rep-h .app-chev { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.adm-tabs { margin: calc(16 * var(--u)) calc(-16 * var(--u)) 0; padding: 0 calc(16 * var(--u)); display: flex; gap: calc(24 * var(--u)); border-top: 1px solid #E4E6EA; font-size:calc(12.5 * var(--u));font-weight:500;color:#A0A7B4;line-height:1.4; } .adm-tabs span { padding: calc(14 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)); } .adm-tabs .on { color: #1E2534; font-weight: 600; box-shadow: inset 0 calc(-2 * var(--u)) 0 #1AACBC; }
.adm-kw { margin-top: calc(12 * var(--u)); display: flex; gap: calc(6 * var(--u)); font-size:calc(11 * var(--u));font-weight:500;color:#1E2534;line-height:1.4; } .adm-kw span { border: 1px solid #E4E6EA; border-radius: 99px; padding: calc(5 * var(--u)) calc(10 * var(--u)); } .adm-kw .on { background: #EDF8F9; border-color: #36B7C5; color: #1AACBC; font-weight: 600; } .adm-kw .add { border-color: #36B7C5; color: #1AACBC; }
.adm-meta { margin-top: calc(12 * var(--u)) !important; display: flex; align-items: center; gap: calc(6 * var(--u)); font-size:calc(11.5 * var(--u));font-weight:500;color:#4E5668;line-height:1.4; } .adm-meta b { color: #1E2534; } .adm-meta i { width: 1px; height: calc(10 * var(--u)); background: #E4E6EA; } .adm-meta u { margin-left: auto; text-decoration: none; background: #EDF8F9; border-radius: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(6 * var(--u)); color: #1AACBC; font-size: calc(10.5 * var(--u)); font-weight: 600; }
.adm-buckets { margin-top: calc(12 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); } .adm-buckets div { background: #F7F8F9; border: 1px solid #E4E6EA; border-radius: calc(6 * var(--u)); padding: calc(12 * var(--u)) 0 calc(10 * var(--u)); text-align: center; } .adm-buckets b { display: block; font-size:calc(17 * var(--u));font-weight: 600;color:#1E2534;line-height:1.4; } .adm-buckets span { font-size:calc(9.5 * var(--u));font-weight:500;color:#4E5668;line-height:1.4; }
.adm-table { margin-top: calc(12 * var(--u)); border: 1px solid #E4E6EA; border-radius: calc(8 * var(--u)); overflow: hidden; }
.adm-tr { display: grid; grid-template-columns: calc(82 * var(--u)) calc(40 * var(--u)) calc(150 * var(--u)) calc(72 * var(--u)) minmax(0, 1fr); align-items: center; padding: calc(11 * var(--u)) calc(10 * var(--u)); border-top: 1px solid #F0F1F3; font-size:calc(10.5 * var(--u));font-weight:500;color:#1E2534;line-height:1.4; } .adm-tr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-tr small { color: #72798A; font-size: 1em; }
.adm-th { background: #F7F8F9; border-top: 0; font-weight: 600; } .adm-tr i.h, .adm-tr i.c { display: inline-block; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; margin-right: calc(3 * var(--u)); } .adm-tr i.h { background: #E8457C; } .adm-tr i.c { background: #A0A7B4; margin-left: calc(6 * var(--u)); }
@media (max-width: 640px) {
  .phone--real { aspect-ratio: auto; max-width: none; }
  .scene--app, .scene--app.on { padding: 0; min-height: 0; aspect-ratio: 390 / 660; overflow: hidden; }
  .app-dialog { top: 28%; }
  .real-stack { grid-template-columns: minmax(0, 1fr); }
  .real-shot--dash .adm { --dw: 400 !important; } .adm-camps { grid-template-columns: minmax(0, 1fr); } .adm-camp--add { display: none; } .adm-h .app-chev { display: none; }
  .real-shot--select .adm { --dw: 412 !important; }
  .real-shot--rank .adm { --dw: 400 !important; } .adm-tr { grid-template-columns: calc(38 * var(--u)) calc(92 * var(--u)) minmax(0, 1fr); } .adm-tr > span:first-child, .adm-tr .c-re { display: none; } .adm-tr small { display: none; }
  .talk-tags li { font-size: 13px; padding: 5px 12px; }
  .real-shot { display: flex; flex-direction: column; align-items: flex-start; }
  .real-shot .adm { width: 100%; }
  .real-shot figcaption { position: static; order: -1; margin: 12px 0 0 12px; }
  .adm-rep-h { padding-right: 0; }
}

/* ===== 폰 전용 칩 흐름 (2026-09-21) — 두 줄이 서로 반대로 흐른다. 위치(transform)만 바꾼다 ===== */
.chipflow { display: none; }
@keyframes chipflow { to { transform: translateX(-50%); } }
.is-off .chipflow-track { animation-play-state: paused; }
@media (max-width: 640px) {
  .strong-chips { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .strong-chips li { align-content: start; font-size: 15px; }
  .orbit-chips { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; white-space: nowrap; }
  .chipflow { display: grid; gap: 8px; margin: 0 calc(clamp(24px, 3vw, 40px) * -1) 20px; overflow: hidden; }
  .chipflow-track { display: flex; gap: 8px; width: max-content; padding-right: 8px; animation: chipflow 28s linear infinite; }
  .chipflow-track.rev { animation-direction: reverse; animation-duration: 24s; }
  .chipflow-track span { flex: none; display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px; padding: 8px 13px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
  .chipflow-track span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); flex: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .chipflow-track { animation: none; } .chipflow-row { overflow-x: auto; scrollbar-width: none; }
}

/* ===== 유리 시안 (2026-09-21) — 애플식 투명 유리. 첫 화면 입력창 판 한 곳만. html.glass 일 때만 적용되므로 이 블록을 지우면 원래대로 돌아간다 ===== */
.glass-btn { position: fixed; left: 18px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 39; min-height: 40px; padding: 0 14px; border-radius: 99px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -12px rgba(30, 37, 52, .5); }
.glass-btn[aria-pressed="true"] { background: var(--teal-700); color: #fff; box-shadow: 0 10px 24px -12px rgba(30, 37, 52, .5); }
body.dock-on .glass-btn { bottom: calc(134px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) { .glass-btn { min-height: 32px; padding: 0 10px; font-size: 11.5px; left: 12px; opacity: .9; } body.dock-on .glass-btn { bottom: calc(152px + env(safe-area-inset-bottom, 0px)); } }
.glass-wrap { position: relative; }
.glass .glass-wrap::before { content: none; }  /* 입력 카드 뒤 빛 제거(2026-10-15) */
.glass .starter-card { background: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .72)); border-radius: 28px; padding: 12px;
  box-shadow: none; border: 1px solid var(--line); }
/* (2026-09-21 제거) 첫 화면 입력창 판의 진짜 뒤 흐림 — 판 뒤에서 로봇과 배경 빛이 계속 움직여서, 가만히 있어도 매 프레임 다시 계산됐다. 디렉터 맥북에서 「첫 섹션에서만 버벅인다」로 확인돼 뺐다. 바로 위의 그려서 흉내 낸 규칙이 쓰인다 */
.glass .starter-card .seg { background: #F2F4F6; box-shadow: none; }
.glass .starter-card .seg button { color: var(--ink-2); }
.glass .starter-card .seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(30, 37, 52, .06); }
.glass .starter-card .field input { background: #fff; border-color: var(--line); box-shadow: none; }
.glass .starter-card .field input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 5px rgba(54, 183, 197, .2); }
/* 유리 판은 마우스를 따라 기울이지 않는다 — 뒤를 뿌옇게 하는 판이 움직이면 움직일 때마다 다시 뿌옇게 계산해야 해서 무겁다 */
.glass .starter-card { transform: none; transition: none; }

/* ===== 유리 넓히기 (2026-09-21) — 진짜 뒤 흐림은 움직이지 않는 두 곳(첫 화면 입력창 판, 가격 Starter 카드)만. 나머지는 그려서 흉내 낸다 ===== */
/* 1) 가격 Starter 카드 — 진짜 유리 */
.glass .tiers { position: relative; isolation: isolate; }
.glass .tiers::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: calc((100% - 24px) / 3); border-radius: var(--radius-m); pointer-events: none; background: radial-gradient(70% 60% at 12% 82%, rgba(54, 183, 197, .6), rgba(54, 183, 197, .18) 55%, transparent 75%), radial-gradient(60% 50% at 92% 12%, rgba(218, 40, 114, .36), rgba(218, 40, 114, .1) 55%, transparent 75%); }
.glass .tier.is-now { background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .78)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1.5px 0 #fff, 0 24px 50px -26px rgba(54, 183, 197, .6), 14px 26px 50px -30px rgba(218, 40, 114, .35); }
/* (2026-09-22 제거) 가격 Starter 카드의 진짜 뒤 흐림 — 카드를 넓힌 뒤 디렉터 맥북에서 이 섹션이 버벅였다. 뒤 흐림 면적이 세 배쯤 커졌고, 카드 안의 시작 버튼이 계속 반짝이며 움직여서 카드 전체를 매 프레임 다시 그리게 했다. 이제 사이트 전체에 진짜 뒤 흐림은 0곳이다 */
@media (max-width: 960px) { .glass .tiers::before { width: 100%; bottom: auto; height: 34%; } }

.glass .sec--dark .ba { background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .35); }
/* 3) 상단 메뉴 · 하단 고정 버튼 — 그려서 흉내 (스크롤을 따라다니므로 뒤 흐림을 쓰지 않는다) */
.glass .hd { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom-color: transparent; box-shadow: none; }  /* 뒤 흐림 재도입(2026-10-15 디렉터) — 9/21 버벅임 이력 있음, 체감 확인 필요 */
.glass .hd.is-stuck { border-color: rgba(30, 37, 52, .08); box-shadow: none; }

/* (2026-09-21 제거) 상단 메뉴의 진짜 뒤 흐림 — 디렉터 맥북에서 버벅임의 원인으로 확인돼 뺐다. 위쪽의 `.glass .hd` 그려서 흉내 낸 규칙이 대신 쓰인다 */

/* ===== PC 하단 유리 알약 시안 (2026-09-21) — html.pc-pill 일 때, 폭 961 이상에서만. 첫 화면 입력창이나 마지막 입력창이 보이는 동안은 숨는다(기존 .show 규칙 그대로) ===== */
@media (min-width: 961px) {
  
  .pc-pill .dock { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; left: 50%; right: auto; bottom: 24px; width: max-content; min-width: 560px; max-width: calc(100vw - 48px); padding: 12px 28px 14px 32px; border-radius: 99px; background: transparent; border: 0; transform: translate(-50%, 160%); }
  .pc-pill .dock.show { transform: translate(-50%, 0); }
  .pc-pill .dock::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 99px; background: linear-gradient(100deg, rgba(54, 183, 197, .14), rgba(255, 255, 255, 0) 45%, rgba(218, 40, 114, .1)), linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .92)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1.5px 0 #fff, 0 0 0 1px rgba(30, 37, 52, .06), 0 24px 50px -22px rgba(30, 37, 52, .55); }
  .pc-pill .dock-tip { background: none; color: var(--ink); font-size: 15px; font-weight: 600; padding: 0; border-radius: 0; white-space: nowrap; }
  .pc-pill .dock-tip::after { display: none; }
  .pc-pill .dock .btn3d { width: auto; min-height: 46px; padding: 0 24px; font-size: 15.5px; white-space: nowrap; }
}
/* (2026-09-21 제거) PC 하단 알약의 진짜 뒤 흐림 — 같은 이유로 뺐다. 위쪽의 `.pc-pill .dock::before` 그려서 흉내 낸 규칙이 쓰인다 */
@media (min-width: 961px) { /* PC에서는 검토용 버튼 세 개가 겹치지 않게 자리를 고정한다 */
  body.dock-on .glass-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body.dock-on .glass-btn--hd { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
  .glass-btn--pill, body.dock-on .glass-btn--pill { bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== 폰에서만 제목을 디자인 시스템의 한 단계 작은 이름으로 (2026-09-21 디렉터 결정) — 랜딩은 섹션마다 큰 제목이 반복돼 Headline L 40 이 과하게 컸다. PC는 그대로 ===== */
@media (max-width: 640px) {
  .hero h1, .ph h1 { font-size: 32px; line-height: 40px; letter-spacing: -1.5px; }   /* Headline S (모바일 32/40) */
  .sec-title { font-size: 28px; line-height: 36px; letter-spacing: -1px; }            /* Title L (모바일 28/36) */
}

/* ===== 폰 전반 점검에서 고친 것 (2026-09-21) ===== */
/* 하단 고정 버튼 아래의 흰색 번짐이 짙은 배경·청록 배경 섹션 위에서 흰 안개처럼 떠 보였다 → 번짐을 없애고 버튼 그림자로만 띄운다 */
.dock::before { display: none; }
.pc-pill .dock::before { display: block; }
@media (max-width: 960px) { .dock .btn3d--azd { box-shadow: 0 10px 24px -8px rgba(30, 37, 52, .45); } .dock .btn3d--azd:active { box-shadow: 0 4px 12px -6px rgba(30, 37, 52, .4); } .pc-pill .dock::before { display: none; } }
/* 광고주센터 화면 속 글자가 폰에서 8px 안팎으로 너무 작았다 → 설계 폭을 줄여 통째로 키운다 */
@media (max-width: 640px) {
  .real-shot--select .adm { --dw: 340 !important; } .adm-cand { width: calc(308 * var(--u)); } .adm-cands { padding-right: calc(16 * var(--u)); }
  .real-shot--rank .adm { --dw: 348 !important; } .adm-tr { grid-template-columns: calc(34 * var(--u)) calc(74 * var(--u)) minmax(0, 1fr); }
  .adm-rep-h { font-size: calc(13.5 * var(--u)); } .adm-kw span:nth-child(2) { display: none; }
  .real-shot--dash .adm { --dw: 360 !important; }
}

/* ===== 폰 전용: 「한 화면에 다 보여요」 세 화면을 옆으로 넘기기 (2026-09-21) — 위쪽 폰 화면 카드와 같은 방식(옆 카드가 살짝 보임, 3.5초 자동, 밀면 멈춤) ===== */
.talk-dots { display: none; }
@media (max-width: 640px) {
  .real-stack--code { display: flex; align-items: stretch; gap: 12px; margin-inline: -22px; padding: 4px 22px 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .real-stack--code::-webkit-scrollbar { display: none; }
  .real-stack--code::after { content: ""; flex: 0 0 4%; }
  .real-stack--code .real-shot { flex: 0 0 88%; scroll-snap-align: start; }
  .talk-dots { display: flex; margin-top: -8px; }
  .talk-tags li { cursor: pointer; transition: background-color .2s, color .2s; }
  .talk-tags li.on { background: var(--teal-700); color: #fff; box-shadow: none; }
}
.adm-plan { display: none; }
@media (max-width: 640px) {
  .adm-plan { display: block; margin-top: calc(14 * var(--u)); border: 1px solid #E4E6EA; border-radius: calc(14 * var(--u)); padding: calc(16 * var(--u)); }
  .adm-plan span { display: block; font-size: calc(11.5 * var(--u)); font-weight: 500; color: #72798A; }
  .adm-plan b { display: block; margin-top: calc(6 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; color: #1E2534; }
  .adm-plan p { margin-top: calc(8 * var(--u)) !important; font-size: calc(12 * var(--u)); color: #4E5668; } .adm-plan u { text-decoration: none; background: #F7F8F9; border-radius: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); }
  .adm-rank [data-stagger] .adm-tr:nth-child(n+6) { display: none; }
}
@media (max-width: 640px) { .adm-notice b { margin-top: 0; font-size: calc(14 * var(--u)); } .adm-notice p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: calc(8 * var(--u)); border-top: 1px solid #F0F1F3; } .adm-notice p:first-of-type { border-top: 0; padding-top: 0; } }

/* 실제 아싸뷰 로고 (2026-09-21 디렉터 제공, 글자 로고 PNG) */
.logo img { display: block; height: 22px; width: auto; }
@media (max-width: 640px) { .logo img { height: 20px; } }

/* ===== 제목 개선 — 홈 먼저 (2026-09-21) ===== */
.eyebrow[data-n] { padding-left: 0; }
.eyebrow[data-n]::before { content: attr(data-n); width: auto; height: auto; border-radius: 0; background: none; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); padding-right: 8px; border-right: 1px solid var(--line); line-height: 1; }
.sec--dark .eyebrow[data-n]::before { color: var(--teal-300); border-color: rgba(255, 255, 255, .25); }
.sec--cyan .eyebrow[data-n]::before { background: none; color: #fff; border-color: rgba(255, 255, 255, .45); }
.sec--cyan .hl { background: none; }

@media (max-width: 640px) {
  .sec-title::after { content: none; }
  .talk-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .talk-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -22px; padding-inline: 22px; } .talk-tags::-webkit-scrollbar { display: none; } .talk-tags li { flex: none; }
}
/* 신뢰 숫자 칸이 세 개일 때 (4.9점이 제목으로 올라감) — PC는 세 칸, 폰은 한 줄에 세 칸을 좁게 */
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats--3 .stat { padding-inline: 0 10px; } .stats--3 .stat > span { font-size: 12.5px; } .stats--3 .stat b { font-size: 26px; } }
@media (max-width: 960px) { .stats--3 .stat { border-top: 0 !important; } }
@media (max-width: 640px) { .stats--3 .stat > span { line-height: 1.45; } }
/* 폰: 꼬리표 줄을 옆으로 밀 수 있게 하면서 위아래 테두리가 잘려 보였다 → 줄 안쪽에 여유를 주고, 테두리는 그림자가 아닌 안쪽 선으로 */
@media (max-width: 640px) { .talk-tags { padding-block: 4px; } .talk-tags li { box-shadow: inset 0 0 0 1px var(--line); } .talk-tags li.on { box-shadow: none; } }
/* 폰: 페이지 머리 요약 칩 세 개를 같은 폭 세 칸으로 — 「약정 없음」 같은 말이 두 줄로 쪼개지지 않게 */
@media (max-width: 640px) { .sum-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sum-chips li { min-width: 0; padding: 12px 6px; font-size: 12.5px; text-align: center; } .sum-chips b { font-size: 18px; white-space: nowrap; } }
/* 폰: 큰 버튼 두 개가 세로로 쌓여 화면을 너무 차지했다 → 한 줄에 나란히, 높이도 낮게 (주 버튼은 넓게, 보조 버튼은 좁게) */
@media (max-width: 640px) {
  .btn-row--duo { flex-wrap: nowrap; gap: 8px; }
  .btn-row--duo > * { min-height: 46px; padding: 0 10px; font-size: 15px; min-width: 0; }
  .btn-row--duo > :first-child { flex: 1.7 1 0; } .btn-row--duo > :last-child { flex: 1 1 0; }
  .demo .btn-row--duo { margin-top: 22px; }
}
/* 폰: 로봇 가이드 말을 단계 제목 바로 아래, 카드 위로 — 「무슨 단계 → 한 줄 설명 → 실제 화면」 순서로 읽히게 */
@media (max-width: 640px) {
  .demo-stage > .deck-title { order: 0; } .demo-stage > .guide { order: 1; } .demo-stage > .phone { order: 2; } .demo-stage > .deck-dots { order: 3; } .demo-stage > .deck-hint { order: 4; }
  .demo-stage > .guide { max-width: none; gap: 2px; margin-top: -4px; }
  .demo-stage > .guide svg { width: 46px; height: 33px; }
  .demo-stage > .guide p { font-size: 13.5px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; }
}

/* 「시작한 뒤」 섹션으로 독립 (2026-09-21) — 제목은 섹션 머리가 맡고, 카드 안에는 꼬리표와 세 화면만 */
#manage .talk { margin-top: 0; }
#manage .talk-head { justify-content: flex-start; }
/* 「이렇게 시작돼요」 섹션 맨 아래로 옮긴 두 버튼 */
.how-cta { margin-top: clamp(32px, 4vw, 48px); }

/* ===== 「사장님은 이것만 / 나머지는 알잘딱매니저가」 두 카드도 유리 느낌 (2026-09-21) — 뒤 흐림(backdrop-filter)은 쓰지 않는다. 카드 뒤에 움직이지 않는 빛을 깔고 카드를 반투명하게 그려서 흉내 낸다 → 계산이 늘지 않는다 ===== */
.glass .orbit { position: relative; isolation: isolate; }
.glass .orbit::before { content: none; }
.glass .orbit-me { background: linear-gradient(135deg, rgba(30, 37, 52, .94), rgba(30, 37, 52, .8) 60%, rgba(37, 60, 82, .86)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1.5px 0 rgba(255, 255, 255, .28), 0 12px 28px -20px rgba(30, 37, 52, .35); }
.glass .orbit-azd { background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 1.5px 0 #fff, 0 12px 28px -20px rgba(30, 37, 52, .2), 0 0 0 1px rgba(30, 37, 52, .04); }
.glass .orbit-chips li, .glass .chipflow-track span { background: var(--mist); box-shadow: none; }

/* 부가세 안내 — 별표를 붙여 오른쪽 정렬 (2026-09-21 디렉터) */
.pay-foot--vat { text-align: right; margin-top: 12px; font-size: 13px; }

/* ===== PC: 광고주센터 세 화면을 한 번에 하나씩 크게 (2026-09-21 디렉터) — 같은 자리에 겹쳐 두고 투명도만 바꾼다. 꼬리표가 탭 ===== */
@media (min-width: 641px) {
  .real-stack--code { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: center; }
  .real-stack--code .real-shot { grid-area: 1 / 1; width: 100%; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
  .real-stack--code .real-shot.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
  .real-stack--code .real-shot--dash { grid-area: 1 / 1; max-width: 830px; } .real-shot--dash .adm { --dw: 830 !important; } .real-shot--dash .adm-camp--add span { display: block; white-space: normal; word-break: keep-all; }
  .real-stack--code .real-shot--select { max-width: 830px; } .real-shot--select .adm { --dw: 830 !important; } .real-shot--select .adm-cands { width: auto; justify-content: center; padding-left: 0; }
  .real-stack--code .real-shot--rank { grid-area: 1 / 1; max-width: 780px; } .adm-rank [data-stagger] .adm-tr:nth-child(n+6) { display: none; }
  .adm-dash .adm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
  .adm-dash .adm-plan { display: block; margin-top: calc(14 * var(--u)); border: 1px solid #E4E6EA; border-radius: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); }
  .adm-dash .adm-plan span { display: block; font-size: calc(12 * var(--u)); font-weight: 500; color: #72798A; }
  .adm-dash .adm-plan b { display: block; margin-top: calc(6 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; color: #1E2534; }
  .adm-dash .adm-plan p { margin-top: calc(8 * var(--u)) !important; font-size: calc(13 * var(--u)); color: #4E5668; } .adm-dash .adm-plan u { text-decoration: none; background: #F7F8F9; border-radius: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); }
  .adm-dash .adm-notice b { margin-top: 0; font-size: calc(15 * var(--u)); } .adm-dash .adm-notice p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: calc(8 * var(--u)); border-top: 1px solid #F0F1F3; } .adm-dash .adm-notice p:first-of-type { border-top: 0; padding-top: 0; }
  #manage .talk-head { justify-content: center; }
  .talk-tags li { position: relative; overflow: hidden; cursor: pointer; font-size: 15px; padding: 9px 20px; transition: background-color .2s, color .2s; }
  .talk-tags li:hover { color: var(--teal-700); }
  .talk-tags li.on { background: var(--teal-700); color: #fff; box-shadow: none; }
  .talk-tags li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .75); transform: scaleX(0); transform-origin: left; }
  .talk-tags li.on.run::after { animation: fill var(--scene-ms, 4000ms) linear forwards; }
}

@media (min-width: 641px) { .real-stack--code .real-shot figcaption { display: none; } } /* PC에서는 탭이 화면 이름을 말해 주므로 이름표를 숨긴다 */

@media (min-width: 641px) { .real-shot--rank .adm { --dw: 780 !important; } } /* PC 리포트 화면은 실제 크기 그대로 — 세 화면의 높이 차이를 줄인다 */
/* PC 탭의 채워지는 막대를 위쪽 단계 카드와 똑같이 (2026-09-21 디렉터) — 흰 바탕 + 청록→자홍 그라데이션 막대. 청록 바탕 위에서는 그라데이션의 청록 쪽이 안 보여서, 켜진 탭도 단계 카드처럼 흰 바탕으로 */
@media (min-width: 641px) {
  .talk-tags li.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
  .talk-tags li.on:hover { color: var(--ink); }
  .talk-tags li::after { background: var(--accent); }
}
@media (min-width: 641px) { .talk-tags li:not(.on) { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); } .talk-tags li:not(.on):hover { color: var(--teal-700); } } /* 꺼진 탭은 위쪽 단계 카드처럼 바탕 없이 — 켜진 탭만 흰 카드로 떠 보이게 */

/* 마지막 입력창 제목을 폰에서도 한 줄로 (2026-09-21 디렉터: 「모집에는 돈이 들지 않아요」) */
@media (max-width: 640px) { .final h2 { font-size: clamp(20px, 6.2vw, 26px); white-space: nowrap; letter-spacing: -1px; } }

 

   

  

   

  
@media (max-width: 640px) {  .demo-stage > .phone { order: 2; } }

/* ===== 홈으로 옮긴 「시점마다 해주는 일」 (2026-09-21) — 카드 아래의 옛 「예시 화면」은 홈에서 숨긴다. 디렉터가 가짜 같다고 지적했던 방식의 화면이고, 바로 위 02 섹션이 실제와 같은 화면을 이미 보여 준다 ===== */
.tmapv .tmap-screen { display: none; }
.tmapv .tmap-col, .tmapv .tmap-col:hover, .tmapv .tmap-col.is-on { cursor: default; transform: none; box-shadow: 0 0 0 1px var(--line); }

/* ===== 「매달 자동 반복」 — 카드 세 장 + 그래프 카드를 그래프 하나로 합침 (2026-09-21) ===== */
.grow2 { margin-top: 0; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px clamp(24px, 4vw, 56px); align-items: center; }

.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--mist); border-radius: 14px; padding: 4px; }
.seg3 button { min-height: 42px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink-3); transition: background-color .2s, color .2s; }
.seg3 button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(30, 37, 52, .06); }
.grow2-cap { margin-top: 28px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.grow2-big { font-size: clamp(56px, 7vw, 84px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.05; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.grow2-big small { font-size: .38em; font-weight: 600; letter-spacing: -0.02em; margin-left: 4px; }
.grow2-marks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 20px; font-size: 13.5px; color: var(--ink-3); }
.grow2-marks b { display: block; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }

.grow-chart .g-dot { transform-box: fill-box; transform-origin: center; }
.grow-chart .g-dot.pop { animation: gpop .35s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--m) * 35ms); }
@keyframes gpop { from { transform: scale(0); opacity: 0; } }
@media (max-width: 860px) {
  .grow2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .grow2-side { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 16px; }
  .grow2-side .seg3 { grid-column: 1 / -1; }
  .grow2-cap { grid-column: 1 / -1; margin-top: 18px; font-size: 14px; }
  .grow2-big { font-size: 56px; }
  .grow2-marks { margin: 0 0 8px; justify-content: flex-end; gap: 16px; } .grow2-marks b { font-size: 17px; }
  
}

/* 그래프 카드 맨 아래 안내 두 줄 (2026-09-21) */
.grow-notes { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.grow-notes li { position: relative; padding-left: 14px; } .grow-notes li::before { content: "*"; position: absolute; left: 0; top: 1px; color: var(--ink-3); }
.grow-notes li:last-child { color: var(--ink-3); font-size: 12.5px; }

/* 안내 두 줄을 같은 크기·같은 색으로 (2026-09-21 디렉터: 글씨가 서로 달라 어색) */
.grow-notes, .grow-notes li:last-child { font-size: 13px; color: var(--ink-3); }
.grow-notes { gap: 4px; padding-top: 12px; }

/* ===== 폰: 「시점마다 해주는 일」을 세로형으로 (2026-09-21 디렉터: 모바일은 세로형, PC는 가로형) — 돈 섹션의 결제 시점 그림과 같은 세로 선 모양. 누르면 그 시점이 펼쳐진다 ===== */
@media (max-width: 640px) {
  .tmapv .tmap { display: block; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .tmapv .tmap-col, .tmapv .tmap-col:hover, .tmapv .tmap-col.is-on { background: none; box-shadow: none; border-radius: 0; padding: 2px 0 26px 46px; cursor: pointer; }
  .tmapv .tmap-col:last-child { padding-bottom: 0; }
  .tmapv .tmap-col::before { position: absolute; left: 0; top: 0; margin: 0; z-index: 1; }
  .tmapv .tmap-col:not(:last-child)::after { left: 13.5px; right: auto; top: 30px; bottom: 0; width: 3px; height: auto; }
  .tmapv .tmap-col h3 { font-size: 17px; line-height: 26px; padding-right: 108px; }
  .tmapv .tmap-col h3::after { content: ""; position: absolute; right: 4px; top: 9px; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
  .tmapv .tmap-col.is-open h3::after { transform: translateY(4px) rotate(-135deg); }
  .tmapv .tmap-when { min-height: 0; margin: 2px 0 0; padding-right: 24px; }
  .tmapv .tmap-pay { position: absolute; right: 26px; top: 3px; margin: 0; }
  .tmapv .tmap-col ul { display: none; margin-top: 14px; background: #fff; border-radius: var(--radius-m); padding: 16px; box-shadow: 0 0 0 1px var(--line); gap: 12px; }
  .tmapv .tmap-col.is-open ul { display: grid; animation: revealIn .3s ease both; }
  .tmapv .tmap-col.is-open::before { background: var(--accent); }
}
/* 홈에서는 「눌린 시점」 표시가 의미 없으므로(예시 화면을 숨겼다) 셋째 동그라미만 그라데이션이던 것을 되돌린다. 폰에서는 펼쳐진 시점만 그라데이션 */
.tmapv .tmap-col.is-on::before { background: var(--teal-600); }
@media (max-width: 640px) { .tmapv .tmap-col.is-open::before { background: var(--accent); } }

/* 03 섹션: 시점마다 날짜 표시 (2026-09-21) */
.tmap-date { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--teal-700); letter-spacing: -0.01em; }
@media (max-width: 640px) {
  .tmapv .tmap-date { margin: 0; line-height: 18px; padding-right: 150px; }
  .tmapv .tmap-col h3 { padding-right: 30px; }
  .tmapv .tmap-col h3::after { top: 30px; }
  .tmapv .tmap-pay { right: 0; top: 0; }
  .tmapv .tmap-col::before { top: 8px; } .tmapv .tmap-col:not(:last-child)::after { top: 38px; }
}
@media (max-width: 640px) { .tmapv .tmap-col:not(:last-child)::after { bottom: -8px; } } /* 세로 선이 다음 동그라미까지 끊기지 않게 */

/* ===== 「뭐가 다른가요?」 폰 기호 표 (2026-09-21) — PC는 글, 폰은 기호. 세 열이 한 화면에 들어온다 ===== */
.cmp-short, .cmp-mark, .cmp-legend { display: none; }
@media (max-width: 640px) {
  #diff .scroll-x { overflow: visible; }
  #diff .cmp { min-width: 0; table-layout: fixed; font-size: 14px; }
  #diff .cmp th, #diff .cmp td { padding: 13px 4px; text-align: center; vertical-align: middle; }
  #diff .cmp tbody th, #diff .cmp thead th:first-child { width: 31%; text-align: left; padding-left: 14px; white-space: normal; }
  #diff .cmp thead th { font-size: 12.5px; line-height: 1.3; word-break: keep-all; } #diff .cmp thead .cmp-me { font-size: 13.5px; }
  #diff .cmp-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #diff .cmp-short { display: inline; }
  #diff .cmp-mark { display: inline-grid; place-items: center; font-style: normal; }
  #diff .cmp-mark.no { font-size: 13px; font-weight: 500; color: var(--ink-3); }
  .cmp-mark.ok { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-600); position: relative; vertical-align: middle; }
  .cmp-mark.ok::after { content: ""; position: absolute; left: 8.5px; top: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
  #diff td:not(.cmp-me) .cmp-mark.ok { background: var(--line-strong, #C9CDD4); }
  #diff .cmp-legend { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 10px 2px 0; font-size: 12.5px; color: var(--ink-3); } #diff .cmp-legend .cmp-mark { display: inline-grid; width: 18px; height: 18px; } #diff .cmp-legend .cmp-mark::after { left: 6px; top: 3px; width: 4px; height: 8px; border-width: 0 2px 2px 0; }
}

/* 검토용 버튼이 둘로 줄어 자리 조정 (상단 유리 버튼 제거) */
@media (min-width: 961px) { .glass-btn--pill, body.dock-on .glass-btn--pill { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); } }

/* 첫 화면 입력창 판: 뒤 흐림 없이 유리 느낌 (2026-09-21) — 로봇 몸통이 선명하게 비치면 지저분해서, 판은 조금 더 불투명하게 하고 뒤 빛이 은은하게 도는 정도로 */
.glass .starter-card { background: linear-gradient(135deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .8) 55%, rgba(255, 255, 255, .88)); }
/* 판 자체에 청록→자홍 빛을 칠해 유리 느낌을 살린다 (움직이지 않는 그림이라 부담 없음). 로봇 몸통이 비쳐 지저분하던 것도 가린다 */
.glass .starter-card { background: radial-gradient(38% 55% at 0% 0%, rgba(54, 183, 197, .07), transparent 100%), radial-gradient(38% 55% at 100% 100%, rgba(218, 40, 114, .045), transparent 100%), #fff; }

/* ===== PC: 폰 그림을 창 높이에 맞추고, 로봇 말풍선을 폰 왼쪽 위로 (2026-09-21 디렉터: 폰 화면이 한눈에 안 들어오고 말풍선이 아래라 안 보인다) =====
   폰 높이 = 창 높이 − 상단 메뉴 − 여백. 화면 속 글자는 폭 비례 단위라 통째로 같이 줄어든다. 스크롤해도 폰이 화면에 붙어 따라온다 */
@media (min-width: 961px) {
  .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: start; }
  .demo-stage { position: sticky; top: calc(var(--hd-h) + 24px); grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; align-items: start; justify-items: end; }
  .demo-stage > .phone--real { grid-column: 2; grid-row: 2; height: clamp(460px, calc(100vh - 190px), 650px); width: auto; max-width: none; margin: 0; border-radius: 34px; padding: 8px; }
  .demo-stage > .phone--real .phone-in { border-radius: 27px; }
  .demo-stage > .soon-chip { grid-column: 2; grid-row: 1; justify-self: center; }
  .demo-stage > .guide { grid-column: 1; grid-row: 2; align-self: start; margin-top: 64px; flex-direction: column; align-items: flex-end; gap: 2px; width: auto; max-width: 230px; }
  .demo-stage > .guide svg { width: 84px; height: 60px; margin-right: 18px; }
  .demo-stage > .guide p { flex: none; position: relative; border-radius: 16px; font-size: 15px; line-height: 1.5; padding: 12px 16px; word-break: keep-all; }
  .demo-stage > .guide p::after { content: ""; position: absolute; right: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--ink); border-radius: 2px; transform: rotate(45deg); }
}
/* PC 폰 그림 다듬기 (2026-09-21 디렉터): 최소 높이 520, 말풍선은 작게, 폰은 좀 더 왼쪽으로 */
@media (min-width: 961px) {
  .demo-stage > .phone--real { height: clamp(520px, calc(100vh - 190px), 650px); margin-right: clamp(28px, 5vw, 88px); }
  .demo-stage > .soon-chip { margin-right: clamp(28px, 5vw, 88px); }
  .demo-stage > .guide { max-width: 188px; margin-top: 56px; }
  .demo-stage > .guide svg { width: 62px; height: 44px; margin-right: 14px; }
  .demo-stage > .guide p { font-size: 13.5px; line-height: 1.45; padding: 9px 13px; border-radius: 14px; }
  .demo-stage > .guide p::after { width: 10px; height: 10px; right: -4px; margin-top: -5px; }
}

/* ===== 직접 운영 페이지 재기획 (2026-09-21) ===== */
.tmap-me { margin: -6px 0 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.tmap-me b { font-size: 11px; font-weight: 600; color: #fff; background: var(--ink); border-radius: 99px; padding: 2px 8px; flex: none; }
.pay-title { margin: clamp(36px, 5vw, 56px) 0 20px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; }
.unl-math { margin: 0 0 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.03em; }
.unl-math span { color: var(--ink-3); } .unl-math i { font-style: normal; color: var(--ink-3); } .unl-math b { background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.unl-math em { flex-basis: 100%; font-style: normal; font-size: 14.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
@media (max-width: 640px) {
  .tmapv .tmap-me { margin: 4px 0 0; }
  .plans--swipe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-left: var(--gutter); }
  .plans--swipe::-webkit-scrollbar { display: none; }
  .plans--swipe .plan { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ===== 무제한 이용권 기간별 가격 — PC · 폰 모두 표 대신 기간마다 한 줄 카드 (2026-09-21) ===== */
#unlimited .unl { align-items: stretch; }
#unlimited .scroll-x { overflow: visible; }
#unlimited .ptable, #unlimited .ptable tbody { display: block; min-width: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
#unlimited .ptable tbody { display: grid; gap: 10px; height: 100%; grid-auto-rows: 1fr; padding: 2px; }
#unlimited .ptable thead { display: none; }
#unlimited .ptable tr { display: grid; grid-template-columns: 84px 1fr auto; grid-template-areas: "term price off" "term total off"; align-items: center; column-gap: 16px; background: #fff; border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--line); padding: 16px 22px; }
#unlimited .ptable td { display: block; padding: 0; border: 0; text-align: left; white-space: nowrap; }
#unlimited .ptable td:nth-child(1) { grid-area: term; font-size: 18px; font-weight: 600; color: var(--ink); }
#unlimited .ptable td:nth-child(2) { grid-area: price; align-self: end; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
#unlimited .ptable td:nth-child(2)::before { content: "월 "; font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
#unlimited .ptable td:nth-child(3) { grid-area: total; align-self: start; font-size: 13.5px; color: var(--ink-3); }
#unlimited .ptable td:nth-child(3)::before { content: "총 "; }
#unlimited .ptable td:nth-child(4) { grid-area: off; justify-self: end; font-size: 14.5px; font-weight: 600; color: #DA2872; background: var(--pink-100); border-radius: 99px; padding: 5px 13px; }
#unlimited .ptable td:nth-child(4)::after { content: " 할인"; }
#unlimited .ptable tr:first-child td:nth-child(4) { visibility: hidden; }
#unlimited .ptable tr:last-child { box-shadow: 0 0 0 1px var(--teal-500), var(--shadow-card); }
@media (max-width: 640px) {
  #unlimited .ptable tbody { gap: 8px; }
  #unlimited .ptable tr { grid-template-columns: auto 1fr auto; column-gap: 14px; padding: 14px 16px; }
  #unlimited .ptable td:nth-child(1) { min-width: 58px; font-size: 16px; } #unlimited .ptable td:nth-child(2) { font-size: 19px; } #unlimited .ptable td:nth-child(2)::before { font-size: 13px; }
  #unlimited .ptable td:nth-child(3) { font-size: 12.5px; } #unlimited .ptable td:nth-child(4) { font-size: 13.5px; padding: 4px 11px; }
}
/* ===== 1석2조 그림 다시 그리기 (2026-09-21) — 「협찬 1회」에서 두 갈래로 갈라져 두 카드로. PC는 가로, 폰은 세로 ===== */
.duo2 { display: grid; grid-template-columns: auto 72px minmax(0, 1fr); align-items: center; gap: 0 6px; }
.duo2-one { background: var(--ink); color: #fff; border-radius: var(--radius-l); padding: 26px 28px; display: grid; gap: 4px; text-align: center; box-shadow: 0 24px 40px -24px rgba(30, 37, 52, .6); }
.duo2-one small { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .7); } .duo2-one b { font-size: 24px; letter-spacing: -0.03em; }
.duo2-fork { color: var(--teal-500); display: block; } .duo2-fork--h { width: 72px; height: 168px; } .duo2-fork--v { display: none; }
.duo2-outs { display: grid; gap: 16px; }
.duo2-out { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "ico t" "ico s"; align-items: center; column-gap: 14px; row-gap: 4px; background: #fff; border-radius: var(--radius-m); padding: 18px 20px; box-shadow: 0 0 0 1px var(--line), var(--shadow-card); min-height: 76px; }
.duo2-out i { grid-area: ico; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--teal-700); background: var(--teal-50); } .duo2-out i svg { width: 24px; height: 24px; }
.duo2-out b { grid-area: t; font-size: 17px; letter-spacing: -0.02em; align-self: end; } .duo2-out span { grid-area: s; font-size: 13.5px; color: var(--ink-2); align-self: start; }
 
.duo2-price { grid-column: 1 / -1; margin: 22px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; font-size: 15px; color: var(--ink-3); }
.duo2-price s { font-weight: 500; } .duo2-price b { font-size: 26px; letter-spacing: -0.04em; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .duo2-price small { font-size: 14px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 640px) {
  .duo2 { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
  .duo2-one { padding: 18px 34px; } .duo2-one b { font-size: 21px; }
  .duo2-fork--h { display: none; } .duo2-fork--v { display: block; width: 100%; max-width: 330px; height: auto; margin: 4px 0; }
  .duo2-outs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; }
  .duo2-out { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "t" "s"; justify-items: center; text-align: center; padding: 16px 10px; row-gap: 6px; }
  .duo2-out b { font-size: 15.5px; } .duo2-out span { font-size: 12.5px; } 
  .duo2-price { margin-top: 18px; }
}
/* 1석2조 그림 다듬기: 두 카드 높이를 같게 해서 화살표가 카드 가운데를 가리키게, 폰에서는 가격 줄이 어색하게 꺾이지 않게 */
.duo2-fork--h { height: 216px; }
.duo2-outs { grid-auto-rows: 1fr; } .duo2-out { min-height: 100px; }
@media (max-width: 640px) { .duo2-out { min-height: 0; } .duo2-price { flex-wrap: wrap; gap: 2px 8px; } .duo2-price s { flex-basis: 100%; text-align: center; } .duo2-price small { white-space: nowrap; } }
/* 폰: 두 버튼 줄이 가운데 정렬된 자리에서는 줄이 글자 폭만큼만 잡혀 버튼 안쪽 좌우 여백이 없었다 → 줄을 화면 폭으로 펴고 안쪽 여백을 늘린다 */
@media (max-width: 640px) { .btn-row--duo { width: 100%; } .btn-row--duo > * { padding: 0 16px; } .btn-row--duo > :first-child { flex: 1.5 1 0; } }

/* ===== 가격 페이지 재기획 (2026-09-22) ===== */
.px-azd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.tiers--one { margin-top: 0; grid-template-columns: minmax(0, 1fr); } .tiers--one .tier { height: 100%; }
.px-when { background: #fff; border-radius: var(--radius-m); padding: 26px; box-shadow: 0 0 0 1px var(--line); }
.px-when h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.pay--v { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pay--v li { padding: 0 0 22px 46px; } .pay--v li:last-child { padding-bottom: 0; }
.pay--v li::before { left: 13px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; transform-origin: top; }
.pay--v li:last-child::before { background: linear-gradient(180deg, var(--azd-grad-from, #DA2872), transparent); display: none; }
.pay--v .pay-dot { position: absolute; left: 0; top: 0; }
.pay--v .pay-when { margin-top: 0; padding-top: 4px; } .pay--v .pay-amt { font-size: 24px; } .pay--v .pay-what { max-width: none; font-size: 14px; }
.pay--v.will-draw:not(.drawn) li::before { transform: scaleY(0); }
.px-more { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; background: #fff; border-radius: var(--radius-m); padding: 16px 22px; box-shadow: 0 0 0 1px var(--line); font-size: 14.5px; color: var(--ink-2); }
.px-more b { color: var(--ink); } .px-more span { font-variant-numeric: tabular-nums; } .px-more em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--mist); border-radius: 99px; padding: 2px 10px; }
.px-self { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.px-unl h3 { font-size: 20px; font-weight: 600; margin-top: 4px; } .px-unl .unl-math { margin: 2px 0 6px; font-size: clamp(17px, 2vw, 21px); } .px-unl .btn-row { margin-top: 8px; }
.px-two { display: grid; gap: 12px; align-content: start; } .px-two .plan { padding: 22px; } .px-two .link-arrow { margin-top: 6px; }
@media (max-width: 860px) {
  .px-azd, .px-self { grid-template-columns: minmax(0, 1fr); }
  .px-more em { margin-left: 0; }
}
@media (max-width: 640px) {
  [data-page="pricing"] .promise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 22px; }
  [data-page="pricing"] .promise div { padding: 12px 6px; text-align: center; }
  [data-page="pricing"] .promise b { font-size: 13.5px; word-break: keep-all; line-height: 1.35; }
  [data-page="pricing"] .promise span { display: none; }
  .px-when { padding: 20px; } .px-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .px-two .plan { padding: 16px 14px; } .px-two .plan p { font-size: 12.5px; } .px-two .plan-badge { font-size: 10.5px; padding: 2px 7px; } .px-two .link-arrow { grid-column: 1 / -1; }
  .px-unl .btn-row { width: 100%; } .px-unl .btn-row > * { flex: 1 1 100%; }
}
.glass .tiers--one::before { width: 100%; height: 100%; bottom: 0; } /* Starter 한 장만 있을 때는 카드 뒤 빛을 카드 전체 폭으로 */

/* 가격 Starter 카드: 뒤 흐림 없이 유리 느낌 (첫 화면 입력창 판과 같은 방식 — 카드 자체에 청록→자홍 빛을 칠한다) */
.glass .tiers::before { display: none; }
.glass .tier.is-now { background: linear-gradient(115deg, rgba(54, 183, 197, .2), rgba(255, 255, 255, 0) 45%, rgba(218, 40, 114, .13)), linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94)); }

/* ===== 진행 사례 시안 페이지 (2026-09-22) — 기존 reference.php 구성을 새 디자인으로 ===== */
.ph--ref { padding-bottom: clamp(28px, 4vw, 44px); }
/* ---------- 자주 묻는 질문 페이지 (2026-09-22 개편: 6개 묶음 · 2~3문단 답 · 검색 + 묶음 칩) ---------- */
.qa-body { padding: 0 20px 20px; display: grid; gap: 12px; }           /* 문단 사이 간격 — 문단마다 12px 띄운다 */
.qa-body p { margin: 0; padding: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.qa-body .qa-link { margin-top: 2px; font-size: 14.5px; }
.qa-body .qa-link a { font-weight: 600; color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; }
.qa > p { display: none; }                                                   /* 옛 한 문단 구조는 더 쓰지 않는다 */
.ph--faq .ph-sub { margin-top: 12px; color: var(--ink-2); font-size: 17px; }
.ph--faq .ph-search { margin-top: 24px; }
.faq-chips { justify-content: center; margin-top: 16px; max-width: 720px; }
.faq-chips .chip { min-height: 40px; padding: 0 16px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.faq-chips .chip.is-on { background: var(--teal-900); color: #fff; box-shadow: none; }
.sec--faqlist { padding-top: clamp(28px, 4vw, 48px); }
.faq-count { margin: 0 4px 14px; font-size: 14px; color: var(--ink-3); }
.faq-list--page { gap: 0; }
.faq-group { display: grid; gap: 10px; }
.faq-group + .faq-group { margin-top: 40px; }
.faq-group .faq-cat { margin: 0 4px 4px; font-size: 18px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.faq-group .faq-cat span { font-size: 13px; font-weight: 600; color: var(--teal-700); }
.faq-list--page .qa summary { font-size: 17px; padding: 20px 52px 20px 22px; }
.faq-list--page .qa-body { padding: 0 22px 22px; }
.faq-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); background: #fff; border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--line); }
.faq-empty b { display: block; color: var(--ink); font-size: 17px; }
.faq-empty p { margin: 8px 0 18px; }
.final--ask h2 { font-size: clamp(24px, 3.6vw, 36px); }
.final--ask .btn-row { justify-content: center; margin-top: 24px; }
.btn3d--kakao { background: linear-gradient(180deg, #FEE500 0%, #F3D900 100%); color: #3A1D1D; box-shadow: 0 8px 20px -8px rgba(201, 174, 0, .45); }
.btn3d--kakao:active { box-shadow: 0 4px 12px -6px rgba(201, 174, 0, .4); }
.faq-empty .btn-ghost { min-height: 46px; font-size: 15px; }
@media (max-width: 640px) {
  .faq-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -16px; padding: 3px 16px; margin-top: 13px; max-width: none; width: calc(100% + 32px); } /* v138: 칩 바깥 1px 테두리가 넘김 칸에 잘리지 않게 위아래 3px */
  .faq-chips::-webkit-scrollbar { display: none; }
  .faq-chips .chip { flex: none; }
  .faq-group + .faq-group { margin-top: 32px; }
  .faq-list--page .qa summary { font-size: 16px; padding: 18px 48px 18px 18px; }
  .faq-list--page .qa-body { padding: 0 18px 18px; }
}.ph--faq { padding-bottom: clamp(28px, 4vw, 48px); }
@media (max-width: 640px) { .ph--faq { padding-bottom: 32px; } }

/* ---------- 폰 메뉴 글자 크기 (2026-09-22 디렉터: 너무 크다) — 디자인 시스템 Body M 16/24 Semibold, 버튼은 medium 48 ---------- */
.mm-row { font-size: 16px; line-height: 24px; font-weight: 600; padding: 13px 10px; letter-spacing: -0.5px; }
.mm-row svg { width: 16px; height: 16px; }
.mm-row small { font-size: 13px; line-height: 18px; margin-top: 2px; }
.mm-back { font-size: 14px; }
.mm-cta { gap: 8px; margin-top: 8px; padding-top: 12px; }
.mm-cta .btn3d { min-height: 48px; font-size: 16px; }
.mm-cta .btn-ghost { min-height: 46px; font-size: 15px; }

/* ---------- 한 달 흐름 부품 .tl (2026-09-22) — 홈 03 · 이용 방법 01 공용 ---------- */
.tl { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 12px; }
.tl-rail { position: absolute; left: 10%; right: 10%; top: 13px; height: 4px; border-radius: 99px; background: var(--teal-100); }
.tl-rail i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--accent); }
.tl-col { display: grid; grid-template-rows: subgrid; grid-row: span 4; position: relative; min-width: 0; }
.tl-body { display: contents; }
.tl-head { position: relative; text-align: center; padding-bottom: 10px; }
.tl-dot { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--teal-500); color: var(--teal-700); font-weight: 600; font-size: 13px; position: relative; z-index: 1; }
.tl-date { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--teal-700); }
.tl-head h3 { margin: 2px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.5px; line-height: 26px; }

.tl-head .tl-pay { display: none; }
.tl-lab { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink-3); }
.tl-azd { border-radius: var(--radius-m); padding: 14px; font-size: 13.5px; }

.tl-azd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.tl-azd { background: var(--teal-50); color: var(--ink-2); }
.tl-azd .tl-lab { color: var(--teal-700); }
.tl-azd li b { display: block; color: var(--ink); font-size: 14px; letter-spacing: -0.3px; }
.tl-azd li b em { display: inline-block; margin-left: 6px; font-style: normal; font-size: 10px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 99px; padding: 1px 6px; vertical-align: 2px; }
.tl-azd li span { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: 1px; }
.tl-pay { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 99px; padding: 5px 12px; color: var(--teal-700); background: var(--teal-50); }
.tl-pay.is-pay { color: #DA2872; background: var(--pink-100); }
.tl-pay--foot { margin-top: 10px; text-align: center; display: block; }
.tl .tl-col:nth-child(2) .tl-rail { display: none; }
@media (max-width: 960px) and (min-width: 641px) {
  .tl-head h3 { font-size: 16px; } .tl-azd { padding: 12px 10px; font-size: 13px; } .tl-azd li b { font-size: 13px; }
}
@media (max-width: 640px) {
  .tl { display: block; padding-left: 0; }
  .tl-rail { display: none; }
  .tl-col { display: block; padding: 0 0 22px 44px; }
  .tl-col:last-child { padding-bottom: 0; }
  .tl-col::after { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: -8px; width: 3px; background: var(--teal-100); }
  .tl-col:last-child::after { display: none; }
  .tl-col.is-open::after { background: var(--accent); }
  .tl-head { text-align: left; padding: 0 30px 0 0; cursor: pointer; }
  .tl-dot { position: absolute; left: -44px; top: 0; margin: 0; background: var(--teal-600); box-shadow: none; color: #fff; }
  .tl-col.is-open .tl-dot { background: var(--accent); }
  .tl-head h3 { font-size: 17px; line-height: 26px; }
  .tl-head h3::after { content: ""; position: absolute; right: 4px; top: 30px; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
  .tl-col.is-open .tl-head h3::after { transform: translateY(4px) rotate(-135deg); }
  
  
  
  .tl-head .tl-pay { display: inline-block; position: absolute; right: 0; top: 0; padding: 3px 10px; font-size: 12px; }
  .tl-date { padding-right: 130px; line-height: 18px; }
  .tl-body { display: none; margin-top: 14px; }
  .tl-col.is-open .tl-body { display: grid; gap: 10px; animation: revealIn .3s ease both; }
  .tl-pay--foot { display: none; }
  
}

/* ---------- 이용 방법 「장면으로 보기」 탭 4개 ---------- */
.talk--how .talk-head { justify-content: center; margin-bottom: 18px; }
.real-stack--how { grid-template-columns: minmax(0, 1fr); }
.real-stack--how .real-shot { grid-area: 1 / 1; width: 100%; max-width: 900px; justify-self: center; }
.real-shot--phone { max-width: 320px !important; background: var(--ink) !important; padding: 8px; border-radius: 34px; box-shadow: 0 30px 60px -30px rgba(30, 37, 52, .6), inset 0 0 0 2px #29454E !important; }
.real-shot--phone figcaption { top: 16px; right: 16px; }
.app-solo { position: relative; aspect-ratio: 390 / 720; border-radius: 27px; overflow: hidden; background: #fff; container-type: inline-size; }
.app-solo .app { position: absolute; inset: 0; }
.deck-caps { position: relative; max-width: 720px; margin: 22px auto 0; text-align: center; }
.deck-cap { display: none; }
.deck-cap.is-on { display: block; animation: revealIn .3s ease both; }

.deck-cap h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }
.deck-cap p:last-child { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
@media (max-width: 640px) {
  .real-stack--how .real-shot { max-width: none; }
  .real-shot--phone { max-width: 84% !important; }
  .deck-caps { margin-top: 14px; text-align: left; }
  
  .deck-cap h3 { font-size: 18px; }
  .talk--how .talk-head { justify-content: flex-start; }
}/* 이용 방법 탭: 숨은 카드가 높이를 차지하지 않게 — 보이는 카드만 흐름에 남긴다 (PC) */
@media (min-width: 641px) {
  .real-stack--how { position: relative; }
  .real-stack--how .real-shot:not(.is-on) { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .app-solo, .app-solo.on { flex: none; min-height: 0; padding: 0; box-shadow: none; border-radius: 27px; aspect-ratio: 390 / 700; opacity: 1; background: #fff; }
  .real-shot--phone figcaption { background: rgba(255, 255, 255, .92); color: var(--ink); }
}
 /* 폰: 접힌 줄에 이미 「사장님 · 할 일 없어요」가 있어 펼친 칸에서는 뺀다 */

/* 폰 메뉴 (2026-09-22 디렉터): 서비스 하위 3개는 누르지 않아도 작은 글자로 바로 보이고, 이용 방법은 도움말 밖으로 */
.mm-group { padding: 6px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.mm-cap { margin: 0 10px 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: -0.3px; }
.mm-row--sub { font-size: 15px; padding: 9px 10px 9px 18px; }
.mm-row--sub small { font-size: 12px; line-height: 16px; margin-top: 1px; }

/* 상단 「무료로 시작」 — PC 하단 알약과 같은 버튼이 둘이라 상단은 한 톤 연하게 (2026-09-22 디렉터 결정 · 폭 961 이상에서 알약이 보일 때만) */
@media (min-width: 961px) {
  .pc-pill .btn3d--hd { background: var(--teal-500); color: #fff; box-shadow: none; text-shadow: none; }
  .pc-pill .btn3d--hd:hover { filter: none; background: var(--teal-600); box-shadow: none; }
  .pc-pill .btn3d--hd:active { background: var(--teal-700); box-shadow: none; }
}

/* 9/22 디렉터 지적 셋 */
.tl { row-gap: 8px; }                                                              /* 사장님 카드와 알잘딱 칸이 겹쳐 보이던 것 */
.tl-azd { background: #fff; box-shadow: 0 0 0 1px var(--teal-100); }             /* 옅은 배경 섹션에서 알잘딱 칸이 배경과 같아 보이던 것 → 흰 바탕 + 청록 테두리 */
.tl-azd .tl-lab { color: var(--teal-600); }
.app-solo { width: 100%; }                                                          /* 폰에서 앱 화면 카드가 폭 0 이 되던 것 */
.deck-caps { margin: 0 auto 18px; }                                                 /* 설명을 그림 위로 옮김 */
@media (max-width: 640px) { .app-solo, .app-solo.on { flex: 0 0 100%; width: 100%; } .deck-caps { margin-bottom: 12px; } }

/* ---------- 로봇 새 모양 (2026-09-22) — 가만히 있을 땐 오른쪽 눈 윙크(광고주센터 로봇과 같음), 입력 중·마우스 따라볼 땐 두 눈을 뜬다 ---------- */
.rb-eye--r { opacity: 0; }
.rb-wink { opacity: 1; transition: opacity .2s; }
.robot.is-typing .rb-eye--r, .robot.is-looking .rb-eye--r { opacity: 1; }
.robot.is-typing .rb-wink, .robot.is-looking .rb-wink, .robot.is-searching .rb-wink, .robot.is-done .rb-wink, .robot.is-excited .rb-wink { opacity: 0; }
.robot.is-searching .rb-eye--r, .robot.is-done .rb-eye--r, .robot.is-excited .rb-eye--r { opacity: 0; }

/* 손: 흰 광택 장갑 + 파란 손목 (머리와 같은 재질) */
.hand { background: radial-gradient(circle at 35% 30%, #fff 0, #F3F8FB 45%, #C9DCE6 100%); box-shadow: inset 0 -4px 0 #4A97F3, 0 0 0 1.2px #C5D8E2, 0 8px 14px -8px rgba(30, 37, 52, .35); }
/* 9/22 디렉터: 상단 「무료로 시작」은 연하게 + 작게 (디자인 시스템 xsmall 38px). PC 알약이 주 버튼이므로 상단은 보조 */
@media (min-width: 961px) {
  .btn3d--hd { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
}

/* 9/22 디렉터: 협찬 메뉴 장면은 「얼마로 구성해라」 표 대신 AI 추천 세트가 보이게 */
.app-sets { display: grid; gap: calc(10 * var(--u)); }
.app-sets .app-set { opacity: 0; transform: translateY(calc(14 * var(--u))); }
.scene.on .app-sets .app-set { animation: appPop .5s ease forwards; } .scene.on .app-sets .app-set:nth-child(1) { animation-delay: 1.2s; } .scene.on .app-sets .app-set:nth-child(2) { animation-delay: 1.45s; } .scene.on .app-sets .app-set:nth-child(3) { animation-delay: 1.6s; }
.app-set--on { border-color: #36B7C5 !important; box-shadow: 0 0 0 1px #36B7C5; background: #EEF9FA !important; }
.app-set--row { padding: calc(12 * var(--u)) calc(14 * var(--u)) !important; }
.app-set--row .app-set-t { margin-top: calc(6 * var(--u)) !important; font-weight: 500; color: #4E5668; font-size: calc(13 * var(--u)); }
.app-set-h em { margin-left: auto; font-style: normal; font-size: calc(12 * var(--u)); font-weight: 600; color: #72798A; }
.app-set-h .app-chev { margin-left: 0; }
.app-check-dot { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: #36B7C5; position: relative; flex: none; }
.app-check-dot::after { content: ""; position: absolute; left: calc(6 * var(--u)); top: calc(4 * var(--u)); width: calc(5 * var(--u)); height: calc(9 * var(--u)); border-right: calc(2 * var(--u)) solid #fff; border-bottom: calc(2 * var(--u)) solid #fff; transform: rotate(45deg); }

/* ---------- 한 달 흐름 v2 (2026-09-22 디렉터: 글 줄이기) — 사장님은 배지 하나, 알잘딱은 아이콘 + 짧은 제목, 설명은 말풍선 ---------- */
.tl-col { grid-row: span 3; }
.tl-head { padding-bottom: 12px; }

.tl-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -0.3px; position: relative; cursor: default; }
.tl-badge b { font-size: 11px; font-weight: 600; color: #A9E3E9; }
.tl-badge--none { background: none; color: var(--ink-3); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.tl-head .tl-pay { display: none; }
.tl-azd { padding: 14px 12px; }
.tl-azd ul { gap: 10px; }
.tl-azd li { position: relative; display: flex; align-items: center; gap: 8px; outline: none; cursor: default; }
.tl-azd li svg { width: 22px; height: 22px; flex: none; color: var(--teal-600); }
.tl-azd li b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; line-height: 1.3; }
.tl-azd li b em { display: inline-block; margin-left: 5px; font-style: normal; font-size: 9.5px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 99px; padding: 1px 5px; vertical-align: 2px; }
.tl-tip { display: none; }
/* 말풍선: 마우스를 올리거나 키보드로 고르거나 누르면 */
@media (min-width: 641px) {
  [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 220px; padding: 8px 11px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.45; text-align: left; letter-spacing: -0.2px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; box-shadow: 0 10px 24px -10px rgba(30, 37, 52, .5); white-space: normal; }
  [data-tip]::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); opacity: 0; transition: opacity .15s; z-index: 5; }
  [data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip].is-tip::after { opacity: 1; transform: translateX(-50%) translateY(0); }
  [data-tip]:hover::before, [data-tip]:focus-visible::before, [data-tip].is-tip::before { opacity: 1; }
  .tl-col:first-child [data-tip]::after { left: 0; transform: translateX(0) translateY(4px); } .tl-col:first-child [data-tip]:hover::after, .tl-col:first-child [data-tip].is-tip::after { transform: translateX(0); }
  .tl-col:last-child [data-tip]::after { left: auto; right: 0; transform: translateX(0) translateY(4px); } .tl-col:last-child [data-tip]:hover::after, .tl-col:last-child [data-tip].is-tip::after { transform: translateX(0); }
  .tl-badge b { display: none; }
}
@media (max-width: 640px) {
  .tl-head { padding-right: 30px; }
  .tl-head .tl-pay { display: inline-block; }
  .tl-badge { margin-top: 6px; padding: 4px 10px; font-size: 12.5px; }
  .tl-badge--none { display: none; }
  .tl-badge b { display: inline; }
  .tl-col.is-open .tl-body { gap: 0; }
  .tl-azd li { flex-wrap: wrap; }
  .tl-azd li b { flex: 1; }
  .tl-azd li .tl-tip { flex-basis: 100%; margin: 4px 0 0 30px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
  .tl-azd li.is-tip .tl-tip { display: block; animation: revealIn .2s ease both; }
  .tl-azd li::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); margin-left: auto; flex: none; transition: transform .2s; }
  .tl-azd li.is-tip::after { transform: rotate(-135deg); }
}
.tl-azd li .tl-tip { display: none; }                       /* 설명 글은 PC에서 말풍선으로만 (위 .tl-azd li span 규칙보다 우선) */
.tl-azd li b { flex: 1; min-width: 0; }
@media (max-width: 640px) { .tl-azd li.is-tip .tl-tip { display: block; } }

/* 9/22 디렉터: 장면 설명은 제목 + 한 줄만, 시점·비용 칩은 뺌 */
.deck-cap h3 { font-size: 22px; }
.deck-cap p:last-child { margin-top: 6px; font-size: 15.5px; }
@media (max-width: 640px) { .deck-cap h3 { font-size: 19px; } .deck-cap p:last-child { font-size: 14.5px; } }
/* 9/22 디렉터: 상단 「무료로 시작」은 폰에서도 같은 모양 — 폰도 하단 고정 버튼이 주 버튼이라 상단은 보조 */
.btn3d--hd { min-height: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; background: var(--teal-500); color: #fff; box-shadow: none; text-shadow: none; }
.btn3d--hd:hover { filter: none; background: var(--teal-600); box-shadow: none; }
.btn3d--hd:active { background: var(--teal-700); box-shadow: none; }
@media (min-width: 961px) { .btn3d--hd { min-height: 36px; padding: 0 14px; font-size: 14px; } }
/* 헤더 버튼 폭 고정: 탭·페이지마다 문구(무료 모집 열어보기 / 무제한 이용권 …)가 바뀌어도 흔들리지 않게 가장 긴 문구 폭으로 (2026-10-19) */
.btn3d--hd { width: 124px; padding-inline: 0; white-space: nowrap; }
@media (min-width: 961px) { .btn3d--hd { width: 132px; } }

/* 9/22 디렉터: 「로그인」 → 「광고주센터 →」 (기존 광고주용, 광고주센터 첫 화면으로) */
.hd-login span { display: inline-block; transition: transform .15s; } .hd-login:hover span { transform: translateX(2px); }
/* 광고주센터 링크: 글자 화살표 대신 다른 곳과 같은 꺾쇠 아이콘 */
.hd-login { display: inline-flex; align-items: center; gap: 2px; }
.hd-login svg { width: 14px; height: 14px; color: var(--ink-3); transition: transform .15s; }
.hd-login:hover svg { transform: translateX(2px); }
.hd-login span { display: none; }
@media (max-width: 960px) { .hd-login { display: none !important; } } /* 폰·태블릿 상단에는 없음 — 폰 메뉴 맨 아래 「광고주센터 바로가기」가 대신한다 */

/* ---------- 첫 화면 v3 (2026-09-22 디렉터: 「누르면 뭐가 되는지」 미리 보여 주기) ---------- */
.roadmap { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; position: relative; }
.roadmap li { display: flex; align-items: flex-start; gap: 8px; position: relative; padding: 10px 10px 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
.roadmap li b { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-600); color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; margin-top: 1px; }
.roadmap li:last-child b { background: var(--accent); }
.roadmap li span { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; line-height: 1.3; }
.roadmap li small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.roadmap li:not(:last-child)::after { content: ""; position: absolute; right: -6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid var(--teal-300); border-bottom: 1.5px solid var(--teal-300); transform: rotate(-45deg); }
@media (max-width: 640px) {
  .roadmap { gap: 4px; }
  .roadmap li { padding: 8px 6px 8px 6px; gap: 6px; }
  .roadmap li b { width: 18px; height: 18px; font-size: 11px; }
  .roadmap li span { font-size: 12.5px; }
  .roadmap li small { font-size: 10.5px; }
  .roadmap li:not(:last-child)::after { right: -4px; }
}
/* 제목의 「알아서! 잘! 딱!」 — 세 단어가 차례로 뜬다 (.rise 의 단어별 등장에 이미 얹혀 있음) */
.hero h1 em + em { margin-left: .12em; }

/* ---------- 홈 02 「선정된 체험단」 강조 (디렉터: 알아서 골라 주는 게 포인트) ---------- */
.real-shot--select { position: relative; }
.adm-say { position: absolute; left: 14px; bottom: 12px; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -0.3px; box-shadow: 0 10px 22px -10px rgba(30, 37, 52, .5); z-index: 2; opacity: 0; transform: translateY(8px); }
.adm-say svg { width: 30px; height: 21px; flex: none; }
.real-shot--select.is-on .adm-say { animation: sayIn .4s ease 1.6s both; }
@keyframes sayIn { to { opacity: 1; transform: none; } }
.real-shot--select .adm-cand { opacity: 0; transform: translateY(10px); }
.real-shot--select.is-on .adm-cand { animation: candIn .45s ease both; }
.real-shot--select.is-on .adm-cand:nth-child(1) { animation-delay: .25s; } .real-shot--select.is-on .adm-cand:nth-child(2) { animation-delay: .55s; }
@keyframes candIn { to { opacity: 1; transform: none; } }
.real-shot--select .adm-check { transform: scale(0); }
.real-shot--select.is-on .adm-check { animation: checkIn .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.real-shot--select.is-on .adm-cand:nth-child(1) .adm-check { animation-delay: .9s; } .real-shot--select.is-on .adm-cand:nth-child(2) .adm-check { animation-delay: 1.2s; }
@keyframes checkIn { to { transform: scale(1); } }
@media (max-width: 640px) { .adm-say { font-size: 12px; left: 10px; bottom: 10px; padding: 5px 10px 5px 5px; } .adm-say svg { width: 24px; height: 17px; } }

.bubble { white-space: pre-line; max-width: 220px; }                       /* 두 문장을 줄로 나눠 보여 준다 */
@media (min-width: 641px) { .adm-say { left: auto; right: 14px; top: 12px; bottom: auto; } } /* PC: 머리줄 오른쪽 빈자리에 */
.bubble { top: 2px; }   /* 손 흔들 때 손이 말풍선을 가리지 않게 조금 위로 */

/* 첫 화면 로드맵 — PC · 폰 모두 한 줄 흐름 + 아래 한 줄(v165 디렉터: 심플하게 통일). 3칸 카드는 숨김 — v180 코드 정리 때 잘못 지워졌던 것을 9/26 되살림 */
#panel-store .roadmap { display: none; }
.roadmap-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; }
.roadmap-line span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.roadmap-line b { width: 20px; height: 20px; border-radius: 50%; background: var(--teal-600); color: #fff; font-size: 11.5px; display: grid; place-items: center; }
.roadmap-line span:last-child b { background: var(--teal-600); }
.roadmap-line i { width: 7px; height: 7px; border-right: 1.5px solid var(--ink-4, #B4BAC4); border-bottom: 1.5px solid var(--ink-4, #B4BAC4); transform: rotate(-45deg); margin: 0 4px; }
.roadmap-sub { display: block; margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) {
  .roadmap-line { gap: 4px 6px; margin: 14px 0 0; font-size: 13.5px; }
  .roadmap-line span { gap: 5px; } .roadmap-line b { width: 18px; height: 18px; font-size: 11px; } .roadmap-line i { width: 6px; height: 6px; margin: 0 2px; }
  .roadmap-sub { margin: 6px 0 0; font-size: 12px; }
}

@media (max-width: 640px) {
  @keyframes waveM { 0% { transform: rotate(6deg); } 15%, 85% { transform: translate(10px, -52px) rotate(8deg); } 30%, 60% { transform: translate(10px, -52px) rotate(40deg); } 45%, 75% { transform: translate(10px, -52px) rotate(-10deg); } 100% { transform: rotate(6deg); } }
  .starter.is-done .hand--r, .starter.is-hello .hand--r { animation-name: waveM; }   /* 폰: 손을 덜 올려 말풍선을 가리지 않게 */
}

.bubble { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.bubble.is-shown { opacity: 1; visibility: visible; transition: opacity .25s; }

/* 말풍선이 어떤 문장에서도 잘리지 않게 (2026-09-23 디렉터) — PC는 폭을 넉넉히, 폰은 화면 오른쪽 16px 안쪽에 맞추고 왼쪽으로 늘어난다 */
.bubble { max-width: 260px; word-break: keep-all; }
@media (max-width: 640px) {
  .bubble { left: auto; right: calc(50% + 16px - 50vw); top: 0; max-width: calc(100vw - 32px); width: max-content; border-radius: 16px 16px 16px 4px; }
}

/* ---------- 무제한 이용권 페이지 (2026-09-23) ---------- */
.ph-note { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }
.uw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.uw-card { background: #fff; border-radius: var(--radius-m); padding: 22px 20px; box-shadow: 0 0 0 1px var(--line); }
.uw-card i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal-50); font-style: normal; font-size: 22px; margin-bottom: 12px; }
.uw-card b { display: block; font-size: 17px; letter-spacing: -0.5px; }
.uw-card p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

 

 
 
@keyframes barIn { from { transform: scaleX(0); } }
.ucase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; background: var(--ink); color: #fff; border-radius: clamp(20px, 3vw, 32px); padding: clamp(24px, 4vw, 44px); }
.ucase .eyebrow { background: none; color: #A9E3E9; }
.ucase h3 { margin: 12px 0 10px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; letter-spacing: -0.5px; } .ucase h3 b { color: #69F0FF; }
.ucase-txt p { margin: 0; color: rgba(255, 255, 255, .8); line-height: 1.6; }

.ucase-shot { margin: 0; background: #fff; border-radius: 16px; overflow: hidden; position: relative; color: var(--ink); }
.ucase-shot figcaption { position: absolute; right: 10px; top: 10px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(30, 37, 52, .82); border-radius: 99px; padding: 3px 10px; }
.urep { padding: calc(20 * var(--u)); }
.urep-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); margin: calc(14 * var(--u)) 0; }
.urep-kpis div { background: #F7F8F9; border-radius: calc(10 * var(--u)); padding: calc(12 * var(--u)); text-align: center; }
.urep-kpis b { display: block; font-size: calc(24 * var(--u)); font-weight: 600; } .urep-kpis span { font-size: calc(11.5 * var(--u)); color: #72798A; }
.urep-ch { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: #4E5668; margin-bottom: calc(12 * var(--u)); }
.urep-ch i { display: inline-block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; margin-right: calc(5 * var(--u)); } .urep-ch .c1 { background: #36B7C5; } .urep-ch .c2 { background: #2DB400; } .urep-ch .c3 { background: #DA2872; }

.unow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.unow-col { border-radius: var(--radius-m); padding: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.unow-col.is-soon { background: linear-gradient(135deg, #F3F0FF, #EEF9FA); box-shadow: none; }
.unow-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--teal-700); margin-bottom: 12px; }
.unow-tag em { font-style: normal; font-size: 10.5px; color: #fff; background: var(--accent); border-radius: 99px; padding: 2px 7px; }
.unow ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.unow li b { display: block; font-size: 15px; letter-spacing: -0.3px; } .unow li span { font-size: 13.5px; color: var(--ink-2); }
.unow-foot { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); }
.fork2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fork2-card { display: block; background: #fff; border-radius: var(--radius-m); padding: 24px 22px; box-shadow: 0 0 0 1px var(--line); color: inherit; transition: transform .15s, box-shadow .15s; }
.fork2-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--teal-300), var(--shadow-card); }
.fork2-card.is-hot { box-shadow: 0 0 0 1px var(--teal-500); }
.fork2-tag { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--teal-700); background: var(--teal-50); border-radius: 99px; padding: 4px 10px; }
.fork2-card > b { display: block; margin-top: 12px; font-size: 22px; letter-spacing: -0.5px; }
.fork2-card > p { margin: 4px 0 12px; font-weight: 600; color: var(--ink-2); }
.fork2-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.fork2-card ul li::before { content: "✓ "; color: var(--teal-600); font-weight: 600; }
.fork2-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; font-weight: 600; color: var(--teal-700); font-size: 14.5px; }
@media (max-width: 640px) {
  .uw, .unow, .fork2 { grid-template-columns: minmax(0, 1fr); }
     
  .ucase { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
.faq-list--page { gap: 10px; }                      /* 질문 카드 사이 간격 (무제한 페이지처럼 묶음 없이 바로 카드가 올 때도) */
.faq-group + .faq-group { margin-top: 30px; }       /* 묶음 사이는 10 + 30 = 40 유지 */

/* ---------- 소량 · 무제한 보강 (2026-09-23) ---------- */
.chan { margin-top: 28px; }
 

 

 

  
 
 
  
.unl-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 18px 22px; border-radius: var(--radius-m); background: var(--ink); color: #fff; }
.unl-cta b { display: block; font-size: 17px; letter-spacing: -0.3px; } .unl-cta small { display: block; margin-top: 2px; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.unl-cta em { flex: none; font-style: normal; font-weight: 600; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14.5px; }
.coins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; max-width: 760px; margin: 0 auto 8px; }
.coin-col { text-align: center; position: relative; padding-top: 12px; }
.coin-stack { position: relative; height: 200px; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; }
.coin-stack::before { content: ""; display: block; width: 64px; height: calc(var(--n) * 6px); max-height: 190px; background: repeating-linear-gradient(180deg, #F3C969 0 4px, #C99A2E 4px 6px); border-radius: 32px / 6px; box-shadow: inset 0 3px 0 #FFE7A3, 0 8px 14px -8px rgba(0, 0, 0, .35); animation: coinUp .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom; }
.coin-col.is-hero .coin-stack::before { width: 72px; background: repeating-linear-gradient(180deg, #F3C969 0 4px, #C99A2E 4px 6px); }
@keyframes coinUp { from { transform: scaleY(0); } }
.coin-col > b { display: block; margin-top: 12px; font-size: 20px; } .coin-col > b small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.coin-col > span { display: block; font-size: 13.5px; color: var(--ink-2); } .coin-col > span small { display: block; font-size: 12px; color: var(--ink-3); }
.coin-col.is-hero > b { color: #DA2872; font-size: 26px; }
.coin-col em { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 99px; padding: 3px 10px; }

.ptable tr.is-best td { background: var(--teal-50); font-weight: 600; } .ptable td em { font-style: normal; font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 99px; padding: 2px 7px; margin-left: 6px; vertical-align: 1px; } .ptable td small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 640px) {
  .coins { gap: 8px; } .coin-stack { height: 150px; } .coin-stack::before { width: 48px; height: calc(var(--n) * 4.5px); max-height: 140px; } .coin-col.is-hero .coin-stack::before { width: 54px; }
  .coin-col > b { font-size: 16px; } .coin-col.is-hero > b { font-size: 20px; } .coin-col > span { font-size: 12px; }
  .unl-cta { flex-direction: column; align-items: flex-start; } .unl-cta em { align-self: stretch; text-align: center; }
    
}
.coin-col em { white-space: nowrap; }
.ustep::before { display: none; }
.final .btn-row + .assure { justify-content: center; margin-top: 18px; }
.final .btn-row--center { margin-top: 24px; }
.adm-say, .adm-say span { color: #fff !important; opacity: 1; }   /* 관리자 화면 안의 회색 글자 규칙에 덮이지 않게 */

/* ---------- 무제한 페이지 품질 (2026-09-23 오후) ---------- */
.ph-in .sum-chips { margin-top: 22px; }
.ph-note { margin-top: 14px; }
.coin-stack { height: auto; display: block; }
.coin-stack svg { display: block; margin: 0 auto; overflow: visible; }
.coin-stack g { transform-box: fill-box; animation: coinDrop .45s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes coinDrop { from { opacity: 0; translate: 0 -24px; } }
.coins { align-items: end; margin-bottom: 36px; }
.coin-col { display: grid; justify-items: center; gap: 4px; padding-top: 30px; }
.coin-col em { top: 0; }
.coin-col > b { margin-top: 10px; }
.urep-sub { font-size: calc(12 * var(--u)); font-weight: 600; color: #72798A; margin: calc(6 * var(--u)) 0 calc(8 * var(--u)) !important; }
.urep-list { display: grid; gap: calc(8 * var(--u)); }
.urep-row { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: #F7F8F9; }
.urep-row em { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(8 * var(--u)); flex: none; }
.urep-row div { flex: 1; min-width: 0; } .urep-row b { display: block; font-size: calc(12.5 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .urep-row span { font-size: calc(11 * var(--u)); color: #72798A; }
.urep-row i { flex: none; font-style: normal; font-size: calc(10.5 * var(--u)); font-weight: 600; border-radius: 99px; padding: calc(3 * var(--u)) calc(8 * var(--u)); }
.urep-ok { background: #EEF9FA; color: #1AACBC; } .urep-wait { background: #FFF7FA; color: #DA2872; }
.urep-more2 { margin: calc(10 * var(--u)) 0 0 !important; text-align: right; font-size: calc(11.5 * var(--u)); font-weight: 600; color: #1AACBC; }
.unl-notes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.unl-notes li { display: flex; gap: 10px; align-items: baseline; }
.unl-notes b { flex: none; min-width: 40px; font-size: 12px; font-weight: 600; color: var(--teal-700); background: var(--teal-50); border-radius: 6px; padding: 2px 8px; text-align: center; }
.ustep { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; counter-reset: us; }
.ustep::before { content: ""; position: absolute; left: 12%; right: 12%; top: 44px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--teal-300), #DA2872); opacity: .35; }
.ustep li { position: relative; text-align: center; background: #fff; border-radius: var(--radius-m); padding: 22px 18px 24px; box-shadow: 0 0 0 1px var(--line); }
.ustep-n { position: absolute; top: 14px; left: 14px; font-size: 12px; font-weight: 600; color: var(--teal-700); }
.ustep-ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--teal-50); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--teal-100); }
.ustep-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--teal-700); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ustep li b { display: block; font-size: 17px; letter-spacing: -0.4px; }
.ustep li em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); border-radius: 99px; padding: 3px 9px; }
.ustep li p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 640px) {
  .ustep { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ustep::before { display: none; }
  .ustep li { padding: 18px 12px 18px; } .ustep-ic { width: 46px; height: 46px; } .ustep-ic svg { width: 22px; height: 22px; } .ustep li b { font-size: 15px; }
  .coin-stack svg { width: 72px; height: auto; }
}

.urep-row img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(8 * var(--u)); object-fit: cover; flex: none; }
.duo2-price--unl { display: grid; gap: 2px; } .duo2-price--unl b { font-size: 20px; color: var(--teal-700); } .duo2-price--unl small { font-size: 13px; color: var(--ink-3); }

.ptable tr.is-best td { box-shadow: inset 0 2px 0 var(--teal-500), inset 0 -2px 0 var(--teal-500); }
.ptable tr.is-best td:first-child { box-shadow: inset 2px 2px 0 var(--teal-500), inset 0 -2px 0 var(--teal-500); border-radius: 10px 0 0 10px; }
.ptable tr.is-best td:last-child { box-shadow: inset -2px 2px 0 var(--teal-500), inset 0 -2px 0 var(--teal-500); border-radius: 0 10px 10px 0; }
.duo .sec-lead b { color: var(--teal-700); }

/* ---------- 무제한 첫 화면: 플랫폼 로고 흐름 (2026-09-23) ---------- */
.logoflow { width: 100vw; margin: 34px calc(50% - 50vw) 4px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logoflow-row { overflow: hidden; }
.logoflow-track { display: flex; gap: 10px; width: max-content; animation: logoRun 42s linear infinite; }
.logoflow:hover .logoflow-track { animation-play-state: paused; }
@keyframes logoRun { to { transform: translateX(-50%); } }
.lg { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; white-space: nowrap; }
.lg b { font-weight: 600; } 

.lg--any { background: var(--ink); color: #fff; box-shadow: none; }
@media (max-width: 640px) { .logoflow { margin-top: 24px; } .lg { height: 40px; padding: 0 14px; font-size: 14px; } .logoflow-track { animation-duration: 30s; } }

/* 흐르는 알약 띠: 테두리(그림자)가 위아래로 잘리지 않게 안쪽 여백 */
.ticker, .logoflow-row { padding: 3px 0; }
.ticker-track span, .lg { box-shadow: inset 0 0 0 1px var(--line); }
.lg { box-shadow: inset 0 0 0 1px var(--line); }
.ph-in .hero-badge { margin-bottom: 18px; }

/* ---------- 쇼핑몰 탭 홈 (2026-09-23) + 「쇼핑몰」 꼬리표 ---------- */
.tagx { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; color: var(--teal-700); background: var(--teal-50); border-radius: 6px; padding: 2px 7px; vertical-align: 2px; margin-left: 2px; letter-spacing: -0.2px; }
.hero-badge .tagx { margin-left: 4px; } .nav-drop b .tagx, .mm-row .tagx { vertical-align: 1px; }
.shop-fork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-fork-card { display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-align: left; transition: box-shadow .15s; }
.shop-fork-card.is-hot { box-shadow: inset 0 0 0 1px var(--teal-500); }
/* 호버는 두 카드 똑같이: 테두리 teal-500 + 옅게 퍼진 그림자, 위로 뜨지 않음 (2026-10-19) */
.shop-fork-card:hover, .shop-fork-card.is-hot:hover { box-shadow: inset 0 0 0 1px var(--teal-500), 0 12px 32px -14px rgba(30,37,52,.14); }
.shop-fork-card b { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin-top: 4px; } .shop-fork-card small { font-size: 15px; color: var(--ink-2); font-weight: 500; }
.shop-fork-card em { margin-top: 8px; font-style: normal; font-weight: 600; font-size: 15px; color: var(--teal-700); }
.logoflow--card { width: auto; margin: 14px 0 0; } .logoflow--card .lg { height: 38px; padding: 0 14px; font-size: 13.5px; } 
.btn-ghost--white { background: #fff; }
.btn-ghost--sm { min-height: 42px; padding: 0 16px; font-size: 14.5px; border-radius: 12px; }
@media (max-width: 640px) { .shop-fork { grid-template-columns: minmax(0, 1fr); } .shop-fork-card { padding: 14px; } }
.fork2-tag { display: inline-block; width: auto; }
.shop-fork-card .fork2-tag { justify-self: start; }

/* 줄바꿈: br-m 은 폰에서만, br-p 는 PC에서만 (2026-09-23 디렉터: 문장 단위로 끊어 가독성) */
.br-m { display: none; } @media (max-width: 640px) { .br-m { display: inline; } .br-p { display: none; } }

/* 소량 페이지: 받을 수 있는 리뷰 종류 (2026-09-23, 옛 채널 고르기 대체) */
.chan2 { margin-top: 28px; }
.chan2-h { margin: 0 0 12px; font-weight: 600; font-size: 17px; }
.chan2-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.chan2-list li { background: #fff; border-radius: var(--radius-m); padding: 16px 14px; box-shadow: 0 0 0 1px var(--line); }
.chan2-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-style: normal; font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.chan2-list b { display: block; font-size: 15px; letter-spacing: -0.3px; } .chan2-list span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.chan2-foot { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 640px) { .chan2-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .chan2-list li { padding: 12px; } .chan2-list li:last-child { grid-column: 1 / -1; } }

.chan2-svg { width: 18px; height: 18px; }
 

/* 1석2조 카드 안 플랫폼 알약 — 첫 화면 띠와 같은 모양, 작게 */

  
.clip-img { border-radius: 4px; object-fit: cover; }

/* ---------- 플랫폼 알약 v2 (2026-09-23): 전부 공식 로고 파일, 크기 통일 — 알약 44px · 아이콘 22px · 글자 로고 높이 18px ---------- */
.lg { height: 44px; padding: 0 18px; gap: 8px; font-size: 14.5px; font-weight: 600; }
.lg-w { display: block; height: 18px; width: auto; max-width: 96px; object-fit: contain; }
.lg-i { display: grid; place-items: center; width: 22px; height: 22px; flex: none; } .lg-i img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }
 

  
.logoflow--card .lg { height: 38px; padding: 0 14px; font-size: 13.5px; } .logoflow--card .lg-w { height: 15px; max-width: 84px; } .logoflow--card .lg-i, .logoflow--card .lg-i img { width: 19px; height: 19px; }
@media (max-width: 640px) { .lg { height: 40px; padding: 0 14px; font-size: 13.5px; } .lg-w { height: 16px; max-width: 86px; } .lg-i, .lg-i img { width: 20px; height: 20px; } }

/* 글자 로고끼리 시각 무게 맞추기 */
.lg-w[src*="musinsa"] { height: 13px; } .lg-w[src*="ssg"] { height: 14px; } .lg-w[src*="gmarket"] { height: 19px; } .lg-w[src*="11st"] { height: 20px; } .lg-w[src*="oliveyoung"] { height: 15px; } .lg-w[src*="coupang"] { height: 19px; }
   
.lg--any { color: #fff !important; }

@media (max-width: 640px) {
  .sum-chips--unl li { padding: 10px 6px; } .sum-chips--unl li b { font-size: 17px; letter-spacing: -0.5px; white-space: nowrap; } .sum-chips--unl li { font-size: 11.5px; white-space: nowrap; }
  .coin-col > span { white-space: nowrap; font-size: 11.5px; } .coin-col > b { font-size: 15px; } .coin-col.is-hero > b { font-size: 19px; } .coin-col > b small { font-size: 10.5px; }
}
/* 동전 세 칸: 금액 줄이 같은 높이에 오게 (줄마다 행을 맞춤) */
.coins { grid-template-rows: auto auto auto; align-items: stretch; }
.coin-col { grid-row: span 3; grid-template-rows: subgrid; align-items: end; }
.coin-col .coin-stack { align-self: end; }
.coin-col > b { align-self: end; } .coin-col > span { align-self: start; }
.coin-col em { top: auto; bottom: calc(100% - 26px); } .coin-col.is-hero { position: relative; }
.coin-col.is-hero .coin-stack { position: relative; } .coin-col.is-hero .coin-stack::after { content: "98% 저렴"; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.coin-col > em { display: none; }

/* 무제한 가격 블록 폰 (2026-09-23): 한 달권 카드 작게, 표는 3열로 한 화면에 */
#unl-price .ptable { min-width: 0; }
#unl-price .ptable td small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 640px) {
  #unl-price .price-main { padding: 18px 18px 16px; gap: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  #unl-price .price-tag { flex-basis: 100%; }
  #unl-price .price-big { font-size: 28px; } #unl-price .price-big small { font-size: 13px; }
  #unl-price .price-main .btn3d { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
  #unl-price .scroll-x { overflow: visible; margin: 0; }
  #unl-price .ptable { font-size: 13.5px; } #unl-price .ptable th, #unl-price .ptable td { padding: 11px 10px; }
  #unl-price .ptable td em { font-size: 10px; padding: 1px 6px; margin-left: 4px; }
}
/* 12개월 강조 줄: 표 모서리·둘레에 테두리가 잘리지 않게 — 표 안 테두리 대신 바깥 테두리를 쓴다 */
#unl-price .ptable { overflow: visible; }
#unl-price .ptable tr.is-best td { box-shadow: inset 0 2px 0 var(--teal-500), inset 0 -2px 0 var(--teal-500); border-radius: 0; }
#unl-price .ptable tr.is-best td:first-child { box-shadow: inset 2px 2px 0 var(--teal-500), inset 0 -2px 0 var(--teal-500); border-radius: 0 0 0 var(--radius-m); }
#unl-price .ptable tr.is-best td:last-child { box-shadow: inset -2px 2px 0 var(--teal-500), inset 0 -2px 0 var(--teal-500); border-radius: 0 0 var(--radius-m) 0; }
#unl-price .ptable thead th:first-child { border-radius: var(--radius-m) 0 0 0; } #unl-price .ptable thead th:last-child { border-radius: 0 var(--radius-m) 0 0; }

.final .btn-row--duo .btn3d, .final .btn-row--duo .btn-ghost { min-height: 54px; padding: 0 24px; font-size: 16px; }
@media (max-width: 640px) { .final .btn-row--duo .btn3d, .final .btn-row--duo .btn-ghost { flex: 1 1 0; min-height: 50px; padding: 0 12px; font-size: 15px; } }

/* ---------- 1석2조 카드: 로고만 한 줄 (2026-09-23 안 A) ---------- */
.duo2-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lgo { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: default; outline: none; }
.lgo img { width: 20px; height: 20px; object-fit: contain; }
.lgo--w img { width: 24px; height: 12px; }
 
.lgo--any { width: auto; padding: 0 12px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: none; }
.lgo img[src*="naverclip"] { border-radius: 5px; }
@media (max-width: 640px) { .lgo { width: 32px; height: 32px; } .lgo img { width: 18px; height: 18px; } .lgo--w img { width: 22px; height: 11px; } .duo2-logos { gap: 5px; } }
/* 글자 로고는 원이 아니라 넓은 알약에, 「어디든」은 흰 글자 고정 */
.lgo--w { width: auto; min-width: 34px; padding: 0 10px; border-radius: 99px; }
.lgo--w img { width: auto; max-width: 62px; height: 12px; }
.lgo--w img[src*="11st"] { height: 15px; } .lgo--w img[src*="gmarket"] { height: 14px; } .lgo--w img[src*="coupang"] { height: 13px; } .lgo--w img[src*="oliveyoung"] { height: 10px; } .lgo--w img[src*="musinsa"] { height: 9px; } .lgo--w img[src*="ssg"] { height: 10px; }
.lgo--any { width: auto !important; height: 34px; padding: 0 12px !important; border-radius: 99px !important; color: #fff !important; }
.lgo--any::after, .lgo--any::before { display: none; }
@media (max-width: 640px) { .lgo--w { min-width: 32px; padding: 0 9px; } .lgo--w img { height: 11px; max-width: 56px; } .lgo--any { height: 32px; font-size: 12px; } }

/* 2026-09-23 v133 — 1석2조 그림을 「한 장 카드」로: 머리(협찬 1회) → 결과 두 줄 → 가격 밑단. 갈래 화살표 없앰, 로고는 줄마다 한 줄 */
.duo2 { display: block; width: 100%; max-width: 500px; justify-self: center; justify-items: stretch; background: #fff; border-radius: var(--radius-l); box-shadow: 0 0 0 1px var(--line), var(--shadow-card); overflow: hidden; }
.duo2-fork, .duo2-fork--h, .duo2-fork--v { display: none !important; }
.duo2-one { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; border-radius: 0; box-shadow: none; padding: 16px 22px; }
.duo2-one small { font-size: 13.5px; } .duo2-one b { font-size: 20px; }
.duo2-outs { display: block; width: auto; }
.duo2-out { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ico t" "ico s"; justify-items: stretch; text-align: left; column-gap: 14px; row-gap: 8px; background: none; border-radius: 0; box-shadow: none; padding: 18px 22px; min-height: 0 !important; }
.duo2-out + .duo2-out { border-top: 1px solid var(--line); }
.duo2-out i { width: 40px; height: 40px; border-radius: 12px; } .duo2-out i svg { width: 21px; height: 21px; }
.duo2-out b { font-size: 16px; align-self: center; }
.duo2-logos { flex-wrap: wrap; row-gap: 6px; margin-top: 0; } .duo2-logos > * { flex-shrink: 0; }
.duo2-price { margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); background: linear-gradient(90deg, var(--teal-50), var(--pink-50)); }
.duo2-price--unl { justify-items: center; text-align: center; }
@media (max-width: 640px) {
  .duo2 { max-width: none; }
  .duo2-one { padding: 14px 18px; } .duo2-one b { font-size: 18px; }
  .duo2-out { grid-template-areas: "ico t" "s s"; padding: 16px 18px; row-gap: 10px; }
  .duo2-out b { font-size: 15.5px; }
  .duo2-logos { gap: 5px; } /* v134: 쇼핑몰 로고 9곳 + 어디든, 두 줄 */
  .duo2-price { margin: 0; padding: 12px 18px; }
}
@media (max-width: 640px) { .duo2-logos { gap: 5px 4px; } .duo2-logos .lgo--w { padding: 0 7px; } .duo2-logos .lgo--any { padding: 0 10px !important; } }
@media (max-width: 380px) { .duo2-logos .lgo--w { padding: 0 5px; } .duo2-logos .lgo--w img { max-width: 50px; } .duo2-logos .lgo--any { padding: 0 8px !important; } }
/* v135: 카카오톡 쇼핑하기(가게 아이콘) · 컬리 로고 */
.lgo--ks { overflow: hidden; box-shadow: none; } .lgo--ks img { width: 100%; height: 100%; }
.lgo--w img[src*="kurly"] { height: 16px; }
.lg-w[src*="kurly"] { height: 18px; }
@media (max-width: 640px) { .duo2-logos .lgo[data-tip="자사몰"] { display: none; } } /* 폰: 로고 11개면 3줄 → 자사몰은 「어디든」이 대신 */
@media (max-width: 640px) { .duo2-logos .lgo--w img { max-width: 48px; } }
@media (max-width: 380px) { .duo2-logos .lgo--w img { max-width: 46px; } }
/* v136: 서비스 메뉴 — 설명 한 줄 + 상태 줄(초록 점 = 지금, 회색 점 = 10월 중순) */
.nav-drop { min-width: 320px; }
.nav-drop span { display: block; margin-top: 2px; }
.nav-st { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-style: normal; }
.st { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; color: var(--ink-2); }
.st b { display: inline-flex; align-items: center; gap: 4px; font-size: 11px !important; font-weight: 600; line-height: 1; padding: 3px 7px 3px 6px; border-radius: 99px; margin: 0 !important; }
.st b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.st--on b { color: #13804F; background: #E4F7EE; } .st--on b::before { background: #22B573; box-shadow: 0 0 0 1px rgba(34, 181, 115, .22); }
.st--soon { color: var(--ink-3); } .st--soon b { color: #5B6475; background: #EEF0F4; } .st--soon b::before { background: #A3ABB8; }
.mm-row--sub .nav-st { margin-top: 5px; }

/* v141: 질문 페이지 서비스 탭 + 서비스 뱃지 (알잘딱 청록 · 무제한 분홍 · 소량 파랑 · 공통 회색) */
.faq-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-width: 520px; margin: 18px auto 0; padding: 4px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.faq-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 8px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.faq-tab.is-on { background: var(--ink); color: #fff; }
.svc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.svc-dot--azd { background: #36B7C5; } .svc-dot--unl { background: #DA2872; } .svc-dot--small { background: #4C6EF5; }
.faq-chips[hidden] { display: none !important; }
.svc { display: inline-block; vertical-align: 2px; margin-right: 8px; padding: 3px 8px; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; }
.svc--azd { color: #1F7C8A; background: #E3F6F8; }
.svc--unl { color: #B81E60; background: #FDE8F1; }
.svc--small { color: #3B5BDB; background: #EDF2FF; }
.svc--all { color: #5B6475; background: #EEF0F4; }
@media (max-width: 640px) {
  .faq-tabs { margin-top: 14px; max-width: none; }
  .faq-tab { min-height: 40px; font-size: 14px; gap: 5px; }
  .svc { font-size: 11px; padding: 2px 6px; margin-right: 6px; }
}
/* v142: 전수 점검 수정 묶음 */
p, li, dd, summary, .sec-lead, .ph-lead, figcaption { text-wrap: pretty; }   /* 문단 끝줄에 한두 단어만 남지 않게 */
.app-pills { margin-inline: calc(-14 * var(--u)); padding-inline: calc(14 * var(--u)); }   /* 폰 그림 속 알약이 왼쪽 밖으로 삐져 「플」 조각이 보이던 것 */
.hero { padding-bottom: clamp(40px, 5vw, 64px); }   /* 첫 화면 아래 흰 띠 줄임 */
/* 키워드 티커는 아래 「결과부터 보여드릴게요」 섹션에 붙어 보이게: 위 간격 늘리고 아래 흰 띠는 줄인다 (2026-10-19) */
.hero:has(> .ticker) { padding-bottom: 24px; }
.hero > .ticker { margin-top: 96px; }
@media (max-width: 640px) { .hero > .ticker { margin-top: 72px; } .hero:has(> .ticker) { padding-bottom: 16px; } }
@media (min-width: 1025px) { .real-stack--code { align-items: center; } }   /* 시작한 뒤 화면: 짧은 화면 아래가 텅 비던 것 → 가운데 */
@media (max-width: 640px) {
  .real-shot--phone { position: relative; }
  .real-shot--phone figcaption { position: absolute; z-index: 2; }   /* 이름표가 자리를 차지해 폰 화면 아래가 잘리던 것 */
  [data-page="pricing"] .promise div { display: flex; align-items: center; justify-content: center; }   /* 약속 칩 3개 글자 세로 가운데 */
}

.uw-card p, .ustep li p, .pay-what, .plan p, .deck-cap p, .fork2 li, .unow-col span, .serp-title { text-wrap: balance; }   /* 두세 줄짜리 카드 문단은 줄 길이를 고르게 */
/* v143: 이용 방법 「모집 중」= 캠페인 관리 카드, 「진행 중」= 예약 현황 (9/23 실제 광고주센터 구조) */
.cm, .bk { padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u)); background: #fff; }
.cm-h { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 600; }
.cm-h .app-chev { border-color: #1E2534; width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.cm-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: calc(18 * var(--u)); border-bottom: calc(2 * var(--u)) solid #EEF0F4; }
.cm-tabs span { text-align: center; padding: calc(12 * var(--u)) 0; font-size: calc(15 * var(--u)); color: #72798A; }
.cm-tabs .on { color: #1E2534; font-weight: 600; box-shadow: inset 0 calc(-3 * var(--u)) 0 #1AACBC; }
.cm-card { margin-top: calc(18 * var(--u)); border: calc(1 * var(--u)) solid #E6E9EE; border-radius: calc(14 * var(--u)); padding: calc(18 * var(--u)); }
.cm-top { display: flex; align-items: center; gap: calc(14 * var(--u)); } .cm-top .fph { width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(34 * var(--u)); flex: none; }
.cm-top > div { display: grid; gap: calc(4 * var(--u)); min-width: 0; } .cm-top small { font-size: calc(12 * var(--u)); color: #72798A; } .cm-top b { font-size: calc(17 * var(--u)); }
.cm-type { font-size: calc(13 * var(--u)); color: #4A5263; } .cm-rep { margin-left: auto; flex: none; font-size: calc(13 * var(--u)); font-weight: 600; border: calc(1 * var(--u)) solid #E6E9EE; border-radius: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); }
.cm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)) calc(16 * var(--u)); margin-top: calc(16 * var(--u)); padding-top: calc(14 * var(--u)); border-top: calc(1 * var(--u)) solid #EEF0F4; }
.cm-stats p { font-size: calc(14 * var(--u)); color: #72798A; } .cm-stats b { margin-left: calc(6 * var(--u)); color: #1E2534; } .cm-stats b.c-brand { color: #1AACBC; }
.cm-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); }
.cm-btns span { text-align: center; font-size: calc(13.5 * var(--u)); font-weight: 600; background: #F4F6F9; border-radius: calc(8 * var(--u)); padding: calc(12 * var(--u)) 0; }
.bk-week { display: flex; justify-content: center; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(18 * var(--u)); padding-top: calc(16 * var(--u)); border-top: calc(1 * var(--u)) solid #EEF0F4; font-size: calc(16 * var(--u)); font-weight: 600; } .bk-week i { font-style: normal; color: #72798A; }
.bk-days { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: calc(14 * var(--u)); }
.bk-days span { display: grid; justify-items: center; gap: calc(10 * var(--u)); font-size: calc(13 * var(--u)); color: #72798A; } .bk-days .sun { color: #E03E52; }
.bk-days b { position: relative; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; font-size: calc(14 * var(--u)); font-weight: 600; color: #1E2534; }
.bk-days b.on { background: #1AACBC; color: #fff; } .bk-days b.bk-dot::after { content: ""; position: absolute; bottom: calc(-6 * var(--u)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #1AACBC; }
.bk-date { margin-top: calc(22 * var(--u)) !important; font-size: calc(15 * var(--u)); font-weight: 600; } .bk-date b { color: #1AACBC; }
.bk-table { margin-top: calc(10 * var(--u)); }
.bk-tr { display: grid; grid-template-columns: 0.8fr 1.5fr 1fr 1fr; align-items: center; padding: calc(13 * var(--u)) calc(12 * var(--u)); font-size: calc(14 * var(--u)); border-bottom: calc(1 * var(--u)) solid #EEF0F4; }
.bk-th { background: #F4F6F9; border-bottom: 0; font-size: calc(13 * var(--u)); color: #4A5263; }
.bk-tr u { text-decoration: none; font-size: calc(12.5 * var(--u)); font-weight: 600; color: #1AACBC; background: #E3F6F8; border-radius: calc(6 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); }
.real-stack--how .real-shot--cm, .real-stack--how .real-shot--bk { max-width: 720px; }
@container (max-width: 480px) { .cm-rep { display: none; } .cm-stats { grid-template-columns: 1fr; gap: calc(6 * var(--u)); } .cm-stats p { display: flex; justify-content: space-between; font-size: calc(17 * var(--u)); } .cm-stats b { white-space: nowrap; } .cm-top b { font-size: calc(21 * var(--u)); } .cm-top small { font-size: calc(15 * var(--u)); } .cm-btns span { font-size: calc(15 * var(--u)); white-space: nowrap; letter-spacing: -0.04em; } }
[data-for][hidden] { display: none !important; }   /* 매장/쇼핑몰 탭 글자 바꿈이 다른 스타일에 지지 않게 */
/* v147: 설계 메모 — 페이지마다 한 장(헤더 아래) + 섹션 번호표. 「설계 메모 보기」를 켰을 때만 */
.pmemo { display: none; padding-top: 14px; }
body.notes-on .pmemo { display: block; }
.pmemo-card { border: 1px dashed var(--pink-400); background: #FFF7FA; border-radius: 16px; text-align: left; color: var(--ink-2); font-size: 14px; }
.pmemo-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 14px 18px; }
.pmemo-card > summary::-webkit-details-marker { display: none; }
.pmemo-tag { font-size: 12px; font-weight: 600; color: #fff; background: var(--pink-400); border-radius: 6px; padding: 3px 8px; }
.pmemo-card > summary b { font-size: 16px; color: var(--ink); }
.pmemo-cnt { font-size: 13px; color: #B81E60; font-weight: 600; }
.pmemo-card > summary em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pmemo-card[open] > summary em { font-size: 0; } .pmemo-card[open] > summary em::after { content: "접기"; font-size: 13px; }
.pmemo-head { margin: 0; padding: 0 18px 14px; display: grid; gap: 6px; }
.pmemo-head div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
.pmemo-head dt { font-size: 12.5px; font-weight: 600; color: #B81E60; padding-top: 1px; } .pmemo-head dd { margin: 0; color: var(--ink); }
.pmemo-body { border-top: 1px dashed rgba(218, 40, 114, .35); padding: 14px 18px 18px; display: grid; gap: 14px; }
.pmemo-sub { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); } .pmemo-sub small { font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.pmemo-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pmemo-rows > li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: start; }
.pmemo-rows button { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pmemo-rows button b { flex: none; font-size: 11.5px; color: #fff; background: var(--ink); border-radius: 6px; padding: 2px 6px; }
.pmemo-rows button:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pmemo-rows p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.pmemo-flag b { font-size: 13px; } .pmemo-flag ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; }
.pmemo-flag.is-chk b { color: #B81E60; } .pmemo-flag.is-fake b { color: #5B6475; }
.pmemo-all { border-top: 1px dashed rgba(218, 40, 114, .35); padding-top: 12px; }
.pmemo-all > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #B81E60; }
.pmemo-all-pg { margin-top: 10px; } .pmemo-all-pg b { font-size: 13px; color: var(--ink); } .pmemo-all-pg ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.pmemo-all-pg .is-chk { color: #B81E60; }
.memo-pin { display: none; }
body.notes-on section[data-memo-n] { position: relative; }
body.notes-on .memo-pin { display: block; position: absolute; z-index: 5; top: 10px; left: 12px; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--pink-400); border-radius: 6px; padding: 3px 8px; pointer-events: none; }
@media (max-width: 640px) {
  .pmemo-card > summary { padding: 12px 14px; } .pmemo-head, .pmemo-body { padding-left: 14px; padding-right: 14px; }
  .pmemo-head div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pmemo-rows > li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
/* v149: 홈 매장 탭 「외식이 아닌 매장이라면」 — 선택지가 아니라 오픈 안내 */
.soon { text-align: center; } .soon .sec-head { margin-inline: auto; } .soon-tags { justify-content: center; margin: 4px 0 26px; } .soon-tags span { background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .soon-foot { margin-top: 18px; text-align: center; }

.soon .sec-title::after { margin-inline: auto; }
/* v150: 이용 방법 매장/쇼핑몰 탭 + 쇼핑몰 「시작하는 순서」(결제만 두 갈래) + 「선정은 캠페인 종류에 따라」 */
.seg--how { margin: 18px auto 26px; }

 

 

 

.pmemo-why { margin: 0; padding-left: 16px; font-size: 13.5px; line-height: 1.55; display: grid; gap: 2px; } .pmemo-why li { display: list-item; }   

 

 

   /* 홈은 폰에서 3단계를 한 줄 요약으로 바꾸지만, 이용 방법은 3단계 그대로 */
/* v155: 쇼핑몰 탭 첫 화면 — 매장 탭과 같은 틀(칩 3개 + 버튼), 결제 차이는 버튼 위 한 줄 */
.howbtns { display: flex; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.howbtn { display: grid; justify-items: stretch; gap: 8px; min-width: 220px; }
.howbtn small { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.howbtn .btn3d, .howbtn .btn-ghost { justify-content: center; }
@media (max-width: 640px) { .howbtns { flex-direction: column; align-items: stretch; gap: 14px; } .howbtn { min-width: 0; } }
/* v156: 쇼핑몰 탭 — 시간표 범례(부제 대신) + 선정 한눈 비교표 */
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tl-legend-me i { font-style: normal; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--ink); border-radius: 99px; padding: 3px 9px; }
.tl-legend-azd i { width: 26px; height: 18px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--teal-100, #CDEFF2); }
.scmp { max-width: 900px; margin: 0 auto; background: #fff; border-radius: var(--radius-l); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.scmp-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.scmp-row + .scmp-row { border-top: 1px solid var(--line); }
.scmp-row > span { padding: 18px 20px; }
.scmp-head { background: var(--mist); } .scmp-head b { display: block; font-size: 16px; color: var(--ink); } .scmp-head small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.scmp-q { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.scmp-a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.scmp-a > svg, .scmp-a > i { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; font-style: normal; font-size: 20px; }
.scmp-a > svg[href], .scmp-a > svg:not(.scmp-ok) { width: 34px; height: 26px; }
.scmp-ok { color: var(--teal-600); } .scmp-dash { color: var(--ink-3); }
.scmp-a b { font-size: 16px; color: var(--ink); } .scmp-a small { font-size: 12.5px; color: var(--ink-3); }
.scmp-a.is-no b { color: var(--ink-3); font-weight: 600; }
@media (max-width: 640px) {
  .scmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scmp-head > span:first-child { display: none; }
  .scmp-q { grid-column: 1 / -1; padding: 12px 16px 0 !important; font-size: 12.5px; }
  .scmp-row > span { padding: 12px 16px; } .scmp-row:not(.scmp-head) > span.scmp-a { padding-top: 6px; }
  .scmp-head b { font-size: 14px; } .scmp-a b { font-size: 14.5px; }
  .scmp-a { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; } .scmp-a > svg, .scmp-a > i { width: 26px; height: 26px; font-size: 17px; }
}
.tl-legend-me i { width: 26px; height: 18px; padding: 0; }   /* 범례 알약은 글자 없이 색 견본만 */
.tl-legend-azd i { box-shadow: 0 0 0 1px #BFE7EC; }
/* v158: 홈 첫 화면 — 제목은 얻는 것(장사만 · 리뷰는 매달), 방법(가게 이름만 · 알아서! 잘! 딱!)은 부제로 */
/* v159: 범례 — 견본 안에 글자(검정 알약 = 사장님 배지 모양, 흰 칸 = 아싸뷰 칸 모양) */
.tl-legend span { font-size: 13px; font-weight: 600; line-height: 1; }
.tl-legend-me { color: #fff !important; background: var(--ink); border-radius: 99px; padding: 8px 14px; }
.tl-legend-azd { color: var(--teal-700) !important; background: #fff; border-radius: 10px; padding: 8px 14px; box-shadow: 0 0 0 1px #BFE7EC; }
/* v168: 홈 첫 화면 제목 — 두 줄 고정(줄마다 한 덩어리, 좁은 폰은 글자 크기를 폭에 맞춰 줄임) */
.hero-h1--2 span { display: block; white-space: nowrap; }
@media (max-width: 480px) { .hero h1.hero-h1--2 { font-size: min(8.2vw, 34px) !important; } }
/* v169: 쇼핑몰 탭 제목 1줄 — 쇼핑몰 사장님의 바쁜 장면이 3.2초마다 바뀜(글자만 바꿈, 움직임 줄이기 설정이면 고정) */
/* v170 쇼핑몰 제목 — 1줄 세로 롤링 + 2줄 「+1」 배지 */
.hero-h1--2 .hero-rot { position: relative; overflow: hidden; }
.hero-h1--2 .hero-rot-t { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.hero-h1--2 .hero-rot-t.is-next { position: absolute; left: 0; right: 0; top: 0; transform: translateY(100%); opacity: 0; }
.hero-h1--2 .hero-rot-t.is-next.go { transform: translateY(0); opacity: 1; }
.hero-h1--2 .hero-rot-t.is-up { transform: translateY(-100%); opacity: 0; }
.hero-h1--2 .hero-l2 { display: table; margin: 0 auto; position: relative; }
.hero-plus { position: absolute; right: -1.15em; top: -.5em; box-shadow: 0 0 0 1px #fff; font-size: .34em; line-height: 1; letter-spacing: 0; font-weight: 600;
  padding: .32em .5em; border-radius: 99px; background: var(--accent); color: #fff; opacity: 0; pointer-events: none; }
.hero-plus.pop { animation: heroPlus 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes heroPlus {
  0% { opacity: 0; transform: translateY(.4em) scale(.6); }
  18% { opacity: 1; transform: translateY(0) scale(1.08); }
  28% { transform: translateY(0) scale(1); }
  75% { opacity: 1; transform: translateY(-.2em) scale(1); }
  100% { opacity: 0; transform: translateY(-.7em) scale(.95); }
}

/* v171 쇼핑몰 탭 배지 — NEW 없이 글자만일 때 좌우 여백 같게 */
.hero-badge:has(> i[hidden]) { padding-left: 14px; }

/* v176→v184 매장 제목 — 2줄 강조 글자 파도(1줄이 바뀔 때마다 앞 글자부터 차례로 살짝 튐). 글자마다 떼어 움직이므로 그라데이션은 JS 가 글자 칸마다 다시 깐다 */
.hero h1 em.hero-wave.is-split { background: none; color: inherit; }
.hero-wave .wv { display: inline-block; background: var(--azd-grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-repeat: no-repeat; }
.hero-h1--2 .hero-wave .wv { display: inline-block; white-space: pre; }
.hero-wave.go .wv { animation: heroWave .55s cubic-bezier(.3,.7,.4,1) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes heroWave { 0% { transform: none; } 40% { transform: translateY(-.14em); } 100% { transform: none; } }
/* v189 매장 제목 — 2줄 끝 「별 반짝」: 「유명해져요」 = 스타가 된다. 1줄이 바뀔 때마다 별 셋이 차례로 반짝 */

/* 전수 점검 — 320 폭 무제한 기간 가격표가 화면을 넘던 것(표 폭 340 > 화면 320) */
@media (max-width: 360px) {
  #unl-price .ptable { font-size: 12.5px; }
  #unl-price .ptable th, #unl-price .ptable td { padding: 10px 7px; }
  #unl-price .ptable td em { display: block; width: max-content; margin: 3px 0 0; }
}
/* 전수 점검 — 폰에서 「같은 규모를 예시로 그린 화면」 이름표가 리포트 숫자를 덮던 것 → 화면 아래 띠로 */
@media (max-width: 480px) {
  .ucase-shot figcaption { position: static; border-radius: 0; background: #F2F4F7; color: var(--ink-3); text-align: center; padding: 6px 10px; font-weight: 600; }
}
/* 전수 점검 — 줄바꿈으로 쪼개지던 것 · 320 폭 비좁던 것 */
.nowrap { white-space: nowrap; }
.inline-link, .panel-note a { white-space: nowrap; }
@media (max-width: 360px) {
  .hero-badge { font-size: 12.5px; gap: 6px; padding: 6px 12px 6px 7px; } .hero-badge i { font-size: 11px; padding: 2px 7px; }
  .roadmap-line { gap: 4px 4px; font-size: 12.5px; }
  .px-two { grid-template-columns: minmax(0, 1fr); }
  .scmp-row > span { padding: 10px 12px; } .scmp-q { padding: 10px 12px 0 !important; }
  .scmp-a { grid-template-columns: minmax(0, 1fr); } .scmp-a > svg, .scmp-a > i { display: none; }
  .scmp-a b, .scmp-a small, .scmp-head b { word-break: keep-all; }
}

/* PC 정렬 — 좁은 칸 섹션(소량 · 무제한 질문, 환불 규정)이 가운데로 들어가 다른 섹션 제목과 세로 줄이 어긋나던 것 → 왼쪽 맞춤, 폭만 좁게 */
.narrow-l > * { max-width: 780px; }
/* PC 정렬 — 배경이 같은 섹션이 이어질 때 뒤 섹션 윗여백을 줄임(joinSecs 가 sec--join 을 붙임) */
.sec.sec--join { padding-top: clamp(24px, 3vw, 40px); }
/* PC 정렬 — 무제한 가격: 왼쪽 카드와 오른쪽 기간표의 아래 끝을 맞춤(옛 #unlimited 선택자는 이름이 달라 안 먹고 있었음) */
@media (min-width: 961px) { #unl-price .unl { align-items: stretch; } #unl-price .price-main { align-content: center; } }
/* PC 정렬 — 소량 가격 카드 두 장이 3칸 자리의 두 칸만 쓰던 것 → 두 칸 꽉, 버튼은 카드 바닥에 맞춤 */
@media (min-width: 961px) { .plans:has(> .plan:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plans--detail .plan { display: flex; flex-direction: column; } .plans--detail .plan .btn-mini { margin-top: auto; } .plans--detail .plan .plan-badge { align-self: flex-start; }
/* PC 정렬 — 동전 그래프가 가운데 760px 에만 모여 제목(왼쪽)과 따로 놀던 것 → 본문 폭 전체로 */
@media (min-width: 961px) { .coins { max-width: none; margin-inline: 0; } }
/* PC 정렬 — 이용 방법 비교표도 제목과 같은 왼쪽 끝에서 */
.scmp { margin-inline: 0; }
/* FAQ 분류 표시 폭 통일 — 「소량」 두 글자만 좁아 질문 시작점이 8px 어긋나던 것 */
.svc { min-width: 3.9em; text-align: center; box-sizing: border-box; }

/* ---------- 2026-10-19 디렉터: 사진 사례 「1위」 칩은 반투명 검정 + 흰 글씨 ---------- */
.pcase-rank { color: #fff; background: rgba(0, 0, 0, .5); }

/* ---------- 2026-10-19 디렉터: 체험단 전/후 전환에 트랜지션 — 선택 배경이 옆으로 미끄러지고, 검색 화면 내용은 부드럽게 바뀐다 ---------- */
.ba { position: relative; isolation: isolate; }
.ba::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 12px; background: var(--ink); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.ba:has(> [data-ba="after"][aria-pressed="true"])::before { transform: translateX(calc(100% + 4px)); }
.ba button { transition: color .3s; }
.ba button[aria-pressed="true"] { background: none; }
.sec--dark .ba::before { background: #fff; }
.sec--dark .ba button[aria-pressed="true"] { background: none; }
.serp[data-state="before"] .serp-empty { animation: serpFade .35s ease both; }
@keyframes serpFade { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ba::before, .ba button { transition: none; } .serp[data-state="before"] .serp-empty { animation: none; } }

/* ---------- 2026-10-19 디렉터: 히어로 배경 = 비회원 홈(/biz/home.php)과 같은 점 배경 — 촘촘한 점이 깔리고, 천천히 흐르는 글로우가 지나가는 자리와 군데군데가 반짝인다 ---------- */
.hero::before, .hero::after { content: none; }
.hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-glow-blob { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(54, 183, 197, .9); filter: blur(110px); opacity: .11; }
.hero-glow-blob--a { top: -120px; left: -160px; animation: heroGlowA 30s ease-in-out infinite; }
.hero-glow-blob--b { top: 220px; right: -140px; animation: heroGlowB 36s ease-in-out infinite; }
@keyframes heroGlowA { 30% { transform: translate(60vw, 120px); } 55% { transform: translate(85vw, 300px); } 80% { transform: translate(25vw, 260px); } }
@keyframes heroGlowB { 30% { transform: translate(-45vw, -140px); } 55% { transform: translate(-85vw, -280px); } 80% { transform: translate(-35vw, -60px); } }
.hero-dots { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
@media (max-width: 767px) { .hero-glow-blob { width: 200px; height: 200px; filter: blur(80px); } .hero-glow-blob--a { top: -80px; left: -110px; } .hero-glow-blob--b { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-glow-blob { animation: none; } }

/* 2026-10-19 디렉터: 기능 탭(선정된 체험단 · 진행 대시보드 · 리포트) 아래 진행 막대는 뺀다 — 자동 넘김은 그대로 */
.talk-tags li::after { content: none; }

/* ---------- 2026-10-19 디렉터: 시간표(.tl) 가독성 ----------
   · 칸마다 반복되던 「AI 알잘딱매니저 / 아싸뷰」 라벨은 뺀다 — 섹션 설명에서 이미 말함
   · 작던 글자(11.5~12.5px, NEW 9.5px)를 한 단계씩 키운다
   · 말풍선이 옆 칸 카드 밑에 깔리던 문제: 칸마다 등장 애니메이션(transform)이 쌓임 맥락을 만들어 뒤 칸이 위에 그려졌다 → 마우스가 올라간 칸을 맨 위로 */
.tl-lab { display: none; }
.tl-date { font-size: 13.5px; }
.tl-badge { font-size: 14px; }
.tl-azd li b { font-size: 15px; font-weight: 500; }
.tl-azd li b em { font-size: 11px; font-weight: 600; padding: 2px 6px; }
.tl-pay { font-size: 14px; font-weight: 600; }
.tl-col:hover, .tl-col:focus-within { z-index: 6; }
@media (min-width: 641px) { [data-tip]::after { font-size: 13.5px; } }
@media (max-width: 640px) { .tl-azd li b { font-size: 15px; } .tl-head .tl-pay { font-size: 13px; } }
/* 말풍선은 한 번에 하나만: 다른 항목에 마우스가 올라가 있으면 나머지(눌러서 띄운 것 · 포커스)는 숨긴다 */
@media (min-width: 641px) { .tl:has([data-tip]:hover) [data-tip]:not(:hover)::after, .tl:has([data-tip]:hover) [data-tip]:not(:hover)::before { opacity: 0; } }
/* NEW 표시: 연한 브랜드 바탕 + 브랜드 글자 (2026-10-19) */
.tl-azd li b em { color: var(--teal-700); background: var(--teal-50); }
/* PC 시간표: 날짜(오늘 · 1~7일째 …)를 원형 숫자 위로 — 선 위 눈금처럼. 선(.tl-rail)은 날짜 높이만큼 내려 원 가운데를 지나게 (2026-10-19) */
@media (min-width: 641px) {
  .tl-head { display: flex; flex-direction: column; align-items: center; }
  .tl-head .tl-date { order: -1; height: 18px; line-height: 18px; margin: 0 0 8px; }
  .tl-rail { top: 39px; }
}
/* 시간표 금액: 돈이 안 나가는 칸(0원 · 협찬 제공만)은 바탕 없이 회색 글자만 — 결제 칸만 분홍 알약으로 남는다 / 알잘딱 칸 테두리는 연회색 (2026-10-19) */
.tl-pay:not(.is-pay) { background: none; color: var(--ink-3); }
.tl-azd { box-shadow: 0 0 0 1px var(--line); }

/* ---------- 2026-10-19 디렉터: 결제 흐름(.pay) ----------
   · PC: 시점 문구(오늘 · 모집하는 동안 …)를 원 위로, 선은 그만큼 내려 원 가운데를 지나게
   · 결제 칸은 원 테두리(분홍)와 선(청록)이 따로 놀던 것 → 선도 분홍으로
   · 「출시 기념 첫 달 50%」는 금액 옆에 붙이면 줄이 넘쳐서 금액 아래 한 줄로 */
.pay li.paid::before { background: var(--pink-400); }
.pay-note { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--pink-400); }
@media (min-width: 641px) {
  .pay:not(.pay--v) li { display: flex; flex-direction: column; align-items: flex-start; }
  .pay:not(.pay--v) .pay-when { order: -1; margin: 0 0 10px; line-height: 20px; }
  .pay:not(.pay--v) li::before { top: 43px; }
}
.pay li.paid:last-child::before { background: linear-gradient(90deg, var(--pink-400), transparent); }
@media (max-width: 640px) { .pay li.paid:last-child::before { background: linear-gradient(180deg, var(--pink-400), transparent); } }
/* 환불 안내 강조 + 부가세 문구는 금액 바로 아래로 (2026-10-19) */
.pay-vat { margin-top: 20px; font-size: 13px; color: var(--ink-3); }
.pay-safe { margin-top: 24px; align-items: center; gap: 14px; padding: 20px 24px; background: var(--teal-50); box-shadow: none; }
.pay-safe svg { width: 28px; height: 28px; color: var(--teal-700); }
.pay-safe span { display: flex; flex-direction: column; gap: 4px; }
.pay-safe b { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; }
.pay-safe b em { font-style: normal; color: var(--teal-700); }
.pay-safe small { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 640px) { .pay-safe { padding: 16px 18px; align-items: flex-start; } .pay-safe b { font-size: 16.5px; } .pay-safe small { font-size: 13.5px; } }

/* ---------- 2026-10-19 디렉터: 글자 굵기는 어디서든 최대 세미볼드(600) — 위의 700/800 선언은 모두 600으로 바꿨고, 브라우저 기본 굵게(b · strong · th 등)도 600으로 ---------- */
b, strong, th, h4, h5, h6, dt, optgroup { font-weight: 600; }

/* 환불 안내: 회색 섹션 위 연청록 바탕이 탁해 보여서 흰 바탕 + 1px 연회색 테두리로 */
.pay-safe { background: #fff; box-shadow: 0 0 0 1px var(--line); }
/* 결제 흐름 PC: 원 위(시점) · 아래(금액) 간격을 넓힌다 — 선 위치도 같이 (2026-10-19) */
@media (min-width: 641px) {
  .pay:not(.pay--v) .pay-when { margin-bottom: 16px; }
  .pay:not(.pay--v) .pay-amt { margin-top: 16px; }
  .pay:not(.pay--v) li::before { top: 49px; }
}
/* 비교표 알잘딱매니저 열: 위 모서리 둥글림 없이 반듯하게 (2026-10-19) */
.cmp .cmp-me, .cmp thead .cmp-me, #diff .cmp .cmp-me { border-radius: 0; }

/* ---------- 2026-10-19 디렉터: 「외식이 아닌 매장이라면」 섹션 ----------
   · 설명 문구까지 가운데 정렬 (.sec-lead 최대 폭 때문에 왼쪽으로 쏠려 있었다)
   · 업종 칩: 토스페이스 이모지 + 쇼핑몰 로고 칩(.lg)과 같은 크기
   · 카톡 버튼: 그라데이션 · 그림자 없이 카카오 노랑 단색 + 말풍선 아이콘 */
.soon .sec-lead { margin-inline: auto; }
.soon-tags { gap: 10px; }
.soon-tags span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 99px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.soon-tags i { font-family: Tossface, sans-serif; font-style: normal; font-size: 20px; line-height: 1; }
@media (max-width: 640px) { .soon-tags span { height: 40px; padding: 0 14px; font-size: 13.5px; } .soon-tags i { font-size: 18px; } }
.btn3d--kakao, .btn3d--kakao:hover, .btn3d--kakao:active { background: #FEE500; color: #191919; box-shadow: none; }
.btn3d--kakao:hover { background: #F5DC00; }
.btn3d--kakao { gap: 8px; }
.kakao-ic { width: 20px; height: 20px; flex: none; }
/* 설명 문구와 업종 칩 사이 간격 줄이고, 아래 안내는 두 줄 + 한 단계 크게 (2026-10-19) */
.soon .sec-head { margin-bottom: 28px; }
.soon-tags { margin-top: 0; }
.soon-foot { font-size: 15px; line-height: 1.6; }
.soon-foot .inline-link { font-size: inherit; }
@media (max-width: 640px) { .soon .sec-head { margin-bottom: 24px; } .soon-foot { font-size: 14px; } }
/* 「믿을 만한 곳인가요?」: 위 여백 줄이고, 후기 카드는 순백 대신 흰색 90% (청록 바탕 위에서 덜 쨍하게) (2026-10-19) */
#trust { padding-top: clamp(56px, 6vw, 80px); }
.rv { background: rgba(255, 255, 255, .9); }
/* 자주 묻는 질문 안내 문구: 섹션 설명(.sec-lead)과 같은 크기 (2026-10-19) */
.faq-help { margin-top: 16px; font-size: clamp(16px, 1.6vw, 18px); font-weight: 500; }
/* 자주 묻는 질문 버튼: 전체 보기는 채운 버튼, 카톡 문의는 고스트 + 말풍선 아이콘 (2026-10-19) */
.faq-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.faq-btns .btn-ghost { gap: 6px; }
.faq-btns .kakao-ic { width: 18px; height: 18px; color: #191919; }
/* 자주 묻는 질문 서비스 칩(공통 · 알잘딱 …): 질문 제목 옆에서 납작해 보여 한 단계 키움 (2026-10-19) */
.svc { padding: 4px 8px; font-size: 12.5px; line-height: 1.2; }
@media (max-width: 640px) { .svc { padding: 3px 7px; font-size: 11.5px; } }
/* 마지막 배너: 모서리는 다른 큰 카드와 같은 24px 고정, 안심 항목(카드 등록 없이 …)은 글자 · 아이콘 한 단계 크게 (2026-10-19) */
.final { border-radius: var(--radius-l); }
.final .assure { gap: 8px 20px; font-size: 15.5px; }
.final .assure li { gap: 8px; }
.final .assure svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .final .assure { gap: 6px 14px; font-size: 14.5px; } .final .assure svg { width: 18px; height: 18px; } }
/* 마지막 배너 체크 아이콘: 반투명 흰 원(아이콘 안 원은 currentColor 16%) + 흰 체크 (2026-10-19) */
.final .assure svg { color: #fff; }
/* 마지막 배너 주 버튼 높이를 히어로 주 버튼(58px)과 통일 (2026-10-19) */
.final .btn-row .btn3d--azd { min-height: 58px; }
/* 마지막 배너 주 버튼: 위아래 줄(약 380px) 대비 절반이라 꺼져 보여 PC 최소 너비 280px (2026-10-19) */
@media (min-width: 641px) { .final .btn-row .btn3d--azd { min-width: 280px; } }

/* ---------- 2026-10-19 모바일 정리 ----------
   PC(641px 이상)는 디렉터 확정본 그대로 — 아래 규칙은 「진행 사례 더 보기」 버튼 숨김 한 줄 말고는 모두 폰(640px 이하) 전용 */
.cases-more-btn { display: none; }   /* 사례 줄 아래 「진행 사례 더 보기」 버튼은 폰에서만 */
@media (max-width: 640px) {
  /* 16. 상단: 로고 …… [무료 모집 열어보기] [검색] [메뉴] — 버튼 먼저, 아이콘 둘은 오른쪽 끝에 붙여 묶음 */
  .hd-right { gap: 4px; }
  .hd-right .btn3d--hd { order: -1; margin-right: 4px; }
  .hd-right .icon-btn { width: 40px; height: 40px; }

  /* 2. 사진 사례 줄: 첫 카드가 왼쪽 여백에 맞춰 시작, 손으로 넘기면 카드 단위로 멈춤(자동 흐름은 lp.js 에서 폰만 끔) */
  .pcases, .pcases.is-flow { scroll-snap-type: x mandatory; }

  /* 5. 사례 머리줄 오른쪽 링크는 빼고, 줄 아래 가득 찬 테두리 버튼 + 그 아래 기준일 */
  .pcases-top .link-arrow { display: none; }
  .cases-more { flex-direction: column; align-items: stretch; gap: 12px; }
  .cases-more small { text-align: center; }
  .cases-more-btn { display: flex; width: 100%; min-height: 50px; font-size: 16px; }
  .sec--dark .cases-more-btn { background: transparent; color: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .28); }
  .sec--dark .cases-more-btn:hover, .sec--dark .cases-more-btn:active { background: rgba(255, 255, 255, .06); }

  /* 6. 「이렇게 시작돼요」: 로봇 + 말풍선 대신 단계 제목 바로 아래 회색 설명 한 줄(장면이 바뀌면 lp.js 가 글을 바꿔 끼움) */
  .demo-stage > .guide { margin-top: -6px; }
  .demo-stage > .guide svg { display: none; }
  .demo-stage > .guide p { background: none; color: var(--ink-2); padding: 0; border-radius: 0; box-shadow: none; font-size: 15px; font-weight: 500; line-height: 1.5; }
  .demo-stage > .guide p.swap { animation: revealIn .35s ease both; }

  /* 7. 로봇은 흰 카드 오른쪽 위 안쪽으로(카드 경계 · 검은 카드와 안 겹치게), 이용 방법 버튼은 가득 차게 */
  .orbit-robot { top: 16px; right: 16px; }
  .orbit-cta { display: flex; width: 100%; }

  /* 8. 시간표(.tl): 접기 없이 전부 펼침 · 꺾쇠 없음 · 세로 선은 끊김 없이 한 줄 */
  .tl-col { padding-bottom: 28px; }
  .tl-col::after, .tl-col.is-open::after { top: 0; bottom: 0; background: var(--teal-100); }
  .tl-col:first-child::after { top: 15px; }
  .tl-dot, .tl-col.is-open .tl-dot { background: var(--teal-600); }
  .tl-head { padding: 0; cursor: default; }
  .tl-head h3::after { content: none; }
  .tl-body, .tl-col.is-open .tl-body { display: grid; gap: 0; margin-top: 12px; animation: none; }
  /* 사장님 할 일: 검은 알약 대신 회색 라벨 + 값 */
  .tl-badge { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; padding: 0; border-radius: 0; background: none; color: var(--ink); font-size: 15px; font-weight: 600; cursor: default; }
  .tl-badge b { font-size: 13px; font-weight: 500; color: var(--ink-3); }
  .tl-badge--none { display: none; }   /* 사장님 할 일이 없는 시점은 줄을 빼서 덜 붐비게 */
  /* 알잘딱 · 아싸뷰 항목: 흰 카드 안 단순 목록(설명 · 꺾쇠 없음) */
  .tl-azd { padding: 12px 14px; }
  .tl-azd ul { gap: 8px; }
  .tl-azd li { flex-wrap: nowrap; }
  .tl-azd li svg { width: 20px; height: 20px; }
  .tl-azd li::after { content: none; }
  .tl-azd li .tl-tip, .tl-azd li.is-tip .tl-tip { display: none; }

  /* 9. 마지막 배너 안심 항목: 세 개를 한 줄에 */
  .final .assure, .final .btn-row + .assure { flex-wrap: nowrap; gap: min(12px, 2.4vw); padding-inline: 0; font-size: min(13px, 3.3vw); }
  .final { padding-inline: 16px; }
  .final .assure li { flex: none; gap: 4px; white-space: nowrap; }
  .final .assure svg { width: 15px; height: 15px; }

  /* 섹션 위아래 여백: 폰은 80 → 48 (2026-10-20 디렉터: 64 도 넓어 보여 한 단계 더) */
  .sec { padding-block: 48px; }
  .sec.sec--join { padding-top: 24px; }
  .sec--final { padding-block: 48px; }
  #trust { padding-top: 44px; }

  /* 10. 탭 · 구분 버튼 선택 모양을 홈 첫 화면 구분 버튼과 통일: 연회색 바탕 + 흰 칸(옅은 그림자) */
  .seg--page { background: #F2F4F6; box-shadow: none; }
  .seg--page button { color: var(--ink-3); }
  .seg--page button[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(30, 37, 52, .06); }
  .faq-tabs { background: #F2F4F6; box-shadow: none; }
  .faq-tab { color: var(--ink-3); }
  .faq-tab.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(30, 37, 52, .06); }
  /* 홈 「선정된 체험단 · 진행 대시보드 · 리포트」: 켜진 탭은 PC처럼 흰 바탕 + 1px 테두리, 꺼진 탭은 바탕 없이 */
  .talk-tags li { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
  .talk-tags li.on { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  .talk-tags li:hover { color: var(--ink-3); } .talk-tags li.on:hover { color: var(--ink); }

  /* 11. 첫 화면 단독 버튼(무제한 「이용권 고르러 가기」 등)도 다른 페이지처럼 가득 차게 */
  .ph-in > .btn-row { align-self: stretch; width: 100%; }
  .ph-in > .btn-row > .btn3d:only-child { flex: 1 1 100%; }

  /* 12. 질문 제목은 균형 줄바꿈 대신 보통 줄바꿈 — 「아무도 신청하지 / 않으면요?」처럼 어색하게 끊기지 않게 */
  .qa summary { text-wrap: wrap; }

  /* 13. 가격 부가세 안내는 왼쪽 정렬 */
  .pay-foot--vat { text-align: left; }

  /* 14. 「이런 리뷰를 받을 수 있어요」 마지막(스레드) 칸도 다른 칸과 같은 반 칸 */
  .chan2-list li:last-child { grid-column: auto; }

  /* 15. 작은 버튼의 누르는 영역을 40×40 이상으로(보이는 크기는 그대로) */
  button.deck-dot { box-sizing: content-box; border: 16px solid transparent; background-clip: padding-box; }
  button.deck-dot::after { content: none; }
  .deck-dots:not(.talk-dots) { gap: 0; }
}

/* 2026-10-19 디렉터: 「필요한 만큼, 둘 중 고르세요」 카드 위계 — 대상(회색) → 상품명 → 가격(가장 크게) → 보조 라벨 → 목록, 민트는 「자세히 보기」에만 */
.fork2-card { display: flex; flex-direction: column; align-items: flex-start; }
.fork2-card:hover { transform: none; }
.fork2-for { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.fork2-card > b { margin-top: 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; }
.fork2-card > p.fork2-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 0; font-weight: 500; color: var(--ink-3); font-size: 15px; }
.fork2-price strong { font-size: 32px; font-weight: 600; letter-spacing: -0.8px; color: var(--ink); line-height: 1.2; }
.fork2-sub { margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.fork2-card ul { align-self: stretch; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--mist); font-size: 14.5px; gap: 8px; }
.fork2-card ul li { display: flex; gap: 6px; text-wrap: pretty; }
.fork2-card ul li::before { content: "✓"; flex: none; color: var(--ink-4, #B0B8C1); }
.fork2-go { margin-top: 20px; }
@media (max-width: 640px) { .fork2-price strong { font-size: 28px; } }

/* 2026-10-19 디렉터: 1석2조 가격 줄 위계 — 왼쪽 정가(작게, 취소선), 오른쪽 할인 라벨 + 9,000원(가장 크게, 단색) */
.duo2-price:not(.duo2-price--unl) { justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; background: #fff; }
.duo2-price s { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.duo2-deal { display: flex; align-items: baseline; gap: 6px; }
.duo2-deal em { align-self: center; font-style: normal; font-size: 13px; font-weight: 600; color: var(--pink-400); background: #FDEEF4; border-radius: 99px; padding: 3px 8px; margin-right: 4px; }
.duo2-deal b { font-size: 28px; font-weight: 600; letter-spacing: -0.6px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); line-height: 1.2; }
.duo2-deal small { font-size: 14px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 640px) {
  .duo2-price:not(.duo2-price--unl) { flex-wrap: nowrap; padding: 14px 18px; gap: 8px; }
  .duo2-price s { flex-basis: auto; font-size: 13px; text-align: left; }
  .duo2-deal em { font-size: 12px; padding: 2px 7px; margin-right: 2px; }
  .duo2-deal b { font-size: 24px; }
}

/* 2026-10-19 디렉터: 「둘 중 고르세요」 두 카드 호버를 위쪽 쇼핑몰 카드와 같게(테두리 + 옅은 그림자, 뜨지 않음). 터치 기기에선 호버가 남지 않게 마우스 기기에서만 */
.fork2-card:hover, .fork2-card.is-hot:hover { box-shadow: 0 0 0 1px var(--line); }
.fork2-card.is-hot:hover { box-shadow: 0 0 0 1px var(--teal-500); }
.shop-fork-card:hover { box-shadow: inset 0 0 0 1px var(--line); }
.shop-fork-card.is-hot:hover { box-shadow: inset 0 0 0 1px var(--teal-500); }
@media (hover: hover) {
  .fork2-card:hover, .fork2-card.is-hot:hover { box-shadow: 0 0 0 1px var(--teal-500), 0 12px 32px -14px rgba(30, 37, 52, .14); }
  .shop-fork-card:hover, .shop-fork-card.is-hot:hover { box-shadow: inset 0 0 0 1px var(--teal-500), 0 12px 32px -14px rgba(30, 37, 52, .14); }
}

/* ===== 무제한 페이지 ① 리뷰가 계속 필요한 곳 · 동전 · 실제 사례 (2026-10-19) ===== */
/* .uw 는 lp-self 와 같이 쓰므로 무제한 페이지로 한정 */
/* 리뷰가 계속 필요한 곳: 아이콘은 토스페이스 이모지만(배경 상자 없음), 글자 한 단계 위로 */
[data-page="unlimited"] .uw-card { display: flex; flex-direction: column; gap: 8px; }
[data-page="unlimited"] .uw-card i { display: block; width: auto; height: auto; margin: 0 0 6px; background: none; border-radius: 0; font-family: Tossface, sans-serif; font-size: 40px; line-height: 1; }
[data-page="unlimited"] .uw-card b { font-size: 18px; font-weight: 600; }
[data-page="unlimited"] .uw-card p { margin: 0; font-size: 15.5px; }

/* 동전: 색 · 두께는 lp.js 가 그림(밝은 금색, 옅은 음영) */
/* 금액은 크게, 무제한 칸은 색 대신 크기로 강조 */
[data-page="unlimited"] .coin-col > b { font-size: 30px; font-weight: 600; letter-spacing: -0.6px; color: var(--ink); }
[data-page="unlimited"] .coin-col > b small { font-size: 14px; font-weight: 500; letter-spacing: 0; }
[data-page="unlimited"] .coin-col.is-hero > b { font-size: 38px; color: var(--ink); }
[data-page="unlimited"] .coin-col > span { font-size: 15px; }
[data-page="unlimited"] .coin-col > span small { font-size: 13px; }
/* 98% 저렴: 연한 브랜드 바탕 작은 칩 (시간표 NEW 표시와 같은 색 조합) */
/* 98% 저렴: 말풍선(툴팁) 모양 — 하단 바 안내 말풍선과 같은 톤 */
[data-page="unlimited"] .coin-col.is-hero .coin-stack::after { bottom: calc(100% + 12px); font-size: 14px; font-weight: 600; color: #fff; background: var(--ink-2); border-radius: 99px; padding: 7px 14px; }
[data-page="unlimited"] .coin-col.is-hero .coin-stack::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 8px); width: 10px; height: 10px; max-height: none; background: var(--ink-2); border-radius: 0; box-shadow: none; animation: none; transform: translateX(-50%) rotate(45deg); }
@media (max-width: 640px) {
  [data-page="unlimited"] .coin-col > b { font-size: 18px; letter-spacing: -0.4px; }
  [data-page="unlimited"] .coin-col > b small { font-size: 11px; }
  [data-page="unlimited"] .coin-col.is-hero > b { font-size: 23px; }
  [data-page="unlimited"] .coin-col > span { font-size: 12.5px; }
  [data-page="unlimited"] .coin-col > span small { font-size: 11.5px; }
}

/* 실제 사례: 왼쪽 글을 리포트 화면 윗선에 맞춤, 「예시 화면」은 칩 대신 화면 아래 작은 글씨 */
[data-page="unlimited"] .ucase { align-items: start; }
[data-page="unlimited"] .ucase-shot { display: flex; flex-direction: column; gap: 8px; background: none; border-radius: 0; overflow: visible; }
[data-page="unlimited"] .ucase-shot .adm { background: #fff; border-radius: 16px; overflow: hidden; }
[data-page="unlimited"] .ucase-shot figcaption { position: static; padding: 0; background: none; border-radius: 0; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .55); text-align: right; }
[data-page="unlimited"] .urep-sub { font-size: calc(14.5 * var(--u)); color: var(--ink); }
/* ===== ① 끝 ===== */

/* ===== 무제한 페이지 ② 가격 · 할 일은 넷뿐 (2026-10-19) ===== */
/* 가격: 테두리는 전부 1px, 큰 그림자 없음. .price-main/.price-tag/.ptable 은 다른 페이지와 공용이라 #unl-price 로 한정 */
#unl-price .price-main { box-shadow: 0 0 0 1px var(--teal-500); }
#unl-price .price-tag,
#unl-price .ptable td em { display: inline-block; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--teal-700); background: var(--teal-50); border-radius: 99px; padding: 3px 8px; }
#unl-price .ptable td em { margin-left: 6px; vertical-align: 1px; }
/* 표 머리줄: 옅은 회색 바탕. 바탕이 표의 바깥 테두리(inset)를 덮으므로 칸마다 1px 선을 다시 그린다 */
#unl-price .ptable thead th { background: var(--mist); box-shadow: inset 0 1px 0 var(--line); }
#unl-price .ptable thead th:first-child { box-shadow: inset 1px 1px 0 var(--line); }
#unl-price .ptable thead th:last-child { box-shadow: inset -1px 1px 0 var(--line); }
/* 12개월(가장 저렴) 줄: 청록 1px 테두리로만 강조. 옅은 청록 바탕은 빼서 같은 색 칩이 묻히지 않게 */
#unl-price .ptable tr.is-best td { background: var(--teal-50); }
#unl-price .ptable tr.is-best td em { background: #fff; }   /* 연하늘 행 위에서 칩이 묻히지 않게 흰 바탕 */
#unl-price .ptable tr.is-best td { box-shadow: inset 0 1px 0 var(--teal-500), inset 0 -1px 0 var(--teal-500); }
#unl-price .ptable tr.is-best td:first-child { box-shadow: inset 1px 1px 0 var(--teal-500), inset 0 -1px 0 var(--teal-500); }
#unl-price .ptable tr.is-best td:last-child { box-shadow: inset -1px 1px 0 var(--teal-500), inset 0 -1px 0 var(--teal-500); }
/* 표 아래 안내 두 줄 */
.unl-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.unl-foot p { margin: 0; }
@media (max-width: 640px) {
  /* 한 달권 칩이 카드 폭만큼 늘어나던 것 → 글자 폭만. 가격·버튼은 아래 한 줄에 */
  #unl-price .price-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  #unl-price .price-tag { grid-column: 1 / -1; justify-self: start; }
  #unl-price .ptable td em { margin-left: 4px; }
}
@media (max-width: 360px) { #unl-price .ptable td em { margin: 3px 0 0; } }

/* 할 일은 넷뿐: 큰 청록 숫자를 기준점으로, 왼쪽 정렬. 원형 아이콘·검정 알약 없음 */
[data-page="unlimited"] .ustep { gap: 16px; }
[data-page="unlimited"] .ustep li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; padding: 24px; }
[data-page="unlimited"] .ustep-n { position: static; margin-bottom: 4px; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--teal-600); }
[data-page="unlimited"] .ustep-n::before { content: "STEP "; }
[data-page="unlimited"] .ustep li b { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); }
[data-page="unlimited"] .ustep li em { display: inline-block; margin: 0; padding: 4px 8px; background: #F2F4F6; border-radius: 6px; font-size: 13px; font-weight: 500; font-style: normal; color: var(--ink-2); }
[data-page="unlimited"] .ustep li p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 640px) {
  [data-page="unlimited"] .ustep { gap: 10px; }
  [data-page="unlimited"] .ustep li { padding: 18px 16px; gap: 8px; }
  [data-page="unlimited"] .ustep-n { font-size: 13px; }
  [data-page="unlimited"] .ustep li b { font-size: 16px; }
  [data-page="unlimited"] .ustep li em { font-size: 12px; padding: 3px 8px; }
  [data-page="unlimited"] .ustep li p { font-size: 14px; }
}
/* ===== ② 끝 ===== */

/* ===== 무제한 페이지 ③ FAQ · 마지막 배너 · 버튼 · 문구 (2026-10-19) ===== */
/* 어두운 배너 위 보조 버튼: 흰 단색이 주 버튼(그라디언트)보다 튀지 않게 투명 바탕 + 1px 흰 반투명 선 */
.btn-ghost--ondark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost--ondark:hover { background: rgba(255, 255, 255, .08); }
.btn-ghost--ondark:active { background: rgba(255, 255, 255, .14); }
/* 첫 화면 요약(1~12개월 · 바로 시작 · 100% 환불): 카드 대신 세로 구분선으로 */
[data-page="unlimited"] .sum-chips { gap: 0; margin-top: 28px; }
[data-page="unlimited"] .sum-chips li { min-width: 0; padding: 2px 32px; background: none; border-radius: 0; box-shadow: none; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-3); gap: 4px; }
[data-page="unlimited"] .sum-chips li + li { border-left: 1px solid var(--line); }
[data-page="unlimited"] .sum-chips b { font-size: 20px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
@media (max-width: 640px) {
  [data-page="unlimited"] .sum-chips { gap: 0; }
  [data-page="unlimited"] .sum-chips li { padding: 2px 8px; font-size: 12px; }
  [data-page="unlimited"] .sum-chips b { font-size: 16px; }
}
/* 첫 화면: 요약 → 넓은 CTA 순서, 쇼핑몰 티커는 아래 「이런 분들이 써요」 섹션 맨 위로 */
[data-page="unlimited"] .ph-cta { margin-top: 32px; }
[data-page="unlimited"] .ph-cta .btn3d { min-width: 360px; min-height: 58px; font-size: 17px; }
[data-page="unlimited"] .sec--unl-who { padding-top: 40px; }
[data-page="unlimited"] .logoflow--top { margin: 0 0 clamp(56px, 6vw, 80px); }
@media (max-width: 640px) {
  [data-page="unlimited"] .ph-cta { align-self: stretch; margin-top: 24px; }
  [data-page="unlimited"] .ph-cta .btn3d { min-width: 0; width: 100%; min-height: 54px; font-size: 16px; }
  [data-page="unlimited"] .sec--unl-who { padding-top: 28px; }
  [data-page="unlimited"] .logoflow--top { margin-bottom: 48px; }
}
/* ===== ③ 끝 ===== */

/* ===== 소량 페이지 ① 첫 화면 · 이런 분들 · FAQ · 마지막 배너 (2026-10-19) ===== */
/* 무제한 페이지 ① · ③ 과 같은 기준. 공용 클래스라 전부 [data-page="self"] 로 한정 */
/* 첫 화면 요약(5,000원 · 25,000원 · 5분): 카드 대신 세로 구분선, 윗줄 진한 글자 */
[data-page="self"] .sum-chips { gap: 0; margin-top: 28px; }
[data-page="self"] .sum-chips li { min-width: 0; padding: 2px 32px; background: none; border-radius: 0; box-shadow: none; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-3); gap: 4px; }
[data-page="self"] .sum-chips li + li { border-left: 1px solid var(--line); }
[data-page="self"] .sum-chips b { font-size: 20px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
/* 첫 화면 버튼 두 개: 같은 높이, 주 버튼이 조금 넓게 */
[data-page="self"] .ph-cta { margin-top: 32px; gap: 12px; }
[data-page="self"] .ph-cta > * { min-height: 58px; font-size: 17px; }
[data-page="self"] .ph-cta .btn3d { min-width: 240px; }
[data-page="self"] .ph-cta .btn-ghost { min-width: 180px; }
/* 쇼핑몰 티커: 첫 화면에서 빼서 「이런 분들이 써요」 섹션 맨 위로 */
[data-page="self"] .sec--self-who { padding-top: 40px; }
[data-page="self"] .logoflow--top { margin: 0 0 clamp(56px, 6vw, 80px); }
/* 이런 분들이 써요: 토스페이스 이모지만(배경 상자 없음), 글자 한 단계 위로 */
[data-page="self"] .uw-card { display: flex; flex-direction: column; gap: 8px; }
[data-page="self"] .uw-card i { display: block; width: auto; height: auto; margin: 0 0 6px; background: none; border-radius: 0; font-family: Tossface, sans-serif; font-size: 40px; line-height: 1; }
[data-page="self"] .uw-card b { font-size: 18px; font-weight: 600; }
[data-page="self"] .uw-card p { margin: 0; font-size: 15.5px; }
/* 받을 수 있는 리뷰 목록: 첫 칸 🛒 도 OS 이모지 대신 토스페이스 */
[data-page="self"] .chan2-ic--emoji { font-family: Tossface, sans-serif; font-weight: 400; font-size: 20px; line-height: 1; }
@media (max-width: 640px) {
  [data-page="self"] .sum-chips { gap: 0; }
  [data-page="self"] .sum-chips li { padding: 2px 8px; font-size: 12px; }
  [data-page="self"] .sum-chips b { font-size: 16px; }
  /* 폰: 버튼 두 개를 같은 폭 두 칸으로 */
  [data-page="self"] .ph-cta { align-self: stretch; width: 100%; margin-top: 24px; gap: 8px; }
  [data-page="self"] .ph-cta .btn3d, [data-page="self"] .ph-cta .btn-ghost { flex: 1 1 0; min-width: 0; min-height: 54px; padding: 0 12px; font-size: 16px; }
  [data-page="self"] .sec--self-who { padding-top: 28px; }
  [data-page="self"] .logoflow--top { margin-bottom: 48px; }
}
/* ===== 소량 ① 끝 ===== */

/* ===== 소량 페이지 ② 가격 카드 · 돈은 이렇게 · 진행 흐름 (2026-10-19) ===== */
/* 가격 카드: 1석2조(추천) 카드는 청록 1px 테두리만, 그림자 없음. .plan/.plan-badge/.tagx 는 공용이라 소량 페이지로 한정 */
[data-page="self"] .plans--detail .plan.is-hot { box-shadow: 0 0 0 1px var(--teal-500); }
/* 칩 통일(무제한 페이지 「가장 저렴」과 같은 모양): 「쇼핑몰」 태그 + 「10% 할인, 가장 많이 찾아요」 */
[data-page="self"] .plans--detail .plan-badge,
[data-page="self"] .plans--detail .plan h4 .tagx { display: inline-block; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--teal-700); background: var(--teal-50); border-radius: 99px; padding: 3px 8px; }
[data-page="self"] .plans--detail .plan h4 .tagx { margin-left: 6px; vertical-align: 1px; }
/* 진행 흐름: 사장님 할 일 검정 알약 → 무제한 「할 일은 넷뿐」과 같은 연회색 라벨. 폰은 이미 라벨 + 값 글자라 PC만 */
@media (min-width: 641px) {
  [data-page="self"] #flow .tl-badge { padding: 4px 8px; border-radius: 6px; background: #F2F4F6; box-shadow: none; color: var(--ink-2); font-size: 13px; font-weight: 500; letter-spacing: -0.2px; }
  [data-page="self"] #flow .tl-badge--none { color: var(--ink-3); }
}
/* 2026-10-19 디렉터: 가격 카드 위계 — 이름(18) → 가격(36, 가장 크게) → 설명 → 목록은 연회색 묶음 → 큰 시작 버튼 */
[data-page="self"] .plans--detail .plan { gap: 0; padding: 28px; }
[data-page="self"] .plans--detail .plan-badge { margin-bottom: 12px; }
[data-page="self"] .plans--detail .plan h4 { font-size: 18px; color: var(--ink); }
[data-page="self"] .plans--detail .plan > b { margin-top: 10px; font-size: 36px; letter-spacing: -0.8px; line-height: 1.2; }
[data-page="self"] .plans--detail .plan > b small { font-size: 15px; font-weight: 500; }
[data-page="self"] .plans--detail .plan > p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
[data-page="self"] .plans--detail .plan ul { margin: 20px 0 24px; padding: 16px 18px; border-radius: 12px; background: var(--mist); gap: 8px; font-size: 15px; }
[data-page="self"] .plans--detail .plan ul li::before { color: var(--ink-3); }
[data-page="self"] .plans--detail .plan .btn-mini { min-height: 54px; font-size: 16px; border-radius: 12px; }
[data-page="self"] .plans--detail .plan.is-hot .btn-mini { background: var(--azd-grad); box-shadow: none; color: #fff; }
@media (max-width: 640px) {
  [data-page="self"] .plans--detail .plan { padding: 22px 20px; }
  [data-page="self"] .plans--detail .plan > b { font-size: 30px; }
  [data-page="self"] .plans--detail .plan ul { padding: 14px 16px; font-size: 14.5px; }
  [data-page="self"] .plans--detail .plan .btn-mini { min-height: 50px; font-size: 15.5px; }
}
/* 이런 리뷰를 받을 수 있어요: 아이콘 크기 통일(20px), 설명 글씨 13.5px 로 한 단계 위 */
[data-page="self"] .chan2-ic .chan2-svg { width: 20px; height: 20px; }
[data-page="self"] .chan2-list li:nth-child(2) .chan2-svg { width: 16px; height: 16px; }   /* 네이버 N 은 꽉 찬 모양이라 조금 작게 해야 같은 크기로 보임 */
[data-page="self"] .chan2-ic--emoji { font-size: 20px; }
[data-page="self"] .chan2-list span { font-size: 13.5px; }
/* ===== 소량 ② 끝 ===== */

/* 이용 방법 비교표: 「해당 없음」 표시를 글자 대시(—) 대신 짧은 회색 막대로 */
.scmp-a .scmp-dash { position: relative; border-radius: 50%; background: #F2F4F6; }
.scmp-a .scmp-dash::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 1px; background: #A0A7B4; transform: translate(-50%, -50%); }

/* 첫 화면 상단 여백: 홈과 하위 페이지 모두 PC 64px, 모바일 40px로 통일 */
.hero { padding-top: 64px; }
.ph { padding-top: 48px; }   /* 하위 페이지 첫 화면은 내용이 짧아 홈보다 한 단계 낮게 (2026-10-20 디렉터) */
@media (max-width: 640px) {
  .hero, .ph { padding-top: 40px; }
}

/* 쓰임새 카드(소량, 무제한 공통): 제목과 설명을 한 덩어리로 붙이고, 아이콘과 제목 사이는 유지 */
[data-page="self"] .uw-card, [data-page="unlimited"] .uw-card { gap: 4px; }
[data-page="self"] .uw-card i, [data-page="unlimited"] .uw-card i { margin-bottom: 10px; }
[data-page="self"] .uw-card b, [data-page="unlimited"] .uw-card b { line-height: 1.4; }

/* 소량: 플랫폼 아이콘 파스텔 배경 제거, 로고 자체 색만 남기고 조금 키움 */
[data-page="self"] .chan2-ic { width: auto; height: 28px; place-items: center start; background: none; border-radius: 0; }
[data-page="self"] .chan2-ic .chan2-svg { width: 24px; height: 24px; }
[data-page="self"] .chan2-list li:nth-child(2) .chan2-svg { width: 20px; height: 20px; }   /* 네이버 N 은 꽉 찬 모양이라 조금 작게 */
[data-page="self"] .chan2-ic--emoji { font-size: 24px; }
/* 소량: 흰 카드 테두리 시험 제거 (연회색 배경 위라 흰 면만으로 구분) */
[data-page="self"] .uw-card, [data-page="self"] .chan2-list li { box-shadow: none; }

/* 무제한도 쓰임새 카드 테두리 제거 (소량과 동일, 2026-10-20 디렉터 확정) */
[data-page="unlimited"] .uw-card { box-shadow: none; }

@media (max-width: 640px) {
  /* 쓰임새 카드: 폰에서도 PC와 같은 자리(쉼표 뒤)에서 끊어 「5분 / 등록으로」 같은 어색한 줄바꿈 방지 */
  [data-page="self"] .uw-card .br-p, [data-page="unlimited"] .uw-card .br-p { display: inline; }
  /* 리뷰 종류: 2열에서 스레드만 반 칸으로 남던 문제, 한 줄에 하나씩 아이콘 왼쪽 + 글 오른쪽으로 */
  [data-page="self"] .chan2-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  [data-page="self"] .chan2-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px; }
  [data-page="self"] .chan2-ic { grid-row: 1 / 3; margin: 0; place-items: center; }
  [data-page="self"] .chan2-list span { margin-top: 2px; }
}

/* 모바일 섹션 머리: 아이브로우, 제목, 설명을 한 덩어리로 (14/16 → 8/10, 첫 화면 설명은 12) */
@media (max-width: 640px) {
  .eyebrow { margin-bottom: 8px; }
  .sec-lead, .faq-help { margin-top: 10px; }
  .ph-lead, .ph--faq .ph-sub { margin-top: 12px; }
  .ucase-txt h3 { margin-top: 0; }
}

/* 첫 화면 매장/쇼핑몰 탭 전환: 흰 선택 칸이 옆으로 미끄러지고, 바뀐 글자와 입력 패널은 살짝 떠오르며 나타남 */
.starter-card .seg { position: relative; }
.starter-card .seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(30, 37, 52, .06); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.starter-card .seg:has(#tab-shop[aria-selected="true"])::before { transform: translateX(calc(100% + 4px)); }
.starter-card .seg button { position: relative; transition: color .2s ease; }
.starter-card .seg button[aria-selected="true"], .glass .starter-card .seg button[aria-selected="true"] { background: none; box-shadow: none; }
.hero .aud-in, [data-page="how"] .aud-in { animation: audIn .36s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes audIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .starter-card .seg::before { transition: none; } .hero .aud-in, [data-page="how"] .aud-in { animation: none; } }

/* 이용 방법 페이지 위쪽 탭도 같은 방식 — PC 는 검은 선택 칸, 폰은 흰 선택 칸 */
.seg--page { position: relative; }
.seg--page::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 16px; background: var(--ink); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.seg--page:has(> button:last-child[aria-selected="true"])::before { transform: translateX(calc(100% + 4px)); }
.seg--page button { position: relative; transition: color .2s ease; }
.seg--page button[aria-selected="true"] { background: none; box-shadow: none; }
@media (max-width: 640px) { .seg--page::before { background: #fff; box-shadow: 0 1px 2px rgba(30, 37, 52, .06); } }
@media (prefers-reduced-motion: reduce) { .seg--page::before { transition: none; } }

/* 진행 사례: 기존 목록·필터 영역 폭을 다른 랜딩 페이지 본문 폭(.wrap 1120px · 좌우 gutter)에 맞춤 */
[data-page="cases"] .ref-controls__inner, [data-page="cases"] .ref-body { max-width: 1120px; padding-inline: var(--gutter); }
/* 진행 사례 하단 배너: 흰 섹션에 쪽 번호 바로 아래로 붙이고(위 여백 0), 상자는 연회색 면만 (선·그림자 없음) */
[data-page="cases"] .sec--ref-cta { padding-top: 0; padding-bottom: 56px; }
@media (min-width: 641px) { [data-page="cases"] .ref-body { padding-bottom: 64px; } }
[data-page="cases"] .band { background: var(--mist); box-shadow: none; }

/* ===== 가격 페이지 ① 첫 화면 · 매장(알잘딱) 섹션 (2026-10-20 디렉터) ===== */
/* 첫 화면 약속 3개: 그림자 없이 1px, 제목 16/600 + 설명 14 */
[data-page="pricing"] .promise { margin-top: 32px; gap: 12px; }
[data-page="pricing"] .promise div { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 20px; text-align: left; background: #fff; box-shadow: 0 0 0 1px var(--line); }
[data-page="pricing"] .promise b { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
[data-page="pricing"] .promise span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* 매장 섹션: 블록 간격은 gap 으로 */
[data-page="pricing"] .wrap:has(> .px-azd) { display: flex; flex-direction: column; gap: 16px; }
[data-page="pricing"] .wrap:has(> .px-azd) > .sec-head { margin-bottom: clamp(12px, 2vw, 24px); }

/* Starter: 흰 카드 + 1px, 장식 배경·그림자 제거 */
[data-page="pricing"] .tiers--one::before { display: none; }
[data-page="pricing"] .tier.is-now { gap: 20px; align-items: stretch; padding: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
[data-page="pricing"] .tier-head { display: flex; flex-direction: column; gap: 4px; }
[data-page="pricing"] .tier.is-now h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
[data-page="pricing"] .tier.is-now .tier-price { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 16px; color: var(--ink); }
[data-page="pricing"] .tier-price s { margin: 0; font-size: 15px; font-weight: 400; color: var(--ink-3); }
[data-page="pricing"] .tier-now { font-size: 36px; font-weight: 600; line-height: 1.2; letter-spacing: -0.04em; color: var(--ink); }
[data-page="pricing"] .tier-cap { margin: 0; font-size: 14px; color: var(--ink-2); }
[data-page="pricing"] .tier .tier-feat { margin: 0; padding: 16px 18px; display: grid; gap: 10px; background: var(--mist); border-radius: 12px; font-size: 15px; color: var(--ink-2); }
[data-page="pricing"] .tier-feat li { display: flex; align-items: center; gap: 8px; }
[data-page="pricing"] .tier-feat li::before { content: ""; flex: none; width: 16px; height: 16px; margin: 0; background: var(--teal-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
[data-page="pricing"] .tier-act { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
[data-page="pricing"] .tier-act .tier-cta { margin: 0; width: 100%; }
[data-page="pricing"] .tier-act .tier-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* 돈은 이렇게 나가요: Starter 카드와 같은 무게, 금액은 --ink, 점은 작게 */
[data-page="pricing"] .px-when { display: flex; flex-direction: column; gap: 24px; padding: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
[data-page="pricing"] .px-when h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
[data-page="pricing"] .pay--v li { padding: 0 0 24px 34px; }
[data-page="pricing"] .pay--v li:last-child { padding-bottom: 0; }
[data-page="pricing"] .pay--v li::before { left: 7px; top: 9px; bottom: -9px; width: 2px; background: var(--teal-100); }
[data-page="pricing"] .pay--v li.paid::before { background: var(--teal-500); }
[data-page="pricing"] .pay--v li:last-child::before { display: none; }
[data-page="pricing"] .pay--v .pay-dot { top: 2px; width: 16px; height: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--teal-500); }
[data-page="pricing"] .pay--v li.paid .pay-dot { background: var(--teal-500); box-shadow: none; }
[data-page="pricing"] .pay--v .pay-when { margin: 0; padding: 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-3); }
[data-page="pricing"] .pay--v li .pay-amt, [data-page="pricing"] .pay--v li.paid .pay-amt, [data-page="pricing"] .pay--v li:not(.paid) .pay-amt { margin: 2px 0 0; font-size: 22px; line-height: 1.3; color: var(--ink); }
[data-page="pricing"] .pay--v .pay-what { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }

/* 더 많은 인원: 제목 + 칩 / 요금제는 이름, 가격, 인원으로 나눠서 */
[data-page="pricing"] .px-more { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 15px; }
[data-page="pricing"] .px-more-h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[data-page="pricing"] .px-more-h b { font-size: 16px; font-weight: 600; color: var(--ink); }
[data-page="pricing"] .px-more em { margin: 0; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--teal-700); background: var(--teal-50); border-radius: 99px; padding: 3px 8px; }
[data-page="pricing"] .px-plans { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-page="pricing"] .px-plans > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--mist); border-radius: 12px; }
[data-page="pricing"] .px-plans dt { font-size: 15px; font-weight: 600; color: var(--ink); }
[data-page="pricing"] .px-plans dd { margin: 0; display: flex; align-items: baseline; gap: 12px; }
[data-page="pricing"] .px-plans dd .num { font-size: 15px; font-weight: 600; color: var(--ink); }
[data-page="pricing"] .px-plans dd span:last-child { font-size: 14px; color: var(--ink-3); }

/* 부가세 각주: 왼쪽 정렬 13px */
[data-page="pricing"] .pay-foot--vat { margin: 0; text-align: left; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 640px) {
  [data-page="pricing"] .promise { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; padding: 18px 20px; background: #fff; border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--line); }
  [data-page="pricing"] .promise div { padding: 0; gap: 2px; background: none; box-shadow: none; border-radius: 0; text-align: left; }
  [data-page="pricing"] .promise b { font-size: 15px; word-break: keep-all; }
  [data-page="pricing"] .promise span { display: block; font-size: 13.5px; }
  [data-page="pricing"] .tier.is-now, [data-page="pricing"] .px-when { padding: 22px 20px; }
  [data-page="pricing"] .tier-now { font-size: 32px; }
  [data-page="pricing"] .px-more { padding: 18px 20px; }
  [data-page="pricing"] .px-plans { grid-template-columns: minmax(0, 1fr); }
  [data-page="pricing"] .px-plans > div { padding: 14px 16px; }
  [data-page="pricing"] .px-plans dd { gap: 8px; }
}
/* ===== 가격 ① 끝 ===== */

/* ===== 가격 페이지 ② 쇼핑몰 · 환불 규정 · 마지막 배너 (2026-10-20 디렉터) ===== */
/* 공용 작은 칩: 「리뷰가 많이 필요하다면」, 「10% 할인, 가장 많이 찾아요」 (소량, 무제한 페이지와 같은 모양) */
[data-page="pricing"] .px-unl .price-tag,
[data-page="pricing"] .px-two .plan-badge { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--teal-700); background: var(--teal-50); border-radius: 99px; padding: 3px 8px; }

/* 무제한 카드: 1px 선 하나, 그림자 없음. 이름 → 큰 가격 → 계산식(연회색 묶음) → 체크 목록 → 버튼 */
[data-page="pricing"] .px-unl { display: flex; flex-direction: column; align-items: flex-start; gap: 0; box-shadow: 0 0 0 1px var(--line); }
[data-page="pricing"] .px-unl h3 { margin: 12px 0 0; font-size: 18px; font-weight: 600; color: var(--ink); }
[data-page="pricing"] .px-unl .price-big { margin-top: 8px; font-size: clamp(36px, 4vw, 48px); line-height: 1.2; }
[data-page="pricing"] .px-unl .price-big small { font-size: 15px; font-weight: 500; }
[data-page="pricing"] .px-unl .unl-math { align-self: stretch; margin: 20px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--mist); gap: 4px 10px; font-size: 18px; letter-spacing: -0.02em; }
[data-page="pricing"] .px-unl .unl-math em { font-size: 14px; color: var(--ink-2); }
[data-page="pricing"] .px-unl .ticks { margin: 20px 0 0; gap: 10px; }
[data-page="pricing"] .px-unl .ticks li { font-size: 15px; font-weight: 500; color: var(--ink); }
[data-page="pricing"] .px-unl .btn-row { margin-top: auto; padding-top: 28px; gap: 8px; }
[data-page="pricing"] .px-unl .btn-row > * { min-height: 54px; padding: 0 24px; font-size: 16px; border-radius: 12px; }

/* 단일 · 1석2조 카드: 소량 페이지 가격 카드 위계(이름 18 → 가격 36 → 설명 15), 1석2조만 청록 1px 선 */
[data-page="pricing"] .px-two { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-content: stretch; gap: 12px; }
[data-page="pricing"] .px-two .plan { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 24px 28px; box-shadow: 0 0 0 1px var(--line); }
[data-page="pricing"] .px-two .plan.is-hot { box-shadow: 0 0 0 1px var(--teal-500); }
[data-page="pricing"] .px-two .plan-badge { margin-bottom: 10px; }
[data-page="pricing"] .px-two .plan h4 { font-size: 18px; color: var(--ink); }
[data-page="pricing"] .px-two .plan > b { margin-top: 8px; font-size: 36px; letter-spacing: -0.8px; line-height: 1.2; }
[data-page="pricing"] .px-two .plan > b small { font-size: 15px; font-weight: 500; }
[data-page="pricing"] .px-two .plan > p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
[data-page="pricing"] .px-two .pay-foot { margin: 4px 0 0; font-size: 13.5px; }
[data-page="pricing"] .px-two .link-arrow { justify-self: start; margin: 0; }

/* 환불 규정: PC 는 왼쪽 제목 + 오른쪽 규정 카드(본문 폭 전체), 회색 섹션 위 흰 카드는 선 없이 */
[data-page="pricing"] #refund .narrow-l > * { max-width: none; }
[data-page="pricing"] #refund .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-page="pricing"] #refund .sec-head { margin-bottom: 16px; }
[data-page="pricing"] #refund .rule { margin: 0; padding: 28px; box-shadow: none; }
[data-page="pricing"] #refund .rule h3 { margin-bottom: 8px; font-size: 18px; color: var(--ink); }
[data-page="pricing"] #refund .rule p { font-size: 15.5px; line-height: 1.65; }
[data-page="pricing"] #refund .rule-eg { margin-top: 14px; padding: 14px 16px; }
@media (min-width: 961px) {
  [data-page="pricing"] #refund .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
  [data-page="pricing"] #refund .sec-head { grid-row: 1 / span 3; margin: 0; }
  [data-page="pricing"] #refund .rule { grid-column: 2; }
}

/* 마지막 배너: 매장 주 버튼 + 쇼핑몰 보조 버튼, 높이 같게 */
[data-page="pricing"] .final p { text-wrap: balance; }
[data-page="pricing"] .final .btn-row { gap: 12px; }
[data-page="pricing"] .final .btn-row > * { min-height: 58px; padding: 0 28px; font-size: 17px; border-radius: 12px; }
@media (min-width: 641px) { [data-page="pricing"] .final .btn-row .btn-ghost { min-width: 200px; } }

@media (max-width: 860px) {
  [data-page="pricing"] .px-two { grid-template-rows: none; }
}
@media (max-width: 640px) {
  [data-page="pricing"] .px-unl .unl-math { padding: 12px 14px; font-size: 16px; }
  [data-page="pricing"] .px-unl .unl-math em { font-size: 13.5px; }
  [data-page="pricing"] .px-unl .btn-row { padding-top: 24px; }
  [data-page="pricing"] .px-two { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  [data-page="pricing"] .px-two .plan { padding: 22px 20px; }
  [data-page="pricing"] .px-two .plan > b { font-size: 30px; }
  [data-page="pricing"] .px-two .plan > p { font-size: 15px; }
  [data-page="pricing"] .px-two .plan-badge { font-size: 12px; padding: 3px 8px; }
  [data-page="pricing"] #refund .wrap { gap: 8px; }
  [data-page="pricing"] #refund .rule { padding: 22px 20px; }
  [data-page="pricing"] #refund .rule p { font-size: 15px; }
  [data-page="pricing"] .final .btn-row { gap: 8px; }
  [data-page="pricing"] .final .btn-row > * { min-height: 54px; font-size: 16px; }
}
/* ===== 가격 ② 끝 ===== */

/* ===== 가격 페이지 칩 (2026-10-20 디렉터, 리드 직접) — Starter 머리 칩 두 개 크기 통일 + 타임라인 「출시 기념 첫 달 50% 할인」을 칩으로 =====
   상태 칩은 청록, 할인 칩은 분홍 연한 면으로 구분하되 크기·굵기·여백은 같은 규격(12px · 600 · 3px 8px · 둥근 끝) */
[data-page="pricing"] .tier .px-chip, [data-page="pricing"] .pay .px-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 0; border-radius: 99px; padding: 3px 8px; color: var(--teal-700); background: var(--teal-50); white-space: nowrap; }
[data-page="pricing"] .tier .px-chip--sale, [data-page="pricing"] .pay .px-chip--sale { color: var(--pink-400); background: var(--pink-100); }
[data-page="pricing"] .tier-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
[data-page="pricing"] .pay--v .pay-amt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* 가격: 회색 매장 섹션 위 카드들은 선 없이 흰 면만 (회색 섹션 + 흰 카드 규칙) */
[data-page="pricing"] .tier.is-now, [data-page="pricing"] .px-when, [data-page="pricing"] .px-more { box-shadow: none; }
/* 가격: 쇼핑몰 부가세 문구와 「소량 체험단 자세히」를 한 묶음으로 (사이 6px) */
[data-page="pricing"] .px-two-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
[data-page="pricing"] .px-two-foot .pay-foot, [data-page="pricing"] .px-two-foot .link-arrow { margin: 0; }
/* 가격 첫 화면 약속 3개: 상자 없이 칸 사이 1px 세로선만 (무제한·소량 첫 화면 요약과 같은 구분선 방식) + 토스페이스 아이콘. 폰은 줄 사이 가로선 */
[data-page="pricing"] .promise { gap: 0; }
[data-page="pricing"] .promise div { background: none; box-shadow: none; border-radius: 0; gap: 6px; padding: 4px 28px; }
[data-page="pricing"] .promise div + div { box-shadow: inset 1px 0 0 var(--line); }
[data-page="pricing"] .promise .px-ic { margin-bottom: 6px; font-family: Tossface, sans-serif; font-style: normal; font-size: 28px; line-height: 1; }
@media (max-width: 640px) {
  /* 폰: 세 칸 가로 한 줄 · 아이콘 + 제목만 (설명은 아래 「돈은 이렇게 나가요」·환불 규정에서 다시 나와 생략) */
  [data-page="pricing"] .ph { padding-bottom: 40px; }   /* 첫 화면이 작은 아이콘 줄로 끝나 64px 이면 비어 보여서 위 여백과 같게 */
  [data-page="pricing"] .promise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin-top: 32px; background: none; box-shadow: none; border-radius: 0; }
  [data-page="pricing"] .promise div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 8px; text-align: center; background: none; border-radius: 0; }
  [data-page="pricing"] .promise div + div { box-shadow: inset 1px 0 0 var(--line); }
  [data-page="pricing"] .promise .px-ic { margin: 0; font-size: 24px; padding: 0; }
  [data-page="pricing"] .promise b { font-size: 14px; line-height: 1.4; word-break: keep-all; }
  [data-page="pricing"] .promise span { display: none; }
}
/* ===== 가격 칩 끝 ===== */

/* ===== 이용 방법 페이지 (2026-10-20 디렉터) ===== */
/* 1. 첫 화면 요약 3개: 상자·그림자 없이 칸 사이 1px 세로선만 (무제한·소량 첫 화면과 같은 구분선 방식) */
[data-page="how"] .sum-chips { gap: 0; margin-top: 28px; }
[data-page="how"] .sum-chips li { min-width: 0; padding: 2px 32px; background: none; border-radius: 0; box-shadow: none; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-3); gap: 4px; }
[data-page="how"] .sum-chips li + li { border-left: 1px solid var(--line); }
[data-page="how"] .sum-chips b { font-size: 20px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
@media (max-width: 640px) {
  [data-page="how"] .sum-chips { gap: 0; }
  [data-page="how"] .sum-chips li { padding: 2px 6px; font-size: 12px; white-space: nowrap; }
  [data-page="how"] .sum-chips b { font-size: 16px; }
}
/* 3. 한 달 흐름: 단계 꼬리표는 회색 면(검정 X), NEW 는 표준 작은 칩, 회색 섹션 위 카드는 선 없이 흰 면만, 금액은 알약 대신 글자 */
[data-page="how"] .tl-badge { padding: 4px 8px; border-radius: 6px; background: #fff; /* 회색 섹션 위라 #F2F4F6 은 안 보여 흰 면 */ color: var(--ink-2); font-size: 13px; font-weight: 500; }
[data-page="how"] .tl-badge b { color: var(--ink-3); font-size: 12px; font-weight: 500; }
[data-page="how"] .tl-badge--none { background: none; box-shadow: none; padding-inline: 0; color: var(--ink-3); }
[data-page="how"] .tl-azd li b em { margin-left: 6px; padding: 3px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1; color: var(--teal-700); background: var(--teal-50); vertical-align: 1px; }
[data-page="how"] .tl-azd { background: #fff; box-shadow: none; }
[data-page="how"] .tl-pay { padding: 0; border-radius: 0; background: none; color: var(--ink-3); font-size: 13px; font-weight: 500; }
[data-page="how"] .tl-pay.is-pay { color: var(--ink); font-weight: 600; }
[data-page="how"] .tl-pay--foot { margin-top: 12px; }
@media (max-width: 640px) {
  /* 폰: 오른쪽 금액을 날짜 줄이 아니라 단계 제목 줄에 맞춰 둔다 */
  [data-page="how"] .tl-head .tl-pay { top: 18px; line-height: 26px; padding: 0; font-size: 13px; }
  [data-page="how"] .tl-date { padding-right: 0; }
  [data-page="how"] .tl-head h3 { padding-right: 120px; }
  [data-page="how"] .tl-badge { margin-top: 6px; padding: 3px 8px; font-size: 12.5px; display: inline-flex; width: fit-content; }
}
/* 4. 장면으로 보기: 탭은 표준 칩(켜짐 teal-50, 꺼짐 mist), 회색 상자 여백 줄이고 무대 높이 제한 */
[data-page="how"] .talk--how { padding: 24px; gap: 16px; }
[data-page="how"] .talk--how .talk-head { margin-bottom: 0; }
[data-page="how"] .talk-tags li { padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; line-height: 1.3; background: #fff; color: var(--ink-3); box-shadow: none; }
[data-page="how"] .talk-tags li.on { background: var(--teal-50); color: var(--teal-700); box-shadow: none; }
[data-page="how"] .talk-tags li.on:hover, [data-page="how"] .talk-tags li:not(.on):hover { color: var(--teal-700); }
[data-page="how"] .talk-tags li::after { display: none; }
[data-page="how"] .deck-caps { margin-top: 0; }
[data-page="how"] .real-shot { box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 641px) {
  [data-page="how"] .real-stack--how { max-height: 560px; }
  [data-page="how"] .real-stack--how .real-shot { max-width: 760px; }
  [data-page="how"] .real-stack--how .real-shot--dash .adm { --dw: 760 !important; }
  [data-page="how"] .real-stack--how .real-shot--select .adm { --dw: 760 !important; }
  [data-page="how"] .real-shot--phone { max-width: 260px !important; padding: 6px; border-radius: 30px; box-shadow: inset 0 0 0 2px #29454E !important; }
}
@media (max-width: 640px) {
  /* 폰: 다음 카드가 16px 정도 비치게 */
  [data-page="how"] .talk--how { padding: 18px 16px 16px; }
  [data-page="how"] .real-stack--code { margin-inline: -16px; padding: 4px 16px 10px; scroll-padding-left: 16px; }
  [data-page="how"] .real-stack--code .real-shot { flex: 0 0 calc(100% - 8px); max-width: calc(100% - 8px); }
  [data-page="how"] .real-stack--code::after { flex: 0 0 1px; }
  [data-page="how"] .real-shot--phone { max-width: calc(100% - 8px) !important; }
}
/* 5. 쇼핑몰 선정 방식 표: 바깥 1px 선 하나, 머리 칸은 mist 면만, 손 이모지는 토스페이스 */
[data-page="how"] .scmp { box-shadow: none; border: 1px solid var(--line); }
[data-page="how"] .scmp-head b { font-weight: 600; }
[data-page="how"] .scmp-a .scmp-ic { font-family: Tossface, sans-serif; font-style: normal; }
[data-page="how"] .scmp-a .scmp-dash { background: var(--mist); }
@media (max-width: 640px) {
  [data-page="how"] .scmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-page="how"] .scmp-head > span:first-child { display: none; }
  [data-page="how"] .scmp-q { grid-column: 1 / -1; padding: 12px 16px 0 !important; font-size: 12.5px; background: none; }
  [data-page="how"] .scmp-row > span { padding: 12px 16px; }
  [data-page="how"] .scmp-row:not(.scmp-head) > span.scmp-a { padding-top: 6px; }
  [data-page="how"] .scmp-a { grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
  [data-page="how"] .scmp-a > svg, [data-page="how"] .scmp-a > i { display: grid; width: 24px; height: 24px; font-size: 16px; }
  [data-page="how"] .scmp-a > svg:not(.scmp-ok) { width: 28px; height: 22px; }
  [data-page="how"] .scmp-a b { font-size: 14px; } [data-page="how"] .scmp-a small { font-size: 12px; }
}
/* 6. 마지막 배너 두 버튼은 폰에서 같은 높이 */
@media (max-width: 640px) {
  [data-page="how"] .final .btn-row--duo { align-items: stretch; }
  [data-page="how"] .final .btn-row--duo .btn3d, [data-page="how"] .final .btn-row--duo .btn-ghost { flex: 1 1 0; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; }
}
/* 첫 화면 요약(3칸) 위아래 여백 더 · 버튼 라벨은 버튼 아래 (2026-10-20 디렉터) */
[data-page="how"] .sum-chips { margin-top: 36px; }
[data-page="how"] .ph-cta, [data-page="how"] .howbtns, [data-page="how"] .sum-chips + .btn-row { margin-top: 36px; }
[data-page="how"] .howbtn { gap: 10px; }
@media (max-width: 640px) {
  [data-page="how"] .sum-chips { margin-top: 28px; }
  [data-page="how"] .howbtns, [data-page="how"] .sum-chips + .btn-row { margin-top: 28px; }
}
/* 선정 방식 비교표 (2026-10-20 디렉터): PC는 제목과 같은 폭으로 꽉 채우고 글자 한 단계 키움 · 폰은 질문을 라벨 줄로 빼지 않고 왼쪽 열로 */
[data-page="how"] .scmp { max-width: none; }
[data-page="how"] .scmp-row { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); }
[data-page="how"] .scmp-row > span { padding: 22px 24px; }
[data-page="how"] .scmp-q { font-size: 15.5px; font-weight: 600; color: var(--ink-2); }
[data-page="how"] .scmp-head b { font-size: 17px; } [data-page="how"] .scmp-head small { font-size: 13.5px; margin-top: 4px; }
[data-page="how"] .scmp-a b { font-size: 17px; } [data-page="how"] .scmp-a small { font-size: 13.5px; }
[data-page="how"] #shop-pick .pay-foot { font-size: 14.5px; }
@media (max-width: 640px) {
  [data-page="how"] .scmp-row { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  [data-page="how"] .scmp-head > span:first-child { display: block; }
  [data-page="how"] .scmp-q { grid-column: auto; padding: 14px 12px !important; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--mist); display: flex; align-items: flex-start; word-break: keep-all; }   /* 모든 칸 위 정렬 — 한 줄짜리가 가운데 떠 보이지 않게 */
  [data-page="how"] .scmp-row > span { padding: 14px 12px; }
  [data-page="how"] .scmp-row:not(.scmp-head) > span.scmp-a { padding-top: 14px; }
  [data-page="how"] .scmp-row > span + span { border-left: 1px solid var(--line); }
  /* 아이콘은 제목 왼쪽 같은 줄에 — 질문·제목·설명 글줄이 모두 칸 위에서 같은 높이로 시작 */
  [data-page="how"] .scmp-a { grid-template-columns: 22px minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-content: start; align-items: start; }
  [data-page="how"] .scmp-a > svg, [data-page="how"] .scmp-a > i { grid-row: span 2; width: 22px; height: 22px; font-size: 15px; margin-top: -1px; }
  [data-page="how"] .scmp-a > svg:not(.scmp-ok) { width: 22px; height: 22px; }
  [data-page="how"] .scmp-a b { line-height: 20px; } [data-page="how"] .scmp-a small { line-height: 1.45; }
  [data-page="how"] .scmp-q { line-height: 20px; }
  [data-page="how"] .scmp-head > span { align-self: stretch; }   /* 칸을 행 높이만큼 채워야 세로 구분선이 끝까지 그어짐 */
  [data-page="how"] .scmp-a b { font-size: 14.5px; } [data-page="how"] .scmp-a small { font-size: 12.5px; }
  [data-page="how"] .scmp-head b { font-size: 14.5px; } [data-page="how"] .scmp-head small { font-size: 12px; }
  [data-page="how"] .scmp-head > span:first-child { background: var(--mist); }
}
/* 첫 화면: 아이브로우와 탭은 붙이고(10px), 탭과 제목 사이는 띄움(32px) */
[data-page="how"] .ph .eyebrow { margin-bottom: 10px; }
[data-page="how"] .seg--how { margin: 0 auto 32px; }
@media (max-width: 640px) { [data-page="how"] .ph .eyebrow { margin-bottom: 8px; } [data-page="how"] .seg--how { margin-bottom: 24px; } }
/* 좁은 폰(≤390)에서 답 제목이 두 줄로 깨지던 것: 질문 열을 좁히고 글자 한 단계 줄임 */
@media (max-width: 400px) {
  [data-page="how"] .scmp-row { grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr); }
  [data-page="how"] .scmp-row > span { padding: 14px 10px; }
  [data-page="how"] .scmp-q { padding: 14px 10px !important; font-size: 12.5px; }
  [data-page="how"] .scmp-a { column-gap: 5px; grid-template-columns: 20px minmax(0, 1fr); }
  [data-page="how"] .scmp-a > svg, [data-page="how"] .scmp-a > i { width: 20px; height: 20px; font-size: 14px; }
  [data-page="how"] .scmp-a > svg:not(.scmp-ok) { width: 20px; height: 20px; }
  [data-page="how"] .scmp-a b { font-size: 13.5px; letter-spacing: -0.02em; } [data-page="how"] .scmp-a small { font-size: 12px; }
  [data-page="how"] .scmp-head b { font-size: 13.5px; } [data-page="how"] .scmp-head small { font-size: 11.5px; }
}
/* 장면으로 보기: 탭 칩을 누를 수 있는 크기(높이 36·글자 14)로, 칩과 제목 사이는 제목과 목업 사이와 같게 */
[data-page="how"] .talk-tags { gap: 8px; }
[data-page="how"] .talk-tags li { min-height: 36px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 14px; }
[data-page="how"] .talk--how { gap: 32px; }
[data-page="how"] .deck-caps { margin-top: 0; }
@media (max-width: 640px) { [data-page="how"] .talk--how { gap: 24px; } [data-page="how"] .talk-tags li { min-height: 34px; padding: 0 14px; } }
/* 마지막 배너 섹션: 위 여백 없이 (앞 섹션 아래 여백만으로 간격) */
[data-page="how"] .sec--final { padding-top: 0; }
/* 첫 화면 매장 탭 CTA: 가로로 더 길게 (무제한 첫 화면 CTA 와 같은 360px) */
@media (min-width: 641px) { [data-page="how"] [data-for="store"] .btn-row .btn3d { min-width: 360px; min-height: 58px; } }
/* ===== 이용 방법 끝 ===== */

/* ===== 자주 묻는 질문 페이지 (2026-10-20 디렉터) ===== */
/* 1. 서비스 탭: 사이트 구분 버튼(.seg)과 같은 모양 — 연회색 통, 켜진 칸은 흰 바탕 + 1px 선. 색점 없음, 4칸 균등 */
[data-page="faq"] .faq-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 520px; margin: 18px auto 0; padding: 4px; background: var(--mist); border-radius: 14px; box-shadow: none; }
[data-page="faq"] .faq-tab { display: flex; align-items: center; justify-content: center; gap: 0; min-width: 0; min-height: 36px; padding: 0 6px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: transparent; box-shadow: none; }
[data-page="faq"] .faq-tab.is-on, [data-page="faq"] .faq-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[data-page="faq"] .faq-tab .svc-dot { display: none; }
@media (hover: hover) { [data-page="faq"] .faq-tab:not(.is-on):hover { color: var(--ink-2); } }
/* 1. 주제 칩: 표준 작은 칩 — 꺼짐 연회색, 켜짐 청록 50 + 청록 1px 선 */
[data-page="faq"] .faq-chips { margin-top: 14px; gap: 6px; }
[data-page="faq"] .faq-chips .chip { min-height: 0; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; line-height: 1.3; background: var(--mist); color: var(--ink-2); box-shadow: none; }
[data-page="faq"] .faq-chips .chip.is-on { background: var(--teal-50); color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-500); }
@media (hover: hover) { [data-page="faq"] .faq-chips .chip:not(.is-on):hover { background: #E9ECF0; } }
/* 2. 개수 줄 + 묶음 제목: 제목 18/600 잉크, 개수는 작은 회색 숫자. 묶음 사이 32, 질문 사이 8 */
[data-page="faq"] .faq-count { margin: 0 0 16px; font-size: 14px; color: var(--ink-3); }
[data-page="faq"] .faq-list--page { display: flex; flex-direction: column; gap: 32px; }
[data-page="faq"] .faq-group { display: flex; flex-direction: column; gap: 8px; }
[data-page="faq"] .faq-group + .faq-group { margin-top: 0; }
[data-page="faq"] .faq-group .faq-cat { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
[data-page="faq"] .faq-group .faq-cat span { font-size: 14px; font-weight: 500; color: var(--ink-3); }
/* 3. 질문 카드: 회색 섹션 위 흰 면, 선 없음. 질문 15.5/600, 답 15 잉크2 1.65, 문단 사이 12. 화살표 18px 잉크3 회전 */
[data-page="faq"] .faq-list--page .qa { background: #fff; border-radius: 12px; box-shadow: none; }
[data-page="faq"] .faq-list--page .qa summary { display: flex; align-items: flex-start; gap: 8px; padding: 18px 48px 18px 20px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; }
[data-page="faq"] .faq-list--page .qa summary::after { content: ""; position: absolute; right: 20px; top: 20px; width: 18px; height: 18px; border: 0; transform: none; background: currentColor; color: var(--ink-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; }
[data-page="faq"] .faq-list--page .qa[open] summary::after { transform: rotate(180deg); }
@media (hover: hover) { [data-page="faq"] .faq-list--page .qa summary:hover { color: var(--teal-700); } }
[data-page="faq"] .faq-list--page .qa-body { padding: 0 20px 20px; gap: 12px; }
[data-page="faq"] .faq-list--page .qa-body p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
[data-page="faq"] .faq-list--page .qa-body .qa-link { font-size: 14.5px; }
/* 3. 질문 앞 서비스 뱃지: 서비스별 색 대신 조용한 연회색 하나(묶음 제목이 이미 구분). 질문이 두 줄이어도 위에 붙게 */
[data-page="faq"] .faq-list--page .svc { flex: none; margin: 2px 0 0; padding: 3px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.3; vertical-align: baseline; background: var(--mist); color: var(--ink-2); }
[data-page="faq"] .faq-list--page .svc--azd, [data-page="faq"] .faq-list--page .svc--unl, [data-page="faq"] .faq-list--page .svc--small, [data-page="faq"] .faq-list--page .svc--all { background: var(--mist); color: var(--ink-2); }
/* 4. 검색 결과 없음: 흰 면, 선 없음, 가운데 글 */
[data-page="faq"] .faq-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; background: #fff; border-radius: 12px; box-shadow: none; color: var(--ink-2); font-size: 15px; }
[data-page="faq"] .faq-empty b { font-size: 16px; font-weight: 600; color: var(--ink); }
[data-page="faq"] .faq-empty p { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
[data-page="faq"] .faq-empty .btn-ghost { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
/* 5. 마지막 배너: 카톡 3D 버튼 + 어두운 바탕용 고스트, 높이 동일 */
[data-page="faq"] .final--ask .btn-row--duo { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
[data-page="faq"] .final--ask .btn-row--duo .btn3d, [data-page="faq"] .final--ask .btn-row--duo .btn-ghost { min-height: 54px; padding: 0 24px; font-size: 16px; border-radius: 16px; }
[data-page="faq"] .final--ask .btn-row--duo .btn-ghost--ondark { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); box-shadow: none; }
@media (hover: hover) { [data-page="faq"] .final--ask .btn-row--duo .btn-ghost--ondark:hover { background: rgba(255, 255, 255, .08); } }
@media (max-width: 640px) {
  [data-page="faq"] .faq-tabs { margin-top: 14px; max-width: none; }
  [data-page="faq"] .faq-tab { font-size: 14px; }
  [data-page="faq"] .faq-chips { margin-top: 12px; padding: 0 16px; }
  [data-page="faq"] .faq-list--page { gap: 24px; }
  [data-page="faq"] .faq-list--page .qa summary { padding: 16px 44px 16px 16px; font-size: 15px; }
  [data-page="faq"] .faq-list--page .qa summary::after { right: 16px; top: 17px; }
  [data-page="faq"] .faq-list--page .qa-body { padding: 0 16px 16px; }
  [data-page="faq"] .faq-list--page .svc { font-size: 12px; padding: 3px 8px; margin-top: 1px; }
  [data-page="faq"] .final--ask .btn-row--duo { flex-direction: column; width: 100%; gap: 8px; }
  [data-page="faq"] .final--ask .btn-row--duo .btn3d, [data-page="faq"] .final--ask .btn-row--duo .btn-ghost { flex: none; width: 100%; min-height: 50px; padding: 0 16px; font-size: 15px; }
}
/* ===== 자주 묻는 질문 끝 ===== */

/* ===== 헤더 PC (2026-10-20 디렉터) — 메뉴 사이 간격 넓히고, 현재 페이지 표시는 색 면 대신 글자색만 ===== */
@media (min-width: 961px) {
  .hd-in { gap: 36px; }
  .nav { gap: 12px; margin-left: 4px; }
  .nav-link { padding: 0 10px; color: var(--ink-3); }
  .nav-link:hover, .nav-item:focus-within > .nav-link { background: none; color: var(--teal-600); }   /* 올리거나 포커스: 주 색상 */
  .nav-link.is-active { background: none; color: var(--ink); }                                        /* 현재 페이지: 검정 */
  .hd-right { gap: 16px; }
  .logo img { height: 20px; }
  .hd-login { padding: 10px 8px; color: var(--ink); }                                                 /* 광고주센터 입구: 메뉴보다 한 단계 진하게 */
  .hd-login:hover { background: none; color: var(--teal-600); }
  .hd-login svg { color: currentColor; }
}
/* 키보드 포커스 테두리: 3px 진한 청록 → 2px, 가까이 */
:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
/* ===== 헤더 PC 끝 ===== */

/* ===== 세그먼트 탭 통일 (2026-10-20 디렉터) — 홈 첫 화면 매장/쇼핑몰 탭 기준: 연회색 통 20px · 흰 선택 칸 16px · 높이 44 · 글자 15 ===== */
.seg--page { background: var(--mist); border-radius: 20px; padding: 4px; box-shadow: none; }
.seg--page button { min-height: 44px; border-radius: 16px; font-size: 15px; color: var(--ink-3); }
.seg--page button[aria-selected="true"] { color: var(--ink); }
.seg--page::before { background: #fff; box-shadow: 0 1px 2px rgba(30, 37, 52, .06); }   /* PC 검정 선택 칸 → 흰 칸 */
[data-page="faq"] .faq-tabs { max-width: 520px; padding: 4px; gap: 4px; border-radius: 20px; }
[data-page="faq"] .faq-tab { min-height: 44px; border-radius: 16px; font-size: 15px; }
[data-page="faq"] .faq-tab.is-on, [data-page="faq"] .faq-tab[aria-selected="true"] { box-shadow: 0 1px 2px rgba(30, 37, 52, .06); }
/* ===== 세그먼트 탭 통일 끝 ===== */

/* ===== FAQ 제어판을 본문으로 (2026-10-20 디렉터) — 첫 화면은 제목+검색만, 서비스 탭·주제 칩은 회색 본문 맨 위 왼쪽 정렬 ===== */
[data-page="faq"] .faq-ctl { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 24px; }   /* PC: 첫 화면 제목·검색창과 같은 가운데 축 */
[data-page="faq"] .faq-ctl .faq-tabs { margin: 0; }
[data-page="faq"] .faq-ctl .faq-chips { margin: 0; justify-content: center; }
[data-page="faq"] .faq-chips .chip { min-height: 36px; padding: 0 14px; font-size: 14px; }
[data-page="faq"] .ph--faq { padding-bottom: 48px; }
@media (max-width: 640px) {
  [data-page="faq"] .faq-ctl { gap: 12px; margin-bottom: 24px; }
  [data-page="faq"] .sec--faqlist { padding-top: 32px; }   /* 검색창(첫 화면)과 탭이 같은 「찾기」 묶음이라 사이를 좁힘 */
  [data-page="faq"] .faq-ctl { align-items: stretch; }
  [data-page="faq"] .faq-ctl .faq-chips { justify-content: flex-start; }
  [data-page="faq"] .faq-chips { flex-wrap: wrap; gap: 8px; overflow: visible; margin-inline: 0; padding: 0; max-width: none; width: 100%; }
  [data-page="faq"] .ph--faq { padding-bottom: 24px; }
}
/* 회색 본문 위라 통·칩이 배경과 같은 색이 되던 것: 탭 통은 한 단계 진한 회색, 주제 칩은 흰 면 */
[data-page="faq"] .faq-ctl .faq-tabs { background: #EAEDF1; }
[data-page="faq"] .faq-chips .chip { background: #fff; }
[data-page="faq"] .faq-chips .chip.is-on { background: var(--teal-50); }
@media (hover: hover) { [data-page="faq"] .faq-chips .chip:not(.is-on):hover { background: #F2F4F6; } }
/* 그룹 제목 옆 개수: 글자 크기는 제목과 같게(색·굵기만 다르게) · 탭과 첫 그룹 사이 조금 더 */
[data-page="faq"] .faq-group .faq-cat span { font-size: inherit; font-weight: 500; color: var(--ink-3); }
[data-page="faq"] .faq-ctl { margin-bottom: 32px; }
@media (max-width: 640px) { [data-page="faq"] .faq-ctl { margin-bottom: 32px; } }
/* 주제 칩 묶음을 탭 통과 같은 무게로: 같은 폭(520px)을 꽉 채우고, 높이 44·글자 15 로 통일 */
[data-page="faq"] .faq-ctl .faq-chips { width: 100%; max-width: 520px; gap: 8px; }
[data-page="faq"] .faq-chips .chip { flex: 1 1 0; justify-content: center; min-height: 44px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
@media (max-width: 640px) {
  [data-page="faq"] .faq-ctl .faq-chips { max-width: none; }
  [data-page="faq"] .faq-chips .chip { flex: 0 0 auto; min-height: 40px; padding: 0 16px; font-size: 14px; }   /* 폰은 늘리지 않음 — 마지막 칩만 혼자 꽉 차던 것 */
}
/* ===== FAQ 제어판 끝 ===== */

/* ===== 폰 헤더 (2026-10-20 디렉터) — 주 버튼 제거(하단 고정 버튼이 있음), 아이콘 사이 간격 ===== */
@media (max-width: 960px) {
  .hd .btn3d--hd { display: none; }
  .hd-right { gap: 12px; }
}
/* ===== 폰 헤더 끝 ===== */

/* ===== 선택 칩 통일 (2026-10-20 디렉터) — 이용 방법 장면 탭 · FAQ 주제 칩: 흰 면 · 높이 44(폰 40) · 글자 15(폰 14) · 켜짐 청록 50 + 1px 청록 선 ===== */
[data-page="how"] .talk-tags { gap: 8px; }
[data-page="how"] .talk-tags li { min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--ink-2); background: #fff; box-shadow: none; }
[data-page="how"] .talk-tags li.on { background: var(--teal-50); color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-500); }
[data-page="faq"] .faq-chips .chip { font-weight: 600; color: var(--ink-2); }
[data-page="faq"] .faq-chips .chip.is-on { color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-500); }
@media (max-width: 640px) {
  [data-page="how"] .talk-tags li { min-height: 40px; padding: 0 14px; font-size: 14px; }
}
/* ===== 선택 칩 통일 끝 ===== */

/* ===== 서비스 드롭다운 PC (2026-10-20 디렉터) — 「지금」 칩 제거(대상만 회색 글자), 그림자 약하게, 항목 간격 축소 ===== */
.nav-drop { box-shadow: 0 0 0 1px var(--line), 0 8px 24px -12px rgba(30, 37, 52, .18); padding: 8px; }
.nav-drop a { padding: 10px 14px; }
.nav-drop a + a { margin-top: 4px; }
.nav-drop span { margin-top: 3px; }
.nav-st { margin-top: 8px; }
.nav-st .st { font-size: 12px; font-weight: 600; color: var(--ink-2); background: #F2F4F6; border-radius: 6px; padding: 3px 8px; }   /* 대상은 설명과 구분되게 작은 회색 태그로 */
.nav-st .st b { display: none; }
/* ===== 서비스 드롭다운 끝 ===== */

/* ===== 폰 메뉴 시트 (2026-10-20 디렉터) — 「서비스」 라벨 제거, 하위 항목 들여쓰기 제거, 글자 크기 한 단계 위로, 줄 간격 축소, 닫기 버튼 회색 원 제거 ===== */
.sheet-card .mm-cap { display: none; }
.sheet-card .mm-row { padding: 12px 10px; font-size: 17px; }
.sheet-card .mm-row--sub { padding: 10px 10px; font-size: 17px; }
.sheet-card .mm-row--sub small { font-size: 14px; line-height: 20px; margin-top: 2px; }
.sheet-card .mm-row--sub .nav-st { margin-top: 6px; }
.sheet-card .mm-row--sub .st { font-size: 12.5px; }
.sheet-card .mm-group { padding-bottom: 8px; margin-bottom: 8px; }
.sheet-card .sheet-x { background: none; box-shadow: none; }
/* 로고와 첫 항목 사이 살짝 줄임 · 가름선 위아래 여백 더 · 도움말 아래 선 대신 여백 · 버튼 둘 radius 12 통일, 테두리 1px 한 겹 */
.sheet-card .sheet-top { margin-bottom: 8px; }
.sheet-card .mm-group { padding-bottom: 14px; margin-bottom: 14px; }
.sheet-card .mm-cta { border-top: 0; padding-top: 24px; }
.sheet-card .mm-cta .btn3d, .sheet-card .mm-cta .btn-ghost { border-radius: 12px; min-height: 48px; }
.sheet-card .mm-cta .btn-ghost { border: 1px solid var(--line); box-shadow: none; }
/* 도움말 화면: 뒤로 가기 글자 키움, 버튼은 상담·체험단센터로 교체 (둘 다 radius 12 · 48) */
.sheet-card .mm-back { font-size: 16px; padding: 10px 10px 12px; color: var(--ink-2); }
.sheet-card .mm-back svg { width: 18px; height: 18px; }
.sheet-card #mm-cta-help .btn3d--kakao { box-shadow: none; }
/* ===== 폰 메뉴 시트 끝 ===== */

/* ===== 플로팅 버튼 (2026-10-20 디렉터) — 독: 흰 판 + 1px 선, 그라데이션은 버튼에만 · 카톡: 노란 알약 + 말풍선 아이콘, 더 크게 ===== */
@media (min-width: 961px) {   /* PC 알약만 — 폰 독은 기존 스타일 그대로 */
  .pc-pill .dock { padding: 10px 10px 10px 32px; gap: 48px; min-width: 640px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 0 0 1px rgba(30, 37, 52, .08), 0 12px 32px -16px rgba(30, 37, 52, .25); }   /* 뒤 흐림: 탑바(.glass .hd, 2026-10-15 재도입)와 같은 값 */
  .pc-pill .dock::before { display: none; }
  .pc-pill .dock-tip { color: var(--ink-2); font-weight: 500; }
  .pc-pill .dock .btn3d { min-height: 48px; border-radius: 99px; padding: 0 26px; }
}
.kakao { width: auto; height: 56px; padding: 0 22px 0 18px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1; box-shadow: 0 12px 28px -14px rgba(30, 37, 52, .35); }
.kakao .kakao-ic { width: 24px; height: 24px; }
@media (max-width: 960px) {
  /* 폰 독은 기존 스타일 그대로(말풍선 + 버튼, 아래로 번지는 흰 바탕) — 카톡 버튼 위치만 독 위로 */
  .kakao { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); height: 48px; padding: 0 16px 0 14px; font-size: 14px; }   /* 독(말풍선 포함) 위로 */
  .kakao .kakao-ic { width: 22px; height: 22px; }
}
/* 카톡: 글자 없이 노란 원 + 말풍선 아이콘 — Tawk 버튼과 같은 크기로 세로로 쌓는다 (PC 56 · 폰 48) */
.kakao { width: 60px; height: 60px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; right: 34px; }   /* Tawk 기본 버튼(60px)과 같은 지름, 중심선 맞춤 */
.kakao .kakao-ic { width: 28px; height: 28px; }
@media (max-width: 960px) { .kakao { width: 48px; height: 48px; padding: 0; } .kakao .kakao-ic { width: 22px; height: 22px; } }
/* ===== 플로팅 버튼 끝 ===== */

/* 폰 홈 첫 화면: 탑바와 첫 내용 사이 40 → 32 (2026-10-20 디렉터) */
@media (max-width: 640px) { .hero { padding-top: 32px; } }

/* 홈 쇼핑몰 탭 카드 (2026-10-20 디렉터) — 흰 판 안 카드는 선 없이 연회색 면(추천 카드는 연청록 면) · 양옆을 세그먼트와 같은 선에 */
.shop-fork-card { background: var(--mist); box-shadow: none; }
.shop-fork-card.is-hot { background: var(--teal-50); box-shadow: none; }
.shop-fork-card:hover, .shop-fork-card.is-hot:hover { box-shadow: none; }
@media (hover: hover) { .shop-fork-card:hover { background: #EEF0F3; } .shop-fork-card.is-hot:hover { background: #E3F4F6; } }
#panel-shop.panel { padding: 12px 0 0; }
.shop-fork-card.is-hot .fork2-tag { background: #fff; }   /* 연청록 면 위에서 칩이 묻히지 않게 */
/* 로고 SVG 교체 후 크기 한 단계 줄임 (PC 18px · 폰 17px) */
.logo img { height: 18px; }
@media (max-width: 960px) { .logo img { height: 17px; } }

/* Tawk 런처 위치는 lp/_footer.php 에서 정한다(CSS 로는 안 바뀜) */