/* ── 지역화폐 오픈런 · 디자인 토큰 ───────────────────────────────
   토스식 정보 위계(큰 숫자, 넉넉한 여백, 구분선 최소) 위에
   리퀴드글라스 표면(반투명·굴절 테두리·배경 채도 상승)을 얹는다. */

:root{
  --bg:#EEF1F5;
  --bg-2:#E4E9F0;
  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.44);
  --glass-line:rgba(255,255,255,.85);
  --glass-edge:rgba(160,175,195,.22);
  --ink:#16181D;
  --ink-2:#4E5866;
  --ink-3:#8B95A1;
  --ink-4:#B0B8C1;
  --sheet:rgba(255,255,255,.78);
  --danger:#E8443A;
  --danger-bg:rgba(232,68,58,.10);
  --ok:#0FA47F;
  --shadow:0 2px 8px rgba(22,24,29,.04), 0 12px 32px -8px rgba(22,24,29,.10);
  --shadow-lift:0 4px 12px rgba(22,24,29,.06), 0 24px 48px -12px rgba(22,24,29,.16);
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
  --accent:#2E6FF2;
  --accent-ink:#1B4FBF;
  --orb-a:#4C8DFF;
  --orb-b:#8FB6FF;
  --tabbar:rgba(255,255,255,.72);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0C10;
    --bg-2:#12161C;
    --glass:rgba(30,35,43,.60);
    --glass-2:rgba(30,35,43,.42);
    --glass-line:rgba(255,255,255,.10);
    --glass-edge:rgba(0,0,0,.5);
    --ink:#EDEFF2;
    --ink-2:#A7B0BC;
    --ink-3:#727C89;
    --ink-4:#4D5661;
    --sheet:rgba(22,26,32,.86);
    --danger:#FF6B5E;
    --danger-bg:rgba(255,107,94,.13);
    --ok:#31C39C;
    --shadow:0 2px 8px rgba(0,0,0,.3), 0 12px 32px -8px rgba(0,0,0,.5);
    --shadow-lift:0 4px 12px rgba(0,0,0,.4), 0 24px 48px -12px rgba(0,0,0,.6);
    --hl:inset 0 1px 0 rgba(255,255,255,.07);
    --accent-ink:#7FA8FF;
    --tabbar:rgba(18,22,28,.78);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0C10; --bg-2:#12161C;
  --glass:rgba(30,35,43,.60); --glass-2:rgba(30,35,43,.42);
  --glass-line:rgba(255,255,255,.10); --glass-edge:rgba(0,0,0,.5);
  --ink:#EDEFF2; --ink-2:#A7B0BC; --ink-3:#727C89; --ink-4:#4D5661;
  --sheet:rgba(22,26,32,.86);
  --danger:#FF6B5E; --danger-bg:rgba(255,107,94,.13); --ok:#31C39C;
  --shadow:0 2px 8px rgba(0,0,0,.3), 0 12px 32px -8px rgba(0,0,0,.5);
  --shadow-lift:0 4px 12px rgba(0,0,0,.4), 0 24px 48px -12px rgba(0,0,0,.6);
  --hl:inset 0 1px 0 rgba(255,255,255,.07);
  --accent-ink:#7FA8FF; --tabbar:rgba(18,22,28,.78);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Gothic A1",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  font-size:15px;line-height:1.55;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
.num{font-family:"Manrope","Gothic A1",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── 배경: 지역색 오브 ── */
#orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg)}
#orbs::before,#orbs::after{
  content:"";position:absolute;border-radius:50%;filter:blur(64px);
  transition:background 700ms cubic-bezier(.4,0,.2,1);
}
#orbs::before{width:78vw;height:78vw;max-width:520px;max-height:520px;top:-16%;right:-24%;background:var(--orb-a);opacity:.34}
#orbs::after{width:66vw;height:66vw;max-width:430px;max-height:430px;bottom:4%;left:-26%;background:var(--orb-b);opacity:.26}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #orbs::before{opacity:.24}
  :root:not([data-theme="light"]) #orbs::after{opacity:.18}
}
:root[data-theme="dark"] #orbs::before{opacity:.24}
:root[data-theme="dark"] #orbs::after{opacity:.18}

/* ── 앱 셸 ── */
#app{
  position:relative;z-index:1;max-width:460px;margin:0 auto;min-height:100%;
  padding:max(14px,env(safe-area-inset-top)) 18px calc(122px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
}
.view{display:none;flex-direction:column;gap:14px;animation:rise .3s cubic-bezier(.2,.7,.3,1)}
.view.on{display:flex}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ── 유리 표면 ── */
.g{
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-line);
  outline:1px solid var(--glass-edge);outline-offset:-1px;
  border-radius:22px;box-shadow:var(--shadow),var(--hl);
}
.g-2{background:var(--glass-2)}

/* ── 상단바 ── */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px 0}
.brand{display:flex;align-items:baseline;gap:7px}
.brand b{font-size:17px;font-weight:800;letter-spacing:-.03em}
.brand span{font-size:11px;color:var(--ink-3);font-weight:600}
.iconbtn{
  width:38px;height:38px;border-radius:13px;border:1px solid var(--glass-line);
  background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);box-shadow:var(--hl);
}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── 지역 선택 칩 ── */
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px;margin:0 -2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;appearance:none;border:1px solid var(--glass-line);
  background:var(--glass-2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  color:var(--ink-2);border-radius:999px;padding:8px 15px;font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:all .18s;white-space:nowrap;box-shadow:var(--hl);
}
.chip[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 6px 16px -4px var(--accent)}
.chip:active{transform:scale(.96)}

