/* 자비스 웹 1.0.3 — TAKOS 오픈웹 v4.x 디자인 계승(2026-10-10).
   토큰·좌측 메뉴·카드·딱지·격자는 TAKOS index.html 의 값을 그대로 옮겼고, TAKOS 에서 주인님과 고친 것들을 함께 가져왔다:
   - 격자는 repeat(N, minmax(0,1fr)) — 1fr 은 긴 내용이 칸을 밀어 카드 폭이 어긋난다(s13).
   - 같은 줄 카드는 같은 높이(.cardv 세로 flex, 본문 .fill 이 남는 높이를 채움), 긴 목록은 카드 안에서만 스크롤(s15).
   - 달력 칸은 min-width:0 + overflow-wrap — 긴 일정 제목이 격자를 2000px 로 부풀린 사고(s13).
   - 넓은 표는 좁은 화면에서 깎지 않는다(여기서는 휴대폰에서 2줄 카드로 바꿔 전부 보인다).
   - 테마 3종(오션 블루 기본·코코 핑크·다크), 바닥 피드 신선도 줄.
   CSP 'self': url() 은 /static/assets/ 만, 외부 가져오기·외부 글꼴 0. 움직임은 html.still(움직임 줄이기·데이터 절약·설정 끔)에서 전부 멈춘다. */

:root, html[data-theme="ocean"] {
  --bg: #f5f8fa; --panel: #fff; --ink: #16202b; --sub: #5b6b7d; --faint: #93a3b2; --line: #e4eaef;
  --accent: #0284c7; --accentbg: #e8f4fd; --green: #10b981; --amber: #f59e0b; --red: #ef4444; --blue: #3b82f6;
  --purple: #8b5cf6; --grad: linear-gradient(135deg, #06b6d4, #3b82f6);
  --sun: #e5484d; --sat: #2f6fde; --chipbg: #eef0f4; --chipink: #6b7280; --amberink: #b45309;
  --charbg: #0b1530; color-scheme: light;
}
html[data-theme="pink"] { --accent: #ec4899; --accentbg: #fdf2f8; --grad: linear-gradient(135deg, #ec4899, #8b5cf6); }
html[data-theme="dark"] {
  --bg: #0b1220; --panel: #121b2d; --ink: #e7edf7; --sub: #93a3c0; --faint: #5f7089; --line: #233150;
  --accent: #22d3ee; --accentbg: #0d2536; --grad: linear-gradient(135deg, #06b6d4, #8b5cf6);
  --sun: #ff7b7f; --sat: #7aa7ff; --chipbg: #1b2740; --chipink: #93a3c0; --amberink: #fbbf24; color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); line-height: 1.45; -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--panel); border: 1px solid var(--line);
  padding: 8px 12px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; }
.grow { flex: 1; min-width: 0; }
.mb { margin-bottom: 12px; }
.mt8 { margin-top: 8px; }
.center { text-align: center; }
a.plain { display: block; color: inherit; }
a.plain:hover .gov { border-color: var(--accent); }
body.modal-open { overflow: hidden; }

/* ================================================================ 앱 틀(TAKOS) */
body.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.side { width: 230px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh; flex: none; z-index: 6; }
.side .brand { padding: 14px 14px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.logo { width: 36px; height: 36px; border-radius: 50%; flex: none; position: relative; overflow: hidden; background: var(--charbg);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent); }
.bt { display: flex; flex-direction: column; min-width: 0; }
.bt .t { font-weight: 800; font-size: 15px; }
.bt .s { font-size: 10.5px; color: var(--faint); font-weight: 600; }
nav { padding: 7px 9px; flex: 1; overflow: auto; }
.nv { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--sub); font-size: 13px;
  font-weight: 600; margin-bottom: 1px; position: relative; }
