/* 블록퍼널 부품 (tokens.css 값만 쓴다) */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }

/* ── 틀 ── */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: var(--surface); padding: var(--sp-5) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.logo { display: flex; align-items: center; padding: var(--sp-2) var(--sp-3) var(--sp-5); }
.logo img { height: 18px; width: auto; display: block; }
.logo .wm-dark { display: none; }
:root[data-theme="dark"] .logo .wm-light { display: none; }
:root[data-theme="dark"] .logo .wm-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .wm-light { display: none; } :root:not([data-theme="light"]) .logo .wm-dark { display: block; } }
.logo-mark { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; }
.logo-mark i { width: 6px; height: 6px; border-radius: 2px; display: block; }
.logo-mark i:nth-child(-n+3) { background: var(--phase-gather); }
.logo-mark i:nth-child(n+4):nth-child(-n+6) { background: var(--phase-persuade); }
.logo-mark i:nth-child(n+7) { background: var(--phase-keep); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-3); border-radius: var(--r-md);
  color: var(--text-2); font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease);
}
.nav-item:hover { background: var(--surface-sunken); color: var(--text); }
.nav-item[aria-current="page"] { background: var(--surface-sunken); color: var(--text); font-weight: var(--fw-semibold); }
.nav-item svg { width: 20px; height: 20px; flex: none; }
.sidebar-foot { margin-top: auto; padding: var(--sp-3); color: var(--text-3); font-size: var(--fs-xs); }

.main { min-width: 0; padding: var(--sp-8) var(--sp-8) var(--sp-16); }
.container { max-width: var(--content-max); margin: 0 auto; }

.tabbar { display: none; }

@media (max-width: 767px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: var(--sp-5) var(--sp-4) calc(var(--tabbar-h) + var(--sp-8)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; height: var(--tabbar-h);
    background: var(--surface); box-shadow: 0 -1px 0 var(--line);
    padding-bottom: env(safe-area-inset-bottom); z-index: 20;
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--text-3); }
  .tabbar a[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }
  .tabbar svg { width: 22px; height: 22px; }
}

/* ── 글자 ── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.eyebrow { font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-medium); margin: 0 0 var(--sp-1); }
.h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; }
.h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0; }
.h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0; }
.body-2 { color: var(--text-2); }
.caption { font-size: var(--fs-sm); color: var(--text-3); }
@media (max-width: 767px) { .h1 { font-size: var(--fs-2xl); } }

/* ── 단추 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-pill);
  font-weight: var(--fw-semibold); font-size: var(--fs-md); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 18px; height: 18px; }
.btn-ink { background: var(--ink); color: var(--text-on-ink); }
.btn-ink:hover { background: var(--ink-hover); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-hover); }
.btn-soft { background: var(--surface-sunken); color: var(--text); }
.btn-soft:hover { background: var(--line-strong); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text); }
.btn-sm { height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { height: 56px; padding: 0 var(--sp-8); font-size: var(--fs-lg); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── 카드: 선 없음, 그림자 1 ── */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-6); }
.card-lg { border-radius: var(--r-xl); padding: var(--sp-8); }
.card + .card { margin-top: var(--sp-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (max-width: 767px) { .card { padding: var(--sp-5); } .card-lg { padding: var(--sp-6); } }

/* ── 칩 ── */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--surface-sunken); color: var(--text-2); white-space: nowrap; }
.chip-gather { background: var(--phase-gather-soft); color: var(--phase-gather-text); }
.chip-persuade { background: var(--phase-persuade-soft); color: var(--phase-persuade-text); }
.chip-keep { background: var(--phase-keep-soft); color: var(--phase-keep-text); }
.chip-danger { background: var(--danger-soft); color: var(--danger-text); }
.chip-ok { background: var(--ok-soft); color: var(--green-700); }
.chip-sample { background: var(--warn-soft); color: var(--text-2); }

/* ── 입력 ── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field + .field { margin-top: var(--sp-5); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.input, .textarea {
  width: 100%; border: 0; border-radius: var(--r-md);
  background: var(--surface-sunken); padding: 12px 14px; font-size: var(--fs-lg);
  transition: box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.textarea { min-height: 88px; resize: vertical; font-size: var(--fs-md); line-height: var(--lh-normal); }
.input:focus, .textarea:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--focus); }
.input-xl { font-size: var(--fs-2xl); font-weight: var(--fw-bold); padding: 16px 18px; }

/* 고르기 칸 (질문 화면) */
.choices { display: grid; gap: var(--sp-3); }
.choice {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left;
  padding: var(--sp-5); border: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1);
  cursor: pointer; font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.choice:hover { box-shadow: var(--shadow-2); }
.choice[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.choice small { display: block; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-2); margin-top: 2px; }
.choice-ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-sunken); display: grid; place-items: center; font-size: 22px; flex: none; }

/* 켜고 끄기 */
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line-strong); transition: background var(--dur) var(--ease); pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease); }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 나아감 막대 */
.progress { height: 4px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--ink); border-radius: inherit; transition: width var(--dur) var(--ease); }

/* ── 블록 쌓기 (핵심 부품) ── */
.stack { display: flex; flex-direction: column; gap: 0; }
.phase-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); margin: var(--sp-6) 0 var(--sp-3); }
.phase-label:first-child { margin-top: 0; }
.phase-label i { width: 8px; height: 8px; border-radius: 2px; }
.block-row {
  position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--sp-4);
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: var(--sp-4) var(--sp-5); cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.block-row:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.block-row + .block-row { margin-top: var(--sp-2); }
.block-no { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.block-row[data-phase="gather"] .block-no { background: var(--phase-gather-soft); color: var(--phase-gather-text); }
.block-row[data-phase="persuade"] .block-no { background: var(--phase-persuade-soft); color: var(--phase-persuade-text); }
.block-row[data-phase="keep"] .block-no { background: var(--phase-keep-soft); color: var(--phase-keep-text); }
.block-name { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.block-sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.block-parts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: var(--sp-2); }
.block-metric { text-align: right; }
.block-metric .num { font-size: var(--fs-lg); font-weight: var(--fw-bold); display: block; line-height: 1.1; }
.block-metric small { color: var(--text-3); font-size: var(--fs-xs); }
.block-row.is-leak { box-shadow: 0 0 0 2px var(--danger), var(--shadow-1); }
.leak-tag { position: absolute; top: -10px; right: var(--sp-5); }
.pass { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0 6px 64px; font-size: var(--fs-xs); color: var(--text-3); }
.pass .bar { flex: 0 0 80px; height: 4px; background: var(--surface-sunken); border-radius: var(--r-pill); overflow: hidden; }
.pass .bar i { display: block; height: 100%; background: var(--text-3); }
.pass.is-leak { color: var(--danger-text); font-weight: var(--fw-semibold); }
.pass.is-leak .bar i { background: var(--danger); }
@media (max-width: 767px) {
  .block-row { grid-template-columns: 40px 1fr auto; gap: var(--sp-3); padding: var(--sp-4); }
  .block-no { width: 40px; height: 40px; font-size: var(--fs-md); }
  .block-parts { display: none; }
  .pass { padding-left: 56px; }
}

/* 큰 숫자 칸 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-5); }
.stat .label { font-weight: var(--fw-medium); }
.stat .num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); display: block; margin-top: var(--sp-1); }
.stat small { color: var(--text-3); font-size: var(--fs-xs); }
@media (max-width: 767px) { .stats { grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .stats .stat:first-child { grid-column: 1 / -1; } .stat .num { font-size: var(--fs-xl); } }

/* 권하기 카드 */
.nudge { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--danger-soft); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.nudge-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface); display: grid; place-items: center; flex: none; color: var(--danger); }
.nudge-ico svg { width: 22px; height: 22px; }
.nudge .h3 { margin-bottom: 2px; }
.nudge-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* 두 칸 화면 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); align-items: start; }
.sticky { position: sticky; top: var(--sp-8); }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; } .sticky { position: static; } }

/* 부품 목록 */
.part { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; }
.part + .part { box-shadow: 0 -1px 0 var(--line); }
.part-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface-sunken); display: grid; place-items: center; font-size: 18px; flex: none; }
.part-body { flex: 1; min-width: 0; }
.part-name { font-weight: var(--fw-semibold); }
.part-desc { font-size: var(--fs-sm); color: var(--text-2); }
.part.is-hint { background: var(--brand-soft); margin: 0 calc(var(--sp-6) * -1); padding-left: var(--sp-6); padding-right: var(--sp-6); }
.part.is-hint + .part, .part.is-hint { box-shadow: none; }

