/* ================================================================
   GEO Studio — Design System v3 "Bold Light" (토스 문법)
   연회색 캔버스 · 보더리스 흰 카드 · 큰 타이포 · 블루 액션
   ================================================================ */
:root {
  --bg: #F2F4F6;
  --paper: #FFFFFF;
  --ink: #191F28;
  --ink-soft: #4E5968;
  --muted: #8B95A1;
  --blue: #3182F6;
  --blue-soft: #E8F3FF;
  --blue-dark: #1B64DA;
  --green: #0BB25F;
  --green-soft: #E5F7EE;
  --orange: #E8730C;
  --orange-soft: #FFF3E0;
  --red: #F04452;
  --red-soft: #FDEBE8;
  --violet: #6B4EFF;
  --fill: #F2F4F6;
  --fill-deep: #E9EDF1;
  --line: #EDF0F3;
  --line-strong: #E2E6EA;
  --line-hover: #CBD3DA;
  --head: #191F28;
  --radius: 16px;
  --shadow: 0 2px 10px rgba(0, 27, 55, .04);
}
[data-theme="dark"] {
  --bg: #111317;
  --paper: #1C2027;
  --ink: #E7EAEE;
  --ink-soft: #B6BDC6;
  --muted: #7E8794;
  --blue: #4593FC;
  --blue-soft: #1D2C42;
  --blue-dark: #5CA1FF;
  --green: #3DCB82;
  --green-soft: #17301F;
  --orange: #F0912C;
  --orange-soft: #33270F;
  --red: #F26670;
  --red-soft: #391F22;
  --violet: #8A70FF;
  --fill: #262B33;
  --fill-deep: #2F353E;
  --line: #262B32;
  --line-strong: #363D46;
  --line-hover: #4A525C;
  --head: #0C0E12;
  --shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
* { box-sizing: border-box; }
/* overscroll-behavior: 맥 트랙패드 고무줄 바운스 차단 — 바운스 시 sticky 헤더가 딸려 움직이는 문제 방지 */
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  overscroll-behavior-y: none;
  font-family: 'Pretendard Variable', Pretendard, 'Malgun Gothic', -apple-system, sans-serif;
  font-size: 15px; line-height: 1.6; letter-spacing: -.015em;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--blue); text-decoration-thickness: 1px; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: 20px; font-weight: 800; }

/* ---------------- 전역 프로그레스 바 ---------------- */
#topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
          background: transparent; opacity: 0; pointer-events: none;
          transition: opacity .2s; }
#topbar.active { opacity: 1; }
.topbar-fill { height: 100%; width: 36%; border-radius: 99px;
               background: var(--blue); }
#topbar.active .topbar-fill { animation: topbar-slide 1.1s ease-in-out infinite; }
@keyframes topbar-slide {
  0% { transform: translateX(-40%); }
  50% { transform: translateX(160%); }
  100% { transform: translateX(280%); }
}
.btn-loading { pointer-events: none; opacity: .8; }
.btn-loading::after { content: ''; display: inline-block; width: 13px; height: 13px;
  margin-left: 8px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .15); border-top-color: currentColor;
  animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------------- 상단 바 ---------------- */
