/* ============== Design Tokens ============== */
:root{
  /* Core palette (대비 강화) */
  --bg:#f2f4f7;
  --bg2:#eef1f6;
  --card:#ffffff;
  --card-tint:#f9fafb;
  --text:#0b1220;
  --muted:#5b6472;
  --accent:#243ed1;
  --accent-2:#243ed1;
  --ring:rgba(31,79,191,.28);
  --ok:#10b981;
  --err:#ef4444;

  /* Borders & effects */
  --border:#c4c9d1;          /* 기본 보더 */
  --border-strong:#9aa3af;   /* 강조 보더 */
  --radius:14px;
  --shadow:0 12px 28px rgba(2, 6, 23, .14); /* 가시성 좋은 섀도우 */

  /* Brand (유지) */
  --amx-blue-900:#041233;
  --amx-blue-800:#061a49;
  --amx-blue-700:#0f1f40;
  --amx-blue-600:#16306d;
  --amx-blue-500:#1f4fbf;
  --amx-blue-400:#3d82ff;
  --amx-blue-300:#6aa7ff;
  --amx-blue-100:#e8f0ff;
  --amx-text:#0b1220;
  --amx-muted:#6b7280;
  --amx-danger:#e02424;
  --amx-border:#d7e0ff;
}

/* ============== Base ============== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", sans-serif;
  color:var(--text);
  background:
    linear-gradient(#f3f5f9, var(--bg2)) fixed,
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Focus visibility */
:focus{outline:none}
:focus-visible{ box-shadow:0 0 0 4px var(--ring) !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ============== Layout ============== */
.wrap{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:20px;
}
.card{
  width:100%;
  max-width:520px;
  padding:24px;
  border:1.5px solid var(--border-strong);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
}

/* ============== Header / Logo / Titles ============== */
.logo{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px; }
.logo img{
  width:100%; height:auto; display:block; object-fit:contain;
  border-radius:10px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.18));
}
.title{
  margin:4px 0 2px; text-align:center; font-weight:800;
  font-size:clamp(18px, 4vw, 22px); letter-spacing:.2px; color:#0f172a;
}
.subtitle{ margin:0; text-align:center; color:var(--muted); font-size:14px; }

