/* 만세력 — 시안 5 「귀엽게」 판 (2026-09-13)
 *
 * > 전하 — 「난 **시안5가 맘에들어.** 확정은아니고 저런 방향으로 가자는거야.」
 * > 전하 — 「아니 아까 다섯번째 시안대로 가는거 아녔어? **왜 갑자기 네이비에 하나도
 * >         안귀여운 테마로** 디자인이 전부 바뀌었지?」
 *
 * ★ 옛 네이비 판은 `_이전_style_네이비_*.css` 로 남겼다 (하드룰 2 — 안 지운다).
 * ★ 색·치수는 시안 5(`saju_ui.html` .s5)에서 **그대로 옮긴 값**이다. 짐작하지 않았다.
 * ★ 한 가지 결로 간다 — 밝은 크림. 어두운 판을 따로 두지 않는다.
 *   그래서 background 와 color 를 **모두 명시**한다 (투명하게 두면 남의 바탕을 빌린다).
 */
:root{
  --paper:#fff6ef;      /* 바탕 */
  --card:#ffffff;       /* 카드 */
  --ink:#2d2320;        /* 선과 글 — 시안의 굵은 테두리 색이다 */
  --dim:#6b5850;        /* 보조글 */
  --faint:#c9b5a9;      /* 워터마크 */
  --dash:#e0cfc4;       /* 점선 */
  --badge:#ffe3d0; --badge-ink:#a4502a;
  --hot:#ff8a5c;        /* 주요 단추 */
  --spark:#ffc95c;
  /* 오행 다섯 — 캐릭터 몸 색이기도 하다 (아이콘굽기.py 와 같은 값) */
  --mok:#bfe8cd; --hwa:#f7b9ab; --to:#f6d98a; --geum:#e7e3dc; --su:#bcd4f0;
  --line:2.5px; --r:15px;
  --sans:"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:600; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.hidden{ display:none !important; }

.wrap{ max-width:520px; margin:0 auto; padding:18px 15px 120px; }

/* ── 머리 ─────────────────────────────────────── */
header{ text-align:center; padding:14px 0 18px; position:relative; }
.logo{
  display:inline-block; background:var(--badge); color:var(--badge-ink);
  font-size:11px; font-weight:800; letter-spacing:.22em;
  border-radius:999px; padding:5px 13px; border:1.5px solid var(--ink);
}
header h1{
  margin:13px 0 6px; font-size:clamp(26px,7.5vw,34px); font-weight:900;
  letter-spacing:-.045em; line-height:1.22;
}
.sub{ margin:0; color:var(--dim); font-size:13.5px; font-weight:700; }

/* ── 카드 — 시안의 굵은 선 + 오프셋 그림자 ────────── */
.card{
  background:var(--card); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:var(--r);
  box-shadow:4px 4px 0 var(--ink);
  padding:17px 15px; margin:0 0 15px;
}
.card h2{
  margin:0 0 12px; font-size:15px; font-weight:900; letter-spacing:-.02em;
  display:flex; align-items:center; gap:7px;
}
.card h2::before{
  content:""; width:9px; height:9px; border-radius:3px;
  background:var(--hot); border:1.5px solid var(--ink); flex:0 0 auto;
}
.body p{ margin:0 0 9px; font-size:13.5px; line-height:1.72; color:var(--ink); font-weight:600; }
.body p:last-child{ margin-bottom:0; }
.hint{ margin:11px 0 0; font-size:11.5px; line-height:1.6; color:var(--dim); font-weight:600; }
.rules{ font-size:12px; color:var(--dim); }

/* ── 폼 ──────────────────────────────────────── */
label, .lbl{ display:block; font-size:11.5px; font-weight:800; color:var(--dim); margin:0 0 6px; }
#form label{ margin-top:13px; }
#form label:first-of-type{ margin-top:0; }
input[type=date], input[type=time], input[type=text], select{
  width:100%; box-sizing:border-box; background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:11px;
  padding:11px 12px; font:inherit; font-size:15px; font-weight:700;
}
input:focus-visible, select:focus-visible, button:focus-visible{
  outline:3px solid var(--hot); outline-offset:2px;
}
.row{ display:flex; gap:11px; }
.row > *{ flex:1 1 0; min-width:0; }

/* ★★★ 연·월·일 세 칸 (전하 어명 2026-09-14 「연월일 개별로 입력하게 해」).
   ★ 단위 글자(연·월·일)를 칸 **안 오른쪽**에 겹쳐 둔다 — 칸마다 라벨을 따로 달면 줄이
     늘어나 폼이 길어진다. 그러면 「불편하다」를 다른 꼴로 되살리는 것이다.
   ★ 숫자는 가운데로 모은다. 세 칸이 나란히 서야 한 덩어리로 읽힌다.
   ⚠ `.row` 안에 `.row` 가 겹친다(시각 칸). 바깥 `.row` 의 `gap:11px` 이 그대로 먹는다. */
.ymd > div{ position:relative; }
.ymd input{ text-align:center; padding-right:24px; padding-left:6px; }
.ymd .ymd-단위{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:800; color:var(--dim); pointer-events:none;
}

/* ★★ 시각을 되읽어 주는 한 줄 (전하 어명 2026-09-14 「생시는 오전 오후 선택 가능토록」).
   「오전 12시가 0시냐 12시냐」가 사람이 제일 헷갈리는 자리라 **낱말로 풀어서** 되읽는다 —
   「밤 12시 00분 · 24시 표기로 00:00」. 곁말이 아니라 **셈이 무엇으로 읽었나**다 (하드룰 ⑨).
   ★ 그래서 여느 `.hint` 보다 진하고 크다. 눈이 그냥 지나치면 헷갈림을 못 막는다. */
.시각말{
  margin-top:8px; font-size:12.5px; font-weight:800; color:var(--ink); opacity:.85;
}
/* ★ 시각 칸 안의 오전/오후 단추는 조금 작게 — 반쪽 칸에 들어앉는다 (375px 에서 잰 값) */
.row .seg[data-seg=ap], .row .seg[data-seg=askAp]{ margin-bottom:7px; }
.row .seg[data-seg=ap] button,
.row .seg[data-seg=askAp] button{ padding:9px 4px; font-size:13px; }

.seg{ display:flex; gap:7px; }
.seg button{
  flex:1 1 0; background:var(--card); color:var(--ink);
  border:2px solid var(--ink); border-radius:11px;
  padding:10px 6px; font:inherit; font-size:14px; font-weight:800; cursor:pointer;
}
.seg button[aria-pressed=true], .seg button.on{
  background:var(--to); box-shadow:0 2px 0 var(--ink);
}
.adv{ margin-top:13px; }
.adv summary{
  cursor:pointer; font-size:12px; font-weight:800; color:var(--dim);
  padding:8px 0; list-style:none;
}
.adv summary::-webkit-details-marker{ display:none; }
.adv summary::before{ content:"⚙ "; }
.pri, .full, #form button[type=submit]{
  width:100%; margin-top:16px; background:var(--hot); color:#fff;
  border:var(--line) solid var(--ink); border-radius:13px;
  box-shadow:0 3px 0 var(--ink);
  padding:14px; font:inherit; font-size:16px; font-weight:900;
  letter-spacing:-.02em; cursor:pointer;
}
#form button[type=submit]:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }

/* ── 캐릭터 카드 ──────────────────────────────── */
.card.type{ text-align:center; position:relative; padding-top:22px; }
.card.type .kicker{
  display:inline-block; background:var(--badge); color:var(--badge-ink);
  font-size:10.5px; font-weight:800; letter-spacing:.14em;
  border:1.5px solid var(--ink); border-radius:999px; padding:4px 11px;
}
.card.type .nm{ margin-top:9px; font-size:25px; font-weight:900; letter-spacing:-.045em; }
.card.type .one{ margin-top:7px; font-size:13px; color:var(--dim); font-weight:700; line-height:1.62; }
.card.type .gz{
  margin-top:13px; padding-top:12px; border-top:1.5px dashed var(--dash);
  font-size:17px; font-weight:800; letter-spacing:.18em;
}

/* ★ 캐릭터 — 시안 .s5 .guy 를 그대로 옮겼다. 이모지가 아니다 */
.guy{ width:66px; margin:0 auto 3px; position:relative;
      display:flex; flex-direction:column; align-items:center; }
.guy .head{
  width:58px; height:55px; border:var(--line) solid var(--ink);
  border-radius:47%; position:relative; z-index:2; background:var(--to);
}
.guy .body2{
  width:42px; height:25px; border:var(--line) solid var(--ink); border-top:0;
  border-radius:0 0 13px 13px; margin-top:-2px; background:var(--to);
}
.guy .eye{ position:absolute; top:23px; width:6px; height:6px; background:var(--ink); border-radius:50%; }
.guy .eye.l{ left:14px } .guy .eye.r{ right:14px }
.guy .mo{
  position:absolute; top:34px; left:50%; transform:translateX(-50%);
  width:12px; height:7px; border:2px solid var(--ink); border-top:0; border-radius:0 0 12px 12px;
}
.guy .bl{ position:absolute; top:32px; width:7px; height:4px; background:#ffb3a0; border-radius:50%; opacity:.85 }
.guy .bl.l{ left:3px } .guy .bl.r{ right:3px }
.guy.e-목 .head, .guy.e-목 .body2{ background:var(--mok) }
.guy.e-화 .head, .guy.e-화 .body2{ background:var(--hwa) }
.guy.e-토 .head, .guy.e-토 .body2{ background:var(--to) }
.guy.e-금 .head, .guy.e-금 .body2{ background:var(--geum) }
.guy.e-수 .head, .guy.e-수 .body2{ background:var(--su) }

/* ── 사주팔자 네 기둥 ─────────────────────────── */
.p4{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.p4 .h{ font-size:10.5px; font-weight:800; color:var(--dim); text-align:center; margin-bottom:5px; }
.pil{
  background:var(--paper); border:2px solid var(--ink); border-radius:12px;
  padding:9px 4px; text-align:center;
}
.pil.me{ box-shadow:0 3px 0 var(--ink); background:var(--card); }
.pil .gan, .pil .ji{
  font-size:23px; font-weight:900; line-height:1.18;
  border-radius:9px; padding:3px 0; margin:2px 0;
}
.pil .ko{ font-size:10.5px; font-weight:800; color:var(--dim); }
.pil .tg{ font-size:9.5px; font-weight:800; color:var(--badge-ink); margin:2px 0 5px; }
.pil .jj{ font-size:9px; color:var(--faint); font-weight:700; margin-top:5px; letter-spacing:.04em; }
.e-목{ background:var(--mok) } .e-화{ background:var(--hwa) }
.e-토{ background:var(--to) }  .e-금{ background:var(--geum) } .e-수{ background:var(--su) }

/* ── 오행 막대 ───────────────────────────────── */
.oh{ display:flex; gap:9px; align-items:flex-end; justify-content:center; padding:4px 0 2px; }
.oh > div{ display:flex; flex-direction:column; align-items:center; gap:5px; flex:1 1 0; }
.oh .n{ font-size:12px; font-weight:900; }
.oh .track{
  width:100%; max-width:44px; height:76px; display:flex; align-items:flex-end;
  background:var(--paper); border:2px solid var(--ink); border-radius:10px; padding:3px;
}
.oh .bar{ width:100%; border-radius:7px; border:1.5px solid var(--ink); }
.oh .lb{ font-size:11px; font-weight:800; color:var(--dim); }

/* ── 십성 ───────────────────────────────────── */
.tgrid{ display:flex; flex-direction:column; gap:9px; }
.tgrid > div{
  background:var(--paper); border:2px solid var(--ink); border-radius:12px; padding:10px 11px;
  display:flex; flex-direction:column; gap:3px;
}
.tgrid b{ font-size:13px; font-weight:900; }
.tgrid span{ font-size:12px; color:var(--dim); line-height:1.6; font-weight:600; }

/* ── 대운 ───────────────────────────────────── */
.daeun{ display:flex; gap:6px; overflow-x:auto; padding:2px 1px 8px; }
.daeun i{
  flex:0 0 auto; width:56px; font-style:normal; text-align:center;
  background:var(--paper); border:2px solid var(--ink); border-radius:11px; padding:8px 3px;
}
.daeun i.now{ background:var(--to); box-shadow:0 3px 0 var(--ink); }
.daeun b{ display:block; font-size:17px; font-weight:900; border-radius:7px; padding:2px 0; }
.daeun s{ display:block; text-decoration:none; font-size:9.5px; color:var(--dim); font-weight:800; }

/* ── 검산 ───────────────────────────────────── */
.chk{
  margin-top:12px; font-size:11.5px; font-weight:700; line-height:1.6;
  background:var(--mok); border:1.5px solid var(--ink); border-radius:10px; padding:9px 11px;
}
.chk.bad{ background:var(--hwa); }
.chk.off{ background:var(--paper); color:var(--dim); }

/* ── 공유 ───────────────────────────────────── */
.share{ display:flex; flex-direction:column; gap:9px; }
.share .go, .share button{
  background:var(--card); color:var(--ink);
  border:2px solid var(--ink); border-radius:12px; box-shadow:0 3px 0 var(--ink);
  padding:12px; font:inherit; font-size:14px; font-weight:900; cursor:pointer;
}
.share .go:active, .share button:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--ink); }

