:root{
  color-scheme: only light;
  --bg:#f5f5f7;
  --surface:#ffffff;
  --surface-2:#eeeef1;
  --border:#e3e3e8;
  --text:#17171a;
  --text-secondary:#6c6c72;
  --text-tertiary:#9d9da3;
  --ink:#17171a;
  --ink-contrast:#ffffff;
  --accent:#ff6a00;
  --accent-contrast:#ffffff;
  --backdrop:rgba(20,18,16,0.5);
  --shadow:0 10px 30px rgba(20,20,25,0.10);
  --shadow-sm:0 2px 10px rgba(20,20,25,0.06);
}
*{box-sizing:border-box;}
h1,h2,h3,p{margin:0;}
button{font-family:inherit;}

html,body{height:100%;}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

.stage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}

.tablet{
  width:clamp(300px,80vw,420px);
  height:auto;
  aspect-ratio:25/36;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  container-type:inline-size;
}

.view{
  position:absolute;
  inset:0;
  display:none;
}
.view.active{display:flex;}

/* login view */
.view-login{
  align-items:center;
  justify-content:center;
  padding:8cqw;
}
.login-inner{
  width:100%;
  max-width:280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.login-eyebrow{
  font-size:clamp(10px,2.8cqw,12px);
  color:var(--accent);
  font-weight:800;
  letter-spacing:.06em;
  margin-bottom:14px;
}
.login-title{
  font-size:clamp(19px,5.8cqw,25px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-0.02em;
  margin-bottom:10px;
}
.login-desc{
  font-size:clamp(11px,3cqw,13px);
  color:var(--text-secondary);
  margin-bottom:22px;
}
.login-input{
  width:100%;
  text-align:center;
  font-size:clamp(20px,6.5cqw,27px);
  font-weight:800;
  letter-spacing:0.25em;
  padding:14px 4px 14px 14px;
  border-radius:16px;
  border:1.5px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  margin-bottom:16px;
  font-variant-numeric:tabular-nums;
  font-family:inherit;
}
.login-input:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface);
}
.login-input::placeholder{
  color:var(--text-tertiary);
  letter-spacing:0.25em;
}
.login-submit{
  opacity:.4;
  pointer-events:none;
  transition:opacity .15s ease;
}
.login-submit.ready{
  opacity:1;
  pointer-events:auto;
}

/* dashboard view */
.view-dashboard .screen{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:4.6cqw 4.6cqw 3.6cqw;
  gap:3cqw;
}

/* header */
.app-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.greeting-sub{
  font-size:clamp(10px,2.8cqw,12px);
  color:var(--text-secondary);
  font-weight:600;
  margin-bottom:3px;
}
.greeting-main{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.user-name{
  font-size:clamp(15px,4.4cqw,19px);
  font-weight:800;
  letter-spacing:-0.01em;
}
.id-badge{
  font-size:clamp(9.5px,2.6cqw,11px);
  color:var(--text-secondary);
  background:var(--surface-2);
  border:1px solid var(--border);
  padding:2px 8px;
  border-radius:999px;
  font-weight:600;
}
.coupon-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:7px 14px;
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
}
.coupon-count{
  font-size:clamp(15px,4.2cqw,19px);
  font-weight:800;
  line-height:1.1;
}
.coupon-label{
  font-size:clamp(8.5px,2.3cqw,10px);
  color:var(--text-secondary);
  font-weight:600;
  margin-top:1px;
}

/* body grid : exact 50/50 */
.body-grid{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.2cqw;
}
.col{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:2.4cqw;
}

.headline-caption{
  font-size:clamp(9.5px,2.6cqw,11.5px);
  color:var(--text-secondary);
  font-weight:600;
}
.headline-number{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin-top:2px;
}
.headline-number .num{
  font-size:clamp(34px,13.5cqw,54px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1;
}
.headline-number .unit{
  font-size:clamp(12px,3.4cqw,15px);
  font-weight:700;
  color:var(--text-secondary);
}

.tower-legend{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.legend-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:clamp(8.5px,2.3cqw,10px);
  color:var(--text-secondary);
  font-weight:600;
}
.legend-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.dot-filled{background:var(--ink);}
.dot-free{background:var(--surface);border:1.5px dashed var(--text-secondary);}
.dot-empty{background:transparent;border:1.5px solid var(--border);}

.tower-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--surface-2);
  border-radius:16px;
  padding:10px;
  position:relative;
  cursor:grab;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
}
.tower-scroll.dragging{cursor:grabbing;user-select:none;}
.tower-scroll::-webkit-scrollbar{width:5px;}
.tower-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

