/* ===========================================================
   골든보이 워드 양식 디자인 가이드 v1.0 (2026-09-03) 적용
   - 팔레트 6종 + 보조 배경 외의 색은 쓰지 않습니다.
   - 금색은 선·아이콘·강조어 전용. 넓은 면을 금색으로 채우지 않습니다.
   - 서체는 맑은 고딕 단일. 크기·굵기·색으로만 위계를 만듭니다.
   - 여백을 넉넉히 두어 차분한 인상을 유지합니다.
   =========================================================== */
:root{
  --gold:#C9A227;        /* Primary — 구분선, 아이콘, 강조 바 */
  --gold-dark:#A9841E;   /* 강조 텍스트, 태그, 항목명, 바이라인 */
  --black:#111111;       /* 대제목, 헤더 배경, 굵은 강조 */
  --soft:#2B2B2B;        /* 본문 */
  --meta:#8C8C8C;        /* 부제, 캡션, 출처, 푸터 */
  --ivory-deep:#F5EFDE;  /* 박스·항목열 배경 */
  --ivory:#FAF6EC;       /* 넓은 면 배경 */
  --white:#FFFFFF;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ── 가이드 예외: 위험 신호 전용 색 ──────────────────────────────
     가이드 팔레트에는 위험을 알리는 색이 없습니다. 그러나 실시간 대전에서
     '남은 시간 3초', '오답', '금지된 낱말', '밴' 은 즉시 알아차려야 하는
     신호라, 블랙+점멸만으로는 인지가 늦습니다.
     밝은 게임 레드 대신 금색과 같은 웜톤의 깊은 벽돌빛을 골라 브랜드
     인상을 해치지 않게 했습니다.
     ⚠️ 오직 위험·오류·금지에만 사용합니다. 장식으로 쓰지 마세요. */
  --danger:#A62B1F;
  --danger-bg:#FBEDEA;

  /* ── 포인트 컬러: 에르메스 오렌지 ────────────────────────────────
     금색만으로는 화면이 심심해, 화면마다 시선이 멈출 곳을 만들기 위해
     추가했습니다. 금색과 같은 웜톤이라 서로 부딪히지 않습니다.
     · --orange      면·바·아이콘 등 '칠하는' 자리
     · --orange-ink  글자용(아이보리 위 대비 4.5:1 확보. 밝은 주황은 글자로 못 씀)
     화면당 1~2곳만 씁니다. 여러 곳에 뿌리면 포인트가 아니게 됩니다. */
  --orange:#FF7900;
  --orange-ink:#C75300;
  --orange-soft:#FFF0E3;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  background:var(--ivory);
  color:var(--soft);
  font-family:"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  overflow:hidden;user-select:none;-webkit-font-smoothing:antialiased;
}
#app{position:fixed;inset:0;}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:26px 22px;}
.screen.active{display:flex;}
button{font-family:inherit;cursor:pointer;color:inherit;}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* ---------- 로고 / 헤더 블록 ----------
   가이드의 5단 위계: 태그 → 대제목 → 부제 → 바이라인 → 본문 */
.brand-mark{height:34px;width:auto;opacity:.9;margin-bottom:22px;}
.logo{position:relative;display:flex;gap:9px;margin-bottom:4px;}
.logo .tile{
  width:56px;height:56px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:700;color:var(--black);
  background:var(--white);border:1.5px solid var(--gold);
}
/* 반듯하게 줄 세우지 않고 조금씩 기울입니다. 손으로 하나씩 놓은 느낌. */
.logo .t1{transform:rotate(-3deg);}
.logo .t2{background:var(--orange);border-color:var(--orange);color:var(--white);
  transform:rotate(2.5deg) translateY(2px);}
.logo .t3{transform:rotate(-1.5deg) translateY(1px);}
.logo .t4{background:var(--ivory-deep);transform:rotate(3deg);}
.logo .em{display:none;}    /* 장식 이모지 — 절제된 프리미엄 원칙에 따라 제거 */
.logo-cap{font-size:10.5px;font-weight:700;letter-spacing:.34em;color:var(--orange-ink);
  margin:22px 0 6px;padding-bottom:9px;position:relative;}
/* 자로 잰 선 대신 살짝 흔들리는 선. 사람이 그은 티가 나되 과하지 않게.
   폭은 캡션 글자의 시작~끝에 맞춥니다. letter-spacing 이 마지막 글자 뒤에
   남기는 여백(.34em)을 빼야 오른쪽이 튀어나오지 않습니다. */