footer, .wm{ text-align:center; font-size:9.5px; color:var(--faint);
  letter-spacing:.2em; font-weight:800; padding:14px 0 0; }

/* ── 「내 사주 보기」 띠 — 친구 링크로 들어왔을 때만 ── */
#me-bar{
  display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap;
  padding:.6rem 1rem; background:var(--badge); color:var(--badge-ink);
  font-size:.82rem; font-weight:800; border-bottom:2px solid var(--ink);
}
#me-bar button{
  border:2px solid var(--ink); background:var(--card); color:var(--ink);
  border-radius:999px; padding:.3rem .8rem; font:inherit; font-weight:800;
  font-size:.8rem; cursor:pointer; white-space:nowrap;
}
#me-bar button:hover{ background:var(--to); }

/* ── 홈 화면에 두기 ──────────────────────────── */
#home-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
  display:flex; align-items:center; gap:.65rem; padding:.65rem .75rem;
  background:var(--card); border:var(--line) solid var(--ink); border-radius:18px;
  box-shadow:4px 4px 0 var(--ink);
  transform:translateY(150%); opacity:0;
  transition:transform .34s cubic-bezier(.2,.9,.3,1), opacity .25s;
}
#home-cta.on{ transform:none; opacity:1; }
@media (prefers-reduced-motion:reduce){ #home-cta{ transition:none; transform:none; opacity:1; } }
#home-cta .hc-face{
  flex:0 0 auto; width:40px; height:40px; border-radius:47%;
  background:var(--to); border:2px solid var(--ink);
  display:grid; place-items:center; font-size:19px; line-height:1;
}
#home-cta .hc-말{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
#home-cta .hc-말 strong{ font-size:.86rem; font-weight:900; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#home-cta .hc-말 span{ color:var(--dim); font-size:.72rem; font-weight:700; }
#home-cta .hc-단추{ flex:0 0 auto; display:flex; align-items:center; gap:.3rem; }
#home-cta .hc-주{
  background:var(--hot); color:#fff; border:2px solid var(--ink); border-radius:999px;
  box-shadow:0 2px 0 var(--ink);
  padding:.45rem .85rem; font:inherit; font-weight:900; font-size:.8rem;
  cursor:pointer; white-space:nowrap;
}
#home-cta .hc-주:active{ transform:translateY(2px); box-shadow:none; }
#home-cta .hc-닫기{ background:transparent; color:var(--dim); border:0; cursor:pointer;
  font-size:.95rem; line-height:1; padding:.35rem; font-weight:900; }

