/* 가정용 키오스크 (2026-11-04) — 늘 어두운 화면, 멀리서 보이는 큰 글씨 */
:root { --kk: 1vmin;   /* 화면 단위 — 칸이 넘치면 kiosk.js fitStage() 가 조금씩 줄여 어느 기기에서나 한 화면에 맞춤 */
  --bg: #101114; --card: #1c1e24; --line: #2c2f38; --text: #f3f4f6; --sub: #a3a8b4; --accent: #2DD4BF; --soon: #fbbf24; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
@keyframes kk-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: kk-in 1s ease-out;   /* 스위치에서 넘어오면 1초 동안 서서히 (사용자 2026-11-05) */ background: var(--bg); color: var(--text); font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; overflow: hidden; -webkit-user-select: none; user-select: none; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
svg { width: 1em; height: 1em; vertical-align: -0.12em; }
button, select { font: inherit; color: inherit; }

.kk-stage { flex: 1; min-height: 0; display: grid; gap: calc(1.6 * var(--kk)); padding: calc(2.4 * var(--kk)); grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "time bus" "weather bus" "memo meal" "memo partners";   /* 협약 가게는 급식 아래 (사용자 2026-11-05) */ transition: transform 2s; }
.kk-time { grid-area: time; padding: 0 calc(1 * var(--kk)); }
.kk-clock { font-size: calc(21 * var(--kk)); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kk-date { font-size: calc(4.2 * var(--kk)); color: var(--sub); margin-top: calc(1.2 * var(--kk)); }
.kk-card { background: var(--card); border: 1px solid var(--line); border-radius: calc(2.2 * var(--kk)); padding: calc(2.2 * var(--kk)) calc(2.6 * var(--kk)); min-height: 0; overflow: hidden; }
.kk-card h2 { margin: 0 0 calc(1.2 * var(--kk)); font-size: calc(3 * var(--kk)); font-weight: 600; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-weather { grid-area: weather; display: flex; flex-direction: column; justify-content: center; gap: calc(2 * var(--kk)); }
.kk-bus { grid-area: bus; }
.kk-cctv { grid-area: bus; display: flex; flex-direction: row; align-items: stretch; gap: calc(1.6 * var(--kk)); cursor: pointer; }   /* 글은 왼쪽, 영상은 오른쪽에 카드 높이만큼 (사용자 2026-11-05) */
.kk-cam-side { flex: 0 1 32%; min-width: calc(12 * var(--kk)); display: flex; flex-direction: column; justify-content: space-between; gap: calc(1 * var(--kk)); }
.kk-cam-side h2 { white-space: normal; overflow: visible; line-height: 1.25; margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.kk-cam { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; }
.kk-cam video { display: block; max-width: 100%; max-height: 100%; object-fit: cover; background: #000; border-radius: calc(1.4 * var(--kk)); }   /* 크기는 kiosk.js camFit() 이 칸에 맞춰 비율대로 계산 */
.kk-cam-note { margin: 0; font-size: calc(2 * var(--kk)); color: var(--sub); line-height: 1.4; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.kk-meal { grid-area: meal; }
.kk-now { display: flex; align-items: center; gap: calc(2 * var(--kk)); flex-wrap: wrap; }
.kk-wx-ico { font-size: calc(9 * var(--kk)); color: var(--accent); line-height: 1; }
.kk-temp { font-size: calc(9 * var(--kk)); font-weight: 700; }
.kk-sky { font-size: calc(3.6 * var(--kk)); color: var(--sub); }
.kk-days { list-style: none; margin: 0; padding: 0; }
.kk-days li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(1.2 * var(--kk)); font-size: calc(2.8 * var(--kk)); color: var(--sub); line-height: 1.4; }
.kk-days b { color: var(--text); font-size: calc(3.2 * var(--kk)); font-weight: 600; }

.kk-side + .kk-side { margin-top: calc(1.4 * var(--kk)); padding-top: calc(1.2 * var(--kk)); border-top: 1px solid var(--line); }
.kk-dir { font-size: calc(2.5 * var(--kk)); color: var(--sub); margin-bottom: calc(0.5 * var(--kk)); }
.kk-arr { display: flex; justify-content: space-between; gap: calc(2 * var(--kk)); font-size: calc(3.6 * var(--kk)); line-height: 1.45; }
.kk-arr b { font-weight: 700; }
.kk-arr span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-arr .soon { color: var(--soon); font-weight: 700; }
.kk-empty { font-size: calc(3 * var(--kk)); color: var(--sub); margin: 0; }
.kk-ended { color: var(--soon); font-weight: 600; }
.kk-menu { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: calc(2 * var(--kk)); font-size: calc(3.2 * var(--kk)); line-height: 1.5; }
.kk-menu li { break-inside: avoid; }

.kk-bar { display: flex; justify-content: flex-end; gap: calc(1 * var(--kk)); padding: 0 calc(2.4 * var(--kk)) calc(1.6 * var(--kk)); }
.kk-bar { flex-wrap: wrap; }
.kk-bar .kk-exit { display: inline-flex; align-items: center; gap: calc(0.6 * var(--kk)); background: none; border: 1px solid var(--line); border-radius: 99px; color: var(--sub); font-size: calc(2.4 * var(--kk)); padding: calc(1 * var(--kk)) calc(2.2 * var(--kk)); min-height: 44px; text-decoration: none; }
.kk-bar button { background: none; border: 1px solid var(--line); border-radius: 99px; color: var(--sub); font-size: calc(2.4 * var(--kk)); padding: calc(1 * var(--kk)) calc(2.2 * var(--kk)); min-height: 44px; cursor: pointer; }

.kk-bar .kk-mic { margin-right: auto; background: var(--accent); color: #06282e; border-color: var(--accent); font-weight: 700; font-size: calc(3 * var(--kk)); padding: calc(1.2 * var(--kk)) calc(3 * var(--kk)); }
.kk-ask { width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; }
.kk-ask[open] { display: flex; flex-direction: column; gap: 10px; }
.kk-ask::backdrop { background: rgba(0, 0, 0, .7); }
.kk-ask-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kk-ask-state { color: var(--accent); font-size: 18px; font-weight: 600; }
.kk-x { background: none; border: 0; font-size: 24px; min-width: 44px; min-height: 44px; cursor: pointer; }
.kk-ask-q { margin: 0; color: var(--sub); font-size: 20px; }
.kk-ask-q:empty, .kk-ask-a:empty, .kk-ask-links:empty { display: none; }
.kk-ask-a { flex: 1; min-height: 0; overflow-y: auto; font-size: clamp(20px, calc(3 * var(--kk)), 28px); line-height: 1.55; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.kk-ai-tag { display: block; margin-top: 10px; color: var(--sub); font-size: 14px; }
.kk-ask-links { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-ask-links a { color: var(--accent); border: 1px solid var(--line); border-radius: 99px; padding: 10px 16px; font-size: 16px; text-decoration: none; }
.kk-ask-type { display: flex; gap: 8px; }
.kk-ask-note { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.5; }
.kk-ask-type input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; font: inherit; font-size: 18px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; -webkit-user-select: text; user-select: text; }
.kk-ask-type button { min-width: 48px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font-size: 20px; cursor: pointer; }
.kk-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-ask-btns button { min-height: 52px; padding: 0 20px; background: none; border: 1px solid var(--line); border-radius: 12px; font-size: 18px; cursor: pointer; }
.kk-ask-btns .kk-ask-mic { flex: 1; min-width: 160px; background: var(--accent); border-color: var(--accent); color: #06282e; font-weight: 700; font-size: 20px; }
.kk-ask-mic.on { background: var(--soon); border-color: var(--soon); }

.kk-memo-card { grid-area: memo; padding: 0; }
.kk-board-open { display: block; width: 100%; height: 100%; padding: calc(2 * var(--kk)) calc(2.6 * var(--kk)); background: none; border: 0; text-align: left; color: inherit; cursor: pointer; }
.kk-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(1 * var(--kk)); margin-bottom: calc(0.8 * var(--kk)); font-size: calc(3 * var(--kk)); font-weight: 600; color: var(--sub); }
.kk-board-head small { font-size: calc(2.4 * var(--kk)); font-weight: 400; }
.kk-board { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(0.6 * var(--kk)); }
.kk-board li { display: flex; justify-content: space-between; align-items: baseline; gap: calc(2 * var(--kk)); font-size: calc(3 * var(--kk)); line-height: 1.35; min-width: 0; }
.kk-note-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kk-board small { flex: none; font-size: calc(2.2 * var(--kk)); color: var(--sub); }
.kk-board-empty { font-size: calc(2.8 * var(--kk)); color: var(--sub); }

.kk-memo { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; }
.kk-memo[open] { display: flex; flex-direction: column; gap: 10px; }
.kk-memo::backdrop { background: rgba(0, 0, 0, .7); }
.kk-memo-head { display: flex; justify-content: space-between; align-items: center; }
.kk-memo-head h2 { margin: 0; font-size: 20px; }
.kk-memo-form { display: grid; gap: 8px; grid-template-columns: 110px 1fr; }
.kk-memo-form input { min-width: 0; min-height: 48px; padding: 0 12px; font: inherit; font-size: 18px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; -webkit-user-select: text; user-select: text; }
.kk-memo-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.kk-memo-btns button { min-height: 52px; padding: 0 20px; border-radius: 12px; font-size: 18px; cursor: pointer; border: 1px solid var(--line); background: none; }
.kk-memo-btns .kk-memo-add { flex: 1; background: var(--accent); border-color: var(--accent); color: #06282e; font-weight: 700; }
.kk-memo-btns .on { background: var(--soon); border-color: var(--soon); color: #2b1d00; }
.kk-memo-msg { margin: 0; min-height: 1.3em; color: var(--sub); font-size: 15px; }
.kk-memo-undo { align-self: flex-start; min-height: 44px; padding: 0 16px; background: none; border: 1px solid var(--soon); border-radius: 10px; color: var(--soon); font-size: 16px; cursor: pointer; }
.kk-memo-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; }
.kk-memo-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.kk-memo-body { min-width: 0; }
.kk-memo-body p { margin: 0; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.kk-memo-body small { color: var(--sub); font-size: 14px; }
.kk-memo-done { flex: none; min-height: 48px; padding: 0 14px; background: none; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; cursor: pointer; }
.kk-memo-none { color: var(--sub); }

.kk-sleep { position: fixed; inset: 0; z-index: 20; background: #000; }
.kk-cam-tag { align-self: center; color: var(--sub); font-size: calc(2.2 * var(--kk)); white-space: nowrap; }
.kk-folder { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-folder button { min-height: 44px; padding: 0 16px; background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.kk-folder .kk-folder-pick { background: var(--accent); border-color: var(--accent); color: #06282e; font-weight: 600; }

.kk-weather, .kk-bus, .kk-meal { cursor: pointer; position: relative; }
.kk-meal-day { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.45; }
.kk-meal-day b { font-weight: 600; }
.kk-meal-day span { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; color: var(--sub); }
.kk-meal-day.today b, .kk-meal-day.today span { color: var(--accent); }
.kk-more { position: absolute; right: calc(2 * var(--kk)); top: calc(1.6 * var(--kk)); font-size: calc(2.2 * var(--kk)); color: var(--sub); }
.kk-detail { width: min(860px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 16px 24px 20px; }
.kk-detail[open] { display: flex; flex-direction: column; gap: 8px; }
.kk-detail::backdrop { background: rgba(0, 0, 0, .7); }
.kk-detail-head { display: flex; align-items: center; gap: 8px; }
.kk-detail-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kk-detail-back { min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; cursor: pointer; white-space: nowrap; }
.kk-detail-body { flex: 1; min-height: 0; overflow-y: auto; }
.kk-detail-body h3 { margin: 14px 0 8px; font-size: 18px; color: var(--sub); font-weight: 600; }
.kk-detail-body .kk-empty { font-size: 18px; }
.kk-hours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.kk-hour { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; background: var(--bg); border-radius: 10px; }
.kk-hour-at { font-size: 14px; color: var(--sub); }
.kk-hour-ico { font-size: 24px; color: var(--accent); line-height: 1; }
.kk-hour b { font-size: 20px; }
.kk-hour small { font-size: 12px; color: var(--sub); min-height: 1.2em; }
.kk-week { list-style: none; margin: 0; padding: 0; }
.kk-week li { display: grid; grid-template-columns: 96px 30px 1fr auto auto; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid var(--line); font-size: 18px; }
.kk-week b { font-weight: 600; }
.kk-week-ico { color: var(--accent); font-size: 22px; line-height: 1; }
.kk-week-sky { min-width: 0; color: var(--sub); }
.kk-week-pop { color: var(--sub); font-size: 15px; white-space: nowrap; }
.kk-week-tmp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kk-stop-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 12px; margin-bottom: 4px; background: var(--bg); border: 0; border-radius: 10px; font-size: 20px; text-align: left; cursor: pointer; }
.kk-stop-row span { color: var(--sub); font-size: 17px; white-space: nowrap; }
.kk-stop-row .soon { color: var(--soon); font-weight: 700; }
.kk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kk-chips button { min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--line); border-radius: 99px; font-size: 15px; cursor: pointer; }
.kk-chips button.on { background: var(--accent); border-color: var(--accent); color: #06282e; font-weight: 700; }
.kk-route { list-style: none; margin: 8px 0 0 10px; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.kk-route li { position: relative; padding: 9px 0; font-size: 18px; overflow-wrap: anywhere; }
.kk-route li::before { content: ''; position: absolute; left: -24px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.kk-route li.home { color: var(--accent); }
.kk-route li.home::before { background: var(--accent); }
.kk-route li.mine { color: var(--soon); font-weight: 700; }
.kk-route li.mine::before { background: var(--soon); width: 14px; height: 14px; left: -26px; top: 14px; }
.kk-route small { font-size: 13px; font-weight: 400; }
@media (max-width: 480px) { .kk-meal-day { grid-template-columns: 1fr; gap: 2px; font-size: 16px; } .kk-week li { grid-template-columns: 74px 26px 1fr auto; gap: 6px; font-size: 16px; } .kk-week-pop { display: none; } .kk-detail { padding: 12px 14px 14px; } }

body.no-cursor, body.no-cursor * { cursor: none !important; }

.kk-partners { grid-area: partners; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(1.2 * var(--kk)); padding: calc(0.8 * var(--kk)) calc(1.6 * var(--kk)); }   /* 글자 칸은 글자만큼(절대 안 잘림), 남는 자리를 4등분해 아이콘 (사용자 2026-11-05) */
.kk-partners h2 { margin: 0; font-size: calc(2.4 * var(--kk)); white-space: nowrap; overflow: visible; }
/* 협약 줄이 있으면 시계를 조금 줄여 세로를 맞춤 (가로 1280x800 에서 날씨 칸이 51px 넘치던 것) */
body.has-partners .kk-clock { font-size: calc(19 * var(--kk)); }
.kk-partner-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-items: center; align-items: start; min-width: 0; }
.kk-partner { display: flex; flex-direction: column; align-items: center; gap: calc(0.3 * var(--kk)); max-width: 100%; min-width: 0; padding: calc(0.2 * var(--kk)); background: none; border: 0; color: inherit; cursor: pointer; }
.kk-partner-ico { position: relative; display: block; width: calc(6.2 * var(--kk)); height: calc(6.2 * var(--kk)); }
.kk-partner img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
.kk-partner img.is-logo, .kk-ph img.is-logo { border-radius: 0; object-fit: contain; background: none; }
.kk-partner img.is-round, .kk-ph img.is-round { border-radius: 50%; object-fit: contain; background: #fff; padding: 12%; box-sizing: border-box; }   /* 12% — 가로로 꽉 찬 글자 로고(뚜레쥬르)가 둥근 테두리에 안 잘리게 */   /* 흰 바탕 로고(뚜레쥬르·모리커피) — 둥근 흰 원 안에 전체 */
.kk-partner-lbl { font-size: calc(2 * var(--kk)); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kk-badge { position: absolute; top: calc(-0.5 * var(--kk)); right: calc(-0.7 * var(--kk)); min-width: calc(2.4 * var(--kk)); height: calc(2.4 * var(--kk)); padding: 0 calc(0.5 * var(--kk)); border-radius: 99px; background: #ef4444; color: #fff; font-size: calc(1.6 * var(--kk)); font-weight: 700; line-height: calc(2.4 * var(--kk)); text-align: center; box-shadow: 0 0 0 2px var(--card); }
.kk-badge-dot { min-width: calc(1.7 * var(--kk)); height: calc(1.7 * var(--kk)); padding: 0; top: calc(-0.4 * var(--kk)); right: calc(-0.4 * var(--kk)); }   /* 로고 글자에 안 겹치게 바깥쪽으로 */
.kk-ph { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.kk-ph img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
.kk-ph b { display: block; font-size: 20px; }
.kk-ph span { color: var(--sub); font-size: 15px; }
.kk-coupon { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.kk-coupon-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.kk-coupon-txt b { font-size: 20px; }
.kk-coupon-txt small { color: var(--sub); }
.kk-tag { color: var(--accent); font-size: 15px; }
.kk-link { color: var(--accent); font-size: 16px; text-decoration: none; }
.kk-qr-box { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kk-qr-box small { color: var(--sub); font-size: 12px; }
.kk-qr { width: 120px; height: 120px; padding: 6px; background: #fff; border-radius: 8px; }
@media (max-width: 480px) { .kk-coupon { flex-direction: column; align-items: flex-start; } .kk-qr { width: 150px; height: 150px; } }

body.is-night .kk-stage, body.is-night .kk-bar { opacity: .32; }
/* 액자는 투명도 대신 밝기만 낮춤 — 사진마다 투명도를 주면 숨긴 앞 사진이 비치고, 액자 통째로 주면 검은 바탕이 비쳐 뒤 화면이 겹침 (2026-11-05) */
body.is-night .kk-frame img, body.is-night .kk-frame-clock { filter: brightness(.35); }

.kk-frame { position: fixed; inset: 0; background: #000; z-index: 10; }
.kk-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s; }   /* 앞 사진 사라진 뒤 다음 사진 (겹침 없음) */
.kk-frame img.on { opacity: 1; }
.kk-frame-clock { position: absolute; right: calc(3 * var(--kk)); bottom: calc(2.4 * var(--kk)); font-size: calc(6 * var(--kk)); font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 calc(2 * var(--kk)) rgba(0, 0, 0, .9); }
.kk-frame-empty { position: absolute; inset: 0; margin: auto; height: 1.5em; text-align: center; font-size: calc(3.6 * var(--kk)); color: var(--sub); }

.kk-set { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 20px; font-size: 16px; -webkit-user-select: text; user-select: text; }
.kk-set::backdrop { background: rgba(0, 0, 0, .6); }
.kk-set-head { display: flex; justify-content: space-between; align-items: center; }
.kk-set-head h2 { margin: 0; font-size: 20px; }
.kk-set-head button { background: none; border: 0; font-size: 22px; min-width: 44px; min-height: 44px; cursor: pointer; }
.kk-set h3 { margin: 22px 0 6px; font-size: 16px; }
.kk-set label { display: block; margin: 12px 0; color: var(--sub); }
.kk-set select { display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.kk-note { margin: 6px 0; color: var(--sub); font-size: 14px; }
.kk-note a { color: var(--accent); }
.kk-set label.kk-check { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; color: var(--text); }
/* 스위치·단추 묶음 — 드롭다운보다 직관적으로 (사용자 2026-11-05). 값은 그대로 숨은 select·checkbox 가 가짐 */
.kk-tgl { appearance: none; -webkit-appearance: none; flex: none; width: 52px; height: 30px; margin: 0; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; }
.kk-tgl::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.kk-tgl:checked { background: var(--accent); }
.kk-tgl:checked::after { transform: translateX(22px); }
.kk-row { margin: 12px 0; }
.kk-lbl { display: block; color: var(--sub); margin-bottom: 6px; }
.kk-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.kk-seg button { flex: 1 1 auto; min-height: 44px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--sub); font-size: 16px; cursor: pointer; white-space: nowrap; }
.kk-seg button.on { background: var(--accent); border-color: var(--accent); color: #06282e; font-weight: 700; }
.kk-seg button:disabled { opacity: .4; cursor: default; }
.kk-row.is-off .kk-lbl { opacity: .45; }

/* 세로로 세운 태블릿·폰 */
@media (orientation: portrait) {
  .kk-stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto auto; grid-template-areas: "time" "weather" "memo" "bus" "meal" "partners"; }
  .kk-clock { font-size: calc(26 * var(--kk)); }
  .kk-date { font-size: calc(5 * var(--kk)); }
  .kk-card h2 { font-size: calc(3.6 * var(--kk)); }
  .kk-arr { font-size: calc(4.2 * var(--kk)); }
  .kk-days li { font-size: calc(3.4 * var(--kk)); }
  .kk-days b { font-size: calc(3.8 * var(--kk)); }
  .kk-menu { font-size: calc(3.8 * var(--kk)); }
  .kk-bar button, .kk-bar .kk-exit { font-size: calc(3.4 * var(--kk)); }
  .kk-board li, .kk-board-head, .kk-board-empty { font-size: calc(3.6 * var(--kk)); }
  .kk-cctv { min-height: calc(34 * var(--kk)); }   /* 55·40 은 너무 컸음 (사용자 2026-11-05 '조금만 더 줄여') */
  .kk-cam-side { flex-basis: 26%; }
  .kk-partner-ico { width: calc(9 * var(--kk)); height: calc(9 * var(--kk)); }
  .kk-partner-lbl { font-size: calc(2.6 * var(--kk)); }
  .kk-badge { min-width: calc(3 * var(--kk)); height: calc(3 * var(--kk)); line-height: calc(3 * var(--kk)); font-size: calc(2 * var(--kk)); }
  .kk-badge-dot { min-width: calc(2.2 * var(--kk)); height: calc(2.2 * var(--kk)); }
  .kk-board small, .kk-board-head small { font-size: calc(3 * var(--kk)); }
}