/* schedule.iruriedu.kr 시각 층 v1 (B안 타임라인 이식, 2026-09-26).
   토큰은 ~/unjang/_shared/design-system/tokens.json 등재값: navy #0F1218(SA-15), ivory #F6EFDC(surface-page),
   muted/edge = tonal navy 50/60, hair = tonal ivory 80. gold 는 면과 점에만 쓰고 글자색으로 쓰지 않는다.
   ink = semantic.text-primary(= primitive.navy), ink-2 = semantic.text-secondary(tonal navy 40). var(--navy) 는 현건우 담당 표시
   (칩 면, 왼쪽 막대, 점, 칩 견본)에만 쓴다. 글자, 포커스, 선택, 주 버튼은 var(--ink) 로 쓴다(값은 같고 뜻이 다르다).
   연결 막대는 ink-2 로 채워 담당색 면과 겹치지 않게 한다(Codex r3 #5). 공통은 점선 막대로 담당 실선 막대와 가른다. */
:root{
  --navy:#0F1218; --gold:#C5A572; --forest:#006241; --ink:#0F1218; --ink-2:#44484F;
  --paper:#F6EFDC; --paper-2:#EEE5CC; --surface:#FFFFFF;
  --muted:#5F636B; --edge:#7C8088; --hair:#C4BDAB; --brick:#A1392B;
  --navy-t:#E7E8EA; --gold-t:#F1E9D8; --brick-t:#F7E4E0;
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:40px; --s-7:48px; --s-8:64px;
  --t-xs:12px; --t-s:14px; --t-m:16px; --t-l:19px; --t-xl:23px; --t-2xl:28px; --t-3xl:33px; --t-4xl:40px;
  --tr-body:-0.01em; --tr-label:-0.02em; --tr-display:-0.04em;
  --lh-body:1.6; --lh-display:1.2; --lh-caption:1.5;
  --r-1:2px; --r-2:4px; --r-3:8px; --r-4:12px;
  --top-h:64px; --tab-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper);scroll-padding-top:calc(var(--top-h) + 72px)}
body{margin:0;min-width:320px;color:var(--ink);background:var(--paper);
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:var(--t-m);font-weight:450;
  line-height:var(--lh-body);letter-spacing:var(--tr-body);word-break:keep-all;overflow-wrap:break-word;
  font-feature-settings:"palt" 1,"halt" 1,"kern" 1;font-variant-numeric:tabular-nums}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,fieldset{margin:0;padding:0}
ol,ul{list-style:none}
fieldset{border:0}
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
@media (max-width:719px){.wrap{padding:0 16px}}
.muted{color:var(--muted)}.small{font-size:var(--t-xs)}.late{color:var(--brick)}
code{background:var(--paper-2);padding:1px 6px;border-radius:var(--r-1);font-size:var(--t-s)}

/* 머리와 화면 이동 */
.b-top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--hair)}
.b-top-in{display:flex;align-items:center;gap:32px;min-height:var(--top-h)}
.brand{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:750;letter-spacing:var(--tr-label);white-space:nowrap;text-decoration:none}
.brand img{width:28px;height:auto}
.brand small{font-size:var(--t-s);font-weight:500;color:var(--muted)}
.b-nav{display:flex;gap:8px;margin-right:auto}
.b-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-3);font-size:var(--t-s);font-weight:600;color:var(--muted);text-decoration:none}
.b-nav a.on{background:var(--navy-t);color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.b-me{display:flex;align-items:center;gap:8px;font-size:var(--t-s);margin-left:auto}
.b-name{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;font-weight:650;text-decoration:none}
.b-out{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--muted);text-underline-offset:4px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.dot-navy{background:var(--navy)}.dot-gold{background:var(--gold);box-shadow:inset 0 0 0 1px var(--ink)}.dot-forest{background:var(--forest)}.dot-ink{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.b-tabbar{display:none}
.foot{text-align:center;color:var(--muted);font-size:var(--t-xs);padding:40px 16px 24px}
@media (max-width:1023px){.brand small{display:none}}
@media (max-width:719px){
  :root{--top-h:56px}
  html{scroll-padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px)}
  body{padding-bottom:calc(var(--tab-h) + 24px + env(safe-area-inset-bottom))}
  .b-top-in{gap:16px}
  .brand img{width:24px}
  .brand,.b-name,.b-out{min-height:48px}
  .b-nav{display:none}
  .b-tabbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:0 0 env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--hair)}
  .b-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:var(--tab-h);font-size:var(--t-xs);font-weight:650;color:var(--muted);text-decoration:none}
  .b-tabbar a.on{color:var(--ink);box-shadow:inset 0 2px 0 var(--ink)}
}