#home-help{
  position:fixed; inset:0; z-index:70; display:grid; place-items:end center;
  background:rgba(45,35,32,.5); padding:0 0 env(safe-area-inset-bottom);
}
#home-help .hh-창{
  position:relative; width:min(460px,100%); background:var(--card); color:var(--ink);
  border:var(--line) solid var(--ink); border-bottom:0; border-radius:22px 22px 0 0;
  padding:1.5rem 1.25rem 1.75rem;
}
#home-help .hh-닫기{ position:absolute; top:.8rem; right:.85rem; background:transparent;
  border:0; color:var(--dim); font-size:1.05rem; cursor:pointer; font-weight:900; }
#home-help h3{ margin:0 0 .55rem; font-size:1.1rem; font-weight:900; letter-spacing:-.03em; }
#home-help .hh-왜{ margin:0 0 .85rem; font-size:.85rem; color:var(--dim); line-height:1.65; font-weight:700; }
#home-help .hh-차례{ margin:0; padding-left:1.15rem; display:flex; flex-direction:column; gap:.5rem; }
#home-help .hh-차례 li{ font-size:.9rem; line-height:1.55; font-weight:700; }
#home-help .hh-차례 b{ background:var(--to); border-radius:5px; padding:1px 5px; }
#home-help .hh-덧{ margin:.95rem 0 0; font-size:.77rem; color:var(--dim); font-weight:700; }
#home-help .hh-복사{
  margin-top:1rem; width:100%; background:var(--card); color:var(--ink);
  border:2px solid var(--ink); border-radius:12px; box-shadow:0 3px 0 var(--ink);
  padding:.7rem; font:inherit; font-weight:900; cursor:pointer;
}
/* 배너의 작은 얼굴 — 오행 색을 따라간다 */
#home-cta .hc-face{ position:relative; }
#home-cta .hc-face::before, #home-cta .hc-face::after{
  content:""; position:absolute; top:14px; width:5px; height:5px;
  background:var(--ink); border-radius:50%;
}
#home-cta .hc-face::before{ left:10px } #home-cta .hc-face::after{ right:10px }
#home-cta .hc-목{ background:var(--mok) } #home-cta .hc-화{ background:var(--hwa) }
#home-cta .hc-토{ background:var(--to) }  #home-cta .hc-금{ background:var(--geum) }
#home-cta .hc-수{ background:var(--su) }
/* ★ 오행 색은 간지 칸을 칠하는 규칙이다. 캐릭터 껍데기에는 걸리면 안 된다
     — 안 막으면 얼굴 뒤에 네모가 생긴다 (2026-09-13 눈으로 잡음) */
.guy[class*="e-"]{ background:transparent; }

/* 광고 자리 — ★ 높이를 미리 잡아 화면이 안 흔들리게 한다 (CLS 0)
   승인 전에는 DOM 에 아예 안 생긴다. 이 규칙은 켤 때를 위해 미리 둔다 */
.ad-slot{
  position:relative; margin:0 0 15px;
  min-height:100px;                    /* 반응형 단위가 제일 작게 잡히는 높이 */
  background:var(--paper);
  border:2px dashed var(--dash); border-radius:var(--r);
  padding:20px 10px 10px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* ★ 광고임을 분명히 한다 — 콘텐츠로 오해하면 오클릭이 되고 그것이 정책 위반이다 */
.ad-slot .ad-lb{
  position:absolute; top:6px; left:10px;
  font-size:9.5px; font-weight:800; letter-spacing:.16em;
  color:var(--faint);
}
.ad-slot ins{ width:100%; }
/* 카드와 눈에 띄게 다르게 — 카드는 흰 바탕에 실선, 광고는 크림 바탕에 점선이다 */

/* ★ 계절 캐릭터 — `.guy` 를 SVG 로 옮기고 계절·조후를 겹친 것 (data/부품/) (2026-09-13)
 *   `.guy` 는 그대로 둔다. 계절 칸이 없을 때 돌아갈 자리다. */
.chr{ display:block; width:104px; height:104px; margin:0 auto 2px; overflow:visible; }

/* 읽을거리로 가는 문 — 첫 화면 아래. 없으면 구운 51장을 사람이 못 찾는다 (2026-09-13) */
.more{
  background:var(--card); border:2.5px solid var(--ink); border-radius:var(--r);
  box-shadow:4px 4px 0 var(--ink); padding:17px 15px; margin:0 0 15px;
}
.more h2{
  margin:0 0 8px; font-size:15px; font-weight:900; letter-spacing:-.02em;
  display:flex; align-items:center; gap:7px;
}
.more h2::before{
  content:""; width:9px; height:9px; border-radius:3px;
  background:var(--hot); border:1.5px solid var(--ink); flex:0 0 auto;
}
.more p{ margin:0 0 12px; font-size:12.5px; color:var(--dim); font-weight:600; line-height:1.7; }
.more .go2{
  display:block; text-align:center; text-decoration:none;
  background:var(--to); color:var(--ink);
  border:2.5px solid var(--ink); border-radius:13px; box-shadow:0 3px 0 var(--ink);
  padding:13px; font-size:14.5px; font-weight:900; letter-spacing:-.02em;
}
.more .go2:active{ transform:translateY(2px); box-shadow:none; }

/* ── 메뉴 탭 (2026-09-14 · 전하 「메뉴들도 다양화하고」) ─────────────────
   ★ 위에 붙인다. 아래 고정 바는 쓰지 않는다 — 광고 자리를 덮고,
     애드센스가 「고정 요소에 붙은 광고」를 싫어할 자리를 처음부터 안 만든다. */
.tabs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:7px;
  margin:0 0 18px; padding:0;
}
.tabs a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:9px 2px 8px; text-decoration:none;
  background:var(--card); color:var(--dim);
  border:var(--line) solid var(--ink); border-radius:13px;
  box-shadow:0 3px 0 var(--ink);
  font-size:11.5px; font-weight:800; letter-spacing:-.03em;
  transition:transform .08s, box-shadow .08s;
}
.tabs a b{
  font-size:15px; line-height:1; font-weight:900; color:var(--ink);
  opacity:.42;
}
.tabs a:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.tabs a[aria-current="page"]{
  background:var(--badge); color:var(--badge-ink);
}
.tabs a[aria-current="page"] b{ color:var(--badge-ink); opacity:1; }
.tabs a:focus-visible{ outline:3px solid var(--hot); outline-offset:2px; }

