/* ============================================================
   연구노트 (Lab Notebook)
   디자인 시스템: "조용한 실험 기기" - 뉴트럴 그레이파이트 + 단일 에메랄드 액센트
   ------------------------------------------------------------
   RADIUS 규칙 (전역 고정)
     - 조작 요소(버튼/인풋/셀렉트) : var(--r-ctl)  7px
     - 패널/카드/영역             : var(--r-box)  12px
     - 칩/필/토큰                 : var(--r-pill) 999px
   ACCENT 규칙
     - 페이지 전체에서 액센트는 --accent 하나만 사용한다.
     - 프로젝트 색상은 사용자가 지정한 데이터이며 액센트가 아니다.
   THEME 규칙
     - 라이트/다크 두 모드만 존재하며, 섹션 단위로 반전하지 않는다.
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
:root,
/* 로그인 카드의 아이콘이 자기 스킨/테마를 직접 걸칠 때, 기본값도 그 요소에 다시 깔아준다.
   이게 없으면 기본 스킨 아이콘이 바탕화면(root)의 스킨 변수를 물려받아 버린다. */
[data-skin="default"],
[data-theme="light"]{
  color-scheme: light;

  /* 뉴트럴은 의도적으로 '차갑게' 잡는다.
     주황 액센트에 따뜻한 회색을 섞으면 곧바로 누리끼리해진다.
     모든 회색의 B 값이 R 값보다 크도록 유지할 것. */
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:#F1F3F7;
  --surface-3:#E7EAF0;

  --line:#E4E8EE;
  --line-strong:#C7CDD8;

  --ink:#11151B;
  --ink-2:#4B525E;
  --ink-3:#626A77;

  /* 액센트는 두 갈래.
     --accent      글자를 얹거나 글자로 쓰는 곳 (흰 배경 대비 5.18:1)
     --accent-vivid 글자가 없는 순수 색면 전용 (마크, 활성 표시, 히트맵) */
  --accent:#C2410C;
  --accent-hover:#A63709;
  --accent-vivid:#FF6A1F;
  --accent-ink:#FFFFFF;
  --accent-soft:#FFF2EB;
  --accent-line:#FBD3BC;

  --danger:#C0341F;
  --danger-soft:#FDF0EE;
  --danger-line:#F6CFC8;
  --warn:#9A6410;
  --ok:var(--accent);

  --heat-0:#E9ECF1;
  --heat-1:#FFD9C2;
  --heat-2:#FFB183;
  --heat-3:#FA8544;
  --heat-4:#DB5312;

  --r-ctl:8px;
  --r-box:14px;
  --r-pill:999px;

  /* 그림자는 뉴트럴의 차가운 색조를 따라간다 */
  --shadow-1:0 1px 2px rgba(17,21,27,.04);
  --shadow-2:0 1px 2px rgba(17,21,27,.04), 0 8px 24px -10px rgba(17,21,27,.14);
  --shadow-pop:0 20px 48px -18px rgba(17,21,27,.30);
  --ring:0 0 0 3px rgba(194,65,12,.14);

  --z-sticky:20;
  --z-topbar:30;
  --z-overlay:40;
  --z-toast:50;

  --sidebar-w:238px;
  --topbar-h:60px;

  --font-sans:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
    "Malgun Gothic","Noto Sans KR","Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"D2Coding",
    "Nanum Gothic Coding",Pretendard,"Noto Sans KR",monospace;

  --ease:cubic-bezier(.16,1,.3,1);
}

:root[data-theme="dark"],
[data-theme="dark"]{
  color-scheme: dark;

  --bg:#0D0F13;
  --surface:#14171D;
  --surface-2:#1A1E25;
  --surface-3:#222731;

  --line:#252A33;
  --line-strong:#39404C;

  --ink:#E9ECF2;
  --ink-2:#9AA2AF;
  --ink-3:#858E9C;

  --accent:#FF8A4C;
  --accent-hover:#FFA06B;
  --accent-vivid:#FF7A3C;
  --accent-ink:#1A0B02;
  --accent-soft:#241610;
  --accent-line:#4A2A18;

  --danger:#F2705C;
  --danger-soft:#251512;
  --danger-line:#452520;
  --warn:#D9A441;

  --heat-0:#1C212A;
  --heat-1:#4A2A18;
  --heat-2:#8C4718;
  --heat-3:#C8611D;
  --heat-4:#FF8A4C;

  --shadow-1:0 1px 2px rgba(0,0,0,.44);
  --shadow-2:0 1px 2px rgba(0,0,0,.44), 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-pop:0 20px 48px -18px rgba(0,0,0,.72);
  --ring:0 0 0 3px rgba(255,138,76,.18);
}

/* ---------- 2. 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 1;
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,p{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* 포커스 링: 전 컴포넌트 공통 */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box;border:3px solid transparent}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.spacer{flex:1 1 auto;min-width:0}

/* ---------- 3. 앱 셸 ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100dvh}

.sidebar{
  background:var(--surface);
  border-right:1px solid var(--line);
  padding:18px 12px 14px;
  display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100dvh;overflow:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brand .mark{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.brand .name{font-size:14.5px;font-weight:700;letter-spacing:-.3px;line-height:1.25}
.brand .kicker{
  display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;font-weight:500;
}
.navgroup{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--ink-3);padding:16px 10px 6px;text-transform:uppercase}
.navitem{
  position:relative;display:flex;align-items:center;gap:10px;
  width:100%;padding:8px 10px;border-radius:var(--r-ctl);
  font-size:13.5px;font-weight:500;color:var(--ink-2);text-align:left;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.navitem .ph{font-size:17px;color:var(--ink-3);transition:color .16s var(--ease)}
.navitem:hover{background:var(--surface-2);color:var(--ink)}
.navitem:hover .ph{color:var(--ink-2)}
.navitem.active{background:var(--accent-soft);color:var(--accent);font-weight:650}
.navitem.active .ph{color:var(--accent)}
.navitem.active::before{
  content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:2px;
  background:var(--accent);border-radius:0 2px 2px 0;
}
.navitem .cnt{
  margin-left:auto;font-family:var(--font-mono);font-size:11px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.navitem.active .cnt{color:var(--accent)}
.side-foot{
  margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--line);
  font-size:11px;color:var(--ink-3);line-height:1.7;
}
.side-foot .mono{font-size:11px;color:var(--ink-2)}

/* ---------- 4. 상단바 ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:var(--z-topbar);
  height:var(--topbar-h);flex:none;
  display:flex;align-items:center;gap:12px;
  padding:0 24px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(1px)){ .topbar{background:var(--bg)} }
.topbar .ttl{display:flex;align-items:baseline;gap:10px;min-width:0}
.topbar h1{font-size:15.5px;font-weight:650;letter-spacing:-.3px;white-space:nowrap}
.topbar .sub{
  font-size:12px;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:1080px){.topbar .sub{display:none}}

.search{
  display:flex;align-items:center;gap:7px;flex:none;width:258px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-ctl);padding:0 10px;height:34px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.search:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.search .ph{font-size:15px;color:var(--ink-3);flex:none}
.search input{border:0;background:none;outline:none;width:100%;font-size:13px;min-width:0}
.search input::placeholder{color:var(--ink-3)}
.search kbd{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-3);flex:none;
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;line-height:1.5;
}
.search:focus-within kbd{display:none}
@media(max-width:900px){.search{width:150px} .search kbd{display:none}}

.content{
  padding:24px 24px 72px;
  width:100%;max-width:1280px;
}
@media(max-width:640px){ .content{padding:18px 16px 56px} .topbar{padding:0 16px} }

/* ---------- 5. 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 13px;flex:none;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--ink);
  font-size:13px;font-weight:600;letter-spacing:-.1px;white-space:nowrap;
  transition:background .14s var(--ease),border-color .14s var(--ease),
             color .14s var(--ease),transform .1s var(--ease);
}
.btn .ph{font-size:15px}
.btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;pointer-events:none}

.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}

.btn.danger{color:var(--danger);border-color:var(--danger-line);background:var(--surface)}
.btn.danger:hover{background:var(--danger-soft);border-color:var(--danger)}

.btn.sm{height:28px;padding:0 9px;font-size:12px}
.btn.sm .ph{font-size:14px}
.btn.icon{width:34px;padding:0}
.btn.icon.sm{width:28px}
.btn.block{width:100%}

/* ---------- 6. 패널 / 리스트 ---------- */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-box);box-shadow:var(--shadow-1);overflow:hidden;
}
.panel-hd{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.panel-hd h3{font-size:13.5px;font-weight:650;letter-spacing:-.2px}
.panel-hd .ph{font-size:16px;color:var(--ink-3)}
.panel-bd{padding:16px}

.grid{display:grid;gap:16px}
.g-main{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:start}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
@media(max-width:1080px){ .g-main,.g-3,.g-2{grid-template-columns:minmax(0,1fr)} }

/* 행: 카드 대신 헤어라인으로 묶는다 */
.row{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:11px 16px 11px 18px;
  border-bottom:1px solid var(--line);
  text-align:left;width:100%;
  transition:background .13s var(--ease);
}
.row:last-child{border-bottom:0}
button.row,.row.clickable{cursor:pointer}
button.row:hover,.row.clickable:hover{background:var(--surface-2)}
.row .grow{flex:1 1 auto;min-width:0}
.row .t{font-size:13.5px;font-weight:600;letter-spacing:-.2px;color:var(--ink)}
.row .m{font-size:12px;color:var(--ink-3);margin-top:1px}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.row .side{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.row .acts{flex:none;display:flex;gap:6px;align-items:center}

/* 프로젝트 색상 = 좌측 룰 (장식용 점이 아니라 소속을 나타내는 규칙선) */
.row.ruled::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rule,transparent);
}
.swatch{width:10px;height:10px;border-radius:3px;flex:none;background:var(--rule,var(--line-strong))}

/* ---------- 7. 원자 요소 ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;line-height:1.7;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
}
.chip.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.tag{
  display:inline-block;padding:1px 7px;border-radius:var(--r-pill);
  font-size:11px;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);margin-right:4px;
}
.count{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.filetype{
  width:32px;height:32px;flex:none;border-radius:var(--r-ctl);
  display:grid;place-items:center;font-size:16px;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}

.segmented{display:inline-flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:calc(var(--r-ctl) + 3px);border:1px solid var(--line)}
.segmented button{
  padding:5px 12px;border-radius:var(--r-ctl);font-size:12.5px;font-weight:600;
  color:var(--ink-3);transition:background .14s var(--ease),color .14s var(--ease);
}
.segmented button:hover{color:var(--ink)}
.segmented button.on{
  background:var(--surface);color:var(--ink);font-weight:700;
  /* 배경색만으로는 구분이 약하다. 윤곽선과 그림자를 같이 준다. */
  box-shadow:0 0 0 1px var(--line-strong), 0 1px 3px rgba(17,21,27,.14);
}
:root[data-theme="dark"] .segmented button.on,
[data-theme="dark"] .segmented button.on{
  box-shadow:0 0 0 1px var(--line-strong), 0 1px 3px rgba(0,0,0,.5);
}

.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filters button{
  height:30px;padding:0 11px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;
  transition:background .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease);
}
.filters button:hover{border-color:var(--line-strong);color:var(--ink)}
.filters button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

/* ---------- 8. 대시보드 ---------- */
.page-head{
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  /* 날짜 줄을 없앤 만큼 위아래를 줄여 본문에 공간을 돌려준다 */
  padding:0 2px 14px;
}
.page-head .lede{min-width:0;flex:1 1 340px}
.page-head h2{
  font-size:26px;font-weight:700;letter-spacing:-.9px;line-height:1.25;
  max-width:22ch;
}
.page-head p{margin-top:7px;font-size:13.5px;color:var(--ink-2);max-width:52ch}
.page-head .acts{display:flex;gap:8px;flex:none;padding-bottom:3px}

/* 지표: 4개 동일 카드 대신 주요 1 + 헤어라인 3 */
.metric-lead{padding:18px 20px 20px}
.metric-lead .lab{
  display:flex;align-items:center;gap:7px;font-size:12px;
  font-weight:600;color:var(--ink-3);
}
.metric-lead .val{
  font-family:var(--font-mono);font-size:38px;font-weight:600;
  letter-spacing:-1.6px;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums;
}
.metric-lead .val em{font-style:normal;font-size:14px;font-weight:500;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.metric-lead .note{font-size:12.5px;color:var(--ink-3);margin-top:4px}

.metric-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.metric-strip .cell{padding:14px 16px;border-left:1px solid var(--line);min-width:0}
.metric-strip .cell:first-child{border-left:0}
.metric-strip .lab{
  display:flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:600;color:var(--ink-3);
}
.metric-strip .lab .ph{font-size:14px}
.metric-strip .val{
  font-family:var(--font-mono);font-size:20px;font-weight:600;
  letter-spacing:-.6px;margin-top:5px;font-variant-numeric:tabular-nums;
}
.metric-strip .val em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-left:3px;letter-spacing:0}
@media(max-width:520px){ .metric-strip{grid-template-columns:repeat(3,minmax(0,1fr))} .metric-strip .val{font-size:17px} }

/* 히트맵: 주 단위 정렬 (기여도 그래프 방식) */
.heat-wrap{display:flex;gap:8px;align-items:flex-start;overflow-x:auto;padding-bottom:2px}
.heat-days{
  display:grid;grid-template-rows:repeat(7,1fr);gap:3px;flex:none;
  font-family:var(--font-mono);font-size:9px;color:var(--ink-3);
}
.heat-days span{height:12px;line-height:12px}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);gap:3px}
.heat i{
  width:12px;height:12px;border-radius:2.5px;background:var(--heat-0);
  display:block;transition:transform .12s var(--ease);
}
.heat i.l1{background:var(--heat-1)}
.heat i.l2{background:var(--heat-2)}
.heat i.l3{background:var(--heat-3)}
.heat i.l4{background:var(--heat-4)}
.heat i.void{background:transparent}
.heat i:not(.void):hover{transform:scale(1.35)}
.heat-legend{
  display:flex;align-items:center;gap:6px;margin-top:12px;
  font-size:11.5px;color:var(--ink-3);
}
.heat-legend i{width:11px;height:11px;border-radius:2.5px;display:block}

/* ---------- 9. 폼 ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.field > label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .help{font-size:11.5px;color:var(--ink-3)}
.field .err{font-size:11.5px;color:var(--danger);display:none}
.field.invalid .err{display:block}
.field.invalid .inp{border-color:var(--danger)}

.inp{
  width:100%;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:8px 11px;background:var(--surface);color:var(--ink);
  outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.inp::placeholder{color:var(--ink-3)}
.inp:hover{border-color:var(--line-strong)}
.inp:focus{border-color:var(--accent);box-shadow:var(--ring)}
select.inp{appearance:none;background-image:none;padding-right:11px;cursor:pointer}
input[type=date].inp{font-family:var(--font-mono);font-size:13px}
input[type=color].inp{height:36px;padding:3px;cursor:pointer}
:root[data-theme="dark"] input[type=date].inp::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type=date].inp::-webkit-calendar-picker-indicator{filter:invert(.75)}

.title-inp{
  border:0;background:none;padding:2px 0;width:100%;outline:none;
  font-size:21px;font-weight:700;letter-spacing:-.7px;color:var(--ink);
}
.title-inp::placeholder{color:var(--ink-3);font-weight:600}

.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:780px){.fgrid{grid-template-columns:minmax(0,1fr)}}

.drop{
  border:1.5px dashed var(--line-strong);border-radius:var(--r-box);
  padding:26px 20px;text-align:center;color:var(--ink-3);
  background:var(--surface-2);cursor:pointer;width:100%;
  transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.drop .ph{font-size:26px;color:var(--ink-3);transition:color .16s var(--ease)}
.drop b{display:block;color:var(--ink);font-size:13.5px;margin-top:8px}
.drop span{display:block;font-size:12.5px;margin-top:3px}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.drop:hover .ph,.drop.over .ph{color:var(--accent)}
.drop.over b{color:var(--accent)}

/* ---------- 10. 에디터 ---------- */
.editor-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.editor-split.dual{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:1100px){.editor-split.dual{grid-template-columns:minmax(0,1fr)}}
textarea.inp.body{
  resize:vertical;min-height:52vh;
  font-family:var(--font-mono);font-size:13px;line-height:1.8;
  tab-size:2;
}
.preview-pane{
  border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:16px 18px;min-height:52vh;background:var(--surface-2);overflow:auto;
}

/* ---------- 11. 마크다운 ---------- */
.md{font-size:14px;line-height:1.8;color:var(--ink);overflow-wrap:anywhere}
.md > *:first-child{margin-top:0}
.md h1{font-size:20px;font-weight:700;letter-spacing:-.6px;margin:22px 0 10px}
.md h2{font-size:16.5px;font-weight:650;letter-spacing:-.3px;margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.md h3{font-size:14.5px;font-weight:650;margin:16px 0 6px}
.md h4{font-size:13.5px;font-weight:650;color:var(--ink-2);margin:14px 0 4px}
.md p{margin:9px 0}
.md ul,.md ol{margin:9px 0;padding-left:20px}
.md li{margin:3px 0}
.md li::marker{color:var(--ink-3)}
.md code{
  font-family:var(--font-mono);font-size:12.5px;
  background:var(--surface-3);color:var(--ink);padding:1.5px 5px;border-radius:4px;
}
.md pre{
  background:var(--surface-3);border:1px solid var(--line);
  color:var(--ink);padding:13px 15px;border-radius:var(--r-ctl);overflow:auto;
  font-size:12.5px;line-height:1.7;
}
.md pre code{background:none;padding:0;font-size:inherit}
.md blockquote{
  border-left:2px solid var(--accent);background:var(--accent-soft);
  margin:12px 0;padding:9px 14px;color:var(--ink-2);border-radius:0 var(--r-ctl) var(--r-ctl) 0;
}
.md blockquote p{margin:2px 0}
.md table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px;display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.md th{background:var(--surface-2);font-weight:650}
.md hr{margin:18px 0}
.md img{max-width:100%;border-radius:var(--r-ctl);border:1px solid var(--line)}
.md a{text-decoration:underline;text-underline-offset:2px}
.md del{color:var(--ink-3)}

/* ---------- 12. 무결성 해시 ---------- */
.hashbar{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-ctl);padding:10px 12px;
}
.hashbar .ph{font-size:16px;color:var(--accent);flex:none;margin-top:1px}
.hashbar .k{font-size:11.5px;font-weight:650;color:var(--accent)}
.hashbar .v{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-2);
  word-break:break-all;line-height:1.55;margin-top:2px;
}
.meta-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.meta-list div{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.meta-list dt,.meta-list .k{color:var(--ink-3)}
.meta-list .v{font-family:var(--font-mono);color:var(--ink-2);font-size:11.5px}

/* ---------- 13. 빈 / 로딩 / 오류 상태 ---------- */
.empty{
  display:flex;flex-direction:column;align-items:center;
  padding:52px 24px;text-align:center;color:var(--ink-3);
}
.empty .ph{font-size:30px;color:var(--line-strong);margin-bottom:12px}
.empty b{display:block;color:var(--ink);font-size:14px;font-weight:650;letter-spacing:-.2px}
.empty p{font-size:12.5px;margin:5px 0 0;max-width:38ch;line-height:1.65}
.empty .btn{margin-top:16px}

.state-error{
  display:flex;align-items:flex-start;gap:11px;
  padding:14px 16px;border-radius:var(--r-box);
  background:var(--danger-soft);border:1px solid var(--danger-line);
}
.state-error .ph{font-size:18px;color:var(--danger);flex:none;margin-top:1px}
.state-error b{display:block;font-size:13px;color:var(--danger);font-weight:650}
.state-error p{font-size:12.5px;color:var(--ink-2);margin-top:2px}

/* 스켈레톤: 최종 레이아웃의 형태를 그대로 따른다 */
.skel{
  background:var(--surface-2);border-radius:5px;
  position:relative;overflow:hidden;
}
.skel-row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line)}
.skel-row:last-child{border-bottom:0}
@media(prefers-reduced-motion:no-preference){
  .skel::after{
    content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);
    animation:shimmer 1.35s infinite;
  }
}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- 14. 토스트 ---------- */
#toast{
  position:fixed;bottom:22px;left:50%;z-index:var(--z-toast);
  display:flex;align-items:center;gap:8px;
  transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;box-shadow:var(--shadow-pop);
  transition:opacity .2s var(--ease),transform .28s var(--ease);
  max-width:min(90vw,420px);
}
#toast .ph{font-size:15px;flex:none}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--danger);color:#fff}

/* ---------- 15. 모션 (MOTION_INTENSITY 4) ---------- */
/* 진입 스태거: 뷰 전환 시 정보 위계를 순서로 전달한다. 무한 반복 없음. */
@media(prefers-reduced-motion:no-preference){
  /* 기본 상태는 '보이는 상태'. backwards 로 지연 구간만 시작 프레임을 적용한다.
     애니메이션이 실행되지 않아도 콘텐츠가 사라지지 않는다. */
  .rise{
    animation:rise .42s var(--ease) backwards;
    animation-delay:calc(var(--i,0) * 34ms);
  }
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rise{opacity:1;transform:none}
}

/* ---------- 16. 반응형 셸 ---------- */
@media(max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{
    position:sticky;top:0;z-index:var(--z-sticky);
    height:auto;flex-direction:row;align-items:center;gap:4px;
    padding:8px 12px;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .brand{padding:0 10px 0 2px;flex:none}
  .brand .name,.brand .kicker{display:none}
  .navgroup{display:none}
  .navitem{width:auto;flex:none;padding:7px 10px}
  .navitem.active::before{display:none}
  .navitem .cnt{margin-left:4px}
  .page-head{padding-bottom:18px}
  .page-head h2{font-size:22px}
  .page-head .acts{width:100%}
  .page-head .acts .btn{flex:1 1 auto}
}

/* ---------- 17. 인쇄 (보고서) ---------- */
@media print{
  :root{--bg:#fff;--surface:#fff;--ink:#000;--ink-2:#333;--line:#ccc}
  .sidebar,.topbar,#toast,.toolbar,.no-print{display:none !important}
  .app{display:block}
  .content{padding:0;max-width:none}
  .panel{border:0;box-shadow:none}
  .panel-bd{padding:0}
  .md{font-size:11pt;line-height:1.6}
  .md h1{font-size:18pt}
  .md h2{font-size:14pt;page-break-after:avoid}
  .md h3{font-size:12pt;page-break-after:avoid}
  .md pre,.md blockquote,.md table{page-break-inside:avoid}
  a{color:#000;text-decoration:none}
}

/* ---------- 18. 보강 유틸 ---------- */
.grow{flex:1 1 auto;min-width:0}

/* 행 전체를 누를 수 있게 하되, 행 안의 버튼과 겹치지 않는 stretched-link 패턴.
   중첩 button 없이 접근성을 지킨다. */
.row .t-link{
  display:block;width:100%;text-align:left;min-width:0;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
}
.row .t-link::after{content:"";position:absolute;inset:0}
.row .t-link:focus-visible{outline:none}
.row .t-link:focus-visible::after{
  outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-ctl);
}
.row .acts,.row .side,.row .chip{position:relative;z-index:1}
.row:has(.t-link):hover{background:var(--surface-2)}

/* 히트맵 요일 라벨은 셀 높이와 정확히 맞춘다 */
.heat-days{grid-template-rows:repeat(7,12px)}

.filters button .swatch{width:8px;height:8px;border-radius:2px}
.chip .swatch{width:8px;height:8px;border-radius:2px}
.tag .ph{font-size:11px;vertical-align:-1px}

/* 인쇄 전용 영역: 화면에서는 숨기고 인쇄 시 본문만 남긴다 */
#print-area{display:none}
@media print{
  #print-area{display:block}
  .no-print{display:none !important}
}

/* 숫자는 모노, 단위 접미사는 산세리프로 분리한다 (한글 글리프 폴백 및 가독성) */
.metric-lead .val em,.metric-strip .val em{font-family:var(--font-sans)}

/* ---------- 19. 마크다운 작업 목록 ---------- */
.md li.task{
  list-style:none;margin-left:-20px;
  display:flex;align-items:baseline;gap:8px;
}
.md li.task input[type=checkbox]{
  appearance:none;flex:none;width:14px;height:14px;margin:0;
  border:1.5px solid var(--line-strong);border-radius:4px;
  background:var(--surface);position:relative;top:2px;
}
.md li.task input[type=checkbox]:checked{
  background:var(--accent);border-color:var(--accent);
}
.md li.task input[type=checkbox]:checked::after{
  content:"";position:absolute;left:3.5px;top:.5px;
  width:4px;height:8px;border:solid var(--accent-ink);
  border-width:0 2px 2px 0;transform:rotate(42deg);
}
.md li.task.done > span{color:var(--ink-3);text-decoration:line-through}

/* ---------- 20. 발견된 문제 보정 ---------- */
/* 목록 발췌는 한 줄 스캔이 목적이므로 과도하게 길어지지 않게 제한한다 */
.row .m{max-width:82ch}

/* 색상 선택기는 네이티브 기본값이 가로로 늘어나므로 스와치 크기로 고정한다 */
input[type=color].inp{width:56px;flex:none;padding:3px}

/* 프로젝트 카드: 고정 3열 대신 폭에 맞춰 채워 마지막 줄에 빈 칸이 남지 않게 한다 */
.grid.g-cards{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}

/* 좁은 화면 상단바: 제목을 숨기고 검색이 남는 폭을 차지한다 */
@media(max-width:640px){
  .topbar{gap:8px}
  .topbar .ttl{display:none}
  .search{flex:1 1 auto;width:auto;min-width:0}
  #btn-new{width:34px;padding:0}
  #btn-new .btn-label{display:none}
}

/* ============================================================
   21. 인증 화면 (잠금 / 승격)
   앱과 동일한 토큰을 쓰며, 라이트/다크 모두 잠금 해제 전에도 일관되게 보인다.
   ============================================================ */
#gate{
  position:fixed;inset:0;z-index:var(--z-overlay);
  display:grid;place-items:center;padding:24px;
  background:var(--bg);
}
.gate-card{
  width:100%;max-width:340px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-box);box-shadow:var(--shadow-2);
  padding:30px 28px 24px;text-align:center;
}
.gate-mark{
  width:40px;height:40px;margin:0 auto 16px;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:21px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.gate-card h1{font-size:18px;font-weight:700;letter-spacing:-.4px}
.gate-sub{font-size:13px;color:var(--ink-2);margin:6px 0 20px}
/* 연구노트마다 카드 하나. 카드 안에 각자의 암호 칸이 있어 한 화면에서 바로 들어간다.
   카드 모양·스킨은 .gate-card 에서 물려받고, 여기서는 배치만 손본다.
   .gate-card 를 파일 뒤에서 다시 정의하는 곳이 있어 두 클래스를 겹쳐 우선순위를 확보한다. */
.gate-shell{width:100%;max-width:1000px;text-align:center}
.gate-cards{
  display:grid;gap:16px;justify-content:center;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(260px,320px));
}
.gate-card.gate-nb{
  max-width:none;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
/* 지금 입력 중인 카드를 분명히 드러낸다 */
.gate-card.gate-nb:focus-within{
  border-color:var(--accent);box-shadow:var(--shadow-2),var(--ring);
}
/* 안내 문구가 카드 밖으로 나와서, 카드 안에서 쓰던 윗줄 구분선은 뺀다 */
.gate-shell > .gate-note{border-top:0;padding-top:0;margin-top:20px}
.gate-card .field{margin-bottom:14px;text-align:left}
.gate-card .err,.modal .err{display:none;font-size:12px;color:var(--danger);margin-top:2px}
.gate-card .field.invalid .err,.modal .field.invalid .err{display:block}
.gate-note{
  font-size:11.5px;color:var(--ink-3);margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line);line-height:1.6;
}

