/* 0.9.9 플랫 모양(P67, 하린 시안 산출물 2026-11-04 공미_플랫테마시안) — theme.css 다음에 마지막으로 읽음. 모든 색 테마 · 밝기 공통.
 * 규칙: 그러데이션 0 · 그림자 0 · 흰(카드색) 카드 + 1px 선 · 옅은 틴트 칸 · 단추 모서리 12px · 아래 탭 = 바닥에 붙은 카드색 막대 + 위 1px 선.
 * 큰 칸(진도 카드 · 위 띠 · 단어 머리)은 글자색 글자, 강조색은 글자 · 고리 · 켜진 탭에만. O · △ · X 채점 칸은 테마색을 쓰지 않음(보조 글자색).
 * 색은 theme.css 토큰만 — 새 값(hex)을 여기 적지 않음. */

/* ── 0. 그림자 · 그러데이션 그림 없음(안전망 — 아래 규칙이 빠뜨린 곳까지) ── */
body.vk *,body.vk *::before,body.vk *::after,body .tabs,body .upd-banner{box-shadow:none!important;text-shadow:none!important;background-image:none!important}
body.vk .hm-hero::after,body.vk .hhero .orb{display:none}

/* ── 1. 카드 · 줄 = 카드색 + 1px 선 ── */
body.vk .card,body.vk .row:not(.flat),body.vk .group,body.vk .wrow,body.vk .empty,body.vk .rel,body.vk .qbox,body.vk .lecture,body.vk .daylist,body.vk .qsent,body.vk .list.wl,body.vk .ccard,body.vk .faq-i,body.vk.mock .mq-bub,body.vk .in-card{border:1px solid var(--border)}
body.vk .list.wl .wrow{border:0;border-bottom:1px solid var(--border)}
body.vk .list.wl .wrow:last-child{border-bottom:0}
body.vk .group .row,body.vk .group .wrow{border:0}
body.vk .ccard[data-dir="up"]{background:var(--tint)}
body.vk.shell .hm-dash{border:1px dashed var(--line-2)}
body.vk .cx-soon,body.vk.mock .mq-soon{border-color:var(--border)}
body.vk .exam:disabled{border-color:var(--border)}

/* ── 2. 단추 ── */
body.vk .btn,body.vk .btn.grad,body.vk .btn.deep{border-radius:12px;background:var(--btn);color:var(--on-btn)}
body.vk .btn:not(.secondary):not(.outline):not(.ob):active:not(:disabled),body.vk .btn.grad:active:not(:disabled){background:var(--btn);filter:brightness(.95)}
body.vk .btn.secondary{background:var(--tint);color:var(--acc)}
body.vk .btn.ob{background:var(--card);color:var(--text);border:1px solid var(--border)}
body.vk .btn.grad:disabled,body.vk .btn.ob:disabled,body.vk .btn:disabled{background:var(--tint);color:var(--text-2);border-color:transparent;filter:none}
body.vk .pill{background:var(--tint);color:var(--acc)}
body.vk .cpill{background:var(--btn);color:var(--on-btn);border-radius:12px;padding:9px 16px;font-size:13px}
body.vk .cpill[aria-pressed="true"]{background:var(--tint);color:var(--acc)}
/* 눌림 · 고름 칸(작은 칸) = 강조색 + --on-acc 글자 */
body.vk .seg button[aria-pressed="true"],body.vk .seg.navy button[aria-pressed="true"],body.vk .seg.mini button[aria-pressed="true"],body.vk .tool-btn.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
body.vk .chip[aria-pressed="true"],body.vk .chips.soft .chip[aria-pressed="true"]{background:var(--tint);border-color:var(--acc);color:var(--acc)}
body.vk .opt.sq.right{background:var(--acc);border-color:var(--acc)}
body.vk .opt.sq.right .t{color:var(--on-acc)}
body.vk .opt.right .radio::after{background:var(--on-acc)}
body.vk .ckb{color:var(--on-acc)}
body.vk .ckb.on{background:var(--acc);border-color:var(--acc)}
body.vk .fbk.g{background:var(--tint);color:var(--acc)}
body.vk .fbk.g i{background:var(--acc);color:var(--on-acc)}
body.vk .oxq{background:var(--tint)}
body.vk .oxc.right{background:var(--tint)}
body.vk .qtile .qi em{background:var(--acc);color:var(--on-acc)}
body.vk.shell .gl-opt[aria-pressed="true"]{border-color:var(--accent);outline:1px solid var(--accent);outline-offset:-2px;color:var(--acc)}
/* O · △ · X 채점 칸: 테마색 없이 보조 글자색(고른 칸 = 보조 글자색 바탕 + 카드색 그림) */
body.vk .gstrip{border-color:var(--border)}
body.vk .gcell{border-left-color:var(--border)}
body.vk .gcell.on{background:var(--text-2);color:var(--card)}
body.vk .btn.gbtn{background:var(--card);border:1px solid var(--border);color:var(--text-2)}
body.vk .btn.gbtn.on{background:var(--text-2);border-color:var(--text-2);color:var(--card)}
body.vk .gmark.g-no{color:var(--g-no)}
body.vk .gmark.g-unsure{color:var(--g-unsure)}
body.vk .gmark.g-yes{color:var(--good)}

/* ── 3. 위 띠(하위 화면) · 단어 머리 · 옛 홈 머리 = 카드색 + 아래 1px 선, 글자색 글자 ── */
body.vk .band{background:var(--card);color:var(--text);border-bottom:1px solid var(--border)}
body.vk .band .icon-btn{color:var(--text)}
body.vk .band .tm-dring .m-bg{stroke:var(--track)}
body.vk .band .tm-dring .m-fg{stroke:var(--acc)}
body.vk .hero{background:var(--card);color:var(--text);border-bottom:1px solid var(--border);border-radius:0}
body.vk .hero-top .icon-btn{color:var(--text)}
body.vk .hero-eyebrow{color:var(--text-2);opacity:1}
body.vk .pcard{background:var(--tint);border-color:var(--tint)}
body.vk .pcard p{color:var(--text-2);opacity:1}
body.vk .ptrack{background:var(--track)}
body.vk .rb-cell{background:var(--tint);color:var(--text)}
body.vk .rb-cell small{color:var(--text-2);opacity:1}
body.vk .rb-cell b{color:var(--acc)}
body.vk .rb-cell:focus-visible{outline-color:var(--acc)}
body.vk .rev-box .rb-empty{color:var(--text-2);opacity:1}
body.vk .hhero{background:var(--card);color:var(--text);border-bottom:1px solid var(--border)}
body.vk .hh-gear{background:var(--tint);color:var(--acc)}
body.vk .hh-brand,body.vk .hh-hi small,body.vk .hh-ring .d,body.vk .hh-ring .s{color:var(--text-2);opacity:1}
body.vk .dcell.cur{background:var(--acc);border:none;color:var(--on-acc)}
body.vk .dcell.cur b{color:var(--on-acc)}
body.vk .score{background:var(--tint);color:var(--text);border:1px solid var(--tint)}
body.vk .score .big-num{color:var(--acc)}
body.vk .chart .bar i{background:var(--acc);opacity:.4}
body.vk .chart .bar.today i{background:var(--acc);opacity:1}
body.vk .heat i.l{background:var(--heat-l)}
body.vk .heat i.m{background:var(--heat-m)}

/* ── 4. 홈 — 머리(로고 · D-day · 가이드 · 설정) · 진도 카드 · 줄 카드(시안 그대로) ── */
body.vk.shell .hm-head{gap:8px}
body.vk.shell .hm-name{display:flex;align-items:center;color:var(--acc);flex:none}
body.vk.shell .hm-logo{display:block;height:22px;width:auto}
body.vk.shell .hm-head .hm-dday{margin:0 auto 0 4px;padding:4px 12px;font-size:13px;background:var(--tint);color:var(--acc)}
body.vk.shell .hm-head .hm-dday.unset{background:var(--tint);color:var(--text-2)}
body.vk.shell .hm-hacts{display:flex;align-items:center;gap:2px;flex:none}
body.vk.shell .hm-guide{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:44px;padding:0 10px;border-radius:12px;color:var(--text);font-size:13px;line-height:18px;font-weight:700;text-decoration:none;white-space:nowrap}
body.vk.shell .hm-guide svg{width:20px;height:20px}
body.vk.shell .hm-guide .hm-guide-t{display:none}
body.vk.shell .hm-guide:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
@media (min-width:400px){body.vk.shell .hm-guide{padding:0 12px 0 10px;border:1px solid var(--border);background:var(--card);min-height:36px;margin-right:4px}body.vk.shell .hm-guide .hm-guide-t{display:inline}body.vk.shell .hm-guide svg{width:16px;height:16px}}
body.vk.shell .hm-hero{background:var(--hero-bg);border:1px solid var(--hero-bd);color:var(--text);padding:18px}
body.vk.shell .hm-top{color:var(--text);font-size:17px;line-height:24px}
body.vk.shell .hm-more{color:var(--acc);opacity:1;font-size:14px;font-weight:600}
body.vk.shell .hm-date,body.vk.shell .hm-sub{color:var(--text-2);opacity:1}
body.vk.shell .hm-ring .r-bg{stroke:var(--track)}
body.vk.shell .hm-ring .r-fg{stroke:var(--acc)}
body.vk.shell .hm-ring .r-in small{color:var(--text-2);opacity:1}
body.vk.shell .hm-ring .r-in b{color:var(--acc)}
body.vk.shell .hm-ring circle{stroke-width:8}
body.vk .hh-cta,body.vk.shell .hm-hero .hh-cta{height:52px;margin-top:4px;border-radius:12px;background:var(--btn);color:var(--on-btn);font-size:16.5px}
body.vk.shell .hm-me{background:var(--tint);color:var(--text)}
body.vk.shell .hm-me-k,body.vk.shell .hm-me-nums small{color:var(--text-2);opacity:1}
body.vk.shell .hm-me-nums b{color:var(--acc)}
body.vk.shell .gl-label,body.vk.shell .gl-date{color:var(--text-2);opacity:1}
body.vk.shell .gl-dnum{color:var(--acc)}
body.vk.shell .tm-msg{color:var(--text)}
body.vk.shell .hm-soon,body.vk.concept .cx-soon .hm-soon,body.vk.mock .mq-soon .hm-soon{background:var(--tint);color:var(--acc);font-weight:700}
/* 0.9.9 좁은 폰(≤340)만: 머리말 「오늘 Day n,」/「m개 남았어요」 두 줄에 들어가게 글자를 조금 줄임(390 이상 · 컴퓨터는 23px 그대로) */
@media (max-width:340px){body.vk.shell .hm-big{font-size:19px;line-height:27px}body.vk.shell .hm-ring{width:96px;height:96px}body.vk.shell .hm-hero{padding:16px 14px}}

/* ── 5. 아래 탭 = 바닥에 붙은 카드색 막대 + 위 1px 선 · 켜진 칸 강조색 ── */
body .tabs{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;border-radius:0;background:var(--tab);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
body .tabs a{color:var(--tab-off)}
body.vk .tabs a{color:var(--tab-off)}
body .tabs a.on,body.vk .tabs a.on{color:var(--acc);font-weight:700}
body.vk .app.with-tabs{padding-bottom:calc(84px + var(--sa-bottom))}
body.vk .toast{bottom:calc(84px + var(--sa-bottom))}
/* 넓은 화면 옆 메뉴 = 카드색 세로 막대 + 오른쪽 1px 선, 켜진 칸 = 틴트 + 강조색 */
html[data-layout="wide"] body .tabs{left:0;right:auto;top:0;bottom:0;width:var(--rail-w);border-top:0;border-right:1px solid var(--border);padding:24px 12px}
html[data-layout="wide"] body .tabs a.on{background:var(--tint);color:var(--acc)}
html[data-layout="wide"] body .tabs .tm-rail-slot,html[data-layout="wide"][data-rail="1"] body.vk .gm-rail-slot{border-bottom-color:var(--border)}
html[data-layout="wide"] body .tabs .tm-rail-slot a.tm-dock{color:var(--text)}
html[data-layout="wide"] body .tabs .tm-rail-slot .tm-dring .m-bg{stroke:var(--track)}
html[data-layout="wide"] body .tabs .tm-rail-slot .tm-dring .m-fg{stroke:var(--acc)}
html[data-layout="wide"] body.vk .gm-rail-slot .gm-loginbtn{color:var(--acc);border:1px solid var(--border)}

/* ── 6. 듣기 막대 · 새 내용 띠 · 알림 창 ── */
body.vk .player{background:var(--card);color:var(--text);border:1px solid var(--border)}
body.vk .player .pl-btn{color:var(--text)}
body.vk .player .pl-stop{background:var(--btn);color:var(--on-btn)}
body.vk .actions.lpanel{background:var(--card);color:var(--text);border-top:1px solid var(--border)}
body.vk .lpanel .pl-btn{color:var(--text)}
body.vk .lpanel .pl-btn.big{border-color:currentColor}
body .upd-banner{background:var(--tint);color:var(--text);border-bottom:1px solid var(--border)}
body .upd-banner button{background:var(--btn);color:var(--on-btn)}
body.vk .in-card{background:var(--card)}
/* 로고 크기 — 껍데기 화면 svg 20px 규칙(vk.css)보다 앞서게 */
body.vk.shell .hm-name svg.hm-logo{width:auto;height:22px}
/* 로그인 칸이 생기는 때(sync 켜짐 — .hm-head.has-acct)만, 좁은 폰(≤360)에서 머리 한 줄에 다섯 칸(로고 · D-day · 가이드 · 로그인 · 설정)이 들어가게 조금씩 줄임 */
@media (max-width:360px){
  body.vk.shell .hm-head.has-acct{gap:4px}
  body.vk.shell .hm-head.has-acct .hm-name svg.hm-logo{height:19px}
  body.vk.shell .hm-head.has-acct .hm-dday{margin-left:0;padding:3px 8px;font-size:12px}
  body.vk.shell .hm-head.has-acct .hm-guide,body.vk.shell .hm-head.has-acct .icon-btn{width:36px;min-width:36px;padding:0}
  body.vk.shell .hm-head.has-acct .gm-loginbtn{min-width:0;padding:0 6px;font-size:13px}
}
/* 0.9.10(11-04 요청): 앱 안 브라우저 안내 — 옅은 틴트 칸 + 1px 선, 홈 맨 위 · 학습 설정 발음 소리 아래 */
body.vk .ia-note{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 12px;padding:12px 40px 12px 14px;background:var(--tint);border:1px solid var(--border);border-radius:12px;color:var(--text)}
body.vk #ia-note-set{margin:8px 0 12px;padding-right:14px}
body.vk .ia-msg{margin:0;font-size:14px;line-height:1.5}
body.vk .ia-note a.btn.ia-go{display:inline-flex;width:auto;min-height:36px;margin:0;padding:0 14px;font-size:14px;font-weight:600;border-radius:10px;background:var(--card);border:1px solid var(--border);color:var(--acc);text-decoration:none;align-items:center}
body.vk .ia-how{font-size:13px;color:var(--text-2)}
body.vk .ia-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;background:none;color:var(--text-2);font-size:20px;line-height:1;cursor:pointer}