/* 코리아오메가 CI — 토큰·서체·공용 요소 (index.html · weekly.html 공유). 계획서 §4.2 토큰표 */
@font-face{font-family:"Pretendard";font-weight:400;font-style:normal;font-display:swap;src:url('fonts/Pretendard-Regular.subset.woff2') format('woff2')}
@font-face{font-family:"Pretendard";font-weight:500;font-style:normal;font-display:swap;src:url('fonts/Pretendard-Medium.subset.woff2') format('woff2')}
@font-face{font-family:"Pretendard";font-weight:600;font-style:normal;font-display:swap;src:url('fonts/Pretendard-SemiBold.subset.woff2') format('woff2')}
@font-face{font-family:"Pretendard";font-weight:700;font-style:normal;font-display:swap;src:url('fonts/Pretendard-Bold.subset.woff2') format('woff2')}
@font-face{font-family:"Playfair Display";font-weight:700;font-style:normal;font-display:swap;src:url('fonts/PlayfairDisplay-Bold.latin.woff2') format('woff2')}

:root{
  --pine:#006B35; --on-pine:#FFFFFF; --on-pine-2:#CFE3D6;
  --sand:#BC955C; --sand-soft:#F4ECDF; --gold:#956E41; --silver:#898C8E;
  --ground:#F4F3F1; --surface:#FFFFFF; --surface-2:#F8F7F5; --surface-3:#EEEDEA;
  --line:#D0CFCD; --line-soft:#E6E5E3;
  --ink:#1B1C1D; --ink-2:#4A4D50; --ink-3:#636569;
  --accent:#006B35; --accent-2:#00572B; --accent-soft:#E3EFE7; --accent-bar:#006B35; --on-accent:#FFFFFF;
  --st-yield:#006B35; --st-yield-bg:#E3EFE7;
  --st-normal:#4A4D50; --st-normal-bg:#ECEBE9;
  --st-watch:#7D5A33; --st-watch-bg:#F4ECDF;
  --st-imp:#8E2F39; --st-imp-bg:#F3DFE1;
  --gain:#B3392E; --loss:#2A5DA8;
  --shadow:0 1px 2px rgba(27,28,29,.05), 0 8px 24px -16px rgba(27,28,29,.28);
  --r:10px;
  --topbar-h:48px;
  --gut:max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sand:#D4B27F; --sand-soft:#3A2F1E; --gold:#C9A06A; --silver:#A5A8AA;
    --ground:#0F1412; --surface:#161C19; --surface-2:#1B221F; --surface-3:#222A26;
    --line:#2E3431; --line-soft:#232A26;
    --ink:#E9EAE8; --ink-2:#B8BABB; --ink-3:#9C9FA1;
    --accent:#4FB37A; --accent-2:#6CC592; --accent-soft:#12301F; --accent-bar:#3E9A66; --on-accent:#0F1412;
    --st-yield:#6CC592; --st-yield-bg:#12301F;
    --st-normal:#A5A7A8; --st-normal-bg:#2A2F2C;
    --st-watch:#D9B98A; --st-watch-bg:#3A2F1E;
    --st-imp:#E08A92; --st-imp-bg:#3A2024;
    --gain:#E4796B; --loss:#7BA7E6;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --sand:#D4B27F; --sand-soft:#3A2F1E; --gold:#C9A06A; --silver:#A5A8AA;
  --ground:#0F1412; --surface:#161C19; --surface-2:#1B221F; --surface-3:#222A26;
  --line:#2E3431; --line-soft:#232A26;
  --ink:#E9EAE8; --ink-2:#B8BABB; --ink-3:#9C9FA1;
  --accent:#4FB37A; --accent-2:#6CC592; --accent-soft:#12301F; --accent-bar:#3E9A66; --on-accent:#0F1412;
  --st-yield:#6CC592; --st-yield-bg:#12301F;
  --st-normal:#A5A7A8; --st-normal-bg:#2A2F2C;
  --st-watch:#D9B98A; --st-watch-bg:#3A2F1E;
  --st-imp:#E08A92; --st-imp-bg:#3A2024;
  --gain:#E4796B; --loss:#7BA7E6;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:13px; -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--topbar-h) + env(safe-area-inset-top) + 8px)}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:1rem; line-height:1.5; -webkit-font-smoothing:antialiased}
@media (min-width:821px){html{font-size:14.5px}}   /* 데스크톱만 한 단계 크게 — 모든 크기가 rem이라 같이 커진다 */
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.wrap{max-width:1360px; margin:0 auto; padding:0 var(--gut) calc(56px + env(safe-area-inset-bottom))}

/* ---- 고정 헤더(로고 없음): 상태바 뒤까지 Royal Pine ---- */
.topbar{position:sticky; top:0; z-index:30; background:var(--pine); color:var(--on-pine);
  padding-top:env(safe-area-inset-top); box-shadow:0 1px 0 rgba(255,255,255,.16)}
.topbar-in{max-width:1360px; margin:0 auto; height:var(--topbar-h); padding:0 var(--gut);
  display:flex; align-items:center; gap:8px}
.topbar-in > *{flex:none}            /* 좁은 화면에서 버튼이 눌려 글자가 삐져나오지 않게 */
.topnav{display:flex; gap:6px; margin-right:auto}
.topnav .btn.onpine{border-color:transparent}
.btn.onpine.cur{background:rgba(255,255,255,.18)}
.topbar .me{flex:0 1 auto; min-width:0; font-size:0.9231rem; color:var(--on-pine-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:520px){.topbar .me{display:none}}   /* 좁으면 이름 대신 탭·상태를 남긴다 */

/* ---- 마스트헤드: Royal Pine 띠 + 흰 가로형 로고(여백 x = 높이/1.6) ---- */
.masthead{background:var(--pine); color:var(--on-pine)}
.mast-in{max-width:1360px; margin:0 auto; min-height:73px; padding:24px max(24px, var(--gut));
  display:flex; align-items:center; flex-wrap:wrap; gap:24px 32px}
.mast-logo{display:block; width:148px; height:auto; flex:none}
.mast-title h1{margin:0; font-size:1.5385rem; font-weight:700; line-height:1.25; letter-spacing:-.01em}
.mast-title .en{margin:2px 0 0; font-family:"Playfair Display",Georgia,serif; font-weight:700;
  font-size:1rem; letter-spacing:.02em; color:var(--on-pine-2)}
@media (min-width:821px){.mast-title h1{font-size:1.8462rem} .mast-title .en{font-size:1.0769rem}}

/* ---- 버튼·칩·상태 ---- */
.btn{font:inherit; font-size:0.9231rem; font-weight:600; line-height:1.2; padding:6px 12px; border-radius:7px; cursor:pointer;
  min-height:32px; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent);
  white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
.btn:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-3)}
.btn.onpine{background:transparent; color:var(--on-pine); border-color:var(--on-pine-2)}
.btn.onpine:hover{background:rgba(255,255,255,.1)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.topbar .btn:focus-visible{outline-color:var(--on-pine)}

/* ---- 라이트·다크 토글 ---- */
.tgl{flex:none; width:42px; height:22px; padding:0; border-radius:999px; cursor:pointer; position:relative;
  border:1px solid var(--on-pine-2); background:rgba(255,255,255,.12)}
.tgl i{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--on-pine);
  display:flex; align-items:center; justify-content:center; font:normal 10px/1 system-ui; color:var(--pine);
  transition:left .15s ease}
