/* Linear 계열 토큰 (DESIGN.md 기준) — 어두운 지도 위에 얹히는 도구 UI */
:root{
  --canvas:#010102; --s1:#0f1011; --s2:#141516; --s3:#18191a;
  --hair:#23252a; --hair-2:#34343a; --hair-3:#3e3e44;
  --ink:#f7f8f8; --ink-m:#d0d6e0; --ink-s:#8a8f98; --ink-t:#62666d;
  --primary:#5e6ad2; --primary-h:#828fff; --primary-f:#5e69d1;
  --ok:#27a644; --warn:#d9a441; --err:#e05260;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px;
  --sp-xl:32px; --sp-xxl:48px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Pretendard",
        "Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","D2Coding",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--canvas);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.5;letter-spacing:-.05px;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:var(--primary-h);text-decoration:none}

.wrap{max-width:1120px;margin:0 auto;padding:var(--sp-xl) var(--sp-lg) 96px}

/* ── 헤더 ─────────────────────────────────────────── */
header{display:flex;align-items:baseline;gap:var(--sp-sm);
  padding-bottom:var(--sp-lg);border-bottom:1px solid var(--hair);margin-bottom:var(--sp-xl)}
header h1{font-size:28px;font-weight:600;letter-spacing:-.6px}
header .dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--primary);
  align-self:center;box-shadow:0 0 12px var(--primary)}
header p{color:var(--ink-s);font-size:14px;margin-left:auto}

/* ── 단계 카드 ────────────────────────────────────── */
.step{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--sp-lg);margin-bottom:var(--sp-md);transition:border-color .18s ease,opacity .18s}
.step[aria-disabled="true"]{opacity:.4;pointer-events:none}
.step h2{font-size:22px;font-weight:500;letter-spacing:-.4px;
  display:flex;align-items:center;gap:var(--sp-sm);margin-bottom:var(--sp-xs)}
.step h2 .n{width:24px;height:24px;flex:none;border-radius:var(--r-pill);
  background:var(--s3);border:1px solid var(--hair-2);color:var(--ink-s);
  font-size:12px;font-weight:600;display:grid;place-items:center;letter-spacing:0}
