@charset "utf-8";
[hidden] { display: none !important; }
[data-theme="dark"] {
  --bg: #0a0a0a;
  --card: #111111;
  --text: #f5f6f8;
  --muted: #656565;
  --brand: #000000; /* ??낆뒩??됲떐?? ?濡ろ떟???*/
  --brand-600: #111111;
  --accent: #22c55e;
  --danger: #ef4444;
  --border: #1e1e1e;
  --overlay: rgba(0,0,0,0.55);
}

[data-theme="light"] {
  --bg: #f7f7f8;
  --card: #ffffff;
  --text: #111111; /* ??繹먮끏???癲ル슢?꾤땟?????れ꽔??? ?濡ろ떟???*/
  --muted: #656565;
  --brand: #111111;
  --brand-600: #222222;
  --accent: #16a34a;
  --danger: #dc2626;
  --border: #e5e7eb;
  --overlay: rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Pretendard, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 50% -100px, rgba(255,255,255,0.02) 0%, transparent 60%), var(--bg);
  color: var(--text);
  --footer-h: 56px;
  padding-bottom: var(--footer-h);
  line-height: 1.65;
}

.container {
  max-width: 520px;
  margin: 0 auto 24px;
  padding: 0 20px;
}
/* Type scale */
:root {
  --fz-xs: 14px;
  --fz-sm: 14px;
  --fz-md: 16px;
  --fz-lg: 18px;
  --fz-xl: 22px;
  --fz-xxl: 32px;
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;
  --radius: 14px;
  --ctrl-h: 56px;
  --ring: 0 0 0 3px rgba(79,140,255,0.35);
}

.page {
  min-height: calc(100vh - var(--footer-h));
  display: grid;
  align-content: center;
  justify-items: stretch; /* stretch children to container width to avoid width jumps */
  width: 100%;
}

.hero {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  width: 100%; /* keep stable width within container */
}

