/* RTX Coupon Platform - Service-ready Design */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --primary: #4F46E5;
  --primary-light: #818CF8;
  --primary-bg: rgba(79,70,229,.06);
  --primary-border: rgba(79,70,229,.18);

  --accent: #10B981;
  --accent-light: #34D399;
  --accent-bg: rgba(16,185,129,.08);
  --accent-border: rgba(16,185,129,.22);

  --warning: #F59E0B;
  --danger: #EF4444;

  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  --bg: #F9FAFB;
  --card: #ffffff;
  --text: var(--gray-900);
  --muted-color: var(--gray-500);
  --line: var(--gray-200);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --tap: 44px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);

  --focus: 0 0 0 3px rgba(79,70,229,.20);
  --transition: .15s ease;
}

/* ===== Reset ===== */
*{box-sizing:border-box; margin:0; padding:0;}
html{ height:100%; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body{
  min-height:100%;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Noto Sans KR", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:14px;
  overflow-x:hidden;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
a{color:inherit; text-decoration:none;}
code{
  font-family: "SF Mono", "Fira Code", monospace;
  font-size:12px;
  background:var(--gray-100);
  padding:2px 6px;
  border-radius:6px;
  color:var(--gray-700);
  word-break:break-all;
  overflow-wrap:anywhere;
}

/* ===== Utility ===== */
.muted{ color:var(--muted-color); font-size:13px; line-height:1.6; }
.muted2{ color:var(--gray-400); font-size:12px; line-height:1.6; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border:1px solid var(--gray-200);
  background:var(--gray-50);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:var(--gray-600);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.pill.primary{
  border-color: var(--primary-border);
  background: var(--primary-bg);
  color: var(--primary);
}
.pill.mint, .pill.success{
  border-color: var(--accent-border);
  background: var(--accent-bg);
  color: #059669;
}

/* ===== Result Highlight ===== */
.result-highlight{
  margin-top: 1rem;
  padding: 1.2rem;
  border: 2px solid #059669;
  border-radius: var(--radius);
  background: #ecfdf5;
  text-align: center;
}
.result-label{
  font-size: .85rem;
  color: #059669;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .4rem;
}
.result-value{
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.result-value b{
  font-size: 2rem;
  color: #059669;
}
.result-note{
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--muted);
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  height:64px;
  display:flex; gap:16px; align-items:center;
}

.brand{
  font-weight:800;
  font-size:17px;
  letter-spacing:-.3px;
  display:flex; align-items:center; gap:10px;
  color:var(--gray-900);
  flex-shrink:0;
}
.brand .dot{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:900;
}
.brand .network-pill{
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius:6px;
  background:var(--primary-bg);
  color:var(--primary);
  border:1px solid var(--primary-border);
  letter-spacing:.03em;
}

/* ===== Tabs ===== */
.tabs{
  display:flex; gap:4px; align-items:center;
  margin-left:auto;
  background:var(--gray-100);
  border-radius:10px;
  padding:3px;
}
.tab{
  padding:7px 12px;
  color:var(--gray-500);
  font-size:13px;
  font-weight:600;
  border:0;
  background:transparent;
  border-radius:8px;
  white-space:nowrap;
  cursor:pointer;
  transition:all var(--transition);
  width:auto;
}
.tab:hover{ color:var(--gray-700); }
.tab.active{
  color:var(--gray-900);
  background:#fff;
  box-shadow:var(--shadow-sm);
  font-weight:700;
}

/* ===== Tab Dropdowns ===== */
.tab-dropdown{
  position:relative;
}
.tab-dropdown-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.tab-arrow{
  font-size:10px;
  opacity:.5;
  transition:transform var(--transition);
}
.tab-dropdown.open .tab-arrow{
  transform:rotate(180deg);
}
.tab-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  min-width:180px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:6px;
  z-index:100;
}
.tab-dropdown.open .tab-dropdown-menu{
  display:block;
}
.tab-dropdown-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  font-size:13px;
  font-weight:600;
  color:var(--gray-600);
  white-space:nowrap;
  transition:all var(--transition);
}
.tab-dropdown-item .nav-icon{
  width:24px;
  text-align:center;
  font-size:14px;
  flex-shrink:0;
}
.tab-dropdown-item:hover{
  background:var(--gray-50);
  color:var(--gray-900);
}
.tab-dropdown-item.active{
  background:var(--primary-bg);
  color:var(--primary);
  font-weight:700;
}

/* ===== Hamburger ===== */
.hamburger{
  display:none;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:10px;
  width:var(--tap);
  height:var(--tap);
  justify-content:center;
  cursor:pointer;
  color:var(--gray-700);
  transition:all var(--transition);
  flex-shrink:0;
}
.hamburger:hover{ background:var(--gray-50); border-color:var(--gray-300); }
.hamburger:active{ transform: translateY(1px); }

/* ===== Drawer ===== */
.drawer-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.4);
  z-index:80;
  backdrop-filter:blur(4px);
}
.drawer{
  position:fixed;
  top:0; left:0;
  height:100%;
  width:min(340px, 85vw);
  background:var(--card);
  border-right:1px solid var(--line);
  transform: translateX(-100%);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  z-index:90;
  display:flex;
  flex-direction:column;
  box-shadow: var(--shadow-xl);
}
.drawer.open{ transform: translateX(0); }
.drawer-backdrop.open{ display:block; }
.drawer-head{
  padding:20px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer-head-title{ font-weight:800; font-size:16px; }
.drawer-links{ padding:12px; flex:1; overflow-y:auto; }

.nav-group-label{
  font-size:11px;
  font-weight:700;
  color:var(--gray-400);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:12px 12px 6px;
  margin-top:4px;
}

.drawer-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--gray-600);
  margin-bottom:2px;
  font-weight:600;
  font-size:14px;
  transition:all var(--transition);
}
.drawer-link .nav-icon{
  width:32px; height:32px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  background:var(--gray-100);
  flex-shrink:0;
}
.drawer-link:hover{
  background:var(--gray-50);
  color:var(--gray-900);
}
.drawer-link.active{
  background:var(--primary-bg);
  border-color:var(--primary-border);
  color:var(--primary);
}
.drawer-link.active .nav-icon{
  background:var(--primary);
  color:#fff;
}
.drawer-foot{
  margin-top:auto;
  padding:16px 20px;
  border-top:1px solid var(--line);
}

