:root{
  --paper:#F5F7F6; --surface:#FFFFFF; --ink:#1D2B3A; --muted:#5B6B7A;
  --grid:#D6DFE6; --tape:#F2B705; --tape-ink:#3A2E00;
  --fill:#2F6F9F; --fill-soft:#A9C7DE; --ad:#C3CDD6; --minus:#B3412E; --plus:#2E7D4F;
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141B22; --surface:#1B242D; --ink:#E6EDF2; --muted:#9AAAB8; --grid:#2E3B47;
    --tape:#F2B705; --tape-ink:#2A2100; --fill:#5FA3D6; --fill-soft:#2F4E66; --ad:#3A4856; --minus:#E8806C; --plus:#6CC191;
  }
}
:root[data-theme="dark"]{
  --paper:#141B22; --surface:#1B242D; --ink:#E6EDF2; --muted:#9AAAB8; --grid:#2E3B47;
  --tape:#F2B705; --tape-ink:#2A2100; --fill:#5FA3D6; --fill-soft:#2F4E66; --ad:#3A4856; --minus:#E8806C; --plus:#6CC191;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.65}
a{color:inherit}
:focus-visible{outline:3px solid var(--tape); outline-offset:2px}

/* header */
.site-header{background:var(--surface); border-bottom:1px solid var(--grid)}
.bar{max-width:1080px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.logo{font-weight:700; font-size:20px; text-decoration:none; display:flex; align-items:center; gap:8px}
.logo-mark{width:22px; height:22px; border:2px solid var(--ink); border-radius:50%; background:var(--tape); position:relative; flex:none}
.logo-mark::before{content:""; position:absolute; left:50%; top:2px; width:2px; height:8px; margin-left:-1px; background:var(--ink); border-radius:1px}
.logo-mark::after{content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--ink); border-radius:50%}
.tools{display:flex; gap:4px; flex-wrap:wrap; margin:0; padding:0; list-style:none; font-size:14px}
.tools a{display:block; padding:6px 10px; border-radius:6px; text-decoration:none}
.tools a:hover{background:var(--paper)}
.tools a[aria-current="page"]{background:var(--ink); color:var(--surface)}
@media (max-width:620px){
  .site-header nav{order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tools{flex-wrap:nowrap; white-space:nowrap}
}
.ad-toggle{margin-left:auto; font:inherit; font-size:13px; background:none; border:1px solid var(--grid); color:var(--muted); border-radius:6px; padding:6px 10px; cursor:pointer}

/* ad placeholders */
.ad-slot{border:2px dashed var(--ad); border-radius:var(--radius); color:var(--muted); font-size:13px;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:12px;
  background:repeating-linear-gradient(45deg,transparent 0 10px,color-mix(in srgb,var(--ad) 18%,transparent) 10px 20px)}
.ad-slot b{display:block; color:var(--ink); font-size:14px}
body.hide-ads .ad-slot{display:none}
.ad-top{max-width:1080px; margin:16px auto 0; padding:0 16px}
.ad-top .ad-slot{min-height:90px}
.ad-side .ad-slot{min-height:600px; position:sticky; top:16px}
.ad-inline .ad-slot{min-height:120px; margin:32px 0}

/* layout */
.layout{max-width:1080px; margin:0 auto; padding:24px 16px 48px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px}
@media (max-width:880px){ .layout{grid-template-columns:minmax(0,1fr)} .ad-side{display:none} }
h1{font-size:30px; line-height:1.25; margin:0 0 6px; letter-spacing:-0.5px}
.lede{color:var(--muted); margin:0 0 24px; max-width:60ch}

/* calculator panel */
.calc{background:var(--surface); border:1px solid var(--grid); border-radius:var(--radius); padding:24px}
.calc h2{font-size:17px; margin:0 0 12px}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; align-items:end}
.fields.two{grid-template-columns:1fr auto 1fr}
@media (max-width:520px){ .fields.two{grid-template-columns:minmax(0,1fr)} .swap{justify-self:center; transform:rotate(90deg)} }
label{display:block; font-size:14px; font-weight:500; margin-bottom:6px}
.input-wrap{display:flex; align-items:center; border:2px solid var(--grid); border-radius:8px; background:var(--paper)}
.input-wrap:focus-within{border-color:var(--fill)}
.input-wrap input{flex:1; min-width:0; width:100%; font:inherit; font-size:20px; font-weight:700; border:0; background:transparent; color:var(--ink); padding:9px 12px; font-variant-numeric:tabular-nums}
.input-wrap.big input{font-size:24px; padding:10px 12px}
.input-wrap input:focus{outline:none}
.unit{padding:0 12px; color:var(--muted); font-weight:500; white-space:nowrap}
select,.field-plain{width:100%; font:inherit; font-size:16px; border:2px solid var(--grid); border-radius:8px; background:var(--paper); color:var(--ink); padding:11px 10px}
.check{display:flex; align-items:center; gap:8px; font-size:15px; margin:0}
.check input{width:18px; height:18px; accent-color:var(--fill)}
.swap{color:var(--muted); font-size:22px; padding-bottom:12px}
.presets{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.presets button,.btn{font:inherit; font-size:14px; border:1px solid var(--grid); background:var(--paper); color:var(--ink); border-radius:999px; padding:6px 12px; cursor:pointer}
.presets button:hover,.btn:hover{border-color:var(--fill)}
.btn.primary{background:var(--ink); color:var(--surface); border-color:var(--ink); padding:9px 18px; font-weight:500}
.btn.danger{color:var(--minus)}
.sep{border:0; border-top:1px solid var(--grid); margin:20px 0}

/* tape-measure result */
.tape{margin-top:24px; background:var(--tape); color:var(--tape-ink); border-radius:8px; padding:14px 18px 22px; position:relative; overflow:hidden}
.tape::after{content:""; position:absolute; left:0; right:0; bottom:0; height:8px; opacity:.55;
  background:repeating-linear-gradient(90deg,var(--tape-ink) 0 1.5px,transparent 1.5px 12px)}
.tape-result{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.3}
.tape-sub{font-size:14px}
.tape-rows{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px 20px; margin-top:8px}
.tape-rows div{font-size:14px}
.tape-rows b{display:block; font-size:22px; font-variant-numeric:tabular-nums}

/* pyeong floor grid */
.floor{margin-top:20px; display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:20px; align-items:start}
@media (max-width:620px){ .floor{grid-template-columns:1fr} }
.cells{display:grid; grid-template-columns:repeat(10,1fr); gap:2px; aspect-ratio:1; background:var(--grid); border:2px solid var(--ink); padding:2px; border-radius:4px}
.cell{background:var(--surface); position:relative; overflow:hidden}
.cell.on{background:var(--fill)}
.cell.part::before{content:""; position:absolute; inset:0; width:var(--p); background:var(--fill-soft)}
.floor-note{font-size:14px; color:var(--muted)}
.floor-note strong{color:var(--ink)}

/* slope figure */
.slope-fig{margin-top:20px; background:var(--paper); border:1px solid var(--grid); border-radius:8px; padding:8px}
.slope-fig svg{display:block; width:100%; height:auto}

/* tabs */
.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.tabs button{font:inherit; font-size:15px; padding:8px 16px; border-radius:8px; border:1px solid var(--grid); background:var(--paper); color:var(--ink); cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}

/* timer */
.clock{font-size:clamp(48px,14vw,88px); font-weight:700; font-variant-numeric:tabular-nums; text-align:center; letter-spacing:1px; line-height:1.1; margin:8px 0 16px}
.clock.done{color:var(--minus)}
.row-btns{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.laps{list-style:none; padding:0; margin:16px 0 0; font-variant-numeric:tabular-nums; max-height:220px; overflow:auto}
.laps li{display:flex; justify-content:space-between; border-bottom:1px solid var(--grid); padding:6px 4px}

/* ledger */
.ledger-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; align-items:end}
.summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:18px 0}
.summary div{background:var(--paper); border:1px solid var(--grid); border-radius:8px; padding:10px 12px; font-size:14px; color:var(--muted)}
.summary b{display:block; font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums}
.month-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.month-bar strong{font-size:18px; min-width:110px; text-align:center}
.table-wrap{overflow-x:auto}
.amount{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.in{color:var(--plus)} .out{color:var(--minus)}
.del{font:inherit; font-size:13px; border:0; background:none; color:var(--muted); cursor:pointer; text-decoration:underline}
.empty{color:var(--muted); text-align:center; padding:18px}

/* article */
article{margin-top:8px; max-width:68ch}
article h2{font-size:21px; margin:36px 0 8px}
article h3{font-size:17px; margin:20px 0 6px}
article p,article li{margin:0 0 10px}
table{border-collapse:collapse; width:100%; font-size:15px; margin:8px 0 12px}
th,td{border-bottom:1px solid var(--grid); padding:8px 6px; text-align:left; vertical-align:top}
th{font-weight:500; color:var(--muted)}
.note{border-left:4px solid var(--fill); background:var(--surface); padding:12px 16px; border-radius:0 8px 8px 0}

/* home list */
.group{margin-bottom:28px}
.group h2{font-size:15px; color:var(--muted); font-weight:500; margin:0 0 8px}
.tool-list{list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--grid); border-radius:var(--radius)}
.tool-list li+li{border-top:1px solid var(--grid)}
.tool-list a{display:flex; gap:14px; align-items:baseline; padding:14px 18px; text-decoration:none}
.tool-list a:hover{background:var(--paper)}
.tool-list b{font-size:17px; min-width:120px}
.tool-list span{color:var(--muted); font-size:15px}
@media (max-width:520px){ .tool-list a{flex-direction:column; gap:2px} }

footer{border-top:1px solid var(--grid); background:var(--surface)}
footer .bar{font-size:14px; color:var(--muted); gap:20px}
footer small{flex-basis:100%; color:var(--muted)}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* ───────── 정각: 시계·스톱워치·타이머·알람 ───────── */
.layout.time-layout{padding-top:20px}
.clock-card{background:var(--surface); border:1px solid var(--grid); border-radius:var(--radius); padding:18px 20px 22px; position:relative}
.src-row{display:flex; gap:6px; flex-wrap:wrap}
.chip{font:inherit; font-size:14px; border:1px solid var(--grid); background:var(--paper); color:var(--ink); border-radius:999px; padding:6px 12px; cursor:pointer}
.chip:hover{border-color:var(--fill)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.src-row::-webkit-scrollbar{display:none}
@media (max-width:620px){ .src-row{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px 2px} .chip{white-space:nowrap; flex:none} }
.custom-row{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.custom-row .input-wrap{flex:1 1 240px}
.custom-row .input-wrap input{font-size:16px; font-weight:500}
.src-label{margin:18px 0 0; text-align:center; font-size:15px; font-weight:500}
.src-label small{display:block; color:var(--muted); font-weight:400; font-size:13px}
.datebar{text-align:center; color:var(--muted); font-size:16px; margin-top:4px}
.bigtime{font-size:clamp(50px,14.5vw,118px); font-weight:700; font-variant-numeric:tabular-nums; text-align:center; line-height:1.05; letter-spacing:-1px; margin:6px 0 12px; white-space:nowrap}
.bigtime .ms{font-size:.42em; color:var(--muted); letter-spacing:0; margin-left:2px}
.secbar{height:6px; background:var(--grid); border-radius:3px; overflow:hidden; max-width:560px; margin:0 auto}
.secbar i{display:block; height:100%; background:var(--tape); transform-origin:left center; transform:scaleX(0)}
.syncline{font-size:14px; color:var(--muted); margin-top:14px; text-align:center}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ad); margin-right:7px; vertical-align:1px}
.dot.ok{background:var(--plus)} .dot.warn{background:var(--tape)} .dot.bad{background:var(--minus)}
.tool-btns{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.countdown{display:none; text-align:center; margin-top:16px}
.countdown.on{display:block}
.countdown b{display:block; font-size:clamp(30px,8vw,52px); font-variant-numeric:tabular-nums; color:var(--fill); line-height:1.1}
.countdown.urgent b{color:var(--minus)}
.countdown span{font-size:14px; color:var(--muted)}
.panel{background:var(--surface); border:1px solid var(--grid); border-radius:var(--radius); padding:18px 20px; margin-top:16px}
.panel h2{font-size:17px; margin:0 0 12px}
.inline-fields{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.time-input{font:inherit; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; border:2px solid var(--grid); border-radius:8px; background:var(--paper); color:var(--ink); padding:6px 10px; color-scheme:light dark}
.opts{display:flex; gap:10px 18px; flex-wrap:wrap; margin-top:12px; align-items:center}
.opts select{width:auto; padding:6px 8px; font-size:14px}
.opts input[type=range],.check input[type=range]{accent-color:var(--fill); width:120px; height:auto}
.msg{font-size:14px; color:var(--muted); margin:10px 0 0}
.msg.err{color:var(--minus)}
.spin{display:inline-block; width:12px; height:12px; border:2px solid var(--grid); border-top-color:var(--fill); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-1px; margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.shortcuts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:16px}
.shortcuts a{display:block; background:var(--surface); border:1px solid var(--grid); border-radius:var(--radius); padding:12px 14px; text-decoration:none}
.shortcuts a:hover{border-color:var(--fill)}
.shortcuts b{display:block; font-size:16px}
.shortcuts span{font-size:13px; color:var(--muted)}
.kbd{display:inline-block; font-size:12px; border:1px solid var(--grid); border-bottom-width:2px; border-radius:4px; padding:0 5px; background:var(--paper); font-family:inherit}
.hint{font-size:13px; color:var(--muted); text-align:center; margin:12px 0 0}

/* 전체화면 */
.fs-close{display:none; position:absolute; top:14px; right:14px}
.fs-target:fullscreen,.fs-target.pseudo-fs{--ink:#F3F6F8; --muted:#9AAAB8; --grid:#2E3B47; --surface:#0B0F14; --paper:#161E27; --plus:#6CC191; --minus:#E8806C; --fill:#5FA3D6;
  background:#0B0F14; color:#F3F6F8; border:0; border-radius:0; display:flex; flex-direction:column; justify-content:center; padding:4vw; overflow:auto}
.fs-target.pseudo-fs{position:fixed; inset:0; z-index:100}
.fs-target:fullscreen .fs-hide,.fs-target.pseudo-fs .fs-hide{display:none}
.fs-target.pseudo-fs .fs-close{display:block}
.fs-target:fullscreen .bigtime,.fs-target.pseudo-fs .bigtime{font-size:min(18vw,38vh)}
.fs-target:fullscreen .clock,.fs-target.pseudo-fs .clock{font-size:min(17vw,36vh)}
.fs-target:fullscreen .secbar,.fs-target.pseudo-fs .secbar{max-width:70vw; height:8px}
.fs-target:fullscreen .lap-wrap,.fs-target.pseudo-fs .lap-wrap{width:100%; max-width:640px; margin:14px auto 0}
.fs-target:fullscreen .countdown b,.fs-target.pseudo-fs .countdown b{font-size:min(8vw,14vh)}

/* 스톱워치 */
.lap-table td,.lap-table th{font-variant-numeric:tabular-nums}
.lap-table td:not(:first-child),.lap-table th:not(:first-child){text-align:right}
.lap-table .fast td:nth-child(2){color:var(--plus); font-weight:700}
.lap-table .slow td:nth-child(2){color:var(--minus); font-weight:700}
.lap-wrap{max-height:320px; overflow:auto; margin-top:14px}

/* 타이머 */
.dur-fields{display:grid; grid-template-columns:repeat(3,minmax(0,120px)); gap:10px; justify-content:center}
.dur-fields label{text-align:center}
.dur-fields .input-wrap input{text-align:center; font-size:28px; padding:8px 4px}
.ringing{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .ringing{animation:none} .spin{animation:none} }

/* 알람 */
.alarm-list{list-style:none; margin:16px 0 0; padding:0}
.alarm-list li{display:flex; align-items:center; gap:14px; padding:12px 4px; border-top:1px solid var(--grid)}
.alarm-list .at{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; min-width:110px}
.alarm-list .meta{flex:1; font-size:14px; color:var(--muted); min-width:0}
.alarm-list .meta b{color:var(--ink); display:block; font-size:15px; font-weight:500; overflow-wrap:anywhere}
.alarm-list li.off .at,.alarm-list li.off .meta b{color:var(--muted)}
.switch{position:relative; width:46px; height:26px; flex:none}
.switch input{opacity:0; position:absolute; inset:0; margin:0; cursor:pointer; z-index:1}
.switch span{position:absolute; inset:0; background:var(--grid); border-radius:13px; transition:background .15s}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s}
.switch input:checked+span{background:var(--plus)}
.switch input:checked+span::after{transform:translateX(20px)}
.switch input:focus-visible+span{outline:3px solid var(--tape); outline-offset:2px}
.days{display:flex; gap:4px; flex-wrap:wrap}
.days label{margin:0; font-weight:400}
.days input{position:absolute; opacity:0; width:1px; height:1px}
.days span{display:inline-block; min-width:34px; text-align:center; padding:5px 0; border:1px solid var(--grid); border-radius:6px; background:var(--paper); cursor:pointer; font-size:14px}
.days input:checked+span{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.days input:focus-visible+span{outline:3px solid var(--tape)}
.ring-overlay{position:fixed; inset:0; z-index:200; background:rgba(8,12,16,.72); display:flex; align-items:center; justify-content:center; padding:16px}
.ring-overlay[hidden]{display:none}
.ring-box{background:var(--surface); color:var(--ink); border-radius:14px; padding:28px 24px; width:min(420px,100%); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ring-box .clock{margin:4px 0 6px}
.ring-box p{margin:0 0 18px; color:var(--muted); overflow-wrap:anywhere}
.banner{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--tape); color:var(--tape-ink); border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:14px}
.banner[hidden]{display:none}
.banner .btn{background:var(--surface); color:var(--ink)}

/* ───────── 날짜 · 디데이 · 만 나이 ───────── */
.subnav{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 18px}
.subnav a{font-size:14px; text-decoration:none; border:1px solid var(--grid); background:var(--surface); border-radius:999px; padding:6px 14px}
.subnav a:hover{border-color:var(--fill)}
.subnav a[aria-current="page"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.date-input{width:100%; font:inherit; font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; border:2px solid var(--grid); border-radius:8px; background:var(--paper); color:var(--ink); padding:8px 10px; color-scheme:light dark; min-height:48px}
.date-input:focus{outline:none; border-color:var(--fill)}
.today-link{font:inherit; font-size:13px; border:0; background:none; color:var(--fill); cursor:pointer; padding:4px 0 0; text-decoration:underline}
.big-result{font-size:clamp(34px,9vw,52px); font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums}
.dd-list{list-style:none; margin:14px 0 0; padding:0}
.dd-list li{display:flex; align-items:center; gap:14px; padding:12px 4px; border-top:1px solid var(--grid)}
.dd-list .dd{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; min-width:96px}
.dd-list .dd.past{color:var(--muted)}
.dd-list .dd.today{color:var(--minus)}
.dd-list .meta{flex:1; min-width:0; font-size:14px; color:var(--muted)}
.dd-list .meta b{display:block; color:var(--ink); font-size:15px; font-weight:500; overflow-wrap:anywhere}
.ms-table td:last-child,.ms-table th:last-child{text-align:right; white-space:nowrap}
.ms-table td{font-variant-numeric:tabular-nums}
.ms-table tr.past td{color:var(--muted)}
.ms-table tr.next td{background:color-mix(in srgb,var(--tape) 26%,transparent); font-weight:700}
.fields.dates{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); align-items:start}