/* 화면 머리 */
.b-hero{padding:32px 0 16px}
.b-hk{font-size:var(--t-s);font-weight:650;color:var(--ink)}
.b-hd{margin-top:4px;font-size:var(--t-2xl);font-weight:800;letter-spacing:var(--tr-display);line-height:var(--lh-display)}
.b-hs{margin-top:8px;color:var(--muted)}
.b-hs b{color:var(--ink);font-weight:700}.b-hs b.late{color:var(--brick)}
@media (max-width:719px){.b-hero{padding-top:24px}.b-hd{font-size:var(--t-xl)}}

/* 담당 칩, 보기, 검색, 버튼 */
.b-tools{display:grid;gap:16px;padding:16px 0 24px;border-top:1px solid var(--hair)}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-2);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--edge);font-size:var(--t-s);font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.fchip .sw{display:block;width:12px;height:12px;border-radius:var(--r-1);box-shadow:inset 0 0 0 1.5px var(--edge)}
.fchip.on{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fchip.on .sw-navy{background:var(--navy);box-shadow:none}
.fchip.on .sw-gold{background:var(--gold);box-shadow:inset 0 0 0 1px var(--ink)}
.fchip.on .sw-forest{background:var(--forest);box-shadow:none}
.fchip.on .sw-ink{background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.b-tools-r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-3);background:var(--paper-2)}
.seg a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-2);font-size:var(--t-s);font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.search{position:relative;display:flex;align-items:center;flex:1 1 200px;min-width:0}
.search>svg{position:absolute;left:16px;color:var(--muted);pointer-events:none}
.search input{width:100%;padding-left:40px}
/* 체크박스 제외는 :where 로 특이도를 input 그대로 둔다(올리면 .search input 여백, .file input 테두리 규칙이 진다) */
input:where(:not([type=checkbox]):not([type=radio])),select,textarea{min-height:44px;padding:0 16px;border:1px solid var(--edge);border-radius:var(--r-2);background:var(--surface);font-size:var(--t-m);-webkit-appearance:none;appearance:none;max-width:100%}
input::placeholder{color:var(--muted);opacity:1}
/* UA 조작부 색(Chromium 검색 지우기 파랑, 날짜 아이콘 검정)을 토큰 색 그림으로 바꾼다(적대검증 2차 r2tk-5) */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-left:8px;cursor:pointer;
  background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235F636B' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E")}
input[type=date]::-webkit-calendar-picker-indicator{width:18px;height:18px;padding:0;margin-left:8px;opacity:1;cursor:pointer;
  background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230F1218' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.25' y='3.25' width='11.5' height='10.5' rx='1'/%3E%3Cpath d='M2.25 6.75h11.5M5.5 1.75v3M10.5 1.75v3'/%3E%3C/svg%3E")}
textarea{padding:12px 16px;min-height:auto;line-height:var(--lh-body)}
select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235F636B' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-2);
  background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge);font-size:var(--t-s);font-weight:650;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn.primary{background:var(--ink);color:#fff;box-shadow:none}
.btn-quiet,.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.danger{color:var(--brick);box-shadow:inset 0 0 0 1px var(--brick)}
.btn.big{width:100%;min-height:48px;font-size:var(--t-m)}
.btn.tiny,.btn.sm{padding:0 12px;font-size:var(--t-xs)}
.btn.new{margin-left:auto}
@media (max-width:719px){
  .fchip{flex:1 1 auto;justify-content:center;min-height:48px;padding:0 12px}
  .btn,input:where(:not([type=checkbox]):not([type=radio])),select{min-height:48px}
  .seg{width:100%}.seg a{flex:1 1 0;justify-content:center;min-height:48px}
  .b-tools-r select{flex:1 1 120px}
  .btn.new{flex:1 1 100%;margin-left:0}
}

/* 알림 */
.alert{padding:12px 16px;border-radius:var(--r-2);margin:0 0 16px;font-size:var(--t-s);line-height:var(--lh-caption);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.alert.err{background:var(--brick-t);color:var(--brick);font-weight:600;box-shadow:inset 0 0 0 1px var(--brick)}
/* 성공은 색이 아니라 모양(체크)으로 가른다. forest 는 박성현 담당색이라 결과 알림에 쓰지 않는다 */
.alert.ok{display:flex;align-items:flex-start;gap:8px;font-weight:600}
.alert.ok::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230F1218' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M5 8.25l2 2 4-4.5'/%3E%3C/svg%3E")}
ul.alert{padding-left:32px;list-style:disc}
.notice{background:var(--gold-t);border:1px solid var(--hair);border-radius:var(--r-2);padding:12px 16px;margin:0 0 16px;font-size:var(--t-s);line-height:var(--lh-caption)}
.notice a{font-weight:650;text-underline-offset:3px}
.empty{padding:24px 16px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--edge);border-radius:var(--r-3);margin:16px 0}
.empty.small{padding:12px 16px;text-align:left;font-size:var(--t-s)}

/* 본문 2열 */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:48px}
@media (min-width:1200px){.layout{grid-template-columns:minmax(0,1fr) 320px;gap:48px}}

