/* ─────────────────────────────────────────────────────────────────────────────
   assets/cards.css — 재사용 카드 컴포넌트 스타일 (단일 소스)
   다른 페이지에서 <link rel="stylesheet" href="/assets/cards.css"> 후
   <div data-card="search|calc|review|regulation|localize|launch|chat|speed|aiagentdashboard|connector|pipeline|importflow"></div> 만 두면 됨.
   동작(JS)·마크업(HTML)은 /assets/cards.js 가 주입한다.
   여기서 고치면 이걸 쓰는 모든 페이지에 반영된다.
   ───────────────────────────────────────────────────────────────────────────── */

/* 카드가 의존하는 토큰 (없는 페이지를 위해 자체 정의 · 디자인 시스템 값과 동일) */
:root {
  --surface: #ffffff;
  --surface-subtle: #F7F8FA;
  --text: #18181B;
  --text-secondary: #3F444C;
  --text-muted: #6B7280;
  --green: #24BF58;
  --green-hover: #1C9E47;
  --green-soft: #E7F7EC;
  --border: rgba(16,24,40,.06);
  --border-medium: rgba(16,24,40,.10);
  --border-subtle: rgba(16,24,40,.06);
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --shadow-sm: 0 2px 8px rgba(16,24,40,.06);
  --shadow-md: 0 8px 24px rgba(16,24,40,.08);
  --shadow-lg: 0 16px 48px rgba(16,24,40,.10);
  --font-sans: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}

/* ── 종합 점수 카드 (.score-card) ── */
.score-card {
  --sc-stop: #E5484D;
  --sc-caution: #F5A623;
  --sc-go: var(--green);
  width: 100%;
  max-width: 800px;
  font-family: var(--font-sans);
}
.sc-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-chip {
  appearance: none; border: 1px solid var(--border-medium); background: var(--surface);
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sc-chip:hover { color: var(--text); }
.sc-chip[aria-selected="true"] { border-color: var(--green); color: var(--green-hover); background: var(--green-soft); }
.sc-search__label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-right: 2px; }

