/* 의미색은 작성자가 지정한다. 문구·아이콘으로 실행 중 추측하지 않는다. */
:is(button,a,label,summary)[data-vd-tone="danger"] { color:var(--danger); background:var(--danger-soft); border-color:var(--danger); }
:is(button,a,label,summary)[data-vd-tone="create"] { color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent); }
:is(button,a,label,summary)[data-vd-tone="warning"] { color:var(--warn); background:var(--warn-soft); border-color:var(--warn); }
:is(button,a,label,summary)[data-vd-tone="search"] { color:var(--ok); background:var(--ok-soft); border-color:var(--ok); }
.vd-btn--primary[data-vd-tone="create"] { color:var(--on-fill); background:var(--accent-fill); }
.vd-btn--danger-solid[data-vd-tone="danger"] { color:var(--on-fill); background:var(--danger-fill); }
.vd-btn[data-vd-tone="neutral"] { color:var(--ink-2); background:var(--surface); border-color:var(--line-2); }
.vd-btn[data-vd-tone]:hover { filter:brightness(.95); }
.vd-btn { gap:6px; white-space:nowrap; flex-shrink:0; max-width:100%; }
.vd-btn > svg { flex-shrink:0; }
.vd-file-button { position:relative; }
.vd-file-button input[type="file"] { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.vd-file-button:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.vd-actions { gap:6px; row-gap:6px; }
.vd-panel + .vd-panel, .vd-table-wrap + .vd-pager { margin-top:12px; }
.vd-page__head { gap:10px; }
.vd-page__head > div, .vd-field, .vd-console__body { min-width:0; }
.vd-page__head p { margin-top:4px; }
.vd-table td, .vd-table th { vertical-align:middle; }
.vd-table th { white-space:nowrap; }
.vd-table td.is-num { white-space:nowrap; font-variant-numeric:tabular-nums; }
.vd-table td > .vd-actions { justify-content:flex-end; }
.vd-table td > small { display:block; margin-top:4px; }
.vd-list-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin-block:0; }
.vd-list-controls .vd-field { flex:1 1 112px; }
.vd-list-controls .vd-field:first-child { flex:2 1 180px; }
.vd-list-controls input, .vd-list-controls select, .vd-list-controls .vd-btn { min-height:32px; }
.vd-list-controls .vd-actions { padding-bottom:0; }
.vd-list-summary { margin-block:0; color:var(--muted); }
.vd-page-busy { margin:0; border:0; width:100vw; height:100dvh; max-width:none; max-height:none; position:fixed; inset:0; z-index:2147483646; background:var(--surface); display:flex; flex-direction:column; gap:20px; align-items:center; justify-content:center; color:var(--ink); }
.vd-page-busy[hidden] { display:none; }
.vd-page-busy__spinner { width:36px; height:36px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:vd-busy-spin .8s linear infinite; }
html.vd-page-loading::before { content:""; position:fixed; inset:0; background:var(--surface); opacity:.96; z-index:2147483644; }
html.vd-page-loading::after { content:"잠시만 기다려주세요"; position:fixed; inset:0; display:grid; place-items:center; color:var(--ink); z-index:2147483645; }
html.vd-page-loading { cursor:progress; }
@keyframes vd-busy-spin { to { transform:rotate(360deg); } }
/* 목록·폼은 모바일에서도 읽을 수 있는 크기를 유지한다. */
.vd-body--console { min-width:0; }
.vd-body--console .vd-pc-notice, .vd-pc-notice { display:none; }
.vd-table .vd-card-details { display:none; }
@media(max-width:1023px) {
 .vd-cshell { grid-template-columns:minmax(0,1fr); }
 .vd-cside-toggle { display:inline-flex; }
 .vd-cshell .vd-cside { position:fixed; z-index:90; top:var(--header-full,var(--header-h)); left:0; width:272px; max-width:86vw; transform:translateX(-102%); visibility:hidden; }
 .vd-cshell.is-open .vd-cside { transform:none; visibility:visible; }
 .vd-cshell.is-open .vd-cside__scrim { display:block; }
 .vd-body--console .vd-header__inner, .vd-body--console .vd-hsub__inner { padding-inline:12px; }
}
@media(max-width:800px) {
 .vd-chips--scroll { flex-wrap:wrap; overflow:visible; max-width:100%; }
 .vd-table--cards td > .vd-actions { justify-content:flex-start; }
 .vd-table--cards td { max-width:100%; }
 .vd-page__head { flex-wrap:wrap; }
 .vd-list-controls { align-items:stretch; }
 .vd-list-controls .vd-actions { width:100%; }
 .vd-list-controls .vd-actions > .vd-btn { flex:1; }
 .vd-btn { min-height:36px; }
}
@media(max-width:375px) {
 .vd-list-controls .vd-field { flex-basis:100%; }
 .vd-actions .vd-btn { padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) { .vd-page-busy__spinner { animation:none; } }

@media(max-width:800px) {
 .vd-bld__acts, .vd-bld__bar { flex-wrap:wrap; gap:8px; min-width:0; max-width:100%; }
 .vd-bld__acts { flex:1 1 100%; }
 .vd-bld__acts .vd-btn { flex:1 1 auto; }
 .vd-table--cards colgroup { display:none; }
 .vd-table--cards td[colspan] { display:block; text-align:center; }
 .vd-table--cards td[colspan]::before { display:none; }
 .vd-table--cards td[data-vd-card-extra] { display:none; }
 .vd-table--cards .vd-card-expanded td[data-vd-card-extra] { display:flex; }
 .vd-table--cards td.vd-card-details { display:block; }
 .vd-table--cards td.vd-card-details::before { display:none; }
}

.vd-mod-card, .vd-mod-card > * { min-width:0; }
.vd-mod-card__price { white-space:normal; overflow-wrap:anywhere; }

/* =====================================================================
 * 화면 밀도 정본(single source of truth) — 2026-10-05
 * 이 파일이 가장 마지막에 로드되므로, 제어 요소의 크기는 여기서만 정한다.
 * 규칙: 버튼·입력·선택·탭·메뉴 항목의 높이와 글자를 다른 파일에서 다시 덮어쓰지 않는다.
 *       높이는 아래 --ctl-* 사다리에서만 고르고, 값은 docs/system/ui/design-system.md 표와 같아야 한다.
 * ===================================================================== */
:root {
 --s-1:3px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px;
 --s-6:16px; --s-7:20px; --s-8:24px; --s-9:32px; --s-10:40px;
 --gutter:16px; --header-h:52px;
 /* 제어 요소 높이 사다리 */
 --ctl-xs:26px; --ctl-sm:28px; --ctl-md:32px; --ctl-lg:38px;
 /* 줄 높이 사다리(탭 줄·보조 메뉴줄 — 누르는 요소가 아니라 줄 자체의 높이) */
 --row-tab:34px;
 --tap:var(--ctl-md);
 --r-1:5px; --r-2:7px; --r-3:10px;
}
body { font-size:13px; line-height:1.5; }
.vd-h1, .vd-body--admin .vd-page__head .vd-h1 { font-size:22px; }
.vd-h2, .vd-body--admin .vd-h2 { font-size:17px; }
.vd-h3 { font-size:14px; }
.vd-lead { font-size:14px; line-height:1.5; }
.vd-small { font-size:12px; }
.vd-page, .vd-console__body { gap:12px; }
.vd-btn, .vd-body--admin .vd-btn { min-height:var(--ctl-md); padding:5px 10px; font-size:13px; line-height:1.2; }
.vd-btn--sm, .vd-body--admin .vd-btn--sm { min-height:var(--ctl-sm); padding:4px 8px; font-size:12px; }
.vd-btn--xs, .vd-body--admin .vd-btn--xs { min-height:var(--ctl-xs); padding:3px 6px; font-size:12px; }
.vd-btn--lg, .vd-body--admin .vd-btn--lg { min-height:var(--ctl-lg); padding:7px 14px; font-size:14px; }
.vd-btn svg { width:16px; height:16px; }
.vd-iconbtn svg { width:18px; height:18px; }
.vd-field, .vd-body--admin .vd-field { gap:4px; --field-h:var(--tap); --field-fs:13px; }
.vd-field--inline { --tap:inherit; }
.vd-field > span { min-height:18px; }
.vd-field > span, .vd-field > legend, .vd-label { font-size:12px; }
.vd-field small { font-size:12px; }
.vd-input, .vd-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .vd-field select, .vd-field textarea,
.vd-body--admin .vd-input, .vd-body--admin .vd-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .vd-body--admin .vd-field select, .vd-body--admin .vd-field textarea {
 min-height:var(--ctl-md); padding:5px 9px; font-size:13px; line-height:1.5; border-radius:var(--r-1);
}
.vd-field select, .vd-body--admin .vd-field select { padding-right:28px; background-position:right 7px center; }
.vd-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .vd-field select:where(:not([multiple]):not([size])) { height:var(--tap); }
.vd-field textarea, .vd-body--admin .vd-field textarea { min-height:80px; }
.vd-form, .vd-body--admin .vd-form { gap:10px; }
.vd-panel, .vd-body--admin .vd-panel { padding:12px; }
.vd-panel--sm { padding:10px; }
.vd-panel__head h2, .vd-panel__head h3 { font-size:15px; }
.vd-panel__head p { font-size:12px; }
.vd-stack > .vd-panel + .vd-panel, .vd-page > .vd-panel + .vd-panel { margin-top:0; }
.vd-table, .vd-body--admin .vd-table { font-size:13px; }
.vd-table th, .vd-table td, .vd-body--admin .vd-table th, .vd-body--admin .vd-table td { padding:7px 10px; }
.vd-table th { font-size:12px; }
.vd-table td > small { margin-top:2px; }
.vd-alert { padding:8px 10px; font-size:12px; }
.vd-alert:has(> .vd-ic, > svg, > .vd-btn, > .vd-actions, > p, > div, > span, > ul, > ol) { gap:8px; }
.vd-chip { min-height:28px; padding:3px 9px; font-size:12px; }
.vd-chips { gap:6px; }
.vd-tab { height:34px; padding-inline:10px; font-size:13px; }
.vd-tool { padding-inline:8px; font-size:13px; }
/* 콘솔·머리말의 이동 링크(메인으로·제작 콘솔·로그아웃)도 단추와 같은 높이·글자로 맞춘다(2026-10-05). */
.vd-cmain-link { min-height:var(--ctl-md); padding:0 8px; font-size:13px; border-radius:var(--r-1); }
.vd-menu__panel a, .vd-menu__panel button { min-height:var(--ctl-lg); font-size:13.5px; }
.vd-menu__panel { min-width:200px; }
.vd-theme { height:var(--row-tab); }
.vd-tool--icon { padding:0; flex:none; }
.vd-tool--icon > svg { width:20px; height:20px; flex:none; }
.vd-tool--icon .vd-avatar { width:28px; height:28px; font-size:12px; }
.vd-tool--icon .vd-dot { top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; font-size:10px; line-height:16px; }
.vd-tool--icon[data-vd-bell] { width:auto; min-width:var(--tap); padding-inline:6px; gap:4px; }
.vd-tool--icon[data-vd-bell] .vd-dot { position:static; flex:none; box-shadow:none; }
.vd-search { height:32px; }
.vd-search input { font-size:13px; }
.vd-search button { width:32px; height:30px; }
.vd-header__inner { min-height:52px; }
.vd-toolbar .vd-select, .vd-toolbar .vd-searchbox input, .vd-toolbar .vd-searchbox .vd-btn, .vd-toolbar > .vd-btn, .vd-toolbar__left > .vd-btn, .vd-toolbar__right > .vd-btn,
.vd-runs__search .vd-input, .vd-runs__search .vd-select, .vd-runs__search .vd-btn { height:var(--tap); min-height:var(--tap); font-size:13px; padding-block:4px; }
.vd-select, .vd-searchbox input { min-height:var(--tap); font-size:13px; }
/* 남아 있던 40~52px 제어 요소를 정본 사다리로 내린다(2026-10-05 사용자: 버튼 높이가 너무 큼).
   접이식 요약 줄(FAQ·더 보기)·목록 행은 누르는 면이 넓어야 하므로 여기서 건드리지 않는다. */
.vd-mdl-tabs button { min-height:var(--row-tab); padding-inline:10px; font-size:13px; }
.vd-field--inline input, .vd-field--inline select { height:var(--ctl-md); min-height:var(--ctl-md); font-size:13px; }
.vd-google__btn { min-height:var(--ctl-lg); font-size:14px; }
.vd-pricing2__toggle button { min-height:var(--ctl-md); padding-inline:14px; font-size:13.5px; }
.vd-lib-top { min-height:var(--ctl-md); }
.vd-lib-search { min-height:var(--ctl-md); }
.vd-console__nav a { min-height:var(--row-tab); font-size:13px; }
.vd-pager a, .vd-pager span { height:32px; min-width:32px; padding-inline:8px; font-size:12px; }
.vd-hsub__inner { min-height:34px; padding-block:2px; }
.vd-hsub__sub { font-size:12px; }
.vd-cside__item { min-height:30px; gap:8px; font-size:13px; }
.vd-cside__role { padding:6px 8px; font-size:12px; }
.vd-kpi, .vd-body--admin .vd-kpi { padding:10px 12px; min-width:0; grid-template-columns:minmax(0,1fr); }
.vd-kpi > * { min-width:0; }
.vd-kpi__value, .vd-body--admin .vd-kpi__value { font-size:22px; }
.vd-empty { padding:24px 12px; }
.vd-empty img, .vd-empty--sm img { width:min(96px,30vw); }
.vd-auth .vd-panel { padding:16px; }
.vd-payout-req__list { display:grid; gap:8px; margin:8px 0; }
.vd-payout-req__list li { display:grid; grid-template-columns:16px minmax(0,1fr); gap:6px; align-items:start; }
.vd-payout-req__list li > svg { width:16px; height:16px; margin-top:2px; color:var(--danger); }
.vd-payout-req__list li.is-ok > svg { color:var(--ok); }
.vd-payout-req__list li > span { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0; }
.vd-payout-req__list strong { font-size:13px; }
.vd-payout-req__list small { font-size:12px; color:var(--muted); }
.vd-home-module { min-width:0; gap:10px; }
.vd-home-module__body { flex:1 1 0; grid-template-columns:minmax(0,1fr); min-width:0; }
.vd-home-module__body > * { min-width:0; max-width:100%; }
.vd-home-module__price { white-space:normal; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.vd-lib-card__name { white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:13px; line-height:1.4; }
.vd-pkg-cost { flex-wrap:wrap; gap:4px 8px; font-size:14px; }
.vd-runs__body { grid-template-columns:minmax(0,1fr); }
.vd-editor__pick > span { grid-template-columns:minmax(0,1fr); }
.vd-editor__pick small { white-space:normal; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
@media(min-width:1024px) { .vd-cshell:not(.is-wide):not(.is-drawer) { grid-template-columns:210px minmax(0,1fr); } }
@media(max-width:800px) {
 :root { --gutter:10px; --tap:36px; }
 .vd-body--admin { --tap:36px; }
 .vd-h1, .vd-body--admin .vd-page__head .vd-h1 { font-size:20px; }
 .vd-btn, .vd-body--admin .vd-btn { min-height:36px; }
 .vd-input, .vd-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .vd-field select,
 .vd-body--admin .vd-input, .vd-body--admin .vd-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .vd-body--admin .vd-field select { min-height:36px; font-size:14px; }
 .vd-list-controls .vd-field { flex:1 1 110px; }
 .vd-list-controls .vd-field:first-child { flex-basis:100%; }
 .vd-table--cards td, .vd-body--admin .vd-table--cards td { padding:5px 8px; }
 .vd-table--cards tr { margin-bottom:8px; }
}
@media(max-width:560px) {
 .vd-runs__item { grid-template-columns:24px 40px minmax(0,1fr); padding:8px; gap:8px; }
 .vd-runs__check { width:24px; height:32px; }
 .vd-runs__thumb { width:40px; }
 .vd-runs__item > .vd-runs__meta, .vd-runs__item > .vd-btn { grid-column:1 / -1; min-width:0; }
 .vd-runs__money { white-space:normal; flex-wrap:wrap; }
 .vd-runs__range { flex-wrap:wrap; }
}