/* ===================================================================== 마이페이지 · 공부시간 탭 (#my-study) --------------------------------------------------------------------- [2026-11-02] 사장님: 공부시간 탭 — 오늘 · 이번 주 · 이번 달 · 역대 누적 + 어느 메뉴에서 몇 분. [2026-11-02 F안 · 사장님이 고른 시안 «달력 + 그래프 + 표»] 01 숫자 네 칸 오늘(어제와 비교) · 이번 주(하루 평균) · 이번 달 · 역대 누적(보라 숫자) 02 달력 | 그래프 많이 한 날일수록 진한 보라 · 이번 주 월~일 막대(오늘만 진한 보라) 03 메뉴별 표 메뉴 × [고른 날 · 이번 주 · 이번 달 · 역대 누적] — 고른 날 칸만 연보라 바탕 규칙(크레딧 관리 탭과 같은 결) · 카드는 흰 바탕 + 1px 테두리 + 둥글기 20. 강조는 보라 한 가지. · 글자: 본문 15px 이상, 보조 14px 이상, 가장 작은 글자 13px. 굵기는 100 단위. 그리는 곳: assets/js/learning-portal.js 의 renderStudyTimeTab() ===================================================================== */ #my-study{ --st-violet:#5A4BD4; --st-violet-mid:#8C7FF0; --st-violet-light:#C9C2F5; --st-violet-soft:#F0EDFF; --st-violet-wash:#F7F5FF; --st-ink:#111318; --st-sub:#4A4F5A; --st-faint:#8D95A5; --st-line:#E4E6EE; --st-cell:#EEF0F4; --st-empty:#F1F2F7; --st-num:"Space Grotesk","Pretendard",sans-serif; word-break:keep-all; letter-spacing:-.02em; } #my-study .st-host{min-width:0;} #my-study .st-loading{margin:0;padding:24px;color:var(--st-sub);font-size:15px;} #my-study .st-wrap{display:grid;gap:20px;min-width:0;} #my-study .st-card{ display:flex;flex-direction:column;gap:14px;min-width:0; padding:24px;border:1px solid var(--st-line);border-radius:20px;background:#fff; } #my-study .st-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;} #my-study .st-card-head h2{margin:0;color:var(--st-ink);font-size:19px;font-weight:900;line-height:1.35;} #my-study .st-card-sub{color:var(--st-sub);font-size:14px;} #my-study .st-card-sub b{color:var(--st-ink);} #my-study button:focus-visible{outline:3px solid rgba(91,75,232,.32);outline-offset:2px;} /* [2026-11-02] 이미지로 저장 — 단추 줄(그림에서는 빠진다) · 그림에만 나오는 제목 */ #my-study .st-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:-4px;} #my-study .st-save-btn{ display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px; border:1px solid #CFD2DC;border-radius:12px;background:#fff;color:var(--st-ink); font-family:inherit;font-size:15px;font-weight:700!important;cursor:pointer; } #my-study .st-save-btn:hover{border-color:#C9C2F0;background:#FBFAFF;color:var(--st-violet);} #my-study .st-save-btn:disabled{color:var(--st-faint);cursor:default;} #my-study .st-msg{margin:0;color:var(--st-sub);font-size:14px;} #my-study .st-msg:empty{display:none;} #my-study .st-msg.ok{color:#157F4A;font-weight:700;} #my-study .st-msg.error{color:#B42318;font-weight:700;} #my-study .st-export-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;} #my-study .st-export-head b{color:var(--st-ink);font-size:24px;font-weight:900;} #my-study .st-export-head span{color:var(--st-sub);font-size:15px;} /* 그림으로 그릴 때(html2canvas 복사본): 늘 넓은 모양, 표는 잘리지 않게 */ #my-study .st-wrap.is-exporting{width:1040px;padding:32px;background:#F6F7FB;box-sizing:content-box;} #my-study .st-wrap.is-exporting .st-table-scroll{overflow:visible;} /* html2canvas 는 바깥 그림자로 그린 테두리(오늘 · 고른 날)를 어긋나게 그린다 — 그림에서는 실선 테두리로 */ #my-study .st-wrap.is-exporting .st-cal-day.is-today, #my-study .st-wrap.is-exporting .st-cal-day.is-picked{box-shadow:none;} #my-study .st-wrap.is-exporting .st-cal-day.is-today{border:2px solid var(--st-violet-mid);} #my-study .st-wrap.is-exporting .st-cal-day.is-picked{border:2px solid var(--st-ink);} /* 01 숫자 네 칸 */ #my-study .st-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;} #my-study .st-stat{ display:flex;flex-direction:column;gap:6px;min-width:0; padding:20px 24px;border:1px solid var(--st-line);border-radius:20px;background:#fff; } #my-study .st-stat-k{color:var(--st-sub);font-size:15px;font-weight:700;} #my-study .st-stat-v{color:var(--st-ink);font-family:var(--st-num);font-size:32px;font-weight:700;letter-spacing:-.04em;line-height:1.15;} #my-study .st-stat.total .st-stat-v{color:var(--st-violet);} #my-study .st-stat-sub{color:var(--st-sub);font-size:14px;line-height:1.5;} #my-study .st-stat-sub.up{color:#157F4A;font-weight:700;} /* 02 달력 | 그래프 */ #my-study .st-pair{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;} #my-study .st-cal-nav{display:flex;align-items:center;gap:6px;} #my-study .st-cal-sum{margin-right:6px;color:var(--st-sub);font-size:14px;} #my-study .st-cal-sum b{color:var(--st-ink);} #my-study .st-icon-btn{ width:40px;height:40px;border:1px solid #CFD2DC;border-radius:12px;background:#fff; color:var(--st-ink);font-family:inherit;font-size:17px;font-weight:700!important;cursor:pointer; } #my-study .st-icon-btn:disabled{color:#C4C8D2;cursor:default;} #my-study .st-cal-week, #my-study .st-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;} #my-study .st-cal-week span{color:var(--st-sub);font-size:13px;text-align:center;} #my-study .st-cal-day{ display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start; height:52px;padding:6px 8px;border:0;border-radius:10px;background:var(--st-empty); color:var(--st-faint);font-family:inherit;text-align:left;cursor:pointer;min-width:0; } #my-study .st-cal-day b{font-size:13px;font-weight:700;} #my-study .st-cal-day small{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} #my-study .st-cal-day.lv1{background:#E4DFFB;color:var(--st-ink);} #my-study .st-cal-day.lv2{background:var(--st-violet-light);color:var(--st-ink);} #my-study .st-cal-day.lv3{background:var(--st-violet);color:#fff;} #my-study .st-cal-day.is-today{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--st-violet-mid);} #my-study .st-cal-day.is-picked{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--st-ink);} #my-study .st-cal-day:disabled{background:#fff;border:1px dashed var(--st-line);color:#C4C8D2;cursor:default;} #my-study .st-cal-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--st-sub);font-size:13px;} #my-study .st-cal-legend i{width:16px;height:16px;border-radius:4px;background:var(--st-empty);} #my-study .st-cal-legend i.lv1{background:#E4DFFB;} #my-study .st-cal-legend i.lv2{background:var(--st-violet-light);} #my-study .st-cal-legend i.lv3{background:var(--st-violet);} #my-study .st-cal-tip{margin-left:auto;} #my-study .st-bars{ flex:1;list-style:none;margin:0;padding:0;min-height:260px; display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-items:end; } #my-study .st-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;min-width:0;} #my-study .st-bar i{display:block;width:100%;border-radius:10px 10px 4px 4px;background:var(--st-violet-light);} #my-study .st-bar.is-empty i{border-radius:4px;background:#EDEFF4;} #my-study .st-bar.is-today i{background:var(--st-violet);} #my-study .st-bar.is-later i{border:1px dashed #CFD2DC;border-radius:4px;background:none;box-sizing:border-box;} #my-study .st-bar-v{color:var(--st-sub);font-size:13px;text-align:center;white-space:nowrap;} #my-study .st-bar.is-today .st-bar-v{color:var(--st-violet);font-weight:700;} #my-study .st-bar-k{color:var(--st-sub);font-size:14px;} #my-study .st-bar.is-today .st-bar-k{color:var(--st-ink);font-weight:700;} #my-study .st-bar.is-later .st-bar-k{color:var(--st-faint);} #my-study .st-week-foot{margin:0;padding-top:12px;border-top:1px solid var(--st-cell);color:var(--st-sub);font-size:14px;} #my-study .st-week-foot b{color:var(--st-ink);} /* 03 메뉴별 표 */ #my-study .st-link-btn{ margin-left:6px;padding:0;border:0;background:none;color:var(--st-violet); font-family:inherit;font-size:14px;font-weight:700!important;text-decoration:underline;cursor:pointer; } #my-study .st-table-scroll{overflow-x:auto;} #my-study .st-table{width:100%;min-width:640px;border-collapse:collapse;table-layout:fixed;font-size:17px;} #my-study .st-table th, #my-study .st-table td{padding:14px 12px;border-bottom:1px solid var(--st-cell);color:var(--st-ink);} #my-study .st-table thead th{border-bottom:2px solid var(--st-ink);font-size:15px;font-weight:900;text-align:right;} #my-study .st-table thead th:first-child{width:30%;color:var(--st-sub);font-weight:700;text-align:left;} #my-study .st-table thead th.is-picked{background:var(--st-violet-soft);color:#4338CA;} #my-study .st-table tbody th{font-size:16px;font-weight:700;text-align:left;} #my-study .st-table td{font-family:var(--st-num);font-weight:500;text-align:right;white-space:nowrap;} #my-study .st-table td.is-picked{background:var(--st-violet-wash);} #my-study .st-table tr.is-total th, #my-study .st-table tr.is-total td{background:#FAFAFD;border-bottom-color:var(--st-line);font-weight:700;} #my-study .st-table tr.is-total th{font-size:17px;font-weight:900;} #my-study .st-table tr.is-total td{font-size:19px;} #my-study .st-table tr.is-total td.is-picked{background:var(--st-violet-soft);color:#4338CA;} #my-study .st-table tr.is-before th, #my-study .st-table tr.is-before td{color:var(--st-sub);font-weight:500;} #my-study .st-table tbody tr:last-child th, #my-study .st-table tbody tr:last-child td{border-bottom:0;} #my-study .st-dot{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:3px;background:#C4C8D2;vertical-align:1px;} #my-study .st-none{color:var(--st-faint);} #my-study .st-note{margin:0;color:var(--st-sub);font-size:14px;line-height:1.55;} #my-study .st-foot{margin:0;color:var(--st-sub);font-size:14px;line-height:1.55;text-align:center;} /* 좁은 화면 — 숫자 칸은 두 줄, 달력과 그래프는 위아래, 표는 옆으로 밀어서 */ @media (max-width:900px){ #my-study .st-pair{grid-template-columns:minmax(0,1fr);} } @media (max-width:560px){ #my-study .st-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} #my-study .st-stat{padding:16px;} #my-study .st-stat-v{font-size:24px;} #my-study .st-card{padding:18px 16px;} #my-study .st-cal-day{height:46px;padding:5px 6px;} #my-study .st-cal-day small{display:none;} #my-study .st-cal-tip{margin-left:0;width:100%;} #my-study .st-bars{gap:6px;min-height:200px;} #my-study .st-bar-v{font-size:13px;white-space:normal;line-height:1.2;} }