/* ── 히어로: 카운트다운 ── */
.hero{padding:24px 22px 22px;display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.30),transparent 46%);
}
.hero .cur{font-size:13px;font-weight:700;color:var(--accent-ink);letter-spacing:-.01em}
.hero .lbl{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:9px}
.hero .dday{font-size:52px;font-weight:800;line-height:1.02;margin:1px 0 2px;letter-spacing:-.045em}
.hero .dday.sm{font-size:38px}
.hero .when{font-size:13.5px;color:var(--ink-2);font-weight:600}
.hero .badge{
  position:absolute;top:20px;right:20px;font-size:11px;font-weight:800;letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;background:var(--accent);color:#fff;
}
.hero .badge.warn{background:var(--danger)}

/* ── 혜택 그리드 ── */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{padding:16px 16px 14px;display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:12px;color:var(--ink-3);font-weight:600}
.stat .v{font-size:23px;font-weight:800;letter-spacing:-.035em}
.stat.wide{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
.stat.wide .v{font-size:20px}
.stat .v em{font-style:normal;color:var(--accent-ink)}

/* ── 준비물 경고 ── */
.alert{padding:15px 17px;display:flex;gap:11px;align-items:flex-start;border-radius:18px;background:var(--danger-bg);border:1px solid transparent}
.alert .dot{width:7px;height:7px;border-radius:50%;background:var(--danger);margin-top:7px;flex:0 0 auto}
.alert .t{font-size:14px;font-weight:700;color:var(--danger);line-height:1.4}
.alert .d{font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.5}

/* ── 체크리스트 ── */
.list{padding:6px 4px}
.list h3{font-size:12.5px;color:var(--ink-3);font-weight:700;margin:10px 14px 6px}
.li{display:flex;align-items:center;gap:11px;padding:11px 14px;font-size:14px;font-weight:500}
.li .n{
  width:21px;height:21px;border-radius:50%;background:var(--glass-2);border:1px solid var(--glass-line);
  display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink-3);flex:0 0 auto;
  font-family:"Manrope",sans-serif;
}
.li.done .n{background:var(--ok);border-color:transparent;color:#fff}
.li.done{color:var(--ink-3)}

/* ── 시간표 ── */
.tt{padding:6px 4px 8px;max-height:340px;overflow-y:auto}
.tt h3{font-size:12.5px;color:var(--ink-3);font-weight:700;margin:10px 14px 4px;position:sticky;top:0}
.tr{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:13px;font-size:14px}
.tr.me{background:var(--glass-2);box-shadow:var(--hl)}
.tr .tm{font-size:14px;font-weight:800;color:var(--accent-ink);width:47px;flex:0 0 auto}
.tr .gu{font-weight:600;flex:1}
.tr .pb{font-size:12.5px;color:var(--ink-3);font-weight:700}
.tr.me .gu::after{content:"내 자치구";font-size:10px;font-weight:800;color:var(--accent);margin-left:7px;letter-spacing:0}

/* ── CTA ── */
.cta{
  appearance:none;border:0;width:100%;cursor:pointer;font:inherit;
  background:var(--accent);color:#fff;border-radius:17px;padding:16px;
  font-size:15.5px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 8px 24px -6px var(--accent);transition:transform .12s;
}
.cta:active{transform:scale(.98)}
.cta.ghost{background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);box-shadow:var(--shadow),var(--hl);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.cta:focus-visible,.chip:focus-visible,.iconbtn:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hint{font-size:12px;color:var(--ink-3);text-align:center;margin-top:-4px}

/* ── 전국 목록 ── */
.rowcard{padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer}
.rowcard .mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;flex:0 0 auto}
.rowcard .m{flex:1;min-width:0}
.rowcard .m b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.rowcard .m span{font-size:12.5px;color:var(--ink-3);font-weight:500}
.rowcard .r{text-align:right;flex:0 0 auto}
.rowcard .r b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em}
.rowcard .r span{font-size:11.5px;color:var(--ink-3);font-weight:600}

/* ── 알림 설정 ── */
.setrow{display:flex;align-items:center;gap:13px;padding:15px 18px}
.setrow .m{flex:1}
.setrow .m b{display:block;font-size:14.5px;font-weight:700}
.setrow .m span{font-size:12.5px;color:var(--ink-3)}
.sw{
  width:50px;height:30px;border-radius:999px;border:0;background:var(--ink-4);cursor:pointer;
  position:relative;flex:0 0 auto;transition:background .2s;padding:0;
}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  transition:transform .22s cubic-bezier(.3,1.4,.5,1);box-shadow:0 2px 5px rgba(0,0,0,.2)}
.sw[aria-checked="true"]{background:var(--accent)}
.sw[aria-checked="true"]::after{transform:translateX(20px)}

/* ── 탭바 ── */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:20;width:min(424px,calc(100% - 36px));
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:6px;
  background:var(--tabbar);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-line);outline:1px solid var(--glass-edge);outline-offset:-1px;
  border-radius:20px;box-shadow:var(--shadow-lift),var(--hl);
}
.tab{
  appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 6px;border-radius:15px;
  color:var(--ink-3);font-size:11px;font-weight:700;transition:color .18s,background .18s;
}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-selected="true"]{color:var(--accent);background:var(--glass-2)}

.sect{font-size:12.5px;font-weight:700;color:var(--ink-3);margin:8px 4px -4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}