/* ===== Main container ===== */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:24px 24px 40px;
  min-width:0;
}

/* ===== Page header ===== */
.page-header{
  margin-bottom:24px;
}
.page-title{
  font-size:24px;
  letter-spacing:-.4px;
  font-weight:800;
  color:var(--gray-900);
  line-height:1.3;
}
.page-desc{
  margin-top:6px;
  color:var(--gray-500);
  font-size:14px;
}

/* ===== Panel / Card ===== */
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--card);
  padding:20px;
  margin-top:16px;
  box-shadow:var(--shadow-sm);
  min-width:0;
}
.panel-header{
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--gray-100);
}
.panel-icon{
  width:36px; height:36px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  background:var(--primary-bg);
  flex-shrink:0;
}
.panel-title{
  font-weight:700;
  font-size:15px;
  color:var(--gray-900);
}
.panel-desc{
  font-size:13px;
  color:var(--gray-500);
  margin-top:2px;
}

.panel.highlight{
  border-color:var(--primary-border);
  background:linear-gradient(135deg, rgba(79,70,229,.02), rgba(129,140,248,.04));
}
.panel.success-highlight{
  border-color:var(--accent-border);
  background:var(--accent-bg);
}

/* ===== Info banner ===== */
.info-banner{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px;
  border-radius:var(--radius);
  background:var(--primary-bg);
  border:1px solid var(--primary-border);
  margin-top:16px;
}
.info-banner .info-icon{
  width:20px; height:20px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  font-weight:900;
  flex-shrink:0;
  margin-top:1px;
}
.info-banner .info-text{
  font-size:13px;
  color:var(--gray-700);
  line-height:1.5;
}

/* ===== Layout ===== */
.row{ display:flex; gap:16px; }
.row > div{ flex:1; }
@media (max-width: 860px){
  .row{ flex-direction:column; }
  .row-top{ flex-direction:column; }
  .about-stats{ grid-template-columns:repeat(2, 1fr); }
  .about-features{ grid-template-columns:1fr; }
  .about-roles{ grid-template-columns:1fr; }
  .about-tech-grid{ grid-template-columns:1fr; }
  .about-hero-title{ font-size:24px; }
}