#elev,#acct{
  position:fixed;inset:0;z-index:var(--z-overlay);
  display:grid;place-items:center;padding:24px;
  background:color-mix(in srgb, var(--ink) 42%, transparent);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  #elev,#acct{background:rgba(0,0,0,.45)}
}
.modal{
  width:100%;max-width:380px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-box);box-shadow:var(--shadow-pop);
  padding:22px 24px 20px;
}
.modal h2{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:650;letter-spacing:-.3px;
}
.modal h2 .ph{font-size:18px;color:var(--accent)}
.modal > p{font-size:12.5px;color:var(--ink-2);margin:8px 0 16px;line-height:1.6}
.modal .field{margin-bottom:16px}
.modal-acts{display:flex;justify-content:flex-end;gap:8px}

/* 상단바 잠금 표시: 승격 상태를 색이 아니라 아이콘으로도 구분한다 */
#btn-lock.unlocked{
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);
}
#btn-lock.unlocked .ph{color:var(--accent)}

/* 인증 전에는 앱 셸을 숨긴다 */
body.locked .app,body.locked #toast{display:none}

/* #gate / #elev 는 ID 선택자로 display 를 지정하므로 hidden 속성보다 우선순위가 높다.
   hidden 이 항상 이기도록 못박는다. (숨겨진 오버레이가 클릭을 가로채는 문제) */
[hidden]{display:none !important}

/* hidden 속성이 항상 이깁니다.
   #gate / #elev 는 ID 선택자로 display 를 지정하므로, 이 규칙이 없으면
   숨긴 오버레이가 화면 전체의 클릭을 가로챕니다. */
[hidden]{display:none !important}

/* 좁은 화면에서도 5개 메뉴가 잘리지 않고 한 줄에 들어오게 한다 */
@media(max-width:860px){
  .sidebar{gap:2px;padding:8px 8px}
  .navitem{padding:7px 9px;font-size:13px}
  .navitem .ph{font-size:16px}
}
@media(max-width:640px){
  .brand{display:none}                 /* 상단바에 앱 정체성이 이미 있다 */
  .sidebar{justify-content:space-between;padding:6px 6px}
  .navitem{flex:1 1 0;justify-content:center;gap:6px;padding:7px 4px;font-size:12px;min-width:0}
  .navitem .ph{font-size:15px}
  .navitem .cnt{display:none}          /* 개수는 각 화면에서 다시 보여준다 */
}
@media(max-width:400px){
  .navitem{font-size:11.5px;gap:4px}
}

/* ---------- 22. 보정: 오버레이 스크림 / 모바일 로그아웃 ---------- */
/* 스크림은 테마와 무관하게 항상 어둡게. --ink 를 쓰면 다크 모드에서
   오히려 화면이 밝아져 뿌옇게 보인다. */
:root{ --scrim:rgba(19,25,23,.46) }
:root[data-theme="dark"],
[data-theme="dark"]{ --scrim:rgba(0,0,0,.66) }
#elev,#acct{ background:var(--scrim) }

