/* 퇴근미터 — 앱 스타일
 *
 * 규칙 둘.
 *  · 근무 중에는 색이 없다. 액센트는 #F04A23 하나뿐이고 미터가 켜졌을 때만 쓴다.
 *  · 한글을 고정폭으로 렌더하지 않는다. 자간이 벌어진다 — 숫자만 mono, 단위·조사는 sans.
 *
 * 글자 단계는 다섯이다: 금액 / 단위 / 본문 / 라벨·버튼 / 눈금.
 * 9.5px 와 10px 를 구분하는 사람은 없다. 단계를 늘리면 위계가 아니라 잡음이 된다.
 */
:root{
  --paper:#FFFFFF; --ground:#F7F7F5; --sunk:#F1F1EE; --recess:#EBEBE8;
  --ink:#0C0C0D; --t2:#5E5E66; --t3:#96969C;
  --line:#E9E9E6; --line2:#D8D8D4; --line3:#BCBCB8;
  --acc:#F04A23; --acc-soft:#FDEDE8; --acc-line:#F7B8A5;
  --sans:"IBM Plex Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#141416; --ground:#0A0A0B; --sunk:#1B1B1E; --recess:#101012;
  --ink:#F4F4F2; --t2:#A6A6AC; --t3:#74747B;
  --line:#232326; --line2:#303036; --line3:#45454C;
  --acc:#FF6240; --acc-soft:#2B140E; --acc-line:#6B2C1B;
}}
:root[data-theme="dark"]{
  --paper:#141416; --ground:#0A0A0B; --sunk:#1B1B1E; --recess:#101012;
  --ink:#F4F4F2; --t2:#A6A6AC; --t3:#74747B;
  --line:#232326; --line2:#303036; --line3:#45454C;
  --acc:#FF6240; --acc-soft:#2B140E; --acc-line:#6B2C1B;
}
*{box-sizing:border-box;margin:0}
/* ⚠️ display 를 지정한 요소는 UA 의 [hidden] 을 이긴다. 시트·라벨을 hidden 으로
 *    감추는 코드가 여럿이라 여기서 한 번에 막는다. */
[hidden]{display:none!important}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}  /* iOS 가 제멋대로 글자를 키우지 않게 */
/* 한글은 음절 단위로 끊으면 「적으셨/습니다」처럼 말이 쪼개진다. 어절로 끊는다.
 * 긴 영문·주소는 keep-all 로는 못 끊으니 overflow-wrap 을 같이 건다. */
body{word-break:keep-all;overflow-wrap:break-word;
  background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;
  line-height:1.6;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}

.app{height:100%;display:flex;flex-direction:column}

/* ── 창 상단 ──────────────────────────────────────────────
 * titleBarStyle:'hiddenInset' 이라 왼쪽 78px 은 신호등 자리다.
 * 여기에 무엇을 놓아도 가려진다. */
.top{height:38px;flex:none;display:flex;align-items:center;gap:6px;
  padding:0 14px 0 78px;-webkit-app-region:drag}
.top button{-webkit-app-region:no-drag;font-size:12px;color:var(--t3);
  padding:4px 8px;border-radius:6px}
.top button:hover{background:var(--sunk);color:var(--ink)}
.top .acts{margin-left:auto;display:flex;gap:2px}
.back{display:flex;align-items:center;gap:6px;color:var(--ink)!important;font-weight:600}
.back::before{content:"←";font-weight:400;color:var(--t3)}
.badge{font-family:var(--mono);font-size:10px;color:var(--t3);margin-left:5px;
  font-variant-numeric:tabular-nums}

main{flex:1;min-height:0;position:relative}
.view{position:absolute;inset:0;padding:4px 26px 10px;display:none;flex-direction:column;overflow-y:auto}

/* ── 상시 문구 ────────────────────────────────────────────
 * 모든 화면 하단에 고정한다. 임금 계산 도구로 오해되면 안 된다 —
 * 이 앱이 내는 건 법정 최저 기준의 하한선이지 받을 돈이 아니다.
 * ⚠️ main 밖에 둔다. .view 안에 넣으면 화면마다 네 번 적어야 하고
 *    스크롤을 따라 올라간다. 창이 520×400 이라 .view 아래 여백을
 *    22 → 10 으로 줄여 이 줄이 차지하는 만큼을 돌려줬다. */
