/* 오늘의 운세 — 이 페이지에만 필요한 규칙.
 *
 * ★★ `style.css` 는 한 줄도 안 건드렸다. 다른 손이 같은 시각에 만지고 있다.
 *   그래서 여기서는 **토큰을 새로 만들지 않는다** — `:root` 를 다시 열지 않고
 *   `style.css` 가 정한 `--paper`·`--ink`·`--hot`·`--mok`… 을 그대로 빌려 쓴다.
 *   (`scripts/시험_일진.mjs` 가 `:root {` 가 없는지 매번 본다)
 *
 * ★ 빌려 쓴 것 — `.card` `.body` `.hint` `.rules` `.oh` `.share` `.pri` `.more`
 *   `.daeun` `.e-목…e-수` `.kicker` `.one`. 새로 만든 것만 아래에 적었다.
 *
 * ★ 한 가지 결로 간다 — 밝은 크림. `style.css` 와 같다. 어두운 판을 따로 두지 않는다.
 *
 * v1  2026-09-14
 */

/* ── 상단 메뉴 자리 — ★ 비서실이 나중에 붙인다. 껍데기만 미리 둔다 ──── */
.topnav{
  background:var(--card); border-bottom:var(--line) solid var(--ink);
  padding:9px 14px;
}
.topnav[hidden]{ display:none !important; }
.topnav ul{ margin:0 auto; padding:0; list-style:none; max-width:520px;
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.topnav a{ display:inline-block; text-decoration:none; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:999px;
  padding:5px 12px; font-size:12px; font-weight:800; }
.topnav a[aria-current=page]{ background:var(--to); }

/* ── 머리 ─────────────────────────────────────────────────── */
header .logo{ text-decoration:none; }
header h1{ font-size:clamp(25px,7vw,32px); }
header .sub em{ font-style:normal; color:var(--badge-ink); font-weight:800; }

/* ── 날짜 띠 ──────────────────────────────────────────────── */
.daybar{
  display:flex; align-items:stretch; gap:9px; margin:0 0 11px;
}
.daybar[hidden]{ display:none !important; }
.daybar button{
  flex:0 0 auto; width:50px;
  background:var(--card); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:13px;
  box-shadow:0 3px 0 var(--ink);
  font:inherit; font-size:19px; font-weight:900; cursor:pointer;
}
.daybar button:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }
.daybar button:disabled{ opacity:.32; box-shadow:none; cursor:default; transform:none; }
.daybar .dl{
  flex:1 1 auto; min-width:0; text-align:center;
  background:var(--card); border:var(--line) solid var(--ink); border-radius:13px;
  box-shadow:0 3px 0 var(--ink); padding:9px 8px;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.daybar .dl strong{ font-size:14px; font-weight:900; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.daybar .dl span{ font-size:11px; font-weight:800; color:var(--dim); letter-spacing:.06em; }

.todayback{ text-align:center; margin:0 0 13px; }
.todayback[hidden]{ display:none !important; }
.todayback button{
  background:var(--badge); color:var(--badge-ink);
  border:2px solid var(--ink); border-radius:999px; box-shadow:0 2px 0 var(--ink);
  padding:6px 15px; font:inherit; font-size:12px; font-weight:900; cursor:pointer;
}
.todayback button:active{ transform:translateY(2px); box-shadow:none; }

/* ── 일진 카드 ────────────────────────────────────────────── */
.card.ilji{ text-align:center; padding-top:20px; }
.card.ilji .kicker{
  display:inline-block; background:var(--badge); color:var(--badge-ink);
  font-size:10.5px; font-weight:800; letter-spacing:.1em;
  border:1.5px solid var(--ink); border-radius:999px; padding:4px 12px;
}
.gzbox{ display:flex; gap:11px; justify-content:center; margin:14px 0 3px; }
.gz1{
  width:80px; border:var(--line) solid var(--ink); border-radius:15px;
  padding:7px 0 6px; display:flex; flex-direction:column; align-items:center; gap:1px;
}
.gz1 b{ font-size:40px; font-weight:900; line-height:1.08; }
.gz1 s{ text-decoration:none; font-size:11px; font-weight:800; color:var(--ink); opacity:.62; }

.card.ilji .mood{
  display:inline-flex; align-items:center; gap:6px; margin-top:13px;
  border:2px solid var(--ink); border-radius:999px; box-shadow:0 2px 0 var(--ink);
  padding:5px 14px; font-size:12.5px; font-weight:900;
  background:var(--to);
}
.card.ilji .mood .dot{ width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--ink); background:var(--card); }
.card.ilji.good .mood{ background:var(--mok); }
.card.ilji.flat .mood{ background:var(--to); }
.card.ilji.care .mood{ background:var(--hwa); }

.card.ilji .one{
  margin-top:12px; font-size:18px; font-weight:900; letter-spacing:-.035em; line-height:1.45;
}
.card.ilji .who{
  margin-top:12px; padding-top:11px; border-top:1.5px dashed var(--dash);
  font-size:11.5px; font-weight:700; color:var(--dim); line-height:1.7;
}

/* 저장된 사주가 없을 때 */
.card.empty .asbtn, .card .asbtn{
  display:block; text-align:center; text-decoration:none;
}

/* ── 잘 맞는 것 / 조심할 것 ───────────────────────────────── */
.twocol{ display:flex; gap:9px; }
.twocol .col{
  flex:1 1 0; min-width:0;
  background:var(--paper); border:2px solid var(--ink); border-radius:12px; padding:10px 10px 11px;
}
.twocol .col h3{
  margin:0 0 7px; font-size:11.5px; font-weight:900; letter-spacing:-.02em;
  display:inline-block; padding:2px 9px; border:1.5px solid var(--ink); border-radius:999px;
}
.twocol .col.good h3{ background:var(--mok); }
.twocol .col.care h3{ background:var(--hwa); }
.twocol ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.twocol li{ font-size:12.5px; font-weight:700; line-height:1.5; }
.twocol li::before{ content:"· "; color:var(--dim); }

/* ── 지지 관계 ────────────────────────────────────────────── */
.rels{ display:flex; flex-direction:column; gap:8px; }
.rel{
  position:relative; background:var(--paper);
  border:2px solid var(--ink); border-radius:12px; padding:10px 52px 10px 11px;
}
.rel b{ display:block; font-size:12.5px; font-weight:900; }
.rel span{ display:block; margin-top:2px; font-size:11.5px; color:var(--dim);
  font-weight:600; line-height:1.6; }
.rel i{
  position:absolute; top:9px; right:9px; font-style:normal;
  font-size:9.5px; font-weight:900; letter-spacing:.02em;
  border:1.5px solid var(--ink); border-radius:999px; padding:2px 7px; background:var(--card);
}
.rel.plus{ background:var(--mok); } .rel.plus i{ background:var(--card); }
.rel.minus{ background:var(--hwa); }
.rel.zero{ background:var(--paper); }

/* ── 오행 막대 — `style.css` 의 `.oh` 를 빌리고 「오늘」 표시만 얹는다 ── */
.oh.today > div.in .track{ box-shadow:0 3px 0 var(--ink); }
.oh.today .lb{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.oh.today .lb em{
  font-style:normal; font-size:8.5px; font-weight:900; letter-spacing:.04em;
  background:var(--badge); color:var(--badge-ink);
  border:1.2px solid var(--ink); border-radius:999px; padding:0 5px;
}

/* ── 대운 ─────────────────────────────────────────────────── */
.daeun-now{ display:flex; gap:11px; align-items:flex-start; }
.daeun-now i{
  flex:0 0 auto; width:62px; font-style:normal; text-align:center;
  background:var(--to); border:2px solid var(--ink); border-radius:11px;
  box-shadow:0 3px 0 var(--ink); padding:8px 3px;
}
/* ⚠ `> i` 로 조인다. 그냥 `.daeun-now b` 로 두면 **옆 글의 `<b>` 까지 잡아**
   「30세 대운」·「식신」이 제목처럼 커지고 줄이 갈린다 (2026-09-14 눈으로 잡음) */
.daeun-now > i b{ display:block; font-size:18px; font-weight:900; border-radius:7px; padding:2px 0; }
.daeun-now > i s{ display:block; text-decoration:none; font-size:9.5px; color:var(--dim); font-weight:800; }
.daeun-now .dn-말 b{ font-weight:900; color:var(--ink); }
.daeun-now .dn-말{ flex:1 1 auto; min-width:0; }
.daeun-now .dn-말 p{ margin:0 0 7px; font-size:12.5px; font-weight:600; line-height:1.7; }
.daeun-now .dn-말 p:last-child{ margin-bottom:0; }

/* ── 어제·내일 줄 ─────────────────────────────────────────── */
.nearby{ display:flex; gap:6px; overflow-x:auto; padding:2px 1px 8px; }
.nb{
  flex:0 0 auto; width:58px; text-align:center; cursor:pointer;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:11px; padding:7px 3px;
  font:inherit;
}
.nb.on{ background:var(--to); box-shadow:0 3px 0 var(--ink); }
.nb b{ display:block; font-size:15px; font-weight:900; border-radius:6px; padding:2px 0; margin:2px 0; }
.nb s{ display:block; text-decoration:none; font-size:9px; color:var(--dim); font-weight:800; }
.nb:active{ transform:translateY(2px); }

/* ── 규칙 상자 — ★ 접어 두되 숨기지 않는다 (하드룰 9) ──────────── */
.rulebox{ padding:0; }
.rulebox > summary{
  cursor:pointer; list-style:none; padding:17px 15px;
}
.rulebox > summary::-webkit-details-marker{ display:none; }
.rulebox > summary h2{ margin:0; }
.rulebox > summary h2::after{
  content:"펼치기"; margin-left:auto; font-size:10.5px; font-weight:800; color:var(--dim);
}
.rulebox[open] > summary h2::after{ content:"접기"; }
.rulebox[open] > summary{ padding-bottom:4px; }
.rulebox .rules{ padding:0 15px 17px; }
.rulebox .rules h3{
  margin:15px 0 6px; font-size:12.5px; font-weight:900; color:var(--ink); letter-spacing:-.02em;
}
.rulebox .rules h3:first-child{ margin-top:0; }
.rulebox .rules p{ margin:0 0 8px; font-size:11.5px; line-height:1.75; color:var(--dim); font-weight:600; }
.rulebox .rules b{ color:var(--ink); }

/* ⚠ `border-collapse:collapse` 로 두면 `border-radius`+`overflow:hidden` 이 안 듣고
   **마지막 「합」 줄만 테두리 밖으로 새어 나간다** (2026-09-14 눈으로 잡음).
   `separate` + `border-spacing:0` 이면 같은 그림인데 모서리가 제대로 잘린다. */
.scoretbl, .reltbl{
  width:100%; border-collapse:separate; border-spacing:0; margin:4px 0 10px;
  border:2px solid var(--ink); border-radius:10px; overflow:hidden;
  table-layout:fixed;
}
.scoretbl th, .scoretbl td, .reltbl th, .reltbl td{
  border-top:1.5px solid var(--dash); padding:7px 8px;
  font-size:11px; font-weight:700; line-height:1.5; text-align:left; vertical-align:top;
  word-break:keep-all; overflow-wrap:anywhere;
}
.scoretbl tr:first-child th, .scoretbl tr:first-child td,
.reltbl tr:first-child th, .reltbl tr:first-child td{ border-top:0; }
.scoretbl th, .reltbl th{ width:34%; color:var(--ink); background:var(--paper); }
.reltbl th{ width:30%; white-space:nowrap; }
.scoretbl td{ color:var(--dim); }
.reltbl td{ color:var(--dim); letter-spacing:.02em; }
.scoretbl .sc, .reltbl .sc{
  width:58px; text-align:center; font-weight:900; color:var(--ink); white-space:nowrap;
}
.sc.plus{ background:var(--mok); } .sc.minus{ background:var(--hwa); } .sc.zero{ background:var(--paper); }
.scoretbl .sum th, .scoretbl .sum td{
  border-top:2.5px solid var(--ink); background:var(--card); color:var(--ink); font-weight:900;
}

/* ── 아래 문 — `style.css` 의 `.more` 에 둘째 단추만 더한다 ───────── */
.more .go3{
  display:block; text-align:center; text-decoration:none; margin-top:8px;
  background:var(--card); color:var(--ink);
  border:2.5px solid var(--ink); border-radius:13px; box-shadow:0 3px 0 var(--ink);
  padding:12px; font-size:13.5px; font-weight:900; letter-spacing:-.02em;
}
.more .go3:active{ transform:translateY(2px); box-shadow:none; }

/* 화면이 아주 좁을 때 — 두 칸이 눌리지 않게 한 줄로 편다 */
@media (max-width:359px){
  .twocol{ flex-direction:column; }
  .gz1{ width:72px; }
  .gz1 b{ font-size:35px; }
}