.side-foot{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.side-foot #btn-logout{width:100%}

/* 좁은 화면: 사이드바가 가로 막대가 되므로 로그아웃만 아이콘으로 남긴다 */
@media(max-width:860px){
  .side-foot{
    display:flex;flex-direction:row;align-items:center;
    margin:0;padding:0;border-top:0;flex:none;
  }
  .side-foot .foot-text{display:none}
  .side-foot #btn-logout{width:32px;height:32px;padding:0;flex:none}
  .side-foot #btn-logout span{display:none}
}

/* 기록이 없는 주말 칸: 근무일의 '빈 칸'과 구분해 흐리게 둔다 */
.heat i.off{background:var(--heat-0);opacity:.38}
/* 취합된 보고서에서 내려간 제목 레벨 */
.md h5{font-size:13px;font-weight:650;color:var(--ink-2);margin:12px 0 4px}
.md h6{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:10px 0 4px}

/* ============================================================
   23. 할 일
   ============================================================ */
.task-add{
  display:flex;flex-direction:column;gap:8px;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.task-add-row{display:flex;gap:8px}
.task-add-row .inp{flex:1 1 auto;min-width:0}
.task-add-row .btn{width:36px;padding:0;flex:none}

.task-group + .task-group{border-top:1px solid var(--line)}
.task-group-hd{
  display:flex;align-items:center;gap:6px;
  padding:9px 16px 5px;
  font-size:11.5px;font-weight:700;color:var(--ink-3);
}
.task-group-hd .ph{font-size:14px}
.task-group-hd .count{margin-left:auto}
/* 지난 항목만 색으로 주의를 준다. 나머지는 중립. */
.task-group-hd.overdue{color:var(--danger)}
.task-group-hd.today{color:var(--accent)}

.task-row{
  position:relative;display:flex;align-items:flex-start;gap:9px;
  padding:7px 16px 7px 18px;
  transition:background .13s var(--ease);
}
.task-row:hover{background:var(--surface-2)}
.task-row.ruled::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rule,transparent);
}
.task-check{
  flex:none;width:15px;height:15px;margin-top:2px;
  border:1.5px solid var(--line-strong);border-radius:4px;
  background:var(--surface);display:grid;place-items:center;
  color:var(--accent-ink);font-size:10px;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.task-check:hover{border-color:var(--accent)}
.task-row.done .task-check{background:var(--accent);border-color:var(--accent)}
.task-title{
  flex:1 1 auto;min-width:0;font-size:13px;line-height:1.5;
  overflow-wrap:anywhere;
}
.task-row.done .task-title{color:var(--ink-3);text-decoration:line-through}
.task-due{
  flex:none;font-family:var(--font-mono);font-size:10.5px;
  color:var(--ink-3);margin-top:2px;white-space:nowrap;
}
.task-group:has(.task-group-hd.overdue) .task-due{color:var(--danger)}
.task-del{
  flex:none;width:20px;height:20px;border-radius:5px;
  display:grid;place-items:center;color:var(--ink-3);font-size:12px;
  opacity:0;transition:opacity .13s var(--ease),color .13s var(--ease);
}
.task-row:hover .task-del,.task-del:focus-visible{opacity:1}
.task-del:hover{color:var(--danger);background:var(--danger-soft)}

.done-group{opacity:.72}

/* 본문에 이미지를 끌어다 놓는 중 */
textarea.inp.body.drag{
  border-color:var(--accent);
  box-shadow:var(--ring);
  background:var(--accent-soft);
}

/* ============================================================
   24. 논문 (LaTeX 편집 + PDF 미리보기)
   ============================================================ */
.paper-split{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:16px;
  height:calc(100dvh - var(--topbar-h) - 108px);min-height:540px;
}
@media(max-width:1100px){
  .paper-split{grid-template-columns:minmax(0,1fr);height:auto}
  .paper-split > .panel,.paper-split > .stack > .panel{height:auto}
  .paper-split > .panel:last-child{height:70vh}
}
.paper-split > .stack{min-height:0;overflow:auto}

/* 선택된 판본 */
.row.on{background:var(--accent-soft)}
.row.on .t{color:var(--accent)}

.paper-pdf{flex:1 1 auto;min-height:0;background:var(--surface-2);overflow:auto}
.paper-pdf iframe{width:100%;height:100%;border:0;display:block}



/* 판본 안의 파일 목록 */
.tree-dir{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px 4px;font-size:11px;font-weight:700;
  color:var(--ink-3);
}
.tree-dir .ph{font-size:13px}
.tree-file{
  display:flex;align-items:center;
  margin:1px 8px;border-radius:var(--r-ctl);
  transition:background .13s var(--ease);
}
.tree-file:hover{background:var(--surface-2)}
.tree-file.on{background:var(--accent-soft)}
.tree-open{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:7px;
  padding:6px 8px;font-size:12.5px;color:var(--ink-2);text-align:left;
}
.tree-open .ph{font-size:14px;color:var(--ink-3);flex:none}
.tree-file.on .tree-open{color:var(--accent);font-weight:650}
.tree-file.on .tree-open .ph{color:var(--accent)}

/* ============================================================
   25. 주황 테마 리파인
   색만 바꾸는 게 아니라, 흰 바탕에서 구조가 또렷하게 보이도록
   면·선·그림자의 역할을 다시 나눈다.
   ============================================================ */

/* 브랜드 마크: 유일하게 진한 색면을 쓰는 곳 */
.brand .mark,.gate-mark{
  background:linear-gradient(150deg,var(--accent-vivid),var(--accent));
  box-shadow:0 2px 8px -2px rgba(194,65,12,.45),
             inset 0 1px 0 rgba(255,255,255,.28);
}
:root[data-theme="dark"] .brand .mark,
:root[data-theme="dark"] .gate-mark,
[data-theme="dark"] .brand .mark,
[data-theme="dark"] .gate-mark{
  box-shadow:0 2px 10px -2px rgba(255,106,31,.34),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.brand .kicker{letter-spacing:.16em}

/* 활성 메뉴: 배경 틴트 대신 선명한 좌측 막대 + 진한 글자.
   흰 바탕에서 틴트만 쓰면 존재감이 약하다. */
.navitem.active{background:var(--accent-soft)}
.navitem.active::before{
  background:var(--accent-vivid);
  width:3px;left:-12px;top:6px;bottom:6px;border-radius:0 3px 3px 0;
}

/* 패널: 테두리를 옅게 하고 그림자로 띄운다 (흰 위의 흰) */
.panel{border-color:var(--line);box-shadow:var(--shadow-1)}
.panel-hd h3{letter-spacing:-.2px}

/* 버튼 */
.btn{font-weight:600}
.btn.primary{
  box-shadow:0 1px 2px rgba(194,65,12,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn.primary:hover{box-shadow:0 2px 8px -2px rgba(194,65,12,.42)}
:root[data-theme="dark"] .btn.primary,
[data-theme="dark"] .btn.primary{
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
}

/* 칩: 액센트 칩은 테두리 없이 틴트만 */
.chip{border-color:var(--accent-line)}

/* 행 hover 를 살짝만. 흰 바탕에서 회색이 크게 들어오면 지저분하다 */
button.row:hover,.row.clickable:hover,.row:has(.t-link):hover{background:var(--surface-2)}

/* 대시보드 주요 지표: 숫자에 무게를 싣고 액센트로 표시 */
.metric-lead .val{letter-spacing:-2px}
.metric-lead .lab .ph{color:var(--accent)}

/* 히트맵 칸을 조금 키우고 모서리를 부드럽게 */
.heat i,.heat-legend i{border-radius:3px}

/* 할 일: 오늘 그룹만 액센트로 */
.task-group-hd.today{color:var(--accent)}
.task-check:hover{border-color:var(--accent)}

/* 태그를 알약 형태로 */
.tag{border-radius:var(--r-pill);padding:2px 9px}

/* 마크다운 인용: 좌측 막대를 선명한 주황으로 */
.md blockquote{border-left-color:var(--accent-vivid)}
.md h2{border-bottom-color:var(--line)}

/* 코드 배경을 차가운 회색으로 (주황과 섞이면 탁해진다) */
.md code,.md pre{background:var(--surface-2);border-color:var(--line)}

/* 무결성 해시 박스 */
.hashbar{background:var(--accent-soft);border-color:var(--accent-line)}
.hashbar .ph{color:var(--accent)}

/* 잠금 화면을 조금 더 넓고 여유 있게 */
.gate-card{max-width:360px;padding:34px 30px 26px;border-radius:18px}
.gate-card h1{font-size:19px;letter-spacing:-.5px}
.gate-mark{width:44px;height:44px;border-radius:12px;font-size:22px;margin-bottom:18px}

/* 업로드 영역 */
.drop{border-radius:var(--r-box)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* 스크롤바를 얇고 차분하게 */
::-webkit-scrollbar-thumb{background:var(--line-strong)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ============================================================
   26. 마감 (D-day) / 프로젝트 정체 표시 / 홈 버튼
   ============================================================ */
button.brand{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:6px 8px 6px 6px;margin-bottom:12px;border-radius:var(--r-ctl);
  text-align:left;transition:background .14s var(--ease);
}
button.brand:hover{background:var(--surface-2)}
.brand-text{display:flex;flex-direction:column;min-width:0}

.dl-row{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:10px 14px 10px 16px;border-bottom:1px solid var(--line);
  transition:background .13s var(--ease);
}
.dl-row:last-child{border-bottom:0}
.dl-row:hover{background:var(--surface-2)}
.dl-day{
  flex:none;min-width:52px;text-align:center;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  padding:5px 8px;border-radius:var(--r-ctl);
  background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line);
}
/* 급한 것만 색을 쓴다. 전부 칠하면 아무것도 눈에 안 띈다. */
.dl-row.now  .dl-day{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dl-row.near .dl-day{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.dl-row.past .dl-day{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.dl-row .t{font-size:13.5px;font-weight:600;letter-spacing:-.2px}
.dl-row .t a{color:inherit;text-decoration:none}
.dl-row .t a:hover{color:var(--accent);text-decoration:underline}
.dl-row .m{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-family:var(--font-mono)}
.dl-del{
  flex:none;width:22px;height:22px;border-radius:5px;
  display:grid;place-items:center;color:var(--ink-3);font-size:12px;
  opacity:0;transition:opacity .13s var(--ease),color .13s var(--ease);
}
.dl-row:hover .dl-del,.dl-del:focus-visible{opacity:1}
.dl-del:hover{color:var(--danger);background:var(--danger-soft)}

.dl-add{
  display:flex;flex-direction:column;gap:8px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.dl-add-row{display:flex;gap:8px}
.dl-add-row .inp{flex:1 1 0;min-width:0}
.dl-add-acts{display:flex;justify-content:flex-end;gap:8px}

/* 프로젝트가 얼마나 오래 멈춰 있는지 */
.stale{
  flex:none;font-size:11.5px;color:var(--ink-3);
  font-family:var(--font-mono);white-space:nowrap;
}
.stale.on{
  color:var(--danger);background:var(--danger-soft);
  border:1px solid var(--danger-line);border-radius:var(--r-pill);
  padding:2px 9px;font-family:var(--font-sans);font-weight:600;
}

/* ============================================================
   27. 아젠다 (오늘 / 앞으로)
   ============================================================ */
.ag-panel{display:flex;flex-direction:column;min-height:0}

.ag-quick{
  display:flex;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.ag-quick .inp{flex:1 1 auto;min-width:0}
.ag-quick .btn{width:36px;padding:0;flex:none}

.ag-add{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.ag-add-row{display:flex;gap:8px}
.ag-add-row .inp{flex:1 1 0;min-width:0}
.ag-add-acts{display:flex;justify-content:flex-end;gap:8px}
.ag-add .segmented{align-self:flex-start}

.ag-group + .ag-group{border-top:1px solid var(--line)}
.ag-hd{
  display:flex;align-items:center;gap:6px;
  padding:9px 15px 5px;font-size:11.5px;font-weight:700;color:var(--ink-3);
}
.ag-hd .ph{font-size:14px}
.ag-hd .count{margin-left:auto}
.ag-hd.past{color:var(--danger)}
.ag-hd.now{color:var(--accent)}

.ag-row{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:8px 14px 8px 17px;
  transition:background .13s var(--ease);
}
.ag-row:hover{background:var(--surface-2)}
.ag-row.ruled::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rule,transparent);
}
.ag-title{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.ag-title a{color:inherit;text-decoration:none}
.ag-title a:hover{color:var(--accent);text-decoration:underline}
.ag-meta{
  font-size:11px;color:var(--ink-3);margin-top:2px;
  font-family:var(--font-mono);
}
.ag-row.task.done .ag-title{color:var(--ink-3);text-decoration:line-through}
.ag-due{
  flex:none;font-family:var(--font-mono);font-size:10.5px;
  color:var(--ink-3);white-space:nowrap;
}

/* 마감은 D-day 배지를 앞에 세운다. 급한 것만 색을 쓴다. */
.ag-day{
  flex:none;min-width:50px;text-align:center;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  padding:4px 7px;border-radius:var(--r-ctl);
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}
.ag-row.now  .ag-day{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ag-row.near .ag-day{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.ag-row.past .ag-day{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}

.ag-del{
  flex:none;width:20px;height:20px;border-radius:5px;
  display:grid;place-items:center;color:var(--ink-3);font-size:11px;
  opacity:0;transition:opacity .13s var(--ease),color .13s var(--ease);
}
.ag-row:hover .ag-del,.ag-del:focus-visible{opacity:1}
.ag-del:hover{color:var(--danger);background:var(--danger-soft)}

.done-group{opacity:.7}

@media(max-width:1080px){ #agenda-host{grid-template-columns:minmax(0,1fr)} }

/* ============================================================
   28. 대시보드 좌우 분할
   좌: 일정(추가 → 오늘 → 구분선 → 앞으로)
   우: 프로젝트 오버뷰 / 노트(최근·고정)
   ============================================================ */
.dash-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:16px;align-items:start;
}
@media(max-width:1080px){ .dash-grid{grid-template-columns:minmax(0,1fr)} }

/* 일정 추가 폼: 패널 최상단에 고정된 입력 영역 */
.ag-add{
  display:flex;flex-direction:column;gap:8px;
  padding:14px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.ag-add-top{display:flex;align-items:center;gap:8px}
.ag-add-top .inp{flex:1 1 auto;min-width:0}
.ag-add-row{display:flex;gap:8px}
.ag-add-row .inp{flex:1 1 auto;min-width:0}
.ag-add-row .btn{width:38px;padding:0;flex:none}
.ag-add-row input[type=color].inp{flex:none}

/* 오늘 / 앞으로 구역 */
.ag-sec-hd{
  display:flex;align-items:center;gap:7px;
  padding:13px 16px 8px;
}
.ag-sec-hd h3{font-size:13.5px;font-weight:650;letter-spacing:-.2px}
.ag-sec-hd .ph{font-size:16px;color:var(--accent)}
.ag-sec-hd .count{margin-left:auto}

/* 두 구역을 가르는 선. 단순 hairline 이 아니라 여백까지 포함해 구분한다. */
.ag-divider{
  height:1px;background:var(--line);
  margin:10px 0 2px;
}

/* 일정 추가 폼: 토글이 눌려 찌그러지지 않게 고정 폭을 지킨다 */
.ag-add-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-add-top .segmented{flex:0 0 auto}
.segmented button{white-space:nowrap}
.ag-add-top input[type=date]{flex:0 0 auto;width:auto;min-width:150px}
.ag-add-top select{flex:1 1 140px;min-width:0}

/* 좌: 프로젝트·노트가 주가 되므로 조금 더 넓게 */
.dash-grid{grid-template-columns:minmax(0,1fr) minmax(0,0.92fr)}

/* 할 일 날짜 라벨: 지난 것과 오늘만 색을 준다 */
.ag-due.past{color:var(--danger)}
.ag-due.now{color:var(--accent);font-weight:700}

/* 추가 폼: 제목이 위, 날짜·프로젝트가 아래 */
.ag-add-top{display:flex;align-items:center;gap:8px}
.ag-add-top input[type=date]{flex:0 0 auto;width:auto;min-width:150px}
.ag-add-top select{flex:1 1 120px;min-width:0}

/* ============================================================
   29. 폭 / 간격 조정
   ============================================================ */
.content{max-width:1560px}
.dash-grid{grid-template-columns:minmax(0,1fr) minmax(0,0.88fr);gap:18px}
/* 넓은 화면에서 좌측이 지나치게 늘어나지 않게 */
@media(min-width:1700px){ .dash-grid{grid-template-columns:minmax(0,1fr) minmax(0,0.8fr)} }

/* ============================================================
   30. 스킨 선택 UI
   ============================================================ */
.skin-wrap{position:relative;flex:none}
.skin-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-overlay);
  width:250px;padding:6px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-box);box-shadow:var(--shadow-pop);
}
.skin-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 9px;border-radius:var(--r-ctl);text-align:left;
  transition:background .13s var(--ease);
}
.skin-item:hover{background:var(--surface-2)}
.skin-item.on{background:var(--accent-soft)}
.skin-item.on .skin-name{color:var(--accent)}
.skin-item > .ph{margin-left:auto;color:var(--accent);font-size:15px}
.skin-sw{display:flex;flex:none;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.skin-sw i{display:block;width:12px;height:24px}
.skin-txt{display:flex;flex-direction:column;min-width:0}
.skin-name{font-size:13px;font-weight:650;letter-spacing:-.2px}
.skin-desc{font-size:11.5px;color:var(--ink-3)}


/* ============================================================
   31. 마인크래프트 스킨
   게임 UI 의 구성 규칙을 그대로 따른다.
     1) 배경은 블록 텍스처를 타일링하고 어둡게 덮는다 (일시정지 화면)
     2) 모든 글자에 1px 하드 그림자 (게임 폰트의 특징)
     3) 패널은 밝은 베벨, 입력칸은 인벤토리 슬롯처럼 파인 베벨
     4) 확대해도 흐려지지 않게 image-rendering: pixelated
   텍스처는 저작권 문제가 없도록 직접 생성한 16x16 픽셀 타일이다.
   ============================================================ */
:root[data-skin="minecraft"],
[data-skin="minecraft"]{
  color-scheme: light;

  --bg:#C4C4C4;
  --surface:#DCDCDC;
  --surface-2:#CFCFCF;
  --surface-3:#BDBDBD;

  --line:#8B8B8B;
  --line-strong:#565656;

  --ink:#2A2A2A;
  --ink-2:#4A4A4A;
  --ink-3:#4C4C4C;

  --accent:#30560D;
  --accent-hover:#26440A;
  --accent-vivid:#5B8731;
  --accent-ink:#FFFFFF;
  --accent-soft:#C3D3AE;
  --accent-line:#5B8731;

  --danger:#8B1A1A;
  --danger-soft:#DCC0C0;
  --danger-line:#8B1A1A;
  --warn:#7A5A00;

  --heat-0:#BDBDBD;
  --heat-1:#A9BF8E;
  --heat-2:#8FAE64;
  --heat-3:#6E9440;
  --heat-4:#4A7027;

  --r-ctl:0px; --r-box:0px; --r-pill:0px;
  --shadow-1:none; --shadow-2:none;
  --shadow-pop:4px 4px 0 rgba(0,0,0,.4);
  --ring:0 0 0 2px #FFFFFF, 0 0 0 4px #2A2A2A;

  --font-sans:Galmuri11,Pretendard,"Malgun Gothic",sans-serif;
  --font-mono:Galmuri9,Galmuri11,ui-monospace,monospace;

  --mc-hi:#FFFFFF;
  --mc-lo:#7A7A7A;
  --mc-shadow:rgba(0,0,0,.28);
  --mc-page:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAABsklEQVR42i3SB0+UQRAG4P0niopCAhESpAlHrx4oRYoFkAMO7ihGSJBiQVB61R/scxmSvf12Z+YtM7dpubN8vuXB0UzH9kjdQqZsd7zhbvX1aa53723j4cf2s4W+nbH6k/me71MvHWRTsafCcvox3WJX+nu2Uw5MNZj4xdKAFeDkY1FwkbPD/F17sz/RRHy1tzLX+jAElR28zyQXZJf5wW+TzRG18PFQ6H7GrYKr5VfE7xXOF/vlvo6+sIvyc1MY+vWh7c9clwo7GKml9se3xWGkCVrF58FqnYSoFo8/df9bHwG7XsnCCOJFt9j2KEljBQ1i1lVH33wqEucKFwUsSQPqLFLmiAkg0rh1rGCl6+nGQJW4mhQ0+Ki7U48JiisNP/Q3h2rQCSYfHUs4SFAwK2QojIEfAD7RGbrpJz9TV0EHAFKE6Z/vWjlWSkdLaiJYmpJ7yKkwRKMwfu6NEgCxlJ0RvCmeAG5o6qKKUHzJPo8ZyMb0UNMpjVVUo2gYZZ0rUnIasIubGD+s3vdgRaNg8ajiX7cDx5Mhgrf0NFzYoJvveLI1XBuvWk4QhgKYKyKuMP4HNvcdRgGQJngAAAAASUVORK5CYII=");
  --mc-panel:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAA8klEQVR42k2SSQLEIAgE+f+7jFt81JRWwsQDQZZu6Bi99zHGWquUct93aw2n1npdF3Ejc04KiOAHaUN0UodjNZbqek45p50ThuThDhKWSKJQSkogThCSPXNc7cdCgiObhHukLwwOJDh5pc6t4AQr+AhDnVbgLy2dbkwkrAPAtGrkSCmAKM9IhBxDKXJ6F1Uip/irJKmOhE4iidiA4oSt2H5OAtPv/7JBlL20pes9yopVva8MIkYOQMhc7iDQOMc4nJH/xYQzaBXATifcKqmPYKru03BR/XyXj6z5Nq3zRamSzPnjtqzuZxQGc47uM3GeFOYHU9pYPXfvVH4AAAAASUVORK5CYII=");
  --mc-side:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAABZElEQVR42j3Sxw7CQAwE0P1ULsABKQeKKKEnoYWP5iUjYSnR2p4Zl91yuVz2+/37/T4ej03T9H3/fD6/3+/n8zkcDtzdbidyvV5hgMv5fN5sNtvtli/Rti30YrGoqqquayqv10twOp3O5/PT6VQoqXC73SiRwaE6mUzW6zWc7OPxSHF8yMIBUge66zryyMvlMsIIoIo7yPoXbd3v98jTVpQbBKNKglymgin0RM2XWf2dqfqTVJ8WTDcaZNFWP5pDelAhHeoqO8yEJAYCqAZEgWjIiUDTtplqNAW57WjFEjKffnIhZHAE/2tQJ10NM0hw4HQym81Wq1W60gMVTC6OCuQcik9anWa09GN0hFyRg7ggJNiwJQk4NDuVy2b/ZACl9BmJ4eKEshAaELkZtAxQjxZFNlycQtK2xs815UWEnBdBUXwgyEHLBZ0Xqh9xxbPobCxzDkMnmqfiTy93TDJvO1sWtMwfzCeE0pwgmVMAAAAASUVORK5CYII=");
  --mc-veil:rgba(0,0,0,.34);
  --mc-panel-blend:soft-light;
}

:root[data-skin="minecraft"][data-theme="dark"],
[data-skin="minecraft"][data-theme="dark"]{
  color-scheme: dark;

  --bg:#1D1D1D;
  --surface:#3B3B3B;
  --surface-2:#2F2F2F;
  --surface-3:#262626;

  --line:#151515;
  --line-strong:#0B0B0B;

  --ink:#E8E8E8;
  --ink-2:#B0B0B0;
  --ink-3:#A5A5A5;

  --accent:#81B43A;
  --accent-hover:#93C64B;
  --accent-vivid:#7FB238;
  --accent-ink:#16240A;
  --accent-soft:#2C3A1C;
  --accent-line:#4A7027;

  --danger:#E06B6B;
  --danger-soft:#3A2020;
  --danger-line:#8B1A1A;

  --heat-0:#262626;
  --heat-1:#2C3A1C;
  --heat-2:#3F5A22;
  --heat-3:#5E8A2E;
  --heat-4:#81B43A;

  --shadow-pop:4px 4px 0 rgba(0,0,0,.7);
  --ring:0 0 0 2px #000000, 0 0 0 4px #E8E8E8;

  --mc-hi:#5A5A5A;
  --mc-lo:#0F0F0F;
  --mc-shadow:rgba(0,0,0,.6);
  --mc-page:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAABP0lEQVR42j3SCY6CQBAF0D6HRgyDiuyozHL/k80jPyGpQHXVX4pqyvv9k9i2v76fu26SfD6/ksulfj7HaXqdz9fHo7/fu3XdCqje7faES1VgDsNyOlW68/z2VAFQLATadkCA1hjH9fX6lktAIeBgAoAsXLyUJEoagp5gZTZ1ERXFEiUHHAm0HgnTk485JvN8WEE6vhgIOp5RVUQgmql2B6QgyCCED6HN8Bg1sRP46i3LR4DisPaEo5W1wogsvVyvTcatqi8z8OEWQ3Oy0kLO9mjta3Wo6zvHMFWz1uwqCw3BCPtIuSx2yAYjjAkkl+TuUgQrBEjqQTtHLyZZdMi5VrCS5Wg4HFDuEfLMxUVIlFx4RkTTO35HLZMIaG6R20fKjTqI3EAmzLUg+Lz8gjsBOsJZS25XqKQl93sLok3T/gNk8oUBuwkwJQAAAABJRU5ErkJggg==");
  --mc-panel:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAA/klEQVR42j3SW7aEMAhE0YxKr7av+Y/qnnb3Sj6wAkWBkHGe533fn89n3/e/9zzPsyxLnuu6RNd1dQ2PYsdxxCsGdLZtyx8vjBcumh0JF041y8UTDiRcpvw82dEn7ZQE5CSpQmB7j8xvBUW7ZDHKD8/krBZEh6ZJdmojduE8+bvOajIHtiLVjeov53AIB6r8TZBHJiwGR/UDUQ3gN6VUs13UwQ6bRzyKuhoG6hLJgrI2aJtZQuHBpVHDdXRsGxr2GoYdpzoz4fU9c0s6/I1VaZPRdNQ54vnAvJRh7VmlvLbrPQZFnv/bkgV7oYr4e/IOedscs2NFtK6UX6eFHfgHukWv83IqzfwAAAAASUVORK5CYII=");
  --mc-side:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAABP0lEQVR42j3SCY6CQBAF0D6HRgyDiuyozHL/k80jPyGpQHXVX4pqyvv9k9i2v76fu26SfD6/ksulfj7HaXqdz9fHo7/fu3XdCqje7faES1VgDsNyOlW68/z2VAFQLATadkCA1hjH9fX6lktAIeBgAoAsXLyUJEoagp5gZTZ1ERXFEiUHHAm0HgnTk485JvN8WEE6vhgIOp5RVUQgmql2B6QgyCCED6HN8Bg1sRP46i3LR4DisPaEo5W1wogsvVyvTcatqi8z8OEWQ3Oy0kLO9mjta3Wo6zvHMFWz1uwqCw3BCPtIuSx2yAYjjAkkl+TuUgQrBEjqQTtHLyZZdMi5VrCS5Wg4HFDuEfLMxUVIlFx4RkTTO35HLZMIaG6R20fKjTqI3EAmzLUg+Lz8gjsBOsJZS25XqKQl93sLok3T/gNk8oUBuwkwJQAAAABJRU5ErkJggg==");
  --mc-veil:rgba(0,0,0,.55);
  --mc-panel-blend:overlay;
}

/* 픽셀은 픽셀로 보여야 한다 */
:root[data-skin="minecraft"] *,
[data-skin="minecraft"] *{image-rendering:pixelated}

/* 1) 페이지 배경: 블록을 타일링하고 어둡게 덮는다 */
:root[data-skin="minecraft"] body,
[data-skin="minecraft"] body{
  font-size:13px;letter-spacing:0;
  background-color:var(--bg);
  background-image:linear-gradient(var(--mc-veil),var(--mc-veil)), var(--mc-page);
  background-size:auto, 64px 64px;
  background-repeat:repeat;
}
:root[data-skin="minecraft"] .content,
[data-skin="minecraft"] .content{background:none}

/* 사이드바 / 상단바는 돌 블록 */
:root[data-skin="minecraft"] .sidebar,
[data-skin="minecraft"] .sidebar{
  background-color:var(--surface-2);
  background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)), var(--mc-side);
  background-size:auto, 64px 64px;
  border-right:3px solid var(--line-strong);
  box-shadow:inset -2px 0 0 var(--mc-lo);
}
:root[data-skin="minecraft"] .topbar,
[data-skin="minecraft"] .topbar{
  background-color:var(--surface-2);
  background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)), var(--mc-side);
  background-size:auto, 64px 64px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:3px solid var(--line-strong);
  box-shadow:inset 0 -2px 0 var(--mc-lo);
}

/* 2) 글자 그림자: 게임 폰트의 가장 큰 특징 */
:root[data-skin="minecraft"] .topbar h1,
:root[data-skin="minecraft"] .page-head h2,
:root[data-skin="minecraft"] .panel-hd h3,
:root[data-skin="minecraft"] .ag-sec-hd h3,
:root[data-skin="minecraft"] .brand .name,
:root[data-skin="minecraft"] .btn,
:root[data-skin="minecraft"] .navitem,
:root[data-skin="minecraft"] .row .t,
:root[data-skin="minecraft"] .ag-title,
:root[data-skin="minecraft"] .metric-strip .val,
:root[data-skin="minecraft"] .chip,
:root[data-skin="minecraft"] .empty b,
:root[data-skin="minecraft"] #toast,
[data-skin="minecraft"] .topbar h1,
[data-skin="minecraft"] .page-head h2,
[data-skin="minecraft"] .panel-hd h3,
[data-skin="minecraft"] .ag-sec-hd h3,
[data-skin="minecraft"] .brand .name,
[data-skin="minecraft"] .btn,
[data-skin="minecraft"] .navitem,
[data-skin="minecraft"] .row .t,
[data-skin="minecraft"] .ag-title,
[data-skin="minecraft"] .metric-strip .val,
[data-skin="minecraft"] .chip,
[data-skin="minecraft"] .empty b,
[data-skin="minecraft"] #toast{
  text-shadow:1px 1px 0 var(--mc-shadow);
}
:root[data-skin="minecraft"] .btn.primary,
[data-skin="minecraft"] .btn.primary{text-shadow:1px 1px 0 rgba(0,0,0,.45)}

/* 3) 패널: 인벤토리 창 */
:root[data-skin="minecraft"] .panel,
:root[data-skin="minecraft"] .skin-menu,
:root[data-skin="minecraft"] .modal,
:root[data-skin="minecraft"] .gate-card,
[data-skin="minecraft"] .panel,
[data-skin="minecraft"] .skin-menu,
[data-skin="minecraft"] .modal,
[data-skin="minecraft"] .gate-card{
  background-color:var(--surface);
  background-image:var(--mc-panel);
  background-size:64px 64px;
  background-blend-mode:var(--mc-panel-blend);
  border:3px solid var(--line-strong);
  box-shadow:inset 3px 3px 0 var(--mc-hi), inset -3px -3px 0 var(--mc-lo);
}
:root[data-skin="minecraft"] .panel-hd,
:root[data-skin="minecraft"] .ag-sec-hd,
[data-skin="minecraft"] .panel-hd,
[data-skin="minecraft"] .ag-sec-hd{border-bottom-color:var(--line)}

/* 버튼: 눌리면 베벨이 뒤집힌다 */
:root[data-skin="minecraft"] .btn,
[data-skin="minecraft"] .btn{
  border:2px solid var(--line-strong);
  background:var(--surface-2);
  box-shadow:inset 2px 2px 0 var(--mc-hi), inset -2px -2px 0 var(--mc-lo);
  font-size:12px;
}
:root[data-skin="minecraft"] .btn:hover,
[data-skin="minecraft"] .btn:hover{
  background:var(--surface);
  outline:2px solid var(--mc-hi);outline-offset:-2px;   /* 게임에서 선택된 버튼 */
}
:root[data-skin="minecraft"] .btn:active,
[data-skin="minecraft"] .btn:active{
  transform:none;
  box-shadow:inset -2px -2px 0 var(--mc-hi), inset 2px 2px 0 var(--mc-lo);
}
:root[data-skin="minecraft"] .btn.primary,
[data-skin="minecraft"] .btn.primary{
  background:var(--accent-vivid);color:#FFFFFF;border-color:#2E4A16;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.32), inset -2px -2px 0 rgba(0,0,0,.36);
}
:root[data-skin="minecraft"] .btn.primary:hover,
[data-skin="minecraft"] .btn.primary:hover{background:#6B9B3A}
:root[data-skin="minecraft"] .btn.ghost,
[data-skin="minecraft"] .btn.ghost{border-color:transparent;box-shadow:none;background:none}
:root[data-skin="minecraft"] .btn.ghost:hover,
[data-skin="minecraft"] .btn.ghost:hover{background:var(--surface-2);outline:none}
:root[data-skin="minecraft"] .btn.sm,
[data-skin="minecraft"] .btn.sm{font-size:11px;border-width:2px}

/* 입력칸 = 인벤토리 슬롯 (안으로 파임) */
:root[data-skin="minecraft"] .inp,
:root[data-skin="minecraft"] .search,
[data-skin="minecraft"] .inp,
[data-skin="minecraft"] .search{
  border:2px solid var(--line-strong);
  background:var(--surface-3);
  box-shadow:inset 2px 2px 0 var(--mc-lo), inset -2px -2px 0 var(--mc-hi);
}
:root[data-skin="minecraft"] .inp:focus,
:root[data-skin="minecraft"] .search:focus-within,
[data-skin="minecraft"] .inp:focus,
[data-skin="minecraft"] .search:focus-within{
  border-color:var(--accent-vivid);
  box-shadow:inset 2px 2px 0 var(--mc-lo);
}
:root[data-skin="minecraft"] .task-check,
[data-skin="minecraft"] .task-check{
  border:2px solid var(--line-strong);border-radius:0;
  background:var(--surface-3);
  box-shadow:inset 1px 1px 0 var(--mc-lo);
}

/* 브랜드 마크 = 잔디 블록 */
/* 잔디 블록 정면 한 면. 16x16 픽셀을 그대로 키워 계단이 살아 있게 둔다.
   비스듬한 입체 아이콘이 아니라 정면에서 본 텍스처 그대로다. */
/* 잔디 블록. 직접 그린 픽셀아트 대신 실제 블록 이미지를 쓴다.
   투명 배경이라 테두리 상자 없이 블록만 띄운다. */
:root[data-skin="minecraft"] .brand .mark,
[data-skin="minecraft"] > .gate-mark{
  background:url("/grass.png") center/contain no-repeat;
  border:0;
  border-radius:0;
  box-shadow:none;
}
/* 안에 있던 공책 글리프는 숨긴다. 잔디 블록 자체가 아이콘이다. */
:root[data-skin="minecraft"] .brand .mark > *,
[data-skin="minecraft"] > .gate-mark > *{display:none}

/* 활성 메뉴 = 선택된 슬롯 */
:root[data-skin="minecraft"] .navitem.active,
[data-skin="minecraft"] .navitem.active{
  background:var(--accent-soft);
  box-shadow:inset 2px 2px 0 var(--mc-hi), inset -2px -2px 0 var(--mc-lo);
}
:root[data-skin="minecraft"] .navitem.active::before,
[data-skin="minecraft"] .navitem.active::before{background:var(--accent-vivid);width:4px}

:root[data-skin="minecraft"] .chip,
:root[data-skin="minecraft"] .tag,
:root[data-skin="minecraft"] .stale.on,
[data-skin="minecraft"] .chip,
[data-skin="minecraft"] .tag,
[data-skin="minecraft"] .stale.on{border-width:2px}
:root[data-skin="minecraft"] .heat i,
:root[data-skin="minecraft"] .heat-legend i,
[data-skin="minecraft"] .heat i,
[data-skin="minecraft"] .heat-legend i{border-radius:0}
:root[data-skin="minecraft"] #toast,
[data-skin="minecraft"] #toast{
  border-radius:0;border:2px solid var(--line-strong);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
}

/* 픽셀 폰트는 같은 글자수에서 더 넓다. 크기를 정수로 다시 맞춘다. */
:root[data-skin="minecraft"] .page-head h2,
[data-skin="minecraft"] .page-head h2{font-size:20px;max-width:40ch;line-height:1.5}
:root[data-skin="minecraft"] .page-head p,
[data-skin="minecraft"] .page-head p{font-size:12px}
:root[data-skin="minecraft"] .page-head .today,
[data-skin="minecraft"] .page-head .today{font-size:11px;letter-spacing:0}
:root[data-skin="minecraft"] .row .t,
:root[data-skin="minecraft"] .ag-title,
[data-skin="minecraft"] .row .t,
[data-skin="minecraft"] .ag-title{font-size:12px}
:root[data-skin="minecraft"] .row .m,
:root[data-skin="minecraft"] .ag-due,
:root[data-skin="minecraft"] .count,
:root[data-skin="minecraft"] .stale,
[data-skin="minecraft"] .row .m,
[data-skin="minecraft"] .ag-due,
[data-skin="minecraft"] .count,
[data-skin="minecraft"] .stale{font-size:11px}
:root[data-skin="minecraft"] .panel-hd h3,
:root[data-skin="minecraft"] .ag-sec-hd h3,
[data-skin="minecraft"] .panel-hd h3,
[data-skin="minecraft"] .ag-sec-hd h3{font-size:13px}
:root[data-skin="minecraft"] .metric-strip .val,
[data-skin="minecraft"] .metric-strip .val{font-size:17px;letter-spacing:0}
:root[data-skin="minecraft"] .navitem,
[data-skin="minecraft"] .navitem{font-size:12.5px}
:root[data-skin="minecraft"] .topbar h1,
[data-skin="minecraft"] .topbar h1{font-size:14px}

/* ------------------------------------------------------------
   마인크래프트: 텍스처 위 글자는 흰색
   게임과 같은 규칙이다. 흙/돌 배경 위 텍스트는 흰색 + 하드 그림자,
   밝은 인벤토리 패널 위 텍스트만 어둡게 둔다.
   ------------------------------------------------------------ */
:root[data-skin="minecraft"],
[data-skin="minecraft"]{
  --mc-veil:rgba(0,0,0,.52);          /* 흙 배경: 흰 글자 13:1 */
  --mc-chrome-veil:rgba(0,0,0,.58);   /* 돌 크롬: 흰 글자 11:1 */
  --mc-chrome-ink:#FFFFFF;
  --mc-chrome-ink-2:#CFCFCF;
}
:root[data-skin="minecraft"][data-theme="dark"],
[data-skin="minecraft"][data-theme="dark"]{
  --mc-veil:rgba(0,0,0,.45);
  --mc-chrome-veil:rgba(0,0,0,.5);
  --mc-chrome-ink:#F0F0F0;
  --mc-chrome-ink-2:#B8B8B8;
}

:root[data-skin="minecraft"] .sidebar,
:root[data-skin="minecraft"] .topbar,
[data-skin="minecraft"] .sidebar,
[data-skin="minecraft"] .topbar{
  background-image:linear-gradient(var(--mc-chrome-veil),var(--mc-chrome-veil)), var(--mc-side);
}

/* 사이드바 */
:root[data-skin="minecraft"] .brand .name,
:root[data-skin="minecraft"] .topbar h1,
[data-skin="minecraft"] .brand .name,
[data-skin="minecraft"] .topbar h1{color:var(--mc-chrome-ink)}
:root[data-skin="minecraft"] .brand .kicker,
:root[data-skin="minecraft"] .navgroup,
:root[data-skin="minecraft"] .side-foot,
:root[data-skin="minecraft"] .side-foot .mono,
:root[data-skin="minecraft"] .topbar .sub,
[data-skin="minecraft"] .brand .kicker,
[data-skin="minecraft"] .navgroup,
[data-skin="minecraft"] .side-foot,
[data-skin="minecraft"] .side-foot .mono,
[data-skin="minecraft"] .topbar .sub{color:var(--mc-chrome-ink-2)}
:root[data-skin="minecraft"] .navitem,
[data-skin="minecraft"] .navitem{color:var(--mc-chrome-ink)}
:root[data-skin="minecraft"] .navitem .ph,
:root[data-skin="minecraft"] .navitem .cnt,
[data-skin="minecraft"] .navitem .ph,
[data-skin="minecraft"] .navitem .cnt{color:var(--mc-chrome-ink-2)}
:root[data-skin="minecraft"] .navitem:hover,
[data-skin="minecraft"] .navitem:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
:root[data-skin="minecraft"] button.brand:hover,
[data-skin="minecraft"] button.brand:hover{background:rgba(255,255,255,.10)}
:root[data-skin="minecraft"] .side-foot,
[data-skin="minecraft"] .side-foot{border-top-color:rgba(255,255,255,.18)}

/* 활성 메뉴는 밝은 슬롯이므로 글자를 되돌린다 */
:root[data-skin="minecraft"] .navitem.active,
:root[data-skin="minecraft"] .navitem.active .ph,
:root[data-skin="minecraft"] .navitem.active .cnt,
[data-skin="minecraft"] .navitem.active,
[data-skin="minecraft"] .navitem.active .ph,
[data-skin="minecraft"] .navitem.active .cnt{color:#22380B}
:root[data-skin="minecraft"][data-theme="dark"] .navitem.active,
:root[data-skin="minecraft"][data-theme="dark"] .navitem.active .ph,
:root[data-skin="minecraft"][data-theme="dark"] .navitem.active .cnt,
[data-skin="minecraft"][data-theme="dark"] .navitem.active,
[data-skin="minecraft"][data-theme="dark"] .navitem.active .ph,
[data-skin="minecraft"][data-theme="dark"] .navitem.active .cnt{color:#CFE8A6}

/* 페이지 헤더는 흙 배경 위에 있다 */
:root[data-skin="minecraft"] .page-head h2,
[data-skin="minecraft"] .page-head h2{color:var(--mc-chrome-ink)}
:root[data-skin="minecraft"] .page-head p,
:root[data-skin="minecraft"] .page-head .today,
:root[data-skin="minecraft"] .page-head .wd,
[data-skin="minecraft"] .page-head p,
[data-skin="minecraft"] .page-head .today,
[data-skin="minecraft"] .page-head .wd{color:var(--mc-chrome-ink-2)}
:root[data-skin="minecraft"] .page-head h2,
:root[data-skin="minecraft"] .page-head p,
:root[data-skin="minecraft"] .page-head .today,
:root[data-skin="minecraft"] .navitem,
:root[data-skin="minecraft"] .brand .name,
:root[data-skin="minecraft"] .navgroup,
:root[data-skin="minecraft"] .side-foot,
:root[data-skin="minecraft"] .topbar h1,
:root[data-skin="minecraft"] .topbar .sub,
[data-skin="minecraft"] .page-head h2,
[data-skin="minecraft"] .page-head p,
[data-skin="minecraft"] .page-head .today,
[data-skin="minecraft"] .navitem,
[data-skin="minecraft"] .brand .name,
[data-skin="minecraft"] .navgroup,
[data-skin="minecraft"] .side-foot,
[data-skin="minecraft"] .topbar h1,
[data-skin="minecraft"] .topbar .sub{
  text-shadow:2px 2px 0 rgba(0,0,0,.65);
}

/* 상단바 아이콘 버튼은 어두운 크롬 위에 있으므로 밝게 */
:root[data-skin="minecraft"] .topbar .btn:not(.primary),
[data-skin="minecraft"] .topbar .btn:not(.primary){
  background:rgba(255,255,255,.10);color:var(--mc-chrome-ink);
  border-color:rgba(0,0,0,.55);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.22), inset -2px -2px 0 rgba(0,0,0,.42);
}
:root[data-skin="minecraft"] .topbar .btn:not(.primary):hover,
[data-skin="minecraft"] .topbar .btn:not(.primary):hover{background:rgba(255,255,255,.18)}
:root[data-skin="minecraft"] .search,
[data-skin="minecraft"] .search{
  background:rgba(0,0,0,.34);
  border-color:rgba(0,0,0,.6);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5), inset -2px -2px 0 rgba(255,255,255,.16);
}
:root[data-skin="minecraft"] .search input,
[data-skin="minecraft"] .search input{color:var(--mc-chrome-ink)}
:root[data-skin="minecraft"] .search input::placeholder,
[data-skin="minecraft"] .search input::placeholder{color:var(--mc-chrome-ink-2)}
:root[data-skin="minecraft"] .search .ph,
:root[data-skin="minecraft"] .search kbd,
[data-skin="minecraft"] .search .ph,
[data-skin="minecraft"] .search kbd{color:var(--mc-chrome-ink-2);border-color:rgba(255,255,255,.28)}

/* 사이드바 하단 로그아웃도 돌 텍스처 위에 있다. 크롬 글자색을 따른다. */
:root[data-skin="minecraft"] .side-foot .btn,
:root[data-skin="minecraft"] .side-foot .btn .ph,
[data-skin="minecraft"] .side-foot .btn,
[data-skin="minecraft"] .side-foot .btn .ph{
  color:var(--mc-chrome-ink);
  text-shadow:2px 2px 0 rgba(0,0,0,.65);
}
:root[data-skin="minecraft"] .side-foot .btn:hover,
[data-skin="minecraft"] .side-foot .btn:hover{
  background:rgba(255,255,255,.14);
  color:#FFFFFF;outline:none;
}

/* 테마 버튼: 현재 테마의 색 세 가지를 세로 띠로 */
.skin-btn{padding:0;overflow:hidden}
.skin-dot{display:flex;width:20px;height:20px;border-radius:5px;overflow:hidden;
  border:1px solid var(--line-strong)}
.skin-dot i{display:block;flex:1}
:root[data-skin="minecraft"] .skin-dot,
[data-skin="minecraft"] .skin-dot{border-radius:0;border-width:2px}

/* ============================================================
   32. 포켓몬 스킨
   게임 UI 의 규칙을 따른다.
     1) 대화창: 흰 바탕 + 굵은 남색 이중 테두리 + 큼직한 라운드
     2) 선택 항목 앞에 ▶ 커서
     3) 몬스터볼 마크 (위 빨강 / 아래 흰색 / 가운데 검은 띠)
     4) 둥근 글꼴, 버튼은 아래로 눌리는 입체감
   ============================================================ */
:root[data-skin="pokemon"],
[data-skin="pokemon"]{
  color-scheme: light;

  --bg:#EAF1FB;
  --surface:#FFFFFF;
  --surface-2:#F2F6FC;
  --surface-3:#E1E9F5;

  --line:#B9C8E0;
  --line-strong:#3B4C7A;

  --ink:#2B3245;
  --ink-2:#4A5470;
  --ink-3:#5D6885;

  --accent:#D40000;
  --accent-hover:#B00000;
  --accent-vivid:#EE1515;
  --accent-ink:#FFFFFF;
  --accent-soft:#FDE7E7;
  --accent-line:#F4B8B8;

  --danger:#C21B1B;
  --danger-soft:#FDECEC;
  --danger-line:#F2C4C4;
  --warn:#9A6410;

  /* 도감 게이지 느낌 */
  --heat-0:#E1E9F5;
  --heat-1:#BFE3C4;
  --heat-2:#8FD49B;
  --heat-3:#4FB96A;
  --heat-4:#2E62C4;

  --r-ctl:10px;
  --r-box:16px;
  --r-pill:999px;

  --shadow-1:0 2px 0 #C9D6EA;
  --shadow-2:0 3px 0 #C9D6EA, 0 10px 24px -12px rgba(43,50,69,.30);
  --shadow-pop:0 6px 0 #C9D6EA, 0 20px 44px -16px rgba(43,50,69,.40);
  --ring:0 0 0 3px rgba(212,0,0,.20);

  --font-sans:Jua,Pretendard,"Malgun Gothic",sans-serif;
  --pk-edge:#3B4C7A;      /* 대화창 테두리 */
  --pk-inner:#FFFFFF;     /* 테두리 안쪽 흰 링 */
  --pk-drop:#C9D6EA;      /* 버튼 아래 그림자 */
}

:root[data-skin="pokemon"][data-theme="dark"],
[data-skin="pokemon"][data-theme="dark"]{
  color-scheme: dark;

  --bg:#141B2B;
  --surface:#1F2A40;
  --surface-2:#26324B;
  --surface-3:#2C3856;

  --line:#36456A;
  --line-strong:#8FA3CC;

  --ink:#E6ECF7;
  --ink-2:#A8B6D0;
  --ink-3:#93A2BF;

  --accent:#FF7777;
  --accent-hover:#FF9494;
  --accent-vivid:#FF5A5A;
  --accent-ink:#2A0808;
  --accent-soft:#3A2028;
  --accent-line:#6E3A3A;

  --danger:#FF8A8A;
  --danger-soft:#3A2028;
  --danger-line:#6E3A3A;

  --heat-0:#2C3856;
  --heat-1:#2F5540;
  --heat-2:#3E7F58;
  --heat-3:#54A874;
  --heat-4:#6D9BF0;

  --shadow-1:0 2px 0 #0E1421;
  --shadow-2:0 3px 0 #0E1421, 0 10px 24px -12px rgba(0,0,0,.6);
  --shadow-pop:0 6px 0 #0E1421, 0 20px 44px -16px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(255,119,119,.24);

  --pk-edge:#8FA3CC;
  --pk-inner:#26324B;
  --pk-drop:#0E1421;
}

/* 둥근 글꼴은 자간이 넓어 보인다. 크기를 살짝 올린다. */
:root[data-skin="pokemon"] body,
[data-skin="pokemon"] body{font-size:14px}
:root[data-skin="pokemon"] .page-head h2,
[data-skin="pokemon"] .page-head h2{font-size:27px;letter-spacing:0}
:root[data-skin="pokemon"] .metric-strip .val,
:root[data-skin="pokemon"] .metric-lead .val,
[data-skin="pokemon"] .metric-strip .val,
[data-skin="pokemon"] .metric-lead .val{letter-spacing:0}

/* 1) 대화창 스타일 패널: 굵은 테두리 + 안쪽 흰 링 */
:root[data-skin="pokemon"] .panel,
:root[data-skin="pokemon"] .skin-menu,
:root[data-skin="pokemon"] .modal,
:root[data-skin="pokemon"] .gate-card,
[data-skin="pokemon"] .panel,
[data-skin="pokemon"] .skin-menu,
[data-skin="pokemon"] .modal,
[data-skin="pokemon"] .gate-card{
  border:3px solid var(--pk-edge);
  box-shadow:inset 0 0 0 3px var(--pk-inner), var(--shadow-2);
}
:root[data-skin="pokemon"] .panel-hd,
:root[data-skin="pokemon"] .ag-sec-hd,
[data-skin="pokemon"] .panel-hd,
[data-skin="pokemon"] .ag-sec-hd{border-bottom-color:var(--line)}

/* 버튼: 아래로 눌리는 입체감 */
:root[data-skin="pokemon"] .btn,
[data-skin="pokemon"] .btn{
  border:2px solid var(--pk-edge);
  box-shadow:0 3px 0 var(--pk-drop);
  font-weight:400;
}
:root[data-skin="pokemon"] .btn:active,
[data-skin="pokemon"] .btn:active{
  transform:translateY(3px);box-shadow:0 0 0 var(--pk-drop);
}
:root[data-skin="pokemon"] .btn.primary,
[data-skin="pokemon"] .btn.primary{
  /* 밝은 볼 레드(#EE1515)는 흰 글자 대비가 4.4:1 로 모자란다.
     색면은 vivid 로 두되, 글자가 얹히는 버튼은 진한 쪽을 쓴다. */
  background:var(--accent);border-color:#8E0C0C;
  box-shadow:0 3px 0 #8E0C0C;
}
:root[data-skin="pokemon"] .btn.primary:hover,
[data-skin="pokemon"] .btn.primary:hover{background:var(--accent-hover)}
:root[data-skin="pokemon"] .btn.primary:active,
[data-skin="pokemon"] .btn.primary:active{box-shadow:0 0 0 #8E0C0C}
:root[data-skin="pokemon"] .btn.ghost,
[data-skin="pokemon"] .btn.ghost{border-color:transparent;box-shadow:none}
:root[data-skin="pokemon"] .btn.ghost:active,
[data-skin="pokemon"] .btn.ghost:active{transform:none}

:root[data-skin="pokemon"] .inp,
:root[data-skin="pokemon"] .search,
[data-skin="pokemon"] .inp,
[data-skin="pokemon"] .search{border:2px solid var(--line)}
:root[data-skin="pokemon"] .inp:focus,
:root[data-skin="pokemon"] .search:focus-within,
[data-skin="pokemon"] .inp:focus,
[data-skin="pokemon"] .search:focus-within{border-color:var(--accent-vivid)}

/* 3) 몬스터볼 마크
   쌓임 순서가 중요하다. 배경 → ::before → ::after 순으로 그려지므로
   가운데 버튼은 반드시 ::after 로 맨 위에 올려야 반쪽이 잘리지 않는다. */
:root[data-skin="pokemon"] .brand .mark,
[data-skin="pokemon"] > .gate-mark{
  position:relative;
  border-radius:50%;
  background:#FFFFFF;
  border:2px solid #23262E;
  overflow:hidden;
  box-shadow:0 2px 0 rgba(35,38,46,.28);
}
/* 안에 들어있던 아이콘은 숨긴다 */
:root[data-skin="pokemon"] .brand .mark > *,
[data-skin="pokemon"] > .gate-mark > *{display:none}

/* 위 절반 빨강 + 가운데 검은 띠 + 아래 절반 흰색 */
:root[data-skin="pokemon"] .brand .mark::before,
[data-skin="pokemon"] > .gate-mark::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    #FF3B3B 0 calc(50% - 2px),
    #23262E calc(50% - 2px) calc(50% + 2px),
    #FFFFFF calc(50% + 2px) 100%);
}

/* 가운데 버튼: 완전한 원. 빨강 위에 얹혀야 한다. */
:root[data-skin="pokemon"] .brand .mark::after,
[data-skin="pokemon"] > .gate-mark::after{
  content:"";position:absolute;left:50%;top:50%;
  width:40%;height:40%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:#FFFFFF;
  border:2px solid #23262E;
  box-sizing:border-box;
}

/* 2) 선택 항목 앞의 커서 */
:root[data-skin="pokemon"] .navitem.active::after,
[data-skin="pokemon"] .navitem.active::after{
  content:"▶";position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--accent);
}
:root[data-skin="pokemon"] .navitem.active,
[data-skin="pokemon"] .navitem.active{padding-left:18px}
:root[data-skin="pokemon"] .navitem.active::before,
[data-skin="pokemon"] .navitem.active::before{width:0}

:root[data-skin="pokemon"] .chip,
:root[data-skin="pokemon"] .tag,
[data-skin="pokemon"] .chip,
[data-skin="pokemon"] .tag{border-width:2px}
:root[data-skin="pokemon"] .task-check,
[data-skin="pokemon"] .task-check{border-width:2px;border-radius:6px}
:root[data-skin="pokemon"] .heat i,
:root[data-skin="pokemon"] .heat-legend i,
[data-skin="pokemon"] .heat i,
[data-skin="pokemon"] .heat-legend i{border-radius:4px}
:root[data-skin="pokemon"] #toast,
[data-skin="pokemon"] #toast{border:2px solid var(--pk-edge)}

/* ============================================================
   대시보드 위젯 배치
   사용자마다 순서와 열을 바꿔 저장한다. 편집 모드에서만 손잡이가 보인다.
   ============================================================ */
.dash-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.widget{min-width:0}
.w-body{min-width:0}

.dash-grid.editing .dash-col{
  min-height:88px;
  border:1px dashed var(--line-strong);border-radius:var(--r-box);
  padding:10px;background:var(--surface-2);
}
.dash-grid.editing .widget{cursor:grab}
.dash-grid.editing .widget:active{cursor:grabbing}
.dash-grid.editing .widget.dragging{opacity:.45}
.w-bar{
  display:flex;align-items:center;gap:7px;
  padding:6px 8px 6px 6px;margin-bottom:-1px;
  border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r-box) var(--r-box) 0 0;
  background:var(--surface-2);
  font-size:12px;font-weight:650;color:var(--ink-2);
}
.w-bar .ph-dots-six-vertical{font-size:16px;color:var(--ink-3)}
.dash-grid.editing .w-body > .panel{border-top-left-radius:0;border-top-right-radius:0}

/* 위젯 보관함 */
.dash-tray{
  margin-top:16px;padding:16px 18px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-box);box-shadow:var(--shadow-1);
}
.tray-hd{display:flex;align-items:center;gap:8px}
.tray-hd h3{font-size:14px;font-weight:650;letter-spacing:-.2px}
.tray-hd .ph{font-size:16px;color:var(--accent)}
.tray-help{font-size:12px;color:var(--ink-3);margin:6px 0 12px}
.tray-items{display:flex;flex-wrap:wrap;gap:8px}
.tray-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px;font:inherit;font-size:12.5px;font-weight:600;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.tray-item:hover{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.tray-item .ph{font-size:14px}
.tray-empty{font-size:12.5px;color:var(--ink-3)}

/* 요약 위젯: 칸이 다섯이라 접힐 수 있다. 1px 틈으로 구분선을 만들어
   몇 줄로 접히든 경계가 고르게 보이도록 한다. */
.widget[data-w="stats"] .metric-strip{
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:1px;background:var(--line);
}
.widget[data-w="stats"] .metric-strip .cell{border-left:0;background:var(--surface)}

/* 빠른 실행 위젯 */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line)}
.quick{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:18px 10px;font:inherit;font-size:12.5px;font-weight:600;
  border:0;background:var(--surface);color:var(--ink);cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.quick .ph{font-size:20px;color:var(--accent)}
.quick:hover{background:var(--accent-soft);color:var(--accent)}

/* 계정 모달: 입력 칸이 여러 개라 라벨을 보이게 두고 간격을 좁힌다 */
#acct .modal{max-width:400px}
#acct .field{margin-bottom:10px}
#acct .field > label{display:block;margin-bottom:4px}

/* API 화면: 붙여넣기용 코드 상자와 방금 발급한 토큰 */
.codebox{
  margin:0;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);
  font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--ink);
  white-space:pre-wrap;word-break:break-all;
}
.tok-new{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:12px 14px;margin-bottom:12px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-ctl);
}
.tok-new b{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent)}
.tok-new code{
  width:100%;font-family:var(--font-mono);font-size:12px;
  word-break:break-all;color:var(--ink);
}