/* ===== Form ===== */
label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--gray-700);
  margin-bottom:4px;
  margin-top:16px;
}
.panel-header + label,
label:first-child{ margin-top:0; }
.row + label{ margin-top:16px; }
.chip-group + label{ margin-top:16px; }

input, textarea, select{
  width:100%;
  padding:10px 14px;
  margin:0;
  border-radius:var(--radius);
  border:1px solid var(--gray-300);
  background:#fff;
  min-height:var(--tap);
  font-size:14px;
  color:var(--text);
  outline:none;
  transition:all var(--transition);
  font-family:inherit;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--primary);
  box-shadow:var(--focus);
}
input::placeholder{ color:var(--gray-400); }
textarea{ min-height:100px; resize:vertical; }
select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
input[type="file"]{
  padding:10px;
  background:var(--gray-50);
  border-style:dashed;
  cursor:pointer;
}
input[type="file"]:hover{ border-color:var(--primary); }

/* ===== Buttons ===== */
button{
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:none;
  min-height:auto;
  font-family:inherit;
  cursor:pointer;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:var(--tap);
  padding:0 20px;
  border:none;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:#fff;
  border-radius:var(--radius);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:all var(--transition);
  box-shadow: 0 1px 2px rgba(79,70,229,.2);
  margin-top:16px;
}
.btn:hover{
  filter:brightness(1.05);
  box-shadow: 0 4px 12px rgba(79,70,229,.25);
  transform:translateY(-1px);
}
.btn:active{ transform:translateY(0); filter:brightness(.98); }

.btn.secondary{
  background:#fff;
  color:var(--gray-700);
  border:1px solid var(--gray-300);
  box-shadow:var(--shadow-sm);
  font-weight:600;
}
.btn.secondary:hover{
  border-color:var(--primary);
  color:var(--primary);
  box-shadow:var(--focus);
  background:#fff;
}

.btn.success{
  background:linear-gradient(135deg, #059669, var(--accent));
  box-shadow:0 1px 2px rgba(16,185,129,.2);
}

.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
  filter:none !important;
}

.btn-row{
  display:flex; gap:8px; margin-top:16px;
}
.btn-row .btn{ flex:1; }

/* ===== Chip Buttons (period, quantity) ===== */
.chip-group{
  display:flex; gap:6px; margin:4px 0 0; flex-wrap:wrap;
}
.row + .chip-group{ margin-top:8px; }
.chip{
  padding:4px 12px;
  border:1px solid var(--gray-200);
  border-radius:999px;
  background:var(--card);
  color:var(--gray-500);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  width:auto;
}
.chip:hover{ border-color:var(--primary-light); color:var(--primary); }
.chip.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* ===== Thumbnail ===== */
.thumb{
  width:120px; height:120px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--gray-50);
  flex-shrink:0;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }

/* ===== Log / Console ===== */
pre{
  white-space:pre-wrap;
  word-break:break-all;
  overflow-wrap:anywhere;
  background:var(--gray-900);
  color:var(--gray-300);
  padding:14px 16px;
  border-radius:var(--radius);
  min-height:80px;
  max-height:240px;
  border:1px solid var(--gray-800);
  overflow:auto;
  font-family:"SF Mono","Fira Code",monospace;
  font-size:12px;
  line-height:1.7;
  margin-top:16px;
}

/* ===== QR layout ===== */
.qrwrap{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; margin-top:16px; }
.qrbox{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
.qrbox-title{
  font-size:13px;
  font-weight:700;
  color:var(--gray-700);
  margin-bottom:12px;
}
canvas{ max-width:100%; }
video{
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#000;
  margin-top:8px;
}

/* ===== Table ===== */
table{ width:100%; border-collapse:collapse; }
th{
  text-align:left;
  padding:10px 12px;
  font-size:12px;
  font-weight:700;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:2px solid var(--gray-200);
  background:var(--gray-50);
}
td{
  padding:12px;
  border-bottom:1px solid var(--gray-100);
  font-size:13px;
  color:var(--gray-700);
}
tr:hover td{ background:var(--gray-50); }

/* ===== Detail list ===== */
.detail-list{
  display:grid;
  gap:8px;
}
.detail-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:13px;
  padding:6px 0;
  border-bottom:1px solid var(--gray-100);
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-all;
}
.detail-label{
  font-weight:600;
  color:var(--gray-500);
  min-width:120px;
  flex-shrink:0;
}
.detail-value{
  color:var(--gray-800);
  font-weight:500;
}

