/* 튜브민트 컨셉 — 층 3/4: 공용 부품. 화면 이름(.dashboard-·.editor- 등)을 넣지 않는다.
   색·간격·글자·높이는 tokens.css 변수만. px 로 남긴 것은 테두리(1·2px)·아이콘/점/도형 크기·고정 폭뿐이다.
   상태 견본용 .is-hover / .is-focus 는 index.html 부품 블록에서 hover·focus 를 멈춰 보여 주려고 둔다.
   기준점(min-width): 600 태블릿 · 960 작은 PC · 1280 넓은 PC */

.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── 버튼: 주·보조·고스트·포인트·위험 / sm·md·lg / 아이콘 / 로딩 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h-md); padding: 0 var(--space-4); border-radius: var(--r);
  border: 1px solid transparent; font-weight: 600; font-size: var(--text-base); white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:is(:hover, .is-hover) { background: color-mix(in srgb, var(--brand) 88%, var(--ink)); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:is(:hover, .is-hover) { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--sub); }
.btn-ghost:is(:hover, .is-hover) { background: var(--surface-2); color: var(--ink); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger:is(:hover, .is-hover) { background: color-mix(in srgb, var(--danger) 88%, var(--ink)); }
.btn-sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--r-sm); }
.btn-lg { height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--text-lg); }
.btn-block { width: 100%; }
.btn-start { justify-content: flex-start; }
.btn-icon { width: var(--control-h-md); padding: 0; flex: none; }
.btn-sm.btn-icon { width: var(--control-h-sm); }
.btn-round { border-radius: var(--r-full); }
.btn .cost { font-weight: 500; opacity: .85; font-size: var(--text-sm); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .spinner { color: currentColor; width: 16px; height: 16px; }

/* ── 링크(문장 밖에서 혼자 쓰는 것: 누르는 높이 40px) ── */
.link { display: inline-flex; align-items: center; min-height: var(--control-h-sm); font-weight: 600; }

/* ── 입력 칸: 텍스트·비밀번호 보기·체크 / 오류·힌트·비활성 ── */
.field { display: grid; gap: var(--space-2); }
.field > label, .field > .row-between > label, .label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.input {
  height: var(--control-h-md); width: 100%; padding: 0 var(--space-4); border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--sub); opacity: .85; }
.input:is(:focus, .is-focus) { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
.input:disabled { background: var(--surface-2); color: var(--sub); cursor: not-allowed; }
.input-lg { height: var(--control-h-lg); font-size: var(--text-lg); }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: var(--control-h-md); }
.input-wrap .reveal { position: absolute; right: 0; top: 0; width: var(--control-h-md); height: 100%; border: 0; background: none; color: var(--sub); border-radius: var(--r); display: grid; place-items: center; cursor: pointer; }
.field-error { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--danger); font-size: var(--text-sm); font-weight: 500; }
.field-error .ico-sm { margin-top: calc((1lh - 14px) / 2); } /* 첫 줄 가운데에 맞춤 */
.field-hint { font-size: var(--text-sm); color: var(--sub); }
.check { display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--control-h-sm); font-size: var(--text-md); color: var(--ink); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--sub); font-size: var(--text-sm); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.range { width: 100%; height: var(--control-h-sm); margin: 0; accent-color: var(--brand); }

/* ── 배지·상태·칩 ─────────────────────── */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.no-dot::before { display: none; }
.st-write { color: var(--st-write-fg); background: var(--st-write-bg); }
.st-done { color: var(--st-done-fg); background: var(--st-done-bg); }
.st-sched { color: var(--st-sched-fg); background: var(--st-sched-bg); }
.st-edit { color: var(--st-edit-fg); background: var(--st-edit-bg); }
.cost-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 600; color: var(--sub); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-3); border-radius: var(--r-full); font-size: var(--text-sm); font-weight: 500; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.chip .ico-sm { color: var(--brand-text); }

