:root {
    --bg: #F5F4F0;
    --sidebar: #EFEDE7;
    --border: #E4E2DB;
    --text: #1D1C1A;
    --muted: #5B5852;
    --dim: #6E6A62;
    --primary: #2B50C8;
    --primary-light: #E9EEFC;
    --warn: #A34A06;
    --warn-light: #FDF1E6;
    --danger: #B42318;
    --danger-light: #FDECEA;
    --success: #267348;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.5 'IBM Plex Sans KR', sans-serif; font-variant-numeric: tabular-nums; }
.app { display: flex; min-height: 100vh; }
a { color: var(--primary); }
h1 { margin: 0 0 20px; font-size: 28px; font-weight: 700; }
h2 { margin: 28px 0 16px; font-size: 20px; font-weight: 600; }
h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
p { margin: 0 0 16px; }
small, .text-dim { color: var(--dim); }
.text-muted { color: var(--muted); }
.sidebar { flex: 0 0 232px; width: 232px; padding: 28px 16px; background: var(--sidebar); border-right: 1px solid var(--border); }
.brand { display: block; padding: 0 12px; font-size: 26px; font-weight: 700; }
.nav { display: grid; gap: 4px; margin: 28px 0; }
.nav-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); text-decoration: none; }
.nav-link:hover { color: var(--text); background: var(--bg); }
.nav-link[aria-current="page"] { background: #FFFFFF; border-color: var(--border); color: var(--text); font-weight: 600; }
.sidebar .btn { width: 100%; }
.content { flex: 1; min-width: 0; padding: 28px 32px; }
.card { margin: 16px 0; padding: 20px 24px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
details.card { padding: 0; }
details.card > summary { padding: 16px 24px; cursor: pointer; font-weight: 600; }
details.card[open] > summary { border-bottom: 1px solid var(--border); }
details.card > form, details.card > p, details.card > ul { margin: 16px 24px 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-primary { background: var(--primary); color: #FFFFFF; }
.btn-secondary { background: #FFFFFF; border-color: #D9D6CE; color: var(--text); }
.btn-danger { background: var(--danger); color: #FFFFFF; }
.btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.btn:hover { filter: brightness(.96); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, .checkbox:focus-visible, .input:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.field { display: block; max-width: 400px; margin: 16px 0; color: var(--muted); font-weight: 500; }
.input { max-width: 100%; height: 44px; padding: 10px 12px; border: 1px solid #D9D6CE; border-radius: 8px; background: #FFFFFF; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; }
.field .input { display: block; width: 100%; margin-top: 6px; }
.input::placeholder { color: var(--dim); }
.input[readonly], .input:disabled { background: #FAF9F6; }
textarea.input { height: auto; min-height: 132px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; margin: 16px 0; color: var(--muted); }
.checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); vertical-align: middle; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; }
.toolbar .check, .toolbar p { margin: 0; }
.table-wrap { margin: 20px 0; overflow: auto; background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: middle; }
.table th { height: 44px; background: #FAF9F6; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.table td { height: 52px; border-top: 1px solid #F0EEE9; }
.table .num { text-align: right; white-space: nowrap; }
.table form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.table p { margin: 8px 0; }
.table .badge { margin: 4px 0; }
.thumb { display: block; border-radius: 6px; object-fit: contain; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-sale { background: #F0EEE9; color: var(--muted); }
.badge-out { background: var(--muted); color: #FFFFFF; }
.badge-info { background: var(--primary-light); color: var(--primary); }
.badge-warn { background: var(--warn-light); color: var(--warn); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.notice { margin: 16px 0; padding: 16px 20px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 8px; background: var(--primary-light); }
.notice-danger { border-left-color: var(--danger); background: var(--danger-light); color: var(--danger); }
.stats { display: flex; flex-wrap: wrap; gap: 16px; }
.stat { display: flex; flex: 1; align-items: baseline; gap: 12px; min-width: 200px; margin: 0; color: var(--muted); text-decoration: none; }
.stat strong { color: var(--primary); font-size: 32px; font-weight: 700; }
.stat-warn strong { color: var(--warn); }
.stat-danger strong { color: var(--danger); }
.app-auth { flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px; }
.app-auth .sidebar { flex: none; width: 400px; max-width: 100%; padding: 0 0 20px; border: 0; background: transparent; }
.app-auth .brand { text-align: center; }
.app-auth .nav { display: flex; justify-content: center; margin: 16px 0 0; }
.auth-card { flex: none; width: 400px; max-width: 100%; margin: 0; padding: 24px; }
.auth-card .btn { width: 100%; margin-bottom: 16px; }
pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .app { display: block; }
    .sidebar { width: auto; padding: 20px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
    .nav { display: flex; flex-wrap: wrap; margin: 16px 0; }
    .sidebar .btn { width: auto; }
    .content { padding: 24px 16px; }
    .card { padding: 20px 16px; }
    details.card { padding: 0; }
    details.card > summary { padding: 16px; }
    details.card > form, details.card > p, details.card > ul { margin: 16px; }
    .toolbar .input { flex: 1; min-width: 0; }
    .table th, .table td { padding: 12px; }
    .app-auth { display: flex; }
    .app-auth .auth-card { padding: 24px; }
}

/* 공통 화면과 상품 목록: 디자인 시안의 색·간격을 공유한다. */
:root {
    --surface: #FFFFFF; --surface-soft: #FAF9F6; --line-soft: #F0EEE9;
    --input-border: #D9D6CE; --profile-bg: #E6E3DC; --thumb-bg: #EEEBE4;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px;
    --radius: 12px; --shadow: 0 8px 28px rgba(29,28,26,.10);
}
[hidden] { display: none !important; }
body { -webkit-font-smoothing: antialiased; }
button, input, select { font-family: inherit; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a { text-underline-offset: 3px; }
h1 { letter-spacing: -.02em; margin-bottom: var(--space-2); }
h2 { font-size: 18px; font-weight: 700; }
small { font-size: 12px; }
.workspace { flex: 1; min-width: 0; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; overflow-y: auto; }
.brand { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 17px; text-decoration: none; padding: 0 var(--space-2) var(--space-5); }
.brand small { display: block; color: var(--dim); font-weight: 400; margin-top: 2px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 8px; color: var(--bg); background: var(--text); font-size: 17px; }
.nav { margin: 0; gap: var(--space-1); }
.nav-link { justify-content: flex-start; font-weight: 500; }
.nav-link .badge { margin-left: auto; }
.nav-link svg { flex-shrink: 0; }
.nav-caption { font-size: 12px; color: var(--dim); padding: var(--space-5) var(--space-3) var(--space-1); }
.nav-symbol { width: 18px; text-align: center; font-size: 20px; }
.sidebar-footer { margin-top: auto; padding-top: var(--space-6); }
.company-profile { display: flex; align-items: center; gap: 10px; padding: var(--space-3); background: var(--profile-bg); border-radius: 10px; font-size: 13px; }
.company-profile small { display: block; margin-top: 2px; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--surface); }
.account-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); font-size: 11px; }
.account-actions a { color: var(--muted); }
.account-actions .btn { padding: 0 var(--space-2); font-size: 11px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-8); height: 56px; background: var(--surface-soft); border-bottom: 1px solid var(--border); font-size: 12px; }
.topbar-divider { padding: 0 var(--space-3); color: var(--input-border); }
.operator-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-8); background: var(--warn-light); color: var(--warn); }
.content { padding: 28px var(--space-8) 96px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-heading p, .page-heading .toolbar { margin: 0; }
.page-heading p { font-size: 13px; margin-top: var(--space-1); }
.btn { font-weight: 600; transition: background .15s, border-color .15s; }
.btn-quiet { color: var(--muted); background: transparent; }
.btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.input-sm { height: 36px; padding: 6px 10px; font-size: 12px; }
.card { padding: var(--space-5); }
.table td { border-color: var(--line-soft); font-size: 13px; overflow-wrap: anywhere; }
.table th { white-space: normal; }
.table tbody tr:hover { background: var(--surface-soft); }
.table td .input { min-width: 0; }
.badge-out { background: var(--danger-light); color: var(--danger); }
.badge-sale { background: var(--line-soft); color: var(--muted); }
.notice { font-size: 13px; }
.toast { border: 1px solid var(--border); border-left: 3px solid var(--primary); }
.field { font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--space-5); }
.form-grid .field { min-width: 0; max-width: none; }
.form-grid .input { width: 100%; }
.filter-panel { padding: var(--space-4); margin: 0 0 var(--space-4); }
.filter-search { display: flex; align-items: center; gap: var(--space-2); }
.filter-search input { flex: 1; min-width: 160px; max-width: 420px; }
.filter-search select { max-width: 200px; }
.filter-options { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.filter-options .text-dim { margin-left: auto; font-size: 11px; }
.list-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.list-toolbar .toolbar { margin: 0; gap: var(--space-3); }
.list-toolbar .check { font-size: 12px; }
.sort-controls { display: flex; gap: var(--space-2); }
.sort-controls select[name="sort_channel"] { max-width: 160px; }
.product-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.product-grid { display: grid; grid-template-columns: 24px 20px minmax(190px,1.8fr) minmax(80px,.65fr) minmax(160px,1.25fr) 90px 70px; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.product-head { border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-soft); color: var(--muted); font-size: 12px; min-height: 48px; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.product-head a, .channel-head a { color: inherit; text-decoration: none; }
.product-head a:hover, .channel-head a:hover { color: var(--primary); }
.sort-divider { padding: 0 6px; color: var(--input-border); }
.head-sub { display: block; font-size: 10px; font-weight: 400; color: var(--dim); }
.product-item { border-top: 1px solid var(--line-soft); }
.product-row { min-height: 112px; }
.product-row:hover { background: var(--surface-soft); }
.product-info { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.product-copy { min-width: 0; }
.product-name { color: var(--text); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.product-name:hover { color: var(--primary); text-decoration: underline; }
.product-meta { margin: var(--space-1) 0; color: var(--dim); font-size: 11px; overflow-wrap: anywhere; }
.thumb { flex: 0 0 48px; width: 48px; height: 48px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px; }
.thumb-placeholder { display: grid; place-items: center; background: var(--thumb-bg); color: var(--dim); font-size: 22px; }
.product-cost { font-weight: 600; font-size: 13px; white-space: nowrap; }
.expand-button { display: grid; place-items: center; width: 24px; height: 32px; border: 0; background: transparent; color: var(--dim); font-size: 18px; cursor: pointer; border-radius: 4px; }
.expand-button:hover, .is-expanded .expand-button { background: var(--primary-light); color: var(--primary); }
.channel-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.channel-button { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--input-border); border-radius: 6px; padding: 4px 7px; background: var(--surface); color: var(--muted); font-size: 11px; text-decoration: none; cursor: pointer; }
.channel-button small { font-size: 10px; }
.channel-button:hover { border-color: var(--primary); color: var(--primary); }
.channel-out { color: var(--danger); background: var(--danger-light); border-color: var(--danger-light); }
.channel-review { border-style: dashed; color: var(--dim); background: var(--surface-soft); }
.pending-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }
.product-status small { display: block; margin: 2px 0; font-size: 10px; }
.product-status .badge { font-size: 11px; }
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; font-size: 11px; color: var(--muted); padding-top: 4px; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > .btn { font-size: 12px; padding-top: 0; }
.dropdown-menu { position: absolute; z-index: 10; top: 100%; right: 0; min-width: 180px; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
.dropdown-menu > button { display: block; width: 100%; border: 0; padding: var(--space-2); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; font-size: 12px; border-radius: 4px; }
.dropdown-menu > button:hover { background: var(--surface-soft); }
.dropdown-menu .check { margin: 0; padding: var(--space-2); font-size: 12px; white-space: nowrap; }
.dropdown-up .dropdown-menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }
.channel-panel { border-top: 1px solid var(--border); background: var(--surface-soft); padding: 0 var(--space-4) 0 60px; }
.channel-grid { display: grid; grid-template-columns: minmax(110px,1fr) minmax(155px,1.5fr) 85px 60px 95px 50px 90px; gap: var(--space-3); align-items: center; padding: var(--space-3); }
.channel-head { color: var(--dim); font-size: 11px; }
.channel-row { min-height: 76px; border-top: 1px solid var(--border); font-size: 12px; }
.channel-row small { display: block; font-size: 10px; margin-top: 3px; }
.channel-row .badge { font-size: 10px; min-height: 20px; margin-top: 4px; }
.channel-row-out { background: var(--surface); border-left: 3px solid var(--danger); }
.channel-row time { font-size: 11px; }
.channel-group:focus { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.price-different strong { color: var(--primary); }
.calculated-price { color: var(--muted); }
.channel-footnote { padding: var(--space-3); margin: 0; font-size: 11px; color: var(--dim); }
.sale-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 4px 0; background: transparent; font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.toggle-track { position: relative; width: 28px; height: 16px; border-radius: 20px; background: var(--input-border); }
.toggle-track::after { content: ''; position: absolute; width: 12px; height: 12px; background: var(--surface); border-radius: 50%; top: 2px; left: 2px; }
.sale-toggle[aria-checked="true"] .toggle-track { background: var(--primary); }
.sale-toggle[aria-checked="true"] .toggle-track::after { left: 14px; }
.is-selected > .product-row { background: var(--primary-light); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); color: var(--dim); font-size: 12px; border-top: 1px solid var(--border); }
.page-number { display: inline-block; padding: 0 var(--space-3); }
.selection-bar { position: fixed; z-index: 20; bottom: var(--space-5); left: 264px; right: var(--space-8); padding: var(--space-4); border: 1px solid var(--primary); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.selection-bar form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.selection-bar strong { color: var(--primary); margin-right: var(--space-2); }
.management-tools { color: var(--muted); font-size: 12px; }
.empty-state { text-align: center; padding: 56px var(--space-6); color: var(--muted); }
.empty-state h2 { margin: var(--space-3) 0 var(--space-2); color: var(--text); }
.empty-icon { font-size: 32px; color: var(--dim); }
.confirm-card { max-width: 640px; margin: var(--space-8) auto; padding: var(--space-8); box-shadow: var(--shadow); }
.confirm-card h1 { margin-top: var(--space-4); font-size: 24px; }
.confirm-count { margin: var(--space-5) 0; padding: var(--space-5); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 8px; font-size: 22px; font-weight: 700; text-align: center; }
.confirm-card .toolbar { justify-content: flex-end; margin-top: var(--space-6); }
.modal { width: 640px; max-width: calc(100% - 32px); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow); color: var(--text); }
.modal::backdrop { background: rgba(29,28,26,.38); }
.modal .confirm-card { margin: 0; padding: 0; border: 0; box-shadow: none; }
.channel-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.channel-settings > summary small { display: block; margin-top: var(--space-1); font-weight: 400; }
.channel-settings > p { padding: 0 var(--space-6); }
.channel-settings form > .form-grid { margin-bottom: var(--space-4); }
.tabs { display: flex; gap: 6px; }
.tabs .btn { border-radius: 20px; font-size: 12px; height: 36px; }
.stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.stat { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); padding: var(--space-5); min-width: 0; }
.stat strong { font-size: 36px; grid-row: 2; }
.stat > span:last-child { grid-row: 2; align-self: end; justify-self: end; }
.dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-4); margin-top: var(--space-4); }
.dashboard-grid .card { margin: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.section-heading h2 { margin: 0; }
.section-heading a { font-size: 12px; }
.activity-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.activity-row p { margin: 2px 0; }
.activity-row small { font-size: 11px; }
.app-auth .sidebar { height: auto; overflow: visible; }
.app-auth .brand { justify-content: center; }
.auth-intro { text-align: center; font-size: 13px; color: var(--muted); margin: 0; }
.app-auth .workspace { flex: none; width: 420px; max-width: 100%; }
.auth-card { width: 100%; padding: var(--space-8); box-shadow: 0 4px 16px rgba(29,28,26,.03); }
.auth-card h1 { font-size: 24px; margin-bottom: var(--space-2); }
.auth-card .btn { margin: var(--space-3) 0; }
.auth-card > a { display: block; text-align: center; font-size: 13px; }
@media (max-width: 1200px) {
    .content { padding-left: var(--space-5); padding-right: var(--space-5); }
    .product-grid { grid-template-columns: 20px 16px minmax(150px,1.4fr) 74px minmax(125px,1fr) 72px 48px; gap: var(--space-2); padding: var(--space-3); }
    .thumb { width: 36px; height: 42px; flex-basis: 36px; }
    .product-info { gap: var(--space-2); }
    .product-name { font-size: 13px; }
    .product-meta { font-size: 10px; }
    .product-detail { padding: 0 8px; font-size: 11px; }
    .channel-panel { padding: 0 var(--space-2) 0 var(--space-3); }
    .channel-grid { grid-template-columns: minmax(88px,1fr) minmax(125px,1.4fr) 72px 46px 78px 36px 74px; gap: var(--space-2); padding: var(--space-3) var(--space-2); }
    .channel-row { font-size: 11px; }
    .channel-head, .channel-row time { font-size: 10px; }
    .channel-row .num { white-space: normal; }
    .channel-head .num { line-height: 1.7; }
    .page-heading { align-items: flex-start; }
    .page-heading .toolbar { gap: var(--space-2); }
    .page-heading .btn { font-size: 12px; padding: 0 var(--space-3); }
    .filter-options .text-dim { margin-left: 0; }
    .selection-bar { left: 252px; right: var(--space-5); }
    .table th, .table td { padding: 10px; font-size: 12px; }
}

@media (max-width: 1000px) {
    .sidebar { flex-basis: 200px; width: 200px; }
    .channel-grid { grid-template-columns: minmax(90px,1fr) minmax(130px,1.5fr) 65px 44px 76px; }
    .channel-grid > :nth-child(6), .channel-grid > :nth-child(7) { display: none; }
    .selection-bar { left: 220px; }
    .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .sidebar { position: static; width: auto; height: auto; }
    .nav { display: flex; }
    .sidebar-footer, .nav-caption, .topbar { display: none; }
    .brand { padding-bottom: var(--space-2); }
    .content { padding: var(--space-5) var(--space-3) 150px; }
    .page-heading { flex-wrap: wrap; }
    .page-heading .toolbar { width: 100%; }
    .product-grid { grid-template-columns: 20px 16px minmax(100px,1fr) 70px; }
    .product-grid > :nth-child(5) { grid-column: 3/5; }
    .product-grid > :nth-child(6) { grid-column: 3; }
    .product-head > :nth-child(n+5), .recent-sort { display: none; }
    .product-detail { justify-self: end; }
    .channel-grid { grid-template-columns: 1fr 1.4fr 65px; }
    .channel-grid > :nth-child(4), .channel-grid > :nth-child(5) { display: block; }
    .channel-head { display: none; }
    .channel-row > :nth-child(4)::before { content: '마진 '; }
    .channel-panel { padding-left: var(--space-2); }
    .filter-search { flex-wrap: wrap; }
    .filter-search input { min-width: 120px; }
    .filter-options select { flex: 1; min-width: 120px; }
    .selection-bar { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
    .stats, .dashboard-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .pagination { flex-wrap: wrap; }
    .app-auth .content { padding: var(--space-6); }
    .app-auth .sidebar { width: 100%; }
}

/* 상품과 채널은 같은 열을 사용한다. */
.catalog-grid { display: grid; grid-template-columns: minmax(235px,1fr) 110px 82px 110px 62px 40px 82px 80px 64px; gap: var(--space-2); align-items: center; padding: var(--space-3); }
.catalog-grid > * { min-width: 0; }
.catalog-head { position: sticky; top: 0; z-index: 5; min-height: 52px; background: var(--surface-soft); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; color: var(--muted); font-size: 11px; }
.catalog-head a { color: inherit; text-decoration: none; }
.catalog-head a:hover { color: var(--primary); }
.catalog-name-head { display: flex; gap: var(--space-3); align-items: center; padding-left: var(--space-8); }
.catalog-product { background: var(--surface-soft); border-top: 1px solid var(--border); min-height: 112px; }
.catalog .product-item { border: 0; }
.catalog-identity { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.catalog-identity > .checkbox, .catalog-identity > .expand-button { flex-shrink: 0; }
.catalog .product-info { gap: var(--space-2); }
.catalog .product-name { font-size: 13px; }
.catalog .product-cost { font-size: 11px; color: var(--muted); }
.catalog-channels.channel-panel { padding: 0; border: 0; background: var(--surface); }
.catalog-channel { position: relative; min-height: 74px; font-size: 12px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.catalog-channel small { display: block; margin-top: var(--space-1); font-size: 10px; }
.catalog-channel-name { display: flex; gap: var(--space-2); align-items: center; padding-left: calc(var(--space-8) + var(--space-3)); }
.channel-initial { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 700; }
.catalog-channel .badge { min-height: 20px; font-size: 10px; }
.catalog-price > .badge { margin-top: var(--space-1); }
.catalog-collected { font-size: 10px; }
.catalog-actions { display: flex; justify-content: flex-end; gap: var(--space-1); }
.ui-icon { flex-shrink: 0; vertical-align: middle; }
.icon-button { width: 30px; height: 32px; padding: 0; border-radius: 6px; }
.sale-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; color: var(--success); }
.sale-label::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--success); }
.catalog-sold-out::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--danger); }
.catalog-sold-out .price-input:not(:focus), .catalog-sold-out .catalog-online, .catalog-sold-out .catalog-retail, .catalog-sold-out .catalog-stock { color: var(--dim); }
.catalog-sold-out .channel-initial { opacity: .65; }
.catalog-review { border: 1px dashed var(--input-border); }
.catalog-unlinked { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); margin-left: var(--space-8); font-size: 12px; color: var(--dim); border-top: 1px dashed var(--border); }
.catalog-help { font-size: 11px; margin-bottom: var(--space-3); }
.catalog-margin { white-space: nowrap; font-size: 11px; }
.catalog-margin .ui-icon { width: 12px; height: 12px; margin-right: 2px; }
.price-editor { min-width: 0; }
.price-control { position: relative; }
.price-control > .ui-icon { position: absolute; left: 7px; top: 11px; width: 13px; height: 13px; color: var(--dim); pointer-events: none; }
.price-control .price-input { width: 100%; padding: 6px 7px 6px 24px; font-size: 12px; border-color: var(--input-border); }
.price-control .price-input[readonly] { color: var(--dim); background: var(--line-soft); border-color: transparent; cursor: default; }
.price-delta { display: block; color: var(--warn); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; margin-top: var(--space-1); }
.price-error { display: block; font-size: 10px; margin-top: var(--space-1); }
.is-dirty .price-input { border: 2px solid var(--warn); }
.is-invalid .price-input { border-color: var(--danger); }
.price-edit-bar { border-color: var(--warn); }
.price-edit-bar strong { color: var(--warn); }
.price-edit-bar .toolbar { margin: 0 0 0 auto; }
.price-edit-bar [role="status"] { font-size: 12px; }
.approval-options { border-top: 1px solid var(--border); margin-top: var(--space-4); padding-top: var(--space-4); }
.approval-options > summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.filter-options .check { margin: 0; font-size: 12px; }
.sort-controls { flex-wrap: wrap; }
@media (max-width: 1300px) {
    .catalog-grid { grid-template-columns: minmax(210px,1fr) 104px 104px 62px 38px 82px 36px; }
    .catalog-grid > .catalog-online, .catalog-grid > .catalog-collected { display: none; }
    .catalog-actions { flex-direction: column; align-items: flex-end; }
    .catalog .thumb { width: 36px; height: 40px; flex-basis: 36px; }
    .catalog-channel-name { padding-left: var(--space-8); }
}
@media (max-width: 1100px) {
    .catalog-grid { grid-template-columns: minmax(190px,1fr) 104px 104px 62px 82px 36px; }
    .catalog-grid > .catalog-stock { display: none; }
    .catalog .product-meta { font-size: 10px; }
    .filter-search { flex-wrap: wrap; }
    .filter-search input { max-width: none; }
}
@media (max-width: 760px) {
    .catalog-grid { grid-template-columns: minmax(100px,1fr) 96px 62px; gap: var(--space-2); }
    .catalog-grid > :nth-child(4), .catalog-grid > :nth-child(7), .catalog-grid > .catalog-actions { display: none; }
    .catalog .thumb, .catalog .product-meta, .catalog .product-cost { display: none; }
    .catalog-product > :nth-child(4) { display: block; }
    .catalog-identity { gap: var(--space-1); }
    .catalog-channel-name { padding-left: var(--space-1); }
    .catalog-name-head { padding-left: 0; }
    .catalog-unlinked { margin-left: 0; }
    .catalog-help { line-height: 1.6; }
}

/* 공개 소개·이용권 화면도 T23의 공통 토큰과 컴포넌트를 사용한다. */
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.eyebrow { display: block; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: var(--space-3); }
.nav-link[aria-disabled="true"] { opacity: .38; cursor: default; pointer-events: none; }
.dashboard-disabled { opacity: .38; pointer-events: none; user-select: none; }
.expiry-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-8); color: var(--warn); background: var(--warn-light); }
.subscription-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.subscription-card h2 { margin: 0 0 var(--space-2); font-size: 24px; }
.subscription-card p { margin: 0; }
.subscription-card .eyebrow { margin-bottom: var(--space-2); }
.dashboard-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-4); }
.dashboard-stat { margin: 0; color: var(--text); text-decoration: none; }
.dashboard-stat > span { color: var(--muted); font-size: 13px; }
.dashboard-stat p { margin: var(--space-2) 0; }
.dashboard-stat strong { font-size: 32px; font-weight: 700; }
.dashboard-stat:hover { border-color: var(--primary); }
.plan-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); }
.plan-card { padding: var(--space-8); }
.plan-card .section-heading h3 { margin: 0; font-size: 20px; }
.plan-recommended { border-color: var(--primary); }
.plan-price { margin: var(--space-6) 0 var(--space-2); font-size: 40px; font-weight: 700; letter-spacing: -.04em; }
.plan-price span { margin-left: var(--space-1); font-size: 18px; font-weight: 500; }
.plan-benefits { list-style: none; padding: var(--space-5) 0; margin: 0; border-top: 1px solid var(--border); }
.plan-benefits li { padding: var(--space-1) 0; }
.plan-benefits li::before { content: '✓'; color: var(--primary); margin-right: var(--space-2); }
.plan-card > .btn { width: 100%; }
.number-stepper { display: flex; align-items: center; gap: var(--space-2); width: 160px; margin-top: var(--space-2); }
.number-stepper .btn { flex: 0 0 40px; padding: 0; font-size: 18px; }
.number-stepper .input { flex: 1; min-width: 0; margin: 0; padding: var(--space-2); text-align: center; appearance: textfield; }
.number-stepper .input::-webkit-inner-spin-button, .number-stepper .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.billing-totals { margin: var(--space-6) 0; max-width: 560px; }
.billing-totals > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; }
.billing-totals dd { margin: 0; font-weight: 600; }
.billing-total { border-top: 1px solid var(--border); font-size: 20px; color: var(--primary); }
.bank-account { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
/* 공개 메인: 앱 토큰을 공유하고 예시 가격 변화만 움직인다. */
.landing { font-size: 16px; line-height: 1.75; }
.landing p, .landing h1, .landing h2, .landing h3 { word-break: keep-all; overflow-wrap: anywhere; }
.landing .btn { transition: none; }
.landing-container { max-width: 1280px; margin: 0 auto; padding-left: var(--space-8); padding-right: var(--space-8); }
.landing-header { display: flex; align-items: center; gap: var(--space-8); min-height: 80px; border-bottom: 1px solid var(--border); }
.landing .brand { padding: 0; font-size: 22px; white-space: nowrap; }
.landing-nav { display: flex; gap: var(--space-6); margin-left: auto; }
.landing-nav a, .landing-login { color: var(--muted); font-size: 14px; text-decoration: none; }
.landing-nav a:hover, .landing-login:hover { color: var(--text); text-decoration: underline; }
.landing-header-actions { display: flex; align-items: center; gap: var(--space-5); }
.landing-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-8); padding-top: calc(var(--space-8) * 1.5); padding-bottom: calc(var(--space-8) * 1.5); }
.landing-hero h1 { font-size: clamp(34px, 3.5vw, 50px); line-height: 1.35; letter-spacing: -.055em; margin: 0 0 var(--space-6); }
.landing-hero h1 span { color: var(--primary); }
.landing-hero-art { display: block; width: 100%; height: auto; mix-blend-mode: multiply; mask-image: linear-gradient(to right, transparent, var(--text) 5%, var(--text) 95%, transparent), linear-gradient(to bottom, transparent, var(--text) 6%, var(--text) 94%, transparent); mask-composite: intersect; }
.landing-description { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.85; margin-bottom: var(--space-8); }
.landing-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.landing-actions .btn { height: 50px; padding: 0 var(--space-5); font-size: 14px; }
.landing-checks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; padding: 0; margin: var(--space-4) 0 0; color: var(--muted); font-size: 12px; }
.landing-checks li::before { content: '✓'; margin-right: var(--space-1); color: var(--success); }
.landing-demo { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-5) calc(var(--space-8) * 2); min-width: 0; padding: var(--space-6) var(--space-8); margin: var(--space-2) 0 0; box-shadow: var(--shadow); border-radius: calc(var(--radius) * 1.5); }
.landing-demo-controls { min-width: 0; align-self: center; }
.landing-demo-feedback { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); border-top: 1px solid var(--border); padding-top: var(--space-5); }
.landing-demo-feedback .landing-fine-print br { display: none; }
.landing-demo-title { display: flex; align-items: center; gap: var(--space-3); }
.landing-demo-title strong { font-size: 17px; }
.landing-cost { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-6) 0 0; padding: var(--space-5); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius); }
.landing-cost label { font-weight: 600; font-size: 14px; }
.landing-cost p { color: var(--muted); font-size: 12px; margin: var(--space-1) 0 0; }
.landing-stepper { display: flex; align-items: center; gap: var(--space-2); }
.landing-stepper .btn { width: 36px; height: 40px; padding: 0; font-size: 18px; }
.landing-cost-input { position: relative; width: 126px; }
.landing-cost-input .input { width: 100%; height: 40px; padding: var(--space-2) 30px var(--space-2) var(--space-2); text-align: right; font-weight: 600; }
.landing-cost-input > span { position: absolute; right: var(--space-3); top: 6px; font-size: 14px; color: var(--muted); pointer-events: none; }
.landing-cost-input input::-webkit-inner-spin-button { -webkit-appearance: none; }
.landing-price-table th, .landing-price-table td { padding: var(--space-2); font-size: 14px; }
.landing-price-table thead th { background: transparent; color: var(--muted); font-size: 12px; }
.landing-price-table tbody th { background: transparent; color: var(--text); white-space: nowrap; border-top: 1px solid var(--line-soft); font-size: 14px; }
.landing-price-table tr > :first-child { padding-left: 0; }
.landing-price-table tr > :last-child { padding-right: 0; }
.landing-price-table .landing-price { color: var(--primary); font-size: 20px; font-weight: 600; }
.landing-price-table tbody tr:hover { background: transparent; }
.landing-pending { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 600; }
.landing-fine-print { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 0; }
.landing-price-changed { animation: landing-price-flash .6s ease-out; }
@keyframes landing-price-flash { from { background: var(--primary-light); } to { background: transparent; } }
.landing-section { padding-top: calc(var(--space-8) * 3); padding-bottom: calc(var(--space-8) * 3); }
.landing h2 { margin: 0 0 var(--space-5); font-size: 34px; line-height: 1.4; letter-spacing: -.045em; }
.landing-section-index { display: block; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .12em; margin-bottom: var(--space-4); }
.landing-section-description { color: var(--muted); margin: 0; font-size: 15px; }
.landing-section-heading { margin-bottom: var(--space-8); }
.landing-comparison-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.landing-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
.landing-before, .landing-after { padding: var(--space-8); border-radius: var(--radius); border: 1px solid var(--border); }
.landing-before { background: var(--surface-soft); }
.landing-after { background: var(--surface); }
.landing-comparison h3 { font-size: 20px; margin: 0 0 var(--space-5); }
.landing-steps { padding: 0; margin: 0; list-style: none; counter-reset: landing-step; }
.landing-steps li { display: flex; align-items: baseline; gap: var(--space-4); margin: var(--space-4) 0; font-size: 15px; counter-increment: landing-step; }
.landing-steps li::before { content: counter(landing-step, decimal-leading-zero); flex: 0 0 var(--space-6); color: var(--muted); font-size: 12px; }
.landing-after .landing-steps li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.landing-after .landing-steps li::before { color: var(--primary); }
.landing-before > p { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-5); }
.landing-time-calculator { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(var(--space-8) * 2); margin-top: calc(var(--space-8) * 1.5); }
.landing-time-inputs { min-width: 0; }
.landing-time-field { margin-bottom: var(--space-5); }
.landing-field-heading, .landing-assumption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.landing-field-heading label, .landing-assumption label { font-size: 14px; }
.landing-number { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; font-size: 13px; }
.landing-number .input { width: 86px; height: 38px; padding: var(--space-2); text-align: right; }
.landing-range { display: block; width: 100%; height: 20px; margin: var(--space-2) 0 0; accent-color: var(--primary); cursor: pointer; }
.landing-range:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius); }
.landing-assumption { border-top: 1px solid var(--border); padding-top: var(--space-5); margin: var(--space-6) 0 var(--space-3); }
.landing-time-result { align-self: start; padding: calc(var(--space-8) * 1.5); background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); }
.landing-result-label { color: var(--muted); font-size: 14px; margin: 0 0 var(--space-6); }
.landing-time-total { font-size: 20px; line-height: 1.4; margin: 0 0 var(--space-3); }
.landing-time-total strong { display: block; margin-top: var(--space-2); font-size: clamp(42px, 4.5vw, 64px); letter-spacing: -.05em; font-weight: 600; }
.landing-workdays { color: var(--muted); font-size: 14px; margin: 0; }
.landing-time-cost { border-top: 1px solid var(--border); margin: var(--space-6) 0 var(--space-5); padding-top: var(--space-5); font-size: 14px; }
.landing-time-cost p { margin: 0 0 var(--space-1); }
.landing-time-cost span { display: block; color: var(--muted); font-size: 12px; }
.landing-time-cost [data-time-hourly] { font-weight: 600; margin-top: var(--space-3); }
.landing-time-possibilities { margin-top: calc(var(--space-8) * 1.5); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.landing-time-possibilities h3 { color: var(--muted); font-size: 13px; font-weight: 500; }
.landing-time-possibilities ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.landing-time-possibilities li { border-left: 2px solid var(--border); padding-left: var(--space-4); font-size: 16px; }
.landing-features-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.landing-features-layout { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: calc(var(--space-8) * 2); margin-top: calc(var(--space-8) * 1.5); }
.landing-feature-visual { margin: 0; }
.landing-feature-visual img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-radius: var(--radius); }
.landing-features { display: grid; gap: var(--space-6); counter-reset: landing-feature; }
.landing-feature { position: relative; border-bottom: 1px solid var(--border); padding: 0 0 var(--space-6) calc(var(--space-8) * 1.25); counter-increment: landing-feature; }
.landing-feature::before { content: counter(landing-feature, decimal-leading-zero); position: absolute; left: 0; top: var(--space-1); color: var(--muted); font-size: 12px; }
.landing-feature:last-child { border-bottom: 0; padding-bottom: 0; }
.landing-feature h3 { font-size: 18px; margin: 0 0 var(--space-2); }
.landing-feature p { color: var(--muted); font-size: 14px; margin: 0; }
.landing-channels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.landing-channel { padding: var(--space-6) var(--space-2); text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.landing-monogram { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto var(--space-4); border-radius: 50%; font-size: 18px; font-weight: 600; }
.landing-monogram-green { color: var(--success); background: var(--sidebar); }
.landing-monogram-blue { color: var(--primary); background: var(--primary-light); }
.landing-monogram-amber { color: var(--warn); background: var(--warn-light); }
.landing-monogram-neutral { color: var(--text); background: var(--border); }
.landing-channel h3 { margin: 0 0 var(--space-2); font-size: 16px; }
.landing-channel-state { display: block; color: var(--success); font-size: 12px; font-weight: 500; }
.landing-channel small { display: block; margin-top: var(--space-1); font-size: 11px; }
.landing-channel-soon { background: transparent; }
.landing-channel-soon h3, .landing-channel-soon .landing-channel-state { color: var(--muted); }
.landing-channel-soon .landing-monogram { color: var(--muted); background: var(--sidebar); }
.landing-channel-contact { text-align: center; margin: var(--space-6) 0 0; font-size: 14px; color: var(--muted); }
.landing-pricing { background: var(--sidebar); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.landing-pricing .landing-container { max-width: 960px; }
.landing-pricing .landing-section-heading { text-align: center; }
.landing-pricing [data-pricing] > p { font-size: 13px; color: var(--muted); }
.landing-pricing .field { font-size: 14px; }
.landing-pricing .plan-card { margin: var(--space-4) 0; box-shadow: none; }
.landing-pricing .plan-price [data-amount] { font-size: 40px; font-weight: 700; margin-left: 0; }
.landing-pricing .plan-recommended { border-color: var(--border); }
.landing-pricing-note { text-align: center; font-size: 13px; color: var(--muted); margin: var(--space-6) 0 0; }
.landing-faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: calc(var(--space-8) * 2); }
.landing-faq-item { border-bottom: 1px solid var(--border); }
.landing-faq-item:first-child { border-top: 1px solid var(--border); }
.landing-faq-item summary { padding: var(--space-5) var(--space-2); cursor: pointer; font-size: 15px; font-weight: 500; }
.landing-faq-item p { color: var(--muted); font-size: 14px; padding: 0 var(--space-2) var(--space-5); margin: 0; }
.landing-cta { text-align: center; background: var(--surface); padding: calc(var(--space-8) * 3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.landing-cta .btn { height: 48px; margin: var(--space-2) 0 var(--space-3); }
.landing-cta p { color: var(--muted); font-size: 13px; margin: 0; }
.landing-footer { display: flex; justify-content: space-between; gap: var(--space-8); padding-top: calc(var(--space-8) * 1.5); padding-bottom: calc(var(--space-8) * 1.5); font-size: 12px; }
.landing-footer .brand { margin-bottom: var(--space-3); }
.landing-footer p { margin-bottom: var(--space-2); }
.landing-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; padding: var(--space-3); background: var(--surface); z-index: 10; }
.skip-link:focus { top: var(--space-4); }
@media (max-width: 1100px) {
    .dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .landing-nav { gap: var(--space-4); }
    .landing-hero { gap: var(--space-6); grid-template-columns: 1fr 1fr; }
    .landing-demo { gap: var(--space-6); grid-template-columns: 1fr 1.3fr; }
    .landing-cost { align-items: flex-start; flex-direction: column; }
    .landing-features-layout { gap: var(--space-8); }
    .landing-time-calculator { gap: var(--space-8); }
    .landing-time-result { padding: var(--space-8); }
    .landing-channels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .subscription-card { flex-wrap: wrap; }
    .plan-grid { grid-template-columns: 1fr; }
    .plan-card { padding: var(--space-6); }
    .expiry-banner { padding: var(--space-3); font-size: 12px; }
    .dashboard-stats { gap: var(--space-3); }
    .dashboard-stat { padding: var(--space-4); }
    .app .sidebar-footer { display: block; }
    .landing-container { padding-left: var(--space-4); padding-right: var(--space-4); }
    .landing-header { min-height: 72px; gap: var(--space-3); justify-content: space-between; }
    .landing .brand { font-size: 19px; gap: var(--space-2); }
    .landing-nav { display: none; }
    .landing-header-actions { gap: var(--space-3); }
    .landing-login { font-size: 13px; }
    .landing-header-actions .btn { font-size: 12px; padding: 0 var(--space-2); }
    .landing-hero { grid-template-columns: 1fr; padding-top: calc(var(--space-8) * 1.5); padding-bottom: calc(var(--space-8) * 1.75); gap: var(--space-6); }
    .landing-hero h1 { font-size: 34px; line-height: 1.4; }
    .landing-hero-art { max-width: 440px; margin: 0 auto; }
    .landing-description { font-size: 15px; margin-bottom: var(--space-6); }
    .landing-actions { gap: var(--space-2); }
    .landing-actions .btn { flex: 1; padding: 0 var(--space-3); font-size: 13px; }
    .landing-checks { gap: var(--space-1) var(--space-3); font-size: 11px; }
    .landing-demo { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); gap: var(--space-4); margin: 0; }
    .landing-demo-feedback { flex-direction: column; align-items: stretch; gap: var(--space-3); padding-top: var(--space-4); }
    .landing-demo-feedback .landing-fine-print br { display: block; }
    .landing-cost { flex-direction: row; align-items: center; padding: var(--space-4); }
    .landing-cost p { font-size: 11px; }
    .landing-cost-input { width: 100px; }
    .landing-stepper { gap: var(--space-1); }
    .landing-stepper .btn { width: 36px; }
    .landing-price-table th, .landing-price-table td { padding: var(--space-3) var(--space-1); font-size: 12px; }
    .landing-price-table tbody th { font-size: 13px; }
    .landing-price-table .landing-price { font-size: 15px; }
    .landing-price-table thead th { font-size: 10px; }
    .landing-pending { font-size: 12px; }
    .landing-section { padding-top: calc(var(--space-8) * 1.75); padding-bottom: calc(var(--space-8) * 1.75); }
    .landing h2 { font-size: 27px; }
    .landing-comparison, .landing-time-calculator, .landing-features, .landing-faq { grid-template-columns: 1fr; gap: var(--space-6); }
    .landing-features-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
    .landing-feature-visual img { aspect-ratio: 3 / 2; }
    .landing-before, .landing-after { padding: var(--space-6); }
    .landing-steps li { font-size: 14px; }
    .landing-time-calculator { margin-top: var(--space-8); }
    .landing-field-heading label, .landing-assumption label { font-size: 13px; }
    .landing-time-result { padding: var(--space-6); }
    .landing-time-total strong { font-size: 52px; }
    .landing-time-possibilities ul { grid-template-columns: 1fr; gap: var(--space-3); }
    .landing-time-possibilities li { font-size: 15px; }
    .landing-feature h3 { font-size: 17px; }
    .landing-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-channel { display: grid; grid-template-columns: 36px 1fr; text-align: left; gap: 0 var(--space-3); padding: var(--space-4); }
    .landing-channel .landing-monogram { grid-row: 1 / 4; align-self: center; width: 36px; height: 36px; margin: 0; font-size: 16px; }
    .landing-channel h3 { font-size: 14px; margin: 0; }
    .landing-channel-state { font-size: 11px; }
    .landing-channel small { font-size: 10px; }
    .landing-channel:last-child { grid-column: 1 / -1; }
    .landing-channel-contact { font-size: 13px; }
    .landing-faq-item summary { font-size: 14px; }
    .landing-cta { padding: calc(var(--space-8) * 1.75) 0; }
    .landing-footer { flex-direction: column; gap: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
    .landing-price-changed { animation: none; }
}

/* 대시보드: 승인할 일과 예외를 먼저 보여준다. */
.text-success { color: var(--success); }
.badge-success { color: var(--success); background: var(--surface-soft); border: 1px solid var(--border); }
.dashboard-menu { display: flex; flex-direction: column; flex: 1; }
.dashboard-menu > summary { display: none; }
.dashboard-menu .sidebar-footer { margin-top: var(--space-8); }
.dashboard h1 { margin-top: var(--space-1); }
.dashboard p { overflow-wrap: anywhere; }
.dashboard-focus { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.dashboard-focus .card { margin: 0; padding: var(--space-6); }
.dashboard-approval { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); border-color: var(--primary); background: var(--primary-light); }
.dashboard-approval h2 { margin: var(--space-2) 0; font-size: 18px; }
.dashboard-approval .eyebrow { color: var(--primary); }
.dashboard-approval p:last-child { margin: 0; font-size: 13px; }
.dashboard-total { font-size: 16px; margin: 0 0 var(--space-3); }
.dashboard-total strong { font-size: 48px; line-height: 1.2; letter-spacing: -.04em; color: var(--primary); }
.dashboard-total > span { font-size: 14px; margin-left: var(--space-2); }
.dashboard-worker .eyebrow { margin-bottom: var(--space-4); }
.dashboard-worker p { font-size: 13px; margin-bottom: var(--space-3); }
.dashboard-worker .dashboard-worker-status { font-size: 17px; font-weight: 600; }
.dashboard-worker-status::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: var(--space-2); }
.dashboard .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard .dashboard-stat { padding: var(--space-4) var(--space-5); }
.dashboard .dashboard-stat p { margin: var(--space-1) 0; }
.dashboard .dashboard-stat strong { font-size: 30px; }
.dashboard .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.dashboard-grid > .card { min-width: 0; }
.dashboard .section-heading { align-items: center; }
.dashboard .section-heading a { flex-shrink: 0; }
.dashboard-channel { padding: var(--space-4) 0; border-top: 1px solid var(--line-soft); }
.dashboard-channel:last-child { padding-bottom: 0; }
.dashboard-channel .section-heading { margin-bottom: var(--space-2); }
.dashboard-channel strong { overflow-wrap: anywhere; }
.dashboard-channel p { font-size: 12px; margin: 0; }
.dashboard-channel .text-danger { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--space-1); background: var(--danger-light); }
.dashboard .activity-row { padding: var(--space-3) 0; }
.dashboard .activity-row > :first-child { min-width: 0; }
.dashboard .activity-row .num { flex-shrink: 0; }
.dashboard .activity-row p { font-size: 12px; }
.dashboard-product { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.dashboard-product:hover { color: var(--primary); text-decoration: underline; }
.dashboard-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-4) 0; }
.dashboard-summary > a { display: grid; gap: var(--space-1); padding: 0 var(--space-6); color: var(--text); text-decoration: none; }
.dashboard-summary > a + a { border-left: 1px solid var(--border); }
.dashboard-summary span { font-size: 13px; }
.dashboard-summary strong, .dashboard-summary strong span { font-size: 20px; }
.dashboard-summary small { font-size: 11px; }
.dashboard-summary a:hover small { color: var(--primary); }
.dashboard-account { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-2) var(--space-6); background: var(--surface-soft); }
.dashboard-account .subscription-card { grid-row: 1 / 3; margin: 0; padding: 0; background: transparent; border: 0; }
.dashboard-account .subscription-card h2 { font-size: 17px; margin-bottom: var(--space-1); }
.dashboard-account .subscription-card .eyebrow { display: none; }
.dashboard-account p { margin: 0; font-size: 12px; align-self: end; }
.dashboard-account > p:last-child { align-self: start; }
.dashboard-account .btn-primary { background: var(--surface); color: var(--text); border-color: var(--border); font-size: 12px; height: 36px; }
.dashboard-account .notice { padding: var(--space-2) var(--space-3); }
.dashboard .empty-state { padding: var(--space-6) var(--space-4); }
.dashboard .empty-state p { font-size: 13px; }
@media (max-width: 1100px) {
    .dashboard-approval { align-items: flex-start; flex-direction: column; }
    .dashboard .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .app-dashboard .sidebar { padding: var(--space-3) var(--space-4); }
    .dashboard-menu { display: block; }
    .dashboard-menu > summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; cursor: pointer; font-weight: 600; }
    .dashboard-menu > summary::after { content: '+'; margin-left: var(--space-3); }
    .dashboard-menu[open] > summary::after { content: '−'; }
    .dashboard-menu > summary span { margin-left: auto; font-size: 12px; font-weight: 400; }
    .dashboard-menu .sidebar-footer { margin-top: var(--space-4); }
    .dashboard .page-heading { margin-bottom: var(--space-5); }
    .dashboard h1 { font-size: 25px; }
    .dashboard-focus { grid-template-columns: minmax(0, 1fr); }
    .dashboard-focus .card { padding: var(--space-5); }
    .dashboard-approval .btn { width: 100%; }
    .dashboard-worker .eyebrow { display: none; }
    .dashboard-worker .dashboard-worker-status { font-size: 15px; margin-bottom: var(--space-1); }
    .dashboard-worker p { font-size: 12px; margin-bottom: var(--space-2); }
    .dashboard .dashboard-stats { gap: var(--space-2); }
    .dashboard .dashboard-stat { padding: var(--space-3); }
    .dashboard-stat > span { font-size: 12px; }
    .dashboard-stat small { font-size: 11px; }
    .dashboard .dashboard-stat strong { font-size: 26px; }
    .dashboard .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .dashboard .section-heading h2 { font-size: 17px; }
    .dashboard-summary { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-4); }
    .dashboard-summary > a { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; }
    .dashboard-summary > a + a { border-left: 0; border-top: 1px solid var(--border); }
    .dashboard-summary small { grid-column: 1 / -1; }
    .dashboard-summary span { font-size: 12px; }
    .dashboard-account { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .dashboard-account .subscription-card { grid-row: auto; flex-wrap: nowrap; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
}