/* ===== GNB Wallet ===== */
.gnb-wallet{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:12px;
  flex-shrink:0;
}
.gnb-wallet .wstatus{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--gray-200);
  background:var(--gray-50);
  color:var(--gray-500);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.gnb-wallet .wstatus::before{
  content:"";
  width:7px; height:7px;
  border-radius:999px;
  background:var(--gray-400);
}
.gnb-wallet .wstatus.on{
  border-color:var(--accent-border);
  background:var(--accent-bg);
  color:#059669;
}
.gnb-wallet .wstatus.on::before{
  background:var(--accent);
  box-shadow:0 0 6px rgba(16,185,129,.4);
}

.gnb-wallet .wbtn{
  height:36px;
  width:auto;
  padding:0 14px;
  border-radius:8px;
  border:1px solid var(--gray-200);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  color:var(--gray-700);
  transition:all var(--transition);
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:auto;
  margin:0;
}
.gnb-wallet .wbtn:hover{
  border-color:var(--primary);
  color:var(--primary);
  box-shadow:var(--focus);
}

/* ===== Coupon card (JS-rendered) ===== */
.coupon-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.coupon-card-title{
  font-weight:900;
  color:var(--gray-900);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .tabs{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; gap:8px; }
  .container{ padding:16px 16px 32px; }
  .brand .network-pill{ display:none; }
  .gnb-wallet{ margin-left:auto; }
}
@media (max-width: 640px){
  .gnb-wallet .wstatus{ display:none; }
  .qrbox-fixed{ width:100%; }
  .qrwrap{ flex-direction:column; }
}

/* ===== About page ===== */
.about-hero{
  text-align:center;
  padding:48px 24px 40px;
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, rgba(79,70,229,.04), rgba(16,185,129,.04));
  border:1px solid var(--primary-border);
  margin-top:8px;
}
.about-hero-badge{
  display:inline-block;
  padding:5px 14px;
  border-radius:999px;
  background:var(--primary-bg);
  border:1px solid var(--primary-border);
  color:var(--primary);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.about-hero-title{
  font-size:32px;
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.3;
  margin-top:20px;
  color:var(--gray-900);
}
.about-hero-sub{
  margin-top:16px;
  color:var(--gray-500);
  font-size:15px;
  line-height:1.7;
}
.about-hero-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:28px;
}

.about-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:24px;
}
.about-stat{
  text-align:center;
  padding:20px 12px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
.about-stat-value{
  font-size:18px;
  font-weight:800;
  color:var(--primary);
}
.about-stat-label{
  margin-top:4px;
  font-size:12px;
  color:var(--gray-500);
  font-weight:600;
}

.about-steps{
  display:grid;
  gap:16px;
}
.about-step{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--gray-100);
  background:var(--gray-50);
  transition:all var(--transition);
}
.about-step:hover{
  border-color:var(--primary-border);
  background:var(--primary-bg);
}
.about-step-num{
  width:32px; height:32px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  font-weight:800;
  flex-shrink:0;
}
.about-step-title{
  font-weight:700;
  font-size:14px;
  color:var(--gray-900);
}
.about-step-desc{
  font-size:13px;
  color:var(--gray-500);
  margin-top:4px;
  line-height:1.5;
}

.about-features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:24px;
}
.about-feature{
  text-align:center;
  padding:28px 16px;
}
.about-feature-icon{
  font-size:28px;
  margin-bottom:12px;
}
.about-feature-title{
  font-weight:700;
  font-size:14px;
  color:var(--gray-900);
}
.about-feature-desc{
  margin-top:8px;
  font-size:12px;
  color:var(--gray-500);
  line-height:1.6;
}

