@charset "UTF-8";

/* Archium presentation: rem for shared scale, em for component contents. */
:root {
    --font-family: "Noto Sans KR", sans-serif;
    --font-caption: .75rem;
    --font-body: .875rem;
    --font-heading: 1rem;
    --font-title: 1.125rem;
    --fs: var(--font-body);
    --surface: #fff;
    --canvas: #f8f8f8;
    --surface-hover: #f3f3f3;
    --surface-selected: #ededed;
    --text: #353535;
    --text-muted: #737373;
    --border: #e5e5e5;
    --control-border: #606060;
    --primary: #353535;
    --secondary: #737373;
    --success: #1d7f60;
    --warning: #936000;
    --danger: #b92d32;
    --info: #2768a5;
    --focus: #1473e6;
    --bgc: var(--surface);
    --fc: var(--text);
    --bdc: var(--border);
    --frame: 100%;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --line: .0625rem;
    --outline: .125rem;
    --radius: .25rem;
    --control-height: 2rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-family); font-size: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow: hidden; font-size: var(--fs); line-height: 1.5; color: var(--fc); background: var(--bgc); --cv-vertical: calc(50 * var(--fvh, 1vh) - 50 * var(--vh, 1vh)); }
body.mobile { --cv-vertical: calc(50vh - 50 * var(--vh, 1vh)); }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
a { color: inherit; }
img { display: block; max-inline-size: 100%; }
[hidden] { display: none !important; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: var(--outline) solid var(--focus); outline-offset: .1875rem; }
[act]:not(.popup) { cursor: pointer; }
[act]:disabled { cursor: not-allowed; }
[overflow] { overflow: auto; }
[sticky] { position: sticky; z-index: 10; inset-block-start: 0; background: var(--bgc); }
._test:not(.test), ._dev:not(.dev), ._beta:not(.beta) { display: none !important; }

