/* dashboard.css — 건운사 대시보드(cft.html "대시보드" 탭 / community.html 공용)
⚠️ 모든 셀렉터를 #dash-root 하위로 스코핑하고 토큰을 로컬화 → cft 본체 스타일과 완전 격리.
(base reset·page-title·서브탭(.tabs)은 cft가 이미 가지고 있어 제외) */
/* 토큰 — #dash-root 로컬 (cft 토큰과 독립) */
#dash-root{
--navy:#1D2F4E;
--ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b; --ink-4:#aeaeb2;
--line:#d2d2d7; --line-light:#e8e8ed; --sep:rgba(0,0,0,.06);
--bg:#ffffff; --bg-2:#f5f5f7; --bg-chip:#f0f1f4; --cta-bg:#f4f7fb;
--orange:#e8590c; --red:var(--color-error, #ff3b30);
--shadow-card:0 2px 12px rgba(0,0,0,.06);
--shadow-card-hover:0 8px 28px rgba(0,0,0,.12);
color:var(--ink);
}
/* ── 레이아웃 (모바일 단일열 / 데스크톱 본문+사이드바) ── */
#dash-root .content{max-width:980px;width:100%;margin:0 auto;padding:8px 0 40px}
#dash-root .feed{min-width:0}
#dash-root .side{display:flex;flex-direction:column;gap:16px;margin-top:30px}
@media(min-width:1000px){
#dash-root .content{display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:30px;align-items:start;max-width:1120px}
#dash-root .side{position:sticky;top:88px;margin-top:6px}
}
#dash-root section{margin-top:30px}
#dash-root .sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px}
#dash-root .sec-head h2{font-size:20px;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
/* ── 카드 ── (cft 전역 .card{display:flex;padding:24px} 누수 차단 위해 display/padding 명시) */
#dash-root .card{display:block;padding:0;background:var(--bg);border-radius:18px;box-shadow:var(--shadow-card);transition:all .2s ease}
#dash-root .card-p{padding:22px 24px}
/* ── 환영 카드 ── */
#dash-root .welcome__hi{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.022em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#dash-root .welcome__streak{font-size:13px;font-weight:600;color:var(--navy);background:var(--cta-bg);padding:4px 10px;border-radius:999px;letter-spacing:0}
/* 등급 뱃지 — currentColor 기반(라이트/다크 공용) */
#dash-root .rk-badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;line-height:1.5;letter-spacing:0;white-space:nowrap;vertical-align:middle;border:1px solid;background:color-mix(in srgb,currentColor 10%,transparent)}
#dash-root .rk-badge--sprout,#dash-root .rk-badge--general,#dash-root .rk-badge--sincere,#dash-root .rk-badge--thanks,#dash-root .rk-badge--business,#dash-root .rk-badge--admin{color:var(--navy)}
#dash-root .rk-badge--devoted{color:var(--orange)} /* 황제펭귄(최고)만 주황 */
#dash-root .welcome__rankbar{display:none}/* 커뮤니티 등급(알/펭귄) 비노출 2026-07-08 */
#dash-root .wr-stats{font-size:12px;color:var(--ink-3);font-weight:500}
#dash-root .wr-line{font-size:13px;color:var(--ink-3);margin-top:1px}
#dash-root .wr-line.hidden{display:none}
#dash-root .wr-line b{color:var(--ink);font-weight:700}
#dash-root .wr-need{margin-left:7px;color:var(--ink-3)}
#dash-root .welcome__rank--clickable{cursor:pointer}
#dash-root .welcome__boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
#dash-root .wbox{background:var(--bg-2);border-radius:12px;padding:14px 10px;text-align:center}
#dash-root .wbox b{display:block;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
#dash-root .wbox span{display:block;font-size:12px;color:var(--ink-3);margin-top:5px}
#dash-root .welcome__cta{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;padding:13px;font-size:15px;font-weight:600;color:var(--navy);background:var(--cta-bg);border-radius:12px;transition:background .15s}
#dash-root .welcome__cta:hover{background:#e7eefa}
#dash-root .welcome__lecture{display:flex;align-items:center;gap:11px;margin:16px -24px -22px;padding:13px 24px;border-top:1px solid var(--sep);border-radius:0 0 18px 18px;transition:background .15s}
#dash-root .welcome__lecture:hover{background:var(--bg-2)}
#dash-root .welcome__lecture-ic{flex:0 0 auto;line-height:0;color:var(--navy)}
#dash-root .welcome__lecture-ic svg{width:20px;height:20px;display:block}
#dash-root .welcome__lecture-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
#dash-root .welcome__lecture-tx b{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
#dash-root .welcome__lecture-tx span{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dash-root .welcome__lecture-arrow{flex:0 0 auto;color:var(--navy);font-size:18px;font-weight:600;line-height:1;transition:transform .15s}
#dash-root .welcome__lecture:hover .welcome__lecture-arrow{transform:translateX(2px)}
#dash-root .welcome__cta-chev{font-size:18px;font-weight:600;line-height:1;transition:transform .15s}
#dash-root .welcome__cta:hover .welcome__cta-chev{transform:translateX(2px)}
/* ── 이벤트 배너 ── */
#dash-root .event-banner{display:none;align-items:center;gap:14px;margin-top:6px;padding:16px 20px;border-radius:18px;background:linear-gradient(135deg,#1D2F4E,#33548a);color:#fff;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s}
#dash-root .event-banner.show{display:flex}
#dash-root .event-banner:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
#dash-root .event-banner__emoji{font-size:26px;flex:0 0 auto;line-height:1}
#dash-root .event-banner__tx{flex:1;min-width:0}
#dash-root .event-banner__tx b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;color:#fff}
#dash-root .event-banner__tx span{display:block;font-size:13px;color:rgba(255,255,255,.85);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dash-root .event-banner__go{flex:0 0 auto;font-size:13px;font-weight:700;background:rgba(255,255,255,.18);padding:8px 14px;border-radius:999px;white-space:nowrap}
/* ── 블록 하단 연결 버튼 / 글쓰기 버튼 ── */
#dash-root .board-cta{display:flex;align-items:center;justify-content:center;gap:5px;margin:16px -24px -22px;padding:13px 24px;font-size:14px;font-weight:600;color:var(--navy);border-top:1px solid var(--sep);border-radius:0 0 18px 18px;transition:background .15s}
#dash-root .board-cta::after{content:"›";font-size:18px;font-weight:600;line-height:1;color:var(--ink-4);transition:color .15s,transform .15s}
#dash-root .board-cta:hover{background:var(--bg-2)}
#dash-root .board-cta:hover::after{color:var(--navy);transform:translateX(2px)}
#dash-root .write-btn{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--navy);background:var(--cta-bg);padding:6px 13px;border-radius:999px;white-space:nowrap;transition:background .15s;border:none;cursor:pointer}
#dash-root .write-btn:hover{background:#e7eefa}
/* ── 게시판 리스트 ── */
#dash-root .board ul{list-style:none}
#dash-root .board li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
#dash-root .board li[data-id],#dash-root .board li[data-href]{cursor:pointer}
#dash-root .board li+li{border-top:1px solid var(--sep)}
#dash-root .board li .t{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;color:var(--ink)}
#dash-root .board li:hover .t{color:var(--navy)}
#dash-root .board li .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dash-root .board li .d{flex:0 0 auto;color:var(--ink-3);font-size:13px}
#dash-root .lab{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--ink-3);background:var(--bg-chip);padding:3px 9px;border-radius:8px;white-space:nowrap}
#dash-root .board li .lab{display:inline-flex;align-items:center;justify-content:center;min-width:66px;box-sizing:border-box}
#dash-root .new{width:5px;height:5px;border-radius:50%;background:var(--red);flex:0 0 auto}
#dash-root .muted{color:var(--ink-3);font-size:14px;padding:14px 2px;text-align:center}
/* ── 사이드바 위젯 ── */
#dash-root .side-card{position:relative;background:var(--bg);border:1.5px solid var(--line-light);border-radius:14px;padding:20px 16px 16px}
/* 섹션 제목 → 이메일/비밀번호 입력칸처럼 테두리 위 노치 라벨 */
#dash-root .side-card h3{position:absolute;top:0;left:14px;transform:translateY(-50%);background:var(--bg);padding:0 7px;margin:0;font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.01em}
#dash-root .side-list{list-style:none}
#dash-root .side-list li{padding:9px 0;font-size:14px;color:var(--ink-2);display:flex;gap:8px;align-items:baseline;cursor:pointer}
#dash-root .side-list li+li{border-top:1px solid var(--sep)}
#dash-root .side-list li:hover .t{color:var(--navy)}
#dash-root .side-list .rank{color:var(--navy);font-weight:700;font-size:13px;flex:0 0 auto;width:13px;text-align:center}
#dash-root .side-list .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
#dash-root .side-list .c{flex:0 0 auto;color:var(--ink-4);font-size:12px}
#dash-root .side-list .ev-tag{color:#F97316;font-weight:700}
#dash-root .side-list li:hover .t .ev-tag{color:#F97316}
#dash-root .side-list .c svg{vertical-align:-2px}
/* 전체보기 → 화살표 없이 색 채운 텍스트 버튼 */
#dash-root .side-more{display:block;text-align:center;margin-top:14px;padding:10px;font-size:13px;font-weight:700;color:var(--navy);background:var(--bg-chip);border-radius:9px;transition:background .15s}
#dash-root .side-more:hover{background:var(--line-light)}
#dash-root .side-empty{color:var(--ink-3);font-size:13px;padding:6px 0}
/* 강의후기 세로 캐러셀(티커) */
#dash-root .rev-ticker{position:relative;height:300px;overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%)}
#dash-root .rev-ticker__track{animation:dashRevscroll linear infinite}
#dash-root .rev-ticker:hover .rev-ticker__track{animation-play-state:paused}
@keyframes dashRevscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
#dash-root .rev-mini{background:var(--bg-2);border-radius:12px;padding:12px 13px;margin-bottom:10px;cursor:pointer;transition:background .15s}
#dash-root .rev-mini:hover{background:var(--bg-chip)}
#dash-root .rev-mini__top{display:flex;align-items:center;gap:6px;margin-bottom:5px}
#dash-root .rev-mini__star{color:var(--navy);font-weight:700;font-size:12px;letter-spacing:-.02em}
#dash-root .rev-mini__who{color:var(--ink-3);font-size:12px;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48%}
#dash-root .rev-mini__quote{font-size:13px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* ── 정규강의 가로 캐러셀 ── */
#dash-root .sec-more{font-size:13px;font-weight:600;color:var(--navy)}
#dash-root .sec-more:hover{opacity:.8}
#dash-root .sec-more-chev{font-size:16px;font-weight:600;line-height:1;display:inline-block;transition:transform .15s}
#dash-root .sec-more:hover .sec-more-chev{transform:translateX(2px)}
#dash-root .lec-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 8px;scrollbar-width:none;min-height:150px}
#dash-root .lec-carousel::-webkit-scrollbar{display:none}
/* 카드 폭 = 컨테이너 정확히 N등분 → 어느 화면 폭에서도 잘린 카드 없이 딱 떨어짐 (모바일 2장 / 데스크톱 3장) */
#dash-root .lec-card{flex:0 0 auto;width:calc((100% - 12px)/2);scroll-snap-align:start;background:var(--bg);border:1px solid var(--sep);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s}
@media(min-width:734px){#dash-root .lec-card{width:calc((100% - 24px)/3)}}
#dash-root .lec-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
#dash-root .lec-card__thumb{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--bg-2);display:block}
#dash-root .lec-card__body{padding:9px 11px 11px}
#dash-root .lec-card__title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#dash-root .lec-card__price{font-size:13px;font-weight:700;color:var(--navy);margin-top:2px}
#dash-root .lec-empty{color:var(--ink-3);font-size:13px;padding:10px 2px}
#dash-root .lec-wrap{position:relative}
#dash-root .lec-nav{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--sep);background:var(--bg);color:var(--navy);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.12);transition:background .15s,opacity .15s}
#dash-root .lec-nav:hover{background:var(--bg-2)}
#dash-root .lec-nav--prev{left:-8px}
#dash-root .lec-nav--next{right:-8px}
@media(max-width:734px){#dash-root .lec-nav{display:none}}
/* ── 글쓰기 모달 (전역 오버레이라 #dash-root 안에 두되 fixed) ── */
#dash-root .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;display:none;align-items:flex-end;justify-content:center}
#dash-root .modal-backdrop.open{display:flex}
#dash-root .modal{background:var(--bg);width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:22px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -8px 40px rgba(0,0,0,.18)}
@media(min-width:560px){ #dash-root .modal-backdrop{align-items:center} #dash-root .modal{border-radius:20px} }
#dash-root .modal h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
#dash-root .modal label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:14px 0 6px}
#dash-root .modal select,#dash-root .modal input,#dash-root .modal textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--bg);letter-spacing:-.01em}
#dash-root .modal textarea{min-height:120px;resize:vertical}
#dash-root .modal__actions{display:flex;gap:10px;margin-top:20px}
#dash-root .modal__actions button{flex:1;padding:13px;font-size:15px;font-weight:600;border-radius:12px;border:none;cursor:pointer}
#dash-root .btn-cancel{background:var(--bg-2);color:var(--ink-2)}
#dash-root .btn-submit{background:var(--navy);color:#fff}
#dash-root .btn-submit:disabled{opacity:.5;cursor:default}
@media(max-width:734px){ #dash-root .sec-head h2{font-size:18px} }
/* ── 다크모드: #dash-root 토큰 리매핑 (가이드 준수) ──
--navy는 텍스트 액센트로 다수 사용 → 다크에선 스카이블루로 반전 (네이비 텍스트는 다크 배경에서 대비 1.2로 안 보임)
배경으로 쓰는 .welcome__cta/.btn-submit만 네이비 계열 배경을 별도 유지 */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) #dash-root{
--ink:#e8e8ec; --ink-2:#a1a1a6; --ink-3:#86868b; --ink-4:#6e6e73;
--line:#2c2c2e; --line-light:#2c2c2e; --sep:rgba(255,255,255,.08);
--bg:#15171a; --bg-2:#1f2125; --bg-chip:#2a2d31; --cta-bg:#1c2733;
--navy:#9CCFE8;
}
:root:not([data-theme="light"]) #dash-root .btn-submit{background:#2b4368}
:root:not([data-theme="light"]) #dash-root .write-btn:hover,
:root:not([data-theme="light"]) #dash-root .welcome__cta:hover{background:#24303e}
}
[data-theme="dark"] #dash-root{
--ink:#e8e8ec; --ink-2:#a1a1a6; --ink-3:#86868b; --ink-4:#6e6e73;
--line:#2c2c2e; --line-light:#2c2c2e; --sep:rgba(255,255,255,.08);
--bg:#15171a; --bg-2:#1f2125; --bg-chip:#2a2d31; --cta-bg:#1c2733;
--navy:#9CCFE8;
}
[data-theme="dark"] #dash-root .btn-submit{background:#2b4368}
[data-theme="dark"] #dash-root .write-btn:hover,
[data-theme="dark"] #dash-root .welcome__cta:hover{background:#24303e}