/* 티켓 모양 로그인 · 회원가입 화면 */

/* ══════════ 1. 티켓 로그인 화면 ══════════ */
#gate{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: var(--bg);
  overflow-y:auto;
}
#gate-bg{
  position:absolute; inset:0; z-index:0;
  background-size: cover; background-position: center;
  /* ▼▼ 뒷배경 그림 자리 ▼▼
     아래 background-image 한 줄을  url("bg.jpg")  로 바꾸면 끝입니다.
     (그림을 넣은 뒤에는 opacity 를 .34 정도로 낮추면 글씨가 잘 읽힙니다) */
  background-image:
    radial-gradient(1000px 700px at 50% 120%, var(--glow-a), transparent 62%),
    radial-gradient(600px 500px at 15% 20%, var(--glow-b), transparent 60%),
    repeating-linear-gradient(92deg, rgba(var(--text-rgb),.028) 0 2px, transparent 2px 34px);
  opacity: 1;
}
#gate-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb),.55), rgba(var(--bg-rgb),.9));
}
.gate-inner{ position:relative; z-index:1; width:100%; max-width: 780px; }
.gate-eyebrow{
  text-align:center; font-family: var(--f-head);
  font-size:11px; letter-spacing:.42em; color: var(--gold);
  margin:0 0 18px; text-transform: uppercase;
}

.ticket{
  position:relative;
  display:grid; grid-template-columns: 1fr 176px;
  background: linear-gradient(150deg, var(--ticket-a) 0%, var(--ticket-b) 46%, var(--ticket-a) 100%);
  border:1px solid var(--line);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(var(--text-rgb),.045);
}
.ticket::before{ content:""; position:absolute; inset:7px; border:1px solid var(--line-2); pointer-events:none; }
.ticket::after{
  content:""; position:absolute; top:0; bottom:0; right:176px; width:0;
  border-left: 1px dashed rgba(var(--gold-rgb),.5);
}
.notch{
  position:absolute; right:176px; width:18px; height:18px; border-radius:50%;
  background: var(--bg); transform: translateX(50%); z-index:2;
}
.notch.top{ top:-9px; } .notch.bot{ bottom:-9px; }

.ticket-main{ padding: 42px 38px 36px; min-height: 420px; }
.t-row{
  display:flex; align-items:baseline; gap:12px;
  font-family: var(--f-head); font-size:10.5px; letter-spacing:.3em;
  color: var(--gold); text-transform: uppercase;
}
.t-row .dash{ flex:1; height:1px; background: var(--line); }
.t-title{
  font-family: var(--f-brush);
  font-size: clamp(52px, 12vw, 86px);
  line-height: .96; margin: 16px 0 2px; color: var(--text);
  text-wrap: balance; text-shadow: 0 2px 18px rgba(var(--bg-rgb),.6);
}
.t-sub{ font-family: var(--f-head); font-size:12px; letter-spacing:.24em; color: var(--text-3); margin:8px 0 26px; }
.t-ask{ font-family: var(--f-brush); font-size: clamp(26px, 5.6vw, 36px); line-height:1.35; color: var(--text); margin: 0 0 4px; }
.t-ask-note{ font-size:12.5px; color: var(--text-3); margin:0 0 18px; }

.t-field{ display:grid; gap:10px; }
.t-field .row{ display:flex; gap:10px; flex-wrap:wrap; }
/* 예약자명·비밀번호 칸에만 적용 (.row 안). 체크박스까지 늘어나지 않도록 범위를 좁힘 */
.t-field .row input{
  flex:1 1 200px; min-width:0;
  background: rgba(var(--text-rgb),.045); border:1px solid var(--line);
  border-radius: var(--radius); color: var(--text);
  font-family: var(--f-head); font-size:16px; padding: 12px 15px;
}
.t-field .row input::placeholder{ color: var(--text-3); opacity:.7; font-family: var(--f-body); font-size:14px; }
.t-field .row input:focus{ border-color: var(--gold); background: rgba(var(--text-rgb),.07); }
.btn-enter{
  flex: 0 0 auto; background: var(--accent); border:1px solid var(--accent);
  color: var(--accent-ink); font-family: var(--f-head);
  font-size:15px; letter-spacing:.26em; padding: 12px 26px;
  border-radius: var(--radius); transition: background .18s, transform .18s;
}
.btn-enter:hover{ background: var(--accent-soft); }
.btn-enter:active{ transform: translateY(1px); }

