/* 내신, 다듬다 — v6 파스텔 + 사이드바 구조 */
:root {
  --bg: #F7F5F0; --card: #FFFFFF; --card-warm: #FFFDF8;
  --mint: #B8F0D8; --mint-deep: #2EBD8A; --mint-text: #0E6649;
  --pink: #FFD6E8; --pink-deep: #F0527A; --pink-text: #8C1840;
  --lav: #DDD6F8; --lav-deep: #7B6CF0; --lav-text: #3D2D9C;
  --yellow: #FFF3B0; --yellow-deep: #D4A010; --yellow-text: #7A5800;
  --coral: #FFE0D4; --coral-deep: #E05C30;
  --text: #1C1C2E; --text-mid: #5A5A72; --text-dim: #A8A8BF;
  --border: #ECEAF4;
  --shadow-xs: 0 1px 4px rgba(28,28,46,0.06);
  --shadow-sm: 0 3px 12px rgba(28,28,46,0.08);
  --shadow-md: 0 8px 28px rgba(28,28,46,0.11);
  --sans: 'Pretendard', sans-serif;
  --dh: 'Do Hyeon', sans-serif;
  --pen: 'Nanum Pen Script', cursive;
  --dm: 'DM Sans', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; }

/* ── 레이아웃: 사이드바 + 메인 ── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.sb-brand-mark {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, var(--lav-deep), var(--pink-deep));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(123,108,240,0.28);
}
.sb-brand-name { font-family: var(--dh); font-size: 17px; }
.sb-brand-sub { font-family: var(--pen); font-size: 12px; color: var(--text-dim); margin-top: -2px; }

.sb-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: none; background: transparent;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--text-mid);
  text-align: left; cursor: pointer;
  transition: all 160ms ease;
}
.sb-item:hover { background: var(--card-warm); color: var(--text); }
.sb-item.active {
  background: linear-gradient(135deg, rgba(123,108,240,0.12), rgba(240,82,122,0.10));
  color: var(--lav-deep);
}
.sb-item .sb-emoji { font-size: 16px; width: 22px; text-align: center; }
.sb-item .sb-label { flex: 1; }

.sb-bottom {
  border-top: 1px solid var(--border);
  padding-top: 12px; margin-top: 12px;
}

.sb-tip {
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(135deg, var(--lav), var(--pink));
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lav-text);
}
.sb-tip strong { font-family: var(--dh); font-weight: 400; }

/* 모바일 햄버거 */
.sb-toggle {
  display: none;
  position: fixed; top: 14px; left: 14px; z-index: 100;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--card); border: none;
  box-shadow: var(--shadow-sm);
  font-size: 18px; cursor: pointer;
}

.main { flex: 1; padding: 20px 24px 48px; min-width: 0; overflow-x: hidden; }

/* 뷰 토글 */
.view { animation: fadeIn 200ms ease; }
.view.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── 상단 헤더 (메인 안) ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 18px;
}
.topbar-right { display: flex; align-items: center; gap: 8px; }
.hbtn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: var(--card);
  box-shadow: var(--shadow-xs); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all 170ms ease;
}
.hbtn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.hbtn.hbtn-add {
  background: linear-gradient(135deg, var(--lav-deep), var(--pink-deep));
  color: #fff; font-weight: 700; font-size: 19px;
  box-shadow: 0 4px 12px rgba(123,108,240,0.3);
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lav), var(--pink));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer;
  box-shadow: var(--shadow-xs);
}

.day-banner { margin-bottom: 20px; }
.day-pen { font-family: var(--pen); font-size: 16px; color: var(--text-dim); display: block; margin-bottom: 2px; }
.day-title { font-family: var(--dh); font-size: clamp(20px,3vw,26px); }
.day-title span { color: var(--lav-deep); }

/* ── 뷰 제목 ── */
.view-title {
  font-family: var(--dh);
  font-size: 24px; margin-bottom: 6px;
}
.view-title span { color: var(--lav-deep); }
.view-sub {
  font-family: var(--pen); font-size: 15px;
  color: var(--text-dim); margin-bottom: 22px;
}