.about-tech-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.about-tech{
  padding:12px 14px;
  border-radius:var(--radius-sm);
  background:var(--gray-50);
  border:1px solid var(--gray-100);
}
.about-tech-label{
  font-size:11px;
  font-weight:700;
  color:var(--gray-400);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.about-tech-value{
  font-size:13px;
  font-weight:600;
  color:var(--gray-800);
  margin-top:2px;
}

.about-roles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.about-role{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--gray-100);
  background:var(--gray-50);
}
.about-role-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:var(--primary-bg);
  border:1px solid var(--primary-border);
  color:var(--primary);
  font-size:11px;
  font-weight:700;
  margin-bottom:12px;
}
.about-role-badge.consumer{
  background:var(--accent-bg);
  border-color:var(--accent-border);
  color:#059669;
}
.about-role-badge.admin{
  background:rgba(245,158,11,.08);
  border-color:rgba(245,158,11,.22);
  color:#D97706;
}
.about-role-list{
  list-style:none;
  padding:0;
  margin:0;
  font-size:13px;
  color:var(--gray-600);
  line-height:1.8;
}
.about-role-list li{ padding:2px 0; }
.about-role-list a{
  color:var(--primary);
  font-weight:600;
}
.about-role-list a:hover{ text-decoration:underline; }

/* About page responsive — merged with main 860px query above */

/* ===== Hidden ===== */
.local-wallet{ display:none !important; }

/* ===== Section visibility ===== */
section[data-page]{
  display:none;
  animation:fadeIn .2s ease;
  min-width:0;
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===== Spacing utilities ===== */
.mt-0{ margin-top:0 !important; }
.mt-xs{ margin-top:4px; }
.mt-sm{ margin-top:8px; }
.mt-md{ margin-top:16px; }
.mt-lg{ margin-top:24px; }
.mb-md{ margin-bottom:16px; }
.ml-auto{ margin-left:auto; }

/* ===== Typography utilities ===== */
.text-bold{ font-weight:700; }
.text-bold-lg{ font-weight:800; font-size:16px; color:var(--gray-900); }
.text-sm{ font-size:13px; color:var(--gray-600); }
.flex-1{ flex:1; min-width:0; }

/* ===== Section label ===== */
.section-label{
  font-size:13px;
  font-weight:700;
  color:var(--gray-700);
  margin-bottom:8px;
}

/* ===== Button variants ===== */
.btn-inline{
  width:auto;
  display:inline-flex;
}
.btn-sm{
  height:36px;
  padding:0 14px;
  font-size:13px;
  min-height:auto;
  margin-top:0;
}

/* ===== Drawer close ===== */
.btn-drawer-close{
  width:auto;
  padding:6px 14px;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-sm);
  background:var(--gray-50);
  font-size:13px;
  font-weight:600;
  color:var(--gray-600);
  cursor:pointer;
  transition:all var(--transition);
}
.btn-drawer-close:hover{
  border-color:var(--gray-300);
  background:var(--gray-100);
}

/* ===== Panel variants ===== */
.panel-inner{
  margin-top:12px;
  border-color:var(--gray-100);
  box-shadow:none;
}
.panel-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--gray-400);
  font-size:14px;
}

/* ===== Row variants ===== */
.row-top{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.row-actions{
  display:flex;
  gap:8px;
  align-items:flex-end;
  padding-bottom:2px;
}
/* ===== Thumbnail large ===== */
.thumb-lg{
  width:160px;
  height:160px;
}

/* ===== Nonce box ===== */
.nonce-box{
  margin-top:12px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  background:var(--gray-50);
  border:1px solid var(--gray-100);
  text-align:center;
}

/* ===== QR box variants ===== */
.qrbox-fixed{
  width:280px;
  flex-shrink:0;
}
.qrbox-flex{
  flex:1;
  min-width:0;
}
.qr-canvas{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:200px;
  background:var(--gray-50);
  border:1px solid var(--gray-100);
  border-radius:var(--radius);
}
.qr-canvas canvas{
  max-width:100%;
}

/* ===== Pre compact ===== */
.pre-compact{
  min-height:40px;
  max-height:160px;
  margin-top:8px;
}

/* ===== Icon / Link utilities ===== */
.icon-accent{
  background:var(--accent-bg) !important;
  color:#059669;
}
.link-primary{
  color:var(--primary);
  font-weight:600;
}
.link-primary:hover{
  text-decoration:underline;
}

/* ===== Table wrap ===== */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ===== Patent / Service Description ===== */
.patent-section{
  margin-top:32px;
  padding-bottom:4px;
}
.patent-section-title{
  font-size:20px;
  font-weight:900;
  color:var(--gray-900);
  letter-spacing:-.3px;
  border-bottom:2px solid var(--gray-200);
  padding-bottom:10px;
}
.patent-section-desc{
  margin-top:8px;
  font-size:14px;
  color:var(--gray-500);
}

.patent-text{
  font-size:14px;
  color:var(--gray-700);
  line-height:1.8;
}
.patent-text p{
  margin-top:8px;
}
.patent-text p:first-child{
  margin-top:0;
}

.patent-definition{
  font-size:16px;
  font-weight:800;
  color:var(--gray-900);
  padding:16px;
  background:var(--primary-bg);
  border:1px solid var(--primary-border);
  border-radius:var(--radius);
  text-align:center;
  overflow-wrap:anywhere;
}

/* Problem items */
.patent-problem{
  display:grid;
  gap:16px;
}
.patent-problem-item{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--gray-100);
  background:var(--gray-50);
}
.patent-problem-num{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.2);
  color:#DC2626;
  font-size:11px;
  font-weight:700;
  margin-bottom:6px;
}
.patent-problem-title{
  font-weight:700;
  font-size:14px;
  color:var(--gray-900);
  margin-bottom:6px;
}
.patent-problem-item p{
  font-size:13px;
  color:var(--gray-600);
  line-height:1.7;
}