/* ============================================================
   추가 위젯: SSH · 북마크 · 메모 · D-day · 연속 기록 · 타이머
   ============================================================ */
/* 위젯 편집: 칸마다 폼을 두는 대신 텍스트로 통째로 고친다 */
.wedit{
  width:100%;resize:vertical;min-height:120px;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.7;
}
.memo-body{
  white-space:pre-wrap;word-break:break-word;
  font-size:13px;line-height:1.75;color:var(--ink);
}

/* D-day: 임박한 것만 눈에 띄게 */
.dday{
  flex:none;font-family:var(--font-mono);font-size:12px;font-weight:700;
  padding:4px 9px;border-radius:var(--r-pill,999px);
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}
.dday.near{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.dday.past{opacity:.55}

/* 연속 기록: 숫자 하나가 주인공이다 */
.streak{padding:20px 18px;text-align:center}
.streak-big{
  font-size:44px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--accent);
}
.streak-big em{font-size:16px;font-weight:700;font-style:normal;margin-left:3px;color:var(--ink-2)}
.streak-sub{margin-top:8px;font-size:12px;color:var(--ink-3)}

/* 타이머: 1초마다 이 안만 다시 그린다 */
.timer-val{font-variant-numeric:tabular-nums}


/* ============================================================
   한글 줄바꿈
   기본값은 글자 단위로 끊어서 "연구노" / "트" 처럼 잘린다.
   keep-all 로 어절을 지키고, 긴 주소만 예외로 아무 데서나 끊게 둔다.
   ============================================================ */