.sc-result {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background: linear-gradient(135deg, #FFFDF6 0%, #FFFFFF 55%, #F5FBF7 100%);
  border: 1px solid var(--border-medium); border-radius: 20px;
  box-shadow: var(--shadow-md); padding: 24px 26px;
}
.sc-headline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.sc-level-badge {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #fff;
  padding: 6px 16px; border-radius: var(--radius-pill); white-space: nowrap;
}
.sc-headline__text { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.sc-headline__text b { font-weight: 800; font-size: 1.18em; }
.sc-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-metric { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 15px; }
.sc-metric__label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.sc-metric__big { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.2; }
.sc-metric__line { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.sc-gauge { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sc-gauge__dial { position: relative; width: 200px; height: 125px; }
.sc-gauge__svg { display: block; width: 100%; height: auto; }
.sc-gauge__num { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; line-height: 1; }
.sc-gauge__num b { font-size: 36px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.sc-gauge__num span { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.sc-source { margin-top: 12px; font-size: 12px; color: var(--text-muted); text-align: right; }

@media (max-width: 760px) {
  .sc-result { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .sc-metrics { grid-template-columns: 1fr; }
}

/* ── 최근 12개월 트렌드 (.trend-card) ── */
.trend-card { width: 100%; max-width: 800px; font-family: var(--font-sans); }
.tc-card {
  background: var(--surface); border: 1px solid var(--border-medium);
  border-radius: 20px; box-shadow: var(--shadow-md); padding: 20px 24px;
}
.tc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tc-badge {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: var(--green); padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap;
}
.tc-headline { font-size: 15px; color: var(--text-secondary); }
.tc-headline b { font-weight: 700; color: var(--text); }
.tc-chart { width: 100%; height: auto; display: block; }
.tc-note {
  margin-top: 8px; background: var(--surface-subtle); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.55;
}
.tc-season {
  margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #FFFDF6; border: 1px solid #F0E2C4; border-radius: 14px; padding: 12px 18px;
}
.tc-season__left { font-size: 13px; color: var(--text-muted); }
.tc-season__left b { font-size: 15px; font-weight: 700; color: var(--text); margin-left: 10px; }
.tc-season__right { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

@media (max-width: 560px) {
  .tc-season { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── 누가 검색하나 (.who-card) 성별/연령 분포 ── */
.who-card { width: 100%; max-width: 800px; font-family: var(--font-sans); }
.who-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.who-head__ic { color: #1A56DB; flex: none; }
.who-head__title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.who-head__title span { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 8px; letter-spacing: 0; }
.who-head__src { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--green-hover); background: var(--green-soft); padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.who-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.who-body { background: var(--surface); border: 1px solid var(--border-medium); border-radius: 20px; box-shadow: var(--shadow-md); padding: 24px 26px; }
.who-grid { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }

.who-donut { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.who-donut__dial { position: relative; width: 150px; height: 150px; }
.who-donut__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.who-donut__seg { fill: none; stroke-width: 20; stroke-linecap: round; }
.who-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.who-donut__center b { font-size: 16px; font-weight: 700; color: var(--text); }
.who-donut__center span { font-size: 12px; color: var(--text-muted); }
.who-legend { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 150px; }
.who-legend__row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.who-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.who-legend__name { color: var(--text-secondary); }
.who-legend__pct { margin-left: auto; font-weight: 700; color: var(--text); }

.who-ages { display: flex; flex-direction: column; gap: 12px; }
.who-age { display: flex; align-items: center; gap: 14px; }
.who-age__label { width: 54px; text-align: right; font-size: 13px; color: var(--text-secondary); flex: none; }
.who-age__track { flex: 1; height: 20px; background: #EFF1F3; border-radius: var(--radius-pill); overflow: hidden; }
.who-age__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: #C2C9D2; transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1); }
.who-age.is-peak .who-age__fill { background: var(--green); }
.who-age.is-in .who-age__fill { transform: scaleX(1); }
.who-age__pct { width: 42px; font-size: 13px; font-weight: 600; color: var(--text-muted); flex: none; }
.who-age.is-peak .who-age__pct { color: var(--green-hover); font-weight: 700; }

.who-foot { margin-top: 18px; background: var(--green-soft); border-radius: 14px; padding: 16px; text-align: center; font-size: 15px; font-weight: 700; color: var(--text); }
.who-foot b { color: var(--green-hover); }

@media (max-width: 640px) {
  .who-grid { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .who-body { padding: 22px 18px; }
}

/* ── 검색 결과 알약 토글 아코디언 (.acc) ── */
.acc { width: 100%; max-width: 800px; display: flex; flex-direction: column; gap: 12px; }
.acc-search { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; margin-bottom: 16px; padding: 12px 16px; background: #fff; border: 1px solid var(--border-medium); border-radius: var(--radius-pill); }
.acc-search__ic { flex: none; color: var(--text-muted); }
.acc-search__q { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.acc-item { border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; }
.acc-item.is-open { border-color: var(--border-medium); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.acc-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 13px 22px;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text);
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.acc-toggle:hover { background: #EAEDF0; }
.acc-toggle__chev { flex: none; color: var(--text-muted); transition: transform .25s ease, color .2s ease; }
.acc-item.is-open > .acc-toggle { background: var(--green-soft); border-color: transparent; border-radius: 0; color: var(--green-hover); }
.acc-item.is-open > .acc-toggle .acc-toggle__chev { transform: rotate(90deg); color: var(--green-hover); }
.acc-panel { display: grid; grid-template-rows: 0fr; }
.acc-item.is-open > .acc-panel { grid-template-rows: 1fr; }
.acc-panel__inner { overflow: hidden; }
.acc-panel__body { padding: 20px; }
.acc-panel__body .sc-result,
.acc-panel__body .tc-card,
.acc-panel__body .who-body { background: transparent; border: none; box-shadow: none; padding: 0; }
.acc-panel__body .who-head { margin-top: 0; }

/* ── 가격/마진 계산기 (.calc-card) ── */
.calc-card {
  width: 100%; max-width: 800px; font-family: var(--font-sans);
  background: var(--surface); border: 1px solid var(--border-medium);
  border-radius: 20px; box-shadow: var(--shadow-md); padding: 24px 26px;
  --calc-blue: #14A6C9; --calc-red: #CBD0D6;
}
.calc-price { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; background: var(--surface-subtle); }
.calc-price__top { display: flex; justify-content: space-between; align-items: flex-start; }
.calc-price__label { font-size: 13px; color: var(--text-secondary); }
.calc-price__row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6px; }
.calc-price__val { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.calc-price__range { font-size: 13px; color: var(--text-muted); text-align: right; line-height: 1.5; }
.calc-slider { width: 100%; margin: 14px 0 8px; accent-color: var(--calc-blue); cursor: pointer; }
.calc-price__ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }

.calc-sec { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin: 22px 0 12px; }
.calc-wf-row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 12px; margin-bottom: 9px; }
.calc-wf__label { font-size: 13px; color: var(--text-secondary); text-align: right; }
.calc-wf__bar-wrap { height: 22px; display: flex; align-items: center; }
.calc-wf__bar { height: 22px; border-radius: 6px; min-width: 2px; }
.calc-wf__val { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.calc-wf__krw { color: var(--text-muted); font-size: 12px; margin-left: 5px; }
.calc-wf__pct { color: var(--green-hover); font-weight: 700; margin-left: 5px; }
.calc-wf-row--margin { border-top: 1px dashed var(--border-medium); padding-top: 11px; margin-top: 5px; }
.calc-wf-row--margin .calc-wf__label { font-weight: 700; color: var(--text); }

.calc-bep__head { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.calc-bep__track { position: relative; height: 22px; border-radius: var(--radius-pill); background: #EFF1F3; margin: 32px 0 40px; }
.calc-bep__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #CFF3DE, #24BF58); transition: width .1s linear; }
.calc-bep__marker { position: absolute; top: -7px; bottom: -7px; width: 2px; background: var(--text); }
.calc-bep__tip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.calc-bep__est { position: absolute; top: 30px; transform: translateX(-50%); background: var(--surface-subtle); color: var(--text-secondary); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }

@media (max-width: 560px) {
  .calc-card { padding: 22px 18px; }
  .calc-price { padding: 16px 16px; }
  .calc-price__val { font-size: 24px; }
  .calc-wf-row { grid-template-columns: 66px 1fr auto; gap: 8px; }
}

/* ── 경쟁사 리뷰 기반 차별화 분석 (.review-card) ── */
.review-card { width: 100%; max-width: 800px; font-family: var(--font-sans); display: flex; flex-direction: column; gap: 20px; --rc-label: 130px; --rc-count: 56px; --rc-gap: 14px; }
.rc-section { background: var(--surface); border: 1px solid var(--border-medium); border-radius: 20px; box-shadow: var(--shadow-md); padding: 24px 26px; }
.rc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.rc-head__title { font-size: 16px; font-weight: 700; color: var(--text); }
.rc-head__sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.rc-chart { position: relative; }
.rc-line { position: absolute; top: 2px; bottom: 8px; width: 2px; background: repeating-linear-gradient(to bottom, #E5484D 0 5px, transparent 5px 10px); }
.rc-row { display: grid; grid-template-columns: var(--rc-label) 1fr var(--rc-count); align-items: center; gap: var(--rc-gap); margin-bottom: 14px; }
.rc-row__label { text-align: right; font-size: 14px; font-weight: 600; color: var(--text); }
.rc-row__plot { position: relative; height: 30px; display: flex; align-items: center; }
.rc-bar { height: 30px; border-radius: 0 6px 6px 0; min-width: 3px; }
.rc-target { height: 30px; border-radius: 0 6px 6px 0; background: rgba(229, 72, 77, 0.12); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; }
.rc-target__txt { font-size: 12px; font-weight: 700; color: #E5484D; }
.rc-row__count { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
.rc-row--mine .rc-row__label { color: #E5484D; }

.rc-sub { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); margin: 24px 0 0; }
.rc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rc-cols .rc-sub { margin-top: 0; }
.rc-sub__ic { flex: none; display: inline-flex; }
.rc-sub__tag { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.rc-minis { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rc-mini { display: grid; grid-template-columns: 72px 1fr 44px; align-items: center; gap: 12px; }
.rc-mini__label { text-align: right; font-size: 13px; color: var(--text-secondary); }
.rc-mini__plot { height: 16px; display: flex; align-items: center; }
.rc-mini__bar { height: 16px; border-radius: 4px; min-width: 3px; }
.rc-mini__val { font-size: 12px; font-weight: 600; color: var(--text-secondary); }

.rc-opps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.rc-opp { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 12px; padding: 14px 15px; }
.rc-opp__num { width: 22px; height: 22px; border-radius: 6px; background: #FCE3EE; color: #D6197A; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.rc-opp__title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 6px; }
.rc-opp__desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.review-card [data-grow] { transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1); }
.review-card [data-grow].is-in { transform: scaleX(1); }

@media (max-width: 560px) {
  .review-card { --rc-label: 58px; --rc-count: 46px; --rc-gap: 10px; }
  .rc-section { padding: 22px 18px; }
  .rc-row__label { font-size: 13px; }
  .rc-row__count { font-size: 14px; }
}

/* ── 현지 규제 체크 (.reg-card) + 번역 와이퍼 ── */
.reg-card { width: 100%; max-width: 800px; font-family: var(--font-sans); display: flex; flex-direction: column; gap: 20px; }
.reg-section { background: var(--surface); border: 1px solid var(--border-medium); border-radius: 20px; box-shadow: var(--shadow-md); padding: 24px 26px; }
.reg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.reg-head__title { font-size: 16px; font-weight: 700; color: var(--text); }
.reg-head__sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.reg-num { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 12px; }

.reg-wipe { position: relative; border-radius: 12px; user-select: none; touch-action: none; cursor: ew-resize; }
.reg-wipe__rows { display: flex; flex-direction: column; gap: 8px; }
.rw-row { position: relative; height: 50px; border-radius: 10px; overflow: hidden; }
.rw-face { position: absolute; inset: 0; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 0 14px; }
.rw-after { background: var(--green-soft); }
.rw-before { background: #FDECEC; }
.rw-before.is-imp { background: #FDF4E3; }
.rw-mark { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.rw-mark--bad { background: #E5484D; }
.rw-mark--imp { background: #F5A623; }
.rw-mark--safe { background: #24BF58; }
.rw-text { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
.rw-text small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-top: 1px; }
.rw-badge { font-size: 11px; font-weight: 700; color: #fff; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.rw-badge--bad { background: #E5484D; }
.rw-badge--imp { background: #F5A623; }
.rw-badge--safe { background: #24BF58; }
.reg-wipe__bar { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--text); z-index: 5; }
.reg-wipe__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--border-medium); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-secondary); }
.reg-ba__count { font-size: 13px; color: var(--text-muted); margin-top: 12px; }
.reg-ba__count b { color: var(--text); }

@media (max-width: 560px) {
  .reg-section { padding: 22px 18px; }
  .rw-face { padding: 0 10px; gap: 8px; }
  .rw-text { font-size: 13px; }
  .rw-text small { font-size: 10px; }
  .rw-badge { padding: 3px 7px; }
}

/* ── 현지화 상세 페이지 생성 (.loc-card) ── */
.loc-card { width: 100%; max-width: 800px; font-family: var(--font-sans); background: var(--surface); border: 1px solid var(--border-medium); border-radius: 20px; box-shadow: var(--shadow-md); padding: 24px 26px; }
.loc-head { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 18px; }
.loc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.loc-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text-muted); padding: 10px 16px; margin-bottom: -1px; cursor: pointer; transition: color .15s ease; }
.loc-tab:hover { color: var(--text); }
.loc-tab[aria-selected="true"] { color: var(--green-hover); border-bottom-color: var(--green); }
.loc-panel { padding: 24px 0 4px; }
.loc-detail { max-width: 380px; margin: 0 auto; text-align: center; }
.loc-photo { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; background: linear-gradient(160deg, #EAF6EF, #F6FBF8); border: 1px solid var(--border-subtle); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.loc-photo__ph { color: #9CD3B3; }
.loc-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc-title { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.4; }
.loc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green-hover); background: var(--green-soft); padding: 7px 14px; border-radius: var(--radius-pill); margin-top: 18px; }

@media (max-width: 560px) {
  .loc-card { padding: 22px 18px; }
  .loc-tab { padding: 10px 12px; font-size: 14px; }
}

/* ── 원클릭 출시 (.launch-card) + 토스트 ── */
.launch-card { position: relative; overflow: hidden; width: 100%; max-width: 800px; font-family: var(--font-sans); background: var(--surface); border: 1px solid var(--border-medium); border-radius: 20px; box-shadow: var(--shadow-md); padding: 24px 26px; }
.launch-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.launch-head__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; color: #5B83E0; flex: none; }
.launch-head__title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.launch-head__sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.launch-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; appearance: none; border: 0; background: #18181B; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; padding: 12px 22px; border-radius: 12px; cursor: pointer; transition: background .15s ease, transform .1s ease; flex: none; }
.launch-btn:hover { background: #000; }
.launch-btn:active { transform: scale(.97); }

.ch-row { display: flex; align-items: center; gap: 18px; border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; margin-bottom: 12px; }
.ch-row--top { border: 1.5px solid var(--green); }
.ch-body { flex: 1; min-width: 0; }
.ch-row--disabled { opacity: .5; filter: grayscale(1); pointer-events: none; }
.ch-badge { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff; flex: none; }
.ch-rank { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.ch-row--top .ch-rank { color: var(--green-hover); }
.ch-name { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.ch-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.ch-desc b { color: var(--text); font-weight: 700; }

.toast { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(12px); display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: #fff; font-size: 14px; font-weight: 700; padding: 14px 22px; border-radius: 12px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; z-index: 60; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { color: #44ED7A; flex: none; }

@media (max-width: 560px) {
  .launch-card { padding: 22px 18px; }
  .ch-row { flex-wrap: wrap; gap: 12px 14px; padding: 16px 18px; }
  .ch-badge { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; }
  .ch-name { font-size: 16px; }
  .launch-btn { order: 3; width: 100%; margin-left: 0; justify-content: center; }
}

/* ── 채팅 목업 (.chat-card) ── */
/* 셸: 폭을 담당하고, 탭을 카드 위에 별도로 띄운다 */
.chat-shell { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; font-family: var(--font-sans); --chat-blue: #2563EB; }
.chat-card {
  width: 100%; height: 640px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-medium);
  border-radius: 18px; box-shadow: var(--shadow-md);
}

/* 에이전트 전환 탭 (카드 밖 · 가로 스크롤) */
.chat-tabs { display: flex; gap: 6px; padding: 2px 2px 4px; overflow-x: auto; flex: none; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tab { flex: none; appearance: none; border: 1px solid var(--border-medium); background: var(--surface); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.chat-tab:hover { color: var(--text); }
.chat-tab[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #fff; }

/* 헤더 */
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex: none; }
.chat-ava { position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--chat-blue); flex: none; }
.chat-ava--sm { width: 30px; height: 30px; }
.chat-head__meta { min-width: 0; flex: 1; }
.chat-head__name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.chat-close { appearance: none; border: 0; background: transparent; color: var(--text-muted); padding: 4px; border-radius: 8px; cursor: pointer; display: flex; transition: color .15s ease, background .15s ease; flex: none; }
.chat-close:hover { color: var(--text); background: var(--surface-subtle); }

/* 대화 영역 */
.chat-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 20px 16px; background: #ECEDE5; }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-msg__col { min-width: 0; }
.chat-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 4px 16px 16px 16px; padding: 12px 16px; font-size: 14px; line-height: 1.55; color: var(--text); box-shadow: var(--shadow-sm); max-width: 280px; }
.chat-bubble b { font-weight: 700; color: var(--green-hover); }
.chat-source { display: flex; align-items: center; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-muted); }
.chat-source svg { flex: none; opacity: .65; }

/* 셀러(보낸) 메시지 — 오른쪽 정렬 */
.chat-msg--me { flex-direction: row-reverse; }
.chat-msg--me .chat-msg__col { display: flex; flex-direction: column; align-items: flex-end; }
.chat-bubble--me { background: var(--chat-blue); border-color: transparent; border-radius: 16px 4px 16px 16px; color: #fff; }

/* 입력 영역 */
.chat-foot { flex: none; padding: 12px 16px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.chat-input { display: flex; align-items: center; gap: 10px; }
.chat-input__field { flex: 1; min-width: 0; appearance: none; border: 1px solid var(--border-medium); border-radius: var(--radius-pill); background: var(--surface-subtle); font-family: inherit; font-size: 14px; color: var(--text); padding: 11px 18px; outline: none; transition: border-color .15s ease, background .15s ease; }
.chat-input__field::placeholder { color: var(--text-muted); }
.chat-input__field:focus { border-color: var(--chat-blue); background: var(--surface); }
.chat-send { width: 40px; height: 40px; flex: none; appearance: none; border: 0; border-radius: 50%; background: var(--chat-blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.chat-send:hover { background: #1D4FD8; }
.chat-send:active { transform: scale(.94); }

@media (max-width: 560px) {
  .rc-opps { grid-template-columns: 1fr; }
  .rc-cols { grid-template-columns: 1fr; }
  .chat-card { height: 560px; }
}

/* ── 처리 속도 비교 바 (.speed-card · 평균 3일 vs 최대 2주) ── */
/* --speed-w 하나로 채운 막대 폭과 아래 콜아웃 위치를 함께 맞춘다(어긋남 방지) */
.speed-card { width: 100%; max-width: 800px; font-family: var(--font-sans); --speed-w: clamp(128px, 26%, 220px); }
.speed-bar {
  position: relative; display: flex; align-items: stretch;
  height: clamp(72px, 12vw, 92px);
  border-radius: 10px; overflow: hidden; background: #E4E7EC;
}
.speed-fill {
  flex: none; width: 0;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 16px;
  background: var(--green);
  transition: width .9s cubic-bezier(.16, 1, .3, 1);
}
.speed-card.is-in .speed-fill { width: var(--speed-w); }
.speed-rest { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 0 22px; }
.speed-label { font-size: clamp(18px, 3vw, 26px); font-weight: 800; color: var(--text); letter-spacing: -.02em; white-space: nowrap; }
.speed-label small { font-size: .55em; font-weight: 700; margin-right: 6px; letter-spacing: 0; color: var(--text-secondary); }
.speed-rest .speed-label { color: var(--text-secondary); }
.speed-rest .speed-label small { color: var(--text-muted); }

/* 평균 지점 콜아웃 — 아래 화살표 + 브랜드 */
.speed-mark { position: relative; height: 56px; margin-top: 2px; }
.speed-mark__inner {
  position: absolute; top: 0; left: var(--speed-w);
  transform: translateX(-50%) translateY(-8px);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  opacity: 0; transition: opacity .45s ease .55s, transform .45s ease .55s;
}
.speed-card.is-in .speed-mark__inner { opacity: 1; transform: translateX(-50%) translateY(0); }
.speed-mark__arrow { color: var(--green); display: block; }
.speed-mark__brand { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.speed-mark__brand img { width: 22px; height: 22px; object-fit: contain; }
.speed-mark__brand b { font-size: 17px; font-weight: 800; color: var(--green-hover); letter-spacing: -.02em; }

@media (max-width: 560px) {
  .speed-card { --speed-w: clamp(96px, 30%, 220px); }
  .speed-bar { height: 58px; border-radius: 8px; }
  .speed-fill { padding: 0 12px; }
  .speed-rest { padding: 0 14px; }
  .speed-label { font-size: 15px; }
  .speed-label small { font-size: .6em; margin-right: 4px; }
  .speed-mark { height: 46px; }
  .speed-mark__arrow { width: 16px; }
  .speed-mark__brand b { font-size: 14px; }
  .speed-mark__brand img { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .speed-fill, .speed-mark__inner { transition: none; }
}

/* ── 제품 대시보드 셸 (.dash-card · STAGE 진행 브레드크럼 + 단계별 결과) ── */
/* 정적 이미지용 카드 — 인터랙션 없음 */
/* 모바일: 리플로우 대신 데스크톱 레이아웃을 통째로 축소(zoom·JS가 폭에 맞춤) */
/* 고정폭(880px) 레이아웃을 zoom으로 축소하므로, iOS 자동 폰트 확대를 꺼 텍스트가 커지고 겹치는 것을 방지 */
.dash-card { width: 100%; max-width: 880px; font-family: var(--font-sans); pointer-events: none; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.dash {
  width: 880px;
  display: grid; grid-template-columns: 210px 1fr;
  background: var(--surface);
  border: 1px solid var(--border-medium); border-bottom: 0;
  border-radius: 16px 16px 0 0; overflow: hidden;
}

/* 사이드바 (정적 · 카드 높이에 맞춰 내부 스크롤) */
.dash-side { min-height: 0; overflow-y: auto; scrollbar-width: none; background: #FAFBFC; border-right: 1px solid var(--border); padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; }
.dash-side::-webkit-scrollbar { display: none; }
.dash-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.dash-brand img { width: 22px; height: 22px; object-fit: contain; }
.dash-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--green); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.dash-group { display: flex; flex-direction: column; gap: 2px; }
.dash-group__t { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; padding: 0 8px 6px; }
.dash-nav { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.dash-nav:hover { background: #EEF1F4; }
.dash-nav.is-active { background: var(--green-soft); color: var(--text); font-weight: 700; }
.dash-nav__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.dash-nav.is-active .dash-nav__dot { opacity: 1; background: var(--green); }

/* 메인 */
.dash-main { position: relative; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
/* 결과 페이지(뒤 배경) — 흐리게 + 채도↓로 죽여서 사이드바·챗에 집중 */
.dash-content { display: flex; flex-direction: column; gap: 12px; filter: blur(1.2px) saturate(.5); opacity: .85; }
.dash-eyebrow { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
.dash-eyebrow b { color: var(--green-hover); }
.dash-title { font-size: clamp(16px, 2vw, 20px); font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1.3; }
.dash-desc { font-size: 13px; color: var(--text-muted); margin-top: -8px; }

/* 6단계 브레드크럼 (클릭으로 현재 단계 전환) */
.dash-steps { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dash-steps::-webkit-scrollbar { display: none; }
.dash-step { flex: none; appearance: none; background: transparent; border: 0; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--radius-pill); cursor: pointer; color: var(--text-muted); transition: background .15s ease, color .15s ease; }
.dash-step__n { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; }
.dash-step__l { font-size: 13px; font-weight: 600; white-space: nowrap; }
.dash-step.is-done { color: var(--green-hover); }
.dash-step.is-done .dash-step__n { background: var(--green); border-color: var(--green); color: #fff; }
.dash-step.is-active { color: var(--text); background: var(--surface-subtle); }
.dash-step.is-active .dash-step__n { background: var(--text); border-color: var(--text); color: #fff; }

/* 단계 결과 — 좌: 지표 / 우: 계기판(게이지) */
.dash-result { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-subtle); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; }
.dash-result__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-result__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #fff; padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.dash-result__hl { font-size: 16px; font-weight: 700; color: var(--text); }
.dash-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.dash-chip__l { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
.dash-chip__v { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }

/* 계기판 (대시보드 전용 · 새로 작성) */
.dash-gauge { position: relative; width: 140px; flex: none; align-self: center; }
.dash-gauge__svg { display: block; width: 100%; height: auto; }
.dash-gauge__num { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; line-height: 1; }
.dash-gauge__num b { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dash-gauge__num span { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }

/* 검색 추이 (대시보드 전용 · 새로 작성 · 빈 하단 채움) */
.dash-trend { border-top: 1px solid var(--border); padding-top: 12px; }
.dash-trend__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dash-trend__ic { color: #1A56DB; flex: none; }
.dash-trend__title { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-trend__src { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--green-hover); background: var(--green-soft); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.dash-trend__sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.dash-trend__chart { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.dash-bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.dash-bar__fill { width: 100%; max-width: 26px; min-height: 3px; border-radius: 5px 5px 0 0; background: #5B83E0; }
.dash-bar.is-peak .dash-bar__fill { background: var(--green); }
.dash-bar__m { font-size: 10px; color: var(--text-muted); }
.dash-bar.is-peak .dash-bar__m { color: var(--green-hover); font-weight: 700; }

/* 플로팅 에이전트 아바타 (챗 토글 버튼) */
.dash-agent { position: absolute; right: 16px; bottom: 16px; z-index: 21; width: 46px; height: 46px; padding: 0; border-radius: 50%; background: #fff; border: 1px solid var(--border-medium); box-shadow: var(--shadow-md); overflow: hidden; display: grid; place-items: center; cursor: pointer; appearance: none; }
.dash-agent img { width: 38px; height: 38px; object-fit: contain; }

/* 대시보드 위 플로팅 챗 (출시 매니저) — 메시지·입력은 .chat-* 재사용 */
.dash-chat {
  position: absolute; right: 16px; bottom: 74px; z-index: 20;
  width: 300px; max-height: 320px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-medium);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  --chat-blue: #2563EB;
}
.dash-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex: none; }
.dash-chat__name { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-chat__close { appearance: none; border: 0; background: transparent; color: var(--text-muted); padding: 4px; border-radius: 8px; cursor: pointer; display: flex; }
.dash-chat__close:hover { color: var(--text); background: var(--surface-subtle); }
.dash-chat .chat-body { padding: 16px 14px; gap: 14px; scrollbar-width: none; }
.dash-chat .chat-body::-webkit-scrollbar { display: none; }
.dash-chat .chat-bubble { font-size: 13px; }


/* ── 커넥터 흐름 (.conn-card · 기존채널 → Preselling → 글로벌 시장) ──
   레퍼런스와 차별화: 캡슐 제거 · 허브 강조(크게/입체) · 라벨은 pill 칩 · 흐르는 점(dot) */
.conn-card { width: 100%; max-width: 760px; font-family: var(--font-sans); padding: 16px 0 40px; }
.conn { display: flex; justify-content: center; }
.conn-stage {
  display: flex; align-items: center; justify-content: center;
}

/* 노드 — 사이드는 중립 원, 허브(Preselling)는 더 크고 입체적으로 (연결 바 위에 올라앉음) */
.conn-node { position: relative; z-index: 2; flex: none; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; font-weight: 800; letter-spacing: .02em; word-break: keep-all; }
.conn-node--kr, .conn-node--global { width: clamp(74px, 9vw, 112px); background: #fff; border: 1px solid var(--border-medium); color: var(--text); box-shadow: var(--shadow-sm); font-size: clamp(12px, 1.4vw, 17px); }
.conn-node--hub { width: clamp(94px, 12vw, 144px); background: var(--green); color: var(--text); box-shadow: 0 16px 36px -14px rgba(36, 191, 88, .55); }
.conn-hub__name { font-size: clamp(15px, 1.7vw, 22px); font-weight: 800; letter-spacing: -.01em; }

/* 흐름 — 원과 원을 잇는 연결 바(양끝이 원 뒤로 겹쳐 완전 연결) 위로 하이라이트가 흐른다.
   좌→우 순차 딜레이로 전체가 하나의 흐름처럼 슉 지나간다 */
.conn-flow { position: relative; z-index: 1; margin: 0 -12px; display: flex; align-items: center; justify-content: center; }
.conn-flow__label {
  position: relative; white-space: nowrap; min-width: clamp(90px, 10vw, 124px); padding: 8px 16px; border-radius: 8px;
  text-align: center; font-size: clamp(11px, 1.15vw, 13px); font-weight: 600; color: var(--text-secondary); line-height: 1.35;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, transparent, rgba(36, 191, 88, .26), transparent), var(--surface-subtle);
  background-size: 55% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0, 0 0;
  animation: conn-sweep 2.6s ease-in-out infinite;
}
.conn-flow--out .conn-flow__label { animation-delay: 1s; }
.conn-flow__label b { font-weight: 800; color: var(--text); }
@keyframes conn-sweep {
  0% { background-position: -60% 0, 0 0; }
  40% { background-position: 160% 0, 0 0; }
  100% { background-position: 160% 0, 0 0; }
}

@media (max-width: 560px) {
  .conn-node--kr, .conn-node--global { width: 54px; font-size: 11px; }
  .conn-node--hub { width: 70px; }
  .conn-hub__name { font-size: 12px; }
  .conn-flow { margin: 0 -8px; }
  .conn-flow__label { min-width: 60px; font-size: 10px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .conn-flow__label { animation: none; }
}

/* ── Preselling 6단계 파이프라인 (.pl-card · 번호 타임라인 + 아이콘) ── */
.pl-card { width: 100%; max-width: 960px; font-family: var(--font-sans); overflow-x: auto; scrollbar-width: none; padding-bottom: 30px; }
.pl-card::-webkit-scrollbar { display: none; }
/* mobile: 6단계가 화면보다 넓어 가로 스크롤될 때 스와이프 가능함을 얇은 스크롤바로 알림 */
@media (max-width: 720px) {
  .pl-card { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.22) transparent; }
  .pl-card::-webkit-scrollbar { display: block; height: 4px; }
  .pl-card::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 4px; }
}
.pl { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); min-width: 680px; align-items: start; margin: 0; padding: 0; list-style: none; }
/* 번호를 잇는 가로 라인(첫~마지막 번호 중심) */
.pl::before { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: #CBD0D6; z-index: 0; }
.pl-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
/* 번호 사이 화살촉 */
.pl-step:not(:last-child)::after {
  content: ""; position: absolute; top: 14px; left: 100%; transform: translate(-50%, -50%); z-index: 1;
  border-left: 6px solid #CBD0D6; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.pl-num {
  position: relative; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  background: var(--text); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center;
}
.pl-label { margin-top: 16px; font-size: clamp(13px, 1.4vw, 16px); font-weight: 700; color: var(--text); letter-spacing: -.01em; word-break: keep-all; }
.pl-icon {
  margin-top: 22px; width: clamp(84px, 10vw, 120px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: #475569;
  background: rgba(148, 163, 184, 0.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 30px -10px rgba(16, 24, 40, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
.pl-icon > * { grid-area: 1 / 1; }
.pl-icon__svg { width: 42%; height: 42%; }
.pl-icon__img { width: 66%; height: 66%; object-fit: contain; }

/* ── URL 가져오기 흐름 (.flow-card · 입력 → 로딩 → 상품 정보 자동 재생) ── */
/* 모바일: 리플로우 없이 데스크톱 레이아웃(가로세로 비율)을 그대로 축소(zoom·JS) */
.flow-card { position: relative; width: 100%; max-width: 600px; font-family: var(--font-sans); padding: 6px 0 16px; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.flow-fit { width: 600px; }

/* 화면 전환 (result가 높이 기준, 나머지는 겹쳐 크로스페이드) */
.flow-stage { position: relative; min-height: 320px; }
.flow-screen { display: grid; align-content: center; transition: opacity .45s ease, transform .45s ease; }
.flow-screen--input, .flow-screen--loading { position: absolute; inset: 0; }
.flow-screen:not(.is-on) { opacity: 0; transform: translateY(8px); pointer-events: none; }
.flow-screen.is-on { opacity: 1; transform: none; }

.flow-panel { max-width: 620px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); padding: 22px 24px; }

/* 입력 화면 */
.flow-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.flow-panel__ic { color: var(--green); flex: none; }
.flow-panel__title { font-size: 17px; font-weight: 800; color: var(--text); }
.flow-field__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.flow-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid #BFE6CC; border-radius: 12px; box-shadow: 0 0 0 3px rgba(36, 191, 88, .10); }
.flow-input__url { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-caret { width: 1.5px; height: 18px; background: var(--green); flex: none; animation: flow-blink 1.05s step-end infinite; }
@keyframes flow-blink { 50% { opacity: 0; } }
.flow-hint { font-size: 13px; color: var(--text-muted); margin-top: 10px; }

/* 배지 */
.flow-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; flex: none; }
.flow-badge--11st { color: #E01F26; background: #FDECEC; padding: 4px 11px 4px 5px; border-radius: var(--radius-pill); }
.flow-badge--11st b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; margin-right: 6px; background: #E01F26; color: #fff; border-radius: 5px; font-size: 11px; font-weight: 800; }

/* 버튼 */
.flow-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; }
.flow-btn { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 10px; padding: 11px 18px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.flow-btn--ghost { background: var(--surface); border-color: var(--border-medium); color: var(--text); }
.flow-btn--primary { background: #15803D; color: #fff; }

/* 로딩 */
.flow-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.flow-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--border-medium); border-top-color: var(--green); animation: flow-spin .8s linear infinite; }
@keyframes flow-spin { to { transform: rotate(360deg); } }
.flow-loading__text { font-size: 14px; font-weight: 600; color: var(--text-secondary); }

/* 결과 화면 */
.flow-panel__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.flow-ok { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--green-hover); background: var(--green-soft); padding: 7px 14px; border-radius: var(--radius-pill); }
.flow-hr { height: 1px; background: var(--border); margin-bottom: 18px; }
.flow-lead { display: flex; gap: 18px; margin-bottom: 20px; }
.flow-thumb { position: relative; width: 92px; height: 92px; flex: none; border-radius: 12px; background: var(--surface-subtle); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; color: #B7BEC7; }
.flow-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.flow-lead__meta { min-width: 0; }
.flow-k { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.flow-tag { font-size: 10px; font-weight: 700; color: var(--green-hover); background: var(--green-soft); padding: 2px 7px; border-radius: var(--radius-pill); }
.flow-pname { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.01em; margin-bottom: 12px; }
.flow-price { font-size: 18px; font-weight: 800; color: var(--text); }
.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.flow-v { font-size: 15px; font-weight: 700; color: var(--text); word-break: keep-all; }

@media (prefers-reduced-motion: reduce) {
  .flow-screen { transition: none; }
  .flow-spinner { animation: none; }
  .flow-caret { animation: none; }
}