:root{
  /* ===== Color / Glass ===== */
  --ink: rgba(10,12,14,.92);
  --muted: rgba(10,12,14,.66);
  --muted2: rgba(10,12,14,.48);

  --glass: rgba(255,255,255,.36);
  --glass2: rgba(255,255,255,.18);
  --glass3: rgba(255,255,255,.54);

  --line: rgba(255,255,255,.22);
  --line2: rgba(0,0,0,.10);

  --accent:#ffd54a;
  --accent2:#ffbf1f;

  --shadow: 0 26px 90px rgba(0,0,0,.20);
  --shadow2: 0 14px 44px rgba(0,0,0,.14);

  --r14:14px;
  --r18:18px;
  --r24:24px;
  --r30:30px;

  --max:1320px;
  --topbar-h:78px;

  /* ===== Typography scale ===== */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;

  --lh-tight: 1.12;
  --lh-base: 1.72;

  /* ===== Spacing ===== */
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-12: 12px;
  --gap-14: 14px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-22: 22px;

  /* ===== Blur tuning (performance) ===== */
  --blur: 16px;
  --blur-strong: 18px;

  /* ===== Background (통일) ===== */
  --bg-image: url('../assets/images/page1.jpg');
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Pretendard Variable",Pretendard,"Noto Sans KR",sans-serif;
  color:var(--ink);
  background:#0b1020;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Background shell ===== */
.bg{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  isolation:isolate; /* overlay blend 안정화 */
}

.bg::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bg-image) center/cover no-repeat;
  transform: scale(1.015);
  filter: saturate(1.02) contrast(1.02);
  z-index:0;
}

.bg::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:
    radial-gradient(980px 620px at 50% 34%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(880px 520px at 72% 45%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.22) 100%);
  opacity:.92;
  pointer-events:none;
}

/* ===== Container ===== */
.container{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
  padding: calc(var(--topbar-h) + 18px) 16px 24px;
}

/* ===== Topbar ===== */
.topbar{
  position:fixed;
  top: max(12px, env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  width: calc(100% - 28px);
  max-width: var(--max);

  padding:12px 14px;
  border-radius:999px;

  background: rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.26);
  box-shadow: var(--shadow2);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;

  backdrop-filter: blur(var(--blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
}

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.dot{
  width:12px; height:12px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent2));
  box-shadow:0 0 0 5px rgba(255,191,31,.20);
  flex:0 0 auto;
}
.brandTitle{
  font-weight: 950;
  letter-spacing:-.35px;
  font-size: var(--fs-14);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brandSub{
  margin-top:2px;
  font-size: var(--fs-12);
  color: rgba(10,12,14,.54);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.nav a{
  text-decoration:none;
  color: rgba(0,0,0,.80);
  background: rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.24);
  padding:10px 12px;
  border-radius:14px;
  font-weight: 950;
  letter-spacing:-.15px;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
  user-select:none;
}

.nav a:hover{ filter: brightness(1.02); }
.nav a:active{ transform: translateY(1px); }

.nav a.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: rgba(0,0,0,.88);
  box-shadow: 0 16px 44px rgba(255,191,31,.20);
}

/* ===== Panels ===== */
.panel{
  border-radius: var(--r30);
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow);
  padding: 22px;

  backdrop-filter: blur(var(--blur-strong)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(120%);
}

/* Subtle inner highlight */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 30% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 420px at 70% 35%, rgba(255,255,255,.10), transparent 62%);
  opacity:.70;
  mix-blend-mode: overlay;
}

/* 위 pseudo가 absolute라 panel에 position 필요 */
.panel{ position:relative; overflow:hidden; }
.panel > *{ position:relative; z-index:1; }

/* ===== Headings / Text ===== */
.h1{
  margin:0 0 10px;
  font-weight: 980;
  letter-spacing:-1.05px;
  line-height: var(--lh-tight);
  font-size: clamp(28px, 3vw, 46px);
  color: rgba(0,0,0,.92);
}

.lead{
  margin:0 0 14px;
  color: rgba(0,0,0,.72);
  line-height: var(--lh-base);
  font-size: 15.5px;
}

h2{
  margin:0 0 10px;
  font-weight: 950;
  letter-spacing:-.35px;
  color: rgba(0,0,0,.88);
}

/* ===== Grid ===== */
.grid2{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: var(--gap-16);
  align-items:start;
}

@media(max-width:980px){
  .grid2{ grid-template-columns:1fr; }
}

/* ===== Fields ===== */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