body{word-break:keep-all;overflow-wrap:break-word}
.modal > p,.gate-note,.gate-sub,.empty p,.tray-help,
.panel-bd > .m,.lede p,.skin-desc{
  word-break:keep-all;overflow-wrap:break-word;
}
/* 본문·주소·코드는 어절이라는 개념이 없으므로 그대로 끊는다 */
.mono,.codebox,.wedit,code,pre,.hashbar,input,textarea{
  word-break:normal;overflow-wrap:anywhere;
}
/* 모달 설명문은 줄 간격을 조금 넓혀 읽기 편하게 */
.modal > p{line-height:1.75;margin:9px 0 16px}

/* 타이머 위젯
   모드 토글은 제목 줄에 둔다. 본문에 큰 숫자와 버튼만 남겨 한눈에 읽히게. */
.tmodes{
  display:flex;flex:none;gap:1px;padding:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-ctl);
  overflow:hidden;
}
.tmode{
  flex:1 1 0;min-width:56px;padding:5px 10px;
  font:inherit;font-size:11.5px;font-weight:650;white-space:nowrap;
  border:0;background:var(--surface);color:var(--ink-3);cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.tmode:hover{background:var(--surface-2);color:var(--ink-2)}
.tmode.on{background:var(--accent);color:var(--accent-ink)}

.timer-face{padding:20px 18px;text-align:center}
.tbig{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:42px;font-weight:700;letter-spacing:-1.5px;line-height:1;
  color:var(--ink-3);
}
.tbig.run{color:var(--ink)}
.tbig.done{color:var(--accent)}
.tpresets{display:flex;justify-content:center;gap:6px;margin-top:14px}
.tpreset{
  padding:5px 11px;font:inherit;font-size:12px;font-weight:600;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.tpreset:hover{background:var(--surface-2)}
.tpreset.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.tacts{display:flex;justify-content:center;gap:8px;margin-top:16px}

/* 할 일 등록칸: 제목·날짜·프로젝트·버튼을 한 줄에 놓는다.
   두 줄로 나누면 위젯에서 세로 공간을 그만큼 잡아먹는다.
   좁아지면 알아서 접히되, 제목 칸이 가장 먼저 넓어지도록 비중을 준다. */
.ag-add-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ag-add-line .ag-t{flex:1 1 100%;min-width:0}
.ag-add-line .ag-d{flex:0 0 auto;width:auto;min-width:138px}
.ag-add-line .ag-p{flex:1 1 120px;min-width:0}
.ag-add-line .btn{width:38px;padding:0;flex:none}
/* 넓어지면 제목까지 같은 줄로 올린다 */
@media(min-width:1400px){
  .ag-add-line .ag-t{flex:1 1 150px}
}

/* 타이머 시간 직접 입력: 큰 숫자를 눌러 그 자리에서 고친다 */
.tbig.edit{cursor:text;border-bottom:1px dashed var(--line-strong);display:inline-block;padding-bottom:2px}
.tbig.edit:hover{color:var(--ink);border-bottom-color:var(--accent)}
.tbig.edit:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-ctl)}
.tbig-edit{
  width:100%;max-width:260px;margin:0 auto;text-align:center;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:38px;font-weight:700;letter-spacing:-1.5px;
  padding:2px 8px;height:auto;
}