.disclaim{flex:none;padding:0 26px 8px;font-size:11px;line-height:1.35;color:var(--t3)}
.view.on{display:flex}

/* ── 미터 ────────────────────────────────────────────────── */
/* ⚠️ 가운데정렬을 section 에 걸면 내용이 창보다 길 때 위가 잘린다.
 *    margin:auto 로 감싸면 남을 때만 가운데로 간다. */
.mwrap{margin:auto 0;width:100%}
.eye{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.1em;color:var(--t3);margin-bottom:13px;flex-shrink:0}
.eye .dot{width:6px;height:6px;border-radius:50%;background:var(--line2);flex:none}
.hot .eye{color:var(--acc)}
.hot .eye .dot{background:var(--acc);animation:beat 2.2s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}

.lock{display:flex;align-items:flex-end;gap:14px;flex-shrink:0}
.mnum{font-family:var(--mono);font-size:clamp(46px,11vw,74px);font-weight:600;
  letter-spacing:-.055em;line-height:.84;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;min-width:0}
.mnum u{font-family:var(--sans);font-size:17px;font-weight:500;text-decoration:none;
  margin-left:7px;color:var(--t3);flex:none}
.hot .mnum{color:var(--acc)}
.hot .mnum u{color:var(--acc)}
.mnum.preview{opacity:.55}
/* ── 마스코트 히힝이 ──────────────────────────────────────
 * 걷기와 달리기는 같은 엔진이다. 축을 발밑에 두고 좌우로 기울면
 * 무게중심이 발에서 발로 옮겨 간다 — 주기와 진폭만 상태별로 바꾼다.
 * 상태등이 올라갈수록 걸음이 빨라진다 (호흡 → 걷기 → 달리기 → 안착).
 * ⚠️ transform-origin 을 지우지 말 것. 정중앙을 축으로 돌면 발을 딛는 게
 *    아니라 공중에 뜬 인형이 흔들린다. 기본값이 정확히 그거라 한 번 밟았다. */
.mascw{position:relative;line-height:0;width:66px;margin-left:auto;flex:none;
  align-self:flex-end;margin-bottom:-2px}
.masc{display:block;width:100%;aspect-ratio:1;position:relative;z-index:1;
  background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;
  transform-origin:50% 100%;transition:opacity .3s}

/* 발밑 그림자. 접지감의 대부분이 여기서 나온다 — 없으면 몸이 뜬 채로 떤다.
 * 몸이 내려앉을 때 넓어지므로 주기가 몸의 절반이다. */
.mascw::after{content:'';position:absolute;left:50%;bottom:-4px;
  width:34px;height:7px;margin-left:-17px;border-radius:50%;
  background:var(--line2);opacity:.18}

/* 0·1 은 정면 컷아웃(scripts/rig-mascot.py), 2 는 옆모습 v3(scripts/bake-side-run.py).
 * 셋 다 8칸 시트다.
 * ⚠️ 8칸이라 가로 배경이 800%. 백분율 배경위치는 (칸−이미지) 기준이라
 *    한 칸이 100/7 % 다. 끝값 114.2857% 로 8칸이 정확히 떨어진다. */
.mascw[data-lamp="0"] .masc,
.mascw[data-lamp="1"] .masc,
.mascw[data-lamp="2"] .masc{background-size:800% 100%}
/* 0 근무중 — 서서 체중만 옮긴다. 근무 중에는 색이 없듯이 움직임도 거의 없다 */
.mascw[data-lamp="0"] .masc{animation:step8 4s steps(8) infinite}
/* 1 탈출준비 — 뒤뚱뒤뚱. 슬금슬금 나갈 준비다 */
.mascw[data-lamp="1"] .masc{animation:step8 .85s steps(8) infinite}
.mascw[data-lamp="1"]::after{animation:tread .425s ease-in-out infinite}
/* 2 무료봉사 — 옆모습 갤럽. 정면 컷아웃이 아니라 새로 만든 시트다.
 * 키프레임 8장은 mascot-v3 브랜치에서 왔다. 한 바퀴 0.64s(원본 루프 80ms/프레임). */