/* 담당, 상태, 출처 표시 */
.own{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:var(--r-1);font-size:var(--t-xs);font-weight:650;line-height:1;letter-spacing:var(--tr-label);white-space:nowrap}
.own-navy{background:var(--navy);color:#fff}
.own-gold{background:var(--gold);color:var(--ink)}
.own-forest{background:var(--forest);color:#fff}
.own-ink{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.st{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:600;white-space:nowrap;color:var(--ink)}
.st .sti{flex:none}
.st-late{color:var(--brick)}
.st-done,.st-cancel{color:var(--muted)}
.src{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 8px;border-radius:var(--r-1);box-shadow:inset 0 0 0 1px var(--hair);color:var(--muted);font-size:var(--t-xs);font-weight:500;white-space:nowrap;background:var(--surface)}
.badge{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:var(--r-1);font-size:var(--t-xs);font-weight:600;white-space:nowrap}
.badge.confirm{background:var(--gold-t);color:var(--ink)}
.badge.missing,.badge.ro{background:var(--paper-2);color:var(--ink)}
.tl-with{font-size:var(--t-xs);color:var(--muted)}

/* 타임라인 (모바일 기본 = 날짜별 목록) */
.tl-month{margin:32px 0 8px;font-size:var(--t-2xl);font-weight:800;letter-spacing:var(--tr-display);color:var(--ink);line-height:var(--lh-display)}
.tl-month:first-child{margin-top:8px}
.tl-day{position:relative;padding-bottom:16px}
.tl-day::before{content:"";position:absolute;left:27px;top:64px;bottom:0;width:2px;background:var(--hair)}
.tl-dh{position:sticky;top:var(--top-h);z-index:5;display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;gap:16px;min-height:64px;padding:8px 0;background:var(--paper)}
.tl-dn{font-size:var(--t-4xl);font-weight:800;letter-spacing:var(--tr-display);line-height:1;text-align:center;white-space:nowrap}
.tl-dw{display:flex;align-items:center;gap:8px;font-size:var(--t-m);font-weight:650}
/* 오늘 표시는 연한 틴트 + 진한 글자(상태). 사람 칩은 진한 면(사람). 한 색 한 뜻 */
.tl-now{display:inline-block;padding:0 8px;border-radius:var(--r-1);background:var(--navy-t);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-size:var(--t-xs);font-weight:700;line-height:1.75}
.tl-dd{font-size:var(--t-s);font-weight:800;color:var(--ink)}
.tl-cnt{font-style:normal;background:var(--paper-2);border-radius:999px;padding:0 8px;font-size:var(--t-xs);color:var(--ink);font-weight:600;line-height:1.75}
.tl-items{display:grid;gap:8px;padding-left:72px}
.tl-li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.tl-it{position:relative;display:block;min-width:0;padding:16px;border-radius:var(--r-3);background:var(--surface);text-decoration:none;box-shadow:inset 0 0 0 1px var(--hair)}
.tl-it::before{content:"";position:absolute;left:-50px;top:24px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 4px var(--paper)}
.tl-navy{box-shadow:inset 4px 0 0 var(--navy),inset 0 0 0 1px var(--hair)}.tl-navy::before{background:var(--navy)}
.tl-gold{box-shadow:inset 4px 0 0 var(--gold),inset 0 0 0 1px var(--hair)}.tl-gold::before{background:var(--gold);box-shadow:0 0 0 4px var(--paper),inset 0 0 0 1px var(--ink)}
.tl-forest{box-shadow:inset 4px 0 0 var(--forest),inset 0 0 0 1px var(--hair)}.tl-forest::before{background:var(--forest)}
.tl-ink{box-shadow:inset 0 0 0 1px var(--hair)}.tl-ink::before{background:var(--surface);border-radius:var(--r-1);box-shadow:0 0 0 4px var(--paper),inset 0 0 0 2px var(--ink)}
/* 점선 막대는 카드 전체를 덮는 층의 왼쪽 4px 에만 그린다. 층이 카드 모서리를 물려받아 둥근 윤곽 밖으로 나가지 않는다(적대검증 2차 r2ui-2, r2tk-3) */
.tl-ink::after,.bw-it.tl-ink::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 6px,transparent 6px 10px) left top/4px 100% no-repeat}
.tl-it.is-late{background:var(--brick-t)}
.tl-t{display:block;font-size:var(--t-m);font-weight:600;line-height:var(--lh-body)}
.tl-it.is-done .tl-t{color:var(--muted)}
.tl-it:hover .tl-t{text-decoration:underline;text-underline-offset:3px}
.tl-span{display:block;margin-top:4px;font-size:var(--t-s);color:var(--muted)}
.tl-body{display:block;margin-top:4px;font-size:var(--t-s);color:var(--muted);line-height:var(--lh-caption);white-space:pre-line}
.tl-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.tl-own{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-time{font-size:var(--t-xs);color:var(--muted)}.tl-time:empty{display:none}
/* 기한 지남과 상태 표시는 모든 폭에서 8px 띄운다. 붙으면 모양이 옆 글자에 붙어 읽힌다(적대검증 2차 r2ui-1) */
.tl-st{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tl-src{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-quick{display:flex;align-items:flex-start;padding-top:8px}
.tl-gap{position:relative;margin:0 0 16px;padding:8px 0 8px 72px;font-size:var(--t-s);color:var(--muted)}
.tl-gap::before{content:"";position:absolute;left:27px;top:0;bottom:0;border-left:2px dashed var(--hair)}
.tl-end{padding:24px 0 0 72px;font-size:var(--t-s);color:var(--muted)}
.tl-late,.tl-undated{margin:8px 0 24px}
.tl-late-h{display:flex;align-items:center;gap:8px;font-size:var(--t-l);font-weight:750;color:var(--brick);margin:0 0 8px;letter-spacing:var(--tr-label)}
.tl-undated .tl-late-h{color:var(--ink)}
.tl-late .tl-items,.tl-undated .tl-items,.tl-past .tl-items{padding-left:0}
.tl-late .tl-it::before,.tl-undated .tl-it::before,.tl-past .tl-it::before{display:none}
.tl-past{margin-top:24px;border-top:1px solid var(--hair);padding-top:8px}
.tl-past summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:var(--t-s);font-weight:650;color:var(--muted);list-style:none}
.tl-past summary::-webkit-details-marker{display:none}
.tl-past summary::before{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin:0 4px}
.tl-past[open] summary::before{transform:rotate(45deg)}
.tl-past summary small{flex-basis:100%;font-weight:450}
.tl-past .tl-items{margin-top:8px}
@media (max-width:719px){
  .tl-dh{grid-template-columns:48px minmax(0,1fr) auto auto;gap:8px}
  .tl-dn{font-size:var(--t-3xl)}
  .tl-day::before,.tl-gap::before{left:23px}
  .tl-items{padding-left:56px}
  .tl-it::before{left:-38px}
  .tl-gap,.tl-end{padding-left:56px}
  .tl-li{grid-template-columns:minmax(0,1fr);position:relative}
  .tl-m{padding-right:88px;min-height:48px}
  .tl-quick{position:absolute;right:8px;bottom:8px;padding:0}
  .tl-quick .btn{min-height:48px;min-width:48px;padding:0 12px}
}
/* 데스크톱 = 같은 행을 날짜순 표로 (F8). 행 전체가 링크 */
@media (min-width:1024px){
  .tl-day::before{display:none}
  .tl-dh{grid-template-columns:56px minmax(0,1fr) auto auto}
  .tl-items{padding-left:0;gap:0;border:1px solid var(--hair);border-radius:var(--r-3);overflow:hidden;background:var(--surface)}
  .tl-li{grid-template-columns:minmax(0,1fr) 96px;gap:0;align-items:stretch;border-bottom:1px solid var(--hair);background:var(--surface)}
  .tl-li:last-child{border-bottom:0}
  .tl-it{display:grid;grid-template-columns:96px minmax(0,1fr) 64px 104px 128px;grid-template-areas:"own main time st src";align-items:center;gap:12px;padding:12px 16px;border-radius:0;box-shadow:none}
  .tl-it::before{display:none}
  .tl-navy{box-shadow:inset 4px 0 0 var(--navy)}.tl-gold{box-shadow:inset 4px 0 0 var(--gold)}.tl-forest{box-shadow:inset 4px 0 0 var(--forest)}.tl-ink{box-shadow:none}
  /* 표 행은 overflow:hidden 목록 안에 있어 바깥 초점 테두리가 잘린다. 안쪽에 그린다(적대검증 a11y-4) */
  /* 링 바깥 끝을 5px 안쪽에 두어 4px 담당 막대 위를 지나지 않게 한다(적대검증 2차 r2tk-1) */
  .tl-it:focus-visible{outline-offset:-7px}
  /* 기한 지난 행은 pointer 가 올라가도 brick 틴트를 유지한다(적대검증 2차 r2tk-4) */
  .tl-it:not(.is-late):hover{background:var(--paper)}
  .tl-m{display:contents}
  .tl-own{grid-area:own;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
  .tl-main{grid-area:main;min-width:0}
  .tl-time{grid-area:time;font-size:var(--t-s);color:var(--ink);overflow-wrap:anywhere;min-width:0}.tl-time:empty{display:block}
  .tl-st{grid-area:st;display:flex;flex-wrap:wrap;gap:4px 8px;min-width:0}
  .tl-src{grid-area:src}
  .tl-t{font-size:var(--t-s)}
  .tl-quick{padding:8px 12px 8px 0;align-items:center;justify-content:flex-end}
  .tl-gap,.tl-end{padding-left:0}
  .tl-gap::before{display:none}
}

/* 주간 (오늘부터 7일, 날짜 행) */
.weeknav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.bw{margin-bottom:48px;border-top:2px solid var(--ink)}
.bw-r{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.bw-d{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:var(--t-s);color:var(--muted)}
.bw-d b{font-size:var(--t-xl);color:var(--ink);font-weight:750;line-height:1}
.bw-r.is-past .bw-d b{color:var(--muted);font-weight:450}
.bw-b{display:grid;gap:8px}
.bw-it{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:var(--r-3);background:var(--surface);text-decoration:none;font-size:var(--t-s);font-weight:600;box-shadow:inset 0 0 0 1px var(--hair)}
.bw-it.tl-navy{box-shadow:inset 4px 0 0 var(--navy),inset 0 0 0 1px var(--hair)}.bw-it.tl-gold{box-shadow:inset 4px 0 0 var(--gold),inset 0 0 0 1px var(--hair)}.bw-it.tl-forest{box-shadow:inset 4px 0 0 var(--forest),inset 0 0 0 1px var(--hair)}.bw-it.tl-ink{box-shadow:inset 0 0 0 1px var(--hair)}
.bw-it.is-done .bw-t{color:var(--muted)}
.bw-it small{color:var(--muted);font-weight:450}
.bw-none{font-size:var(--t-s);color:var(--muted);padding-top:12px}
.bw-add{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-s);color:var(--muted);text-decoration:none;text-underline-offset:3px}
.bw-add:hover{text-decoration:underline;color:var(--ink)}
@media (max-width:719px){.bw-r{grid-template-columns:48px minmax(0,1fr);gap:8px}.bw-it,.bw-add{min-height:48px}}

/* 옆 패널 */
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-4);padding:16px;margin-bottom:16px}
.panel h2{font-size:var(--t-s);font-weight:650;color:var(--muted);margin:0 0 8px;letter-spacing:var(--tr-label)}
.panel li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--paper-2);font-size:var(--t-s)}
.panel li:first-child{border-top:0}
.panel li small{flex-basis:100%;color:var(--muted);font-size:var(--t-xs)}
.panel .recent li{display:block;padding:0}
.panel .recent li.muted{padding:8px 0}
.panel .recent a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:48px;padding:8px 0;text-decoration:none}
.panel .recent a b{font-weight:600}
.panel .recent a:hover b{text-decoration:underline;text-underline-offset:3px}
.panel .recent a small{flex-basis:auto}
.panel .recent li.gone span{display:flex;flex-direction:column;gap:2px;padding:8px 0;color:var(--muted)}
.panel .more{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-s);font-weight:650;text-underline-offset:3px}
.panel p{margin-top:8px}
.lv{font-size:var(--t-xs);font-weight:600;color:var(--ink)}
.meter{display:inline-flex;align-items:flex-end;gap:2px;height:16px;flex:none}
.meter i{display:block;width:6px;border-radius:1px;box-shadow:inset 0 0 0 1.5px var(--edge)}
.meter i:nth-child(1){height:6px}.meter i:nth-child(2){height:11px}.meter i:nth-child(3){height:16px}
.meter.lv-ok i{background:var(--ink-2);box-shadow:none}
.meter.lv-warn i:nth-child(-n+2){background:var(--ink-2);box-shadow:none}

