/* ══ 「다음」 – 무료 맨 아래, 결제 단추 바로 위 ══ */
.nextblk{margin:1.5rem 0 0;padding:1.15rem 1.2rem;
  border:1px solid var(--rule-2);border-radius:12px;background:var(--surface-2)}
.nextblk h3{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);margin:0;
  word-break:keep-all;line-height:1.5;color:var(--ink)}
.nextblk .lsrc{display:block;margin:.3rem 0 .2rem;font-size:var(--fs-sm);color:var(--muted)}
.nextblk p{margin:.7rem 0 0;line-height:1.85;color:var(--ink-2);word-break:keep-all}
/* 들여 쓴 묶음은 인용처럼 둔다 – 새 색을 만들지 않고
   여백과 왼쪽 선만으로 가른다. 선은 이미 있는 --accent-line 을 쓴다. */
.nextblk .quo{margin:.75rem 0 0;padding:.15rem 0 .15rem .95rem;
  border-left:2px solid var(--accent-line);color:var(--ink);font-size:var(--fs-md)}

/* ══ 궁합 – 세어서 보여주는 자리 ══
   색은 있는 토큰만 쓴다. 끌림 --accent-ink · 부딪힘 --gold.
   둘 다 밝음·어두움·먹빛 세 테마에 다 있어서 어느 화면에서도 보인다. */
.cntline{margin:1.5rem 0 0;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);
  line-height:1.55;font-weight:700;color:var(--ink);word-break:keep-all}
