@charset "utf-8";
:root{
  --sky:#dde6e2; --panel:rgba(248,251,250,.95); --ink:#1c3340; --muted:#5a6e77;
  --line:#b8c7c3; --accent:#2c6a88; --field:#ffffff; --warn:#c2453a;
  --shade:#1f9e6e; --sun:#e8861f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sky:#0e1b21; --panel:rgba(19,33,40,.95); --ink:#e2ebe8; --muted:#93a6ac;
    --line:#2c4550; --accent:#80b9d3; --field:#0f2027; --warn:#e5776c;
    --shade:#3ccf94; --sun:#f3a24a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --sky:#0e1b21; --panel:rgba(19,33,40,.95); --ink:#e2ebe8; --muted:#93a6ac;
  --line:#2c4550; --accent:#80b9d3; --field:#0f2027; --warn:#e5776c;
  --shade:#3ccf94; --sun:#f3a24a;
  color-scheme: dark;
}
html,body{margin:0;height:100%;background:var(--sky);color:var(--ink);overflow:hidden;
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;}
#view{position:fixed;inset:0}
#view canvas{display:block;touch-action:none}
body.picking #view canvas{cursor:crosshair}
.panel{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;width:320px;
  max-width:calc(100vw - 24px);max-height:calc(100% - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow:auto;box-sizing:border-box;padding:16px 18px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
h1{font-size:19px;line-height:1.3;margin:0;font-weight:600;letter-spacing:-.01em}
.sub{font-size:12.5px;line-height:1.55;color:var(--muted);margin:4px 0 0}
.status{font-size:12.5px;line-height:1.5;margin:10px 0 0;padding:8px 10px;border-left:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);border-radius:0 6px 6px 0}
.status.err{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.status:empty{display:none}
details{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
summary{cursor:pointer;font-size:13.5px;font-weight:600;padding:4px 0}
.row{margin-top:12px}
.row > label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:5px}
.row label output{color:var(--muted);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent)}
select,input[type=date],input[type=password],input[type=text]{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:6px 8px;
  border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--ink)}
.check{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:10px}
.check input{accent-color:var(--accent);width:16px;height:16px;margin:0;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;font-size:13px;cursor:pointer;border-radius:6px;padding:7px 10px;
  border:1px solid var(--accent);background:transparent;color:var(--accent)}
