:root{
  /* Theme tokens (default: dark) */
  --bg0:#060617;
  --bg1:#0B1026;
  --bg-glass:rgba(6,6,23,.55);

  --card:rgba(255,255,255,.08);
  --card2:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.12);

  --text:#F6F7FB;
  --muted:rgba(246,247,251,.72);

  --primary:#7C3AED;
  --primary2:#EC4899;
  --danger:#EF4444;

  --shadow:0 16px 40px rgba(0,0,0,.35);
  --radius:18px;
  --gap:16px;

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Light theme overrides */
html[data-theme="light"]{
  --bg0:#F6F7FF;
  --bg1:#EEF1FF;
  --bg-glass:rgba(246,247,255,.72);

  --card:rgba(0,0,0,.05);
  --card2:rgba(0,0,0,.06);
  --stroke:rgba(0,0,0,.10);

  --text:#0B1026;
  --muted:rgba(11,16,38,.70);

  --shadow:0 16px 40px rgba(11,16,38,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,.55), transparent 60%),
              radial-gradient(900px 700px at 90% 10%, rgba(236,72,153,.40), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;z-index:9999;background:#000;padding:10px;border-radius:10px}

.only-mobile{display:inline}
@media (min-width: 900px){.only-mobile{display:none}}

/* Sticky top bar with blur */
.topbar{
  position:sticky; top:0; z-index:50;
  padding-top:calc(10px + var(--safe-top));
  padding-bottom:10px;
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  background:var(--bg-glass);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  max-width:1100px; margin:0 auto; padding:0 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

.icon-btn{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease;
}
.icon-btn:active{transform:scale(.96)}

.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand__mark{
  width:38px; height:38px; border-radius:14px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  display:grid; place-items:center; font-weight:800;
  box-shadow: 0 10px 20px rgba(124,58,237,.25);
}
.brand__text{min-width:0}
.brand__name{font-weight:800; letter-spacing:.08em; font-size:13px}
.brand__sub{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand--small .brand__mark{width:34px;height:34px;border-radius:13px}

/* Drawer */
.drawer-backdrop[hidden], .sheet-backdrop[hidden]{display:none}
.drawer-backdrop{
  position:fixed; inset:0; z-index:70;
  background: rgba(0,0,0,.45);
}
.drawer{
  position:fixed; left:0; top:0; bottom:0; z-index:80;
  width:min(92vw, 360px);
  background: rgba(10,12,30,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgba(255,255,255,.10);
  transform: translateX(-105%);
  transition: transform .24s ease;
  padding-top: calc(12px + var(--safe-top));
}
.drawer.is-open{transform: translateX(0)}
.drawer__header{display:flex; align-items:center; justify-content:space-between; padding: 0 14px 12px}
.drawer__nav{padding: 8px 8px 14px; display:flex; flex-direction:column; gap:8px}
.drawer__link{
  display:flex; align-items:center; gap:10px;
  padding: 14px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  text-decoration:none;
  min-height:44px;
}
.drawer__link:active{transform:scale(.985)}
.drawer__footer{padding: 0 14px; color: var(--muted)}

/* App layout with bottom nav safe area */
.app{max-width:1100px; margin:0 auto; padding-bottom: calc(92px + var(--safe-bottom));}

.screen{display:none; padding: 12px 14px 22px; animation: screenIn .22s ease;}
.screen--active{display:block}
@keyframes screenIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}

.section{display:flex; flex-direction:column; gap: var(--gap);}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.section__title{font-size:18px; font-weight:800; letter-spacing:-.02em}
.muted{color:var(--muted)}

/* Hero with parallax-ready bg */
.hero{position:relative; border-radius: 22px; overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.10)}
.hero__bg{
  position:absolute; inset:-40px;
  background: radial-gradient(600px 360px at 15% 15%, rgba(124,58,237,.65), transparent 60%),
              radial-gradient(520px 380px at 85% 25%, rgba(236,72,153,.50), transparent 62%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transform: translateY(0);
  will-change: transform;
}
.hero__content{position:relative; padding: 18px 16px 16px; display:flex; flex-direction:column; gap:12px}
.hero h1{margin:0; font-size: 22px; line-height:1.25}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); width:fit-content; font-weight:600; font-size:12px}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap}

