@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');
/* ==========================================================================
 * HUB — 공통 디자인 시스템 (로즈)
 *   1) 토큰       : 모든 화면이 같은 색·간격·모서리를 쓰게 합니다
 *   2) 셸         : 상단 탭 · 좌측 패널 · 좌우 여백
 *   3) 페이지 이식 : 기존 페이지가 쓰던 옛 변수들을 로즈로 갈아 끼웁니다
 * ======================================================================= */

/* ---------- 1. 토큰 ---------------------------------------------------- */
:root{
  --h-ground:#e7f0f9;
  --h-ground-2:#dbe7f4;
  --h-card:#ffffff;
  --h-card-2:#f4f8fd;
  --h-card-3:#e9f1fa;

  --h-ink:#33393f;
  --h-ink-2:#69747f;
  --h-ink-3:#96a2ad;

  --h-line:#e0e9f3;
  --h-line-2:#cbdcec;

  --h-acc:#7ab3e0;          /* 레퍼런스 탭 자리의 색 */
  --h-acc-2:#4f95cd;        /* 글자용, 조금 더 진하게 */
  --h-acc-3:#3679ae;
  --h-acc-soft:#e6f1fa;
  --h-acc-line:#cde3f5;
  --h-on-acc:#ffffff;

  --h-warm:#c9a15e;   --h-warm-soft:#faf1e2;
  --h-cool:#8b83c4;   --h-cool-soft:#f0eff8;
  --h-good:#5fa9a2;   --h-good-soft:#e6f3f1;

  --h-r:14px;         /* 카드 */
  --h-r-2:10px;       /* 컨트롤 */
  --h-r-3:7px;        /* 작은 조각 */

  --h-sh:0 1px 2px rgba(90,120,150,.06), 0 10px 26px -18px rgba(60,95,130,.28);
  --h-sh-2:0 2px 6px rgba(90,120,150,.08), 0 18px 40px -24px rgba(60,95,130,.32);

  --h-sans:"SUIT Variable","SUIT",-apple-system,BlinkMacSystemFont,
           "Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --h-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,monospace;

  --h-nav:54px;
  --h-max:1720px;
  --h-side:296px;
  --h-gut:max(clamp(16px, 4.5vw, 120px), calc((100vw - var(--h-max)) / 2));
}
html[data-hub-theme="dark"]{
  --h-ground:#101519;
  --h-ground-2:#161d23;
  --h-card:#1b232a;
  --h-card-2:#212b33;
  --h-card-3:#28333c;

  --h-ink:#e8eef4;
  --h-ink-2:#a2b0bd;
  --h-ink-3:#7b8895;

  --h-line:#2b3740;
  --h-line-2:#374854;

  --h-acc:#6ea8d8;
  --h-acc-2:#8dc0e8;
  --h-acc-3:#abd3f2;
  --h-acc-soft:#1e2f3d;
  --h-acc-line:#2b4257;
  --h-on-acc:#0f1a22;

  --h-warm:#d9b579;   --h-warm-soft:#33291c;
  --h-cool:#a49bd8;   --h-cool-soft:#252336;
  --h-good:#78bdb5;   --h-good-soft:#1b2e2c;

  --h-sh:0 1px 2px rgba(0,0,0,.30), 0 10px 26px -18px rgba(0,0,0,.66);
  --h-sh-2:0 2px 6px rgba(0,0,0,.34), 0 18px 40px -24px rgba(0,0,0,.70);
}

/* ---------- 2. 셸 ------------------------------------------------------ */
body.hub-on{
  padding-top:var(--h-nav);
  background:var(--h-ground);
  color:var(--h-ink);
}
body.hub-on.hub-pad{ padding-left:var(--h-gut); padding-right:var(--h-gut); }

/* 상단 바 --------------------------------------------------------------- */
.hubbar{
  position:fixed; inset:0 0 auto 0; height:var(--h-nav); z-index:9200;
  display:flex; align-items:flex-end; gap:10px;
  padding:0 var(--h-gut);
  background:var(--h-ground);
  font-family:var(--h-sans);
}
.hubbar::after{
  content:""; position:absolute; left:var(--h-gut); right:var(--h-gut); bottom:0;
  height:1px; background:var(--h-acc-line); opacity:.55;
}
.hub-brand{
  display:flex; align-items:center; gap:8px; height:34px; margin-bottom:7px;
  padding-right:12px; flex:0 0 auto; text-decoration:none; color:var(--h-ink);
}
.hub-brand .mk{
  width:22px; height:22px; border-radius:7px; flex:0 0 auto;
  background:var(--h-acc); display:grid; place-items:center;
}
.hub-brand .mk svg{ width:13px; height:13px; fill:none; stroke:var(--h-on-acc); stroke-width:2; stroke-linecap:round; }
.hub-brand .nm{ font-size:12px; font-weight:700; letter-spacing:.14em; }

