/* 접속 코드 화면 — 도야 OTP 게이트 정본(도야-OTP게이트/gate.html)을 리액트 없이 옮긴 것.
   버건디 정본의 전역 입력칸 스타일과 부딪히지 않게 이 화면은 doya-burgundy.css 를 읽지 않고 혼자 선다.
   바꾼 점: 머리표의 영어 글자를 빼고 자물쇠만 남김 · 자릿수 6 고정 · 서버 응답 문구 줄(.g-status) 추가
   · 6칸이 카드 안에 들어가게 카드 폭 440px, 칸 크기는 화면 폭이 아니라 카드 폭(양옆 14px 여백)을 기준으로 계산 */
@property --ba { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root{
  --bg:#0B0B0D; --txt:#EFEBE3; --muted:#827d77;
  --accent:#6E1423; --accent-2:#8a2030; --accent-dim:#5a2530; --accent-text:#E6A9B0;
  --accent-glow:rgba(110,20,35,0.22); --metal-2:#a8895c;
  --grain-opacity:0.07; --stone-opacity:0.55;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
.g-body{
  background:
    radial-gradient(110% 70% at 8% -5%, var(--accent-glow), transparent 45%),
    radial-gradient(90% 60% at 100% 105%, var(--accent-glow), transparent 50%),
    var(--bg);
  background-attachment:fixed;
  color:var(--txt);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  overflow-x:hidden;
  font-family:'Pretendard','Pretendard Variable',system-ui,-apple-system,'Segoe UI',Roboto,'Apple SD Gothic Neo',sans-serif}
.g-body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--stone-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E")}
.g-body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.g-root{width:100%;max-width:440px;position:relative;z-index:1}

.g-card{position:relative;background:linear-gradient(180deg,#201e28,#18171f);
  border:1px solid #3a3742;border-radius:22px;padding:28px 26px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(168,137,92,.14),
    0 26px 70px rgba(0,0,0,.62),
    0 0 70px rgba(110,20,35,.22);
  animation:g-cardIn .45s ease both;text-align:center;
  transition:box-shadow .6s ease, border-color .6s ease}
.g-card.ok{border-color:rgba(43,209,111,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(43,209,111,.20),
    0 26px 70px rgba(0,0,0,.62),
    0 0 95px rgba(43,209,111,.20)}
@keyframes g-cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.g-title{margin:0 0 4px;font-size:21px;font-weight:700;letter-spacing:-.2px;color:#EFEBE3;
  transition:opacity .4s,color .4s;text-shadow:0 1px 18px rgba(0,0,0,.35);word-break:keep-all}
.g-title.ok{color:#2bd16f}
.g-sub{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55;transition:opacity .4s,color .4s}
.g-sub.ok{color:#c4c7d2}

/* 황동 머리표 — 양옆 1px 헤어라인 + 자물쇠(글자 없음) */
.g-eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;margin:2px 0 14px;color:#a8895c;transition:color .45s}
.g-eyebrow::before,.g-eyebrow::after{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(168,137,92,.6))}
.g-eyebrow::after{background:linear-gradient(90deg,rgba(168,137,92,.6),transparent)}
.g-lock{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.g-eyebrow.ok{color:#4ec98a}

.g-stage{position:relative;height:84px;margin:26px 0 22px;display:grid;place-items:center}

.g-otp{position:absolute;display:flex;gap:var(--gap);transition:opacity .55s ease, transform .65s cubic-bezier(.5,0,.2,1);
  --n:6; --gap:13px;
  --cell:min(60px, calc((min(100vw - 40px, 440px) - 28px - (var(--n) - 1) * var(--gap)) / var(--n)));
  --r:calc(var(--cell) / 4);
  --g1:#8a2030; --g2:#E6A9B0}
@media (max-width:430px){ .g-otp{--gap:9px} }
.g-otp.error{--g1:#e5544b; --g2:#ff8a8a}
.g-otp.collapse{opacity:0;transform:scale(.5)}
.g-otp.shake{animation:g-shake .45s}
@keyframes g-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

.g-box{position:relative;width:var(--cell);height:calc(var(--cell) * 7 / 6);border-radius:var(--r);
  background:linear-gradient(180deg,#221f2b,#191820);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(168,137,92,.12), 0 2px 7px rgba(0,0,0,.4);
  transition:box-shadow .3s ease, transform .3s cubic-bezier(.34,1.4,.5,1), background .3s ease}
.g-box::before{content:'';position:absolute;inset:0;border-radius:var(--r);padding:1.5px;
  background:conic-gradient(from var(--ba), transparent 0deg, var(--g1) 55deg, var(--g2) 115deg, transparent 175deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; filter:drop-shadow(0 0 6px var(--g1));pointer-events:none}
.g-box:focus-within{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--accent-dim), 0 10px 26px rgba(110,20,35,.32)}
.g-box:focus-within::before{opacity:.95; animation:g-rot 3.6s linear infinite}
.g-box.filled{background:linear-gradient(180deg,#2b1822,#211520);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(230,169,176,.24), 0 3px 10px rgba(0,0,0,.45)}
.g-box.filled input{color:var(--accent-text)}
.g-otp.verifying .g-box::before{opacity:1; animation:g-rot .9s linear infinite}
.g-box:nth-child(2)::before{animation-delay:-.7s}
.g-box:nth-child(3)::before{animation-delay:-1.4s}
.g-box:nth-child(4)::before{animation-delay:-2.1s}
.g-box:nth-child(5)::before{animation-delay:-2.8s}
.g-box:nth-child(6)::before{animation-delay:-3.5s}
@keyframes g-rot{to{--ba:360deg}}
.g-box input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;border-radius:var(--r);
  text-align:center;color:var(--txt);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:calc(var(--cell) * 13 / 30);font-weight:600;
  outline:none;caret-color:var(--g2);transition:color .25s ease;-webkit-appearance:none;appearance:none}
.g-box input:disabled{opacity:1;-webkit-text-fill-color:currentColor}

/* 성공 — 초록 글로우 + 흰 체크 */
.g-check{position:absolute;width:80px;height:80px;border-radius:22px;
  background:radial-gradient(120% 120% at 50% 22%, #103a23, #0a1a11);
  border:2px solid #2bd16f;display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(43,209,111,.16), 0 0 34px rgba(43,209,111,.6), 0 0 80px rgba(43,209,111,.32), inset 0 0 20px rgba(43,209,111,.20);
  opacity:0;transform:scale(.25);pointer-events:none;
  transition:opacity .55s ease .5s, transform .85s cubic-bezier(.34,1.5,.5,1) .5s}
.g-check.show{opacity:1;transform:scale(1);animation:g-pulse 2.4s ease-in-out 1.4s infinite}
@keyframes g-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(43,209,111,.16),0 0 30px rgba(43,209,111,.5),0 0 70px rgba(43,209,111,.26),inset 0 0 20px rgba(43,209,111,.18)}
  50%{box-shadow:0 0 0 6px rgba(43,209,111,.22),0 0 46px rgba(43,209,111,.75),0 0 105px rgba(43,209,111,.4),inset 0 0 24px rgba(43,209,111,.26)}}
.g-check svg{width:36px;height:36px}
.g-check path{stroke:#ffffff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;filter:drop-shadow(0 0 4px rgba(43,209,111,.5))}
.g-check.show path{animation:g-draw .55s ease 1.05s forwards}
@keyframes g-draw{to{stroke-dashoffset:0}}

/* 서버가 돌려준 안내(코드 틀림·시도 초과 등). 높이를 미리 잡아 화면이 흔들리지 않게 */
.g-status{margin:0;min-height:20px;font-size:13px;line-height:1.5;color:#ff8a8a;word-break:keep-all}

@media (prefers-reduced-motion:reduce){
  .g-card,.g-otp.shake,.g-box:focus-within::before,.g-otp.verifying .g-box::before,.g-check.show{animation:none !important}
  .g-check path{stroke-dashoffset:0}
}