/* 비밀번호란 — 이름이 등록된 사람이면 슬며시 나타남 */
#pw-wrap{ animation: slideIn .28s ease-out; }
@keyframes slideIn{ from{ opacity:0; transform: translateY(-6px);} to{ opacity:1; transform:none;} }
.pw-label{
  font-family: var(--f-head); font-size:11px; letter-spacing:.22em;
  color: var(--gold); margin:0 0 6px;
}
.pw-label.admin{ color: var(--accent); }
.t-err{ color: var(--accent); font-size:13px; margin:10px 0 0; min-height:1.4em; }
.t-err.ok{ color: var(--sub); }

/* 회원가입 면 */
.signup-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:620px){ .signup-grid{ grid-template-columns:1fr; } }
.signup-note{ font-size:12.5px; color: var(--text-3); margin:0 0 16px; line-height:1.8; }
.signup-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }

/* 티켓 우측 반권 */
.ticket-stub{
  padding: 26px 14px 20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background: rgba(var(--bg-rgb),.22);
}
/* 점화 / 소등 버튼 (蜃 자리) */
.stub-toggle{
  width:64px; background:none; border:1.5px solid var(--accent); color: var(--accent);
  border-radius:3px; padding: 8px 4px 5px; display:grid; justify-items:center; gap:3px;
  transition: background .2s, box-shadow .3s;
}
.stub-toggle:hover{ background: rgba(var(--accent-rgb),.1); }
.stub-toggle .lamp{
  width:14px; height:14px; border-radius:50%; border:1.5px solid currentColor;
  transition: background .3s, box-shadow .3s;
}
:root[data-mode="light"] .stub-toggle .lamp{ background: var(--logo); border-color: var(--logo); box-shadow: 0 0 14px var(--logo), 0 0 3px var(--logo); }
.stub-toggle .lbl{ font-family: var(--f-brush); font-size:20px; line-height:1; }
.stub-vert{ writing-mode: vertical-rl; font-family: var(--f-brush); font-size:30px; color: var(--text-2); letter-spacing:.1em; flex:1; }
.barcode{ display:flex; gap:1.5px; align-items:flex-end; height:34px; width:100%; justify-content:center; }
.barcode i{ display:block; width:2px; background: var(--text-2); opacity:.55; }
.stub-meta{ font-family: var(--f-head); font-size:9.5px; letter-spacing:.2em; color: var(--text-3); text-align:center; line-height:1.9; }
.btn-signup{
  background:none; border:1px solid var(--line); color: var(--gold);
  font-family: var(--f-head); font-size:11px; letter-spacing:.24em;
  padding: 7px 12px; border-radius:2px; width:100%; transition: all .18s;
}
.btn-signup:hover{ border-color: var(--gold); background: rgba(var(--gold-rgb),.12); color: var(--text); }
.gate-foot{ text-align:center; margin-top:20px; font-size:11.5px; color: var(--text-3); letter-spacing:.06em; }

@media (max-width: 640px){
  .ticket{ grid-template-columns: 1fr; }
  .ticket::after{ right:0; left:0; top:auto; bottom:176px; border-left:0; border-top:1px dashed rgba(var(--gold-rgb),.5); }
  .notch{ display:none; }
  .ticket-main{ padding: 30px 22px 26px; min-height:0; }
  .ticket-stub{ flex-direction:row; flex-wrap:wrap; height:auto; min-height:176px; padding:16px; justify-content:space-between; }
  .stub-vert{ writing-mode: horizontal-tb; font-size:30px; flex:0; }
  .barcode{ width:120px; }
  .btn-signup{ width:auto; }
}