.pills{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pills li{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;
  padding:.75rem .9rem;border:1px solid var(--rule-2);border-radius:8px}
.pills .pl{font-weight:600;font-size:var(--fs-base);color:var(--ink);word-break:keep-all}
.pills .pt{grid-column:1;font-size:var(--fs-md);color:var(--muted)}
/* 오른쪽 끝에 한 마디. 기호를 따로 안 만든다 –
   글자가 기호보다 분명하고, 눈이 안 좋으셔도 읽힌다. */
.pills .pm{grid-column:2;grid-row:1/3;align-self:center;font-size:var(--fs-md);font-weight:600;
  white-space:nowrap}
/* ★ .pn 은 이미 요금제 칸이 쓰고 있다(위쪽 줄 하나가 달려 있다).
   같은 이름을 쓰면 그 줄이 여기로 따라들어온다 – 실제로 그랬다.
   이름을 나누고, 그을 줄은 여기서 직접 그린다. */
.pills .pnote{grid-column:1/-1;margin-top:.45rem;padding-top:.45rem;
  border-top:1px solid var(--rule);font-size:var(--fs-sm);line-height:1.7;
  color:var(--muted);word-break:keep-all}
.pills .pw-pull{border-color:var(--accent-line)}
.pills .pw-pull .pm{color:var(--accent-ink)}
.pills .pw-push .pm{color:var(--gold)}
.pills .pw-none .pm{color:var(--muted)}
/* 「서로를 보는 눈」은 셈에서 빠졌다. 줄을 하나 긋고 아래에 둔다. */
.pills.eye{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.cnthint{margin:.8rem 0 0;font-size:var(--fs-md);color:var(--muted)}
.cntnote{margin:1rem 0 0;font-size:var(--fs-sm);line-height:1.85;color:var(--muted);word-break:keep-all}

/* ══ 사주 화면 – 오행 분포 ══ */
/* 제목 뒤에 붙는 「– 겁재 劫財」는 한 덩이다. 이름과 한자가 갈리면 못 읽는다.
   앞의 우리말 사이에서만 끊긴다(.tag 는 이미 word-break:keep-all 이다). */
.read .sjh .nb{white-space:nowrap}
/* 고민 고르기 제목 – 묶은 덩어리 안에서는 안 꺾는다(drawGate 주석). */
#s3h{word-break:keep-all}
#s3h .nb{white-space:nowrap}
.sub2{margin-top:.7rem;font-size:var(--fs-md);color:var(--muted)}
.sub2 b{color:var(--ink-2)}
#s1sub:empty{display:none}
.ohbox .tag{margin-bottom:.9rem}
.ohbars{display:flex;flex-direction:column;gap:.45rem;margin:0 0 1rem}
.ohrow{display:flex;align-items:center;gap:.7rem}
.ohk{font-family:"Gowun Batang",serif;font-size:var(--fs-md);font-weight:700;
  width:3.4rem;flex:none;letter-spacing:.02em}
.ohbar{flex:1;height:8px;background:var(--sunken);border-radius:4px;overflow:hidden}
.ohbar i{display:block;height:100%;border-radius:4px;transition:width .5s ease}
/* 색 토큰은 base.css 의 --oh-* 를 그대로 쓴다. 새로 만들지 않는다. */
.ohbar i.oh-mok{background:var(--oh-mok)} .ohbar i.oh-hwa{background:var(--oh-hwa)}
.ohbar i.oh-to{background:var(--oh-to)}   .ohbar i.oh-geum{background:var(--oh-geum)}
.ohbar i.oh-su{background:var(--oh-su)}
.ohn{font-family:"Gowun Batang",serif;font-size:var(--fs-sm);color:var(--ink-2);
  width:1.2rem;text-align:right;flex:none;font-variant-numeric:tabular-nums}
/* ★ PC 에서 글줄이 너무 길어진다. 글칸이 661px 까지 벌어져서
   한 줄에 54자가 들어갔다 – 모바일(332px)의 두 배다.
   글자를 줄이지 않고 문단 폭만 묶는다 – .lead 가 이미 쓰는 34rem 을 그대로 쓴다.
   ★ 표·카드·칩·단추는 안 건드린다. 읽는 문단만이다. */
#oh-sum{max-width:34rem}
.lack{margin-top:.7rem;font-size:var(--fs-md);line-height:1.9;color:var(--ink-2);max-width:34rem}
.lack .fine{display:inline-block;margin-top:.5rem;font-size:var(--fs-sm);color:var(--ink-2)}

/* ══ 계산 근거 ══ */
.basis{margin:1.4rem 0 0;border:1px solid var(--rule-2);border-radius:12px;
  background:var(--surface-2)}
/* 펼침 표시가 작은 화살표 하나면 나이 드신 분들은 누를 수 있는 줄 모르십니다.
   오른쪽에 글자가 든 버튼 모양으로 두어 "여기 눌러도 됩니다"가 보이게 합니다. */
/* 왜 #024 */
.basis summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  /* ★ 2026-09-19 대표님 – 「이 여덟 글자는 어떻게 뽑았습니까」가 갑자기 크고 굵게 떴다.
     근거를 여는 줄이지 본문이 아니다. 본문보다 한 눈금 작게 두되 굵기와 색은 남긴다. */
  cursor:pointer;padding:1.15rem 1.2rem;font-size:var(--fs-md);font-weight:600;
  color:var(--accent-ink);list-style:none;word-break:keep-all;overflow-wrap:break-word;
  border-radius:12px;transition:background .12s;flex-wrap:nowrap}
/* ★ 제목과 단추가 한 줄에 안 들어가면 단추를 아랫줄로 내린다.
   접지 않으면 제목이 단추 옆 좁은 칸에 가두어 375px 에서
   「이 여덟 / 글자는 어떻게 / 뽑았습니까」 세 줄로 쪼개졌다 – 실제로 그랬다.
   넓은 화면에서는 둘이 한 줄에 들어가므로 아무 것도 안 바뀐다. */
/* 제목은 한 덩어리다. 묶지 않으면 안의 <span class="nglyph">여덟</span> 까지
   제각각 flex 칸이 돼서 space-between 이 글자 사이를 벌린다 – 실제로 그랬다.
   「이        여덟      글자는 어떻게 뽑았습니까」 */
.basis summary .btl{flex:1 1 auto;min-width:0}
/* 합침 – 아래 「자세히」 알약 본체 + 제목 첫 줄에 맞춘 margin-top */
.basis summary::after{content:"자세히";margin-left:auto;flex:0 0 auto;white-space:nowrap;
  font-size:var(--fs-md);font-weight:500;color:var(--accent-ink);
  border:1.5px solid var(--accent-ink);border-radius:999px;padding:.42rem .9rem;
  transition:background .12s,color .12s;margin-top:-.36rem}
.basis summary::-webkit-details-marker{display:none}
.basis[open] summary::after{content:"접기"}
.basis summary:hover{background:var(--accent-soft)}
.basis summary:hover::after{background:var(--accent-ink);color:#fff}
.basis summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* 단추(알약)는 제목 한 줄보다 키가 크다. 위에 맞춰 두면 단추만 아래로 처져 보인다 –
   키 차이의 절반만큼 올려 제목 첫 줄과 가운데를 맞춘다. 작은 판은 키 차이가 작아 덜 올린다. */
/* 합침 – 아래 작은 판 알약 */
.basis.sm summary::after{margin-top:-.26rem;font-size:var(--fs-sm);font-weight:500;
  padding:.26rem .68rem;border-width:1.2px}
/* 합침 – 아래 「근거 칸이 쪽 전체를 밀면 안 된다」 overflow-x */
.basis .bdy{padding:0 1.1rem 1.1rem;border-top:1px solid var(--rule);overflow-x:auto}
/* 왜 #025 */
.basis.sm{margin:.9rem 0 0;border-radius:10px;background:transparent;border-color:var(--rule)}
.basis.sm summary{padding:.55rem .8rem;font-size:var(--fs-md);font-weight:500;border-radius:10px}
.basis.sm .bdy{padding:0 .8rem .8rem;border-top:1px solid var(--rule)}
.basis.sm .bdy p{margin:.6rem 0 0;font-size:var(--fs-md);line-height:1.8;color:var(--muted);
  word-break:keep-all}
/* 근거 상자 안의 읽는 문단도 같은 폭으로 묶는다(basis-cal·basis-term·basis-hour 포함).
   ★ 세 문단만 묶고 옆 문단을 내버려 두면 같은 상자 안에서 줄 끝이 들쎄날려
     그것이 더 무너진 모양이 된다. 상자 단위로 맞춘다. */
/* ★ 2026-09-19 대표님 – 펼쳐 보면 큰 글씨로 짧은 내용만 있어 허전했다.
   근거는 본문이 아니라 보조 설명이라 본문보다 한 눈금 작게 둔다(줄 간격은 그대로 넉넉히). */
/* 합침 – 아래 overflow-wrap:anywhere */
.basis .bdy p{font-size:var(--fs-md);line-height:1.95;color:var(--ink-2);margin:1rem 0 0;
  max-width:34rem;word-break:keep-all;overflow-wrap:anywhere}
.basis .bdy b{color:var(--ink)}
/* 한문 원문 – 우리말보다 크게. 한자는 작으면 못 읽는다(40대 후반부터 노안이 온다).
   자간을 조금 벌리고 명조로 세운다. 긴 줄은 칸 안에서만 접히게 한다. */
.hm{font-size:1.35em;letter-spacing:.05em;line-height:1.75;color:var(--ink);
    font-family:"Gowun Batang",serif;overflow-wrap:anywhere}
.basis .fine{font-size:var(--fs-md);color:var(--ink-2)}

/* ══ 살 목록 – 이름을 칩으로 한 줄에, 누르면 그 하나만 펼쳐진다 ══════════════
   ★ 2026-09-29 – 세로로 늘어놓던 줄(.sal)을 접어 칩(.salchip)으로 바꿨다(s2 줄이기 2차).
     <details name="salN">는 같은 이름을 쓰는 것끼리 하나만 열리는 표준 동작이다(스크립트 없이).
   ★ 누르는 자리는 44px 아래로 내려가지 않는다. 손가락으로 눌리는 최소 크기다. */
.salrowwrap{margin:1rem 0 0}
.salgn{display:inline-block;margin:.9rem .5rem .3rem 0;font-weight:650;color:var(--ink);
  letter-spacing:.01em;font-size:var(--fs-sm)}
.salgn.plain{display:block;font-weight:400;color:var(--ink-2);font-size:var(--fs-base);
  margin:.9rem 0 .3rem}
.sallist{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .3rem}
.salchip{border:1px solid var(--rule-2);border-radius:999px;background:var(--surface)}
.salchip summary{display:flex;align-items:center;min-height:44px;padding:.35rem .95rem;
  cursor:pointer;list-style:none;font-size:var(--fs-base);font-weight:500;color:var(--ink);word-break:keep-all}
.salchip summary::-webkit-details-marker{display:none}
/* ★ 2026-10-16 – 펼치면 큰 원(999px)이 되어 글이 원 밖으로 나갔다. 다른 펼침 칸(.basis)과 같은 12px 로 */
.salchip[open]{flex:1 1 100%;border-color:var(--accent-line);background:var(--accent-soft);border-radius:12px}
.salchip[open] summary{font-weight:700}
.salchip summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.salchip .bdy{padding:0 .95rem .9rem}
.salchip .bdy .salrow{margin:0 0 .5rem;font-size:var(--fs-base);line-height:1.7;color:var(--ink-2)}
.salchip .bdy p{margin:.55rem 0 0;font-size:var(--fs-base);line-height:1.9;color:var(--ink-2);
  max-width:34rem;word-break:keep-all;overflow-wrap:break-word}
.salchip .bdy b{color:var(--ink)}
.salrowwrap + p{margin-top:1.4rem}

/* ══ 월지 · 일지 · 시지 · 방합 – 제목 + 첫 문단만, 누르면 나머지가 펼쳐진다 ══
   ★ 2026-09-29 s2 줄이기 2차. */
.rcard{margin:.75rem 0 0;border:1px solid var(--rule);border-radius:10px}
.rcard summary{display:block;padding:.75rem .9rem;cursor:pointer;list-style:none}
.rcard summary::-webkit-details-marker{display:none}
.rcard summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.rcard .sjh{display:block;font-family:"Gowun Batang",serif;font-size:var(--fs-base);
  font-weight:700;line-height:1.5;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.rcardprev{display:block;margin-top:.3rem;font-size:var(--fs-md);line-height:1.7;
  color:var(--ink-2);word-break:keep-all;overflow-wrap:break-word}
.rcard[open]{border-color:var(--accent-line)}
.rcard .bdy{padding:0 .9rem .9rem}
.rcard .bdy p{margin:.55rem 0 0;font-size:var(--fs-base);line-height:1.9;color:var(--ink-2);
  word-break:keep-all;overflow-wrap:break-word}
.rcard .bdy b{color:var(--ink)}

/* 왜 #028 */
#s2 .acts.s2go{flex-direction:column;align-items:stretch;gap:0}
#s2gobtn{width:100%;min-height:56px;border-radius:999px;
  font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
#s2 .acts.s2go .gosub{margin:.75rem 0 0;text-align:center}
#s2 .acts.s2go .note{margin:.9rem 0 0;text-align:center}

/* ══ 물음 위에 붙는 「왜 여기서 또 여쭙는지」 ══
   ★ 물음과 한 덩어리로 보여야 한다. 사이를 벌리면 안내문 하나가 더 붙은 것으로
     읽히고, 그러면 읽지 않고 지나치신다. 왼쪽에 선을 긋고 물음을 바짝 붙인다.
   ★ 글자 크기는 본문(--fs-base) 그대로다. 작게 줄이면 정작 읽으셔야 할 말이
     안 읽힌다 – 이 자리가 「왜 하는지 모르겠다」던 바로 그 자리다. */
.askwhy{margin:1.2rem 0 0;padding:.9rem 1rem;border-left:3px solid var(--accent-line);
  background:var(--accent-soft);border-radius:0 10px 10px 0;
  font-size:var(--fs-base);line-height:1.85;color:var(--ink-2);
  max-width:34rem;word-break:keep-all;overflow-wrap:break-word}
.askwhy b{color:var(--accent-ink)}
/* ── 그 밖에 걸리는 것 ── 글자는 본문 크기 그대로. 적는 칸이라 더 크게 둔다. */
.saidbox{margin:1.6rem 0 0}
.saidh{display:block;margin:0 0 .6rem;font-size:var(--fs-lg);line-height:1.6;
  color:var(--ink);word-break:keep-all;font-weight:600}
/* ★ 2026-09-29 대표님 – 「안 적으셔도 됩니다」를 작게. 2026-09-17엔 lg 로 올렸었는데,
   이번엔 대표님이 다시 작게를 짚으셔서 sm 으로 낮춘다(새 지시가 이긴다). */
.saidh em{font-style:normal;font-weight:400;font-size:var(--fs-sm);color:var(--ink-2);margin-left:.4rem}
#saidin,.saidin{display:block;width:100%;box-sizing:border-box;font-family:inherit;
  font-size:var(--fs-lg);line-height:1.7;color:var(--ink);
  padding:.85rem 1rem;border:1.5px solid var(--rule-2);border-radius:12px;
  background:var(--surface);resize:vertical;min-height:5.2rem}
#saidin::placeholder,.saidin::placeholder{color:var(--muted)}
#saidin:focus,.saidin:focus{outline:none;border-color:var(--accent)}
.saidmsg{margin:.45rem 0 0;min-height:1.4em;font-size:var(--fs-base);color:var(--ink-2)}
.saidmsg.ok{color:var(--accent-ink)}
.askwhy:not([hidden]) + h2{margin-top:.75rem}

/* 무료 마지막 단추 아래 한 줄. 스위치가 켜졌을 때만 보인다. */
.gosub{margin:.55rem 0 0;font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2);
  word-break:keep-all;overflow-wrap:break-word;max-width:34rem}

/* 이미 정해 두신 결 */
#cq-have h3{font-family:"Gowun Batang",serif;font-size:var(--fs-xl);line-height:1.4;
  margin:1.6rem 0 0;color:var(--ink);word-break:keep-all}