.tower-track{
  display:flex;
  flex-direction:column-reverse;
  gap:7px;
  position:relative;
}
.tower-track::before{
  content:'';
  position:absolute;
  left:18px;
  top:0;
  bottom:0;
  width:2px;
  background:var(--border);
  z-index:0;
}
.cell{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 11px;
  border-radius:9px;
  font-weight:700;
  font-size:clamp(9.5px,2.7cqw,11.5px);
  flex-shrink:0;
  color:var(--text-tertiary);
  background:transparent;
  border:1px solid transparent;
  transition:transform .15s ease;
}
.cell.empty{
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text-tertiary);
}
.cell.filled{
  background:var(--ink);
  color:var(--ink-contrast);
}
.cell.milestone-reached{
  background:var(--ink);
  color:var(--ink-contrast);
}
.cell.milestone-future{
  background:transparent;
  border:1.5px dashed var(--border);
  color:var(--text-tertiary);
}
.cell.current{
  background:var(--accent);
  color:var(--accent-contrast);
  box-shadow:0 6px 16px rgba(255,106,0,0.38);
  transform:scale(1.035);
  font-weight:800;
}
.cell-num{font-weight:800;}
.cell-tag{
  margin-left:auto;
  font-size:clamp(8px,2.2cqw,9.5px);
  font-weight:700;
  padding:2px 7px;
  border-radius:999px;
  background:var(--surface);
  color:var(--text-secondary);
  border:1px solid var(--border);
  white-space:nowrap;
}
.cell.current .cell-tag{
  background:rgba(255,255,255,0.22);
  color:var(--accent-contrast);
  border-color:rgba(255,255,255,0.5);
}
.cell.milestone-future .cell-tag{opacity:.65;}
.cell.milestone-reached .cell-tag{
  background:none;
  border:none;
  padding:0;
  font-weight:600;
  color:rgba(255,255,255,0.55);
}

