/* ===== 공팔이 (08-ee) Review AI — v2 dark-mode design system =====
   Converted from light-mode shared.css to dark chrome.
   McKinsey-clean: data-forward, restrained, source-cited. */
:root{
  --bg:#0A0A0A; --cream:#111; --ink:#FFF; --ink-2:#e7e7e2;
  --green:#00E640; --green-deep:#00B832; --green-tint:rgba(0,230,64,.1); --green-line:rgba(0,230,64,.25);
  --card:#1a1a1a; --border:#2a2a2a; --line:#222; --muted:#9A9A93; --soft:#666;
  --amber:#8A6D00; --amber-bg:rgba(224,194,78,.1); --amber-line:rgba(224,194,78,.3);
  --blue:#2F5C92; --blue-tint:rgba(91,143,207,.1); --red:#B04A4A; --red-bg:rgba(224,74,74,.1);
  --r-lg:16px; --r-md:13px; --r-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Pretendard",-apple-system,system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5}

/* layout frame */
.stage{background:var(--bg);min-height:100vh}
.app{width:100%;max-width:1200px;margin:0 auto;background:var(--bg);
  display:flex;flex-direction:column;min-height:100vh}
.app.wide{max-width:1000px;flex-direction:row;min-height:auto}

/* dark topbar */
.topbar{height:66px;background:#111;display:flex;align-items:center;
  padding:0 26px;gap:20px;flex-shrink:0;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10}
.logo-lockup{display:flex;align-items:center;gap:10px}
.logo-lockup .stars{height:17px;width:auto}
.logo-word{font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff}
.logo-word span{color:var(--green)}
.logo-by{font-size:9px;color:#8a8a85;letter-spacing:.02em;margin-top:2px}
.statuspill{display:inline-flex;align-items:center;gap:7px;background:#161616;border:1px solid #2a2a2a;
  border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:700;color:var(--green)}
.statuspill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,230,64,.5)}70%{box-shadow:0 0 0 7px rgba(0,230,64,0)}100%{box-shadow:0 0 0 0 rgba(0,230,64,0)}}

