:root {
  --bg: #f6f6f4;
  --panel: #ffffff;
  --panel-2: #fbfbf9;
  --line: #e3e2dd;
  --line-2: #cfcec7;
  --ink: #1d1d1b;
  --ink-2: #5c5b55;
  --ink-3: #8b8a83;
  --accent: #8a5a2b;
  --accent-soft: #f0e6da;
  --good: #2f6b43;
  --warn: #8a5a2b;
  --bad: #9c3328;
  --purple: #6d4a8f;
  --radius: 10px;
  --mono: ui-monospace, "Cascadia Mono", "D2Coding", Consolas, monospace;
  --sans: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, system-ui, sans-serif;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

header.top {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 14px 16px 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; }
.brand h1 { font-size: 18px; margin: 0; letter-spacing: -0.2px; }
.brand .ver { font: 12px var(--mono); color: var(--ink-3); }
.brand .engine { font: 12px var(--mono); color: var(--ink-3); margin-left: auto; word-break: break-all; }

nav.tabs { display: flex; gap: 2px; max-width: 1080px; margin: 10px auto 0; overflow-x: auto; }
nav.tabs button {
  appearance: none; border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--ink-2);
  padding: 9px 14px; font: 600 14px var(--sans); cursor: pointer;
  border-radius: 8px 8px 0 0; white-space: nowrap;
}
nav.tabs button[aria-selected="true"] {
  background: var(--bg); color: var(--ink);
  border-color: var(--line); margin-bottom: -1px;
}

main { max-width: 1080px; margin: 0 auto; padding: 18px 16px 72px; }
section.tab { display: none; }
section.tab.on { display: block; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.card > h2 {
  margin: 0 0 4px; font-size: 15px; letter-spacing: -0.2px;
  display: flex; align-items: center; gap: 8px;
}
.card > h2 .num { font: 700 11px var(--mono); color: var(--accent); background: var(--accent-soft); padding: 2px 6px; border-radius: 5px; }
.card .hint { color: var(--ink-2); font-size: 13px; margin: 0 0 12px; }

.btn {
  appearance: none; cursor: pointer; display: inline-block; text-decoration: none;
  background: var(--ink); color: var(--panel);
  border: 1px solid var(--ink); border-radius: 8px;
  padding: 9px 15px; font: 600 14px var(--sans);
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.wide { width: 100%; padding: 12px; font-size: 15px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost:hover:not(:disabled) { background: var(--panel-2); }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.tight { gap: 6px; }
.grow { flex: 1 1 200px; min-width: 0; }

label.field { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
input[type=text], input[type=number], select {
  width: 100%; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 10px;
  font: 14px var(--sans);
}
input[type=file] { font: 13px var(--sans); color: var(--ink-2); }

.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--radius);
  padding: 20px; text-align: center; color: var(--ink-2); font-size: 14px;
  background: var(--panel-2);
}
.drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font: 13px var(--sans); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }

.goalgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; }
.goal {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
  background: var(--panel-2); cursor: pointer; font-size: 13.5px;
}
.goal.sel { border-color: var(--accent); background: var(--accent-soft); }
.goal input { margin: 0; accent-color: var(--accent); }
.goal .pz { font: 11px var(--mono); color: var(--ink-3); margin-left: auto; }
.goal.p4 .nm { color: var(--purple); font-weight: 600; }