/* 폰 미리보기 */
.phone { width: 100%; max-width: 340px; margin: 0 auto; background: var(--gray-900); border-radius: 36px; padding: 10px; box-shadow: var(--shadow-3); }
.phone-screen { background: #fff; color: #15181d; border-radius: 28px; overflow: hidden; min-height: 600px; display: flex; flex-direction: column; color-scheme: light; }
.phone-bar { height: 28px; display: flex; justify-content: center; align-items: center; }
.phone-bar i { width: 90px; height: 6px; border-radius: 6px; background: #e5e7eb; }
.phone-body { padding: 20px 20px 24px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.pv-title { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.6px; margin: 0; }
.pv-desc { font-size: 14px; color: #4f5663; margin: 0; }
.pv-part { background: #f4f5f7; border-radius: 14px; padding: 14px; font-size: 13px; }
.pv-part b { display: block; font-size: 14px; margin-bottom: 4px; }
.pv-cta { margin-top: auto; height: 52px; border-radius: 999px; background: #15181d; color: #fff; border: 0; font-weight: 700; font-size: 16px; }
.pv-timer { display: flex; gap: 6px; }
.pv-timer span { background: #15181d; color: #fff; border-radius: 8px; padding: 6px 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-stars { color: #f5a524; letter-spacing: 1px; }
.pv-pay { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.pv-pay span { background: #fff; border-radius: 10px; padding: 10px 0; text-align: center; font-weight: 700; font-size: 12px; box-shadow: inset 0 0 0 1px #dfe2e7; }

/* 탭 */
.seg { display: inline-flex; background: var(--surface-sunken); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; height: 32px; padding: 0 var(--sp-4); border-radius: var(--r-pill); font-weight: var(--fw-semibold); color: var(--text-2); cursor: pointer; font-size: var(--fs-sm); }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.only-mobile { display: none; }
@media (max-width: 1023px) {
  .only-mobile { display: inline-flex; }
  [data-pane][hidden] { display: none !important; }
}
@media (min-width: 1024px) { [data-pane][hidden] { display: block !important; } }

/* 요금 */
.plans .card { margin: 0; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.plan { display: flex; flex-direction: column; gap: var(--sp-4); }
.plan.is-main { box-shadow: 0 0 0 2px var(--ink), var(--shadow-2); }
.plan-price { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.plan li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ok); }
.plan .btn { margin-top: auto; }
.block-dots { display: flex; gap: 4px; }
.block-dots i { width: 18px; height: 18px; border-radius: 5px; background: var(--surface-sunken); display: block; }
.block-dots i.on-gather { background: var(--phase-gather); }
.block-dots i.on-persuade { background: var(--phase-persuade); }
.block-dots i.on-keep { background: var(--phase-keep); }
@media (max-width: 1023px) { .plans { grid-template-columns: 1fr; } }

/* 알림 */
.toast { position: fixed; left: 50%; bottom: var(--sp-8); transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--text-on-ink); padding: 12px 20px; border-radius: var(--r-pill); font-weight: var(--fw-semibold); box-shadow: var(--shadow-3); transition: all var(--dur) var(--ease); z-index: 50; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 767px) { .toast { bottom: calc(var(--tabbar-h) + var(--sp-4)); } }

/* 질문 화면 (틀 없이) */
.solo { min-height: 100vh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
.solo-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-10); }
.solo-top .progress { flex: 1; }
.solo-q { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--sp-2); }
.solo-hint { color: var(--text-2); margin: 0 0 var(--sp-8); }
.solo-foot { margin-top: auto; padding-top: var(--sp-8); }
@media (max-width: 767px) { .solo-q { font-size: var(--fs-2xl); } }

.building { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
.build-step { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); opacity: 0.35; transition: opacity var(--dur) var(--ease); }
.build-step.is-done { opacity: 1; }
.build-step .block-no { width: 32px; height: 32px; font-size: var(--fs-sm); border-radius: 8px; }

/* 디자인 안내 화면 */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.swatch { border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); }
.swatch-color { height: 64px; }
.swatch-meta { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.swatch-meta b { display: block; font-size: var(--fs-sm); }
.swatch-meta code { color: var(--text-3); }
.type-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-4); align-items: baseline; padding: var(--sp-3) 0; }
.type-row + .type-row { box-shadow: 0 -1px 0 var(--line); }
.type-row code { font-size: var(--fs-xs); color: var(--text-3); }
.spacing-row { display: flex; align-items: center; gap: var(--sp-3); padding: 4px 0; font-size: var(--fs-xs); color: var(--text-2); }
.spacing-row i { display: block; height: 12px; background: var(--brand); border-radius: 2px; }
.radius-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.radius-row div { width: 72px; height: 72px; background: var(--surface-sunken); display: grid; place-items: end center; padding-bottom: 6px; font-size: var(--fs-xs); color: var(--text-2); }
.demo-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.rule { border-radius: var(--r-md); padding: var(--sp-4); background: var(--surface-2); }
.rule .chip { margin-bottom: var(--sp-2); }
.rule p { margin: 0; }
@media (max-width: 767px) { .rules { grid-template-columns: 1fr; } .type-row { grid-template-columns: 1fr; gap: 2px; } }
.guide-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.section-gap { margin-top: var(--sp-8); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.grow { flex: 1; }
.sample-banner { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* ── 기능 묶음 (1028 둘째 판: 노션 하위 항목 = 기능 묶음) ── */
.fgroup + .fgroup { margin-top: var(--sp-6); }
.fgroup-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.fgroup-head .h3 { font-size: var(--fs-md); }
.fgroup-head .caption { margin-left: auto; }
.feat { border-radius: var(--r-md); background: var(--surface-2); }
.feat + .feat { margin-top: var(--sp-2); }
.feat-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
.feat-row .part-ico { width: 36px; height: 36px; font-size: 16px; background: var(--surface); }
.feat-caret { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--dur) var(--ease); flex: none; }
.feat.is-open .feat-caret { transform: rotate(90deg); }
.feat-panel { display: none; padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 36px + var(--sp-3)); }
.feat.is-open .feat-panel { display: block; }
.feat.is-hint { box-shadow: 0 0 0 2px var(--danger); }
.feat.is-off .feat-panel { opacity: 0.5; }
.chip-ai { background: var(--ink); color: var(--text-on-ink); }
.sub-field + .sub-field { margin-top: var(--sp-4); }
.sub-field .label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-xs); }
.opts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.opt { height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--text-on-ink); box-shadow: none; font-weight: var(--fw-semibold); }
.pick4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.pick4 button { border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); padding: var(--sp-3); text-align: left; cursor: pointer; }
.pick4 button b { display: block; font-size: var(--fs-sm); }
.pick4 button span { font-size: var(--fs-xs); color: var(--text-2); }
.pick4 button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); background: var(--surface); }
@media (max-width: 767px) { .pick4 { grid-template-columns: 1fr 1fr; } .feat-panel { padding-left: var(--sp-4); } }
.steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.step { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-2); align-items: center; }
.step .chip { justify-content: center; }
.step .input { font-size: var(--fs-sm); padding: 8px 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mini-input { display: flex; align-items: center; gap: var(--sp-2); }
.mini-input .input { font-size: var(--fs-md); padding: 8px 12px; max-width: 160px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sub-field .textarea { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); min-height: 64px; }
.ai-box { background: var(--surface); border-radius: var(--r-md); padding: var(--sp-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ai-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.sugg { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) 0; }
.sugg + .sugg { box-shadow: 0 -1px 0 var(--line); }
.sugg p { margin: 0; flex: 1; font-size: var(--fs-sm); }
.sugg p small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.sugg .btn { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
.sugg.is-used .btn { background: var(--ok-soft); color: var(--green-700); }
.tiers { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tiers th, .tiers td { text-align: left; padding: 6px 8px; }
.tiers th { color: var(--text-3); font-weight: var(--fw-medium); font-size: var(--fs-xs); }
.tiers tr + tr td { box-shadow: 0 -1px 0 var(--line); }
.tiers .input { font-size: var(--fs-sm); padding: 6px 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* 단골 등급표 (1029 일꾼 F1): 넓으면 한 줄 세 칸, 좁으면 등급 이름 한 줄 + 조건·혜택 두 칸 */
.tiers2 { display: grid; gap: var(--sp-3); }
.tier-row { display: grid; grid-template-columns: minmax(80px, 0.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.tier-row label { display: grid; gap: 4px; min-width: 0; }
.tier-row label > span { font-size: var(--fs-xs); color: var(--text-2); font-weight: var(--fw-medium); }
.tier-row .input { font-size: var(--fs-sm); padding: 8px 10px; min-width: 0; width: 100%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (max-width: 640px) { .tier-row { grid-template-columns: minmax(0, 1fr); } }
/* 계정·팀·결제 화면 보조 글자 (1029 일꾼 F1): 흐린 글(--text-3)은 어두운 카드에서 3.8:1이라 보조 글(--text-2)로 올림. 라이트 6.6:1, 다크 8:1 */
.acct-page .caption, .acct-page .label { color: var(--text-2); }
.acct-rights { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ask-box { margin: 0 0 var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.inv.is-off { opacity: .55; }
.lead-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lead-act .btn { height: 32px; }
@media (max-width: 640px) { .lead-list .lead-row { flex-wrap: wrap; row-gap: var(--sp-2); } .lead-list .lead-row .grow { flex: 1 1 100%; order: 3; } .lead-list .lead-row > .caption { margin-left: auto; } }
.lead-raw { display: block; margin-top: 4px; color: var(--text); font-size: var(--fs-sm); word-break: break-all; }
.doc-wrap { max-width: 720px; margin: 0 auto; }
.doc-toc { margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunken); }
.doc-toc ol { margin: 6px 0 0; padding-left: 0; list-style: none; columns: 2; column-gap: var(--sp-6); font-size: var(--fs-sm); }
.doc-toc li { margin: 2px 0; break-inside: avoid; }
@media (max-width: 640px) { .doc-toc ol { columns: 1; } }
.doc-sec { scroll-margin-top: 80px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--sp-2) 0; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--line); }
.doc-table th { color: var(--text-2); font-weight: var(--fw-medium); font-size: var(--fs-xs); }
@media (max-width: 640px) { .doc-table thead { display: none; } .doc-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); } .doc-table td { display: block; border: 0; padding: 2px 0; } .doc-table td::before { content: attr(data-h) ' '; color: var(--text-2); font-size: var(--fs-xs); } }
.bl-docs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.bl-doc { margin-top: var(--sp-3); max-height: 360px; overflow: auto; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunken); }
.pv-sugg { background: #f3ecff; border-radius: 14px; padding: 12px 14px; font-size: 13px; }

/* ── 1028 셋째 판: 연동, 가이드북, 도구, 전후 비교, 관리자 보기 ── */
.q { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--surface-sunken); color: var(--text-2); font-size: 11px; font-weight: var(--fw-bold); cursor: pointer; vertical-align: middle; margin-left: 4px; padding: 0; }
.q:hover { background: var(--brand-soft); color: var(--brand-text); }
.conn { display: flex; flex-direction: column; gap: var(--sp-4); }
.conn-head { display: flex; align-items: center; gap: var(--sp-3); }
.conn-ico { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 20px; flex: none; background: var(--surface-sunken); }
.conn-status { margin-left: auto; }
.conn-input { display: flex; gap: var(--sp-2); }
.conn-input .input { font-size: var(--fs-md); }
.conn-note { font-size: var(--fs-sm); color: var(--text-2); background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.conn-note code { background: var(--surface-sunken); padding: 1px 6px; border-radius: 4px; font-size: var(--fs-xs); }
.err { color: var(--danger-text); font-size: var(--fs-xs); min-height: 16px; }
.event-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); }
.event { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); }
.event code { font-size: var(--fs-xs); color: var(--brand-text); font-weight: var(--fw-semibold); }
.checklist .chk { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.checklist .chk + .chk { box-shadow: 0 -1px 0 var(--line); }
.chk-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-sunken); color: var(--text-3); }
.chk-dot svg { width: 14px; height: 14px; }
.chk.is-done .chk-dot { background: var(--ok); color: #fff; }
.chk.is-done .chk-name { color: var(--text-3); text-decoration: line-through; }
.chk-name { flex: 1; font-weight: var(--fw-semibold); }

.scrim { position: fixed; inset: 0; background: rgba(15, 17, 20, 0.4); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); z-index: 40; }
.scrim.is-on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform var(--dur) var(--ease); z-index: 41; overflow-y: auto; padding: var(--sp-6); }
.sheet.is-on { transform: none; }
@media (max-width: 767px) { .sheet { top: auto; width: 100%; max-height: 86vh; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.guide-steps { counter-reset: s; list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.guide-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3); }
.guide-steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.guide-box { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.help-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.help-item { text-align: left; border: 0; cursor: pointer; }
.help-item:hover { box-shadow: var(--shadow-2); }

.chip-soon { background: var(--surface-sunken); color: var(--text-3); }
.chip-admin { background: var(--brand-soft); color: var(--brand-text); }
.feat.is-soon .feat-row { opacity: 0.55; }
.tool-btn { margin-top: var(--sp-3); }

.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.ba-cell { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-4); }
.ba-cell .num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); display: block; }
.ba-cell.after { background: var(--brand-soft); }
.ba-delta { font-weight: var(--fw-bold); color: var(--ok); }
.ba-delta.down { color: var(--danger-text); }
.chart { margin-top: var(--sp-4); }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--sp-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

.admin-toggle { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-2); margin-bottom: var(--sp-3); }
.reel-out { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.reel-cut { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3); font-size: var(--fs-sm); }
.reel-cut b { color: var(--brand-text); font-size: var(--fs-xs); }
.pv-kakao { position: absolute; right: 14px; bottom: 84px; background: #FEE500; color: rgba(0,0,0,.85); border-radius: 12px; padding: 9px 14px; font-size: 12px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,.15); } /* 카카오 디자인 가이드: 배경 #FEE500, 글자 검정 85%, 모서리 12px */
.phone-screen { position: relative; }
.pv-url { font-size: 11px; color: #6f7785; text-align: center; padding: 0 0 4px; }

/* ── 1028 넷째 판: AI 문구 추천, 랜딩 페이지 빌더, 블로그 글쓰기 ── */
.cp { margin-top: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); }
.cp-verdict { margin: 0 0 var(--sp-3); font-weight: var(--fw-bold); }
.cp-card { background: var(--surface); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-1); }
.cp-card + .cp-card { margin-top: var(--sp-2); }
.cp-card.is-best { box-shadow: 0 0 0 2px var(--brand), var(--shadow-1); }
.cp-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0; }
.cp-desc { margin: 4px 0 0; color: var(--text-2); }
.cp-why { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); background: var(--surface-2); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.cp-issue { background: var(--surface); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2); }
.cp-issue p { margin: 6px 0 0; font-size: var(--fs-sm); }
.cp-mat { margin-top: var(--sp-4); background: var(--surface); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.cp-mat summary { cursor: pointer; font-weight: var(--fw-semibold); }
.cp-mat .input { font-size: var(--fs-md); padding: 10px 12px; }
.cp-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.cp-nums .sub-field + .sub-field { margin-top: 0; }

.lb-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.lb-row { background: var(--surface-2); border-radius: var(--r-md); }
.lb-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); cursor: pointer; }
.lb-no { width: 22px; text-align: center; font-weight: var(--fw-bold); color: var(--text-3); font-size: var(--fs-sm); flex: none; }
.lb-head .part-ico { width: 36px; height: 36px; font-size: 16px; background: var(--surface); }
.lb-tools { display: flex; gap: 2px; flex: none; }
.lb-tools .btn { width: 32px; padding: 0; }
.lb-body { display: none; padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-3) + 22px + var(--sp-3)); }
.lb-row.is-open .lb-body { display: block; }
.lb-body .input, .lb-body .textarea { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-md); }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.lb-pick { text-align: left; border: 0; border-radius: var(--r-md); background: var(--surface-2); padding: var(--sp-3); cursor: pointer; display: grid; grid-template-columns: 28px 1fr; gap: 2px var(--sp-2); }
.lb-pick:hover { background: var(--brand-soft); }
.lb-pick span { grid-row: span 2; font-size: 20px; }
.lb-pick small { color: var(--text-2); font-size: var(--fs-xs); }
@media (max-width: 767px) { .lb-body { padding-left: var(--sp-3); } .part-desc { font-size: 12px; } }