/* ── 카드 ───────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card-pad { padding: var(--space-5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-head h2 { font-size: var(--text-lg); }

/* 미디어 카드(썸네일 + 제목 + 상태) — 프로젝트 목록 등 */
.media-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .15s ease; }
.media-card:is(:hover, .is-hover) { border-color: var(--line-strong); }
.media-thumb { aspect-ratio: 16 / 10; border-radius: 0; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.media-tag { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 1; font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-tight); padding: var(--space-1) var(--space-2); border-radius: var(--r-sm); background: rgba(0,0,0,.6); color: #fff; }
.media-vert { position: relative; z-index: 1; width: 26%; aspect-ratio: 9 / 16; border-radius: 6px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); }
.media-body { padding: var(--space-3); display: grid; gap: var(--space-2); }
.media-body b { font-size: var(--text-md); line-height: var(--leading-tight); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-body .meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); font-size: var(--text-xs); color: var(--sub); }
.media-body .meta .badge { max-width: 100%; height: auto; min-height: 24px; white-space: normal; }
@media (min-width: 600px) {
  .media-body .meta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-2); }
}
@media (min-width: 960px) {
  .media-body { padding: var(--space-4); }
  .media-body b { font-size: var(--text-base); }
}

/* ── 알림 상자 ───────────────────────── */
.alert { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font-size: var(--text-md); font-weight: 500; }
.alert-danger { background: var(--danger-soft); color: var(--danger); }
.alert-info { background: var(--brand-soft); color: var(--ink); }
.alert-info .ico { color: var(--brand-text); }

/* ── 진행 막대·스피너 ─────────────────── */
.progress { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; width: var(--pct, 0%); height: 100%; background: var(--brand-deco); border-radius: inherit; }
.spinner { width: 18px; height: 18px; flex: none; color: var(--brand-text); animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 모달·확인 대화상자(브라우저 confirm() 대신) ── */
.overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-4); background: var(--overlay); }
.modal {
  width: min(420px, 100%); max-height: calc(100vh - var(--space-7)); max-height: calc(100dvh - var(--space-7));
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
.modal h3 { font-size: var(--text-lg); }
.modal-head { display: flex; align-items: center; gap: var(--space-3); }
.modal-body { display: grid; gap: var(--space-3); overflow-y: auto; overscroll-behavior: contain; min-height: 0; font-size: var(--text-md); color: var(--sub); }
.modal-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--sub); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); flex: none; }
.modal-ico { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; flex: none; background: var(--danger-soft); color: var(--danger); }
.modal-actions > .btn { flex: 1; }
@media (min-width: 600px) { .modal-actions > .btn { flex: none; } }

/* ── 탭 ─────────────────────────────── */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: none;
  height: var(--control-h-md); padding: 0 var(--space-4); margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--sub);
  font-size: var(--text-md); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.tab:is(:hover, .is-hover) { color: var(--ink); }
.tab:is(:focus-visible, .is-focus) { outline-offset: -2px; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand-text); }
.tab:disabled { opacity: .45; cursor: not-allowed; }
.tab .count { font-size: var(--text-xs); color: var(--sub); font-weight: 600; }
.tabs-fill .tab { flex: 1; }

/* ── 드롭다운 메뉴 ─────────────────────── */
.menu-anchor { position: relative; display: inline-block; }
.menu {
  position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: 30; min-width: 200px;
  margin: 0; padding: var(--space-1); list-style: none; display: grid;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop);
}
.menu[hidden] { display: none; }
.menu-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-h-sm);
  padding: 0 var(--space-3); border: 0; border-radius: var(--r-sm); background: none;
  color: var(--ink); font-size: var(--text-md); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item .ico-sm { color: var(--sub); }
.menu-item:is(:hover, :focus-visible, .is-hover) { background: var(--surface-2); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item:disabled { opacity: .45; cursor: not-allowed; background: none; }
.menu-item-danger, .menu-item-danger .ico-sm { color: var(--danger); }
.menu-item[aria-checked] { padding-right: var(--space-7); position: relative; }
.menu-item[aria-checked="true"] { font-weight: 600; }
.menu-item[aria-checked="true"]::after { content: ""; position: absolute; right: var(--space-3); top: 50%; width: 6px; height: 10px; margin-top: -7px; border: solid var(--brand-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--line); }

/* ── 토스트 ──────────────────────────── */
.toast-region { position: fixed; z-index: 60; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); width: min(420px, 100%);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--r);
  background: var(--ink); color: var(--surface); box-shadow: var(--shadow-pop); font-size: var(--text-md);
  animation: toast-in .2s ease-out;
}
.toast > span { flex: 1; min-width: 0; }
.toast-action { flex: none; min-height: var(--control-h-sm); padding: 0 var(--space-2); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.toast-close { flex: none; width: var(--control-h-sm); height: var(--control-h-sm); border: 0; border-radius: var(--r-sm); background: none; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: .8; }
.toast :focus-visible { outline-color: currentColor; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 600px) {
  .toast-region { left: auto; right: var(--space-6); bottom: var(--space-6); justify-items: end; }
}

/* ── 빈 상태 ─────────────────────────── */
.empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; }
.empty-ico { width: 48px; height: 48px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--surface-2); color: var(--sub); }
.empty h3 { font-size: var(--text-lg); }
.empty p { max-width: 36ch; font-size: var(--text-md); color: var(--sub); }
.empty .cluster { justify-content: center; margin-top: var(--space-1); }