.mascw[data-lamp="2"] .masc{animation:step8 .64s steps(8) infinite}
.mascw[data-lamp="2"]::after{animation:tread .23s ease-in-out infinite}
/* 3 퇴근완료 — 한 번 주저앉고 끝. 루프 없음 */
.mascw[data-lamp="3"] .masc{animation:settle .5s cubic-bezier(.34,1.5,.5,1) 1}

@keyframes step8{from{background-position-x:0}to{background-position-x:114.2857%}}
@keyframes run{
  0%,100%{transform:translateY(0) rotate(-5deg) scale(1.04,.95)}
  15%    {transform:translateY(-5px) rotate(0deg) scale(.98,1.03)}
  50%    {transform:translateY(0) rotate(5deg) scale(1.04,.95)}
  65%    {transform:translateY(-5px) rotate(0deg) scale(.98,1.03)}}
@keyframes tread{0%,100%{transform:scaleX(1);opacity:.2}50%{transform:scaleX(.8);opacity:.12}}
@keyframes settle{
  0%  {transform:translateY(-7px) scale(.97,1.05)}
  55% {transform:translateY(0) scale(1.06,.93)}
  100%{transform:translateY(0) scale(1,1)}}

.sb{font-size:13.5px;color:var(--t2);margin-top:11px;flex-shrink:0}
.sb b{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sb .s,.month .s{color:var(--line2);margin:0 7px}

/* ── 하루 타임라인 = 미리보기 손잡이 ────────────────────────
 * 눈금과 스크러버를 하나로 합쳤다. 가로 트랙 둘을 위아래로 쌓으면
 * 어느 쪽이 지금이고 어느 쪽이 가정인지 읽히지 않는다. */
/* ⚠️ 레인 셋이 세로로 나뉘어 있어야 한다 — 회의(위) · 슬라이더(가운데) · 핀(아래).
 *    슬라이더는 투명한 판이라 겹치는 만큼 마우스를 통째로 먹는다.
 *    한 번 겹쳐 놨다가 핀·회의에 마우스가 안 닿았다. */
.tl{margin-top:28px;position:relative;flex-shrink:0}
.tl .tr{height:3px;background:var(--line);border-radius:2px;position:relative}
.tl .pa{position:absolute;left:0;top:0;bottom:0;background:var(--line2);border-radius:2px}
.tl .ov{position:absolute;top:0;bottom:0;background:var(--acc);border-radius:2px}
/* 캘린더에서 읽은 회의. 남이 잡은 시간이라 트랙 위에 따로 깐다.
 * ⚠️ 트랙에 겹쳐 그리면 초과 구간(주황)이 끊긴 것처럼 보인다. */
.tl .meets i{position:absolute;top:-16px;height:4px;border-radius:2px;
  background:var(--line3);opacity:.9;cursor:default}
.tl .meets i:hover{opacity:1;background:var(--t3)}
.tl .mk{position:absolute;top:-5px;width:1px;height:13px;background:var(--line3)}
/* 오늘 남긴 핀. 트랙 아래로 내려 손잡이(지금)와 안 겹치게 한다. */
/* 눈금 자체는 2px 라 마우스로 못 짚는다. 투명한 손잡이를 덧대 준다. */
.tl .pins i{position:absolute;top:11px;width:14px;height:14px;transform:translateX(-7px);cursor:default}
.tl .pins i::after{content:"";position:absolute;left:6px;top:3px;width:2px;height:7px;
  border-radius:1px;background:var(--acc);opacity:.55}
.tl .pins i:hover::after,.tl .pins i.on::after{opacity:1;width:3px;left:5.5px;height:9px;top:2px}
/* 말풍선. 라벨 줄을 잠깐 덮는다 — 위로 띄우면 화면 밖으로 잘린다. */
.tip{position:absolute;top:28px;z-index:3;background:var(--ink);color:var(--paper);
  border-radius:7px;padding:5px 9px;font-size:11.5px;white-space:nowrap;pointer-events:none;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.tip b{font-family:var(--mono);font-weight:600;opacity:.72;margin-right:7px;
  font-variant-numeric:tabular-nums}
.tip::before{content:"";position:absolute;top:-4px;left:var(--ax,50%);margin-left:-4px;
  border:4px solid transparent;border-bottom-color:var(--ink);border-top:0}
.hot .tl .mk{background:var(--ink)}
.tl input[type=range]{position:absolute;left:0;right:0;top:-6px;width:100%;height:15px;
  margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:ew-resize}
.tl input[type=range]::-webkit-slider-runnable-track{height:15px;background:none}
.tl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;
  border-radius:50%;background:var(--ink);border:2px solid var(--paper);margin-top:2px;
  box-shadow:0 0 0 1px var(--line2)}
.hot .tl input[type=range]::-webkit-slider-thumb{background:var(--acc);box-shadow:none}
.tl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--acc-line)}
.tl .lb{position:relative;height:30px;margin-top:24px;font-family:var(--mono);
  font-size:10px;color:var(--t3);font-variant-numeric:tabular-nums}
