:root {
  --bg: #f3f4f6;
  --card: #fff;
  --blue: #3182f6;
  --blue-light: #eaf2fe;
  --green: #16b979;
  --green-light: #e6faf0;
  --txt: #1b1d1f;
  --txt2: #6b7684;
  --txt3: #adb5bd;
  --red: #f04452;
  --line: #f1f3f5;
  --r: 16px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;
  justify-content:center;
}

.container{
  width:100%;
  max-width:420px;
  padding:6px 16px env(safe-area-inset-bottom,12px);
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ── Title ── */
.title{
  text-align:center;
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.3px;
  padding:6px 0 2px;
}

/* ── Tabs ── */
.tabs{
  position:relative;
  display:flex;
  background:#e9ecef;
  border-radius:12px;
  padding:3px;
}

.tab-indicator{
  position:absolute;
  top:3px;left:3px;
  width:calc(50% - 3px);
  height:calc(100% - 6px);
  background:#fff;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.tabs[data-active="phone"] .tab-indicator{
  transform:translateX(calc(100% + 3px));
}

.tab{
  flex:1;
  position:relative;
  z-index:1;
  background:none;
  border:none;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--txt3);
  padding:9px 0;
  cursor:pointer;
  transition:color .25s;
}
.tab.active{color:var(--txt)}

.tab-emoji{font-size:16px}
.tab-icon{
  width:16px;height:16px;
  object-fit:contain;
  vertical-align:-2px;
  margin-right:2px;
}

.tab-period{
  font-size:11px;
  font-weight:600;
  color:var(--txt3);
  margin-left:2px;
}
.tab.active .tab-period{color:var(--blue)}

/* ── Panel card ── */
.panel-card{
  background:var(--card);
  border-radius:var(--r);
  box-shadow:0 1px 4px rgba(0,0,0,.03),0 4px 16px rgba(0,0,0,.03);
  overflow:hidden;
  position:relative;
}

.panel{display:none}
.panel.active{display:block;animation:fadeIn .18s ease}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Presets ── */
.preset-note{
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:var(--blue);
  padding:12px 0 0;
  letter-spacing:.3px;
}

.presets{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding:8px 14px 6px;
}

.preset{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:12px 4px 10px;
  background:#fff;
  border:2px solid #e5e8ec;
  border-radius:14px;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit;
}
.preset:active{transform:scale(.97)}
.preset.active{
  background:#fff;
  border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue);
}

.preset-logo{
  width:28px;height:28px;
  object-fit:contain;
  flex-shrink:0;
}