/* ── 로딩 자리(스켈레톤) ─────────────────── */
.skeleton { display: block; position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent); animation: shimmer 1.4s ease-in-out infinite; }
.skeleton-thumb { aspect-ratio: 16 / 10; border-radius: 0; }
.skeleton-title { height: var(--space-4); width: 80%; }
.skeleton-text { height: var(--space-3); width: 100%; }
.skeleton-text.is-short { width: 45%; }
.skeleton-pill { height: 24px; width: 72px; border-radius: var(--r-full); }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ── 페이지 넘김 ─────────────────────── */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-1); }
.page-link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 var(--space-2);
  border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--ink);
  font-size: var(--text-md); font-weight: 600; text-decoration: none; cursor: pointer;
}
.page-link:is(:hover, .is-hover) { background: var(--surface-2); }
.page-link[aria-current="page"] { background: var(--brand-soft); border-color: var(--brand-text); color: var(--ink); }
.page-link[aria-disabled="true"] { color: var(--sub); opacity: .5; pointer-events: none; }
.page-gap { min-width: var(--space-6); text-align: center; color: var(--sub); }
.page-label { display: none; }
@media (min-width: 600px) { .page-label { display: inline; } }

/* ── 표(정렬·빈 상태 / 600px 미만은 카드로) ── */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.table caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 700; border-bottom: 1px solid var(--line); }
/* 모바일 기본: 줄마다 카드 */
.table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table tbody, .table tr, .table td { display: block; }
.table tbody tr { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.table tbody tr:last-child { border-bottom: 0; }
.table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 0; min-height: 28px; }
.table td::before { content: attr(data-label); font-size: var(--text-sm); font-weight: 600; color: var(--sub); }
.table td.td-main { font-weight: 600; }
.table td.td-main::before, .table td.td-actions::before, .table .table-empty td::before { display: none; }
.table td.td-actions { justify-content: flex-end; }
.table .table-empty td { display: block; }
.th-sort { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h-sm); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.th-sort .ico-sm { opacity: .7; }
th[aria-sort="ascending"] .th-sort .ico-sm { transform: rotate(180deg); }
th[aria-sort] { color: var(--ink); }
@media (min-width: 600px) {
  .table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .table tbody { display: table-row-group; }
  .table tr, .table tbody tr { display: table-row; padding: 0; }
  .table td { display: table-cell; min-height: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
  .table td::before { display: none; }
  .table th { padding: 0 var(--space-4); height: var(--control-h-sm); text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--sub); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr:is(:hover, .is-hover) td { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
  .table .td-num { text-align: right; }
  .table th.td-num { text-align: right; }
  .table td.td-actions { text-align: right; }
}

/* ── 단계 표시 ───────────────────────── */
.stepper { display: flex; align-items: center; list-style: none; margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.stepper li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--sub); white-space: nowrap; }
.stepper li + li::before { content: ""; width: var(--space-3); height: 1px; background: var(--line-strong); margin: 0; }
/* 모바일: 현재 단계만 이름 + "4/6", 나머지는 번호 점만(이름은 화면 읽기용으로 남김) */
.stepper li:not([aria-current="step"]) .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stepper .step-of { color: var(--sub); font-weight: 500; }
.stepper .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); border: 1px solid var(--line-strong); color: var(--sub); background: var(--surface); }
.stepper .done { color: var(--ink); }
.stepper .done .dot { background: var(--brand-soft); border-color: transparent; color: var(--brand-text); }
.stepper [aria-current="step"] { color: var(--ink); }
.stepper [aria-current="step"] .dot { background: var(--brand); border-color: transparent; color: var(--on-brand); }
@media (min-width: 600px) {
  .stepper li + li::before { width: 36px; margin: 0 var(--space-3); }
  .stepper li:not([aria-current="step"]) .step-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .stepper .step-of { display: none; }
}