.step.done h2 .n{background:var(--primary);border-color:var(--primary);color:#fff}
.step .hint{color:var(--ink-m);font-size:14px;margin-bottom:var(--sp-md);line-height:1.7}
.step .hint b{color:var(--ink);font-weight:600}
.step .hint .sub{color:var(--ink-t);font-size:13px}

/* ── 업로드 ───────────────────────────────────────── */
.drop{display:block;border:1px dashed var(--hair-2);border-radius:var(--r-lg);padding:var(--sp-xxl) var(--sp-lg);
  text-align:center;cursor:pointer;transition:.18s;background:var(--canvas)}
.drop:hover,.drop.over{border-color:var(--primary);background:#0a0a14}
.drop strong{display:block;font-size:18px;font-weight:500;margin-bottom:var(--sp-xxs)}
.drop span{color:var(--ink-s);font-size:14px}
.drop input{display:none}

/* ── 폼 ──────────────────────────────────────────── */
.grid{display:grid;gap:var(--sp-md)}
.g2{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
label.f{display:block}
label.f>span{display:block;font-size:13px;font-weight:500;color:var(--ink-s);
  letter-spacing:.4px;margin-bottom:6px}
input[type=text],input[type=date],input[type=number],select{
  width:100%;background:var(--s1);color:var(--ink);font-family:var(--font);font-size:15px;
  border:1px solid var(--hair-2);border-radius:var(--r-md);padding:9px 12px;outline:none}
input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(94,106,210,.22)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-s) 50%),
  linear-gradient(135deg,var(--ink-s) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
input[type=range]{width:100%;accent-color:var(--primary)}
.check{display:flex;align-items:center;gap:var(--sp-xs);font-size:14px;color:var(--ink-m);
  cursor:pointer;user-select:none}
.check input{accent-color:var(--primary);width:16px;height:16px}

button{font-family:var(--font);font-size:14px;font-weight:500;border-radius:var(--r-md);
  padding:9px 15px;border:1px solid transparent;cursor:pointer;transition:.15s}
button:disabled{opacity:.45;cursor:not-allowed}
.btn-p{background:var(--primary);color:#fff}
.btn-p:hover:not(:disabled){background:var(--primary-h)}
.btn-s{background:var(--s2);color:var(--ink);border-color:var(--hair-2)}
.btn-s:hover:not(:disabled){background:var(--s3);border-color:var(--hair-3)}
.btn-lg{font-size:15px;padding:12px 22px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:transparent;color:var(--ink-s);border:1px solid var(--hair-2);
  border-radius:var(--r-pill);padding:5px 13px;font-size:13px}
.chip:hover{color:var(--ink);border-color:var(--hair-3)}
.chip.on{background:var(--s3);color:var(--ink);border-color:var(--hair-3)}

/* ── 요약 ────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-md)}
.stat{background:var(--s1);padding:var(--sp-sm) var(--sp-md)}
.stat b{display:block;font-size:22px;font-weight:600;letter-spacing:-.4px}
.stat span{font-size:12px;color:var(--ink-t)}
.note{font-size:13px;color:var(--ink-s);background:var(--s2);border:1px solid var(--hair);
  border-left:2px solid var(--warn);border-radius:var(--r-sm);
  padding:var(--sp-xs) var(--sp-sm);margin-top:var(--sp-xs);font-family:var(--mono)}

/* ── 날짜 막대 ────────────────────────────────────── */
.bars{display:flex;align-items:flex-end;gap:1px;height:64px;overflow-x:auto;
  background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--sp-xs);margin-top:var(--sp-sm)}
.bar{flex:1 0 6px;min-width:5px;background:var(--hair-2);border-radius:2px 2px 0 0;
  cursor:pointer;transition:background .12s}
.bar:hover{background:var(--ink-t)}
.bar.sel{background:var(--primary)}

/* ── 지도 ────────────────────────────────────────── */
#map{height:340px;border-radius:var(--r-md);border:1px solid var(--hair);
  background:var(--canvas);margin-top:var(--sp-md)}
.leaflet-container{background:#0a0b0d}
.leaflet-control-attribution{background:rgba(1,1,2,.75)!important;color:var(--ink-t)!important;
  font-size:10px!important}
.leaflet-control-attribution a{color:var(--ink-s)!important}

/* ── 진행 / 결과 ──────────────────────────────────── */
.prog{margin-top:var(--sp-md)}
.prog .track{height:6px;background:var(--s3);border-radius:var(--r-pill);overflow:hidden}
.prog .fill{height:100%;width:0;background:var(--primary);border-radius:var(--r-pill);
  transition:width .3s ease}
.prog .msg{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-s);
  margin-top:6px;font-family:var(--mono)}
video{width:100%;border-radius:var(--r-md);border:1px solid var(--hair);
  background:#000;margin-top:var(--sp-md);display:block}
.err{background:#1a0e11;border:1px solid #4a2029;border-left:2px solid var(--err);
  color:#f0b8bf;border-radius:var(--r-sm);padding:var(--sp-sm) var(--sp-md);
  font-size:14px;margin-top:var(--sp-sm)}
.row{display:flex;gap:var(--sp-sm);align-items:center;flex-wrap:wrap}
.spacer{flex:1}
footer{color:var(--ink-t);font-size:12px;text-align:center;margin-top:var(--sp-xl);
  padding-top:var(--sp-md);border-top:1px solid var(--hair);line-height:1.8}

/* ── 암호 게이트 ──────────────────────────────────── */
#gate{position:fixed;inset:0;background:rgba(1,1,2,.96);display:none;
  place-items:center;z-index:9999;backdrop-filter:blur(6px)}
#gate.on{display:grid}
#gate .box{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--sp-xl);width:min(380px,90vw);text-align:center}
#gate h3{font-size:20px;font-weight:600;letter-spacing:-.4px;margin-bottom:var(--sp-xxs)}
#gate p{color:var(--ink-s);font-size:14px;margin-bottom:var(--sp-md)}

/* ── 갤러리 ───────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--sp-md)}
.card{background:var(--s2);border:1px solid var(--hair);border-radius:var(--r-lg);
  overflow:hidden;position:relative;transition:border-color .16s,transform .16s}
.card:hover{border-color:var(--hair-3);transform:translateY(-2px)}
.card .thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--canvas);cursor:pointer;border:0}
.card .body{padding:var(--sp-sm) var(--sp-md) var(--sp-md)}
.card h3{font-size:15px;font-weight:500;letter-spacing:-.2px;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .m{font-size:12px;color:var(--ink-t);font-family:var(--mono)}
.card .acts{display:flex;gap:6px;margin-top:var(--sp-sm)}
.card .acts a,.card .acts button{font-size:12px;padding:5px 10px;border-radius:var(--r-sm);
  background:var(--s3);color:var(--ink-m);border:1px solid var(--hair-2);
  text-decoration:none;cursor:pointer;font-family:var(--font)}
.card .acts a:hover,.card .acts button:hover{color:var(--ink);border-color:var(--hair-3)}
.card .del{position:absolute;top:8px;right:8px;width:26px;height:26px;padding:0;
  border-radius:var(--r-pill);background:rgba(1,1,2,.72);color:var(--ink-s);
  border:1px solid var(--hair-2);line-height:1;font-size:15px;opacity:0;transition:.16s}
.card:hover .del{opacity:1}
.card .del:hover{color:#fff;background:var(--err);border-color:var(--err)}
.share{display:flex;gap:var(--sp-xs);align-items:center;flex-wrap:wrap;
  margin-top:var(--sp-sm);padding-top:var(--sp-sm);border-top:1px solid var(--hair)}
.share input{flex:1;min-width:180px}

/* ── 파일 받는 법 안내 ────────────────────────────── */
.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-sm);margin-bottom:var(--sp-sm)}
.way{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--sp-sm) var(--sp-md) var(--sp-md)}
.way h4{font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--primary-h);
  margin-bottom:var(--sp-xs)}
.way ol{margin:0 0 var(--sp-xs) 17px;padding:0}
.way li{font-size:13px;color:var(--ink-m);line-height:1.65;margin-bottom:2px}
.way b{color:var(--ink);font-weight:600}
.way code{font-size:11px;color:var(--ink-t);font-family:var(--mono)}
.trouble{border:1px solid var(--hair);border-radius:var(--r-md);background:var(--canvas);
  margin-bottom:var(--sp-md)}
.trouble summary{cursor:pointer;padding:11px var(--sp-md);font-size:13px;font-weight:500;
  color:var(--ink-m);list-style:none;user-select:none}
.trouble summary::-webkit-details-marker{display:none}
.trouble summary::before{content:"▸ ";color:var(--ink-t)}
.trouble[open] summary::before{content:"▾ "}
.trouble summary:hover{color:var(--ink)}
.trouble>div{padding:0 var(--sp-md) var(--sp-md);border-top:1px solid var(--hair)}
.trouble p{font-size:13px;color:var(--ink-m);line-height:1.7;margin-top:var(--sp-sm)}
.trouble b{color:var(--ink)}
.trouble .sub{color:var(--ink-t)}