/* 고객 화면(주문·주문 상태·주문 조회) 공통 스타일. 관리자·법적 고지는 style.css를 쓴다. */
:root {
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e4e8f1;
  --line-2: #d5dbe8;
  --bg: #f4f6fb;
  --card: #ffffff;
  --brand: #3d5afe;
  --brand-ink: #2a44e6;
  --brand-soft: #eef1ff;
  --hero-1: #0a1330;
  --hero-2: #17266b;
  --ok: #0a8f63;
  --ok-soft: #e7f6ef;
  --warn: #a15c07;
  --warn-soft: #fff5e5;
  --err: #d92d20;
  --err-soft: #fef0ef;
  --sale: #e5372b;
  --sale-soft: #fff0ee;
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .07);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, .06), 0 24px 60px rgba(15, 23, 42, .16);
  --wrap: 1120px;
  --flow: 840px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }
.mono, .num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid rgba(61, 90, 254, .45); outline-offset: 2px; }

/* ── 머리글 ─────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top-inner { max-width: var(--wrap); margin: 0 auto; height: 60px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -0.03em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #3d5afe 0%, #7c4dff 100%); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(61, 90, 254, .35); }
.brand-mark svg { width: 16px; height: 16px; }
.top-nav { display: flex; align-items: center; gap: 4px; }
.top-link { color: var(--ink-2); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 10px; }
.top-link:hover { background: var(--bg); text-decoration: none; }
.top-link.kakao { background: #fee500; color: #191600; }
.top-link.kakao:hover { background: #fada0a; }

.dev-banner { max-width: var(--wrap); margin: 12px auto 0; padding: 10px 16px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; }
.wrap-pad { padding: 0 20px; }

/* ── 첫 화면 ─────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(124, 77, 255, .45), transparent 60%),
    radial-gradient(700px 380px at 0% 110%, rgba(61, 90, 254, .45), transparent 60%),
    linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 100%);
}
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 75%); pointer-events: none; }
.hero-inner > * { min-width: 0; }
.hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 56px 20px 64px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #c9d4ff; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 0 0 rgba(62, 224, 143, .6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(62, 224, 143, .55); } 70% { box-shadow: 0 0 0 8px rgba(62, 224, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 224, 143, 0); } }
.hero h1 { margin: 18px 0 14px; font-size: 46px; line-height: 1.2; font-weight: 800; letter-spacing: -0.04em; }
.hero h1 .line { display: block; }
.hero h1 b { font-weight: 800; background: linear-gradient(90deg, #9fb6ff, #d3b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin: 0 0 26px; font-size: 17px; color: rgba(255, 255, 255, .78); max-width: 560px; }

.link-box { background: #fff; border-radius: var(--r-lg); padding: 8px; display: flex; gap: 8px; align-items: center; box-shadow: 0 20px 50px rgba(5, 10, 40, .35); }
.link-box label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.link-input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; padding: 0 14px; font-size: 16px; color: var(--ink); background: transparent; }
.link-input::placeholder { color: var(--faint); }
.paste-btn { flex: none; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.paste-btn:hover { background: var(--bg); }
.go-btn { flex: none; height: 52px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--brand); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 6px 16px rgba(61, 90, 254, .4); }
.go-btn:hover { background: var(--brand-ink); }
.link-help { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.link-help .sep { opacity: .4; }
.how-copy { color: #c9d4ff; }
.how-copy summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.how-copy summary::-webkit-details-marker { display: none; }
.how-copy[open] { flex-basis: 100%; }
.how-copy ul { margin: 10px 0 0; padding: 14px 16px 14px 32px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); }
.how-copy li + li { margin-top: 4px; }

.target { margin-top: 12px; }
.target:empty { display: none; }
.target-card { background: #fff; color: var(--ink); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 4px; }
.target-card.err { background: var(--err-soft); color: var(--err); font-weight: 600; }
.target-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.target-head .ok-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex: none; }
.target-url { font-size: 13px; color: var(--muted); word-break: break-all; }
.target-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.warn-line { margin-top: 4px; font-size: 13px; color: var(--warn); background: var(--warn-soft); padding: 8px 10px; border-radius: 8px; }

.browse { margin-top: 22px; }
.browse-label { font-size: 13px; color: rgba(255, 255, 255, .6); margin-bottom: 10px; }
.browse-row { display: flex; flex-wrap: wrap; gap: 8px; }
.browse-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-size: 13.5px; font-weight: 600; }
.browse-chip:hover { background: rgba(255, 255, 255, .14); }

.compare-card { background: rgba(255, 255, 255, .97); color: var(--ink); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--shadow-lg); }
.compare-card h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.compare-card .sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.cmp-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.cmp-row:hover .cmp-name { color: var(--brand-ink); }
.cmp-name { font-weight: 700; font-size: 14.5px; }
.cmp-who { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.cmp-price { grid-column: 2; grid-row: 1 / span 2; text-align: right; align-self: center; }
.cmp-price s { display: block; font-size: 12.5px; color: var(--faint); }
.cmp-price strong { font-size: 18px; font-weight: 800; }
.cmp-price .off { margin-left: 6px; font-size: 12.5px; font-weight: 800; color: var(--sale); }
.compare-card .foot { margin: 10px 0 0; font-size: 12px; color: var(--faint); }

/* ── 안심 띠 ─────────────────────────────────────── */
.assure { background: #fff; border-bottom: 1px solid var(--line); }
.assure-inner { max-width: var(--wrap); margin: 0 auto; padding: 18px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.assure-item { display: flex; gap: 12px; align-items: center; }
.assure-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; }
.assure-ico svg { width: 20px; height: 20px; }
.assure-item strong { display: block; font-size: 14.5px; }
.assure-item span { display: block; font-size: 12.5px; color: var(--muted); }

/* ── 주문 흐름 ─────────────────────────────────────── */
.flow { max-width: var(--flow); margin: 0 auto; padding: 36px 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.card-head .hint-right { font-size: 13.5px; color: var(--brand-ink); font-weight: 700; }
.hint { font-size: 13px; color: var(--muted); }
.hint.err, .err-text { color: var(--err); }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 0 -4px 10px; padding-left: 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 8px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.tab:hover { border-color: var(--line-2); }
.tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pico { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.pico svg { width: 14px; height: 14px; }
.tab .pico, .browse-chip .pico { width: 24px; height: 24px; }

.filter-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.filter-row > * { min-width: 0; max-width: 100%; }
.chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; }
.chip-btn { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.chip-btn[aria-pressed="true"] { background: var(--brand-soft); border-color: #c7d0ff; color: var(--brand-ink); }
.search { position: relative; width: 200px; }
.search input { width: 100%; height: 34px; border-radius: 10px; border: 1px solid var(--line); padding: 0 12px 0 32px; font-size: 13.5px; background: #fff; }
.search svg { position: absolute; left: 10px; top: 9px; width: 15px; height: 15px; color: var(--faint); }

.products { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; grid-column: 1 / -1; }
.pcard { position: relative; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pcard:hover { border-color: #c4ccff; box-shadow: 0 8px 22px rgba(61, 90, 254, .1); }
.pcard.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(61, 90, 254, .14); }
.pcard.dim { opacity: .55; }
.pcard.dim:hover { border-color: var(--line); box-shadow: none; }
.pcard-main { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 16px 16px 12px; border-radius: var(--r-lg); }
.pcard-main:disabled { cursor: not-allowed; }
.pcard-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.ptag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: var(--bg); color: var(--ink-2); }
.ptag.korean, .ptag.guarantee, .ptag.ranking { background: #eaf0ff; color: #2443d6; }
.ptag.japan, .ptag.china, .ptag.usa { background: #f3ecff; color: #6b3fd6; }
.ptag.cheap, .ptag.basic, .ptag.global { background: #f1f5f9; color: #475569; }
.ptag.live, .ptag.engage, .ptag.shopping, .ptag.ga4, .ptag.traffic, .ptag.rank { background: #e8f7f1; color: #087a55; }
.ptag.soon { background: #f1f5f9; color: var(--muted); }
.pcard h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; padding-right: 26px; }
.pwho { margin: 3px 0 10px; font-size: 13px; color: var(--muted); }
.pprice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pprice strong { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.pprice .per { font-size: 13px; color: var(--muted); font-weight: 600; }
.psave { font-style: normal; font-size: 12px; font-weight: 800; color: var(--sale); background: var(--sale-soft); padding: 2px 7px; border-radius: 6px; }
.pmeta { margin-top: 6px; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.pmeta span + span::before { content: "·"; margin-right: 10px; color: var(--line-2); }
.pnote { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.pcheck { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; }
.pcard.on .pcheck { background: var(--brand); border-color: var(--brand); }
.pcheck svg { width: 12px; height: 12px; opacity: 0; }
.pcard.on .pcheck svg { opacity: 1; }
.pcard-more { border-top: 1px dashed var(--line); margin: 0 16px; padding: 8px 0 12px; font-size: 13px; }
.pcard-more summary { cursor: pointer; color: var(--muted); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.pcard-more summary::-webkit-details-marker { display: none; }
.pcard-more summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.pcard-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pcard-more p { margin: 8px 0 0; color: var(--ink-2); white-space: pre-line; }
.pcard-more .small { color: var(--muted); font-size: 12.5px; }
.more-btn { display: block; width: 100%; margin-top: 12px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--ink-2); font-size: 14px; }
.more-btn:hover { background: var(--bg); }

/* 수량 */
.picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg); margin-bottom: 16px; }
.picked strong { display: block; font-size: 16px; }
.picked span { font-size: 13px; color: var(--muted); }
.link-btn { flex: none; background: none; border: 0; color: var(--brand-ink); font-weight: 700; font-size: 13.5px; padding: 6px 4px; }
.caution { border-radius: var(--r-md); background: var(--warn-soft); color: #7a4504; padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px; }
.caution strong { display: block; margin-bottom: 4px; }
.caution ul { margin: 0; padding-left: 18px; }
.detail-box { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; font-size: 13.5px; }
.detail-box summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.detail-box p { margin: 8px 0 0; color: var(--ink-2); white-space: pre-line; }
.detail-box .gchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gchip { font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 3px 8px; border-radius: 6px; }

.field { margin-bottom: 14px; }
.field label, .field-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.text-input, .field input, .field textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; font-size: 15px; background: #fff; }
.text-input:focus, .field input:focus, .field textarea:focus, .qty-input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(61, 90, 254, .14); }
.field .hint { margin-top: 6px; }

.qty-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.preset { height: 40px; min-width: 76px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.preset:hover { border-color: var(--line-2); }
.preset[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.qty-input-wrap { display: flex; align-items: center; gap: 8px; }
.stepper { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font-size: 20px; font-weight: 600; color: var(--ink-2); }
.qty-input { width: 150px; height: 44px; border: 1px solid var(--line-2); border-radius: 12px; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#qtyHint { margin-top: 8px; }

.drip { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.switch { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--brand); }
.drip-opts { display: grid; gap: 10px; margin-top: 12px; }

.expect { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--ok-soft); }
.expect-main { font-weight: 700; color: #065f42; }
.expect .hint { color: #3f6b5a; }
.promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: #1f4d3e; }
.promise li { display: flex; gap: 8px; align-items: flex-start; }
.promise li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.4 2.4L12 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.expect-main + .hint, .expect .hint + .promise, .expect-main + .promise { margin-top: 8px; }

/* 결제 정보 */
.summary { display: grid; gap: 0; }
.summary .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.summary .row > span:first-child { color: var(--muted); flex: none; }
.summary .row > span:last-child { text-align: right; word-break: break-all; font-weight: 600; }
.summary .row:last-child { border-bottom: 0; }
.summary .row.total { border-bottom: 0; padding-top: 14px; font-size: 16px; }
.summary .row.total > span:last-child { font-size: 22px; font-weight: 800; color: var(--ink); }
.rules { margin: 16px 0; border-radius: var(--r-md); background: var(--bg); padding: 14px 16px; font-size: 13.5px; }
.rules h3 { margin: 0 0 8px; font-size: 14px; }
.rules ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.rules li + li { margin-top: 3px; }
.rules details { margin-top: 10px; }
.rules summary { cursor: pointer; font-weight: 700; color: var(--brand-ink); }
.policy { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: 8px 6px; border-top: 1px solid var(--line); }
.policy th { width: 108px; color: var(--ink-2); font-weight: 700; }
.policy td { color: var(--ink-2); }
.checks { display: grid; gap: 10px; margin: 16px 0 6px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.checks label:has(input:checked) { border-color: #c7d0ff; background: var(--brand-soft); }
.checks input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.error-box { color: var(--err); font-size: 14px; font-weight: 600; }
.error-box:not(:empty) { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--err-soft); }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin-top: 8px; }

/* 하단 결제 바 */
.paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; transform: translateY(120%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
body.has-product .paybar { transform: none; visibility: visible; }
.paybar-inner { pointer-events: auto; max-width: calc(var(--flow) - 16px); margin: 0 auto; background: var(--ink); color: #fff; border-radius: 20px; padding: 12px 12px 12px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 16px 40px rgba(10, 19, 48, .35); }
.paybar-total { flex: 1; min-width: 0; }
.paybar .lbl { font-size: 12.5px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paybar .amt { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.pay-btn { flex: none; height: 52px; padding: 0 26px; border: 0; border-radius: 14px; background: var(--brand); color: #fff; font-weight: 800; font-size: 16px; }
.pay-btn:hover:not(:disabled) { background: #5a73ff; }
.pay-btn:disabled { background: #3a4565; color: rgba(255, 255, 255, .55); cursor: not-allowed; }
.retry-btn { flex: none; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-weight: 700; font-size: 13px; }
body.has-product .after-flow { padding-bottom: 96px; }

/* ── 아래 섹션 ─────────────────────────────────────── */
.band { padding: 64px 20px; }
.band.white { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-inner { max-width: var(--wrap); margin: 0 auto; }
.band-head { max-width: 680px; margin-bottom: 28px; }
.band-head .kicker { font-size: 13px; font-weight: 800; color: var(--brand-ink); margin-bottom: 8px; }
.band-head h2 { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 800; letter-spacing: -0.04em; }
.band-head p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }

.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp-table thead th { font-size: 12.5px; color: var(--muted); font-weight: 700; background: #fafbfe; }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td.r, .cmp-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-table .pname { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cmp-table .dom { color: var(--faint); }
.m-only { display: none; }
.cmp-table .ours { font-weight: 800; font-size: 16px; }
.cmp-table .off { color: var(--sale); font-weight: 800; }
.cmp-table .go { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-weight: 700; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.cmp-table .go:hover { border-color: var(--brand); color: var(--brand-ink); }
.cmp-note { margin: 12px 4px 0; font-size: 12.5px; color: var(--muted); }

.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.promise-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--shadow); }
.promise-card .ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; }
.promise-card .ico svg { width: 22px; height: 22px; }
.promise-card:nth-child(1) .ico { background: #eef1ff; color: #2a44e6; }
.promise-card:nth-child(2) .ico { background: #fff3e0; color: #c25e00; }
.promise-card:nth-child(3) .ico { background: #e7f6ef; color: #0a8f63; }
.promise-card:nth-child(4) .ico { background: #f3ecff; color: #6b3fd6; }
.promise-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.promise-card p { margin: 0; font-size: 14px; color: var(--ink-2); }

.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.step3 { position: relative; background: var(--bg); border-radius: var(--r-xl); padding: 22px 22px 22px; }
.step3::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 800; font-size: 15px; margin-bottom: 14px; }
.step3 h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.step3 p { margin: 0; font-size: 14px; color: var(--ink-2); }

.scorecard { max-width: var(--wrap); margin: 0 auto; }
.sc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sc-cell { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; text-align: center; }
.sc-v { font-size: 22px; font-weight: 800; }
.sc-k { font-size: 13px; color: var(--muted); }

.faq-list { display: grid; gap: 8px; max-width: 860px; }
.faq-list details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 18px; }
.faq-list summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 700; font-size: 15px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 4px; top: 22px; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); transition: transform .15s; }
.faq-list details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.faq-list details p { margin: -4px 0 16px; color: var(--ink-2); font-size: 14.5px; }
.faq-list .extra { display: none; }
.faq-list.all .extra { display: block; }
.faq-more { max-width: 860px; }

.lookup-band { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: start; }
.lookup { display: flex; gap: 8px; flex-wrap: wrap; }
.lookup input { flex: 1 1 160px; height: 48px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 14px; font-size: 15px; background: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; }
.btn:hover:not(:disabled) { background: var(--brand-ink); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); }
.btn.ghost:hover:not(:disabled) { background: var(--bg); }
.btn.dark { background: var(--ink); }
.small-btn { height: 40px; padding: 0 14px; font-size: 14px; }
.recent-list { display: grid; gap: 6px; margin-top: 12px; }
.recent-list a { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.recent-list a:hover { border-color: var(--brand); text-decoration: none; }
.recent-list .mono { color: var(--muted); font-size: 13px; }
.text-btn { background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; padding: 6px 0; margin-top: 6px; }

/* 바닥글 */
.site-foot { border-top: 1px solid var(--line); background: #fff; }
.foot-inner { max-width: var(--wrap); margin: 0 auto; padding: 32px 20px calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 10px; font-size: 12.5px; color: var(--muted); }
.foot-brand { font-weight: 800; font-size: 15px; color: var(--ink); }
.foot-info { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.foot-links a { color: var(--ink-2); font-weight: 600; }
body.has-product .foot-inner { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }

/* 모달 */
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(10, 19, 48, .55); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-back.open { display: flex; }
.modal { width: 100%; max-width: 420px; background: #fff; border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow-lg); }
.modal h2 { margin: 0 0 8px; font-size: 19px; }
.modal p { margin: 0 0 20px; color: var(--ink-2); font-size: 14.5px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── 주문 상태·조회 페이지 ───────────────────────────── */
.page { max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.page h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.page .lede { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.page .card { padding: 22px; }
.page .card-head { margin-bottom: 12px; }
.page .card-head h2 { font-size: 17px; }
.skeleton { padding: 40px 16px; text-align: center; color: var(--muted); }
.status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.status-badge { flex: none; font-size: 13px; font-weight: 800; padding: 6px 11px; border-radius: 999px; background: var(--bg); color: var(--ink-2); }
.status-badge.QUEUED, .status-badge.SUBMITTED { background: var(--brand-soft); color: var(--brand-ink); }
.status-badge.IN_PROGRESS { background: #e6f0ff; color: #1d4ed8; }
.status-badge.COMPLETED { background: var(--ok-soft); color: var(--ok); }
.status-badge.PARTIAL, .status-badge.NEEDS_REVIEW, .status-badge.AWAITING_PAYMENT { background: var(--warn-soft); color: var(--warn); }
.status-badge.REFUNDED, .status-badge.CANCELED { background: #f1f5f9; color: var(--muted); }
.progress { height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; margin-top: 18px; }
.progress > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3d5afe, #7c4dff); transition: width .4s ease; }
.progress-nums { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.next-note { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); color: #1f4d3e; font-size: 13.5px; }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.events li { display: grid; grid-template-columns: 136px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.events li:last-child { border-bottom: 0; }
.events .at { color: var(--muted); font-size: 13px; }
.refill-bar { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; margin: 12px 0 6px; }
.refill-bar > div { height: 100%; background: var(--ok); }
.inline-form { display: flex; gap: 8px; margin-top: 10px; }
.inline-form input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; }
.page-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; }
.page-foot a { color: var(--ink-2); font-weight: 600; }
.lookup-form { display: grid; gap: 10px; }
.lookup-form label { font-weight: 700; font-size: 14px; }
.lookup-form input { height: 48px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 14px; font-size: 15px; }

/* ── 반응형 ─────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 20px 44px; }
  .hero h1 { font-size: 38px; }
  .assure-inner { grid-template-columns: 1fr 1fr; }
  .promises { grid-template-columns: 1fr 1fr; }
  .lookup-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .top-inner { height: 56px; padding: 0 16px; }
  .top-nav .top-link.hide-m { display: none; }
  .top-link { padding: 8px 9px; }
  .hero-inner { padding: 30px 16px 34px; }
  .hero h1 { font-size: 27px; margin: 14px 0 10px; }
  .hero .lede { font-size: 15px; margin-bottom: 20px; }
  .link-box { flex-wrap: wrap; padding: 6px; }
  .link-input { flex-basis: 100%; height: 50px; padding: 0 10px; }
  .paste-btn { flex: 1; height: 46px; }
  .go-btn { flex: 2; height: 46px; padding: 0 12px; font-size: 15px; }
  .compare-card { padding: 18px; border-radius: 20px; }
  .assure-inner { padding: 14px 16px; gap: 12px; }
  .assure-ico { width: 34px; height: 34px; border-radius: 10px; }
  .assure-item strong { font-size: 13.5px; }
  .assure-item span { font-size: 12px; }
  .flow { padding: 22px 12px 16px; gap: 12px; }
  .card { padding: 18px 16px; border-radius: 20px; }
  .card-head h2 { font-size: 18px; }
  .products { grid-template-columns: 1fr; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-row .chips { width: 100%; flex: none; }
  .search { width: 100%; }
  .band { padding: 44px 16px; }
  .band-head h2 { font-size: 24px; }
  .promises, .steps3, .sc-grid { grid-template-columns: 1fr; }
  .cmp-table { min-width: 0; }
  .cmp-table thead { display: none; }
  .cmp-table tr { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 6px 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .cmp-table tbody tr:last-child { border-bottom: 0; }
  .cmp-table td { padding: 0; border: 0; }
  .cmp-table td:first-child { grid-column: 1 / -1; }
  .cmp-table td.r { text-align: left; }
  .m-only { display: inline; }
  .cmp-table .dom { font-size: 13px; }
  .paybar { padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  .paybar-inner { padding: 10px 10px 10px 16px; border-radius: 18px; }
  .paybar .amt { font-size: 19px; }
  .pay-btn { height: 48px; padding: 0 18px; font-size: 15px; }
  .qty-input { width: 120px; }
  .preset { min-width: 0; flex: 1 1 0; padding: 0 6px; font-size: 13.5px; }
  .browse-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .browse-row::-webkit-scrollbar { display: none; }
  .browse-chip { flex: none; }
  .page { padding: 20px 12px 40px; }
  .events li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── 회원·충전 ─────────────────────────────────────── */
.as-btn { background: none; border: 0; cursor: pointer; }
.top-link.join { background: var(--brand); color: #fff; }
.top-link.join:hover { background: var(--brand-ink); }
.top-link.bal { background: var(--brand-soft); color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.auth-wrap { min-height: calc(100vh - 60px); display: grid; place-items: start center; padding: 48px 16px 64px; }
.auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px 28px; box-shadow: var(--shadow); }
.auth-card h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.auth-card .lede { margin: 0 0 22px; color: var(--ink-2); font-size: 15px; }
.accent { color: var(--brand-ink); }
.form-grid { display: grid; gap: 2px; }
.form-grid.two { grid-template-columns: 1fr 1fr; column-gap: 12px; }
.btn.block { width: 100%; height: 52px; font-size: 16px; margin-top: 8px; }
.auth-foot { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }
/* 카카오 로그인 버튼(카카오 디자인 가이드: 배경 #FEE500, 글자 85% 검정, 심볼 검정) */
.btn.kakao { gap: 8px; background: #FEE500; color: rgba(0, 0, 0, .85); }
.btn.kakao:hover:not(:disabled) { background: #f4d900; }
.btn.kakao svg { width: 18px; height: 18px; flex: none; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#kakaoTop .auth-or { margin-bottom: 14px; }
.balance-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-radius: var(--r-xl); padding: 26px; color: #fff;
  background: radial-gradient(500px 200px at 90% -20%, rgba(124, 77, 255, .5), transparent 60%), linear-gradient(150deg, var(--hero-1), var(--hero-2)); box-shadow: var(--shadow-lg); }
.bal-label { font-size: 14px; color: rgba(255, 255, 255, .75); }
.bal-amt { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; margin: 2px 0; }
.bal-split { font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.bal-split b { color: #fff; }
.bal-actions { display: flex; gap: 8px; }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { background: #eef1ff; }
.btn.ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.qty-input.wide { width: 200px; text-align: left; padding: 0 14px; }
.bonus-preview { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-ink); font-size: 14.5px; }
.bonus-preview b { font-size: 16px; }
.bank-box { border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 12px; }
.bank-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14.5px; }
.bank-row > span:first-child { width: 72px; color: var(--muted); flex: none; }
.bank-row.strong b { color: var(--sale); font-size: 16px; }
.copy-btn { margin-left: auto; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; font-size: 12.5px; font-weight: 700; }
.pending { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--warn-soft); color: #7a4504; }
.pending.ok { background: var(--ok-soft); color: var(--ok); }
.tiers { margin-top: 14px; font-size: 13.5px; }
.tiers summary { cursor: pointer; font-weight: 700; color: var(--brand-ink); }
.list { display: grid; }
.list-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { text-decoration: none; background: #fafbfe; }
.list-row .r { text-align: right; flex: none; }
.plus { color: var(--ok); }
.minus { color: var(--ink-2); }
.st { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.st-COMPLETED { color: var(--ok); }
.st-IN_PROGRESS, .st-SUBMITTED, .st-QUEUED { color: var(--brand-ink); }
.balance-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); margin: 14px 0 0; font-size: 14px; }
.balance-strip b { font-variant-numeric: tabular-nums; }
.bonus-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.bonus-cell { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; text-align: center; box-shadow: var(--shadow); }
.bonus-cell.first { background: linear-gradient(150deg, var(--hero-1), var(--hero-2)); color: #fff; border: 0; }
.bonus-cell .pct { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.bonus-cell .cond { font-size: 13px; color: var(--muted); }
.bonus-cell.first .cond { color: rgba(255, 255, 255, .75); }
@media (max-width: 640px) {
  .auth-card { padding: 26px 18px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .balance-card { padding: 22px 18px; }
  .bal-amt { font-size: 30px; }
  .bal-actions { width: 100%; }
  .bal-actions .btn { flex: 1; }
  .bonus-band { grid-template-columns: 1fr 1fr; }
  .top-link.bal { display: none; }
}

/* 부업별 추천 구성 */
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pack { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--shadow); }
.pack-tag { align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--brand-ink); background: var(--brand-soft); padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; }
.pack h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.pack-note { margin: 0 0 12px; font-size: 13px; color: var(--muted); flex: 1; }
.pack-items { display: grid; gap: 6px; }
.pack-item { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; width: 100%; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fafbfe; font-size: 13px; }
.pack-item:hover { border-color: #c4ccff; background: var(--brand-soft); }
.pack-item .pico { grid-row: 1 / span 2; width: 22px; height: 22px; }
.pi-name { font-weight: 700; color: var(--ink); line-height: 1.3; }
.pi-qty { grid-column: 2; color: var(--muted); font-size: 12px; }
.pi-amt { grid-column: 3; grid-row: 1 / span 2; font-weight: 800; }
.pack-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); }
.pack-total b { font-size: 18px; color: var(--ink); }
@media (max-width: 960px) { .packs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .packs { grid-template-columns: 1fr; } }

.price-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 22px; }
.price-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.price-chip b { font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.small-note { font-size: 13px !important; color: var(--faint) !important; margin-top: 6px !important; }

/* 겪던 일과 해결 */
.why-band { background: #fff; border-bottom: 1px solid var(--line); }
.why-inner { max-width: var(--wrap); margin: 0 auto; padding: 40px 20px; }
.why-head { margin-bottom: 18px; }
.why-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.why-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.why-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; background: #fafbfe; }
.why-card .quote { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1.45; }
.why-card p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 960px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .why-inner { padding: 28px 16px; } .why-head h2 { font-size: 20px; } .why-grid { grid-template-columns: 1fr; } }

.cmp-basis { margin: 12px 2px 0; font-size: 12px; }

/* 충전 방법 탭 */
.pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: var(--bg); margin-bottom: 16px; }
.pay-tab { height: 44px; border: 0; border-radius: 11px; background: transparent; font-weight: 700; font-size: 14.5px; color: var(--muted); }
.pay-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.pay-tab .tab-sub { font-size: 11.5px; color: var(--ok); margin-left: 4px; }
.card-rules { margin: 4px 0 14px; padding: 12px 14px 12px 30px; border-radius: 12px; background: var(--bg); font-size: 13px; color: var(--ink-2); }
.card-rules li + li { margin-top: 4px; }

/* 안내 페이지(/guide) */
.guide { gap: 12px; }
.guide .crumbs { font-size: 13px; color: var(--muted); }
.guide .crumbs a { color: var(--ink-2); }
.guide h2 { margin: 18px 0 2px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.guide p { margin: 0; line-height: 1.7; color: var(--ink-2); }
.guide .answer { padding: 16px 18px; border-radius: 14px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 16px; }
.g-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.g-table th, .g-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.g-table tbody th { width: 38%; color: var(--muted); font-weight: 600; background: var(--bg); }
.g-table thead th { background: var(--bg); color: var(--muted); font-weight: 600; font-size: 13px; }
.g-table tr.total td { font-weight: 800; color: var(--ink); }
.guide ul { margin: 0; padding-left: 20px; line-height: 1.8; color: var(--ink-2); }
.g-related li a { color: var(--ink); }
.guide details { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.guide details summary { font-weight: 700; cursor: pointer; }
.guide details p { margin-top: 8px; }
.g-cta { margin-top: 12px; }
@media (max-width: 560px) { .g-table { font-size: 13px; } .g-table th, .g-table td { padding: 8px 9px; } }
.g-cmp td:nth-child(n+3), .g-cmp th:nth-child(n+3) { white-space: nowrap; }
@media (max-width: 560px) { .g-cmp td:nth-child(2), .g-cmp th:nth-child(2) { display: none; } }

/* 스튜디오 */
.studio { max-width: var(--wrap); margin: 0 auto; padding: 24px 20px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.st-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.st-head h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.st-head .hint { margin: 0; max-width: 560px; }
.st-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.st-stats > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: grid; gap: 2px; min-width: 96px; }
.st-stats b { font-size: 17px; }
.btn.light-outline { background: #fff; color: var(--brand-ink); border: 1px solid #c7d0ff; height: 44px; }
.notice-box { padding: 12px 16px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 14px; }
.notice-box.err { background: var(--err-soft); color: var(--err); }
.st-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs [role=tab] { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14.5px; }
.st-tabs [role=tab][aria-selected="true"] { background: var(--brand); color: #fff; }
.st-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; align-items: start; }
.st-grid .card.wide { grid-column: 1 / -1; }
.studio .card { padding: 20px; }
.studio .field select, .studio .step-row select, .studio .detect-item select { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 12px; font-size: 15px; background: #fff; }
.studio .detect-item > input { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 12px; font-size: 14.5px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.row3 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 10px 0; }
.empty-note { padding: 14px; border-radius: 12px; background: var(--bg); font-size: 14px; margin-bottom: 12px; }
.chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.post-meta .chip:first-child { margin-left: 0; }
.row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.post-item, .chain-item, .detect-item { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.post-item:first-child, .chain-item:first-child, .detect-item:first-child { border-top: 0; padding-top: 0; }
.post-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.post-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.run { background: var(--bg); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.run-steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
.run-steps .st-ordered { color: var(--ok); }
.run-steps .st-failed { color: var(--err); }
.step-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 96px auto; gap: 8px; align-items: center; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.step-row > .hint, .step-row > .text-btn { grid-column: 2 / -1; margin: 0; }
.step-row input[type=number] { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; font-size: 14.5px; }
.step-no { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.after { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.after input { width: 70px !important; }
.ai-box { margin: 4px 0 14px; padding: 12px 14px; border: 1px dashed #c7d0ff; border-radius: 14px; background: #fafbff; }
.ai-box summary { cursor: pointer; font-weight: 800; color: var(--brand-ink); }
.ai-box[open] summary { margin-bottom: 12px; }
.draft { display: block; width: 100%; text-align: left; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.draft:hover { border-color: var(--brand); }
.upload-row { display: flex; gap: 8px; align-items: center; }
.upload-row input:not([type=file]) { flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.file-btn { flex: none; height: 46px; cursor: pointer; }
.img-preview { margin-top: 10px; max-width: 180px; max-height: 180px; border-radius: 12px; border: 1px solid var(--line); object-fit: cover; }
.ypp-goal { margin-top: 14px; display: grid; gap: 6px; }
.ypp-row { display: flex; justify-content: space-between; }
.bar { height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.ypp-opt { font-size: 13.5px; font-weight: 700; }
.hint.ok { color: var(--ok); font-weight: 700; }
.trend { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.trend:first-child { border-top: 0; }
.trend .text-btn { flex: none; margin: 0; }
.spark { width: 120px; height: 32px; flex: none; }
.spark polyline { fill: none; stroke: var(--brand); stroke-width: 2; }
@media (max-width: 860px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .row2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .row3 { grid-template-columns: minmax(0, 1fr); }
  .step-row { grid-template-columns: 26px minmax(0, 1fr); }
  .step-row > input, .step-row > .after { grid-column: 2 / -1; }
  .spark { display: none; }
}
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 6px; }
.btn.hero-cta { height: 50px; padding: 0 22px; background: #fff; color: var(--ink); box-shadow: 0 10px 24px rgba(5, 10, 40, .3); }
.btn.hero-cta:hover:not(:disabled) { background: #eef1ff; }
.hint-light { color: rgba(255, 255, 255, .72); font-size: 13px; }
.field label.file-btn { display: inline-flex; align-items: center; margin: 0; }
/* 스튜디오 확장 */
.pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pf-tabs .preset, #pfTabs .preset { height: 36px; min-width: 0; padding: 0 12px; font-size: 13.5px; }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.conn-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; align-content: start; background: #fff; }
.conn-card input { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.conn-card .btn { height: 42px; }
.sub-h { margin: 8px 0 4px; font-size: 16px; font-weight: 800; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 10px; max-height: 240px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; }
.pick { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding: 0; background: var(--bg); }
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick .vid, .media-tile .vid { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.media-chosen { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.media-tile { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.media-tile img, .media-tile video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--bg); }
.media-tile figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 10px; }
.media-tile .text-btn { margin: 0; }
.step-row .opt { grid-column: 2 / -1; width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; font-size: 14px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.kv > div { background: var(--bg); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.kv b { font-size: 17px; }
.g-table.kw { margin-top: 12px; }
#srMediaMode .preset:disabled { opacity: .45; }

.lede.sub { margin-top: 8px; font-size: 15px; opacity: .82; }

.ext-box { border: 1px dashed #c7d0ff; background: #fafbff; border-radius: 16px; padding: 16px; margin: 8px 0 18px; display: grid; gap: 8px; }
.ext-box .card-head { margin: 0; }
.ext-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.token-out { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.token-out code { font-size: 13px; word-break: break-all; background: var(--bg); padding: 6px 8px; border-radius: 8px; }

/* 추천 해시태그·해시태그 조합·계정 진단 */
.tag-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.tag-row input { width: 18px; height: 18px; flex: none; margin: 0; }
.tag-row .chip { margin-left: 0; }
.tag-row .hint { margin-left: auto; }
.cb-group { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 0 0 10px; display: grid; gap: 8px; }
.cb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-head .text-btn { margin-left: auto; }
.cb-pick { width: 64px; height: 34px; padding: 0 8px; }
.cb-group textarea { width: 100%; min-width: 0; }
.diag-head { margin: 12px 0 0; font-size: 15px; }
.advice { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.6; }
.guide pre.code { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.guide code { font-size: 0.92em; background: var(--bg); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
/* 대량 주문 */
#bulkLines { width: 100%; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.bulk-sum { margin: 14px 0 6px; font-weight: 700; }
.bulk-sum.err { color: var(--err, #d33); }
.bulk-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.bulk-row > div { min-width: 0; overflow-wrap: anywhere; }
.bulk-row.bad .err { color: var(--err, #d33); }
.svc-list { max-height: 480px; overflow-y: auto; margin-top: 8px; }
.svc-list .row-item > div { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
#svcQ { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
.svc-list .text-btn { white-space: nowrap; flex: none; }
/* 콘텐츠 달력 */
.seg { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.seg .preset { height: 30px; padding: 0 10px; font-size: 13px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.cal-nav .text-btn { margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal-cell { min-height: 76px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 4px; display: flex; flex-direction: column; gap: 2px; align-items: stretch; text-align: left; font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; }
.cal-cell.empty { border: 0; background: transparent; cursor: default; }
.cal-cell.today { border-color: var(--brand); }
.cal-cell.picked { background: var(--brand-soft); border-color: #c7d0ff; }
.cal-d { font-size: 12px; font-weight: 700; }
.cal-it { font-size: 11px; line-height: 1.35; padding: 1px 4px; border-radius: 6px; background: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-it.st-published { background: var(--ok-soft); color: var(--ok); }
.cal-it.st-failed { background: var(--warn-soft); color: var(--warn); }
.cal-it.st-draft { background: var(--sale-soft); color: var(--sale); }
.cal-more { font-size: 11px; color: var(--muted); }
.cal-n { display: none; }
.cal-day-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 4px; }
@media (max-width: 560px) {
  .cal-cell { min-height: 46px; }
  .cal-it, .cal-more { display: none; }
  .cal-n { display: block; margin-top: auto; align-self: flex-end; font-size: 11px; font-weight: 700; color: var(--brand); }
}
.cal-it { white-space: normal; word-break: keep-all; text-overflow: clip; }
/* 고객사 */
.client-filter { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; }
.client-filter select { height: 34px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--card); max-width: 220px; }
.mini-select { height: 30px; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--card); font-size: 13px; max-width: 100%; }
.cl-link { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); }
.cl-link > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.cl-link .post-actions { flex: none; margin: 0; }
.chain-item.archived { opacity: 0.6; }
.client-page .conn-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.client-page .approve-form { display: grid; gap: 8px; margin-top: 10px; }
.client-page .approve-form textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.client-page .thumb { max-width: 220px; border-radius: 10px; display: block; margin-top: 8px; }
@media (max-width: 560px) { .cl-link { flex-direction: column; } }
#clList { margin-top: 14px; }
/* 사업자 정보·증빙 */
.biz-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.biz-form .field.wide { grid-column: 1 / -1; }
.biz-form input, .biz-form select { width: 100%; min-width: 0; }
#bizCharges .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
#bizCharges .inline-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) { .biz-form { grid-template-columns: 1fr; } }
.biz-form select, #bizCharges select { height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card); font: inherit; color: var(--ink); }
#bizCharges select { height: 36px; border-radius: 10px; }
/* 댓글 자동화 */
.draw-box { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.draw-box p { margin: 0 0 6px; }
#ruList details { margin: 6px 0; font-size: 13px; }
#ruList details summary { cursor: pointer; color: var(--muted); }
/* 쿠팡 상품 */
.cp-find select, .cp-find input { height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card); font: inherit; min-width: 0; }
.cp-find { flex-wrap: wrap; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.cp-item { position: relative; display: grid; gap: 4px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; font-size: 13px; }
.cp-item.on { border-color: var(--brand); background: var(--brand-soft); }
.cp-item input { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; margin: 0; }
.cp-item img, .cp-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--bg); }
.cp-noimg { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.cp-item b { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.cp-item .chip { margin-left: 0; justify-self: start; }
/* 점검·한 글을 여러 곳에 */
.hc-row { align-items: flex-start; }
.hc-bar { flex: none; width: 90px; height: 6px; border-radius: 99px; background: var(--bg); overflow: hidden; margin-top: 8px; }
.hc-bar span { display: block; height: 100%; background: var(--brand); }
.rp-card > summary { list-style: none; cursor: pointer; display: grid; gap: 4px; }
.rp-card > summary::-webkit-details-marker { display: none; }
.rp-card > summary h2 { margin: 0; }
.rp-card[open] > summary { margin-bottom: 12px; }
.rp-accts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 14px; }
.rp-draft { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.rp-draft textarea, .rp-draft input { width: 100%; min-width: 0; }
.rp-draft textarea, .rp-draft input { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; line-height: 1.6; background: var(--card); }
.rp-draft .chain-head { gap: 8px; }
.hero-ctas + .price-chips { margin-top: 12px; }
.hero .lede.sub + .lede.sub { margin-top: 0; }
.hero .lede.sub { margin-bottom: 14px; }
/* 목표 자동 운영 */
.gl-plan { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.gl-bars { width: 100%; height: 64px; display: block; margin: 6px 0; }
.gl-bars rect { fill: var(--brand); opacity: .75; }
.gl-bar { height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; margin: 8px 0 4px; }
.gl-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #7c8cff); }
.gl-spark { width: 100%; max-width: 260px; height: 40px; display: block; margin: 4px 0; }
.gl-spark polyline { fill: none; stroke: var(--brand); stroke-width: 2; }
.gl-item details { font-size: 13px; margin: 6px 0; }
.gl-item details summary { cursor: pointer; color: var(--muted); }
#glSku { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card); font: inherit; }
.rk-auto { display: grid; gap: 4px; margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.rk-auto .text-btn { justify-self: start; margin: 0; }
/* 순반응 신호등 */
.nat { margin: 8px 0; padding: 10px 12px; border-radius: 12px; border-left: 4px solid var(--line); background: var(--bg); font-size: 13.5px; display: grid; gap: 2px; }
.nat-green { border-left-color: var(--ok); background: var(--ok-soft); }
.nat-yellow { border-left-color: #d4a017; }
.nat-red { border-left-color: var(--err); }
/* 캠페인 */
.cpg-steps { margin: 12px 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.cpg-steps li.skip { opacity: .5; }
.cpg-steps .chip { margin-left: 6px; }
/* 메인: 스튜디오가 대신 하는 일 */
.auto-band { padding: 64px 20px; background: var(--bg); }
.auto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.auto-card { display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.auto-card:hover { border-color: #c7d0ff; transform: translateY(-2px); }
.auto-card .who { justify-self: start; font-size: 12px; font-weight: 800; color: var(--brand-ink); background: var(--brand-soft); padding: 3px 10px; border-radius: 99px; }
.auto-card h3 { margin: 0; font-size: 19px; letter-spacing: -0.03em; }
.auto-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.mini { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #f6f8fd; border: 1px solid #eef1f7; font-size: 13px; }
.mini-row { display: flex; justify-content: space-between; gap: 10px; }
.mini-row b { font-weight: 800; color: var(--ink); text-align: right; }
.mini-row.hint-row { color: var(--muted); font-size: 12px; }
.mini-bar { height: 8px; border-radius: 99px; background: #e5e9f4; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #7c8cff); }
.auto-more { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .auto-grid { grid-template-columns: 1fr; } .auto-band { padding: 44px 16px; } }
/* 네이버 클립 순위 */
.ck-kw { display: grid; gap: 4px; padding: 10px 0; border-top: 1px dashed var(--line); }
.ck-area { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ck-card { font-size: 12.5px; padding: 4px 8px; border-radius: 8px; background: var(--bg); color: var(--muted); }
.ck-card.me { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.ck-kw p.hint { margin: 0; } .ck-kw .advice { margin: 4px 0; }