/* CRIMSON VEIL — base.css  (Claude 소유: 레이아웃 / 토큰 / 스케일링) */

:root{
  /* ── 디자인 토큰 (docs/refs/UI_REFERENCES.md 확정본) ── */
  --ink:        #08070A;
  --ink-2:      #100B12;
  --panel:      rgba(14,10,16,.72);
  --panel-hi:   rgba(30,18,26,.82);
  --line:       rgba(226,58,92,.42);
  --line-soft:  rgba(232,199,122,.22);

  --crimson:    #E23A5C;
  --crimson-hi: #FF7A92;
  --crimson-dk: #7C1226;
  --gold:       #E8C77A;
  --gold-dk:    #8A6E33;
  --cyan:       #7AD7FF;
  --violet:     #B98CFF;
  --jade:       #3FE0C8;

  --text:       #F2E9EC;
  --dim:        #9A8C96;
  --dim-2:      #5E5462;

  /* 서체: 외부 CDN 금지 → 시스템 스택 */
  --f-display: "Cinzel","Playfair Display",Georgia,"Times New Roman",serif;
  --f-num:     "Roboto Condensed","Arial Narrow",Oswald,Impact,sans-serif;
  --f-body:    Pretendard,"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;

  --clip-6: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px,
                    100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
  --clip-12: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 0 100%);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{
  height:100%; height:100dvh; margin:0;
  overflow:hidden; overscroll-behavior:none;
}
body{
  background:#000; color:var(--text);
  font-family:var(--f-body);
  user-select:none; touch-action:none;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;   /* 인앱 브라우저 자동 확대 방지 */
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ── 레터박스 스케일링: 논리 1600×900 고정 ──
   grid+place-items 로 센터링하면 컨테이너보다 큰 아이템(1600px)이 오버플로해
   인앱 브라우저에서 좌우가 잘린다. absolute + translate(-50%,-50%) 로 고정한다.
   실제 배율은 main.js 의 fitStage() 가 visualViewport 기준으로 계산한다. */
#viewport{
  position:fixed; inset:0; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #14070E 0%, #000 70%);
}
#stage{
  position:absolute; left:50%; top:50%;
  width:1600px; height:900px;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:50% 50%;
  will-change:transform;
  background:var(--ink);
  box-shadow:0 0 120px rgba(226,58,92,.10), 0 0 0 1px rgba(232,199,122,.08);
  overflow:hidden;
}
/* 세로 화면 안내 — 가로가 너무 좁으면 표시 */
#rotate-hint{
  position:fixed; inset:0; z-index:200; display:none;
  place-content:center; justify-items:center; gap:18px; text-align:center;
  background:var(--ink); color:var(--dim); padding:32px;
}
#rotate-hint b{ display:block; color:var(--gold); font-size:17px; letter-spacing:.1em; margin-bottom:8px; }
body.portrait #rotate-hint{ display:grid; }
#gl,#bl,#fx{ position:absolute; inset:0; width:1600px; height:900px; display:block; }
#gl{ z-index:1; }
/* 탄막은 적·플레이어보다 아래. 커튼에 플레이어가 묻히면 판정 가독성이 나빠진다 */
#bl{ z-index:2; pointer-events:none; }
#fx{ z-index:3; pointer-events:none; }
#ui{ position:absolute; inset:0; z-index:4; }

/* 플레이필드 기준선 — 다른 규칙이 참조 */
:root{ --field-x:380px; --field-w:840px; --field-h:900px; }

.screen{
  position:absolute; inset:0;
  animation:scr-in .38s var(--ease) both;
}
/* ID 셀렉터(#scr-agegate{display:grid} 등)가 [hidden] 을 이기지 못하도록 강제 */
[hidden]{ display:none !important; }
.screen[hidden]{ display:none !important; }
.screen.overlay{ background:rgba(4,2,6,.72); backdrop-filter:blur(6px); }
@keyframes scr-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* ── 공용 패널/버튼 ── */
.glass{
  background:var(--panel);
  border:1px solid var(--line);
  clip-path:var(--clip-6);
  backdrop-filter:blur(9px) saturate(1.1);
}

