/* ====================================================================
   다힘 학생 메뉴 스킨 v2 «Aurora» — 2026-09-23
   _student_nav.php(웹 메가메뉴)·_app_nav.php(앱 상단바·하단 탭바)의
   구조·동작은 그대로 두고 겉모습만 바꾼다. 다크 모드([data-theme="dark"]) 유지.
   학생 색: 스카이 → 인디고 (원장=인디고·바이올렛, 강사=에메랄드와 구분)
   되돌리기: 두 파일의 dh_snav_skin.css link 한 줄을 지우면 예전 모습.
   ==================================================================== */

:root {
    --sv-1: #0ea5e9;
    --sv-2: #6366f1;
    --sv-grad: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    --sv-glow: rgba(99, 102, 241, .28);
}

/* ── 1. 헤더 바 ───────────────────────────────────────────────── */
.snav-header {
    background:
        radial-gradient(520px 90px at 8% -30%, rgba(14,165,233,.14), transparent 70%),
        radial-gradient(520px 90px at 92% -40%, rgba(99,102,241,.14), transparent 70%),
        var(--snav-bg);
    border-bottom: 1px solid rgba(148,163,184,.22);
    box-shadow: 0 8px 24px -18px rgba(15,23,42,.35);
}
.snav-header::before {                     /* 윗선 → 아랫선 오로라 */
    top: auto; bottom: -1px; height: 2px; opacity: .9;
    background: linear-gradient(90deg, transparent 0%, #0ea5e9 25%, #6366f1 60%, #a855f7 80%, transparent 100%);
}
[data-theme="dark"] .snav-header {
    background:
        radial-gradient(520px 90px at 8% -30%, rgba(14,165,233,.18), transparent 70%),
        radial-gradient(520px 90px at 92% -40%, rgba(99,102,241,.2), transparent 70%),
        var(--snav-bg);
}

/* 브랜드 */
.snav-brand .snav-mark {
    width: 36px; height: 36px; border-radius: 11px; background: var(--sv-grad);
    box-shadow: 0 6px 16px -4px var(--sv-glow), inset 0 1px 0 rgba(255,255,255,.45);
}
.snav-brand .snav-wordmark {
    background: linear-gradient(135deg, #0f172a 0%, #4f46e5 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .snav-brand .snav-wordmark { background: linear-gradient(135deg, #f8fafc 0%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; }
.snav-brand .snav-pro-badge {
    background: var(--sv-grad); color: #fff; border: 0; border-radius: 999px; padding: 2px 7px;
    box-shadow: 0 3px 8px -3px var(--sv-glow);
}

/* 데스크톱 메뉴 — 캡슐 트랙 */
@media (min-width: 1024px) {
    .snav-nav {
        flex: 0 1 auto; height: auto; margin: 0 auto; padding: 4px; gap: 2px;
        background: rgba(241,245,249,.8); border: 1px solid rgba(226,232,240,.9); border-radius: 14px;
    }
    [data-theme="dark"] .snav-nav { background: rgba(30,41,59,.6); border-color: rgba(51,65,85,.8); }
    .snav-group { height: auto; }
    .snav-toggle { padding: .42rem .78rem; border-radius: 10px; font-weight: 600; }
    .snav-toggle::after { display: none; }
    .snav-toggle:hover { background: #fff; color: var(--accent-strong, #4338ca); box-shadow: 0 2px 8px -4px rgba(15,23,42,.25); }
    .snav-group.active > .snav-toggle,
    .snav-group.open > .snav-toggle {
        background: #fff; color: var(--accent-strong, #4338ca); font-weight: 700;
        box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 12px -6px var(--sv-glow);
    }
    .snav-group.active > .snav-toggle > i:first-child { color: var(--accent, #6366f1); }
    [data-theme="dark"] .snav-toggle:hover,
    [data-theme="dark"] .snav-group.active > .snav-toggle,
    [data-theme="dark"] .snav-group.open > .snav-toggle { background: rgba(15,23,42,.9); color: #e0e7ff; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .snav-group:hover > .snav-toggle { background: #fff; color: var(--accent-strong, #4338ca); box-shadow: 0 2px 8px -4px rgba(15,23,42,.25); }
    [data-theme="dark"] .snav-group:hover > .snav-toggle { background: rgba(15,23,42,.9); color: #e0e7ff; }
}

/* ── 2. 메가 패널 — 떠 있는 카드 ──────────────────────────────── */
.snav-panel {
    left: 50%; right: auto; width: min(1240px, calc(100vw - 32px));
    top: calc(var(--snav-h) + 10px);
    border: 1px solid var(--snav-line); border-radius: 22px;
    max-height: calc(100vh - var(--snav-h) - 24px);
    box-shadow: 0 30px 70px -24px rgba(15,23,42,.42), 0 10px 24px -12px rgba(15,23,42,.16);
    transform: translate(-50%, -8px);
}
.snav-group.open > .snav-panel { transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) { .snav-group:hover > .snav-panel { transform: translate(-50%, 0); } }
.snav-panel::before { left: 24px; right: 24px; height: 3px; opacity: 1; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--accent, #0ea5e9), #6366f1); }
.snav-panel::after { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }   /* 호버 다리 */
.snav-inner { max-width: none; padding: 22px 26px 26px; }
.snav-mhead { align-items: center; border-bottom: 0; margin-bottom: 14px; padding-bottom: 4px; }
.snav-mhead-title i {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: .92rem;
    background: var(--accent, #0ea5e9); color: #fff;
    background-image: linear-gradient(135deg, rgba(255,255,255,.25), transparent);
    box-shadow: 0 6px 14px -6px var(--accent, #0ea5e9);
}
.snav-mhead-desc { padding: 3px 10px; border-radius: 999px; background: var(--snav-line-soft); color: var(--snav-ink-sub); }
.snav-cols { gap: 14px; }
.snav-col, .snav-col:first-child { padding: 12px 10px 10px; border: 0 !important; background: var(--snav-box-searchbar); border-radius: 16px; }
.snav-col-title { border-bottom: 0; color: var(--snav-ink-strong); padding: 0 8px 8px; letter-spacing: .05em; }

.snav-link { padding: 6px 8px; border-radius: 12px; gap: 10px; }
.snav-link i {
    width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .9rem;
    background: var(--snav-box-bg); color: var(--accent, #6366f1);
    box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px var(--snav-line);
}
.snav-link:hover { background: var(--snav-box-bg); transform: translateX(2px); box-shadow: 0 4px 14px -8px rgba(15,23,42,.35); }
.snav-link:hover i { background: var(--accent, #6366f1); color: #fff; box-shadow: none; transform: scale(1.04); }
.snav-link.active { background: var(--snav-box-bg); box-shadow: inset 3px 0 0 var(--accent, #6366f1), 0 4px 14px -8px rgba(15,23,42,.3); }
.snav-link.active i { background: var(--accent, #6366f1); color: #fff; box-shadow: none; }

/* ── 3. 오른쪽 도구 — 같은 크기 원형 버튼으로 정리 ─────────────── */
.snav-actions { gap: .4rem; }
.snav-theme-btn, .snav-dict-btn, .snav-noti-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--snav-box-bg); box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.snav-search-trigger, .snav-timer-btn { border-radius: 999px; padding: 6px 12px; background: var(--snav-box-bg); box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.snav-dday-pill {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%); color: #fff; border: 0;
    box-shadow: 0 6px 14px -6px rgba(239,68,68,.55);
}
.snav-dday-pill i { color: #fff; }
.snav-streak-pill { background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%); color: #fff; border: 0; box-shadow: 0 6px 14px -6px rgba(16,185,129,.55); }
.snav-welcome { background: var(--snav-box-bg); padding: 3px 10px 3px 3px; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.snav-avatar-circle { width: 28px; height: 28px; font-size: .78rem; background: var(--sv-grad); box-shadow: 0 0 0 2px var(--snav-box-bg), 0 0 0 3.5px rgba(99,102,241,.45); }
.snav-logout { border-radius: 999px; }
.snav-burger { border-radius: 12px; width: 38px; height: 38px; background: var(--snav-box-bg); }
.snav-burger span { background-color: var(--snav-ink-strong); }

/* ── 4. 모바일 서랍 — 오른쪽에서 열리는 카드 ───────────────────── */
.snav-mobile {
    background: rgba(2,6,23,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 0; transform: none !important; transition: opacity .25s ease, visibility .25s;
}
.snav-mobile .snav-mwrap {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 90vw); max-width: none; margin: 0;
    background: var(--snav-box-searchbar); padding: 0 14px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -24px 0 60px -20px rgba(2,6,23,.5);
    transform: translateX(100%); transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.snav-mobile.open .snav-mwrap { transform: translateX(0); }
.snav-mclose { z-index: 3; background: rgba(255,255,255,.2); color: #fff; }
.snav-dhead {
    margin: 0 -14px 10px; padding: 22px 18px 18px; display: flex; align-items: center; gap: 12px; color: #fff;
    background:
        radial-gradient(240px 110px at 95% 0%, rgba(168,85,247,.55), transparent 70%),
        linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}
.snav-dhead .snav-avatar-circle { width: 44px; height: 44px; font-size: 1.05rem; background: rgba(255,255,255,.22); box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.snav-dhead b { display: block; font-size: 1rem; font-weight: 800; }
.snav-dhead small { display: block; font-size: .74rem; opacity: .9; margin-top: 2px; }
.snav-macc-head {
    border: 0 !important; border-radius: 14px; background: var(--snav-box-bg); padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px var(--snav-line);
}
.snav-macc-head > i:first-child {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
    background: var(--accent-soft, #eef2ff); color: var(--accent, #6366f1);
}
.snav-macc-head.open { background: var(--snav-box-bg); box-shadow: 0 0 0 1.5px var(--accent, #6366f1), 0 8px 20px -12px rgba(15,23,42,.35); }
.snav-macc-head.open > i:first-child { background: var(--accent, #6366f1); color: #fff; }
.snav-macc-body { border-left-color: var(--accent-soft, #e0e7ff); margin-left: 22px; }
.snav-macc-link.active { background: var(--snav-box-bg); box-shadow: inset 3px 0 0 var(--accent, #6366f1); }

/* ── 5. 앱 모드 — 상단바·하단 탭바 ─────────────────────────────── */
#dh-app-top {
    background: rgba(255,255,255,.9) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 0 !important; box-shadow: 0 1px 0 rgba(226,232,240,.9), 0 6px 18px -14px rgba(15,23,42,.35);
}
#dh-app-top .t-title {
    background: linear-gradient(135deg, #0f172a 0%, #4f46e5 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#dh-app-top .t-bell { background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(99,102,241,.14)) !important; color: #4f46e5 !important; }
/* [2026-10-04 학생 메뉴 리디자인] 떠 있는 알약형 — 목업(폰 A)과 같게: 좌우 12 · 바닥 14 · 높이 64 · 모서리 20, 흰 바탕, 선택 탭은 파란 아이콘·글자(채움 없음). 다크는 html[data-theme=dark]. */
#dh-app-tabbar {
    left: 12px !important; right: 12px !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; transform: none !important;
    height: 64px !important; padding: 4px !important; align-items: stretch !important;
    background: #ffffff !important; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid #e5e8ee !important; border-top-color: #e5e8ee !important; border-radius: 20px !important;
    box-shadow: 0 10px 30px -14px rgba(15,23,42,.35) !important;
}
@media (min-width: 640px) {
    #dh-app-tabbar { left: 50% !important; right: auto !important; width: min(560px, calc(100% - 24px)) !important; transform: translateX(-50%) !important; }
}
#dh-app-tabbar a { justify-content: center; gap: 3px; border-radius: 16px; color: #64748b; font-weight: 500; }
#dh-app-tabbar a.on { color: #1d4ed8 !important; background: transparent !important; box-shadow: none !important; font-weight: 700; }
#dh-app-tabbar a.on:before { display: none !important; }
#dh-app-tabbar a svg { width: 22px; height: 22px; }
#dh-app-tabbar a.on svg { transform: none; }
#dh-app-tabbar a span { font-size: 11px; line-height: 1; }
#dh-app-tabbar .dh-tab-badge { top: 4px; }
html[data-theme="dark"] #dh-app-tabbar { background: #0f172a !important; border-color: #1f2937 !important; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6) !important; }
html[data-theme="dark"] #dh-app-tabbar a { color: #94a3b8; }
html[data-theme="dark"] #dh-app-tabbar a.on { color: #a5b4fc !important; }
html[data-theme="dark"] #dh-app-tabbar .dh-tab-badge { box-shadow: 0 0 0 2px #0f172a; }
body:has(#dh-app-tabbar) { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
/* [2026-10-13] 웹 화면 탭바(app-shell, body.dh-has-tabbar)는 1301px 이상에서 숨는데 위 92px 여백이 남아 PC 화면 아래에 빈 띠 → 그 폭에선 0. 앱 모드 탭바(_app_nav, 이 클래스 없음)는 넓은 화면에서도 보이므로 그대로 둔다 */
@media (min-width: 1301px) { body.dh-has-tabbar:has(#dh-app-tabbar) { padding-bottom: 0 !important; } }
/* [2026-10-13] 새 앱 홈(app_pieces, body.ah-body)은 dh_apphome.css 가 탭바를 늘 숨김 — 폰은 .ah 가 화면 전체 고정층, 1024px 이상은 PC 화면(.pcv) → 어느 폭에서도 92px 여백 불필요 */
body.ah-body:has(#dh-app-tabbar) { padding-bottom: 0 !important; }

/* ── 6. 넓지 않은 PC — 도구 버튼은 아이콘만(마우스를 올리면 제목 풍선) ── */
@media (min-width: 1024px) and (max-width: 1600px) {
    .snav-search-trigger span, .snav-search-trigger .snav-kbd, #snavTimerBtnLabel { display: none; }
    .snav-search-trigger, .snav-timer-btn { padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; }
    .snav-welcome > span:not(.snav-avatar-circle) { display: none; }
    .snav-welcome { padding: 3px; }
    .snav-logout { font-size: 0; padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; }
    .snav-logout i { font-size: .95rem; }
}
@media (min-width: 1024px) and (max-width: 1300px) {
    .snav-toggle { padding: .4rem .42rem; }
    .snav-nav { margin: 0 8px; }
    /* [2026-10-13] 1280px 에서도 메뉴 9칸이 줄보다 29px 길어 «홈»이 PRO 배지 밑으로, «알림»이 오른쪽 밖으로 밀렸다 */
    .snav-brand .snav-pro-badge { display: none; }
}
@media (min-width: 1024px) and (max-width: 1200px) {
    .snav-brand .snav-wordmark { display: none; }   /* 동그란 마크만 */
    .snav-nav .snav-toggle .chev { display: none; }
}
@media (min-width: 1024px) and (max-width: 1080px) {
    .snav-nav .snav-toggle > i:first-child { display: none; }   /* 가장 좁을 때는 글자만 */
}

/* ── 7. 서랍이 열려 있을 때 떠 있는 위젯이 서랍 위로 올라오지 않게 (2026-09-24) ──
   용어사전 버튼·홈 버튼·공부 타이머가 z-index 최댓값이라 서랍을 덮었다. 서랍 열린 동안만 숨긴다. */
html:has(#snavMobile.open) .std-launch,
html:has(#snavMobile.open) #dahim-student-home-return,
html:has(#snavMobile.open) #study-mini-timer,
html:has(#snavMobile.open) #study-status-bar { visibility: hidden !important; }

/* ── 4-2. 모바일 서랍 — 조각 12개 아코디언 (2026-10-04 학생 메뉴 리디자인 4단계) ── */
.snav-dhead .snav-dhead-t { flex: 1; min-width: 0; }
.snav-dhead-home {
    display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 12px; border-radius: 999px; flex-shrink: 0;
    background: #fff; color: #1d4ed8 !important; font-size: .78rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.snav-dhead-home i { font-size: .7rem; }
.snav-mtools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.snav-mtools button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 56px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--snav-box-bg); color: var(--snav-ink); font: inherit; font-size: .74rem; font-weight: 700;
    box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 0 0 1px var(--snav-line);
}
.snav-mtools button i { font-size: 1.05rem; color: var(--snav-ink-sub); }
.snav-piece { text-align: left; width: 100%; }
.snav-piece > i.snav-pic { font-style: normal; }
.snav-piece > i.snav-pic svg { width: 18px; height: 18px; display: block; }
.snav-piece-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.snav-piece-t b { font-size: .95rem; font-weight: 700; color: var(--snav-ink-strong); }
.snav-piece-t small { font-size: .72rem; color: var(--snav-ink-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav-piece.open .snav-piece-t b { color: var(--accent-strong, var(--snav-primary)); }
.snav-piece-n { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--snav-ink-sub); margin-left: 6px; }
.snav-piece-main { font-weight: 700; color: var(--snav-ink-strong); }
.snav-piece-main i { color: var(--accent, var(--snav-primary)) !important; }
.snav-piece-adm { font-size: .68rem; font-weight: 600; color: var(--snav-ink-light); margin-left: 4px; }
[data-theme="dark"] .snav-piece,
[data-theme="dark"] .snav-piece + .snav-macc-body { --accent: var(--accent-dark, var(--accent)); --accent-soft: var(--accent-soft-dark, var(--accent-soft)); --accent-strong: var(--accent-dark, var(--accent)); }
[data-theme="dark"] .snav-dhead-home { background: #e0e7ff; color: #3730a3 !important; }

/* ── 2-2. 데스크톱 메가 패널 — 조각 카드 (2026-10-04 학생 메뉴 리디자인 4단계) ── */
.snav-pcols { align-items: start; }
.snav-pcol { padding: 12px 10px 10px; }
.snav-ptitle { display: flex; align-items: center; gap: 10px; padding: 2px 6px 10px; text-transform: none; letter-spacing: 0; }
.snav-ptitle::before { display: none; }
.snav-ptitle .snav-pic {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-style: normal;
    background: var(--accent, #6366f1); color: #fff; box-shadow: 0 6px 14px -8px var(--accent, #6366f1);
}
.snav-ptitle .snav-pic svg { width: 18px; height: 18px; display: block; }
.snav-ptitle-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.2; }
.snav-ptitle-t b { font-size: .95rem; font-weight: 800; color: var(--snav-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav-ptitle-t small { font-size: .72rem; font-weight: 500; color: var(--snav-ink-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav-pno { font-size: .72rem; font-weight: 800; color: var(--accent, #6366f1); letter-spacing: .04em; margin-right: 2px; }
/* [2026-10-06] 자주 가는 조각(최근 30일 점수 ≥1.0) — 조각 홈 .pc-hot 과 같은 점 */
.snav-phot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2563eb; margin-left: 6px; vertical-align: middle; position: relative; top: -1px; }
[data-theme="dark"] .snav-phot { background: #93c5fd; }
.snav-pcol .snav-link.snav-pmain { font-weight: 700; color: var(--snav-ink-strong); background: var(--snav-box-bg); box-shadow: inset 3px 0 0 var(--accent, #6366f1); }
.snav-pcol .snav-link.snav-pmain i { color: var(--accent, #6366f1); }
.snav-micro-badge.snav-badge-adm { background: var(--snav-line-soft); color: var(--snav-ink-sub); }
[data-theme="dark"] .snav-pcol { --accent: var(--accent-dark, var(--accent)); --accent-soft: var(--accent-soft-dark, var(--accent-soft)); --accent-strong: var(--accent-dark, var(--accent)); }

/* 헤더 «조각 홈» 단추 — 1024px 이상에서만(폰은 서랍 머리에 있음) */
.snav-pieces-btn {
    display: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; text-decoration: none;
    background: var(--snav-box-bg); color: var(--snav-primary) !important; font-size: .82rem; font-weight: 800; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px var(--snav-line);
}
.snav-pieces-btn i { font-size: .95rem; }
.snav-pieces-btn:hover { box-shadow: 0 2px 8px -4px rgba(15,23,42,.25), inset 0 0 0 1px var(--snav-primary); }
@media (min-width: 1024px) { .snav-pieces-btn { display: inline-flex; } }
@media (min-width: 1024px) and (max-width: 1300px) { .snav-pieces-btn span { display: none; } .snav-pieces-btn { padding: 0 9px; } }

/* ════════════════════════════════════════════════════════════════════════
   [2026-10-13] 탭바가 보일 때 화면 고유의 하단 고정 요소를 탭바 위로 올림
   (탭바: 바닥 14 + 높이 64 = 78px + safe-area. 탭바 z 99990 뒤에 숨어 못 누르던 것들)
   탭바가 보이는 경우 = 웹(app-shell, body.dh-has-tabbar) 1300px 이하 / 앱 모드(_app_nav, dh-has-tabbar 없음) 전 폭.
   새 앱 홈(body.ah-body)은 탭바를 숨기므로 제외.
   ════════════════════════════════════════════════════════════════════════ */
/* ① 내 교재 맞춤 학습관(dashboard/my_textbook, .ai-tutor-float-btn·.xp-toast 는 이 화면에만 있음 — :has() 로 좁히면 JS 가 나중에 붙이는 dh-has-tabbar 에 크롬이 다시 계산 안 해서 클래스만 씀) — 폰(≤768): 빠른 이동 막대 10→88, 오디오·AI 과외쌤 75→153, 경험치 알림 85→163 */
@media (max-width: 768px) {
  body.dh-has-tabbar #mobileQuickDock,
  body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #mobileQuickDock { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  body.dh-has-tabbar #dahimAudioDock,
  body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #dahimAudioDock,
  body.dh-has-tabbar .ai-tutor-float-btn,
  body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) .ai-tutor-float-btn { bottom: calc(153px + env(safe-area-inset-bottom, 0px)) !important; }
  body.dh-has-tabbar .xp-toast,
  body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) .xp-toast { bottom: calc(163px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* 태블릿 폭(769~1300, 앱 모드는 769 이상): 오디오 24→102, AI 과외쌤 32→110 */
@media (min-width: 769px) and (max-width: 1300px) {
  body.dh-has-tabbar #dahimAudioDock { bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important; }
  body.dh-has-tabbar .ai-tutor-float-btn { bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (min-width: 769px) {
  body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #dahimAudioDock { bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important; }
  body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) .ai-tutor-float-btn { bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* 오디오 막대는 안 쓸 때 아래로 120% 밀어 숨기는데 높이보다 덜 내려가 화면 바닥(탭바 없으면 14px)·올린 자리에서 비치므로, 어느 폭에서든 안 쓸 때는 투명·클릭 불가 */
#dahimAudioDock:not(.active) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ② 학습 플래너(planner_main) — 자체 하단 메뉴(타이머·계획·기록·랭킹·더보기) 0→탭바 위, 미니 타이머는 그 위 */
@media (max-width: 1300px) {
  body.dh-has-tabbar #plNav { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: 6px !important; }
  body.dh-has-tabbar #plMini { bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important; }
}
body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #plNav { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: 6px !important; }
body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #plMini { bottom: calc(142px + env(safe-area-inset-bottom, 0px)) !important; }
/* 미니 타이머는 안 보일 때 아래로 130% 밀어 숨기는데, 올린 자리에선 탭바 양옆 틈으로 비치므로 .show 아닐 때는 숨김 */
@media (max-width: 1300px) { body.dh-has-tabbar #plMini:not(.show) { visibility: hidden !important; } }
body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #plMini:not(.show) { visibility: hidden !important; }

/* ③ 다힘 학습(dahim/index) 공부 시간 위젯 24→102, ④ 전자책(ebook) 단축키 단추 24→102 */
@media (max-width: 1300px) {
  body.dh-has-tabbar #studyTimerWidget,
  body.dh-has-tabbar #floatingHotkeyBtn { bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important; }
}
body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #studyTimerWidget,
body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #floatingHotkeyBtn { bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important; }

/* ⑤ 앱 모드 빠른 실행 단추(.std-launch)·#kdFab — 웹은 app-shell 이 dh-has-tabbar 로 띄우지만 앱 모드엔 그 클래스가 없어 탭바를 덮던 것 */
body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) .std-launch,
body:not(.dh-has-tabbar):not(.ah-body):has(#dh-app-tabbar) #kdFab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }