/* ═══════════════════════════════════════════════════════════
 *  시움허브 콘솔 스타일
 *
 *  ★ 이 파일은 siumhub-design.html(과장님 확정 설계안)에서
 *    그대로 옮겨온 것이다. 손으로 새로 쓴 것이 아니다.
 *    원본: siumhub-design.html 14~604줄
 *
 *  색·글씨·간격을 바꾸려면 맨 위 :root 블록의 값만 고친다.
 * ═══════════════════════════════════════════════════════════ */

/* ═══ SIUM Hub 디자인 토큰 — 서버 구현 시 이 블록을 그대로 쓰십시오 ═══ */
:root{
  --ground:#F3F5F8;
  --surface:#FFFFFF;
  --surface-2:#EEF1F6;
  --line:#E1E6EE;
  --line-2:#CFD6E2;
  --ink:#141B2B;
  --ink-2:#525C71;
  --ink-3:#8A93A6;

  --navy-1:#0E1729;      /* 배너 왼쪽 */
  --navy-2:#1B2B4A;      /* 배너 오른쪽 */
  --navy-glow:#2E4E86;   /* 배너 위 은은한 빛 */
  --on-navy:#EAEEF6;
  --on-navy-2:#A9B5CC;

  --accent:#26518F;
  --accent-2:#1B3D70;
  --accent-soft:#E7EDF7;

  --b1:#31659E; --b1-soft:#E8EFF7;   /* 블로그 */
  --b2:#9B6A3C; --b2-soft:#F5EDE3;   /* 쇼핑 제휴 */
  --b3:#2A7370; --b3-soft:#E4F0EF;   /* 여행 제휴 */
  --b4:#5E5590; --b4-soft:#ECEAF5;   /* SNS */

  --crit:#B03F3F; --crit-soft:#F9EAEA;
  --warn:#8E6524; --warn-soft:#F7F0E2;
  --idle:#AEB6C4;

  --r:12px;
  --r-lg:16px;
  --shadow:0 1px 2px rgba(20,27,43,.05), 0 2px 10px rgba(20,27,43,.05);
  --shadow-lift:0 2px 4px rgba(20,27,43,.06), 0 12px 26px rgba(20,27,43,.10);
  --grad-banner:linear-gradient(118deg,var(--navy-1) 0%,var(--navy-2) 58%,var(--navy-glow) 130%);
  --grad-btn:linear-gradient(180deg,#2F5F9F 0%,var(--accent) 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C111C; --surface:#141B29; --surface-2:#1B2333; --line:#26304332; --line:#263043; --line-2:#333F55;
    --ink:#E8ECF4; --ink-2:#A2ACC0; --ink-3:#727D93;
    --navy-1:#070C16; --navy-2:#131E34; --navy-glow:#26406C;
    --on-navy:#E8ECF4; --on-navy-2:#98A5BE;
    --accent:#5A8FD8; --accent-2:#7BA9E6; --accent-soft:#182741;
    --b1:#6C9BD0; --b1-soft:#18253A;
    --b2:#C79B6C; --b2-soft:#2A2119;
    --b3:#5FA5A1; --b3-soft:#152927;
    --b4:#948AC8; --b4-soft:#211E33;
    --crit:#D97A7A; --crit-soft:#2C1A1A;
    --warn:#C79A56; --warn-soft:#2A2317;
    --idle:#59637A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
    --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.4);
    --grad-btn:linear-gradient(180deg,#3E6FB4 0%,#2A5390 100%);
  }
}
:root[data-theme="dark"]{
  --ground:#0C111C; --surface:#141B29; --surface-2:#1B2333; --line:#263043; --line-2:#333F55;
  --ink:#E8ECF4; --ink-2:#A2ACC0; --ink-3:#727D93;
  --navy-1:#070C16; --navy-2:#131E34; --navy-glow:#26406C;
  --on-navy:#E8ECF4; --on-navy-2:#98A5BE;
  --accent:#5A8FD8; --accent-2:#7BA9E6; --accent-soft:#182741;
  --b1:#6C9BD0; --b1-soft:#18253A;
  --b2:#C79B6C; --b2-soft:#2A2119;
  --b3:#5FA5A1; --b3-soft:#152927;
  --b4:#948AC8; --b4-soft:#211E33;
  --crit:#D97A7A; --crit-soft:#2C1A1A;
  --warn:#C79A56; --warn-soft:#2A2317;
  --idle:#59637A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.4);
  --grad-btn:linear-gradient(180deg,#3E6FB4 0%,#2A5390 100%);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans KR",-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  font-size:15px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em;
}
.mono{font-family:"IBM Plex Mono","IBM Plex Sans KR",monospace;font-variant-numeric:tabular-nums}
.label{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* 설계안 전용 전환 */
.switcher{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
  display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:4px;box-shadow:var(--shadow-lift);
}
.switcher button{
  appearance:none;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;color:var(--ink-3);padding:6px 14px;border-radius:7px;
}
.switcher button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);font-weight:500}
.switcher button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═══ 로그인 ═══ */
.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:var(--grad-banner);position:relative;overflow:hidden;
}
/* 배경 워터마크 이니셜 */
.wm{position:absolute;inset:0;pointer-events:none;user-select:none;overflow:hidden}
.wm span{
  position:absolute;font-weight:600;letter-spacing:-.04em;line-height:1;
  color:#fff;opacity:.14;white-space:nowrap;
}
.wm .w1{font-size:clamp(95px,22vw,268px);top:4%;left:2%}
.wm .w2{font-size:clamp(85px,19.5vw,238px);top:15%;right:2%}
.wm .w3{font-size:clamp(85px,19.5vw,238px);bottom:14%;left:3%}
@media(max-width:640px){
  .wm .w1{font-size:88px;top:3%;left:4%}
  .wm .w2{font-size:78px;top:13%;right:4%}
  .wm .w3{font-size:78px;bottom:12%;left:4%}
}
.wm .ring{
  position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;
  width:min(72vw,720px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);
}
.wm .ring.r2{width:min(52vw,520px);border-color:rgba(255,255,255,.09)}

.login-stack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px}
.members-only{
  display:inline-flex;align-items:center;gap:clamp(12px,2.4vw,22px);
  font-size:clamp(20px,3.4vw,34px);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.82);text-align:center;line-height:1.2;
}
.members-only::before,.members-only::after{
  content:"";width:clamp(26px,5vw,66px);height:1px;background:rgba(255,255,255,.32);flex:none;
}
.login{
  width:100%;max-width:372px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 20px 56px rgba(7,12,22,.38);
  padding:40px 36px 30px;
}
.login .logo{display:flex;align-items:center;gap:13px;justify-content:center}
.login .logo svg{width:38px;height:38px}
.login h1{margin:0;font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.login .tagline{margin:12px 0 28px;font-size:13.5px;color:var(--ink-3);text-align:center}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.field input{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.login .btn{width:100%;margin-top:12px;justify-content:center}
.login .foot{margin:20px 0 0;font-size:12px;color:var(--ink-3);line-height:1.65;text-align:center}

/* 멤버 이니셜 줄 */
.members{display:flex;align-items:center;gap:10px}
.mem{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(4px);
}
.mem.me{background:rgba(127,227,192,.16);border-color:rgba(127,227,192,.45);color:#BFF3E0}

/* ═══ 배너 헤더 ═══ */
.banner{background:var(--grad-banner);position:relative;overflow:hidden}
.banner::after{
  content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(120,170,255,.20) 0%,rgba(120,170,255,0) 68%);
  pointer-events:none;
}
.banner-in{
  max-width:1040px;margin:0 auto;padding:38px 22px 34px;position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.banner .brand{
  grid-column:2;display:flex;align-items:center;gap:16px;justify-self:center;
  font-size:clamp(34px,7.6vw,84px);font-weight:600;letter-spacing:-.03em;
  line-height:1.05;color:var(--on-navy);
}
.banner .brand svg{width:1em;height:1em;flex:none}
.banner .brand svg{color:#7FE3C0 !important}
.banner .corner{
  grid-column:3;justify-self:end;align-self:center;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.chipbox{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;padding:6px 12px;font-size:12.5px;color:var(--on-navy);
  white-space:nowrap;backdrop-filter:blur(4px);
}
.chipbox.date{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--on-navy-2)}
.face{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.16);color:var(--on-navy);
  display:grid;place-items:center;font-size:10px;font-weight:600;flex:none;
}
.login .face{background:var(--accent-soft);color:var(--accent)}
.logout{
  appearance:none;border:1px solid rgba(255,255,255,.22);background:transparent;cursor:pointer;
  font:inherit;font-size:12px;color:var(--on-navy-2);border-radius:6px;padding:3px 9px;margin-left:2px;
}
.logout:hover{border-color:rgba(255,255,255,.5);color:#fff}
.logout:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:720px){
  .banner-in{grid-template-columns:1fr;justify-items:center;gap:14px;padding:22px 18px}
  .banner .brand{grid-column:1}
  .banner .corner{grid-column:1;justify-self:center;flex-direction:row;flex-wrap:wrap;justify-content:center}
}

main{max-width:1040px;margin:0 auto;padding:34px 22px 100px}

.head{margin-bottom:26px}
.head h1{margin:6px 0 0;font-size:26px;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.head p{margin:6px 0 0;font-size:14.5px;color:var(--ink-3)}


/* ═══ 숙제 처리량 게이지 ═══ */
.gauge{
  background:var(--surface);border:2px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 22px;margin-bottom:22px;
}
.gauge-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.gauge-pick{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:5px 9px;
}
.gauge-pick input[type="date"]{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--ink);background:transparent;border:0;padding:2px 0;cursor:pointer;
}
.gauge-pick input[type="date"]:focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.gauge-pick .today{
  appearance:none;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
  font:inherit;font-size:11.5px;color:var(--ink-2);border-radius:5px;padding:2px 8px;
}
.gauge-pick .today:hover{border-color:var(--accent);color:var(--accent)}
.gauge-pick .today:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gauge-title{font-size:27px;font-weight:600;letter-spacing:-.026em}
.gauge-sub{font-size:12.5px;color:var(--ink-3)}
.gauge-count{display:flex;justify-content:flex-end;margin-bottom:6px}
.gauge-num{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:15px;color:var(--ink-2);
}
.gauge-num b{font-size:30px;font-weight:600;color:var(--accent);letter-spacing:-.02em}
.segs{display:flex;gap:2px;height:20px}
.seg{flex:1;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.seg.on{
  background:linear-gradient(180deg,#3B71B4 0%,var(--accent) 100%);
  box-shadow:inset 0 0 0 1px var(--accent-2);
}
.seg:first-child{border-radius:5px 3px 3px 5px}
.seg:last-child{border-radius:3px 5px 5px 3px}
.gauge-foot{margin:11px 0 0;font-size:12.5px;color:var(--ink-3)}
.gauge-foot b{color:var(--ink-2);font-weight:600}



/* 성장 그림 색 */
.pot,.m-pot,.seed-ico,.stage svg{
  --gr1:#4E9A5F; --gr2:#3B7A4A; --gr3:#6FB47E; --tr1:#8A6742;
  --fl1:#E48AA8; --fl2:#F3D46B; --fl3:#EFA6BE; --fr1:#D6584A;
  --glow:#F2C14E; --spark:#FFE58A;
}
.ln path{stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;opacity:.28;fill:none}

/* ═══ 씨앗 성장 ═══ */
.gauge-bottom{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:11px}
.gauge-foot{margin:0;font-size:12.5px;color:var(--ink-3);flex:1;min-width:200px}
.seed-btn{
  appearance:none;cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;gap:11px;
  border:1px solid var(--line-2);border-radius:10px;padding:8px 14px 8px 10px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  color:var(--ink);text-align:left;
}
.seed-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.seed-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seed-ico{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--accent-soft);color:var(--accent);
}
.seed-ico svg{width:24px;height:24px}
.seed-txt{display:flex;flex-direction:column;line-height:1.3}
.seed-txt b{font-size:13.5px;font-weight:600}
.seed-txt span{font-size:11.5px;color:var(--ink-3)}
.seed-arrow{color:var(--ink-3);font-size:14px}
.seed-btn:hover .seed-arrow{color:var(--accent)}

/* ═══ 1년 정원 ═══ */
.year-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;
}
.year-stat{
  display:flex;gap:20px;margin-left:auto;
}
.year-stat span{text-align:right}
.year-stat b{
  display:block;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:600;color:var(--accent);line-height:1.2;
}
.year-stat i{font-style:normal;font-size:11.5px;color:var(--ink-3)}

.year-block{margin-bottom:26px}
.year-title{
  display:flex;align-items:baseline;gap:11px;margin-bottom:12px;
}
.year-title h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.022em}
.year-title span{font-size:12.5px;color:var(--ink-3)}
.garden{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.month{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow);padding:16px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.month .m-pot{
  width:76px;height:76px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);color:var(--accent);
}
.month .m-pot svg{width:56px;height:56px}
.month .m-name{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.month .m-stage{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:1px 9px;
}
.month.future .m-stage{background:var(--surface-2);color:var(--ink-3)}
.month.bloom .m-stage{background:#F6EDD6;color:#9A6E1E}
.month .m-rate{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--ink-3);
}
.month.bloom{border-color:var(--accent);box-shadow:var(--shadow-lift)}
.month.bloom .m-pot{background:linear-gradient(180deg,#F6EDD6 0%,var(--accent-soft) 100%);color:#C08A2E}
.month.bloom .m-rate{color:var(--accent);font-weight:600}
.month.now{border:2px solid var(--accent);border-style:dashed}
.month.now .m-name::after{content:" · 진행중";font-weight:400;color:var(--accent);font-size:11.5px}
.month.future{opacity:.5;box-shadow:none}
.month.future .m-pot{background:var(--surface-2);position:relative}
.month.future .m-pot svg{display:none}
.month.future .m-pot::after{
  content:"?";font-size:26px;font-weight:600;color:var(--ink-3);opacity:.55;
}

.now-stage{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:22px;background:var(--surface);border:2px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:20px;
}
.now-pot{
  width:112px;height:112px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);
}
.now-pot svg{width:82px;height:82px}
.now-info{flex:1;min-width:180px}
.now-n{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:.08em;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:2px 10px;
}
.now-t{display:block;margin-top:8px;font-size:26px;font-weight:600;letter-spacing:-.025em}
.now-d{margin:6px 0 0;font-size:13.5px;color:var(--ink-3)}
.now-next{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 22px;border:1.5px dashed var(--line-2);border-radius:14px;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,transparent 6px 12px);
}
.now-next .q{
  width:64px;height:64px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);
  font-size:30px;font-weight:600;color:var(--ink-3);
}
.now-next-t{font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}
@media(max-width:560px){
  .now-stage{justify-content:center;text-align:center}
  .now-info{text-align:center}
}

/* ═══ 1년 정원 ═══ */
.year-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;
}
.year-stat{
  display:flex;gap:20px;margin-left:auto;
}
.year-stat span{text-align:right}
.year-stat b{
  display:block;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:600;color:var(--accent);line-height:1.2;
}
.year-stat i{font-style:normal;font-size:11.5px;color:var(--ink-3)}

.year-block{margin-bottom:26px}
.year-title{
  display:flex;align-items:baseline;gap:11px;margin-bottom:12px;
}
.year-title h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.022em}
.year-title span{font-size:12.5px;color:var(--ink-3)}
.garden{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.month{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow);padding:16px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.month .m-pot{
  width:76px;height:76px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);color:var(--accent);
}
.month .m-pot svg{width:56px;height:56px}
.month .m-name{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.month .m-stage{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:1px 9px;
}
.month.future .m-stage{background:var(--surface-2);color:var(--ink-3)}
.month.bloom .m-stage{background:#F6EDD6;color:#9A6E1E}
.month .m-rate{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--ink-3);
}
.month.bloom{border-color:var(--accent);box-shadow:var(--shadow-lift)}
.month.bloom .m-pot{background:linear-gradient(180deg,#F6EDD6 0%,var(--accent-soft) 100%);color:#C08A2E}
.month.bloom .m-rate{color:var(--accent);font-weight:600}
.month.now{border:2px solid var(--accent);border-style:dashed}
.month.now .m-name::after{content:" · 진행중";font-weight:400;color:var(--accent);font-size:11.5px}
.month.future{opacity:.5;box-shadow:none}
.month.future .m-pot{background:var(--surface-2);position:relative}
.month.future .m-pot svg{display:none}
.month.future .m-pot::after{
  content:"?";font-size:26px;font-weight:600;color:var(--ink-3);opacity:.55;
}

.stages{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;
  padding:16px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:20px;
}
.stage{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 4px;border-radius:9px;border:1px solid transparent;
}
.stage svg{width:42px;height:42px}
.stage .st-n{
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);
  letter-spacing:.04em;
}
.stage .st-t{font-size:11.5px;color:var(--ink-3)}
.stage.done{background:var(--surface);border-color:var(--line)}
.stage.done .st-t{color:var(--ink-2);font-weight:500}
.stage.done .st-n{color:var(--accent)}
.stage.now{background:var(--accent-soft);border-color:var(--accent)}
.stage.now .st-t{color:var(--accent);font-weight:600}
.stage.now .st-n{color:var(--accent)}
.stage.future{opacity:.42}
.stage.final{background:linear-gradient(180deg,#FBF3DF 0%,var(--surface) 100%);border-color:#E3C57E}
:root[data-theme="dark"] .stage.final{background:linear-gradient(180deg,#2E2718 0%,var(--surface) 100%);border-color:#6B5A2E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage.final{background:linear-gradient(180deg,#2E2718 0%,var(--surface) 100%);border-color:#6B5A2E}}
@media(max-width:520px){.stage svg{width:34px;height:34px}}

/* ═══ 과제 타일 ═══ */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:14px}
.tile{
  appearance:none;font:inherit;text-align:left;cursor:pointer;
  border:2px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface) 62%,var(--surface-2) 100%);
  box-shadow:var(--shadow);padding:20px;min-height:196px;
  display:flex;flex-direction:column;position:relative;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.tile:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);border-color:var(--accent)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.emo{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-size:19px;margin-bottom:14px;
}
.tile.t1 .emo{background:var(--b1-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b1) 20%,transparent)}
.tile.t2 .emo{background:var(--b2-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b2) 20%,transparent)}
.tile.t3 .emo{background:var(--b3-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b3) 20%,transparent)}
.tile.t4 .emo{background:var(--b4-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b4) 20%,transparent)}
.tile-name{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.tile-meta{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.tile-foot{
  margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-3);
}
.pill{display:inline-flex;align-items:center;gap:6px}
.pill.bad{color:var(--crit);font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;background:var(--idle);flex:none}
.pill.bad .dot{background:var(--crit)}
.sep{color:var(--line-2)}

.tile.empty{
  border-style:dashed;border-color:var(--line-2);background:none;box-shadow:none;color:var(--ink-3);
  align-items:center;justify-content:center;text-align:center;gap:7px;font-size:13.5px;
}
.tile.empty:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:none;box-shadow:none}
.tile.empty .plus{font-size:20px;line-height:1;font-weight:300}


