/* 어디서본게임 공통 스타일 — 허브(index.html)와 같은 WCAG AAA 팔레트. 게시판·운영자·채팅 패널이 쓴다 */
:root{
  --bg:#F7F5F0; --card:#FFFFFF; --card-hover:#FBFAF6;
  --ink:#1C1E21; --ink-soft:#44474C; --muted:#5B5E63;
  --accent:#1F5951; --accent-ink:#FFFFFF;
  --border:#8C8676; --border-soft:#D8D3C4;
  --focus:#0B4FA8; --danger:#9B2C1F; --warn-bg:#FFF4D6; --warn-ink:#5C4300;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15171A; --card:#1E2125; --card-hover:#24272C;
    --ink:#ECEAE4; --ink-soft:#C7CACE; --muted:#AFB3B8;
    --accent:#8FD6C7; --accent-ink:#0B1210;
    --border:#6E747B; --border-soft:#33373C;
    --focus:#8FC4FF; --danger:#FFA99C; --warn-bg:#3A3220; --warn-ink:#F2DCA0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15171A; --card:#1E2125; --card-hover:#24272C;
  --ink:#ECEAE4; --ink-soft:#C7CACE; --muted:#AFB3B8;
  --accent:#8FD6C7; --accent-ink:#0B1210;
  --border:#6E747B; --border-soft:#33373C;
  --focus:#8FC4FF; --danger:#FFA99C; --warn-bg:#3A3220; --warn-ink:#F2DCA0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;font-size:16px;line-height:1.6;min-height:100vh}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.wrap{max-width:46rem;margin:0 auto;padding:1.25rem 16px 6rem}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:.25rem;margin-bottom:1.5rem}
.topbar .left{display:flex;align-items:center;gap:10px;min-width:0}
.back{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1.5px solid var(--border-soft);border-radius:999px;text-decoration:none;font-size:.85rem;color:var(--ink-soft);white-space:nowrap}
.back:hover{border-color:var(--border)}
.topbar h1{margin:0;font-size:1.15rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{min-width:40px;min-height:40px;border:1.5px solid var(--border-soft);border-radius:999px;background:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid var(--border);border-radius:999px;background:var(--card);font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{color:var(--accent-ink);filter:brightness(1.08)}
.btn.small{min-height:36px;padding:0 12px;font-size:.85rem}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field select:disabled{opacity:.55;cursor:not-allowed}
.card{background:var(--card);border:1.5px solid var(--border-soft);border-radius:14px;padding:18px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label,.field .lbl{font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.field input[type=text],.field select,.field textarea,.input{width:100%;background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-size:1rem}
.field textarea{min-height:12rem;resize:vertical;line-height:1.6}
.hint{font-size:.8rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1.5px solid var(--border-soft);border-radius:999px;background:var(--card);font-size:.85rem;color:var(--ink-soft)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.tag{display:inline-block;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid var(--border);color:var(--ink-soft);white-space:nowrap}
.tag.status-완료{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.notice{background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:10px 14px;font-size:.9rem}
.muted{color:var(--muted)}
.eb-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.9rem;font-weight:600;transition:opacity .15s,transform .15s;z-index:100;max-width:calc(100vw - 32px)}
.eb-toast.on{opacity:1;transform:translate(-50%,0)}
.btn.danger-fill{background:var(--danger);border-color:var(--danger);color:var(--card)}
.btn.danger-fill:hover{color:var(--card);filter:brightness(1.08)}
.eb-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.45)}
.eb-modal-card{width:min(400px,100%);background:var(--card);border-radius:16px;padding:20px;display:grid;gap:10px;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.eb-modal-card h2{margin:0;font-size:1.05rem}
.eb-modal-card p{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.eb-modal-q{font-size:.9rem;background:var(--bg);border-radius:10px;padding:8px 12px;overflow-wrap:anywhere;max-height:6.5em;overflow:hidden}
.eb-modal-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- 어디서닷컴 대문·툴·테스트 목록 공통 ---- */
.hero{margin:.5rem 0 2.25rem}
.hero .eyebrow{font-size:.8rem;letter-spacing:.08em;color:var(--muted);font-weight:600}
.hero h1{font-weight:800;font-size:clamp(2rem,6vw,2.6rem);line-height:1.2;margin:.4rem 0 0;letter-spacing:-.01em}
.hero .lead{margin:1rem 0 0;color:var(--ink-soft);max-width:38rem;font-size:1.02rem}
.pill{display:inline-flex;align-items:center;gap:6px;margin-top:1rem;padding:6px 14px;border-radius:999px;border:1.5px solid var(--accent);color:var(--ink);font-size:.88rem;font-weight:700}
.cards{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.icard{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none;background:var(--card);border:1.5px solid var(--border-soft);border-radius:14px;padding:16px 18px;min-height:44px;transition:background-color .12s,border-color .12s}
a.icard:hover{background:var(--card-hover);border-color:var(--border)}
.icard .ic{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:1.6rem;border:1.5px solid var(--border-soft);background:var(--bg);object-fit:cover}
.icard .ib{min-width:0;flex:1;display:grid;gap:.25rem}
.icard .ib b{font-size:1.08rem;line-height:1.35}
.icard .ib .d{color:var(--ink-soft);font-size:.9rem;line-height:1.55}
.icard .go{flex:none;color:var(--muted);font-size:1.2rem;transition:transform .12s}
a.icard:hover .go{transform:translateX(3px);color:var(--accent)}
.icard.soon{border-style:dashed}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:.15rem}
.badges span{font-size:.75rem;color:var(--muted);border:1px solid var(--border-soft);padding:2px 9px;border-radius:999px}
.badges .now{color:var(--ink-soft);border-color:var(--border);font-weight:700}
.sect{margin-top:2.5rem}
.sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.sect-head h2{margin:0;font-size:1.3rem;font-weight:800}
.sect-head p{margin:.2rem 0 0;font-size:.9rem;color:var(--ink-soft)}
.sect-head a{flex:none;font-size:.88rem;font-weight:700;color:var(--accent);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.sect-head a:hover{text-decoration:underline}
.req{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.req p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.prose h2{font-size:1.15rem;margin:2rem 0 .5rem}
.prose p,.prose li{color:var(--ink-soft);font-size:.95rem}
.prose ul{padding-left:1.2rem}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.5rem 0}
.prose th,.prose td{border:1px solid var(--border-soft);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--card)}
.prose code{font-size:.85em;background:var(--card);border:1px solid var(--border-soft);border-radius:4px;padding:0 4px}
@media (max-width:420px){ .icard{gap:12px;padding:14px} .icard .ic{width:44px;height:44px;font-size:1.35rem} }

/* ---- 어디서본툴 공통 (파일 놓는 칸, 형식 버튼, 파일 목록) ---- */
.tool{display:grid;gap:14px}
.drop{position:relative;display:grid;place-items:center;gap:6px;min-height:10rem;padding:24px 16px;text-align:center;background:var(--card);border:2px dashed var(--border);border-radius:14px;cursor:pointer;transition:border-color .12s,background-color .12s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--card-hover)}
.drop b{font-size:1.05rem}
.drop span{font-size:.85rem;color:var(--muted)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.opts .lbl{font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.seg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--border);border-radius:20px;overflow:hidden}
.seg button{min-height:40px;min-width:56px;padding:0 14px;border:none;border-left:1px solid var(--border-soft);background:var(--card);font:inherit;font-size:.88rem;font-weight:700;color:var(--ink-soft);cursor:pointer}
.seg button:first-child{border-left:none}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.res-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.res-head b{font-size:1rem}
.res-head .acts{display:flex;flex-wrap:wrap;gap:8px}
.files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.files li{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--border-soft);border-radius:12px;padding:10px 12px}
.files .thumb{flex:none;width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--border-soft);background:var(--bg);display:grid;place-items:center;font-size:1.4rem}
.files .meta{flex:1;min-width:0;display:grid;gap:2px}
.files .nm{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.files .sz{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.files .sz.err{color:var(--danger)}
.files .mini{display:flex;gap:4px;flex:none}
.files .mini button{width:36px;height:36px;border:1.5px solid var(--border-soft);border-radius:999px;background:var(--card);font:inherit;font-size:.9rem;color:var(--ink-soft);cursor:pointer}
.files .mini button:hover{border-color:var(--border);color:var(--ink)}
.files .mini button:disabled{opacity:.35;cursor:default}
.tool-sec[hidden]{display:none!important}
@media (max-width:420px){ .files li{flex-wrap:wrap} .files .mini{margin-left:auto} }