/* Stepper */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 15px 0; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--card); transition: border-color .2s ease, background .2s ease; }
.step .num { position: relative; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: #2b2b2b; color: #fff; font-size: 12px; line-height: 1; overflow: hidden; }
.step .num::after {
  content: "";
  position: absolute; inset: 0;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23fff' d='M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z'/></svg>");
  transform: scale(0.4) rotate(-15deg);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.step .label { color: var(--muted); font-size: var(--fz-sm); font-weight: var(--fw-m); }
.step.current { border-style: solid; }
.step.current .num { background: var(--brand); }
.step.current .label { color: var(--text); font-weight: var(--fw-sb); }
.step.done { opacity: 0.92; border-color: var(--accent); }
.step.done .num { background: var(--accent); color: transparent; }
.step.done .num::after { opacity: 1; transform: scale(1) rotate(0deg); }
/* Done step label emphasis */
.step.done .label { color: #20b758; font-weight: 800; }

/* Panels inside hero */
.panel { display: grid; gap: 10px; padding: 25px 0; border-top: 1px solid var(--border); }
.panel.current .panel__title { margin: 0; font-size: var(--fz-lg); color: var(--text) !important; font-weight: var(--fw-sb); letter-spacing: -0.2px; }
.panel__title { margin: 0; font-size: var(--fz-lg); color: var(--muted); font-weight: var(--fw-sb); letter-spacing: -0.2px; }

/* Theme-specific tune for step bubble */
[data-theme="light"] .step .num { background: #e5e7eb; color: #111; }
[data-theme="light"] .step.current .num { background: var(--brand); color: #fff; }
[data-theme="light"] .step .label { color: var(--muted); font-size: var(--fz-sm); font-weight: var(--fw-m); }

/* Drag & drop highlight */
.filebox { position: relative; }
.filebox.drag-over { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
[data-theme="light"] .filebox.drag-over { background: #f8fafc; }
[data-theme="dark"] .filebox.drag-over { background: #181a20; }

h1 { font-size: var(--fz-xxl); font-weight: var(--fw-b); margin: 0 0 12px; letter-spacing: -0.3px; }
.subtitle { margin: 0; color: #fff; font-size: var(--fz-md); font-weight: var(--fw-m); }
.page-head { margin: 0 0 10px; text-align: center; }
.page-head h1 { font-size: var(--fz-xxl); font-weight: var(--fw-b); margin: 0; letter-spacing: -0.3px; }
/* Hide inner duplicated heading inside card if present */
.hero > h1, .hero > .subtitle { margin: 0 0 10px; color: var(--muted); font-size: var(--fz-md); font-weight: var(--fw-m); }

.actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.agree { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); position: relative; margin-left: 0; white-space: nowrap; }

/* Custom checkbox */
.chk-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.chk-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.chk-box {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .08s ease;
}
.chk-box svg { opacity: 0; transform: scale(0.7); transition: opacity .15s ease, transform .15s ease; }
.chk-label:hover .chk-box { border-color: #2a3550; }
.chk-input:focus + .chk-label .chk-box { box-shadow: 0 0 0 3px rgba(79,140,255,0.25); }
.chk-input:active + .chk-label .chk-box { transform: scale(0.98); }
.chk-input:checked + .chk-label .chk-box { background: var(--brand); border-color: var(--brand-600); color: #fff; }
.chk-input:checked + .chk-label .chk-box svg { opacity: 1; transform: scale(1); }
.chk-input:disabled + .chk-label { cursor: not-allowed; opacity: 0.6; }
.chk-text { color: var(--muted); display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.measure { position: absolute; left: -9999px; top: -9999px; visibility: hidden; white-space: nowrap; }

.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ctrl-h);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 0 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-weight: var(--fw-sb);
}
.btn:hover { background: rgba(255,255,255,0.03); border-color: #2a2a2a; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: var(--brand); border-color: var(--brand-600); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
.btn-primary:hover { background: var(--brand-600); }
.btn-secondary { background: #202020; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
/* Light theme generic buttons readable on light backgrounds */
[data-theme="light"] .btn { background: #f3f4f6; color: #111; border-color: #e5e7eb; }
[data-theme="light"] .btn:hover { background: #e5e7eb; }
[data-theme="light"] .btn-secondary { background: #e5e7eb; color: #111; }
/* Full-width for specific buttons */
#btnAnalyze, #btnTerms { width: 100%; font-size: 16px; }
/* Emphasize primary analyze button height */
#btnAnalyze { padding-block: 16px; }
/* Make proceed button full-width */
#btnProceed { width: 100%; font-size: 16px; }
/* Specific font-size override for file choose button */
#btnChoose { font-size: 14px; height: 42px; }
#btnTermsConfirm { height: 42px; }

.upload { display: grid; gap: 10px; width: 100%; }
/* Custom file input */
.filebox {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  width: 100%;
}
.btn-file { background: transparent; width: 150px; height: var(--ctrl-h); }
[data-theme="dark"] .btn-file { background: #2b2b2b; border-color: #3a3a3a; color: #f5f5f5; }
[data-theme="dark"] .btn-file:hover { background: #323232; }
[data-theme="light"] .btn-file { background: #e5e7eb; border-color: #cbd5e1; color: #111; }
[data-theme="light"] .btn-file:hover { background: #e2e8f0; }
.filebox__name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: var(--fz-sm); font-weight: var(--fw-m); }
.filebox[data-disabled] { opacity: 0.6; }
.filebox__input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hint { margin: 0; color: var(--muted); font-size: 14px; }
.filebox + .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; }

.footer { text-align: center; padding: 20px; color: var(--muted); }
.footer { position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); display: grid; place-items: center; background: var(--bg); border-top: 1px solid var(--border); }

/* Modal */
.modal { position: fixed; inset: 0; display: none; }
.modal[aria-hidden="false"] { display: block; }
.modal__overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.modal__overlay { background: var(--overlay); }
.modal__dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(760px, 92vw); max-height: min(78vh, 720px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
}
.modal__header, .modal__footer { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.modal__footer { border-top: 1px solid var(--border); border-bottom: none; display: flex; justify-content: flex-end; gap: 8px; }
.modal__body { padding: 14px 16px; overflow: auto; }
.modal__close { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
#termsTitle { margin: 0; }
#resultTitle { margin: 0; }
#resultTitle { margin: 0; }

.terms p { margin: 0 0 12px; line-height: 1.6; color: #c8d3dc; }
[data-theme="light"] .terms p { color: #111; }
/* Emphasize terms scroll hint */
.terms .hint {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: rgba(34,197,94,0.12);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}
.terms .hint::before {
  /* down-arrow symbol to hint scrolling; use unicode escape for safety */
  content: "\2193";
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  margin-right: 6px;
}

.score { font-size: 20px; font-weight: var(--fw-sb); letter-spacing: -0.2px; margin: 6px 0 12px; color: var(--muted); }
.score__num { font-weight: 800; color: var(--text); margin-right: 8px; }
.score .badge { vertical-align: middle; margin-left: 6px; }
.badge-trust-high { background: var(--accent); color: #0b1; color: #0b1; }
.badge-trust-high { background: var(--accent); color: #0b1; }
.badge-trust-high { background: var(--accent); color: #0b1; }
.badge-trust-high { background: #16a34a; color: #fff; }
.badge-trust-mid { background: #f59e0b; color: #111; }
.badge-trust-low { background: var(--danger); color: #fff; }
.badge-advice { background: var(--border); color: var(--text); }
.badge-pending { background: #f59e0b; color: #111; }
.badge-ok { background: #16a34a; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; color: #c8d3dc; }
.details ul { margin: 8px 0 0; padding-left: 18px; }

/* Result highlights panel */
.highlights { margin: 8px 0 12px; padding: 12px; border: 1px solid var(--border); background: var(--card); border-radius: 10px; }
.highlights__title { margin: 0 0 8px; font-weight: var(--fw-sb); color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.chip--sev { background: var(--sev-bg); color: var(--sev); }
.chip--mod { background: var(--mod-bg); color: var(--mod); }
.chip--info { background: var(--info-bg); color: var(--info); }
.hl-group { margin-bottom: 8px; }
.hl-group__label { display:flex; align-items:center; gap:6px; font-size: 13px; color: var(--muted); margin: 0 0 6px; font-weight: 800; }
.hl-ic { font-size: 14px; opacity: 0.9; }
.badge { display: inline-block; min-width: 16px; padding: 1px 6px; border-radius: 999px; background: var(--border); color: var(--text); font-size: 12px; font-weight: 700; }
.highlights ul { margin: 0; padding-left: 18px; }
.details li { margin: 6px 0; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin-top: 10px; }
.guide .btn-guide-toggle { margin-top: 8px; }
.guide__content { margin-top: 6px; }

/* Simple tooltips using data-tooltip */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; left: 0; bottom: 100%; transform: translateY(-6px); max-width: 280px; padding: 6px 8px; border-radius: 6px; background: var(--card); color: var(--text); border: 1px solid var(--border); font-size: 12px; white-space: normal; line-height: 1.35; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }

/* Loading / progress */
.loading__text { color: var(--muted); margin-bottom: 8px; }
.progress { position: relative; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.progress__bar { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--accent); transition: width 120ms ease; }
.kv .k { color: var(--muted); font-size: var(--fz-sm); font-weight: var(--fw-m); }
.kv .v { color: var(--text); font-size: var(--fz-md); font-weight: var(--fw-sb); }

@media (max-width: 520px) {
  h1 { font-size: var(--fz-xxl); font-weight: var(--fw-b); margin: 0 0 12px; letter-spacing: -0.3px; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .upload { grid-column: 1; grid-row: auto; }
  .actions { justify-content: flex-start; }
}

/* Theme toggle */
.theme-toggle {
  position: fixed;
  top: 16px; right: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.icon-dark, .icon-light { display: none; }
[data-theme="dark"] .icon-light { display: block; }
[data-theme="light"] .icon-dark { display: block; }

/* More (ellipsis) button and menu */
.more-toggle {
  position: fixed;
  top: 16px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.more-toggle svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.more-menu {
  position: fixed; top: 62px; right: 16px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 8px;
  min-width: 160px;
  z-index: 50;
}
.menu-item {
  width: 100%; text-align: left;
  padding: 10px 12px;
  background: transparent; color: var(--text);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.menu-item:hover { background: rgba(255,255,255,0.04); }








/* Wizard behavior: show exactly one panel at a time */
.hero .panel:not(.current) { display: none; }

/* Result modal primary confirm height */
#resultModal .modal__footer .btn.btn-primary { height: 42px; }
/* Details toggle button height */
#btnDetails { height: 42px; }

/* Unify all button variants to base .btn look */
.btn-primary, .btn-secondary { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: none !important; }
.btn-primary:hover, .btn-secondary:hover { background: rgba(255,255,255,0.03) !important; border-color: #2a2a2a !important; }
[data-theme='light'] .btn-primary, [data-theme='light'] .btn-secondary { background: #f3f4f6 !important; color: #111 !important; border-color: #e5e7eb !important; }
[data-theme='light'] .btn-primary:hover, [data-theme='light'] .btn-secondary:hover { background: #e5e7eb !important; }

/* Accordion (keyword descriptions) */
.acc { display: grid; gap: 6px; }
details.acc-item { border: 1px solid var(--border); border-radius: 8px; background: var(--card); padding: 6px 8px; }
summary.acc-summary { list-style: none; cursor: pointer; font-weight: 800; font-size: 13px; color: var(--text); outline: none; }
summary.acc-summary::-webkit-details-marker { display: none; }
.acc-body { margin-top: 6px; color: var(--muted); font-size: 13px; }
.hl-group[data-kind='severe'] details.acc-item { border-color: var(--sev); background: var(--sev-bg); }
.hl-group[data-kind='moderate'] details.acc-item { border-color: var(--mod); background: var(--mod-bg); }
.hl-group[data-kind='informative'] details.acc-item { border-color: var(--info); background: var(--info-bg); }
.hl-group { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.hl-group[data-kind='severe'] { border-left: 4px solid var(--sev); }
.hl-group[data-kind='moderate'] { border-left: 4px solid var(--mod); }
.hl-group[data-kind='informative'] { border-left: 4px solid var(--info); }

/* Severity variables per theme */
[data-theme='dark'] { --sev:#ef4444; --sev-bg:rgba(239,68,68,0.12); --mod:#f59e0b; --mod-bg:rgba(245,158,11,0.12); --info:#60a5fa; --info-bg:rgba(96,165,250,0.10); }
[data-theme='light'] { --sev:#dc2626; --sev-bg:rgba(220,38,38,0.08); --mod:#d97706; --mod-bg:rgba(217,119,6,0.10); --info:#2563eb; --info-bg:rgba(37,99,235,0.08); }

/* === Result hierarchy & severity emphasis (overrides) === */
/* Theme-scoped severity tokens (override-able) */
[data-theme="dark"] {
  --sev: #ef4444; --sev-bg: rgba(239,68,68,0.12);
  --mod: #f59e0b; --mod-bg: rgba(245,158,11,0.12);
  --info: #60a5fa; --info-bg: rgba(96,165,250,0.10);
}
[data-theme="light"] {
  --sev: #dc2626; --sev-bg: rgba(220,38,38,0.08);
  --mod: #d97706; --mod-bg: rgba(217,119,6,0.10);
  --info: #2563eb; --info-bg: rgba(37,99,235,0.08);
}

/* Group blocks with severity accent */
.hl-group { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.hl-group[data-kind="severe"] { border-left: 4px solid var(--sev); background: linear-gradient(0deg, var(--sev-bg), var(--sev-bg)), var(--card); }
.hl-group[data-kind="moderate"] { border-left: 4px solid var(--mod); background: linear-gradient(0deg, var(--mod-bg), var(--mod-bg)), var(--card); }
.hl-group[data-kind="informative"] { border-left: 4px solid var(--info); background: linear-gradient(0deg, var(--info-bg), var(--info-bg)), var(--card); }
.hl-group[data-kind="severe"] .hl-group__label { color: var(--sev); }
.hl-group[data-kind="moderate"] .hl-group__label { color: var(--mod); }
.hl-group[data-kind="informative"] .hl-group__label { color: var(--info); }

/* Score prominence */
.score { font-size: 18px; color: var(--muted); }
.score__num { font-size: 28px; font-weight: 900; color: var(--text); }
.badge-trust-high { background: #16a34a !important; color: #fff !important; }
.badge-trust-mid { background: #f59e0b !important; color: #111 !important; }
.badge-trust-low { background: #ef4444 !important; color: #fff !important; }
.badge-advice { background: #334155 !important; color: #e2e8f0 !important; }

/* Title emphasis inside highlights */
.highlights__title { font-size: 16px; font-weight: 900; letter-spacing: -0.2px; }