/* Typography and the existing V2 text contract. */
.text-caption { font-size: var(--font-caption); color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.section-title { font-size: var(--font-heading); font-weight: 500; line-height: 1.5; }
.page-title { font-size: var(--font-title); font-weight: 600; line-height: 1.5; }
.tbox { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-break: keep-all; }
.tbox[line="1"] { -webkit-line-clamp: 1; }
.tbox[line="2"] { -webkit-line-clamp: 2; }
.tbox[line="3"] { -webkit-line-clamp: 3; }
.tbox[line="4"] { -webkit-line-clamp: 4; }
.tbox[line="5"] { -webkit-line-clamp: 5; }
.icon { display: inline-block; inline-size: 1.25em; block-size: 1.25em; flex: 0 0 auto; vertical-align: -.2em; fill: none; stroke: currentColor; }

/* Button sizes remain tied to the root scale; contents follow the label. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-inline-size: 4.5rem; min-block-size: var(--control-height); max-inline-size: 100%;
    padding: .25em 1em; border: var(--outline) solid var(--bdc); border-radius: 2em;
    font-size: var(--fs); font-weight: 500; line-height: 1.4; text-align: center;
    text-decoration: none; white-space: nowrap; background: var(--bgc); color: var(--fc);
    transition: background-color .15s, border-color .15s, color .15s;
    --bgc: var(--surface); --fc: var(--text); --bdc: var(--control-border);
}
.btn:not(:disabled):not([aria-disabled="true"]):hover { --bgc: var(--surface-hover); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; }
.btn-xs { --control-height: 1.5rem; --fs: var(--font-caption); min-inline-size: 3rem; }
.btn-sm, .btn-thin { --control-height: 1.75rem; --fs: var(--font-caption); min-inline-size: 3.5rem; }
.btn-lg { --control-height: 2.5rem; --fs: var(--font-heading); min-inline-size: 5.5rem; }
.btn-xl { --control-height: 3rem; --fs: var(--font-title); min-inline-size: 6rem; }
.btn-primary { --bgc: var(--primary); --bdc: var(--primary); --fc: #fff; }
.btn-secondary { --bgc: var(--secondary); --bdc: var(--secondary); --fc: #fff; }
.btn-success { --bgc: var(--success); --bdc: var(--success); --fc: #fff; }
.btn-warning { --bgc: var(--warning); --bdc: var(--warning); --fc: #fff; }
.btn-danger { --bgc: var(--danger); --bdc: var(--danger); --fc: #fff; }
.btn-info { --bgc: var(--info); --bdc: var(--info); --fc: #fff; }
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-danger, .btn-info):not(:disabled):hover { --bgc: var(--bdc); filter: brightness(.9); }
.btn-outline { --fc: var(--bdc); --bgc: var(--surface); }
.btn.btn-outline:not(:disabled):hover { --bgc: var(--surface-hover); filter: none; }
.btn-default { --bgc: var(--surface); --fc: var(--text); --bdc: var(--control-border); }
.btn-round { border-radius: 2em; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: var(--control-height); block-size: var(--control-height); padding: .375em; border: var(--line) solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-muted); font-size: var(--font-body); text-decoration: none; }
.icon-button:not(:disabled):hover { background: var(--surface-hover); color: var(--text); }
.icon-button:disabled { opacity: .45; }
.button-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Inputs and search. */
.field { display: grid; gap: .375em; min-inline-size: 0; }
.field-label { font-weight: 500; }
.field-hint { font-size: var(--font-caption); color: var(--text-muted); }
.form-control { display: block; inline-size: 100%; min-inline-size: 0; min-block-size: var(--control-height); padding: .3em .75em; border: var(--line) solid var(--bdc); border-radius: var(--radius); background: var(--bgc); color: var(--fc); font-size: var(--fs); line-height: 1.5; --bdc: #cfcfcf; --bgc: var(--surface); --fc: var(--text); }
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
.form-control:disabled { background: var(--surface-hover); color: var(--text-muted); cursor: not-allowed; }
.form-control.error, .form-control[aria-invalid="true"] { --bdc: var(--danger); }
.form-control-sm { --control-height: 1.75rem; --fs: var(--font-caption); }
.form-control-lg { --control-height: 2.5rem; --fs: var(--font-heading); }
.form-control-xl { --control-height: 3rem; --fs: var(--font-title); }
textarea.form-control { min-block-size: 6em; resize: vertical; }
.search-field { display: flex; align-items: center; gap: .5em; min-inline-size: 0; inline-size: 20rem; max-inline-size: 100%; padding-inline: .75em; border: var(--line) solid #d8d8d8; border-radius: var(--radius); background: var(--surface); color: var(--text-muted); }
.search-field > .form-control { flex: 1; min-block-size: calc(var(--control-height) - 2 * var(--line)); padding-inline: 0; border: 0; background: transparent; outline: none; }
.search-field:focus-within { outline: var(--outline) solid var(--focus); outline-offset: .125rem; }

/* Navigation, toolbar and app frame. */
.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); block-size: 100vh; block-size: 100dvh; overflow: hidden; background: var(--canvas); }
.app-toolbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 3.5rem; padding: var(--space-2) var(--space-6); border-block-end: var(--line) solid var(--border); background: var(--surface); }
.app-toolbar-brand { display: flex; align-items: center; gap: .75em; font-weight: 600; text-decoration: none; }
.app-toolbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.sidebar { min-block-size: 0; overflow: auto; padding-block: var(--space-4); border-inline-end: var(--line) solid var(--border); background: var(--surface); }
.nav-group { padding: var(--space-2) var(--space-4) var(--space-4); }
.nav-group + .nav-group { padding-block-start: var(--space-4); border-block-start: var(--line) solid var(--border); }
.nav-group-title { padding: 0 .875em .75em; color: var(--text-muted); font-size: var(--font-caption); font-weight: 400; }
.nav-item { display: flex; align-items: center; gap: .75em; inline-size: 100%; min-block-size: 2.25rem; padding: .5em .875em; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font-size: var(--font-body); text-align: start; text-decoration: none; }
.nav-item:hover { background: var(--surface-hover); }
.nav-item.is-active, .nav-item[aria-current] { background: var(--surface-selected); font-weight: 500; }
.nav-item > .badge { margin-inline-start: auto; }
.workspace { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.tabs { display: flex; gap: var(--space-4); flex: 0 0 auto; overflow-x: auto; padding-inline: var(--space-8); border-block-end: var(--line) solid var(--border); background: var(--surface); }
.tab { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: .5em; min-block-size: 3.5rem; padding: .75em .25em; border: 0; background: transparent; color: var(--text-muted); font-size: var(--font-body); text-decoration: none; }
.tab:hover, .tab.is-active, .tab[aria-current], .tab[aria-selected="true"] { color: var(--text); }
.tab.is-active::after, .tab[aria-current]::after, .tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--outline); background: currentColor; }
.workspace-content { flex: 1; min-block-size: 0; overflow: auto; padding: var(--space-8); scroll-behavior: smooth; }