/* ★ 아주 좁은 화면에서 넉 줄로 무너지지 않게 — 글자만 줄인다 */
@media (max-width:340px){
  .tabs{ gap:5px }
  .tabs a{ font-size:10.5px; padding:8px 1px 7px }
}
@media (prefers-reduced-motion:reduce){
  .tabs a{ transition:none }
}

/* ── 궁합 (2026-09-14) ─────────────────────────────────────────────── */
fieldset.two{
  border:var(--line) solid var(--ink); border-radius:var(--r);
  padding:13px 13px 15px; margin:0 0 14px; background:var(--paper);
}
fieldset.two legend{
  padding:2px 10px; margin-left:2px;
  background:var(--badge); color:var(--badge-ink);
  border:2px solid var(--ink); border-radius:999px;
  font-size:12px; font-weight:900; letter-spacing:-.03em;
}
fieldset.two .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }

.gh-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gh-p{
  background:var(--paper); border:2px solid var(--ink); border-radius:12px;
  padding:9px 6px 8px; text-align:center;
}
.gh-nm{
  font-size:11px; font-weight:900; color:var(--badge-ink);
  background:var(--badge); border-radius:999px; display:inline-block;
  padding:2px 10px; margin-bottom:7px;
}
.gh-gz{ display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.gh-gz b{ font-size:15px; font-weight:900; letter-spacing:-.05em; line-height:1.25; }
.gh-ko{ display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-top:2px; }
.gh-ko s{ text-decoration:none; font-size:10px; color:var(--dim); font-weight:700; }

.gh-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.gh-list li{
  background:var(--paper); border:2px solid var(--ink); border-radius:12px;
  padding:10px 12px; border-left-width:7px;
}
.gh-list li.plus{ border-left-color:#7fc99a; }
.gh-list li.minus{ border-left-color:var(--hot); }
.gh-list li b{ display:block; font-size:13.5px; font-weight:900; letter-spacing:-.035em; }
.gh-list li span{ display:block; margin-top:4px; font-size:12.5px; line-height:1.62; }
.gh-list li em{
  display:block; margin-top:6px; font-style:normal;
  font-size:11px; color:var(--dim); font-weight:700;
}

.gh-oh{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:12px; }
.gh-oh > div{
  background:var(--paper); border:2px solid var(--ink); border-radius:11px;
  padding:8px 3px; text-align:center;
}
.gh-oh .n{ display:block; font-size:17px; font-weight:900; line-height:1; }
.gh-oh .lb{ display:block; margin-top:4px; font-size:11px; color:var(--dim); font-weight:800; }

.card.type.gh-top{ padding-top:18px; }

/* ── 신살 · 십이운성 · 주제 (2026-09-14 · 전하 「입력하면 나올내용들도 정해놓아야하고」) ── */
.sinsal{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sinsal li{
  background:var(--paper); border:2px solid var(--ink); border-radius:12px;
  padding:11px 12px 10px;
}
.sinsal li b{ font-size:14px; font-weight:900; letter-spacing:-.04em; }
.sinsal li u{
  text-decoration:none; margin-left:7px; padding:2px 8px;
  background:var(--badge); color:var(--badge-ink);
  border-radius:999px; font-size:10.5px; font-weight:900; vertical-align:2px;
}
.sinsal li > span{
  display:block; margin-top:6px; font-size:12.5px; font-weight:800; color:var(--badge-ink);
}
.sinsal li .body{ margin-top:6px; }
.sinsal li .body p{ margin:0 0 5px; font-size:12.5px; line-height:1.64; }
.sinsal li em{
  display:block; margin-top:7px; padding-top:7px; border-top:1.5px dashed var(--dash);
  font-style:normal; font-size:11px; color:var(--dim); font-weight:700;
}

.unseong{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.unseong > div{
  background:var(--paper); border:2px solid var(--ink); border-radius:11px;
  padding:9px 3px; text-align:center;
}
.unseong > div.me{ background:var(--badge); }
.unseong s{ display:block; text-decoration:none; font-size:10.5px; color:var(--dim); font-weight:800; }
.unseong b{ display:block; margin-top:5px; font-size:14px; font-weight:900; letter-spacing:-.04em; }
.unseong > div.me b{ color:var(--badge-ink); }

.jumok{ display:grid; gap:11px; }
.jumok section{
  background:var(--paper); border:2px solid var(--ink); border-radius:12px;
  padding:11px 12px 9px;
}
.jumok h3{
  margin:0; font-size:13px; font-weight:900; letter-spacing:-.04em;
  display:flex; align-items:center; gap:6px;
}
.jumok h3::before{
  content:''; width:9px; height:9px; border-radius:3px;
  background:var(--spark); border:1.5px solid var(--ink); flex:0 0 auto;
}
.jumok .one{ margin:6px 0 0; font-size:12.5px; font-weight:800; color:var(--badge-ink); }
.jumok .body{ margin-top:6px; }
.jumok .body p{ margin:0 0 5px; font-size:12.5px; line-height:1.64; }
.jumok .gojii{
  margin:8px 0 0; padding-top:7px; border-top:1.5px dashed var(--dash);
  font-size:11px; color:var(--dim); font-weight:700;
}

/* ── 홈 화면 단추 카드 (2026-09-14 · 전하 「홈화면에 바로가기 추가 같은 버튼을 만들고」) ──
   ★ 아래 배너는 한 번 접으면 이레 안 뜬다. 이 카드는 **결과 안에 늘 있다.** */
.card.home2{
  display:grid; grid-template-columns:auto 1fr; gap:12px 13px;
  align-items:center; background:var(--badge);
}
.card.home2 .h2-guy{ width:62px; }
.card.home2 .h2-guy .guy,
.card.home2 .h2-guy svg{ width:62px; height:62px; display:block; }
.card.home2 .h2-말 b{
  display:block; font-size:15px; font-weight:900; letter-spacing:-.045em;
  color:var(--badge-ink);
}
.card.home2 .h2-말 span{
  display:block; margin-top:5px; font-size:12.5px; line-height:1.6;
  color:var(--ink); opacity:.82; font-weight:700;
}
.card.home2 .h2-단추{
  grid-column:1 / -1; width:100%; margin-top:2px;
  padding:13px 10px; font-size:15px; font-weight:900; letter-spacing:-.03em;
  background:var(--hot); color:#fff;
  border:var(--line) solid var(--ink); border-radius:13px;
  box-shadow:0 4px 0 var(--ink); cursor:pointer;
  font-family:inherit;
}
.card.home2 .h2-단추:active{ transform:translateY(4px); box-shadow:0 0 0 var(--ink); }
.card.home2 .h2-단추:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

/* 강약 카드에 되살린 한 줄 */
.card .one2{
  margin:0 0 9px; font-size:13px; font-weight:900; letter-spacing:-.035em;
  color:var(--badge-ink);
}
@media (prefers-reduced-motion:reduce){ .card.home2 .h2-단추{ transition:none } }

/* ── 히어로 — 캐릭터가 주인공이다 (2026-09-14 · 전하 「캐릭터들을 전면에 내세우고」) ──
   ⚠ 옛 판은 104px 짜리가 카드 맨 위에 얹혀 있었다. 화면 폭의 28% 다.
     마흔 종을 그려 놓고 **한 번, 작게** 쓰고 있었다. */
.card.type.hero{ padding:26px 18px 22px; overflow:hidden; position:relative; }
.card.type.hero .hero-무대{
  position:relative; width:min(230px, 62vw); margin:0 auto 4px;
  aspect-ratio:1; display:grid; place-items:center;
}
/* 오행 색 원 — 캐릭터를 받치는 바닥 */
.card.type.hero .hero-무대::before{
  content:''; position:absolute; inset:6% 6% 4%;
  border-radius:50%; background:var(--무대, var(--badge));
  border:var(--line) solid var(--ink);
  box-shadow:0 5px 0 var(--ink);
}
.card.type.hero .hero-무대 > *{
  position:relative; width:100% !important; height:auto !important;
  transform-origin:50% 88%;
  animation:툭 .62s cubic-bezier(.22,1.3,.36,1) both;
}
.card.type.hero .chr,
.card.type.hero .guy{ width:100% !important; height:auto !important; margin:0 !important; }

@keyframes 툭{
  0%  { transform:translateY(26px) scale(.72); opacity:0 }
  55% { transform:translateY(-6px) scale(1.06); opacity:1 }
  100%{ transform:translateY(0) scale(1); opacity:1 }
}

/* 오행마다 무대 색이 다르다 — 같은 결과가 두 번 같아 보이지 않게 */
.e-bg-목{ --무대:#d8f3e1 } .e-bg-화{ --무대:#ffd7cd }
.e-bg-토{ --무대:#fbe9b8 } .e-bg-금{ --무대:#efece6 } .e-bg-수{ --무대:#d5e6f8 }

.card.type.hero .kicker{ margin-top:4px; }
.card.type.hero .nm{
  margin-top:11px; font-size:clamp(27px, 8.4vw, 36px); line-height:1.14;
}
.card.type.hero .one{ margin-top:9px; font-size:14px; color:var(--ink); opacity:.78; }
.card.type.hero .gz{ margin-top:15px; font-size:14px; opacity:.52; letter-spacing:.2em; }

@media (prefers-reduced-motion:reduce){
  .card.type.hero .hero-무대 > *{ animation:none }
}

/* ── 마흔 명 미리보기 띠 ─────────────────────────────────────────── */
.peek{ margin:20px 0 4px; text-align:center; }
.peek h2{
  margin:0; font-size:19px; font-weight:900; letter-spacing:-.05em;
}
.peek h2 em{ font-style:normal; color:var(--hot); }
.peek > p{ margin:6px 0 13px; font-size:12.5px; color:var(--dim); font-weight:700; }
.peek-띠{
  display:flex; gap:11px; width:max-content;
  animation:흐름 26s linear infinite;
}
.peek:hover .peek-띠{ animation-play-state:paused; }
.peek-칸{
  flex:0 0 auto; width:92px;
  background:var(--card); border:2px solid var(--ink); border-radius:14px;
  padding:8px 5px 7px; box-shadow:0 3px 0 var(--ink);
}
.peek-그림{ width:64px; margin:0 auto; }
.peek-그림 .chr, .peek-그림 .guy{ width:64px !important; height:64px !important; margin:0 !important; }
.peek-칸 b{
  display:block; margin-top:5px; font-size:9.5px; font-weight:800;
  line-height:1.3; color:var(--dim); letter-spacing:-.04em;
}
@keyframes 흐름{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .peek-띠{ animation:none } }

/* 띠가 화면 밖으로 흐르되 가로 스크롤을 만들지 않는다 */
.peek{ overflow:hidden; }

/* 찔리는 한 줄 — 히어로의 주인공 문장 (2026-09-14) */
.card.type.hero .one.punch{
  margin-top:12px; font-size:clamp(15px, 4.4vw, 18px); line-height:1.5;
  font-weight:800; color:var(--ink); opacity:1;
  letter-spacing:-.035em; text-wrap:balance;
}
.card.type.hero .hero-근거{
  margin:11px 0 0; font-size:10.5px; color:var(--dim); font-weight:700;
  line-height:1.5; opacity:.8;
}

/* ── 「100명 중 몇 명」 (2026-09-14) — 카톡에서 제일 잘 퍼지는 것이 등수다 ── */
.card.rare .rare-줄{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.card.rare .rare-줄 li{
  display:flex; align-items:center; gap:11px;
  background:var(--paper); border:2px solid var(--ink); border-radius:12px;
  padding:10px 12px;
}
.card.rare .rare-줄 b{
  flex:0 0 auto; font-size:14px; font-weight:900; letter-spacing:-.04em;
  color:var(--badge-ink); background:var(--badge);
  border:1.5px solid var(--ink); border-radius:999px; padding:4px 10px;
  font-variant-numeric:tabular-nums;
}
.card.rare .rare-줄 span{ font-size:12.5px; font-weight:700; line-height:1.5; }

/* ── 신령 삼신 — 말을 거는 주체 (2026-09-14 · 전하 「신령으로 하고」) ──
   ★ 고치기 전 이 사이트의 문장은 전부 허공에서 왔다. 누가 하는 말인지가 없으면
     그것은 계산기 출력이다. 사주는 사람이 봐주는 것이다. */
.sinmal{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 14px;
}
.sinmal-얼굴{ flex:0 0 auto; margin-top:2px; }
.sinmal-얼굴 .sin{ display:block; }
.sinmal-풍선{
  position:relative; flex:1 1 auto;
  background:var(--card); border:var(--line) solid var(--ink);
  border-radius:15px; padding:10px 13px 11px;
  box-shadow:0 3px 0 var(--ink);
}
/* 말풍선 꼬리 — 얼굴 쪽을 가리킨다 */
.sinmal-풍선::before,
.sinmal-풍선::after{
  content:''; position:absolute; top:16px; left:-9px;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-right:9px solid var(--ink);
}
.sinmal-풍선::after{
  left:-5px; border-right-color:var(--card);
}
.sinmal-풍선 b{
  display:block; font-size:10.5px; font-weight:900; letter-spacing:.1em;
  color:var(--badge-ink);
}
.sinmal-풍선 span{
  display:block; margin-top:3px; font-size:13.5px; font-weight:800;
  line-height:1.52; letter-spacing:-.03em;
}

/* ── 그물형 공유 고리 (2026-09-14 · 전하 어명 「그물형으로 퍼져나가잖아」) ──
 *
 * ★ 새 자리 넷이다 — 묻는 칸(.ask) · 관계(.고리) · 되돌려 보내기(.되돌림) · 내 지도(.지도)
 * ★ 관계 카드의 목록·오행 칸은 **`gunghap` 이 이미 쓰는 `.gh-list`·`.gh-oh` 를 그대로 빌렸다.**
 *   같은 것을 두 벌로 꾸미면 나중에 한쪽만 고쳐져 갈린다.
 */

/* 묻는 칸 — 「나는 <A>에게 어떤 존재일까?」.
   ★ 눈에 확 띄어야 한다. 여기가 고리의 입구다 */
.card.ask{ background:var(--badge); border-color:var(--ink); }
.card.ask .ask-제목{
  font-size:19px; font-weight:900; letter-spacing:-.05em; line-height:1.3;
  color:var(--badge-ink);
}
.card.ask h2::before{ display:none; }      /* 이 칸은 제목이 곧 물음이다 — 앞머리 점을 뺀다 */
.card.ask .ask-곁{
  margin:8px 0 0; font-size:12.5px; font-weight:700; line-height:1.6; opacity:.85;
}
.card.ask .ask-폼{ margin-top:13px; }
.card.ask .ask-폼 > summary{
  list-style:none; cursor:pointer; text-align:center;
  background:var(--hot); color:#fff;
  border:var(--line) solid var(--ink); border-radius:13px;
  box-shadow:0 4px 0 var(--ink);
  padding:13px 10px; font-size:16px; font-weight:900; letter-spacing:-.03em;
}
.card.ask .ask-폼 > summary::-webkit-details-marker{ display:none; }
.card.ask .ask-폼[open] > summary{
  background:var(--card); color:var(--ink); font-size:13px;
  padding:8px 10px; box-shadow:0 2px 0 var(--ink);
}
.card.ask .ask-폼 label{
  display:block; margin:13px 0 5px; font-size:12px; font-weight:800; color:var(--dim);
}
.card.ask .ask-폼 input, .card.ask .ask-폼 select{
  width:100%; box-sizing:border-box; padding:11px 12px; font:inherit; font-size:15px; font-weight:700;
  color:var(--ink); background:var(--card);
  border:2px solid var(--ink); border-radius:12px;
}
/* ★ 묻는 칸의 연·월·일도 첫 화면과 같은 꼴이다.
   ⚠ 바로 위 규칙이 `.ymd input` 보다 셈이 세서 그대로 두면 가운데 정렬이 먹히지 않는다 */
.card.ask .ask-폼 .ymd input{ text-align:center; padding-right:24px; padding-left:6px; }
.card.ask .ask-폼 .go{
  width:100%; margin-top:14px; padding:14px 10px;
  font:inherit; font-size:16px; font-weight:900; letter-spacing:-.03em;
  background:var(--hot); color:#fff;
  border:var(--line) solid var(--ink); border-radius:13px;
  box-shadow:0 4px 0 var(--ink); cursor:pointer;
}
.card.ask .ask-폼 .go:active{ transform:translateY(4px); box-shadow:0 0 0 var(--ink); }
.card.ask .ask-강점{ color:var(--badge-ink); font-weight:800; }

/* 곁길 — **작은 글씨다.** 「내 거 보기」로 도망갈 길을 1순위로 두지 않는다 */
.ask-곁길{ margin:11px 0 0; text-align:center; }
.ask-곁길 button{
  background:none; border:none; padding:4px 6px; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:700; color:var(--dim);
  text-decoration:underline; text-underline-offset:3px;
}

/* 관계 — 고리 머리 */
.card.type.고리머리{ padding-top:18px; background:var(--card); }
.card.type.고리머리 .nm{ font-size:27px; }
.card.type.고리머리 .kicker{ color:var(--badge-ink); }

/* 되돌려 보내기 — ④ 의 자리. 고리가 여기서 닫힌다 */
.card.되돌림{ background:var(--mok); }
.card.되돌림 h2::before{ background:var(--hot); }
.card.되돌림 .되돌림-곁{
  margin:0 0 12px; font-size:13px; font-weight:800; line-height:1.6;
}
.card.되돌림 .share .pri{ background:var(--hot); color:#fff; }
.card.되돌림 .되돌림-내것{ color:var(--dim); }

/* 내 지도 — 서버 없이 **제 기기에만** 쌓인다 */
.card.지도 .지도-줄{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.card.지도 .지도-줄 li{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  background:var(--paper); border:2px solid var(--ink); border-radius:12px;
  padding:9px 11px;
}
.card.지도 .지도-줄 b{ font-size:14px; font-weight:900; letter-spacing:-.04em; }
.card.지도 .지도-줄 u{
  text-decoration:none; padding:2px 9px;
  background:var(--badge); color:var(--badge-ink);
  border-radius:999px; font-size:10.5px; font-weight:900;
}
.card.지도 .지도-줄 s{
  text-decoration:none; font-size:10.5px; color:var(--faint); font-weight:800;
}
.card.지도 .지도-손{ margin-left:auto; display:flex; gap:5px; }
.card.지도 .지도-손 button{
  border:1.5px solid var(--ink); background:var(--card); color:var(--ink);
  border-radius:999px; padding:3px 9px; font:inherit; font-size:10.5px;
  font-weight:800; cursor:pointer;
}
.card.지도 .share{ margin-top:12px; }
.card.지도 .share .pri{ background:var(--spark); }
.card.지도 .지도-한계{ color:var(--dim); }