.nv:hover { background: var(--bg); color: var(--ink); }
.nv.active { background: var(--accentbg); color: var(--accent); }
.nv i { font-style: normal; width: 17px; text-align: center; flex: none; }
.nbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.ns { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; padding: 9px 11px 3px; }
.sfoot { border-top: 1px solid var(--line); padding: 9px 13px; font-size: 11px; color: var(--sub); display: flex; align-items: center; gap: 6px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { height: 54px; border-bottom: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; gap: 12px;
  padding: 0 20px; position: sticky; top: 0; z-index: 5; }
.crumb { font-weight: 750; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.livetag { margin-left: auto; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.lt-wait { color: var(--amber); background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); }
.lt-live { color: var(--green); background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .35); }
.lt-part { color: var(--amberink); background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); }
.clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--sub); white-space: nowrap; }
.content { padding: 20px; flex: 1; outline: none; }
.sec { display: none; }
.sec.show { display: block; animation: f .18s; }
@keyframes f { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.sect { font-size: 12px; color: var(--sub); margin-bottom: 12px; }
.fhealth { border-top: 1px solid var(--line); background: var(--panel); padding: 7px 20px; display: flex; gap: 6px 14px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--faint); }
.fhealth b { font-weight: 700; }
.fd-ok { color: var(--green); } .fd-old { color: var(--amber); } .fd-no { color: var(--faint); } .fd-bad { color: var(--red); }

