/* 햄스터구조대 문파 웹 공통 스타일 v4 (확정안 v1, 2026-11-13).
   햄스터 주황 하나, 따뜻한 미색 바탕, 얇은 테두리 카드. 다크 모드는 기기 설정을 따른다.
   화면별 규칙은 /css/<화면>.css 에 둔다. 이 파일은 공통 부품과 뼈대만. 이모지 금지. */
@import url("/fonts/fonts.css");
@import url("/css/auth.css");
@import url("/css/home.css");
@import url("/css/schedule.css");
@import url("/css/boards.css");
@import url("/css/guild.css");
@import url("/css/more.css");
@import url("/css/mine.css");
@import url("/css/manage.css");

/* ── 색·크기 ─────────────────────────────────────── */
:root {
  color-scheme: light dark;
  --bg: light-dark(#faf7f2, #14110e);
  --card: light-dark(#ffffff, #1f1a15);
  --fill: light-dark(#f3eee6, #2a231c);
  --line: light-dark(#e8e1d6, #3a3128);
  --text: light-dark(#1f1b16, #f3ece3);
  --sub: light-dark(#6b6258, #b3a595);
  --weak: light-dark(#7a7066, #a3968a);
  --accent: light-dark(#e0702a, #f08a45);       /* 햄스터 주황: 점·캐릭터·강조 면 */
  --accent-strong: light-dark(#bf5317, #f08a45); /* 버튼 바탕 (흰 글씨 4.7:1) */
  --accent-text: light-dark(#b04e14, #f59a5c);   /* 주황 글씨 */
  --accent-soft: light-dark(#fce9dc, #3a2416);
  --on-accent: light-dark(#ffffff, #1a120c);
  --bar: light-dark(#1f1b16, #f3ece3);
  --on-bar: light-dark(#ffffff, #14110e);
  --up: light-dark(#2f7a4b, #7bc796);
  --up-soft: light-dark(#e3f1e7, #1e3326);
  --down: light-dark(#b4321f, #f08872);
  --down-soft: light-dark(#fbe4df, #3a1e18);
  --font: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --pad: 16px;
  --tabbar: 72px;
  --r-card: 16px;
  --r-btn: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font); letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sub, .t2 { color: var(--sub); }
.sub { font-size: 13px; }
.sm { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); }
.accent { color: var(--accent-text); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 아이콘 (icons.js 의 선형 SVG) ─────────────────── */
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.s { width: 18px; height: 18px; }
.ico.l { width: 26px; height: 26px; }

/* ── 뼈대: 폰 = 위 제목줄 + 아래 5탭 / 600~1023 = 왼쪽 레일 / 1024~ = 왼쪽 메뉴 ── */
.shell { min-height: 100dvh; }
.side { display: none; }
.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 6px 0 var(--pad); background: var(--bg); }
.topbar .back { margin-left: -10px; }
.topbar h1 { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page { max-width: 640px; margin: 0 auto; padding: 0 var(--pad) calc(var(--tabbar) + 20px + env(safe-area-inset-bottom)); }
.page > * + * { margin-top: 12px; }

.tabbar { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--tabbar) + env(safe-area-inset-bottom)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--weak); position: relative; }
.tabbar a[aria-current="page"] { color: var(--accent-text); font-weight: 800; }
.tabbar a[aria-current="page"] .ico { fill: currentColor; fill-opacity: .15; }

.icon-btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--text); cursor: pointer; }
.icon-btn:active { background: var(--fill); }
.dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.tabbar .dot, .side .dot { top: 8px; right: calc(50% - 18px); box-shadow: 0 0 0 2px var(--card); }

@media (min-width: 600px) {
  .tabbar { display: none; }
  .shell { display: grid; grid-template-columns: 84px minmax(0, 1fr); }
  .side { display: flex; flex-direction: column; align-items: center; gap: 4px; position: sticky; top: 0; height: 100dvh; padding: 14px 0; background: var(--card); border-right: 1px solid var(--line); overflow-y: auto; }
  .side .brand { padding: 0 0 12px; }
  .side .brand b, .side .nav-sec, .side .nav-extra, .side .side-foot .me-name { display: none; }
  .side nav { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .side nav a { position: relative; width: 68px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 14px; font-size: 11px; font-weight: 600; color: var(--sub); }
  .side nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 800; }
  .side .side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .page { padding-bottom: 40px; padding-top: 4px; }
  .topbar { padding-left: 24px; height: 64px; }
}
@media (min-width: 1024px) {
  .shell { grid-template-columns: 232px minmax(0, 1fr); }
  .side { align-items: stretch; padding: 20px 12px; }
  .side .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; }
  .side .brand b { display: block; font-size: 17px; font-weight: 800; }
  .side .nav-sec { display: block; padding: 14px 12px 4px; font-size: 11px; font-weight: 800; color: var(--sub); letter-spacing: .04em; }
  .side .nav-extra { display: flex; }
  .side .nav-more { display: none !important; }
  .side nav { align-items: stretch; gap: 2px; }
  .side nav a { width: auto; min-height: 42px; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 12px; border-radius: 12px; font-size: 14px; }
  .side nav a .count { margin-left: auto; }
  .side .dot { position: static; margin-left: auto; box-shadow: none; }
  .side .side-foot { align-items: stretch; }
  .side .side-foot .me-name { display: block; }
  .side .side-foot a, .side .side-foot button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--sub); font-weight: 600; cursor: pointer; text-align: left; }
  .page { max-width: 960px; padding: 4px 28px 48px; }
  .page.wide { max-width: 1200px; }
}
/* 넓은 화면 보조 열: 1280 이상에서만 옆에, 그보다 좁으면 아래로 */
.page.split > .aside { margin-top: 12px; }
@media (min-width: 1280px) {
  .page.split { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 20px; align-items: start; }
  .page.split > * { grid-column: 1; margin-top: 0; }
  .page.split > * + * { margin-top: 12px; }
  .page.split > .aside { grid-column: 2; grid-row: 1 / span 20; margin-top: 0; position: sticky; top: 16px; }
}

/* ── 카드·제목 ────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; }
.card.soft { background: var(--accent-soft); border-color: transparent; }
.card.flush { padding: 0; overflow: hidden; }
.card + .card, .stack > * + * { margin-top: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; min-height: 28px; }
.card-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.card-head a { font-size: 13px; font-weight: 700; color: var(--accent-text); }
.title { padding: 10px 2px 4px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.title + .sub { margin: 0 2px 8px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.label { padding: 14px 4px 6px; font-size: 12px; font-weight: 800; color: var(--sub); }
.hero-num, .big { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.nudge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-card); background: var(--accent-soft); color: var(--text); font-weight: 600; }
.nudge .ico { color: var(--accent-text); }
.chev { flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .55; margin-right: 4px; }

/* ── 목록 줄 ──────────────────────────────────────── */
.rows > li + li { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 0; }
.row-main { flex: 1; min-width: 0; }
.row-main b { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main span { display: block; font-size: 12px; color: var(--sub); }
.row-end { flex: none; font-size: 12px; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.row-end b { font-size: 15px; font-weight: 800; color: var(--text); }
.row-button { width: 100%; border: 0; background: none; padding: 10px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rows.tight .row { min-height: 44px; padding: 8px 0; }
.card.flush .row { padding-left: 16px; padding-right: 16px; }

/* ── 꼬리표 ───────────────────────────────────────── */
.tag, .badge { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--sub); font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.6; }
.tag.hot, .tag.ac, .badge { background: var(--accent-soft); color: var(--accent-text); }
.tag.ok { background: var(--up-soft); color: var(--up); }
.tag.bad { background: var(--down-soft); color: var(--down); }
.badge.gray { background: var(--fill); color: var(--sub); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #1f1b16; font-size: 11px; font-weight: 800; }

/* ── 단추 ─────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--text); font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; transition: transform .12s var(--ease), filter .12s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: wait; }
.btn-main { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn-soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent-text); }
.btn-dash { border-style: dashed; color: var(--accent-text); }
.btn-bad { background: transparent; border-color: var(--down); color: var(--down); }
.btn-block { width: 100%; }
.btn-lg { min-height: 52px; font-size: 15px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actions .btn { flex: 1 1 120px; }
/* 보이는 크기가 작아도 누르는 곳은 44px */
.btn-sm::before, .chips a::before, .chip::before, .sgm button::before, .seg button::before, .pager button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-height: 100%; transform: translateY(-50%); }

/* ── 입력 ─────────────────────────────────────────── */
.field { display: block; margin-top: 14px; }
.field > span { display: block; margin: 0 2px 6px; font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea, .input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); font-size: 15px; outline: none; transition: border-color .12s, box-shadow .12s; }
.field textarea { min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field .hint, .hint { margin: 5px 2px 0; font-size: 12px; font-weight: 400; color: var(--sub); }
.field input[type="file"] { padding: 12px 14px; }
.card > .field:first-child { margin-top: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.search { position: relative; }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); pointer-events: none; }
.search input { padding-left: 40px; }
.error { margin-top: 10px; color: var(--down); font-size: 13px; }

/* ── 고르기: 알약(chips) · 탭형(sgm) · 상태 단추(seg) ── */
.chips { display: flex; gap: 6px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a, .chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chips a[aria-current="true"], .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.sgm { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r-btn); background: var(--fill); }
.sgm.block { display: grid; width: 100%; }
.sgm button { position: relative; min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--sub); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.sgm button[aria-pressed="true"], .sgm button[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.seg button { position: relative; min-height: 44px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.seg button[aria-pressed="true"][data-tone="bad"] { background: var(--down); border-color: var(--down); color: #fff; }
.seg.compact button { min-height: 34px; font-size: 12px; border-radius: 9px; }

/* ── 제자리 페이지 넘김 ‹ 1/4 › ─────────────────────── */
.pager { display: flex; align-items: center; justify-content: center; gap: 2px; color: var(--sub); font-size: 13px; font-weight: 700; }
.pager button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer; }
.pager button:disabled { opacity: .3; cursor: default; }
.pager .chev { margin: 0; opacity: .8; }
.pager [data-prev] .chev { transform: rotate(-135deg); }
.pager [data-count] { min-width: 52px; text-align: center; color: var(--text); }
.paged > .pager { border-top: 1px solid var(--line); }
.page-dots { display: flex; gap: 6px; align-items: center; }
.page-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); }
.page-dots i.on { width: 18px; background: var(--accent); }

/* ── 숫자 칸·막대 ─────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats > * { display: block; padding: 10px 12px; border-radius: var(--r-btn); background: var(--fill); }
.stats span { display: block; font-size: 12px; color: var(--sub); }
.stats b { font-size: 18px; font-weight: 800; }
.stats small { margin-left: 2px; font-size: 12px; color: var(--sub); }
.meter { height: 8px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* ── 달력 칸 ──────────────────────────────────────── */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; }
.day small { font-size: 11px; font-weight: 500; color: var(--sub); }
.day[aria-pressed="true"] { background: var(--accent-strong); color: var(--on-accent); }
.day[aria-pressed="true"] small { color: inherit; opacity: .85; }
.day .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.day[aria-pressed="true"] .pip { background: var(--on-accent); }

/* ── 아래 고정 줄: 저장 바 / 단추 줄 ─────────────────── */
.savebar { position: sticky; bottom: calc(var(--tabbar) + 12px + env(safe-area-inset-bottom)); z-index: 12; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 8px 8px 16px; border-radius: var(--r-card); background: var(--bar); color: var(--on-bar); }
.savebar .grow { flex: 1; min-width: 0; font-size: 13px; }
.savebar .btn { border-color: transparent; }
.savebar .btn-ghost { color: var(--on-bar); }
.footbar { position: sticky; bottom: calc(var(--tabbar) + 8px + env(safe-area-inset-bottom)); z-index: 12; display: flex; gap: 8px; margin-top: 12px; }
.footbar .btn { flex: 1; }
@media (min-width: 600px) { .savebar, .footbar { bottom: 16px; } }

/* ── 대화상자 ─────────────────────────────────────── */
dialog { width: min(92vw, 420px); max-height: 85dvh; overflow-y: auto; padding: 22px 20px 18px; border: 0; border-radius: 20px; background: var(--card); color: var(--text); }
dialog::backdrop { background: rgb(20 17 14 / .5); }
dialog .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
dialog .sheet-head h2 { font-size: 17px; font-weight: 800; }
dialog .sheet-close { flex: none; min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--sub); cursor: pointer; }
dialog .dlg-body { color: var(--sub); font-size: 13px; }
dialog .actions { margin-top: 16px; }
dialog textarea.copy { width: 100%; min-height: 200px; padding: 12px; border: 0; border-radius: 12px; background: var(--fill); font-size: 13px; line-height: 1.6; resize: vertical; }
@media (max-width: 599px) {
  dialog.sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ── 빈 화면·오류·알림 ─────────────────────────────── */
.empty { padding: 28px 12px; text-align: center; color: var(--sub); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; }
.empty-state b { font-size: 15px; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-btn); background: var(--down-soft); color: var(--down); font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + 20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; max-width: 88vw; padding: 11px 16px; border-radius: 12px; background: var(--bar); color: var(--on-bar); font-size: 14px; font-weight: 700; }
@media (min-width: 600px) { .toast { bottom: 28px; } }

/* ── 도트 햄스터·해바라기씨 ─────────────────────────── */
.px { display: grid; flex: none; }
.px i { display: block; }
@keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hx-blink { 94%, 97% { background-color: #e8944a; } }
@keyframes hx-sway { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.px.bob { animation: hx-bob 2.4s ease-in-out infinite; }
.px .eye { animation: hx-blink 4s steps(1) infinite; }
.px.sway { animation: hx-sway 3s ease-in-out infinite; transform-origin: 50% 90%; }

/* ── 그래프·사진·글 ────────────────────────────────── */
.chart { width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart .dot { fill: var(--accent); stroke: var(--card); stroke-width: 3; }
.chart text { fill: var(--sub); font-size: 11px; }
.crop { position: relative; border-radius: 12px; background: var(--fill); overflow: hidden; touch-action: none; }
.crop img { width: 100%; display: block; }
.crop-box { position: absolute; border: 2px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); pointer-events: none; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.prose { font-size: 15px; line-height: 1.75; white-space: pre-wrap; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); font-size: 13px; font-weight: 800; }

/* ── 표 (넓은 화면 운영) ───────────────────────────── */
.table-wrap { overflow-x: auto; }
table.tb { border-collapse: collapse; width: 100%; font-size: 13px; }
.tb th { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; font-weight: 800; color: var(--sub); white-space: nowrap; }
.tb td { padding: 0 14px; height: 44px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tb .n { text-align: right; }
.tb tr[aria-selected="true"] td { background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 위 제목줄이 화면 이름을 이미 보여 주므로 화면 안의 같은 큰 제목은 숨긴다 */
.wide > .title, .wide > .title + .sub { display: none; }
.wide > .title-row > .title { font-size: 0; padding: 0; }
.wide > .title-row { justify-content: flex-end; }

/* .field 밖에 놓인 입력칸도 같은 모양으로 */
.page input[type="text"]:not(.field input), .page input[type="search"]:not(.field input), .page input:not([type]):not(.field input), .page input[type="number"]:not(.field input), .page input[type="date"]:not(.field input), .page select:not(.field select) { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--text); font-size: 15px; outline: none; max-width: 100%; }
.page input:not(.field input):focus, .page select:not(.field select):focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }