/* 고수 허브 홈 B2d (2026-10-04) — 빠른 작업 4칸 + 묶음 패널 5개(한 줄 목록) + 묶음 색 아이콘
   기준: 드라이브 어플개발\고수허브_디자인시안\B\B2d_구현지침.md · B2d.html
   index.html 맨 마지막에 건다. 홈 마크업은 app.js homeTiles()/viewHome(), 뼈대(띠·사이드바·아래 탭)는 shell(). */

/* ---------- 1. 변수 ---------- */
:root {
  --navy: #1C2E4A; --navy-2: #253A5C; --navy-3: #2C4062;
  --bg: #FFFFFF;
  --line-2: #F0F2F6;
  --chip: #F2F4F8;
  --top-h: 56px;
  --tab-h: 64px;
  --side-text: #B7C1D4;
  --side-active-bg: rgba(255, 255, 255, .08);
  /* 묶음 색 (진한 값) — 옅은 값은 color-mix 로 만든다 */
  --g-q: #3B5B9A;  /* 문제 출제하기 · 남청 */
  --g-r: #2E7A72;  /* 결과 · 청록 */
  --g-o: #A8662A;  /* 원장님께 맡기기 · 호박 */
  --g-n: #655A9A;  /* 자료 · 보라 */
  --g-s: #5A6576;  /* 함께 · 슬레이트 */
}
.g-q { --c: var(--g-q); } .g-r { --c: var(--g-r); } .g-o { --c: var(--g-o); } .g-n { --c: var(--g-n); } .g-s { --c: var(--g-s); }

/* ---------- 2. 위 회색 띠 (체험 모드 띠) ---------- */
.demo-bar {
  height: 30px; min-height: 30px; padding: 0 24px; gap: 8px;
  justify-content: flex-start; text-align: left;
  background: #F6F7FA; border-bottom: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; font-weight: 400;
}
.demo-bar b { color: var(--text-2); font-weight: 600; }
.demo-bar > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-bar + .app { min-height: calc(100dvh - 30px); }
.demo-bar + .app .sidebar { top: 30px; height: calc(100dvh - 30px); }
.demo-bar + .app .topbar { top: 30px; }

/* ---------- 3. PC 머리줄 · 사이드바 ---------- */
.topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.topbar .tb-wm { display: none; }
@media (min-width: 1025px) {
  .nav a { height: 38px; border-radius: 8px; font-size: 13.5px; }
}
.nav a .ic { width: 18px; height: 18px; color: #8392AD; opacity: 1; }
.nav a:hover .ic { color: #fff; }
.nav a.active { background: var(--side-active-bg); color: #fff; font-weight: 600; }
.nav a.active .ic { color: #fff; }
.nav a.active::before { display: none; }
.nav a.hot { background: none; color: var(--side-text); font-weight: 500; }
.nav a.hot:hover { background: var(--side-hover); color: #fff; }
.nav a.hot.active { background: var(--side-active-bg); color: #fff; font-weight: 600; }
.hot-dot { background: rgba(232, 164, 105, .18); color: #F0B27A; }

/* ---------- 4. 홈 본문 ---------- */
.main.home-b2d { max-width: 1100px; padding: 28px 36px 48px; }
.home-b2d a:hover { text-decoration: none; }
.hhello { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hhello h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; }
.hhello p { margin-top: 4px; font-size: 13.5px; color: var(--text-3); }
.hhello .home-logout { display: none; flex: none; }
#progBand:not(:empty) { margin-top: 20px; }
#progBand .pg-band { margin-bottom: 0; }

/* 빠른 작업 */
.hquick-t { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 28px 0 12px; }
.hquick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hq {
  display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 76px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.hq:hover { border-color: color-mix(in srgb, var(--c) 35%, #fff); color: var(--text); }
.hq-ic {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c);
}
.hq-ic .ic { width: 21px; height: 21px; }
.hq-t { min-width: 0; display: flex; flex-direction: column; }
.hq b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.hq small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.hq.hq-main { background: var(--navy); border-color: var(--navy); color: #fff; }
.hq.hq-main:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.hq.hq-main .hq-ic { background: rgba(255, 255, 255, .12); color: #fff; }
.hq.hq-main small { color: #AFBBD0; }

/* 묶음 패널 */
.hcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.hcols-m { display: none; }
.hpanel { margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.hpanel-h {
  position: relative; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; row-gap: 2px;
  padding: 11px 16px 11px 19px;
  background: color-mix(in srgb, var(--c) 7%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--c) 14%, #fff);
}
.hpanel-h::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.hpanel-h h2 { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.hcnt {
  font-size: 11px; font-weight: 700; line-height: 17px; padding: 0 7px; border-radius: 9px;
  color: var(--c); background: #fff; border: 1px solid color-mix(in srgb, var(--c) 25%, #fff);
}
.hpanel-h small { font-size: 12px; color: var(--text-3); line-height: 1.45; }

/* 목록 줄 */
.hrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 58px; color: var(--text); }
.hrow + .hrow { border-top: 1px solid var(--line-2); }
.hrow:hover { background: color-mix(in srgb, var(--c) 4%, #fff); color: var(--text); }
.hrow-ic {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c);
}
.hrow-ic .ic { width: 18px; height: 18px; }
.hrow-t { flex: 1; min-width: 0; }
.hrow-t b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.hrow-t small { display: block; font-size: 12px; color: var(--text-3); line-height: 1.4; margin-top: 1px; }
.hrow-go { flex: none; display: grid; color: #C0C6D1; }
.hrow-go .ic { width: 16px; height: 16px; }
.hrow.key .hrow-ic { background: var(--c); color: #fff; }
.hbadge {
  flex: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 5px; color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff);
}

/* 준비 중 줄 */
.hsoon {
  margin-top: 26px; display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px dashed #D9DEE7; border-radius: 12px; color: var(--text-3); font-size: 13px;
}
.hsoon:hover { color: var(--text-2); border-color: var(--line-strong); }
.hsoon b { color: var(--text-2); font-weight: 600; }
.hsoon .ic { width: 16px; height: 16px; }
.hsoon-sp { flex: 1; }

/* 소식 띠 (이벤트 · 분석지 · 아이디어) — 홈 맨 아래로 */
.hnews { margin-top: 32px; }
.hnews:empty { display: none; }

/* ---------- 5. 아래 탭 (휴대폰) ---------- */
.bottom-tabs { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--line); }
.bottom-tabs a, .bottom-tabs button {
  justify-content: flex-end; padding-bottom: 11px; gap: 4px;
  font-size: 10.5px; font-weight: 500; color: var(--text-3);
}
.bottom-tabs .ic { width: 22px; height: 22px; }
.bottom-tabs a.active, .bottom-tabs button.active { color: var(--navy); font-weight: 700; }
.bottom-tabs .fab {
  flex: 1; width: auto; height: auto; margin: 0; align-self: stretch; border-radius: 0;
  background: none !important; box-shadow: none; color: var(--navy); font-weight: 700;
}
.bottom-tabs .fab .fab-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.bottom-tabs .fab .fab-dot .ic { width: 17px; height: 17px; }

/* ---------- 6. 태블릿 · 휴대폰 ---------- */
@media (max-width: 1024px) {
  .main.home-b2d { padding-left: 24px; padding-right: 24px; }
  .hquick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .demo-bar { height: 28px; min-height: 28px; padding: 0 16px; font-size: 11.5px; justify-content: flex-start; }
  .demo-bar + .app { min-height: calc(100dvh - 28px); }
  .demo-bar + .app .topbar { top: 28px; }
  .topbar { border-bottom-color: var(--line-2); }
  .topbar .tb-wm { display: block; margin-left: 2px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); white-space: nowrap; }
  .topbar .tb-wm:hover { text-decoration: none; }

  .main.home-b2d { padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); }
  .hhello h1 { font-size: 19px; }
  .hhello p { font-size: 13px; }

  .hquick-t { margin: 22px 0 10px; }
  .hquick { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hq { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-height: 0; }
  .hq-ic { width: 36px; height: 36px; }
  .hq b { font-size: 14px; }
  .hq small { display: none; }

  .hcols { display: none; }
  .hcols-m { display: block; }
  .hpanel { margin-top: 16px; }
  .hpanel-h { padding: 11px 14px 11px 17px; }
  .hpanel-h small { flex-basis: 100%; font-size: 11.5px; }

  .hrow { padding: 10px 12px 10px 14px; min-height: 62px; }
  .hrow-ic { width: 36px; height: 36px; border-radius: 10px; }
  .hrow-ic .ic { width: 19px; height: 19px; }
  .hrow-t b { font-size: 15px; }
  .hrow-t small { font-size: 12.5px; }

  .hsoon { margin-top: 22px; padding: 13px 14px; font-size: 12.5px; }
  .hnews { margin-top: 26px; }
}

/* 641~760px 에서는 머리줄 로그아웃이 숨겨지므로 인사줄 오른쪽에 하나 둔다 (640 이하·PC 는 머리줄에 있음) */
@media (min-width: 641px) and (max-width: 760px) {
  .hhello .home-logout { display: inline-flex; height: 30px; padding: 0 10px; font-size: 12.5px; color: var(--text-2); }
}

/* ---------- 7. 다크 모드 ---------- */
:root[data-theme="dark"] {
  --bg: #0F1522; --surface: #161E2E; --line: #263147; --line-2: #1E283A;
  --text: #E8ECF4; --text-2: #B4BDCC; --text-3: #7F8AA0; --navy: #2A4170; --navy-2: #34507F;
  --g-q: #8FA8E0; --g-r: #6FC1B6; --g-o: #E0A469; --g-n: #A99BE0; --g-s: #A3ADBD;
}
:root[data-theme="dark"] .demo-bar { background: var(--surface); }
:root[data-theme="dark"] .hpanel, :root[data-theme="dark"] .hq:not(.hq-main) { background: var(--surface); }
:root[data-theme="dark"] .hq:not(.hq-main):hover { border-color: color-mix(in srgb, var(--c) 40%, var(--surface)); }
:root[data-theme="dark"] .hpanel-h { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--c) 22%, var(--surface)); }
:root[data-theme="dark"] .hrow-ic, :root[data-theme="dark"] .hq:not(.hq-main) .hq-ic { background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
:root[data-theme="dark"] .hrow:hover { background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
:root[data-theme="dark"] .hbadge { background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
:root[data-theme="dark"] .hcnt { background: var(--surface); border-color: color-mix(in srgb, var(--c) 35%, var(--surface)); }
:root[data-theme="dark"] .hrow.key .hrow-ic { background: var(--c); color: #1A1206; }
:root[data-theme="dark"] .hrow-go { color: #4A5670; }
:root[data-theme="dark"] .hsoon { border-color: var(--line); }
:root[data-theme="dark"] .topbar .tb-wm { color: var(--text); }
:root[data-theme="dark"] .bottom-tabs a.active, :root[data-theme="dark"] .bottom-tabs .fab { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1522; --surface: #161E2E; --line: #263147; --line-2: #1E283A;
    --text: #E8ECF4; --text-2: #B4BDCC; --text-3: #7F8AA0; --navy: #2A4170; --navy-2: #34507F;
    --g-q: #8FA8E0; --g-r: #6FC1B6; --g-o: #E0A469; --g-n: #A99BE0; --g-s: #A3ADBD;
  }
  :root:not([data-theme="light"]) .demo-bar { background: var(--surface); }
  :root:not([data-theme="light"]) .hpanel, :root:not([data-theme="light"]) .hq:not(.hq-main) { background: var(--surface); }
  :root:not([data-theme="light"]) .hq:not(.hq-main):hover { border-color: color-mix(in srgb, var(--c) 40%, var(--surface)); }
  :root:not([data-theme="light"]) .hpanel-h { background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--c) 22%, var(--surface)); }
  :root:not([data-theme="light"]) .hrow-ic, :root:not([data-theme="light"]) .hq:not(.hq-main) .hq-ic { background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
  :root:not([data-theme="light"]) .hrow:hover { background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
  :root:not([data-theme="light"]) .hbadge { background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
  :root:not([data-theme="light"]) .hcnt { background: var(--surface); border-color: color-mix(in srgb, var(--c) 35%, var(--surface)); }
  :root:not([data-theme="light"]) .hrow.key .hrow-ic { background: var(--c); color: #1A1206; }
  :root:not([data-theme="light"]) .hrow-go { color: #4A5670; }
  :root:not([data-theme="light"]) .hsoon { border-color: var(--line); }
  :root:not([data-theme="light"]) .topbar .tb-wm { color: var(--text); }
  :root:not([data-theme="light"]) .bottom-tabs a.active, :root:not([data-theme="light"]) .bottom-tabs .fab { color: var(--text); }
}
/* 10-05 빠른 작업 4칸 — 각자 색 (원장님) */
.hq.hq-c { border: 0; color: #fff; box-shadow: 0 6px 16px rgba(14,22,41,.14); transition: transform .15s, box-shadow .15s; }
.hq.hq-c:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(14,22,41,.2); }
.hq.hq-c .hq-ic { background: rgba(255,255,255,.2); color: #fff; }
.hq.hq-c b { font-weight: 800; }
.hq.hq-c small { color: rgba(255,255,255,.85); }
.hq-up { background: linear-gradient(135deg, #FF4D5E, #FF8A3D); }
.hq-up .hq-ic { border-radius: 12px; outline: 2px solid rgba(255,255,255,.55); outline-offset: -2px; }
.hq-pf { background: linear-gradient(135deg, #1A5CFF, #4FB3F6); }
.hq-sim { background: linear-gradient(135deg, #7048E8, #B57BFF); }
.hq-rm { background: linear-gradient(135deg, #0E9F6E, #3DD6A0); }
/* 10-05 인계 결정 대기 2건 — 추천안으로 먼저 맞춤 (원장님 확인 전, 되돌리기 쉬움)
   1) 빨간 EVENT 띠 → 차분한 호박색 상자 */
.event-band { background: #FFF7E8; color: #3D2A0A; border: 1px solid #F2C879; box-shadow: none; border-radius: 14px; padding: 20px 22px; }
.event-band::after { display: none; }
.event-band h2 { color: #3D2A0A; font-size: 19px; }
.event-band p { color: #6B5530; }
.ev-tag { background: #F5B941; color: #3D2A0A; }
.ev-tag::before { background: #B4540A; }
.ev-main { background: #E08A12; color: #fff; box-shadow: none; height: 46px; font-size: 15px; }
.ev-main:hover { background: #C77508; color: #fff; }
.ev-sub a { background: #fff; color: #6B4A12; border: 1px solid #F2C879; }
.ev-sub a b { background: #E08A12; color: #fff; }
/* 2) 로그인 화면 → 새 남색(사이드바와 같은 #1C2E4A) */
.hub-login { background: radial-gradient(circle at 85% 10%, rgba(79,179,246,.12), transparent 45%), #1C2E4A; }
:root[data-theme="dark"] .event-band { background: #2A2210; color: #F5E6C8; border-color: #6B5226; }
:root[data-theme="dark"] .event-band h2 { color: #F5E6C8; } :root[data-theme="dark"] .event-band p { color: #D9C59C; }
/* 10-06 빠른 작업 다섯 번째 「내 학습지 바로 뽑기」(호박 · 금색) — PC 5열 */
.hquick.hquick5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hq-my { background: linear-gradient(135deg, #D97706, #F2B90C); }
.hq.hq-c.hq-my b, .hq.hq-c.hq-my small { text-shadow: 0 1px 2px rgba(120,60,0,.25); }
@media (max-width: 1024px) { .hquick.hquick5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hquick5 .hq-my { grid-column: 1 / -1; } }
/* 10-06 홈 「내 학습지 바로 뽑기」 줄 — PC 4열 · 휴대폰 2열 */
.hmy { margin-top: 4px; border-radius: 14px; transition: box-shadow .3s; }
.hmy.flash { animation: hmyFlash 1.8s ease 1; }
@keyframes hmyFlash { 0%, 60% { box-shadow: 0 0 0 4px rgba(242,185,12,.55); background: rgba(242,185,12,.08); } 100% { box-shadow: 0 0 0 0 rgba(242,185,12,0); } }
.hmy-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hmy-all { font-size: 12.5px; font-weight: 700; color: var(--brand, #1A5CFF); white-space: nowrap; }
.hmy-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hmy-c { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
.hmy-c.pin { border-color: #F2C879; background: color-mix(in srgb, #F2B90C 6%, var(--surface, #fff)); }
.hmy-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--text); min-height: 2.7em; word-break: keep-all; overflow-wrap: anywhere; }
.hmy-star { color: #E39B00; margin-right: 3px; }
.hmy-s { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmy-b { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.hmy-b .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.hmy-b .btn[data-hsend] { flex: none; }
.hmy-b { flex-wrap: wrap; } .hmy-b .btn { min-width: max-content; }      /* 10-06 「수업」 단추가 더해져 넘치면 다음 줄로(겹치지 않게) */
.hmy-empty { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; font-size: 13px; color: var(--text-2); }
@media (max-width: 760px) {
  .hmy-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hmy-c { padding: 10px 9px 9px; }
  .hmy-t { font-size: 13.5px; }
  .hmy-b { flex-wrap: wrap; } .hmy-b .btn { font-size: 12px; }
  .hmy-b .btn[data-hsend] { flex: 1 1 100%; }
}
/* 10-06 내 학습지: 홈 고정 별 · 반 줄 · 반별 묶음 */
.ms-pin { border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 4px 0 0; color: #B8BFCC; vertical-align: -1px; }
.ms-pin.on { color: #E39B00; } .ms-pin:hover { color: #E39B00; }
.ms-clsbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.ms-ccs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ms-cc { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface, #fff); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ms-cc small { font-size: 11px; font-weight: 700; color: var(--text-3); }
.ms-cc.on { border-color: var(--navy); background: var(--navy); color: #fff; } .ms-cc.on small { color: rgba(255,255,255,.75); }
.ms-tbl tr.ms-gh td { background: var(--surface-2, #F6F8FC); padding: 0; }
.ms-gh button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.ms-gh b { font-size: 14px; } .ms-gh small { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.ms-gh-ar { width: 14px; color: var(--text-3); }
/* 내 학습지 단추 칸: 폰 PDF 창용 .ms-acts .btn{width:100%} 가 섞여 문제집 줄 「미리보기」가 가운데로 늘어나던 것 → 표 안에서는 제 너비 · 오른쪽 정렬 */
.ms-tbl .ms-acts .btn { width: auto; flex: none; }
.ms-tbl .ms-acts { display: flex; margin-top: 0; }
@media (max-width: 899px) {
  .ms-tbl tr.ms-gh { padding: 0; } .ms-tbl tr.ms-gh td { display: block; }
  .ms-tbl .ms-acts { flex-wrap: wrap; justify-content: flex-start; margin-top: 6px; }
}
.ms-tbl tr.ms-gh.sub td { background: transparent; }
.ms-gh.sub button { padding: 6px 12px 6px 34px; color: var(--text-2); } .ms-gh.sub b { font-size: 12.5px; }
/* 10-06 홈 「테스트 고르기」 판 — PC 5열 · 태블릿 3열 · 휴대폰 2열. 묶음 색 a 반 배치 · b 수업 중 확인 · f 마무리 · d 시험 대비 · e 특별 */
.htb { margin-top: 6px; }
.htb-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.htb-c { --c: #4C6EF5; position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--c) 5%, var(--surface, #fff)); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.htb-c:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); box-shadow: 0 6px 14px rgba(14,22,41,.08); }
.htb-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; }
.htb-ic .ic { width: 19px; height: 19px; }
.htb-t { min-width: 0; display: flex; flex-direction: column; }
.htb-t b { font-size: 14px; font-weight: 700; line-height: 1.3; word-break: keep-all; }
.htb-t small { font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.35; }
.htb-ready { position: absolute; top: 6px; right: 7px; font-style: normal; font-size: 10px; font-weight: 800; padding: 0 6px; line-height: 16px; border-radius: 99px; background: color-mix(in srgb, var(--c) 16%, var(--surface, #fff)); color: var(--c); }
.htb-c.htb-a { --c: #0C8599; } .htb-c.htb-f { --c: #E8590C; } .htb-c.htb-b { --c: #3B5BDB; } .htb-c.htb-d { --c: #C2255C; } .htb-c.htb-e { --c: #5F3DC4; }
.tbm-sems { display: grid; gap: 8px; margin-top: 10px; }
.tbm-sg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tbm-gn { width: 46px; flex: none; font-size: 12px; font-weight: 700; color: var(--text-3); }
.tbm-pend { margin-top: 6px; }
.tbm-list { margin-top: 12px; display: grid; gap: 8px; max-height: 52vh; overflow: auto; }
.tbm-it { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); }
.tbm-tt { flex: 1; min-width: 0; } .tbm-tt b { display: block; font-size: 14px; line-height: 1.35; } .tbm-tt small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.tbm-b { flex: none; display: flex; gap: 6px; }
@media (max-width: 1024px) { .htb-g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .htb-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .htb-c { padding: 10px; gap: 8px; } .htb-ic { width: 32px; height: 32px; } .htb-t b { font-size: 13.5px; } .htb-t small { font-size: 11px; }
  .tbm-it { flex-direction: column; align-items: stretch; } .tbm-b .btn { flex: 1; justify-content: center; } .tbm-b .btn[data-send] { flex: none; }
  .tbm-gn { width: 100%; }
}

/* 10-06 원장님: 「만들기」 묶음에 색감 — 당분간 제일 많이 씀. 줄마다 제 색 아이콘(그라데이션) · 옅은 바탕 · 머리 띠 */
.hpanel.g-q { border-color: color-mix(in srgb, #2563EB 22%, var(--line)); box-shadow: 0 6px 18px -10px rgba(37,99,235,.35); }
.hpanel.g-q .hpanel-h { background: linear-gradient(90deg, #EAF1FF 0%, #F3ECFF 55%, #FFF1E6 100%); }
.hpanel.g-q .hpanel-h::before { width: 4px; background: linear-gradient(180deg, #2563EB, #7C3AED 50%, #F97316); }
.hpanel.g-q .hrow { min-height: 64px; }
.hpanel.g-q .hrow:nth-child(1) { --rc: #2563EB; --rc2: #38BDF8; }
.hpanel.g-q .hrow:nth-child(2) { --rc: #059669; --rc2: #34D399; }
.hpanel.g-q .hrow:nth-child(3) { --rc: #7C3AED; --rc2: #C084FC; }
.hpanel.g-q .hrow:nth-child(4) { --rc: #EA580C; --rc2: #FBBF24; }
.hpanel.g-q .hrow-ic { width: 40px; height: 40px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--rc), var(--rc2)); box-shadow: 0 4px 10px -4px var(--rc); }
.hpanel.g-q .hrow-ic .ic { width: 20px; height: 20px; }
.hpanel.g-q .hrow-t b { font-size: 15px; font-weight: 700; }
.hpanel.g-q .hrow-t small { color: color-mix(in srgb, var(--rc) 55%, var(--text-3)); }
.hpanel.g-q .hrow { box-shadow: inset 0 0 0 0 var(--rc); transition: background .15s, box-shadow .15s; }
.hpanel.g-q .hrow:hover { background: color-mix(in srgb, var(--rc) 7%, #fff); box-shadow: inset 4px 0 0 0 var(--rc); }
.hpanel.g-q .hrow:hover .hrow-go { color: var(--rc); }
.hpanel.g-q .hbadge { color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, #fff); }
:root[data-theme="dark"] .hpanel.g-q .hpanel-h { background: linear-gradient(90deg, #172554 0%, #2E1065 55%, #431407 100%); }
:root[data-theme="dark"] .hpanel.g-q .hrow:hover { background: color-mix(in srgb, var(--rc) 14%, var(--surface)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hpanel.g-q .hpanel-h { background: linear-gradient(90deg, #172554 0%, #2E1065 55%, #431407 100%); }
  :root:not([data-theme="light"]) .hpanel.g-q .hrow:hover { background: color-mix(in srgb, var(--rc) 14%, var(--surface)); }
}

/* 10-06 원장님: 「내 학습지 바로 뽑기」 — 큰 상자 말고 카드마다 제 색 · 「내 학습지 전체」 크고 잘 보이게 */
.hmy.flash { animation: none; }
.hmy.flash .hmy-c { animation: hmyCard 1.6s ease 1; }
.hmy.flash .hmy-c:nth-child(2) { animation-delay: .08s; } .hmy.flash .hmy-c:nth-child(3) { animation-delay: .16s; } .hmy.flash .hmy-c:nth-child(4) { animation-delay: .24s; }
@keyframes hmyCard { 0%, 55% { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--mc), 0 10px 22px -12px var(--mc); } 100% { transform: none; box-shadow: none; } }
.hmy-c { --mc: #2563EB; border-top: 4px solid var(--mc); background: color-mix(in srgb, var(--mc) 6%, var(--surface, #fff)); border-color: color-mix(in srgb, var(--mc) 28%, var(--line)); }
.hmy-c:nth-child(4n+2) { --mc: #059669; } .hmy-c:nth-child(4n+3) { --mc: #7C3AED; } .hmy-c:nth-child(4n+4) { --mc: #EA580C; }
.hmy-c.pin { border-top-color: #E39B00; }
.hmy-c:hover { box-shadow: 0 8px 18px -12px var(--mc); }
.hmy-h { align-items: center; margin-bottom: 8px; }
.hmy-all { font-size: 14.5px; font-weight: 800; color: #fff !important; background: linear-gradient(135deg, #EF4444, #F97316); padding: 9px 18px; border-radius: 999px; box-shadow: 0 6px 14px -8px rgba(239,68,68,.8); }
.hmy-all:hover { filter: brightness(1.06); text-decoration: none; }
@media (max-width: 720px) { .hmy-all { font-size: 13px; padding: 7px 14px; } }

/* 10-07 원장님: 빠른 작업 6번째 「오늘 진도 쓰기」 — 진하지 않게: 둘레만 색(청록), 가운데는 바탕색. 심플하되 허전하지 않게 */
.hquick.hquick6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hq.hq-c.hq-pg { background: var(--surface, #fff); border: 2px solid #14B8A6; color: var(--text); box-shadow: 0 6px 16px -12px rgba(20,184,166,.55); position: relative; overflow: hidden; }
.hq.hq-c.hq-pg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #14B8A6, #0EA5E9); }
.hq.hq-c.hq-pg::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,.12), rgba(20,184,166,0) 70%); }
.hq.hq-c.hq-pg b { color: #0F766E; text-shadow: none; }
.hq.hq-c.hq-pg small { color: color-mix(in srgb, #0F766E 70%, var(--text-3, #667)); text-shadow: none; }
.hq.hq-c.hq-pg .hq-ic { background: color-mix(in srgb, #14B8A6 12%, #fff); color: #0F766E; border: 1px solid color-mix(in srgb, #14B8A6 35%, #fff); }
.hq.hq-c.hq-pg:hover { background: color-mix(in srgb, #14B8A6 5%, var(--surface, #fff)); }
:root[data-theme="dark"] .hq.hq-c.hq-pg b { color: #5EEAD4; }
:root[data-theme="dark"] .hq.hq-c.hq-pg .hq-ic { background: color-mix(in srgb, #14B8A6 18%, var(--surface)); color: #5EEAD4; }
@media (max-width: 1400px) { .hquick.hquick6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .hquick.hquick6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hquick6 .hq-my { grid-column: auto; } }

/* ===== 10-09 원장님: 홈 다시 (app.js HOME_V2 가 켜졌을 때만 — .main.home-v2) — 맨 위 「만들기」 가로 한 줄 · 빠른 작업 작고 차분하게(원색 그라데이션 없앰) =====
   색은 변수 하나로: 학습지 · 문제집 고르기 판 색 안(A 남색 / B 회색+청록)과 같은 계열. 안을 바꾸면 홈도 함께 바뀐다. */
:root {   /* 10-09 원장님 「탁하다 · 밝고 선명하게」 — 밝은 파랑 계열. 새 밝은 색 토큰이 오면 여기 값만 바꾼다 */
  --hk-accent: #2563EB;     /* 강조 1 — 아이콘 · 단추 (흰 글자 5.2:1) */
  --hk-accent-2: #EA580C;   /* 강조 2 — 「시험지 · 프린트 올리기」 한 곳만 */
  --hk-soft: #EFF5FF;       /* 옅은 바탕 */
  --hk-ink: var(--text, #161B26);
  --hk-line: #DCE5F5;
  --hk-card: var(--surface, #FFFFFF);
}
:root[data-theme="dark"] { --hk-accent: #60A5FA; --hk-accent-2: #FB923C; --hk-soft: rgba(96,165,250,.12); --hk-line: #2C3850; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hk-accent: #60A5FA; --hk-accent-2: #FB923C; --hk-soft: rgba(96,165,250,.12); --hk-line: #2C3850; }
}

/* 1) 만들기 — 홈 주인공. 네 칸(원장님) · 세 칸(선생님) 같은 크기, 밝고 선명한 한 벌.
   글자가 놓이는 왼쪽 · 가운데(50%까지)는 흰 글자 4.5:1 이상 색(m0 · m1), 가장 밝은 색(m2)은 그림이 있는 오른쪽 아래 끝에만 */
:root {
  --hk-s0: #1E40AF; --hk-s1: #2563EB; --hk-s2: #60A5FA;   /* 학습지 — 코발트 파랑 */
  --hk-t0: #6D28D9; --hk-t1: #9333EA; --hk-t2: #E879F9;   /* 테스트지 — 보라 · 자홍 */
  --hk-b0: #115E59; --hk-b1: #0F766E; --hk-b2: #2DD4BF;   /* 문제집 — 청록 */
  --hk-p0: #9A3412; --hk-p1: #C2410C; --hk-p2: #FBBF24;   /* 퍼펙트 — 주황 · 금빛 */
}
.hmake .hquick-t { margin-top: 22px; }
.hmk-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hmk-g.hmk-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hmk { --m0: var(--hk-s0); --m1: var(--hk-s1); --m2: var(--hk-s2);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  padding: 16px 18px 14px; border-radius: 18px; color: #fff; border: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.28), transparent 42%),
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px) 0 0 / 14px 14px,
    linear-gradient(125deg, var(--m0) 0%, var(--m1) 50%, var(--m2) 100%);
  box-shadow: 0 12px 26px -16px var(--m1), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
  animation: hmkIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes hmkIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hmk.hmk-kt { --m0: var(--hk-t0); --m1: var(--hk-t1); --m2: var(--hk-t2); }
.hmk.hmk-kb { --m0: var(--hk-b0); --m1: var(--hk-b1); --m2: var(--hk-b2); }
.hmk.hmk-kp { --m0: var(--hk-p0); --m1: var(--hk-p1); --m2: var(--hk-p2); }
/* 빛이 한 번 지나감 */
.hmk::before { content: ""; position: absolute; z-index: 1; inset: -20% auto -20% -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-18deg); opacity: 0; }
.hmk:hover::before { animation: hmkShine .8s ease-out 1; }
@keyframes hmkShine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.hmk::after { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 66%); transition: transform .3s ease; }
.hmk:hover { color: #fff; transform: translateY(-5px); box-shadow: 0 22px 34px -18px var(--m1), inset 0 1px 0 rgba(255,255,255,.22); }
.hmk:hover::after { transform: scale(1.15); }
.hmk:active { transform: translateY(-1px); }
.hmk:focus-visible { outline: 3px solid var(--m2); outline-offset: 3px; }
.hmk-art { position: absolute; z-index: -1; right: 2px; bottom: -8px; width: 92px; height: 92px; opacity: .9; transform: rotate(-6deg); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hmk-art svg { width: 100%; height: 100%; display: block; }
.hmk:hover .hmk-art { transform: rotate(3deg) translate(-4px, -8px) scale(1.08); }
.hmk-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); transition: transform .25s ease; }
.hmk:hover .hmk-ic { transform: scale(1.06) rotate(-4deg); }
.hmk-ic .ic { width: 23px; height: 23px; }
.hmk-t { min-width: 0; display: flex; flex-direction: column; margin-top: 12px; padding-right: 60px; }
.hmk-t b { font-size: 19px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; white-space: nowrap; color: #fff; }
.hmk-t small { font-size: 13px; color: rgba(255,255,255,.92); margin-top: 4px; line-height: 1.4; }
.hmk-n { margin-top: 10px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,.2); color: #fff; }
.hmk-n:empty { display: none; }
.hmk-n i { font-style: normal; }
.hmk-go { position: absolute; z-index: 2; top: 16px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; transition: background .15s, transform .2s, color .15s; }
.hmk-go .ic { width: 16px; height: 16px; }
.hmk:hover .hmk-go { background: #fff; color: var(--m0); transform: translateX(3px); }
:root[data-theme="dark"] .hmk { box-shadow: 0 12px 26px -16px #000, inset 0 1px 0 rgba(255,255,255,.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hmk { box-shadow: 0 12px 26px -16px #000, inset 0 1px 0 rgba(255,255,255,.14); } }
@media (prefers-reduced-motion: reduce) {
  .hmk, .hmk-art, .hmk-go, .hmk-ic, .hmk::after { animation: none; transition: none; }
  .hmk:hover, .hmk:hover .hmk-art, .hmk:hover .hmk-ic, .hmk:hover::after { transform: none; }
  .hmk:hover::before { animation: none; }
}

/* 2) 카메라로 채점 — 조금 낮게, 같은 색 계열 */
.home-v2 .camcta.home { margin: 14px 0 0; min-height: 76px; padding: 6px 20px 6px 18px; border-radius: 14px;
  background: linear-gradient(120deg, #1D4ED8 0%, #2563EB 55%, #0EA5E9 100%); box-shadow: 0 8px 18px -12px rgba(37,99,235,.6); }
.home-v2 .camcta.home .camcta-ph { height: 68px; }
.home-v2 .camcta.home .camcta-t b { font-size: 19px; }
.home-v2 .camcta.home .camcta-t small { font-size: 13px; }
.home-v2 .camcta.home .camcta-go { padding: 7px 14px; font-size: 13.5px; color: #1D4ED8; }
:root[data-theme="dark"] .home-v2 .camcta.home { background: linear-gradient(120deg, #1E3A8A 0%, #1D4ED8 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-v2 .camcta.home { background: linear-gradient(120deg, #1E3A8A 0%, #1D4ED8 100%); } }

/* 3) 빠른 작업 — 작은 아이콘 + 글자, 차분한 한 색 (시험지 올리기만 강조 2) */
.home-v2 .hquick.hquick6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.home-v2 .hquick .hq.hq-c { flex-direction: row; align-items: center; gap: 9px; min-height: 56px; padding: 9px 10px;
  background: var(--hk-card); border: 1px solid var(--hk-line); border-radius: 11px; color: var(--hk-ink); box-shadow: none; overflow: hidden; }
.home-v2 .hquick .hq.hq-c::before, .home-v2 .hquick .hq.hq-c::after { display: none; }
.home-v2 .hquick .hq.hq-c:hover { transform: none; border-color: var(--hk-accent); background: var(--hk-soft); color: var(--hk-ink); box-shadow: none; }
.home-v2 .hquick .hq.hq-c .hq-ic { width: 30px; height: 30px; border-radius: 8px; border: 0; outline: 0; background: var(--hk-soft); color: var(--hk-accent); }
.home-v2 .hquick .hq.hq-c .hq-ic .ic { width: 16px; height: 16px; }
.home-v2 .hquick .hq.hq-c b { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--hk-ink); text-shadow: none; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-v2 .hquick .hq.hq-c small { display: none; }
.home-v2 .hquick .hq.hq-c.hq-up .hq-ic { background: var(--hk-accent-2); color: #fff; }
.home-v2 .hquick .hq.hq-c.hq-up { border-color: color-mix(in srgb, var(--hk-accent-2) 40%, var(--hk-line)); }
:root[data-theme="dark"] .home-v2 .hquick .hq.hq-c.hq-up .hq-ic { color: #1A1206; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-v2 .hquick .hq.hq-c.hq-up .hq-ic { color: #1A1206; } }
.home-v2 .hquick5 .hq-my { grid-column: auto; }

/* 4) 테스트 고르기 · 내 학습지 바로 뽑기 — 「전체」 단추는 강조색으로 차분하게 */
.home-v2 #hMyBox:not(:empty) { margin-top: 6px; }
.home-v2 .hmy-all { background: var(--hk-accent); box-shadow: none; padding: 7px 14px; font-size: 13px; font-weight: 700; }
:root[data-theme="dark"] .home-v2 .hmy-all { color: #10182A !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-v2 .hmy-all { color: #10182A !important; } }

@media (max-width: 1024px) {
  .home-v2 .hquick.hquick6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hmk-g.hmk-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 휴대폰 — 만들기 세 칸 한 줄(아이콘 위 · 글자 아래), 빠른 작업 3칸 × 2줄 */
@media (max-width: 760px) {
  .hmake .hquick-t { margin-top: 18px; }
  .hmk-g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hmk-g.hmk-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hmk { align-items: center; text-align: center; padding: 14px 6px 11px; min-height: 124px; border-radius: 14px; background-size: auto, 12px 12px, auto; }
  .hmk-art { width: 62px; height: 62px; right: -10px; bottom: -12px; opacity: .45; }
  .hmk-ic { width: 40px; height: 40px; border-radius: 12px; } .hmk-ic .ic { width: 21px; height: 21px; }
  .hmk-t { margin-top: 9px; padding-right: 0; align-items: center; }
  .hmk-t b { font-size: 14.5px; letter-spacing: -.03em; white-space: normal; } .hmk-t small, .hmk-go { display: none; }
  .hmk-n { margin-top: 7px; font-size: 10.5px; padding: 2px 7px; }
  .hmk-g.hmk-4 .hmk { min-height: 112px; }
  .hmk-g.hmk-4 .hmk-art { width: 70px; height: 70px; opacity: .6; }
  .home-v2 .camcta.home { min-height: 64px; padding: 4px 14px; gap: 10px; }
  .home-v2 .camcta.home .camcta-ph { height: 56px; }
  .home-v2 .camcta.home .camcta-t b { font-size: 16.5px; }
  .home-v2 .camcta.home .camcta-t small { font-size: 12px; }
  .home-v2 .hquick.hquick6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .home-v2 .hquick .hq.hq-c { flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 8px 4px; min-height: 0; }
  .home-v2 .hquick .hq.hq-c .hq-ic { width: 28px; height: 28px; }
  .home-v2 .hquick .hq.hq-c b { font-size: 11.5px; }
  .home-v2 .hquick .hq-t { align-items: center; }
}
.home-v2 .hmake { margin-bottom: 16px; }
.home-v2 .hmake ~ #progBand:not(:empty) { margin-top: 0; margin-bottom: 0; }
:root .home-v2 .hquick .hq.hq-c.hq-pg b { color: var(--hk-ink); }
:root .home-v2 .hquick .hq.hq-c.hq-pg .hq-ic { background: var(--hk-soft); color: var(--hk-accent); border: 0; }
@media (max-width: 760px) { .home-v2 .htb-c:has(.htb-ready) .htb-t { padding-right: 24px; } }      /* 「바로」 꼬리표가 제목에 겹치던 것 */

/* 10-09 테스트 고르기 칸 아이콘 — 밝은 파랑 계열(원장님 「밝고 선명하게」) */
.home-v2 .htb-c.htb-a { --c: #2563EB; } .home-v2 .htb-c.htb-b { --c: #3B82F6; } .home-v2 .htb-c.htb-d { --c: #0891B2; }
.home-v2 .htb-c.htb-e { --c: #4F46E5; } .home-v2 .htb-c.htb-f { --c: #EA580C; }
:root[data-theme="dark"] .home-v2 .htb-c { --c: #60A5FA; } :root[data-theme="dark"] .home-v2 .htb-c.htb-d { --c: #22D3EE; } :root[data-theme="dark"] .home-v2 .htb-c.htb-f { --c: #FB923C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-v2 .htb-c { --c: #60A5FA; } :root:not([data-theme="light"]) .home-v2 .htb-c.htb-d { --c: #22D3EE; } :root:not([data-theme="light"]) .home-v2 .htb-c.htb-f { --c: #FB923C; } }
.hmk-n i { font-style: normal; }
@media (max-width: 760px) { .hmk-n.z { display: none; } .hmk-n i { display: none; } .hmk-n { background: rgba(0,0,0,.24); } }
@media (max-width: 760px) {      /* 휴대폰은 글자가 가운데 넓게 놓여 밝은 끝을 조금 뒤로 */
  .hmk { background: radial-gradient(circle at 88% 12%, rgba(255,255,255,.24), transparent 42%), radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px) 0 0 / 12px 12px, linear-gradient(125deg, var(--m0) 0%, var(--m1) 62%, var(--m2) 100%); }
}
/* 10-09 디자이너 밝은 색 토큰(docs/tbook_mock/palette.css 이름) — 만들기 네 칸 말고 나머지는 「색은 아이콘 칸만, 옅게 13%」 */
:root { --hk-accent: var(--p-acc, #2563EB); --hk-soft: var(--p-acc-soft, #EAF1FF); --hk-line: var(--line, #E1E8F4); --hk-accent-2: #EA580C; }
.home-v2 .hquick .hq.hq-c { --qc: var(--p-acc, #2563EB); }
.home-v2 .hquick .hq.hq-up { --qc: var(--p-coral, #F9735B); } .home-v2 .hquick .hq.hq-pf { --qc: var(--p-acc, #2563EB); }
.home-v2 .hquick .hq.hq-sim { --qc: var(--p-violet, #8B5CF6); } .home-v2 .hquick .hq.hq-rm { --qc: var(--p-teal, #14B8A6); }
.home-v2 .hquick .hq.hq-my { --qc: var(--p-yellow, #FACC15); } .home-v2 .hquick .hq.hq-pg { --qc: var(--p-sky, #0EA5E9); }
.home-v2 .hquick .hq.hq-c .hq-ic, .home-v2 .hquick .hq.hq-c.hq-up .hq-ic, :root .home-v2 .hquick .hq.hq-c.hq-pg .hq-ic { background: color-mix(in srgb, var(--qc) 13%, var(--hk-card)); color: color-mix(in srgb, var(--qc) 70%, #0F172A); border: 0; }
.home-v2 .hquick .hq.hq-c.hq-up { border-color: color-mix(in srgb, var(--qc) 45%, var(--hk-line)); }
:root[data-theme="dark"] .home-v2 .hquick .hq.hq-c .hq-ic { background: color-mix(in srgb, var(--qc) 18%, var(--hk-card)); color: var(--qc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-v2 .hquick .hq.hq-c .hq-ic { background: color-mix(in srgb, var(--qc) 18%, var(--hk-card)); color: var(--qc); } }