/* 고객 화면 랜딩 (폰 안) */
.lp-scroll { flex: 1; overflow-y: auto; max-height: 640px; padding-bottom: 72px; }
.lp-hero { padding: 24px 20px; background: linear-gradient(180deg, #f3ecff, #fff); }
.lp-hero h2 { font-size: 22px; margin: 0 0 6px; letter-spacing: -0.6px; }
.lp-hero p { margin: 0 0 12px; font-size: 14px; color: #4f5663; }
.lp-hero button, .lp-bar button { width: 100%; height: 48px; border: 0; border-radius: 999px; background: #15181d; color: #fff; font-weight: 700; }
.lp-sec { padding: 16px 20px; font-size: 13px; }
.lp-sec + .lp-sec { border-top: 8px solid #f4f5f7; }
.lp-h { display: block; font-size: 15px; margin-bottom: 8px; }
.lp-bubble { background: #fee500; color: #191919; border-radius: 14px 14px 14px 4px; padding: 8px 12px; margin: 4px 0; max-width: 85%; width: max-content; }
.lp-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-frame div { background: #f4f5f7; border-radius: 10px; padding: 10px; }
.lp-frame .ours { background: #f3ecff; }
.lp-frame small { display: block; color: #6f7785; font-size: 11px; }
.lp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-fade { height: 60px; border-radius: 10px; background: linear-gradient(180deg, #e6d9ff, #fff); display: grid; place-items: center; color: #6f7785; margin-bottom: 8px; }
.lp-ghost { width: 100%; height: 40px; border-radius: 999px; border: 0; background: #fee500; font-weight: 700; }
.lp-video { height: 120px; background: #15181d; color: #fff; border-radius: 10px; display: grid; place-items: center; }
.lp-point { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.lp-point span { width: 22px; height: 22px; border-radius: 50%; background: #6600ff; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.lp-empty { color: #6f7785; background: #f4f5f7; border-radius: 10px; padding: 10px; font-size: 12px; }
.lp-x { text-decoration: line-through; color: #9aa1ad; margin: 2px 0; }
.lp-o { font-weight: 700; color: #4600b0; margin-top: 4px; }
.lp-qa { background: #f4f5f7; border-radius: 10px; padding: 8px 10px; margin: 4px 0; }
.lp-qa summary { font-weight: 600; cursor: pointer; }
.lp-qa p { margin: 6px 0 0; color: #4f5663; }
.lp-safe div { margin: 4px 0; }
.lp-gift { margin: 3px 0; }
.lp-pick { display: grid; gap: 6px; }
.lp-pick div { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px #dfe2e7; }
.lp-pick .on { box-shadow: inset 0 0 0 2px #6600ff; }
.lp-price div { display: flex; justify-content: space-between; margin: 3px 0; }
.lp-price .tot { font-size: 15px; border-top: 1px solid #eceef1; padding-top: 6px; }
.lp-timer { display: flex; justify-content: space-between; background: #15181d; color: #fff; }
.lp-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 14px; background: #fff; box-shadow: 0 -1px 0 #eceef1; }

/* 단계 막대 (블로그) */
.steps-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.sb { display: flex; align-items: center; gap: var(--sp-2); border: 0; background: var(--surface-sunken); color: var(--text-2); height: 36px; padding: 0 var(--sp-4) 0 6px; border-radius: var(--r-pill); font-weight: var(--fw-semibold); cursor: pointer; }
.sb span { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 12px; }
.sb.on { background: var(--ink); color: var(--text-on-ink); }
.sb.on span { color: var(--ink); }
.sb.done span { background: var(--ok); color: #fff; }
.blog-out { white-space: pre-wrap; word-break: keep-all; font-family: var(--font); font-size: var(--fs-md); line-height: 1.8; background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-4); margin: 0; max-height: 560px; overflow: auto; }
.tool-row { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: inset 0 0 0 1px var(--line); }
.tool-row + .tool-row { margin-top: var(--sp-2); }
.tool-row b { font-size: var(--fs-md); }
.tool-row p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.tool-from { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--brand-text); }
.card .tool-row { background: var(--surface-2); box-shadow: none; }
@media (max-width: 767px) { .tool-row { flex-wrap: wrap; } }
.cp-ai { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); display: flex; align-items: center; gap: var(--sp-2); }
.cp-ai.is-loading { background: var(--brand-soft); color: var(--brand-text); }
.cp-ai.is-done { background: var(--ok-soft); color: var(--green-700); }
.cp-ai.is-fail { background: var(--warn-soft); color: var(--text-2); }
.cp-ai .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: onfPulse 1s ease-in-out infinite; flex: none; }
@keyframes onfPulse { 50% { opacity: 0.2; } }

/* ── 마케팅 알아 두기 (1028) ── */
.block-no.sm { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; display: grid; place-items: center; font-weight: var(--fw-bold); flex: none; }
.scene { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.scene li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); font-size: var(--fs-sm); }
.scene li b { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.pushpull { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.pushpull > div { border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.terms { margin: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.terms div { display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.terms dt { font-weight: var(--fw-semibold); color: var(--text-2); }
.terms dd { margin: 0; }
/* 판매 전략 (관리자) */
.st-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.st-row:last-child { border-bottom: 0; }
.st-row b { font-size: var(--fs-md); }
.st-row p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.st-words { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.st-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.st-map > div { border-radius: var(--r-lg); padding: var(--sp-4); }
.st-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.st-list li { display: flex; justify-content: space-between; gap: var(--sp-2); }
.st-list span { color: var(--text-2); }
.st-map ol { margin: var(--sp-2) 0 0; padding-left: 18px; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) {
  .st-row { grid-template-columns: 1fr; gap: 4px; }
  .st-map { grid-template-columns: 1fr; }
  .pushpull { grid-template-columns: 1fr; }
}

/* 기능 알아 두기 (1028) */
.tips { background: var(--brand-soft); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.tips summary { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand-text); list-style: none; }
.tips summary::-webkit-details-marker { display: none; }
.tips summary svg { width: 16px; height: 16px; flex: none; }
.tips ul { margin: var(--sp-3) 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); }
.tips .tool-from { display: block; margin-top: 2px; }
.stage-tip { display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text); max-width: 640px; }
.stage-tip svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand); }

/* 도구 작업 화면 (1028) */
.tool-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.wb-verdict { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-4); }
.wb-sec { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.wb-sec ol { margin: var(--sp-2) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-md); }
.wb-sec > .body-2 { margin: var(--sp-2) 0 0; }
.md-table-wrap { margin: var(--sp-3) 0 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.md-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 14px); line-height: 1.5; }
.md-table th, .md-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; word-break: keep-all; }
.md-table th { background: var(--surface-2, var(--brand-soft)); font-weight: 700; white-space: nowrap; }
.md-table tr:last-child td { border-bottom: 0; }
.md-li::before { content: '· '; }
.wb-table { display: flex; flex-direction: column; }
.wb-table > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.wb-table > div:last-child { border-bottom: 0; }
.dm-bubble { background: var(--surface-2); border-radius: 16px 16px 16px 4px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); max-width: 320px; word-break: break-all; }
.voc-list { display: flex; flex-direction: column; margin-top: var(--sp-3); }
.voc-row { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); align-items: start; }
.voc-row p { margin: 0; font-size: var(--fs-sm); }
.voc-row .caption { grid-column: 2; }
.audit { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
.audit > div { display: grid; grid-template-columns: 28px 64px 1fr 80px 32px; gap: var(--sp-3); align-items: center; padding: 6px 8px; border-radius: var(--r-md); font-size: var(--fs-sm); }
.audit > div.is-red { background: var(--danger-soft, #fde8e8); }
.audit i { display: block; height: 6px; border-radius: 3px; background: var(--surface-sunken); position: relative; overflow: hidden; }
.audit i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--brand); border-radius: 3px; }
@media (max-width: 720px) { .audit > div { grid-template-columns: 28px 1fr 44px 28px; } .audit > div .caption { display: none; } }
@media print { .sidebar, .tabbar, .btn, .tips { display: none !important; } .main { padding: 0; } }

.lp-steps { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lp-note { margin: 8px 0 0; font-size: 11px; color: #8b95a1; }
.meet { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.meet a { border-radius: var(--r-md); padding: var(--sp-3); background: var(--surface-2); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 2px; }
.meet a.on { background: var(--brand-soft); color: var(--brand-text); }
.meet a b { font-size: var(--fs-sm); }
@media (max-width: 720px) { .meet { grid-template-columns: repeat(2, 1fr); } }

.audit-offer { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; }
@media (max-width: 720px) { .audit-offer { flex-direction: column; align-items: stretch; } }

.audit-offer + .plans { margin-top: var(--sp-4); }
.plans + .card { margin-top: var(--sp-4); }

/* ── 계정 화면 (1028) ── */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); }
.auth-top .logo { display: block; flex: none; }
.auth-top .logo img { height: 20px; }
@media (max-width: 480px) { .auth-top nav .hide-sm { display: none; } .auth-top .btn-sm { padding: 0 10px; } }
.auth-top nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.auth-box { width: 100%; max-width: 420px; margin: var(--sp-8) auto; padding: 0 var(--sp-4); flex: 1; }
.auth-wide { width: 100%; max-width: 1040px; margin: var(--sp-6) auto; padding: 0 var(--sp-4); flex: 1; }
.auth-foot { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; padding: var(--sp-6) var(--sp-4); font-size: var(--fs-xs); color: var(--text-3); }
.auth-foot a { color: var(--text-2); }
.auth-note { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
.btn-kakao { background: #FEE500; color: rgba(0,0,0,.85); border: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; height: 48px; }
.or { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--text-3); font-size: var(--fs-xs); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pw { display: flex; gap: 6px; }
.pw .input { flex: 1; }
.agree { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-4); }
.ck { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.ck input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand); flex: none; }
.ck.all { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ck a { text-decoration: underline; }
.hero { text-align: center; padding: var(--sp-10) 0 var(--sp-8); }
.hero-h { font-size: clamp(26px, 5vw, 40px); line-height: 1.3; letter-spacing: -0.02em; margin: var(--sp-3) 0; font-weight: var(--fw-bold); }
.body-1 { font-size: var(--fs-lg); color: var(--text-2); max-width: 560px; margin: 0 auto; }
.w-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.w-feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); padding: var(--sp-6) 0 var(--sp-8); }
@media (max-width: 720px) { .w-grid3, .w-feat { grid-template-columns: 1fr; } .hero { padding: var(--sp-6) 0; } .auth-top { padding: var(--sp-3) var(--sp-4); } }
.who { margin: 0 0 var(--sp-4); }
.who details { position: relative; }
.who summary { display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none; padding: 8px; border-radius: var(--r-md); background: var(--surface-2); }
.who summary::-webkit-details-marker { display: none; }
.who-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; font-weight: var(--fw-bold); flex: none; }
.who-txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); }
.who-txt b, .who-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-txt small { color: var(--text-3); font-size: var(--fs-xs); }
.who-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: 6px; z-index: 30; display: flex; flex-direction: column; }
.who-menu a, .who-menu button { text-align: left; padding: 10px; border-radius: 8px; font-size: var(--fs-sm); background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; }
.who-menu a:hover, .who-menu button:hover { background: var(--surface-2); }
.trial { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--brand-text); padding: 0 8px; }
.viewer-bar { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.is-viewer .feat-panel input, .is-viewer .feat-panel textarea, .is-viewer .feat-panel button, .is-viewer .switch, .is-viewer [data-copy], .is-viewer [data-act="copy-gen"], .is-viewer [data-act="copy-review"], .is-viewer [data-act="redraft"] { pointer-events: none; opacity: .5; }
.acct-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.acct-links a { display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-semibold); }
@media (max-width: 720px) { .acct-links { grid-template-columns: 1fr; } }
.mem { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; font-size: var(--fs-sm); }
.mem > div { min-width: 0; word-break: break-all; }
.mem select { width: auto; height: 36px; }
.inv { display: flex; gap: 8px; margin-top: var(--sp-4); flex-wrap: wrap; }
.inv .input { flex: 1; min-width: 160px; }
.inv select { flex: 0 0 auto; width: auto; min-width: 0; }
.danger-box { background: var(--danger-soft); border-radius: var(--r-md); padding: var(--sp-4); }
.btn-danger { background: var(--danger); color: #fff; border: 0; }
.mem select.input { min-width: 104px; height: 40px; padding: 0 28px 0 12px; font-size: var(--fs-sm); }
.inv select.input { flex: 0 0 120px; }
.more-tools summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand-text); padding: var(--sp-3) 0; }

/* AI 검색 노출 관리 (1028) */
.geo-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--sp-4); scrollbar-width: none; }
.geo-tabs::-webkit-scrollbar { display: none; }
.geo-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 6px; border-radius: var(--r-pill); border: 0; background: var(--surface); box-shadow: var(--shadow-1); font: inherit; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.geo-tab b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); font-size: 12px; }
.geo-tab.on { background: var(--ink); color: #fff; }
.geo-tab.on b { background: rgba(255,255,255,.2); color: #fff; }
.geo-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--line); align-items: start; }
.geo-q { min-width: 0; font-size: var(--fs-md); }
.geo-res { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; max-width: 200px; }
@media (max-width: 720px) { .geo-row { grid-template-columns: 1fr; } .geo-res { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; max-width: none; } }

.admin-toggle[hidden] { display: none !important; }

/* 소개 화면 (1028 다시) */
.w-hero { text-align: center; padding: var(--sp-10) 0 var(--sp-8); }
.w-sec { padding: var(--sp-10) 0; border-top: 1px solid var(--line); }
.w-h { font-size: clamp(22px, 3.6vw, 28px); line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 var(--sp-3); font-weight: var(--fw-bold); }
.quiz { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: var(--sp-6); margin-top: var(--sp-4); max-width: 560px; }
.quiz-bar { height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; margin-bottom: var(--sp-3); }
.quiz-bar i { display: block; height: 100%; background: var(--brand); }
.quiz-q { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.45; margin: var(--sp-2) 0 var(--sp-4); }
.w-says { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.w-says p { margin: 0; background: var(--surface); border-radius: 18px 18px 18px 4px; padding: var(--sp-4); font-size: var(--fs-lg); box-shadow: var(--shadow-1); }
.w-ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.w-ba > div { background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5); }
.w-ba > div.on { background: var(--brand-soft); }
.w-ba ul { margin: var(--sp-3) 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-md); }
.w-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); margin-top: var(--sp-4); }
.w-shot { margin: 0; }
.w-shot img { width: 100%; max-width: 420px; display: block; border-radius: var(--r-lg); box-shadow: var(--shadow-2); background: var(--surface); }
.w-shot figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
.w-shot figcaption b { display: block; color: var(--text); font-size: var(--fs-md); margin-bottom: 2px; }
.w-rules { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.w-rules > div { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-3); align-items: start; background: var(--surface); border-radius: var(--r-md); padding: var(--sp-4); }
.w-rules p { margin: 0; font-size: var(--fs-md); }
.w-cmp { display: flex; flex-direction: column; margin-top: var(--sp-4); background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-5); }
.w-cmp > div { display: grid; grid-template-columns: 1fr auto 24px; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.w-cmp > div:last-child { border-bottom: 0; }
.w-cmp small { color: var(--text-3); font-size: var(--fs-xs); }
.w-cmp b { color: var(--ok); }
.w-faq details { background: var(--surface); border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-2); }
.w-faq summary { cursor: pointer; font-weight: var(--fw-semibold); }
.w-faq p { margin: var(--sp-2) 0 0; color: var(--text-2); font-size: var(--fs-md); }
.w-last { text-align: center; }
@media (max-width: 720px) {
  .w-says, .w-ba, .w-shots { grid-template-columns: 1fr; }
  .w-rules > div { grid-template-columns: 1fr; }
  .w-cmp > div { grid-template-columns: 1fr 24px; } .w-cmp small { grid-column: 1; }
  .w-sec { padding: var(--sp-8) 0; }
}

/* ── 아정당 디자인 가이드 적용 (1028 사장 「폰트 너무 작아, 아정당 디자인 가이드 가져와, 메인 컬러만 보라」) ──
   글자 크게(본문 16), 섹션 제목 굵게 20~24, 버튼 48 높이에 모서리 12, 보조 버튼은 흰 바탕+테두리,
   고르는 칩은 테두리 알약이고 고르면 보라 테두리+옅은 보라 바탕, 카드는 흰색 20 모서리로 평평하게 */
:root { --focus: var(--purple-500); --lh-normal: 1.6; }
.btn { height: 48px; border-radius: var(--r-md); font-size: var(--fs-md); padding: 0 var(--sp-5); }
.btn-sm { height: 38px; border-radius: 10px; font-size: var(--fs-sm); padding: 0 var(--sp-4); }
.btn-lg { height: 56px; border-radius: 14px; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.btn-soft { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-soft:hover { background: var(--surface-2); }
.btn-ink { font-weight: var(--fw-bold); }
.h1 { font-size: var(--fs-3xl); line-height: 1.4; letter-spacing: -0.5px; }
.h2 { font-size: 22px; line-height: 1.4; }
.h3 { font-size: var(--fs-lg); line-height: 1.45; font-weight: var(--fw-bold); }
.eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand); }
.body-2 { color: var(--text-2); line-height: 1.65; }
.caption { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.55; }
@media (max-width: 767px) { .h1 { font-size: var(--fs-2xl); } .h2 { font-size: 20px; } }
.card { border-radius: var(--r-lg); padding: var(--sp-6); }
.chip { height: 26px; padding: 0 10px; font-size: var(--fs-xs); border-radius: 6px; }
.opt { height: 38px; padding: 0 var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); }
.opt[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: var(--fw-bold); }
.input, .textarea { font-size: var(--fs-md); border-radius: var(--r-md); }
.input { height: 52px; }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.num { letter-spacing: -0.5px; }
.nav-item { font-size: var(--fs-md); height: 46px; }
.tabbar a { font-size: 12px; }
/* 소개 화면도 같은 기준 */
.w-h { font-size: clamp(22px, 3vw, 28px); }
.hero-h { font-size: clamp(30px, 5vw, 44px); line-height: 1.32; }
.body-1 { font-size: clamp(17px, 2vw, 19px); line-height: 1.65; }

.nudge.calm { background: var(--brand-soft); }
.nudge.calm .nudge-ico { color: var(--brand); }

/* ── 움직임과 3D (1028 사장 「3D 도형, 날아오는 애니메이션, 노써치 참고, 폴드 플립까지」) ──
   화면을 옮길 때 카드가 아래에서 떠오르고, 첫 화면은 보라 3층 깔때기에 3D 아이콘이 날아와 떠 있는다 */
@keyframes rvUp { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
.rv { opacity: 0; }
.rv.in { animation: rvUp .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--rd, 0ms); }

.e3d { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(40, 0, 110, .14)); }
.choice-ico.has3d, .part-ico.has3d, .conn-ico.has3d { background: linear-gradient(160deg, #fff 0%, var(--surface-sunken) 100%); box-shadow: inset 0 0 0 1px var(--line); }

.w-hero { display: grid; gap: var(--sp-6); align-items: center; }
.w-cta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.w-art { position: relative; width: 100%; max-width: 460px; height: 340px; margin: 0 auto; }
.w-glow { position: absolute; inset: 8% 4%; background: radial-gradient(closest-side, rgba(102, 0, 255, .20), transparent); filter: blur(18px); }
.fz { position: absolute; left: 50%; top: 50%; width: 76%; display: flex; flex-direction: column; align-items: center; gap: 16px; transform: translate(-50%, -50%) perspective(900px) rotateX(16deg); }
.fz-l { position: relative; height: 62px; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; animation: fzDrop .8s cubic-bezier(.16, 1, .3, 1) both; }
.fz-l b { font-size: 14px; font-weight: 600; opacity: .8; }
.fz-l span { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.fz-l.l1 { width: 100%; background: linear-gradient(180deg, #B794FF, #8A4FFF); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 10px 0 #6A2EE0, 0 24px 32px rgba(70, 0, 170, .22); animation-delay: .05s; }
.fz-l.l2 { width: 74%; background: linear-gradient(180deg, #8A4FFF, #6600FF); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 10px 0 #4A00BB, 0 24px 32px rgba(70, 0, 170, .26); animation-delay: .2s; }
.fz-l.l3 { width: 50%; background: linear-gradient(180deg, #6A1EF0, #4400B0); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 10px 0 #2E0080, 0 24px 32px rgba(70, 0, 170, .3); animation-delay: .35s; }
@keyframes fzDrop { from { opacity: 0; transform: translateY(-56px) scale(.92); } to { opacity: 1; transform: none; } }
.fz-tag { position: absolute; right: 0; top: 50%; display: flex; align-items: center; gap: 6px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; color: var(--gray-900, #1F2429); font-size: 14px; font-weight: 700; box-shadow: 0 10px 28px rgba(40, 0, 110, .16); animation: tagPop .6s cubic-bezier(.34, 1.56, .64, 1) 1s both; }
.fz-tag img { width: 22px; height: 22px; }
@keyframes tagPop { from { opacity: 0; transform: translateX(24px) scale(.8); } to { opacity: 1; transform: none; } }
.fly { position: absolute; width: 64px; height: 64px; filter: drop-shadow(0 12px 14px rgba(50, 0, 120, .22)); animation: flyIn .9s cubic-bezier(.16, 1, .3, 1) var(--d) both, bob var(--b, 5s) ease-in-out calc(var(--d) + .9s) infinite; }
.fly.f1 { left: 0; top: 2%; width: 72px; height: 72px; --fx: -90px; --fy: -50px; --fr: -25deg; --d: .45s; }
.fly.f2 { right: 4%; top: 0; --fx: 90px; --fy: -60px; --fr: 25deg; --d: .55s; --b: 6s; }
.fly.f3 { left: 2%; bottom: 10%; width: 58px; height: 58px; --fx: -90px; --fy: 50px; --fr: -18deg; --d: .65s; --b: 5.5s; }
.fly.f4 { right: 8%; bottom: 0; width: 70px; height: 70px; --fx: 90px; --fy: 70px; --fr: 20deg; --d: .75s; --b: 6.5s; }
.fly.f5 { left: 42%; top: -4%; width: 48px; height: 48px; --fx: 0px; --fy: -80px; --fr: 0deg; --d: .85s; --b: 4.5s; }
@keyframes flyIn { from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-10px) rotate(3deg); } }
@media (min-width: 960px) {
  .w-hero { grid-template-columns: 1.08fr .92fr; text-align: left; padding: var(--sp-12) 0 var(--sp-10); }
  .w-hero .eyebrow, .w-hero .body-1, .w-hero .caption { margin-left: 0; }
  .w-cta { justify-content: flex-start; }
}
@media (max-width: 720px) { .w-art { height: 290px; max-width: 380px; } .fz-l { height: 54px; } .fz-l span { font-size: 17px; } }
@media (max-width: 360px) {
  .w-art { height: 250px; } .fz { width: 84%; gap: 12px; } .fz-l { height: 46px; border-radius: 16px; } .fz-l span { font-size: 15px; } .fz-l b { font-size: 12px; }
  .fly { width: 46px; height: 46px; } .fly.f1, .fly.f4 { width: 52px; height: 52px; } .fly.f5 { display: none; }
  .fz-tag { font-size: 13px; padding: 6px 10px 6px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; } .rv.in, .fz-l, .fz-tag, .fly { animation: none !important; }
}

/* 소개 화면 손질: 질문 열기 표시, 규칙 이름표, 실제 화면 틀 */
.w-faq details { padding: var(--sp-5); border-radius: var(--r-lg); }
.w-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); }
.w-faq summary::-webkit-details-marker { display: none; }
.faq-chev { width: 9px; height: 9px; flex: none; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); }
.w-faq details[open] .faq-chev { transform: translateY(2px) rotate(-135deg); }
.w-rules > div .chip { justify-self: start; width: fit-content; }
.w-rules > div { border-radius: var(--r-lg); padding: var(--sp-5); }
.w-shot img { padding: 14px; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(40, 0, 110, .08); }
.w-says p { border-radius: 20px 20px 20px 6px; padding: var(--sp-4) var(--sp-5); }

/* 메인 색만 보라: 켜짐 스위치도 보라 */
.switch input:checked + span { background: var(--brand); }

/* 누르는 곳은 손가락 크기로 (보이는 크기는 그대로, 눌리는 범위만 넓힘) */
.q, .switch, .auth-foot a, .trial { position: relative; }
.q::after { content: ""; position: absolute; inset: -12px; }
.switch::before { content: ""; position: absolute; inset: -9px -4px; }
.auth-foot a { display: inline-block; padding: 10px 4px; }
a.caption[href="#/reset"], .auth-card a.caption, .auth-card .caption a { display: inline-block; padding: 10px 0; }
.trial { padding: 8px; }
.ck input { width: 22px; height: 22px; }

/* 접는 폰(폴드 겉화면 344, 옛 폴드 280, 플립 412, 펼친 폴드 690) */
.card, .page, main, .main { min-width: 0; }
.card-head { flex-wrap: wrap; }
.card-head > * { min-width: 0; }
@media (max-width: 420px) {
  .conn-head { display: grid; grid-template-columns: 44px 1fr; align-items: start; }
  .conn-head > .conn-status, .conn-head > .chip, .conn-head > :last-child:not(div) { grid-column: 2; justify-self: start; }
  .feat-row { gap: var(--sp-2); padding: var(--sp-3); }
}
@media (max-width: 360px) {
  .auth-top { padding: var(--sp-3) var(--sp-4); }
  .auth-top .logo img { height: 16px; }
  .auth-top nav .btn-sm { padding: 0 10px; font-size: 13px; }
  .feat-row > svg:first-child, .feat-row .chev { display: none; }
  .wrap, .container { padding-left: 12px; padding-right: 12px; }
  .w-cta .btn-lg { width: 100%; }
  .phone { border-radius: 28px; padding: 8px; }
}

/* 홈 1~9 번호도 첫 화면 깔때기와 같은 보라 3D 블록 (모으기 옅은 보라, 설득 보라, 유지 짙은 보라) */
.block-row .block-no { color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--slab, #4A00BB), 0 8px 14px rgba(70, 0, 170, .18); margin-bottom: 4px; }
.block-row[data-phase="gather"] .block-no { background: linear-gradient(180deg, #B794FF, #8A4FFF); color: #fff; --slab: #6A2EE0; }
.block-row[data-phase="persuade"] .block-no { background: linear-gradient(180deg, #8A4FFF, #6600FF); color: #fff; --slab: #4A00BB; }
.block-row[data-phase="keep"] .block-no { background: linear-gradient(180deg, #6A1EF0, #4400B0); color: #fff; --slab: #2E0080; }
.block-row { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
@media (hover: hover) { .block-row:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(40, 0, 110, .08); } }
.nudge-ico .e3d { width: 26px; height: 26px; }
@media (max-width: 320px) { .main { padding-left: 12px; padding-right: 12px; } }
/* 좁은 폰에서 칸이 글자 길이만큼 늘어나 화면 밖으로 밀리던 것 */
@media (max-width: 1023px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabbar a { white-space: nowrap; min-width: 0; }
  .help-item { min-width: 0; width: 100%; }
  .help-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 340px) { .tabbar a { font-size: 11px; letter-spacing: -0.3px; } .conn-input { flex-wrap: wrap; } .conn-input .input { flex: 1 1 100%; } .conn-input .btn { flex: 1 1 100%; } }
.show-xs { display: none; }
@media (max-width: 340px) {
  .show-xs { display: inline; } .hide-xs { display: none; }
  .auth-top nav { flex-wrap: nowrap; gap: 2px; }
  .auth-top .logo img { height: 14px; }
}
.fz-tag { right: -2%; top: 47%; }
.w-shot img { transition: filter .3s ease; }
.w-shot img.blurin { filter: blur(20px); }
@media (max-width: 340px) { .auth-top { padding: 12px; gap: 6px; } .auth-top nav .btn-sm { padding: 0 8px; } .auth-top .logo img { height: 13px; } }
@media (max-width: 420px) { .sub-field .conn-input { flex-wrap: wrap; } .sub-field .conn-input .input { flex: 1 1 120px; min-width: 120px; } }
.auth-foot { align-items: center; }
/* 메인 색만 보라: 요금제와 비교표의 체크도 보라 */
.w-cmp b { color: var(--brand); }
.plan li svg { color: var(--brand); }
/* 아이콘이 화면 밖에서 날아올 때 옆으로 밀리지 않게 */
.w-hero { overflow-x: hidden; overflow-x: clip; overflow-y: visible; }
@media (max-width: 380px) { .lb-head { flex-wrap: wrap; } .lb-no { display: none; } .lb-head > span:not(.part-ico):not(.lb-no) { flex: 1 1 140px; min-width: 0; } .lb-tools { margin-left: auto; } }
/* 연동 카드: 빈 오류 줄이 간격을 두 번 먹어 아래가 휑하던 것, 상태 칩은 360 넘으면 제목 오른쪽에 둠 */
.conn .err:empty { display: none; }
.conn-head > div { flex: 1; min-width: 0; }
@media (min-width: 361px) and (max-width: 420px) { .conn-head { display: flex; } }
/* 빈 오류 줄은 자리 차지 안 함(카드 아래가 휑하던 것) */
.err:empty { display: none; }
/* 옆으로 넘기는 단계 탭은 오른쪽 끝을 흐리게 해서 더 있다는 걸 보여 줌 */
@media (max-width: 767px) { .geo-tabs, .wb-steps { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; } }
/* 입력칸 묶음 사이 간격을 한 가지로(라벨이 위 칸에 붙어 보이던 것) */
.field + .field { margin-top: var(--sp-5); }
/* 미리보기 폰: 내용이 짧으면 화면도 짧게(빈 흰 공간이 반 넘게 남던 것) */
.phone-screen { min-height: 0; }
.phone-screen > :last-child { margin-top: auto; }
@media (min-width: 768px) { .phone-screen { min-height: 520px; } }
.field ~ .field { margin-top: var(--sp-5); }
.w-shots { align-items: start; }
.w-shot img { max-width: 100%; height: auto; }
/* 어사이드 검수(1028) 반영: 깔때기 배지가 4~6 설득 글자를 덮던 것, 작은 ? 버튼, 32 높이 탭, 폰에서 잘리던 입력 예시 */
@media (max-width: 420px) { .fz { left: 43%; } .fz-tag { font-size: 13px; padding: 7px 10px; right: 0; } .fz-tag img { display: none; } }
.q { width: 22px; height: 22px; font-size: 12px; }
.seg button { height: 40px; }
@media (max-width: 380px) { .conn-input:not(.sub-field .conn-input) { flex-wrap: wrap; } .conn-input .input { flex: 1 1 100%; } .conn-input > .btn { flex: 1 1 100%; } }
@media (max-width: 300px) { .fz { left: 41%; } .fz-tag { font-size: 12px; padding: 6px 8px; } }

/* 가이드북: 검색, 태그, 3D 아이콘 카드 (1028) */
.g-search { position: relative; margin-bottom: var(--sp-3); }
.g-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.g-search .input { padding-left: 46px; height: 56px; font-size: var(--fs-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.g-search .input:focus { box-shadow: inset 0 0 0 2px var(--brand); }
.g-tagbar { margin-bottom: var(--sp-6); }
.g-sec { margin: var(--sp-6) 0 var(--sp-3); }
.g-card { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); }
.g-ico { width: 48px; height: 48px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(160deg, #fff, var(--surface-sunken)); box-shadow: inset 0 0 0 1px var(--line); }
.g-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g-txt .caption { margin: 0; }
.g-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.g-rows { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); padding: 4px var(--sp-5); }
.g-row { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.g-row:last-child { border-bottom: 0; }
.g-row b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.g-empty { text-align: center; padding: var(--sp-10) var(--sp-6); }
@media (min-width: 900px) { .help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-card { margin: 0; }
.file-pick { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; cursor: pointer; }
.file-pick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick:focus-within .btn { box-shadow: inset 0 0 0 2px var(--brand); }

/* AI 기다리는 동안 3D 요리 장면 (1028) */
.ck3 { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-6) var(--sp-4); background: linear-gradient(180deg, var(--brand-soft), var(--surface)); border-radius: var(--r-lg); margin: var(--sp-3) 0; }
.ck3-stage { position: relative; width: 220px; height: 180px; }
.ck3-stage img { position: absolute; filter: drop-shadow(0 10px 12px rgba(50, 0, 120, .2)); }
.ck3-pan { position: absolute; left: 50%; bottom: 26px; width: 120px; height: 120px; margin-left: -60px; animation: ck3Toss 1.2s ease-in-out infinite; transform-origin: 30% 80%; }
.ck3-pan img { width: 120px; height: 120px; left: 0; top: 0; }
.ck3-fire img { width: 44px; height: 44px; left: 50%; bottom: 0; margin-left: -22px; animation: ck3Flick .5s ease-in-out infinite alternate; }
.ck3-drop img { width: 40px; height: 40px; left: 50%; top: 0; margin-left: -20px; opacity: 0; animation: ck3Drop 2.5s cubic-bezier(.5, 0, .75, 0) infinite; }
.ck3-i1 { --x: -46px; --r: -200deg; animation-delay: 0s !important; }
.ck3-i2 { --x: 34px; --r: 160deg; animation-delay: .5s !important; }
.ck3-i3 { --x: -12px; --r: -120deg; animation-delay: 1s !important; }
.ck3-i4 { --x: 52px; --r: 220deg; animation-delay: 1.5s !important; }
.ck3-i5 { --x: -30px; --r: 90deg; animation-delay: 2s !important; }
.ck3-steam img { width: 46px; height: 46px; left: 50%; top: 34px; opacity: 0; animation: ck3Steam 2.4s ease-out infinite; }
.ck3-s1 { margin-left: -44px; transform: scaleX(-1); }
.ck3-s2 { margin-left: 4px; animation-delay: 1.2s !important; }
@keyframes ck3Drop { 0% { opacity: 0; transform: translate(calc(var(--x) * 1.6), -30px) rotate(0); } 12% { opacity: 1; } 70% { opacity: 1; transform: translate(var(--x), 92px) rotate(var(--r)); } 85%, 100% { opacity: 0; transform: translate(calc(var(--x) * .4), 100px) rotate(var(--r)) scale(.6); } }
@keyframes ck3Toss { 0%, 100% { transform: rotate(0) translateY(0); } 35% { transform: rotate(-9deg) translateY(-8px); } 60% { transform: rotate(4deg) translateY(0); } }
@keyframes ck3Flick { from { transform: scale(.9, .85); opacity: .8; } to { transform: scale(1.05, 1.1); opacity: 1; } }
@keyframes ck3Steam { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-34px) scale(1.15); } }
.ck3-what { margin: var(--sp-2) 0 2px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); }
.ck3-step { margin: 0; font-size: var(--fs-md); color: var(--brand); font-weight: var(--fw-semibold); min-height: 1.5em; }
.ck3-dots { display: flex; gap: 6px; margin: var(--sp-3) 0 var(--sp-2); }
.ck3-dots i { width: 28px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: background .4s; }
.ck3-dots i.on { background: var(--brand); }
.ck3 .caption { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ck3 * { animation: none !important; } .ck3-drop img { opacity: 1; top: 60px; transform: translateX(var(--x)); } .ck3-steam img { opacity: .7; } }

/* 단계 막대: 끝난 단계도 보라(메인 색만 보라) */
.sb.done span { background: var(--brand); color: #fff; }
/* 팬 그림은 손잡이가 오른쪽이라 몸통이 왼쪽에 있다. 몸통을 가운데로, 재료와 김과 불도 몸통 위아래로 */
.ck3-pan { margin-left: -38px; }
.ck3-i1 { --x: -16px; } .ck3-i2 { --x: 12px; } .ck3-i3 { --x: -4px; } .ck3-i4 { --x: 18px; } .ck3-i5 { --x: -10px; }
@keyframes ck3Drop { 0% { opacity: 0; transform: translate(calc(var(--x) * 4), -30px) rotate(0); } 12% { opacity: 1; } 70% { opacity: 1; transform: translate(var(--x), 96px) rotate(var(--r)); } 85%, 100% { opacity: 0; transform: translate(var(--x), 104px) rotate(var(--r)) scale(.5); } }
.ck3-fire img { margin-left: -26px; }
.ck3-steam img { top: 40px; }
.ck3-s1 { margin-left: -40px; } .ck3-s2 { margin-left: -2px; }

/* 시작 전 두 장: 퍼널 개념, 준비물 (1028) */
.ob-funnel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.ob-funnel + .caption { margin-top: var(--sp-6); }
.ob-layer { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; color: #fff; text-align: left; animation: fzDrop .7s cubic-bezier(.16, 1, .3, 1) both; }
.ob-layer b { display: block; font-size: 18px; }
.ob-layer small { display: block; font-size: 14px; opacity: .9; line-height: 1.45; }
.ob-layer.l1 { width: 100%; background: linear-gradient(180deg, #B794FF, #8A4FFF); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #7A3CF0, 0 6px 14px rgba(70,0,170,.1); }
.ob-layer.l2 { width: 88%; background: linear-gradient(180deg, #8A4FFF, #6600FF); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #5200D0, 0 6px 14px rgba(70,0,170,.12); animation-delay: .15s; }
.ob-layer.l3 { width: 76%; background: linear-gradient(180deg, #6A1EF0, #4400B0); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #33008F, 0 6px 14px rgba(70,0,170,.14); animation-delay: .3s; }
.ob-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.92); }
.ob-preps { display: flex; flex-direction: column; gap: var(--sp-2); }
.ob-prep { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 16px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.ob-prep .ob-ico { background: var(--surface-sunken); }
.ob-prep > span:nth-child(2) { flex: 1; min-width: 0; }
.ob-prep b { display: block; font-size: var(--fs-md); }
.ob-prep small { display: block; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .ob-layer { animation: none; } }

/* 처음 둘러보기: 어두운 배경, 밝힌 구멍, 3D 손가락, 말풍선 (1028) */
.tour-blk { position: fixed; z-index: 90; background: rgba(16, 10, 34, .62); transition: all .35s cubic-bezier(.16, 1, .3, 1); }
.tour-hole { position: fixed; z-index: 91; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 3px var(--brand), 0 0 0 9px rgba(102, 0, 255, .25); transition: all .35s cubic-bezier(.16, 1, .3, 1); animation: tourPulse 1.6s ease-in-out infinite; }
@keyframes tourPulse { 50% { box-shadow: 0 0 0 3px var(--brand), 0 0 0 16px rgba(102, 0, 255, 0); } }
.tour-hand { position: fixed; z-index: 93; pointer-events: none; transition: left .35s, top .35s; }
.tour-hand img { display: block; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); animation: tourTap 1s ease-in-out infinite; }
@keyframes tourTap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.tour-tip { position: fixed; z-index: 94; background: #fff; color: #1F2429; border-radius: 18px; padding: 16px 18px 14px; box-shadow: 0 18px 40px rgba(16, 10, 34, .35); animation: tourIn .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tourIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.tour-n { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--brand); }
.tour-t { margin: 0 0 6px; font-size: 18px; font-weight: 800; line-height: 1.4; }
.tour-b { margin: 0; font-size: 15px; line-height: 1.6; color: #575E64; }
.tour-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tour-skip { border: 0; background: none; color: #8C939A; font-size: 14px; padding: 10px 4px; cursor: pointer; }
.tour-hint { font-size: 14px; font-weight: 700; color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-hand img, .tour-tip { animation: none; } }

/* 네이버 블로그에 올린 모습 미리 보기 (1028) */
.nb-frame { margin: 0 auto; background: #fff; color: #222; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(40, 0, 110, .08); overflow: hidden; color-scheme: light; }
.nb-frame.is-phone { max-width: 390px; }
.nb-frame.is-pc { max-width: 760px; }
.nb-top { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 18px; border-bottom: 1px solid #ebebeb; font-weight: 700; font-size: 16px; }
.nb-icons { color: #888; }
.nb-post { padding: 26px 20px 20px; }
.is-pc .nb-post { padding: 40px 56px 28px; }
.nb-cat { margin: 0 0 8px; font-size: 13px; color: #03a94d; font-weight: 600; text-align: center; }
.nb-title { margin: 0 0 18px; font-size: 22px; line-height: 1.45; font-weight: 700; text-align: center; letter-spacing: -0.3px; word-break: keep-all; }
.is-pc .nb-title { font-size: 28px; }
.nb-by { display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid #ebebeb; text-align: left; }
.nb-by b { display: block; font-size: 14px; } .nb-by small { display: block; font-size: 12px; color: #999; }
.nb-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.nb-body { text-align: center; font-size: 16px; line-height: 1.95; word-break: keep-all; }
.is-pc .nb-body { font-size: 17px; }
.nb-p { margin: 0; }
.nb-gap { height: 22px; }
.nb-h { margin: 18px 0 10px; font-size: 19px; font-weight: 700; line-height: 1.5; display: inline-block; padding-bottom: 6px; border-bottom: 2px solid #222; }
.nb-quote { margin: 18px auto; padding: 4px 8px; max-width: 520px; font-size: 18px; font-weight: 700; line-height: 1.6; color: #222; border: 0; }
.nb-qm { display: block; font-size: 34px; line-height: 1; color: #c4c4c4; font-family: Georgia, serif; }
.nb-img { margin: 14px auto; max-width: 520px; aspect-ratio: 4 / 3; border-radius: 6px; background: repeating-linear-gradient(45deg, #f4f4f6, #f4f4f6 12px, #eeeef2 12px, #eeeef2 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; }
.nb-img.is-review { aspect-ratio: 3 / 2; }
.nb-img figcaption { font-size: 14px; color: #666; line-height: 1.5; }
.nb-img small { display: block; font-size: 12px; color: #999; }
.nb-fill { background: #fff3b0; color: #6b5800; padding: 1px 4px; border-radius: 4px; }
.nb-fill[contenteditable] { cursor: text; outline: 1px dashed #d9c25a; outline-offset: 1px; }
.nb-fill[contenteditable]:focus { outline: 2px solid #b39500; background: #fffbe0; color: #222; }
.nb-fill.is-filled { background: transparent; color: inherit; outline: 0; }
.nb-by b { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-more { margin: 10px 0 0; font-weight: 700; }
.nb-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 30px; }
.nb-tags span { font-size: 14px; color: #03a94d; background: #f2fbf5; border-radius: 14px; padding: 4px 10px; }
.nb-react { display: flex; justify-content: space-around; margin-top: 26px; padding-top: 14px; border-top: 1px solid #ebebeb; font-size: 14px; color: #666; }
.nb-wrap .card-head { flex-wrap: wrap; }
/* 카드 바로 아래 버튼 줄이 붙지 않게 */
.card + .row { margin-top: var(--sp-4); }
/* 공개 시안 AI 꺼짐 안내 (1028) */
.off-ai { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: 16px; background: var(--brand-soft); }
.off-ai-t { margin: 0 0 var(--sp-1); font-weight: var(--fw-bold); }
.off-ai .caption { margin: 0; }
.off-ai-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
/* 스크롤 중에는 어두운 막이 늦게 따라오지 않게 (1028 사장 「스크롤 더 부드럽게」) */
.tour-scrolling .tour-blk, .tour-scrolling .tour-hole, .tour-scrolling .tour-hand, .tour-scrolling .tour-tip { transition: none !important; }
/* 목표에서 거꾸로 짜기 (1028) */
.g-wrap { display: flex; flex-direction: column; gap: var(--sp-4); }
.g-wrap .card > .opts { margin-bottom: var(--sp-4); }
.gl { display: flex; flex-direction: column; }
.gl-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.gl-row:first-child { border-top: 0; padding-top: 0; }
.gl-row span { min-width: 0; }
.gl-row small { display: block; font-size: var(--fs-sm); color: var(--text-3, var(--text-2)); margin-top: 2px; }
.gl-row b { font-size: var(--fs-lg, 18px); white-space: nowrap; color: var(--brand); }
.g-plan { display: flex; flex-direction: column; gap: var(--sp-2); }
.g-step { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--surface-sunken); color: inherit; text-decoration: none; }
.g-step b { display: block; }
.g-step small { display: block; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; margin-top: 2px; }
.g-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; }
.goal-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); border-radius: 18px; background: var(--brand-soft); color: inherit; text-decoration: none; }
.goal-card > span { flex: 1; min-width: 0; }
.goal-card b { display: block; font-size: var(--fs-md); }
.goal-card small { display: block; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
.goal-card svg { flex: none; width: 20px; height: 20px; color: var(--brand); }
/* 일꾼 C 1028 손님 지적 고침 */
/* 처음 흐름 개념 그림: 묶음 안에 단계 이름 9개가 다 보이게 */
.ob-nine { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ob-nine i { font-style: normal; font-size: 13px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; white-space: nowrap; }
.ob-nine em { font-style: normal; margin-right: 4px; opacity: .8; }
/* 가이드북: 첫 줄 오른쪽 카드가 16px 내려가던 것(.card + .card 여백), 설명 글자 대비 4.5:1 이상, 결과 없음 그림 크기 */
.help-list > .g-card.card { margin: 0; }
.g-card .caption { color: var(--text-2); }
.g-empty .e3d { display: block; width: 48px; height: 48px; margin: 0 auto var(--sp-3); }
/* 다크 모드 「지금 보는 곳」 같은 초록 칩 글자 대비 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-ok { color: #6ee7a8; background: rgba(23, 178, 106, .2); } }
:root[data-theme="dark"] .chip-ok { color: #6ee7a8; background: rgba(23, 178, 106, .2); }
/* 홈 목표 카드: 그림 40px, 화살표 20px로 고정 */
.goal-card .e3d { width: 40px; height: 40px; flex: none; }
.goal-card > svg { width: 20px !important; height: 20px !important; min-width: 20px; }
/* 일꾼 A 1028 손님 지적 고침: 고객 화면 미리보기, 공개 전 검사, 기능 카드 */
/* 사장이 아직 정하지 않은 칸: 점선 상자, 고객에게는 보이지 않는 표시 */
.pv-blank, .lp-blank { border: 1.5px dashed #c9cdd4; border-radius: 14px; padding: 12px 14px; font-size: 13px; color: #6f7785; background: transparent; }
.lp-blank { margin: 0; }
/* 고객 문구 안 빈칸(○○): 노란 칸 */
.pv-hole { background: #ffe58a; color: #5c4400; border-radius: 4px; padding: 0 3px; font-weight: 700; }
.pv-note { margin: 10px auto 0; max-width: 340px; text-align: center; }
.pv-timer span { display: inline-flex; align-items: baseline; gap: 2px; }
.pv-timer small { font-size: 11px; font-weight: 600; opacity: .8; }
/* 전체 미리보기: 구매 전과 구매 뒤 나누기 */
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 32px; }
.pv-sec-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; }
.pv-divider { display: flex; align-items: center; gap: 12px; margin: 40px 0 24px; color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pv-divider::before, .pv-divider::after { content: ''; flex: 1; border-top: 2px dashed var(--line); }
.pv-stage { scroll-margin-top: 24px; border-radius: 20px; transition: box-shadow .3s; }
.pv-stage.is-flash { box-shadow: 0 0 0 3px var(--brand); }
/* 공개 전 검사 목록 */
.pub-check { border: 1.5px solid var(--warn, #f5a524); }
.pub-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; color: inherit; text-decoration: none; box-shadow: 0 -1px 0 var(--line); }
.pub-row > span:nth-child(2) { flex: 1; min-width: 0; }
.pub-row small { display: block; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.pub-row > svg { flex: none; width: 18px; height: 18px; color: var(--text-3); margin-top: 4px; }
.pub-row .block-no { flex: none; }
/* 기능 카드: 표시는 이름 아래 줄로 (좁은 화면에서 이름이 꺾이지 않게) */
.feat-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.feat-chips:empty { display: none; }
.chip-wait { background: var(--warn-soft); color: var(--text); }
.cp-card.is-wait { opacity: .7; }
@media (max-width: 400px) {
  .feat-row .part-ico { width: 28px; height: 28px; font-size: 14px; }
  .feat-row { gap: 8px; }
}
/* 좁은 화면: 폰 안에 폰 테두리를 또 그리지 않고 꽉 채운다 */
@media (max-width: 600px) {
  .phone { max-width: none; background: none; padding: 0; border-radius: 0; box-shadow: none; }
  .phone-screen { border-radius: 16px; box-shadow: inset 0 0 0 1px #dfe2e7; }
  .phone-bar { display: none; }
  .pv-url { padding-top: 10px; }
  .phone-body { padding: 16px 16px 20px; }
  .pv-note { max-width: none; }
}
.pv-grid .pv-note { display: none; }
.feat-chips .chip { white-space: normal; height: auto; min-height: 22px; line-height: 1.35; }
@media (max-width: 400px) {
  .feat-row .part-ico { display: none; }
  .feat-row .part-name { font-size: 15px; line-height: 1.4; }
}
.pv-miss { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.pv-miss .chip { white-space: nowrap; text-decoration: none; }
/* 히어로 「가장 많이 빠지는 곳」 표가 오른쪽에서 잘리지 않게 (1028 사장 캡처) */
.fz-tag { right: 4%; white-space: nowrap; }
@media (max-width: 420px) { .fz-tag { right: 2%; } }
/* 파일 고르기 칸 바로 밑 붙여 넣기 칸이 딱 붙던 것 (1028 사장 캡처) */
.field + textarea.textarea, .file-pick + textarea.textarea { margin-top: var(--sp-2); }
.field .file-pick { display: flex; margin-top: var(--sp-1); }

/* 저장 표시 (1029 일꾼 A): 화면 구석에 작게 */
.sync-badge { position: fixed; right: 12px; bottom: 12px; z-index: 60; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); color: var(--text-3); background: var(--surface, var(--bg)); border: 1px solid var(--line, rgba(0,0,0,.08)); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.sync-badge.is-on { opacity: 1; transform: none; }
.sync-badge[data-kind="offline"], .sync-badge[data-kind="error"] { color: var(--danger); }
@media (max-width: 760px) { .sync-badge { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* 문의 목록 (1029 일꾼 B): 이름과 연락처는 가려서 보인다 */
.lead-list { display: flex; flex-direction: column; }
.lead-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.lead-row:first-child { border-top: 0; }
.lead-row .grow { flex: 1; min-width: 0; }
.lead-row b { display: block; }
.lead-row small { display: block; color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.lead-row .caption { text-align: right; flex: none; }
.plan-soon { color: var(--text-3, var(--text-2)); list-style: none; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; padding-left: 26px; }
.plan-soon .chip { font-size: 12px; }
/* ── 오메클 상세페이지 빌더 (1029 일꾼 E3) ── 고객 화면 블록 모양은 js/builder.js 의 CSS 하나를 같이 쓴다 */
.om-bar { margin-bottom: var(--sp-4); }
.om-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.om-seg { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3); min-width: 0; }
.om-seg-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.om-meter { height: 6px; border-radius: 6px; background: var(--line-strong); overflow: hidden; margin-bottom: var(--sp-2); }
.om-meter i { display: block; height: 100%; background: var(--brand); border-radius: 6px; transition: width .2s; }
.om-chips { display: flex; flex-direction: column; gap: 4px; }
.om-chip { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 6px; border-radius: 8px; min-width: 0; }
.om-chip > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.om-chip small { color: var(--text-3); font-size: 11px; flex: none; }
.om-chip.is-full small { color: var(--brand); font-weight: 700; }
.om-chip.is-half { background: var(--brand-soft); }
.om-chip button { flex: none; border: 0; border-radius: 6px; padding: 2px 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; background: var(--brand); color: #fff; }
.om-chip.is-half button { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
@media (max-width: 767px) { .om-segs { grid-template-columns: 1fr; } }
.om-tool, .om-start { margin-bottom: var(--sp-4); }
.om-tip { display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; margin-top: 6px; }
.om-tip .btn { flex: none; }
.om-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.om-row { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3) var(--sp-3); transition: box-shadow .15s; }
.om-row.is-empty { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.om-row.is-drag { box-shadow: 0 0 0 2px var(--brand), var(--shadow-3); opacity: .96; position: relative; z-index: 2; }
.om-row.is-flash { animation: om-flash 1s ease; }
@keyframes om-flash { 0% { box-shadow: 0 0 0 3px var(--brand); } 100% { box-shadow: 0 0 0 0 transparent; } }
.om-rhead { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.om-handle { flex: none; width: 32px; height: 36px; border: 0; background: transparent; color: var(--text-3); font-size: 18px; cursor: grab; touch-action: none; border-radius: 8px; }
.om-handle:hover { background: var(--surface); color: var(--text); }
.om-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--surface); flex: none; }
.om-rname { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.om-rname .chip { font-size: 11px; }
.om-shapes { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px 40px; }
.om-shapes button { border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.om-shapes button[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: none; font-weight: 700; }
.om-paper { background: #f8f6fd; color: #15181d; border-radius: 14px; padding: 10px; color-scheme: light; margin-top: 6px; }
.om-paper .om-quote { text-decoration: none; }
.om-ed { outline: none; border-radius: 6px; cursor: text; min-width: 3em; box-shadow: inset 0 -1.5px 0 #c9b3ff; padding: 0 2px; }
.om-ed:focus { box-shadow: 0 0 0 2px #6600ff; background: #fff; }
.om-ed:empty { display: inline-block; border: 1.5px dashed #c9cdd4; padding: 2px 8px; box-shadow: none; }
.om-ed:empty::before { content: attr(data-ph); color: #8b95a1; font-weight: 500; font-size: 14px; }
.om-ml { display: block; white-space: pre-line; padding: 6px 8px; background: #fff; border-radius: 10px; min-height: 2.4em; }
.om-ml:empty { display: block; }
.om-numf { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #4f5663; }
.om-num { width: 110px; height: 36px; border: 1px solid #d5d9df; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 15px; background: #fff; color: #15181d; text-align: right; }
.om-mini { border: 0; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 700; background: #6600ff; color: #fff; cursor: pointer; }
.om-cells { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.om-cellbtn { border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; background: #fff; color: #4f5663; box-shadow: inset 0 0 0 1px #dfe2e7; }
.om-cellbtn[aria-pressed="true"] { background: #15181d; color: #fff; box-shadow: none; }
.om-root { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 80px; background: #f8f6fd; }
.om-root .om { font-size: 14px; padding: 14px; }
.om-root .om-title { font-size: 20px; }
.om-root .om-big { font-size: 21px; }
.om-root .om-quote { font-size: 17px; }
.om-root .om-strong, .om-root .om-say { font-size: 15px; }
.om-root .om-h { font-size: 15px; }
.om-root .om-two > div, .om-root .om-flip > div { padding: 10px; }
.om-root .om-numrow b { font-size: 22px; }
.phone-screen > .om-barbtn { position: absolute; left: 0; right: 0; bottom: 0; }
.om-wiz { max-width: 720px; }
.om-wnav { justify-content: space-between; margin-top: var(--sp-4); }
.om-inv { display: grid; gap: var(--sp-3); }
.om-invc { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3); }
.om-invi { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface); border-radius: 10px; padding: 6px 6px 6px 12px; margin-bottom: 4px; font-size: 14px; overflow-wrap: anywhere; }
.om-invi small { color: var(--text-3); }
.om-invadd { display: flex; gap: 6px; }
.om-invadd .input { flex: 1; min-width: 0; }
/* ── 광고 소재 봇 #/ads (1029 일꾼 E2, js/admaker.js) ── */
.adm { min-width: 0; }
.adm-tabs { margin: 0 0 var(--sp-4); overflow-x: auto; max-width: 100%; }
.adm-tabs a { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-4); border-radius: var(--r-pill); font-weight: var(--fw-semibold); color: var(--text-2); font-size: var(--fs-sm); }
.adm-tabs a[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.adm-fact { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.adm-fact .adm-src, .adm-fact .adm-lockmsg { grid-column: 1 / -1; margin: -2px 0 0; }
.adm-fact.is-lock .input:first-child { box-shadow: inset 0 0 0 1.5px var(--warn); }
.adm-fact .adm-lockmsg { color: var(--danger-text); }
.adm-q { background: var(--brand-soft); color: var(--brand-text); border-radius: 10px; padding: 8px 12px; }
.adm-cand { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.adm-cand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.adm-cand-row .btn { flex: none; }
.adm-next { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; margin: var(--sp-4) 0; }
.adm-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.adm-who-b { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 0; border-radius: var(--r-md, 14px); padding: var(--sp-4); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line-strong); min-width: 0; }
.adm-who-b b { font-size: 28px; line-height: 1; color: var(--brand); }
.adm-who-b .h3 { margin: 0; }
.adm-who-b[aria-pressed="true"] { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.adm-stagehead { display: grid; grid-template-columns: 120px repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding: 0 4px 6px; }
.adm-board { display: flex; flex-direction: column; gap: var(--sp-3); }
.adm-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-2); align-items: stretch; }
.adm-row-h { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 4px; }
.adm-row-h b { font-size: 18px; }
.adm-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.adm-cell { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border-radius: var(--r-md, 14px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); text-decoration: none; min-width: 0; }
.adm-cell:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.adm-cell-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adm-cell .caption { margin: 0; }
.adm-cell > .chip { align-self: flex-start; }
.adm-cell.is-rec { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); }
.adm-cell.is-dim { opacity: .62; }
.adm-cell.is-lock { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); border: 0; color: var(--text-3); }
.adm-open { color: var(--brand-text); }
.adm-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.adm-var { display: flex; flex-direction: column; gap: 8px; text-align: left; border: 0; border-radius: var(--r-md, 14px); padding: var(--sp-3); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-strong); min-width: 0; }
.adm-var.is-on { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); }
.adm-var-h { font-size: 19px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.adm-var-cta { align-self: flex-start; background: var(--text); color: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.adm-why { color: var(--text-2); }
.adm-ck { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: 6px; }
.adm-ck li { display: flex; gap: 8px; align-items: flex-start; }
.adm-ck li .chip { flex: none; }
.adm-ck li .body-2 { margin: 0; overflow-wrap: anywhere; }
.adm-up { cursor: pointer; }
.adm-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.adm-tpl { display: flex; flex-direction: column; gap: 6px; border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; min-width: 0; }
.adm-tpl .adm-thumb { box-shadow: 0 0 0 1px var(--line-strong); }
.adm-tpl:hover .adm-thumb { box-shadow: 0 0 0 2px var(--brand); }
.adm-tpl.is-lock { cursor: default; }
.adm-tpl-lock { aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-3); font-size: 13px; box-shadow: inset 0 0 0 1.5px var(--line); }
.adm-thumb { width: 100%; border-radius: 10px; overflow: hidden; background: var(--surface-2); position: relative; }
.adm-thumb > * { max-width: 100%; }
.adm-doc { position: relative; overflow: hidden; color-scheme: light; }
.adm-doc mark { background: #FFE45C; color: #111; padding: 0 .1em; border-radius: .12em; }
.adm-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.adm-ad { margin: 0; min-width: 0; }
.adm-ad-pic { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.adm-ad-act { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.adm-dup { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.adm-dup .input { height: 40px; }
.adm-home { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); text-decoration: none; color: var(--text); }
.adm-home .btn { flex: none; }
@media (max-width: 767px) {
  .adm-who { grid-template-columns: 1fr; }
  .adm-stagehead { display: none; }
  .adm-row { grid-template-columns: 1fr; }
  .adm-row-h { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; margin-top: var(--sp-2); }
  .adm-cells { grid-template-columns: 1fr; }
  .adm-fact { grid-template-columns: minmax(0, 1fr) 76px; }
  .adm-fact .btn { grid-column: 1 / -1; justify-self: start; }
  .adm-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-home { flex-direction: column; align-items: flex-start; }
}

/* 1029 일꾼 F2: 공개 화면과 같은 미리보기, 빠지는 단계 표시, 홈 지금 할 일, 도구 추천, AI 기다림 */
.pv-out { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, #f3f4f6); color: var(--text-2); font-size: 14px; }
.phone.is-out { opacity: .55; }
.pv-live { margin-bottom: 24px; }
.pv-frame { width: 100%; max-width: 390px; margin: 0 auto; height: 720px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; }
.pv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.now-card { margin-bottom: 20px; }
.now-card .now-t { margin: 0 0 4px; }
.now-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tools-pick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tools-pick a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; color: inherit; background: var(--surface, #fff); min-width: 0; }
.tools-pick a b { font-size: 15px; }
.tools-pick a small { color: var(--text-2); font-size: 13px; }
.ck3-time { margin: 4px 0 0; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ck3-cancel { margin-top: 8px; }
.cp-from { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft, #f3ecff); font-size: 14px; color: var(--text); }
.nb-fill.is-filled { background: #fff6c2; border-bottom: 1px dashed #c9a400; }
.nb-lock { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.ck3-cancel[hidden], .ck3-line [hidden] { display: none !important; }
/* 문의 경로 (1029) */
.src-list { display: flex; flex-direction: column; }
.src-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 56px; gap: var(--sp-2); align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.src-row:first-child { border-top: 0; }
.src-row b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-rate { text-align: right; font-weight: 700; color: var(--brand); }
@media (max-width: 380px) { .src-row { grid-template-columns: minmax(0, 1fr) auto; } .src-row span:nth-of-type(1) { display: none; } }
/* 280px 폴드에서 광고 소재 단계 탭이 넘치던 것 (1029) */
.adm-tabs { display: flex; width: 100%; box-sizing: border-box; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs a { flex: none; }
@media (max-width: 320px) { .adm-tabs a { padding: 0 var(--sp-3); } }
@media (max-width: 340px) { #root .card .btn { white-space: normal; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; text-align: center; max-width: 100%; } }
/* 카드 바로 뒤에 붙던 것(1029 사장 「붙어있는게 너무 많아」): 카드를 감싼 칸(#ba 개선 전후 비교), 12칸 판 머리, 도구 찾기 칸 */
#root .card + :is(div, section):not(.card):has(> .card:first-child),
#root .card + .adm-stagehead, #root .card + .adm-board, #root .card + .field { margin-top: var(--sp-4); }
@media (max-width: 767px) { #root .card + .adm-stagehead + .adm-board { margin-top: var(--sp-4); } }
/* 신청자 4일 연락, 상담 앞단계 자동화 (1030, js/drip.js js/consult.js js/msgkit.js) */
.mk-status { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.mk-status .body-2 { margin: 0; flex: 1 1 200px; min-width: 0; }
.mk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-3); align-items: end; }
@media (max-width: 600px) { .mk-grid { grid-template-columns: minmax(0, 1fr); } }
.mk-mat { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.mk-mat:first-of-type { border-top: 0; }
.mk-mat > .label { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mk-tpl, .mk-q { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.mk-tpl textarea { min-height: 112px; height: auto; font-size: var(--fs-sm); line-height: 1.6; }
.mk-warn { color: var(--danger, #d92d20); margin: 6px 0 0; }
.mk-top { padding: 4px 16px 10px; border-bottom: 1px solid #eef0f3; text-align: center; font-size: 14px; }
.mk-body { gap: 12px; background: #f4f6fa; }
.mk-msg { display: flex; flex-direction: column; gap: 4px; }
.mk-bubble { background: #fff; color: #15181d; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; max-width: 100%; box-shadow: 0 1px 2px rgba(20, 20, 40, .06); }
.mk-bubble u { color: #6600ff; }
.mk-person .card-head { flex-wrap: wrap; gap: 8px; }
.mk-person .card-head .h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mk-row { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.mk-row-h { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.mk-row-h .chip { max-width: 100%; white-space: normal; height: auto; min-height: 24px; text-align: left; }
.mk-txt summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); margin-top: 6px; }
.mk-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-3); margin: 6px 0 0; }
.mk-act { margin-top: 8px; }
.mk-stats { margin-top: var(--sp-2); }
.mk-sq { padding: 10px 0; border-bottom: 1px solid #eef0f3; }
.mk-sq .opt { height: 30px; font-size: 13px; }
.mk-fake { height: 36px; border-radius: 10px; background: #f4f6fa; box-shadow: inset 0 0 0 1px #e3e6ec; }
.mk-fake-l { height: 64px; }
.mk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); }
.mk-day { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.mk-day .opt { width: 100%; }
.mk-day .opt[disabled], .mk-full { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.mk-caution { margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.mk-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mk-funnel { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-4); }
.mk-fr { display: grid; grid-template-columns: 72px minmax(0, 1fr) 56px; gap: 4px 10px; align-items: center; }
.mk-fr .caption { grid-column: 2 / -1; margin: -4px 0 0; }
.mk-bar { height: 10px; border-radius: 6px; background: var(--surface-sunken); overflow: hidden; }
.mk-bar i { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.mk-brief .card-head { flex-wrap: wrap; gap: 8px; }
.mk-brief .wb-table > div { flex-wrap: wrap; }
.mk-brief .wb-table b { overflow-wrap: anywhere; text-align: right; }

/* ── 고객 여정 메뉴 (1030 사장 「고객 여정 기반으로」) ── */
.sidebar-foot .nav-item { margin: 0; }
.sidebar-foot { padding: 0; }
/* 계정 칸: 왼쪽은 마이페이지, 오른쪽 꺾쇠는 작업방 바꾸기와 로그아웃 */
.who { margin: 0 0 var(--sp-4); }
.who-bar { position: relative; display: flex; align-items: center; gap: 2px; border-radius: var(--r-md); background: var(--surface-2); }
.who-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.who-me:hover { background: var(--surface-sunken); }
.who .who-more { position: static; flex: none; }
.who .who-more summary { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: none; color: var(--text-2); border-radius: var(--r-md); }
.who .who-more summary:hover { background: var(--surface-sunken); }
.who-sec { margin: 6px 10px 2px; font-size: var(--fs-xs); color: var(--text-3); }
/* 폰 맨 위 줄: 로고와 계정 칸 */
.topbar { display: none; }
@media (max-width: 767px) {
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: calc(var(--sp-2) * -1) 0 var(--sp-4); }
  .topbar .logo { padding: 0; flex: none; }
  .topbar .who { margin: 0; min-width: 0; }
  .topbar .who-txt small, .topbar .trial { display: none; }
  .topbar .who-me { padding: 4px 6px; }
  .topbar .who-ava { width: 28px; height: 28px; font-size: var(--fs-sm); }
  .topbar .who-txt { max-width: 96px; }
  .topbar .who-menu { left: auto; right: 0; min-width: 220px; }
}
@media (max-width: 767px) { .tabbar a { padding: 0 2px; } .tabbar a span { display: block; max-width: 100%; text-align: center; } }
@media (max-width: 340px) { .tabbar a span { font-size: 10px; letter-spacing: -0.5px; } }
/* 신청과 주문 탭 */
.in-tabs { display: flex; gap: var(--sp-1); margin: 0 0 var(--sp-5); border-bottom: 1px solid var(--line); }
.in-tabs a { flex: 0 1 auto; padding: 10px 16px; color: var(--text-2); font-weight: var(--fw-medium); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.in-tabs a[aria-current="page"] { color: var(--text); font-weight: var(--fw-bold); border-bottom-color: var(--brand); }
/* 홈 */
.now-url { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-sunken); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.home-stats { margin-bottom: var(--sp-5); }
.home-stats .stat { text-decoration: none; color: inherit; display: block; }
@media (max-width: 767px) { .home-stats .stat:first-child { grid-column: auto; } .home-stats .stat:last-child { grid-column: 1 / -1; } }
.home-recent { margin-bottom: var(--sp-5); }
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 12px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.rc-row:first-of-type { border-top: 0; padding-top: 0; }
.rc-row:last-child { padding-bottom: 0; }
.rc-who { min-width: 0; overflow-wrap: anywhere; }
.rc-side { flex: none; display: flex; align-items: center; gap: 8px; }
.rc-side small { color: var(--text-3); font-size: var(--fs-xs); }
.home-more { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.home-more > * { margin: 0 !important; }
.more-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 16px var(--sp-5); margin-top: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); font-weight: var(--fw-semibold); text-decoration: none; }
.more-line svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
/* 줄 목록: 설정과 사람 모으기 */
.list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 14px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.card > .list-row:first-child, .card > .h2 + .list-row { border-top: 0; }
.card > .list-row:first-child { padding-top: 4px; }
.card > .list-row:last-child { padding-bottom: 4px; }
.list-row > span { min-width: 0; }
.list-row b { display: block; font-weight: var(--fw-semibold); }
.list-row small { display: block; color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.list-row > svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.list-row .btn { flex: none; }
.grow-link { margin-bottom: var(--sp-4); }
.grow-link .h2 { margin: 0; }
/* 단계 화면: 추천 기능과 접기 */
.rec-card { margin-bottom: var(--sp-4); }
.more-feats { margin-bottom: var(--sp-4); }
.more-feats > summary { display: flex; align-items: center; gap: var(--sp-2); padding: 16px var(--sp-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer; list-style: none; }
.more-feats > summary::-webkit-details-marker { display: none; }
.more-feats > summary .more-t { font-weight: var(--fw-semibold); }
.more-feats > summary .caption { margin-left: auto; text-align: right; }
.more-feats > summary svg { width: 18px; height: 18px; color: var(--text-3); flex: none; transition: transform .15s; }
.more-feats[open] > summary svg { transform: rotate(90deg); }
.more-feats[open] > summary { margin-bottom: var(--sp-4); }
/* 처음 흐름 */
.ob-kinds { margin-top: var(--sp-4); }
.solo-first { max-width: 560px; }
.first-frame iframe { width: 100%; height: min(60vh, 560px); border: 0; display: block; }
.solo-first .solo-foot { margin-top: 0; padding-top: var(--sp-5); }
/* 소개 화면 */
.w-steps { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.w-steps li { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.w-no { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); font-weight: var(--fw-bold); }
.w-steps b { display: block; }
.w-steps small { display: block; color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.w-plans { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.w-plan { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-3); align-items: baseline; padding: var(--sp-4) var(--sp-5); background: var(--surface); border-radius: var(--r-lg); border: 1px solid transparent; color: inherit; text-decoration: none; }
.w-plan.is-main { border-color: var(--brand); }
.w-plan small { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-sm); }
.w-price { font-weight: var(--fw-bold); white-space: nowrap; }
@media (min-width: 768px) { .w-steps, .w-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .w-steps li { flex-direction: column; } }
.ops-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.first-frame { height: auto; }
.more-feats > summary { flex-wrap: wrap; }
.more-feats > summary .more-t { white-space: nowrap; }
@media (max-width: 340px) { .topbar .who-txt { display: none; } .more-feats > summary .caption { order: 3; flex: 1 1 100%; margin: 0; text-align: left; } .more-feats > summary svg { margin-left: auto; } }
/* 소개 화면을 짧게: 폰에서는 그림을 빼고 줄을 한 줄씩 */
.w-cmp > div { grid-template-columns: 1fr auto 24px; padding: 10px 0; }
.w-cmp small { grid-column: auto; }
@media (max-width: 767px) {
  .w-art { display: none; }
  .w-hero { padding: var(--sp-6) 0 var(--sp-5); }
  .w-sec { padding: var(--sp-6) 0; }
  .w-sec .w-h { margin-bottom: 0; }
  .w-steps { gap: var(--sp-2); margin-top: var(--sp-3); }
  .w-steps li { padding: 10px var(--sp-4); align-items: center; }
  .w-plans { gap: var(--sp-2); margin-top: var(--sp-3); }
  .w-plan { padding: 12px var(--sp-4); }
  .w-who { display: none; }
  .w-cmp { margin-top: var(--sp-3); }
  .w-cmp > div { font-size: var(--fs-sm); gap: var(--sp-2); }
  .w-faq { margin-top: var(--sp-3); }
}
@media (max-width: 340px) { .w-cmp > div { grid-template-columns: 1fr 24px; } .w-cmp small { display: none; } }
@media (min-width: 768px) {
  .w-hero { padding: var(--sp-8) 0 var(--sp-6); }
  .w-sec { padding: var(--sp-6) 0; }
  .w-art { height: 280px; }
  .w-steps li { padding: var(--sp-4); }
}
.card + .goal-card, .goal-card + .card, .card + .adm-home { margin-top: var(--sp-4); }
@media (min-width: 768px) {
  .w-steps li { flex-direction: row; }
  .w-cmp { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  .w-cmp > div:nth-last-child(2) { border-bottom: 0; }
  .w-faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); align-items: start; }
  .w-faq details { margin: 0; }
  .w-last { padding-bottom: 0; }
  .auth-foot { margin-top: var(--sp-2); }
}
@media (min-width: 768px) { .w-last .caption { display: none; } }
.in-tabs a { white-space: nowrap; }
@media (max-width: 340px) { .in-tabs { gap: 0; } .in-tabs a { padding: 10px 10px; } .lb-tabs button { padding-left: 8px; padding-right: 8px; word-break: keep-all; } }
/* 폰 홈 숫자 3칸은 한 줄로(1031 눈 검사: 2칸+1칸이 어색) */
@media (max-width: 767px) { .home-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); } .home-stats .stat, .home-stats .stat:first-child, .home-stats .stat:last-child { grid-column: auto; padding: var(--sp-3); min-width: 0; } .home-stats .stat .num { font-size: var(--fs-lg); word-break: keep-all; overflow-wrap: anywhere; } }

/* 쉬운 시작과 매일 홈 (1031) */
.ob-one { font-size: var(--fs-md); min-height: 148px; width: 100%; box-sizing: border-box; }
.ob-err { margin: var(--sp-2) 0 0; color: var(--danger-text); font-size: var(--fs-sm); }
.ob-note { margin: 0 0 var(--sp-3); }
.ob-more summary { cursor: pointer; }
.ob-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-3) 0 0; }
.linkish { background: none; border: 0; padding: 8px 4px; color: var(--text-2); font: inherit; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:disabled { opacity: .5; cursor: default; }
.solo-confirm .opts { flex-wrap: wrap; }
.ez-link { margin-bottom: var(--sp-4); }
.ez-posts { display: flex; flex-direction: column; gap: var(--sp-3); }
.ez-post .card-head { flex-wrap: wrap; gap: 4px var(--sp-2); }
.ez-body { margin: 0; padding: 12px; border-radius: var(--r-md); background: var(--surface-sunken); font: inherit; font-size: var(--fs-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.ez-tagged { overflow-wrap: anywhere; }
.ez-rows { display: flex; flex-direction: column; }
.ez-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ez-row:first-child { border-top: 0; padding-top: 0; }
.ez-row > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ez-tick { display: inline-flex; width: 18px; height: 18px; color: var(--brand-text); }
.ez-say { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: var(--tracking-tight); }
.ez-ms { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); }
.ez-ms summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; list-style: none; }
.ez-ms summary::-webkit-details-marker { display: none; }
.ez-dots { display: inline-flex; gap: 3px; }
.ez-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; }
.ez-dots i.on { background: var(--brand); }
.ez-ms-t { font-weight: var(--fw-semibold); color: var(--text); }
.ez-ms-list { list-style: none; margin: 8px 0 0; padding: 8px 12px; background: var(--surface-sunken); border-radius: var(--r-md); }
.ez-ms-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; color: var(--text-3); }
.ez-ms-list li.on { color: var(--text); }
.ez-ms-list small { color: var(--text-3); font-size: var(--fs-xs); flex: none; }
.ez-stuck { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--sp-3); margin: 0 0 var(--sp-4); padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-2); font-size: var(--fs-sm); text-decoration: none; }
.ez-stuck b { color: var(--text); font-weight: var(--fw-semibold); }
.ez-lead-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 12px; overflow-wrap: anywhere; }
.ez-lead-top b { font-size: var(--fs-lg); }
.ez-lead-top small { color: var(--text-3); font-size: var(--fs-sm); }
.ez-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ez-acts .btn { max-width: 100%; white-space: normal; height: auto; min-height: 44px; }
.ez-sum { margin-top: 12px; padding: 12px; background: var(--surface-sunken); border-radius: var(--r-md); font-size: var(--fs-sm); }
.ez-sum dl { margin: 0; }
.ez-sum dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.ez-sum dt { color: var(--text-3); }
.ez-sum dd { margin: 0; overflow-wrap: anywhere; }
.ez-quiz { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ez-quiz ul { margin: 4px 0 0; padding-left: 18px; }
.ez-ab { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 12px; background: var(--surface-sunken); border-radius: var(--r-md); }
.ez-ab small { color: var(--text-3); font-size: var(--fs-xs); margin-top: 4px; }
.ez-ab small:first-child { margin-top: 0; }