@font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: block; src: url('/static/fonts/PretendardVariable.woff2') format('woff2'); }

:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --control-height: 32px; --control-gap: var(--space-2); --panel-gap: var(--space-4); --panel-padding: var(--space-4); --panel-radius: 4px;
  --brand-50: #f7f2ee; --brand-100: #eaded4; --brand-200: #d6bdab; --brand-300: #bd9478;
  --brand-600: #854321; --brand-700: #6d351c; --brand-800: #532a19;
  --line: #d0d5dd; --line-soft: #e4e7ec; --head: #f2f4f7; --hover: #f7f9fc;
  --slate-50: #f8fafc; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 14px; }
body { margin: 0; min-width: 0; background: #f4f5f7; color: #1f2937; font-family: 'Pretendard Variable', Pretendard, 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 14px; line-height: 1.5; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: ui-monospace, Consolas, 'D2Coding', monospace; font-size: 12px; }
td, time, .num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 30; background: var(--brand-600); color: #fff; }
.topbar .in { max-width: 1400px; margin: 0 auto; padding: 0 10.5px; display: flex; align-items: center; height: 35px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: 20px; white-space: nowrap; color: #fff; }
.brand:hover { text-decoration: none; }
.brand img { height: 18px; display: block; }
.brand span { padding-left: 12px; border-left: 1px solid #ffffff4d; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
.menu { display: flex; }
.menu a { display: flex; align-items: center; height: 35px; padding: 0 10.5px; color: var(--brand-100); white-space: nowrap; font-size: 12.25px; }
.menu a:hover { background: var(--brand-700); color: #fff; text-decoration: none; }
.menu a.on { background: var(--brand-800); color: #fff; font-weight: 600; }
.menu .badge { margin-left: 5px; min-width: 17.5px; padding: 0 5px; border-radius: 9999px; background: #d92d20; color: #fff; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; }
.me { margin-left: auto; position: relative; }
.me summary { list-style: none; display: flex; align-items: center; gap: 3.5px; height: 35px; max-width: 160px; padding: 0 7px; color: var(--brand-100); font-size: 12.25px; cursor: pointer; white-space: nowrap; }
.me summary::-webkit-details-marker { display: none; }
.me summary:hover, .me[open] summary { color: #fff; }
.me summary .who { overflow: hidden; text-overflow: ellipsis; }
.me .drop { position: absolute; right: 0; top: 35px; z-index: 50; width: 160px; padding: 3.5px 0; background: #fff; border: 1px solid var(--slate-400); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18); color: var(--slate-900); }
.me .drop .role { padding: 7px 10.5px; font-size: 12px; color: var(--slate-500); border-bottom: 1px solid var(--line-soft); }
.me .drop form { margin: 0; }
.me .drop > a, .me .drop > form > button { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 32px; padding: 6px 10.5px; border: 0; border-radius: 0; background: transparent; color: var(--slate-900); text-align: left; font-size: 13px; line-height: 20px; font-weight: 400; }
.me .drop > a:hover, .me .drop > form > button:hover { background: var(--head); text-decoration: none; }
.me .drop > a:focus-visible, .me .drop > form > button:focus-visible { outline: 2px solid var(--brand-300); outline-offset: -2px; background: var(--head); }
.me .drop > a[aria-current="page"] { background: var(--brand-50); font-weight: 600; }
.notice-bar { background: #fbeaea; color: #a4262c; border-bottom: 1px solid #eab8b8; font-size: 12px; font-weight: 600; text-align: center; padding: 3.5px 10.5px; }

.page { max-width: 1400px; margin: 0 auto; padding: 14px 14px 70px; }
.head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 40px; margin-bottom: 16px; }
.head > div:first-child:not(.actions):not(.permission-actions) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.head h1 { margin: 0; font-size: 18px; font-weight: 700; line-height: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.head .sub { font-size: 13px; color: var(--slate-500); }
.head form { margin: 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--panel-gap); align-items: start; }
.cols.half { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.box { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--panel-radius); margin-bottom: var(--panel-gap); }
.box > h2 { margin: 0; min-height: 40px; padding: var(--space-2) var(--panel-padding); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background: var(--head); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--slate-700); }
.box > h2 .count { min-width: 22px; padding: 0 5.25px; border-radius: 9999px; background: var(--line-soft); color: var(--slate-700); font-size: 12px; font-weight: 600; line-height: 17.5px; text-align: center; }
.box > .body { padding: var(--panel-padding); }
.box > .empty, .box.empty, td.empty { padding: var(--space-6) var(--panel-padding); text-align: center; color: var(--slate-500); font-size: 13px; line-height: 1.6; }
.box > .foot { padding: var(--space-3) var(--panel-padding); border-top: 1px solid var(--line); background: #f7f8fa; font-size: 12px; color: var(--slate-600); }
.body > :first-child, .foot > :first-child { margin-top: 0; }
.body > :last-child, .foot > :last-child { margin-bottom: 0; }
.body > p, .foot > p { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.body > p:first-child, .foot > p:first-child { margin-top: 0; }
.body > p:last-child, .foot > p:last-child { margin-bottom: 0; }
.body > .box:last-child { margin-bottom: 0; }
.body > :where(form, details, .table-wrap) + :where(form, details, .table-wrap) { margin-top: var(--space-3); }
.body h3 { margin: var(--space-4) 0 var(--space-2); font-size: 14px; line-height: 1.5; }
.body > h3:first-child { margin-top: 0; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { height: 32px; padding: var(--space-1) var(--panel-padding); text-align: left; white-space: nowrap; background: var(--head); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--slate-600); }
td { height: 32px; padding: 3px var(--panel-padding); vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
tr:last-child td { border-bottom: 0; }
tr.link-row:hover td { background: var(--hover); }
td.num, th.num { text-align: right; }
.nowrap { white-space: nowrap; }
td.act { text-align: right; white-space: nowrap; }
td.act > * + * { margin-left: 3.5px; }
.dim { color: var(--slate-500); }
.small { font-size: 12px; }
.table-wrap { overflow-x: auto; }

dl.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); margin: 0; font-size: 13px; }
dl.kv dt, dl.kv dd { margin: 0; min-height: 36px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
dl.kv dt { color: var(--slate-600); background: #fafbfc; border-right: 1px solid var(--line-soft); }
dl.kv dd { overflow-wrap: anywhere; }
dl.kv > :nth-last-child(-n+2) { border-bottom: 0; }

.tag { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-width: 56px; padding: 1px 5.25px; border: 1px solid; border-radius: 3px; font-size: 12px; font-weight: 500; line-height: 17.5px; white-space: nowrap; }
.t-mute { background: #eef0f3; color: #344054; border-color: #d0d5dd; }
.t-info { background: #e8f0fb; color: #1d4f91; border-color: #b7cdea; }
.t-ok { background: #e7f4ec; color: #1e6b3a; border-color: #b5dcc2; }
.t-bad { background: #fbeaea; color: #a4262c; border-color: #eab8b8; }
.t-warn { background: #fdf3e1; color: #8a5300; border-color: #ecd09a; }
.t-wait { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }

.callout { border: 1px solid; border-radius: var(--panel-radius); padding: var(--space-3) var(--panel-padding); margin-bottom: var(--panel-gap); font-size: 13px; }
.callout.ok { background: #e7f4ec; color: #1e6b3a; border-color: #b5dcc2; }
.callout.warn { background: #fdf3e1; color: #8a5300; border-color: #ecd09a; }
.callout.bad { background: #fdf2f2; color: #991b1b; border-color: #fca5a5; }
.callout.info { background: #e8f0fb; color: #1d4f91; border-color: #b7cdea; }
.callout.mute { background: #eef0f3; color: #344054; border-color: #d0d5dd; }
.callout.wait { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.callout a { font-weight: 600; }
.error { background: #fdf2f2; color: #991b1b; border: 1px solid #fca5a5; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; white-space: pre-line; }

.steps { display: flex; margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--line); background: #fff; }
.steps li { flex: 1; height: 32px; display: flex; align-items: center; justify-content: center; gap: 3.5px; color: var(--slate-400); font-size: 13px; border-right: 1px solid var(--line-soft); }
.steps li:last-child { border-right: 0; }
.steps li.done { color: #1e6b3a; }
.steps li.done::before { content: "✓"; }
.steps li.now { color: #fff; background: var(--brand-600); font-weight: 600; }
.steps li.stop { color: #8a5300; background: #fdf3e1; font-weight: 600; }

.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tile { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 8px 12px; border-radius: var(--panel-radius); background: #fff; border: 1px solid var(--line); color: #1f2937; }
.tile:hover { background: var(--hover); text-decoration: none; }
.tile .l { order: 1; font-size: 13px; color: var(--slate-600); }
.tile .n { order: 2; font-size: 22px; font-weight: 700; line-height: 24.5px; color: var(--slate-900); font-variant-numeric: tabular-nums; }
.tile.hot { border-color: #fca5a5; box-shadow: inset 3px 0 0 #d92d20; }
.tile.hot .l { color: #b91c1c; font-weight: 600; }
.tile.hot .n { color: #b91c1c; }

.btn, button { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; gap: 6px; height: var(--control-height); margin: 0; padding: 0 10px; border: 1px solid var(--brand-600); border-radius: var(--panel-radius); background: var(--brand-600); color: #fff; font: inherit; font-size: 13px; line-height: 1.25; font-weight: 500; cursor: pointer; white-space: nowrap; user-select: none; }
.btn:hover, button:hover { background: var(--brand-700); border-color: var(--brand-700); text-decoration: none; }
.btn.line, button.line, .btn.secondary, button.secondary { background: #fff; color: var(--slate-800); border-color: var(--line); }
.btn.line:hover, button.line:hover, .btn.secondary:hover, button.secondary:hover { background: #f8fafc; }
.btn.danger, button.danger { background: #fff; color: #b91c1c; border-color: #fca5a5; }
.btn.danger:hover, button.danger:hover { background: #fef2f2; }
.btn.ok, button.ok { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn.sm, button.sm { height: 28px; padding: 0 7px; }
.btn.xl, button.xl { height: 35px; font-size: 14px; }
.btn.link, button.link { height: auto; padding: 0; border: 0; background: none; color: var(--slate-400); font-size: 12px; text-decoration: underline; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 1px; }

form.inline { display: inline-flex; align-items: center; vertical-align: middle; gap: var(--control-gap); margin: 0; }
.form { display: grid; gap: var(--space-4); min-width: 0; width: 100%; }
.form > .field, .form .row2 > .field { margin-bottom: 0; }
.form > .actions { padding-top: var(--space-1); }
.form > button { justify-self: start; }
.field { margin-bottom: var(--space-4); }
.field > label, .label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--slate-700); }
.field .hint { margin: var(--space-1) 0 0; font-size: 12px; line-height: 1.5; color: var(--slate-500); }
.field .req { margin-left: 1.75px; color: #dc2626; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); align-items: start; }
input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=date], input[type=datetime-local], select, textarea {
  display: block; width: 100%; min-width: 0; height: var(--control-height); margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--panel-radius);
  background: #fff; color: var(--slate-900); font: inherit; font-size: 13px; line-height: normal;
}
input[type=search] { appearance: none; }
input::placeholder, textarea::placeholder { color: var(--slate-400); }
select { padding-right: 21px; }
textarea { height: auto; min-height: 80px; padding: 8px; line-height: 1.5; resize: vertical; }
textarea.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 1px var(--brand-600); }
input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: var(--brand-600); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.checks label { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 13px; }
.checks label:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--control-gap); }
.actions > form { display: flex; align-items: center; gap: var(--control-gap); margin: 0; }
.cell-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-1) 0; }
.cell-actions > form { margin: 0; }
.cell-actions > details { align-self: stretch; }
.inline-form { display: flex; align-items: center; gap: var(--control-gap); margin: 0; }
.inline-form input:not([type=checkbox]) { flex: 1; min-width: 0; }
.inline-form.compact { --control-height: 28px; display: inline-flex; vertical-align: middle; }
.inline-form.compact select { width: auto; }
.inline-form.compact button { height: var(--control-height); }

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--control-gap); margin-bottom: var(--panel-gap); padding: var(--panel-padding); border: 1px solid var(--line); background: #fff; }

.choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--panel-gap); }
.choose h3 { display: flex; align-items: center; height: 21px; margin: 0 0 5.25px; font-size: 14px; font-weight: 600; color: #1e293b; }
.choose .group { background: #fff; border: 1px solid var(--line); }
.choose a.opt { display: block; padding: 8px 12px; color: #1f2937; border-bottom: 1px solid var(--line-soft); }
.choose a.opt:last-child { border-bottom: 0; }
.choose a.opt:hover { background: var(--hover); text-decoration: none; }
.choose a.opt strong { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 13px; font-weight: 600; color: var(--slate-900); }
.choose a.opt .desc { display: block; margin-top: 4px; font-size: 12px; color: var(--slate-500); }

.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.timeline li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.timeline li:last-child { border-bottom: 0; }
.timeline.stack li { grid-template-columns: minmax(0, 1fr); gap: 0; }
.timeline .when { color: var(--slate-500); font-size: 12px; font-variant-numeric: tabular-nums; }
.timeline .who { color: var(--slate-500); font-size: 12px; }

.target-form { --control-height: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--control-gap); margin-top: 6px; }
.target-form input[type=text] { flex: 1; min-width: min(200px, 100%); }

pre { position: relative; margin: 3.5px 0 10.5px; padding: 8px 12px; background: #f8fafc; border: 1px solid var(--line); overflow-x: auto; font: 12px/1.6 ui-monospace, Consolas, monospace; }
pre.copyable { padding-right: 64px; }
pre.copyable .copy { position: absolute; top: 3.5px; right: 3.5px; height: 24px; padding: 0 7px; font-size: 12px; }
ol.check { margin: 0; padding-left: 17.5px; } ol.check li { margin: 3.5px 0; }
details summary { cursor: pointer; }
main :where(.body, .foot, td, .cell-actions) > details > summary { min-height: var(--control-height); padding: 6px 0; line-height: 20px; }
main details > form { display: grid; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); min-width: 0; }
main details > form > button { justify-self: start; }
main details > form > p { margin: 0; }
main details form label:not(:has(input[type=checkbox])) { display: grid; gap: var(--space-1); font-size: 13px; color: var(--slate-700); }
details.box > summary { margin: 0; padding: var(--space-3) var(--panel-padding); min-height: 40px; background: var(--head); color: var(--slate-700); font-size: 13px; font-weight: 600; }
details.box[open] > summary { border-bottom: 1px solid var(--line); }
.box details summary, .login details summary { color: var(--brand-600); font-size: 13px; }

body:has(.login) { min-width: 0; }
.login { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 12vh 14px 0; background: #f4f5f7; }
.login .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 21px; }
.login .logo img { height: 28px; }
.login .logo span { padding-left: 12px; border-left: 1px solid #cbd5e1; font-size: 17px; font-weight: 600; letter-spacing: 0.02em; color: #131b39; white-space: nowrap; }
.login .box { width: 100%; max-width: 336px; margin: 0; }
.login .box > h1 { display: flex; align-items: center; margin: 0; border-bottom: 1px solid var(--line); background: var(--head); font-weight: 600; height: 35px; padding: 0 14px; font-size: 15px; color: #1f2937; }
.login .box > .body { padding: 14px; }
.login .stack > * + * { margin-top: 10.5px; }
.login .token-open summary { list-style: none; text-align: right; color: var(--slate-400); font-size: 12px; text-decoration: underline; cursor: pointer; }
.login .token-open summary::-webkit-details-marker { display: none; }
.login .token-open[open] summary { display: none; }
.login .token, .login .dev { padding-top: 10.5px; border-top: 1px solid var(--line); }
.login .dev { border-top-style: dashed; }
.login .token .label, .login .dev .label { margin-bottom: 7px; color: var(--slate-500); font-weight: 400; }


.section-nav { display:flex; gap:4px; overflow-x:auto; margin:-3px 0 18px; border-bottom:1px solid var(--line); }
.section-nav a { padding:10px 16px; white-space:nowrap; color:var(--slate-600); border-bottom:2px solid transparent; }
.section-nav a.on { border-color:var(--brand-600); color:var(--brand-600); font-weight:700; }
.section-nav a:hover { background:var(--brand-50); text-decoration:none; }
.compact-note { margin:10px 0 16px; color:var(--slate-500); font-size:12px; }
.compact-note p { margin:8px 0; }
@media(max-width:900px) { .cols,.cols.half { grid-template-columns:minmax(0,1fr); } .table-wrap { overflow-x:auto; } .tiles { flex-wrap:wrap; } }
@media(max-width:600px) { .brand { margin-right:8px; } .brand span { display:none; } .menu a { padding:0 9px; font-size:12px; } .me summary { max-width:100px; } .page { padding:12px 10px 40px; } .section-nav a { padding:9px 13px; } .row2 { grid-template-columns:minmax(0,1fr); } .head .sub { font-size:12px; } }
@media(max-width:600px) { .choose { grid-template-columns: minmax(0,1fr); gap: 12px; } .tiles { grid-template-columns: repeat(3,minmax(0,1fr)); } }

.cols > *, .choose > * { min-width:0; }
.cols > .box, .cols > div > .box:last-child { margin-bottom:0; }
.cols { margin-bottom:var(--panel-gap); }
.box > h2 { border-radius:var(--panel-radius) var(--panel-radius) 0 0; flex-wrap:wrap; }
.box > :last-child { border-radius:0 0 var(--panel-radius) var(--panel-radius); }
.head .sub { overflow-wrap:anywhere; }
a:focus-visible, summary:focus-visible { outline:2px solid var(--brand-300); outline-offset:2px; border-radius:2px; }
.table-wrap { max-width:100%; }
.request-table { min-width:960px; }
.request-table td { white-space:nowrap; }
.choose .group { border-radius:var(--panel-radius); overflow:hidden; }
.choose a.opt strong { flex-wrap:wrap; }
.choose a.opt strong .tag { margin-left:auto; }
.timeline li > span { min-width:0; overflow-wrap:anywhere; }
@media(max-width:760px) {
  .table-wrap > :where(table:not(.request-table):not(.overview-table):has(th:nth-child(4))) { min-width:640px; }
  .local-switch { flex-wrap:wrap; }
  .local-switch a { min-height:32px; display:inline-flex; align-items:center; }
}