.tl .lb i{position:absolute;font-style:normal;line-height:1.35;white-space:nowrap}
.tl .lb i b{display:block;font-family:var(--sans);font-size:9.5px;font-weight:400;color:var(--t3)}
.tl .lb .l0{left:0}
.tl .lb .l1{transform:translateX(-50%)}
.tl .lb .l2{right:0;text-align:right}
.hot .tl .lb .l2{color:var(--acc)}

 /* 낮에도 볼 게 있어야 한다. 이번 달 누적은 사실이라 추측 금지 원칙에 안 걸린다. */
/* 아직 안 적은 날. 하루의 대부분은 미터가 꺼져 있고, 그 시간에 할 일이다. */
.todo b{white-space:nowrap}   /* 「1시간 20분」 이 줄 사이에서 쪼개지지 않게 */
.todo{display:flex;align-items:center;gap:9px;width:100%;text-align:left;margin-top:16px;
  border:1px solid var(--line2);border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--t2)}
.todo:hover{border-color:var(--acc);color:var(--ink)}
.todo b{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.todo::after{content:"→";margin-left:auto;color:var(--t3)}

.month{font-size:11.5px;color:var(--t3);margin-top:16px;flex-shrink:0}
.month b{font-family:var(--mono);font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums}

/* 끌 수 있는데 설명이 없으면 무슨 기능인지 모른다. 미리보기 중에는 감춘다. */
.tlhint{font-size:10.5px;color:var(--t3);margin-top:2px}

/* 오늘 남긴 것. 찍기만 하고 안 보이면 찍은 줄도 모른다. */
.pinbox{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.pinlist{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
.pinlist:empty{display:none}
/* 목록과 타임라인 눈금이 같은 것임을 보이려면 서로 반응해야 한다. */
.pinrow{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--t2);
  padding:3px 6px;margin:0 -6px;border-radius:6px}
.pinrow:hover,.pinrow.on{background:var(--acc-soft)}
.pinrow .at{font-family:var(--mono);font-size:11.5px;color:var(--acc);
  font-variant-numeric:tabular-nums;flex:none;width:42px}
.pinrow .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.pinrow .del{flex:none;color:var(--t3);font-size:11px;padding:2px 5px;border-radius:4px;opacity:0}
.pinrow:hover .del{opacity:1}
.pinrow .del:hover{background:var(--sunk);color:var(--ink)}
.pinadd{display:flex;align-items:center;gap:9px}
.pinadd input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:7px;padding:6px 10px;
  font-family:var(--sans);font-size:12.5px;background:var(--paper);color:var(--ink);outline:none}
.pinadd input:focus{border-color:var(--acc)}
.pinadd .hint{font-size:10px;color:var(--t3);white-space:nowrap}

.foot{display:flex;align-items:center;gap:8px;margin-top:16px;flex-shrink:0}
.b{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:7px;
  padding:8px 15px;font-size:12.5px;font-weight:600}
.b.g{background:transparent;color:var(--ink);border-color:var(--line2);font-weight:400}
.b.sm{padding:6px 11px;font-size:11.5px}
.b:hover{opacity:.88}
.fnote{font-size:11px;color:var(--t3);margin-left:auto}

/* ── 기록 ────────────────────────────────────────────────── */
.rsum{display:flex;align-items:flex-end;gap:14px;flex-shrink:0;margin-top:6px}
.rsum .big{font-family:var(--mono);font-size:36px;font-weight:600;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;line-height:.9;color:var(--ink)}
.rsum .big u{font-family:var(--sans);font-size:14px;font-weight:500;text-decoration:none;
  margin-left:6px;color:var(--t3)}
.rsum .mt{margin-left:auto;text-align:right;font-size:11.5px;color:var(--t2);line-height:1.55}
.rsum .mt b{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* 이번 달 막대. 야근한 날만 선다 — 추측한 값이 아니라 종료를 누른 날이다. */
.stripwrap{flex-shrink:0}
.strip{display:flex;align-items:flex-end;gap:2px;height:22px;margin:18px 0 7px;
  border-bottom:1px solid var(--line2)}
.strip i{flex:1;background:var(--line);border-radius:1px;display:block;min-height:3px}
.strip i.h{background:var(--acc)}
.stlb{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--t3)}

.mhead-row{display:flex;justify-content:space-between;align-items:baseline;
  margin:22px 0 2px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:600}
.mhead-row .n{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--t3);
  font-variant-numeric:tabular-nums}