.dot{
  width:30px;height:30px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:#fff;
  letter-spacing:-.3px;
  flex-shrink:0;
}
.dot.samsung{background:#1428a0}
.dot.ultra{background:linear-gradient(135deg,#1a1a2e,#4a306d)}
.dot.apple{background:#555;font-size:10px}

.pname{font-size:11px;font-weight:700;color:var(--txt)}
.psub{font-size:10px;color:var(--txt3);font-weight:500}

/* ── Input rows ── */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  height:46px;
  border-bottom:1px solid var(--line);
  gap:8px;
}
.row.last{border-bottom:none}

.label{
  font-size:14px;
  font-weight:500;
  color:var(--txt2);
  white-space:nowrap;
  flex-shrink:0;
}
.label em{
  font-style:normal;
  font-size:11px;
  font-weight:700;
  color:var(--blue);
  margin-left:4px;
}


.field{
  display:flex;
  align-items:center;
  gap:1px;
}

.field input{
  width:105px;
  border:none;
  outline:none;
  background:none;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  color:var(--txt);
  text-align:right;
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:border-color .2s;
  font-variant-numeric:tabular-nums;
}
.field input:focus{border-bottom-color:var(--blue)}
#i-cb,#p-ev{color:var(--green)}
#i-pen,#p-pen{color:var(--red)}
.field input::placeholder{color:var(--txt3);font-weight:500;font-size:13px}
.field input:disabled{opacity:.25}

.fixed-val{
  font-size:17px;
  font-weight:700;
  color:var(--txt3);
  font-variant-numeric:tabular-nums;
}

.won{
  font-size:13px;
  font-weight:600;
  color:var(--txt2);
  flex-shrink:0;
  margin-left:1px;
}

/* ── Penalty segmented control ── */
.pen{display:flex;align-items:center;justify-content:flex-end;gap:8px}

.pen-seg{
  display:flex;
  background:#e9ecef;
  border-radius:8px;
  padding:2px;
  flex-shrink:0;
}
.seg{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  padding:4px 12px;
  border:none;
  border-radius:6px;
  background:none;
  color:var(--txt3);
  cursor:pointer;
  transition:all .2s;
}
.seg.active{
  background:#fff;
  color:var(--txt);
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}

.pen-field{display:none}
.pen.editing .pen-field{display:flex}

/* ── Subtotal row ── */
.sub{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 20px;
  background:#f8f9fb;
  font-size:14px;
  font-weight:600;
  color:var(--txt2);
}
.sub-period{
  font-size:11px;
  font-weight:700;
  color:var(--blue);
  margin-left:2px;
}
.sub-val{
  font-size:17px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  transition:color .2s;
}
.sub-val.save{color:var(--green)}
.sub-val.cost{color:var(--red)}

/* ── Result card ── */
.result{
  background:var(--card);
  border-radius:18px;
  padding:18px 20px 16px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
}
.result::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#3182f6,#6c5ce7,#a855f7);
}

.result-label{
  font-size:13px;
  font-weight:600;
  color:var(--txt2);
}

.result-num{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:3px;
  margin:4px 0 2px;
}

.result-amount{
  font-size:38px;
  font-weight:900;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#3182f6,#6c5ce7);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.result-won{
  font-size:20px;
  font-weight:800;
  background:linear-gradient(135deg,#3182f6,#6c5ce7);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.result-amount.save,.result-won.save{
  background:linear-gradient(135deg,#16b979,#00b4d8);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.result-detail{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:6px;
  font-size:13px;
  color:var(--txt2);
}
.rd-dot{color:var(--txt3);font-size:10px}
.rd-item{display:flex;align-items:center;gap:3px}
.rd-icon{width:12px;height:12px;object-fit:contain;vertical-align:-1px}
.rd-emoji{font-size:12px;vertical-align:2px;position:relative;top:-1px}
.rd-val{font-weight:700;font-variant-numeric:tabular-nums}
.rd-val.save{color:var(--green)}
.rd-val.cost{color:var(--red)}

/* ── Responsive ── */
@media(max-width:350px){
  .title{font-size:20px}
  .result-amount{font-size:32px}
  .field input{width:88px;font-size:15px}
  .row{padding:0 14px}
  .sub{padding:10px 14px}
}

@media(min-width:500px){
  .container{padding-top:32px}
  .title{font-size:24px;padding:20px 0 8px}
}

/* ── Banners ── */
.banners{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.banner{
  display:flex;
  flex-direction:column;
  padding:16px;
  border-radius:16px;
  text-decoration:none;
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
  position:relative;
}
.banner:active{transform:scale(.97);box-shadow:0 1px 4px rgba(0,0,0,.08)}

.banner-img{padding:0;background:none;box-shadow:none;position:relative}
.banner-img img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.banner-overlay{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:14px 12px 10px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  border-radius:0 0 16px 16px;
  text-align:right;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}

.banner-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.banner-icon{font-size:22px;filter:grayscale(1) brightness(10)}
.banner-wifi{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1)}
.banner-arrow{
  font-size:22px;
  font-weight:300;
  color:rgba(255,255,255,.6);
}

.banner-body{display:flex;flex-direction:column;gap:1px}
.banner-title{
  font-size:16px;
  font-weight:800;
  color:#fff;
}
.banner-desc{
  font-size:11px;
  font-weight:500;
  color:rgba(255,255,255,.75);
}

/* ── Full-width banner ── */
.banner-full{
  display:block;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  height:80px;
  position:relative;
}
.banner-full:active{transform:scale(.98)}
.banner-full img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}

/* ── Load animation ── */
.panel-card{animation:slideUp .35s ease both}
.result{animation:slideUp .4s ease .08s both}

@keyframes slideUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}