details.more { margin-top: 10px; }
details.more > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
details.more > div { padding-top: 10px; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
table.data th { font-size: 11.5px; letter-spacing: .02em; color: var(--ink-2); text-transform: none; white-space: nowrap; background: var(--panel-2); position: sticky; top: 0; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
table.data tr.ex td { background: var(--accent-soft); }
table.data tr.expand td { background: var(--panel-2); font-style: italic; }
table.data td.gain { color: var(--good); font-weight: 600; }
.scroll { overflow: auto; max-height: 62vh; border: 1px solid var(--line); border-radius: 8px; }

.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.stat .k { font-size: 11.5px; color: var(--ink-2); }
.stat .v { font: 700 20px/1.25 var(--mono); }
.stat .v.small { font-size: 14px; font-weight: 600; }

.note { border-left: 3px solid var(--line-2); padding: 2px 0 2px 10px; color: var(--ink-2); font-size: 13px; margin: 8px 0; }
.note.warn { border-color: var(--warn); color: var(--ink); }
.note.bad { border-color: var(--bad); color: var(--ink); }
.note.ok { border-color: var(--good); }

.bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 10px 0; }
.bar > i { display: block; height: 100%; width: 35%; background: var(--accent); animation: slide 1.3s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

.pill { font: 11px var(--mono); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; color: var(--ink-2); }
.pill.p4 { color: var(--purple); border-color: var(--purple); }
.pill.a { color: var(--good); border-color: var(--good); }

ul.plain { margin: 6px 0; padding-left: 20px; }
ul.plain li { margin: 5px 0; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.small { font-size: 12.5px; }
.err { color: var(--bad); font-weight: 600; }

.tech { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 8px; background: var(--panel-2); }
.tech h3 { margin: 0 0 4px; font-size: 14px; }
.tech p { margin: 3px 0; font-size: 13px; color: var(--ink-2); }
.tech p b { color: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .brand .engine { display: none; }
  main { padding: 14px 16px 60px; }
  .card { padding: 13px; }
  .stat .v { font-size: 17px; }
}

/* Focused route-search interface */
:root { --accent:#3164dc; --accent-soft:#edf3ff; --radius:16px; }
header.top {padding:18px 24px; position:static;}
.brand {max-width:1000px;}.brand h1 {font-size:19px;} .brand .ver {margin-left:auto;}
main {max-width:1000px;padding:32px 24px 64px;}
.intro {padding:8px 4px 22px;} .eyebrow {color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.08em;}
.intro h2 {font-size:30px;line-height:1.35;letter-spacing:-1px;margin:12px 0;}.intro p {color:var(--ink-2);margin:0;}
.steps {display:flex;list-style:none;padding:0;margin:24px 0 0;gap:24px;counter-reset:step;flex-wrap:wrap;}
.steps li {font-size:13px;color:var(--ink-2);counter-increment:step;display:flex;align-items:center;gap:8px;}
.steps li:before {content:counter(step);background:var(--accent-soft);color:var(--accent);width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-weight:700;}
.card {padding:24px;margin-bottom:18px;}.card > h2 {font-size:18px;margin-bottom:8px;}.card > h2 .num {font-size:12px;border-radius:6px;padding:4px 8px;}
.card .hint {line-height:1.7;margin-bottom:14px;}
.drop {padding:28px;display:flex;flex-direction:column;align-items:center;gap:8px;border-color:var(--accent);}
.drop strong {font-size:17px;color:var(--ink);}.drop > span {font-size:13px;}.drop .file-icon {font-size:28px;line-height:1.2;color:var(--accent);}
.drop input {max-width:100%;margin-top:6px;} input::file-selector-button {background:var(--accent);color:white;border:0;border-radius:8px;padding:10px 16px;margin-right:10px;cursor:pointer;}
label.field {font-size:13px;font-weight:600;margin-bottom:6px;} input[type=number],input[type=text],select {padding:12px;min-height:45px;}
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
.goalgrid {grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px;}.goal {padding:12px;min-height:48px;}.goal .pz {font-family:var(--sans);}
.selection {background:var(--accent-soft);color:var(--accent);padding:12px 14px;border-radius:10px;font-weight:600;font-size:14px;}
.chip {padding:9px 15px;}.search-limits {display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0;}.search-limits .hint {display:block;margin-top:6px;font-size:12px;}
.btn {background:var(--accent);border-color:var(--accent);color:white;}.btn.wide {padding:15px;font-size:16px;}.btn.ghost {color:var(--ink);}
#stop {width:100%;}#resultCard {scroll-margin-top:20px;}.summary .stat:first-child {background:var(--accent-soft);border-color:var(--accent);}.summary .stat:first-child .v {color:var(--accent);font-size:27px;}
footer {text-align:center;max-width:1000px;margin:0 auto 24px;padding:0 24px;color:var(--ink-2);font-size:12px;}
[hidden] {display:none!important;} @media(max-width:600px) {main {padding:22px 14px 40px;}.card {padding:18px;}.intro h2 {font-size:25px;}.steps {gap:10px 16px;}.search-limits {grid-template-columns:1fr;gap:12px;}.brand .ver {margin-left:0;}.goalgrid {grid-template-columns:1fr 1fr;}.goal {flex-wrap:wrap;}.goal .pz {margin-left:22px;font-size:10px;}}
@media(prefers-reduced-motion:reduce) {* {scroll-behavior:auto!important;}.bar>i {animation:none;width:100%;}}

/* v1.3: restrained teal, explicit light/dark design tokens */
:root, :root[data-theme="light"] {
 color-scheme:light; --bg:#f3f6f8; --panel:#fff; --panel-2:#f7f9fb; --line:#e2e9ef; --line-2:#c8d5df;
 --ink:#172c40; --ink-2:#53697c; --ink-3:#687f91; --accent:#087e83; --accent-soft:#e8f6f4;
 --good:#137c59; --warn:#916519; --bad:#bc3850; --purple:#7650af; --button:#087e83;
 --shadow:0 8px 28px rgba(32,63,87,.045); --header:rgba(255,255,255,.94); --glow:rgba(72,180,174,.1);
}
:root[data-theme="dark"] {
 color-scheme:dark; --bg:#0e1722; --panel:#172330; --panel-2:#1d2c3b; --line:#2b3d4d; --line-2:#40576c;
 --ink:#e9f1f8; --ink-2:#aec1d1; --ink-3:#8ea6ba; --accent:#63d5ce; --accent-soft:#193c40;
 --good:#7bddb0; --warn:#efc076; --bad:#ff9aab; --purple:#c9b1ff; --button:#208b87;
 --shadow:0 8px 28px rgba(0,0,0,.12); --header:rgba(23,35,48,.95); --glow:rgba(55,157,154,.12);
}
body {background:radial-gradient(ellipse at 82% 0,var(--glow),transparent 40%),var(--bg);}
header.top {background:var(--header);padding:17px 28px;border-bottom:1px solid var(--line);}
.brand {align-items:center;gap:12px;max-width:1040px;}.brand h1 {font-size:17px;font-weight:750;letter-spacing:-.5px;}
.brand-mark {width:40px;height:40px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--line);border-radius:12px;flex-shrink:0;}.brand-mark svg {width:25px;height:25px;}
.brand-caption {display:block;font-size:11px;color:var(--ink-3);margin-top:1px;}.brand .ver {font:11px var(--sans);margin-left:auto;color:var(--ink-3);}
.theme-switch {display:flex;gap:3px;background:var(--panel-2);border:1px solid var(--line);padding:4px;border-radius:11px;margin-left:10px;}
.theme-switch button {appearance:none;border:1px solid transparent;background:transparent;color:var(--ink-2);border-radius:7px;padding:6px 10px;font:600 12px var(--sans);cursor:pointer;}
.theme-switch button[aria-pressed="true"] {background:var(--panel);border-color:var(--line);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.06);}
main {max-width:1040px;padding-top:38px;}.intro {padding:10px 4px 25px;position:relative;}.intro .eyebrow {display:inline-flex;align-items:center;gap:7px;letter-spacing:0;font-size:11px;padding:6px 10px;border-radius:20px;background:var(--accent-soft);}
.eyebrow i {width:6px;height:6px;background:var(--accent);border-radius:50%;}.intro h2 {font-size:38px;letter-spacing:-1.7px;font-weight:750;line-height:1.28;margin:18px 0 14px;}.intro h2 span {color:var(--accent);}.intro p {font-size:14px;}
.steps {padding:15px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);gap:26px;margin-top:25px;box-shadow:var(--shadow);}.steps li {font-size:12px;}.steps li:before {width:23px;height:23px;font-size:11px;}
.engine-note {font-size:12px;margin:0 4px 18px;color:var(--ink-3);border:0;padding:0;}
.card {border-radius:18px;border-color:var(--line);box-shadow:var(--shadow);padding:26px;}.card>h2 {font-size:17px;letter-spacing:-.4px;gap:10px;}.card>h2 .num {color:var(--accent);background:var(--accent-soft);padding:4px 7px;font:600 11px var(--mono);}
.drop {border:1px dashed var(--line-2);background:linear-gradient(135deg,var(--panel-2),var(--panel));padding:30px 20px;border-radius:13px;}.drop.over {border-color:var(--accent);background:var(--accent-soft);}.drop .file-icon {width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:var(--panel);display:grid;place-items:center;font-size:25px;margin-bottom:2px;}.drop strong {font-size:16px;}
input::file-selector-button {background:var(--button);font-weight:600;}.btn {background:var(--button);border-color:var(--button);color:#fff;box-shadow:0 3px 10px rgba(10,96,100,.1);}.btn:hover:not(:disabled) {filter:brightness(1.08);}.btn.ghost {background:var(--panel);border-color:var(--line-2);color:var(--ink);box-shadow:none;}.btn.wide {border-radius:11px;font-size:15px;}
.chip {background:var(--panel);border-color:var(--line);font-size:12px;padding:8px 13px;}.chip:hover {border-color:var(--accent);}.goal {background:var(--panel-2);border-radius:10px;}.goal.sel {border-color:var(--accent);background:var(--accent-soft);}.selection {font-size:13px;line-height:1.7;}
input[type=text],input[type=number],select {background:var(--panel-2);border-color:var(--line-2);border-radius:9px;}.summary {gap:12px;}.stat {border-radius:11px;padding:14px;}.stat .k {margin-bottom:5px;}.stat .v {font-size:23px;}.summary .stat:first-child .v {font-size:30px;}
details.more {border-top:1px solid var(--line);padding-top:14px;margin-top:17px;}details.more>summary {font-size:12px;}.scroll {border-radius:11px;}.note.ok {color:var(--ink-2);}.note.warn,.note.bad {color:var(--ink);}
footer {font-size:11px;line-height:1.8;}
@media(max-width:620px) {header.top {padding:14px 16px;}.brand {gap:9px;}.brand h1 {font-size:14px;}.brand-mark {width:34px;height:34px;}.brand .ver {display:none;}.theme-switch {margin-left:auto;}.theme-switch button {padding:6px 8px;font-size:11px;}.brand-caption {font-size:10px;}main {padding-top:24px;}.intro h2 {font-size:31px;letter-spacing:-1px;}.steps {gap:12px 16px;padding:13px;}.steps li {font-size:11px;}.card {padding:20px;}.intro p {font-size:13px;}}
@media(max-width:380px) {.brand-caption {display:none;}.brand h1 {font-size:12px;}.theme-switch button {padding:6px;}.intro h2 {font-size:28px;}.goalgrid {grid-template-columns:1fr;}}

/* Compact import; preserve the surrounding layout during role changes. */
.save-card {padding:20px 24px;}.save-card .hint {margin-bottom:10px;}
.save-card .drop {padding:16px 20px;gap:5px;display:grid;grid-template-columns:36px 1fr auto;text-align:left;align-items:center;}
.save-card .drop .file-icon {grid-column:1;grid-row:1 / 3;width:34px;height:34px;font-size:22px;margin:0;}
.save-card .drop strong {grid-column:2;grid-row:1;font-size:14px;}.save-card .drop>span:not(.file-icon) {grid-column:2;grid-row:2;font-size:11px;}
.save-card .drop input {grid-column:3;grid-row:1 / 3;margin:0;max-width:265px;}
.save-card details.more {margin-top:12px;padding-top:10px;}
[aria-busy="true"] {cursor:progress;}[aria-busy="true"] .chips,[aria-busy="true"] .goalgrid {opacity:.55;}
@media(max-width:720px) {.save-card .drop {grid-template-columns:34px 1fr;}.save-card .drop input {grid-column:2;grid-row:3;max-width:100%;margin-top:6px;}}
@media(max-width:420px) {.save-card {padding:18px;}.save-card .drop {padding:14px;}.save-card .drop strong {font-size:13px;}}

.role-fields {display:grid;grid-template-columns:minmax(0,1fr) 150px 100px;gap:14px;align-items:end;margin-top:14px;}.role-fields>div {min-width:0;}.role-fields select {text-overflow:ellipsis;}
.duration-buttons {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}.duration-buttons .chip {flex:1;white-space:nowrap;padding:9px 10px;}.custom-duration {display:flex;align-items:center;gap:9px;}.custom-duration input {max-width:150px;}.custom-duration span {font-size:12px;color:var(--ink-2);}
.recommendation {background:var(--accent-soft);border-radius:10px;padding:11px 14px;color:var(--ink-2);font-size:12px;line-height:1.7;margin:14px 0 8px;}.recommendation b {color:var(--accent);}
@media(max-width:620px) {.role-fields {grid-template-columns:minmax(0,1fr) 105px 60px;gap:9px;}.role-fields .field {font-size:11px;white-space:nowrap;}.role-fields select,.role-fields input {padding:10px 7px;font-size:12px;}.duration-buttons .chip {padding:9px 7px;}}

/* 품급 색: 4품 보라 · 3품 파랑 · 2품 초록 · 1품 흰색 */
:root, :root[data-theme="light"] { --q4:#8b3fd9; --q3:#2563eb; --q2:#15803d; --q1:#ffffff; --q1-bg:#6b7280; }
:root[data-theme="dark"] { --q4:#c08cff; --q3:#6aa5ff; --q2:#5fd58a; --q1:#f4f4f5; --q1-bg:transparent; }
.tal { font-weight: 600; }
.tal.q4 { color: var(--q4); }
.tal.q3 { color: var(--q3); }
.tal.q2 { color: var(--q2); }
.tal.q1 { color: var(--q1); background: var(--q1-bg); border-radius: 4px; padding: 0 4px; }
.selection .tal { font-weight: 700; }
.goal-group { font-size: 13px; font-weight: 700; margin: 16px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.goal-group .hint { font-weight: 400; margin: 0; }