/* 카드, 폼 */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-4);padding:24px;margin:24px 0 16px}
.card.narrow{max-width:480px;margin:32px auto}
.card.prose{max-width:760px}
h1{font-size:var(--t-2xl);font-weight:800;letter-spacing:var(--tr-display);line-height:var(--lh-display);margin:0 0 8px}
h2{font-size:var(--t-l);font-weight:750;letter-spacing:var(--tr-label);margin:0 0 12px}
h2 small{font-size:var(--t-s);font-weight:500;color:var(--muted)}
.h-sub{margin-top:32px}
.sub{color:var(--muted);margin:0 0 16px;font-size:var(--t-s);line-height:var(--lh-caption)}
.stack{display:flex;flex-direction:column;gap:16px}
label{display:flex;flex-direction:column;gap:4px;font-size:var(--t-s);color:var(--ink);font-weight:650}
label small{font-weight:450;color:var(--muted);font-size:var(--t-xs)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.span2{grid-column:1/-1}
.check{flex-direction:row;align-items:center;gap:8px;min-height:44px}
/* 체크박스는 토큰으로 직접 그린다. 기본 모양은 안 눌린 테두리가 UA 회색 #767676 이다(적대검증 2차 r2ui-3). 고대비 모드는 기본 모양으로 */
.check input{-webkit-appearance:none;appearance:none;width:20px;height:20px;min-height:0;padding:0;margin:0;flex:none;cursor:pointer;
  border:1.5px solid var(--edge);border-radius:var(--r-1);background:var(--surface)}
.check input:checked{border-color:var(--ink);background:var(--ink) no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")}
@media (forced-colors:active){.check input{-webkit-appearance:auto;appearance:auto}}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.danger-zone{margin-top:24px;padding-top:16px;border-top:1px dashed var(--hair)}
.danger-zone + p{margin-top:16px}
.hist{list-style:none;padding:0;margin:0}
.hist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--paper-2);font-size:var(--t-s)}
@media (max-width:719px){.card{padding:16px}.form-grid{grid-template-columns:1fr}.actions .btn{flex:1 1 auto}
  .check,.panel .more,.tl-past summary{min-height:48px}}

/* 엑셀, 표 */
.dl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.upload{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.file{flex-direction:row;align-items:center;gap:12px;border:1.5px dashed var(--edge);border-radius:var(--r-3);padding:8px 16px;cursor:pointer;max-width:100%;overflow:hidden;min-height:48px;font-weight:600}
.file input{min-width:0;max-width:100%;min-height:0;padding:0;border:0;font-size:var(--t-s)}
.file input::file-selector-button{margin-right:12px;min-height:32px;padding:0 12px;border:0;border-radius:var(--r-2);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge);font:inherit;font-weight:600;cursor:pointer}
/* 모바일: 고른 파일 이름이 한 줄을 다 쓰고 도움말은 아래 줄로(320px 에서 파일 이름이 세 글자만 보이던 것. 적대검증 2차 r2ui-7) */
@media (max-width:719px){.upload .file{flex:1 1 100%;flex-wrap:wrap;row-gap:4px}.file input{flex:1 1 100%;width:100%}.file span{flex:1 1 100%}}
.tablewrap{overflow:auto;margin-bottom:16px;border:1px solid var(--hair);border-radius:var(--r-2)}
table{border-collapse:collapse;width:100%;font-size:var(--t-s);line-height:var(--lh-caption)}
th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
th{color:var(--muted);font-size:var(--t-xs);font-weight:650;background:var(--paper);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tr.bad td{background:var(--brick-t)}
.warn{display:inline-block;background:var(--gold-t);color:var(--ink);padding:0 6px;border-radius:var(--r-1);margin-top:4px}
table.list{margin:0}
table.list td a:not(.btn){display:flex;align-items:center;min-height:44px;margin:-12px 0;text-underline-offset:3px}
@media (max-width:719px){table.list td a:not(.btn){min-height:48px}}
table.list td form{margin:-4px 0}

/* 동기화 */
.sy-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 24px;padding:16px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);font-size:var(--t-s);color:var(--muted)}
.sy-legend li{display:inline-flex;align-items:center;gap:8px}
.sy-legend b{color:var(--ink);font-weight:700}
.sy-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1024px){.sy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sy{display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-4)}
.sy-h{display:flex;align-items:center;gap:8px}
.sy-role{font-size:var(--t-s);color:var(--muted)}
.sy-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--t-s)}
.sy-state strong{font-size:var(--t-l);font-weight:750}
.sy-dl{display:grid;gap:8px;font-size:var(--t-s);line-height:var(--lh-caption)}
.sy-dl div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px}
.sy-dl dt{color:var(--muted)}
.sy-host{color:var(--muted)}
.bad{color:var(--brick);font-style:normal}
.sy-btn{margin-top:auto}
.sy-top{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 32px}
.conflict{border:1px solid var(--hair);border-radius:var(--r-3);padding:16px;margin-bottom:12px}
.conflict h3{font-size:var(--t-m);margin:0 0 8px}.conflict h3 small{font-weight:450;color:var(--muted);font-size:var(--t-xs)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:var(--t-s);margin-bottom:12px}
.cmp h4{margin:0 0 4px;font-size:var(--t-xs);color:var(--muted);font-weight:650}
.cmp ul{margin:0;padding-left:16px;list-style:disc}
/* 모바일: 주 버튼을 감싼 form 도 한 줄을 다 쓴다. form 이 내용 폭이면 100% 가 form 기준이라 좁아진다(적대검증 2차 r2ui-6) */
@media (max-width:719px){.sy{padding:16px}.sy-dl div{grid-template-columns:96px minmax(0,1fr)}.cmp{grid-template-columns:1fr}.sy-top form{flex:1 1 100%}.sy-top .btn,.sy-btn .btn{width:100%}}

