/* 사주 설명 페이지 (/saju/daeun, /saju/saeun …) 전용
 *
 * 긴 글을 읽는 페이지라 먹빛(어두운) 대신 한지(밝은) 톤을 쓴다.
 * 색·글꼴 생각은 /gunghap 과 같다 — 채도 낮춘 전통색, 제목은 명조, 이모지 없음.
 * data/gen-saju-guide.js 가 만드는 페이지들이 이 파일을 쓴다. */
:root{
  --paper-0:#FAF7F0;  --paper-1:#F3EEE2;  --paper-2:#F7F2E7;
  --card:#FFFFFF;
  --line:#E6DFD0;     --line-soft:#EFE9DC;
  --ink:#1F1C18;      --ink-2:#403A33;    --ink-dim:#6E6559;
  --gold:#8A6D22;     --gold-lt:#B9924A;  --gold-bg:#F7F0DC;
  --seal:#B23A2F;     --seal-bg:#F3E7E3;
  --jade:#3F6B52;     --jade-bg:#E6EEE8;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--paper-0); color:var(--ink);
  font-family:'Noto Sans KR','Malgun Gothic',-apple-system,sans-serif;
  font-size:16px; line-height:1.85; overflow-x:clip;
}
a{color:inherit;}
.wrap{max-width:720px;margin:0 auto;padding:0 20px;}