/* right column cards */
.col-right{gap:2.4cqw;}
.card{
  flex:1;
  min-height:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:3.2cqw 3.6cqw;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.card-label{
  font-size:clamp(9px,2.5cqw,10.5px);
  font-weight:700;
  color:var(--text-secondary);
  letter-spacing:.01em;
}
.card-main{
  font-size:clamp(12.5px,3.5cqw,15px);
  font-weight:700;
  margin-bottom:4px;
}
.card-main .dot{color:var(--text-tertiary);margin:0 3px;}
.progress-track{
  height:7px;
  border-radius:999px;
  background:var(--surface-2);
  overflow:hidden;
  margin-bottom:9px;
}
.progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--ink);
}
.btn-link{
  align-self:flex-start;
  background:none;
  border:none;
  border-bottom:1.5px solid var(--text);
  padding:0 0 2px;
  font-size:clamp(10.5px,2.9cqw,12.5px);
  font-weight:700;
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.card-rank{gap:0;}
.rank-item{
  flex:1;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.rank-item + .rank-item{border-top:1px solid var(--border);}
.rank-info{min-width:0;}
.rank-label{
  font-size:clamp(8.5px,2.4cqw,10px);
  color:var(--text-secondary);
  font-weight:600;
  margin-bottom:3px;
}
.rank-value{font-size:clamp(13.5px,3.8cqw,16px);font-weight:800;letter-spacing:-0.01em;}
.rank-medal{font-size:clamp(16px,4.5cqw,20px);flex-shrink:0;}

.card-eco{justify-content:flex-start;}
.card-eco .card-label{line-height:1.4;}
.eco-list{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-top:1px;
}
.eco-row{display:flex;align-items:center;gap:8px;}
.eco-icon{
  width:clamp(20px,6cqw,26px);
  height:clamp(20px,6cqw,26px);
  border-radius:50%;
  background:var(--surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(10px,3cqw,13px);
  flex-shrink:0;
}
.eco-text{
  font-size:clamp(9.5px,2.6cqw,11.5px);
  color:var(--text-secondary);
  font-weight:500;
  white-space:nowrap;
}
.eco-text strong{color:var(--text);font-weight:800;}

/* CTA */
footer{
  display:flex;
  flex-direction:column;
  gap:1.8cqw;
}
.btn-cta{
  width:100%;
  padding:13px;
  border:none;
  border-radius:15px;
  background:var(--accent);
  color:var(--accent-contrast);
  font-size:clamp(12.5px,3.4cqw,15px);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(255,106,0,0.32);
}
.btn-logout{
  width:100%;
  padding:13px;
  border:1.5px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  color:var(--text);
  font-size:clamp(12.5px,3.4cqw,15px);
  font-weight:800;
  cursor:pointer;
}

/* modals */
.modal-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:var(--backdrop);
  z-index:30;
  padding:4cqw;
}
.modal-overlay.active{display:flex;}
.modal-card{
  position:relative;
  width:100%;
  background:var(--surface);
  border-radius:20px 20px 16px 16px;
  padding:5cqw 5cqw 4.4cqw;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.modal-card-lg{max-height:82%;overflow-y:auto;}
.modal-close-x{
  position:absolute;
  top:12px;
  right:12px;
  width:24px;
  height:24px;
  border-radius:50%;
  border:none;
  background:var(--surface-2);
  color:var(--text-secondary);
  font-size:15px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.modal-eyebrow{font-size:clamp(9px,2.4cqw,10.5px);color:var(--accent);font-weight:700;letter-spacing:.02em;margin-bottom:2px;}
.modal-date{font-size:clamp(10.5px,2.9cqw,12.5px);color:var(--text-secondary);font-weight:600;}
.modal-time{font-size:clamp(13.5px,3.8cqw,16.5px);font-weight:800;margin:2px 0 8px;}
.modal-honesty{
  font-size:clamp(9.5px,2.7cqw,11px);
  color:var(--text-secondary);
  line-height:1.5;
  background:var(--surface-2);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:2px;
}
.modal-title{font-size:clamp(13.5px,3.8cqw,16.5px);font-weight:800;}
.modal-desc{font-size:clamp(9.5px,2.7cqw,11.5px);color:var(--text-secondary);margin-top:3px;}
.modal-balance{font-size:clamp(10.5px,2.9cqw,12.5px);margin-top:6px;}
.modal-balance strong{font-weight:800;}

.stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:12px 0 6px;
}
.stepper-btn{
  width:clamp(28px,8cqw,36px);
  height:clamp(28px,8cqw,36px);
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stepper-btn:disabled{opacity:.35;cursor:not-allowed;}
.stepper-value{font-size:clamp(14px,4cqw,17px);font-weight:800;min-width:22px;text-align:center;}

.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px;}
.btn-secondary,.btn-primary{
  padding:11px;
  border-radius:12px;
  font-size:clamp(10.5px,2.9cqw,12.5px);
  font-weight:700;
  cursor:pointer;
}
.btn-secondary{border:1px solid var(--border);background:var(--surface);color:var(--text);}
.btn-primary{border:none;background:var(--ink);color:var(--ink-contrast);}

.modal-tabs{
  display:flex;
  gap:6px;
  background:var(--surface-2);
  padding:4px;
  border-radius:12px;
  margin-bottom:12px;
}
.tab{
  flex:1;
  padding:8px 4px;
  border:none;
  border-radius:9px;
  background:transparent;
  color:var(--text-secondary);
  font-weight:700;
  font-size:clamp(9.5px,2.7cqw,11px);
  cursor:pointer;
}
.tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 5px rgba(0,0,0,0.08);}
.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:12px;
}
.product-grid[hidden]{display:none;}
.product{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:13px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  text-align:center;
}
.product-emoji{font-size:clamp(18px,5.5cqw,24px);}
.product p{font-size:clamp(9px,2.5cqw,10.5px);font-weight:600;line-height:1.3;}

.btn-locked{
  width:100%;
  padding:11px;
  border-radius:12px;
  border:1.5px dashed var(--border);
  background:var(--surface-2);
  color:var(--text-tertiary);
  font-weight:700;
  font-size:clamp(10px,2.8cqw,12px);
  margin-bottom:8px;
  cursor:not-allowed;
}
.btn-close-modal{width:100%;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}