body > header {
  position: sticky; top: 0; z-index: 50;
  background: var(--head);
  padding: 0 28px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { color: #fff; text-decoration: none; font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.brand span { color: #4593FC; }
header nav { display: flex; align-items: center; gap: 22px; }
header nav a { color: #D6DBE1; text-decoration: none; font-size: 14px; font-weight: 600; }
header nav a:hover { color: #fff; }
.tok-chip { background: rgba(255,255,255,.08); color: #D6DBE1; font-size: 12px;
            font-weight: 700; border-radius: 99px; padding: 5px 12px; cursor: default;
            white-space: nowrap; }
.tok-chip.credit { background: rgba(66,196,120,.18); color: #9BE7BC;
                   text-decoration: none; transition: background .12s; }
.tok-chip.credit:hover { background: rgba(66,196,120,.30); }
.tok-chip.credit.warn, .tok-chip.credit.low { background: rgba(255,176,32,.20); color: #FFD79A; }
.tok-chip.credit.out { background: rgba(255,90,90,.22); color: #FFB3B3; }
.theme-btn { background: rgba(255,255,255,.08); border: 0; border-radius: 10px;
             font-size: 15px; padding: 6px 10px; cursor: pointer; line-height: 1;
             transition: background .12s; }
.theme-btn:hover { background: rgba(255,255,255,.16); }
header nav .cta { background: var(--blue); color: #fff; padding: 9px 18px;
           border-radius: 12px; font-weight: 700; }
header nav .cta:hover { background: var(--blue-dark); color: #fff; }
header nav .who { font-size: 13px; color: #98A2AE; }

main { max-width: 1280px; width: 100%; margin: 32px auto; padding: 0 24px; flex: 1; }
footer {
  background: var(--head); text-align: center;
  padding: 36px 24px 32px; margin-top: 48px;
  /* 사이드바(z-index 40) 아래에 둔다 — 푸터가 메뉴를 가리지 않는다 (2026-09-30) */
  position: relative; z-index: 30;
}
/* 사이드바가 있는 작업 화면에는 푸터를 두지 않는다 (2026-09-30 영주님 결정) */
body:has(.layout > .sidebar) footer { display: none; }
.foot-brand { font-size: 17px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.foot-brand span { color: #4593FC; }
.foot-tag { font-size: 13px; color: #8B95A1; margin-top: 6px; }
.foot-copy { font-size: 12px; color: #6B7684; margin-top: 14px; }

.flash {
  background: var(--blue-soft); color: var(--blue-dark);
  border: 0; border-radius: 14px; padding: 14px 18px; margin-bottom: 18px;
  font-size: 14px; font-weight: 600;
}

/* ---------------- 레이아웃 + 사이드바 ---------------- */
.layout { display: flex; flex: 1; width: 100%; }
.sidebar {
  width: 240px; flex: none; margin: 0; padding: 28px 18px;
  background: var(--paper); border: 0; border-right: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; gap: 18px;
  /* 화면에 완전 고정 — 본문이 늘어나거나 스크롤돼도 절대 움직이지 않는다 */
  position: fixed; top: 60px; left: 0; bottom: 0; overflow-y: auto; z-index: 40;
}
/* fixed로 빠진 사이드바 자리만큼 본문을 밀어준다 */
.layout:has(> .sidebar) { padding-left: 240px; }
.side-back { font-size: 13px; color: var(--muted); text-decoration: none; font-weight: 700; }
.side-back:hover { color: var(--ink); }
.side-site { padding: 0 6px; display: flex; gap: 10px; align-items: center; }
.side-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: contain;
             background: #fff; border: 1px solid var(--line-strong); padding: 4px; flex: none; }
.side-logo.fallback { display: flex; align-items: center; justify-content: center;
                      background: linear-gradient(135deg, #3182F6, #6B4EFF);
                      border: 0; color: #fff;
                      font-size: 15px; font-weight: 800; padding: 0; }
.side-site-name { font-weight: 800; font-size: 17px; line-height: 1.3; letter-spacing: -.02em; }
.side-site-type { font-size: 12px; color: var(--muted); margin-top: 3px; }
.side-menu { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.side-menu a { display: block; padding: 11px 14px; border-radius: 12px; text-decoration: none;
               text-align: left; color: var(--ink-soft); font-size: 14.5px; font-weight: 700; }
.side-menu a:hover { background: var(--fill); color: var(--ink); }
.side-menu a.on { background: var(--blue-soft); color: var(--blue); }
main.with-side { flex: 1; max-width: 1560px; margin: 32px auto; padding: 0 40px; }
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .layout:has(> .sidebar) { padding-left: 0; }
  .sidebar { width: auto; height: auto; position: static; border-right: 0;
             border-bottom: 1px solid var(--line); padding: 16px;
             flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ---------------- 화면 머리 ---------------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start;
             gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-sub { font-size: 14.5px; color: var(--muted); margin: 0; }
.crumb { font-size: 13px; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--blue); }

/* ---------------- 카드(구 fieldset) ---------------- */
fieldset {
  border: 0; border-radius: 20px;
  background: var(--paper); box-shadow: var(--shadow);
  margin: 0 0 14px; padding: 22px 26px 24px;
}
legend {
  float: left; width: 100%; padding: 0; margin: 0 0 12px;
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
}
legend + * { clear: both; }
.legend-sub { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 8px; }
.autofill-box { background: var(--blue-soft); box-shadow: none; }
.autofill-box legend { color: var(--blue-dark); }

/* ---------------- 폼 요소 ---------------- */
label { display: block; font-size: 13.5px; font-weight: 700; margin: 14px 0 6px; color: var(--ink-soft); }
input, textarea, select {
  width: 100%; padding: 13px 14px; border: 1.5px solid transparent;
  border-radius: 14px; font: inherit; font-size: 15px; background: var(--fill);
  transition: border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: #AEB8C2; }
input:hover, textarea:hover, select:hover { background: var(--fill-deep); }
input:focus, textarea:focus, select:focus {
  outline: none; background: var(--paper); border-color: var(--blue);
}
textarea { min-height: 76px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.hint { font-size: 13px; color: var(--muted); margin: 5px 0 8px; }
.hint-inline { font-size: 12px; font-weight: 500; color: var(--muted); }
/* 안내 코멘트 — 입력창(회색 배경)과 헷갈리지 않게 왼쪽 파란 띠 + 옅은 파랑 배경 */
.why {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.65;
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border: 0; border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0; padding: 11px 16px; margin: 4px 0 18px;
}
.hidden-store { display: none; }

/* ---------------- 버튼 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--blue); color: #fff; border: 0;
  border-radius: 13px; padding: 12px 22px; font: inherit; font-size: 14.5px;
  font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background .12s, transform .12s;
}
.btn:hover { background: var(--blue-dark); }
.btn:active { transform: scale(.98); }
.btn.small { padding: 9px 16px; font-size: 13.5px; border-radius: 11px; }
.btn.tiny { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.btn.ghost { background: var(--fill); color: var(--ink-soft); }
.btn.ghost:hover { background: var(--fill-deep); color: var(--ink); }
.btn.danger { background: var(--red); }
.btn.danger:hover { background: #D63A47; }
.btn.danger-ghost { background: var(--fill); color: var(--red); }
.btn.danger-ghost:hover { background: var(--red-soft); }
.btn.ai { background: var(--violet); }
.btn.ai:hover { background: #5A3EE8; }
.row-actions { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }

/* ---------------- 탭 (세그먼트) ---------------- */
.tabs {
  display: inline-flex; gap: 4px; background: var(--fill-deep);
  border-radius: 14px; padding: 4px; margin-bottom: 20px; border: 0;
}
.tab {
  background: transparent; border: 0; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--muted); padding: 9px 20px; cursor: pointer; border-radius: 11px;
  transition: all .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0,27,55,.08); }
.tab-count {
  display: inline-block; background: var(--blue); color: #fff;
  font-size: 11px; border-radius: 99px; padding: 1px 8px; margin-left: 4px; font-weight: 800;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------------- 표 ---------------- */
table { width: 100%; border-collapse: collapse; background: var(--paper);
        border-radius: 14px; overflow: hidden; }
th, td { padding: 11px 14px; font-size: 14px; text-align: left;
         border-bottom: 1px solid var(--line); }
th { background: var(--paper); font-size: 12.5px; font-weight: 700; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--fill); }

/* ---------------- 대시보드 카드 ---------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--paper); border: 1.5px solid transparent; border-radius: 20px;
  padding: 24px; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-2px); border-color: var(--blue); }
[data-href] { cursor: pointer; }
.card-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.site-logo { width: 52px; height: 52px; border-radius: 15px; object-fit: contain;
             background: #fff; border: 1px solid var(--line); padding: 7px; flex: none; }
.site-logo.fallback { display: flex; align-items: center; justify-content: center;
                      background: linear-gradient(135deg, #3182F6, #6B4EFF);
                      border: 0; color: #fff;
                      font-size: 21px; font-weight: 800; padding: 0; }
.hide { display: none !important; }
.card-id { min-width: 0; }
.card h3 { margin: 0 0 3px; font-size: 17.5px; letter-spacing: -.02em;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card h3 a { text-decoration: none; color: var(--ink); }
.card-url { font-size: 13px; color: var(--muted);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-foot { display: flex; align-items: center; gap: 6px; margin-top: 16px;
             padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.card-date { margin-left: auto; font-size: 12px; color: var(--muted); }
.badge { display: inline-block; background: var(--fill); color: var(--ink-soft);
         font-size: 12px; font-weight: 700; border-radius: 99px; padding: 4px 12px;
         white-space: nowrap; }
.badge.count { background: var(--blue-soft); color: var(--blue); }

/* ---------------- 사이트 평균 스코어 배너 ---------------- */
.avg-banner { display: flex; align-items: center; justify-content: space-between;
              gap: 16px; background: #fff; border-radius: 20px;
              padding: 22px 28px; margin: 0 0 16px; flex-wrap: wrap; }
.avg-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.avg-label { font-size: 14px; font-weight: 700; color: var(--muted);
             margin-right: 10px; }
.avg-num { font-size: 46px; font-weight: 900; color: var(--blue);
           line-height: 1; letter-spacing: -0.02em; }
.avg-unit { font-size: 18px; font-weight: 800; color: var(--blue); }
.avg-arrow { font-size: 22px; color: var(--muted); margin: 0 4px; }
.avg-sim { font-size: 26px; font-weight: 900; color: #1B7A4E; }
.avg-simcap { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.avg-side { font-size: 13px; font-weight: 600; color: var(--ink-soft);
            text-align: right; line-height: 1.5; }
.avg-hint { color: var(--muted); font-weight: 500; font-size: 12px; }

/* ---------------- 리스트 툴바 (검색·정렬) ---------------- */
.list-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
              margin: 0 0 14px; }
.search-box { position: relative; flex: 1; min-width: 240px; }
.search-box .s-ico { position: absolute; left: 14px; top: 50%;
                     transform: translateY(-50%); font-size: 14px; pointer-events: none; }
.search-box input { padding-left: 40px; border-radius: 99px;
                    background: var(--paper); border-color: var(--line-strong); }
.search-box input:hover { background: var(--paper); border-color: var(--line-hover); }
.search-box input:focus { border-color: var(--blue); }
.list-count { font-size: 12.5px; color: var(--muted); font-weight: 700; }

/* 커스텀 정렬 드롭다운 */
.sortdd { position: relative; }
.sortdd-btn { display: inline-flex; align-items: center; gap: 8px;
              background: var(--paper); border: 1.5px solid var(--line-strong);
              border-radius: 99px; padding: 11px 18px; font: inherit;
              font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
              cursor: pointer; transition: border-color .15s; }
.sortdd-btn:hover { border-color: var(--line-hover); }
.sortdd-caret { font-size: 10px; color: var(--muted); }
.sortdd-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
               background: var(--paper); border-radius: 16px; padding: 6px;
               min-width: 185px; display: none;
               box-shadow: 0 8px 28px rgba(0, 27, 55, .14); }
.sortdd-menu.open { display: block; }
.sortdd-item { display: flex; justify-content: space-between; align-items: center;
               gap: 14px; padding: 10px 14px; border-radius: 10px;
               font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
               cursor: pointer; white-space: nowrap; }
.sortdd-item:hover { background: var(--fill); color: var(--ink); }
.sortdd-item .sortdd-check { visibility: hidden; color: var(--blue); font-weight: 800; }
.sortdd-item.on { color: var(--blue); font-weight: 800; }
.sortdd-item.on .sortdd-check { visibility: visible; }

/* 폼 select → 커스텀 드롭다운 */
.fsel { position: relative; }
.fsel select { display: none; }
.fsel-btn { display: flex; width: 100%; align-items: center; justify-content: space-between;
            gap: 8px; background: var(--fill); border: 1.5px solid transparent;
            border-radius: 14px; padding: 13px 14px; font: inherit; font-size: 15px;
            color: var(--ink); cursor: pointer; text-align: left;
            transition: border-color .15s, background .15s; }
.fsel-btn:hover { background: var(--fill-deep); }
.fsel-btn.changed { border-color: var(--red); background: var(--red-soft); }
.fsel-caret { font-size: 11px; color: var(--muted); }
.fsel-menu { position: absolute; top: calc(100% + 6px); left: 0; right: auto; z-index: 40;
             min-width: 100%; width: max-content; max-width: 360px;
             background: var(--paper); border-radius: 16px; padding: 6px;
             display: none; max-height: 320px; overflow-y: auto;
             box-shadow: 0 8px 28px rgba(0, 27, 55, .14); }
/* 메뉴 항목은 한 줄 유지 — 좁은 select에서도 줄바꿈되지 않게 */
.fsel-item > span:first-child { white-space: nowrap; }
.fsel-btn > span:first-child { overflow: hidden; text-overflow: ellipsis;
                               white-space: nowrap; min-width: 0; }
.fsel-menu.open { display: block; }
.fsel-item { display: flex; justify-content: space-between; align-items: center;
             gap: 14px; padding: 10px 14px; border-radius: 10px;
             font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.fsel-item:hover { background: var(--fill); color: var(--ink); }
.fsel-item .fsel-check { visibility: hidden; color: var(--blue); font-weight: 800; }
.fsel-item.on { color: var(--blue); font-weight: 800; }
.fsel-item.on .fsel-check { visibility: visible; }

/* 항목 목록 종류 선택 */
.item-type-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }

/* 카테고리(대메뉴) 필터 칩 */
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.cat-chip { background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 99px;
            padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 700;
            color: var(--ink-soft); cursor: pointer; transition: all .12s; }
.cat-chip:hover { border-color: var(--blue); color: var(--blue); }
.cat-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip.cat { background: var(--blue-soft); color: var(--blue); }

/* ---------------- 페이지 카드 리스트 ---------------- */
.page-cards { display: flex; flex-direction: column; gap: 10px; }
.page-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border: 1.5px solid transparent; border-radius: 18px;
  padding: 18px 20px; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s, background .15s;
}
.page-card:hover { transform: translateY(-1px); border-color: var(--blue); }
.page-card.selected { border-color: var(--blue); background: var(--blue-soft); }
.page-card .num {
  flex: none; width: 38px; height: 38px; border-radius: 13px;
  background: var(--fill); color: var(--ink-soft); font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.page-card-body { flex: 1; min-width: 0; }
.page-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-card-top strong { font-size: 15.5px; letter-spacing: -.02em; }
.chip { background: var(--fill); color: var(--ink-soft);
        font-size: 12px; font-weight: 700; border-radius: 99px; padding: 3px 11px; }
.page-card-url { font-size: 12.5px; color: var(--muted); margin-top: 3px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-card-sum { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
.page-card-actions { flex: none; display: flex; gap: 6px; align-items: center; }
.page-card .pgsel { width: 18px; height: 18px; flex: none; accent-color: var(--blue); }

/* ---------------- 랜딩 ---------------- */
.hero { text-align: center; padding: 76px 0 46px; }
.hero h1 { font-size: 44px; margin: 0 0 16px; line-height: 1.25; letter-spacing: -.04em; }
.hero p { font-size: 17px; color: var(--muted); margin: 0 0 32px; }
.hero .cta-big { background: var(--blue); color: #fff; padding: 16px 38px;
                 border-radius: 16px; text-decoration: none; font-size: 16.5px; font-weight: 800;
                 display: inline-block; transition: background .12s; }
.hero .cta-big:hover { background: var(--blue-dark); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 44px 0; }
.feature { background: var(--paper); border: 0; border-radius: 20px;
           padding: 26px; box-shadow: var(--shadow); }
.feature h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -.02em; }
.feature p { margin: 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } }

/* ---------------- 인증 카드 ---------------- */
.auth-card { max-width: 440px; margin: 52px auto; background: var(--paper);
             border: 0; border-radius: 24px; padding: 36px;
             box-shadow: var(--shadow); }
.auth-card h1 { margin-top: 0; }
.auth-card .btn { width: 100%; margin-top: 20px; padding: 15px; font-size: 15.5px; }
.auth-alt { font-size: 13.5px; text-align: center; margin-top: 18px; color: var(--muted); }

/* ---------------- 상세 뷰 ---------------- */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
@media (max-width: 640px) { .kv-grid { grid-template-columns: 1fr; } }
.kv span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; font-weight: 700; }
.kv b { font-size: 15px; font-weight: 700; word-break: break-all; letter-spacing: -.01em; }
.quote { margin: 6px 0 12px; padding: 16px 18px; background: var(--blue-soft);
         border: 0; border-radius: 14px;
         font-size: 15.5px; font-weight: 700; color: var(--blue-dark); letter-spacing: -.01em; }
.para { font-size: 14.5px; line-height: 1.75; margin: 6px 0; color: var(--ink-soft); }
.item-list { margin: 4px 0; padding-left: 20px; }
.item-list li { font-size: 14.5px; margin: 6px 0; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-view { border: 0; border-radius: 16px; background: var(--fill);
           padding: 14px 16px; margin: 8px 0; }
.qa-q, .qa-a { display: flex; gap: 10px; font-size: 14.5px; align-items: flex-start; }
.qa-q { font-weight: 700; margin-bottom: 6px; }
.qa-view .lf-tag { margin-top: 0; }
.thumb { max-width: 320px; max-height: 180px; border: 0; border-radius: 14px; }
pre.code { background: #1E2530; color: #D5DCE5; border-radius: 14px; padding: 16px 18px;
           font-size: 12.5px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.apikey { font-family: ui-monospace, monospace; background: var(--fill);
          border: 0; border-radius: 12px;
          padding: 10px 14px; font-size: 13.5px; word-break: break-all; font-weight: 600; }
.dev-box { border: 0; border-radius: 16px; padding: 14px 18px;
           background: var(--fill); margin-top: 14px; box-shadow: none; }
.dev-box summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); }
.dev-box[open] summary { margin-bottom: 10px; }

/* ---------------- 편집기 ---------------- */
.lf { display: flex; flex-direction: column; gap: 8px; }
.lf-row { display: flex; gap: 8px; align-items: center; }
.lf-row .lf-in { flex: 1; }
.lf-rm { flex: none; width: 36px; height: 36px; border: 0;
         border-radius: 11px; background: var(--fill); color: var(--red);
         cursor: pointer; font-size: 12px; line-height: 1; transition: background .12s; }
.lf-rm:hover { background: var(--red-soft); }
.lf-add { align-self: flex-start; margin-top: 4px; }
.lf-qa { border: 0; border-radius: 16px; background: var(--fill);
         padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.lf-qa input, .lf-qa textarea { background: var(--paper); }
.lf-qa-head { display: flex; gap: 8px; align-items: flex-start; }
.lf-qa-head .lf-in { flex: 1; }
.lf-tag { flex: none; width: 28px; height: 28px; margin-top: 5px; border-radius: 9px;
          background: var(--ink); color: #fff; font-size: 12px; font-weight: 800;
          display: flex; align-items: center; justify-content: center; }
.item-card { border: 1.5px solid transparent; border-radius: 16px; background: var(--fill);
             padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
             transition: border-color .15s; }
.item-card:hover, .item-card:focus-within { border-color: var(--blue); }
.lf-qa { transition: border-color .15s; border: 1.5px solid transparent; }
.lf-qa:hover, .lf-qa:focus-within { border-color: var(--blue); }
.item-card input, .item-card textarea { background: var(--paper); }
.item-head { display: flex; gap: 10px; align-items: center; }
.item-name { flex: 1; font-weight: 700; }
.item-badge { flex: none; font-size: 11.5px; font-weight: 800; border-radius: 99px;
              padding: 4px 12px; background: var(--fill-deep); color: var(--muted); white-space: nowrap; }
.item-badge.is-product { background: var(--orange-soft); color: var(--orange); }
.item-badge.is-item { background: var(--blue-soft); color: var(--blue); }
.item-desc { min-height: 48px; }
.item-url { font-size: 13px; }

/* ---------------- 상태 뱃지 ---------------- */
.vbadge { display: inline-block; font-size: 12px; font-weight: 800;
          border-radius: 99px; padding: 3px 11px; white-space: nowrap; }
.v-적용됨 { background: var(--green-soft); color: var(--green); }
.v-부분적용 { background: var(--orange-soft); color: var(--orange); }
.v-미적용 { background: var(--red-soft); color: var(--red); }
.v-확인실패 { background: var(--fill-deep); color: var(--muted); }
.score-chip { display: inline-block; font-size: 12px; font-weight: 800;
              border-radius: 99px; padding: 3px 11px;
              background: var(--blue-soft); color: var(--blue); }
.score-chip.none { background: var(--fill-deep); color: var(--muted); }

/* ---------------- GEO 점수 ---------------- */
.score-hero { display: flex; align-items: center; gap: 28px; padding: 20px 8px; flex-wrap: wrap; }
.score-big { display: flex; flex-direction: column; align-items: center; }
.score-num { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.score-num.cur { color: var(--ink); }
.score-num.sim { color: var(--blue); }
.score-num.final { color: #1B7A44; }
.score-label { font-size: 13px; color: var(--muted); margin-top: 8px; font-weight: 700;
               text-align: center; line-height: 1.4; }
.score-arrow { font-size: 28px; color: var(--muted); font-weight: 800; }
.score-gain { background: var(--blue-soft); color: var(--blue); font-weight: 900;
              border-radius: 99px; padding: 9px 20px; font-size: 17px; }
.score-gain.final { background: #E3F6EC; color: #1B7A44; }
.score-hero-note { font-size: 13.5px; color: var(--ink-soft); background: var(--fill);
                   border-radius: 10px; padding: 10px 14px; margin: 2px 0 10px; line-height: 1.6; }
.score-group { border: 1px solid var(--line); border-radius: 16px;
               padding: 16px 18px; margin: 14px 0; }
.score-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.score-group-head > b { font-size: 16px; letter-spacing: -.02em; }
.score-group-pts { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--blue); }
.score-group-pts small { font-weight: 600; color: var(--muted); }
.score-group-desc { font-size: 13px; color: var(--muted); margin: 6px 0 10px; line-height: 1.6; }
.score-bar.big { height: 12px; margin: 4px 0 6px; }
.score-cat { border-top: 1px solid var(--line); padding: 16px 4px; }
.score-group .score-cat:first-of-type { border-top: 0; margin-top: 4px; }
.score-cat-head { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 8px; }
.score-bar { position: relative; height: 10px; background: var(--fill-deep);
             border-radius: 99px; overflow: hidden; margin-bottom: 10px; }
.score-bar-cur { position: absolute; top: 0; left: 0; height: 100%;
                 background: var(--ink); border-radius: 99px; }
.score-bar-sim { position: absolute; top: 0; left: 0; height: 100%;
                 background: #A9CBF7; border-radius: 99px; }
.score-checks { list-style: none; margin: 0; padding: 0; }
.score-checks li { font-size: 14px; padding: 5px 0; }
.score-checks li.ok { color: var(--ink-soft); }
.score-checks li.will { color: var(--orange); }
.score-checks li.partial { color: #B8860B; }
.score-checks li.no { color: var(--red); }
.score-ico { display: inline-block; width: 20px; font-weight: 800; }
.score-pts { font-size: 12px; color: var(--muted); }
.score-desc { font-size: 13px; color: var(--muted); margin: 3px 0 0 20px; line-height: 1.55; }
.score-tip { font-size: 13px; color: var(--ink-soft); margin: 5px 0 4px 20px;
             background: var(--fill); border-radius: 10px; padding: 7px 12px; }
.score-checks li.ok .score-tip { display: none; }

/* 쉬운 설명 — 비개발자용 '지금 / 이렇게' */
.score-plain { margin: 7px 0 8px 20px; display: flex; flex-direction: column; gap: 5px; }
.sp-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px;
          line-height: 1.55; color: var(--ink); }
.sp-tag { flex: none; font-size: 11px; font-weight: 800; border-radius: 6px;
          padding: 2px 8px; margin-top: 1px; letter-spacing: .02em; }
.sp-tag.now { background: var(--fill-deep); color: var(--ink-soft); }
.sp-tag.fix { background: #FFF3D6; color: #8A6100; }
.sp-tag.done { background: #E3F6EC; color: #1B7A44; }

/* 코드 보기 — 미니 코드 에디터 윈도우 */
.code-view { margin: 8px 0 10px 20px; }
.code-view summary { list-style: none; cursor: pointer; user-select: none; display: inline-block; }
.code-view summary::-webkit-details-marker { display: none; }
.cv-btn { display: inline-flex; align-items: center; gap: 8px;
          background: var(--fill); border-radius: 99px; padding: 6px 14px;
          font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
          transition: background .12s; }
.cv-btn:hover { background: var(--fill-deep); color: var(--ink); }
.cv-ico { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 800;
          color: var(--blue); }
.cv-sub { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cv-caret { font-size: 10px; color: var(--muted); transition: transform .15s; }
.code-view[open] .cv-caret { transform: rotate(180deg); }
.code-view[open] summary { margin-bottom: 8px; }
.cv-window { background: #171C24; border-radius: 14px; overflow: hidden;
             display: grid; grid-template-columns: 1fr 1fr; }
.cv-window.solo { grid-template-columns: 1fr; }
.cv-col { min-width: 0; }
.cv-col + .cv-col { border-left: 1px solid #232A35; }
.cv-head { display: flex; align-items: center; gap: 7px;
           background: #1E2530; padding: 8px 14px;
           font-size: 11.5px; font-weight: 700; color: #B7C0CB; letter-spacing: .02em; }
.cv-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.cv-dot.now { background: #8B95A1; }
.cv-dot.after { background: #3DDC84; }
.cv-copy { margin-left: auto; background: rgba(255,255,255,.08); border: 0;
           border-radius: 7px; color: #B7C0CB; font: inherit; font-size: 11px;
           font-weight: 700; padding: 3px 10px; cursor: pointer; transition: background .12s; }
.cv-copy:hover { background: rgba(255,255,255,.16); color: #fff; }
.cv-copy.ok { background: #1E3A2A; color: #3DDC84; }
.cv-col pre { margin: 0; padding: 12px 14px; font-size: 11.5px; line-height: 1.6;
              color: #D5DCE5; background: transparent;
              white-space: pre-wrap; word-break: break-all;
              max-height: 260px; overflow-y: auto;
              font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.cv-col pre.cv-empty { color: #5C6673; font-style: italic; }
@media (max-width: 760px) {
  .cv-window { grid-template-columns: 1fr; }
  .cv-col + .cv-col { border-left: 0; border-top: 1px solid #232A35; }
}

/* GEO 스코어 측정 근거 안내 */
.score-basis { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.basis-head { font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.basis-card { background: var(--fill); border-radius: 14px; padding: 14px 16px; }
.basis-card > b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.basis-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.basis-tag { font-size: 11px; font-weight: 800; border-radius: 99px; padding: 2px 9px;
             background: var(--blue-soft); color: var(--blue); }
.basis-tag.research { background: var(--orange-soft); color: var(--orange); }

/* ---------------- 크롤링 변경 표시 ---------------- */
input.changed, textarea.changed, select.changed {
  border-color: var(--red) !important; background: var(--red-soft) !important;
}
.lf.changed-box { border: 1.5px dashed var(--red); border-radius: 16px;
                  padding: 10px; background: var(--red-soft); }
.lf.field-error { border: 2px solid var(--red); border-radius: 16px;
                  padding: 10px; background: var(--red-soft);
                  animation: field-shake .3s ease; }
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------------- 사이트맵 일괄 등록 ---------------- */
.url-list { max-height: 420px; overflow-y: auto; border: 0;
            border-radius: 14px; background: var(--fill); padding: 4px; }
.url-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
           font-size: 13.5px; border-radius: 10px; cursor: pointer; margin: 0; }
.url-row:hover { background: var(--paper); }
.url-row .url-text { flex: 1; word-break: break-all; }
.url-row input { width: 17px; height: 17px; accent-color: var(--blue); }
.url-done { opacity: .5; cursor: default; }

/* ---------------- 기타 ---------------- */
dt { font-weight: 700; margin-top: 14px; font-size: 13px; color: var(--muted); }
dd { margin: 2px 0 0; white-space: pre-wrap; background: var(--fill);
     border: 0; border-radius: 12px; padding: 9px 13px; font-size: 14px; }
.link-danger { background: none; border: 0; font: inherit; font-size: 13.5px;
               color: var(--red); cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------------- 워드프레스 적용 가이드 ---------------- */
.wp-guide { background: var(--fill); border-radius: 16px; padding: 18px 20px; margin-top: 16px; }
.wp-guide-head { display: flex; align-items: center; justify-content: space-between;
                 gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wp-guide-title { font-size: 15px; font-weight: 800; }
.wp-guide-title .sub { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-left: 8px; }
.wp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px; }
.wp-step { background: var(--card, #fff); border-radius: 14px; padding: 14px 16px;
           border: 1px solid var(--line); }
.wp-step-no { display: inline-flex; align-items: center; justify-content: center;
              width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft);
              color: var(--blue); font-size: 12.5px; font-weight: 800; margin-bottom: 8px; }
.wp-step-t { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.wp-step-d { font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }
.wp-step-d code { font-size: 11.5px; background: var(--fill); border-radius: 6px; padding: 1px 5px; }
.wp-guide .hint { margin: 12px 0 0; }

/* ---------------- 페이지 관리 요약 카드 ---------------- */
.pg-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
              gap: 12px; margin-bottom: 18px; }
.pgs-card { background: var(--card, #fff); border: 1px solid var(--line);
            border-radius: 18px; padding: 18px 20px; display: flex;
            flex-direction: column; gap: 8px; }
.pgs-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pgs-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pgs-big { font-size: 34px; font-weight: 800; color: var(--blue); line-height: 1; }
.pgs-big.muted { color: var(--muted); }
.pgs-unit { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.pgs-next { font-size: 13px; color: var(--ink-soft); margin-left: 6px; }
.pgs-next b { color: var(--green); }
.pgs-sub { font-size: 12px; color: var(--muted); margin-top: auto; }
.pgs-plain { margin: 12px 2px 20px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft);
  background: var(--fill); border-radius: 12px; padding: 10px 16px; }
.pgs-plain b { color: var(--ink); font-weight: 700; }
/* 발췌 카드 미니 순위 */
.sx-rank { list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
.sx-rank li { display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 8px; padding: 4px 9px;
  font-size: 12.5px; color: var(--ink-soft); }
.sx-rank li s { text-decoration: none; flex: none; width: 17px; height: 17px;
  border-radius: 99px; background: var(--fill); color: var(--muted);
  font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.sx-rank li.ours { background: #e6f6ec; color: #0a7a3d; font-weight: 800;
  box-shadow: inset 0 0 0 1.5px #0bb25f55; }
.sx-rank li.ours s { background: #0bb25f; color: #fff; }
.sx-rank li.gap { background: transparent; color: var(--muted);
  font-size: 11px; padding: 0 9px; }
.pgs-plain i { font-style: normal; color: var(--line); }
.pgs-plain-tag { font-size: 10.5px; font-weight: 800; color: var(--muted);
  letter-spacing: .06em; background: #fff; border: 1px solid var(--line);
  border-radius: 99px; padding: 2px 9px; }
.pgs-states { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 4px 0; }
.pgs-state { display: inline-flex; align-items: center; gap: 6px;
             font-size: 13.5px; color: var(--ink-soft); }
.pgs-state b { font-size: 15px; }
.pgs-state i { width: 8px; height: 8px; border-radius: 50%; }
.pgs-state.ok i { background: var(--green); }    .pgs-state.ok b { color: var(--green); }
.pgs-state.warn i { background: var(--orange); } .pgs-state.warn b { color: var(--orange); }
.pgs-state.bad i { background: var(--red); }     .pgs-state.bad b { color: var(--red); }
.pgs-state.off i { background: var(--line-hover); } .pgs-state.off b { color: var(--muted); }
.pgs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.v-미확인 { background: var(--fill); color: var(--muted); }

/* 선택 관리 바 */
.bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            background: var(--blue-soft); border-radius: 14px;
            padding: 10px 14px; margin-bottom: 14px; }
.bulk-bar .bulk-cap { font-size: 13px; font-weight: 700; color: var(--blue-dark); }
/* 선택 모드 아닐 땐 카드 체크박스 숨김 */
.page-cards:not(.sel-mode) .pgsel { display: none; }

/* ---------------- 벤치마크 리디자인 (페이지 관리) ---------------- */
/* KPI 카드: 라벨 + 파스텔 아이콘 서클 */
.pgs-head { display: flex; align-items: flex-start; justify-content: space-between; }
.pgs-ico { width: 40px; height: 40px; border-radius: 50%; display: inline-flex;
           align-items: center; justify-content: center; font-size: 17px; flex: none; }
.pgs-ico.violet { background: var(--blue-soft); color: var(--blue); }
.pgs-ico.green  { background: var(--green-soft); color: var(--green); }
.pgs-ico.blue   { background: #E4F2FF; color: #2E90E5; }
[data-theme="dark"] .pgs-ico.blue { background: #1D2C42; color: #6FB3F5; }
.pgs-card { border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow); }
.pgs-big { font-size: 38px; }
.pgs-big.good { color: var(--green); }
.pgs-big.mid  { color: var(--orange); }
.pgs-big.low  { color: var(--red); }

/* 페이지 카드: 왼쪽 큰 스코어 블록 */
.page-card { border-radius: 18px; padding: 18px 20px; gap: 16px; }
.pc-score { flex: none; width: 74px; display: flex; flex-direction: column;
            align-items: center; justify-content: center; line-height: 1.1;
            font-size: 30px; font-weight: 800; }
.pc-score span { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.pc-score em { font-style: normal; font-size: 10.5px; font-weight: 700;
               color: var(--green); margin-top: 3px; white-space: nowrap; }
.pc-score.good { color: var(--green); }
.pc-score.mid  { color: var(--orange); }
.pc-score.low  { color: var(--red); }
.pc-score.none { color: var(--line-hover); }
.pc-title { margin-top: 6px; }
.pc-title strong { font-size: 15.5px; letter-spacing: -.02em; }
.page-card-top .chip, .page-card-top .vbadge { border-radius: 99px; padding: 3px 10px; }

/* "결과 보기 →" 아웃라인 버튼 */
.btn.outline { background: var(--paper); color: var(--blue);
               border: 1.5px solid var(--blue-soft); box-shadow: none; }
.btn.outline:hover { background: var(--blue-soft); }
.pgs-foot { display: flex; align-items: flex-end; justify-content: space-between;
            gap: 10px; margin-top: auto; }
.pgs-foot .pgs-sub { margin-top: 0; }

/* ---------------- 리디자인 보정: 레이아웃 깨짐 + 모션 ---------------- */
/* 버튼 줄바꿈 방지 */
.pgs-foot form { flex: none; }
.pgs-foot .btn, .pgs-actions .btn { white-space: nowrap; }
.pgs-foot { flex-wrap: wrap; }
.pgs-states { align-items: center; }

/* 등장 모션 (벤치마크 참고: 부드러운 페이드업, 순차 등장) */
@keyframes geoFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pg-summary .pgs-card { animation: geoFadeUp .45s cubic-bezier(.22,.9,.36,1) both; }
.pg-summary .pgs-card:nth-child(2) { animation-delay: .07s; }
.pg-summary .pgs-card:nth-child(3) { animation-delay: .14s; }
.page-cards .page-card { animation: geoFadeUp .4s cubic-bezier(.22,.9,.36,1) both; }
.page-cards .page-card:nth-child(1) { animation-delay: .10s; }
.page-cards .page-card:nth-child(2) { animation-delay: .16s; }
.page-cards .page-card:nth-child(3) { animation-delay: .22s; }
.page-cards .page-card:nth-child(4) { animation-delay: .28s; }
.page-cards .page-card:nth-child(n+5) { animation-delay: .34s; }
.page-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.page-card:hover { box-shadow: 0 6px 18px rgba(0, 27, 55, .08); }
.pgs-card { transition: box-shadow .18s ease; }
.pgs-card:hover { box-shadow: 0 6px 18px rgba(0, 27, 55, .07); }
@media (prefers-reduced-motion: reduce) {
  .pg-summary .pgs-card, .page-cards .page-card { animation: none; }
}

/* ---------------- 여정 사이드바 (① 진단 ② 브랜드 정보 ③ 연결 ④ 리포트) ---------------- */
.side-menu.steps { display: flex; flex-direction: column; gap: 2px; }
.side-step { display: flex; align-items: center; gap: 9px; padding: 9px 10px;
             border-radius: 12px; font-size: 14px; font-weight: 600;
             color: var(--ink-soft); text-decoration: none; }
.side-step:hover { background: var(--fill); }
.side-step.on { background: var(--blue-soft); color: var(--blue); }
.side-step.disabled { color: var(--muted); cursor: default; }
.side-step.disabled:hover { background: none; }
.step-no { flex: none; width: 22px; height: 22px; border-radius: 50%;
           display: inline-flex; align-items: center; justify-content: center;
           font-size: 12px; font-weight: 800;
           background: var(--fill-deep); color: var(--muted); }
.side-step.on .step-no { background: var(--blue); color: #fff; }
.step-no.done { background: var(--green-soft); color: var(--green); }
.side-step.on .step-no.done { background: var(--green); color: #fff; }
.step-name { flex: 1; }
.step-check { color: var(--green); font-weight: 800; font-size: 13px; }
.step-badge { font-size: 11px; font-weight: 800; background: var(--fill);
              color: var(--ink-soft); border-radius: 99px; padding: 2px 8px; }
.side-step.on .step-badge { background: #fff; color: var(--blue); }
[data-theme="dark"] .side-step.on .step-badge { background: var(--paper); }
.step-badge.todo { background: var(--orange-soft); color: var(--orange); }

/* "다음 할 일" 추천 카드 */
.next-card { display: flex; align-items: flex-start; gap: 14px;
             border: 2px solid var(--blue); border-radius: 18px;
             background: var(--paper); padding: 16px 20px; margin-bottom: 14px;
             animation: geoFadeUp .4s cubic-bezier(.22,.9,.36,1) both; }
.next-card.ok { border-color: var(--green-soft); }
.next-tag { flex: none; font-size: 12px; font-weight: 800; color: var(--blue);
            background: var(--blue-soft); border-radius: 99px; padding: 4px 12px; margin-top: 2px; }
.next-card.ok .next-tag { color: var(--green); background: var(--green-soft); }
.next-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1; }
.next-msg { font-size: 14.5px; font-weight: 600; margin: 0; flex: 1; min-width: 200px; }
.next-card .btn { white-space: nowrap; }

/* ---------------- 진단 퍼널 ---------------- */
.funnel-card { background: var(--card, #fff); border: 1px solid var(--line);
               border-radius: 18px; padding: 18px 22px; margin-bottom: 14px;
               animation: geoFadeUp .45s cubic-bezier(.22,.9,.36,1) both; }
[data-theme="dark"] .funnel-card { background: var(--paper); }
.funnel-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.funnel { display: flex; flex-direction: column; gap: 7px; }
.funnel-row { display: flex; align-items: center; gap: 10px; }
.funnel-label { flex: none; width: 110px; min-width: 0; font-size: 12.5px; font-weight: 600;
                color: var(--ink-soft); text-align: right;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 막대는 트랙 안에서만 자라고, 수치는 트랙 밖에 둔다 — 짧은 막대에서 글자가 깨지지 않게 */
.funnel-track { flex: 1; min-width: 0; background: var(--fill); border-radius: 7px;
                overflow: hidden; }
.funnel-bar { height: 26px; border-radius: 7px; min-width: 4px;
              transition: width .6s cubic-bezier(.22,.9,.36,1); }
.funnel-n { flex: none; min-width: 82px; font-size: 12.5px; font-weight: 800;
            color: var(--ink); white-space: nowrap; }
.funnel-n.ours { color: var(--blue); }
.funnel-n i { font-style: normal; font-weight: 700; color: var(--muted);
              margin-left: 5px; font-size: 11.5px; }
.funnel-n .fn-ours { color: var(--green); font-weight: 800; font-size: 11.5px;
                     margin-left: 4px; }
.funnel-bar.f1 { background: var(--line-hover); }
.funnel-bar.f2 { background: var(--blue); }
.funnel-bar.f3 { background: var(--blue-dark); }
.funnel-bar.f4 { background: var(--green); }
.pgs-date { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }

/* ---------------- 진단 차트 (도넛 + 구간 막대) ---------------- */
.charts-grid { display: flex; gap: 12px; margin-bottom: 14px; align-items: stretch; flex-wrap: wrap; }
.charts-grid .chart-card { flex: 1; min-width: 300px; }
.charts-grid.three .chart-card { flex: 1 1 0; min-width: 260px; }
/* 인용 출처 채널 — 도메인 드릴다운 */
.ch-det summary { display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none; padding: 4px 0; }
.ch-det summary::-webkit-details-marker { display: none; }
.ch-det summary .funnel-track { flex: 1; }
.ch-more { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ch-det summary:hover .ch-more { color: var(--blue); }
.ch-det[open] .ch-more { color: var(--blue); }
/* 페르소나 필터 — 영역 박스 + 요약 카드 */
.pf-box { background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 20px 18px; margin: 0 0 16px; }
.pf-box-head { font-size: 13px; font-weight: 800; color: var(--ink);
  margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; }
.pf-box-head span { font-size: 12px; font-weight: 500; color: var(--muted); }
/* 페르소나 칩 — 순서는 그대로, ① 합계·기준 ② 페르소나 패널로 UI만 구분 */
.pf-split { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.pf-sec { display: flex; flex-direction: column; gap: 8px; }
.pf-sec-base { flex: none; }
.pf-sec-named { flex: 1; min-width: 280px; }
.pf-sec-label { font-size: 11.5px; font-weight: 800; color: var(--muted); padding-left: 2px; }
.pf-sec-label em { font-style: normal; color: var(--blue); margin-left: 2px; }
.pf-chips-base { display: flex; flex-direction: column; gap: 8px; flex: 1;
  background: var(--blue-soft); border-radius: 14px; padding: 12px; }
.pf-chips { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; align-content: flex-start;
  flex: 1; background: var(--fill); border-radius: 14px; padding: 12px; }
.pf-card { display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 9px 16px; transition: border-color .12s; }
.pf-card b { font-size: 13px; color: var(--ink); }
.pf-card span { font-size: 11px; font-weight: 600; color: var(--muted); }
.pf-card:hover { border-color: #b9cdf3; }
.pf-card.on { background: var(--blue); border-color: var(--blue); }
.pf-card.pending { background: transparent; border-style: dashed; cursor: default; }
.pf-card.pending b, .pf-card.pending span { color: var(--muted); }
.pf-card.pending:hover { border-color: var(--line); }
.pf-card.on b, .pf-card.on span { color: #fff; }
.pf-card.on span { opacity: .85; }
.pf-note { margin: 10px 2px 0 2px; font-size: 12.5px; color: var(--ink-soft); }
.pf-note b { color: var(--blue); }
a.pf-row { text-decoration: none; color: inherit; border-radius: 8px; }
a.pf-row:hover { background: var(--fill); }
a.pf-row.on { background: #eaf1fe; box-shadow: inset 0 0 0 1.5px #b9cdf3; }

/* 채널 도메인 순위 리스트 */
.ch-domlist { list-style: none; margin: 6px 0 12px 138px; padding: 8px 10px;
  background: var(--fill); border-radius: 12px;
  display: flex; flex-direction: column; gap: 3px; }
.ch-domlist li { display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 9px; padding: 6px 12px; }
.ch-domlist li s { text-decoration: none; flex: none; width: 20px; height: 20px;
  border-radius: 7px; background: var(--fill); color: var(--muted);
  font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.ch-domlist li:nth-child(-n+3) s { background: #3c4a6b; color: #fff; }
.ch-domlist li a { font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 40%; }
.ch-domlist li a i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; }
.ch-domlist li a:hover { color: var(--blue); }
.ch-domlist li a:hover i { color: var(--blue); }
.ch-ours-tag { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800;
  color: #0a7a3d; background: #e6f6ec; border-radius: 99px; padding: 1px 8px; }
.ch-bar { flex: 1; height: 7px; border-radius: 99px; background: var(--fill);
  overflow: hidden; }
.ch-bar b { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.ch-domlist li.ours { background: #f3fbf6; box-shadow: inset 0 0 0 1.5px #0bb25f44; }
.ch-domlist li.ours .ch-bar b { background: #0bb25f; }
.ch-dn { flex: none; font-size: 12px; font-weight: 700; color: var(--ink);
  min-width: 40px; text-align: right; }
@media (max-width: 720px) { .ch-domlist { margin-left: 0; } }
.chart-card { background: var(--card, #fff); border: 1px solid var(--line);
              border-radius: 18px; padding: 18px 22px;
              animation: geoFadeUp .45s cubic-bezier(.22,.9,.36,1) both; }
[data-theme="dark"] .chart-card { background: var(--paper); }
.chart-sub { font-weight: 600; color: var(--muted); font-size: 12px; margin-left: 6px; }
.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut { width: 150px; height: 150px; flex: none; }
.donut-num { font-size: 22px; font-weight: 800; fill: var(--ink); }
.donut-cap { font-size: 10px; font-weight: 700; fill: var(--muted); }
.donut-legend { display: flex; flex-direction: column; gap: 6px; }
.dl-row { display: flex; align-items: center; gap: 8px; font-size: 13px;
          font-weight: 600; color: var(--ink-soft); }
.dl-row i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dl-row b { margin-left: 4px; }
.funnel-label { width: 128px; }

/* ---------------- 점수 추이 라인 차트 ---------------- */
.trend-card { margin-bottom: 14px; }
.trend-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.trend-grid { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.trend-line { fill: none; stroke: var(--blue); stroke-width: 2.5;
              stroke-linecap: round; stroke-linejoin: round; }
.trend-dot { fill: var(--blue); }
.trend-val { font-size: 12px; font-weight: 800; fill: var(--ink); }
.trend-dot2 { fill: var(--muted); opacity: .75; }
.trend-val2 { font-size: 10.5px; font-weight: 700; fill: var(--muted); }
.trend-date { font-size: 10px; font-weight: 600; fill: var(--muted); }
.sample-badge { font-size: 11px; font-weight: 700; color: var(--orange);
                background: var(--orange-soft); border-radius: 99px;
                padding: 3px 9px; margin-left: 8px; }

/* 진단하기 원형 버튼 */
.diag-cta { flex: none; align-self: center; width: 118px; height: 118px;
            border-radius: 50%; border: 0; cursor: pointer;
            background: var(--blue); color: #fff;
            font-size: 16px; font-weight: 800; font-family: inherit;
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 6px;
            box-shadow: 0 6px 18px rgba(49, 130, 246, .35);
            transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.diag-cta:hover { background: var(--blue-dark); transform: translateY(-2px);
                  box-shadow: 0 10px 24px rgba(49, 130, 246, .4); }
.diag-cta:active { transform: scale(.95); }
.diag-cta-ico { width: 34px; height: 34px; border-radius: 50%;
                background: rgba(255,255,255,.22); display: inline-flex;
                align-items: center; justify-content: center; font-size: 13px; }

/* 선택 관리 바 (항상 노출, 도구는 토글) */
.bulk-tools { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.bulk-tools[hidden] { display: none; }
/* 도구 닫힘 상태에선 바 배경 제거(버튼만 보이게) */
.bulk-bar:has(.bulk-tools[hidden]) { background: none; padding: 0 0 10px; }

/* 진단하기 버튼을 요약 카드 안으로 */
.diag-card { align-items: center; justify-content: center; flex: none;
             min-width: 150px; }
.pg-summary { grid-template-columns: auto repeat(auto-fit, minmax(230px, 1fr)); }
.diag-card .diag-cta { width: 104px; height: 104px; font-size: 15px; }
.diag-card .diag-cta-ico { width: 30px; height: 30px; }
@media (max-width: 760px) { .pg-summary { grid-template-columns: 1fr; } }

/* 요약은 3카드로 복원, 진단하기 카드는 차트 줄로 */
.pg-summary { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.charts-grid .diag-card { flex: none; display: flex; min-width: 170px; }
/* 진단하기 카드 — 요약 줄 맨 오른쪽, 좁은 폭 */
.pg-summary .diag-card { min-width: 150px; }
/* A안: 페이지 헤더의 진단하기 주 버튼 */
.diag-run { box-shadow: 0 4px 12px rgba(49, 130, 246, .3); }

/* 차트 등장 애니메이션 */
@keyframes geoGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.funnel-bar { transform-origin: left center;
              animation: geoGrowX .7s cubic-bezier(.22,.9,.36,1) both; }
.funnel-row:nth-child(2) .funnel-bar { animation-delay: .08s; }
.funnel-row:nth-child(3) .funnel-bar { animation-delay: .16s; }
.funnel-row:nth-child(4) .funnel-bar { animation-delay: .24s; }
.funnel-row:nth-child(5) .funnel-bar { animation-delay: .32s; }
@keyframes geoFadeIn { from { opacity: 0; } to { opacity: 1; } }
.funnel-n { animation: geoFadeIn .3s ease both .5s; }
.trend-dot, .trend-val, .trend-dot2, .trend-val2 { animation: geoFadeIn .4s ease both .6s; }
@media (prefers-reduced-motion: reduce) {
  .funnel-bar, .funnel-n, .trend-dot, .trend-val, .trend-dot2, .trend-val2 { animation: none; }
}

/* ---------------- 진단 완료 모달 ---------------- */
.geo-modal-overlay { position: fixed; inset: 0; z-index: 200;
                     background: rgba(15, 23, 42, .45);
                     display: flex; align-items: center; justify-content: center;
                     animation: geoFadeIn .2s ease both; }
.geo-modal { background: var(--paper); border-radius: 22px; padding: 30px 34px;
             max-width: 420px; width: calc(100% - 48px); text-align: center;
             box-shadow: 0 20px 50px rgba(0, 27, 55, .25);
             animation: geoFadeUp .3s cubic-bezier(.22,.9,.36,1) both; }
.geo-modal-ico { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px;
                 background: var(--green-soft); color: var(--green);
                 font-size: 24px; font-weight: 800;
                 display: flex; align-items: center; justify-content: center; }
.geo-modal h3 { margin: 0 0 8px; font-size: 19px; }
.geo-modal-msg { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; }
.geo-modal-note { font-size: 13px; color: var(--ink-soft); line-height: 1.7;
                  background: var(--fill); border-radius: 14px;
                  padding: 12px 16px; margin-bottom: 18px; text-align: left; }
.geo-modal-note b { color: var(--blue); }
.geo-modal-overlay[hidden] { display: none; }

/* 페이지 수정 — 예상 점수 미리보기 */
/* 하단 저장 바 — sticky: 스크롤 중엔 화면 아래 붙어 있다가,
   문서 끝에 닿으면 제자리(푸터 위)로 내려앉는다 */
.score-preview { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
                 background: var(--paper); border: 1px solid var(--line-strong);
                 border-radius: 14px; padding: 14px 22px; margin-top: 22px;
                 position: sticky; bottom: 12px; z-index: 80;
                 box-shadow: 0 6px 28px rgba(0, 27, 55, .14); }
/* 페이지 수정 상단 — 중요성 안내 카드 (+ 꼭 채울 항목 칩) */
.pf-intro {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--blue); border-radius: 0 14px 14px 0;
  padding: 16px 20px; margin: 0 0 18px;
  box-shadow: 0 2px 10px rgba(25, 31, 40, .04); }
.pf-intro-title { font-size: 14.5px; color: var(--ink); }
.pf-intro-title u { text-decoration-color: var(--blue); text-underline-offset: 3px; }
.pf-intro p { margin: 6px 0 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; }
.pf-must { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-must-label { font-size: 12.5px; font-weight: 800; color: var(--blue-dark); }
/* 영역별 채움 상태 — 박스 그리드 (클릭 = 해당 영역으로 이동) */
.pf-status {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px; }
.pfs-box {
  --st: var(--muted);
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--st); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; font: inherit;
  transition: transform .12s ease, box-shadow .12s ease; }
.pfs-box:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(25, 31, 40, .10); }
.pfs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pfs-head b { font-size: 14px; color: var(--ink); }
.pfs-badge {
  font-size: 11.5px; font-weight: 800; color: var(--st);
  background: color-mix(in srgb, var(--st) 12%, transparent);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pfs-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
/* 채움 상태별 포인트 색 — 충분/보완/비어 있음/선택 */
.pfs-box.ok    { --st: #0a7a3d; }
.pfs-box.weak  { --st: #e8590c; }
.pfs-box.empty { --st: #c00000; }
.pfs-box.opt   { --st: var(--muted); }
/* 박스 클릭으로 이동한 영역 잠깐 강조 */
fieldset.pf-target { outline: 2px solid var(--blue); outline-offset: 2px;
                     transition: outline-color .3s ease; }

/* 자동 채우기 — 두 방식 비교 카드 */
.af-opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px) { .af-opts { grid-template-columns: 1fr; } }
.af-opt {
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 15px 17px; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.af-opt:hover { transform: translateY(-2px); border-color: var(--blue);
                box-shadow: 0 8px 20px rgba(25, 31, 40, .10); }
.af-opt > b { font-size: 14.5px; color: var(--ink); }
.af-opt > span { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.af-tag { font-size: 11.5px; font-weight: 800; border-radius: 999px;
          padding: 2px 9px; vertical-align: 2px; margin-left: 4px; }
.af-tag.free { color: #0a7a3d; background: #e6f6ec; }
.af-tag.paid { color: #6b3ff2; background: #f1ebff; }
.sp-col { display: flex; flex-direction: column; gap: 2px; }
.sp-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.sp-num { font-size: 28px; font-weight: 800; line-height: 1.1; }
.sp-num.sp-expect { color: var(--muted); }
.sp-num.sp-expect.good { color: var(--green); }
.sp-num.sp-expect.bad { color: var(--red); }
.sp-arrow { font-size: 18px; font-weight: 800; color: var(--line-hover); margin-top: 12px; }
.sp-diff { font-size: 12.5px; font-weight: 800; border-radius: 99px;
           padding: 4px 10px; align-self: center; }
.sp-diff.up { background: var(--green-soft); color: var(--green); }
.sp-diff.down { background: var(--red-soft); color: var(--red); }
.sp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.sp-hint { font-size: 11.5px; color: var(--muted); }

/* ---------------- 노트북(좁은 화면) 가로 넘침 수정 ---------------- */
/* flex 아이템은 기본 min-width:auto라 내용의 최소폭 밑으로 줄어들지 못해
   사이드바+본문이 화면을 밀고 나간다 → min-width:0으로 축소 허용 */
main, main.with-side { min-width: 0; }
.page-card-body, .funnel-track, .chart-card { min-width: 0; }

@media (max-width: 1280px) {
  main.with-side { padding: 0 20px; }
  .charts-grid .chart-card { min-width: 240px; }
  .page-card { flex-wrap: wrap; }
  .page-card-actions { width: 100%; justify-content: flex-end; margin-top: 8px; }
  .funnel-label { width: 104px; font-size: 11.5px; }
}
.sp-btns { display: flex; gap: 8px; align-items: center; }
.sp-btns .btn { white-space: nowrap; }
/* 적용 중 상태 (수정본 전파 대기) */
.v-적용중 { background: var(--blue-soft); color: var(--blue); }
.pgs-state.prog i { background: var(--blue); }
.pgs-state.prog b { color: var(--blue); }
.pgs-state[hidden] { display: none; }

/* ---------------- SOV (AI 리포트) ---------------- */
.sov-delta { font-size: 12.5px; font-weight: 800; border-radius: 99px; padding: 3px 9px; }
.sov-delta.up { background: var(--green-soft); color: var(--green); }
.sov-delta.down { background: var(--red-soft); color: var(--red); }
.sov-legend { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 10px; }
.sov-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px;
                vertical-align: middle; margin: 0 4px 0 8px; }
.sov-legend .l1 { background: var(--blue); }
.sov-legend .l2 { background: var(--line-hover); }
.trend-line.dashed { stroke: var(--line-hover); stroke-width: 2; stroke-dasharray: 5 5; }
.sov-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
               gap: 10px; }
.sov-engine { background: var(--fill); border-radius: 14px; padding: 12px 14px; }
.sov-engine-name { font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
                   display: flex; align-items: center; gap: 6px; }
.eng-dot { width: 8px; height: 8px; border-radius: 50%; }
.eng-dot.chatgpt { background: #10A37F; }
.eng-dot.gemini { background: #4796E3; }
.eng-dot.perplexity { background: #21808D; }
.eng-dot.claude { background: #D97757; }
.sov-engine-rate { font-size: 24px; font-weight: 800; margin-top: 4px; }
.sov-engine-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.funnel-label.ours { color: var(--blue); font-weight: 800; }
.sov-excerpts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                gap: 10px; }
.sov-excerpt { background: var(--fill); border-radius: 14px; padding: 14px 16px; }
.sov-excerpt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
                    font-size: 14px; }
.sov-excerpt-text { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.sov-add-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sov-add-form input[type="text"] { flex: 1; min-width: 200px; }
.sov-add-form select { width: auto; }
/* 경쟁 브랜드 인라인 수정 — 편집 중임이 분명히 보이도록 */
.sov-row.editing { background: #fff; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--blue), 0 2px 10px rgba(49,130,246,.10);
  padding-top: 10px; padding-bottom: 10px; }
.comp-edit-form { display: flex; gap: 10px; flex: 1; align-items: flex-end;
  flex-wrap: wrap; }
.comp-edit-form[hidden] { display: none; }
.comp-field { display: flex; flex-direction: column; gap: 3px; min-width: 160px; }
.comp-field.grow { flex: 1; }
.comp-field span { font-size: 10.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em; }
.comp-edit-form input[type="text"] { width: 100%; font-size: 13.5px;
  padding: 8px 12px; background: #fff; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 9px; }
.comp-edit-form input[type="text"]:focus { outline: none;
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,130,246,.15); }
.comp-edit-form .btn { margin-bottom: 1px; }
/* 사이트 공유 */
.badge.shared { background: #efe9ff; color: #5b3ec9; }
.share-box .sov-add-form select { padding: 8px 10px; }
.sov-rows { display: flex; flex-direction: column; gap: 6px; }
.sov-row { display: flex; align-items: center; gap: 10px; background: var(--fill);
           border-radius: 12px; padding: 9px 14px; }
.sov-row.off { opacity: .45; }
.sov-row-q { flex: 1; font-size: 14px; min-width: 0; }

/* AI 채우기 방식 선택 모달 */
.ai-opt { display: block; border: 1.5px solid var(--line-strong); border-radius: 14px;
          padding: 14px 16px; margin-top: 10px; text-decoration: none;
          color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.ai-opt:hover { border-color: var(--blue); background: var(--blue-soft); }
.ai-opt b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.ai-opt span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.ai-opt-warn { font-style: normal; color: var(--orange); font-weight: 700; }
/* AI 분석 로딩 스피너 */
.ai-spinner { width: 36px; height: 36px; margin: 6px auto 0; border-radius: 50%;
              border: 4px solid var(--blue-soft); border-top-color: var(--blue);
              animation: aiSpin .8s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.side-menu a.side-sub { display: flex; align-items: center;
            margin: 2px 0 0 20px; padding: 6px 10px 6px 14px;
            border-left: 2px solid var(--line-strong); border-radius: 0 10px 10px 0;
            font-size: 13px; font-weight: 600; color: var(--muted); }
.side-menu a.side-sub:hover { background: var(--fill); color: var(--ink); }
.side-menu a.side-sub.on { color: var(--blue); background: var(--blue-soft);
            border-left-color: var(--blue); font-weight: 700; }
.sov-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               margin-bottom: 4px; }
/* 자동 생성 개수 선택 — 옵션 줄바꿈 방지 */
select.sov-count { width: 110px; min-width: 110px; white-space: nowrap; }
.chip.sov-persona { background: var(--fill); color: var(--ink-soft);
                    border: 1px solid var(--line-strong); }

/* ================================================================
   측정 질문 관리 (프롬프트 관리) — 그룹 카드 · 생성 패널
   ================================================================ */
.pm-summary { margin-bottom: 14px; }

/* ── 생성 모드 선택 ── */
.pm-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px; margin-bottom: 16px; }
.pm-mode { text-align: left; background: var(--paper); cursor: pointer;
           border: 1.5px solid var(--line-strong); border-radius: 14px;
           padding: 14px 16px; font-family: inherit; color: var(--ink);
           display: flex; flex-direction: column; gap: 3px;
           transition: border-color .15s ease, background .15s ease; }
.pm-mode:hover { border-color: var(--line-hover); }
.pm-mode.on { border-color: var(--blue); background: var(--blue-soft); }
.pm-mode b { font-size: 15px; letter-spacing: -.02em; }
.pm-mode-tag { align-self: flex-start; font-size: 11px; font-weight: 800;
               padding: 2px 8px; border-radius: 99px; margin-bottom: 3px;
               background: var(--fill-deep); color: var(--ink-soft); }
.pm-mode-tag.persona { background: #EEE9FF; color: var(--violet); }
[data-theme="dark"] .pm-mode-tag.persona { background: #2A2447; }
.pm-mode-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ── 질문자(페르소나) 입력 ── */
.pm-persona { background: var(--fill); border-radius: 14px;
              padding: 6px 16px 16px; margin-bottom: 14px; }
.pm-persona[hidden] { display: none; }
.pm-persona-grid { display: grid; gap: 10px;
                   grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-f { margin: 10px 0 0; font-size: 12.5px; }
.pm-f select, .pm-f input { width: 100%; margin-top: 5px; }
.pm-f.wide { grid-column: span 4; }
.pm-preview { display: flex; align-items: center; gap: 10px; margin-top: 14px;
              padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.pm-preview-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.chip.sov-persona.empty { color: var(--muted); }

/* ── 생성 액션 바 ── */
.pm-gen-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-spacer { flex: 1; min-width: 8px; }
.pm-gen-note { font-size: 13px; color: var(--ink-soft); }
.pm-inline-label { display: inline; margin: 0; font-size: 12.5px; color: var(--muted); }
.pm-hint { margin: 10px 0 0; }
.pm-manual { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.pm-manual > summary { cursor: pointer; font-size: 13.5px; font-weight: 700;
                       color: var(--ink-soft); list-style: none; }
.pm-manual > summary::-webkit-details-marker { display: none; }
.pm-manual > summary::before { content: '＋ '; color: var(--blue); font-weight: 800; }
.pm-manual[open] > summary::before { content: '－ '; }
.pm-manual > summary:hover { color: var(--blue); }
.pm-manual .sov-add-form { margin-top: 12px; margin-bottom: 0; }

/* ── 필터 바 ── */
.pm-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
              margin-bottom: 14px; }
.pm-search { flex: 1; min-width: 200px; }
.pm-chips { display: flex; gap: 4px; background: var(--fill);
            border-radius: 11px; padding: 3px; }
.pm-chip { border: 0; background: transparent; cursor: pointer; font-family: inherit;
           font-size: 12.5px; font-weight: 700; color: var(--muted);
           padding: 7px 12px; border-radius: 9px; transition: all .14s ease; }
.pm-chip:hover { color: var(--ink); }
.pm-chip.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.pm-chip.c-cat.on { color: var(--blue); }
.pm-chip.c-brand.on { color: var(--violet); }
.pm-chip.c-comp.on { color: var(--orange); }

/* ── 그룹 카드 ── */
.pm-groups { display: flex; flex-direction: column; gap: 12px; }
.pm-group { border: 1.5px solid var(--line-strong); border-radius: 16px;
            overflow: hidden; background: var(--paper); }
.pm-group.base { border-color: var(--blue); }
.pm-group-head { display: flex; align-items: center; gap: 12px;
                 padding: 13px 16px; background: var(--fill); flex-wrap: wrap; }
.pm-group.base .pm-group-head { background: var(--blue-soft); }
.pm-fold { border: 0; background: transparent; cursor: pointer; color: var(--muted);
           font-size: 15px; line-height: 1; padding: 4px 2px;
           transition: transform .18s ease; }
.pm-group.folded .pm-fold { transform: rotate(-90deg); }
.pm-group-id { min-width: 0; flex: 1; }
.pm-group-name { display: flex; align-items: center; gap: 8px;
                 font-size: 16.5px; font-weight: 800; letter-spacing: -.025em; }
.pm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet);
          flex: none; }
.pm-group.base .pm-dot { background: var(--blue); }
.pm-tag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px;
          background: var(--paper); color: var(--blue); }
.pm-tag.persona { color: var(--violet); }
.pm-group-sub { font-size: 12px; color: var(--muted); margin-top: 3px;
                font-weight: 600; }
.pm-group-meta { display: flex; align-items: center; gap: 6px; flex: none; }
.pm-gcount { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.pm-gcount b { font-size: 15px; color: var(--ink); }
.pm-gactive { font-size: 11.5px; font-weight: 800; padding: 3px 9px;
              border-radius: 99px; background: var(--green-soft); color: var(--green); }
.pm-gactive.zero { background: var(--fill-deep); color: var(--muted); }
.pm-group-acts { display: flex; gap: 6px; flex: none; }
.pm-group-body { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.pm-group.folded .pm-group-body { display: none; }

/* ── 질문 행 ── */
.pm-row { display: flex; align-items: center; gap: 12px;
          padding: 10px 12px; border-radius: 11px; transition: background .14s ease; }
.pm-row:hover { background: var(--fill); }
.pm-row.off { opacity: .55; }
.pm-q { flex: 1; min-width: 0; font-size: 14px; line-height: 1.55; }
.chip.cat.c-cat { background: var(--blue-soft); color: var(--blue); }
.chip.cat.c-brand { background: #EEE9FF; color: var(--violet); }
.chip.cat.c-comp { background: var(--orange-soft); color: var(--orange); }
[data-theme="dark"] .chip.cat.c-brand { background: #2A2447; }
.pm-row .chip.cat { flex: none; align-self: flex-start; margin-top: 1px; }

/* 측정 포함 토글 */
.pm-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
             border: 1px solid var(--line-strong); background: var(--paper);
             border-radius: 99px; padding: 5px 11px 5px 7px; font-family: inherit;
             font-size: 12px; font-weight: 700; color: var(--muted); flex: none;
             transition: all .15s ease; }
.pm-switch i { width: 26px; height: 15px; border-radius: 99px; background: var(--line-hover);
               position: relative; transition: background .15s ease; }
.pm-switch i::after { content: ''; position: absolute; top: 2px; left: 2px;
                      width: 11px; height: 11px; border-radius: 50%; background: #fff;
                      transition: transform .15s ease; }
.pm-switch.on { color: var(--green); border-color: var(--green-soft);
                background: var(--green-soft); }
.pm-switch.on i { background: var(--green); }
.pm-switch.on i::after { transform: translateX(11px); }
.pm-switch:hover { border-color: var(--line-hover); }
.pm-del { border: 0; background: transparent; cursor: pointer; color: var(--muted);
          font-size: 13px; padding: 6px 8px; border-radius: 9px; flex: none;
          transition: all .14s ease; }
.pm-del:hover { background: var(--red-soft); color: var(--red); }

/* ── 빈 상태 / 결과 없음 ── */
.pm-empty { text-align: center; padding: 42px 20px; color: var(--muted); }
.pm-empty-ico { font-size: 32px; margin-bottom: 10px; }
.pm-empty b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.pm-empty p { font-size: 13.5px; line-height: 1.7; margin: 0; }
.pm-noresult { text-align: center; padding: 30px; color: var(--muted); font-size: 13.5px; }
.pm-noresult[hidden] { display: none; }

@media (max-width: 1100px) {
  .pm-modes { grid-template-columns: 1fr; }
  .pm-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-f.wide { grid-column: span 2; }
}
@media (max-width: 760px) {
  .pm-persona-grid { grid-template-columns: 1fr; }
  .pm-f.wide { grid-column: span 1; }
  .pm-group-head { align-items: flex-start; }
  .pm-row { flex-wrap: wrap; }
}
.pm-lead { background: var(--paper); border-radius: 16px; box-shadow: var(--shadow);
           padding: 14px 20px; margin: 0 0 14px; font-size: 13.5px;
           color: var(--ink-soft); line-height: 1.7; }
.pm-lead code { background: var(--fill); border-radius: 6px; padding: 2px 7px;
                font-size: 12.5px; color: var(--violet); }
.pm-typeguide { font-size: 12.5px; color: var(--muted); line-height: 2.1;
                margin: 0 0 12px; }
.pm-typeguide .chip.cat { margin: 0 2px 0 6px; }
.pm-typeguide .pm-ok { color: var(--green); font-weight: 700; }
.pm-typeguide .pm-warn { color: var(--orange); font-weight: 700; }
.pm-ref { flex: none; align-self: flex-start; margin-top: 3px; font-size: 11px;
          font-weight: 800; color: var(--muted); background: var(--fill-deep);
          border-radius: 99px; padding: 2px 8px; cursor: help; }

/* ── 프롬프트 행: 메타(측정·언급·등록일) + 펼치기 ── */
.pm-item { border-radius: 12px; }
.pm-item + .pm-item { margin-top: 2px; }
.pm-row { cursor: pointer; }
.pm-row.open { background: var(--blue-soft); }
.pm-open { border: 0; background: transparent; color: var(--muted); cursor: pointer;
           font-size: 12px; line-height: 1; padding: 5px 2px; flex: none;
           transition: transform .16s ease; }
.pm-row.open .pm-open { transform: rotate(90deg); color: var(--blue); }
.pm-meta { display: flex; align-items: center; gap: 10px; flex: none;
           font-size: 12px; color: var(--muted); white-space: nowrap; }
.pm-m b { color: var(--ink-soft); font-size: 13px; }
.pm-m.hit b { color: var(--green); }
.pm-m i { font-style: normal; color: var(--muted); }
.pm-date { color: var(--muted); }

/* ── 상세 패널 — 왼쪽 요약 + 오른쪽 답변. 색은 회색조로 절제 ── */
.pm-item.open { background: var(--fill); border-radius: 12px; }
.pm-row.open { background: transparent; }
.pm-detail { padding: 2px 16px 16px 44px; }
.pm-detail[hidden] { display: none; }
.pmd-loading, .pmd-empty { font-size: 13px; color: var(--muted); padding: 16px 0;
                           line-height: 1.8; }
.pmd-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; }

/* 왼쪽 요약 */
.pmd-side { min-width: 0; }
.pmd-score { display: flex; align-items: baseline; gap: 2px; }
.pmd-score b { font-size: 32px; font-weight: 800; line-height: 1; color: var(--ink);
               letter-spacing: -.03em; }
.pmd-score span { font-size: 15px; font-weight: 800; color: var(--muted); }
.pmd-score-sub { font-size: 11.5px; color: var(--muted); font-weight: 700;
                 margin-top: 3px; }
.pmd-mini { margin-top: 14px; }
.pmd-mini > div { display: flex; align-items: baseline; justify-content: space-between;
                  padding: 7px 0; border-bottom: 1px solid var(--line-strong);
                  background: none; }
.pmd-mini span { font-size: 12px; color: var(--muted); font-weight: 600; }
.pmd-mini b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pmd-sec { font-size: 11.5px; font-weight: 800; color: var(--muted); margin: 16px 0 8px; }

/* AI별 막대 = 필터 버튼 */
.pmd-engines { display: flex; flex-direction: column; gap: 2px; }
.pmd-eng { display: flex; align-items: center; gap: 8px; width: 100%;
           border: 0; background: transparent; cursor: pointer; font-family: inherit;
           font-size: 11.5px; padding: 5px 6px; border-radius: 8px; text-align: left;
           transition: background .12s; }
.pmd-eng:hover { background: var(--fill-deep); }
.pmd-eng.on { background: var(--fill-deep); }
.pmd-eng-name { width: 58px; flex: none; font-weight: 700; color: var(--muted);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmd-eng.on .pmd-eng-name { color: var(--ink); }
.pmd-bar { flex: 1; min-width: 20px; height: 6px; background: var(--line-strong);
           border-radius: 99px; overflow: hidden; }
.pmd-bar i { display: block; height: 100%; background: var(--line-hover);
             border-radius: 99px; }
.pmd-eng.on .pmd-bar i { background: var(--ink-soft); }
.pmd-eng-n { flex: none; width: 30px; text-align: right; color: var(--muted);
             font-weight: 800; }

/* 오른쪽 답변 */
.pmd-main { min-width: 0; }
.pmd-tools { display: flex; align-items: center; gap: 10px;
             padding-bottom: 9px; }
.pmd-main-t { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.pmd-main-t em { font-style: normal; color: var(--line-hover); margin-left: 3px; }
select.pmd-run { width: auto; min-width: 118px; margin-left: auto; flex: none;
                 padding: 6px 10px; font-size: 12px; border-radius: 9px;
                 background: var(--paper); }
.pmd-answers { display: flex; flex-direction: column;
               max-height: 360px; overflow-y: auto; }
.pmd-a { padding: 12px 2px; border-top: 1px solid var(--line-strong); }
/* 회차 안 엔진 4칸 그리드 — 발췌 카드와 같은 배치 */
.pmd-runrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px; align-items: start; margin-bottom: 4px; }
.pmd-runrow .pmd-a { border-top: 0; background: var(--fill);
  border-radius: 12px; padding: 10px 12px; }
.pmd-runrow .pmd-a .sx-rank li { background: #fff; }
.pmd-runrow .pmd-chips:hover .sx-rank li { background: #f4f8ff; }
.pmd-runrow .pmd-chips:hover .sx-rank li.ours { background: #e6f6ec; }
.pmd-a-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.pmd-a-head b { font-size: 12px; color: var(--muted); font-weight: 700; }
.pmd-a.hit .pmd-a-head b { color: var(--ink); }
.pmd-a-head time { margin-left: auto; color: var(--line-hover); font-size: 11px;
                   font-weight: 700; }
.pmd-hit { font-size: 10.5px; font-weight: 800; color: var(--green); }
.pmd-text { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft);
            cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden; }
.pmd-text:hover { color: var(--ink); }
.pmd-a.full .pmd-text { -webkit-line-clamp: unset; display: block; white-space: pre-wrap; }
.pmd-brands { margin-top: 6px; font-size: 11px; color: var(--line-hover); }
.pmd-brands i { font-style: normal; font-weight: 700; color: var(--muted); }
.pmd-brands s { text-decoration: none; margin: 0 4px; }
.pmd-none { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.pmd-none[hidden] { display: none; }

@media (max-width: 1100px) {
  .pmd-body { grid-template-columns: 1fr; gap: 16px; }
}

/* ── 페이저 ── */
.pm-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
            padding: 10px 12px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.pm-pager[hidden] { display: none; }
.pm-pg { border: 0; background: transparent; cursor: pointer; font-family: inherit;
         min-width: 30px; height: 30px; border-radius: 9px; font-size: 12.5px;
         font-weight: 700; color: var(--ink-soft); transition: all .12s; }
.pm-pg:hover:not(:disabled) { background: var(--fill); }
.pm-pg.on { background: var(--blue); color: #fff; }
.pm-pg:disabled { color: var(--line-hover); cursor: default; }
.pm-pg-info { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 700; }

/* ── 입력 가능 영역 표시 — 회색 패널 위에서는 흰 배경 + 테두리로 구분 ── */
.pm-persona input,
.pm-persona select,
.pm-persona .fsel-btn,
.pm-gen-foot select,
.pm-gen-foot .fsel-btn,
.pmd select,
.pmd .fsel-btn,
.pm-filters input,
.pm-filters select,
.pm-filters .fsel-btn {
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
}
.pm-persona input:hover,
.pm-persona .fsel-btn:hover,
.pm-gen-foot .fsel-btn:hover,
.pmd .fsel-btn:hover,
.pm-filters input:hover,
.pm-filters .fsel-btn:hover { border-color: var(--line-hover); background: var(--paper); }
.pm-persona input:focus,
.pm-filters input:focus { border-color: var(--blue); background: var(--paper); }
/* 커스텀 드롭다운 열렸을 때 */
.pm-persona .fsel-menu.open ~ .fsel-btn,
.pm-persona .fsel-btn:focus { border-color: var(--blue); }
/* 페르소나 입력 그리드 — 라벨과 입력칸 대비 */
.pm-f { color: var(--ink-soft); font-weight: 700; }
.pm-persona input::placeholder { color: var(--line-hover); }
.pm-f-hint { font-weight: 600; color: var(--muted); font-size: 11.5px; }

/* ── 페르소나 관리 ── */
.pmg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pmg-card { border: 1.5px solid var(--line-strong); border-radius: 14px;
            padding: 12px 16px; background: var(--paper); }
.pmg-view { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pmg-view[hidden] { display: none; }
.pmg-id { flex: none; min-width: 150px; }
.pmg-id b { font-size: 14.5px; letter-spacing: -.02em; }
.pmg-n { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700;
         margin-top: 2px; }
.pmg-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pmg-chip { font-size: 12px; font-weight: 700; color: var(--ink-soft);
            background: var(--fill); border-radius: 8px; padding: 4px 10px; }
.pmg-chip i { font-style: normal; color: var(--muted); font-weight: 600;
              margin-right: 5px; font-size: 11px; }
.pmg-acts { display: flex; gap: 6px; flex: none; }
.pmg-form { margin: 0; }
.pmg-form[hidden] { display: none; }
.pmg-form-acts { display: flex; gap: 8px; margin-top: 14px; }
.pmg-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13.5px;
             background: var(--fill); border-radius: 14px; margin-bottom: 14px; }
.pmg-new { border-top: 1px solid var(--line); }
.pm-persona-none { padding: 16px; text-align: center; color: var(--muted);
                   font-size: 13px; line-height: 1.7; }

/* ── 상단 뷰 탭 (SOV 측정 / 페르소나) — 밑줄 탭 ── */
.pm-tabbar { display: flex; align-items: center; gap: 4px;
             border-bottom: 2px solid var(--line-strong); margin-bottom: 18px; }
.pm-tab { border: 0; background: transparent; cursor: pointer; font-family: inherit;
          font-size: 15.5px; font-weight: 800; letter-spacing: -.02em;
          color: var(--muted); padding: 11px 16px 12px; margin-bottom: -2px;
          border-bottom: 2.5px solid transparent; white-space: nowrap;
          transition: color .13s ease; }
.pm-tab:hover { color: var(--ink); }
.pm-tab.on { color: var(--blue); border-bottom-color: var(--blue); }
.pm-tab em { font-style: normal; font-size: 12px; font-weight: 800;
             color: var(--line-hover); margin-left: 5px;
             background: var(--fill); border-radius: 99px; padding: 2px 8px;
             vertical-align: 1px; }
.pm-tab.on em { background: var(--blue-soft); color: var(--blue); }
.pm-tabbar-desc { margin-left: auto; font-size: 12.5px; color: var(--muted);
                  padding-bottom: 3px; min-width: 0; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.pm-view[hidden] { display: none; }
@media (max-width: 900px) { .pm-tabbar-desc { display: none; } }

/* ── 사이드바 SOV 하위 메뉴 (흐름 순 + 완료 표시) ── */
.side-menu a.side-sub { gap: 7px; }
.sub-chk { flex: none; width: 13px; text-align: center; font-size: 11px;
           font-weight: 800; color: var(--line-hover); }
.side-menu a.side-sub.on .sub-chk { color: var(--blue); }
.side-sub em { margin-left: auto; font-style: normal; font-size: 11px;
               font-weight: 800; color: var(--line-hover); }
.side-menu a.side-sub.on em { color: var(--blue); }

/* ── 추천 칩 (자유 입력 필드 보조) ── */
.pm-sugg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pm-sugg button { border: 1px solid var(--line-strong); background: var(--paper);
                  cursor: pointer; font-family: inherit; font-size: 12px;
                  font-weight: 700; color: var(--muted); padding: 5px 11px;
                  border-radius: 99px; transition: all .12s; }
.pm-sugg button:hover { border-color: var(--line-hover); color: var(--ink); }
.pm-sugg button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pm-sugg button.clear { color: var(--line-hover); border-style: dashed; }
.pm-sugg button.clear:hover { color: var(--red); border-color: var(--red); }

/* ── 나이 범위 직접 입력 ── */
.pm-age-range[hidden] { display: none; }
.pm-range { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
/* .pm-f input 의 margin-top 이 중복 적용돼 셀렉트와 높이가 어긋나던 것 보정 */
.pm-range input { width: 100%; min-width: 0; margin-top: 0; text-align: center;
                  -moz-appearance: textfield; }
.pm-range input::-webkit-outer-spin-button,
.pm-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pm-range i { font-style: normal; color: var(--muted); font-weight: 700; flex: none; }
.pm-range em { font-style: normal; color: var(--muted); font-size: 12.5px;
               font-weight: 700; flex: none; }
.pm-listnote { font-size: 12.5px; color: var(--muted); line-height: 1.7;
               margin: 0 0 12px; }

/* ── 페르소나 삭제 확인 모달 ── */
.geo-modal-ico.danger { background: var(--red-soft); color: var(--red); }
.pmg-del-modal { max-width: 520px; text-align: center; }
.pmg-del-warn { background: var(--red-soft); color: var(--red); border-radius: 12px;
                padding: 11px 14px; font-size: 12.5px; font-weight: 700;
                line-height: 1.6; margin-bottom: 14px; text-align: left; }
.pmg-del-list { background: var(--fill); border-radius: 12px; padding: 12px 14px;
                text-align: left; max-height: 220px; overflow-y: auto;
                margin-bottom: 18px; }
.pmg-del-list[hidden] { display: none; }
.pmg-del-list-t { font-size: 11.5px; font-weight: 800; color: var(--muted);
                  margin-bottom: 8px; }
.pmg-del-item { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6;
                padding: 4px 0; border-bottom: 1px solid var(--line); }
.pmg-del-item:last-child { border-bottom: 0; }
.pmg-del-more { font-size: 11.5px; color: var(--muted); font-weight: 700;
                padding-top: 8px; }
.pmg-del-acts { display: flex; gap: 8px; justify-content: flex-end; }
/* 순차 진단 중인 카드 표시 */
.page-card.diag-running { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

/* ── 프롬프트 요약 스트립 (카드 4장 대체) ── */
.pm-strip { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
            background: var(--paper); border-radius: 14px; box-shadow: var(--shadow);
            padding: 12px 20px; margin-bottom: 14px; font-size: 13px;
            color: var(--muted); font-weight: 600; }
.pm-strip b { font-size: 16px; font-weight: 800; color: var(--ink); margin-left: 3px; }
.pm-strip b.ok { color: var(--green); }
.pm-strip i { width: 1px; height: 14px; background: var(--line-strong);
              align-self: center; }
.pm-strip-ex { color: var(--orange); font-weight: 700; }
.pm-strip-ex:empty { display: none; }
.pm-strip-note { margin-left: auto; font-weight: 500; font-size: 12.5px; }
.pmg-presets { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pmg-preset { border: 1.5px dashed var(--line-hover); background: var(--paper);
              cursor: pointer; font-family: inherit; border-radius: 14px;
              padding: 12px 18px; text-align: left; transition: all .14s; }
.pmg-preset:hover { border-color: var(--blue); border-style: solid;
                    background: var(--blue-soft); }
.pmg-preset b { display: block; font-size: 13.5px; color: var(--ink); }
.pmg-preset span { font-size: 11.5px; color: var(--muted); }
.pm-exbanner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
               background: var(--orange-soft); border-radius: 14px;
               padding: 12px 18px; margin-bottom: 14px; font-size: 13px;
               color: var(--orange); font-weight: 600; line-height: 1.6; }
.pm-exbanner span { flex: 1; min-width: 200px; }
.pm-exbanner .btn { background: var(--orange); }
.page-card.diag-done { animation: diagPulse .9s ease; }
.page-card.diag-failed { border-color: var(--red); }
@keyframes diagPulse {
  0% { box-shadow: 0 0 0 0 rgba(11, 178, 95, .35); }
  100% { box-shadow: 0 0 0 14px rgba(11, 178, 95, 0); }
}

/* ── 사이트맵 실시간 등록 러너 ── */
.url-row.url-running { background: var(--blue-soft); border-radius: 8px; }
.url-row.url-ok .url-text { color: var(--green); }
.url-row.url-warn .url-text { color: var(--orange); }
.url-row.url-fail .url-text { color: var(--red); text-decoration: line-through; }
.badge.url-ok { background: var(--green-soft); color: var(--green); }
.badge.url-warn { background: var(--orange-soft); color: var(--orange); }
.badge.url-fail { background: var(--red-soft); color: var(--red); }
.page-card.card-new { border-color: var(--green); animation: diagPulse .9s ease 2; }
.new-badge { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 800;
             color: var(--green); background: var(--green-soft); border-radius: 99px;
             padding: 2px 8px; vertical-align: 2px; }
.cn-view[hidden] { display: none; }

/* ── 언급 측정 키워드 표시 ── */
.mk-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mk-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted);
            margin-bottom: 8px; }
.mk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-chip { font-size: 13px; font-weight: 700; color: var(--ink-soft);
           background: var(--fill); border-radius: 99px; padding: 5px 13px; }
.mk-chip.main { background: var(--blue-soft); color: var(--blue); }
/* 상세 패널 — 매칭 표기 */
.pmd-kw { font-size: 11px; font-weight: 700; color: var(--ink-soft);
          background: var(--fill-deep); border-radius: 99px; padding: 2px 9px;
          max-width: 40%; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; }
/* 리포트 — 표기별 언급 */
.kwc-list { display: flex; flex-direction: column; }
.kwc-row { display: flex; align-items: baseline; justify-content: space-between;
           padding: 8px 2px; border-bottom: 1px solid var(--line); }
.kwc-row:last-child { border-bottom: 0; }

/* 표기 재판정 — 키워드를 고친 뒤 지난 회차까지 다시 계산 */
.kwc-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.kwc-act .inline-form { margin: 0; }
.kwc-act-note { font-size: 11.5px; color: #8a97a5; flex: 1 1 100%; }
.kwc-name { font-size: 13.5px; font-weight: 700; }
.kwc-n { font-size: 14px; font-weight: 800; color: var(--blue); }
.kwc-row.zero .kwc-name { color: var(--muted); font-weight: 600; }
.kwc-row.zero .kwc-n { color: var(--line-hover); }

/* ── 폼 저장 바 — 화면 하단 전체 폭 고정 (긴 폼에서 스크롤 없이 저장) ── */
.form-actions { display: flex; align-items: center; gap: 10px;
                position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
                background: var(--paper); border-top: 1px solid var(--line-strong);
                padding: 14px 40px;
                box-shadow: 0 -8px 24px rgba(0, 27, 55, .10); }
main.with-side .form-actions { left: 240px; }   /* 사이드바 폭만큼 비켜서 시작 */
.fa-note { flex: 1; font-size: 13px; color: var(--muted); font-weight: 600; }
/* 고정 바가 마지막 입력을 가리지 않도록 폼 하단 여백 확보 */
form:has(> .form-actions), form:has(.form-actions) { padding-bottom: 92px; }
@media (max-width: 800px) { main.with-side .form-actions { left: 0; } }

/* 언급 측정 키워드 — 입력박스 목록 (site_form) */
.mkr-rows { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.mkr-row { display: flex; align-items: center; gap: 8px; }
.mkr-row input { flex: 1; margin: 0; }
.mkr-del { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
           border: 1px solid var(--line-strong); background: #fff; color: var(--muted);
           font-size: 13px; cursor: pointer; line-height: 1; }
.mkr-del:hover { color: #c0392b; border-color: #e6b0aa; background: #fdf3f2; }
.mkr-add { margin-top: 10px; }

/* ── 카페24 페이지별 적용 현황 ─────────────────────────── */
.c24pg-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.c24pg-head b { font-size: 14.5px; }
.c24pg-count { font-size: 12px; color: #8a94a6; background: #f1f3f7;
  border-radius: 99px; padding: 2px 10px; }
#c24PgProgress { font-weight: 700; color: var(--blue, #1e5eff); }
.c24pg-bar { height: 6px; border-radius: 99px; background: #eceff3;
  overflow: hidden; margin: 0 0 10px; }
.c24pg-bar[hidden] { display: none; }
.c24pg-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--blue, #1e5eff); transition: width .3s ease; }
.c24pg-wrap { overflow-x: auto; border: 1px solid #e7eaf0; border-radius: 12px;
  background: #fff; }
table.c24-pages { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.c24-pages thead th { text-align: left; font-size: 12px; color: #8a94a6;
  font-weight: 700; padding: 10px 16px; background: #f8f9fb;
  border-bottom: 1px solid #eceff3; white-space: nowrap; }
.c24-pages .c24-col-st { width: 120px; }
.c24-pages .c24-col-at { width: 150px; }
.c24-pages tbody td { padding: 11px 16px; border-bottom: 1px solid #f3f5f8;
  vertical-align: middle; }
.c24-pages tbody tr:last-child td { border-bottom: 0; }
.c24-pages tbody tr:hover td { background: #fafbfd; }
.c24pg-title { font-weight: 700; color: #24304a; }
.c24pg-url { font-size: 12px; color: #98a1b3; margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.c24-at { color: #98a1b3; font-size: 12.5px; white-space: nowrap; }
.vbadge.v-none { background: #eef1f5; color: #7d8798; }
.c24-pages .c24-col-act { width: 130px; }
.c24-act { white-space: nowrap; text-align: right; }
.c24-act .btn { padding: 4px 10px; font-size: 12px; }
/* 카페24 적용 3단계 — 가로 카드 그리드 */
.c24-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 14px 0 14px; }
.c24-step { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
  border: 1px solid #e7eaf0; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(20, 28, 46, .04); }
.c24-step-top { display: flex; align-items: center; gap: 8px; }
.c24-step-top b { font-size: 15px; color: #24304a; }
.c24-step-no { font-size: 18px; color: var(--blue, #1e5eff); font-weight: 800; }
.c24-step-desc { font-size: 12.5px; color: #8a94a6; line-height: 1.55;
  margin: 0; flex: 1 1 auto; }
.c24-step-act { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.c24-tools { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 6px;
  flex-wrap: wrap; }
.c24-more summary { font-size: 12.5px; color: #8a94a6; cursor: pointer;
  padding: 6px 4px; user-select: none; }
.c24-more[open] summary { color: #24304a; }
.c24pg-why { font-size: 12px; color: #b0a06a; margin-top: 2px; }
.c24-step-act { flex-wrap: wrap; }
@media (max-width: 1100px) { .c24-steps { grid-template-columns: 1fr; } }

/* ③ 전 상품 공통 정보 입력 패널 */
.c24-common { margin: -4px 0 14px; padding: 16px 18px; border: 1px solid #dce3ef;
  border-left: 4px solid var(--blue, #1e5eff); border-radius: 14px; background: #f8faff; }
.c24-common-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.c24-common-head b { font-size: 15px; color: #24304a; }
.c24-common-warn { font-size: 13px; line-height: 1.6; color: #7a4b00; background: #fff6e0;
  border: 1px solid #f3dca0; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.c24-common-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.c24-common-grid label, .c24-faq-row { display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: #5a6478; }
.c24-common-grid input, .c24-faq-row input { font-size: 13.5px; padding: 7px 10px;
  border: 1px solid #d5dbe6; border-radius: 8px; background: #fff; }
.c24-common-faq { margin-top: 14px; }
.c24-common-faq > b { font-size: 14px; color: #24304a; }
.c24-common-faq .hint { margin-left: 6px; }
.c24-faq-row { flex-direction: row; gap: 8px; margin-top: 8px; }
.c24-faq-row input:first-child { flex: 0 0 38%; }
.c24-faq-row input:last-child { flex: 1 1 auto; }
@media (max-width: 900px) { .c24-common-grid { grid-template-columns: 1fr; }
  .c24-faq-row { flex-direction: column; } }

/* 카페24 처리 결과 모달 */
.c24-modal { position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 28, 46, .45); display: flex;
  align-items: center; justify-content: center; }
.c24-modal[hidden] { display: none; }
.c24-modal-box { background: #fff; border-radius: 16px; padding: 30px 34px 24px;
  max-width: 440px; width: calc(100% - 40px); text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22); display: flex;
  flex-direction: column; gap: 14px; align-items: center;
  animation: c24pop .18s ease; }
@keyframes c24pop { from { transform: scale(.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; } }
.c24-modal-icon { width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; }
.c24-modal-icon.ok { background: #e6f6ec; color: #0a7a3d; }
.c24-modal-icon.err { background: #fdecec; color: #c00000; }
.c24-modal-icon.ask { background: #e8f3ff; color: #1b64da; }
.c24-modal-ask-title { font-size: 16px; font-weight: 800; color: #24304a; }
.c24-modal-msg { font-size: 14px; color: #24304a; line-height: 1.65;
  word-break: keep-all; }

/* ── 진단 히스토리 ─────────────────────────────────────── */
.page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin: 4px 0 16px; }
.page-head h1 { margin: 0 0 4px; }
.page-sub { font-size: 13px; color: #8a94a6; margin: 0; }
.hist-summary { display: flex; align-items: center; gap: 18px; padding: 18px 22px;
  border: 1px solid #e7eaf0; border-radius: 14px; background: #fff;
  margin-bottom: 16px; flex-wrap: wrap; }
.hist-sum-item { display: flex; flex-direction: column; gap: 2px; }
.hist-sum-label { font-size: 12px; color: #8a94a6; }
.hist-sum-score { font-size: 26px; font-weight: 800; color: #24304a; }
.hist-sum-score.now { color: var(--blue, #1e5eff); }
.hist-sum-arrow { font-size: 20px; color: #c3cad6; }
.hist-empty { padding: 30px; text-align: center; color: #8a94a6;
  border: 1px dashed #d7dde6; border-radius: 14px; font-size: 14px; }
.hist-card { border: 1px solid #e7eaf0; border-radius: 14px; background: #fff;
  padding: 16px 20px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(20, 28, 46, .04); }
.hist-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hist-no { font-size: 12px; font-weight: 800; color: var(--blue, #1e5eff);
  background: #eef3ff; border-radius: 99px; padding: 3px 10px; }
.hist-avg { font-size: 22px; font-weight: 800; color: #24304a; }
.hist-avg small { font-size: 13px; font-weight: 600; color: #8a94a6; }
.hist-diff { font-size: 12.5px; font-weight: 700; color: #8a94a6; }
.hist-diff.up { color: #0a7a3d; }
.hist-diff.down { color: #c00000; }
.hist-meta { font-size: 12px; color: #98a1b3; margin-left: auto; }
.hist-note { display: flex; gap: 8px; margin: 10px 0 2px; }
.hist-note input { flex: 1 1 auto; border: 1px solid #e0e5ec; border-radius: 8px;
  padding: 7px 12px; font-size: 13px; }
.hist-note input:focus { outline: 2px solid rgba(30, 94, 255, .25); }
.hist-pages { margin-top: 10px; }
.hist-pages summary { font-size: 12.5px; color: #8a94a6; cursor: pointer;
  user-select: none; padding: 4px 0; }
.hist-pages[open] summary { color: #24304a; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 13px;
  margin-top: 6px; }
.hist-table th { text-align: left; font-size: 11.5px; color: #8a94a6;
  padding: 6px 10px; border-bottom: 1px solid #eceff3; }
.hist-table td { padding: 7px 10px; border-bottom: 1px solid #f3f5f8; }
.hist-table .num { text-align: right; width: 64px; white-space: nowrap; }
.hist-table .dim { color: #b6bdc9; }
.hist-pt { max-width: 380px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.c24-step-badge { margin-left: auto; }

/* 카페24 자동 처리 안내 패널 (진단 목록 상단) */
.c24auto { border: 1px solid #e7eaf0; border-radius: 14px; background: #f8fafd;
  padding: 14px 18px; margin: 0 0 14px; }
.c24auto-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; }
.c24auto-head b { font-size: 14px; color: #24304a; }
.c24auto-head span { font-size: 12px; color: #8a94a6; }
.c24auto-row { display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-top: 1px solid #eceff3; flex-wrap: wrap; }
.c24auto-n { flex: 0 0 130px; font-size: 13px; font-weight: 700; color: #24304a; }
.c24auto-desc { flex: 1 1 300px; font-size: 12.5px; color: #6b7688; line-height: 1.55; }
/* 카드 4개 — 폭에 따라 자동 배치 */
.c24-steps { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ================================================== 온보딩 (새 사이트 등록) */
/* 도메인 하나로 시작하는 등록 플로우 — 시작 화면 + 브랜드 확인 화면 */
.onb-wrap { max-width: 720px; }

/* 등록 모달 — 결과 모달(.c24-modal) 골격 재사용, 내용은 좌측 정렬 */
.onb-modal-box {
  max-width: 560px; text-align: left; align-items: stretch; gap: 6px;
  max-height: calc(100vh - 60px); overflow-y: auto; }
.onb-modal-head { display: flex; align-items: center; justify-content: space-between; }
.onb-modal-head h2 { margin: 0; font-size: 20px; }
.onb-modal-x {
  border: 0; background: none; cursor: pointer; font-size: 16px;
  color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.onb-modal-x:hover { background: var(--fill); color: var(--ink); }
.onb-flow { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.onb-flow-title { margin: 0 0 10px; font-size: 13.5px; font-weight: 800; color: var(--ink-soft); }

/* 진행 가이드 모달 — 테마(다크/라이트)를 따라가는 넓은 박스 */
.guide-modal-box {
  max-width: 960px; text-align: left; align-items: stretch; gap: 6px;
  background: var(--paper); color: var(--ink);
  max-height: calc(100vh - 60px); overflow-y: auto; }
.guide-modal-box h2 { margin: 0; font-size: 19px; }

/* 진행 가이드 카드 — 대시보드 첫 화면 + ? 도움말 모달 공용 */
.guide-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; }
.gcard {
  --gc: var(--blue);   /* 단계별 포인트 컬러 (cN 클래스가 덮어씀) */
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 2px 12px rgba(25, 31, 40, .05);
  transition: transform .16s ease, box-shadow .16s ease; }
.gcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(25, 31, 40, .12); }
.gcard::before {   /* 상단 컬러 액센트 바 */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--gc); }
.gcard .gico {
  width: 46px; height: 46px; border-radius: 14px; font-size: 23px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--gc) 13%, transparent);
  margin: 2px 0 6px; }
.gcard .gstep {
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
  color: var(--gc); }
.gcard b { font-size: 16.5px; color: var(--ink); }
.gcard .gdesc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
/* 단계별 컬러 팔레트 */
.gcard.c1 { --gc: #3182F6; }   /* 블루 — 등록 */
.gcard.c2 { --gc: #7048E8; }   /* 바이올렛 — 진단 */
.gcard.c3 { --gc: #0CA678; }   /* 틸 — 연결 */
.gcard.c4 { --gc: #F76707; }   /* 오렌지 — 사이트 정보 */
.gcard.c5 { --gc: #E64980; }   /* 핑크 — 페이지 정보 */
.gcard.c6 { --gc: #37B24D; }   /* 그린 — 재진단 */
.gcard.c7 { --gc: #4263EB; }   /* 인디고 — SOV 세팅 */
.gcard.c8 { --gc: #1098AD; }   /* 시안 — SOV 측정/리포트 */

/* 첫 방문 등록 화면 (사이트 0개 — 대시보드가 곧 등록 화면) */
.onb-hero { max-width: 1240px; margin: 28px auto 0; }
.onb-hero h1 { margin-bottom: 6px; font-size: 27px; }
.onb-hero .page-sub { line-height: 1.65; font-size: 14.5px; }
.onb-hero-card {   /* 주소 입력을 감싸는 카드 — 화면의 주인공 */
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px 34px; margin: 26px 0 34px;
  box-shadow: 0 10px 34px rgba(49, 130, 246, .10); }
.onb-hero .onb-row { gap: 12px; }
.onb-hero .onb-row input { font-size: 16px; padding: 15px 18px; }
.onb-hero .onb-row .btn { padding: 15px 28px; font-size: 15px; }
.onb-hero .onb-flow { border-top: 0; padding-top: 0; }
.onb-hero .onb-flow-title { font-size: 15px; margin-bottom: 14px; }

/* 주소 입력 줄 — 입력칸 + 시작 버튼 */
.onb-row { display: flex; gap: 8px; }
.onb-row input { flex: 1; min-width: 0; }
.onb-row .btn { flex: none; }

/* 브랜드 확인 화면 — 로고 + 이름/유형 2열 (로고는 필드 행 높이에 맞춰 세로 중앙) */
.onb-confirm { display: flex; gap: 16px; align-items: center; }
.onb-logo {
  flex: none; width: 76px; height: 76px; object-fit: contain;
  border-radius: 14px; background: #fff;
  border: 1px solid var(--line-strong); padding: 7px; }
.onb-confirm-fields {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) {
  .onb-confirm-fields { grid-template-columns: 1fr; }
}

/* 브랜드 확인 — 주소 입력칸 아래에 이어서 표시 */
.onb-result .onb-confirm-wrap {
  border-top: 1px dashed var(--line-strong);
  margin-top: 20px; padding-top: 20px; }
.onb-confirm-title { margin: 0 0 4px; font-size: 19px; }
.onb-warn {
  font-size: 13px; font-weight: 600; color: #B54708;
  background: #FFF7E6; border: 1px solid #F5D9A8;
  border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; }

/* 페이지 선택 목록 — 브랜드 확인 아래에 이어서 표시 */
.onb-pages-slot .onb-pages-wrap {
  border-top: 1px dashed var(--line-strong);
  margin-top: 20px; padding-top: 20px; }
/* 페이지 선택 — 경로 패턴 그룹 */
.onb-groups { display: flex; flex-direction: column; gap: 8px; }
.onb-group { border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--paper); overflow: hidden; }
.onb-group > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none; font-size: 13.5px; }
.onb-group > summary::-webkit-details-marker { display: none; }
.onb-group > summary::before { content: '▸'; color: var(--muted); font-size: 12px; }
.onb-group[open] > summary::before { content: '▾'; }
.onb-group .og-pat { font-weight: 800; color: var(--ink); word-break: break-all; }
.onb-group .og-kind { font-size: 11.5px; font-weight: 700; color: var(--blue-dark);
  background: var(--blue-soft); border-radius: 999px; padding: 2px 9px; }
.onb-group .og-kind.off { color: var(--muted); background: var(--fill); }
.onb-group .og-n { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.onb-group .og-note { font-size: 12px; color: var(--muted); }
.onb-group .og-all { margin-left: auto; }
.onb-group.skip { background: var(--fill); }
.onb-group.skip .og-pat { color: var(--muted); font-weight: 700; }
.onb-count { margin-left: auto; font-weight: 700; }
.onb-plist {
  max-height: 260px; overflow-y: auto;
  border-top: 1px solid var(--line); background: var(--fill); padding: 4px; }
.onb-purl {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 0; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  cursor: pointer; word-break: break-all; }
.onb-purl:hover { background: var(--paper); color: var(--ink); }
.onb-purl input { width: auto; flex: none; }

/* 페이지 상세 — 요약 정보 + 실제 화면 미리보기 2단 */
.pgv-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px;
  align-items: start; }
@media (max-width: 1100px) { .pgv-grid { grid-template-columns: 1fr; } }
.pgv-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 6px; }
.pgv-preview-head a { font-weight: 700; }
.pgv-frame {
  width: 100%; height: 400px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: #fff; }

/* 감지된 항목 칩 */
.onb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.onb-chip {
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--fill); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 3px 10px; }

/* 온보딩 직후 진단 탭 환영 배너 */
.onb-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--blue-soft); border: 1px solid var(--blue);
  border-radius: 14px; padding: 14px 18px; margin: 0 0 16px; }
.onb-banner .ob-ico { font-size: 22px; flex: none; }
.onb-banner .ob-body { flex: 1; min-width: 240px; font-size: 14px; line-height: 1.6; }
.onb-banner .ob-body b { color: var(--blue-dark); }
.onb-banner a { font-weight: 700; color: var(--blue-dark); }

/* ================================================== 랜딩 리디자인 (.ld-) */
/* 히어로 — 다크 그라디언트 카드 + AI 답변 목업 */
.ld-hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
  align-items: center; border-radius: 24px; margin: 26px 0 10px;
  padding: 64px 56px;
  background: linear-gradient(140deg, #0f1b3d 0%, #1e3a8a 55%, #2563eb 110%);
  color: #fff; box-shadow: 0 24px 60px rgba(15, 27, 61, .25); }
.ld-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800;
  letter-spacing: .08em; color: #93c5fd; background: rgba(147, 197, 253, .12);
  border: 1px solid rgba(147, 197, 253, .35);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 18px; }
.ld-hero h1 { font-size: 42px; line-height: 1.28; margin: 0 0 16px;
              letter-spacing: -.04em; color: #fff; }
.ld-sub { font-size: 16.5px; line-height: 1.75; color: #c7d7f5; margin: 0 0 28px; }
.ld-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ld-cta {
  display: inline-block; background: #fff; color: #1e3a8a;
  font-size: 16px; font-weight: 800; text-decoration: none;
  padding: 15px 34px; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease; }
.ld-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .3); }
.ld-cta-hint { font-size: 13px; color: #9db4e4; line-height: 1.5; }
.ld-cta-hint b { color: #dbe7ff; }

/* AI 답변 목업 카드 */
.ld-mock { background: #fff; border-radius: 18px; overflow: hidden;
           box-shadow: 0 18px 44px rgba(0, 0, 0, .35); color: #1c2434; }
.ld-mock-q { background: #f2f5f9; padding: 14px 18px; font-size: 13.5px;
             font-weight: 700; color: #333d4e; }
.ld-mock-a { padding: 16px 18px 12px; }
.ld-mock-lab { display: block; font-size: 11px; font-weight: 800;
               color: #067647; margin-bottom: 6px; }
.ld-mock-a p { margin: 0; font-size: 14px; line-height: 1.7; color: #40495a; }
.ld-mock-a mark { background: #dbeafe; color: #1d4ed8; font-weight: 800;
                  border-radius: 4px; padding: 1px 5px; }
.ld-mock-foot { border-top: 1px dashed #dbe2ec; padding: 10px 18px 13px;
                font-size: 12px; font-weight: 700; color: #2563eb; }

/* 섹션 공통 */
.ld-sec { margin: 64px 0 0; text-align: center; }
.ld-sec-kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em;
                 color: var(--blue); margin: 0 0 8px; }
.ld-sec-title { font-size: 28px; letter-spacing: -.03em; margin: 0 0 26px; }

/* 기능 4카드 */
.ld-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
            text-align: left; }
.ld-feat {
  --fc: var(--blue);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 24px; position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(25, 31, 40, .05);
  transition: transform .16s ease, box-shadow .16s ease; }
.ld-feat:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(25, 31, 40, .12); }
.ld-feat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
                   background: var(--fc); }
.ld-feat.f1 { --fc: #7048E8; } .ld-feat.f2 { --fc: #0CA678; }
.ld-feat.f3 { --fc: #4263EB; } .ld-feat.f4 { --fc: #F76707; }
.ld-feat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; font-size: 22px;
  background: color-mix(in srgb, var(--fc) 12%, transparent); margin-bottom: 12px; }
.ld-feat h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.02em; }
.ld-feat p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* 강점 3 */
.ld-whys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
           text-align: left; }
.ld-why { background: var(--fill); border-radius: 18px; padding: 24px; }
.ld-why b { display: block; font-size: 16px; margin-bottom: 8px; }
.ld-why p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* 3스텝 */
.ld-steps { display: flex; align-items: stretch; justify-content: center;
            gap: 14px; flex-wrap: wrap; }
.ld-step { background: var(--paper); border: 1px solid var(--line);
           border-radius: 18px; padding: 22px 26px; min-width: 200px;
           box-shadow: 0 2px 12px rgba(25, 31, 40, .05); }
.ld-step i { display: inline-flex; align-items: center; justify-content: center;
             width: 34px; height: 34px; border-radius: 50%; font-style: normal;
             background: var(--blue); color: #fff; font-weight: 900;
             font-size: 16px; margin-bottom: 10px; }
.ld-step b { display: block; font-size: 16px; margin-bottom: 4px; }
.ld-step p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.ld-step-arrow { align-self: center; font-size: 22px; font-weight: 900;
                 color: var(--line-hover); }

/* 마지막 CTA 밴드 */
.ld-band {
  margin: 64px 0 30px; padding: 52px 40px; border-radius: 24px;
  text-align: center; color: #fff;
  background: linear-gradient(140deg, #0f1b3d 0%, #1e3a8a 60%, #2563eb 115%);
  box-shadow: 0 20px 50px rgba(15, 27, 61, .22); }
.ld-band h2 { font-size: 28px; margin: 0 0 8px; color: #fff; letter-spacing: -.03em; }
.ld-band p { margin: 0 0 22px; font-size: 15px; color: #c7d7f5; }
.ld-cta.light { background: #fff; color: #1e3a8a; }

/* 반응형 */
@media (max-width: 1024px) {
  .ld-hero { grid-template-columns: 1fr; padding: 44px 32px; }
  .ld-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .ld-hero h1 { font-size: 30px; }
  .ld-feats, .ld-whys { grid-template-columns: 1fr; }
  .ld-step-arrow { display: none; }
}

/* ── 랜딩 확장 섹션 ───────────────────────────────── */
/* 히어로 신뢰 지표 */
.ld-stats { display: flex; gap: 26px; margin-top: 28px; flex-wrap: wrap; }
.ld-stat b { display: block; font-size: 20px; color: #fff; letter-spacing: -.02em; }
.ld-stat span { font-size: 12.5px; color: #9db4e4; }
.ld-mock-sub { margin-top: 14px; font-size: 13px; color: #b9cbf0; line-height: 1.6;
               text-align: center; }
.ld-mock-sub b { color: #fff; }

/* 문제 제기 — 어제 vs 오늘 */
.ld-problem { display: grid; grid-template-columns: 1fr 46px 1.25fr;
              gap: 14px; align-items: stretch; text-align: left; }
.ld-prob { border-radius: 20px; padding: 26px 26px; }
.ld-prob.old { background: var(--fill); color: var(--ink-soft); }
.ld-prob.new { background: var(--paper); border: 2px solid var(--blue);
               box-shadow: 0 10px 30px rgba(49, 130, 246, .12); }
.ld-prob-tag { display: inline-block; font-size: 11.5px; font-weight: 800;
               border-radius: 999px; padding: 3px 11px; margin-bottom: 10px;
               background: var(--line); color: var(--ink-soft); }
.ld-prob-tag.on { background: var(--blue); color: #fff; }
.ld-prob b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.ld-prob p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }
.ld-prob-arrow { align-self: center; text-align: center; font-size: 24px;
                 font-weight: 900; color: var(--blue); }

/* 대시보드 미리보기 숫자 카드 */
.ld-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ld-mini { background: var(--paper); border: 1px solid var(--line);
           border-radius: 20px; padding: 26px 22px;
           box-shadow: 0 2px 12px rgba(25, 31, 40, .05); }
.ld-mini-lab { font-size: 12.5px; font-weight: 800; color: var(--muted);
               letter-spacing: .04em; }
.ld-mini-num { font-size: 34px; font-weight: 900; letter-spacing: -.03em;
               margin: 6px 0 4px; }
.ld-mini-num s { color: var(--muted); font-weight: 700; font-size: 24px; }
.ld-mini-num em { font-style: normal; color: var(--muted); font-size: 20px; }
.ld-mini-num b { color: var(--blue); }
.ld-mini-num b.g { color: #0a7a3d; }
.ld-mini-num small { font-size: 15px; color: var(--muted); font-weight: 700; }
.ld-mini p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.ld-mini-note { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); }

/* 강점 4열 */
.ld-whys.four { grid-template-columns: repeat(4, 1fr); }

/* 지원 플랫폼 */
.ld-plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
            text-align: left; }
.ld-plat { background: var(--paper); border: 1px solid var(--line);
           border-radius: 20px; padding: 24px;
           box-shadow: 0 2px 12px rgba(25, 31, 40, .05); }
.ld-plat > b { font-size: 16.5px; margin-right: 8px; }
.ld-plat-badge { display: inline-block; font-size: 11px; font-weight: 800;
                 border-radius: 999px; padding: 2.5px 10px; vertical-align: 2px;
                 background: var(--fill); color: var(--ink-soft); }
.ld-plat-badge.auto { background: #e6f6ec; color: #0a7a3d; }
.ld-plat p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.7;
             color: var(--ink-soft); }

/* 이런 분들께 */
.ld-whos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
           text-align: left; }
.ld-who { background: var(--fill); border-radius: 20px; padding: 24px; }
.ld-who-ico { display: inline-flex; align-items: center; justify-content: center;
              width: 44px; height: 44px; border-radius: 13px; font-size: 21px;
              background: var(--paper); margin-bottom: 10px; }
.ld-who b { display: block; font-size: 16px; margin-bottom: 6px; }
.ld-who p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* FAQ */
.ld-faqs { max-width: 860px; margin: 0 auto; text-align: left; }
.ld-faq { background: var(--paper); border: 1px solid var(--line);
          border-radius: 14px; padding: 0 20px; margin-bottom: 10px; }
.ld-faq summary { cursor: pointer; list-style: none; font-size: 15px;
                  font-weight: 700; padding: 16px 0; position: relative; }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: "+"; position: absolute; right: 2px; top: 14px;
                         font-size: 20px; font-weight: 400; color: var(--muted); }
.ld-faq[open] summary::after { content: "–"; }
.ld-faq p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.75;
            color: var(--ink-soft); }

/* 확장 반응형 */
@media (max-width: 1024px) {
  .ld-whys.four { grid-template-columns: repeat(2, 1fr); }
  .ld-minis, .ld-plats, .ld-whos { grid-template-columns: 1fr; }
  .ld-problem { grid-template-columns: 1fr; }
  .ld-prob-arrow { transform: rotate(90deg); }
}

/* ── 랜딩 프리미엄 업그레이드 ───────────────────────── */
/* 히어로 배경 — 그리드 + 글로우 (기술 제품 느낌) */
.ld-hero { position: relative; overflow: hidden; }
.ld-hero-bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 300px at 82% 12%, rgba(96, 165, 250, .28), transparent 65%),
    radial-gradient(500px 320px at 8% 95%, rgba(37, 99, 235, .35), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 44px); }
.ld-hero-tx, .ld-hero-mock { position: relative; z-index: 1; }

/* 타이핑 데모 — 상태 점 + 커서 */
.ld-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
          background: #16a34a; margin-right: 5px;
          animation: ldPulse 1.4s ease infinite; }
@keyframes ldPulse { 50% { opacity: .35; } }
.ld-mock-a p { min-height: 72px; }
.ld-caret { display: inline-block; width: 2px; height: 15px; background: #2563eb;
            vertical-align: -2px; margin-left: 2px;
            animation: ldBlink .8s step-start infinite; }
@keyframes ldBlink { 50% { opacity: 0; } }

/* 신뢰 배지 스트립 */
.ld-trust { display: flex; align-items: center; justify-content: center;
            flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 4px;
            padding: 14px 18px; border-radius: 16px;
            background: var(--paper); border: 1px solid var(--line); }
.ld-trust span { font-size: 11.5px; font-weight: 800; color: var(--muted);
                 letter-spacing: .06em; margin-right: 2px; }
.ld-trust b { font-size: 12.5px; font-weight: 800; color: var(--ink-soft);
              background: var(--fill); border-radius: 999px; padding: 5px 13px; }
.ld-trust i { width: 1px; height: 18px; background: var(--line-strong); margin: 0 8px; }

/* 기술 섹션 — 좌 설명 / 우 코드·터미널 데모 */
.ld-tech { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px;
           text-align: left; align-items: start; }
.ld-tech-item { padding: 18px 20px; border-left: 3px solid var(--blue);
                background: var(--paper); border-radius: 0 14px 14px 0;
                margin-bottom: 12px; border-top: 1px solid var(--line);
                border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ld-tech-item > b { font-size: 15.5px; display: block; margin-bottom: 5px; }
.ld-tech-item p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.ld-tech-tag { font-size: 11px; font-weight: 800; color: #1d4ed8;
               background: #dbeafe; border-radius: 999px; padding: 2px 9px;
               vertical-align: 2px; margin-left: 4px; }

/* 코드 카드 (다크) */
.ld-code { background: #0d1526; border-radius: 16px; overflow: hidden;
           box-shadow: 0 16px 40px rgba(13, 21, 38, .35); }
.ld-code-head { display: flex; align-items: center; gap: 6px;
                padding: 11px 14px; background: #111c33;
                border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ld-code-head i { width: 10px; height: 10px; border-radius: 50%; background: #2c3a57; }
.ld-code-head i:first-child { background: #f43f5e; }
.ld-code-head i:nth-child(2) { background: #f5b40f; }
.ld-code-head i:nth-child(3) { background: #22c55e; }
.ld-code-head span { margin-left: 8px; font-size: 11.5px; font-weight: 700;
                     color: #7d90b8; }
.ld-code pre { margin: 0; padding: 18px 20px; font-size: 13px; line-height: 1.75;
               color: #c8d4ea; font-family: 'SF Mono', Consolas, 'Courier New', monospace;
               overflow-x: auto; }
.ld-code pre em { font-style: normal; color: #7dd3fc; }
.ld-code pre u { text-decoration: none; color: #86efac; }
.ld-code pre b { color: #fbbf24; }

/* 터미널 검증 로그 */
.ld-term { margin-top: 12px; background: #0d1526; border-radius: 14px;
           padding: 14px 18px; box-shadow: 0 12px 30px rgba(13, 21, 38, .3); }
.ld-term-line { font-size: 12.5px; line-height: 2;
                font-family: 'SF Mono', Consolas, monospace; color: #9fb2d6; }
.ld-term-line.ok { color: #6ee7a0; }
.ld-term-line.run { color: #93c5fd; }
.ld-term-line span { color: #64769c; margin-left: 6px; }

/* 스크롤 등장 모션 */
.ld-reveal { opacity: 0; transform: translateY(22px);
             transition: opacity .6s ease, transform .6s ease; }
.ld-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ld-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1024px) { .ld-tech { grid-template-columns: 1fr; } }

/* ── 랜딩 섹션 리파인 v2 ─────────────────────────────── */
/* 글로벌 모멘텀 */
.ld-globe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
            text-align: left; }
.ld-glb { background: var(--paper); border: 1px solid var(--line);
          border-radius: 20px; padding: 28px 26px; position: relative;
          overflow: hidden; box-shadow: 0 2px 12px rgba(25, 31, 40, .05);
          transition: transform .16s ease, box-shadow .16s ease; }
.ld-glb:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(25, 31, 40, .12); }
.ld-glb::after { content: ""; position: absolute; right: -30px; top: -30px;
                 width: 110px; height: 110px; border-radius: 50%;
                 background: radial-gradient(circle, rgba(49,130,246,.12), transparent 70%); }
.ld-glb-num { display: block; font-size: 38px; font-weight: 900;
              letter-spacing: -.03em; line-height: 1.1;
              background: linear-gradient(120deg, #1d4ed8, #3b82f6 60%, #60a5fa);
              -webkit-background-clip: text; background-clip: text; color: transparent;
              margin-bottom: 6px; }
.ld-glb > b { display: block; font-size: 15.5px; margin-bottom: 8px; }
.ld-glb p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--ink-soft); }
.ld-globe-note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.ld-globe-note b { color: var(--blue-dark); }

/* 강점 4 — 아이콘 카드로 리파인 (인라인 b 블록화 버그 수정 포함) */
.ld-why { background: var(--paper); border: 1px solid var(--line);
          border-radius: 20px; padding: 26px 24px;
          box-shadow: 0 2px 12px rgba(25, 31, 40, .05);
          transition: transform .16s ease, box-shadow .16s ease; }
.ld-why:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(25, 31, 40, .12); }
.ld-why > b { display: block; font-size: 17px; line-height: 1.4;
              letter-spacing: -.02em; margin-bottom: 8px; }
.ld-why p b, .ld-why p em { display: inline; font-style: normal;
                            color: var(--blue-dark); font-weight: 700; }
.ld-why-ico { display: inline-flex; align-items: center; justify-content: center;
              width: 48px; height: 48px; border-radius: 15px; font-size: 23px;
              margin-bottom: 12px;
              background: linear-gradient(135deg, #e8f3ff, #dbeafe); }
.ld-why.w2 .ld-why-ico { background: linear-gradient(135deg, #e3f7f2, #d9f2e2); }
.ld-why.w3 .ld-why-ico { background: linear-gradient(135deg, #fff4e5, #ffe9d1); }
.ld-why.w4 .ld-why-ico { background: linear-gradient(135deg, #f1ebff, #ede9fe); }

/* 플랫폼 — 로고 타일 + 체크리스트 */
.ld-plat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ld-plat-head > div > b { display: block; font-size: 16.5px; margin: 0 0 3px; }
.ld-plat-logo { flex: none; display: inline-flex; align-items: center;
                justify-content: center; width: 48px; height: 48px;
                border-radius: 14px; font-weight: 900; font-size: 14px;
                letter-spacing: -.02em; color: #fff; }
.ld-plat-logo.c24 { background: linear-gradient(135deg, #ff8a3d, #f76707); }
.ld-plat-logo.wp { background: linear-gradient(135deg, #3b82f6, #1d4ed8); font-size: 20px; }
.ld-plat-logo.dev { background: linear-gradient(135deg, #334155, #0f172a); font-size: 13px; }
.ld-checks { list-style: none; margin: 0; padding: 0; }
.ld-checks li { position: relative; padding: 6px 0 6px 26px; font-size: 13.5px;
                line-height: 1.6; color: var(--ink-soft);
                border-top: 1px dashed var(--line); }
.ld-checks li:first-child { border-top: 0; }
.ld-checks li::before { content: "✓"; position: absolute; left: 4px; top: 6px;
                        font-weight: 900; color: #0a7a3d; }
.ld-checks li b { color: var(--ink); }

/* FOR WHOM — 고민 인용구 카드 */
.ld-who { background: var(--paper); border: 1px solid var(--line);
          border-radius: 20px; padding: 24px;
          box-shadow: 0 2px 12px rgba(25, 31, 40, .05);
          transition: transform .16s ease, box-shadow .16s ease; }
.ld-who:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(25, 31, 40, .12); }
.ld-who-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ld-who-head b { font-size: 16px; }
.ld-who-head .ld-who-ico { margin: 0; width: 42px; height: 42px;
                           background: var(--fill); }
.ld-who-quote { position: relative; background: var(--fill); border-radius: 14px;
                padding: 14px 16px 14px 34px; font-size: 14.5px; font-weight: 700;
                line-height: 1.55; color: var(--ink); margin-bottom: 12px; }
.ld-who-quote::before { content: "“"; position: absolute; left: 12px; top: 4px;
                        font-size: 30px; font-weight: 900; color: var(--blue);
                        font-family: Georgia, serif; }
.ld-who p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.ld-who-arrow { font-weight: 900; color: var(--blue); margin-right: 2px; }

/* 3스텝 — 그라디언트 링 넘버 + 디테일 칩 */
.ld-step { min-width: 250px; padding: 26px 28px; text-align: left;
           transition: transform .16s ease, box-shadow .16s ease; }
.ld-step:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(25, 31, 40, .12); }
.ld-step i { width: 40px; height: 40px; font-size: 17px;
             background: linear-gradient(135deg, #3b82f6, #1d4ed8);
             box-shadow: 0 6px 16px rgba(37, 99, 235, .35); }
.ld-step b { font-size: 17px; }
.ld-step p { font-size: 13px; line-height: 1.65; }
.ld-step-chips { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ld-step-chips span { font-size: 11.5px; font-weight: 800; color: var(--blue-dark);
                      background: var(--blue-soft); border-radius: 999px;
                      padding: 3px 10px; }
.ld-step-arrow { color: var(--blue); opacity: .5; }

/* FAQ — Q 뱃지 + 열림 상태 */
.ld-faq { transition: border-color .15s ease, box-shadow .15s ease; }
.ld-faq[open] { border-color: var(--blue); box-shadow: 0 8px 22px rgba(49, 130, 246, .10); }
.ld-faq summary { display: flex; align-items: center; gap: 10px; }
.ld-faq-q { flex: none; display: inline-flex; align-items: center; justify-content: center;
            width: 26px; height: 26px; border-radius: 9px; font-style: normal;
            font-size: 13px; font-weight: 900; color: #1d4ed8; background: #dbeafe; }
.ld-faq p { padding-left: 36px; }

@media (max-width: 1024px) { .ld-globe { grid-template-columns: 1fr; } }

/* 페르소나 프리셋 검색 — type=search라 전역 input 스타일 미적용 → 직접 지정 */
.pmg-preset-search {
  width: 100%; max-width: 460px; margin: 0 auto 14px; display: block;
  padding: 11px 16px 11px 40px; border-radius: 12px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95A1' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center no-repeat;
  border: 1.5px solid var(--line-strong); font-size: 14px; color: var(--ink);
  box-shadow: 0 2px 8px rgba(25, 31, 40, .05); }
.pmg-preset-search:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .15); }
.pmg-preset-search::placeholder { color: var(--muted); }

/* ---------------- 관리자 콘솔 (표·필터·예치금) ---------------- */
/* 표가 좁은 폭에서 세로로 깨지지 않도록 가로 스크롤 래퍼로 감싼다 */
.tbl-wrap { width: 100%; overflow-x: auto; border-radius: 14px;
            background: var(--paper); box-shadow: var(--shadow); }
.tbl-wrap > table { box-shadow: none; }
.adm-table { width: 100%; min-width: 900px; table-layout: auto; }
.adm-table th { white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.adm-dim { color: var(--muted); }
.adm-run { display: inline-block; font-size: 11px; font-weight: 700; color: var(--blue);
  background: var(--blue-soft); border-radius: 999px; padding: 1px 8px; margin-right: 4px; }
.adm-table td { vertical-align: middle; word-break: keep-all; }
.adm-table .nowrap { white-space: nowrap; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table .num.danger, .adm-table .danger { color: #c00000; font-weight: 700; }
.adm-table .num.warn, .adm-table .warn { color: #b54708; font-weight: 700; }
.adm-table .url-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis;
                       white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.adm-table .act-cell { white-space: nowrap; position: relative; }
.adm-table .act-cell .btn { margin-right: 4px; }
#userRows { min-width: 1040px; }

/* 행 관리 메뉴 (⋯) — 버튼 4개를 늘어놓으면 표가 넘친다 */
.rowmenu { display: inline-block; position: relative; }
.rowmenu > summary {
  list-style: none; cursor: pointer; width: 30px; height: 28px; line-height: 26px;
  text-align: center; border: 1.5px solid var(--line-strong); border-radius: 9px;
  font-size: 15px; font-weight: 800; color: var(--muted); background: var(--paper);
  user-select: none; transition: all .12s;
}
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu > summary:hover { border-color: var(--blue); color: var(--blue); }
.rowmenu[open] > summary { border-color: var(--blue); color: var(--blue); }
/* 패널은 fixed — .tbl-wrap의 overflow에 잘리지 않게 JS가 위치를 잡는다 */
.rowmenu-panel {
  position: fixed; z-index: 300;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,38,.18); padding: 6px; min-width: 178px;
  display: flex; flex-direction: column; gap: 2px;
}
.rowmenu-panel form { margin: 0; }
.rowmenu-panel .mi {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13px;
  padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.rowmenu-panel .mi:hover { background: var(--fill); }
.rowmenu-panel .mi.danger { color: #c00000; }
.rowmenu-panel .mi.danger:hover { background: #fdecec; }
/* 필터로 감춘 행 — hidden 속성이 table-row에 밀리지 않도록 방어 */
.adm-table tr[hidden] { display: none !important; }

/* 필터 바 */
.adm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
              margin-bottom: 14px; }
.adm-filter .f-q {
  flex: 1 1 240px; min-width: 200px; max-width: 340px; margin: 0;
  padding: 9px 14px; border-radius: 11px; border: 1.5px solid var(--line-strong);
  background: var(--paper); font-size: 13.5px; color: var(--ink); }
.adm-filter .f-q:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .15); }
.adm-filter .f-sel {
  margin: 0; padding: 9px 12px; border-radius: 11px; font-size: 13.5px;
  border: 1.5px solid var(--line-strong); background: var(--paper);
  color: var(--ink); max-width: 220px; }
.adm-filter .f-count { margin-left: auto; font-size: 12.5px; color: var(--muted);
                       font-weight: 700; white-space: nowrap; }

/* ---------------- 예치금 ---------------- */
.cr-dim { color: var(--muted); font-size: 12px; }
.cr-head { display: flex; align-items: flex-end; justify-content: space-between;
           gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cr-h2 { margin: 0; font-size: 17px; font-weight: 800; }

/* 잔액 색상 — 소진 수준을 숫자만 봐도 알 수 있게 */
.cr-bal { font-variant-numeric: tabular-nums; font-weight: 700; }
.cr-bal.ok { color: #0a7a3d; }
.cr-bal.warn { color: #b26a00; }
.cr-bal.low { color: #b26a00; }
.cr-bal.out { color: #c00000; }

.cr-bar { height: 6px; border-radius: 99px; background: var(--fill-deep);
          overflow: hidden; min-width: 110px; }
.cr-bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.cr-bar.warn i, .cr-bar.low i { background: #e79a1f; }
.cr-bar.out i { background: #d64545; }

.cr-form { margin: 0; }
.cr-input, .cr-lab input { margin: 0 !important; padding: 9px 11px !important;
            border-radius: 9px; border: 1.5px solid var(--line-strong);
            font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cr-input { width: 110px; text-align: right; }
.cr-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.cr-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           font-size: 13.5px; }
.cr-lab { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted);
          margin-top: 12px; }
.cr-lab input { display: block; width: 100%; max-width: 280px; margin-top: 5px !important; }
.cr-panel { max-width: 460px; }
.cr-sheet-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
           gap: 0 16px; }

/* 금액 칩 */
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 9px;
        border: 1.5px solid var(--line-strong); background: var(--paper);
        color: var(--ink); cursor: pointer; white-space: nowrap;
        font-variant-numeric: tabular-nums; transition: all .12s; }
.chip:hover { border-color: var(--blue); color: var(--blue); }

/* 충전 시트 */
.cr-sheet-bg { position: fixed; inset: 0; background: rgba(15, 23, 38, .45);
               display: flex; align-items: center; justify-content: center;
               z-index: 200; padding: 20px; }
.cr-sheet-bg[hidden] { display: none !important; }
.cr-sheet { background: var(--paper); border-radius: 16px; padding: 24px 26px;
            width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(15,23,38,.28); }
.cr-sheet h3 { margin: 0 0 4px; font-size: 17px; }

/* 원장 구분 태그 */
.etag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px;
        border-radius: 99px; white-space: nowrap; background: var(--fill-deep); color: var(--muted); }
.etag.topup, .etag.grant, .etag.refund { background: #e6f6ec; color: #0a7a3d; }
.etag.usage { background: #fdecec; color: #b03a2e; }
/* 원장 차감 행 — 엔진·모델별 비용 구성 */
.lmix { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.lmix-i { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-soft); background: var(--fill); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.lmix-i i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.lmix-i b { font-weight: 800; color: var(--ink); }
.lmix-i em { font-style: normal; color: var(--muted); font-weight: 500; }
.lmix-i.eng-chatgpt i { background: #10a37f; }
.lmix-i.eng-gemini i { background: #4285f4; }
.lmix-i.eng-perplexity i { background: #20808d; }
.lmix-i.eng-claude i { background: #d97757; }
.etag.adjust { background: #eef2ff; color: #3f51b5; }
.etag.done { background: #e6f6ec; color: #0a7a3d; }
.etag.wait { background: #fff4e5; color: #b54708; }
.etag.fail { background: #fdecec; color: #c00000; }

/* 잔액 경고 배너 */
.cr-alert { border-radius: 12px; padding: 13px 18px; margin-bottom: 16px;
            font-size: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cr-alert.low { background: #fff4e5; color: #8a4b00; border: 1px solid #f3d3a0; }
.cr-alert.out { background: #fdecec; color: #a52218; border: 1px solid #f2c2bd; }
.cr-alert a { margin-left: auto; font-weight: 700; color: inherit; white-space: nowrap; }

/* 가로 막대 (엔진별·기능별 사용) */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 108px 1fr 84px 52px;
           align-items: center; gap: 10px; font-size: 13px; }
.bar-lab { font-weight: 600; color: var(--ink); white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 9px; border-radius: 99px; background: var(--fill-deep); overflow: hidden; }
.bar-track i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.bar-sub { text-align: right; color: var(--muted); font-size: 12px; }
@media (max-width: 620px) { .bar-row { grid-template-columns: 86px 1fr 72px; }
                            .bar-sub { display: none; } }

/* 사용 추이 스파크 막대 */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 130px;
         overflow-x: auto; padding-bottom: 4px; }
.spark-col { flex: 1 0 22px; display: flex; flex-direction: column;
             align-items: center; justify-content: flex-end; height: 100%; }
.spark-col i { display: block; width: 100%; max-width: 26px; background: var(--blue);
               border-radius: 4px 4px 0 0; transition: background .12s; }
.spark-col:hover i { background: #1b5fd0; }
.spark-col span { font-size: 10px; color: var(--muted); margin-top: 5px;
                  white-space: nowrap; }

/* 단가 관리 폼 */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: 0 16px; }
.pr-grid .cr-lab input { max-width: 100%; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }

/* 관리 도구 접기 */
.adm-tools { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px;
             background: var(--paper); }
.adm-tools > summary { cursor: pointer; padding: 12px 18px; font-size: 13.5px;
                       font-weight: 700; color: var(--muted); }
.adm-tools .tools-body { padding: 4px 18px 18px; }
.crumb { margin: 0 0 10px; font-size: 13px; }

/* ---------------- 단가 관리 (원화 환산 표시) ---------------- */
.pr-read { background: var(--fill); border-radius: 12px; padding: 14px 18px;
           margin-bottom: 18px; font-size: 13.5px; max-width: 76ch; }
.pr-read b { color: var(--ink); }
.pr-read p { margin: 6px 0 0; color: var(--muted); line-height: 1.7; }
.pr-sum td { background: var(--fill); border-top: 2px solid var(--line-strong);
             font-weight: 600; }
.pr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px; }
.pr-card { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px;
           padding: 16px 18px; }
.pr-card h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
.pr-big { margin: 0; font-size: 26px; font-weight: 800; color: var(--ink);
          font-variant-numeric: tabular-nums; }
.pr-card .cr-dim { display: block; margin-top: 2px; }
.pr-alt { margin: 10px 0 0; font-size: 12.5px; color: var(--muted);
          padding-top: 9px; border-top: 1px solid var(--line); }
.pr-card.pick { border-color: var(--blue); box-shadow: 0 6px 18px rgba(49,130,246,.12); }
.pr-per { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }

/* ---------------- 자동 측정 설정 (프롬프트 탭) ---------------- */
.sched-card { border: 1.5px solid var(--line); border-radius: 14px;
              background: var(--paper); margin: 0 0 16px; }
.sched-card[open] { border-color: var(--line-strong); }
.sched-card > summary { list-style: none; cursor: pointer; padding: 13px 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.sched-card > summary::-webkit-details-marker { display: none; }
.sched-badge { font-size: 11.5px; font-weight: 800; padding: 2px 10px;
  border-radius: 99px; background: var(--fill-deep); color: var(--muted); }
.sched-badge.on { background: #e6f6ec; color: #0a7a3d; }
.sched-sum { color: var(--muted); }
.sched-next { font-size: 12.5px; color: var(--blue); font-weight: 700; }
.sched-cost { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.sched-form { padding: 4px 18px 16px; border-top: 1px solid var(--line); }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 16px; margin-top: 12px; }
.sched-grid label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sched-grid select { display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  border-radius: 9px; border: 1.5px solid var(--line-strong); font-size: 13.5px;
  background: var(--paper); color: var(--ink); }
/* 커스텀 드롭다운(fsel)으로 감싸진 원본 select는 숨김 — 위 규칙이 전역
   .fsel select{display:none}을 덮어써 이중 표시되던 버그 방지 */
.sched-grid .fsel select { display: none; }
.sched-grid .fsel { margin-top: 5px; }
/* 호출 모델 설정 */
.sched-models { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.sched-models summary { cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px; }
.sched-models summary::-webkit-details-marker { display: none; }
.sched-model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 10px; }
.sched-model-grid label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sched-model-grid .fsel { margin-top: 5px; }
.sched-model-grid > label > select { display: block; width: 100%; margin-top: 5px; }
/* 측정 등급 카드 */
.sched-tiers { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.tier-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-top: 8px; }
.tier-card { display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; transition: border-color .12s; }
.tier-card { position: relative; }
/* ⚠️ 전역 input width:100% 때문에 숨긴 라디오가 화면 폭만큼 커져 페이지가 가로로 밀렸다(09-15) — 크기 0으로 고정 */
.tier-card input { position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0; opacity: 0; pointer-events: none; }
.tier-card b { font-size: 14px; color: var(--ink); }
.tier-card:hover { border-color: #b9cdf3; }
.tier-card.on { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,130,246,.12); }
.tier-card.on b { color: var(--blue); }
.tier-desc { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
/* 등급별 예상 비용 — 지금 프롬프트·주기 기준으로 등급을 바로 비교 */
.tier-cost { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; padding: 5px 8px; border-radius: 6px;
  background: #f4f7fb; font-size: 12px; color: var(--ink-soft); }
.tier-cost b { font-size: 14px; font-weight: 800; color: var(--ink); }
.tier-cost i { font-style: normal; font-size: 11px; color: var(--muted); }
.tier-card.on .tier-cost { background: rgba(49,130,246,.10); }
.tier-card.on .tier-cost b { color: var(--blue); }
.tier-cost.approx b::after { content: '~'; font-size: 11px; color: var(--muted); }

.tier-models { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px;
  margin-top: 4px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.tier-models em { font-style: normal; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tier-models em b { font-weight: 700; color: var(--ink-soft); }
.tier-models i { font-style: normal; color: var(--red); }
/* 예치금 섹션 */
.set-box { margin-top: 14px; }
.set-bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; }
.set-bi { background: var(--fill); border-radius: 12px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 3px; }
.set-bi span { font-size: 12px; font-weight: 600; color: var(--muted); }
.set-bi b { font-size: 22px; color: var(--ink); }
.set-bi b i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.set-bi em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.set-bi.danger b { color: var(--red); }
.set-charge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.set-charge input[type="text"] { width: 140px; padding: 8px 12px; }
.set-usage { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.set-usage-tbl { width: 100%; max-width: 760px; border-collapse: separate;
  border-spacing: 0; margin-top: 10px; font-size: 12.5px;
  background: var(--fill); border-radius: 12px; overflow: hidden; }
.set-usage-tbl th { text-align: left; font-size: 11px; color: var(--muted);
  font-weight: 800; letter-spacing: .03em; padding: 9px 14px;
  border-bottom: 1px solid var(--line); background: var(--fill); }
.set-usage-tbl td { padding: 9px 14px; color: var(--ink-soft); background: #fff;
  border-bottom: 1px solid var(--fill-deep); }
.set-usage-tbl tr:last-child td { border-bottom: 0; }
.set-usage-tbl tr:hover td { background: #f7faff; }
.set-usage-tbl .c-dt { width: 130px; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--muted); }
.set-usage-tbl .c-eng { width: 130px; white-space: nowrap; font-weight: 700; color: var(--ink); }
.set-usage-tbl .c-eng .eng-dot { display: inline-block; vertical-align: middle; margin-right: 7px; margin-top: -2px; }
.set-usage-tbl .c-amt { width: 90px; }
.set-usage-tbl .r { text-align: right; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.set-usage-tbl .r i { font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--muted); margin-left: 1px; }
.use-tag { font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--fill); border-radius: 99px; padding: 2px 10px; }

/* 회차별 비용 — 호출 1건씩이 아니라 회차 단위로 묶어 본다 */
.runs-tbl .c-run { width: 150px; white-space: nowrap; color: var(--ink); }
.runs-tbl .c-run b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* run_id 병기 — 담당자와 대조할 때 필요하지만 눈에 띌 필요는 없다 */
.runs-tbl .c-run i { font-style: normal; font-size: 11px; font-weight: 600;
  color: var(--muted); margin-left: 5px; font-variant-numeric: tabular-nums; }
.runs-tbl .c-dt { width: 120px; }
.runs-tbl .c-calls { width: 110px; white-space: nowrap; font-weight: 700; color: var(--ink); }
.runs-tbl .c-calls i { font-style: normal; font-weight: 600; font-size: 11px;
  color: var(--muted); margin-left: 6px; }
.runs-tbl .c-amt { width: 130px; }
.runs-tbl .etc-row td { color: var(--muted); background: #fcfcfd; }
.run-st { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.run-st.on   { background: rgba(49,130,246,.12); color: var(--blue); }
.run-st.bad  { background: rgba(214,60,60,.10); color: var(--red); }
.run-st.wait { background: var(--fill); color: var(--muted); }
.sched-engines { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; }
.sched-lab { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sched-eng { font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; }
.sched-est { margin: 12px 0 0; font-size: 13px; color: var(--muted);
  background: var(--fill); border-radius: 10px; padding: 10px 14px; }
.sched-est b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sched-act { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
/* 즉시 1회 측정 — 스케줄 폼과 분리된 별도 폼(formaction 함정 회피) */
.runnow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 14px 0 0; padding: 13px 16px;
  border: 1px solid #c7ddff; border-radius: 10px; background: #f5f9ff;
}
.runnow.busy { border-color: var(--line); background: #f7f8f9; }
.runnow .inline-form { margin: 0; }
.runnow-txt { display: flex; flex-direction: column; gap: 3px; min-width: 240px; }
.runnow-txt > b { font-size: 13.5px; color: var(--ink); }
.runnow-txt > span { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.runnow-txt > span b { font-weight: 700; color: var(--ink); }
.runnow-off { margin: 14px 0 0; padding: 11px 14px; border-radius: 8px;
  background: #fbfbfc; border: 1px dashed var(--line);
  font-size: 12px; color: var(--muted); line-height: 1.6; }
.runnow-off code { background: #eef1f4; border-radius: 4px; padding: 1px 5px;
  font-size: 11.5px; color: var(--ink-soft); }

/* ---------------- 페르소나 직접 추가 ---------------- */
/* 프리셋 그리드 맨 앞 고정 버튼 — 템플릿 칩과 구분되게 파란 강조 */
.pmg-preset.pmg-direct {
  border: 1.5px solid var(--blue); background: rgba(49, 130, 246, .06);
}
.pmg-preset.pmg-direct b { color: var(--blue); }
.pmg-preset.pmg-direct span { color: var(--blue); opacity: .75; }
.pmg-preset.pmg-direct:hover { background: rgba(49, 130, 246, .12);
  box-shadow: 0 4px 12px rgba(49, 130, 246, .18); }

/* 직접 추가 입력란 — 템플릿과 목록 사이에 나타나는 카드 */
.pmg-newform { border: 1.5px solid var(--blue); border-radius: 14px;
  background: var(--paper); padding: 16px 18px; margin: 14px 0 18px;
  box-shadow: 0 8px 24px rgba(49, 130, 246, .10); }
.pmg-newform[hidden] { display: none; }
.pmg-newform-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; }
.pmg-newform-head b { font-size: 14.5px; color: var(--ink); }
.c24auto-score { font-size: 12.5px; white-space: nowrap; color: var(--muted); }
.c24auto-score b { font-size: 14px; color: var(--blue); font-variant-numeric: tabular-nums; }
.c24auto-score i { font-style: normal; font-size: 11.5px; }
.c24auto-row .inline-form { white-space: nowrap; }
.pgs-mix { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.55;
           border-top: 1px dashed var(--line); padding-top: 8px; }
.pgs-mix b { color: var(--ink); }

/* 카페24 그룹 카드 (상품·카테고리·게시판 묶음)
   ⚠️ 클래스명 'gcard'는 가이드 카드가 선점 — 반드시 pgroup 사용 (충돌 사고 2026-08-31) */
.page-card.pgroup {
  background: linear-gradient(90deg, rgba(49, 130, 246, .045), var(--paper) 240px);
  border: 1.5px solid var(--line);
}
.page-card.pgroup:hover { border-color: var(--blue); }
.page-card.pgroup .pc-score { width: 74px; }
.pgroup-chip { background: #eef4ff; color: #1d4ed8; border-color: transparent; }
.pgroup-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; }

/* SOV 프롬프트 인라인 수정 (✎) */
.pm-edit { flex: none; background: transparent; border: 0; cursor: pointer;
  font-size: 14px; color: var(--muted); padding: 4px 6px; border-radius: 7px;
  line-height: 1; transition: all .12s; }
.pm-edit:hover { color: var(--blue); background: var(--blue-soft); }
.pm-editbox { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.pm-editinput { flex: 1; min-width: 120px; margin: 0 !important;
  padding: 7px 11px !important; border-radius: 9px;
  border: 1.5px solid var(--blue); font-size: 13.5px; background: var(--paper);
  color: var(--ink); }
.pm-editinput:focus { outline: none; box-shadow: 0 0 0 3px rgba(49,130,246,.15); }
.pm-editbox .btn { white-space: nowrap; }

/* ---------------- AI 답변 순위표 렌더링 (JSON 답변 → 카드) ---------------- */
/* 기본은 한 줄 칩 요약, 클릭 시 상세 펼침(펼치면 요약 칩은 접어 중복 제거) */
.pmd-chips { display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  width: 100%; border: 0; background: transparent; padding: 6px 0 2px;
  cursor: pointer; text-align: left; }
.pmd-chips .sx-rank { margin: 0; }
.pmd-chips:hover .sx-rank li { background: #f4f8ff; }
.pmd-chips:hover .sx-rank li.ours { background: #e6f6ec; }
/* 답변 상세 모달 */
.pmd-modal { max-width: 700px; width: calc(100% - 48px); text-align: left;
  align-items: stretch; gap: 10px; max-height: 82vh; overflow: auto;
  padding: 20px 26px 22px; }
.pmd-modal-head { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.pmd-modal-t { font-size: 15px; color: var(--ink); }
.pmd-modal-x { border: 0; background: transparent; font-size: 15px;
  color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.pmd-modal-x:hover { color: var(--ink); background: var(--fill); }
.pmd-chip { display: inline-flex; align-items: center; gap: 6px; font-style: normal;
  background: #fff; border: 1px solid var(--line); border-radius: 99px;
  padding: 3px 11px 3px 4px; font-size: 12px; font-weight: 600;
  color: var(--ink); white-space: nowrap; transition: border-color .12s; }
.pmd-chips:hover .pmd-chip { border-color: #b9cdf3; }
.pmd-chip s { text-decoration: none; width: 18px; height: 18px; border-radius: 99px;
  background: var(--fill); color: var(--muted); font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.pmd-chip.top { border-color: #d9def0; }
.pmd-chip.top s { background: #3c4a6b; color: #fff; }
.pmd-chip.ours { background: #e6f6ec; border-color: #0bb25f88; color: #0a7a3d; font-weight: 800; }
.pmd-chip.ours s { background: #0bb25f; color: #fff; }
.pmd-chip-gap { font-style: normal; color: var(--muted); font-size: 12px;
  padding: 0 1px; }
.pmd-chip-rest { font-style: normal; font-size: 11.5px; color: var(--muted);
  background: var(--fill); border-radius: 99px; padding: 3px 11px; }
.pmd-miss { font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--fill); border-radius: 99px; padding: 2px 9px; }
.pmd-chip-more { font-size: 11.5px; font-weight: 600; color: var(--muted);
  align-self: flex-end; white-space: nowrap; padding: 3px 2px; }
.pmd-chips:hover .pmd-chip-more, .pmd-chips.open .pmd-chip-more { color: var(--blue); }
.pmd-chips.open .pmd-chip { display: none; }   /* 펼친 동안 요약 칩 숨김 */
.pmd-chips.open { padding-bottom: 0; }
.pmd-rankwrap { margin-top: 2px; }
/* 회차별 언급 타임라인 (프롬프트 상세 사이드) */
.pmd-tl { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 2px 0 0; }
.pmd-dot { width: 13px; height: 13px; border-radius: 99px;
  background: #fff; box-shadow: inset 0 0 0 2px var(--line-hover);
  cursor: default; }
.pmd-dot.hit { background: #0bb25f; box-shadow: none; }
.pmd-tl-cap { font-size: 10.5px; color: var(--muted); margin-top: 5px; }

/* 회차 섹션 박스 — 회차 1개 = 박스 1개 */
.pmd-runsec { border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px 14px 14px; margin: 0 0 14px; background: #fff; }
.pmd-runsec.latest { border-color: #9dbdf5; box-shadow: 0 2px 10px rgba(49,130,246,.07); }
.pmd-runhead { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.pmd-runhead b { font-size: 12.5px; color: var(--ink); }
.pmd-runhead span { font-size: 11.5px; color: var(--muted); }
.pmd-runhead em { font-style: normal; font-size: 10.5px; font-weight: 800;
  color: var(--blue); background: #eaf1fe; border-radius: 99px; padding: 1px 8px; }
.pmd-rank { list-style: none; margin: 8px 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.pmd-rank li { display: flex; gap: 10px; align-items: flex-start;
  background: var(--fill); border-radius: 10px; padding: 8px 12px; }
.pmd-rank li.ours { background: #e6f6ec; box-shadow: inset 0 0 0 1.5px #0bb25f55; }
.pmd-rk { flex: none; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  background: var(--paper); color: var(--muted); font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.pmd-rank li.ours .pmd-rk { background: #0bb25f; color: #fff; }
.pmd-rk-body { flex: 1; min-width: 0; }
.pmd-rk-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pmd-rk-top b { font-size: 13.5px; color: var(--ink); }
.pmd-ours { font-size: 10.5px; font-weight: 800; color: #0a7a3d;
  background: #fff; border-radius: 99px; padding: 1px 8px; }
.pmd-rk-title { font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.pmd-rk-reason { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.55; }
.pmd-src { font-size: 11px; color: var(--blue); text-decoration: none; white-space: nowrap; }
.pmd-src:hover { text-decoration: underline; }
.pmd-rawbtn { border: 0; background: transparent; color: var(--muted); font-size: 11px;
  cursor: pointer; padding: 4px 2px; font-family: ui-monospace, monospace; }
.pmd-rawbtn:hover { color: var(--blue); }
.pmd-rawpre { font-size: 11px; background: var(--fill); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; max-height: 260px; margin: 2px 0 0; }

/* ---------------- 측정 전 안내 (SOV 대시보드 빈 상태) ---------------- */
.wait-box { background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 30px 24px; margin-bottom: 14px; }
.wait-head { display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.wait-ico { flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; }
.wait-head.on .wait-ico { background: #e6f6ec; color: #0a7a3d; }
.wait-head.running .wait-ico { background: #eaf1fe; color: var(--blue); }
.wait-head.off .wait-ico { background: var(--fill); color: var(--muted); }
.wait-head b { display: block; font-size: 17px; color: var(--ink); }
.wait-head span:last-child { display: block; margin-top: 3px; font-size: 13px;
  color: var(--ink-soft); word-break: keep-all; }
.wait-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-top: 18px; }
.wait-when > div { background: var(--fill); border-radius: 12px; padding: 14px 18px; }
.wait-when .lab { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.wait-when b { display: block; margin: 4px 0 2px; font-size: 20px; color: var(--ink); }
.wait-when .sub { display: block; font-size: 12px; color: var(--ink-soft); }
.wait-how { margin-top: 20px; }
.wait-how-t { display: block; font-size: 13px; font-weight: 800; color: var(--ink);
  margin-bottom: 8px; }
.wait-how ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.wait-how li { font-size: 13px; line-height: 1.7; color: var(--ink-soft); word-break: keep-all; }
.wait-how li b { color: var(--ink); }
.wait-how li em { font-style: normal; font-weight: 800; color: var(--blue); }
.wait-ready { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.wait-ready .lab { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.wait-ready .chip { font-size: 12px; font-weight: 700; border-radius: 99px;
  padding: 4px 12px; }
.wait-ready .chip.ok { background: #e6f6ec; color: #0a7a3d; }
.wait-ready .chip.no { background: var(--fill); color: var(--muted); }
.wait-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.wait-act .inline-form { margin: 0; }


/* 자사몰 연결 — 연동 원칙 박스 */
.cn-rules { background: var(--blue-soft); border-radius: 12px; padding: 12px 16px; margin: 14px 0 6px;
  font-size: 13px; color: var(--ink); }
.cn-rules > b { display: block; margin-bottom: 6px; font-size: 13.5px; }
.cn-rules ol { margin: 0; padding-left: 18px; }
.cn-rules li { margin: 3px 0; color: var(--ink-soft); line-height: 1.6; }
.cn-rules code { font-size: 12px; background: rgba(255,255,255,.7); border-radius: 4px; padding: 1px 5px; }
.cn-sub { font-size: 12px; font-weight: 500; color: var(--muted); }

/* 자사몰 연결 — 백엔드/프론트엔드 예시 전환 */
.cnx { margin: 16px 0 6px; }
.cnx-tabs { display: flex; gap: 6px; background: var(--fill); border-radius: 12px; padding: 4px; }
.cnx-tab { flex: 1; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 700; color: var(--muted); border-radius: 9px; padding: 9px 12px; }
.cnx-tab:hover { color: var(--ink); }
.cnx-tab.on { background: var(--paper); color: var(--blue); box-shadow: 0 1px 3px rgba(15,23,38,.08); }
.cnx-desc { font-size: 12.5px; color: var(--muted); margin: 10px 2px 4px; }
.cnx-view { padding-top: 2px; }


/* ================================================== AI 도우미(챗봇) — templates/_assistant.html */
.asst-launch {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s;
}
.asst-launch:hover { transform: translateY(-1px); border-color: var(--line-hover);
                     box-shadow: 0 6px 18px rgba(0, 27, 55, .08); }
.sidebar .asst-launch { position: fixed; left: 16px; bottom: 16px; width: 208px; margin: 0; z-index: 45; }  /* 사이드바 스크롤과 무관하게 항상 좌하단 */
.sidebar { padding-bottom: 96px; }                     /* 마지막 메뉴가 런처에 가리지 않게 */
@media (max-width: 800px) { .sidebar .asst-launch { position: static; width: 100%; } .sidebar { padding-bottom: 16px; } }
.asst-launch.floating { position: fixed; left: 20px; bottom: 20px; width: auto; z-index: 60;
                        padding: 10px 16px 10px 12px; border-radius: 999px; }
.asst-launch-ico {
  width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #3182F6, #6B4EFF); color: #fff; font-size: 16px; font-weight: 800;
}
.asst-launch-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.asst-launch-text b { font-size: 13.5px; font-weight: 800; }
.asst-launch-text small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.asst-open .asst-launch { border-color: var(--blue); background: var(--blue-soft); }

.asst-panel {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  width: 400px; max-width: calc(100vw - 32px); height: min(640px, calc(100vh - 100px));
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 20px;
  box-shadow: 0 18px 48px rgba(0, 27, 55, .18); overflow: hidden;
  animation: asst-in .18s ease-out;
}
.asst-panel[hidden] { display: none; }
.layout:has(> .sidebar) ~ .asst-panel { left: 256px; }   /* 사이드바 옆에 뜬다 */
@keyframes asst-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.asst-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px;
             border-bottom: 1px solid var(--line); background: var(--paper); }
.asst-avatar { width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center;
               background: linear-gradient(135deg, #3182F6, #6B4EFF); color: #fff; font-weight: 800; }
.asst-head-text { flex: 1; min-width: 0; }
.asst-title { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.asst-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-icon { width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent;
             color: var(--muted); cursor: pointer; font-size: 15px; }
.asst-icon:hover { background: var(--fill); color: var(--ink); }

.asst-body { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px;
             background: var(--bg); }
.asst-msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.55;
            word-break: keep-all; overflow-wrap: anywhere; }
.asst-msg p { margin: 0; }
.asst-msg p + p, .asst-msg p + .asst-ul, .asst-msg .asst-ul + p { margin-top: 6px; }
.asst-msg.user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.asst-msg.bot { align-self: flex-start; background: var(--paper); color: var(--ink);
                border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.asst-msg.bot a { color: var(--blue); font-weight: 700; text-decoration: none; }
.asst-msg.bot a:hover { text-decoration: underline; }
.asst-msg.bot code { font-size: 12px; background: var(--fill); padding: 1px 5px; border-radius: 5px; }
.asst-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.asst-ul li { padding-left: 18px; position: relative; }
.asst-ul li::before { content: "•"; position: absolute; left: 5px; color: var(--muted); }
.asst-ul li .asst-n { position: absolute; left: 0; width: 16px; color: var(--blue); font-weight: 800; font-size: 12px; }
.asst-ul li .asst-n ~ * { }
.asst-ul li:has(.asst-n)::before { content: ""; }
.asst-msg.typing { display: flex; gap: 4px; padding: 12px 14px; }
.asst-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
                        animation: asst-dot 1s infinite ease-in-out; }
.asst-msg.typing span:nth-child(2) { animation-delay: .15s; }
.asst-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes asst-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.asst-action { align-self: stretch; margin: 2px 0 4px 0; padding: 12px 14px; border-radius: 14px;
               background: var(--paper); border: 1px solid var(--blue); box-shadow: var(--shadow); }
.asst-action-sum { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.asst-action-sum::before { content: "실행할 작업"; display: block; font-size: 11px; color: var(--blue);
                           font-weight: 800; margin-bottom: 3px; letter-spacing: .02em; }
.asst-action-btns { display: flex; gap: 6px; }
.asst-action-btns button { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; border: 0; }
.asst-run { background: var(--blue); color: #fff; }
.asst-run:hover { background: var(--blue-dark); }
.asst-cancel { background: var(--fill); color: var(--ink-soft); }
.asst-action.done { border-color: var(--line); opacity: .8; }
.asst-done { font-size: 12.5px; font-weight: 700; color: var(--muted); }

.asst-chips { display: flex; gap: 6px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; background: var(--paper);
              border-top: 1px solid var(--line); }
.asst-chips::-webkit-scrollbar { display: none; }
.asst-chip { flex: none; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer;
             border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); }
.asst-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

.asst-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; background: var(--paper); }
.asst-form textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 10px 12px;
                      border: 1px solid var(--line-strong); border-radius: 12px; font: inherit; font-size: 13.5px;
                      line-height: 1.4; background: var(--fill); color: var(--ink); outline: none; }
.asst-form textarea:focus { border-color: var(--blue); background: var(--paper); box-shadow: 0 0 0 3px var(--blue-soft); }
.asst-send { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 0; cursor: pointer;
             background: var(--blue); color: #fff; display: grid; place-items: center; }
.asst-send:hover { background: var(--blue-dark); }
.asst-send:disabled { opacity: .5; cursor: default; }
.asst-foot { font-size: 11px; color: var(--muted); text-align: center; padding: 0 12px 10px; background: var(--paper); }

@media (max-width: 720px) {
  .asst-panel, .layout:has(> .sidebar) ~ .asst-panel { left: 8px; right: 8px; width: auto; bottom: 8px; height: calc(100vh - 80px); }
}

/* 도우미 창 이동(드래그) · 스크린샷 첨부 */
.asst-head { cursor: move; user-select: none; }
.asst-head .asst-icon { cursor: pointer; }
.asst-panel.dragging { transition: none; box-shadow: 0 24px 60px rgba(0, 27, 55, .26); }
.asst-attach { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--line-strong);
               background: var(--paper); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.asst-attach:hover { color: var(--blue); border-color: var(--blue); }
.asst-attach.has { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.asst-preview { display: none; align-items: center; gap: 8px; padding: 6px 12px 0; background: var(--paper); font-size: 12px; color: var(--muted); }
.asst-preview.on { display: flex; }
.asst-preview img { height: 44px; border-radius: 8px; border: 1px solid var(--line-strong); }
.asst-preview button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.asst-msg.user img.asst-shot { display: block; max-width: 100%; border-radius: 10px; margin-top: 6px; border: 1px solid rgba(255,255,255,.35); }

/* ================================================== 공개 개발 가이드 (/guide) — API 문서 레이아웃 */
.docs { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.docs-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.docs-nav-title { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.docs-nav a { color: var(--ink-soft); text-decoration: none; padding: 5px 8px; border-radius: 8px; }
.docs-nav a.sub { padding-left: 20px; font-size: 13px; color: var(--muted); }
.docs-nav a:hover { background: var(--fill); color: var(--ink); }
.docs-nav a.on { color: var(--blue); font-weight: 700; background: var(--blue-soft); }
.docs-nav-meta { margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.6; padding: 0 8px; }
.docs-body { max-width: 900px; min-width: 0; }
.docs-crumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.docs-body h1 { font-size: 30px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.docs-body h2 { font-size: 22px; margin: 44px 0 12px; scroll-margin-top: 90px; }
.docs-body h3 { font-size: 17px; margin: 28px 0 10px; scroll-margin-top: 90px; }
.docs-body h1, .docs-body h2, .docs-body h3 { scroll-margin-top: 90px; }
.docs-body p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.docs-body .anchor { font-size: 13px; text-decoration: none; opacity: 0; margin-left: 6px; }
.docs-body h1:hover .anchor, .docs-body h2:hover .anchor, .docs-body h3:hover .anchor { opacity: .6; }
.docs-callout { background: var(--blue-soft); border-radius: 14px; padding: 16px 20px; margin: 16px 0; font-size: 14.5px; line-height: 1.7; }
.docs-callout ol { margin: 8px 0 0 18px; padding: 0; }
.docs-callout li { margin: 3px 0; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0 6px; }
.docs-table th { text-align: left; background: var(--fill); padding: 9px 12px; border-bottom: 1px solid var(--line-strong); font-weight: 700; }
.docs-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
.docs-table code, .docs-body p code, .docs-callout code, .docs-faq code { background: var(--fill); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.apikey-inline { font-family: ui-monospace, monospace; font-size: 13px !important; background: var(--fill); padding: 3px 8px !important; border-radius: 6px; }
.lang-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.lang-tabs button { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); border-radius: 999px;
                    padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.lang-tabs button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.lang-view[hidden] { display: none; }
.lang-order { background: var(--fill); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--ink-soft); }
.lang-view ol { font-size: 14px; line-height: 1.8; }
.docs-faq dt { font-weight: 700; font-size: 14.5px; margin-top: 14px; }
.docs-faq dd { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; } .docs-nav { position: static; flex-direction: row; flex-wrap: wrap; } .docs-nav-meta, .docs-nav-title { display: none; } }
.docs-diagram { margin: 10px 0 6px; padding: 8px 4px; }
.docs-diagram svg { display: block; max-width: 900px; }
.chk-box { background: var(--fill); border-radius: 14px; padding: 16px 18px; margin: 12px 0; }
.chk-row { display: flex; gap: 10px; }
.chk-row input { flex: 1; min-width: 0; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); color: var(--ink); }
.chk-row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.chk-result { margin-top: 12px; font-size: 13.5px; }
.chk-result.loading { color: var(--muted); }
.chk-table { background: var(--paper); border-radius: 10px; overflow: hidden; }
.chk-table td:first-child { width: 110px; color: var(--muted); font-weight: 700; }
.docs-notice { background: var(--orange-soft); border: 1px solid #F3D9B1; border-radius: 14px; padding: 16px 20px; margin: 14px 0 6px; font-size: 14.5px; line-height: 1.7; }
.docs-notice-title { font-weight: 800; color: var(--orange); margin-bottom: 8px; font-size: 15px; }
.docs-notice ul { margin: 0 0 10px 18px; padding: 0; }
.docs-notice li { margin: 6px 0; }
.docs-notice-rule { border-top: 1px solid #F3D9B1; padding-top: 10px; }
[data-theme="dark"] .docs-notice { background: #33270F; border-color: #5A4420; }
[data-theme="dark"] .docs-notice-rule { border-color: #5A4420; }

/* 인젝션 프로세스 (HTML 플로우, SVG 대체) */
.flow { margin: 12px 0 8px; }
.flow-lane { display: flex; align-items: stretch; gap: 10px; max-width: 900px; }
.flow-node { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; text-align: center; background: #fff; }
.flow-node b { display: block; font-size: 14px; }
.flow-node span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.flow-hot { border-color: var(--blue); }
.flow-hot b { color: var(--blue); }
.flow-arrow { display: flex; align-items: center; color: var(--muted); font-size: 18px; }
.flow-steps { list-style: none; margin: 14px 0 0; padding: 0; max-width: 900px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.flow-steps li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; padding: 8px 12px; background: var(--fill); border-radius: 10px; }
.flow-steps li b { flex: 0 0 96px; color: var(--blue); white-space: nowrap; }
.flow-steps li span { flex: 1; }
.flow-note { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; max-width: 900px; line-height: 1.7; }
@media (max-width: 720px) { .flow-lane { flex-direction: column; } .flow-arrow { transform: rotate(90deg); justify-content: center; }  }

/* 상단 경고 (스크립트 설치 방식 아님) */
.docs-warn { border: 1.5px solid #E5484D; background: #FFF5F5; color: #C62828; border-radius: 14px; padding: 14px 20px; margin: 16px 0 8px; font-size: 14.5px; line-height: 1.75; }
.docs-warn b { color: #C62828; font-size: 15.5px; }

/* 즉시 측정 — 직전 회차 실패 사유 (2026-09-29) */
.runnow-err { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--red); }

/* ---------------- 전체 화면 진행 표시 (오래 걸리는 API 작업) 2026-09-30 ---------------- */
#geoBusy { position: fixed; inset: 0; z-index: 190; background: rgba(25, 31, 40, .45);
           display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
#geoBusy[hidden] { display: none; }
.busy-box { background: var(--paper); border-radius: 20px; padding: 28px 36px; min-width: 320px; max-width: 90vw;
            text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.busy-spin { width: 36px; height: 36px; margin: 0 auto 14px; border-radius: 50%;
             border: 4px solid var(--fill-deep); border-top-color: var(--blue); animation: btn-spin .8s linear infinite; }
.busy-msg { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.busy-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
/* 사이드바 하위 메뉴 — 해당 단계가 선택됐을 때만 펼침 (2026-10-06) */
.side-group { display: none; }
.side-group.open { display: block; }

/* ===== 토스트 (flash·geoAlert) — 오른쪽 아래 ===== */
#geoToasts { position: fixed; right: 20px; bottom: 20px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(420px, calc(100vw - 40px)); }
.geo-toast { display: flex; gap: 10px; align-items: flex-start; background: #1B1F2A; color: #fff; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.22); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: auto; cursor: pointer; }
.geo-toast.on { opacity: 1; transform: none; }
.geo-toast i { font-style: normal; font-weight: 800; flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: #2EAD5F; }
.geo-toast.err i { background: #E5484D; }
.geo-toast span { white-space: pre-line; }