/* 골목 갤러리 스타일 — 구조 지도: ~/go-dev/docs/client-structure.md */
  /* [튜너블] 액션버튼 크기·위치 — 실기기 체감 시 이 3개 값만 조정 (원칙③) */
  /* ── 나눔고딕 (네이버, SIL OFL 1.1) — 한글 11,172자+영문·숫자 1파일 333KB. 400만 등록(볼드는 합성) ── */
  @font-face { font-family:'Nanum Gothic'; font-style:normal; font-weight:400; font-display:swap;
    src:url('fonts/NanumGothic-400.woff2') format('woff2'); }
  /* ── 픽셀 폰트 갈무리11 Bold (SIL OFL 1.1, quiple.dev) — 파일 1개를 400/700 양쪽에 등록해
        브라우저의 가짜 볼드 합성(픽셀 뭉개짐) 차단 ── */
  @font-face { font-family:'Galmuri11'; font-style:normal; font-weight:400; font-display:swap;
    src:url('fonts/Galmuri11-Bold.woff2') format('woff2'); }
  @font-face { font-family:'Galmuri11'; font-style:normal; font-weight:700; font-display:swap;
    src:url('fonts/Galmuri11-Bold.woff2') format('woff2'); }
  :root { --act-size:70px; --act-bottom:24px; --act-right:16px; }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body { height:100%; overflow:hidden; background:#002e42; font-family:'Galmuri11','Courier New',monospace; touch-action:none; }
  #game { display:block; width:100vw; height:100vh; image-rendering:pixelated; }
  #topbar { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:rgba(0,46,66,.88); border-bottom:2px solid #ff6b5c; z-index:10; gap:8px; }
  #topbar .title { color:#ff6b5c; font-weight:bold; font-size:13px; letter-spacing:1px; white-space:nowrap; }
  #chzone { color:#9fc3d4; font-size:11px; text-align:right; }
  #chzone b { color:#fff; display:block; font-size:12px; }
  #chatlog { position:fixed; left:8px; bottom:120px; width:min(290px,64vw); max-height:130px; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end; gap:2px; z-index:21; pointer-events:none; }
  #chatlog div { color:#e2e2e2; font-size:11px; background:rgba(0,46,66,.6); padding:2px 6px; border-radius:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #chatlog b { color:#ffb3a8; }
  /* z-index 21 = #board(20) 위 → 게시물 보면서 채팅 [사용자요청 2026-07-11 — 원복은 21→11, 21→9] */
  #chatbar { position:fixed; left:calc(8px + env(safe-area-inset-left)); bottom:calc(84px + env(safe-area-inset-bottom)); display:flex; gap:6px; z-index:21; }
  #chatinput { width:min(220px,50vw); padding:7px 10px; background:rgba(1,58,82,.9); border:1px solid #ff6b5c;
    color:#fff; font-size:12px; border-radius:4px; outline:none; font-family:inherit; }
  #chatinput::placeholder { color:#9fc3d4; }
  #chatsend { padding:7px 12px; background:#ff6b5c; color:#002e42; border:none; border-radius:4px; font-weight:bold; font-size:12px; }
  /* ── 채팅 이모티콘 [2026-07-18] — 팔레트는 chatbar(fixed) 기준 absolute → boardopen 등 chatbar 위치 이동에 자동 추종 ── */
  #emobtn { padding:6px 9px; background:rgba(1,58,82,.9); border:1px solid #ff6b5c; border-radius:4px; font-size:15px; line-height:1; cursor:pointer; }
  #emopal { display:none; position:absolute; bottom:calc(100% + 6px); left:0; width:236px;
    background:rgba(0,46,66,.95); border:1px solid #ff6b5c; border-radius:8px; padding:6px;
    grid-template-columns:repeat(8,1fr); gap:2px; }
  #emopal.open { display:grid; }
  #emopal button { background:none; border:none; font-size:20px; padding:4px 2px; border-radius:4px; cursor:pointer; line-height:1.2; }
  #emopal button:active { background:#014a68; }
  /* ── 출항 확인창 [2026-07-19 ②] — 표시 토글은 game.js(style.display) ── */
  #sailmodal { display:none; position:fixed; inset:0; z-index:40; align-items:center; justify-content:center;
    background:rgba(0,20,30,.55); }
  #sailmodal .spanel { width:min(320px,90vw); background:#013a52; border:2px solid #ff6b5c; border-radius:12px;
    padding:18px 16px; text-align:center; }
  #sailmodal .stitle { color:#ff6b5c; font-size:17px; font-weight:bold; margin-bottom:10px; }
  #sailmodal .sdesc { color:#fff; font-size:13px; line-height:1.6; margin-bottom:8px; }
  #sailmodal .sfare { color:#ffd94a; font-size:12px; line-height:1.6; margin-bottom:14px; }
  #sailmodal .sbtns { display:flex; gap:8px; }
  #sailmodal .sbtns button { flex:1; padding:11px 0; border:0; border-radius:8px; font-size:14px; font-weight:bold; cursor:pointer; }
  #sailgo { background:#ff6b5c; color:#002e42; }
  #sailgo:active { background:#ff8576; }
  #sailno { background:#014a68; color:#9fc3d4; }
  #actbtn { position:fixed; z-index:11;
    right:calc(var(--act-right) + env(safe-area-inset-right));
    bottom:calc(var(--act-bottom) + env(safe-area-inset-bottom));
    width:var(--act-size); height:var(--act-size); border-radius:50%;
    background:rgba(255,107,92,.9); border:2px solid #ffb3a8; color:#002e42; font-weight:bold; font-size:13px;
    opacity:.5; transition:opacity .15s, transform .15s, box-shadow .15s; }
  #actbtn:active { background:#ff8576; transform:scale(.94); }
  /* 근접(상호작용 가능) 시에만 또렷 + 링 + 펄스 → '지금 누르면 된다'를 버튼 자체로 표시 */
  #actbtn.near { opacity:1; box-shadow:0 0 0 4px rgba(255,179,168,.55); animation:actPulse 1.1s ease-in-out infinite; }
  @keyframes actPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }
  @media (prefers-reduced-motion:reduce){ #actbtn.near{ animation:none; } }
  #board { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:20;
    background:rgba(0,20,30,.78); }
  #board .panel { width:min(440px,94vw); max-height:80vh; overflow-y:auto; background:#013a52;
    border:2px solid #ff6b5c; border-radius:8px; }
  #board .head { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:8px;
    background:#ff6b5c; color:#002e42; padding:10px 14px; font-weight:bold; font-size:14px; z-index:1; }
  #board .head button { background:#002e42; color:#ffb3a8; border:none; padding:4px 10px; border-radius:4px; font-size:12px; }
  #board ul { list-style:none; padding:8px; }
  #board li { padding:10px 8px; border-bottom:1px solid #014a68; color:#e2e2e2; font-size:13px; line-height:1.4; cursor:pointer; }
  #board li:active { background:#014a68; }
  #board li .meta { color:#9fc3d4; font-size:11px; margin-top:2px; }
  #board li.row { display:flex; gap:10px; align-items:center; }
  #board li.row .thumb { width:56px; height:42px; object-fit:cover; border-radius:4px; flex:0 0 auto; background:#014a68; }
  #board li.row .rowtxt { min-width:0; }
  #board li.row .ttl { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  #board .note { padding:10px 14px; color:#9fc3d4; font-size:11px; border-top:1px solid #014a68; line-height:1.5; }
  #detail { display:none; padding:14px; color:#e2e2e2; font-size:13px; line-height:1.7; }
  #detail h3 { color:#fff; font-size:15px; margin-bottom:4px; }
  #detail .meta { color:#9fc3d4; font-size:11px; margin-bottom:12px; }
  #detail p { margin-bottom:10px; }
  #detail .imgph { background:#014a68; border:1px dashed #9fc3d4; border-radius:6px; color:#9fc3d4;
    font-size:11px; text-align:center; padding:34px 10px; margin:10px 0; }
  #detail .detimg { width:100%; border-radius:6px; margin:4px 0 12px; display:block; }
  #detail .btns { display:flex; gap:8px; margin-top:14px; }
  #detail .btns a, #detail .btns button { flex:1; text-align:center; padding:10px; border-radius:6px; border:none;
    font-family:inherit; font-size:12px; font-weight:bold; text-decoration:none; }
  #detail .go { background:#ff6b5c; color:#002e42; }
  #detail .back { background:#014a68; color:#ffb3a8; }
  #hint { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(118px + env(safe-area-inset-bottom)); padding:6px 14px; z-index:9;
    background:rgba(255,107,92,.92); color:#002e42; font-weight:bold; font-size:12px; border-radius:14px; display:none; }
  @media (min-width:855px){ #actbtn{ opacity:.4; } }
  /* ── 게시판 열림 중 모바일: 채팅을 최하단 압축 스트립(2~3줄)으로 내려 패널 본문 가림 해소 [2026-07-18 사용자보고]
     데스크톱(855px+)은 기존 배치 유지 — "게시물 보면서 채팅"(2026-07-11 결정)은 존중, 겹침도 없음.
     boardopen 클래스는 ui.js openBoard/closeBoard가 body에 토글. 튜너블: 아래 176px = 상단여백 46 + 하단 채팅띠 130 */
  @media (max-width:854px){
    body.boardopen #board { align-items:flex-start; padding-top:calc(46px + env(safe-area-inset-top)); }
    body.boardopen #board .panel { max-height:calc(100vh - 176px); max-height:calc(100dvh - 176px - env(safe-area-inset-bottom)); }
    body.boardopen #chatlog { bottom:calc(50px + env(safe-area-inset-bottom)); max-height:58px; }
    body.boardopen #chatbar { bottom:calc(8px + env(safe-area-inset-bottom)); }
  }
  /* ── 인트로(메인 메뉴) — 최상위 z50. 배경 살짝 투명 → 뒤에서 마을이 움직이는 게 비침 ── */
  #intro { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
    background:rgba(0,46,66,.94); padding:16px; }
  #intro .ipanel { width:min(400px,94vw); max-height:92vh; overflow-y:auto; background:#013a52;
    border:2px solid #ff6b5c; border-radius:10px; padding:24px 20px; text-align:center; color:#e2e2e2; }
  #intro h1 { color:#ff6b5c; font-size:24px; letter-spacing:2px; margin-bottom:6px; }
  #intro .isub { color:#9fc3d4; font-size:12px; line-height:1.6; margin-bottom:14px; }
  #intro .iwho { color:#ffd94a; font-size:12px; min-height:18px; margin-bottom:14px; }
  #intro .isec { color:#ffb3a8; font-size:12px; font-weight:bold; margin-bottom:8px; }
  /* 스킨 8종 → 4열 그리드 = 2줄. 좁은 화면은 1fr 셀이 자동 축소(캔버스 48px가 하한) [2026-07-19 사용자보고 — 한 줄 넘침] */
  #intro .iskins { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
  #intro .skbtn { padding:6px 0 4px; background:#014a68; border:2px solid #014a68;
    border-radius:8px; cursor:pointer; color:#9fc3d4; font-size:11px; overflow:hidden; }
  #intro .skbtn.on { border-color:#ff6b5c; background:#01324a; color:#ffb3a8; font-weight:bold; }
  #intro .skbtn canvas { display:block; width:48px; height:48px; margin:0 auto 2px; image-rendering:pixelated; }
  #intro .ikeys { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
  #intro .kbtn { padding:8px 10px; background:#014a68; color:#9fc3d4; border:2px solid #014a68;
    border-radius:6px; font-family:inherit; font-size:12px; cursor:pointer; }
  #intro .kbtn.on { background:#ff6b5c; color:#002e42; border-color:#ffb3a8; font-weight:bold; }
  #intro .ihelp { color:#9fc3d4; font-size:11px; line-height:1.7; margin-bottom:18px; min-height:16px; }
  #introgo { width:100%; padding:13px; background:#ff6b5c; color:#002e42; border:0; border-radius:8px;
    font-family:inherit; font-weight:bold; font-size:15px; cursor:pointer; }
  #introgo:active { background:#ff8576; }
  #intro .inote { color:#9fc3d4; font-size:10px; line-height:1.6; margin-top:12px; }
  #menubtn, #invbtn { background:#014a68; color:#ffb3a8; border:1px solid #ff6b5c; border-radius:4px;
    padding:4px 10px; font-family:inherit; font-size:11px; cursor:pointer; white-space:nowrap; }
  #invbtn { padding:4px 8px; font-size:13px; line-height:1; }   /* 소지품 [2026-07-18] — 메뉴 버튼과 동일 톤 */

  /* ── 퀴즈 서바이벌 (v0.6) [2026-07-17] — 상단 중앙 배너. z-index 15 = topbar(10) 위, board(20)·chat(21) 아래 */
  #quizbar { display:none; position:fixed; top:52px; left:50%; transform:translateX(-50%);
    max-width:min(560px,92vw); box-sizing:border-box; background:rgba(0,46,66,.93); color:#fff;
    border:1px solid #014a68; border-left:3px solid #ff6b5c; border-radius:10px;
    padding:10px 14px; z-index:15; font-size:14px; }
  #quizbar .qhead { font-weight:bold; color:#ffd94a; margin-bottom:4px; }
  #quizbar .qtext { margin-bottom:6px; line-height:1.45; word-break:break-all; }
  #quizbar .qopts { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-bottom:6px; }
  #quizbar .qopt { display:flex; align-items:center; gap:6px; min-width:0; }
  #quizbar .qopt b { flex:0 0 auto; width:18px; height:18px; border-radius:4px; color:#002e42;
    display:flex; align-items:center; justify-content:center; font-size:12px; }
  #quizbar .qopt span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
  #quizbar .qfoot { color:#9fc3d4; font-size:12px; }
  @media (max-width:600px){ #quizbar { top:48px; font-size:13px; padding:8px 10px; }
    #quizbar .qopts { grid-template-columns:1fr; } }