/* ═══════════════════════════════════════════════════════════
   함사주 읽을거리 — 공용 서식  (2026-08-07 개정)
   ★사이트 본체(index.html)의 «결»을 그대로 쓴다 :
     · 색      : --bg #f1ead9 · --bg2 #fffdf7 · --head2 #7e6228 (본체와 같은 값)
     · 글꼴    : 본문 기기 고딕 · 제목 HsSerif(한글 명조) · 한자 HsGanji
                 둘 다 사이트 루트에 이미 있는 파일 — 바깥에서 새로 받는 것이 없다
     · 갈래표식: 랜딩 특징카드와 같은 «한 글자 한자 + 색» 규칙 (命 曆 動 說 報 客 約)
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'HsGanji';src:url('/hsganji.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+4E00-9FFF}
@font-face{font-family:'HsSerif';src:url('/hsserif.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+AC00-D7A3}

:root{
  --hs-bg:#f1ead9; --hs-paper:#fffdf7; --hs-bg3:#f4eede;
  --hs-gold:#9c7c3a; --hs-gold2:#7e6228;
  --hs-ink:#2a2318; --hs-ink2:#5b5142; --hs-sub:#8a7d68;
  --hs-line:#e3d8c2; --hs-line2:#d6c7a6;
  --hs-seal:#b3442e;
  --hs-sh:0 1px 2px rgba(90,70,30,.05);
  --hs-sh4:0 6px 22px rgba(90,70,30,.10);
  --c:var(--hs-gold);            /* 갈래색 — 카드마다 덮어쓴다 */
}
@media (prefers-color-scheme:dark){
  :root{
    --hs-bg:#15171c; --hs-paper:#1e2128; --hs-bg3:#262a32;
    --hs-gold:#c9a15a; --hs-gold2:#d7b878;
    --hs-ink:#e8eaed; --hs-ink2:#b8bcc4; --hs-sub:#8b9098;
    --hs-line:#333842; --hs-line2:#454b56;
    --hs-seal:#d4674f;
    --hs-sh:0 1px 2px rgba(0,0,0,.35); --hs-sh4:0 6px 22px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--hs-bg); color:var(--hs-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  line-height:1.8; -webkit-text-size-adjust:100%;
  /* 한지 결 — 아주 옅은 격자 */
  background-image:
    linear-gradient(rgba(156,124,58,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(156,124,58,.028) 1px,transparent 1px);
  background-size:22px 22px;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px 80px}
.mj{font-family:'HsSerif','Nanum Myeongjo','Noto Serif KR','Batang','바탕',serif}
.gj{font-family:'HsGanji','HsSerif','Noto Serif KR',serif}

/* ══ 갈래 — 한 글자 한자 + 색 (랜딩 특징카드와 같은 규칙) ══ */
[data-cat="신살"]{--c:#b3442e} [data-cat="운세"]{--c:#9c7c3a}
[data-cat="기초"]{--c:#2c7a52} [data-cat="궁합"]{--c:#7e57c2}
[data-cat="실용"]{--c:#1f6f8b} [data-cat="방위"]{--c:#3aa856}
[data-cat="안내"]{--c:#5b5142} [data-cat="택일"]{--c:#8a6a1a}
@media (prefers-color-scheme:dark){
  [data-cat="신살"]{--c:#e07a63} [data-cat="운세"]{--c:#d4ac68}
  [data-cat="기초"]{--c:#5cbf8a} [data-cat="궁합"]{--c:#b39ae0}
  [data-cat="실용"]{--c:#63b3d4} [data-cat="방위"]{--c:#6ed08c}
  [data-cat="안내"]{--c:#b0a38d} [data-cat="택일"]{--c:#d6b45e}
}

/* ══ 머리 ══ */
.top{position:sticky;top:0;z-index:50;background:var(--hs-bg);
  margin-left:-20px;margin-right:-20px;padding:18px 20px 14px;
  border-bottom:1px solid var(--hs-line)}
.top a.home{font-family:'HsSerif','Nanum Myeongjo',serif;
  font-size:20px;font-weight:800;color:var(--hs-ink);text-decoration:none;letter-spacing:2px}
.top .nav{margin-top:10px;display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px}
.top .nav a{color:var(--hs-gold2);text-decoration:none;font-weight:600}
.top .nav a:hover{text-decoration:underline}

/* 글 본문용 한 줄 머리띠 */
.posttop{display:flex;align-items:center;gap:10px;padding:10px 20px;margin-bottom:26px}
.posttop a{text-decoration:none;font-size:13.5px;white-space:nowrap}
.posttop .back{font-weight:800;color:var(--hs-gold2);background:var(--hs-paper);
  border:1px solid var(--hs-line2);border-radius:999px;padding:6px 14px;
  box-shadow:var(--hs-sh);transition:border-color .15s,transform .12s}
.posttop .back:hover{border-color:var(--hs-gold);transform:translateX(-2px)}
.posttop .home{font-family:'HsSerif','Nanum Myeongjo',serif;
  font-size:16px;font-weight:800;color:var(--hs-ink);letter-spacing:2px;margin-left:3px}
.posttop .srch{margin-left:auto;color:var(--hs-gold2);background:var(--hs-paper);
  border:1px solid var(--hs-line2);border-radius:999px;padding:6px 13px;box-shadow:var(--hs-sh)}
.posttop .srch:hover{border-color:var(--hs-gold)}

/* ══ 목록 머리글 ══ */
.blog-hero{position:relative;padding:34px 0 8px;text-align:center}
.blog-hero .seal{font-family:'HsGanji',serif;font-size:13px;font-weight:800;
  color:var(--hs-seal);border:1.5px solid var(--hs-seal);border-radius:5px;
  padding:4px 7px;letter-spacing:3px;display:inline-block;line-height:1.35;
  writing-mode:vertical-rl;position:absolute;right:2px;top:32px;opacity:.85}
h1.blog-h{font-family:'HsSerif','Nanum Myeongjo','Noto Serif KR',serif;
  font-size:34px;font-weight:800;letter-spacing:6px;line-height:1.3;margin:0 0 4px}
.blog-hero .rule{width:56px;height:2px;background:var(--hs-gold);margin:14px auto 12px;opacity:.7}
.blog-lead{color:var(--hs-ink2);font-size:15px;line-height:1.85;margin:0 auto 26px;max-width:620px}
@media (max-width:560px){
  h1.blog-h{font-size:26px;letter-spacing:4px}
  .blog-hero .seal{display:none}
}

/* ══ 검색 ══ */
.finder{margin:0 auto 22px;max-width:720px}
.sbox{position:relative}
.sbox input{
  width:100%;font:inherit;font-size:16px;color:var(--hs-ink);
  background:var(--hs-paper);border:1px solid var(--hs-line2);border-radius:14px;
  padding:14px 44px;outline:none;-webkit-appearance:none;
  box-shadow:inset 0 1px 3px rgba(90,70,30,.05);transition:border-color .15s,box-shadow .15s;
}
.sbox input:focus{border-color:var(--hs-gold);box-shadow:0 0 0 3px rgba(156,124,58,.13)}
.sbox input::placeholder{color:var(--hs-sub)}
.sbox .si{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  font-size:15px;opacity:.5;pointer-events:none}
.sbox .sx{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  border:0;background:none;font-size:20px;color:var(--hs-sub);cursor:pointer;
  padding:4px 10px;line-height:1;display:none}
.sbox .sx.on{display:block}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:14px 0 4px}
.chips button{
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--hs-ink2);
  background:var(--hs-paper);border:1px solid var(--hs-line2);border-radius:999px;
  padding:6px 14px;display:inline-flex;align-items:center;gap:6px;
  transition:border-color .15s,color .15s,background .15s;
}
.chips button .g{font-family:'HsGanji',serif;font-size:13.5px;color:var(--c);font-weight:800}
.chips button:hover{border-color:var(--c);color:var(--hs-ink)}
.chips button.on{background:var(--c);border-color:var(--c);color:#fff}
.chips button.on .g{color:#fff}
.scount{font-size:13px;color:var(--hs-sub);text-align:center;margin:14px 0 20px}
.snone{display:none;background:var(--hs-paper);border:1px dashed var(--hs-line2);
  border-radius:16px;padding:30px 22px;text-align:center;color:var(--hs-ink2);font-size:15px}
.snone.on{display:block}
.snone b{display:block;color:var(--hs-ink);font-size:16.5px;margin-bottom:6px}
mark{background:rgba(212,175,80,.34);color:inherit;border-radius:3px;padding:0 2px}

/* ══ 목록 카드 ══ */
.plist{display:grid;gap:14px}
@media (min-width:860px){ .plist{grid-template-columns:1fr 1fr} }
.pcard{
  position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
  background:var(--hs-paper);border:1px solid var(--hs-line);border-radius:16px;
  padding:20px 22px 18px 26px;box-shadow:var(--hs-sh);
  transition:transform .14s,box-shadow .14s,border-color .14s;
}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--c);opacity:.85}
.pcard .gl{                                  /* 갈래 한자 — 옅은 낙인 */
  font-family:'HsGanji',serif;position:absolute;right:12px;bottom:-14px;
  font-size:82px;font-weight:800;color:var(--c);opacity:.07;line-height:1;
  pointer-events:none;user-select:none;transition:opacity .14s,transform .14s}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--hs-sh4);border-color:var(--hs-line2)}
.pcard:hover .gl{opacity:.13;transform:translateY(-3px)}
.pcard .cat{display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:800;color:var(--c);
  border:1px solid var(--c);border-radius:999px;padding:2px 10px;margin-bottom:9px;opacity:.92}
.pcard .cat .g{font-family:'HsGanji',serif;font-size:12.5px}
.pcard h2{font-family:'HsSerif','Nanum Myeongjo','Noto Serif KR',serif;
  font-size:19px;font-weight:800;line-height:1.5;margin-bottom:7px;letter-spacing:-.2px;
  position:relative;z-index:1}
.pcard p{font-size:14.5px;color:var(--hs-ink2);line-height:1.7;position:relative;z-index:1}
.pcard .date{display:block;margin-top:11px;font-size:12.5px;color:var(--hs-sub)}

/* 맨 위 «최신» 글은 한 줄 통째로 */
@media (min-width:860px){
  .pcard.lead{grid-column:1 / -1;padding:26px 30px 24px 32px}
  .pcard.lead h2{font-size:24px;line-height:1.45}
  .pcard.lead p{font-size:15.5px}
  .pcard.lead .gl{font-size:120px;right:26px;bottom:-24px}
}
.pcard.lead .cat::after{content:"최신";font-size:10.5px;font-weight:800;color:var(--hs-paper);
  background:var(--c);border-radius:999px;padding:1px 7px;margin-left:3px}

/* ══ 글 본문 ══ */
article{max-width:760px;margin:0 auto;background:var(--hs-paper);
  border:1px solid var(--hs-line);border-radius:20px;padding:34px 30px 36px;
  box-shadow:var(--hs-sh)}
@media (max-width:560px){ article{padding:26px 20px 30px;border-radius:16px} }
.ahead{text-align:center;padding-bottom:22px;margin-bottom:26px;
  border-bottom:1px solid var(--hs-line)}
.ahead .amark{font-family:'HsGanji',serif;display:inline-flex;flex-direction:column;
  align-items:center;line-height:1;color:var(--c);margin-bottom:14px}
.ahead .amark .g{font-size:30px;font-weight:800}
.ahead .amark .n{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  font-size:11px;font-weight:800;letter-spacing:2px;margin-top:6px;opacity:.9}
article h1{font-family:'HsSerif','Nanum Myeongjo','Noto Serif KR',serif;
  font-size:29px;font-weight:800;line-height:1.45;letter-spacing:-.3px;margin-bottom:12px}
@media (max-width:560px){ article h1{font-size:23px} }
article .meta{font-size:12.5px;color:var(--hs-sub);letter-spacing:.3px}
article h2{font-family:'HsSerif','Nanum Myeongjo','Noto Serif KR',serif;
  font-size:21px;font-weight:800;margin:38px 0 13px;padding-left:13px;
  border-left:3px solid var(--c);letter-spacing:-.2px;line-height:1.45}
article h3{font-size:16.5px;font-weight:800;margin:26px 0 8px;color:var(--hs-gold2)}
article p{font-size:16.5px;color:var(--hs-ink2);margin:14px 0}
article ul,article ol{margin:14px 0 14px 22px}
article li{font-size:16.5px;color:var(--hs-ink2);margin:8px 0}
article strong{font-weight:800;color:var(--hs-ink)}
article a{color:var(--hs-gold2);text-decoration:none;
  border-bottom:1px solid rgba(156,124,58,.4);padding-bottom:1px}
article a:hover{border-bottom-color:var(--hs-gold)}

.box{background:var(--hs-bg3);border:1px solid var(--hs-line);border-left:3px solid var(--c);
  border-radius:4px 14px 14px 4px;padding:17px 19px;margin:24px 0}
.box .bt{font-weight:800;font-size:15px;margin-bottom:7px;color:var(--hs-gold2)}
.box p{font-size:15.5px;margin:7px 0}
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
.tbl th,.tbl td{border:1px solid var(--hs-line);padding:10px 11px;text-align:center}
.tbl th{background:var(--hs-bg3);font-weight:800;color:var(--hs-gold2)}
.tbl td.l{text-align:left}

/* 글 끝 낙관 */
.seal-end{text-align:center;margin:34px 0 4px}
.seal-end span{font-family:'HsGanji',serif;display:inline-block;
  font-size:15px;font-weight:800;color:var(--hs-seal);letter-spacing:4px;
  border:2px solid var(--hs-seal);border-radius:6px;padding:9px 7px;
  writing-mode:vertical-rl;line-height:1.3;opacity:.88}

/* ══ 광고 자리 (승인 후 이 안에 코드만 넣는다) ══ */
.adslot{margin:28px 0;min-height:1px}

/* ══ 연결 카드 ══ */
.cta{margin-top:36px;padding-top:28px;border-top:1px solid var(--hs-line)}
.cta .ct{font-family:'HsSerif','Nanum Myeongjo',serif;font-weight:800;font-size:17px;margin-bottom:14px}
.cta a{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;
  background:var(--hs-bg3);border:1px solid var(--hs-line);border-radius:14px;
  padding:15px 17px;margin-bottom:10px;transition:border-color .15s,transform .12s}
.cta a:hover{border-color:var(--hs-gold);transform:translateY(-1px)}
.cta a .ic{font-size:24px;flex:0 0 auto}
.cta a b{display:block;font-size:15.5px;font-weight:800}
.cta a small{display:block;font-size:13px;color:var(--hs-ink2);margin-top:2px;line-height:1.6}
.cta a .go{margin-left:auto;color:var(--hs-gold);font-weight:800}

/* ══ 상담으로 가는 카드 (2026-08-11) ══
   맺음 카드(무료 앱) «바로 밑»에 한 장 더 붙는다. 금색 테두리로 격을 달리한다.
   ★앱 카드를 대체하지 않는다 — 앱은 앱대로, 상담은 상담대로 길을 낸다. */
a.cta-consult{display:block;max-width:760px;margin:12px auto 0;text-decoration:none;color:inherit;
  background:var(--hs-paper);border:1.5px solid var(--hs-gold);border-radius:14px;
  padding:16px 18px;transition:transform .12s,box-shadow .15s}
a.cta-consult:hover{transform:translateY(-1px);box-shadow:0 3px 14px rgba(156,124,58,.16)}
a.cta-consult .cta-q{display:block;font-family:'HsSerif','Nanum Myeongjo',serif;font-weight:800;
  font-size:16px;color:var(--hs-gold2);margin-bottom:11px}
a.cta-consult .cta-b{display:flex;align-items:center;gap:13px}
a.cta-consult .cta-g{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--hs-gold);
  color:var(--hs-paper);font-family:'HsGanji',serif;font-size:22px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
a.cta-consult .cta-w{flex:1;min-width:0;font-size:13px;color:var(--hs-ink2);line-height:1.6}
a.cta-consult .cta-w b{display:block;font-size:15.5px;font-weight:800;color:var(--hs-ink);margin-bottom:2px}
a.cta-consult .cta-go{margin-left:auto;color:var(--hs-gold);font-weight:800;font-size:18px}

/* ══ 이전 글 / 다음 글 ══ */
.pnav{max-width:760px;margin:20px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pnav a{display:block;text-decoration:none;color:inherit;background:var(--hs-paper);
  border:1px solid var(--hs-line);border-radius:14px;padding:14px 16px;min-width:0;
  box-shadow:var(--hs-sh);transition:border-color .15s,transform .12s}
.pnav a:hover{border-color:var(--hs-gold)}
.pnav a.pv:hover{transform:translateX(-3px)}
.pnav a.nx:hover{transform:translateX(3px)}
.pnav a span{display:block;font-size:11.5px;font-weight:800;color:var(--hs-gold2);
  letter-spacing:.5px;margin-bottom:5px}
.pnav a b{display:block;font-family:'HsSerif','Nanum Myeongjo',serif;
  font-size:14.5px;font-weight:700;line-height:1.55;letter-spacing:-.2px}
.pnav a.nx{text-align:right}
.pnav .gap{visibility:hidden}
@media (max-width:520px){ .pnav{grid-template-columns:1fr} .pnav .gap{display:none} }

/* ══ 관련 글 ══ */
.rel{max-width:760px;margin:26px auto 0;padding-top:24px;border-top:1px solid var(--hs-line)}
.rel .rt{font-family:'HsSerif','Nanum Myeongjo',serif;font-weight:800;font-size:17px;margin-bottom:13px}
.rel a{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  background:var(--hs-paper);border:1px solid var(--hs-line);border-radius:13px;
  padding:13px 15px;margin-bottom:8px;transition:border-color .15s,transform .12s}
.rel a:hover{border-color:var(--hs-gold);transform:translateX(2px)}
.rel a .c{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:800;color:var(--c);
  border:1px solid var(--c);border-radius:999px;padding:2px 9px;opacity:.92}
.rel a .c .g{font-family:'HsGanji',serif;font-size:12.5px}
.rel a .t{font-size:14.5px;font-weight:700;line-height:1.55;letter-spacing:-.2px}

footer{max-width:760px;margin:38px auto 0;padding:20px 0 10px;border-top:1px solid var(--hs-line);
  font-size:12.5px;color:var(--hs-sub);text-align:center;line-height:1.85}
footer a{color:var(--hs-gold2);text-decoration:none;margin:0 7px;font-weight:600}
footer a:hover{text-decoration:underline}

/* ══ 맨 위로 ══ */
#toTop{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--hs-line2);
  background:var(--hs-paper);color:var(--hs-gold2);font-size:19px;font-weight:800;
  cursor:pointer;box-shadow:var(--hs-sh4);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
#toTop.on{opacity:1;pointer-events:auto}
#toTop:hover{border-color:var(--hs-gold);transform:translateY(-2px)}

/* 본문에서 찾아낸 글 표시 */
.pcard[data-deep="1"]{border-color:var(--c)}
.pcard[data-deep="1"] .cat::after{content:" · 본문";font-weight:700}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ═══════════════════════════════════════════════════════
   2026-08-07 — 좁은 화면 다듬기 (첫 글이 첫 화면에 걸리도록)
   ★갈래 단추가 3줄(129px)을 먹어 글이 화면 밖으로 밀렸다.
     한 줄 가로 스크롤로 바꾸면 ~90px 이 돌아온다.
   ═══════════════════════════════════════════════════════ */
@media (max-width:640px){
  .blog-hero{padding:22px 0 4px}
  h1.blog-h{font-size:25px;letter-spacing:3px}
  .blog-hero .rule{margin:11px auto 10px}
  .blog-lead{text-align:left;font-size:14.5px;line-height:1.75;margin-bottom:18px}

  .finder{margin-bottom:16px}
  .sbox input{font-size:16px;padding:12px 42px}   /* 16px 아래로 내리면 아이폰이 확대한다 */

  /* 갈래 단추 — 한 줄로 눕히고 옆으로 민다 */
  .chips{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    margin:12px -20px 0;padding:0 20px 3px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:0 0 auto;scroll-snap-align:start}
  .scount{margin:11px 0 14px;text-align:left}

  .pcard{padding:17px 18px 16px 22px}
  .pcard .gl{font-size:66px;right:8px;bottom:-11px}
  .pcard h2{font-size:18px}
}

/* ═══════════════════════════════════════════════════════
   그림·도표 부품 (2026-08-07) — DESIGN.md §6
   ★그림 파일이 0개다. 전부 SVG/CSS 라 확대해도 안 깨지고 어두운 바탕도 따라온다.
   ═══════════════════════════════════════════════════════ */
.fig{margin:26px 0;background:var(--hs-bg3);border:1px solid var(--hs-line);
  border-radius:14px;padding:18px 16px 14px;text-align:center}
.fig svg{width:100%;height:auto;max-width:400px;display:block;margin:0 auto}
.fig .cap{margin-top:12px;font-size:13.5px;color:var(--hs-sub);line-height:1.7;text-align:center}
.fig .cap b{color:var(--hs-ink2);font-weight:800}

/* SVG 안에서 쓰는 색 — 어두운 바탕에서도 따라온다 */
.fig .ln{stroke:var(--hs-line2);fill:none}
.fig .ax{stroke:var(--hs-line2);fill:none;stroke-dasharray:3 4}

/* 방송에서 «가르치는» 그림이라 글자를 키운다 (DESIGN.md §6) */
.fig .tx{fill:var(--hs-ink);font-size:19px;font-weight:800;text-anchor:middle;
  font-family:'HsGanji','HsSerif',serif}
.fig .tx-k{fill:var(--hs-ink2);font-size:11px;font-weight:800;text-anchor:middle;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}
.fig .tx-s{fill:var(--hs-sub);font-size:11.5px;font-weight:800;text-anchor:middle;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}
.fig .tx-on,.fig .tx-k.tx-on,.fig .tx-s.tx-on{fill:#fff}
.fig .nd{fill:var(--hs-paper);stroke:var(--hs-line2);stroke-width:1.5}
.fig .nd-on{fill:var(--c);stroke:var(--c)}
.fig .lk{fill:none;stroke:var(--c);stroke-width:2.4;opacity:.8}
.fig .lk2{fill:none;stroke:var(--hs-sub);stroke-width:1.6;opacity:.55;stroke-dasharray:6 4}

/* 단계 카드 — 초보자에게 «순서»를 보여줄 때 */
.fig-steps{display:grid;gap:9px;text-align:left;max-width:460px;margin:0 auto}
.fig-steps .st{display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:start;
  background:var(--hs-paper);border:1px solid var(--hs-line2);border-radius:12px;padding:12px 14px}
.fig-steps .st .n{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;
  font-size:13.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fig-steps .st b{display:block;font-size:15px;font-weight:800;color:var(--hs-ink);line-height:1.5}
.fig-steps .st span span,.fig-steps .st .w>span{display:block;font-size:13.5px;color:var(--hs-ink2);
  margin-top:3px;line-height:1.65;word-break:keep-all}

/* 둘 비교 */
.fig-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;
  text-align:left;max-width:520px;margin:0 auto}
.fig-vs em{align-self:center;font-style:normal;font-size:12px;font-weight:800;color:var(--hs-sub)}
.fig-vs .c{background:var(--hs-paper);border:1.5px solid var(--hs-line2);border-radius:13px;padding:13px 14px}
.fig-vs .c.a{border-color:var(--c)}
.fig-vs .c b{display:block;font-size:14.5px;font-weight:800;color:var(--hs-ink);margin-bottom:6px}
.fig-vs .c span{display:block;font-size:13px;color:var(--hs-ink2);line-height:1.7;
  padding-left:11px;position:relative;word-break:keep-all}
.fig-vs .c span::before{content:"·";position:absolute;left:2px;color:var(--hs-sub)}
@media (max-width:480px){ .fig-vs{grid-template-columns:1fr} .fig-vs em{justify-self:center} }

/* 막대 그래프 — 순수 CSS */
.fig-bar{display:grid;gap:8px;text-align:left;max-width:420px;margin:0 auto}
.fig-bar .r{display:grid;grid-template-columns:52px 1fr 38px;align-items:center;gap:9px}
.fig-bar .r .l{font-size:13px;font-weight:800;color:var(--hs-ink2)}
.fig-bar .r .t{height:15px;border-radius:999px;background:var(--hs-line);overflow:hidden}
.fig-bar .r .t i{display:block;height:100%;border-radius:999px;background:var(--c)}
.fig-bar .r .v{font-size:12.5px;font-weight:700;color:var(--hs-sub);text-align:right}

/* 주기 띠 — 타임라인 */
.fig-band{display:flex;gap:5px;max-width:520px;margin:0 auto;text-align:center}
.fig-band .s{flex:1 1 0;min-width:0;background:var(--hs-paper);
  border:1px solid var(--hs-line2);border-radius:10px;padding:9px 4px}
.fig-band .s.on{background:var(--c);border-color:var(--c)}
.fig-band .s .a{display:block;font-size:13px;font-weight:800;color:var(--hs-ink2);
  font-family:'HsGanji','HsSerif',serif;line-height:1.35}
.fig-band .s .b{display:block;font-size:10.5px;font-weight:700;color:var(--hs-sub);margin-top:3px;
  line-height:1.4;word-break:keep-all}
.fig-band .s.on .a,.fig-band .s.on .b{color:#fff}
/* ★좁은 폰에서 «10~19» 같은 글자가 칸을 넘쳤다(2026-08-15 실측 · 360px에서 46>35).
   글자를 줄이고 좌우 여백을 좁혀 칸 안에 담는다. */
@media (max-width:480px){ .fig-band{gap:4px}
  .fig-band .s{padding-left:2px;padding-right:2px}
  .fig-band .s .a{font-size:11.5px;letter-spacing:-.03em}
  .fig-band .s .b{font-size:9.5px;letter-spacing:-.03em} }
@media (max-width:380px){ .fig-band .s .a{font-size:10.5px} }

/* 조 이름 범례 — 색이 무엇을 뜻하는지 반드시 적는다 */
.fig-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 12px;margin-top:12px}
.fig-leg span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  font-weight:800;color:var(--hs-ink2)}
.fig-leg i{width:13px;height:13px;border-radius:4px;background:var(--c);flex:0 0 auto}

/* ═══════════════════════════════════════════════════════
   발표 모드 (2026-08-07) — 방송·쇼츠용
   ★한 화면에 그림 하나. 위아래로 넘기면 한 장씩 딱 멈춘다(스크롤 스냅).
     그대로 화면 공유하면 교재가 되고, 세로로 녹화하면 쇼츠 한 컷이 된다.
   ═══════════════════════════════════════════════════════ */
.presentBtn{margin-left:8px;color:var(--hs-gold2);background:var(--hs-paper);
  border:1px solid var(--hs-line2);border-radius:999px;padding:6px 13px;
  font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;
  box-shadow:var(--hs-sh)}
.presentBtn:hover{border-color:var(--hs-gold)}

#hsDeck{position:fixed;inset:0;z-index:999;background:var(--hs-bg);display:none}
#hsDeck.on{display:block}
body.deckOpen{overflow:hidden}
#hsDeck .dk{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
#hsDeck .dk::-webkit-scrollbar{display:none}
#hsDeck .dkp{height:100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:56px 20px 64px;text-align:center}
#hsDeck .dkin{width:100%;max-width:430px}         /* 9:16 로 잘라도 안 잘리는 폭 */
#hsDeck h3{font-family:'HsSerif','Nanum Myeongjo',serif;
  font-size:26px;font-weight:800;line-height:1.4;letter-spacing:-.3px;
  margin-bottom:20px;color:var(--hs-ink);word-break:keep-all}
#hsDeck .fig{margin:0;background:transparent;border:0;padding:0}
#hsDeck .fig svg{max-width:100%}
#hsDeck .fig .cap{font-size:15px;line-height:1.8;margin-top:16px;color:var(--hs-ink2)}
#hsDeck .fig .cap b{color:var(--hs-ink)}
#hsDeck .fig-leg span{font-size:14px}
#hsDeck .fig-band .s .a{font-size:16px}
#hsDeck .fig-band .s .b{font-size:12px}
#hsDeck .fig-steps .st b{font-size:16.5px}
#hsDeck .fig-steps .st .w>span{font-size:14.5px}
#hsDeck .fig-vs .c b{font-size:16px}
#hsDeck .fig-vs .c span{font-size:14.5px}
#hsDeck .dkbrand{position:absolute;left:0;right:0;bottom:18px;text-align:center;
  font-family:'HsSerif','Nanum Myeongjo',serif;font-size:13px;font-weight:800;
  letter-spacing:3px;color:var(--hs-sub);opacity:.75}
#hsDeck .dkx{position:absolute;top:14px;right:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--hs-line2);
  background:var(--hs-paper);color:var(--hs-ink2);font-size:18px;cursor:pointer}
#hsDeck .dkn{position:absolute;top:20px;left:18px;z-index:2;
  font-size:13px;font-weight:800;color:var(--hs-sub);letter-spacing:1px}
#hsDeck .dkhint{position:absolute;bottom:44px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--hs-sub);opacity:.8;transition:opacity .4s}
#hsDeck .dkhint.gone{opacity:0}
@media (min-width:900px){ #hsDeck h3{font-size:31px} #hsDeck .dkin{max-width:520px} }

/* ═══════════════════════════════════════════════════════
   배움터 (2026-08-07) — 커리큘럼 목차 · 방송 강의 목차 겸용
   ★PC 에서는 2단, 폰에서는 1단. 어느 쪽에서도 «다 있다»가 보여야 한다.
   ═══════════════════════════════════════════════════════ */
.lprog{max-width:640px;margin:0 auto 30px}
.lpb{height:9px;border-radius:999px;background:var(--hs-line);overflow:hidden}
.lpb i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--hs-gold),var(--hs-gold2))}
.lpt{margin-top:9px;font-size:13px;color:var(--hs-sub);text-align:center}
.lpt b{color:var(--hs-gold2);font-weight:800}

.lcourse{display:grid;gap:16px}
@media (min-width:900px){ .lcourse{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} }
.lstep{min-width:0;background:var(--hs-paper);border:1px solid var(--hs-line);border-radius:18px;
  padding:20px 18px 18px;box-shadow:var(--hs-sh)}
.lhead{min-width:0;display:flex;align-items:flex-start;gap:13px;padding-bottom:14px;margin-bottom:13px;
  border-bottom:1px solid var(--hs-line)}
.lhead .lg{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  background:var(--hs-bg3);border:1px solid var(--hs-line2);
  display:flex;align-items:center;justify-content:center;
  font-family:'HsGanji',serif;font-size:23px;font-weight:800;color:var(--hs-gold2)}
.lhead>div{min-width:0}
.lhead h2{font-family:'HsSerif','Nanum Myeongjo',serif;font-size:18px;font-weight:800;
  line-height:1.4;letter-spacing:-.2px}
.lhead p{font-size:13px;color:var(--hs-sub);margin-top:3px;line-height:1.6;word-break:keep-all}
.lhead .lnum{flex:0 0 auto;margin-left:auto;font-size:12px;font-weight:800;color:var(--hs-gold2);
  background:var(--hs-bg3);border:1px solid var(--hs-line2);border-radius:999px;padding:3px 9px;
  white-space:nowrap}

.lc{min-width:0;display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  border-radius:11px;padding:10px 11px;margin-bottom:5px;
  transition:background .13s,transform .13s}
a.lc:hover{background:var(--hs-bg3);transform:translateX(2px)}
.lc .g{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--c);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'HsGanji',serif;font-size:14px;font-weight:800}
.lc .w{min-width:0;flex:1 1 auto}
.lc .w b{display:block;font-size:14.5px;font-weight:700;line-height:1.5;letter-spacing:-.2px;
  color:var(--hs-ink);word-break:keep-all}