/* 계정 모달: 무엇을 바꿀지 먼저 고르게 한다 */
.acct-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 16px}
.acct-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:12px 13px;font:inherit;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--ink);
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.acct-opt .ph{font-size:17px;color:var(--ink-3)}
.acct-opt .t{font-size:13px;font-weight:650;letter-spacing:-.2px}
.acct-opt .m{font-size:11.5px;color:var(--ink-3)}
.acct-opt:hover{background:var(--surface-2);border-color:var(--line-strong)}
.acct-opt.on{
  background:var(--accent-soft);border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.acct-opt.on .ph,.acct-opt.on .t{color:var(--accent)}
#acct .field{margin-bottom:12px}
#acct .field > label{display:block;margin-bottom:4px}

/* ============================================================
   나이트 퓨리 스킨 (드래곤 길들이기)

   투슬리스는 온몸이 검다. 초록은 눈에만 있다.
   그래서 --accent(73곳에 쓰임)는 무채색으로 두고,
   --accent-vivid(8곳)에만 형광 초록을 남겨 포인트로 쓴다.
   ============================================================ */
:root[data-skin="dragon"],
[data-skin="dragon"]{
  color-scheme: light;

  --bg:#F1F2F4;
  --surface:#FFFFFF;
  --surface-2:#EBECEF;
  --surface-3:#DFE1E5;

  --line:#DCDEE3;
  --line-strong:#A8ACB5;

  --ink:#0E1014;
  --ink-2:#3C424C;
  --ink-3:#5C636E;

  /* 버튼·제목·아이콘은 전부 검정. 초록은 --accent-vivid 에만. */
  --accent:#17191F;
  --accent-hover:#000000;
  --accent-vivid:#7DD93F;
  --accent-ink:#FFFFFF;
  --accent-soft:#E9EAED;
  --accent-line:#C3C7CE;

  --danger:#B3261E;
  --danger-soft:#F6DEDC;
  --danger-line:#B3261E;
  --warn:#7A5A00;

  /* 히트맵도 무채색 계단. 초록을 여기까지 쓰면 다시 초록초록해진다. */
  --heat-0:#E3E5E9;
  --heat-1:#C2C6CD;
  --heat-2:#8E959F;
  --heat-3:#565D68;
  --heat-4:#1B1E24;
}

:root[data-skin="dragon"][data-theme="dark"],
[data-skin="dragon"][data-theme="dark"]{
  color-scheme: dark;

  /* 파란기 없는 진짜 검정에 가깝게 */
  --bg:#08090C;
  --surface:#0F1116;
  --surface-2:#15181E;
  --surface-3:#1D212A;

  --line:#23262E;
  --line-strong:#383D47;

  --ink:#E9ECF1;
  --ink-2:#A2A9B4;
  --ink-3:#757C88;

  /* 어두운 바탕에서는 흰색이 강조가 된다. 초록은 여전히 포인트만. */
  --accent:#E9ECF1;
  --accent-hover:#FFFFFF;
  --accent-vivid:#8FE04B;
  --accent-ink:#0A0B0E;
  --accent-soft:#191C22;
  --accent-line:#333944;

  --danger:#E5686A;
  --danger-soft:#241416;
  --danger-line:#6E2E30;
  --warn:#D6A94A;

  --heat-0:#15181E;
  --heat-1:#262B33;
  --heat-2:#3D444F;
  --heat-3:#5C6470;
  --heat-4:#E9ECF1;

  --ring:0 0 0 3px rgba(233,236,241,.16);
}

/* 마크: 투슬리스 머리.
   배경 상자 없이 머리만 띄운다. 검은 실루엣이라 밝은 바탕에서도 그대로 읽힌다. */
:root[data-skin="dragon"] .brand .mark,
[data-skin="dragon"] > .gate-mark{
  background:url("/toothless.png") center/contain no-repeat;
  border:0;
  border-radius:0;
  box-shadow:none;
}
/* 안에 있던 공책 글리프는 숨긴다. 머리 자체가 아이콘이다. */
:root[data-skin="dragon"] .brand .mark > *,
[data-skin="dragon"] > .gate-mark > *{display:none}

/* 초록이 드러나는 자리는 여기 하나뿐: 지금 보고 있는 메뉴 */
:root[data-skin="dragon"] .navitem.active::before,
[data-skin="dragon"] .navitem.active::before{background:var(--accent-vivid);width:3px}

/* 계정 아이콘 */
.avatar-row{display:flex;gap:14px;align-items:flex-start;margin:6px 0 14px}
.avatar-view{
  width:64px;height:64px;flex:none;border-radius:14px;overflow:hidden;
  display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:24px;font-weight:700;color:var(--ink-3);
}
.avatar-view img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-side{min-width:0;flex:1 1 auto}
.avatar-name{font-size:14.5px;font-weight:650;letter-spacing:-.3px;margin-bottom:3px}
.avatar-side .m{font-size:11.5px;line-height:1.6;color:var(--ink-3);margin-bottom:9px}
.avatar-acts{display:flex;gap:6px;flex-wrap:wrap}
#av-err{display:block;font-size:12px;color:var(--danger);margin-top:6px}
.acct-sub{font-size:12.5px;color:var(--ink-2);margin:0 0 10px}

/* 아이콘을 올린 경우: 스킨 마크 대신 그 그림을 채운다.
   스킨별 배경·테두리가 남아 있으면 그림이 가려지므로 전부 눌러 둔다. */
.brand .mark.has-avatar,
.gate-mark.has-avatar{
  background-color:transparent !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:12px;
  overflow:hidden;
}
.brand .mark.has-avatar > *,
.gate-mark.has-avatar > *{display:none}
/* 스킨이 ::before / ::after 로 그리는 것(포켓몬 몬스터볼 등)도 같이 꺼야 한다.
   자식만 숨기면 가상 요소가 올린 그림 위에 그대로 덧칠된다. */
.brand .mark.has-avatar::before,
.brand .mark.has-avatar::after,
.gate-mark.has-avatar::before,
.gate-mark.has-avatar::after{content:none !important;display:none !important}