/* 끝말대전 낱말 도구 — 게임 화면과 같은 종이·먹·주홍.
   두 도구가 같은 집 식구로 보여야 하므로 색·활자·간격을 게임에서 그대로 가져온다. */
:root{
  --paper:#fbfbf9; --ink:#111111; --dim:#5f5f5a; --line:#e5e5e0; --wash:#f2f2ee;
  --accent:#b03a08; --accent-wash:#fdece4;
  --font:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font); color:var(--ink); background:var(--paper); font-size:16px;
     -webkit-text-size-adjust:100%; line-height:1.6}
.wrap{width:100%; max-width:520px; margin:0 auto; padding:14px 16px 60px}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:2px 0 14px}
.topbar .mark{font-size:22px; font-weight:800; letter-spacing:-1.4px; color:var(--ink);
              text-decoration:none; line-height:1}
.topbar .mark em{font-style:normal; color:var(--accent)}
.topbar .back{font-size:12px; font-weight:700; color:var(--dim); text-decoration:none;
              border:1px solid var(--line); border-radius:99px; padding:6px 12px}
.topbar .back:active{border-color:var(--ink); color:var(--ink)}

h1{font-size:26px; font-weight:800; letter-spacing:-1.3px; line-height:1.3; margin-bottom:8px}
.lede{font-size:14px; font-weight:600; color:var(--dim); line-height:1.8; margin-bottom:18px}
.lede b{color:var(--accent)}

.panel{border:1.5px solid var(--ink); background:var(--wash); padding:16px; margin-bottom:22px}
.field{display:flex; gap:7px}
.field input{flex:1; min-width:0; font-family:inherit; font-size:17px; font-weight:700;
             padding:12px 13px; border:1.5px solid var(--ink); background:var(--paper);
             color:var(--ink); border-radius:0; -webkit-appearance:none}
.field input::placeholder{color:#8e8e88; font-weight:600}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent)}
.field button{flex:0 0 auto; padding:12px 18px; font-family:inherit; font-size:15px; font-weight:800;
              border:1.5px solid var(--ink); background:var(--ink); color:var(--paper);
              border-radius:0; letter-spacing:-.3px}
.field button:active{transform:translateY(1px)}
.opts{display:flex; gap:6px; margin-top:11px; flex-wrap:wrap}
.opt{font-family:inherit; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:99px;
     border:1.5px solid var(--line); background:var(--paper); color:var(--dim)}
.opt.on{border-color:var(--ink); background:var(--ink); color:var(--paper)}
.hintline{font-size:12px; font-weight:600; color:var(--dim); margin-top:10px; line-height:1.65}

.verdict{margin-top:13px; padding:13px 14px; border:1.5px solid var(--ink); background:var(--paper);
         font-size:14px; font-weight:700; line-height:1.7}
.verdict.bang{border-color:var(--accent); background:var(--accent-wash); color:var(--accent)}
.verdict b{font-size:17px}

.sect{margin:28px 0 12px; padding-bottom:7px; border-bottom:1.5px solid var(--ink);
      display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.sect h2{font-size:15px; font-weight:800; letter-spacing:-.5px}
.sect .note{font-size:11.5px; font-weight:700; color:var(--dim)}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-family:inherit; font-size:15px; font-weight:800; padding:9px 0; width:44px; text-align:center;
      border:1.5px solid var(--line); background:var(--paper); color:var(--ink); border-radius:0}
.chip.on{border-color:var(--accent); background:var(--accent); color:var(--paper)}
.chip i{display:block; font-style:normal; font-size:9.5px; font-weight:700; color:var(--dim); margin-top:2px}
.chip.on i{color:rgba(251,251,249,.8)}

.words{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.w{font-size:14px; font-weight:700; padding:7px 11px; border:1px solid var(--line);
   background:var(--paper); color:var(--ink)}
.w.rare{color:var(--dim); border-style:dashed}
.w em{font-style:normal; color:var(--accent)}
.more{margin-top:11px; font-family:inherit; font-size:12.5px; font-weight:700; padding:9px 16px;
      border:1.5px solid var(--line); background:var(--paper); color:var(--dim); border-radius:0}
.empty{padding:26px 10px; text-align:center; font-size:13.5px; font-weight:700; color:var(--dim);
       border:1px dashed var(--line)}
.loading{padding:30px 10px; text-align:center; font-size:13.5px; font-weight:700; color:var(--dim)}

.prose{margin-top:34px; font-size:14.5px; color:#3f3f3b; line-height:1.9}
.prose h2{font-size:16px; color:var(--ink); margin:22px 0 6px; letter-spacing:-.4px}
.prose h3{font-size:14px; color:var(--ink); margin:15px 0 4px; letter-spacing:-.3px}
.prose p{margin-bottom:12px}
.prose strong{color:var(--ink)}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-weight:700}
.foot{margin-top:32px; padding-top:14px; border-top:1px solid var(--line);
      font-size:11.5px; font-weight:600; color:var(--dim); line-height:1.9}
.foot a{color:var(--dim); text-decoration:underline; text-underline-offset:3px}