.btn{
  position:relative; padding:13px 34px;
  font-family:var(--f-body); font-size:16px; font-weight:600; letter-spacing:.06em;
  color:var(--text);
  background:linear-gradient(100deg, rgba(20,12,18,.9), rgba(38,18,28,.78));
  border:1px solid var(--line);
  clip-path:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition:.18s var(--ease);
}
.btn::after{
  content:""; position:absolute; left:0; top:0; width:3px; height:100%;
  background:var(--crimson); opacity:0; transition:.18s var(--ease);
}
.btn:hover,.btn:focus-visible{
  color:#fff; border-color:var(--crimson-hi);
  background:linear-gradient(100deg, rgba(52,16,30,.95), rgba(80,20,40,.85));
  transform:translateX(3px); outline:none;
}
.btn:hover::after,.btn:focus-visible::after{ opacity:1; }
.btn-major{
  background:linear-gradient(100deg, var(--crimson-dk), #B62347);
  border-color:var(--crimson-hi);
  box-shadow:0 0 22px rgba(226,58,92,.32);
}
.btn[disabled]{ opacity:.35; pointer-events:none; }

.vbtn{
  padding:5px 12px; font-family:var(--f-num); font-size:12px;
  letter-spacing:.14em; color:var(--dim);
  border:1px solid rgba(232,199,122,.24); clip-path:var(--clip-6);
  transition:.16s var(--ease);
}
.vbtn:hover{ color:var(--gold); border-color:var(--gold); }

/* 섹션 헤더 */
.scr-head{
  position:absolute; left:64px; top:44px; margin:0; display:flex; align-items:baseline; gap:18px;
}
.scr-head span{
  font-family:var(--f-display); font-size:40px; font-weight:700; letter-spacing:.14em;
  color:var(--text); text-shadow:0 0 26px rgba(226,58,92,.45);
}
.scr-head i{ font-style:normal; font-size:15px; letter-spacing:.24em; color:var(--gold); }
.scr-head.sm span{ font-size:28px; }
.scr-head::after{
  content:""; position:absolute; left:2px; bottom:-12px; width:210px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* 부팅 오버레이 */
.boot{
  position:absolute; inset:0; z-index:99; display:grid; place-content:center; gap:16px;
  background:var(--ink); transition:opacity .5s;
}
.boot[hidden]{ display:none; }
.boot.gone{ opacity:0; pointer-events:none; }
.boot-bar{ width:340px; height:2px; background:rgba(255,255,255,.10); overflow:hidden; }
.boot-bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--crimson),var(--gold)); transition:width .25s; }
.boot p{ margin:0; font-family:var(--f-num); font-size:12px; letter-spacing:.26em; color:var(--dim); text-align:center; }

.fps{
  position:absolute; right:8px; bottom:6px; z-index:60;
  font-family:var(--f-num); font-size:12px; letter-spacing:.1em; color:var(--dim-2);
}
.fps[hidden]{ display:none; }

/* 스크롤바 */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(226,58,92,.35); }
::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* PROMPT PANIC v2 -----------------------------------------------------------
   Role tokens and shared primitives. Legacy aliases remain only so existing
   component contracts can adopt the new palette without markup changes. */