.logo-cap::after{content:"";position:absolute;left:0;bottom:0;
  width:calc(100% - .34em);height:7px;background-repeat:no-repeat;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 7' preserveAspectRatio='none'%3E%3Cpath d='M2 4.8C40 2.6 78 5.6 116 3.6c38-2 76 1.8 122-.8' fill='none' stroke='%23FF7900' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.logo-sub{font-size:12.5px;color:var(--meta);margin-bottom:26px;text-align:center;line-height:1.75;}

/* ---------- 버튼 ---------- */
.btn{
  border:1.5px solid var(--gold);border-radius:4px;padding:15px 30px;
  font-size:16px;font-weight:700;color:var(--black);background:var(--white);
  transition:background .15s var(--ease),transform .1s var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn:hover{background:var(--ivory-deep);}
.btn.play{background:var(--orange);color:var(--white);border-color:var(--orange);min-width:230px;font-size:17px;padding:18px 30px;line-height:1.5;
  box-shadow:0 3px 0 rgba(199,83,0,.35);}
.btn.play:hover{background:#F06F00;}
.btn.play:active{box-shadow:0 1px 0 rgba(199,83,0,.35);}
.btn.ghost{background:transparent;border-color:var(--meta);color:var(--soft);font-weight:700;font-size:13.5px;padding:12px 22px;}
.btn.ghost:hover{background:var(--ivory-deep);border-color:var(--gold);}
.home-actions{display:flex;flex-direction:column;gap:12px;align-items:center;}

/* ---------- 상단 바 ---------- */
.topbtns{position:fixed;top:16px;right:16px;z-index:60;display:flex;gap:8px;}
.icon-btn{
  width:40px;height:40px;border-radius:4px;background:var(--white);
  border:1.5px solid var(--gold);color:var(--gold-dark);font-size:17px;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.icon-btn:hover{background:var(--ivory-deep);}
.icon-btn.off{border-color:var(--meta);color:var(--meta);}
.userbar{position:fixed;top:16px;left:16px;z-index:55;display:flex;align-items:center;gap:6px;}
.userbar .logout{
  background:var(--white);border:1px solid var(--meta);color:var(--soft);
  border-radius:4px;padding:8px 11px;font-size:11.5px;font-weight:700;transition:.15s;
}
.userbar .logout:hover{border-color:var(--gold);background:var(--ivory-deep);}

/* ---------- 카드 (인사이트 박스 규격 차용) ---------- */
.auth-card{
  background:var(--white);border:1px solid #E5DCC4;border-left:3px solid var(--orange);
  border-radius:4px;padding:26px 24px;width:100%;max-width:340px;
  display:flex;flex-direction:column;gap:13px;
}
.auth-tab{display:flex;gap:0;border-bottom:1.5px solid var(--gold);margin-bottom:6px;}
.auth-tab button{
  flex:1;border:none;background:transparent;color:var(--meta);
  font-weight:700;font-size:13.5px;padding:11px 0;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;
}
.auth-tab button.on{color:var(--black);border-bottom-color:var(--orange);}
.fld{display:flex;flex-direction:column;gap:5px;}
.fld label{font-size:10.5px;font-weight:700;color:var(--gold-dark);letter-spacing:.08em;}
.fld input{
  background:var(--white);border:1px solid #DED5BD;color:var(--soft);
  font-size:15px;font-weight:500;padding:12px;border-radius:4px;outline:none;font-family:inherit;
}
.fld input:focus{border-color:var(--orange);}
.auth-msg{font-size:12px;font-weight:700;min-height:16px;text-align:center;color:var(--danger);}
.auth-msg.ok{color:var(--black);}
.auth-btn{
  background:var(--orange);border:1.5px solid var(--orange);color:var(--white);
  font-weight:700;font-size:15px;padding:14px;border-radius:4px;margin-top:4px;
}
.auth-btn:disabled{background:var(--meta);border-color:var(--meta);}

/* ---------- 섹션 제목 (H2 규격: ◆ 아이콘 + 하단 금색 선) ---------- */
.head{position:absolute;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;}
.head h2{
  font-size:14px;font-weight:700;letter-spacing:.1em;margin:0;color:var(--black);
  padding-bottom:7px;border-bottom:2px solid var(--orange);
}
.head h2::before{content:"◆ ";color:var(--orange);font-size:11px;vertical-align:1px;}
.back{
  position:absolute;top:16px;left:16px;background:var(--white);border:1px solid var(--meta);
  color:var(--soft);border-radius:4px;padding:9px 13px;font-weight:700;font-size:12.5px;z-index:56;
}
.back:hover{border-color:var(--gold);background:var(--ivory-deep);}

/* ---------- 레벨 선택 ---------- */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:460px;margin-top:26px;}
.lvl{
  background:var(--white);border:1px solid #E5DCC4;border-radius:4px;padding:14px 8px;
  text-align:center;transition:border-color .15s,background .15s;position:relative;
}
.lvl:hover{border-color:var(--orange);background:var(--orange-soft);}
.lvl:active{transform:scale(.97);}
.lvl .ring{
  width:38px;height:38px;border-radius:50%;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:var(--white);
}
.lvl .nm{font-size:11.5px;font-weight:700;margin-bottom:5px;color:var(--black);}
.lvl .sec{font-size:19px;font-weight:700;line-height:1;color:var(--soft);}
.lvl .sec span{font-size:10.5px;font-weight:500;color:var(--meta);}
.lvl .pts{margin-top:5px;font-size:10px;font-weight:700;color:var(--orange-ink);}
.levels-note{margin-top:20px;font-size:11.5px;color:var(--meta);text-align:center;line-height:1.8;max-width:420px;}

/* ---------- 대전 화면 ---------- */
#play{padding:0;}
.rot-hint{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--meta);text-align:center;z-index:2;width:90%;}
.board-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.board{
  width:min(88vw,420px);background:var(--white);
  border:1px solid #E5DCC4;border-top:3px solid var(--orange);
  border-radius:4px;padding:20px 22px 18px;
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.board.swap{animation:swap .4s var(--ease);}
@keyframes swap{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.lives-row{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding-bottom:9px;border-bottom:1px solid #EDE4CC;}
.life-p{font-size:12px;font-weight:500;color:var(--meta);transition:.2s;}
.life-p.cur{color:var(--gold-dark);font-weight:700;}
.lvl-chip{font-size:10px;font-weight:700;color:var(--meta);letter-spacing:.08em;}
.turn-tag{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;padding:6px 16px;border-radius:3px;
  background:var(--ivory-deep);color:var(--gold-dark);border:1px solid var(--gold);
}
.turn-tag.mine{background:var(--orange);color:var(--white);border-color:var(--orange);}
.need-box{text-align:center;width:100%;}
.need-lbl{font-size:10px;font-weight:700;color:var(--gold-dark);letter-spacing:.12em;margin-bottom:5px;}
.prev-word{
  font-size:15px;font-weight:700;color:var(--black);background:var(--ivory-deep);
  border-radius:3px;padding:6px 15px;display:inline-block;
}
.need-glyph{font-size:clamp(42px,13vw,62px);font-weight:700;line-height:1.1;letter-spacing:-.03em;margin-top:8px;color:var(--orange-ink);}
.need-alt{font-size:13.5px;font-weight:500;color:var(--meta);margin-top:2px;min-height:18px;}
.field{display:flex;gap:8px;width:100%;}
input.word{
  flex:1;min-width:0;background:var(--white);border:1.5px solid #DED5BD;color:var(--black);
  font-size:21px;font-weight:700;text-align:center;padding:13px 10px;border-radius:4px;
  outline:none;font-family:inherit;transition:border-color .2s;
}
input.word:focus{border-color:var(--orange);}
input.word:disabled{background:var(--ivory-deep);color:var(--meta);}
button.go{
  border:1.5px solid var(--orange);border-radius:4px;padding:0 22px;font-size:15px;font-weight:700;
  color:var(--white);background:var(--orange);white-space:nowrap;transition:.15s;
}
button.go:disabled{background:var(--meta);border-color:var(--meta);}
.wrongc{font-size:11px;font-weight:500;color:var(--meta);height:15px;}
.err{font-size:12px;font-weight:700;color:var(--danger);min-height:15px;text-align:center;line-height:1.4;}
.timer{width:100%;}
.timer .bar{height:5px;border-radius:0;background:var(--ivory-deep);overflow:hidden;}
/* 레벨 색은 --lvl-color 로 받습니다. 예전에는 JS 가 style.background 를 직접
   써서 인라인 스타일이 .low 규칙을 이겨, 위험 구간에서도 막대가 금색이었습니다. */
.timer .fill{height:100%;transform-origin:left;background:var(--lvl-color,var(--gold));transition:transform .1s linear,background .3s;}
.timer .fill.low{background:var(--danger);animation:pulseBar .55s infinite;}
@keyframes pulseBar{0%,100%{opacity:1}50%{opacity:.35}}
.timer .num{margin-top:6px;font-size:11px;font-weight:500;color:var(--meta);text-align:center;}
.timer .num.low{color:var(--danger);font-weight:700;font-size:13px;}
.surr{background:none;border:none;color:var(--meta);font-size:10.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.surr:hover{color:var(--gold-dark);}
.toast{
  position:fixed;top:42%;left:50%;transform:translate(-50%,-50%) scale(.94);
  background:var(--white);border:1px solid #E5DCC4;border-left:3px solid var(--gold);
  border-radius:4px;padding:16px 24px;font-size:14.5px;font-weight:700;color:var(--black);
  opacity:0;pointer-events:none;transition:.22s var(--ease);z-index:70;text-align:center;line-height:1.6;
  box-shadow:0 8px 28px rgba(17,17,17,.10);
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ---------- 결과 ---------- */
#result .card{
  background:var(--white);border:1px solid #E5DCC4;border-top:3px solid var(--orange);
  border-radius:4px;padding:32px 28px;max-width:360px;width:100%;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
#result .trophy{font-size:38px;animation:pop .5s var(--ease);}
@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
#result .win{font-size:24px;font-weight:700;color:var(--black);}
#result .earn{font-size:14px;font-weight:700;color:var(--orange-ink);}
#result .why{font-size:12px;color:var(--meta);line-height:1.7;}
.name-row{font-size:12px;color:var(--meta);line-height:1.6;}
.res-actions{display:flex;gap:9px;margin-top:8px;}
.res-actions .btn{padding:12px 20px;font-size:13.5px;}
.saved-msg{font-size:11.5px;font-weight:700;color:var(--gold-dark);min-height:16px;}

/* ---------- 랭킹 / 관리자 (정보 요약 표 규격) ---------- */
.list{width:100%;max-width:440px;margin-top:22px;display:flex;flex-direction:column;gap:0;overflow-y:auto;max-height:60vh;
  border-top:2px solid var(--orange);border-bottom:1.5px solid #E5DCC4;}
.rank-row{display:flex;align-items:center;gap:12px;background:var(--white);border-bottom:1px solid #EDE4CC;padding:13px 16px;}
.rank-row:last-child{border-bottom:none;}
.rank-row .pos{font-size:13px;font-weight:700;width:30px;text-align:center;color:var(--gold-dark);background:var(--ivory-deep);
  border-radius:3px;padding:4px 0;}
.rank-row .nm{flex:1;font-weight:700;font-size:14px;color:var(--black);}
.rank-row .pt{font-weight:700;color:var(--gold-dark);font-size:15px;}
.rank-row.top1{background:var(--orange-soft);}
.rank-row.top1 .pos{background:var(--orange);color:var(--white);}
.rank-row.top1 .pt{color:var(--orange-ink);}
.empty{color:var(--meta);font-size:13px;margin-top:40px;text-align:center;line-height:1.8;}
.foot{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.adm-gate{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;
  background:var(--white);border:1px solid #E5DCC4;border-left:3px solid var(--orange);border-radius:4px;padding:22px;}
.urow{display:flex;align-items:center;gap:10px;background:var(--white);border-bottom:1px solid #EDE4CC;padding:12px 14px;}
.urow .uinfo{flex:1;min-width:0;}
.urow .un{font-weight:700;font-size:13.5px;color:var(--black);}
.urow .ue{font-size:10.5px;color:var(--meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.urow.banned{background:var(--danger-bg);border-left:3px solid var(--danger);}
.urow.banned .un{color:var(--meta);}
.badge-ban{font-size:9.5px;font-weight:700;color:var(--white);background:var(--danger);border-radius:2px;padding:2px 6px;margin-left:6px;vertical-align:1px;}
.ubtn{border:1px solid var(--meta);background:var(--white);border-radius:3px;padding:7px 12px;font-size:11.5px;font-weight:700;color:var(--soft);}
.ubtn.ban{background:var(--danger);border-color:var(--danger);color:var(--white);}
.ubtn.unban{background:var(--white);border-color:var(--gold);color:var(--gold-dark);}
/* 밴할 수 없는 대상(본인·다른 관리자) 표시 */
.adm-tag{font-size:10px;font-weight:700;color:var(--gold-dark);background:var(--ivory-deep);
  border:1px solid var(--gold);border-radius:2px;padding:5px 9px;white-space:nowrap;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ---------- GoldenBoy 시그니처 ----------
   만든 사람을 글로 설명하지 않고 마크로 둡니다.
   원형 마크를 살짝 기울여, 반듯한 기업 로고와는 다른 결을 냅니다. */
.gb-sign{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;}
.gb-mark{
  width:29px;height:29px;border-radius:50%;background:var(--orange);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;line-height:1;letter-spacing:0;
  transform:rotate(-7deg);
  box-shadow:0 2px 0 rgba(199,83,0,.30);
}
.gb-word{
  font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--gold-dark);
  padding-top:1px;
}