/* ── 벤토 그리드 (홈) ── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 160px; gap: 14px; }
.cell {
  background: var(--card); border-radius: 22px; padding: 22px;
  box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.c-2x1 { grid-column: span 2; grid-row: span 1; }
.c-3x1 { grid-column: span 3; grid-row: span 1; }
.c-4x1 { grid-column: span 4; grid-row: span 1; }
.c-2x2 { grid-column: span 2; grid-row: span 2; }
.c-3x2 { grid-column: span 3; grid-row: span 2; }
.c-4x2 { grid-column: span 4; grid-row: span 2; }
.c-6x1 { grid-column: span 6; grid-row: span 1; }
.c-6x2 { grid-column: span 6; grid-row: span 2; }
.c-6x3 { grid-column: span 6; grid-row: span 3; }

/* 히어로 */
.cell-hero { background: linear-gradient(135deg, #EEF9F4, #D8F5EB); border: 1.5px solid rgba(46,189,138,0.2); cursor: default; }
.cell-hero::before {
  content: var(--hero-dday, 'D-?');
  position: absolute; right: -12px; bottom: -20px;
  font-family: var(--dh); font-size: 130px; color: rgba(46,189,138,0.1);
  pointer-events: none; line-height: 1;
}
.hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: 10px; }
.hero-eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-deep); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.7); } }
.hero-title { font-family: var(--dh); font-size: clamp(22px, 3vw, 32px); line-height: 1.15; margin-bottom: 8px; }
.hero-sub { font-size: 13px; color: var(--text-mid); margin-bottom: 16px; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.htag { padding: 4px 12px; border-radius: 40px; font-size: 12px; font-weight: 700; background: var(--mint); color: var(--mint-text); border: none; cursor: pointer; transition: all 170ms ease; }
.htag:hover { background: var(--mint-deep); color: #fff; }
.htag.ghost { background: transparent; border: 1.5px solid rgba(46,189,138,0.35); color: var(--mint-deep); }

/* 한마디 */
.cell-quote { background: var(--lav); border: 1.5px solid rgba(123,108,240,0.2); display: flex; flex-direction: column; justify-content: center; cursor: default; }
.quote-pen { font-family: var(--pen); font-size: 22px; color: var(--lav-text); line-height: 1.5; margin-bottom: 8px; }
.quote-from { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--lav-deep); text-transform: uppercase; }

/* 타이머 */
.cell-timer { background: linear-gradient(135deg, #EAFBF3, #C7F3E0); border: 1.5px solid rgba(46,189,138,0.22); display: flex; flex-direction: column; padding: 22px; cursor: default; }
.timer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.timer-label { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mint-text); }
.timer-today { font-size: 11px; color: var(--mint-text); font-weight: 600; }
.timer-subject-select { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.timer-subject-pill { padding: 4px 10px; border-radius: 40px; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.55); color: var(--mint-text); border: 1.5px solid transparent; cursor: pointer; transition: all 160ms ease; }
.timer-subject-pill:hover { background: #fff; }
.timer-subject-pill.selected { background: var(--mint-deep); color: #fff; border-color: var(--mint-deep); }
.timer-clock { font-family: var(--dh); font-size: clamp(36px, 5vw, 50px); line-height: 1; color: var(--mint-text); margin: 4px 0 10px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: center; }
.timer-clock.running { animation: tickPulse 1s ease-in-out infinite; }
@keyframes tickPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.75; } }
.timer-controls { display: flex; gap: 8px; justify-content: center; margin-top: auto; }
.timer-btn { padding: 10px 22px; border-radius: 40px; font-family: var(--sans); font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: all 170ms ease; box-shadow: var(--shadow-xs); }
.timer-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.timer-btn-start { background: var(--mint-deep); color: #fff; }
.timer-btn-end { background: var(--coral-deep); color: #fff; }
.timer-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* 캘린더 */
.cell-calendar { background: var(--card); border: 1.5px solid var(--border); display: flex; flex-direction: column; padding: 18px 22px; overflow: hidden; cursor: default; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font-family: var(--dh); font-size: 18px; letter-spacing: -0.01em; }
.cal-title span { color: var(--lav-deep); }
.cal-meta { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--card-warm); border: 1px solid var(--border); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all 160ms ease; }
.cal-nav-btn:hover { background: var(--lav); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-wd { font-family: var(--dm); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-dim); text-align: center; padding: 2px 0; }
.cal-wd.sun { color: var(--pink-deep); }
.cal-wd.sat { color: var(--lav-deep); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 4px; flex: 1; }
.cal-cell { position: relative; border-radius: 10px; background: #FAF8F2; display: flex; flex-direction: column; padding: 6px 8px; gap: 4px; font-size: 11px; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; min-height: 72px; overflow: hidden; }
.cal-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); z-index: 2; }
.cal-cell.other-month { opacity: 0.3; cursor: default; }
.cal-cell.other-month:hover { transform: none; box-shadow: none; }
.cal-cell.today { outline: 2px solid var(--lav-deep); outline-offset: -1px; }
.cal-cell.today .cal-day { color: var(--lav-deep); font-weight: 700; }
.cal-cell .cal-day { font-family: var(--dh); font-size: 13px; color: var(--text); line-height: 1; align-self: flex-start; }
.cal-cell .cal-head-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cal-cell .exam-chip { background: var(--pink); color: var(--pink-text); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; line-height: 1.3; }
.cal-cell .subj-line { font-size: 10px; color: var(--lav-text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cal-cell .subj-line .emoji { font-size: 11px; }
.cal-cell .subj-line .time { font-family: var(--dh); color: var(--lav-deep); margin-left: 2px; }
.cal-cell .cal-total { margin-top: auto; font-family: var(--dh); font-size: 11px; color: var(--lav-deep); opacity: 0.85; border-top: 1px dashed rgba(123,108,240,0.18); padding-top: 3px; }
.cal-cell .subj-more { font-size: 9px; color: var(--text-dim); font-weight: 600; }
.cal-cell.heat-1 { background: #F4F1FF; }
.cal-cell.heat-2 { background: #E8E2FB; }
.cal-cell.heat-3 { background: #DDD6F8; }
.cal-cell.heat-4 { background: #C2B6F2; }
.cal-cell.heat-5 { background: #9D8AED; }
.cal-cell.heat-5 .cal-day, .cal-cell.heat-5 .subj-line, .cal-cell.heat-5 .cal-total, .cal-cell.heat-5 .subj-line .time { color: #fff; }
.cal-cell.heat-5 .cal-total { border-top-color: rgba(255,255,255,0.3); }
.cal-cell.dow-0 .cal-day { color: var(--pink-deep); }
.cal-cell.dow-6 .cal-day { color: var(--lav-deep); }

/* D-day 리스트 */
.cell-ddays { background: var(--card); display: flex; flex-direction: column; gap: 0; padding: 18px 20px; }
.cell-title { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.dd-list { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.dd-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); transition: all 160ms ease; }
.dd-row:last-child { border-bottom: none; }
.dd-row:hover { padding-left: 4px; }
.dd-num { font-family: var(--dh); font-size: 20px; font-weight: 400; min-width: 52px; text-align: right; line-height: 1; }
.dd-info { flex: 1; min-width: 0; }
.dd-name { font-size: 13px; font-weight: 700; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-date { font-size: 11px; color: var(--text-dim); }
.dd-bar { width: 4px; align-self: stretch; border-radius: 4px; flex-shrink: 0; }
.dd-row[data-pos="0"] .dd-num { color: var(--pink-deep); } .dd-row[data-pos="0"] .dd-bar { background: var(--pink); }
.dd-row[data-pos="1"] .dd-num { color: var(--lav-deep); } .dd-row[data-pos="1"] .dd-bar { background: var(--lav); }
.dd-row[data-pos="2"] .dd-num { color: var(--yellow-deep); } .dd-row[data-pos="2"] .dd-bar { background: var(--yellow); }
.dd-row[data-pos="3"] .dd-num { color: var(--mint-deep); } .dd-row[data-pos="3"] .dd-bar { background: var(--mint); }
.dd-row[data-pos="4"] .dd-num { color: var(--coral-deep); } .dd-row[data-pos="4"] .dd-bar { background: var(--coral); }
.dd-del { opacity: 0; background: transparent; border: none; color: var(--text-dim); font-size: 14px; cursor: pointer; padding: 4px 6px; transition: opacity 160ms ease; }
.dd-row:hover .dd-del { opacity: 1; }
.dd-del:hover { color: var(--pink-deep); }
.empty-mini { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-dim); }
.empty-mini .emoji { font-size: 28px; }
.empty-mini .txt { font-family: var(--dh); font-size: 14px; }
.empty-mini .hint { font-size: 11px; }

/* 과목 */
.cell-subjects { background: var(--card); display: flex; align-items: center; gap: 10px; padding: 18px 20px; }
.cell-subjects .cell-title { writing-mode: initial; margin-bottom: 0; margin-right: 4px; flex-shrink: 0; }
.subj-pills { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; align-items: center; }
.subj-pill { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 40px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 180ms ease; border: none; }
.subj-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sp-pink { background: var(--pink); color: var(--pink-text); }
.sp-lav { background: var(--lav); color: var(--lav-text); }
.sp-mint { background: var(--mint); color: var(--mint-text); }
.sp-yellow { background: var(--yellow); color: var(--yellow-text); }
.sp-coral { background: var(--coral); color: var(--coral-deep); }
.sp-day { font-family: var(--dh); font-size: 11px; font-weight: 400; padding: 1px 6px; border-radius: 20px; background: rgba(255,255,255,0.5); }

/* AI 요점 */
.cell-ai { background: linear-gradient(160deg, #F2EEFF, #EAE4FF); border: 1.5px solid rgba(123,108,240,0.18); display: flex; flex-direction: column; }
.ai-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ai-icon { font-size: 22px; }
.ai-label { font-family: var(--dh); font-size: 17px; font-weight: 400; color: var(--lav-deep); }
.ai-list { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ai-row { display: flex; align-items: center; gap: 8px; }
.ai-emoji { font-size: 14px; flex-shrink: 0; }
.ai-name { font-size: 12px; font-weight: 600; flex: 1; }
.ai-pct { font-family: var(--dh); font-size: 14px; font-weight: 400; color: var(--lav-deep); }
.ai-bar-wrap { width: 100%; height: 5px; background: rgba(123,108,240,0.12); border-radius: 10px; overflow: hidden; margin-top: 3px; }
.ai-bar-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--lav-deep), var(--mint-deep)); transition: width 600ms ease; }
.ai-cta { margin-top: 12px; padding: 8px 16px; border-radius: 40px; border: none; background: var(--lav-deep); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700; cursor: pointer; align-self: flex-start; box-shadow: 0 4px 12px rgba(123,108,240,0.3); transition: all 180ms ease; }
.ai-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(123,108,240,0.4); }

/* 복습 카드 */
.cell-card { background: var(--pink); border: 1.5px solid rgba(240,82,122,0.2); display: flex; flex-direction: column; justify-content: space-between; cursor: default; }
.card-label { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-text); }
.card-q { font-family: var(--dh); font-size: clamp(13px,1.8vw,16px); font-weight: 400; line-height: 1.5; color: var(--text); }
.card-flip { align-self: flex-end; padding: 5px 12px; border-radius: 40px; border: none; background: rgba(255,255,255,0.55); color: var(--pink-text); font-size: 11px; font-weight: 700; cursor: pointer; }

/* 업로드 */
.cell-upload { background: var(--card-warm); border: 2px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; transition: all 220ms ease; }
.cell-upload:hover { border-color: var(--pink-deep); background: var(--pink); }
.cell-upload.dragover { border-color: var(--mint-deep); background: var(--mint); transform: scale(1.02); }
.upload-icon { font-size: 28px; }
.upload-txt { font-family: var(--dh); font-size: 15px; }
.upload-sub { font-size: 11px; color: var(--text-dim); }

/* 통계 */
.cell-stats { background: var(--coral); border: 1.5px solid rgba(224,92,48,0.15); display: flex; flex-direction: column; justify-content: space-between; cursor: default; }
.stats-label { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-deep); }
.stats-nums { display: flex; gap: 16px; }
.stat-item .sn { font-family: var(--dh); font-size: 32px; line-height: 1; color: var(--text); }
.stat-item .sl { font-size: 11px; color: var(--text-mid); font-weight: 600; }

/* 도넛 */
.cell-donut { background: var(--card-warm); border: 1.5px solid var(--border); display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: default; }
.donut-wrap { width: 88px; height: 88px; flex-shrink: 0; position: relative; }
.donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center .num { font-family: var(--dh); font-size: 18px; line-height: 1; color: var(--text); }
.donut-center .lbl { font-size: 9px; color: var(--text-dim); margin-top: 2px; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
.donut-legend .leg-title { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.leg-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.leg-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.leg-time { font-family: var(--dh); color: var(--text-mid); }
.donut-empty { width: 100%; text-align: center; color: var(--text-dim); font-size: 12px; }

/* 시간표 */
.cell-timetable { background: linear-gradient(135deg, #FFF0F5, #FFE4EE); border: 1.5px solid rgba(240,82,122,0.18); display: flex; flex-direction: column; padding: 18px 20px; cursor: default; }
.tt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tt-label { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--pink-text); }
.tt-day { font-family: var(--dh); font-size: 12px; color: var(--pink-text); margin-top: 2px; }
.tt-edit-btn { background: rgba(255,255,255,0.55); border: none; color: var(--pink-text); padding: 4px 12px; border-radius: 40px; font-size: 10px; font-weight: 700; cursor: pointer; }
.tt-edit-btn:hover { background: #fff; }
.tt-list { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.tt-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; }
.tt-period { font-family: var(--dh); font-size: 11px; color: var(--pink-text); min-width: 22px; opacity: 0.7; }
.tt-subject { flex: 1; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-subject.empty { color: var(--text-dim); opacity: 0.5; font-weight: 400; }
.tt-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-dim); }
.tt-empty-state .emoji { font-size: 28px; }
.tt-empty-state .txt { font-family: var(--dh); font-size: 13px; }
.tt-empty-state .hint { font-size: 10px; }
.tt-edit-grid { display: grid; grid-template-columns: 44px repeat(5, 1fr); gap: 4px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.tt-edit-head { font-family: var(--dh); font-size: 12px; color: var(--text-mid); text-align: center; padding: 6px 0; }
.tt-edit-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-family: var(--sans); background: var(--card-warm); text-align: center; }
.tt-edit-input:focus { outline: none; border-color: var(--pink-deep); background: #fff; }
.tt-edit-period { font-family: var(--dh); font-size: 12px; color: var(--text-mid); text-align: center; align-self: center; }

/* 급식 + 학사일정 (NEIS placeholder) */
.cell-lunch { background: linear-gradient(135deg, #FFF8E1, #FFEDB8); border: 1.5px solid rgba(212,160,16,0.18); display: flex; flex-direction: column; padding: 18px 20px; cursor: default; }
.lunch-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lunch-label { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--yellow-text); }
.lunch-date { font-family: var(--dh); font-size: 11px; color: var(--yellow-text); }
.lunch-list { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.lunch-pending { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--yellow-text); opacity: 0.7; text-align: center; }
.lunch-pending .emoji { font-size: 24px; }
.lunch-pending .txt { font-family: var(--dh); font-size: 12px; }
.lunch-pending .hint { font-size: 10px; opacity: 0.8; }

.cell-school-sched { background: linear-gradient(140deg, #F0F4FF, #DCE5FF); border: 1.5px solid rgba(91,113,200,0.18); display: flex; flex-direction: column; padding: 18px 20px; cursor: default; }
.ss-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ss-label { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #5B71C8; }
.ss-week { font-family: var(--dh); font-size: 11px; color: #5B71C8; }
.ss-list { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ss-pending { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #5B71C8; opacity: 0.7; text-align: center; padding: 0 8px; }
.ss-pending .emoji { font-size: 24px; }
.ss-pending .txt { font-family: var(--dh); font-size: 12px; }
.ss-pending .hint { font-size: 10px; opacity: 0.8; }

.setup-btn { margin-top: 8px; padding: 5px 14px; border-radius: 40px; border: none; background: rgba(255,255,255,0.7); color: var(--text-mid); font-size: 11px; font-weight: 700; cursor: pointer; }
.setup-btn:hover { background: #fff; color: var(--text); transform: translateY(-1px); }

/* 도움말 카드 (도움말 뷰 안) */

/* 도움말 카드 */
.help-card { background: var(--card); border-radius: 18px; padding: 24px 26px; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.help-card h3 { font-family: var(--dh); font-size: 18px; margin-bottom: 10px; }
.help-card h3 .emoji { margin-right: 8px; }
.help-card p { font-size: 14px; line-height: 1.7; color: var(--text-mid); margin-bottom: 8px; }
.help-card ul { padding-left: 20px; }
.help-card li { font-size: 13px; line-height: 1.7; color: var(--text-mid); margin-bottom: 4px; }
.help-card .help-kbd { display: inline-block; padding: 2px 6px; border-radius: 5px; background: var(--card-warm); border: 1px solid var(--border); font-family: var(--dm); font-size: 11px; color: var(--text); margin: 0 2px; }
.help-card strong { color: var(--text); }

/* 모달 */
.modal-bg { position: fixed; inset: 0; background: rgba(28, 28, 46, 0.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; animation: fadeIn 200ms ease; }
.modal-bg.hidden { display: none; }
.modal-card { background: var(--card); border-radius: 22px; padding: 28px; width: 100%; max-width: 420px; box-shadow: var(--shadow-md); animation: slideUp 220ms ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
.modal-title { font-family: var(--dh); font-size: 22px; margin-bottom: 4px; }
.modal-title span { color: var(--lav-deep); }
.modal-sub { font-family: var(--pen); font-size: 15px; color: var(--text-dim); margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field-label { display: block; font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 6px; }
.field-input, .field-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--card-warm); }
.field-input:focus, .field-textarea:focus { outline: none; border-color: var(--lav-deep); }
.field-textarea { resize: none; min-height: 60px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.mbtn { padding: 9px 18px; border-radius: 40px; font-family: var(--sans); font-size: 13px; font-weight: 700; border: none; cursor: pointer; }
.mbtn-cancel { background: transparent; color: var(--text-mid); }
.mbtn-cancel:hover { background: var(--border); }
.mbtn-save { background: linear-gradient(135deg, var(--lav-deep), var(--pink-deep)); color: #fff; box-shadow: 0 4px 12px rgba(123,108,240,0.3); }
.mbtn-save:hover { transform: translateY(-1px); }

.school-search-list { margin-top: 14px; max-height: 240px; overflow-y: auto; }
.school-search-empty { padding: 30px 0; text-align: center; color: var(--text-dim); font-size: 12px; }
.school-current { padding: 10px 14px; background: var(--mint); border-radius: 10px; margin-bottom: 14px; font-size: 12px; color: var(--mint-text); display: flex; align-items: center; justify-content: space-between; }
.school-current strong { font-family: var(--dh); }
.school-clear-btn { background: rgba(255,255,255,0.7); border: none; padding: 3px 10px; border-radius: 40px; font-size: 10px; font-weight: 700; color: var(--mint-text); cursor: pointer; }

/* 토스트 */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 10px 20px; border-radius: 40px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md); z-index: 2000; animation: toastIn 220ms ease, toastOut 220ms ease 2.6s forwards; }
.toast.toast-success { background: var(--mint-deep); }
.toast.toast-warm { background: var(--coral-deep); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(20px); } }

/* 반응형 */
@media (max-width: 900px) {
  .sb-toggle { display: flex; align-items: center; justify-content: center; }
  .sidebar { position: fixed; left: -250px; top: 0; transition: left 220ms ease; z-index: 99; box-shadow: var(--shadow-md); }
  .sidebar.open { left: 0; }
  .main { padding-top: 56px; }
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
  .c-4x2, .c-4x1, .c-3x2, .c-3x1 { grid-column: span 4; }
  .c-2x2, .c-2x1 { grid-column: span 2; }
  .c-6x1, .c-6x2, .c-6x3 { grid-column: span 4; }
}
@media (max-width: 520px) {
  .main { padding: 56px 14px 40px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .c-4x2, .c-4x1, .c-3x2, .c-3x1, .c-6x1, .c-6x2, .c-6x3 { grid-column: span 2; }
  .c-2x2, .c-2x1 { grid-column: span 2; }
  .hero-title { font-size: 20px; }
  .cal-cell { min-height: 56px; padding: 4px 5px; }
  .cal-cell .exam-chip { display: none; }
}

/* 과목 추가 모달 */
.emoji-pick { padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--card-warm); font-size: 18px; cursor: pointer; transition: all 160ms ease; }
.emoji-pick:hover { background: var(--lav); }
.emoji-pick.selected { background: var(--lav-deep); transform: scale(1.1); }
.saved-subj { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 30px; background: var(--card-warm); border: 1px solid var(--border); font-size: 12px; margin: 2px 4px 2px 0; }
.saved-subj .del { background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 0 2px; font-size: 13px; }
.saved-subj .del:hover { color: var(--pink-deep); }
.saved-title { font-family: var(--dm); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.subj-pill.user-added { position: relative; }
.subj-pill.user-added .pill-del { display: none; }

/* 내 과목 카드 v2 (전체 너비) */
.cell-subjects-v2 {
  background: var(--card);
  display: flex; flex-direction: column;
  padding: 16px 20px;
  cursor: default;
}
.subj-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.subj-card-title {
  font-family: var(--dh);
  font-size: 15px;
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.subj-card-emoji { font-size: 16px; }
.subj-add-cta {
  padding: 6px 14px; border-radius: 40px;
  background: linear-gradient(135deg, var(--lav-deep), var(--pink-deep));
  color: #fff; border: none;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(123,108,240,0.25);
  transition: all 170ms ease;
}
.subj-add-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(123,108,240,0.35); }

/* 칩 — 시험 자동 추출 vs 사용자 등록 시각 구분 */
.cell-subjects-v2 .subj-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  width: 100%;
}
.cell-subjects-v2 .subj-pill {
  font-size: 12px;
  padding: 6px 12px;
}
.cell-subjects-v2 .subj-pill .sp-day {
  margin-left: 4px;
}
.subj-pill-del {
  background: transparent; border: none;
  color: inherit; opacity: 0.4;
  cursor: pointer; padding: 0 0 0 6px;
  font-size: 11px; font-weight: 700;
  transition: opacity 160ms ease;
}
.subj-pill:hover .subj-pill-del { opacity: 1; }

.subj-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 4px;
}
.subj-empty .hint {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

/* 테마 — body에 data-theme 속성으로 전환 */
body[data-theme="warm"] { --bg: #F7F5F0; }
body[data-theme="rose"] { --bg: #FDF2F5; }
body[data-theme="mint"] { --bg: #EFFAF4; }
body[data-theme="lav"]  { --bg: #F2EFFA; }
body[data-theme="sky"]  { --bg: #EEF4FB; }
body[data-theme="dark"] {
  --bg: #1A1A24; --card: #25252F; --card-warm: #2C2C38;
  --text: #F0EEE6; --text-mid: #A8A8BF; --text-dim: #6F6F85;
  --border: #383844;
}

/* 테마 픽커 */
.theme-row { display: flex; gap: 6px; margin-top: 8px; }
.theme-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer;
  transition: all 160ms ease;
}
.theme-dot:hover { transform: scale(1.15); }
.theme-dot.selected { border-color: var(--lav-deep); transform: scale(1.15); box-shadow: 0 0 0 2px rgba(123,108,240,0.18); }
.theme-dot[data-theme="warm"] { background: #F7F5F0; }
.theme-dot[data-theme="rose"] { background: #FDF2F5; }
.theme-dot[data-theme="mint"] { background: #EFFAF4; }
.theme-dot[data-theme="lav"]  { background: #F2EFFA; }
.theme-dot[data-theme="sky"]  { background: #EEF4FB; }
.theme-dot[data-theme="dark"] { background: #1A1A24; }

/* 사이드바 테마 영역 */
.sb-theme {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--card-warm);
  border-radius: 10px;
}
.sb-theme-label {
  font-family: var(--dm); font-size: 9px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}

/* 과목 모달 — 컬러 픽커 */
.color-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: all 160ms ease;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: var(--text); transform: scale(1.15); }
.color-swatch[data-c="pink"]   { background: var(--pink); }
.color-swatch[data-c="lav"]    { background: var(--lav); }
.color-swatch[data-c="mint"]   { background: var(--mint); }
.color-swatch[data-c="yellow"] { background: var(--yellow); }
.color-swatch[data-c="coral"]  { background: var(--coral); }
.color-swatch[data-c="sky"]    { background: #C5DDF5; }
.color-swatch[data-c="peach"]  { background: #FFD9C0; }
.color-swatch[data-c="gray"]   { background: #E0E0E8; }

/* 사용자 지정 컬러 칩 (subj-pill 위에 inline 색) */
.subj-pill.user-color-pink   { background: var(--pink);   color: var(--pink-text); }
.subj-pill.user-color-lav    { background: var(--lav);    color: var(--lav-text); }
.subj-pill.user-color-mint   { background: var(--mint);   color: var(--mint-text); }
.subj-pill.user-color-yellow { background: var(--yellow); color: var(--yellow-text); }
.subj-pill.user-color-coral  { background: var(--coral);  color: var(--coral-deep); }
.subj-pill.user-color-sky    { background: #C5DDF5;       color: #2C4A7A; }
.subj-pill.user-color-peach  { background: #FFD9C0;       color: #8C4A20; }
.subj-pill.user-color-gray   { background: #E0E0E8;       color: #4A4A60; }

/* 저작권 footer */
.app-footer {
  margin-top: 28px; padding: 20px 0 0;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-dim);
  text-align: center;
}
.app-footer a { color: var(--lav-deep); text-decoration: none; margin: 0 4px; }
.app-footer a:hover { text-decoration: underline; }

/* 테마별 사이드바·카드 톤 (다크 외에도 자연스럽게) */
body[data-theme="warm"] { --card: #FFFFFF; --card-warm: #FFFDF8; --border: #ECEAF4; }
body[data-theme="rose"] { --card: #FFFDFE; --card-warm: #FCEEF1; --border: #F5E0E6; }
body[data-theme="mint"] { --card: #FAFFFD; --card-warm: #EAF7F0; --border: #D8EDE2; }
body[data-theme="lav"]  { --card: #FCFBFF; --card-warm: #ECE6FA; --border: #DCD3F0; }
body[data-theme="sky"]  { --card: #FAFCFE; --card-warm: #E6EEF8; --border: #D0DCEE; }

/* 카드별 사용자 지정 색 — body 클래스 의존 없이 각 셀에 직접 적용 */
.cell[data-usercolor="pink"]   { background: linear-gradient(135deg, #FFE9F2, #FFD6E8) !important; border: 1.5px solid rgba(240,82,122,0.22) !important; }
.cell[data-usercolor="lav"]    { background: linear-gradient(135deg, #ECE6FA, #DDD6F8) !important; border: 1.5px solid rgba(123,108,240,0.22) !important; }
.cell[data-usercolor="mint"]   { background: linear-gradient(135deg, #DDF6E8, #B8F0D8) !important; border: 1.5px solid rgba(46,189,138,0.22) !important; }
.cell[data-usercolor="yellow"] { background: linear-gradient(135deg, #FFF7CB, #FFF3B0) !important; border: 1.5px solid rgba(212,160,16,0.22) !important; }
.cell[data-usercolor="coral"]  { background: linear-gradient(135deg, #FFEBE0, #FFE0D4) !important; border: 1.5px solid rgba(224,92,48,0.22) !important; }
.cell[data-usercolor="sky"]    { background: linear-gradient(135deg, #DCE9F8, #C5DDF5) !important; border: 1.5px solid rgba(91,136,200,0.22) !important; }
.cell[data-usercolor="peach"]  { background: linear-gradient(135deg, #FFE5D2, #FFD9C0) !important; border: 1.5px solid rgba(228,140,80,0.22) !important; }
.cell[data-usercolor="cream"]  { background: linear-gradient(135deg, #FFFAEF, #FFF1D5) !important; border: 1.5px solid rgba(200,160,90,0.22) !important; }
.cell[data-usercolor="gray"]   { background: linear-gradient(135deg, #F4F4F8, #E0E0E8) !important; border: 1.5px solid rgba(90,90,110,0.18) !important; }
.cell[data-usercolor="white"]  { background: #FFFFFF !important; border: 1.5px solid var(--border) !important; }

/* 셀 우상단 컬러 버튼 (호버 시) */
.cell-color-btn {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border);
  font-size: 13px; cursor: pointer;
  opacity: 0; transition: opacity 160ms ease, transform 160ms ease;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.cell:hover .cell-color-btn { opacity: 1; }
.cell-color-btn:hover { transform: scale(1.12); background: #fff; }

/* 컬러 픽커 팝업 */
.color-pop {
  position: fixed;
  background: var(--card);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow-md);
  z-index: 1500;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  animation: fadeIn 160ms ease;
}
.color-pop .swatch {
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: all 160ms ease;
}
.color-pop .swatch:hover { transform: scale(1.15); }
.color-pop .swatch[data-c="pink"]   { background: #FFD6E8; }
.color-pop .swatch[data-c="lav"]    { background: #DDD6F8; }
.color-pop .swatch[data-c="mint"]   { background: #B8F0D8; }
.color-pop .swatch[data-c="yellow"] { background: #FFF3B0; }
.color-pop .swatch[data-c="coral"]  { background: #FFE0D4; }
.color-pop .swatch[data-c="sky"]    { background: #C5DDF5; }
.color-pop .swatch[data-c="peach"]  { background: #FFD9C0; }
.color-pop .swatch[data-c="cream"]  { background: #FFF1D5; }
.color-pop .swatch[data-c="gray"]   { background: #E0E0E8; }
.color-pop .swatch[data-c="reset"]  {
  background: #FFFFFF;
  border: 2px dashed var(--text-dim);
  font-size: 14px; line-height: 22px; text-align: center;
}
.color-pop .swatch.selected { border-color: var(--text); transform: scale(1.15); }

/* ── 다꾸: 사용자 컬러 적용 시 글씨 색 자동 보정 ── */
/* 카드에 컬러가 지정된 경우, 안쪽 모든 텍스트를 진한 본문색으로 강제 */
.cell[data-usercolor] .hero-eyebrow,
.cell[data-usercolor] .hero-title,
.cell[data-usercolor] .hero-sub,
.cell[data-usercolor] .timer-label,
.cell[data-usercolor] .timer-today,
.cell[data-usercolor] .timer-clock,
.cell[data-usercolor] .timer-clock.running,
.cell[data-usercolor] .timer-subject-pill,
.cell[data-usercolor] .streak-label,
.cell[data-usercolor] .streak-num,
.cell[data-usercolor] .streak-desc,
.cell[data-usercolor] .quote-pen,
.cell[data-usercolor] .quote-from,
.cell[data-usercolor] .cell-title,
.cell[data-usercolor] .cal-title,
.cell[data-usercolor] .cal-title span,
.cell[data-usercolor] .cal-meta,
.cell[data-usercolor] .ai-label,
.cell[data-usercolor] .ai-name,
.cell[data-usercolor] .ai-pct,
.cell[data-usercolor] .card-label,
.cell[data-usercolor] .card-q,
.cell[data-usercolor] .stats-label,
.cell[data-usercolor] .stat-item .sn,
.cell[data-usercolor] .stat-item .sl,
.cell[data-usercolor] .upload-txt,
.cell[data-usercolor] .upload-sub,
.cell[data-usercolor] .lunch-label,
.cell[data-usercolor] .lunch-date,
.cell[data-usercolor] .ss-label,
.cell[data-usercolor] .ss-week,
.cell[data-usercolor] .tt-label,
.cell[data-usercolor] .tt-day,
.cell[data-usercolor] .tt-period,
.cell[data-usercolor] .tt-subject,
.cell[data-usercolor] .donut-center .num,
.cell[data-usercolor] .donut-center .lbl,
.cell[data-usercolor] .leg-title,
.cell[data-usercolor] .leg-name,
.cell[data-usercolor] .leg-time,
.cell[data-usercolor] .dd-name,
.cell[data-usercolor] .dd-date,
.cell[data-usercolor] .subj-line,
.cell[data-usercolor] .subj-line .time,
.cell[data-usercolor] .cal-total,
.cell[data-usercolor] .cal-day {
  color: var(--text) !important;
}

/* 펄스 점도 진한 색으로 통일 */
.cell[data-usercolor] .hero-eyebrow .pulse {
  background: var(--text) !important;
}

/* 거대 D-day 배경 숫자 — 사용자 컬러 시 옅게 통일 */
.cell[data-usercolor].cell-hero::before {
  color: rgba(28,28,46,0.08) !important;
}

/* 타이머 시작·종료 버튼은 자체 색 유지 (그대로 잘 보임) */
/* htag, subj-pill, sp-day 등 의도된 색은 유지 */

/* 다크 테마에서 사용자 컬러 적용 시 글씨는 흰색에 가깝게 */
body[data-theme="dark"] .cell[data-usercolor] .hero-title,
body[data-theme="dark"] .cell[data-usercolor] .timer-clock,
body[data-theme="dark"] .cell[data-usercolor] .cell-title,
body[data-theme="dark"] .cell[data-usercolor] .stats-label,
body[data-theme="dark"] .cell[data-usercolor] .quote-pen,
body[data-theme="dark"] .cell[data-usercolor] .ai-label,
body[data-theme="dark"] .cell[data-usercolor] .card-label {
  color: #1C1C2E !important; /* 라이트 카드 위 진한 글씨 */
}

/* AI 데모 화면 */
.ai-demo-wrap { display: flex; flex-direction: column; gap: 14px; }
.ai-demo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 30px;
  background: linear-gradient(135deg, var(--lav), var(--pink));
  color: var(--lav-text); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  align-self: flex-start;
}
.ai-demo-section {
  background: var(--card); border-radius: 18px;
  padding: 22px 24px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.ai-demo-h {
  font-family: var(--dh); font-size: 18px;
  margin-bottom: 12px;
}
.ai-demo-h .emoji { margin-right: 8px; }
.ai-demo-subj {
  font-family: var(--dm); font-size: 10px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--lav-deep); margin-bottom: 12px;
}
.ai-demo-summary {
  background: var(--card-warm);
  border-radius: 12px;
  padding: 14px 18px;
  border-left: 3px solid var(--lav-deep);
  font-size: 14px; line-height: 1.7;
  color: var(--text);
  margin-bottom: 10px;
}
.ai-demo-summary strong { color: var(--lav-deep); }

/* 플래시카드 */
.flashcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.flashcard {
  background: linear-gradient(135deg, #FFF6FA, #FFE9F2);
  border: 1.5px solid rgba(240,82,122,0.18);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 200ms ease;
  perspective: 600px;
  min-height: 100px;
  position: relative;
}
.flashcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.flashcard.flipped { background: linear-gradient(135deg, #F2EEFF, #DDD6F8); border-color: rgba(123,108,240,0.22); }
.fc-side { font-size: 12px; font-weight: 700; color: var(--pink-text); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.flashcard.flipped .fc-side { color: var(--lav-deep); }
.fc-body { font-size: 14px; line-height: 1.5; color: var(--text); }
.fc-hint { font-size: 10px; color: var(--text-dim); margin-top: 8px; }

/* 예상 문제 */
.quiz-list { display: flex; flex-direction: column; gap: 10px; }
.quiz-item {
  background: var(--card-warm);
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
}
.quiz-q {
  font-family: var(--dh); font-size: 14px;
  margin-bottom: 8px;
}
.quiz-q .num {
  color: var(--lav-deep); margin-right: 8px;
}
.quiz-options { display: flex; flex-direction: column; gap: 4px; padding-left: 8px; }
.quiz-options li {
  font-size: 13px; color: var(--text-mid);
  padding: 4px 0;
}
.quiz-answer {
  margin-top: 10px;
  font-size: 12px; color: var(--mint-text);
  background: var(--mint);
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-block;
}
.quiz-answer.hidden { display: none; }
.quiz-toggle {
  background: transparent; border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 30px;
  font-size: 11px; color: var(--text-mid); cursor: pointer;
  margin-top: 8px;
}
.quiz-toggle:hover { background: var(--card-warm); }

.demo-cta {
  margin-top: 8px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--lav-deep), var(--pink-deep));
  color: #fff;
  border: none; border-radius: 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(123,108,240,0.3);
  align-self: flex-start;
}
.demo-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(123,108,240,0.4); }

/* ── 필기체 → 동글동글 Hi Melody로 변경 ── */
.day-pen,
.brand-sub,
.sb-brand-sub,
.quote-pen,
.view-sub,
.modal-sub {
  font-family: 'Hi Melody', 'Nanum Pen Script', cursive !important;
  letter-spacing: 0.01em;
}

/* Hi Melody는 Nanum Pen Script보다 살짝 작아 보여서 크기 보정 */
.day-pen { font-size: 18px; }
.quote-pen { font-size: 25px; line-height: 1.4; }
.view-sub { font-size: 16px; }
.modal-sub { font-size: 16px; }
.sb-brand-sub { font-size: 13px; }

/* ── 타이머 과목 칩: 사용자 컬러 카드 안에서도 잘 보이게 ── */
.cell[data-usercolor] .timer-subject-pill {
  background: rgba(255,255,255,0.85) !important;
  color: var(--text) !important;
  border-color: rgba(28,28,46,0.12) !important;
}
.cell[data-usercolor] .timer-subject-pill:hover {
  background: #fff !important;
}
.cell[data-usercolor] .timer-subject-pill.selected {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
}
.cell[data-usercolor] .timer-subject-pill[disabled] {
  opacity: 0.6;
}

/* 타이머 시작/종료 버튼도 사용자 컬러 시 잘 보이게 */
.cell[data-usercolor] .timer-btn-start {
  background: #1C1C2E !important;
  color: #fff !important;
}
.cell[data-usercolor] .timer-btn-end {
  background: var(--coral-deep) !important;
  color: #fff !important;
}

/* ── 폰트 재조정: 학생 취향 — Single Day (시크 손글씨) ── */
.day-pen,
.brand-sub,
.sb-brand-sub,
.quote-pen,
.view-sub,
.modal-sub {
  font-family: 'Single Day', 'Hi Melody', 'Nanum Pen Script', cursive !important;
}

/* Single Day는 줄간격 좁고 자간 좀 더 필요 */
.day-pen { font-size: 17px; letter-spacing: 0.02em; }
.quote-pen { font-size: 26px; line-height: 1.45; letter-spacing: 0.01em; }
.view-sub { font-size: 16px; letter-spacing: 0.01em; }
.modal-sub { font-size: 16px; letter-spacing: 0.01em; }
.sb-brand-sub { font-size: 13px; }

/* ════════════════════════════════════════════════
   사용자 컬러 적용 시 — 모든 카드 글씨 강제 보정
   범용 규칙 + 카드별 특수 클래스 모두 포함
════════════════════════════════════════════════ */

/* 카드 자체 색을 진한 본문색으로 강제 */
.cell[data-usercolor] {
  color: var(--text) !important;
}

/* 카드 안의 모든 텍스트성 자식 (버튼·바·점·이미지 제외) 색 상속 */
.cell[data-usercolor] span:not(.subj-pill-del):not(.pulse):not(.dd-bar):not(.streak-fire):not(.upload-icon):not(.cell-color-btn):not(.exam-chip):not(.sp-day),
.cell[data-usercolor] div:not(.subj-pills):not(.dd-list):not(.tt-list):not(.ai-list):not(.lunch-list):not(.ss-list):not(.timer-subject-select):not(.timer-controls):not(.donut-wrap):not(.donut-center):not(.donut-legend):not(.subj-pill):not(.timer-clock):not(.cell-color-btn):not(.color-pop):not(.cal-grid):not(.cal-cell):not(.cal-head):not(.cal-weekdays):not(.cal-wd):not(.cal-head-row):not(.subj-line):not(.cal-total):not(.subj-more),
.cell[data-usercolor] p,
.cell[data-usercolor] h1,
.cell[data-usercolor] h2,
.cell[data-usercolor] h3,
.cell[data-usercolor] strong {
  color: var(--text) !important;
}

/* 학교 정보 카드 — 학사일정 */
.cell[data-usercolor] .ss-label,
.cell[data-usercolor] .ss-week,
.cell[data-usercolor] .ss-pending,
.cell[data-usercolor] .ss-pending .txt,
.cell[data-usercolor] .ss-pending .hint,
.cell[data-usercolor] .ss-item,
.cell[data-usercolor] .ss-date,
.cell[data-usercolor] .ss-name,
.cell[data-usercolor] .setup-btn {
  color: var(--text) !important;
}
.cell[data-usercolor] .ss-pending { opacity: 1; }

/* 학교 정보 카드 — 급식 */
.cell[data-usercolor] .lunch-label,
.cell[data-usercolor] .lunch-date,
.cell[data-usercolor] .lunch-pending,
.cell[data-usercolor] .lunch-pending .txt,
.cell[data-usercolor] .lunch-pending .hint,
.cell[data-usercolor] .lunch-item {
  color: var(--text) !important;
}
.cell[data-usercolor] .lunch-pending { opacity: 1; }

/* 작은 라벨(uppercase 라벨)도 진하게 — 가독성 우선 */
.cell[data-usercolor] .cell-title,
.cell[data-usercolor] .streak-label,
.cell[data-usercolor] .timer-label,
.cell[data-usercolor] .timer-today,
.cell[data-usercolor] .stats-label,
.cell[data-usercolor] .card-label,
.cell[data-usercolor] .quote-from,
.cell[data-usercolor] .leg-title,
.cell[data-usercolor] .tt-label,
.cell[data-usercolor] .tt-day,
.cell[data-usercolor] .ai-label,
.cell[data-usercolor] .cal-meta {
  color: var(--text) !important;
  opacity: 0.85;
}

/* 보조 텍스트 살짝 흐리게(단, 진한 본문색 베이스 위에서) */
.cell[data-usercolor] .hero-sub,
.cell[data-usercolor] .upload-sub,
.cell[data-usercolor] .dd-date,
.cell[data-usercolor] .empty-mini .hint,
.cell[data-usercolor] .tt-empty-state .hint,
.cell[data-usercolor] .donut-empty,
.cell[data-usercolor] .subj-empty,
.cell[data-usercolor] .subj-empty .hint {
  color: var(--text) !important;
  opacity: 0.72;
}

/* 도넛 차트 중앙 숫자 */
.cell[data-usercolor] .donut-center .num,
.cell[data-usercolor] .donut-center .lbl {
  color: var(--text) !important;
}

/* 도움말의 버튼 (setup-btn) — 컬러 변경 카드 안에서도 잘 보이게 */
.cell[data-usercolor] .setup-btn {
  background: rgba(255,255,255,0.85) !important;
  color: var(--text) !important;
}
.cell[data-usercolor] .setup-btn:hover {
  background: #fff !important;
}

/* ── 날씨 카드 ── */
.cell-weather {
  background: linear-gradient(135deg, #E6F3FB, #C5DDF5);
  border: 1.5px solid rgba(91,136,200,0.22);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  cursor: default;
  gap: 6px;
}
.weather-top {
  display: flex; align-items: center; gap: 10px;
}
.weather-icon {
  font-size: 32px; line-height: 1;
}
.weather-temp {
  font-family: var(--dh);
  font-size: 24px;
  color: #2C4A7A;
  line-height: 1;
}
.weather-msg {
  font-size: 12px;
  color: #2C4A7A;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-extra {
  font-size: 10px;
  color: #5B71C8;
  opacity: 0.85;
}

/* ── 최종 폰트 정리: 손글씨 → Gowun Dodum (둥글한 산세리프) ── */
.day-pen,
.brand-sub,
.sb-brand-sub,
.quote-pen,
.view-sub,
.modal-sub {
  font-family: 'Gowun Dodum', 'Pretendard', sans-serif !important;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* 크기 재조정 (Gowun Dodum 기준) */
.day-pen { font-size: 14px; color: var(--text-mid); }
.quote-pen { font-size: 18px; line-height: 1.5; color: var(--lav-text); font-weight: 400; }
.view-sub { font-size: 14px; }
.modal-sub { font-size: 14px; }
.sb-brand-sub { font-size: 11px; }

/* ── 날씨 카드 v2 (정보 풍부) ── */
.cell-weather {
  background: linear-gradient(135deg, #E6F3FB, #C5DDF5);
  border: 1.5px solid rgba(91,136,200,0.22);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 16px 20px;
  gap: 8px;
  cursor: default;
}
.w-row {
  display: flex; align-items: center; gap: 14px;
}
.w-icon {
  font-size: 38px; line-height: 1;
}
.w-temp {
  font-family: var(--dh);
  font-size: 30px;
  color: #2C4A7A;
  line-height: 1;
}
.w-info {
  display: flex; flex-direction: column;
  gap: 2px; flex: 1; min-width: 0;
}
.w-range {
  font-family: var(--dh);
  font-size: 13px;
  color: #5B71C8;
  white-space: nowrap;
}
.w-range .lo { color: #6B9AC8; }
.w-range .hi { color: #C8527A; }
.w-state {
  font-size: 11px;
  color: #5B71C8;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-msg {
  font-size: 12px;
  color: #2C4A7A;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 4px;
  border-top: 1px dashed rgba(91,136,200,0.22);
}

/* 급식 카드 — 조/중/석식 섹션 */
.meal-section {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(212,160,16,0.18);
}
.meal-section:last-child { margin-bottom: 0; border-bottom: none; }
.meal-section-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--dm); font-size: 9px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--yellow-text); margin-bottom: 3px;
}
.meal-section-head .cal {
  font-family: var(--dh);
  font-size: 10px;
  color: var(--yellow-text);
  opacity: 0.7;
}
.meal-section .lunch-item {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meal-empty {
  color: var(--text-dim); opacity: 0.6;
  font-size: 11px; padding: 2px 0;
}

/* c-3x3 그리드 + 반응형 */
.c-3x3 { grid-column: span 3; grid-row: span 3; }
@media (max-width: 780px) {
  .c-3x3 { grid-column: span 4; }
}
@media (max-width: 520px) {
  .c-3x3 { grid-column: span 2; }
}

/* 학사일정 — 이번 달 전체 + 스크롤 */
.cell-school-sched .ss-list {
  overflow-y: auto;
  scrollbar-width: thin;
}
.cell-school-sched .ss-list::-webkit-scrollbar { width: 4px; }
.cell-school-sched .ss-list::-webkit-scrollbar-thumb {
  background: rgba(91,113,200,0.25); border-radius: 4px;
}
.ss-month-label {
  font-family: var(--dm); font-size: 9px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-dim); margin: 4px 0;
}
.ss-month-label.future { color: #5B71C8; opacity: 0.85; }

/* 오늘 일정 강조 */
.ss-item.is-today {
  background: rgba(91,113,200,0.12);
  border-radius: 8px;
  padding: 6px 8px;
  margin: 0 -4px;
  border-left: 3px solid #5B71C8;
}
.ss-item.is-today .ss-date { color: #5B71C8; font-weight: 700; }

/* 과거 일정 흐림 */
.ss-item.is-past { opacity: 0.45; }
.ss-item.is-past .ss-name { text-decoration: line-through; opacity: 0.8; }

/* 급식 카드도 같은 크기로 스크롤 가능 */
.cell-lunch .lunch-list {
  overflow-y: auto;
  scrollbar-width: thin;
}
.cell-lunch .lunch-list::-webkit-scrollbar { width: 4px; }
.cell-lunch .lunch-list::-webkit-scrollbar-thumb {
  background: rgba(212,160,16,0.25); border-radius: 4px;
}

/* 상세 모달 (alert 대체) */
.detail-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-mid);
}
.detail-section {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.detail-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.detail-section-h {
  font-family: var(--dm);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.detail-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  padding: 2px 0;
}
.detail-row .emoji { font-size: 16px; }
.detail-row .name { flex: 1; color: var(--text); }
.detail-row .time { font-family: var(--dh); color: var(--lav-deep); }
.detail-total {
  margin-top: 8px;
  font-family: var(--dh);
  font-size: 14px;
  color: var(--lav-deep);
  text-align: right;
}
.detail-exam {
  background: var(--pink);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--pink-text);
}
.detail-exam .name { font-family: var(--dh); font-size: 15px; }
.detail-exam .note { font-size: 12px; opacity: 0.85; margin-top: 4px; }

/* ── 과목 삭제 ✕ 버튼 항상 표시 ── */
.cell-subjects-v2 .subj-pill .subj-pill-del,
.cell-subjects .subj-pill .subj-pill-del {
  opacity: 0.55 !important;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 10px;
  margin-left: 6px;
  padding: 0;
}
.cell-subjects-v2 .subj-pill:hover .subj-pill-del,
.cell-subjects .subj-pill:hover .subj-pill-del {
  opacity: 1 !important;
  background: rgba(255,255,255,0.95);
}
.cell-subjects-v2 .subj-pill .subj-pill-del:hover,
.cell-subjects .subj-pill .subj-pill-del:hover {
  background: #fff;
  color: var(--pink-deep);
}

/* 안내 텍스트 */
.subj-help-hint {
  font-size: 10px; color: var(--text-dim);
  margin-top: 6px;
  opacity: 0.7;
}

/* ── 학사일정: 간격 + 글씨체 ── */
.ss-item {
  gap: 14px !important;
  padding: 6px 4px;
  font-family: 'Gowun Dodum', 'Pretendard', sans-serif;
  font-size: 13px !important;
  align-items: baseline !important;
}
.ss-item .ss-date {
  min-width: 64px !important;
  font-family: 'Gowun Dodum', 'Pretendard', sans-serif;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #5B71C8;
}
.ss-item .ss-name {
  flex: 1;
  padding-left: 4px;
  font-family: 'Gowun Dodum', 'Pretendard', sans-serif;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ss-item.is-today .ss-name { font-weight: 600 !important; }
.ss-type {
  font-family: 'Gowun Dodum', 'Pretendard', sans-serif !important;
  font-weight: 600 !important;
}

/* 라벨도 부드럽게 */
.ss-month-label,
.ss-label {
  font-family: 'Gowun Dodum', 'Pretendard', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ss-week {
  font-family: 'Gowun Dodum', 'Pretendard', sans-serif !important;
}

/* ════════════════════════════════════════════════════════
   v2.0 (2026-05-16): 모바일 탭바 + 몰입모드 + 인증샷
   디자인 원칙: 기존 파스텔 톤 유지, Pretendard 폰트, 반응형
   ════════════════════════════════════════════════════════ */

/* ───── 몰입모드 진입 버튼 (타이머 카드 안) ───── */
.focus-enter-btn {
  margin-top: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lav-deep), var(--pink-deep));
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(123,108,240,0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.focus-enter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(123,108,240,0.36);
}
.focus-enter-btn:active { transform: translateY(0); }

/* ───── 모바일 하단 탭바 (기본 숨김, 768px 이하만 표시) ───── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: 900;
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: stretch;
}
.mnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}
.mnav-item .mnav-emoji { font-size: 20px; line-height: 1; }
.mnav-item .mnav-label { font-size: 10px; letter-spacing: -0.01em; }
.mnav-item.active {
  color: var(--lav-deep);
  background: rgba(123,108,240,0.10);
  transform: translateY(-1px);
}
.mnav-item:active { background: rgba(123,108,240,0.18); }

/* ───── 몰입모드 오버레이 (전체 화면) ───── */
.focus-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: linear-gradient(160deg, #0F172A 0%, #1E1B4B 50%, #312E81 100%);
  z-index: 10000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  padding: 24px;
}
.focus-overlay.hidden { display: none; }
.focus-header {
  position: absolute;
  top: 24px; left: 24px; right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.focus-noise-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.focus-noise-btn,
.focus-noise-select,
.focus-exit-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s;
}
.focus-noise-btn:hover,
.focus-noise-select:hover,
.focus-exit-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.3);
}
.focus-noise-select { padding: 8px 10px; }
.focus-noise-select option { background: #1E1B4B; color: #fff; }
.focus-exit-btn {
  background: rgba(240,82,122,0.22);
  border-color: rgba(240,82,122,0.42);
}
.focus-exit-btn:hover { background: rgba(240,82,122,0.34); }

.focus-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.focus-subject {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  letter-spacing: -0.01em;
}
.focus-timer {
  font-family: var(--sans);
  font-size: clamp(56px, 14vw, 120px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(99,102,241,0.55);
  line-height: 1.05;
}
.focus-msg {
  font-family: 'Gowun Dodum', var(--sans);
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.01em;
}
.focus-hint {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(184,240,216,0.85);
  background: rgba(46,189,138,0.16);
  border: 1px solid rgba(46,189,138,0.32);
  padding: 5px 12px;
  border-radius: 14px;
}

/* ───── 인증샷 카드 (반응형) ───── */
.share-card {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #FFFDF8 0%, #FFE0D4 60%, #FFD6E8 100%);
  border-radius: 28px;
  padding: 30px 24px;
  margin: 18px auto 14px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 14px 32px rgba(28,28,46,0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.share-brand {
  font-family: var(--dh);
  font-size: 17px;
  color: var(--lav-deep);
  letter-spacing: -0.01em;
}
.share-date {
  font-family: var(--dm);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.share-time-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  margin-top: 6px;
}
.share-time {
  font-family: var(--dm);
  font-size: 42px;
  font-weight: 800;
  color: var(--pink-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.share-subject {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--lav-text);
  background: rgba(221,214,248,0.6);
  padding: 4px 14px;
  border-radius: 12px;
  align-self: center;
}
.share-msg {
  font-family: 'Gowun Dodum', var(--sans);
  font-size: 14px;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: -0.01em;
}

/* ───── 앱 설정 모달 — 토글 스위치 ───── */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-of-type { border-bottom: none; }
.setting-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.setting-desc {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-mid);
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #D6D3DD;
  border-radius: 26px;
  transition: 0.2s;
  cursor: pointer;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--lav-deep);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ════════════════════════════════════════════════════════
   반응형 (모바일 우선): 768px 이하
   - PC: 사이드바 그대로, 하단 탭바 숨김
   - 모바일: 사이드바는 햄버거(기존), 하단 탭바 표시
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 하단 탭바 표시 */
  .mobile-nav {
    display: flex;
  }
  /* 메인 영역 하단 여백 (탭바에 가리지 않게) */
  .main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  /* 푸터도 살짝 위로 */
  .app-footer {
    margin-bottom: 12px;
  }
}

/* 매우 작은 폰트: 인증샷 카드를 모바일에서 더 컴팩트하게 */
@media (max-width: 380px) {
  .share-card {
    max-width: 280px;
    padding: 24px 18px;
  }
  .share-time { font-size: 36px; }
  .focus-noise-btn,
  .focus-exit-btn {
    font-size: 12px;
    padding: 8px 10px;
  }
  .focus-header { top: 16px; left: 12px; right: 12px; }
}

/* ════════════════════════════════════════════════════════
   v2.0 시각 강화 (디자인 리뉴얼 — 첫인상 임팩트)
   - 본문 그라데이션 배경
   - 카드 그림자 + 라운드 강화 (Z세대 트렌드)
   - 사이드바 깊이감
   - 인디고 액센트 (+ 버튼)
   ════════════════════════════════════════════════════════ */

/* 인디고 컬러 토큰 추가 */
:root {
  --indigo: #6366F1;
  --indigo-soft: #818CF8;
  --indigo-deep: #4F46E5;
  --indigo-bg: #EEF2FF;
}

/* 본문 — 그라데이션 배경 (다크 테마 제외) */
body:not([data-theme="dark"]) {
  background: linear-gradient(135deg, #F8F5EE 0%, #FFFDF8 35%, #FBE8DD 70%, #EEE6FB 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* 사이드바 — 더 깊은 그림자 + 글래스 톤 */
.sidebar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 2px 0 30px rgba(28,28,46,0.06);
  border-right: 1px solid rgba(236,234,244,0.6);
}

/* 사이드바 브랜드 영역 — 더 큰 인상 */
.sb-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-size: 19px;
  box-shadow: 0 6px 18px rgba(123,108,240,0.36), 0 2px 4px rgba(240,82,122,0.18);
}
.sb-brand-name {
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* 모든 카드 — 그림자/라운드 강화 + 호버 인터랙션 */
.cell {
  border-radius: 18px;
  box-shadow:
    0 4px 14px rgba(28,28,46,0.06),
    0 1px 3px rgba(28,28,46,0.04);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cell:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(28,28,46,0.10),
    0 2px 4px rgba(28,28,46,0.05);
}

/* 상단 + 버튼 — 인디고 그라데이션 강조 */
.hbtn-add {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-soft) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(99,102,241,0.36), 0 2px 4px rgba(99,102,241,0.18) !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hbtn-add:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 24px rgba(99,102,241,0.42), 0 2px 4px rgba(99,102,241,0.22) !important;
}
.hbtn-add:active {
  transform: translateY(0) scale(1);
}

/* 하루 배너 — 더 큰 임팩트 */
.day-banner {
  padding: 24px 28px;
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(255,255,255,0.6) 0%, rgba(238,242,255,0.4) 100%);
  backdrop-filter: blur(8px);
  margin-bottom: 18px;
  box-shadow: 0 4px 18px rgba(28,28,46,0.05);
}
.day-pen {
  font-size: 13px;
  color: var(--text-mid);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.day-title {
  font-size: 23px;
  margin-top: 4px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* Bento 그리드 간격 미세 조정 */
.bento {
  gap: 14px;
}

/* 모바일 탭바 — 인디고로 통일 */
.mnav-item.active {
  color: var(--indigo) !important;
  background: var(--indigo-bg) !important;
}

/* 몰입모드 진입 버튼 — 인디고 그라데이션 */
.focus-enter-btn {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-soft) 100%);
  box-shadow: 0 4px 14px rgba(99,102,241,0.32);
}
.focus-enter-btn:hover {
  box-shadow: 0 6px 20px rgba(99,102,241,0.40);
}

/* 사이드바 활성 메뉴 — 인디고 액센트 */
.sb-item.active {
  background: var(--indigo-bg) !important;
  color: var(--indigo-deep) !important;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.16);
}

/* 모달 카드 — 라운드/그림자 강화 */
.modal-card {
  border-radius: 22px;
  box-shadow: 0 24px 48px rgba(28,28,46,0.22), 0 8px 16px rgba(28,28,46,0.10);
}

/* 모달 배경 어둡기 강화 */
.modal-bg {
  background: rgba(28, 28, 46, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ════════════════════════════════════════════════════════
   v2.0 콴다 스타일 다크 모드 — 네이비 + 보라 + 큰 타이포
   ════════════════════════════════════════════════════════ */
body[data-theme="dark"] {
  background: linear-gradient(180deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%) !important;
  background-attachment: fixed;
  color: #F1F5F9 !important;
  --text: #F1F5F9;
  --text-mid: #94A3B8;
  --text-dim: #64748B;
  --border: rgba(255,255,255,0.08);
  --card: #1E293B;
  --bg: #0F172A;
}

/* 다크 모드 — 사이드바 (콴다 톤) */
body[data-theme="dark"] .sidebar {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(99,102,241,0.18);
  box-shadow: 2px 0 30px rgba(0,0,0,0.4);
}
body[data-theme="dark"] .sb-brand-mark {
  background: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
  box-shadow: 0 6px 20px rgba(129,140,248,0.45);
}
body[data-theme="dark"] .sb-brand-name { color: #F1F5F9; }
body[data-theme="dark"] .sb-brand-sub { color: #94A3B8; }
body[data-theme="dark"] .sb-item {
  color: #CBD5E1;
}
body[data-theme="dark"] .sb-item:hover {
  background: rgba(99,102,241,0.12);
  color: #F1F5F9;
}
body[data-theme="dark"] .sb-item.active {
  background: rgba(99,102,241,0.22) !important;
  color: #C7D2FE !important;
  box-shadow: inset 0 0 0 1px rgba(129,140,248,0.32);
}
body[data-theme="dark"] .sb-tip {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.22);
  color: #CBD5E1;
}
body[data-theme="dark"] .sb-theme-label { color: #94A3B8; }

/* 다크 모드 — 카드 (콴다 다크 카드) */
body[data-theme="dark"] .cell {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2) !important;
}
body[data-theme="dark"] .cell:hover {
  background: #243047 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 2px 6px rgba(99,102,241,0.18) !important;
}

/* 다크 모드 — 텍스트 색상 */
body[data-theme="dark"] .day-title,
body[data-theme="dark"] .view-title,
body[data-theme="dark"] .cell-title,
body[data-theme="dark"] .modal-title { color: #F1F5F9 !important; }
body[data-theme="dark"] .day-pen,
body[data-theme="dark"] .view-sub,
body[data-theme="dark"] .modal-sub,
body[data-theme="dark"] .quote-from { color: #94A3B8 !important; }

/* 다크 모드 — 하루 배너 */
body[data-theme="dark"] .day-banner {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(99,102,241,0.16);
}

/* 다크 모드 — 타이머 카드 강조 (콴다스러운 큰 숫자) */
body[data-theme="dark"] .timer-clock {
  color: #C7D2FE !important;
  text-shadow: 0 0 24px rgba(129,140,248,0.4);
}

/* 다크 모드 — 캘린더 */
body[data-theme="dark"] .cal-day {
  color: #CBD5E1;
  background: rgba(255,255,255,0.02);
}
body[data-theme="dark"] .cal-day.is-today {
  background: rgba(99,102,241,0.22) !important;
  color: #C7D2FE !important;
  border: 1px solid #818CF8 !important;
}
body[data-theme="dark"] .cal-day.other-month { color: #475569; opacity: 0.5; }
body[data-theme="dark"] .cal-wd { color: #94A3B8; }
body[data-theme="dark"] .cal-wd.sun { color: #F87171; }
body[data-theme="dark"] .cal-wd.sat { color: #60A5FA; }

/* 다크 모드 — 모바일 탭바 */
body[data-theme="dark"] .mobile-nav {
  background: rgba(15, 23, 42, 0.92) !important;
  border-top: 1px solid rgba(99,102,241,0.22);
}
body[data-theme="dark"] .mnav-item { color: #94A3B8; }
body[data-theme="dark"] .mnav-item.active {
  color: #C7D2FE !important;
  background: rgba(99,102,241,0.22) !important;
}

/* 다크 모드 — 모달 */
body[data-theme="dark"] .modal-card {
  background: #1E293B !important;
  border: 1px solid rgba(99,102,241,0.18);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
body[data-theme="dark"] .field-input,
body[data-theme="dark"] .field-textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F1F5F9 !important;
}
body[data-theme="dark"] .mbtn-cancel {
  background: rgba(255,255,255,0.06);
  color: #CBD5E1;
}

/* 다크 모드 — 메뉴 시트 */
body[data-theme="dark"] .menu-sheet {
  background: #1E293B;
}
body[data-theme="dark"] .menu-sheet-title { color: #F1F5F9; }
body[data-theme="dark"] .menu-sheet-item { color: #F1F5F9; }
body[data-theme="dark"] .menu-sheet-item:hover { background: rgba(99,102,241,0.22); }
body[data-theme="dark"] .menu-sheet-handle { background: rgba(255,255,255,0.18); }

/* 다크 모드 — 알림/도움말 카드 */
body[data-theme="dark"] .help-card {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #F1F5F9 !important;
}
body[data-theme="dark"] .help-card h3 { color: #F1F5F9 !important; }
body[data-theme="dark"] .help-card p,
body[data-theme="dark"] .help-card li { color: #CBD5E1 !important; }

/* 다크 모드 — 설정 토글 */
body[data-theme="dark"] .setting-row { border-bottom-color: rgba(255,255,255,0.08); }
body[data-theme="dark"] .setting-name { color: #F1F5F9; }
body[data-theme="dark"] .setting-desc { color: #94A3B8; }
body[data-theme="dark"] .toggle-slider { background: rgba(255,255,255,0.16); }

/* 다크 모드 — 푸터 */
body[data-theme="dark"] .app-footer { color: #64748B; }
body[data-theme="dark"] .app-footer a { color: #94A3B8; }

/* 다크 모드 — 인디고 액센트 색상 통일 */
body[data-theme="dark"] {
  --indigo-bg: rgba(99,102,241,0.18);
}

/* 다크 모드 — 학사일정/급식 글씨 */
body[data-theme="dark"] .ss-item .ss-name,
body[data-theme="dark"] .ss-item .ss-date,
body[data-theme="dark"] .ss-type,
body[data-theme="dark"] .ss-month-label,
body[data-theme="dark"] .ss-label,
body[data-theme="dark"] .ss-week,
body[data-theme="dark"] .lunch-item { color: #E2E8F0 !important; }

/* ════════════════════════════════════════════════════════
   v2.0 콴다·열품타·투데이잇 감성 — 둥근 모서리 + Bento + 글씨 일괄
   ════════════════════════════════════════════════════════ */

/* 카드 모서리 22~24px 강화 (Z세대 친근함) */
.cell {
  border-radius: 22px !important;
}
.modal-card { border-radius: 24px !important; }
.share-card { border-radius: 28px !important; }

/* Bento 간격 증가 (정보 그룹화 명확) */
.bento { gap: 16px !important; }

/* 다크 모드 카드별 파스텔 다크 그라데이션 (단조함 해소) */
body[data-theme="dark"] .cell-hero {
  background: linear-gradient(135deg, #312E81 0%, #1E1B4B 60%, #2D1B69 100%) !important;
}
body[data-theme="dark"] .cell-timer {
  background: linear-gradient(135deg, #1E3A5F 0%, #1E1B4B 100%) !important;
}
body[data-theme="dark"] .cell-quote {
  background: linear-gradient(135deg, rgba(255,200,180,0.08) 0%, rgba(220,180,255,0.08) 100%) !important;
  border: 1px solid rgba(255,200,180,0.16);
}
body[data-theme="dark"] .cell-weather {
  background: linear-gradient(135deg, #1E40AF 0%, #1E293B 70%, #0F172A 100%) !important;
}
body[data-theme="dark"] .cell-calendar {
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important;
}
body[data-theme="dark"] .cell-timetable {
  background: linear-gradient(135deg, #1F2937 0%, #1E1B4B 100%) !important;
}
body[data-theme="dark"] .cell-donut {
  background: linear-gradient(135deg, #1E293B 0%, #312E81 100%) !important;
}
body[data-theme="dark"] .cell-stats {
  background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%) !important;
}
body[data-theme="dark"] .cell-ddays {
  background: linear-gradient(135deg, #1F2937 0%, #1E293B 100%) !important;
}
body[data-theme="dark"] .cell-upload {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%) !important;
  border: 1.5px dashed rgba(129,140,248,0.42) !important;
}
body[data-theme="dark"] .cell-ai {
  background: linear-gradient(135deg, #1E1B4B 0%, #4338CA 100%) !important;
}
body[data-theme="dark"] .cell-card {
  background: linear-gradient(135deg, #312E81 0%, #1E1B4B 100%) !important;
}
body[data-theme="dark"] .cell-school-sched {
  background: linear-gradient(135deg, #1E293B 0%, #1E1B4B 100%) !important;
}
body[data-theme="dark"] .cell-lunch {
  background: linear-gradient(135deg, #1F2937 0%, #312E81 100%) !important;
}
body[data-theme="dark"] .cell-subjects-v2 {
  background: linear-gradient(135deg, #1E293B 0%, #1E1B4B 100%) !important;
}

/* 다크 모드 — 모든 카드 내부 텍스트 일괄 처리 */
body[data-theme="dark"] .cell,
body[data-theme="dark"] .cell * {
  color: #F1F5F9;
}
/* 예외: 강조 색상 유지해야 하는 요소들 */
body[data-theme="dark"] .cell .ai-pct,
body[data-theme="dark"] .cell .sn,
body[data-theme="dark"] .cell .donut-num,
body[data-theme="dark"] .cell .w-temp,
body[data-theme="dark"] .cell .timer-clock {
  color: #C7D2FE !important;
}
body[data-theme="dark"] .cell .sl,
body[data-theme="dark"] .cell .donut-lbl,
body[data-theme="dark"] .cell .timer-label,
body[data-theme="dark"] .cell .timer-today,
body[data-theme="dark"] .cell .cell-title,
body[data-theme="dark"] .cell .cal-title,
body[data-theme="dark"] .cell .cal-meta,
body[data-theme="dark"] .cell .tt-label,
body[data-theme="dark"] .cell .tt-day,
body[data-theme="dark"] .cell .stats-label,
body[data-theme="dark"] .cell .lunch-label,
body[data-theme="dark"] .cell .lunch-date,
body[data-theme="dark"] .cell .ss-label,
body[data-theme="dark"] .cell .ss-week,
body[data-theme="dark"] .cell .quote-from,
body[data-theme="dark"] .cell .w-state,
body[data-theme="dark"] .cell .w-range,
body[data-theme="dark"] .cell .w-msg,
body[data-theme="dark"] .cell .ai-label,
body[data-theme="dark"] .cell .ai-header,
body[data-theme="dark"] .cell .card-label,
body[data-theme="dark"] .cell .card-q,
body[data-theme="dark"] .cell .subj-card-title,
body[data-theme="dark"] .cell .subj-help-hint {
  color: #E2E8F0 !important;
}
body[data-theme="dark"] .cell .upload-txt,
body[data-theme="dark"] .cell .upload-sub,
body[data-theme="dark"] .cell .upload-icon {
  color: #C7D2FE !important;
}
body[data-theme="dark"] .cell .quote-pen {
  color: #FBBF24 !important;
  text-shadow: 0 0 16px rgba(251,191,36,0.32);
}
body[data-theme="dark"] .cell .day-pen {
  color: #94A3B8 !important;
}

/* 시험 추가 버튼 등 액션 컬러 명확 */
body[data-theme="dark"] .ai-cta,
body[data-theme="dark"] .card-flip,
body[data-theme="dark"] .timer-btn,
body[data-theme="dark"] .tt-edit-btn,
body[data-theme="dark"] .subj-add-cta {
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.36);
}
body[data-theme="dark"] .timer-btn-end {
  background: linear-gradient(135deg, #F87171 0%, #FB7185 100%) !important;
}
body[data-theme="dark"] .timer-btn:disabled {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.32) !important;
  box-shadow: none;
}

/* 학사일정 아이템 다크 톤 — 행 호버 강조 */
body[data-theme="dark"] .ss-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body[data-theme="dark"] .ss-item.is-today {
  background: rgba(99,102,241,0.22) !important;
  border-radius: 12px;
  border-left: 3px solid #818CF8;
  padding-left: 10px !important;
}
body[data-theme="dark"] .ss-item.is-today .ss-name { color: #C7D2FE !important; font-weight: 700 !important; }
body[data-theme="dark"] .ss-item.is-today .ss-date { color: #818CF8 !important; }

/* 급식 아이템 */
body[data-theme="dark"] .lunch-item {
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
}

/* 시험 추가 ＋ 버튼 다크 모드 강조 */
body[data-theme="dark"] .hbtn-add {
  background: linear-gradient(135deg, #818CF8 0%, #C084FC 100%) !important;
  box-shadow: 0 6px 24px rgba(129,140,248,0.55), 0 2px 4px rgba(192,132,252,0.32) !important;
}

/* 다가오는 시험 D-day 카드 — 살짝 발광 */
body[data-theme="dark"] .dd-item {
  background: rgba(99,102,241,0.10) !important;
  border: 1px solid rgba(129,140,248,0.22);
  color: #E2E8F0 !important;
}

/* 과목 pill 다크 톤 */
body[data-theme="dark"] .subj-pill {
  color: #F1F5F9 !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* hero 셀(가장 급한 시험) — 임팩트 강화 */
body[data-theme="dark"] .cell-hero .hero-title,
body[data-theme="dark"] .cell-hero .hero-sub,
body[data-theme="dark"] .cell-hero .hero-d {
  color: #fff !important;
}
body[data-theme="dark"] .cell-hero .hero-d {
  text-shadow: 0 0 24px rgba(255,255,255,0.32);
}

/* 캘린더 일정 점 가시성 */
body[data-theme="dark"] .cal-day .cal-event-dot {
  box-shadow: 0 0 4px rgba(255,255,255,0.32);
}

/* 토스트 다크 톤 */
body[data-theme="dark"] .toast {
  background: #1E293B !important;
  color: #F1F5F9 !important;
  border: 1px solid rgba(99,102,241,0.32);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}

/* 학교 검색 결과 */
body[data-theme="dark"] .school-search-list,
body[data-theme="dark"] .school-search-empty {
  background: rgba(255,255,255,0.04) !important;
  color: #CBD5E1 !important;
}

/* 시간표 편집 그리드 */
body[data-theme="dark"] .tt-edit-grid input {
  background: rgba(255,255,255,0.06) !important;
  color: #F1F5F9 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* 라이트 모드 카드 모서리 강화 + 카드별 파스텔 (콴다 라이트 톤) */
body:not([data-theme="dark"]) .cell {
  border-radius: 22px;
}

/* 다크 모드 — 타이머 과목 칩 글씨 색 강제 처리 */
body[data-theme="dark"] .timer-subject-select * { color: #F1F5F9 !important; }
body[data-theme="dark"] .timer-subject-select .ts-chip,
body[data-theme="dark"] .timer-subject-select button {
  background: rgba(255,255,255,0.08) !important;
  color: #F1F5F9 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
body[data-theme="dark"] .timer-subject-select .ts-chip.active,
body[data-theme="dark"] .timer-subject-select button.active,
body[data-theme="dark"] .timer-subject-select .ts-chip.selected,
body[data-theme="dark"] .timer-subject-select button.selected {
  background: linear-gradient(135deg, #818CF8, #C084FC) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(129,140,248,0.42);
}

/* ════════════════════════════════════════════════════════
   v2.0 홈 단순화 — 한마디 + 날씨 통합 카드
   ════════════════════════════════════════════════════════ */
.cell-info-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255,243,176,0.5) 0%, rgba(255,224,212,0.5) 50%, rgba(221,214,248,0.5) 100%);
}
.cell-info-row .ir-left {
  flex: 1;
  min-width: 0;
}
.cell-info-row .ir-divider {
  width: 1px;
  height: 56px;
  background: rgba(28,28,46,0.10);
  flex-shrink: 0;
}
.cell-info-row .ir-right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cell-info-row .ir-right .w-icon {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
}
.cell-info-row .ir-w-info {
  flex: 1;
  min-width: 0;
}
.cell-info-row .w-temp-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cell-info-row .w-temp {
  font-family: var(--dm);
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.cell-info-row .w-range {
  font-family: var(--dm);
  font-size: 11px;
  color: var(--text-mid);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cell-info-row .w-msg {
  font-family: 'Gowun Dodum', var(--sans);
  font-size: 12px;
  color: var(--text-mid);
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.cell-info-row .quote-pen {
  font-family: 'Gowun Dodum', var(--sans);
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-info-row .quote-from {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.06em;
}

/* 다크 모드 — 한마디·날씨 통합 카드 */
body[data-theme="dark"] .cell-info-row {
  background: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(192,132,252,0.14) 50%, rgba(245,158,11,0.10) 100%) !important;
  border: 1px solid rgba(99,102,241,0.22);
}
body[data-theme="dark"] .cell-info-row .ir-divider { background: rgba(255,255,255,0.12); }
body[data-theme="dark"] .cell-info-row .quote-pen {
  color: #FBBF24 !important;
  text-shadow: 0 0 14px rgba(251,191,36,0.28);
}
body[data-theme="dark"] .cell-info-row .quote-from { color: #94A3B8 !important; }
body[data-theme="dark"] .cell-info-row .w-temp { color: #F1F5F9 !important; }
body[data-theme="dark"] .cell-info-row .w-range { color: #CBD5E1 !important; }
body[data-theme="dark"] .cell-info-row .w-msg { color: #E2E8F0 !important; }

/* 모바일에서 한마디·날씨 통합 카드 — 세로로 분리 */
@media (max-width: 600px) {
  .cell-info-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cell-info-row .ir-divider {
    width: 100%;
    height: 1px;
  }
  .cell-info-row .quote-pen {
    white-space: normal;
  }
}

/* 홈 그리드 — Bento 단순화 (3행 안에 종료) */
.bento-home-v2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 110px;
  gap: 16px;
}
.bento-home-v2 .c-4x2 { grid-column: span 4; grid-row: span 2; }
.bento-home-v2 .c-2x2 { grid-column: span 2; grid-row: span 2; }
.bento-home-v2 .c-6x1 { grid-column: span 6; grid-row: span 1; }

@media (max-width: 768px) {
  .bento-home-v2 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .bento-home-v2 .c-4x2,
  .bento-home-v2 .c-2x2,
  .bento-home-v2 .c-6x1 {
    grid-column: span 1;
    grid-row: span 1;
  }
  .bento-home-v2 .c-4x2 { min-height: 180px; }
  .bento-home-v2 .c-2x2 { min-height: 200px; }
}

/* ════════════════════════════════════════════════════════
   v2.0 모바일 풀스크린: 사이드바 완전 숨김 → 진짜 모바일 앱 느낌
   단, 시험·자료/학교 정보/도움말은 탭바 "더보기" 시트로 접근
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar { display: none !important; }
  .sb-toggle { display: none !important; }
  .layout { padding-left: 0; }
  .main { padding-left: 16px; padding-right: 16px; }
  /* 상단 + 버튼은 모바일에서도 유지 */
  .topbar { padding-top: 12px; }
  /* 하루 배너 모바일 컴팩트 */
  .day-banner { padding: 18px 18px; }
  .day-title { font-size: 19px; }
}

/* 모바일 탭바: 5번째 "더보기" 메뉴 시트 스타일 */
.menu-sheet-bg {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 46, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: msFadeIn 0.2s ease;
}
.menu-sheet-bg.hidden { display: none; }
.menu-sheet {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 24px 18px calc(20px + env(safe-area-inset-bottom));
  margin-bottom: 64px; /* 탭바 위에 놓이도록 */
  animation: msSlideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-sheet-handle {
  width: 40px;
  height: 4px;
  background: #D6D3DD;
  border-radius: 4px;
  margin: 0 auto 18px;
}
.menu-sheet-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.menu-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 14px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.menu-sheet-item:hover,
.menu-sheet-item:active {
  background: var(--indigo-bg);
}
.menu-sheet-item .ms-emoji { font-size: 22px; }
@keyframes msFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes msSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }


/* ════════════════════════════════════════════════════════
   v2.0 (복구) 시각 강화 + 콴다 다크 + 홈 단순화 + 모바일 풀스크린
   ════════════════════════════════════════════════════════ */

/* 인디고 컬러 토큰 추가 */
:root {
  --indigo: #6366F1;
  --indigo-soft: #818CF8;
  --indigo-deep: #4F46E5;
  --indigo-bg: #EEF2FF;
}

/* 본문 — 다크 모드 기본 그라데이션 */
body:not([data-theme="dark"]) {
  background: linear-gradient(135deg, #F8F5EE 0%, #FFFDF8 35%, #FBE8DD 70%, #EEE6FB 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* 사이드바 강화 (글래스 + 깊은 그림자) */
.sidebar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 2px 0 30px rgba(28,28,46,0.06);
  border-right: 1px solid rgba(236,234,244,0.6);
}
.sb-brand-mark {
  width: 40px; height: 40px;
  border-radius: 14px;
  font-size: 19px;
  box-shadow: 0 6px 18px rgba(123,108,240,0.36), 0 2px 4px rgba(240,82,122,0.18);
}
.sb-brand-name { font-size: 18px; letter-spacing: -0.01em; }

/* 카드 (Bento) — 둥근 모서리 22px + 깊은 그림자 + 호버 */
.cell {
  border-radius: 22px !important;
  box-shadow: 0 4px 14px rgba(28,28,46,0.06), 0 1px 3px rgba(28,28,46,0.04);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(28,28,46,0.10), 0 2px 4px rgba(28,28,46,0.05);
}
.modal-card { border-radius: 24px !important; }
.share-card { border-radius: 28px !important; }
.bento { gap: 16px !important; }

/* + 시험 추가 버튼 — 인디고 그라데이션 강조 */
.hbtn-add {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-soft) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(99,102,241,0.36), 0 2px 4px rgba(99,102,241,0.18) !important;
}
.hbtn-add:hover { transform: translateY(-1px) scale(1.04); }

/* 모바일 탭바 — 인디고 액센트 */
.mnav-item.active {
  color: var(--indigo) !important;
  background: var(--indigo-bg) !important;
}

/* 몰입모드 진입 버튼 */
.focus-enter-btn {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-soft) 100%);
  box-shadow: 0 4px 14px rgba(99,102,241,0.32);
}

/* 사이드바 활성 메뉴 */
.sb-item.active {
  background: var(--indigo-bg) !important;
  color: var(--indigo-deep) !important;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.16);
}

/* 모달 강화 */
.modal-bg {
  background: rgba(28, 28, 46, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-card {
  box-shadow: 0 24px 48px rgba(28,28,46,0.22), 0 8px 16px rgba(28,28,46,0.10);
}


/* ════════════════════════════════════════════════════════
   콴다 스타일 다크 모드 — 네이비 + 보라 + 큰 타이포
   ════════════════════════════════════════════════════════ */
body[data-theme="dark"] {
  background: linear-gradient(180deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%) !important;
  background-attachment: fixed;
  color: #F1F5F9 !important;
}

body[data-theme="dark"] .sidebar {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(99,102,241,0.18);
  box-shadow: 2px 0 30px rgba(0,0,0,0.4);
}
body[data-theme="dark"] .sb-brand-mark {
  background: linear-gradient(135deg, #818CF8 0%, #C084FC 100%);
  box-shadow: 0 6px 20px rgba(129,140,248,0.45);
}
body[data-theme="dark"] .sb-brand-name { color: #F1F5F9; }
body[data-theme="dark"] .sb-brand-sub { color: #94A3B8; }
body[data-theme="dark"] .sb-item { color: #CBD5E1; }
body[data-theme="dark"] .sb-item:hover { background: rgba(99,102,241,0.12); color: #F1F5F9; }
body[data-theme="dark"] .sb-item.active {
  background: rgba(99,102,241,0.22) !important;
  color: #C7D2FE !important;
  box-shadow: inset 0 0 0 1px rgba(129,140,248,0.32);
}
body[data-theme="dark"] .sb-tip {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.22);
  color: #CBD5E1;
}
body[data-theme="dark"] .sb-theme-label { color: #94A3B8; }

/* 다크 모드 카드별 파스텔 다크 그라데이션 */
body[data-theme="dark"] .cell-hero {
  background: linear-gradient(135deg, #312E81 0%, #1E1B4B 60%, #2D1B69 100%) !important;
}
body[data-theme="dark"] .cell-timer {
  background: linear-gradient(135deg, #1E3A5F 0%, #1E1B4B 100%) !important;
}
body[data-theme="dark"] .cell-weather {
  background: linear-gradient(135deg, #1E40AF 0%, #1E293B 70%, #0F172A 100%) !important;
}
body[data-theme="dark"] .cell-calendar {
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important;
}
body[data-theme="dark"] .cell-timetable,
body[data-theme="dark"] .cell-stats,
body[data-theme="dark"] .cell-ddays,
body[data-theme="dark"] .cell-school-sched,
body[data-theme="dark"] .cell-subjects-v2 {
  background: linear-gradient(135deg, #1F2937 0%, #1E293B 100%) !important;
}
body[data-theme="dark"] .cell-donut {
  background: linear-gradient(135deg, #1E293B 0%, #312E81 100%) !important;
}
body[data-theme="dark"] .cell-ai,
body[data-theme="dark"] .cell-card {
  background: linear-gradient(135deg, #1E1B4B 0%, #4338CA 100%) !important;
}
body[data-theme="dark"] .cell-upload {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%) !important;
  border: 1.5px dashed rgba(129,140,248,0.42) !important;
}
body[data-theme="dark"] .cell-lunch {
  background: linear-gradient(135deg, #1F2937 0%, #312E81 100%) !important;
}

/* 다크 — 모든 셀 내부 텍스트 일괄 처리 */
body[data-theme="dark"] .cell,
body[data-theme="dark"] .cell * { color: #F1F5F9; }
body[data-theme="dark"] .cell .timer-clock {
  color: #C7D2FE !important;
  text-shadow: 0 0 24px rgba(129,140,248,0.4);
}
body[data-theme="dark"] .cell .ai-pct,
body[data-theme="dark"] .cell .sn,
body[data-theme="dark"] .cell .donut-num,
body[data-theme="dark"] .cell .w-temp { color: #C7D2FE !important; }
body[data-theme="dark"] .cell .sl,
body[data-theme="dark"] .cell .donut-lbl,
body[data-theme="dark"] .cell .timer-label,
body[data-theme="dark"] .cell .timer-today,
body[data-theme="dark"] .cell .cell-title,
body[data-theme="dark"] .cell .cal-title,
body[data-theme="dark"] .cell .cal-meta,
body[data-theme="dark"] .cell .tt-label,
body[data-theme="dark"] .cell .tt-day,
body[data-theme="dark"] .cell .stats-label,
body[data-theme="dark"] .cell .lunch-label,
body[data-theme="dark"] .cell .lunch-date,
body[data-theme="dark"] .cell .ss-label,
body[data-theme="dark"] .cell .ss-week,
body[data-theme="dark"] .cell .quote-from,
body[data-theme="dark"] .cell .w-state,
body[data-theme="dark"] .cell .w-range,
body[data-theme="dark"] .cell .w-msg,
body[data-theme="dark"] .cell .ai-label,
body[data-theme="dark"] .cell .card-label,
body[data-theme="dark"] .cell .card-q,
body[data-theme="dark"] .cell .subj-card-title,
body[data-theme="dark"] .cell .subj-help-hint { color: #E2E8F0 !important; }
body[data-theme="dark"] .cell .upload-txt,
body[data-theme="dark"] .cell .upload-sub,
body[data-theme="dark"] .cell .upload-icon { color: #C7D2FE !important; }
body[data-theme="dark"] .cell .quote-pen {
  color: #FBBF24 !important;
  text-shadow: 0 0 16px rgba(251,191,36,0.32);
}

/* 다크 — 액션 버튼 인디고 통일 */
body[data-theme="dark"] .ai-cta,
body[data-theme="dark"] .card-flip,
body[data-theme="dark"] .timer-btn,
body[data-theme="dark"] .tt-edit-btn,
body[data-theme="dark"] .subj-add-cta {
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.36);
}
body[data-theme="dark"] .timer-btn-end {
  background: linear-gradient(135deg, #F87171 0%, #FB7185 100%) !important;
}
body[data-theme="dark"] .timer-btn:disabled {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.32) !important;
  box-shadow: none;
}

/* 다크 — 모달 / 메뉴 시트 / 도움말 */
body[data-theme="dark"] .modal-card {
  background: #1E293B !important;
  border: 1px solid rgba(99,102,241,0.18);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
body[data-theme="dark"] .field-input,
body[data-theme="dark"] .field-textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F1F5F9 !important;
}
body[data-theme="dark"] .mbtn-cancel {
  background: rgba(255,255,255,0.06);
  color: #CBD5E1;
}
body[data-theme="dark"] .mobile-nav {
  background: rgba(15, 23, 42, 0.92) !important;
  border-top: 1px solid rgba(99,102,241,0.22);
}
body[data-theme="dark"] .mnav-item { color: #94A3B8; }
body[data-theme="dark"] .mnav-item.active {
  color: #C7D2FE !important;
  background: rgba(99,102,241,0.22) !important;
}
body[data-theme="dark"] .menu-sheet { background: #1E293B; }
body[data-theme="dark"] .menu-sheet-title,
body[data-theme="dark"] .menu-sheet-item { color: #F1F5F9; }
body[data-theme="dark"] .menu-sheet-item:hover { background: rgba(99,102,241,0.22); }
body[data-theme="dark"] .menu-sheet-handle { background: rgba(255,255,255,0.18); }
body[data-theme="dark"] .help-card {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #F1F5F9 !important;
}
body[data-theme="dark"] .help-card h3 { color: #F1F5F9 !important; }
body[data-theme="dark"] .help-card p,
body[data-theme="dark"] .help-card li { color: #CBD5E1 !important; }
body[data-theme="dark"] .setting-row { border-bottom-color: rgba(255,255,255,0.08); }
body[data-theme="dark"] .setting-name { color: #F1F5F9; }
body[data-theme="dark"] .setting-desc { color: #94A3B8; }
body[data-theme="dark"] .toggle-slider { background: rgba(255,255,255,0.16); }
body[data-theme="dark"] .app-footer { color: #64748B; }
body[data-theme="dark"] .app-footer a { color: #94A3B8; }
body[data-theme="dark"] { --indigo-bg: rgba(99,102,241,0.18); }

/* 다크 — 학사일정 강조 */
body[data-theme="dark"] .ss-item .ss-name,
body[data-theme="dark"] .ss-item .ss-date,
body[data-theme="dark"] .ss-type,
body[data-theme="dark"] .ss-month-label,
body[data-theme="dark"] .ss-label,
body[data-theme="dark"] .ss-week,
body[data-theme="dark"] .lunch-item { color: #E2E8F0 !important; }
body[data-theme="dark"] .ss-item.is-today {
  background: rgba(99,102,241,0.22) !important;
  border-radius: 12px;
  border-left: 3px solid #818CF8;
  padding-left: 10px !important;
}
body[data-theme="dark"] .ss-item.is-today .ss-name { color: #C7D2FE !important; font-weight: 700 !important; }
body[data-theme="dark"] .hbtn-add {
  background: linear-gradient(135deg, #818CF8 0%, #C084FC 100%) !important;
  box-shadow: 0 6px 24px rgba(129,140,248,0.55) !important;
}


/* ════════════════════════════════════════════════════════
   v2.0 홈 단순화 — 한마디·날씨 통합 카드 + Bento 그리드
   ════════════════════════════════════════════════════════ */
.cell-info-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(255,243,176,0.5) 0%, rgba(255,224,212,0.5) 50%, rgba(221,214,248,0.5) 100%);
}
.cell-info-row .ir-left { flex: 1; min-width: 0; }
.cell-info-row .ir-divider {
  width: 1px; height: 56px;
  background: rgba(28,28,46,0.10);
  flex-shrink: 0;
}
.cell-info-row .ir-right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cell-info-row .ir-right .w-icon { font-size: 38px; flex-shrink: 0; }
.cell-info-row .ir-w-info { flex: 1; min-width: 0; }
.cell-info-row .w-temp-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cell-info-row .w-temp {
  font-family: var(--dm);
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.cell-info-row .w-range {
  font-family: var(--dm);
  font-size: 11px;
  color: var(--text-mid);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cell-info-row .w-msg {
  font-family: 'Gowun Dodum', var(--sans);
  font-size: 12px;
  color: var(--text-mid);
  margin-top: 2px;
}
.cell-info-row .quote-pen {
  font-family: 'Gowun Dodum', var(--sans);
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-info-row .quote-from {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.06em;
}

body[data-theme="dark"] .cell-info-row {
  background: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(192,132,252,0.14) 50%, rgba(245,158,11,0.10) 100%) !important;
  border: 1px solid rgba(99,102,241,0.22);
}
body[data-theme="dark"] .cell-info-row .ir-divider { background: rgba(255,255,255,0.12); }
body[data-theme="dark"] .cell-info-row .quote-pen {
  color: #FBBF24 !important;
  text-shadow: 0 0 14px rgba(251,191,36,0.28);
}
body[data-theme="dark"] .cell-info-row .quote-from { color: #94A3B8 !important; }
body[data-theme="dark"] .cell-info-row .w-temp { color: #F1F5F9 !important; }
body[data-theme="dark"] .cell-info-row .w-range { color: #CBD5E1 !important; }
body[data-theme="dark"] .cell-info-row .w-msg { color: #E2E8F0 !important; }

@media (max-width: 600px) {
  .cell-info-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cell-info-row .ir-divider {
    width: 100%; height: 1px;
  }
  .cell-info-row .quote-pen { white-space: normal; }
}

/* 홈 Bento 그리드 (3행 종료) */
.bento-home-v2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 110px;
  gap: 16px;
}
.bento-home-v2 .c-4x2 { grid-column: span 4; grid-row: span 2; }
.bento-home-v2 .c-2x2 { grid-column: span 2; grid-row: span 2; }
.bento-home-v2 .c-6x1 { grid-column: span 6; grid-row: span 1; }

@media (max-width: 768px) {
  .bento-home-v2 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .bento-home-v2 .c-4x2,
  .bento-home-v2 .c-2x2,
  .bento-home-v2 .c-6x1 {
    grid-column: span 1;
    grid-row: span 1;
  }
  .bento-home-v2 .c-4x2 { min-height: 180px; }
  .bento-home-v2 .c-2x2 { min-height: 200px; }
}

/* ════════════════════════════════════════════════════════
   v2.0 모바일 풀스크린 + "더보기" 메뉴 시트
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar { display: none !important; }
  .sb-toggle { display: none !important; }
  .layout { padding-left: 0; }
  .main { padding-left: 16px; padding-right: 16px; }
  .topbar { padding-top: 12px; }
}

.menu-sheet-bg {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 46, 0.55);
  backdrop-filter: blur(6px);
  z-index: 9500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.menu-sheet-bg.hidden { display: none; }
.menu-sheet {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 24px 18px calc(20px + env(safe-area-inset-bottom));
  margin-bottom: 64px;
}
.menu-sheet-handle {
  width: 40px; height: 4px;
  background: #D6D3DD;
  border-radius: 4px;
  margin: 0 auto 18px;
}
.menu-sheet-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}
.menu-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 14px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.menu-sheet-item:hover,
.menu-sheet-item:active { background: var(--indigo-bg); }
.menu-sheet-item .ms-emoji { font-size: 22px; }

/* ════════════════════════════════════════════════════════
   타이머 과목 칩 다크 모드 글씨 처리 (빛수님 요청)
   ════════════════════════════════════════════════════════ */
body[data-theme="dark"] .timer-subject-select * { color: #F1F5F9 !important; }
body[data-theme="dark"] .timer-subject-select .ts-chip,
body[data-theme="dark"] .timer-subject-select button {
  background: rgba(255,255,255,0.08) !important;
  color: #F1F5F9 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
body[data-theme="dark"] .timer-subject-select .ts-chip.active,
body[data-theme="dark"] .timer-subject-select button.active,
body[data-theme="dark"] .timer-subject-select .ts-chip.selected,
body[data-theme="dark"] .timer-subject-select button.selected {
  background: linear-gradient(135deg, #818CF8, #C084FC) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(129,140,248,0.42);
}


/* ════════════════════════════════════════════════════════
   v2.0 (재수정) 하루 인사 — 박스 없이 글로만
   ════════════════════════════════════════════════════════ */
.day-greeting {
  margin: 0 4px 18px;
  padding: 4px 2px;
  font-family: 'Gowun Dodum', var(--sans);
}
.dg-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.dg-quote {
  font-family: 'Gowun Dodum', var(--sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* 다크 모드 인사 글씨 — 한마디는 노란 펜글씨 글로우 */
body[data-theme="dark"] .dg-date { color: #94A3B8 !important; }
body[data-theme="dark"] .dg-quote {
  color: #FBBF24 !important;
  text-shadow: 0 0 18px rgba(251,191,36,0.32);
}

/* 모바일에서는 한마디 크기 약간 축소 */
@media (max-width: 600px) {
  .dg-quote { font-size: 18px; }
  .dg-date { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════
   날씨 단독 카드 (c-6x1 가로 길게)
   ════════════════════════════════════════════════════════ */
.cell-weather-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(186,230,253,0.4) 0%, rgba(221,214,248,0.4) 100%);
}
.cell-weather-row .w-icon {
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
}
.cell-weather-row .wr-info { flex: 1; min-width: 0; }
.cell-weather-row .w-temp-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.cell-weather-row .w-temp {
  font-family: var(--dm);
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.cell-weather-row .w-range {
  font-family: var(--dm);
  font-size: 12px;
  color: var(--text-mid);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cell-weather-row .w-state {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-mid);
  font-weight: 600;
}
.cell-weather-row .w-msg {
  font-family: 'Gowun Dodum', var(--sans);
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: -0.01em;
}

/* 다크 모드 날씨 카드 */
body[data-theme="dark"] .cell-weather-row {
  background: linear-gradient(135deg, #1E40AF 0%, #1E293B 70%, #0F172A 100%) !important;
}
body[data-theme="dark"] .cell-weather-row .w-temp { color: #F1F5F9 !important; }
body[data-theme="dark"] .cell-weather-row .w-range,
body[data-theme="dark"] .cell-weather-row .w-state { color: #CBD5E1 !important; }
body[data-theme="dark"] .cell-weather-row .w-msg { color: #E2E8F0 !important; }

/* 모바일 — 날씨 카드 컴팩트 */
@media (max-width: 600px) {
  .cell-weather-row { gap: 14px; padding: 14px 18px; }
  .cell-weather-row .w-icon { font-size: 32px; }
  .cell-weather-row .w-temp { font-size: 24px; }
}


/* ════════════════════════════════════════════════════════
   v2.0 (재수정 2) 카드 컬러 / 배경 테마 복구
   - 사용자가 카드별로 색 변경하면 다크 그라데이션 무시
   - 라이트 테마(warm/rose/mint/lav/sky)에서 배경 그라데이션 강제 X
   ════════════════════════════════════════════════════════ */

/* 라이트 테마들 — 강제 그라데이션 제거 (각 테마 본래 배경 사용) */
body[data-theme="warm"],
body[data-theme="rose"],
body[data-theme="mint"],
body[data-theme="lav"],
body[data-theme="sky"] {
  background: none !important;
  background-attachment: initial !important;
}

/* 사용자 카드 컬러 [data-usercolor]는 다크 모드에서도 그대로 적용 (최우선) */
body[data-theme="dark"] .cell[data-usercolor="pink"]   { background: linear-gradient(135deg, #FFE9F2, #FFD6E8) !important; border: 1.5px solid rgba(240,82,122,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="lav"]    { background: linear-gradient(135deg, #ECE6FA, #DDD6F8) !important; border: 1.5px solid rgba(123,108,240,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="mint"]   { background: linear-gradient(135deg, #DDF6E8, #B8F0D8) !important; border: 1.5px solid rgba(46,189,138,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="yellow"] { background: linear-gradient(135deg, #FFF7CB, #FFF3B0) !important; border: 1.5px solid rgba(212,160,16,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="coral"]  { background: linear-gradient(135deg, #FFEBE0, #FFE0D4) !important; border: 1.5px solid rgba(224,92,48,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="sky"]    { background: linear-gradient(135deg, #DCE9F8, #C5DDF5) !important; border: 1.5px solid rgba(91,136,200,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="peach"]  { background: linear-gradient(135deg, #FFE5D2, #FFD9C0) !important; border: 1.5px solid rgba(228,140,80,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="cream"]  { background: linear-gradient(135deg, #FFFAEF, #FFF1D5) !important; border: 1.5px solid rgba(200,160,90,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="gray"]   { background: linear-gradient(135deg, #F4F4F8, #E0E0E8) !important; border: 1.5px solid rgba(90,90,110,0.32) !important; }
body[data-theme="dark"] .cell[data-usercolor="white"]  { background: #FFFFFF !important; border: 1.5px solid var(--border) !important; }

/* 사용자 컬러 카드의 글씨는 어두운색으로 (밝은 배경이라) */
body[data-theme="dark"] .cell[data-usercolor],
body[data-theme="dark"] .cell[data-usercolor] * {
  color: #1C1C2E !important;
}
body[data-theme="dark"] .cell[data-usercolor] .timer-clock {
  color: #4F46E5 !important;
  text-shadow: none !important;
}

/* 몰입모드 시계 — 더 크고 임팩트 (전체 화면 시간) */
.focus-timer {
  font-size: clamp(72px, 18vw, 160px) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(129,140,248,0.65), 0 0 20px rgba(255,255,255,0.3);
  line-height: 1;
}
.focus-subject {
  font-size: 18px;
  margin-bottom: 14px;
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════
   v2.2 (2026-05-17): Z세대 친화 디자인 강화
   - 글래스모피즘 + 컬러드 섀도우 (라벤더 글로우)
   - 마이크로 인터랙션 (카드 호버, 버튼 스케일)
   - 시계 모드 버튼 임팩트, 액티브 인디케이터 강화
   - 인사말 그라데이션 텍스트, 모서리 24px 강화
   ════════════════════════════════════════════════════════ */

:root {
  --shadow-lav: 0 10px 28px rgba(123,108,240,0.22), 0 2px 6px rgba(123,108,240,0.10);
  --shadow-lav-strong: 0 14px 38px rgba(123,108,240,0.34);
  --shadow-pink: 0 10px 28px rgba(240,82,122,0.18);
  --glass-blur: 20px;
  --grad-brand: linear-gradient(135deg, #818CF8 0%, #C084FC 50%, #F472B6 100%);
  --grad-brand-strong: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(129,140,248,0.13) 0%, rgba(244,114,182,0.10) 100%);
}

/* ───── 카드 호버 — 부드러운 컬러드 글로우 ───── */
.cell {
  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              box-shadow 260ms cubic-bezier(.2,.8,.2,1) !important;
}
.cell:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lav) !important;
}
body[data-theme="dark"] .cell:hover {
  box-shadow: 0 14px 36px rgba(129,140,248,0.42),
              0 0 0 1px rgba(129,140,248,0.22) !important;
}

/* ───── 사이드바 액티브 — 왼쪽 그라데이션 바 + 글로우 ───── */
.sb-item.active {
  position: relative;
  font-weight: 800 !important;
  background: var(--grad-brand-soft) !important;
  color: #4F46E5 !important;
}
.sb-item.active::before {
  content: "";
  position: absolute;
  left: -4px; top: 22%; bottom: 22%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--grad-brand);
  box-shadow: 0 0 14px rgba(129,140,248,0.6);
}
body[data-theme="dark"] .sb-item.active {
  background: linear-gradient(135deg, rgba(129,140,248,0.20), rgba(192,132,252,0.14)) !important;
  color: #C7BFFF !important;
}

/* ───── 시계 모드 버튼 임팩트 강화 (홈 타이머 카드) ───── */
.focus-enter-btn {
  position: relative;
  background: var(--grad-brand-strong) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 12px 14px !important;
  letter-spacing: -0.01em;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(129,140,248,0.40),
              inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.focus-enter-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,0.28), transparent 60%);
  pointer-events: none;
}
.focus-enter-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(129,140,248,0.52),
              inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

/* ───── 모바일 하단 탭바 — 글래스 강화 + 액티브 동그란 인디케이터 ───── */
.mobile-nav {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: 0 -6px 24px rgba(28,28,46,0.07) !important;
}
body[data-theme="dark"] .mobile-nav {
  background: rgba(15,23,42,0.76) !important;
  border-top: 1px solid rgba(129,140,248,0.20) !important;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.35) !important;
}

.mnav-item {
  position: relative;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), color 160ms !important;
}
.mnav-item .mnav-emoji {
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), filter 200ms;
}
.mnav-item:hover .mnav-emoji { transform: scale(1.12); }
.mnav-item.active .mnav-emoji { transform: scale(1.18); }
.mnav-item.active {
  background: transparent !important;
  color: #4F46E5 !important;
  transform: none !important;
}
.mnav-item.active::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(129,140,248,0.65);
}
body[data-theme="dark"] .mnav-item.active { color: #C7BFFF !important; }

/* 시계 탭 — 항상 살짝 글로우 (앱의 핵심 정체성 강조) */
#mnav-focus .mnav-emoji {
  filter: drop-shadow(0 0 5px rgba(129,140,248,0.45));
}

/* ───── 헤더 + 액션 버튼 마이크로 인터랙션 ───── */
.hbtn {
  transition: transform 200ms cubic-bezier(.2,.8,.2,1),
              box-shadow 220ms cubic-bezier(.2,.8,.2,1) !important;
}
.hbtn:hover { transform: translateY(-2px) scale(1.05) !important; }
.hbtn.hbtn-add {
  background: var(--grad-brand-strong) !important;
  box-shadow: 0 8px 22px rgba(129,140,248,0.42) !important;
}
.hbtn.hbtn-add:hover {
  box-shadow: 0 12px 30px rgba(129,140,248,0.58) !important;
}

/* ───── 브랜드 로고 마크 — 더 입체적 ───── */
.sb-brand-mark {
  background: var(--grad-brand-strong) !important;
  box-shadow: 0 8px 22px rgba(129,140,248,0.40),
              inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* ───── 하루 인사 (홈) — 큰 그라데이션 타이포 ───── */
.dg-date {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.dg-quote {
  font-size: clamp(22px, 4vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  background: var(--grad-brand-strong);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body[data-theme="dark"] .dg-date { color: #94A3B8; }

/* ───── 둥근 모서리 강화 (Z세대 친근함) ───── */
.cell { border-radius: 24px !important; }
.modal-bg .modal { border-radius: 28px !important; }
.menu-sheet { border-radius: 28px 28px 0 0 !important; }

/* ───── 시계 모드 컨트롤 — 글래스 ───── */
.focus-noise-btn,
.focus-close,
.focus-end {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  transition: all 200ms cubic-bezier(.2,.8,.2,1) !important;
}
.focus-noise-btn:hover,
.focus-close:hover,
.focus-end:hover {
  background: rgba(255,255,255,0.20) !important;
  transform: translateY(-1px);
}

/* ───── 시계 모드 시계 — 보라 글로우 강화 ───── */
body .focus-timer {
  text-shadow:
    0 0 80px rgba(129,140,248,0.78),
    0 0 30px rgba(192,132,252,0.50),
    0 0 12px rgba(255,255,255,0.35) !important;
}

/* ───── 모바일 터치 디바이스 — 호버 비활성 ───── */
@media (hover: none) {
  .cell:hover { transform: none !important; }
  .hbtn:hover { transform: none !important; }
}

/* ───── 작은 화면 액티브 인디케이터 조정 ───── */
@media (max-width: 480px) {
  .mnav-item.active::after { width: 22px; height: 2.5px; bottom: 2px; }
}

/* ───── 사이드바 — 글래스모피즘 살짝 ───── */
.sidebar {
  background: rgba(255,255,255,0.86) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
body[data-theme="dark"] .sidebar {
  background: rgba(15,23,42,0.82) !important;
  border-right: 1px solid rgba(129,140,248,0.16) !important;
}

/* ───── 모달 백드롭 + 글래스 ───── */
.modal-bg {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ───── 모바일 더보기 시트 — 글래스 ───── */
.menu-sheet {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
body[data-theme="dark"] .menu-sheet {
  background: rgba(15,23,42,0.92) !important;
}

/* ════════════════════════════════════════════════════════
   v2.2 로그인 UI (사이드바 + 모바일 topbar 사용자 버튼)
   ════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

/* ── 사이드바 로그인 박스 ── */
.sb-user {
  margin: 4px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.sb-login-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(129,140,248,0.28);
  background: rgba(255,255,255,0.85);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 200ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 4px 12px rgba(129,140,248,0.10);
}
.sb-login-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(129,140,248,0.55);
  box-shadow: 0 8px 22px rgba(129,140,248,0.22);
}
.sb-g-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 90deg at 50% 50%, #4285F4, #DB4437, #F4B400, #0F9D58, #4285F4);
  color: #fff;
  font-weight: 900;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
body[data-theme="dark"] .sb-login-btn {
  background: rgba(30,41,59,0.6);
  border-color: rgba(129,140,248,0.35);
  color: #E2E8F0;
}
body[data-theme="dark"] .sb-login-btn:hover {
  background: rgba(30,41,59,0.85);
  border-color: rgba(129,140,248,0.7);
}

/* ── 사이드바 사용자 정보 (로그인 후) ── */
.sb-user-info {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--grad-brand-soft);
  border: 1px solid rgba(129,140,248,0.20);
}
.sb-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #818CF8, #F472B6);
  box-shadow: 0 2px 8px rgba(129,140,248,0.32);
  flex-shrink: 0;
}
.sb-user-meta { flex: 1; min-width: 0; }
.sb-user-name {
  font-size: 13px;
  font-weight: 800;
  color: #4F46E5;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-logout {
  margin-top: 2px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: var(--text-mid);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s;
}
.sb-logout:hover { background: rgba(240,82,122,0.12); color: #DC2658; }
body[data-theme="dark"] .sb-user-info {
  background: linear-gradient(135deg, rgba(129,140,248,0.18), rgba(244,114,182,0.10));
  border-color: rgba(129,140,248,0.35);
}
body[data-theme="dark"] .sb-user-name { color: #C7BFFF; }
body[data-theme="dark"] .sb-logout { color: #94A3B8; }
body[data-theme="dark"] .sb-logout:hover { background: rgba(244,114,182,0.18); color: #FBB6CE; }

/* ── 모바일 topbar 사용자 버튼 ── */
.hbtn.hbtn-user {
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(129,140,248,0.40);
}
.hbtn.hbtn-user:hover {
  box-shadow: 0 8px 22px rgba(129,140,248,0.55);
}

/* ════════════════════════════════════════════════════════
   v2.4 (2026-05-20): 무광(matte) 톤 절제
   - v2.2 화려한 광택·글로우만 절제, 인디고/라벤더 컬러 라인은 유지
   - 컬러드 섀도우 → 뉴트럴 그레이, 채도 낮춤, 텍스트 그라데이션 → 단색
   - 마이크로 인터랙션(살짝 떠오름)은 유지 — 너무 평면화 X
   ════════════════════════════════════════════════════════ */

:root {
  /* 그림자: 보라 글로우 → 뉴트럴 그레이 (살짝 떠 보이는 정도) */
  --shadow-lav: 0 6px 18px rgba(28,28,46,0.07), 0 1px 3px rgba(28,28,46,0.04);
  --shadow-lav-strong: 0 10px 28px rgba(28,28,46,0.10);

  /* 그라데이션: 채도 낮춘 무광 톤 (#818CF8→#C084FC→#F472B6 보다 부드러움) */
  --grad-brand: linear-gradient(135deg, #7C82D8 0%, #A58FD0 55%, #C885A8 100%);
  --grad-brand-strong: linear-gradient(135deg, #5D63C8 0%, #8E6FC0 55%, #B57495 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(124,130,216,0.10) 0%, rgba(200,133,168,0.07) 100%);
}

/* ───── 카드 호버 — 뉴트럴 섀도우 (라벤더 글로우 제거) ───── */
.cell:hover {
  box-shadow: 0 8px 20px rgba(28,28,46,0.09) !important;
}
body[data-theme="dark"] .cell:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,0.40),
              0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* ───── 사이드바 액티브 — 막대만 유지, 글로우 제거 ───── */
.sb-item.active::before {
  box-shadow: none !important;
}

/* ───── 모바일 탭바 — 채도/블러 절제 ───── */
.mobile-nav {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
  box-shadow: 0 -2px 12px rgba(28,28,46,0.05) !important;
}
body[data-theme="dark"] .mobile-nav {
  background: rgba(15,23,42,0.86) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.30) !important;
}

/* 액티브 인디케이터 — 글로우 제거, 막대만 */
.mnav-item.active::after {
  box-shadow: none !important;
}
/* 시계 탭 항시 글로우도 제거 */
#mnav-focus .mnav-emoji { filter: none !important; }

/* ───── 시계 모드 진입 버튼 — 광택 절제 ───── */
.focus-enter-btn {
  background: var(--grad-brand) !important;
  box-shadow: 0 4px 12px rgba(28,28,46,0.10) !important;
}
.focus-enter-btn::after { display: none !important; }  /* 내부 화이트 하이라이트 제거 */
.focus-enter-btn:hover {
  box-shadow: 0 6px 16px rgba(28,28,46,0.14) !important;
}

/* ───── 헤더 + 사이드바 브랜드 마크 — 컬러드 섀도우 제거 ───── */
.hbtn { box-shadow: 0 1px 3px rgba(28,28,46,0.05) !important; }
.hbtn:hover { box-shadow: 0 4px 10px rgba(28,28,46,0.10) !important; }
.hbtn.hbtn-add {
  background: var(--grad-brand-strong) !important;
  box-shadow: 0 4px 12px rgba(28,28,46,0.12) !important;
}
.hbtn.hbtn-add:hover {
  box-shadow: 0 6px 16px rgba(28,28,46,0.18) !important;
}
.hbtn.hbtn-user {
  box-shadow: 0 3px 10px rgba(28,28,46,0.12) !important;
}
.hbtn.hbtn-user:hover {
  box-shadow: 0 5px 14px rgba(28,28,46,0.18) !important;
}

.sb-brand-mark {
  background: var(--grad-brand-strong) !important;
  box-shadow: 0 3px 10px rgba(28,28,46,0.10) !important;
}

/* ───── 하루 인사 한마디 — 그라데이션 텍스트 → 단색 ───── */
.dg-quote {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #4F46E5 !important;
  font-weight: 800 !important;
}
body[data-theme="dark"] .dg-quote { color: #C7BFFF !important; }

/* ───── 사이드바 — 채도 절제 ───── */
.sidebar {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}
body[data-theme="dark"] .sidebar {
  background: rgba(15,23,42,0.92) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
}

/* ───── 모바일 더보기 시트 — 채도 절제 ───── */
.menu-sheet {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
}
body[data-theme="dark"] .menu-sheet {
  background: rgba(15,23,42,0.95) !important;
}

/* ───── 모달 백드롭 — 블러 절제 ───── */
.modal-bg {
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* ───── 시계 모드 시계 글로우 약화 (3중 → 1중 부드러움) ───── */
body .focus-timer {
  text-shadow: 0 0 28px rgba(167,168,200,0.50) !important;
  font-weight: 700 !important;  /* 800 → 700 (살짝 가벼움) */
}

/* ───── 시계 모드 배경 — 가라앉은 톤 ───── */
.focus-overlay {
  background: linear-gradient(160deg, #1A1B2E 0%, #25254A 50%, #2D2D52 100%) !important;
}

/* ───── 로그인 버튼 — 광택 절제 ───── */
.sb-login-btn {
  box-shadow: 0 2px 6px rgba(28,28,46,0.06) !important;
  border-color: rgba(124,130,216,0.22) !important;
}
.sb-login-btn:hover {
  box-shadow: 0 4px 12px rgba(28,28,46,0.10) !important;
  border-color: rgba(124,130,216,0.42) !important;
}
body[data-theme="dark"] .sb-login-btn {
  border-color: rgba(124,130,216,0.30) !important;
}

/* ───── 사용자 아바타 — 컬러드 섀도우 제거 ───── */
.sb-avatar {
  box-shadow: 0 2px 6px rgba(28,28,46,0.10) !important;
}

/* ───── 사용자 정보 박스 — 그라데이션 약화 ───── */
.sb-user-info {
  background: linear-gradient(135deg, rgba(124,130,216,0.08), rgba(200,133,168,0.05)) !important;
  border-color: rgba(124,130,216,0.16) !important;
}
body[data-theme="dark"] .sb-user-info {
  background: linear-gradient(135deg, rgba(124,130,216,0.12), rgba(200,133,168,0.08)) !important;
  border-color: rgba(124,130,216,0.25) !important;
}
.sb-user-name { color: #5D5FCC !important; }
body[data-theme="dark"] .sb-user-name { color: #B8B0E5 !important; }

/* ───── 카드 호버 시 떠오름 폭 약간 줄임 (3px → 2px) ───── */
.cell:hover { transform: translateY(-2px) !important; }

/* ───── 헤더 버튼 호버 — 스케일 약화 (1.05 → 1.02) ───── */
.hbtn:hover { transform: translateY(-1px) scale(1.02) !important; }

/* ───── 시계 탭 글로우 제거 후 — 디폴트 상태 일관성 ───── */
.mnav-item.active {
  color: #5D5FCC !important;
}
body[data-theme="dark"] .mnav-item.active { color: #B8B0E5 !important; }

/* ───── 사이드바 활성 메뉴 글자 색 무광톤 ───── */
.sb-item.active { color: #5D5FCC !important; }
body[data-theme="dark"] .sb-item.active { color: #B8B0E5 !important; }

/* ════════════════════════════════════════════════════════
   v2.5 (2026-05-20): 더 톤다운 + 형광 제거 + 글씨 가독성 강화
   - 그라데이션 → 단색 잉크 인디고 (#4F5388)
   - 형광 보라 글로우 잔여 모두 제거
   - 본문/제목/메뉴 글씨 콘트라스트 + 굵기 강화
   - 다크 모드 흐릿한 회색 → 또렷한 라이트 그레이
   - 시계 모드 시계 글로우 → 단순 화이트 + 미세 그림자만
   ════════════════════════════════════════════════════════ */

:root {
  /* 그라데이션 → 단색 무광 잉크 (형광 제거의 핵심) */
  --grad-brand: linear-gradient(135deg, #6B6FB2 0%, #7C72A8 100%);
  --grad-brand-strong: #4F5388;  /* 단색 잉크 인디고 */
  --grad-brand-soft: rgba(107,111,178,0.08);

  /* 텍스트 콘트라스트 강화 */
  --text: #14142B;          /* 본문 — 거의 잉크 블랙 */
  --text-mid: #2D2D52;      /* 중간 — 진한 인디고 그레이 */
  --text-dim: #6B6B85;      /* 흐릿 — 그래도 v2.4보다 진함 */

  /* 그림자 — 뉴트럴, 작게 */
  --shadow-lav: 0 3px 10px rgba(0,0,0,0.06);
  --shadow-lav-strong: 0 6px 18px rgba(0,0,0,0.09);
}

/* ───── 본문 기본 글씨 진하게 ───── */
body { color: var(--text) !important; }
body[data-theme="dark"] { color: #F2F2F8 !important; }

/* ───── 카드 호버 — 더 절제된 그림자 ───── */
.cell:hover {
  box-shadow: 0 5px 14px rgba(0,0,0,0.07) !important;
}
body[data-theme="dark"] .cell:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.35),
              0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* ───── 사이드바 메뉴 글씨 콘트라스트 강화 ───── */
.sb-item {
  color: #2D2D52 !important;
  font-weight: 600 !important;
}
.sb-item:hover { color: #14142B !important; }
.sb-item.active {
  background: rgba(107,111,178,0.10) !important;
  color: #14142B !important;
  font-weight: 800 !important;
}
.sb-item.active::before {
  background: #4F5388 !important;
  box-shadow: none !important;
}
body[data-theme="dark"] .sb-item {
  color: #C8C8D8 !important;
}
body[data-theme="dark"] .sb-item:hover { color: #FFFFFF !important; }
body[data-theme="dark"] .sb-item.active {
  background: rgba(199,199,229,0.10) !important;
  color: #FFFFFF !important;
}

/* ───── 모바일 탭바 — 단색 잉크 ───── */
.mnav-item { color: #6B6B85 !important; font-weight: 700 !important; }
.mnav-item.active {
  color: #14142B !important;
  background: transparent !important;
}
.mnav-item.active::after {
  background: #4F5388 !important;
  box-shadow: none !important;
}
body[data-theme="dark"] .mnav-item { color: #B8B8C8 !important; }
body[data-theme="dark"] .mnav-item.active { color: #FFFFFF !important; }
#mnav-focus .mnav-emoji { filter: none !important; }

/* ───── 시계 모드 진입 버튼 — 단색 잉크 (그라데이션 X) ───── */
.focus-enter-btn {
  background: #4F5388 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}
.focus-enter-btn::after { display: none !important; }
.focus-enter-btn:hover {
  background: #3F4376 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14) !important;
}

/* ───── 헤더 + 액션 버튼 — 단색 ───── */
.hbtn {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.hbtn:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important; }
.hbtn.hbtn-add {
  background: #4F5388 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}
.hbtn.hbtn-add:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.14) !important; }
.hbtn.hbtn-user {
  background: #6B6FB2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}

/* ───── 브랜드 마크 — 단색 ───── */
.sb-brand-mark {
  background: #4F5388 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}
.sb-brand-name { color: #14142B !important; font-weight: 800 !important; }
.sb-brand-sub { color: #6B6B85 !important; }
body[data-theme="dark"] .sb-brand-name { color: #F2F2F8 !important; }
body[data-theme="dark"] .sb-brand-sub { color: #A8A8C0 !important; }

/* ───── 하루 인사 — 단색 잉크 + 굵기 ───── */
.dg-quote {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #14142B !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
.dg-date {
  color: #2D2D52 !important;
  font-weight: 700 !important;
}
body[data-theme="dark"] .dg-quote { color: #FFFFFF !important; }
body[data-theme="dark"] .dg-date { color: #B8B8C8 !important; }

/* ───── 시계 모드 시계 — 형광 글로우 완전 제거, 단순 화이트 ───── */
body .focus-timer {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.30) !important;
  font-weight: 700 !important;
}

/* ───── 시계 모드 배경 — 가라앉은 슬레이트 (형광 보라 X) ───── */
.focus-overlay {
  background: linear-gradient(160deg, #1A1A2E 0%, #1F1F3A 50%, #232342 100%) !important;
}

/* ───── 시계 모드 자막 — 또렷 ───── */
.focus-subject {
  color: #E5E5F2 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* ───── 카드 안 라벨/제목 글씨 콘트라스트 강화 ───── */
.cell-title, .cal-title, .timer-label, .timer-today, .stats-label,
.tt-label, .tt-day, .lunch-label, .lunch-date, .ss-label, .ss-week,
.w-state, .w-msg, .ai-label, .ai-header, .quote-from, .donut-lbl,
.upload-txt, .upload-sub, .ai-demo-h, .detail-section-h {
  color: #14142B !important;
}
.cell-title, .cal-title, .timer-label, .ai-label, .ai-header, .ai-demo-h, .detail-section-h {
  font-weight: 800 !important;
}
body[data-theme="dark"] .cell .cell-title,
body[data-theme="dark"] .cell .cal-title,
body[data-theme="dark"] .cell .cal-meta,
body[data-theme="dark"] .cell .timer-label,
body[data-theme="dark"] .cell .timer-today,
body[data-theme="dark"] .cell .stats-label,
body[data-theme="dark"] .cell .tt-label,
body[data-theme="dark"] .cell .tt-day,
body[data-theme="dark"] .cell .lunch-label,
body[data-theme="dark"] .cell .lunch-date,
body[data-theme="dark"] .cell .ss-label,
body[data-theme="dark"] .cell .ss-week,
body[data-theme="dark"] .cell .w-state,
body[data-theme="dark"] .cell .w-msg,
body[data-theme="dark"] .cell .ai-label,
body[data-theme="dark"] .cell .ai-header,
body[data-theme="dark"] .cell .quote-from,
body[data-theme="dark"] .cell .donut-lbl {
  color: #F2F2F8 !important;
}

/* ───── view-title (메뉴 페이지 제목) 진하게 ───── */
.view-title { color: #14142B !important; font-weight: 800 !important; }
.view-sub { color: #2D2D52 !important; font-weight: 600 !important; }
body[data-theme="dark"] .view-title { color: #FFFFFF !important; }
body[data-theme="dark"] .view-sub { color: #B8B8C8 !important; }

/* ───── 사용자 정보 박스 — 단색 ───── */
.sb-user-info {
  background: rgba(107,111,178,0.10) !important;
  border-color: rgba(107,111,178,0.20) !important;
}
body[data-theme="dark"] .sb-user-info {
  background: rgba(199,199,229,0.10) !important;
  border-color: rgba(199,199,229,0.20) !important;
}
.sb-user-name {
  color: #14142B !important;
  font-weight: 800 !important;
}
body[data-theme="dark"] .sb-user-name { color: #FFFFFF !important; }
.sb-logout { color: #6B6B85 !important; font-weight: 600 !important; }
.sb-logout:hover { background: rgba(0,0,0,0.06) !important; color: #14142B !important; }
body[data-theme="dark"] .sb-logout { color: #B8B8C8 !important; }
body[data-theme="dark"] .sb-logout:hover { background: rgba(255,255,255,0.10) !important; color: #FFFFFF !important; }

/* ───── 로그인 버튼 — 또렷 ───── */
.sb-login-btn {
  background: rgba(255,255,255,0.92) !important;
  border: 1.5px solid rgba(107,111,178,0.30) !important;
  color: #14142B !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.sb-login-btn:hover {
  border-color: rgba(107,111,178,0.55) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10) !important;
}
body[data-theme="dark"] .sb-login-btn {
  background: rgba(30,41,59,0.85) !important;
  border-color: rgba(199,199,229,0.30) !important;
  color: #FFFFFF !important;
}

/* ───── 사이드바 팁 박스 — 톤다운 ───── */
.sb-tip {
  background: rgba(107,111,178,0.12) !important;
  color: #2D2D52 !important;
}
body[data-theme="dark"] .sb-tip {
  background: rgba(199,199,229,0.10) !important;
  color: #E5E5F2 !important;
}

/* ───── 설정 모달 안 글씨 ───── */
.setting-name { color: #14142B !important; font-weight: 800 !important; }
.setting-desc { color: #2D2D52 !important; font-weight: 500 !important; }
body[data-theme="dark"] .setting-name { color: #FFFFFF !important; }
body[data-theme="dark"] .setting-desc { color: #C8C8D8 !important; }

/* ───── modal-title, modal-sub ───── */
.modal-title { color: #14142B !important; font-weight: 800 !important; }
.modal-sub { color: #2D2D52 !important; font-weight: 500 !important; }
body[data-theme="dark"] .modal-title { color: #FFFFFF !important; }
body[data-theme="dark"] .modal-sub { color: #C8C8D8 !important; }

/* ───── 모든 잔여 글로우/형광 효과 제거 ───── */
.sb-brand-mark,
.hbtn.hbtn-add,
.hbtn.hbtn-user,
.focus-enter-btn,
.sb-item.active::before,
.mnav-item.active::after,
#mnav-focus .mnav-emoji,
.sb-avatar,
.sb-g-mark {
  filter: none !important;
}
.dg-quote, .cell-title, .timer-label, .view-title, .sb-brand-name {
  text-shadow: none !important;
}

/* ───── Google 로그인 G 마크 — 단색화 ───── */
.sb-g-mark {
  background: #4F5388 !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
}

/* ───── 카드 사용자 컬러(다꾸) 안 글씨는 그대로 (이미 처리됨) ───── */
/* ※ data-usercolor 컬러 카드 안 글씨는 v2.1 다크모드 처리 유지 — 건드리지 않음 */

/* ───── 글래스 효과 한 번 더 절제 ───── */
.sidebar,
.mobile-nav,
.menu-sheet {
  backdrop-filter: blur(10px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(110%) !important;
}

/* ───── 카드 호버 떠오름 미세 (2px → 1px) ───── */
.cell:hover { transform: translateY(-1px) !important; }
.hbtn:hover { transform: translateY(-1px) scale(1.01) !important; }
.mnav-item:hover .mnav-emoji { transform: scale(1.06) !important; }
.mnav-item.active .mnav-emoji { transform: scale(1.10) !important; }

/* ════════════════════════════════════════════════════════
   v2.5b (2026-05-20): hero 카드 + AI 버튼 무광 보강
   - "요점 만들기" 버튼 (.htag) 단색 잉크화
   - hero 카드 민트 그라데이션 → 부드러운 뉴트럴
   - AI 페이지 "자료 올리고 시작" (.ai-cta) 도 잉크화
   ════════════════════════════════════════════════════════ */

/* ───── 홈 hero 카드 배경 — 민트 형광 → 뉴트럴 ───── */
.cell-hero {
  background: linear-gradient(135deg, #F4F4F8, #E8E8F0) !important;
  border: 1.5px solid rgba(107,111,178,0.15) !important;
}
body[data-theme="dark"] .cell-hero {
  background: linear-gradient(135deg, #1F1F32, #2A2A42) !important;
  border: 1px solid rgba(199,199,229,0.10) !important;
}

/* ───── hero 카드 텍스트 ───── */
.hero-eyebrow { color: #4F5388 !important; }
.hero-eyebrow .pulse { background: #4F5388 !important; }
.hero-title { color: #14142B !important; font-weight: 800 !important; }
.hero-sub { color: #2D2D52 !important; font-weight: 500 !important; }

body[data-theme="dark"] .hero-eyebrow { color: #B8B0E5 !important; }
body[data-theme="dark"] .hero-eyebrow .pulse { background: #B8B0E5 !important; }
body[data-theme="dark"] .hero-title { color: #FFFFFF !important; }
body[data-theme="dark"] .hero-sub { color: #C8C8D8 !important; }

/* ───── "요점 만들기" 버튼 (.htag) — 단색 잉크 + 화이트 글씨 ───── */
.htag {
  background: #4F5388 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.htag:hover {
  background: #3F4376 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px);
}

/* ───── "자료 보기" 버튼 (.htag.ghost) — 잉크 외곽선 ───── */
.htag.ghost {
  background: transparent !important;
  border: 1.5px solid rgba(79,83,136,0.45) !important;
  color: #4F5388 !important;
}
.htag.ghost:hover {
  background: rgba(79,83,136,0.08) !important;
  color: #14142B !important;
  border-color: #4F5388 !important;
}
body[data-theme="dark"] .htag.ghost {
  border-color: rgba(199,199,229,0.40) !important;
  color: #C8C8D8 !important;
}
body[data-theme="dark"] .htag.ghost:hover {
  background: rgba(199,199,229,0.08) !important;
  color: #FFFFFF !important;
  border-color: rgba(199,199,229,0.65) !important;
}

/* ───── AI 카드 "자료 올리고 시작" 버튼 (.ai-cta) — 단색 잉크 ───── */
.ai-cta {
  background: #4F5388 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}
.ai-cta:hover {
  background: #3F4376 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px);
}

/* ───── 데모 페이지 안 "예상 문제" / "요점정리" 라벨 ───── */
.ai-demo-h {
  color: #14142B !important;
  font-weight: 800 !important;
}
body[data-theme="dark"] .ai-demo-h { color: #FFFFFF !important; }

/* ───── 잔여 민트 컬러 토큰 사용처 글씨 진하게 ───── */
.cell-hero .hero-title,
.cell-hero .hero-sub,
.cell-hero .hero-eyebrow {
  text-shadow: none !important;
}

/* ════════════════════════════════════════════════════════
   v2.5c (2026-05-20): 홈 공부 타이머 카드 — 열공 모드 버튼 잘림 fix
   - 원인: .cell { overflow:hidden } + c-2x2 그리드 높이 부족 → 마지막 버튼 잘림
   - 해결: cell-timer min-height 확보 + overflow visible
   ════════════════════════════════════════════════════════ */

.cell.cell-timer {
  min-height: 340px !important;
  overflow: visible !important;
}
@media (max-width: 768px) {
  .cell.cell-timer { min-height: 280px !important; }
}

/* 다크 모드에서 잉크 인디고가 카드 배경에 묻히지 않게 살짝 톤업 */
body[data-theme="dark"] .focus-enter-btn {
  background: #6366F1 !important;
  color: #FFFFFF !important;
}
body[data-theme="dark"] .focus-enter-btn:hover {
  background: #5052D8 !important;
}

/* 버튼 자체 살짝 더 큼직하게 + margin 명확화 */
.focus-enter-btn {
  margin-top: 12px !important;
  padding: 13px 14px !important;
  font-size: 14px !important;
}

/* ════════════════════════════════════════════════════════
   v2.5d (2026-05-20): 홈 공부 타이머 카드 — 열공 모드 버튼 강제 표시 fix
   - 원인 추가 분석: timer-controls 의 margin-top:auto 가 버튼을 카드 밖으로 밀어냄
   - + cell overflow:hidden 에 의해 추가로 잘림
   - 해결: 카드 높이 충분히 확보 + margin-top:auto 제거 + 버튼 visibility 강제
   ════════════════════════════════════════════════════════ */

/* 카드 충분한 높이 + overflow visible */
.cell.cell-timer {
  min-height: 400px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
@media (max-width: 768px) {
  .cell.cell-timer { min-height: 320px !important; }
}

/* timer-controls 의 margin-top:auto 제거 (이게 버튼을 카드 밖으로 밀어냈음) */
.cell-timer .timer-controls {
  margin-top: 12px !important;
}

/* 열공 모드 버튼 — 절대 보이도록 강제 */
.focus-enter-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  margin-top: 14px !important;
  padding: 14px 14px !important;
  border: none !important;
  border-radius: 14px !important;
  background: #4F5388 !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  transition: background 180ms, box-shadow 180ms, transform 180ms !important;
}
.focus-enter-btn:hover {
  background: #3F4376 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
  transform: translateY(-1px) !important;
}
body[data-theme="dark"] .focus-enter-btn {
  background: #6366F1 !important;
  color: #FFFFFF !important;
}
body[data-theme="dark"] .focus-enter-btn:hover {
  background: #4F52D8 !important;
}

/* ::after / ::before 잔여 광택 다 제거 */
.focus-enter-btn::after,
.focus-enter-btn::before {
  display: none !important;
  content: none !important;
}

/* ════════════════════════════════════════════════════════
   v2.5e (2026-05-20): 공부 타이머 카드 — 카드 안 요소 압축 (높이 X)
   - v2.5d 의 min-height 400 → 자동 (다른 카드와 균형 맞춤)
   - 카드 안 패딩·여백·폰트 줄여서 버튼이 자연스럽게 카드 안에 들어가도록
   ════════════════════════════════════════════════════════ */

/* 카드 높이 강제 늘림 해제 — 다른 카드와 균형 */
.cell.cell-timer {
  min-height: auto !important;
  padding: 16px !important;
  overflow: visible !important;
  gap: 0 !important;
}
@media (max-width: 768px) {
  .cell.cell-timer { min-height: auto !important; }
}

/* 카드 안 요소들 압축 */
.cell-timer .timer-top {
  margin-bottom: 6px !important;
}
.cell-timer .timer-label { font-size: 12px !important; }
.cell-timer .timer-today { font-size: 11px !important; }

.cell-timer .timer-subject-select {
  margin: 4px 0 !important;
  gap: 4px !important;
}
.cell-timer .timer-subject-select .subj-pill {
  padding: 3px 8px !important;
  font-size: 11px !important;
}

.cell-timer .timer-clock {
  font-size: clamp(28px, 4.5vw, 40px) !important;
  margin: 4px 0 !important;
  line-height: 1.1 !important;
}

.cell-timer .timer-controls {
  margin-top: 6px !important;
  gap: 6px !important;
}
.cell-timer .timer-btn {
  padding: 7px 12px !important;
  font-size: 12px !important;
}

/* 열공 모드 버튼 — 작고 명확 */
.focus-enter-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  margin-top: 8px !important;
  padding: 9px 10px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #4F5388 !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
  transition: background 180ms, box-shadow 180ms, transform 180ms !important;
}
.focus-enter-btn:hover {
  background: #3F4376 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14) !important;
  transform: translateY(-1px) !important;
}
body[data-theme="dark"] .focus-enter-btn {
  background: #6366F1 !important;
}
body[data-theme="dark"] .focus-enter-btn:hover {
  background: #4F52D8 !important;
}

.focus-enter-btn::after,
.focus-enter-btn::before {
  display: none !important;
  content: none !important;
}

/* ════════════════════════════════════════════════════════
   v2.6 (2026-05-20): 화이트(노션 미니멀) 테마 추가
   - 순백 배경, 미세한 그레이 보더, 잉크 글씨, 단색 인디고 액센트만
   - 기본 진입 시 화이트로 자동 설정 (v2.6 마이그레이션, app.js)
   - 기존 dark/warm/rose/mint/lav/sky 6테마는 그대로 유지
   ════════════════════════════════════════════════════════ */

/* ───── 화이트 테마 토큰 (root 변수 덮어쓰기) ───── */
body[data-theme="white"] {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --card-warm: #FAFAFB;
  --text: #14142B;
  --text-mid: #3D3D5C;
  --text-dim: #6E6E85;
  --border: #ECECEF;
  --shadow-xs: 0 1px 2px rgba(20,20,43,0.04);
  --shadow-sm: 0 2px 6px rgba(20,20,43,0.05);
  --shadow-md: 0 4px 14px rgba(20,20,43,0.07);

  background: #FFFFFF;
  color: #14142B;
}

/* ───── 배경 ───── */
body[data-theme="white"] .main { background: #FFFFFF; }
body[data-theme="white"] .layout { background: #FFFFFF; }

/* ───── 카드 (사용자 컬러 없는 기본 카드) ───── */
body[data-theme="white"] .cell:not([data-usercolor]) {
  background: #FFFFFF !important;
  border: 1px solid #ECECEF !important;
  box-shadow: 0 1px 2px rgba(20,20,43,0.04) !important;
}
body[data-theme="white"] .cell:not([data-usercolor]):hover {
  box-shadow: 0 4px 16px rgba(20,20,43,0.07) !important;
  border-color: #DDDDE2 !important;
}

/* hero / timer / weather 카드 — 살짝 다른 톤 (구분감) */
body[data-theme="white"] .cell-hero:not([data-usercolor]),
body[data-theme="white"] .cell-timer:not([data-usercolor]),
body[data-theme="white"] .cell-weather-row:not([data-usercolor]) {
  background: #FAFAFB !important;
  border: 1px solid #ECECEF !important;
}

/* ───── 사이드바 ───── */
body[data-theme="white"] .sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid #ECECEF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-theme="white"] .sb-brand-name { color: #14142B !important; }
body[data-theme="white"] .sb-brand-sub { color: #6E6E85 !important; }

body[data-theme="white"] .sb-item {
  color: #3D3D5C !important;
  font-weight: 600 !important;
}
body[data-theme="white"] .sb-item:hover {
  background: #F4F4F6 !important;
  color: #14142B !important;
}
body[data-theme="white"] .sb-item.active {
  background: rgba(79,83,136,0.07) !important;
  color: #14142B !important;
  font-weight: 800 !important;
}
body[data-theme="white"] .sb-item.active::before {
  background: #4F5388 !important;
  box-shadow: none !important;
}

body[data-theme="white"] .sb-bottom {
  border-top: 1px solid #ECECEF !important;
}
body[data-theme="white"] .sb-brand {
  border-bottom: 1px solid #ECECEF !important;
}

body[data-theme="white"] .sb-tip {
  background: #F4F4F6 !important;
  color: #3D3D5C !important;
}

/* ───── 사용자 로그인 박스 ───── */
body[data-theme="white"] .sb-user {
  border-bottom: 1px solid #ECECEF !important;
}
body[data-theme="white"] .sb-login-btn {
  background: #FFFFFF !important;
  border: 1.5px solid #DDDDE2 !important;
  color: #14142B !important;
  box-shadow: 0 1px 2px rgba(20,20,43,0.04) !important;
}
body[data-theme="white"] .sb-login-btn:hover {
  border-color: #4F5388 !important;
  box-shadow: 0 3px 10px rgba(20,20,43,0.08) !important;
}
body[data-theme="white"] .sb-user-info {
  background: #F4F4F6 !important;
  border: 1px solid #ECECEF !important;
}
body[data-theme="white"] .sb-user-name { color: #14142B !important; }
body[data-theme="white"] .sb-logout { color: #6E6E85 !important; }
body[data-theme="white"] .sb-logout:hover {
  background: #ECECEF !important;
  color: #14142B !important;
}

/* ───── 모바일 하단 탭바 ───── */
body[data-theme="white"] .mobile-nav {
  background: rgba(255,255,255,0.95) !important;
  border-top: 1px solid #ECECEF !important;
  box-shadow: 0 -2px 8px rgba(20,20,43,0.04) !important;
  backdrop-filter: blur(8px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
}
body[data-theme="white"] .mnav-item { color: #6E6E85 !important; }
body[data-theme="white"] .mnav-item.active { color: #14142B !important; }
body[data-theme="white"] .mnav-item.active::after { background: #4F5388 !important; }

/* ───── 모달/시트 ───── */
body[data-theme="white"] .modal-bg .modal,
body[data-theme="white"] .modal-bg .modal-card {
  background: #FFFFFF !important;
  border: 1px solid #ECECEF !important;
  box-shadow: 0 12px 40px rgba(20,20,43,0.12) !important;
}
body[data-theme="white"] .menu-sheet {
  background: #FFFFFF !important;
  border-top: 1px solid #ECECEF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-theme="white"] .menu-sheet-item {
  color: #14142B !important;
}
body[data-theme="white"] .menu-sheet-item:hover {
  background: #F4F4F6 !important;
}

/* ───── 헤더 / 액션 버튼 ───── */
body[data-theme="white"] .hbtn {
  background: #FFFFFF !important;
  border: 1px solid #ECECEF !important;
  box-shadow: 0 1px 2px rgba(20,20,43,0.04) !important;
}
body[data-theme="white"] .hbtn:hover {
  box-shadow: 0 3px 8px rgba(20,20,43,0.08) !important;
}
body[data-theme="white"] .hbtn.hbtn-add {
  background: #4F5388 !important;
  border: none !important;
  color: #FFFFFF !important;
}
body[data-theme="white"] .hbtn.hbtn-user {
  background: #4F5388 !important;
  border: none !important;
  color: #FFFFFF !important;
}

/* ───── 브랜드 마크 ───── */
body[data-theme="white"] .sb-brand-mark {
  background: #4F5388 !important;
  box-shadow: 0 2px 6px rgba(20,20,43,0.08) !important;
}

/* ───── 하루 인사 ───── */
body[data-theme="white"] .dg-date { color: #3D3D5C !important; }
body[data-theme="white"] .dg-quote { color: #14142B !important; }

/* ───── 카드 안 라벨/제목 — 잉크 ───── */
body[data-theme="white"] .cell .cell-title,
body[data-theme="white"] .cell .cal-title,
body[data-theme="white"] .cell .cal-meta,
body[data-theme="white"] .cell .timer-label,
body[data-theme="white"] .cell .timer-today,
body[data-theme="white"] .cell .stats-label,
body[data-theme="white"] .cell .tt-label,
body[data-theme="white"] .cell .tt-day,
body[data-theme="white"] .cell .lunch-label,
body[data-theme="white"] .cell .lunch-date,
body[data-theme="white"] .cell .ss-label,
body[data-theme="white"] .cell .ss-week,
body[data-theme="white"] .cell .w-state,
body[data-theme="white"] .cell .w-msg,
body[data-theme="white"] .cell .ai-label,
body[data-theme="white"] .cell .ai-header,
body[data-theme="white"] .cell .quote-from,
body[data-theme="white"] .cell .donut-lbl,
body[data-theme="white"] .cell-hero .hero-title,
body[data-theme="white"] .cell-hero .hero-sub,
body[data-theme="white"] .cell-hero .hero-eyebrow {
  color: #14142B !important;
}
body[data-theme="white"] .hero-eyebrow,
body[data-theme="white"] .hero-eyebrow .pulse {
  color: #4F5388 !important;
}
body[data-theme="white"] .cell-hero .hero-eyebrow .pulse {
  background: #4F5388 !important;
}

/* ───── 큰 시계 (홈) ───── */
body[data-theme="white"] .timer-clock { color: #4F5388 !important; }

/* ───── 시작/종료 버튼 ───── */
body[data-theme="white"] .timer-btn-start {
  background: #4F5388 !important;
  color: #FFFFFF !important;
}
body[data-theme="white"] .timer-btn-end {
  background: #FFFFFF !important;
  border: 1px solid #DDDDE2 !important;
  color: #14142B !important;
}

/* ───── 열공 모드 버튼 ───── */
body[data-theme="white"] .focus-enter-btn {
  background: #4F5388 !important;
  color: #FFFFFF !important;
}
body[data-theme="white"] .focus-enter-btn:hover {
  background: #3F4376 !important;
}

/* ───── 시험·자료 hero (요점 만들기) — 톤 통일 ───── */
body[data-theme="white"] .cell-hero {
  background: #FAFAFB !important;
}
body[data-theme="white"] .htag {
  background: #4F5388 !important;
  color: #FFFFFF !important;
}
body[data-theme="white"] .htag:hover { background: #3F4376 !important; }
body[data-theme="white"] .htag.ghost {
  background: transparent !important;
  border: 1.5px solid #DDDDE2 !important;
  color: #3D3D5C !important;
}
body[data-theme="white"] .htag.ghost:hover {
  background: #F4F4F6 !important;
  color: #14142B !important;
}

/* ───── view-title / view-sub ───── */
body[data-theme="white"] .view-title { color: #14142B !important; }
body[data-theme="white"] .view-sub { color: #3D3D5C !important; }

/* ───── AI 페이지 ───── */
body[data-theme="white"] .ai-cta {
  background: #4F5388 !important;
  color: #FFFFFF !important;
}
body[data-theme="white"] .ai-cta:hover { background: #3F4376 !important; }

/* ───── 설정 모달 ───── */
body[data-theme="white"] .setting-name { color: #14142B !important; }
body[data-theme="white"] .setting-desc { color: #3D3D5C !important; }
body[data-theme="white"] .modal-title { color: #14142B !important; }
body[data-theme="white"] .modal-sub { color: #3D3D5C !important; }

/* ───── 사이드바 테마 dot — 화이트 점 ───── */
.theme-dot[data-theme="white"] {
  background: #FFFFFF !important;
  border: 1.5px solid #DDDDE2 !important;
}
.theme-dot[data-theme="white"].selected {
  border-color: #4F5388 !important;
  box-shadow: 0 0 0 2px rgba(79,83,136,0.20) !important;
}

/* ───── 화이트 모드 — 글래스/블러 제거 (불필요) ───── */
body[data-theme="white"] .sidebar,
body[data-theme="white"] .menu-sheet {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ───── 화이트 모드 — 호버 더 미세 ───── */
body[data-theme="white"] .cell:hover { transform: translateY(-1px) !important; }
body[data-theme="white"] .hbtn:hover { transform: translateY(-1px) scale(1.01) !important; }

/* ════════════════════════════════════════════════════════
   v2.6b (2026-05-20): 테마 dot 클릭 시 전체 배경·카드 색 변화 활성화
   - 원인: v2.5 무광 패치가 !important로 카드/사이드바 색 박아둠
   - 해결: 각 테마별 큼직한 배경·카드·사이드바 색을 더 강하게 덮어쓰기
   ════════════════════════════════════════════════════════ */

/* ───── 🤍 warm — 부드러운 크림 ───── */
body[data-theme="warm"] {
  background: #FFFBF3 !important;
}
body[data-theme="warm"] .main { background: #FFFBF3 !important; }
body[data-theme="warm"] .sidebar {
  background: #FFFEF8 !important;
  border-right: 1px solid #F2E8D5 !important;
}
body[data-theme="warm"] .cell:not([data-usercolor]) {
  background: #FFFFFF !important;
  border: 1px solid #F2E8D5 !important;
}
body[data-theme="warm"] .cell-hero:not([data-usercolor]),
body[data-theme="warm"] .cell-timer:not([data-usercolor]),
body[data-theme="warm"] .cell-weather-row:not([data-usercolor]) {
  background: #FFFDF8 !important;
  border: 1px solid #F2E8D5 !important;
}
body[data-theme="warm"] .mobile-nav { background: rgba(255,254,248,0.95) !important; border-top-color: #F2E8D5 !important; }

/* ───── 🌸 rose — 로즈 핑크 ───── */
body[data-theme="rose"] {
  background: #FDF6F5 !important;
}
body[data-theme="rose"] .main { background: #FDF6F5 !important; }
body[data-theme="rose"] .sidebar {
  background: #FFFAF9 !important;
  border-right: 1px solid #F2E0E0 !important;
}
body[data-theme="rose"] .cell:not([data-usercolor]) {
  background: #FFFFFF !important;
  border: 1px solid #F2E0E0 !important;
}
body[data-theme="rose"] .cell-hero:not([data-usercolor]),
body[data-theme="rose"] .cell-timer:not([data-usercolor]),
body[data-theme="rose"] .cell-weather-row:not([data-usercolor]) {
  background: #FFF8F6 !important;
  border: 1px solid #F2E0E0 !important;
}
body[data-theme="rose"] .mobile-nav { background: rgba(255,250,249,0.95) !important; border-top-color: #F2E0E0 !important; }

/* ───── 🍀 mint — 부드러운 민트 ───── */
body[data-theme="mint"] {
  background: #F2FAF6 !important;
}
body[data-theme="mint"] .main { background: #F2FAF6 !important; }
body[data-theme="mint"] .sidebar {
  background: #F8FCFA !important;
  border-right: 1px solid #DFF0E5 !important;
}
body[data-theme="mint"] .cell:not([data-usercolor]) {
  background: #FFFFFF !important;
  border: 1px solid #DFF0E5 !important;
}
body[data-theme="mint"] .cell-hero:not([data-usercolor]),
body[data-theme="mint"] .cell-timer:not([data-usercolor]),
body[data-theme="mint"] .cell-weather-row:not([data-usercolor]) {
  background: #F8FCFA !important;
  border: 1px solid #DFF0E5 !important;
}
body[data-theme="mint"] .mobile-nav { background: rgba(248,252,250,0.95) !important; border-top-color: #DFF0E5 !important; }

/* ───── 💜 lav — 라벤더 ───── */
body[data-theme="lav"] {
  background: #F6F4FB !important;
}
body[data-theme="lav"] .main { background: #F6F4FB !important; }
body[data-theme="lav"] .sidebar {
  background: #FAF8FD !important;
  border-right: 1px solid #E5DDF3 !important;
}
body[data-theme="lav"] .cell:not([data-usercolor]) {
  background: #FFFFFF !important;
  border: 1px solid #E5DDF3 !important;
}
body[data-theme="lav"] .cell-hero:not([data-usercolor]),
body[data-theme="lav"] .cell-timer:not([data-usercolor]),
body[data-theme="lav"] .cell-weather-row:not([data-usercolor]) {
  background: #FAF8FD !important;
  border: 1px solid #E5DDF3 !important;
}
body[data-theme="lav"] .mobile-nav { background: rgba(250,248,253,0.95) !important; border-top-color: #E5DDF3 !important; }

/* ───── ☁️ sky — 하늘 ───── */
body[data-theme="sky"] {
  background: #F2F7FC !important;
}
body[data-theme="sky"] .main { background: #F2F7FC !important; }
body[data-theme="sky"] .sidebar {
  background: #F8FBFE !important;
  border-right: 1px solid #D9E7F4 !important;
}
body[data-theme="sky"] .cell:not([data-usercolor]) {
  background: #FFFFFF !important;
  border: 1px solid #D9E7F4 !important;
}
body[data-theme="sky"] .cell-hero:not([data-usercolor]),
body[data-theme="sky"] .cell-timer:not([data-usercolor]),
body[data-theme="sky"] .cell-weather-row:not([data-usercolor]) {
  background: #F8FBFE !important;
  border: 1px solid #D9E7F4 !important;
}
body[data-theme="sky"] .mobile-nav { background: rgba(248,251,254,0.95) !important; border-top-color: #D9E7F4 !important; }

/* ───── 🤍 white (v2.6 정의 한 번 더 강화) ───── */
body[data-theme="white"] {
  background: #FFFFFF !important;
}
body[data-theme="white"] .main { background: #FFFFFF !important; }

/* ───── 🌙 dark — 빛수님이 옛 dark 보이게 (v2.5 잉크가 dark도 덮어써서 묻혔을 가능성 정리) ───── */
body[data-theme="dark"] {
  background: #0F172A !important;
}
body[data-theme="dark"] .main { background: #0F172A !important; }
body[data-theme="dark"] .sidebar {
  background: rgba(15,23,42,0.96) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
body[data-theme="dark"] .cell:not([data-usercolor]) {
  background: linear-gradient(135deg, #1E1B4B, #312E81) !important;
  border: 1px solid rgba(129,140,248,0.18) !important;
}

/* ───── 테마 dot — 색 미리보기 (실제 테마 색과 일치) ───── */
.theme-dot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; transition: transform 150ms, box-shadow 150ms; }
.theme-dot:hover { transform: scale(1.12); }

.theme-dot[data-theme="white"] {
  background: #FFFFFF !important;
  border: 1.5px solid #DDDDE2 !important;
}
.theme-dot[data-theme="warm"]  { background: #FFFBF3 !important; border: 1.5px solid #F2E8D5 !important; }
.theme-dot[data-theme="rose"]  { background: #FDF6F5 !important; border: 1.5px solid #F2E0E0 !important; }
.theme-dot[data-theme="mint"]  { background: #F2FAF6 !important; border: 1.5px solid #DFF0E5 !important; }
.theme-dot[data-theme="lav"]   { background: #F6F4FB !important; border: 1.5px solid #E5DDF3 !important; }
.theme-dot[data-theme="sky"]   { background: #F2F7FC !important; border: 1.5px solid #D9E7F4 !important; }
.theme-dot[data-theme="dark"]  { background: #1E1B4B !important; border: 1.5px solid #312E81 !important; }

.theme-dot.selected {
  box-shadow: 0 0 0 2px rgba(79,83,136,0.45) !important;
  transform: scale(1.10);
}

/* ───── 라이트 테마(white 외) 공통 — 사이드바 액티브/메뉴 명확 ───── */
body[data-theme="warm"] .sb-item.active,
body[data-theme="rose"] .sb-item.active,
body[data-theme="mint"] .sb-item.active,
body[data-theme="lav"]  .sb-item.active,
body[data-theme="sky"]  .sb-item.active {
  background: rgba(0,0,0,0.04) !important;
  color: #14142B !important;
}

/* ───── 라이트 5테마에서 사이드바 배경 잔재 제거 (v2.5의 흐릿한 글래스 제거) ───── */
body[data-theme="warm"] .sidebar,
body[data-theme="rose"] .sidebar,
body[data-theme="mint"] .sidebar,
body[data-theme="lav"]  .sidebar,
body[data-theme="sky"]  .sidebar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ════════════════════════════════════════════════════════
   v2.7 (2026-05-20): AI 요점 입력 영역 확장
   - 드래그앤드롭 영역, 텍스트 직접 입력 textarea, 다양한 파일 타입 안내
   ════════════════════════════════════════════════════════ */

.ai-input-section { padding: 18px !important; }

/* ───── 드롭존 ───── */
.ai-dropzone {
  border: 2px dashed #DDDDE2;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  background: #FAFAFB;
  transition: all 200ms ease;
  cursor: default;
}
.ai-dropzone.drag-over {
  border-color: #4F5388;
  background: rgba(79,83,136,0.05);
  transform: scale(1.01);
}
.ai-dropzone-emoji {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.7;
}
.ai-dropzone-text {
  font-size: 13px;
  color: #3D3D5C;
  margin-bottom: 12px;
  font-weight: 600;
}
.ai-dropzone-hint {
  font-size: 11px;
  color: #6E6E85;
  margin-top: 10px;
  font-weight: 500;
}

/* 다크 모드 */
body[data-theme="dark"] .ai-dropzone {
  border-color: rgba(199,199,229,0.20);
  background: rgba(255,255,255,0.03);
}
body[data-theme="dark"] .ai-dropzone.drag-over {
  border-color: #818CF8;
  background: rgba(129,140,248,0.10);
}
body[data-theme="dark"] .ai-dropzone-text { color: #E5E5F2; }
body[data-theme="dark"] .ai-dropzone-hint { color: #B8B8C8; }

/* ───── 구분자 "또는" ───── */
.ai-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: #6E6E85;
  font-size: 11px;
  font-weight: 600;
}
.ai-or-divider::before,
.ai-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ECECEF;
}
body[data-theme="dark"] .ai-or-divider { color: #B8B8C8; }
body[data-theme="dark"] .ai-or-divider::before,
body[data-theme="dark"] .ai-or-divider::after {
  background: rgba(199,199,229,0.15);
}

/* ───── 텍스트 입력 영역 ───── */
.ai-text-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-text-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #DDDDE2;
  background: #FFFFFF;
  color: #14142B;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
  transition: border-color 180ms, box-shadow 180ms;
  box-sizing: border-box;
}
.ai-text-input:focus {
  outline: none;
  border-color: #4F5388;
  box-shadow: 0 0 0 3px rgba(79,83,136,0.10);
}
.ai-text-input::placeholder {
  color: #A8A8BF;
  line-height: 1.5;
}
body[data-theme="dark"] .ai-text-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(199,199,229,0.20);
  color: #F2F2F8;
}
body[data-theme="dark"] .ai-text-input:focus {
  border-color: #818CF8;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.15);
}
body[data-theme="dark"] .ai-text-input::placeholder {
  color: #8888A0;
}

.ai-text-cta {
  align-self: center !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
}

/* ════════════════════════════════════════════════════════
   v2.8 (2026-05-20): 모바일 + 파일 선택 클릭 차단 / 푸터 겹침 fix
   - button onclick=input.click() → label[for] 로 교체됨 (app.js)
   - label도 button과 동일하게 보이도록 보강
   - 드롭존에 z-index, 카드 영역 명확화
   - 모바일에서 푸터-카드 분리 강화
   ════════════════════════════════════════════════════════ */

/* label도 .ai-cta button과 동일하게 보이도록 (display, cursor, 정렬) */
.ai-file-label {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(79,83,136,0.15);
  text-align: center;
  line-height: 1.3;
  text-decoration: none;
}
.ai-file-label:active {
  transform: translateY(0) scale(0.98);
}

/* 드롭존 자체에 stacking context 부여 — 푸터/탭바가 위에 겹치는 것 방지 */
.ai-dropzone {
  position: relative;
  z-index: 2;
}
.ai-real-wrap {
  position: relative;
  z-index: 1;
}

/* 푸터를 카드 영역과 명확히 분리 — 모바일 시 카드 위로 침범하지 않게 */
.app-footer {
  position: relative;
  z-index: 0;
  background: transparent;
}

/* 모바일 (768px 이하) — 푸터와 카드 사이 충분한 간격 확보 */
@media (max-width: 768px) {
  .app-footer {
    margin-top: 36px !important;
    padding-top: 24px !important;
    /* 하단 탭바 위에 푸터가 올라가지 않도록 padding-bottom은 .main 쪽에서 처리됨 */
  }
  .ai-real-wrap {
    margin-bottom: 12px;
  }
  /* + 파일 선택 라벨 모바일에서 더 크게 (탭 영역 확보) */
  .ai-file-label {
    padding: 10px 22px !important;
    font-size: 13px !important;
    min-width: 120px;
    min-height: 44px;             /* iOS HIG 권장 최소 탭 영역 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════
   v2.9 (2026-05-20): 인앱브라우저 안내 배너 + 이메일 로그인 모달
   ════════════════════════════════════════════════════════ */

/* ───── 인앱브라우저 안내 배너 ───── */
.iab-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(135deg, #FFF4D9, #FFE9B3);
  border-bottom: 1px solid #E5C97A;
  color: #5C4A12;
  font-size: 13px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.iab-banner.hidden { display: none; }
.iab-icon { font-size: 18px; flex-shrink: 0; }
.iab-msg { flex: 1 1 200px; line-height: 1.5; }
.iab-msg b { font-weight: 800; color: #3D2E00; }
.iab-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.iab-btn {
  background: rgba(255,255,255,0.85);
  border: 1px solid #D4B860;
  color: #5C4A12;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.iab-btn:hover { background: #fff; }
.iab-btn-primary {
  background: #6B5A20;
  color: #FFF7DE;
  border-color: #6B5A20;
}
.iab-btn-primary:hover { background: #5C4A12; }
.iab-close {
  background: transparent;
  border: none;
  color: #5C4A12;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.iab-close:hover { background: rgba(0,0,0,0.06); }

/* 다크모드 — 인앱 배너 */
body[data-theme="dark"] .iab-banner {
  background: linear-gradient(135deg, #2E2616, #3E3520);
  border-bottom-color: #5C4A20;
  color: #FFE9B3;
}
body[data-theme="dark"] .iab-msg b { color: #FFF4D9; }
body[data-theme="dark"] .iab-btn {
  background: rgba(255,255,255,0.06);
  border-color: #6B5A20;
  color: #FFE9B3;
}
body[data-theme="dark"] .iab-btn:hover { background: rgba(255,255,255,0.10); }
body[data-theme="dark"] .iab-btn-primary {
  background: #B89A50;
  color: #1A1A2E;
  border-color: #B89A50;
}
body[data-theme="dark"] .iab-close { color: #FFE9B3; }

/* 모바일 — 인앱 배너 컴팩트 */
@media (max-width: 480px) {
  .iab-banner {
    font-size: 12px;
    padding: 8px 12px;
    gap: 8px;
  }
  .iab-msg { flex: 1 1 100%; }
  .iab-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  .iab-btn { font-size: 11px; padding: 6px 9px; }
}

/* ───── 사이드바 이메일 로그인 버튼 (Google 옆) ───── */
.sb-login-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-login-btn.sb-login-email {
  background: #FFFFFF;
  border: 1.5px solid #DDDDE2;
}
.sb-login-btn.sb-login-email:hover {
  background: #F4F4F8;
  border-color: #B8B8C8;
}
.sb-g-mark-email {
  background: #4F5388 !important;
  color: #FFFFFF !important;
}
body[data-theme="dark"] .sb-login-btn.sb-login-email {
  background: rgba(255,255,255,0.06);
  border-color: rgba(199,199,229,0.20);
  color: #E5E5F2;
}
body[data-theme="dark"] .sb-login-btn.sb-login-email:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(199,199,229,0.30);
}
body[data-theme="dark"] .sb-g-mark-email {
  background: #818CF8 !important;
  color: #1A1A2E !important;
}

/* ───── 로그인 모달 ───── */
.login-modal-card {
  max-width: 400px !important;
  padding: 28px 26px !important;
}
.login-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1.5px solid #DDDDE2;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: #14142B;
  cursor: pointer;
  margin: 18px 0 14px;
  transition: all 180ms ease;
}
.login-google-btn:hover {
  background: #F4F4F8;
  border-color: #B8B8C8;
  transform: translateY(-1px);
}
.login-google-btn .sb-g-mark {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #4285F4, #34A853);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: #A8A8BF;
  font-size: 11px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ECECEF;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.login-form input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid #DDDDE2;
  background: #FFFFFF;
  color: #14142B;
  font-family: var(--sans);
  font-size: 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.login-form input:focus {
  outline: none;
  border-color: #4F5388;
  box-shadow: 0 0 0 3px rgba(79,83,136,0.10);
}
.login-form input::placeholder {
  color: #A8A8BF;
}
.login-err {
  background: #FEEEE8;
  color: #8C2A12;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #F5C9BB;
  line-height: 1.5;
}
.login-err.hidden { display: none; }
.login-submit {
  margin-top: 4px;
  padding: 12px 18px;
  background: #4F5388;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}
.login-submit:hover {
  background: #3F4376;
  transform: translateY(-1px);
}
.login-switch {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
}
.login-link {
  background: transparent;
  border: none;
  color: #4F5388;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-link:hover { color: #2D2D52; }
.modal-close-btn {
  margin-top: 16px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid #DDDDE2;
  color: #6E6E85;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.modal-close-btn:hover {
  background: #F4F4F8;
  border-color: #B8B8C8;
}

/* 다크모드 — 로그인 모달 */
body[data-theme="dark"] .login-google-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(199,199,229,0.20);
  color: #F2F2F8;
}
body[data-theme="dark"] .login-google-btn:hover {
  background: rgba(255,255,255,0.10);
}
body[data-theme="dark"] .login-divider { color: #8888A0; }
body[data-theme="dark"] .login-divider::before,
body[data-theme="dark"] .login-divider::after {
  background: rgba(199,199,229,0.18);
}
body[data-theme="dark"] .login-form input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(199,199,229,0.20);
  color: #F2F2F8;
}
body[data-theme="dark"] .login-form input:focus {
  border-color: #818CF8;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.18);
}
body[data-theme="dark"] .login-form input::placeholder {
  color: #8888A0;
}
body[data-theme="dark"] .login-err {
  background: rgba(220,38,38,0.12);
  color: #FCA5A5;
  border-color: rgba(220,38,38,0.30);
}
body[data-theme="dark"] .login-submit {
  background: linear-gradient(135deg, #6366F1, #818CF8);
}
body[data-theme="dark"] .login-submit:hover {
  background: linear-gradient(135deg, #4F46E5, #6366F1);
}
body[data-theme="dark"] .login-link {
  color: #C7D2FE;
}
body[data-theme="dark"] .login-link:hover {
  color: #FFFFFF;
}
body[data-theme="dark"] .modal-close-btn {
  border-color: rgba(199,199,229,0.18);
  color: #C8C8D8;
}
body[data-theme="dark"] .modal-close-btn:hover {
  background: rgba(255,255,255,0.06);
}

/* 화이트 테마 — 로그인 모달 */
body[data-theme="white"] .login-submit {
  background: #4F5388 !important;
}
body[data-theme="white"] .login-submit:hover {
  background: #3F4376 !important;
}

/* 모바일 — 모달 패딩 컴팩트 */
@media (max-width: 480px) {
  .login-modal-card {
    padding: 22px 18px !important;
    max-width: 92vw !important;
  }
  .login-form input {
    font-size: 16px;          /* iOS Safari 자동 확대 방지 */
  }
  .login-switch {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
}

/* ════════════════════════════════════════════════════════
   v2.9.1 (2026-05-20): 익명(Anonymous) 로그인 + 계정 연결
   - 사이드바 "둘러보기" 버튼
   - 게스트 모드 안내 배너 (사이드바 하단)
   - 로그인 모달 안 게스트 버튼
   - 계정 연결 모달
   ════════════════════════════════════════════════════════ */

/* ───── 사이드바 둘러보기 버튼 ───── */
.sb-login-btn.sb-login-guest {
  background: #FAFAFB;
  border: 1.5px dashed #DDDDE2;
}
.sb-login-btn.sb-login-guest:hover {
  background: #F4F4F8;
  border-color: #B8B8C8;
  border-style: solid;
}
.sb-g-mark-guest {
  background: #F1F1F5 !important;
  color: #4F5388 !important;
  border: 1px solid #DDDDE2;
}
body[data-theme="dark"] .sb-login-btn.sb-login-guest {
  background: rgba(255,255,255,0.03);
  border-color: rgba(199,199,229,0.18);
  color: #C8C8D8;
}
body[data-theme="dark"] .sb-login-btn.sb-login-guest:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(199,199,229,0.30);
}
body[data-theme="dark"] .sb-g-mark-guest {
  background: rgba(255,255,255,0.10) !important;
  color: #C7D2FE !important;
  border-color: rgba(199,199,229,0.18);
}

/* ───── 게스트 모드 안내 배너 (사이드바 하단) ───── */
.sb-guest-notice {
  margin: 12px 14px 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF8E1, #FFF4C5);
  border: 1px solid #E8C870;
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #5C4A12;
}
.sb-guest-notice.hidden { display: none; }
.sb-guest-icon {
  font-size: 18px;
  margin-bottom: 4px;
}
.sb-guest-text { margin-bottom: 8px; }
.sb-guest-text b { color: #3D2E00; font-weight: 800; }
.sb-guest-link-btn {
  width: 100%;
  padding: 8px 10px;
  background: #6B5A20;
  color: #FFF7DE;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease;
}
.sb-guest-link-btn:hover { background: #5C4A12; }
body[data-theme="dark"] .sb-guest-notice {
  background: linear-gradient(135deg, #2E2616, #3E3520);
  border-color: #5C4A20;
  color: #FFE9B3;
}
body[data-theme="dark"] .sb-guest-text b { color: #FFF4D9; }
body[data-theme="dark"] .sb-guest-link-btn {
  background: #B89A50;
  color: #1A1A2E;
}
body[data-theme="dark"] .sb-guest-link-btn:hover { background: #C9AB60; }

/* ───── 로그인 모달 안 "둘러보기" 버튼 ───── */
.login-guest-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 12px 16px;
  background: #FAFAFB;
  border: 1.5px dashed #DDDDE2;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: #14142B;
  cursor: pointer;
  transition: all 180ms ease;
}
.login-guest-btn:hover {
  background: #F4F4F8;
  border-color: #B8B8C8;
  border-style: solid;
  transform: translateY(-1px);
}
.login-guest-sub {
  font-size: 11px;
  font-weight: 500;
  color: #6E6E85;
}
body[data-theme="dark"] .login-guest-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(199,199,229,0.18);
  color: #F2F2F8;
}
body[data-theme="dark"] .login-guest-btn:hover {
  background: rgba(255,255,255,0.08);
}
body[data-theme="dark"] .login-guest-sub {
  color: #8888A0;
}