.havename{margin:1.1rem 0 0;font-family:"Gowun Batang",serif;font-size:var(--fs-2xl);
  line-height:1.3;color:var(--ink)}
.havehow{margin:.5rem 0 0;font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2)}
#cq-have .acts{flex-direction:column;align-items:stretch}


/* ══ 2026-10-17 무료 사주 새 모양(.story2) – 이야기 먼저, 팔자 표 · 오행 막대는 맨 아래 「셈한 근거」로 작게 ══ */
.s2sth{font-family:"Gowun Batang",serif;font-size:var(--fs-xl);font-weight:700;line-height:1.4;margin:1.4rem 0 .5rem;color:var(--ink);word-break:keep-all}
.s2stl{margin:0 0 1.2rem}
.s2story .read{margin-top:1.1rem}
.s2story .read .sjh{font-size:var(--fs-lg);font-weight:700;margin:0 0 .45rem}
.s2eighthd{margin:2.2rem 0 .8rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:var(--fs-lg);font-weight:700;color:var(--ink-2)}
.s7pay{margin:0 0 1.2rem;padding:.9rem 1rem;border-left:3px solid var(--accent-line);background:var(--accent-soft);border-radius:0 10px 10px 0}
.s7pay .ph{margin:0 0 .35rem;font-weight:700;color:var(--ink);line-height:1.6;word-break:keep-all}
.s7pay .pb{margin:0;color:var(--ink-2);line-height:1.8;word-break:keep-all}
/* three 칸(세 겹) */
.s3list{margin:.4rem 0 .8rem;padding:0;list-style:none}
.s3list li{margin:.25rem 0;line-height:1.8;color:var(--ink-2)}
.s3acts{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.s3acts .btn{flex:1 1 11rem}
#s2.story2 #s2terms,#s2.story2 #sj1005,#s2.story2 #s2ilgan,#s2.story2 #s2lifehd,#s2.story2 #sjmore1,
#s2.story2 #s2seunhd,#s2.story2 #s2seun,#s2.story2 #sjmore2,#s2.story2 #s2today{display:none}
#s2.story2 .pillars{gap:.35rem;margin:.6rem 0 1.2rem}
#s2.story2 .pil{padding:.45rem .6rem}
#s2.story2 .pil .gz{font-size:var(--fs-lg);margin:.1rem 0 0}
#s2.story2 .pil .han{display:none}
#s2.story2 .ohbox{margin-top:.2rem}
#s2.story2 .pilnote{display:none}

/* ══ 2026-10-17 궁합 기본판 · 전문 궁합 끝 ══ */
.pairbasicbox .pbt{margin:0 0 .7rem;font-size:var(--fs-lg);line-height:1.5;color:var(--ink);word-break:keep-all}
.pairbasicbox .pbk{margin:.8rem 0 .15rem;font-size:var(--fs-sm);font-weight:700;color:var(--accent-ink)}
.pairbasicbox p{line-height:1.8;word-break:keep-all}
.pairbasicbox .pblock{display:flex;gap:.4rem;align-items:flex-start;margin:1rem 0 .3rem;color:var(--muted)}
.pairbasicbox .pblock .ic{flex:none;width:1rem;height:1rem;margin-top:.35rem}
.pairbasicbox .pbprice{margin:.2rem 0 0;color:var(--ink-2)}
.pairbasicbox .pbstat{list-style:none;margin:.4rem 0 .6rem;padding:0;line-height:1.9;color:var(--ink-2)}
.pairend{margin-top:1.2rem}
.pairend p{line-height:1.85;word-break:keep-all}

/* 2026-10-17d 결 결과의 「링크를 보낸 분과의 궁합」 칸 */
.famjoin{margin:0 0 1rem}
.famjoin .acts{margin-top:.6rem}

/* ══ 2026-10-17e 아이 · 10대 – 전문풀이 · 결제 · 결 · 성격검사 권하는 칸을 안 그린다 ══ */
#s2.story2kid #s2bridge,#s2.story2kid #s2sasang,#s2.story2kid #tri3,#s2.story2kid .fw3mini,#s2.story2kid .s2go,
#s2.story2kid #fgatehd,#s2.story2kid #fgate,#s2.story2kid #drift{display:none}