/* ── 자리표시 그림(외부 사진 대신) ───────── */
.ph { position: relative; overflow: hidden; border-radius: var(--r); background: linear-gradient(150deg, var(--p1, #9fd8c6), var(--p2, #3d7f6c)); isolation: isolate; }
.ph::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; right: -12%; top: -14%; background: var(--p3, rgba(255,255,255,.28)); }
.ph::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 12%; height: 22%; border-radius: 6px; background: rgba(0,0,0,.16); }
.ph.p-a { --p1: #F4D9A6; --p2: #C9875A; --p3: rgba(255,248,230,.45); }
.ph.p-b { --p1: #A9D8C8; --p2: #3E7F6E; }
.ph.p-c { --p1: #B9C7E8; --p2: #4F5F8F; --p3: rgba(255,255,255,.3); }
.ph.p-d { --p1: #E4C2B5; --p2: #8C5A4C; }
.ph.p-e { --p1: #CFE3A8; --p2: #5E7F3A; }
.ph.p-f { --p1: #2C3A44; --p2: #0F171C; --p3: rgba(255,210,140,.35); }

/* ── 로고 ───────────────────────────── */
.logo { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); font-family: var(--font-head); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.logo-mark { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--brand-deco); position: relative; flex: none; }
.logo-mark::before { content: ""; position: absolute; left: 10px; top: 8px; border-left: 10px solid var(--surface); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.logo-mark::after { content: ""; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); opacity: .85; }

/* ── 앱 틀: 머리말·사이드바(960px~)·모바일 아래 탭(~959px) ── */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.side { display: none; }
.main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.topbar { height: 56px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.topbar h1 { font-size: var(--text-lg); margin-right: auto; }
.topbar .logo { margin-right: auto; }
.credit { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: var(--text-md); flex: none; }
.credit .ico { color: var(--brand-text); }
.credit .sub { font-weight: 500; }
.plan-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border-radius: var(--r-full); background: var(--brand-soft); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.avatar { border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: var(--text-md); flex: none; }
.content { padding: var(--space-5) var(--space-4) var(--space-7); display: grid; gap: var(--space-5); max-width: 1180px; width: 100%; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.nav a { display: flex; align-items: center; gap: var(--space-3); height: var(--control-h-md); padding: 0 var(--space-3); border-radius: var(--r); color: var(--sub); text-decoration: none; font-weight: 500; }
.nav a:is(:hover, .is-hover) { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--ink); font-weight: 650; }
.nav a[aria-current="page"] .ico { color: var(--brand-text); }
.side-foot { margin-top: auto; display: grid; gap: var(--space-3); }
.plan-box { padding: var(--space-4); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.plan-box b { font-size: var(--text-md); }
.bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: sticky; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--line); padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom)); }
.bottomnav a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 48px; font-size: var(--text-xs); font-weight: 600; color: var(--sub); text-decoration: none; border-radius: var(--r-sm); }
.bottomnav a[aria-current="page"] { color: var(--brand-text); }
@media (min-width: 600px) {
  .content { padding: var(--space-6) var(--space-6) var(--space-7); }
}
@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: 236px minmax(0, 1fr); }
  .side { background: var(--surface); border-right: 1px solid var(--line); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 0; height: 100vh; height: 100dvh; }
  .side .logo { padding: 0 var(--space-2); }
  .topbar { height: 64px; padding: 0 var(--space-7); gap: var(--space-3); }
  .content { padding: var(--space-7); gap: var(--space-6); }
  .bottomnav { display: none; }
}
/* 화면 폭에 따라 숨김(모바일 먼저 원칙의 예외: 보이기/숨기기 유틸 두 개만 max-width 를 쓴다) */
@media (max-width: 959.98px) { .hide-m { display: none !important; } }
@media (min-width: 960px) { .show-m { display: none !important; } }

/* ── 화면 모드 전환(라이트/다크/시스템) — 동작은 theme.js ── */
.theme-switch { position: relative; flex: none; }
.theme-switch .menu { min-width: 180px; }

/* ── 테마별 개성(토큰으로 못 담는 최소한, C 예비) ───── */
/* C: 굵은 버튼, 주 버튼 아래 얇은 그림자 */
[data-theme="c"] .btn { font-weight: 700; }
[data-theme="c"] .btn-primary { box-shadow: 0 2px 0 color-mix(in srgb, var(--brand) 60%, var(--ink)); }
[data-theme="c"] .nav a[aria-current="page"] { background: var(--surface-2); }