.hero__stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:6px}
.stat{padding:10px 10px; border-radius:16px; background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10)}
.stat__label{font-size:11px; color:var(--muted)}
.stat__value{font-size:14px; font-weight:800}

/* Buttons (44x44 touch) */
.btn{
  min-height:44px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
  user-select:none;
  touch-action: manipulation;
}
.btn:active{transform: scale(.98)}
.btn--primary{background: linear-gradient(135deg, var(--primary), var(--primary2)); border-color: rgba(255,255,255,.10)}
.btn--ghost{background: rgba(255,255,255,.04)}
.btn--danger{background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35)}
.btn--small{min-height:40px; padding: 9px 12px; border-radius: 14px}
.btn--full{width:100%}

.btn__spinner{display:none; width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius:50%; animation: spin 1s linear infinite}
.btn.is-loading .btn__spinner{display:inline-block}
.btn.is-loading .btn__text{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* Cards */
.card-grid{display:grid; grid-template-columns: 1fr; gap: var(--gap)}
@media (min-width: 700px){.card-grid{grid-template-columns: repeat(3, 1fr)}}

.card{
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.card--soft{background: rgba(255,255,255,.05)}
.card__icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background: rgba(124,58,237,.18); border:1px solid rgba(124,58,237,.25)}
.card__title{font-weight:800}
.card__desc{color:var(--muted); font-size:13px; margin-top:6px}

/* Rates */
.rate-grid{display:grid; grid-template-columns: 1fr; gap: var(--gap)}
@media (min-width: 700px){.rate-grid{grid-template-columns: repeat(2, 1fr)}}

.rate{
  padding: 14px; border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.rate__name{font-weight:800}
.rate__sub{font-size:12px; color:var(--muted); margin-top:4px}
.rate__pct{font-weight:900; font-size:18px; background: linear-gradient(135deg,#fff, rgba(255,255,255,.75)); -webkit-background-clip:text; background-clip:text; color:transparent}

.skeleton{position:relative; overflow:hidden}
.skeleton::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.10), rgba(255,255,255,.03));
  transform: translateX(-120%);
  animation: shimmer 1.1s infinite;
}
@keyframes shimmer{to{transform:translateX(120%)}}

/* Pull-to-refresh indicator */
.ptr{display:none; align-items:center; gap:10px; padding: 10px 0; color:var(--muted)}
.ptr.is-show{display:flex}
.ptr__spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}

/* Exchange */
.summary{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.summary__item{flex:1; min-width: 140px; padding:12px; border-radius: var(--radius); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}
.summary__label{font-size:12px; color:var(--muted)}
.summary__value{font-size:16px; font-weight:900; margin-top:4px}

.gesture-hint{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px}

.voucher-list{display:flex; flex-direction:column; gap: var(--gap)}

.voucher{
  position:relative;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  will-change: transform;
}
.voucher__content{padding:14px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; transition: transform .18s ease, opacity .18s ease}
.voucher__main{min-width:0}
.voucher__num{font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:800; letter-spacing:.03em}
.voucher__meta{margin-top:6px; font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap}
.voucher__amt{font-weight:900}

/* swipe-to-delete background */
.voucher__delete-bg{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(239,68,68,.9), rgba(239,68,68,.55));
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:16px;
  color:#fff;
  font-weight:900;
}

/* Form */
.form{display:flex; flex-direction:column; gap:12px}
.form__row{display:flex; flex-direction:column; gap:8px}
.label{font-size:12px; color:var(--muted)}
.input{
  min-height:44px;
  border-radius: 16px;
  padding: 12px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline:none;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.input:focus{border-color: rgba(124,58,237,.7); background: rgba(0,0,0,.28); transform: scale(1.01)}
.input--textarea{min-height:120px; resize:vertical}

.check{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
.check input{width:18px;height:18px}

/* Bottom sheet */
.sheet-backdrop{
  position:fixed; inset:0; z-index:90;
  background: rgba(0,0,0,.45);
}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  transform: translateY(110%);
  transition: transform .24s ease;
  background: rgba(10,12,30,.92);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-bottom: calc(12px + var(--safe-bottom));
  box-shadow: 0 -18px 40px rgba(0,0,0,.45);
  max-height: 84vh;
  overflow:auto;
}
.sheet.is-open{transform: translateY(0)}
.sheet__handle{width:52px;height:5px;border-radius:999px;background: rgba(255,255,255,.22); margin: 10px auto}
.sheet__head{display:flex; justify-content:space-between; align-items:flex-start; padding: 0 14px 10px}
.sheet__title{font-size:16px; font-weight:900}
.sheet__body{padding: 0 14px 14px; display:flex; flex-direction:column; gap:14px}
.sheet__footer{padding: 4px 0 0}

/* Segmented tabs with underline animation */
.seg{position:relative; display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; padding:6px; border-radius: 18px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}
.seg__btn{
  min-height:44px;
  border:0; border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-weight:800;
  cursor:pointer;
}
.seg__btn.is-active{color: var(--text)}
.seg__underline{
  position:absolute; bottom:6px; left:6px;
  height:4px; width: calc((100% - 12px - 16px) / 3);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  transform: translateX(0);
  transition: transform .22s ease;
}

.sheet__panel{display:none; animation: fade .18s ease}
.sheet__panel.is-active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:translateY(0)}}