/* stepper */
.stepper{display:flex;align-items:center;margin-left:auto}
.stepper .st{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#7d7d77}
.stepper .st .b{width:19px;height:19px;border-radius:50%;background:#222;display:flex;align-items:center;
  justify-content:center;font-size:9.5px;font-weight:800;color:#9a9a94}
.stepper .st.done{color:#d8d8d2}.stepper .st.done .b{background:var(--green);color:#000}
.stepper .st.now{color:#fff}.stepper .st.now .b{background:#fff;color:#000}
.stepper .ar{width:16px;height:1px;background:#2f2f2c;margin:0 9px}

/* body scroll area */
.wrap{flex:1;overflow-y:auto;padding:34px 46px 46px;display:flex;justify-content:center}
.col{width:100%;max-width:780px}
.screen{display:none;animation:fade .32s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* type */
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--green-deep);text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
h1{font-size:29px;font-weight:800;letter-spacing:-.025em;margin-top:10px;line-height:1.18}
h1 .g{color:var(--green-deep)}
.lead{font-size:14.5px;color:var(--muted);margin-top:9px;max-width:62ch}

/* 공팔이 agent bubble — dark variant */
.agent{display:flex;gap:14px;background:var(--bg-sf,#161616);color:#fff;border-radius:var(--r-lg);padding:18px 20px;margin-top:20px;border:1px solid var(--border)}
.agent .mono{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--green);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;background:#0e0e0e}
.agent .nm{font-size:10.5px;font-weight:800;color:var(--green);letter-spacing:.05em;text-transform:uppercase}
.agent p{font-size:14px;margin-top:6px;line-height:1.62;color:#e7e7e2}
.agent p b{color:#fff}.agent p .g{color:var(--green)}

/* 공팔이 마스코트 얼굴 아바타 — 페이지당 최대 1개(첫 말풍선만). .mono/.av 와 함께 사용:
   <div class="mono gp-face" role="img" aria-label="공팔이"></div>  (텍스트 '08' 제거)
   나머지 반복 아바타는 '08' 대신 브랜드 별★ 마크를 텍스트로 둔다. */
.gp-face{
  background:#0A0A0A center/cover no-repeat url("/review/assets/gongpali-mascot-hd.jpg") !important;
  border:1.5px solid var(--green) !important;
  color:transparent !important;font-size:0 !important;overflow:hidden;
}

/* cards & grids */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.card.tint{background:var(--green-tint);border-color:var(--green-line)}
.grid{display:grid;gap:14px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.mt10{margin-top:10px}.mt14{margin-top:14px}.mt20{margin-top:20px}.mt28{margin-top:28px}

.label{position:relative;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;
  padding:0 0 9px 15px;margin:26px 0 14px;border-bottom:1.5px solid var(--border);display:flex;justify-content:space-between;align-items:baseline}
.label::before{content:"●";position:absolute;left:0;top:1px;color:var(--green-deep);font-size:9px}
.label .r{font-size:10.5px;font-weight:600;color:var(--soft);letter-spacing:.01em;text-transform:none}

/* selectable option — dark */
.opt{border:1.5px solid var(--border);border-radius:14px;padding:18px;background:var(--card);cursor:pointer;
  transition:border-color .15s,box-shadow .15s;position:relative}
.opt:hover{border-color:var(--green-line)}
.opt.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.opt .no{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--soft);text-transform:uppercase}
.opt.on .no{color:var(--green-deep)}
.opt b{display:block;font-size:16px;margin-top:7px;letter-spacing:-.01em}
.opt .d{font-size:12px;color:var(--muted);margin-top:5px}

/* fields — dark */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;font-weight:700;color:var(--muted)}
.field .inp{border:1px solid var(--border);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px;
  font-weight:600;background:#161616;outline:none;color:var(--ink);width:100%}
.field .inp:focus{border-color:var(--green)}
.field .inp.confirm{border-color:var(--amber-line);background:var(--amber-bg)}
.field .inp.confirm:focus{border-color:var(--amber)}
.confirmtag{font-size:9.5px;font-weight:800;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-line);
  padding:2px 8px;border-radius:5px}
.sel{display:flex;gap:6px;flex-wrap:wrap}
.sel span{font-size:12px;font-weight:600;padding:7px 13px;border:1px solid var(--border);border-radius:999px;color:var(--muted);cursor:pointer;background:var(--card)}
.sel span.on{border-color:var(--ink);background:var(--ink);color:#000}
.urlbar{display:flex;align-items:center;gap:11px;background:#161616;border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.urlbar .pre{font-size:10.5px;font-weight:800;color:var(--soft);letter-spacing:.06em}
.urlbar input{border:none;outline:none;flex:1;font-family:inherit;font-size:13.5px;color:var(--ink);background:transparent}

/* buttons — dark */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;
  padding:14px 26px;font-size:14.5px;font-weight:800;font-family:inherit;cursor:pointer;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(.97)}.btn:active{transform:scale(.99)}
.btn.green{background:var(--green);color:#000}
.btn.dark{background:var(--ink);color:#000}
.btn.ghost{background:var(--card);border:1.5px solid var(--border);color:var(--muted)}
.btn.line{background:var(--card);border:1px solid var(--border);color:var(--muted)}
.btn.block{width:100%}.btn.lg{padding:16px 30px;font-size:15.5px}

/* detail rows / tables — dark */
.drow{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:none}
.drow .k{font-size:13px;color:var(--muted);font-weight:600}.drow .v{font-size:14px;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-size:10.5px;color:var(--soft);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:10px 4px;border-bottom:1.5px solid var(--border);background:#161616;color:#fff}
tbody td{padding:12px 4px;border-bottom:1px solid var(--line)}
.up{color:var(--green-deep);font-weight:800}

/* misc */
.thinking{display:flex;align-items:center;gap:13px;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:18px 20px;margin-top:20px}
.spin{width:17px;height:17px;border:2px solid rgba(255,255,255,.22);border-top-color:var(--green);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.note{font-size:11.5px;color:var(--muted);line-height:1.55}
.src{font-size:10.5px;color:var(--soft);line-height:1.5}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:28px}
.assist{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--green-deep);cursor:pointer;
  border:1px dashed var(--green-line);border-radius:999px;padding:9px 15px;background:var(--green-tint)}
.kbar{display:flex;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card)}
.kbar .k{flex:1;padding:15px 16px;border-right:1px solid var(--line)}
.kbar .k:last-child{border-right:none}
.kbar .k .l{font-size:11px;color:var(--muted);font-weight:600}
.kbar .k .v{font-size:18px;font-weight:800;margin-top:4px;letter-spacing:-.01em}
.budget{display:flex;height:30px;border-radius:8px;overflow:hidden;border:1px solid var(--border);margin-top:12px}
.budget .a{display:flex;align-items:center;padding:0 12px;font-size:11px;font-weight:700;white-space:nowrap}
.pay{display:flex;align-items:center;gap:13px;border:1.5px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;margin-top:10px;background:var(--card)}
.pay.on{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.pay .r{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0}
.pay.on .r{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 4px var(--card)}
.done-mark{width:70px;height:70px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin:6px auto 0}
.done-mark svg{width:32px;height:32px}

/* shared star logo svg helper sizing */
.starmark{height:17px;width:auto}

/* language toggle — already dark-friendly */
.lang-toggle{display:inline-flex;gap:2px;background:#161616;border:1px solid #2a2a2a;border-radius:999px;padding:3px}
.lang-toggle button{border:none;background:none;color:#8a8a85;font-family:inherit;font-size:11px;font-weight:800;
  padding:5px 10px;border-radius:999px;cursor:pointer;letter-spacing:.02em}
.lang-toggle button.on{background:var(--green);color:#000}
.lang-toggle.light{background:var(--card);border-color:var(--border)}
.lang-toggle.light button{color:var(--muted)}
.lang-toggle.light button.on{background:var(--ink);color:#000}

/* compact language toggle */
.v2-lang-btn{background:#222;border:1px solid #333;color:var(--green);
  font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.04em;
  padding:5px 10px;border-radius:6px;cursor:pointer;margin-left:auto}
.v2-lang-btn:hover{background:#333;border-color:var(--green)}

/* ── v2: 활동 로그 ── */
.v2-log{margin:8px 0 0 58px;padding:10px 0 10px 14px;border-left:2px solid var(--border);display:none}
.v2-log.open{display:block}
.v2-log-entry{margin-bottom:8px;position:relative}
.v2-log-entry .le-t{font-size:11px;font-weight:600;color:var(--ink-2)}
.v2-log-entry .le-d{font-size:9px;color:var(--soft);margin-top:1px}
.v2-log-entry.active .le-t{color:var(--green)}
.v2-log-toggle{color:var(--soft);font-size:10px;cursor:pointer;margin-top:6px}
.v2-log-toggle:hover{color:var(--green)}

/* ── v2: 모바일 프로그레스 바 ── */
.v2-progress{display:none}
@media(max-width:768px){
  .stepper{display:none}
  .v2-progress{display:flex;gap:3px;padding:8px 16px;background:var(--bg)}
  .v2-progress .seg{flex:1;height:3px;border-radius:2px;background:var(--line)}
  .v2-progress .seg.done{background:var(--green)}
  .v2-progress .seg.now{background:var(--green);opacity:.5}
  .stage{padding:0}
  .app{width:100%;border-radius:0;border:none;min-height:100vh}
  .app.wide{flex-direction:column;height:auto;width:100%}
  .topbar{padding:0 16px;height:52px}
  .wrap{padding:16px}
  .col{max-width:100%}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .foot{flex-direction:column;gap:8px}
  .foot .btn{width:100%}
  .brandside{width:100%;height:auto;padding:24px}
  .formside{padding:24px}
  .price-grid{grid-template-columns:1fr 1fr}
}

/* ── 별 마크 전면 제거 (2026-06-02, Jacob 요청) — 5★ SVG·모바일 별박스 모두 숨기고 'Review AI' 워드마크만 노출 ── */
.logo-lockup .starmark,.logo-lockup .stars{display:none !important}
@media(max-width:600px){
  .logo-lockup .logo-word{display:inline}        /* 모바일에서도 워드마크 노출 */
  .logo-lockup .logo-by{display:none}
  .logo-lockup::before{content:none !important}  /* 모바일 별 미니 박스 제거 */
}