/* 구분선 더 진하게 */
.divider{
  height:1px; margin:10px 0 6px;
  background:linear-gradient(90deg, transparent, #7b8794, transparent);
}

/* Footer */
.footer{ margin-top:14px; text-align:center; color:var(--muted); font-size:12px; }

/* ============== Forms ============== */
form{ margin-top:18px; display:grid; gap:14px; }
.field{ display:grid; gap:8px; }
.field + .field{ margin-top:4px; }

.label{ font-size:14px; color:#0f172a; font-weight:800; }

/* 인풋: 연한 틴트 + 또렷한 보더 + 포커스 링 */
.input, select.input{
  width:100%;
  color:var(--text);
  background:var(--card-tint);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:13px 14px;
  outline:none;
  transition:border .18s ease, box-shadow .18s ease;
}
.input:hover, select.input:hover{ border-color:var(--border-strong); }
.input:focus, select.input:focus{
  border-color:#335bdb;
  box-shadow:0 0 0 4px var(--ring);
}
.input::placeholder{ color:#9aa3af; }

select.input{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8fb3ff 50%),
    linear-gradient(135deg, #8fb3ff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

.row{ display:flex; gap:12px; align-items:center; }
.row .grow{ flex:1; }

.hint{ color:var(--muted); font-size:12px; margin-top:-4px; }
.help{ font-size:13px; color:var(--muted); }

/* OTP 인풋 강조 */
.otp-input{
  background:#fff;
  border:1.8px solid var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.03);
  letter-spacing:4px;
  text-align:center; font-weight:800;
}

/* ============== Chips / Policy ============== */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; font-size:13px; color:var(--text);
  background:#fff; border:1px solid var(--border-strong); border-radius:999px;
}
.chip input{ transform:translateY(1px); }
.chip.wide{ width:100%; border-radius:12px; justify-content:flex-start; }

.policy{ margin-top:10px; }
.policy > summary{
  cursor:pointer; user-select:none;
  padding:10px 12px; color:var(--text);
  background:#fff; border:1.5px solid var(--border-strong); border-radius:10px;
}
.policy[open] > summary{
  border-color:#335bdb; box-shadow:0 0 0 4px var(--ring);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
.policy-box{
  padding:12px; max-height:260px; overflow:auto;
  background:#ffffff; border:1.5px solid var(--border-strong); border-top:none;
  border-bottom-left-radius:10px; border-bottom-right-radius:10px;
}
.policy-box pre{
  margin:0; white-space:pre-wrap; word-break:keep-all; color:#000000;
  font-size:12px; line-height:1.6;
}

/* ============== Buttons ============== */
/* Base */
.btn{
  display:inline-block; cursor:pointer; user-select:none;
  padding:12px 16px; border-radius:12px; border:1.5px solid var(--accent);
  font-weight:800; color:#fff; line-height:1; text-align:center;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow:0 8px 20px rgba(31,79,191,.28);
  transition:transform .05s ease, filter .2s ease, box-shadow .2s ease;
  min-width:100%;
}
.btn:hover{ filter:brightness(1.04); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* Outline variant: 흰 바탕 + 진한 보더 */
.btn-outline{
  background:#fff; color:#0b1220;
  border:1.5px solid var(--border-strong); box-shadow:none;
}
.btn-outline:hover{ border-color:#335bdb; box-shadow:0 0 0 4px var(--ring); }

/* Legacy color variants (유지) */
.btn.blue{
  background:linear-gradient(180deg, var(--amx-blue-300), var(--amx-blue-400));
  color:#fff; border-color:var(--amx-blue-500);
  box-shadow:0 6px 16px rgba(61,130,255,.35);
}
.btn.gray{ background:#ececec; color:#333; border-color:#d4d4d4; }
.btn.dark{ background:#0b1220; color:#fff; }

/* Sizes (compat) */
.btn.small{ height:34px; line-height:34px; padding:0 10px; border-radius:8px; }
.btn.big{ height:48px; line-height:48px; font-size:16px; border-radius:12px; }
.float-right{ float:right; margin-left:6px; }

/* ============== Messages ============== */
.msg{
  display:none; margin-top:8px; padding:10px 12px; border-radius:10px; font-size:13px;
  border:1.5px solid var(--border-strong); background:#f1f5f9; color:#0b1220;
}
.msg.ok{
  display:block; background:#ecfdf5; border-color:var(--ok); color:#065f46;
}
.msg.err{
  display:block; border-color:var(--err); background:#fef2f2; color:#7f1d1d;
}

/* ============== Overlay / Spinner ============== */
.overlay{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(3,10,30,.55); backdrop-filter:blur(2px); z-index:50;
}
.spinner{
  width:44px; height:44px; border-radius:50%;
  border:3px solid #1c2f5e; border-top-color:#8fb0ff;
  box-shadow:0 0 50px rgba(124,160,255,.4);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ============== Light Card Blocks (optional sections) ============== */
.reg-section{ position:relative; }
.home-btn{
  position:absolute; top:-35px; right:0;
  padding:8px 10px; border:none; border-radius:6px; cursor:pointer;
  background:#0b1220; color:#fff;
}
.logo-wrap img{ max-width:100%; height:auto; }

.container{ padding:10px; }
.content{ display:block; gap:20px; }

.card-wrap{
  margin-bottom:18px; overflow:hidden;
  background:#fff; color:var(--amx-text);
  border:1.5px solid var(--border-strong); border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.card-header{
  padding:12px 14px; font-weight:800; color:#0b1220;
  background:linear-gradient(180deg,#f7faff,#eef5ff);
  border-bottom:1px solid var(--amx-border);
}
.info-wrap{ padding:14px; }
.tablea td{ padding:10px 8px; vertical-align:middle; }
.tablea td:first-child{ color:#111; }

/* Light inputs for white cards */
.bx_input{
  width:100%; height:42px; padding:0 12px; font-size:14px; background:#fff; color:#111;
  border:1.5px solid var(--border-strong); border-radius:10px; outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.bx_input:focus{ border-color:#335bdb; box-shadow:0 0 0 3px rgba(61,130,255,.22); }

.email-row, .code-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.auth-block{
  margin-top:10px; padding:12px; border:1.5px dashed var(--amx-border);
  border-radius:12px; background:#f7faff;
}
.bx_input.code{
  max-width:220px; text-align:center; letter-spacing:6px; font-weight:800;
  font-family:ui-monospace, Menlo, Consolas, monospace;
}

.timer{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:14px; color:var(--amx-blue-500); font-weight:800;
}

.survey-card-wrap .survey-div{ padding:14px; }
.survey-title h4{ margin:0 0 8px 0; font-size:16px; color:#0b1220; }
.survey-wrap{ display:flex; gap:10px; flex-wrap:wrap; }
.row-wrap label{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; background:#f8fbff; border:1.5px solid var(--amx-border); border-radius:10px;
}

.btn-div{ text-align:center; margin:20px auto 10px; }
.footer-contact{ text-align:center; margin:30px 0; color:#000; }

/* ============== Language Switch ============== */
.lang-switch.under-logo{
  display:flex; justify-content:center; margin:8px 0 10px;
}
.lang-toggle{
  display:inline-flex; gap:4px; padding:4px;
  background:#ffffff; border:1.5px solid var(--border-strong); border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(42,79,156,.08);
}
.lang-opt{
  display:inline-block; padding:8px 16px;
  font-size:13px; font-weight:800; letter-spacing:.2px; text-decoration:none;
  color:var(--text); border-radius:999px;
  transition:filter .2s, box-shadow .2s, background .2s;
}
.lang-opt:hover{ filter:brightness(1.06); box-shadow:0 0 0 3px var(--ring); }
.lang-opt.active{
  color:#fff; border:1px solid #2a4e9c;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 16px rgba(61,130,255,.28);
}

/* ============== Utilities ============== */
.req{ color:var(--amx-danger); }
.text-bold{ font-weight:800; }
.sr-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }


/* ============== Ticket (Mobile Pass) ============== */
/* 카드/입력과 동일한 톤 & 더 또렷한 구획선/배지/QR 박스 */
.ticket .header{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:8px; }
.ticket .logo img{
  height:auto; width:100%; display:block; object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.18)); border-radius:10px; margin-bottom:20px;
}
.ticket .title{ font-weight:800; font-size:20px; text-align:center; color:#0b1220; }
.ticket .subtitle{ color:red; font-size:15px; text-align:center; font-weight: 400;}

.ticket .badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:#0b1220;
  border:1.5px solid var(--border-strong);
  padding:8px 12px; border-radius:12px; font-size:13px; margin-top:6px;
}

.ticket .info{ display:grid; gap:10px; margin:14px 0 6px; }
.ticket .row{
  display:flex; justify-content:space-between; gap:12px;
  background:#fff;
  border:1.5px solid var(--border-strong);
  border-radius:12px; padding:12px 14px;
}
.ticket .key{ color:#0b1220; font-weight:800; font-size:14px; }
.ticket .val{ color:#334155; font-size:14px; }

.ticket .divider{ height:1px; background:linear-gradient(90deg, transparent, #7b8794, transparent); margin:12px 0; }

.ticket .qr-wrap{
  display:grid; place-items:center; gap:10px; padding:14px;
  background:#fff; border:1.5px dashed var(--border-strong); border-radius:14px;
}
.ticket .qr-box{
  background:#fff; padding:14px; border-radius:12px;
  border:1.5px solid var(--border); box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.ticket .ticker{
  width:100%; border:1.5px solid var(--border-strong);
  border-radius:12px; background:#fff; padding:6px 8px;
  box-shadow:inset 0 0 0 1px rgba(42,79,156,.08);
}
.ticket .ticker marquee{ display:block; }

.ticket .code-text{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:14px; letter-spacing:1px; color:#003B8C; word-break:break-all;
}
.ticket .code-sep{ color:#7f93bd; margin:0 12px; }

.ticket .notice{
  margin-top:10px; font-size:14px; color:var(--amx-danger); text-align:center; font-weight: 600;
}
.ticket .notice strong{ color:#0b1220; }

.ticket .actions{ display:grid; gap:10px; margin-top:12px; }

.ticket .pay-hint{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:#fff; color:#0b1220;
  border:1.5px solid var(--border-strong); font-size:13px; text-align:center;
}



/* ============== Responsive ============== */
@media (max-width:480px){
  .card{ padding:18px; border-radius:12px; }
  .btn{ padding:12px 14px; }
  .input, select.input{ padding:12px 12px; }
}
@media (max-width:768px){
  .email-row, .code-row{ gap:10px; }
}

@media (max-width:480px){
  .ticket .title{ font-size:18px; }
  .ticket .row{ padding:10px 12px; }
}