/* ================================================================ 격자·카드(TAKOS) */
.grid { display: grid; gap: 12px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid > .card { min-width: 0; }
.span2 { grid-column: span 2; }
.dashrow > .card { min-height: 250px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.cardv { display: flex; flex-direction: column; }
.cardv .fill { flex: 1; min-width: 0; min-height: 0; }
.cardv .bottom { margin-top: auto; }
.card h3 { font-size: 13.5px; font-weight: 750; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card h3 .muted { font-weight: 500; }
.age { font-size: 10px; color: var(--faint); font-weight: 600; margin-left: auto; }
.scrolly { max-height: 290px; overflow-y: auto; overscroll-behavior: contain; }
.scrolly::-webkit-scrollbar, .ranklist::-webkit-scrollbar { width: 6px; }
.scrolly::-webkit-scrollbar-thumb, .ranklist::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.more { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 8px; }
.linkbtn { background: none; border: 0; padding: 0; text-align: left; }

.kpi { display: block; transition: border-color .15s, transform .15s; }
a.kpi:hover { border-color: var(--accent); transform: translateY(-1px); }
.kpi .lbl { font-size: 11.5px; color: var(--sub); font-weight: 600; }
.kpi .val { font-size: 25px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 12px; color: var(--faint); font-weight: 700; margin-left: 2px; }
.kpi .sub { font-size: 11px; color: var(--faint); margin-top: 2px; overflow-wrap: anywhere; }
.kpi .sub.warn { color: var(--amberink); }
.kpi .val.red { color: var(--red); } .kpi .val.green { color: var(--green); } .kpi .val.amber { color: var(--amber); }

.pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.p-acc { background: var(--accentbg); color: var(--accent); }
.p-g { background: rgba(16, 185, 129, .12); color: var(--green); }
.p-a { background: rgba(245, 158, 11, .13); color: var(--amberink); }
.p-r { background: rgba(239, 68, 68, .12); color: var(--red); }
.p-b { background: rgba(59, 130, 246, .12); color: var(--blue); }
.p-n { background: var(--chipbg); color: var(--chipink); }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.row:last-child { border-bottom: 0; }
.row b { font-weight: 700; }
.muted { color: var(--faint); font-size: 11.5px; }
.notice { color: var(--amberink); background: rgba(245, 158, 11, .08); border: 1px dashed rgba(245, 158, 11, .45); border-radius: 9px;
  padding: 10px 12px; font-size: 12px; line-height: 1.6; }
.notice small { display: block; color: var(--faint); font-size: 10.5px; margin-top: 2px; }
.empty { color: var(--faint); font-size: 12px; padding: 10px 2px; }
.bar { height: 6px; border-radius: 5px; background: rgba(127, 127, 127, .14); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--grad); width: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.d-g { background: var(--green); } .d-a { background: var(--amber); } .d-r { background: var(--red); } .d-n { background: var(--faint); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.chips.inline { display: inline-flex; }
.chipsep { width: 1px; height: 18px; background: var(--line); }
.chip { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--sub);
  background: var(--panel); white-space: nowrap; }
.chip:hover { color: var(--ink); }
.chip.sel { background: var(--grad); color: #fff; border-color: transparent; }
.chip .n { opacity: .75; margin-left: 3px; font-weight: 600; }
.btn { background: var(--grad); color: #fff; border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.btnl { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font-weight: 700;
  font-size: 11.5px; white-space: nowrap; display: inline-block; }
.btnl:hover { border-color: var(--accent); }
.btn:disabled, .btnl:disabled { opacity: .45; cursor: not-allowed; }
.field { padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; background: var(--bg); color: var(--ink);
  min-width: 0; }
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accentbg); }
.sw { width: 38px; height: 22px; border-radius: 999px; background: rgba(127, 127, 127, .3); position: relative; flex: none; border: 0;
  transition: .15s; }
.sw::after { content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #fff; top: 2.5px; left: 2.5px;
  transition: .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.sw.on { background: var(--green); }
.sw.on::after { left: 18.5px; }

/* ================================================================ 대시보드 인사 카드(캐릭터 — 강조는 여기 한 곳) */
.hello { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 14px 18px; position: relative; overflow: hidden; }
.hello::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% 30%, var(--accentbg), transparent 55%);
  pointer-events: none; }
.hello > * { position: relative; }
.char-ring { position: relative; overflow: hidden; border-radius: 50%; background: var(--charbg); }
.char-ring img, .char-ring video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.char-ring .layer { opacity: 0; transition: opacity .25s; }
.char-ring .layer.on { opacity: 1; }
.hello-char { width: 88px; height: 88px; flex: none; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--accent); }
.hello-main { flex: 1; min-width: 0; }
.hello-date { font-size: 11.5px; color: var(--faint); font-weight: 700; }
.hello-greet { font-size: 19px; font-weight: 800; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.mood { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--accentbg); color: var(--accent); }
.hello-chips { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 48%; }
.hello-chips li a, .hello-chips li span { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
.hello-chips li a:hover { border-color: var(--accent); }
.hello-chips .hot { color: var(--red); border-color: rgba(239, 68, 68, .35); }
.hello-chips .soon { color: var(--amberink); border-color: rgba(245, 158, 11, .4); }
.hello-chips .calm { color: var(--green); border-color: rgba(16, 185, 129, .35); }

/* ================================================================ 일정 목록(TAKOS renderGcal) */
.dayh { font-weight: 700; font-size: 12.5px; margin: 10px 0 4px; }
.dayh:first-child { margin-top: 0; }
.dayh.today { color: var(--accent); }
.dayh.sun { color: var(--sun); } .dayh.sat { color: var(--sat); }
.dayh.today.sun, .dayh.today.sat { color: var(--accent); }
.ev-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: baseline; }
.ev-row:last-child { border-bottom: 0; }
.ev-row .tm { width: 76px; flex: none; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ev-row .tt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev-row .where { color: var(--faint); font-size: 11.5px; }
.ev-row.past { opacity: .5; }
.foot { margin-top: 10px; font-size: 11px; color: var(--faint); }

/* ================================================================ 전사 현황(TAKOS trBody) */
.trq { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.trq .big { font-size: 28px; font-weight: 800; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }
.trq .big.warn { color: var(--amber); }
.trq b { display: block; font-size: 11.5px; }
.trline { font-size: 11.5px; margin-bottom: 6px; color: var(--sub); }
.trline b { color: var(--ink); }
.eg { font-size: 10px; padding: 1px 7px; border-radius: 99px; white-space: nowrap; display: inline-block; font-weight: 700; }
.eg-g { background: rgba(16, 185, 129, .15); color: var(--green); }
.eg-w { background: rgba(245, 158, 11, .15); color: var(--amberink); }
.eg-e { background: rgba(239, 68, 68, .15); color: var(--red); }
.eg-n { background: var(--chipbg); color: var(--chipink); }
.eg-o { background: rgba(167, 139, 250, .18); color: var(--purple); }
.egs { display: flex; gap: 5px; flex-wrap: wrap; }
.trnote { margin-top: 9px; padding: 7px 9px; border-radius: 8px; background: var(--accentbg); font-size: 10.5px; line-height: 1.6; }

/* ================================================================ 랭킹(TAKOS) */
.ranklist { max-height: 176px; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 5), auto); column-gap: 18px; align-content: start; }
.ranklist.open { max-height: 330px; }
.rank { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
  min-width: 0; }
.rank .no { width: 20px; height: 20px; border-radius: 6px; background: var(--accentbg); color: var(--accent); display: grid;
  place-items: center; font-size: 10px; font-weight: 800; flex: none; }