/* ── 상단바 ── */
.gd-nav{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.gd-nav-in{max-width:720px;margin:0 auto;padding:12px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:12px;}
.gd-nav a{font-size:13.5px;color:var(--ink-dim);text-decoration:none;
  border:1px solid var(--line);border-radius:6px;padding:6px 12px;white-space:nowrap;}
.gd-nav a.home{border:none;font-family:'Nanum Myeongjo',serif;font-weight:800;
  font-size:18px;color:var(--ink);padding:0;letter-spacing:-.5px;}

/* ── 머리말 ── */
.gd-head{padding:38px 0 26px;border-bottom:1px solid var(--line);}
.gd-eyebrow{font-size:11.5px;letter-spacing:2.5px;color:var(--gold);margin-bottom:10px;}
.gd-head h1{font-family:'Nanum Myeongjo',serif;font-weight:800;font-size:clamp(27px,6.5vw,36px);
  line-height:1.3;letter-spacing:-1px;}
.gd-lead{font-family:'Nanum Myeongjo',serif;font-size:17px;color:var(--ink-2);
  margin-top:14px;line-height:1.8;}
.gd-meta{font-size:12.5px;color:var(--ink-dim);margin-top:14px;}

/* ── 목차 ── */
.gd-toc{background:var(--paper-1);border:1px solid var(--line-soft);border-radius:10px;
  padding:16px 18px;margin:26px 0;}
.gd-toc b{display:block;font-family:'Nanum Myeongjo',serif;font-weight:700;
  font-size:14px;color:var(--ink);margin-bottom:8px;}
.gd-toc ol{margin:0;padding-left:19px;}
.gd-toc li{font-size:14px;line-height:1.95;}
.gd-toc a{color:var(--ink-2);text-decoration:none;}
.gd-toc a:hover{color:var(--gold);text-decoration:underline;}

/* ── 본문 ── */
.gd-sec{padding:30px 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:72px;}
.gd-sec:last-of-type{border-bottom:none;}
.gd-sec h2{font-family:'Nanum Myeongjo',serif;font-weight:800;font-size:23px;
  letter-spacing:-.6px;margin-bottom:14px;}
.gd-sec h3{font-family:'Nanum Myeongjo',serif;font-weight:700;font-size:17.5px;
  margin:22px 0 9px;color:var(--ink);}
.gd-sec p{margin-bottom:15px;color:var(--ink-2);}
.gd-sec p:last-child{margin-bottom:0;}
.gd-sec strong{color:var(--ink);font-weight:700;}
.gd-sec em{font-style:normal;font-family:'Nanum Myeongjo',serif;font-weight:700;color:var(--gold);}
.gd-sec ul{margin:0 0 15px;padding-left:20px;color:var(--ink-2);}
.gd-sec li{margin-bottom:7px;}

/* 짚고 넘어가는 상자 */
.gd-note{background:var(--gold-bg);border-left:3px solid var(--gold-lt);
  border-radius:0 10px 10px 0;padding:15px 17px;margin:18px 0;font-size:15px;color:#5E5027;}
.gd-note b{color:var(--gold);}
.gd-warn{background:var(--seal-bg);border-left:3px solid var(--seal);
  border-radius:0 10px 10px 0;padding:15px 17px;margin:18px 0;font-size:15px;color:#7A332B;}
.gd-warn b{color:var(--seal);}

/* ── 표 ── */
.gd-tw{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch;}
table.gd{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:560px;}
/* 간지가 '庚 / 辰' 처럼 두 줄로 깨지면 못 읽는다. 칸은 줄바꿈하지 않고
   좁은 화면에서는 표 자체를 가로로 밀어 본다(.gd-tw 가 overflow-x:auto). */
table.gd th,table.gd td{padding:10px 11px;text-align:center;white-space:nowrap;
  border-bottom:1px solid var(--line-soft);}
table.gd td.wrap{white-space:normal;min-width:150px;}
table.gd th{background:var(--paper-1);font-family:'Nanum Myeongjo',serif;font-weight:700;
  color:var(--ink);font-size:13.5px;white-space:nowrap;}
table.gd tr:last-child td{border-bottom:none;}
table.gd td.hz{font-family:'Nanum Myeongjo',serif;font-weight:700;font-size:19px;}
table.gd td.dim{color:var(--ink-dim);font-size:12.5px;}
table.gd tr.now td{background:var(--gold-bg);}
table.gd tr.now td:first-child{font-weight:700;color:var(--gold);}
.gd-cap{font-size:12.5px;color:var(--ink-dim);margin-top:-8px;margin-bottom:18px;line-height:1.75;}

/* ── 자주 묻는 것 ── */
.gd-faq{border:1px solid var(--line);border-radius:10px;background:var(--card);
  padding:4px 18px;margin-top:10px;}
.gd-faq details{border-bottom:1px solid var(--line-soft);}
.gd-faq details:last-child{border-bottom:none;}
.gd-faq summary{cursor:pointer;padding:15px 0;font-family:'Nanum Myeongjo',serif;
  font-weight:700;font-size:16px;list-style:none;}
.gd-faq summary::-webkit-details-marker{display:none;}
.gd-faq summary::after{content:'+';float:right;color:var(--gold);font-weight:400;}
.gd-faq details[open] summary::after{content:'\2212';}
.gd-faq details > p{padding:0 0 16px;font-size:15px;color:var(--ink-2);margin:0;}

/* ── 아래 버튼 ── */
.gd-cta{display:block;text-align:center;margin:30px 0 10px;padding:19px 22px;
  background:var(--ink);color:var(--paper-0);border-radius:10px;text-decoration:none;
  font-family:'Noto Sans KR',sans-serif;font-weight:700;font-size:17px;}
.gd-cta span{display:block;font-weight:400;font-size:13px;opacity:.72;margin-top:5px;}
.gd-more{margin:26px 0 10px;}
.gd-more b{display:block;font-family:'Nanum Myeongjo',serif;font-weight:700;
  font-size:15px;margin-bottom:10px;}
.gd-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.gd-more a{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:13px 14px;text-decoration:none;font-size:14.5px;color:var(--ink);}
.gd-more a small{display:block;color:var(--ink-dim);font-size:12.5px;margin-top:3px;}

footer.gd-foot{text-align:center;padding:34px 20px 46px;color:#A1988A;font-size:12.5px;line-height:2;}
footer.gd-foot a{color:#8C8372;}

@media(max-width:560px){
  body{font-size:15.5px;}
  .gd-more-grid{grid-template-columns:1fr;}
  .gd-sec h2{font-size:21px;}
}