@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
:root{
  --g900:#191F28; --g800:#333D4B; --g700:#4E5968; --g600:#6B7684; --g500:#8B95A1;
  --g400:#B0B8C1; --g300:#D1D6DB; --g200:#E5E8EB; --g100:#F2F4F6; --g50:#F9FAFB;
  --brand:#4526E0; --brand-d:#3618C4; --brand-50:#F4F1FE; --brand-100:#E4DEFC;
  --ok:#0E8F57; --ok-50:#EAF7F0; --warn:#C98A16; --warn-50:#FFF6E6; --bad:#E24C58; --bad-50:#FDECEE;
  /* 옛 이름들 — 남은 화면이 깨지지 않게 이어 둔다 */
  --ink:#191F28; --ink2:#4E5968; --mute:#8B95A1; --line:#E5E8EB; --line2:#F2F4F6;
  --soft:#F9FAFB; --blue:#4526E0; --sky:#F4F1FE; --okl:#EAF7F0; --badl:#FDECEE; --warnl:#FFF6E6; --bg:#F9FAFB;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip;max-width:100vw}
body{font-family:Pretendard,system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;color:var(--g900);
  background:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-.015em;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:48px;padding:0 22px;
  border-radius:12px;border:1px solid transparent;background:var(--g100);color:var(--g800);
  font-size:15.5px;font-weight:600;letter-spacing:-.02em;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--g200)}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-d)}
.btn-flat{background:#fff;border-color:var(--g200);color:var(--g700)}
.btn-flat:hover{background:var(--g50);border-color:var(--g300);color:var(--g900)}
.btn-sm{height:38px;padding:0 14px;font-size:13.5px;border-radius:10px}
.btn-lg{height:56px;padding:0 30px;font-size:16.5px;border-radius:13px}
.btn:disabled{background:var(--g200);color:var(--g400);cursor:default;transform:none}
.btn-p:disabled{background:var(--g300);color:#fff}

/* ── 입력 ── */
.f{width:100%;height:50px;padding:0 15px;border:1px solid var(--g200);border-radius:12px;background:#fff;
  font:inherit;font-size:15.5px;color:var(--g900);transition:border-color .15s,box-shadow .15s}
.f::placeholder{color:var(--g400)}
.f:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-50)}
textarea.f{height:auto;padding:14px 15px;line-height:1.75;resize:vertical}
select.f{cursor:pointer;appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238B95A1' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center}
.lb{display:block;font-size:14px;font-weight:600;color:var(--g800);margin-bottom:8px}
.err{color:var(--bad);font-size:14px;font-weight:600;min-height:20px;margin-top:10px}
.muted{color:var(--g500)}
.sp{flex:1}
.row{display:flex;align-items:center;gap:10px}

/* ── 면 ── */
.panel{background:#fff;border:1px solid var(--g200);border-radius:16px;overflow:hidden}
.ph{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--g100)}
.ph h3{font-size:16.5px;font-weight:700;letter-spacing:-.035em}
.pb{padding:22px}
table{width:100%;border-collapse:collapse}
th{font-size:12.5px;color:var(--g500);font-weight:600;text-align:left;padding:12px 22px;background:var(--g50)}
td{padding:15px 22px;border-top:1px solid var(--g100);font-size:14.5px;vertical-align:middle}
tbody tr:hover td{background:var(--g50)}

/* ── 뱃지·칩 ── */
.badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;
  font-size:12.5px;font-weight:600}
.b-ok{background:var(--ok-50);color:var(--ok)}
.b-w{background:var(--warn-50);color:var(--warn)}
.b-b{background:var(--brand-50);color:var(--brand)}
.b-n{background:var(--g100);color:var(--g600)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;height:40px;padding:0 15px;border:1px solid var(--g200);
  border-radius:11px;font-size:14.5px;font-weight:600;cursor:pointer;background:#fff;color:var(--g700);
  user-select:none;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--g300);background:var(--g50)}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}

.empty{padding:60px 22px;text-align:center;color:var(--g500)}
.empty .t{font-size:16px;font-weight:600;color:var(--g700)}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--g900);color:#fff;
  padding:15px 24px;border-radius:13px;font-size:14.5px;font-weight:600;z-index:80;
  box-shadow:0 8px 28px rgba(25,31,40,.28)}