/* 로그인 */
.lg-wrap{display:grid;place-items:center;padding:64px 16px 96px}
.lg{width:100%;max-width:400px;display:flex;flex-direction:column;padding:32px;background:var(--surface);border-radius:var(--r-4);box-shadow:inset 0 0 0 1px var(--hair)}
.lg-logo{width:48px;height:auto}
.lg-h{margin:24px 0 0;font-size:var(--t-xl);font-weight:750;letter-spacing:var(--tr-display);line-height:var(--lh-display)}
.lg-p{margin:8px 0 24px;color:var(--muted);font-size:var(--t-s)}
.lg-err{display:flex;gap:8px;margin:0 0 16px;font-size:var(--t-s);color:var(--brick);line-height:var(--lh-caption);font-weight:600}
.lg-err svg{flex:none;margin-top:4px}
.lg-foot{margin-top:16px;font-size:var(--t-xs);color:var(--muted)}
@media (max-width:719px){.lg-wrap{padding-top:32px}.lg{padding:24px 16px;background:transparent;box-shadow:none}}

/* 안내문 */
.prose p{margin-bottom:12px}
.prose ol{list-style:decimal;padding-left:24px;margin-bottom:16px}
.prose li{margin-bottom:6px}
.prose dt{font-weight:700;margin-top:12px}.prose dd{margin:0 0 4px;color:var(--muted)}
.prose ul{list-style:disc;padding-left:24px}

@media (max-height:500px){.tl-dh{position:static}html{scroll-padding-top:calc(var(--top-h) + 8px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}