/* 타일 안 미니 게이지 */
.mini-gauge{margin-top:12px}
.mini-top{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.mini-label{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink-3)}
.mini-num{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--ink-2);
}
.mini-num b{font-weight:600;color:var(--ink)}
.segs.sm{height:10px;gap:2px}
.segs.sm .seg{border-radius:2px}
.segs.sm .seg:first-child{border-radius:4px 2px 2px 4px}
.segs.sm .seg:last-child{border-radius:2px 4px 4px 2px}
.tile.t1 .seg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--b1) 78%,#fff) 0%,var(--b1) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b1) 70%,#000)}
.tile.t2 .seg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--b2) 78%,#fff) 0%,var(--b2) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b2) 70%,#000)}
.tile.t3 .seg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--b3) 78%,#fff) 0%,var(--b3) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b3) 70%,#000)}
.tile.t4 .seg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--b4) 78%,#fff) 0%,var(--b4) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--b4) 70%,#000)}
.segs.sm .seg.none{background:repeating-linear-gradient(135deg,var(--surface-2) 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1px var(--line)}

/* ═══ 과제 안쪽 ═══ */
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;font-size:13px;color:var(--ink-3)}
.back{
  appearance:none;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
  font:inherit;font-size:13px;color:var(--ink-2);border-radius:8px;padding:5px 12px;
}
.back:hover{border-color:var(--accent);color:var(--accent)}
.back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px;margin-bottom:14px;
}
.card > h2{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.card > .hint{margin:5px 0 18px;font-size:13px;color:var(--ink-3)}

.chan{padding:16px 0;border-top:1px solid var(--line)}
.chan:first-of-type{border-top:0;padding-top:0}
.chan-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.chan-name{font-size:14px;font-weight:500}
.adapter{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;
}
.can{font-size:12px;color:var(--ink-3);margin-left:auto}
.accounts{display:flex;flex-wrap:wrap;gap:8px}
.acct{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:9px;padding:9px 13px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
}
.acct.crit{border-color:var(--crit);background:var(--crit-soft)}
.acct.crit .dot{background:var(--crit)}
.acct.warn{border-color:var(--warn);background:var(--warn-soft)}
.acct.warn .dot{background:var(--warn)}
.acct.off{border-style:dashed;opacity:.55;background:none}
.acct-name{font-size:13.5px;font-weight:500}
.acct-url{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}

/* 버튼 */
.btn{
  appearance:none;border:1px solid var(--accent-2);cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:500;color:#fff;
  background:var(--grad-btn);border-radius:9px;padding:11px 22px;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 1px 2px rgba(20,27,43,.18);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{filter:brightness(.96)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.add{
  appearance:none;cursor:pointer;font:inherit;font-size:13.5px;
  border:1px dashed var(--line-2);background:none;color:var(--ink-3);
  border-radius:9px;padding:12px;width:100%;margin-top:16px;
}
.add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.note{
  margin-top:28px;padding:15px 18px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);line-height:1.7;
}
.note b{color:var(--ink-2);font-weight:600}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}