.d{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--t2);font-variant-numeric:tabular-nums;width:100%}
.d .fg{width:6px;height:6px;border-radius:50%;flex:none;background:transparent}
.d.night .fg{background:var(--acc)}
.d .dd{width:64px;flex:none}
.d .tt{width:108px;flex:none}
.d .hh{margin-left:auto;color:var(--t3)}
.d .mm{width:88px;text-align:right;font-weight:600;color:var(--ink);flex:none}
/* ── 분석 ─────────────────────────────────────────────── */
.shead2{display:flex;align-items:center;justify-content:space-between;margin-top:6px;flex-shrink:0}
.shead2 span{font-size:17px;font-weight:600;letter-spacing:-.02em}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-top:16px;flex-shrink:0}
.fig{border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.fig .v{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.fig .v.acc{color:var(--acc)}
.fig .v u{font-family:var(--sans);font-size:11px;font-weight:400;text-decoration:none;
  margin-left:3px;color:var(--t3)}
.fig .k{font-size:10.5px;color:var(--t3);margin-top:5px}
.note-ai{font-size:13px;color:var(--ink);line-height:1.75;margin-top:18px;
  border-left:2px solid var(--acc);padding:2px 0 2px 14px;flex-shrink:0}
.causes{margin-top:18px;flex:1;min-height:0;overflow-y:auto}
.cause{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.cause .lb2{width:104px;flex:none;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cause .bar{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.cause .bar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.cause .mn{width:74px;text-align:right;flex:none;font-family:var(--mono);font-size:11.5px;
  color:var(--t2);font-variant-numeric:tabular-nums}

/* ── 하루 상세 ─────────────────────────────────────────── */
.dhead{display:flex;align-items:baseline;gap:14px;margin-top:6px;flex-shrink:0}
.dtitle{font-size:17px;font-weight:600;letter-spacing:-.02em}
.damt{margin-left:auto;font-family:var(--mono);font-size:19px;font-weight:600;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--acc)}
.dsub{font-size:12px;color:var(--t3);margin-top:3px;flex-shrink:0}
/* 그날 회의. 3일 뒤엔 왜 늦었는지 기억이 안 난다 — 이게 되살려 준다. */
.dmeet{font-size:11.5px;color:var(--t3);margin-top:10px;line-height:1.7;flex-shrink:0}
.dmeet b{font-family:var(--mono);color:var(--t2);font-variant-numeric:tabular-nums}

.segs{margin-top:14px;flex:1;min-height:0;overflow-y:auto}
.seg{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.seg .sp{font-family:var(--mono);font-size:11px;color:var(--t3);flex:none;width:96px;
  font-variant-numeric:tabular-nums;padding-top:2px}
.seg .st{flex:1;min-width:0}
.seg .st input{width:100%;border:1px solid transparent;border-radius:6px;padding:3px 6px;
  margin-left:-6px;font-family:var(--sans);font-size:12.5px;background:none;color:var(--ink);outline:none}
.seg .st input:hover{border-color:var(--line)}
.seg .st input:focus{border-color:var(--acc);background:var(--paper)}
.seg .st input::placeholder{color:var(--t3)}
.seg.blank .sp{color:var(--line3)}
.seg .del{flex:none;color:var(--t3);font-size:11px;padding:3px 6px;border-radius:4px;opacity:0}
.seg:hover .del{opacity:1}
.seg .del:hover{background:var(--sunk);color:var(--ink)}
#d-add{margin-top:14px;flex-shrink:0}
#d-add input[type=time]{flex:none;width:132px;font-family:var(--mono);font-size:12px;
  border:1px solid var(--line2);border-radius:7px;padding:6px 8px;background:var(--paper);color:var(--ink)}
.dhint{font-size:11px;color:var(--t3);margin-top:10px;flex-shrink:0}

.empty{text-align:center;color:var(--t3);font-size:12.5px;margin:auto 0;line-height:1.9}
.empty b{color:var(--t2)}

/* ── 설정 시트 ────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.24);z-index:8}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);background:var(--paper);
  border-left:1px solid var(--line2);z-index:9;display:flex;flex-direction:column;
  box-shadow:-14px 0 40px -22px rgba(0,0,0,.5)}
.shead{height:38px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px 0 20px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.shead .x{color:var(--t3);font-size:13px;padding:5px 8px;border-radius:6px}
.shead .x:hover{background:var(--sunk);color:var(--ink)}
.sbody{flex:1;overflow-y:auto;padding:16px 20px 28px}
.lead{font-size:12px;color:var(--t3);margin-bottom:4px}
.grp{font-size:10.5px;letter-spacing:.06em;color:var(--t3);margin:20px 0 5px}
.f{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.f small{display:block;font-size:11px;color:var(--t3);margin-top:1px;font-weight:400}
.f .v{font-family:var(--mono);font-size:12px;color:var(--t2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.f .v.acc{color:var(--acc);font-weight:600}
.f input[type=time]{font-family:var(--mono);font-size:12px;border:1px solid var(--line2);
  border-radius:6px;padding:4px 7px;background:var(--paper);color:var(--ink)}
.sw{width:34px;height:20px;border-radius:10px;background:var(--line2);position:relative;flex:none}
.sw.on{background:var(--acc)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:left .16s}
.sw.on::after{left:16px}
/* ── 캘린더 ─────────────────────────────────────────────── */
.calwhy{font-size:11.5px;color:var(--t3);line-height:1.7;margin-bottom:10px}
.calwhy b{color:var(--t2)}
.calrow{display:flex;gap:8px;align-items:center}
.calrow input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:7px;padding:7px 10px;
  font-family:var(--mono);font-size:11px;background:var(--paper);color:var(--ink);outline:none}
.calrow input:focus{border-color:var(--acc)}
.calstat{font-size:11.5px;margin-top:8px;color:var(--t3)}
.calstat.ok{color:var(--t2)}
.calstat.bad{color:var(--acc)}
.guide{margin-top:12px;font-size:11.5px;color:var(--t2)}
.guide summary{cursor:pointer;color:var(--t3);font-size:11.5px;padding:5px 0;list-style:none}
.guide summary::before{content:"▸ ";color:var(--line3)}
.guide[open] summary::before{content:"▾ "}
.guide ol{padding-left:20px;margin:8px 0;color:var(--t2)}
.guide li{margin-bottom:7px;line-height:1.65}
.guide em{font-style:normal;color:var(--acc);font-size:11px}
.guide p{margin-top:8px;line-height:1.65}
.guide .danger{background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:7px;
  padding:9px 11px;margin-top:10px;color:var(--t2)}
.guide code{font-size:10.5px}

.formula{font-size:11px;color:var(--t3);background:var(--sunk);border-radius:7px;
  padding:10px 12px;margin-top:10px;line-height:1.65}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══ 웹 셸 전용 ══════════════════════════════════════════════════════════
 * 브라우저에서는 앱을 실제 맥 창 크기(520×430 · desktop/main.js)로 묶고,
 * 그 바깥을 받는 곳으로 쓴다. 전체 화면으로 늘리면 1440px 에서 화면의 97% 가
 * 빈 여백이 되고, 무엇을 보고 있는지도 읽히지 않는다 (실측 2026-09-16).
 *
 * ⛔ 전부 html[data-shell="web"] 스코프 안에 둔다. 스코프를 풀면 맥 앱 안에도
 *    창 그림이 하나 더 생긴다. 이 속성은 shell-web.js 가 찍는다.
 * ⛔ 신호등은 무채색이다. 근무 중에는 색이 없다.
 * ⚠️ 폰에서는 창틀을 지운다. 폰 안에 폰을 그리면 우스꽝스럽다.
 */
html[data-shell="web"],
html[data-shell="web"] body{height:auto;min-height:100%}
html[data-shell="web"] body{background:var(--ground);
  display:flex;flex-direction:column;align-items:center;gap:24px;padding:26px 20px 44px}
html[data-shell="web"] .app{width:520px;height:430px;flex:none;position:relative;
  background:var(--paper);border:1px solid var(--line2);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 16px 36px -14px rgba(0,0,0,.24)}
html[data-shell="web"] .top{position:relative}
html[data-shell="web"] .top::before{content:"";position:absolute;left:15px;top:50%;margin-top:-5px;
  width:46px;height:10px;pointer-events:none;
  background:
    radial-gradient(circle 5px at 5px 5px,var(--line2) 96%,transparent 97%),
    radial-gradient(circle 5px at 23px 5px,var(--line2) 96%,transparent 97%),
    radial-gradient(circle 5px at 41px 5px,var(--line2) 96%,transparent 97%)}
/* 시트는 창 안에 머문다 (DOM 이동은 shell-web.js) */
html[data-shell="web"] .scrim{position:absolute}
html[data-shell="web"] .sheet{position:absolute}

/* 창 바깥 — 받는 곳. 제품 화면(.app) 안에는 한 글자도 넣지 않는다 */
.wchrome{display:none}
html[data-shell="web"] .wchrome{display:flex;flex-direction:column;align-items:center;
  gap:18px;max-width:520px;text-align:center}
.wc-lead{font-size:13px;line-height:1.7;color:var(--t2);word-break:keep-all}
.wc-shots{display:flex;gap:14px;justify-content:center}
.wc-shots img{width:198px;height:auto;border-radius:10px;border:1px solid var(--line);
  background:var(--paper)}
.wc-get{display:flex;gap:8px}
.wc-get a{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:8px;
  font-size:12px;font-weight:600;text-decoration:none;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.wc-get a.g{background:transparent;color:var(--ink);border-color:var(--line2)}
.wc-get a:hover{opacity:.86}
.wc-note{font-size:11px;color:var(--t3)}

/* 넓은 화면 — 창 옆에 폰을 세운다 */
@media (min-width:1080px){
  html[data-shell="web"] body{flex-direction:row;align-items:center;justify-content:center;
    gap:44px;min-height:100vh;padding:32px}
  html[data-shell="web"] .wchrome{align-items:flex-start;text-align:left;max-width:440px}
  .wc-shots img{width:186px}
}
/* 폰 — 창틀 없이 전체. 아래로 내리면 받는 곳이 나온다 */
@media (max-width:639px){
  html[data-shell="web"] body{padding:0;gap:0;background:var(--paper)}
  html[data-shell="web"] .app{width:100%;height:auto;min-height:100dvh;
    border:0;border-radius:0;box-shadow:none}
  html[data-shell="web"] .top::before{display:none}
  /* 신호등이 없으니 그 자리(78px)도 없앤다. 안 그러면 「← 미터」가 까닭 없이 들여쓰인다 */
  html[data-shell="web"] .top{padding-left:18px}
  /* 폰 화면은 세로가 길다. 가운데 정렬하면 위아래로 빈 곳만 남는다 */
  html[data-shell="web"] .mwrap{margin:8px 0 auto}
  html[data-shell="web"] .scrim,html[data-shell="web"] .sheet{position:fixed}
  html[data-shell="web"] .wchrome{padding:28px 20px 40px;background:var(--ground);
    max-width:none;width:100%;border-top:1px solid var(--line)}
  .wc-shots img{width:44vw;max-width:198px}
}

/* 예시 데이터 표식 — 이 띠가 없으면 남의 야근을 실제 기록으로 읽는다.
 * ⛔ 색을 쓰지 않는다(근무 중에는 색이 없다). 먹지면 + 흰 글씨로 세게 둔다.
 * 지면을 내리는 규칙은 미디어쿼리보다 특정도가 높아 순서와 무관하게 이긴다. */
html[data-shell="web"] .wdemo{position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;background:var(--ink);color:var(--paper);
  font-size:12px;line-height:1.5;text-align:center}
html[data-shell="web"] .wdemo b{font-weight:600}
html[data-shell="web"] .wdemo button{height:24px;padding:0 10px;border-radius:6px;
  font-size:11px;font-weight:600;color:var(--ink);background:var(--paper);border:0;cursor:pointer}
html[data-shell="web"] .wdemo button:hover{opacity:.85}
/* 첫 페인트용 최소치. 실제 값은 shell-web.js 가 띠 높이를 재서 덮어쓴다 */
html[data-shell="web"][data-demo] body{padding-top:62px}

/* 예시를 보는 동안만, 손잡이를 끌어 보라고 눈짓한다.
 * ⛔ 색을 쓰지 않는다 — 먹지 고리가 커졌다 사라지는 것뿐이다(근무 중에는 색이 없다).
 * 한 번이라도 만지면 shell-web.js 가 data-nudge 를 떼고 조용해진다. */
@media (prefers-reduced-motion: no-preference){
  @keyframes tmNudge{
    0%,100%{box-shadow:0 0 0 0 rgba(12,12,13,.26)}
    55%{box-shadow:0 0 0 8px rgba(12,12,13,0)}
  }
  html[data-shell="web"][data-nudge] .tl input[type=range]::-webkit-slider-thumb{
    animation:tmNudge 1.9s ease-out infinite}
  html[data-shell="web"][data-nudge] .tl input[type=range]::-moz-range-thumb{
    animation:tmNudge 1.9s ease-out infinite}
}
html[data-shell="web"][data-nudge] .tlhint{color:var(--t2);font-weight:500}

/* 히힝이 말풍선 — 예시를 보는 동안, 손잡이를 끌어 보라고 한 번 말한다.
 * ⛔ DOM 을 넣지 않는다. 제품 화면은 그대로 두고 여기서 pseudo 로만 얹는다.
 *    (.mascw::after 는 발밑 그림자라 이미 쓰고 있다 — 말풍선은 ::before, 꼬리는 .masc::after)
 * ⛔ 색을 쓰지 않는다. 종이·선·먹지뿐이다.
 * 만지거나 20초가 지나면 shell-web.js 가 data-nudge 를 떼고 조용해진다. */
html[data-shell="web"][data-nudge] .mascw::before{
  content:"점을 퇴근 예정 너머로 끌어 보세요";   /* 한 줄로 — 두 줄이면 폰에서 트랙을 덮는다 */
  /* 히힝이 발치와 타임라인 사이의 빈 줄에 눕힌다.
     ⛔ 위로 올리지 말 것 — 창 위쪽에서 잘린다(실측). 트랙을 덮어도 안 된다: 끌어야 할 자리다.
     ⛔ pointer-events:none 필수. pseudo 도 부모의 히트 영역이라 손잡이를 먹는다. */
  position:absolute;top:calc(100% + 5px);right:-4px;pointer-events:none;
  width:max-content;max-width:min(232px,62vw);
  padding:7px 11px;border-radius:11px;border:1px solid var(--line2);background:var(--paper);
  font-family:var(--sans);font-size:11px;font-weight:400;line-height:1.5;color:var(--ink);
  text-align:left;white-space:normal;word-break:keep-all;z-index:3;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.4)}
html[data-shell="web"][data-nudge] .masc::after{   /* 말꼬리 — 히힝이를 가리킨다 */
  content:"";position:absolute;top:calc(100% + 1px);right:13px;width:8px;height:8px;
  pointer-events:none;background:var(--paper);
  border-left:1px solid var(--line2);border-top:1px solid var(--line2);
  transform:rotate(45deg);z-index:4}