.hub-tabs{ display:flex; align-items:flex-end; gap:5px; flex:1 1 auto; min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; }
.hub-tabs::-webkit-scrollbar{ display:none }
.hub-tab{
  position:relative; flex:0 0 auto;
  padding:8px 17px 9px; border:0; border-radius:11px 11px 0 0;
  background:var(--h-acc); color:var(--h-on-acc);
  font:600 12.5px/1.15 var(--h-sans); letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .16s, color .16s, transform .16s;
}
.hub-tab:hover{ background:var(--h-acc-2); }
.hub-tab.on{
  background:var(--h-card); color:var(--h-acc-2); font-weight:700;
  padding-bottom:11px; box-shadow:0 -1px 3px rgba(80,115,150,.08);
}
.hub-tab.on:hover{ background:var(--h-card); }

.hub-right{ display:flex; align-items:center; gap:7px; margin-bottom:8px; flex:0 0 auto; }
.hub-ico{
  width:31px; height:31px; border-radius:50%; border:1px solid var(--h-line);
  background:var(--h-card); color:var(--h-ink-2); display:grid; place-items:center;
  cursor:pointer; padding:0; transition:border-color .16s, color .16s;
}
.hub-ico:hover{ border-color:var(--h-acc-line); color:var(--h-acc-2); }
.hub-ico svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hub-chip{
  height:31px; padding:0 13px; border-radius:999px; border:1px solid var(--h-line);
  background:var(--h-card); color:var(--h-ink-2);
  font:600 11.5px/1 var(--h-sans); display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; white-space:nowrap;
}
.hub-chip.pri{ background:var(--h-acc); border-color:var(--h-acc); color:var(--h-on-acc); }
.hub-chip.hide{ display:none }
.hub-chip .n{
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--h-on-acc); color:var(--h-acc-2);
  font:700 10px/16px var(--h-mono); text-align:center;
}
.hub-dot{ width:7px; height:7px; border-radius:50%; background:var(--h-ink-3); flex:0 0 auto; }
.hub-dot.ok{ background:#7fb08a } .hub-dot.busy{ background:var(--h-warm) } .hub-dot.off{ background:var(--h-acc-2) }

.hub-burger{ display:grid }
@media (min-width:1101px){ body.hub-dock .hub-burger{ display:none } }

/* 더보기 메뉴 ----------------------------------------------------------- */
.hub-menu{
  position:fixed; z-index:9300; top:calc(var(--h-nav) - 2px); right:var(--h-gut);
  width:230px; padding:7px; border-radius:var(--h-r); border:1px solid var(--h-line);
  background:var(--h-card); box-shadow:var(--h-sh-2);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:.16s;
  font-family:var(--h-sans);
}
.hub-menu.on{ opacity:1; transform:none; pointer-events:auto }
.hub-menu a{
  display:flex; align-items:baseline; gap:8px; padding:8px 10px; border-radius:var(--h-r-3);
  text-decoration:none; color:var(--h-ink); font-size:13px;
}
.hub-menu a:hover{ background:var(--h-card-2); color:var(--h-acc-2) }
.hub-menu a .k{ margin-left:auto; font-size:11px; color:var(--h-ink-3) }
.hub-menu .sep{ height:1px; margin:6px 8px; background:var(--h-line) }

/* 좌측 패널 ------------------------------------------------------------- */
.hub-side{
  position:fixed; z-index:9100;
  top:calc(var(--h-nav) + 10px); left:var(--h-gut); width:var(--h-side);
  max-height:calc(100dvh - var(--h-nav) - 24px);
  background:var(--h-card); border:1px solid var(--h-line); border-radius:var(--h-r);
  box-shadow:var(--h-sh); overflow:auto; overscroll-behavior:contain;
  padding:16px 15px 18px; font-family:var(--h-sans); color:var(--h-ink);
  scrollbar-width:thin;
}
.hub-side::-webkit-scrollbar{ width:7px }
.hub-side::-webkit-scrollbar-thumb{ background:var(--h-line-2); border-radius:7px }
.hub-scrim{
  position:fixed; inset:0; z-index:9050; background:rgba(30,45,60,.32);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.hub-s-head{ display:flex; align-items:center; gap:9px; margin-bottom:14px }
.hub-s-head .av{
  width:34px; height:34px; border-radius:11px; background:var(--h-acc-soft);
  display:grid; place-items:center; color:var(--h-acc-2); flex:0 0 auto;
}
.hub-s-head .av svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.hub-s-head .t{ display:block; font-size:13.5px; font-weight:700; line-height:1.25 }
.hub-s-head .s{ display:block; font-size:11px; color:var(--h-ink-3); margin-top:1px }

.hub-sec{ margin-top:18px }
.hub-sec:first-of-type{ margin-top:0 }
.hub-sec-t{
  display:flex; align-items:center; gap:7px; margin:0 0 9px;
  font-size:12.5px; font-weight:700; color:var(--h-ink);
}
.hub-sec-t .more{
  margin-left:auto; font-size:11px; font-weight:600; color:var(--h-acc-2);
  background:none; border:0; padding:2px 4px; cursor:pointer; border-radius:5px;
}
.hub-sec-t .more:hover{ background:var(--h-acc-soft) }
.hub-rule{ height:1px; background:var(--h-line); margin:16px 0 0 }
.hub-empty{ font-size:11.5px; color:var(--h-ink-3); line-height:1.6; padding:2px 0 4px }

/* 최근 활동 */
.hub-act{ list-style:none; margin:0; padding:0 }
.hub-act li{ display:flex; gap:8px; padding:5px 0 }
.hub-act .bul{ width:6px; height:6px; border-radius:50%; background:var(--h-acc); margin-top:6px; flex:0 0 auto }
.hub-act .bul.f{ background:var(--h-cool) } .hub-act .bul.n{ background:var(--h-warm) }
.hub-act .tx{ min-width:0; flex:1 1 auto }
.hub-act .tx a{ display:block; font-size:12.5px; font-weight:600; color:var(--h-ink); text-decoration:none;
  line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.hub-act .tx a:hover{ color:var(--h-acc-2) }
.hub-act .ago{ display:block; font-size:10.5px; color:var(--h-ink-3); margin-top:2px }

/* 캘린더 */
.hub-cal-head{ display:flex; align-items:center; gap:4px; margin-bottom:7px }
.hub-cal-head .mo{ font-size:12.5px; font-weight:700; flex:1 1 auto; text-align:center }
.hub-nav{
  width:23px; height:23px; border-radius:7px; border:1px solid transparent; background:none;
  color:var(--h-ink-2); cursor:pointer; display:grid; place-items:center; padding:0; font-size:12px;
}
.hub-nav:hover{ background:var(--h-card-2); color:var(--h-acc-2) }
.hub-today{
  font:600 10.5px/1 var(--h-sans); padding:5px 8px; border-radius:999px;
  border:1px solid var(--h-line); background:var(--h-card); color:var(--h-ink-2); cursor:pointer;
}
.hub-today:hover{ border-color:var(--h-acc-line); color:var(--h-acc-2) }
.hub-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px }
.hub-grid .dw{ text-align:center; font:600 9.5px/1 var(--h-mono); color:var(--h-ink-3); padding:3px 0 5px; letter-spacing:.04em }
.hub-day{
  position:relative; aspect-ratio:1/1; border:0; background:none; cursor:pointer; padding:0;
  border-radius:8px; font:600 11px/1 var(--h-sans); color:var(--h-ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.hub-day:hover{ background:var(--h-card-2) }
.hub-day.out{ color:var(--h-ink-3); opacity:.55 }
.hub-day.sun{ color:var(--h-acc-2) }
.hub-day.today{ color:var(--h-acc-3); font-weight:800 }
.hub-day.today::after{
  content:""; position:absolute; inset:2px; border-radius:8px;
  border:1px dashed var(--h-acc-line); pointer-events:none;
}
.hub-day.sel{ background:var(--h-acc); color:var(--h-on-acc) }
.hub-day.sel::after{ border-color:transparent }
.hub-day .pips{ display:flex; gap:2px; height:3px }
.hub-day .pip{ width:3px; height:3px; border-radius:50%; background:var(--h-acc) }
.hub-day.sel .pip{ background:var(--h-on-acc) }
.hub-day .pip.due{ background:var(--h-acc-3) }
.hub-day .pip.note{ background:var(--h-warm) }
.hub-day .pip.plan{ background:var(--h-cool) }

.hub-evs{ margin-top:11px }
.hub-ev{
  display:flex; gap:8px; align-items:flex-start; padding:7px 9px; margin-bottom:5px;
  background:var(--h-card-2); border:1px solid var(--h-line); border-radius:var(--h-r-3);
}
.hub-ev .tg{
  flex:0 0 auto; font:700 9px/1 var(--h-sans); letter-spacing:.03em; padding:4px 6px; border-radius:5px;
  background:var(--h-acc-soft); color:var(--h-acc-2); text-transform:uppercase;
}
.hub-ev .tg.due{ background:var(--h-acc); color:var(--h-on-acc) }
.hub-ev .tg.note{ background:var(--h-warm-soft); color:var(--h-warm) }
.hub-ev .tg.plan{ background:var(--h-cool-soft); color:var(--h-cool) }
.hub-ev .bd{ flex:1 1 auto; min-width:0; font-size:12px; line-height:1.45; word-break:break-word }
.hub-ev .bd .tm{ font:600 10px/1 var(--h-mono); color:var(--h-ink-3); display:block; margin-top:3px }
.hub-ev .x{ border:0; background:none; color:var(--h-ink-3); cursor:pointer; font-size:13px; line-height:1; padding:2px 1px }
.hub-ev .x:hover{ color:var(--h-acc-2) }

.hub-add{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }
.hub-add input, .hub-add select{
  border:1px solid var(--h-line); background:var(--h-card); color:var(--h-ink);
  border-radius:var(--h-r-3); padding:6px 8px; font:500 12px/1.3 var(--h-sans); min-width:0;
}
.hub-add input:focus, .hub-add select:focus{ outline:2px solid var(--h-acc-line); outline-offset:-1px }
.hub-add .txt{ flex:1 1 100% }
.hub-add .tm{ flex:0 0 84px }
.hub-add select{ flex:0 0 78px }
.hbtn{
  border:1px solid var(--h-line); background:var(--h-card); color:var(--h-ink-2);
  border-radius:var(--h-r-3); padding:6px 11px; font:600 12px/1.3 var(--h-sans); cursor:pointer;
}
.hbtn:hover{ border-color:var(--h-acc-line); color:var(--h-acc-2) }
.hbtn.pri{ background:var(--h-acc); border-color:var(--h-acc); color:var(--h-on-acc) }
.hbtn.pri:hover{ background:var(--h-acc-2); color:var(--h-on-acc) }
.hbtn:disabled{ opacity:.45; cursor:default }

/* 첨부 트레이 ------------------------------------------------------------ */
.hub-tray{
  position:fixed; z-index:9300; top:calc(var(--h-nav) - 2px); right:var(--h-gut);
  width:min(330px,92vw); max-height:min(70vh,520px); overflow:auto;
  padding:12px; border-radius:var(--h-r); border:1px solid var(--h-line);
  background:var(--h-card); box-shadow:var(--h-sh-2); font-family:var(--h-sans);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:.16s;
}
.hub-tray.on{ opacity:1; transform:none; pointer-events:auto }
.hub-tray h4{ margin:0 0 3px; font-size:12.5px; font-weight:700 }
.hub-tray p{ margin:0 0 10px; font-size:11px; color:var(--h-ink-3); line-height:1.5 }
.hub-tray-i{ display:flex; gap:8px; align-items:center; padding:6px; border-radius:var(--h-r-3) }
.hub-tray-i:hover{ background:var(--h-card-2) }
.hub-tray-i img{ width:40px; height:40px; object-fit:cover; border-radius:6px; background:var(--h-card-3); flex:0 0 auto }
.hub-tray-i .nm{ flex:1 1 auto; min-width:0; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hub-tray-i .sb{ font-size:10.5px; color:var(--h-ink-3); font-weight:500 }
.hub-tray-foot{ display:flex; gap:6px; margin-top:10px }

.hub-toast{
  position:fixed; z-index:9400; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--h-ink); color:var(--h-card); padding:10px 17px; border-radius:999px;
  font:600 12.5px/1 var(--h-sans); opacity:0; pointer-events:none; transition:.2s;
  box-shadow:var(--h-sh-2); max-width:82vw; text-align:center;
}
.hub-toast.on{ opacity:1; transform:translate(-50%,0) }

/* 도크(좌측 고정) 배치 --------------------------------------------------- */
@media (min-width:1101px){
  body.hub-on.hub-dock{ padding-left:calc(var(--h-gut) + var(--h-side) + 14px); padding-right:var(--h-gut) }
  body.hub-on.hub-dock .hub-scrim{ display:none }
}
@media (max-width:1100px){
  body.hub-on.hub-dock{ padding-left:var(--h-gut); padding-right:var(--h-gut) }
  .hub-side{
    left:12px; width:min(300px,86vw); top:calc(var(--h-nav) + 8px);
    transform:translateX(calc(-100% - var(--h-gut) - 24px));
    transition:transform .22s cubic-bezier(.4,0,.2,1);
  }
  body.hub-drawer .hub-side{ transform:none }
  body.hub-drawer .hub-scrim{ opacity:1; pointer-events:auto }
}
@media (min-width:1101px){
  body:not(.hub-dock) .hub-side{
    transform:translateX(calc(-100% - var(--h-gut) - 24px));
    transition:transform .22s cubic-bezier(.4,0,.2,1);
  }
  body:not(.hub-dock).hub-drawer .hub-side{ transform:none }
  body:not(.hub-dock).hub-drawer .hub-scrim{ opacity:1; pointer-events:auto }
}
@media (max-width:720px){
  :root{ --h-nav:50px; --h-gut:12px }
  .hub-brand .nm{ display:none }
  .hub-brand{ padding-right:6px }
  .hub-tab{ padding:7px 12px 8px; font-size:11.5px }
  .hub-tab.on{ padding-bottom:10px }
  .hub-chip.sync{ display:none }
}
@media print{ .hubbar,.hub-side,.hub-scrim,.hub-menu,.hub-tray,.hub-toast{ display:none!important }
  body.hub-on{ padding:0!important } }
@media (prefers-reduced-motion:reduce){ .hub-side,.hub-menu,.hub-tray,.hub-toast,.hub-tab{ transition:none!important } }

/* ---------- 3. 페이지 이식 --------------------------------------- *
 * 옛 변수 → 새 토큰. 값을 직접 쓰지 않고 --h-* 를 가리키게 해서
 * 앞으로 색을 바꿀 때 1번 구역만 고치면 전부 따라오게 합니다.
 * :root 를 두 번 겹쳐 원본 :root 보다 우선하게 합니다.            */

/* 글꼴 — 모든 화면 공통 (고정폭은 그대로 둡니다) */
:root:root{
  --sans:var(--h-sans);
  --f-body:var(--h-sans);
  --f-disp:var(--h-sans);
}

/* /  — 아카이브 */
:root:root{
  --ground:var(--h-ground); --surface:var(--h-card); --surface-2:var(--h-card-2);
  --ink:var(--h-ink); --mute:var(--h-ink-2); --faint:var(--h-ink-3);
  --line:var(--h-line); --line-soft:var(--h-card-2);
  --accent:var(--h-acc-2); --warn:var(--h-warm); --frame:var(--h-line-2);
}

/* /atelier · /draft */
:root:root{
  --ground2:var(--h-ground-2); --dim:var(--h-ink-2); --dim2:var(--h-ink-3);
  --paper:var(--h-card); --paper2:var(--h-card-2);
  --moss:var(--h-acc-2); --moss-soft:var(--h-acc-soft); --moss-ink:var(--h-on-acc);
  --berg:var(--h-warm); --acc:var(--h-acc-2); --rust:var(--h-good);
  --shadow:var(--h-sh);
  --cpaper:var(--h-card); --cink:var(--h-ink); --cline:var(--h-line); --cdim:var(--h-ink-3);
  --cgrid:rgba(120,140,160,.10); --cslot:rgba(122,179,224,.07);
}

/* /char · /pair · /detail */
:root:root{
  --paper:var(--h-card); --sub:var(--h-ink-3);
  --slotbg:var(--h-card-2); --accent:var(--h-acc-2);
}

/* /desk — 노션 흉내를 카드로 */
:root:root{
  --bg:var(--h-card); --bg-sub:var(--h-card-2); --bg-hover:var(--h-acc-soft);
  --tx:var(--h-ink); --tx-mid:var(--h-ink-2); --tx-lt:var(--h-ink-3);
  --ln:var(--h-line); --line-2:var(--h-line-2);
  --grn:var(--h-good);  --grn-bg:var(--h-good-soft);
  --blue:var(--h-acc-2); --blue-bg:var(--h-acc-soft); --blue-tx:var(--h-acc-3);
  --red:#d98b86;  --red-bg:#fbeeed;  --red-tx:#b8635d;
  --ylw:var(--h-warm);  --ylw-bg:var(--h-warm-soft);
  /* 완료 — «링크 공개 중»(초록)과 겹치지 않는 색 */
  --done:var(--h-cool); --done-bg:var(--h-cool-soft);
}
html[data-hub-theme="dark"]:root{
  --red:#e0a09b; --red-bg:#3a2725; --red-tx:#e8b4b0;
  --cgrid:rgba(200,220,240,.09);
}

/* ---------- 4. 페이지별 자리 잡기 -------------------------------------- */

/* 붙박이 머리말은 새 상단 바 아래로 내립니다 */
body.hub-on .top,
body.hub-on .topbar,
body.hub-on .rail,
body.hub-on .panel-head{ top:0 }

/* 아카이브: 통짜 앱을 둥근 카드로 띄웁니다 */
body.hub-on.hub-p-root #app{
  height:calc(100dvh - var(--h-nav) - 22px);
  max-height:calc(100dvh - var(--h-nav) - 22px);
  margin:11px 0 11px; border-radius:var(--h-r);
  border:1px solid var(--h-line); background:var(--h-card);
  box-shadow:var(--h-sh); overflow:hidden;
}
body.hub-on.hub-p-root #rail{ background:var(--h-card-2); border-right-color:var(--h-line) }
body.hub-on.hub-p-root #bar{ background:var(--h-card); border-bottom-color:var(--h-line) }

/* 아틀리에 · 드래프트 */
body.hub-on.hub-p-atelier .shell,
body.hub-on.hub-p-draft .shell{
  min-height:calc(100dvh - var(--h-nav) - 22px);
  margin:11px 0; border-radius:var(--h-r); overflow:hidden;
  border:1px solid var(--h-line); background:var(--h-card); box-shadow:var(--h-sh);
}
body.hub-on.hub-p-atelier .top,
body.hub-on.hub-p-draft .top{ background:var(--h-card); border-bottom-color:var(--h-line) }
body.hub-on.hub-p-atelier .rail,
body.hub-on.hub-p-draft .rail{ background:var(--h-card-2) }

/* 데스크: 흰 종이 한 장을 로즈 위에 올립니다 */
body.hub-on.hub-p-desk{ background:var(--h-ground) }
body.hub-on.hub-p-desk{ padding-left:var(--h-gut); padding-right:var(--h-gut) }
@media (min-width:1101px){
  body.hub-on.hub-p-desk{ padding-left:calc(var(--h-gut) + var(--h-side) + 14px) }
}
body.hub-on.hub-p-desk .topbar{
  background:transparent; backdrop-filter:none; border-bottom:0;
  max-width:940px; margin:0 auto; padding:12px 8px 0; gap:6px;
}
body.hub-on.hub-p-desk .topbar .tabs{ gap:4px }
body.hub-on.hub-p-desk .topbar .tab{
  border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600;
  background:var(--h-card); color:var(--h-ink-2); border:1px solid var(--h-line);
}
body.hub-on.hub-p-desk .topbar .tab[aria-selected="true"]{
  background:var(--h-acc); color:var(--h-on-acc); border-color:var(--h-acc);
}
body.hub-on.hub-p-desk .topbar .crumb{ color:var(--h-ink-2); font-weight:600 }
body.hub-on.hub-p-desk .wrap{
  max-width:940px; margin:12px auto 40px; padding:34px 40px 60px;
  background:var(--h-card); border:1px solid var(--h-line);
  border-radius:var(--h-r); box-shadow:var(--h-sh);
}
body.hub-on.hub-p-desk .callout{ border-radius:var(--h-r-2) }
body.hub-on.hub-p-desk code{ background:var(--h-acc-soft); color:var(--h-acc-3) }
@media (max-width:720px){
  body.hub-on.hub-p-desk .wrap{ padding:22px 18px 48px; margin:8px auto 24px; border-radius:var(--h-r-2) }
  body.hub-on.hub-p-desk .topbar{ padding:10px 4px 0 }
}
/* 공개된 신청서 화면에는 셸을 붙이지 않습니다 */
body.hub-public .hubbar, body.hub-public .hub-side, body.hub-public .hub-scrim{ display:none }

/* 외관표 계열: 회색 배경을 로즈로 */
body.hub-on.hub-p-char, body.hub-on.hub-p-pair, body.hub-on.hub-p-detail{
  background:var(--h-ground);
}

/* ---------- 5. 옛 조각 정리 -------------------------------------------- */
/* 예전 좌상단 도구 단추는 상단 탭이 대신합니다 */
body.hub-on #navBtn{ display:none!important }
body.hub-on #navWrap{ z-index:9400 }

/* 데스크 단추를 로즈로 */
body.hub-on.hub-p-desk .btn{ background:var(--h-card); border-color:var(--h-line); border-radius:var(--h-r-3) }
body.hub-on.hub-p-desk .btn:hover{ background:var(--h-card-2); border-color:var(--h-acc-line) }
body.hub-on.hub-p-desk .btn.pri{ background:var(--h-acc); border-color:var(--h-acc); color:var(--h-on-acc) }
body.hub-on.hub-p-desk .btn.pri:hover{ background:var(--h-acc-2); border-color:var(--h-acc-2); color:var(--h-on-acc) }
body.hub-on.hub-p-desk .savepill.on{ color:var(--h-acc-2) }

/* 외관표 계열 상단 줄도 카드로 */
body.hub-on.hub-p-char .bar, body.hub-on.hub-p-pair .bar, body.hub-on.hub-p-detail .bar{
  background:var(--h-card); border-color:var(--h-line);
}

/* 각 페이지의 팝업이 상단 바에 가리지 않게 위로 올립니다.
   .sheet 는 아카이브에서만 «모달»입니다. 아틀리에는 본문 칸 이름이,
   외관표 계열은 인쇄용 종이 이름이 .sheet 라서 함께 올리면 안 됩니다. */
body.hub-on.hub-p-root .sheet,
body.hub-on .modal, body.hub-on .lightbox,
body.hub-on #lb, body.hub-on #lightbox{ z-index:9500 }
.hub-ev .auto{font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px;
  background:var(--h-acc-soft);color:var(--h-acc-2);margin-left:5px;vertical-align:1px}

/* 오른쪽에서 밀려 나오는 패널이 상단 바에 가려지지 않게 아래로 내립니다 */
body.hub-on .panel{ top:var(--h-nav); height:calc(100dvh - var(--h-nav)) }
body.hub-on .scrim, body.hub-on #scrim{ top:var(--h-nav) }

/* 다가오는 일정 */
.hub-soon{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;
  padding:6px 7px;border:0;background:none;border-radius:var(--h-r-3);cursor:pointer;margin-bottom:2px}
.hub-soon:hover{background:var(--h-card-2)}
.hub-soon .dd{flex:0 0 auto;font:700 9.5px/1 var(--h-mono);padding:4px 6px;border-radius:5px;
  background:var(--h-acc-soft);color:var(--h-acc-2)}
.hub-soon .dd.due{background:var(--h-acc);color:var(--h-on-acc)}
.hub-soon .dd.note{background:var(--h-warm-soft);color:var(--h-warm)}
.hub-soon .tx{flex:1 1 auto;min-width:0;font-size:12px;font-weight:600;line-height:1.4;
  color:var(--h-ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.hub-soon .tx em{display:block;font-style:normal;font-size:10px;font-weight:500;color:var(--h-ink-3);margin-top:2px}
body.hub-on #ngBtn.on{background:var(--h-acc);border-color:var(--h-acc);color:var(--h-on-acc)}

/* 끝난 일정 */
.hub-ev.done .bd{ text-decoration:line-through; color:var(--h-ink-3) }
.hub-ev .tg.ok{ background:var(--h-good-soft); color:var(--h-good) }
.hub-day .pip.done{ background:var(--h-ink-3); opacity:.5 }

/* =========================================================================
 * 리퀴드 글래스 — 두 번째 UI 결
 *   상단 바 · 카드 · 패널을 반투명 유리로 바꾸고 뒤가 비치게 합니다.
 *   토큰만 갈아 끼우므로 각 화면의 코드는 그대로입니다.
 * ====================================================================== */
html[data-hub-skin="glass"]{
  --h-ground:#dbe9f7;
  --h-ground-2:#c9dcef;
  --h-card:rgba(255,255,255,.58);
  --h-card-2:rgba(255,255,255,.40);
  --h-card-3:rgba(255,255,255,.30);
  --h-line:rgba(255,255,255,.55);
  --h-line-2:rgba(120,160,200,.30);
  --h-acc-soft:rgba(122,179,224,.20);
  --h-acc-line:rgba(122,179,224,.42);
  --h-sh:0 1px 1px rgba(255,255,255,.55) inset, 0 8px 30px -12px rgba(40,80,120,.30);
  --h-sh-2:0 1px 1px rgba(255,255,255,.6) inset, 0 20px 50px -18px rgba(40,80,120,.42);
  --h-r:20px; --h-r-2:14px; --h-r-3:10px;
}
html[data-hub-skin="glass"][data-hub-theme="dark"]{
  --h-ground:#0d151d;
  --h-ground-2:#131f2a;
  --h-card:rgba(38,52,66,.55);
  --h-card-2:rgba(38,52,66,.38);
  --h-card-3:rgba(38,52,66,.28);
  --h-line:rgba(255,255,255,.13);
  --h-line-2:rgba(255,255,255,.20);
  --h-acc-soft:rgba(110,168,216,.20);
  --h-acc-line:rgba(110,168,216,.40);
  --h-sh:0 1px 1px rgba(255,255,255,.10) inset, 0 8px 30px -12px rgba(0,0,0,.6);
  --h-sh-2:0 1px 1px rgba(255,255,255,.12) inset, 0 20px 50px -18px rgba(0,0,0,.7);
}

/* 바탕에 은은한 빛무리를 깔아 유리가 «비칠» 것을 만들어 줍니다 */
html[data-hub-skin="glass"] body.hub-on::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 12% 18%, rgba(122,179,224,.55), transparent 62%),
    radial-gradient(38vw 38vw at 86% 12%, rgba(139,131,196,.42), transparent 62%),
    radial-gradient(46vw 46vw at 74% 88%, rgba(95,169,162,.38), transparent 64%),
    radial-gradient(34vw 34vw at 22% 92%, rgba(201,161,94,.28), transparent 62%);
  filter:blur(18px) saturate(1.15);
}
html[data-hub-skin="glass"][data-hub-theme="dark"] body.hub-on::before{ opacity:.42 }

/* 유리 재질 — 흐림은 실제로 비치는 층에만 겁니다 */
html[data-hub-skin="glass"] .hubbar,
html[data-hub-skin="glass"] .hub-side,
html[data-hub-skin="glass"] .hub-menu,
html[data-hub-skin="glass"] .hub-tray,
html[data-hub-skin="glass"] body.hub-on .card,
html[data-hub-skin="glass"] body.hub-on.hub-p-desk .wrap,
html[data-hub-skin="glass"] body.hub-on.hub-p-root #app,
html[data-hub-skin="glass"] body.hub-on.hub-p-atelier .shell,
html[data-hub-skin="glass"] body.hub-on.hub-p-draft .shell,
html[data-hub-skin="glass"] body.hub-on .panel{
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6);
  border-color:var(--h-line);
}
html[data-hub-skin="glass"] .hubbar{ background:rgba(255,255,255,.34) }
html[data-hub-skin="glass"][data-hub-theme="dark"] .hubbar{ background:rgba(20,30,40,.44) }
html[data-hub-skin="glass"] .hubbar::after{ opacity:.35 }

html[data-hub-skin="glass"] .hub-tab{
  background:rgba(122,179,224,.55); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
}
html[data-hub-skin="glass"] .hub-tab.on{
  background:rgba(255,255,255,.72); color:var(--h-acc-3);
}
html[data-hub-skin="glass"] .hub-ico,
html[data-hub-skin="glass"] .hub-chip,
html[data-hub-skin="glass"] .hbtn{
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
html[data-hub-skin="glass"][data-hub-theme="dark"] .hub-ico,
html[data-hub-skin="glass"][data-hub-theme="dark"] .hub-chip,
html[data-hub-skin="glass"][data-hub-theme="dark"] .hbtn{ background:rgba(50,66,82,.5) }
html[data-hub-skin="glass"] .hbtn.pri,
html[data-hub-skin="glass"] .hub-chip.pri{ background:var(--h-acc) }

/* 시트·종이처럼 «인쇄물»인 곳은 유리로 만들지 않습니다 */
html[data-hub-skin="glass"] #sheet,
html[data-hub-skin="glass"] #canvas,
html[data-hub-skin="glass"] .stamp,
html[data-hub-skin="glass"] .lb-side{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-hub-skin="glass"] #sheet, html[data-hub-skin="glass"] #canvas{ background:#fff }

/* 흐림을 못 쓰는 환경에서는 그냥 불투명하게 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-hub-skin="glass"]{
    --h-card:#ffffff; --h-card-2:#f4f8fd; --h-card-3:#e9f1fa; --h-line:#e0e9f3;
  }
  html[data-hub-skin="glass"] body.hub-on::before{ display:none }
}
@media (prefers-reduced-transparency:reduce){
  html[data-hub-skin="glass"]{ --h-card:#ffffff; --h-card-2:#f4f8fd }
  html[data-hub-skin="glass"] body.hub-on::before{ opacity:.3 }
}