.rank .nm { width: 112px; font-weight: 700; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .bar { flex: 1; }
.rank b.c { width: 44px; text-align: right; flex: none; font-size: 12px; }

/* ================================================================ 통화 표(TAKOS calls100) */
.ch, .cr { display: grid; grid-template-columns: 96px 128px 70px 58px minmax(0, 1fr) 62px; gap: 10px; padding: 8px 4px; font-size: 12px;
  align-items: start; }
.ch { position: sticky; top: 0; background: var(--panel); color: var(--faint); font-weight: 700; font-size: 10px; border-bottom: 1px solid var(--line); z-index: 1; }
.cr { border-bottom: 1px solid var(--line); cursor: pointer; width: 100%; text-align: left; background: none; border-left: 0;
  border-right: 0; border-top: 0; border-radius: 0; }
.cr:hover { background: var(--bg); }
.cr > span { min-width: 0; overflow-wrap: anywhere; }
.cr .c-tm { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.cr .c-tm em { display: block; font-style: normal; font-size: 10px; }
.cr .c-who { font-weight: 700; }
.cr .c-len { color: var(--sub); font-size: 11px; font-variant-numeric: tabular-nums; }
.cr .c-sum { color: var(--sub); line-height: 1.45; }
.cr .c-sum mark, .ttext mark { background: rgba(245, 158, 11, .3); color: inherit; border-radius: 3px; padding: 0 1px; }
.cr .snip { display: block; color: var(--faint); font-size: 11px; margin-top: 3px; }
.callscroll { max-height: 440px; overflow: auto; }

.searchbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.searchbar .grow { flex: 1 1 200px; }
.searchbar .who { flex: 0 1 140px; }
.datef { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--sub); }
.searchbar .chips { width: 100%; margin-top: 2px; }
.hint { font-size: 10.5px; margin-left: auto; }

/* ================================================================ 통화 상세(TAKOS #tmodal) */
.modal { position: fixed; inset: 0; background: rgba(10, 15, 25, .55); z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 20px; }
.mbox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; max-width: 820px; width: 100%; max-height: 88vh;
  max-height: 88dvh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.mhead { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.mhead h2 { font-size: 15px; font-weight: 800; }
.mhead .muted { margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mbody { padding: 14px 18px; overflow-y: auto; font-size: 12.5px; line-height: 1.7; }
.tsum { background: var(--bg); border-left: 3px solid var(--accent); padding: 9px 12px; border-radius: 0 8px 8px 0; margin-bottom: 12px;
  white-space: pre-wrap; }
.tsec { font-size: 11px; font-weight: 700; color: var(--faint); margin: 12px 0 5px; }
.tlist { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.tlist li { padding-left: 14px; position: relative; }
.tlist li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); font-weight: 800; }
.ttext { white-space: pre-wrap; overflow-wrap: anywhere; }
.player { width: 100%; margin: 4px 0 2px; }
.why { padding: 14px; background: var(--bg); border-radius: 9px; text-align: center; }
.why b { display: block; color: var(--amberink); font-size: 13px; }
.why span { display: block; margin-top: 6px; color: var(--faint); font-size: 11.5px; }

/* ================================================================ 월 달력(TAKOS buildCal 을 주력으로) */
.calwrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.calside { min-width: 0; }
.calhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.calhead .ym { font-size: 17px; font-weight: 800; min-width: 118px; text-align: center; margin: 0; display: block; }
.iconbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); display: grid;
  place-items: center; color: var(--sub); font-size: 11px; }
.iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.bigcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bigcal .dw { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--faint); padding: 2px 0; }
.bigcal .dw.sun { color: var(--sun); } .bigcal .dw.sat { color: var(--sat); }
.mc { min-height: 96px; border: 1px solid var(--line); border-radius: 8px; padding: 5px; font-size: 11.5px; text-align: left;
  background: var(--panel); display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.mc, .mc * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.mc:hover { border-color: var(--accent); }
.mc .dn { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.mc.sun .dn { color: var(--sun); } .mc.sat .dn { color: var(--sat); }
.mc.out { opacity: .38; }
.mc.today { border-color: var(--accent); background: var(--accentbg); }
.mc.today .dn { color: var(--accent); }
.mc.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.mc .ev { display: block; font-size: 10px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px;
  border-radius: 4px; background: var(--accentbg); color: var(--ink); }
.mc.today .ev { background: var(--panel); }
.mc .ev .t { color: var(--accent); font-weight: 700; margin-right: 3px; }
.mc .ev.allday { background: var(--accent); color: #fff; }
html[data-theme="dark"] .mc .ev.allday { color: #04212b; }
.mc .ev.past { opacity: .55; }
.mc .more { font-size: 9.5px; color: var(--faint); font-weight: 700; }
.mc .dots { display: none; }
.calnote { margin-top: 8px; }
.calnote:empty { display: none; }
.byj { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--accentbg); color: var(--accent);
  margin-left: 4px; white-space: nowrap; }

/* ================================================================ 할일·과제·로또·메모 */
.todo { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: flex-start; }
.todo:last-child { border-bottom: 0; }
.todo .ic { width: 18px; text-align: center; flex: none; }
.todo .tx { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.todo .tx .muted { display: block; font-weight: 500; margin-top: 2px; }
.todo.hot .tx { color: var(--red); }
.gov { border: 1px solid var(--line); border-radius: 11px; padding: 12px; margin-bottom: 10px; background: var(--panel); }
.gov .gh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gov .gt { font-weight: 750; font-size: 13.5px; flex: 1; min-width: 180px; overflow-wrap: anywhere; }
.gov .gd { font-size: 11px; color: var(--faint); margin-top: 4px; overflow-wrap: anywhere; }
.gov .ga { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.gov.compact { padding: 9px 11px; margin-bottom: 7px; }
.gov.compact .gt { font-size: 12.5px; min-width: 120px; }
.lrow { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
.lrow .lg { width: 15px; font-size: 11px; font-weight: 800; color: var(--faint); flex: none; }
.lnum { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  background: var(--accentbg); color: var(--accent); flex: none; font-variant-numeric: tabular-nums; }
.lnum.hit { background: var(--green); color: #fff; }
.lrow.sm .lnum { width: 21px; height: 21px; font-size: 10px; }
.lrow.sm { gap: 4px; margin-bottom: 3px; }
.lbig { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lsub { font-size: 11px; color: var(--faint); margin-top: 2px; }
.ltop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lsrc { margin-top: 10px; font-size: 10.5px; color: var(--faint); line-height: 1.6; }
.lh-round { width: 62px; flex: none; }
.memo { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; overflow-wrap: anywhere; }
.memo:last-child { border-bottom: 0; }
.memo .muted { display: block; margin-top: 2px; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; font-size: 12px; }
.kv > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--line); padding: 4px 0; min-width: 0; }
.kv span { color: var(--sub); }
.kv b { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.kv.one { grid-template-columns: minmax(0, 1fr); }

/* ================================================================ 설정 */
.swatches { gap: 9px; }
.swatchb { background: none; border: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: center; }
.swatch { display: block; width: 100%; height: 46px; border-radius: 10px; border: 2.5px solid transparent; }
.swatchb.sel .swatch { border-color: var(--ink); }
.sw-ocean { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.sw-pink { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.sw-dark { background: linear-gradient(135deg, #0f172a, #334155); }
.logout { margin: 0; }

/* ================================================================ 로그인 계열(같은 토큰 — TAKOS 로그인처럼 밝은 카드) */
body.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; }
.auth-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stage, .who { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stage .char-ring { width: 112px; height: 112px; box-shadow: 0 0 0 4px var(--panel), 0 0 0 6px var(--accent); }
.bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 15px; font-weight: 700;
  font-size: 13.5px; position: relative; }
.bubble::before { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; background: var(--panel);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.auth-card { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.auth-card .brand { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: .08em; }
.auth-card h1 { font-size: 19px; font-weight: 800; margin: 4px 0 14px; }
.auth-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 12px; }
.auth-card input:not([type="checkbox"]):not([type="hidden"]) { padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 16px; background: var(--bg); color: var(--ink); width: 100%; }
.auth-card input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accentbg); }
.auth-card label.check { flex-direction: row; align-items: center; gap: 7px; font-weight: 600; }
.auth-card .muted { margin-top: 12px; line-height: 1.6; }
.auth-card .muted a, .auth-card a.btn-link { color: var(--accent); font-weight: 700; }
.auth-card code { background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
button.primary { width: 100%; background: var(--grad); color: #fff; border: 0; border-radius: 10px; padding: 12px; font-weight: 800;
  font-size: 14px; margin-top: 4px; }
button.primary.ready { box-shadow: 0 0 0 3px var(--accentbg); }
button.primary.busy { opacity: .6; cursor: progress; }
.err { color: var(--red); font-size: 12.5px; font-weight: 600; margin-bottom: 10px; line-height: 1.6; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.auth-card .otp-box { text-align: center; font-size: 20px !important; font-weight: 800; padding: 10px 0 !important;
  font-variant-numeric: tabular-nums; }
.otp-boxes.full .otp-box { border-color: var(--green); }
.otp-boxes.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.countdown { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; }
.countdown .label { font-size: 11px; font-weight: 700; color: var(--sub); }
.countdown .value { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }
.countdown.done .value { font-size: 14px; color: var(--green); }

/* ================================================================ 데모 표식(데모 서버만 body[data-demo]) */
body[data-demo]::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(135deg, #f59e0b 0 12px, #16202b 12px 24px); }
body[data-demo]::after { content: "DEMO · 가짜 데이터"; position: fixed; right: 10px; bottom: 10px; z-index: 90; pointer-events: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #16202b; background: #fbbf24; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }

/* ================================================================ 반응형(TAKOS: 920 이하 아이콘 메뉴) */
@media (max-width: 1180px) {
  .calwrap { grid-template-columns: minmax(0, 1fr); }
  .calside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .calside .mb { margin-bottom: 0; }
}
@media (max-width: 920px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g2 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: 1 / -1; }
  .side { width: 56px; }
  .bt, .nv span, .ns, #sfoot-t { display: none; }
  .side .brand { justify-content: center; padding: 12px 0; }
  .nv { justify-content: center; padding: 9px 0; }
  .nv i { font-size: 16px; width: auto; }
  .nbadge { position: absolute; top: 2px; right: 3px; min-width: 15px; height: 15px; font-size: 9px; padding: 0 4px; }
  .sfoot { justify-content: center; }
  .hello-chips { max-width: none; justify-content: flex-start; }
  .hello { flex-wrap: wrap; }
  .hello-chips { width: 100%; }
  .ranklist { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
}
@media (max-width: 620px) {
  .side { width: 50px; }
  .logo { width: 32px; height: 32px; }
  .content { padding: 12px; }
  .top { padding: 0 12px; gap: 8px; height: 50px; }
  .crumb { font-size: 14.5px; }
  .livetag { padding: 3px 8px; font-size: 10.5px; }
  .fhealth { padding: 7px 12px; }
  .g4 { grid-template-columns: minmax(0, 1fr); }
  .g4.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .card { padding: 11px 12px; }
  .grid { gap: 10px; }
  .dashrow > .card { min-height: 0; }
  .kpi .val { font-size: 22px; }
  .hello { padding: 12px 14px; gap: 12px; }
  .hello-char { width: 64px; height: 64px; }
  .hello-greet { font-size: 16px; }
  .calside { grid-template-columns: minmax(0, 1fr); }
  .calhead .ym { font-size: 15.5px; min-width: 96px; }
  .mc { min-height: 50px; padding: 4px 2px; align-items: center; gap: 3px; }
  .mc .ev, .mc .more { display: none; }
  .mc .dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
  .mc .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
  .mc .dots i.allday { background: var(--purple); }
  .bigcal { gap: 3px; }
  /* 통화 표 → 2줄 카드(값을 깎지 않는다) */
  .calltbl .ch { display: none; }
  .cr { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 2px; }
  .cr .c-who { grid-column: 1; grid-row: 1; }
  .cr .c-tm { grid-column: 2; grid-row: 1; text-align: right; }
  .cr .c-sum { grid-column: 1 / -1; grid-row: 2; }
  .cr .c-cat { grid-column: 1; grid-row: 3; }
  .cr .c-len { grid-column: 2; grid-row: 3; text-align: right; }
  .cr .c-appt { grid-column: 1 / -1; grid-row: 4; }
  .cr .c-appt:empty { display: none; }
  .searchbar .who { flex: 1 1 120px; }
  .datef { flex: 1 1 140px; }
  .datef .field { flex: 1; }
  .hint { margin-left: 0; width: 100%; }
  .modal { padding: 0; align-items: flex-end; }
  .mbox { max-height: 92vh; max-height: 92dvh; border-radius: 14px 14px 0 0; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .rank .nm { width: 96px; }
}

/* ================================================================ 움직임 줄이기 */
html.still *, html.still *::before, html.still *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}