/* 유희왕 재정 검색 — 화면
 *
 * 원칙 둘.
 *   1) 글꼴은 Pretendard 하나만 쓴다.
 *   2) **코나미 재정(초록)과 우리 판정(노랑 점선)은 절대 같은 상자에 넣지 않는다.**
 *      섞이는 순간 "공식"과 "추론"의 구분이 사라진다.
 */

/* 색 — **초록은 브랜드색이 아니라 의미색이다.**
 *
 * 처음엔 초록이 로고·버튼·헤드라인을 다 칠하면서 동시에 「코나미 공식 재정」도
 * 뜻했다. 같은 색이 "우리 브랜드"와 "이건 정본이다"를 겹쳐 뜻하면 **신호가 죽는다.**
 * 이 사이트에서 초록은 아무 데나 쓰면 안 되는 색이다.
 *
 *   먹색(--ink)   브랜드 · 버튼 · 링크
 *   초록(--ok)    코나미 공식 재정. **오직 여기만**
 *   노랑(--warn)  우리 판정 (재정이 아님)
 *   빨강(--bad)   판단 불가 · 금지 카드
 */
:root{
  --bg:#f5f4f2;                /* 종이. 순백보다 오래 읽기 편하다 */
  --panel:#fff; --fg:#15171a; --mut:#63676e; --line:#e0dedb;
  --ink:#1f2a37;               /* 브랜드 — 먹빛 남색 */
  --ink-soft:#eceef1;
  --accent:#1f2a37;            /* 링크·버튼은 먹색으로 */
  --accent-soft:#eceef1;
  --ok:#0f7a44; --ok-bg:#eef8f2; --ok-line:#bde0cb;
  --warn:#8a6300; --warn-bg:#fdf8ec; --warn-line:#e8d5a6;
  --bad:#b42318;
  --radius:6px;                /* 문서는 덜 둥글다 */
  --shadow:none;               /* 종이 위에 그림자 없음 */
  --measure:760px;             /* 한 줄 길이. 넘으면 읽기 힘들다 */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Pretendard, sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button,input{font:inherit; color:inherit}

/* ── 상단 ─────────────────────────────────────────────── */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px clamp(16px,4vw,28px);
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand .mark{
  display:grid; place-items:center; width:30px; height:30px; border-radius:4px;
  background:var(--ink); color:#fff; font-size:14px;
}
.brand b{display:block; font-weight:700; font-size:16px; letter-spacing:-.01em}
.brand small{display:block; color:var(--mut); font-size:11.5px; margin-top:-2px}
.nav nav{display:flex; gap:4px}
.nav nav a{
  text-decoration:none; color:var(--mut); font-size:14px; font-weight:600;
  padding:7px 12px; border-radius:8px;
  white-space:nowrap;   /* **글자 단위로 쪼개지면 메뉴가 아니라 사고다** (함정 59) */
}
.nav nav a:hover{background:var(--ink-soft); color:var(--fg)}
/* 밑줄은 pseudo 로 그린다. box-shadow inset 은 border-radius 를 따라 휘어서
 * 「홈」 밑에 웃는 입이 생겼다 (함정 59). */
.nav nav a{position:relative}
.nav nav a.on{color:var(--fg)}
.nav nav a.on::after{
  content:''; position:absolute; left:6px; right:6px; bottom:0;
  height:2px; background:var(--ink);
}

/* ── 히어로 ───────────────────────────────────────────── */
/* **왼쪽 정렬.** 문서는 가운데를 안 맞춘다.
 * 마케팅 히어로가 아니라 사전·법령 DB 의 머리말에 가깝게. */
.hero{
  max-width:var(--measure); margin:0 auto;
  padding:clamp(30px,5vw,52px) 20px 18px;
}
h1{
  margin:0; font-size:clamp(24px,4vw,33px); line-height:1.3;
  font-weight:700; letter-spacing:-.03em;
}
h1 em{font-style:normal; color:var(--mut); font-weight:600}
.lead{
  color:var(--mut); font-size:15px; line-height:1.72; margin:12px 0 26px;
  max-width:60ch;
}
.lead b{color:var(--fg); font-weight:600}
.badge{
  color:var(--mut); font-size:12.5px; margin:22px 0 0;
  padding-top:14px; border-top:1px solid var(--line);
}

/* 검색 — 떠 있는 알약이 아니라 **바닥에 놓인 입력창**.
 * 화살표 아이콘 대신 「검색」이라고 쓴다. 도구는 말로 설명한다. */
.slabel{
  display:block; font-size:12px; font-weight:600; color:var(--mut);
  margin-bottom:7px; letter-spacing:-.01em;
}
.srow{
  display:flex; align-items:stretch;
  background:var(--panel); border:1px solid #cfcdc9; border-radius:var(--radius);
  overflow:hidden;
}
.srow:focus-within{border-color:var(--ink); box-shadow:0 0 0 3px rgba(31,42,55,.10)}
.toggle{display:flex; flex:none; border-right:1px solid var(--line); background:var(--bg)}
.toggle button{
  border:0; background:transparent; color:var(--mut);
  font-size:13px; font-weight:600; padding:0 13px; cursor:pointer;
}
.toggle button.on{background:var(--panel); color:var(--fg)}
.srow input{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:16px; padding:13px 14px;
}
.srow input::placeholder{color:#9a9ea5}
.go{
  flex:none; border:0; cursor:pointer; padding:0 22px;
  background:var(--ink); color:#fff; font-size:14.5px; font-weight:600;
}
.go:hover{background:#2b3a4c}
.hint{color:var(--mut); font-size:12.5px; margin:11px 0 0}
.hint b{color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums}

/* 숫자 — **자랑하지 않는다.** 4칸 대문짝만한 수치는 마케팅 문법이다.
 * 레퍼런스 도구에서 이건 그냥 메타 정보라 한 줄로 눕힌다. */
.stats{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px;
  margin:9px 0 0; padding:0; font-size:12.5px; color:var(--mut);
}
.stats li{display:flex; gap:5px; align-items:baseline}
.stats b{font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums}
.stats span{color:var(--mut)}

/* ── 결과 목록 ────────────────────────────────────────── */
.cards{max-width:var(--measure); margin:0 auto; padding:8px 20px 80px}
.rescount{color:var(--mut); font-size:13px; margin:22px 0 10px}
/* 검색 결과 — 카드가 아니라 **목록의 행**이다. 사전 표제어처럼 붙여 놓는다. */
.hit{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:0;
  border-bottom:0; padding:12px 14px; margin:0; cursor:pointer;
}
.hit:first-of-type{border-radius:var(--radius) var(--radius) 0 0}
.hit:last-of-type{border-bottom:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius)}
.hit:hover{background:var(--ink-soft)}
.hit .kind{
  flex:none; width:24px; height:24px; border-radius:4px; display:grid; place-items:center;
  background:var(--bg); color:var(--mut); font-size:11px; font-weight:700;
  border:1px solid var(--line);
}
.hit .nm{flex:1; min-width:0; font-weight:600; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hit .cnt{flex:none; color:var(--mut); font-size:12px}
.empty{color:var(--mut); text-align:center; padding:40px 0; font-size:14.5px}

/* ── 카드 상세 ────────────────────────────────────────── */
#detail{max-width:var(--measure); margin:0 auto; padding:24px 20px 80px}
.back{
  border:0; background:transparent; color:var(--mut); cursor:pointer;
  font-size:13.5px; padding:6px 0; margin-bottom:6px;
}
.back:hover{color:var(--accent)}
.cardhead h2{margin:0; font-size:clamp(21px,3.6vw,27px); letter-spacing:-.025em}
.cardhead .sub{color:var(--mut); font-size:13px; margin-top:4px}
/* 카드 원문 — 상자가 아니라 **인용문**으로. 왼쪽 굵은 선 하나면 충분하다. */
.orig{
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--ink); border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 17px; margin:16px 0 8px; white-space:pre-wrap;
  font-size:14.5px; line-height:1.75;
}
.sect{margin-top:26px}
.sect > h3{
  font-size:13px; font-weight:700; margin:0 0 10px; letter-spacing:-.01em;
  display:flex; align-items:center; gap:7px;
}
.sect > h3 em{font-style:normal; font-weight:400; color:var(--mut); font-size:12px}

/* 조항 */
.clause{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px;
}
.clause .top{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:8px}
.clause .id{color:var(--ink); font-weight:700; font-size:15px;
  font-variant-numeric:tabular-nums}
.tag{
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:2px 8px; font-size:11.5px; color:var(--mut); font-weight:600;
}
.tag.cls{background:var(--ink-soft); border-color:transparent; color:var(--ink)}
.seg{display:flex; gap:9px; margin:5px 0; font-size:14px}
.seg .lb{flex:none; width:34px; color:var(--mut); font-size:11.5px; padding-top:3px}
.seg .tx{flex:1; min-width:0}
.pat{
  margin-top:9px; border-top:1px dashed var(--line); padding-top:9px;
}
.pat button{
  border:1px solid var(--line); background:var(--bg); color:var(--fg);
  border-radius:8px; padding:6px 10px; font-size:12.5px; cursor:pointer;
  text-align:left; max-width:100%;
}
.pat button:hover{border-color:var(--accent); color:var(--accent)}

/* 재정 / 판정 */
.box{border-radius:var(--radius); padding:14px 16px}
/* **이 화면에서 초록은 여기 하나뿐이다.** 그래서 눈에 띈다. */
.box.ok{background:var(--ok-bg); border:1px solid var(--ok-line);
  border-left:3px solid var(--ok)}
.box.ours{background:var(--warn-bg); border:1px dashed var(--warn-line);
  border-left:3px solid var(--warn-line)}
.box h4{margin:0 0 10px; font-size:13px}
.box.ok h4{color:var(--ok)} .box.ours h4{color:var(--warn)}
.box h4 em{font-style:normal; font-weight:400; opacity:.8}
.r{padding:11px 0; border-top:1px solid var(--line)}
.r:first-of-type{border-top:0}
.r .meta{font-size:11.5px; color:var(--mut); margin-bottom:5px}
.r p{margin:3px 0; font-size:13.5px; word-break:break-word}
.r p b{color:var(--mut); margin-right:6px; font-weight:600}
.links{display:flex; gap:12px; flex-wrap:wrap; margin-top:7px}
.links a{font-size:12px; color:var(--accent); text-decoration:none}
.links a:hover{text-decoration:underline}

/* ── 설명 페이지 ──────────────────────────────────────── */
.prose{max-width:680px; margin:0 auto; padding:36px 20px 80px}
.prose h2{font-size:23px; letter-spacing:-.02em; margin:0 0 14px}
.prose h3{font-size:15px; margin:28px 0 8px}
.prose p{color:var(--mut); font-size:14.5px}
.prose p b{color:var(--fg); font-weight:600}
.prose a{color:var(--accent)}
.legend{list-style:none; padding:0; margin:0}
.legend li{display:flex; gap:9px; align-items:flex-start; font-size:14px; margin:9px 0;
  color:var(--mut)}
.legend b{color:var(--fg)}
.dot{flex:none; width:10px; height:10px; border-radius:50%; margin-top:7px}
.dot.g{background:var(--ok)} .dot.y{background:var(--warn)} .dot.r{background:var(--bad)}
.mut{font-size:12.5px}

footer{
  border-top:1px solid var(--line); padding:18px 20px 30px;
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  color:var(--mut); font-size:12px; text-align:center;
}

@media (max-width:560px){
  /* 폰에서는 한 줄에 못 넣는다. 억지로 욱여넣지 말고 두 줄로 눕힌다 —
   * 로고 한 줄, 메뉴 한 줄. 카톡으로 들어오는 사람이 제일 먼저 보는 화면이다. */
  .nav{flex-wrap:wrap; gap:10px; padding:10px 16px}
  .brand small{display:none}          /* 히어로가 바로 밑에서 같은 말을 한다 */
  .nav nav{flex-basis:100%; justify-content:space-between; gap:0}
  .nav nav a{padding:7px 6px; font-size:13.5px}
  .srow{flex-wrap:wrap}
  .toggle{order:1; border-right:0; border-bottom:1px solid var(--line)}
  .go{order:2; margin-left:auto; border-bottom:1px solid var(--line)}
  .srow input{order:3; flex-basis:100%}
}

/* 질문 해석 칩 */
.interp{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px}
.ilabel{color:var(--mut); font-size:11.5px; margin-bottom:7px}
.chip{display:inline-block; background:var(--bg); border:1px solid var(--line);
  border-radius:7px; padding:3px 9px; margin:0 5px 5px 0; font-size:12.5px}
.chip.card{border-color:var(--accent); color:var(--accent); font-weight:600}

/* ── 금제 ─────────────────────────────────────────────── */
/* **출처를 늘 붙여 쓴다.** 이건 OCG(일본) 금제이고 한국 금제는 따로 논다. */
.lr{
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:5px;
  font-size:11px; font-weight:700; vertical-align:middle; line-height:1.5;
}
.lr-f{background:#fdeceb; color:var(--bad)}          /* 금지 */
.lr-l{background:#fdf3e3; color:var(--warn)}         /* 제한 */
.lr-s{background:var(--accent-soft); color:var(--accent)}  /* 준제한 */
.lrline{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:9px; font-size:12px; color:var(--mut);
}
.lrline .lr{margin-left:0}
.lrline b{color:var(--fg); font-weight:600}
.lrline em{font-style:normal; color:var(--warn)}

/* ── 룰 가이드 ─────────────────────────────────────────── */
/* **재정과 섞이지 않게** 한다. 여기는 룰 문서 근거이지 코나미 재정이 아니다. */
.answer{
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--ink); border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 16px; margin:16px 0 6px; font-size:14.5px; color:var(--fg);
}
.answer b{display:block; color:var(--mut); font-size:11.5px; margin-bottom:5px;
  letter-spacing:.02em}
.prose blockquote{
  margin:14px 0; padding:10px 0 10px 15px; border-left:3px solid var(--line);
  color:var(--mut); font-size:14px;
}
.glist{list-style:none; padding:0; margin:12px 0}
.glist li{
  position:relative; padding-left:15px; margin:9px 0;
  color:var(--mut); font-size:14.5px;
}
.glist li::before{content:''; position:absolute; left:0; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--line)}
.glist li b{color:var(--fg)}
.cite{
  display:inline-block; border:1px solid var(--line); background:var(--panel);
  color:var(--accent); border-radius:6px; padding:1px 7px; margin:0 2px;
  font-size:12px; font-weight:600; text-decoration:none; cursor:pointer;
  font-family:inherit; line-height:1.6;
}
.cite:hover{border-color:var(--accent)}
.hit .nm em{
  display:block; font-style:normal; font-weight:400;
  color:var(--mut); font-size:12.5px; margin-top:1px;
}

/* ── 룰북 근거 ─────────────────────────────────────────── */
/* 판정 밑에 붙는 칩. 누르면 공식 룰 북 원문이 펼쳐진다.
 * **근거를 못 읽으면 근거가 아니다.** */
.bookref{
  border:1px solid var(--line); background:var(--panel); color:var(--mut);
  border-radius:6px; padding:2px 8px; margin:6px 5px 0 0; font-size:11.5px;
  font-weight:600; cursor:pointer; font-family:inherit;
}
.bookref:hover{border-color:var(--accent); color:var(--accent)}
.bookdef{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; margin:7px 0 3px; font-size:13px; line-height:1.6;
}
.bookdef b{display:block; font-size:12px; margin-bottom:5px}
.bookdef span{color:var(--mut)}
.bookdef em{display:block; font-style:normal; color:var(--mut);
  font-size:11px; margin-top:7px; opacity:.85}

/* 룰 북 인용은 1차 자료다. 나무위키(회색)와 눈으로 구분되게 둔다. */
.cite.book{border-color:var(--ink); background:var(--ink-soft); color:var(--ink)}
.prose .bookdef{margin:8px 0 12px}

/* 룰 용어 사전 목록 */
.termq{
  width:100%; border:1px solid var(--line); background:var(--panel);
  border-radius:10px; padding:10px 13px; font-size:14.5px; outline:none;
  margin:6px 0 14px;
}
.termq:focus{border-color:var(--accent)}
#termlist{display:flex; flex-wrap:wrap; gap:6px}
#termlist .term{margin:0}
#termlist .term i{font-style:normal; color:var(--mut); font-weight:400; margin-left:6px}
#termlist .bookdef{flex-basis:100%}