.lc .w>span{display:block;font-size:12px;color:var(--hs-sub);line-height:1.55;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc .go{margin-left:auto;color:var(--hs-gold);font-weight:800;flex:0 0 auto}
.lc.soon{opacity:.5}
.lc.soon .g{background:var(--hs-line2);color:var(--hs-sub);font-size:13px}
.lc.soon .w b{font-weight:600}

.ltool{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  margin-top:11px;background:var(--hs-bg3);border:1px dashed var(--hs-line2);
  border-radius:12px;padding:12px 14px;transition:border-color .13s}
.ltool:hover{border-color:var(--hs-gold);border-style:solid}
.ltool b{display:block;font-size:14px;font-weight:800;color:var(--hs-ink)}
.ltool span{display:block;font-size:12.5px;color:var(--hs-sub);line-height:1.6;margin-top:2px}
.ltool .go{margin-left:auto;color:var(--hs-gold);font-weight:800;font-size:16px}

/* 목록 맨 위 «배움터» 안내띠 */
.lbanner{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:linear-gradient(135deg,var(--hs-paper),var(--hs-bg3));
  border:1.5px solid var(--hs-line2);border-radius:16px;padding:16px 18px;margin:0 auto 20px;
  max-width:720px;box-shadow:var(--hs-sh);transition:border-color .15s,transform .13s}
.lbanner:hover{border-color:var(--hs-gold);transform:translateY(-1px)}
.lbanner .lb-g{flex:0 0 auto;width:46px;height:46px;border-radius:13px;
  background:var(--hs-gold);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'HsGanji',serif;font-size:25px;font-weight:800}
.lbanner .lb-w{min-width:0}
.lbanner .lb-w b{display:block;font-family:'HsSerif','Nanum Myeongjo',serif;
  font-size:16.5px;font-weight:800;line-height:1.45;color:var(--hs-ink);word-break:keep-all}
.lbanner .lb-w>span{display:block;font-size:12.5px;color:var(--hs-sub);line-height:1.6;margin-top:3px;
  word-break:keep-all}
.lbanner .lb-go{margin-left:auto;color:var(--hs-gold);font-weight:800;font-size:20px;flex:0 0 auto}

/* ═══ 광고 자리 ═══
   ★발표 모드(방송 화면)에서는 절대 보이지 않게 한다. */
.adslot{margin:30px 0;min-height:1px;text-align:center}
.adslot:empty{margin:0}
body.deckOpen .adslot,#hsDeck .adslot{display:none!important}
@media print{ .adslot{display:none!important} }

/* ═══ 앱(함사주 라이트)과 같은 간지 칸 ═══
   ★index.html 의 .gz 를 그대로 옮겼다. 앱에서 원국을 본 사람이
     블로그에서도 같은 모양을 보아야 «내 것»으로 익는다. 색을 바꾸지 말 것. */
.fig .gzh{font-family:'HsGanji','HsSerif','Noto Serif KR',serif;
  font-size:30px;font-weight:800;text-anchor:middle;dominant-baseline:middle}
.fig .gzk{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  font-size:10.5px;font-weight:800;text-anchor:middle;opacity:.9}
.fig-leg span.gz-leg i{border:2px solid #222;border-radius:4px;width:15px;height:15px}

/* 그림 아래 «앱으로 이어 주는» 단추 — 자료를 볼 때마다 내 도구로 가게 만든다 */
.fig-app{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  margin-top:14px;background:var(--hs-paper);border:1.5px solid var(--hs-line2);
  border-radius:12px;padding:11px 14px;text-align:left;
  transition:border-color .15s,transform .12s}
.fig-app:hover{border-color:var(--hs-gold);transform:translateY(-1px)}
.fig-app .w{min-width:0;flex:1 1 auto}
.fig-app b{display:block;font-size:14.5px;font-weight:800;color:var(--hs-ink);line-height:1.45;
  word-break:keep-all}
.fig-app .w>span{display:block;font-size:12.5px;color:var(--hs-sub);margin-top:2px;
  line-height:1.5;word-break:keep-all}
.fig-app .go{margin-left:auto;color:var(--hs-gold);font-weight:800;font-size:17px}
#hsDeck .fig-app{display:none}      /* 방송 화면에는 단추를 띄우지 않는다 */

/* ═══ 하루 한 장 강의 (2026-08-07) ═══
   ★글 한 편 = 하루치 강의 한 장. 방송에서 «오늘의 한 장»만 띄우면 된다. */
.ahead .lecno{display:inline-block;font-family:'HsSerif','Nanum Myeongjo',serif;
  font-size:12.5px;font-weight:800;letter-spacing:3px;color:var(--hs-seal);
  border:1.5px solid var(--hs-seal);border-radius:999px;padding:3px 13px;margin-bottom:14px;
  opacity:.9}
.fig.onecut{position:relative;border-color:var(--hs-gold);padding-top:30px}
.fig.onecut::before{content:attr(data-onecut);position:absolute;top:-11px;left:50%;
  transform:translateX(-50%);white-space:nowrap;
  font-family:'HsSerif','Nanum Myeongjo',serif;font-size:12.5px;font-weight:800;letter-spacing:2px;
  color:#fff;background:var(--hs-gold);border-radius:999px;padding:4px 15px}
#hsDeck .fig.onecut{border:0;padding-top:0}
#hsDeck .fig.onecut::before{display:none}
/* 배움터 강의 번호 알약 */
.lc .g{font-family:'HsSerif','Nanum Myeongjo',serif;font-size:11.5px;letter-spacing:0;
  min-width:34px;width:auto;padding:0 5px}

/* ═══ 제휴 대가성 고지 (공정위 추천·보증 심사지침) ═══
   ★본문 «상단»에 «명확하게». 흐리게 하거나 접어 두면 위반이다.
     광고 자리와 헷갈리지 않도록 테두리와 바탕을 준다. */
.aff-notice{margin:0 0 22px;background:#fdf3e0;border:1.5px solid var(--hs-gold);
  border-radius:12px;padding:12px 15px;font-size:13.5px;line-height:1.7;
  color:var(--hs-ink2);text-align:left}
.aff-notice b{color:var(--hs-ink);font-weight:800}
@media (prefers-color-scheme:dark){ .aff-notice{background:#2a2418} }
#hsDeck .aff-notice{display:none}   /* 방송 화면에는 띄우지 않는다 */

/* ═══ 관리자 «고치기» (2026-08-08) ═══
   ★보안 잠금이 아니다 — 정적 사이트라 저장할 서버가 없다.
     함민우 님 화면에만 보이게 하는 것이고, 결과는 클립보드/파일로 나온다. */
#hsEditBtn{position:fixed;right:16px;bottom:72px;z-index:60;
  border:1px solid var(--hs-line2);background:var(--hs-seal);color:#fff;
  border-radius:999px;padding:9px 15px;font:inherit;font-size:13px;font-weight:800;
  cursor:pointer;box-shadow:var(--hs-sh4)}
#hsEditBtn:hover{opacity:.9}
#hsEditOv{position:fixed;inset:0;z-index:998;background:var(--hs-bg);
  display:flex;flex-direction:column;padding:12px}
#hsEditOv .ebar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:4px 2px 10px}
#hsEditOv .ebar b{font-family:'HsSerif','Nanum Myeongjo',serif;font-size:16px;font-weight:800}
#hsEditOv .ef{font-size:12px;color:var(--hs-sub);margin-right:auto}
#hsEditOv .eb{border:1px solid var(--hs-line2);background:var(--hs-paper);color:var(--hs-ink2);
  border-radius:9px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
#hsEditOv .ecopy{background:var(--hs-gold);border-color:var(--hs-gold);color:#fff}
#hsEditOv .eb:hover{opacity:.88}
#hsEditOv textarea{flex:1 1 auto;width:100%;resize:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.75;
  color:var(--hs-ink);background:var(--hs-paper);
  border:1px solid var(--hs-line2);border-radius:12px;padding:14px;outline:none}
#hsEditOv textarea:focus{border-color:var(--hs-gold)}
#hsEditOv .ehint{font-size:12.5px;color:var(--hs-sub);padding:9px 2px 2px;text-align:center}
#hsEditOv .esb{background:var(--hs-seal);border-color:var(--hs-seal);color:#fff}

/* ═══ 공유 단추 (2026-08-09) ═══
   ★다 읽은 자리(맺음 카드 앞)에 둔다. 위에 두면 안 읽고 나간다. */
.shr{margin:34px 0 4px;padding-top:26px;border-top:1px solid var(--hs-line);text-align:center}
.shr-t{font-family:'HsSerif','Nanum Myeongjo',serif;font-size:15.5px;font-weight:800;
  color:var(--hs-ink2);margin-bottom:13px}
.shr-b{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.shr .sh{display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font:inherit;font-size:13px;font-weight:800;cursor:pointer;
  color:var(--hs-ink2);background:var(--hs-paper);
  border:1px solid var(--hs-line2);border-radius:999px;padding:8px 16px;
  transition:border-color .15s,transform .12s}
.shr .sh:hover{border-color:var(--hs-gold);transform:translateY(-1px)}
.shr .sh.x:hover{border-color:#000}
.shr .sh.th:hover{border-color:#000}
.shr .sh.fb:hover{border-color:#1877f2}
#hsDeck .shr{display:none}      /* 방송 화면에는 띄우지 않는다 */
@media print{ .shr{display:none} }

/* 앱 카드 (2026-08-13) — 상담 카드와 같은 틀, 도장만 먹빛으로 구분 */
.cta-app{display:block;max-width:760px;margin:12px auto 0;text-decoration:none;color:inherit;
  background:var(--hs-paper);border:1.5px solid var(--hs-gold);border-radius:14px;
  padding:16px 18px;transition:transform .12s,box-shadow .15s}
.cta-app:hover{transform:translateY(-1px);box-shadow:0 3px 14px rgba(156,124,58,.16)}
.cta-app .cta-q{display:block;font-family:'HsSerif','Nanum Myeongjo',serif;font-weight:800;
  font-size:16px;color:var(--hs-gold2);margin-bottom:11px}
.cta-app .cta-b{display:flex;align-items:center;gap:13px}
.cta-app .cta-g{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--hs-gold);
  color:var(--hs-paper);font-family:'HsGanji',serif;font-size:22px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.cta-app .cta-w{flex:1;min-width:0;font-size:13px;color:var(--hs-ink2);line-height:1.6}
.cta-app .cta-w b{display:block;font-size:15.5px;font-weight:800;color:var(--hs-ink);margin-bottom:2px}
.cta-app .cta-go{margin-left:auto;color:var(--hs-gold);font-weight:800;font-size:18px}
.cta-app{margin-top:10px}
.cta-app .cta-g{background:var(--hs-ink);color:var(--hs-paper);font-family:'HsSerif','Nanum Myeongjo',serif;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center}
.cta-app .cta-q{color:var(--hs-ink2)}

/* ══ 함사주 간지 타일 (2026-08-14) ══════════════════════
   만세력 본체(index.html)의 «간지 체계»를 글에도 그대로 쓴다.
   목 초록 · 화 빨강 · 토 노랑 · 금 흰바탕 검은글씨 · 수 검은바탕 흰글씨.
   ★색을 여기서 새로 정하지 않는다. 본체가 정본이다. */
.gz{display:inline-flex;align-items:center;justify-content:center;
  width:1.5em;height:1.5em;border-radius:5px;
  font-family:'HsGanji','Nanum Myeongjo',serif;font-weight:800;
  font-size:.9em;line-height:1;vertical-align:.19em;   /* ★한글 «잉크» 중심에 맞춘 값 — 실측(2026-08-15) */
  margin:0 .05em;letter-spacing:0;text-indent:0;
  -webkit-user-select:none;user-select:none}
.gz.mok {background:#3f9e6a;color:#fff}
.gz.hwa {background:#d24b3a;color:#fff}
.gz.to  {background:#c98a2e;color:#13120e}
.gz.geum{background:#f4efe4;color:#2a2318;box-shadow:inset 0 0 0 1px #d9cdb0}
.gz.su  {background:#2b2b33;color:#fff}
/* 표 안에서는 조금 크게 — 조견표처럼 보이게 */
td .gz,th .gz{font-size:1em;vertical-align:.17em}
/* 붙어 있는 간지(申子辰)는 사이를 좁혀 한 덩어리로 보이게 */
.gz + .gz{margin-left:.03em}
@media(max-width:520px){ .gz{width:1.42em;height:1.42em;font-size:.86em} }

/* ══ 간지 띠 (2026-08-14) ═══════════════════════════════
   함사주 표준 간지 이미지(/ganji/)를 글 안에 크게 보여 주는 자리.
   글자 타일(.gz)은 «읽는 흐름 속»에, 이 띠는 «눈이 쉬는 자리»에 쓴다.
   ★그림은 자료실 원본을 웹용으로 줄인 것이다. 여기서 새로 그리지 않는다. */
.gstrip{margin:26px auto;padding:20px 16px 16px;max-width:760px;
  background:var(--hs-paper,#fffdf7);border:1px solid var(--hs-line,#e3d8c2);
  border-radius:16px;text-align:center;
  box-shadow:0 2px 12px rgba(156,124,58,.07)}
.gstrip .gs-t{font-family:'HsSerif','Nanum Myeongjo',serif;font-weight:800;
  font-size:15px;color:var(--hs-gold2,#7e6228);margin-bottom:14px;letter-spacing:-.01em}
.gstrip .gs-r{display:flex;justify-content:center;align-items:flex-end;
  gap:10px;flex-wrap:wrap}
.gstrip .gs-r img{height:92px;width:auto;border-radius:9px;display:block;
  box-shadow:0 3px 10px rgba(90,70,30,.16)}
.gstrip .gs-r img.tall{height:150px}
.gstrip .gs-c{margin-top:13px;font-size:13px;color:var(--hs-ink2,#5b5142);line-height:1.6}
.gstrip .gs-c b{color:var(--hs-ink,#2a2318)}
/* 사이에 넣는 기호 (→ · ↔) */
.gstrip .gs-op{align-self:center;font-size:20px;font-weight:800;
  color:var(--hs-gold,#9c7c3a);padding:0 2px}
/* 줄이 접혀도 «기호 + 다음 그림»이 갈라지지 않게 (2026-08-14) */
.gstrip .gs-pair{display:inline-flex;align-items:flex-end;gap:10px;white-space:nowrap}
@media(max-width:520px){
  .gstrip{padding:16px 10px 13px;margin:20px auto}
  .gstrip .gs-r{gap:7px}
  .gstrip .gs-r img{height:66px}
  .gstrip .gs-r img.tall{height:108px}
  .gstrip .gs-t{font-size:14px}
  .gstrip .gs-c{font-size:12.5px}
}

/* ── 함사주 라이트 실제 화면 (blog_lite.py 가 넣는다 · 손으로 고치지 말 것) ── */
.hslite{margin:26px auto;max-width:760px;border:1.5px solid var(--hs-gold,#9c7c3a);
  border-radius:14px;padding:30px 14px 15px;position:relative;background:var(--hs-card,#fffdf7)}
.hslite::before{content:attr(data-lab);position:absolute;top:-11px;left:50%;
  transform:translateX(-50%);white-space:nowrap;
  font-family:'HsSerif','Nanum Myeongjo',serif;font-size:12.5px;font-weight:800;letter-spacing:2px;
  color:#fff;background:var(--hs-gold,#9c7c3a);border-radius:999px;padding:4px 15px}
.hslite .sh{overflow-x:auto;-webkit-overflow-scrolling:touch;text-align:center}
.hslite img{max-width:100%;height:auto;border-radius:10px;display:inline-block;
  box-shadow:0 2px 10px rgba(90,70,30,.14)}
.hslite .hc{margin-top:12px;font-size:13.5px;line-height:1.72;color:var(--hs-ink2,#5b5142)}
.hslite .hc b{color:var(--hs-ink,#2a2318)}
.hslite .hg{margin-top:11px;font-size:12.5px;color:var(--hs-sub,#8a7d68)}
.hslite .hg a{color:var(--hs-gold,#9c7c3a);font-weight:700;text-decoration:none}
@media(max-width:520px){.hslite{padding:26px 9px 12px;margin:20px auto;border-radius:12px}
  .hslite .hc{font-size:13px}}
/* ── 라이트 화면 끝 ── */

/* ── 지장간 표 — 만세력 간지 그림 (2026-08-15) ─────────
   ★한자를 글자로 찍지 않고 «만세력이 쓰는 그 그림»을 쓴다. 교재와 앱이 한 몸이어야 한다. */
table.jjg td{vertical-align:middle;padding:9px 8px}
table.jjg .jg-j{white-space:nowrap;text-align:center;width:1%}
table.jjg .jg-j img{width:38px;height:38px;border-radius:8px;display:block;margin:0 auto 3px}
table.jjg .jg-j b{font-size:13px;font-weight:800;color:var(--hs-ink)}
table.jjg .jg-c{display:flex;flex-wrap:wrap;gap:10px}
table.jjg .jg-g{display:inline-flex;flex-direction:column;align-items:center;min-width:44px}
table.jjg .jg-g img{width:32px;height:32px;border-radius:7px;display:block}
table.jjg .jg-g b{font-size:12.5px;font-weight:800;color:var(--hs-ink);margin-top:3px}
table.jjg .jg-g i{font-size:10.5px;font-style:normal;color:var(--hs-sub);letter-spacing:-.02em}
@media(max-width:520px){
  table.jjg td{padding:7px 5px}
  table.jjg .jg-j img{width:32px;height:32px}
  table.jjg .jg-c{gap:7px}
  table.jjg .jg-g{min-width:38px}
  table.jjg .jg-g img{width:27px;height:27px}
  table.jjg .jg-g i{font-size:9.5px}
}

/* ── 패밀리 앱 카드 (blog_lite.py 가 넣는다 · 손으로 고치지 말 것) ── */
.hsapp2{margin:26px auto;max-width:760px;border:1.5px solid var(--hs-gold,#9c7c3a);
  border-radius:14px;padding:30px 16px 16px;position:relative;background:var(--hs-card,#fffdf7)}
.hsapp2::before{content:"함사주 패밀리 앱";position:absolute;top:-11px;left:50%;
  transform:translateX(-50%);white-space:nowrap;
  font-family:'HsSerif','Nanum Myeongjo',serif;font-size:12.5px;font-weight:800;letter-spacing:2px;
  color:#fff;background:var(--hs-gold,#9c7c3a);border-radius:999px;padding:4px 15px}
.hsapp2 .a2h{font-family:'HsSerif','Nanum Myeongjo',serif;font-size:17px;font-weight:900;
  color:var(--hs-ink,#2a2318);text-align:center;margin-bottom:12px;line-height:1.4;word-break:keep-all}
.hsapp2 .a2b{display:flex;gap:16px;align-items:flex-start}
.hsapp2 .a2s{flex:0 0 38%;max-width:230px}
.hsapp2 .a2s img{width:100%;height:auto;border-radius:10px;display:block;
  box-shadow:0 2px 10px rgba(90,70,30,.16)}
.hsapp2 .a2t{flex:1 1 auto;font-size:13.5px;line-height:1.75;color:var(--hs-ink2,#5b5142)}
.hsapp2 .a2t b{color:var(--hs-ink,#2a2318)}
.hsapp2 .a2g{display:flex;gap:12px;align-items:center;margin-top:13px;
  padding-top:12px;border-top:1px solid var(--hs-line,#e3d8c2)}
.hsapp2 .a2g img{width:78px;height:78px;border-radius:6px;flex:0 0 auto}
.hsapp2 .a2g .g2{font-size:13px;line-height:1.6;color:var(--hs-ink2,#5b5142)}
.hsapp2 .a2g .g2 b{display:block;font-family:'HsSerif','Nanum Myeongjo',serif;
  font-size:15.5px;font-weight:900;color:var(--hs-gold2,#7e6228);margin-bottom:2px}
.hsapp2 .a2g .g2 i{font-style:normal;color:var(--hs-sub,#8a7d68);font-size:12px}
@media(max-width:520px){
  .hsapp2{padding:26px 11px 13px}
  .hsapp2 .a2b{flex-direction:column;align-items:center}
  .hsapp2 .a2s{flex:none;width:74%;max-width:300px}
  .hsapp2 .a2t{font-size:13px}
  .hsapp2 .a2g img{width:66px;height:66px}
}
/* ── 패밀리 앱 카드 끝 ── */