:root{
  --bg:#f3f6fb;
  --surface:#ffffff;
  --text:#172033;
  --muted:#667085;
  --line:#dfe5ee;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-soft:#eff6ff;
  --purple:#7c3aed;
  --green:#16a34a;
  --danger:#dc2626;
  --shadow:0 12px 30px rgba(15,23,42,.07);
}
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  line-height:1.55;
  background:var(--bg);
  color:var(--text);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
}
button,input,a{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.app-header{
  min-height:92px;
  padding:18px clamp(18px,4vw,52px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:linear-gradient(135deg,#fffaf4,#fff3e6);
  color:#2f2a26;
  border-bottom:1px solid #f2d4b5;
  box-shadow:0 4px 18px rgba(120,72,24,.08);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-icon{
  width:70px;height:70px;border-radius:18px;
  display:block;object-fit:contain;
  background:transparent;
  box-shadow:0 6px 18px rgba(120,72,24,.10);
}
.brand-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.click-badge{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 11px 6px 12px;
  border-radius:13px;
  background:linear-gradient(135deg,#f97316,#fb923c);
  color:#fff;
  font-size:15px;font-weight:900;letter-spacing:-.02em;
  box-shadow:0 5px 12px rgba(234,88,12,.18);
  transform-origin:50% 70%;
  animation:click-pop .65s cubic-bezier(.2,.8,.2,1) .12s both;
}
.click-text{display:block}
.click-spark{
  position:absolute;
  right:-8px;top:-9px;
  color:#f59e0b;
  font-size:.8rem;
  text-shadow:0 0 8px rgba(245,158,11,.45);
  opacity:0;
  animation:click-spark .75s ease-out .42s both;
}
@keyframes click-pop{
  0%{opacity:0;transform:translateY(3px) scale(.72) rotate(-4deg)}
  48%{opacity:1;transform:translateY(-2px) scale(1.12) rotate(2deg)}
  72%{transform:translateY(1px) scale(.96) rotate(-1deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
@keyframes click-spark{
  0%{opacity:0;transform:scale(.25) rotate(-20deg)}
  38%{opacity:1;transform:scale(1.25) rotate(8deg)}
  100%{opacity:0;transform:translate(5px,-5px) scale(.65) rotate(25deg)}
}
.brand h1{font-size:34px;line-height:1.15;margin:0;font-weight:800;letter-spacing:-.02em}
.brand p{margin:6px 0 0;color:#8a735f;font-size:14px;font-weight:550}
.version-badge{padding:6px 10px;border-radius:999px;background:#ffedd5;font-size:13px;font-weight:800;color:#c2410c}
.header-summary{display:flex;gap:8px}
.header-summary div{
  min-width:112px;padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,.78);text-align:right;
  border:1px solid #f0d7bf;
  box-shadow:0 4px 12px rgba(120,72,24,.04)
}
.header-summary span{display:block;font-size:13px;color:#9a765d}
.header-summary strong{display:block;margin-top:3px;font-size:18px;color:#3f342c}
.header-summary div:last-child{background:#fff3e8;border-color:#f4b97d}
.header-summary div:last-child strong{color:#ea580c}

.app-shell{width:min(1180px,calc(100% - 32px));margin:24px auto 48px}
.step-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;margin-bottom:14px;
}
.step{
  display:flex;align-items:center;gap:9px;
  padding:11px 14px;border-radius:12px;background:#e8edf5;color:#667085;
  font-size:15px;font-weight:750
}
.step b{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid #d8dfeb;font-size:14px
}
.step.active{background:#eaf2ff;color:#1e40af}
.step.active b{background:#2563eb;color:#fff;border-color:#2563eb}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.hero-card,.workspace-card,.purpose-card{margin-bottom:14px}
.hero-card,.workspace-card{padding:24px}
.card-heading{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  margin-bottom:18px
}
.card-heading.compact{align-items:center}
.card-heading h2,.output-heading h2{margin:3px 0 0;font-size:23px;line-height:1.25;letter-spacing:-.02em}
.card-heading p{margin:6px 0 0;color:var(--muted);font-size:14px;font-weight:550;line-height:1.6}
.eyebrow{font-size:12px;font-weight:800;color:var(--primary);letter-spacing:.06em;text-transform:uppercase}
.privacy-chip{white-space:nowrap;padding:9px 14px;border-radius:999px;background:#ecfdf3;color:#15803d;font-size:13px;font-weight:800}

.install-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:18px;align-items:stretch}
.install-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.install-steps li{display:flex;align-items:center;gap:11px;color:#475467;font-size:15px;line-height:1.55}
.install-steps li>span{
  flex:0 0 26px;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:800
}
kbd{padding:2px 5px;border:1px solid #d0d5dd;border-bottom-width:2px;border-radius:5px;background:#fff;font-size:13px}
.bookmarklet-box{
  padding:18px;border:1.5px dashed #b9c8df;border-radius:14px;background:#f8fbff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center
}
.bookmarklet-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:230px;padding:13px 18px;border-radius:11px;
  text-decoration:none;color:#fff;font-size:15px;font-weight:850;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 8px 18px rgba(37,99,235,.22);
  cursor:grab;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease
}
.bookmarklet-btn:hover{
  transform:translateY(-2px) scale(1.012);
  box-shadow:0 11px 22px rgba(37,99,235,.26);
  filter:saturate(1.05)
}
.bookmarklet-btn:active{
  transform:translateY(1px) scale(.965);
  box-shadow:0 4px 10px rgba(37,99,235,.18)
}
.bookmarklet-box p{margin:11px 0 8px;color:#667085;font-size:13.5px;font-weight:550}
.supported-sites{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.supported-sites span{padding:4px 7px;border-radius:999px;background:#fff;border:1px solid #e4e7ec;color:#667085;font-size:12.5px;font-weight:750}

.toolbar{display:flex;gap:7px;flex-wrap:wrap}
.btn{
  border:0;border-radius:11px;padding:11px 15px;font-size:15px;font-weight:800;min-height:44px;
  transition:transform .12s ease,background .12s ease
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-dark)}
.btn.secondary{background:#eef4ff;color:#1d4ed8;border:1px solid #dbeafe}
.btn.ghost{background:#fff;color:#667085;border:1px solid #d0d5dd}
.btn.danger:hover{color:#b42318;background:#fff5f5;border-color:#fecaca}
.btn.purple{background:var(--purple);color:#fff}
.btn.download{width:100%;margin-top:12px;background:#0f766e;color:#fff;padding:11px}
.btn.download.purple{background:#6d28d9}

.empty-state{
  min-height:190px;border:1.5px dashed #ccd5e3;border-radius:14px;background:#fbfcfe;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#667085;gap:5px
}
.empty-state strong{color:#344054;font-size:15px}
.empty-state span{font-size:13.5px;line-height:1.6}
.empty-icon{font-size:34px;margin-bottom:3px}

.table-wrap{border:1px solid #e4e7ec;border-radius:14px;overflow:hidden}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:900px}
th,td{border-bottom:1px solid #edf0f4;padding:11px 10px;font-size:14px;text-align:center;vertical-align:middle}
th{background:#f8fafc;color:#475467;font-size:13.5px;font-weight:800}
tbody tr:last-child td{border-bottom:0}
tbody tr.review-row{background:#fffbeb}
.check-col{width:42px}.small-col{width:72px}.money-col{width:118px}.action-col{width:46px}
.cell-input{
  width:100%;min-width:0;border:1px solid transparent;border-radius:7px;padding:7px 8px;
  background:transparent;color:#1f2937;font-size:15px;min-height:42px
}
.cell-input:hover{border-color:#e1e7ef;background:#fff}
.cell-input:focus{outline:none;border-color:#93c5fd;background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.08)}
.cell-input.money{text-align:right;font-variant-numeric:tabular-nums}
.amount-cell{text-align:right;font-weight:800;color:#344054;font-variant-numeric:tabular-nums}
.delete-row{border:0;background:transparent;color:#98a2b3;font-size:1rem;border-radius:7px;padding:4px 7px}
.delete-row:hover{background:#fff1f2;color:#e11d48}
.review-mark{display:inline-block;margin-left:5px;color:#b45309;font-size:12px;font-weight:800}
.review-notice{padding:10px 12px;background:#fffbeb;color:#92400e;border-top:1px solid #fde68a;font-size:13.5px;font-weight:700}

.purpose-card{padding:20px 24px}
.purpose-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:20px;align-items:center}
.purpose-grid label{font-size:15px;font-weight:800}
.purpose-grid p{margin:4px 0 0;color:#667085;font-size:14px;line-height:1.6}
.purpose-grid input{width:100%;padding:11px 13px;border:1px solid #d0d5dd;border-radius:11px;outline:none;font-size:15.5px;min-height:44px}
.purpose-grid input:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.08)}

.output-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.output-card{padding:24px;border-top:3px solid #3b82f6}
.output-card.accent-purple{border-top-color:#8b5cf6}
.output-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.output-text{
  margin:0;min-height:160px;padding:15px;border-radius:12px;background:#f8fafc;border:1px solid #e4e7ec;
  white-space:pre-wrap;font-family:inherit;font-size:15px;line-height:1.75;color:#344054
}

.help-card{padding:0;margin-bottom:14px;overflow:hidden}
.help-card summary{padding:16px 20px;cursor:pointer;font-size:15px;font-weight:800;color:#475467}
.help-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 18px}
.help-gallery img{width:100%;border-radius:10px;border:1px solid #e4e7ec}
.footer-note{display:flex;justify-content:space-between;gap:16px;color:#98a2b3;font-size:12.5px;line-height:1.55;padding:8px 4px}
.footer-note strong{color:#667085}

.toast{
  position:fixed;right:20px;bottom:20px;z-index:9999;
  max-width:min(420px,calc(100% - 40px));padding:12px 15px;border-radius:10px;
  background:#111827;color:#fff;font-size:14px;font-weight:700;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s ease
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.warn{background:#92400e}
.toast.error{background:#991b1b}

@media (max-width:820px){
  .app-header{align-items:flex-start;flex-direction:column}
  .header-summary{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .header-summary div{min-width:0}
  .step-strip{grid-template-columns:1fr 1fr}
  .install-grid,.purpose-grid,.output-grid{grid-template-columns:1fr}
  .card-heading{flex-direction:column}
  .card-heading.compact{align-items:flex-start}
  .help-gallery{grid-template-columns:1fr}
  .footer-note{flex-direction:column}
}
@media (max-width:520px){
  .app-shell{width:min(100% - 20px,1180px);margin-top:14px}
  .hero-card,.workspace-card{padding:16px}
  .app-header{padding:16px}
  .brand-icon{width:58px;height:58px;border-radius:15px}
  .brand h1{font-size:26px}
  .click-badge{padding:5px 9px;font-size:13px;border-radius:11px}
  .step{padding:10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .click-badge,.click-spark{animation:none!important}
  .bookmarklet-btn{transition:none}
}


/* v3.0.2 desktop layout: use horizontal space to reduce vertical scrolling */
.app-shell{width:min(1580px,calc(100% - 40px))}
.work-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(390px,.72fr);
  gap:16px;
  align-items:start;
  margin-bottom:14px
}
.work-layout>.workspace-card{margin-bottom:0;min-width:0}
.result-stack{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:sticky;
  top:14px
}
.result-stack .purpose-card{margin-bottom:0}
.result-stack .purpose-grid{grid-template-columns:1fr;gap:10px}
.result-stack .purpose-card{padding:18px 20px}
.result-panel{padding:20px 20px 18px}
.result-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px
}
.result-panel-head h2{margin:3px 0 0;font-size:23px;line-height:1.25}
.result-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:11px;
  background:#f1f5f9
}
.result-tab{
  min-height:36px;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#64748b;
  font-size:13px;
  font-weight:800
}
.result-tab.active{
  background:#fff;
  color:#2563eb;
  box-shadow:0 2px 7px rgba(15,23,42,.08)
}
.output-pane{display:none}
.output-pane.active{display:block}
.compact-output-heading{margin-bottom:10px}
.result-panel .output-text{
  min-height:0;
  max-height:300px;
  overflow:auto;
  padding:13px 14px;
  font-size:14.5px;
  line-height:1.68
}
.result-panel .btn.download{margin-top:10px}
.table-wrap th,.table-wrap td{padding-top:9px;padding-bottom:9px}
.footer-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-brand span{color:#7c8aa0;font-weight:650}

@media(max-width:1180px){
  .app-shell{width:min(100% - 28px,1180px)}
  .work-layout{grid-template-columns:1fr}
  .result-stack{position:static}
  .result-stack .purpose-grid{grid-template-columns:1fr 1.25fr}
  .result-panel .output-text{max-height:none}
}
@media(max-width:820px){
  .result-stack .purpose-grid{grid-template-columns:1fr}
  .result-panel-head{flex-direction:column}
  .result-tabs{width:100%}
  .result-tab{flex:1}
}


/* v3.0.4: make output tabs unmistakable */
.result-panel-head{
  flex-direction:column;
  align-items:stretch;
  gap:12px
}
.result-tabs{
  width:100%;
  gap:8px;
  padding:0;
  background:transparent
}
.result-tab{
  flex:1;
  min-height:46px;
  padding:10px 14px;
  border:1px solid #cfd9e8;
  border-radius:11px;
  background:#fff;
  color:#52657d;
  font-size:14.5px;
  font-weight:850;
  box-shadow:0 2px 7px rgba(15,23,42,.04)
}
.result-tab[data-output-tab="summary"].active{
  background:#eaf2ff;
  border-color:#7fb0ff;
  color:#1d4ed8;
  box-shadow:0 0 0 3px rgba(37,99,235,.08)
}
.result-tab[data-output-tab="cause"].active{
  background:#f3e8ff;
  border-color:#b794f6;
  color:#7c3aed;
  box-shadow:0 0 0 3px rgba(124,58,237,.08)
}