:root{
  color-scheme:dark;

  --color-bg:#08070d;
  --color-bg-deep:#050409;
  --color-surface:#10101a;
  --color-surface-raised:#171724;
  --color-surface-active:#202131;
  --color-border:#37394a;
  --color-border-soft:#282a38;
  --color-text:#f1ede5;
  --color-text-muted:#aaa7ad;
  --color-text-faint:#74727d;
  --color-accent:#48a8ff;
  --color-accent-bright:#82c7ff;
  --color-accent-deep:#176fc5;
  --color-status:#59d7b5;
  --color-warning:#f1cf68;
  --color-danger:#ff627d;
  --color-info:#78c8ff;

  --surface-grid:
    linear-gradient(rgba(120,190,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,190,255,.035) 1px,transparent 1px);
  --surface-dither:radial-gradient(circle,rgba(241,237,229,.11) .7px,transparent .8px);

  --ink:var(--color-bg);
  --ink-2:var(--color-bg-deep);
  --panel:rgba(16,16,26,.94);
  --panel-hi:rgba(23,23,36,.97);
  --line:rgba(72,168,255,.58);
  --line-soft:var(--color-border);
  --crimson:var(--color-accent);
  --crimson-hi:var(--color-accent-bright);
  --crimson-dk:var(--color-accent-deep);
  --gold:var(--color-text);
  --gold-dk:var(--color-border);
  --cyan:var(--color-info);
  --violet:#aaa1ff;
  --jade:var(--color-status);
  --text:var(--color-text);
  --dim:var(--color-text-muted);
  --dim-2:var(--color-text-faint);

  --f-display:"Arial Narrow","Roboto Condensed","Noto Sans KR",Pretendard,"Malgun Gothic",sans-serif;
  --f-num:"Roboto Condensed","Arial Narrow",Oswald,Pretendard,sans-serif;
  --f-body:Pretendard,"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;

  --clip-6:inset(0);
  --clip-12:inset(0);
  --focus-rail:3px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

body{
  background:var(--color-bg-deep);
  color:var(--color-text);
}
#viewport{
  background:
    radial-gradient(80% 70% at 70% 20%,rgba(64,69,105,.18),transparent 70%),
    var(--color-bg-deep);
}
#stage{
  background:var(--color-bg);
  box-shadow:0 0 0 1px var(--color-border-soft),0 24px 80px rgba(0,0,0,.55);
}
.screen.overlay{
  background:rgba(5,4,9,.82);
  backdrop-filter:none;
}

.glass{
  background:var(--panel);
  border:1px solid var(--color-border);
  clip-path:none;
  backdrop-filter:none;
}

.btn{
  min-height:44px;
  padding:12px 34px;
  font-family:var(--f-body);
  font-weight:700;
  letter-spacing:.045em;
  color:var(--color-text);
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  clip-path:none;
  box-shadow:none;
  transition:background-color .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease);
}
.btn::after{
  width:var(--focus-rail);
  background:var(--color-accent);
  opacity:.5;
  transition:opacity .14s var(--ease);
}
.btn:hover{
  color:var(--color-text);
  border-color:var(--color-accent);
  background:var(--color-surface-active);
  transform:none;
}
.btn:focus-visible,
.vbtn:focus-visible,
button:focus-visible{
  outline:2px solid var(--color-accent-bright);
  outline-offset:2px;
}
.btn:focus-visible{
  color:var(--color-text);
  border-color:var(--color-accent);
  background:var(--color-surface-active);
  transform:none;
}
.btn-major:focus-visible{ color:var(--color-bg-deep); background:var(--color-accent-bright); }
.btn:hover::after,.btn:focus-visible::after{ opacity:1; }
.btn-major{
  color:var(--color-bg-deep);
  background:var(--color-accent);
  border-color:var(--color-accent-bright);
  box-shadow:none;
}
.btn-major:hover{ color:var(--color-bg-deep); background:var(--color-accent-bright); }
.btn[disabled]{ opacity:.36; cursor:not-allowed; pointer-events:none; }

.vbtn{
  min-height:32px;
  padding:5px 12px;
  color:var(--color-text-muted);
  border:1px solid var(--color-border);
  clip-path:none;
  transition:color .14s var(--ease),border-color .14s var(--ease),background-color .14s var(--ease);
}
.vbtn:hover{ color:var(--color-accent-bright); border-color:var(--color-accent); background:rgba(72,168,255,.08); }

.scr-head span{
  font-family:var(--f-display);
  font-weight:900;
  letter-spacing:.04em;
  color:var(--color-text);
  text-shadow:none;
}
.scr-head i{ color:var(--color-accent-bright); letter-spacing:.16em; }
.scr-head::after{ height:3px; background:var(--color-accent); }

.boot{ background:var(--color-bg-deep); }
.boot-bar{ height:4px; background:var(--color-surface-active); }
.boot-bar span{ background:var(--color-accent); }
.boot p{ color:var(--color-text-muted); }
.fps{ color:var(--color-text-faint); }

::-webkit-scrollbar-thumb{ background:var(--color-accent-deep); }
::-webkit-scrollbar-track{ background:var(--color-surface); }

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