/* Drop zone */
.drop{border-radius:18px; border:1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.04); padding: 16px; display:flex; flex-direction:column; align-items:center; gap:10px; min-height: 150px}
.drop.is-drag{background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.45)}
.drop__icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background: rgba(236,72,153,.15); border:1px solid rgba(236,72,153,.25)}
.drop__text{color:var(--muted); text-align:center; font-size:13px}
.drop__preview{display:none; width:100%; max-height:240px; object-fit:contain; border-radius: 14px; border:1px solid rgba(255,255,255,.10)}
.drop.has-preview .drop__preview{display:block}

/* History */
.history{display:flex; flex-direction:column; gap: var(--gap)}
.history-item{padding:14px; border-radius: var(--radius); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}
.history-item__top{display:flex; justify-content:space-between; gap:12px}
.history-item__title{font-weight:900}
.history-item__meta{color:var(--muted); font-size:12px; margin-top:6px}

/* Accordion */
.acc{border-radius: var(--radius); border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); overflow:hidden}
.acc summary{list-style:none; cursor:pointer; padding: 14px; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:800}
.acc summary::-webkit-details-marker{display:none}
.acc__body{padding: 0 14px 14px; color:var(--muted)}

.kakao-wrap{display:flex; flex-direction:column; gap:10px}

.kakao{display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; border-radius: 18px; color:#111; text-decoration:none; font-weight:900; background: #FEE500}

.kakao-info{
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.kakao-info__title{font-weight:900; margin-bottom:10px}
.kakao-info__grid{display:grid; grid-template-columns: 1fr; gap:10px}
@media (min-width: 700px){.kakao-info__grid{grid-template-columns: repeat(2, 1fr)}}
.kakao-info__item{display:flex; gap:10px; align-items:flex-start}
.kakao-info__k{min-width:82px; font-size:12px; color:var(--muted)}
.kakao-info__v{font-size:13px; font-weight:700; word-break:break-word}

/* Bottom nav (app-like) */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding: 8px 10px calc(10px + var(--safe-bottom));
  background: color-mix(in srgb, var(--bg-glass) 86%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns: repeat(5, 1fr); gap:8px;
}
.tab{
  min-height:44px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-radius: 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:8px 6px;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, color .2s ease;
}
.tab i{font-size:16px}
.tab span{font-size:11px; font-weight:800}
.tab.is-active{color: var(--text); background: rgba(124,58,237,.15); border-color: rgba(124,58,237,.35)}
.tab:active{transform: scale(.98)}
.tab--center{background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(236,72,153,.22)); border-color: rgba(255,255,255,.14)}

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom: calc(96px + var(--safe-bottom));
  background: rgba(0,0,0,.75);
  color:#fff;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  z-index:120;
  max-width: min(92vw, 520px);
  display:none;
}
.toast.is-show{display:block; animation: toastIn .18s ease}
@keyframes toastIn{from{opacity:0; transform:translateX(-50%) translateY(6px)}to{opacity:1; transform:translateX(-50%) translateY(0)}}

@media (min-width: 900px){
  .screen{padding: 18px 18px 26px}
  .section__title{font-size:20px}
  .hero__content{padding: 22px 22px 18px}
  .hero h1{font-size:28px}
  .bottom-nav{max-width:1100px; left:50%; transform:translateX(-50%); border-radius: 18px 18px 0 0}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

html{scroll-behavior:smooth}