button.primary{background:var(--accent);color:var(--sky)}
button[aria-pressed="true"]{background:var(--accent);color:var(--sky)}
button:disabled{opacity:.45;cursor:not-allowed}
.seg{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border:1px solid var(--accent);border-radius:8px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:8px 4px}
.seg button + button{border-left:1px solid var(--accent)}
.seg button[aria-pressed="true"]{font-weight:600}
.seg2{grid-template-columns:1fr 1fr}
.mini a{color:var(--accent)}
.tlist{margin-top:8px;display:grid;gap:3px;font-size:12.5px;font-variant-numeric:tabular-nums}
.tlist div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:3px 0}
.tlist b{font-weight:600}
#cctvBox{right:12px;top:calc(122px + env(safe-area-inset-top,0px));width:360px;max-width:calc(100vw - 24px)}
#cctvBox h2{font-size:14px;margin:0 22px 6px 0;font-weight:600}
#cctvBox video{width:100%;aspect-ratio:16/9;background:#000;border-radius:6px;display:block}
#cctvBox .x,#info .x{position:absolute;top:6px;right:6px;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;padding:4px 6px}
#busy{left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);align-items:center;gap:10px;pointer-events:none;font-weight:500;max-width:calc(100vw - 24px)}
.spin{width:16px;height:16px;flex:none;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}
.seg button:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--muted)}
.mini{font-size:12px;line-height:1.5;color:var(--muted);margin-top:6px}
.mini:empty{display:none}
.mini.err{color:var(--warn)}
.hours{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.hours button{padding:5px 0;font-size:12.5px}
.timebig{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sunline{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px}
.sunline span{font-size:12.5px;color:var(--muted);text-align:right;line-height:1.45}
.btn2{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-top:10px}
.cards{margin-top:12px;display:grid;gap:8px}
.cards:empty{display:none}
.rc{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12.5px;line-height:1.5}
.rc.best{border-color:var(--shade);border-width:1.5px}
.rc.short{border-color:#7c3aed;border-width:1.5px}
.rc h3{font-size:13px;margin:0 0 4px;font-weight:600;display:flex;justify-content:space-between}
.rc h3 b{font-weight:600;color:var(--sun)}
.rc .kv{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:1px 8px;font-variant-numeric:tabular-nums}
.rc .kv dt{color:var(--muted)}
.rc .kv dd{margin:0}
.bar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin-top:6px;background:var(--line)}
.bar i{display:block;height:100%}
.verdict{font-size:12.5px;line-height:1.55;margin-top:10px}
.key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin-top:8px}
.key span{display:flex;align-items:center;gap:5px}
.key i{width:16px;height:4px;border-radius:2px;display:inline-block}
.legend{margin-top:12px}
.legend .cap{font-size:12px;color:var(--muted);margin-bottom:4px}
.legend .gbar{height:10px;border-radius:5px}
.legend .ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
#tLegend .gbar{background:linear-gradient(90deg,#4f8a5b 0%,#9cbf6a 30%,#e1cf7e 55%,#a8714a 80%,#efeae2 100%)}
#hLegend .gbar{background:linear-gradient(90deg,#f1eee8 0%,#d9dee0 7%,#9fb3c0 20%,#5a7b92 40%,#2f4a60 100%)}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12px}
.chips span{display:flex;align-items:center;gap:6px}
.chips i{width:11px;height:11px;border-radius:3px;flex:none}

.card{position:fixed;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  font-size:13px;line-height:1.6;font-variant-numeric:tabular-nums;display:none;box-sizing:border-box}
#readout{left:344px;bottom:calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
#readout b{font-size:20px;font-weight:600}
#info{right:12px;bottom:calc(34px + env(safe-area-inset-bottom,0px));width:270px;max-width:calc(100vw - 24px)}
#info h2{font-size:15px;margin:0 22px 6px 0;font-weight:600;line-height:1.4}
#info dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0}
#info dt{color:var(--muted)}
#info dd{margin:0}
#info .x{position:absolute;top:6px;right:6px;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;padding:4px 6px}
#pickHint{left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);pointer-events:none;font-weight:500}
.fab{position:fixed;right:12px;width:46px;height:46px;border-radius:50%;padding:0;
  background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
#compass{top:calc(12px + env(safe-area-inset-top,0px))}
#home{top:calc(66px + env(safe-area-inset-top,0px))}
#credit{position:fixed;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));font-size:11px;color:var(--muted);
  text-align:right;max-width:55vw;line-height:1.4}
@media (max-width:600px), (max-height:500px){
  #credit{display:none}
  #readout{left:12px}
  #info{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}

/* 머리말과 버전 */
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ver{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
#menuBtn,#menuClose{display:none}
#toast{left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);align-items:center;gap:12px;z-index:40}
#toast button{padding:5px 10px}
/* 스마트폰: 메뉴를 열고 닫는다 */
@media (max-width:600px), (max-height:500px){
  #menuBtn{display:flex;align-items:center;gap:8px;position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:25;
    height:46px;padding:0 16px;border-radius:23px;background:var(--panel);color:var(--ink);border:1px solid var(--line);font-weight:600;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  #menuBtn svg{flex:none}
  .panel{z-index:30;width:calc(100vw - 24px);transform:translateX(calc(-100% - 24px));transition:transform .25s ease}
  body.menu-open .panel{transform:none}
  #menuClose{display:block;flex:none;color:var(--ink);border-color:var(--line);padding:6px 12px}
  #pickHint{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  #busy{top:calc(66px + env(safe-area-inset-top,0px))}
}
@media (prefers-reduced-motion: reduce){ .panel{transition:none !important} }

.hintTouch{display:none}
.key[hidden]{display:none}
@media (hover: none) and (pointer: coarse){ .hintDesk{display:none} .hintTouch{display:block} }

/* v1.4.0 운전하기 */
#driveFab{top:calc(120px + env(safe-area-inset-top,0px))}
#cctvBox{top:calc(176px + env(safe-area-inset-top,0px))}
body.driving #driveFab{background:var(--accent);color:var(--sky);border-color:var(--accent)}
#driveHud{left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);align-items:center;gap:14px;max-width:calc(100vw - 140px);z-index:22}
body.driving #driveHud{display:flex}
#driveHud .spd{white-space:nowrap}
#driveHud .spd b{font-size:30px;font-weight:600;letter-spacing:-.02em}
#driveHud .spd span{font-size:12px;color:var(--muted);margin-left:4px}
#driveHud .dinfo{min-width:0}
#roadNow{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hitMsg{color:var(--warn);font-weight:600}
#hitMsg:empty{display:none}
#driveHud .dbtn{display:flex;gap:6px}
#driveHud .dbtn button{white-space:nowrap}
#drivePad{display:none;position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:0 16px;justify-content:space-between;pointer-events:none;z-index:20}
body.driving #drivePad{display:flex}
@media (hover: hover) and (pointer: fine){ body.driving #drivePad{display:none} }
#drivePad .grp{display:flex;gap:12px;pointer-events:auto}
#drivePad button{width:70px;height:70px;padding:0;white-space:nowrap;border-radius:50%;background:var(--panel);color:var(--ink);border:1px solid var(--line);font-size:13px;font-weight:600;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#drivePad button.gas{background:var(--accent);color:var(--sky);border-color:var(--accent)}
body.driving #readout, body.driving #info, body.driving #pickHint, body.driving #busy{display:none !important}
@media (max-width:600px), (max-height:500px){ #driveHud{top:calc(66px + env(safe-area-inset-top,0px));max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center} }

/* v1.13.0 오른쪽 단추, 시간 막대, 경로 창, 걷기 안내판 */
#timeFab{top:calc(174px + env(safe-area-inset-top,0px))}
#routeFab{top:calc(228px + env(safe-area-inset-top,0px))}
#cctvBox{top:calc(282px + env(safe-area-inset-top,0px))}
.fab[aria-expanded="true"]{background:var(--accent);color:var(--sky);border-color:var(--accent)}
#timeDock{right:68px;top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));width:150px;flex-direction:column;gap:8px;z-index:35}
#timeDock:not([hidden]){display:flex}
#timeDock .x,#routeDock .x{position:absolute;top:4px;right:4px;border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;padding:4px 8px}
.tdTime{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tdSun{font-size:12px;line-height:1.4;color:var(--muted)}
.tdBody{flex:1;display:flex;gap:8px;min-height:120px}
.tdTrack{position:relative;width:46px;border-radius:23px;touch-action:none;cursor:ns-resize;background:#1d2a3a;border:1px solid var(--line)}
.tdThumb{position:absolute;left:-7px;right:-7px;height:12px;margin-top:-6px;border-radius:6px;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}
.tdTicks{display:flex;flex-direction:column;justify-content:space-between;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tdBtns{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.tdBtns button{padding:6px 0;font-size:12.5px}
#routeDock{right:68px;bottom:calc(34px + env(safe-area-inset-bottom,0px));width:360px;max-width:calc(100vw - 92px);max-height:calc(100% - 60px);overflow:auto;z-index:35}
#routeDock:not([hidden]){display:block}
#routeDock h2{font-size:15px;margin:0 26px 4px 0;font-weight:600}
#routeDock .btn2{grid-template-columns:1fr 1fr auto}
.rdrow{display:grid;grid-template-columns:1fr;gap:1px;font-size:12.5px;border-left:3px solid var(--line);padding:3px 8px;margin-top:6px;font-variant-numeric:tabular-nums}
.rdrow.best{border-left-color:var(--shade)}
.rdrow.short{border-left-color:#7c3aed}
#walkHud{left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);flex-direction:column;gap:6px;width:min(460px, calc(100vw - 140px));z-index:22}
body.walking #walkHud{display:flex}
.wtop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wbadge{font-weight:600;padding:2px 10px;border-radius:12px;color:#fff;white-space:nowrap}
.wbadge.shade{background:#1f9e6e}
.wbadge.sun{background:#e8861f}
.wbadge.night{background:#4a5560}
#walkPos{width:100%;accent-color:var(--accent);height:28px}
.wbtns{display:flex;gap:6px}
.wbtns select{width:auto}
.wbtns button{white-space:nowrap}
body.walking #readout, body.walking #info, body.walking #pickHint{display:none !important}
@media (max-width:600px), (max-height:500px){
  #timeDock{right:66px;width:132px}
  #routeDock{left:12px;right:12px;width:auto;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-height:62vh}
  #walkHud{top:calc(66px + env(safe-area-inset-top,0px));width:calc(100vw - 24px)}
}

/* v1.15.0 메뉴 정리 */
#aboutBox{margin-top:6px;border-top:0;padding-top:0}
#aboutBox > summary, details.inner > summary{font-size:12.5px;font-weight:500;color:var(--muted)}
details.inner{margin-top:8px;border-top:0;padding-top:0}
#timeFab{top:calc(120px + env(safe-area-inset-top,0px))}
#routeFab{top:calc(174px + env(safe-area-inset-top,0px))}
#driveFab{top:calc(228px + env(safe-area-inset-top,0px))}

/* v1.18.0 지면 고르기 단추 */
#groundFab{top:calc(228px + env(safe-area-inset-top,0px))}
#driveFab{top:calc(282px + env(safe-area-inset-top,0px))}
#cctvBox{top:calc(336px + env(safe-area-inset-top,0px))}
#groundDock{right:68px;top:calc(226px + env(safe-area-inset-top,0px));gap:6px;padding:6px;z-index:35}
#groundDock:not([hidden]){display:flex}
#groundDock button{white-space:nowrap;padding:8px 12px}
#groundDock button:disabled{opacity:.45}

/* v1.21.0 걷는 동안 작은 지도 */
#miniFrame{position:fixed;left:344px;top:calc(12px + env(safe-area-inset-top,0px));width:190px;height:190px;border:2px solid #fff;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;z-index:21}
#miniFrame .mn{position:absolute;top:3px;left:50%;transform:translateX(-50%);font:600 12px/1 var(--font, sans-serif);color:#fff;text-shadow:0 0 3px #000}
#miniFrame .mscale{position:absolute;right:6px;bottom:6px;font:500 10.5px/1 var(--font, sans-serif);color:#fff;text-shadow:0 0 3px #000;border-bottom:2px solid #fff;width:63px;text-align:center;padding-bottom:2px}
@media (min-width:601px) and (min-height:501px){ body.walking #walkHud{left:auto;right:68px;transform:none} }
@media (max-width:600px), (max-height:500px){
  #miniFrame{left:12px;top:calc(66px + env(safe-area-inset-top,0px));width:150px;height:150px}
  #miniFrame .mscale{width:50px}
  body.walking #walkHud{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}

/* v1.22.0 자동차 경로 카드 */
.rc.car{border-color:#2a6fdb}
.rc.car h3 b{color:#2a6fdb}
.rdrow.car{border-left-color:#2a6fdb}

@media (max-width:600px), (max-height:500px){
  #timeDock{left:12px;right:68px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-width:560px;flex-direction:column;gap:4px;padding:8px 12px}
  #timeDock .tdTime{font-size:20px}
  #timeDock .tdSun{font-size:11.5px}
  .tdBody{flex-direction:column;min-height:0;gap:3px}
  .tdTrack{width:100%;height:42px;border-radius:21px;cursor:ew-resize}
  .tdThumb{top:-7px;bottom:-7px;width:12px;height:auto;left:0;right:auto;margin-top:0;margin-left:-6px}
  .tdTicks{flex-direction:row}
  .tdBtns{grid-template-columns:repeat(5,1fr)}
}

@media (max-width:600px), (max-height:500px){ .panel{width:min(420px, calc(100vw - 24px))} }   /* 가로 화면에서는 메뉴가 화면 전체를 덮지 않게 */