/* Solution grid */
.patent-solution-grid{
  display:grid;
  gap:12px;
}
.patent-solution{
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--accent-border);
  background:var(--accent-bg);
}
.patent-solution-label{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  background:rgba(16,185,129,.12);
  border:1px solid var(--accent-border);
  color:#059669;
  font-size:11px;
  font-weight:700;
  margin-bottom:6px;
}
.patent-solution p{
  font-size:13px;
  color:var(--gray-700);
  line-height:1.7;
}

/* Feature block */
.patent-feature{
  scroll-margin-top:80px;
}
.patent-feature-highlight{
  border-color:var(--primary-border);
  background:linear-gradient(135deg, rgba(79,70,229,.015), rgba(129,140,248,.03));
}

.patent-highlight-box{
  padding:14px 16px;
  border-radius:var(--radius);
  background:var(--primary-bg);
  border:1px solid var(--primary-border);
  font-size:13px;
  color:var(--gray-700);
  line-height:1.7;
  margin-bottom:16px;
}

.patent-sub-title{
  font-size:14px;
  font-weight:700;
  color:var(--gray-800);
  margin-top:20px;
  margin-bottom:8px;
  padding-left:10px;
  border-left:3px solid var(--primary);
}

.patent-condition-list{
  list-style:none;
  padding:0;
  margin:0;
}
.patent-condition-list li{
  position:relative;
  padding:6px 0 6px 24px;
  font-size:13px;
  color:var(--gray-600);
  line-height:1.6;
  border-bottom:1px solid var(--gray-100);
}
.patent-condition-list li:last-child{
  border-bottom:none;
}
.patent-condition-list li::before{
  content:"\2713";
  position:absolute;
  left:4px;
  color:var(--accent);
  font-weight:700;
  font-size:12px;
}

/* Flow steps */
.patent-flow{
  display:grid;
  gap:8px;
}
.patent-flow-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  background:var(--gray-50);
  border:1px solid var(--gray-100);
  font-size:13px;
  color:var(--gray-700);
  line-height:1.6;
}
.patent-flow-num{
  min-width:28px;
  height:28px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  flex-shrink:0;
}

/* Formula / code block */
.patent-formula{
  margin:12px 0;
  padding:12px 16px;
  background:var(--gray-900);
  color:var(--accent-light);
  border-radius:var(--radius-sm);
  font-family:"SF Mono","Fira Code",monospace;
  font-size:13px;
  line-height:1.8;
  overflow-x:auto;
}

/* State machine */
.patent-state-machine{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:12px;
  background:var(--gray-50);
  border:1px solid var(--gray-100);
  border-radius:var(--radius);
}
.patent-state{
  padding:6px 14px;
  border-radius:999px;
  background:var(--gray-200);
  color:var(--gray-600);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.patent-state.active{
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.3);
  color:#D97706;
}
.patent-state.complete{
  background:var(--accent-bg);
  border:1px solid var(--accent-border);
  color:#059669;
}
.patent-state.expired{
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.2);
  color:#DC2626;
}
.patent-state-arrow{
  font-size:11px;
  color:var(--gray-400);
  font-weight:600;
  white-space:nowrap;
}