/* Section, banner and cards. */
.section { display: grid; gap: var(--space-4); }
.section + .section { margin-block-start: var(--space-8); }
.section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-8) 3rem; border-radius: var(--radius); background: var(--surface); }
.banner-body { display: grid; justify-items: start; gap: var(--space-3); flex: 1 1 18rem; }
.banner-title { font-size: var(--font-title); font-weight: 600; line-height: 1.5; }
.banner-description { max-inline-size: 34em; color: var(--text-muted); }
.banner-media { flex: 0 1 24rem; min-inline-size: 0; overflow: hidden; border-radius: var(--radius); }
.banner-media > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-4); }
.card { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.card-body { display: grid; align-content: start; gap: var(--space-2); flex: 1; padding: var(--space-4); }
.card-header { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.card-symbol { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; border: var(--line) solid var(--border); border-radius: var(--radius); background: var(--canvas); }
.card-title { min-inline-size: 0; font-size: var(--font-body); font-weight: 600; overflow-wrap: anywhere; }
.card-meta { display: flex; align-items: center; gap: .375em; margin-inline-start: auto; color: var(--text-muted); }
.card-description { color: var(--text-muted); font-size: var(--font-body); line-height: 1.5; }
.card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: 3.5rem; padding: var(--space-3) var(--space-4); border-block-start: var(--line) solid var(--border); }
.card-actions { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }

/* Status and badges do not imply an application state by themselves. */
.badge { display: inline-flex; align-items: center; justify-content: center; gap: .375em; min-inline-size: 1.5em; min-block-size: 1.5em; padding: .125em .5em; border-radius: 2em; font-size: var(--font-caption); line-height: 1.25; background: var(--surface-selected); color: var(--text); }
.badge-danger { background: var(--danger); color: #fff; }
.status { display: inline-flex; align-items: center; gap: .375em; color: var(--text-muted); font-size: var(--font-body); }
.status-success { color: var(--success); }
.status-warning { color: var(--warning); }
.status-danger { color: var(--danger); }
.status-pill { padding: .25em .75em; border: var(--line) solid currentColor; border-radius: 2em; }

/* Existing V2 checkbox/radio markup; keep native inputs keyboard accessible. */
label.checkbox, label.radio { display: inline-flex; position: relative; align-items: center; gap: .5em; cursor: pointer; }
label.checkbox > input, label.radio > input { position: absolute; inline-size: 1em; block-size: 1em; margin: 0; opacity: 0; }
label.checkbox > span, label.radio > span { display: inline-flex; position: relative; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: 1.25em; block-size: 1.25em; border: var(--line) solid var(--control-border); border-radius: 50%; background: var(--surface); }
label.checkbox.checkbox-square > span, label.radio.radio-square > span { border-radius: .25em; }
label.checkbox > span::before { content: ""; inline-size: .3em; block-size: .55em; margin-block-start: -.15em; border-inline-end: .125em solid transparent; border-block-end: .125em solid transparent; transform: rotate(45deg); }
label.checkbox > input:checked + span { background: var(--primary); border-color: var(--primary); }
label.checkbox > input:checked + span::before { border-color: #fff; }
label.radio > span::before { content: ""; inline-size: .625em; block-size: .625em; border-radius: inherit; }
label.radio > input:checked + span::before { background: var(--primary); }
label.checkbox > input:focus-visible + span, label.radio > input:focus-visible + span { outline: var(--outline) solid var(--focus); outline-offset: .1875rem; }
label.checkbox:has(> input:disabled), label.radio:has(> input:disabled) { opacity: .45; cursor: not-allowed; }

/* Preserve V2 popup, timer and debug hooks. */
.popup .popup-back { background: #000; opacity: .5; }
.popup .popup-body { background: transparent; font-size: var(--fs); color: var(--fc); }
[timer] { color: var(--fc); }
[timer][cond="go"] { --fc: var(--secondary); }
[timer][cond="over"] { --fc: var(--danger); }
[debug] { position: fixed; inset-inline-start: 0; inset-block-end: 2.5rem; z-index: 10000000; max-block-size: 50vh; font-size: .6875rem; color: #fff; }
[debug] > * { inline-size: fit-content; margin-block-end: .3125rem; padding: .125rem .25rem; background: rgb(0 0 0 / .5); animation: slideIn .3s; }
@keyframes slideIn { from { transform: translateX(3rem); } to { transform: translateX(0); } }

@media (max-width: 48rem) {
    .app-shell { grid-template-columns: 12rem minmax(0, 1fr); }
    .app-toolbar { padding-inline: var(--space-4); }
    .workspace-content, .banner { padding: var(--space-4); }
    .tabs { padding-inline: var(--space-4); }
}
@media (max-width: 36rem) {
    .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
    .sidebar { max-block-size: 10rem; border-inline-end: 0; border-block-end: var(--line) solid var(--border); }
    .app-toolbar > .search-field { order: 3; inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, [debug] > * { transition: none; animation: none; }
    .workspace-content { scroll-behavior: auto; }
}