.tgl[aria-pressed="true"] i{left:22px}
.tgl:focus-visible{outline:2px solid var(--on-pine); outline-offset:2px}

.ext{flex:none; color:var(--on-pine-2); font-size:1rem; line-height:1; text-decoration:none; padding:3px}
.ext:hover{color:var(--on-pine)}
.ext:focus-visible{outline:2px solid var(--on-pine); outline-offset:2px; border-radius:4px}
.chip{display:inline-flex; align-items:center; gap:4px; font-size:0.8462rem; font-weight:500; line-height:1.4;
  padding:1px 7px; border-radius:999px; border:1px solid transparent; background:var(--surface-3);
  color:var(--ink-2); white-space:nowrap}
.chip.accent{background:var(--accent-soft); color:var(--accent)}
.chip.warn{background:var(--st-watch-bg); color:var(--st-watch)}
.chip.imp{background:var(--st-imp-bg); color:var(--st-imp)}
.chip.line{background:transparent; border-color:var(--line)}

.dbtag{display:inline-flex; align-items:center; gap:6px; font-size:0.8462rem; padding:3px 9px; border-radius:999px;
  border:1px solid var(--on-pine-2); color:var(--on-pine); white-space:nowrap;
  font:inherit; font-size:0.8462rem; background:none; cursor:pointer}
.dbtag:disabled{cursor:default}
.dbtag:not(:disabled):hover{background:rgba(255,255,255,.1)}
.dbtag:focus-visible{outline:2px solid var(--on-pine); outline-offset:2px}
.dbtag i{width:6px; height:6px; border-radius:50%; background:var(--on-pine-2); display:block}
.dbtag.live i{background:#8FE0AE}
.dbtag.off i{background:#F0C987}

.savenote{font-size:0.8846rem; color:var(--ink-3)}
.savenote.ok{color:var(--accent)} .savenote.err{color:var(--st-imp)}

/* 터치 기기: 입력 16px(iOS 확대 방지) */
@media (pointer:coarse){input,select,textarea{font-size:inherit!important}}   /* 본문과 같은 크기(홈화면 PWA는 포커스 확대 없음) */
/* iOS date 위젯은 고유 최소폭 + 중앙정렬 값 -> 칸을 넘겨 깨짐. 네이티브 폭 계산을 끄고 왼쪽 정렬 */
input[type=date]{-webkit-appearance:none; appearance:none; min-width:0; width:100%}
input[type=date]::-webkit-date-and-time-value{text-align:left; margin:0}
input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto; padding:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}