label{
  font-size: 12.5px;
  font-weight: 950;
  color: rgba(0,0,0,.72);
  letter-spacing:-.12px;
}

input,select,textarea{
  width:100%;
  padding: 13px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.56);
  font-size:16px; /* iOS zoom 방지 */
  color: rgba(0,0,0,.88);
  outline:none;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

textarea{ min-height: 96px; resize: vertical; }

input::placeholder, textarea::placeholder{
  color: rgba(0,0,0,.40);
}

input:focus,select:focus,textarea:focus{
  border-color: rgba(255,191,31,.55);
  box-shadow:
    0 0 0 4px rgba(255,191,31,.18),
    0 1px 0 rgba(255,255,255,.25) inset;
}

/* ===== Buttons ===== */
.btnRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:14px;
}

button, .btn{
  border:0;
  cursor:pointer;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 950;
  letter-spacing:-.18px;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.btn.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: rgba(0,0,0,.88);
  box-shadow: 0 16px 44px rgba(255,191,31,.20);
}
.btn.ghost{
  background: rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.24);
  color: rgba(0,0,0,.84);
}

button:hover, .btn:hover{ filter: brightness(1.02); }
button:active, .btn:active{ transform: translateY(1px); }

/* ===== Table ===== */
.table{
  width:100%;
  border-collapse:collapse;
  font-size: 13px;
  color: rgba(0,0,0,.84);
  border-radius: var(--r18);
  overflow:hidden;
}

.table th,.table td{
  padding: 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.18);
  white-space:nowrap;
}

.table th{
  background: rgba(255,255,255,.46);
  color: rgba(0,0,0,.62);
  font-weight: 980;
  letter-spacing:-.15px;
}

.table tr:hover td{
  background: rgba(255,255,255,.50);
}

/* small tag/badge */
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.22);
  font-weight: 950;
  color: rgba(0,0,0,.78);
}

/* ===== Toast (app.js가 생성) ===== */
.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom: 18px;
  z-index: 2000;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.14);
  color: rgba(0,0,0,.84);
  font-weight: 950;
  letter-spacing:-.15px;
  display:none;
  max-width: calc(100% - 28px);
}

/* ===== Responsive polish ===== */
@media(max-width:520px){
  .topbar{ border-radius: 22px; padding: 12px 12px; }
  .panel{ padding: 16px; border-radius: 22px; }
  .h1{ font-size: 28px; letter-spacing:-.95px; }
  .lead{ font-size: 14.7px; }
  .table th,.table td{ padding: 11px 12px; }
}

/* ===== Performance: reduce heavy blur on low motion / reduced transparency ===== */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .nav a, button, .btn{ transition:none !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .topbar, .panel{
    background: rgba(255,255,255,.70);
  }
}
/* =========================
   UI 밝기/가독성 업그레이드 (override)
   app.css 맨 아래에 붙여넣기
   ========================= */

/* 카드(패널) 배경 더 밝게 */
:root{
  --glass: rgba(255,255,255,.46);
  --glass2: rgba(255,255,255,.28);
  --line: rgba(255,255,255,.28);
}

/* 패널 자체도 한 번 더 밝게(나머진 그대로) */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.30)) !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* 테이블 글자 전체 크기 업 */
.table{ font-size: 14.5px !important; }
.table th{ font-size: 12.8px !important; }
.table td{ font-size: 14.5px !important; }

/* “품목명/첫 컬럼”은 더 크고 더 굵게 (장바구니/요약/품목표에서 체감 큼) */
.table td:first-child{
  font-size: 15.6px !important;
  font-weight: 950 !important;
  letter-spacing: -0.2px !important;
}

/* 버튼/배지 글자도 살짝 키워서 눌림감 + 가독성 */
.btn, button{ font-size: 14.5px !important; }
.badge{ font-size: 13px !important; }

/* =========================
   INDEX: 카드(패널) 모양 그대로 "아래로만" 내리기
   ========================= */
.page-index .bg{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* 컨테이너가 남은 높이를 다 먹고, 내용(카드)을 바닥으로 정렬 */
.page-index .container{
  flex: 1;
  display:flex;
  align-items:flex-end;     /* ✅ 아래로 */
  justify-content:center;   /* 좌우는 중앙(폭은 그대로) */

  /* 기존 상단/하단 여백 유지 */
  padding: calc(var(--topbar-h) + 18px) 16px 44px;
}

/* ✅ 카드 폭/모양은 기존 그대로: 아무 것도 건드리지 않음 */