/* Example box */
.patent-example{
  margin-top:12px;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--gray-200);
  background:var(--gray-50);
}
.patent-example-title{
  font-weight:700;
  font-size:13px;
  color:var(--gray-800);
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--gray-200);
}
.patent-example p{
  font-size:13px;
  color:var(--gray-600);
  line-height:1.7;
}
.patent-example-table{
  width:100%;
  border-collapse:collapse;
}
.patent-example-table td{
  padding:8px 10px;
  font-size:13px;
  color:var(--gray-700);
  border-bottom:1px solid var(--gray-100);
  line-height:1.6;
  vertical-align:top;
}
.patent-example-table tr:last-child td{
  border-bottom:none;
}
.patent-example-label{
  font-weight:700;
  color:var(--gray-500);
  white-space:nowrap;
  width:100px;
}

/* ===== Exchange Market Grid ===== */
.ex-market-grid{
  display:grid;grid-template-columns:1fr 340px;gap:1rem;align-items:start;
}
.ex-col-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.75rem;padding:0 .25rem;
}
.ex-col-title{font-size:.95rem;font-weight:700;color:var(--gray-700);}
.ex-toggle-tabs{display:flex;gap:0;border-radius:8px;overflow:hidden;border:1px solid var(--gray-200);}
.ex-toggle-tab{
  padding:.4rem .75rem;border:none;background:var(--gray-50);
  font-size:.8rem;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all .15s;
}
.ex-toggle-tab.active{background:var(--primary);color:#fff;}
.ex-toggle-tab:not(.active):hover{background:var(--gray-100);color:var(--gray-700);}
.ex-list-panel{margin-bottom:0;}
.ex-list-toolbar{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;
}
.ex-form-panel{margin-bottom:0;}
.ex-manage-panel{margin-top:.75rem;}
.ex-manage-header{margin-bottom:.5rem;}

@media(max-width:900px){
  .ex-market-grid{grid-template-columns:1fr;}
  .ex-top-bar{flex-direction:column;align-items:stretch;}
  .ex-mode-toggle{align-self:flex-end;}
}

/* ===== Exchange Top Bar ===== */
.ex-top-bar{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;
}
.ex-mode-toggle{
  display:flex;gap:0;border-radius:6px;overflow:hidden;border:1px solid var(--gray-200);
  flex-shrink:0;
}
.ex-mode-btn{
  padding:.35rem .6rem;border:none;background:var(--gray-50);
  font-size:.72rem;font-weight:600;color:var(--gray-500);cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.ex-mode-btn.active{background:var(--primary);color:#fff;}
.ex-mode-btn:not(.active):hover{background:var(--gray-100);color:var(--gray-700);}

/* ===== Exchange Refresh Button ===== */
.ex-refresh-btn{
  width:28px;height:28px;border-radius:6px;border:1px solid var(--gray-200);
  background:var(--gray-50);color:var(--gray-500);font-size:1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;padding:0;line-height:1;
}
.ex-refresh-btn:hover{background:var(--gray-100);color:var(--primary);border-color:var(--primary-border);}

/* ===== Order Book - Token Selector ===== */
.ob-token-selector{display:flex;flex-wrap:wrap;gap:.5rem;}
.ob-token-chip{
  padding:.5rem 1rem;border-radius:8px;font-size:.85rem;font-weight:500;
  border:1px solid var(--gray-200);background:var(--gray-50);color:var(--gray-600);
  cursor:pointer;transition:all .15s;
}
.ob-token-chip:hover{border-color:var(--primary-light);color:var(--primary);}
.ob-token-active{
  border-color:var(--primary);background:var(--primary-bg);color:var(--primary);font-weight:700;
}

/* ===== Order Book - Price Header ===== */
.ob-price-header{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.ob-price-label{font-size:.75rem;color:var(--gray-400);margin-bottom:.25rem;}
.ob-price-value{font-size:1.5rem;font-weight:800;color:var(--gray-800);}
.ob-price-unit{font-size:.85rem;font-weight:500;color:var(--gray-400);}
.ob-price-change{font-size:1.1rem;font-weight:700;}
.ob-up{color:#10B981;}
.ob-down{color:#EF4444;}
.ob-price-vol{font-size:1.1rem;font-weight:600;color:var(--gray-700);}

/* ===== Order Book - Main Grid ===== */
.ob-main-grid{
  display:grid;grid-template-columns:1fr 340px;gap:1rem;
}

/* ===== Order Book - Book Panel ===== */
.ob-book{font-family:'Pretendard',monospace;}
.ob-book-header{
  display:grid;grid-template-columns:1fr 1fr 1fr;padding:.4rem .6rem;
  font-size:.7rem;color:var(--gray-400);font-weight:600;text-transform:uppercase;
  border-bottom:1px solid var(--gray-100);
}
.ob-row{
  display:grid;grid-template-columns:1fr 1fr 1fr;padding:.3rem .6rem;
  font-size:.82rem;font-weight:500;position:relative;
}
.ob-bar{position:absolute;top:0;right:0;height:100%;opacity:.12;z-index:0;}
.ob-bar-ask{background:#EF4444;}
.ob-bar-bid{background:#10B981;}
.ob-row span{position:relative;z-index:1;}
.ob-ask span:first-child{color:#EF4444;}
.ob-bid span:first-child{color:#10B981;}
.ob-asks{border-bottom:none;}
.ob-spread{
  text-align:center;padding:.6rem;
  border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);
  background:var(--gray-50);
}
.ob-spread-price{font-size:1.1rem;font-weight:800;color:var(--gray-800);}
.ob-spread-label{font-size:.72rem;color:var(--gray-400);margin-left:.6rem;}

/* ===== Order Book - Order Form ===== */
.ob-order-panel .panel-header{display:none;}
.ob-order-tabs{display:flex;gap:0;margin-bottom:1rem;}
.ob-order-tab{
  flex:1;padding:.65rem;border:none;background:var(--gray-100);
  font-size:.9rem;font-weight:700;cursor:pointer;transition:all .15s;
}
.ob-order-tab:first-child{border-radius:8px 0 0 8px;}
.ob-order-tab:last-child{border-radius:0 8px 8px 0;}
.ob-buy-tab.active{background:#10B981;color:#fff;}
.ob-sell-tab.active{background:#EF4444;color:#fff;}
.ob-order-form label{font-size:.8rem;color:var(--gray-500);margin-bottom:.25rem;display:block;margin-top:.75rem;}
.ob-input{
  width:100%;padding:.6rem .8rem;border:1px solid var(--gray-200);border-radius:8px;
  font-size:.95rem;font-weight:600;background:var(--gray-50);box-sizing:border-box;
}
.ob-order-type-row{display:flex;gap:1rem;margin-bottom:.5rem;}
.ob-radio-label{font-size:.85rem;color:var(--gray-600);display:flex;align-items:center;gap:.3rem;cursor:pointer;}
.ob-order-summary{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem;margin-top:1rem;border-radius:8px;background:var(--gray-50);
  border:1px solid var(--gray-100);
}
.ob-order-summary span:first-child{font-size:.82rem;color:var(--gray-500);}
.ob-order-total{font-size:1rem;font-weight:800;color:var(--gray-800);}
.ob-buy-btn{
  width:100%;margin-top:.75rem;background:#10B981 !important;border-color:#10B981 !important;
  font-size:1rem;font-weight:700;
}
.ob-buy-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ===== Order Book - Trade History ===== */
.ob-text-up{color:#10B981;font-weight:600;}
.ob-text-down{color:#EF4444;font-weight:600;}

/* ===== Order Book - RWA Cards ===== */
.ob-rwa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;}
.ob-rwa-card{
  padding:1.2rem;border-radius:10px;border:1px solid var(--gray-100);
  background:var(--gray-50);text-align:center;
}
.ob-rwa-icon{font-size:2rem;margin-bottom:.5rem;}
.ob-rwa-title{font-size:.95rem;font-weight:700;color:var(--gray-800);margin-bottom:.3rem;}
.ob-rwa-desc{font-size:.78rem;color:var(--gray-500);line-height:1.4;}

/* ===== Mobile Responsive for Order Book ===== */
@media(max-width:768px){
  .ob-price-header{grid-template-columns:repeat(2,1fr);}
  .ob-main-grid{grid-template-columns:1fr;}
  .ob-rwa-grid{grid-template-columns:1fr;}
  .exchange-mode-tabs{flex-direction:row;}
}