/* ══ 작은 글씨는 굵기가 아니라 색으로 잡는다 ══
   명조는 획이 가늘어 작아질수록 흐려진다. 처음에는 굵기 500 을 걸었는데,
   굵기 한 벌이 첫 화면에서 624KB 다. 느린 4G 에서 글씨가 제 모양이 되기까지
   4,430ms → 5,528ms 로 늘었다. 그래서 굵기를 빼고 색을 한 단계 올린다 –
   var(--muted)·var(--faint) 를 쓰던 작은 자리를 var(--ink-2) 로 옮겼다.
   ★ 값을 여기 모아 적지 않는다. 낱낱의 규칙에서 색만 바꿨다 –
     .gate .fine 처럼 두 겹인 선택자가 많아, 여기서 .fine 하나로는 안 이긴다.
   ★ 되돌리려면 아래 여덟 곳의 색을 muted/faint 로 되돌리면 된다:
     .gate .fine · .lack .fine · .basis .fine · .acts .note · .startwhy ·
     .pil .k · .pil .han · .band > header span
     그리고 #s0 의 .how .ln · .pick · .startwhy
     (2026-09-21 CSS 정리 – .acts .note 두 벌을 하나로 합쳤고, .asksub · .askhd 는 화면에 없어 걷었다) */

/* progress */
/* 합침 – 08-gyeol-pq 「화면 정돈」의 margin-bottom. 여백만 줄인다 – 글자 크기는 건드리지 않는다 */
.prog{position:sticky;top:0;z-index:20;background:var(--bg);padding:.9rem 0 .7rem;
  border-bottom:1px solid var(--rule);margin-bottom:.3rem}
.prog .row{display:flex;align-items:center;gap:.5rem;max-width:44rem;margin:0 auto;padding:0 1.35rem}
.dot{height:3px;flex:1;border-radius:2px;background:var(--rule-2);transition:background .3s}
.dot.on{background:var(--accent)}
/* ★ 2026-09-25 진행바 – 칸 이름 · 세 상태 · 차오름 */
#prog{align-items:flex-start}
.pstep{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch}
.pstep .dot{flex:none;display:block;position:relative;overflow:visible}
.pstep.cur .dot{height:4px;margin-top:-.5px;box-shadow:0 0 0 3px var(--accent-soft)}
.pstep.cur .dot.paid{box-shadow:0 0 0 3px var(--accent-soft)}
.plab{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:.4rem;font-size:var(--fs-sm);line-height:1.3;
  color:var(--muted);white-space:nowrap;word-break:keep-all;text-align:center;letter-spacing:-.04em}
/* 09-27 – 좁은 폭(320)에서 「전체 풀이」 · 「생년월일」이 칸을 넘치지 않게 줄바꿈을 허용(t_size) */
.pstep.done .plab{color:var(--accent-ink)}
.pstep.cur .plab{color:var(--ink);font-weight:700}
.pstep.done .dot.paid ~ .plab{color:var(--accent-ink)}
.pstep{position:relative}
/* 결 칸 위의 작은 그림 – 글자 흐름 밖(막대 위)에 둔다. 「결·고민」 글자가 밀리지 않게 (지시-1019g) */
.pchar{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);height:20px;width:auto;margin:0 0 2px;pointer-events:none}
.dot.fill{animation:pfill .45s ease-out}
@keyframes pfill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
body.night .plab{color:#9b9797}
body.night .pstep.done .plab,body.night .pstep.cur .plab{color:#f3f2f2}
body.night .pstep.cur .dot{box-shadow:0 0 0 3px rgba(15,168,148,.25)}
@media (prefers-reduced-motion: reduce){.dot.fill{animation:none}}

section{display:none;animation:slidein .2s cubic-bezier(.2,.7,.3,1)}
section.on{display:block}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

h1{font-family:"Gowun Batang",serif;font-weight:700;font-size:clamp(1.85rem,5.5vw,2.5rem);
 line-height:1.35;margin:0 0 1rem;letter-spacing:-.01em;text-wrap:balance}
/* 합침 – 08-gyeol-pq 「화면 정돈」의 margin */
h2{font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-xl);line-height:1.4;
  text-wrap:balance;margin:0 0 .45rem}
h3{font-size:var(--fs-base);font-weight:600;margin:0 0 .4rem}
p{margin:0 0 1rem;color:var(--ink-2)}
/* 합침 – 06-login 「본문을 한 단계 키운다」 · 40대 후반부터 노안 – 줄이지 않는다 */
.lead{color:var(--ink-2);max-width:34rem;font-size:var(--fs-base)}
/* 2026-09-19 – 결제 다리 문단이 위(사주 풀이 끝 표시 · 접힌 drift)와 붙어 보였다. 이 한 자리만 위 여백을 띈다. */
#s2bridge{margin-top:1.6rem}
/* 합침 – 08-gyeol-pq 「위 줄 – 절기」의 display · gap · margin */
.eyebrow{font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-sm);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:baseline;gap:.6rem;
  margin:0 0 .55rem}

/* intro */
/* 예전에는 제목 위로 4.5rem(72px)을 비웠다. 첫 화면이 제목 하나뿐일 때 얘기다.
   이제 맨 위에 오늘 띠가 있어서, 그만큼을 비우면 물음이 화면 밖으로 밀린다. */
.intro{padding-top:1.6rem}
.intro h1{font-size:clamp(2rem,6.5vw,2.9rem)}
/* 합침 – 06-login 「첫 화면 방법 줄」 color · margin + 「본문 키움」 font-size(--fs-lg) · 40대 후반부터 노안 – 줄이지 않는다 */
.intro .big{line-height:1.85;max-width:32rem;color:var(--ink);margin:1.1rem 0 0;
  font-size:var(--fs-lg)}
.intro .big b{color:var(--ink);font-weight:600}
/* 첫 화면 – 볼지 말지가 여기서 갈린다. 한 방을 크게 두고 근거를 붙인다. */
.intro h1.hook{font-size:clamp(2.15rem,7.5vw,3.15rem);line-height:1.3;margin:0 0 1.15rem}
.intro .how.up{margin:1.35rem 0 0;padding:1.05rem 1.15rem;background:var(--surface);
 border-left:3px solid var(--accent-line);border-radius:0 10px 10px 0}
.intro .pick{font-size:var(--fs-md);color:var(--muted);margin:0;letter-spacing:.01em}

/* buttons */
.btn{font-family:inherit;font-size:var(--fs-md);font-weight:500;cursor:pointer;border:none;
 padding:.85rem 1.6rem;border-radius:9px;background:var(--btn);color:#fff;
 transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.35;cursor:not-allowed}
/* 생년월일 「사주 보기」 – 다 채우기 전은 흐리고, 다 채우면(.ready) 같은 색을 더 밝게 */
.btn.ready{filter:brightness(1.08);box-shadow:0 6px 18px var(--accent-ring)}
/* 지시-1022n – 「사주 보기」 글자는 늘 흰색 · 굵게. 고르기 전 흐림은 바탕색으로만(글자는 흐려지지 않는다) */
#calc{color:#fff;font-weight:700}
#calc:disabled{opacity:1;background:#5f8f89;cursor:not-allowed}
body.night #calc:disabled{background:#2e5e59}
/* 지시-1022n 이어서 – 켜진 「사주 보기」 바탕은 --btn(#0C7A6D), 그림자는 같은 색 계열 */
#calc:not(:disabled){background:#0C7A6D;box-shadow:0 6px 18px rgba(12,122,109,.35)}
/* 합침 – 06-login 의 border 1.5px */
.btn.ghost{background:transparent;color:var(--ink-2);border:1.5px solid var(--rule-2)}
/* 합침 – 06-login 의 border-color · color(--warn) */
.btn.ghost:hover{background:var(--surface-2);border-color:var(--warn);color:var(--warn)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.acts{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1.8rem}
/* 합침 – 02 아래 두 번째 벌(위 여백 · 가운데) + 06-login 「본문 키움」. 글자는 지금 이기는 --fs-sm · 40대 후반부터 노안 – 줄이지 않는다 */
.acts .note{margin:.6rem 0 0;color:var(--ink-2);text-align:center;font-size:var(--fs-sm)}
/* 1026 – 소개 단추(무료 사주 · 전문풀이 · 궁합 결과 맨 끝)는 폭 100% · 가운데 (모양 규칙) */
.acts .btn[data-refshare]{flex:1 1 100%;box-sizing:border-box}
/* 합침 – 08-gyeol-pq 「화면 정돈」의 margin (★ 앞으로만 – 뒤로 가면 좁은·터치 padding 을 이김) */
.back{background:none;border:none;font-family:inherit;font-size:var(--fs-sm);color:var(--muted);
  cursor:pointer;padding:.3rem 0;display:inline-flex;align-items:center;gap:.35rem;margin:0 0 .5rem}
.back:hover{color:var(--accent)}
.back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.back::before{content:"←"}

/* form */
.field{margin:1.75rem 0}
/* 합침 – 06-login 「본문 키움」(같은 값) · 40대 후반부터 노안 – 줄이지 않는다 */
.field label{display:block;color:var(--ink-2);margin-bottom:.45rem;font-size:var(--fs-sm)}
.inputs{display:flex;gap:.5rem;flex-wrap:wrap}
input[type=number],select{font-size:var(--fs-base);
 padding:.7rem .85rem;border:1px solid var(--rule-2);border-radius:8px;
 background:var(--surface);color:var(--ink);width:6.2rem}
select{width:auto;font-family:inherit}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* 생년월일 칸.
   위 규칙은 input[type=number] 만 잡으므로 여기서 따로 준다 – 6.2rem 은 좁다.
   min-height 44px 는 손가락으로 누르는 자리라서다. box-sizing 은 border-box 다(60줄).

   ★ 폭은 열 글자(1970-12-30)를 기준으로 잡는다. 여덟 자리로 잡았다가 하이픈 둘이
     붙으면서 오른쪽 0 이 잘렸다. 모노 글꼴이라 글자폭이 일정하므로 ch 로 센다 –
     10ch + 자간 + 좌우 여백. rem 으로 어림잡으면 글꼴이 바뀔 때 또 잘린다. */
.inputs input[type=text]{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-lg);
 letter-spacing:.06em;padding:.7rem .9rem;min-height:44px;
 width:calc(10ch + 0.6em + 1.8rem);min-width:10.5rem;
 border:1px solid var(--rule-2);border-radius:8px;
 background:var(--surface);color:var(--ink)}
/* 읽은 결과를 되돌려 드리는 줄. 오류 줄(.calerr)과 같은 자리에 뜬다. */
.ymdecho{margin:.6rem 0 0;font-size:var(--fs-base);line-height:1.75;color:var(--ink-2);font-weight:500}
/* 호칭 칸. 생년월일 칸과 달리 글자가 아니라 말이라 고정폭 글꼴을 쓰지 않는다.
   .inputs 안에 두면 위의 9.5rem·모노 규칙이 걸리므로 따로 둔다. */
.nameinput{font-family:inherit;font-size:var(--fs-base);padding:.7rem .85rem;min-height:44px;
 width:100%;max-width:16rem;border:1px solid var(--rule-2);border-radius:8px;
 background:var(--surface);color:var(--ink)}
/* 태어난 곳. 생년월일 칸 아래 한 줄로 둔다 – 폰에서 한 줄에 셋을 넣으면 다 좁아진다. */
/* 성별. 기본 선택을 두지 않는다 – 미리 골라두면 그대로 넘기신다. */
#sexbox .calopt{min-width:5.5rem}
.placesel:disabled{opacity:.65}
/* 왜 #003 */
.placesel option{color:var(--ink);background:var(--surface)}
/* 눈에는 안 보이고 읽어주는 기계에는 남는 글자. 자물쇠 옆에 쓴다. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 지시-1022n – 칸 아래 안내 글 한 규칙: 지역 · 시각 · 분 안내가 모두 이것을 쓴다 */
.placehint{margin:.4rem 0 0;font-size:var(--fs-sm);line-height:1.7;color:var(--muted);
  word-break:keep-all;overflow-wrap:break-word;max-width:34rem}
.placehint[hidden]{display:none}
/* 칸 바로 아래 한 줄. 읽을 것을 늘리지 않는다 – 길면 아무도 안 읽는다. */
.tinyhint{margin:.4rem 0 0;font-size:var(--fs-sm);color:var(--faint);line-height:1.5}
/* 대운 표 – 지금 계신 칸만 도드라지게. 나머지는 흐름으로 읽히면 된다.
   ★ 2026-09-29 – 세로 여덟 줄 목록 대신 4칸×2줄 격자로(s2 줄이기 2차). */
.daeungrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin:1rem 0 .8rem}
@media (max-width:379px){.daeungrid{grid-template-columns:repeat(2,1fr)}}
.dcell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.1rem;
 padding:.5rem .2rem;border:1px solid var(--rule);border-radius:8px;
 font-size:var(--fs-xs);line-height:1.25;color:var(--ink-2);opacity:.8}
.dcell.on{opacity:1;color:var(--ink);font-weight:600;background:var(--accent-soft);
 border-color:var(--accent-line)}
.dcell .dage{font-weight:600;font-size:var(--fs-xs);color:var(--faint);line-height:1.2}
.dcell .dgz{font-family:"Gowun Batang",serif;font-size:var(--fs-sm);line-height:1.2}
.dcell .dsh{line-height:1.25;overflow-wrap:break-word}
.dbasis{margin:.6rem 0 0;font-size:var(--fs-sm);color:var(--faint);line-height:1.6}
.dlock{margin:.35rem 0 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.placesel{margin-top:.55rem;font-family:inherit;font-size:var(--fs-base);padding:.7rem .85rem;
 min-height:44px;width:100%;max-width:16rem;border:1px solid var(--rule-2);
 border-radius:8px;background:var(--surface);color:var(--ink)}

/* 사주 판 */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:1.75rem 0}
.pil{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
 padding:.85rem .5rem;text-align:center}
.pil .k{font-size:var(--fs-xs);color:var(--ink-2);letter-spacing:.08em}
.pil .gz{font-family:"Gowun Batang",serif;font-size:var(--fs-xl);font-weight:700;line-height:1.25;margin:.25rem 0 .1rem}
.pil .han{font-size:var(--fs-xs);color:var(--ink-2)}
.pil.me{border-color:var(--accent);background:var(--accent-soft)}
/* ★ 2026-09-29 – s10 표지(.fr-palja)와 같은 모양: 일간은 붉게, 토(土) 글자는 누렇게. */
.pil .gz .me{color:var(--fr-red)}
.pil .gz .to{color:var(--gold)}
.oh-mok{color:var(--oh-mok)}.oh-hwa{color:var(--oh-hwa)}.oh-to{color:var(--oh-to)}
.oh-geum{color:var(--oh-geum)}.oh-su{color:var(--oh-su)}

.read{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
 padding:1.5rem 1.6rem;margin:1.5rem 0}
.read .tag{font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em;
 color:var(--muted);margin:0 0 .5rem}
.gist{font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;line-height:1.65;
 margin:0 0 .55rem}
/* 왜 #004 */
.read .sjh{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;line-height:1.5;
 color:var(--ink);margin:0 0 .3rem;word-break:keep-all;overflow-wrap:break-word}
.read .src{display:block;font-family:"Gowun Batang",serif;font-size:var(--fs-sm);
 letter-spacing:.04em;color:var(--accent-ink);opacity:.85;margin:0 0 .8rem}
.read .hit{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;margin:0 0 .7rem;line-height:1.5}
.read p:last-child{margin-bottom:0}
/* ★ 2026-09-29 – 「→ 한 줄」 처방 상자(예전엔 .rbody·.gyi 안에서만)를 새로 놓는 자리
   (①한 줄로 말하면·「다음」)에도 꺼내 쓴다. 예전부터 있던 사주 more(sjmore1·2)의 카드는
   손대지 않는다 – 거기 손대면 카드 속 「→」 줄 높이가 바뀌어 읽은 깊이 재기(depthWatch)의
   스크롤 자리(#sjmore1 안의 살 목록)가 어긋난다. */
#sj1005 .step, .nextblk .step{margin:.9rem 0 0;padding:.75rem .95rem;background:var(--surface-2);
 border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
 line-height:1.72;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
/* 줄로 늘어놓는 문단(용신 여덟 가지처럼 「이름  값」이 줄줄이 오는 것).
   문장을 이어 붙이지 않고 줄대로 세운다. */
p.lines{line-height:2.05;word-break:keep-all;overflow-wrap:break-word}
/* ★ 2026-09-29 대표님 – 예전엔 여기 b{min-width:6.2rem} 을 뒀는데, 여러 줄 문단의
   <b> 마다 다 걸려 「목木    이 없습니다」처럼 짧은 굵은 글씨 뒤가 벌어졌다.
   신살 목록 줄(.salrow, 04-sal.js 가 「이름 – 뜻」을 갈라 만든다)에만 좁힌다. */
.salrow{display:block}
.salrow b{display:inline-block;min-width:6.2rem;color:var(--ink)}
.salrow .sd{color:var(--ink-2)}
@media (max-width:460px){
  /* 뜻이 길면 이름 아래로 내어쓰기(hanging indent)로 떨어진다 – 이름 폭은 고정하지 않는다. */
  .salrow b{display:block;min-width:auto}
  .salrow .sd{display:block;padding-left:1.1rem;text-indent:-1.1rem}
}
.read.mark{border-color:var(--accent-line);background:var(--accent-soft)}
/* 얼마나 확실한지 두 줄. 셀 수 있는 것만 센 값이라 조용하게 둔다 –
   크게 그리면 점수처럼 읽히고, 점수를 만드는 순간 우리가 파는 것이 사라진다. */

/* ★ 2026-09-12 – 사주 화면 끝에서 드린 것의 부피를 세던 상자와 그 규칙을 대표 결정으로 걷어냈다. */

/* 카드 그리드 */
/* ★ 2026-09-10 – 덧말이 margin-left:auto 로 오른쪽 끝에 붙는데,
   제목이 길면 좁은 화면에서 그 덧말이 밖으로 밀려 잘렸다. 줄을 바꾸게 둔다. */
.grpname{display:flex;align-items:baseline;gap:.2rem .6rem;flex-wrap:wrap;margin:2.2rem 0 .9rem}
/* 제목 아래 생년월일 줄. 제목을 거들 뿐이라 작고 조용하게 둔다. */
.s2sub{font-size:var(--fs-sm);color:var(--muted);
  letter-spacing:.02em;margin:-.2rem 0 .9rem}
/* 덧말이 딸린 제목은 좁은 화면에서 제목이 먼저 줄어야 한다.
   min-width 를 안 풀어두면 제목이 안 줄고 덧말이 밖으로 밀려 잘린다. */
.grpname h3{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;margin:0;min-width:0}
.grpname span{font-family:"Gowun Batang",serif;font-size:var(--fs-sm);color:var(--faint);margin-left:auto;flex:none}
/* 합침 – 08-gyeol-pq 「화면 정돈」의 gap */
.cards{display:grid;gap:.4rem}
/* 합침 – 06-login 「본문 키움」 font-size(--fs-base) · line-height + 08-gyeol-pq 「화면 정돈」 padding · 40대 후반부터 노안 – 줄이지 않는다 */
.card{display:flex;align-items:flex-start;gap:.7rem;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;cursor:pointer;
  font-family:inherit;color:var(--ink-2);transition:border-color .15s,background .15s;
  font-size:var(--fs-base);line-height:1.6;padding:.72rem .9rem}
.card:hover{border-color:var(--accent-line)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card .bx{flex:none;width:1.1rem;height:1.1rem;border:1.5px solid var(--rule-2);border-radius:5px;
 margin-top:.22rem;position:relative;transition:all .15s}
.card[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.card[aria-pressed="true"] .bx{background:var(--accent);border-color:var(--accent)}
.card[aria-pressed="true"] .bx::after{content:"";position:absolute;left:.28rem;top:.09rem;
 width:.26rem;height:.52rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
/* 왜 #005 */
/* ★ 2026-09-12 – 정하신 결과 답이 어긋날 때 다시 보길 권하는 자리(fw_gyeol_drift). 조용히 한 자리 – 경고처럼 칠하지 않는다.
     글자는 본문 크기 그대로, 까닭 목록은 색만 옅게 둔다. */
.drift{margin:1.6rem 0 0;padding:1rem 1.1rem;border:1px solid var(--rule-2);border-left:3px solid var(--accent-line);
  border-radius:0 12px 12px 0;background:var(--surface)}
.drift .driftline{margin:0;font-size:var(--fs-base);line-height:1.75;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.drift .driftwhy{margin:.5rem 0 0;padding-left:1.1rem;font-size:var(--fs-base);line-height:1.7;color:var(--ink-2);word-break:keep-all;overflow-wrap:break-word}
.drift .acts{margin-top:.8rem}
/* ★ 2026-09-12 – 결을 안 정하셨으면 유료로 넘어가는 단추 대신 서는 자리. */
.gyfirst{margin:1.4rem 0 0;padding:1rem 1.1rem;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft)}
.gyfirst .lead{margin:0;color:var(--ink)}
/* 사주 풀이 맨 끝 표시 – 화면에 들어오면 「끝까지 읽으셨다」를 찍는다. 높이 1px 은 들어왔는지 잴 수 있게 둔 것이다. */
.sjend{height:1px}
/* 급함 딱지는 .band li 안에만 그려진다. .card 에는 안 들어간다 */

/* 계수 바 */
/* 왜 #006 */
/* 합침 – 08-gyeol-pq 「아래 고정 막대」 – 아이폰 손잡이만큼 더 띄움 */
.count{position:sticky;bottom:0;z-index:15;background:var(--bg);border-top:1px solid var(--rule);
  box-shadow:0 -12px 18px -14px rgba(20,28,26,.28);
  padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom,0px));margin-top:1rem}
#s3 .card{scroll-margin-bottom:8.5rem}
.count .in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.count .n{font-family:"Gowun Batang",serif;font-size:var(--fs-2xl);font-weight:700;color:var(--accent-ink);line-height:1}
.count .t{font-size:var(--fs-sm);color:var(--muted);flex:1;min-width:8rem}

/* 상황판 */
.band{margin:0 0 1.4rem;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface)}
.band > header{padding:.85rem 1.1rem;background:var(--surface-2);border-bottom:1px solid var(--rule);
 display:flex;align-items:baseline;gap:.6rem}
.band > header h3{margin:0;font-family:"Gowun Batang",serif;font-size:var(--fs-base)}
.band > header span{margin-left:auto;font-family:"Gowun Batang",serif;font-size:var(--fs-sm);color:var(--ink-2)}
.band.now{border-color:var(--accent-line)}
.band.now > header{background:var(--accent-soft);border-bottom-color:var(--accent-line)}
.band ul{list-style:none;margin:0;padding:.4rem 0}
.band li{padding:.6rem 1.1rem;font-size:var(--fs-md);color:var(--ink-2);display:flex;gap:.6rem;align-items:baseline}
.band li .cid{font-size:var(--fs-xs);color:var(--faint);flex:none;width:3.6rem;letter-spacing:-.01em}

.clash{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:11px;
 padding:1.1rem 1.25rem;margin:0 0 .7rem}
.clash h3{margin:0 0 .3rem;font-size:var(--fs-base)}
.clash p{margin:0;font-size:var(--fs-md)}
.locked{position:relative;color:transparent;text-shadow:0 0 9px var(--muted);user-select:none}

/* 페이월 */
.wall{background:var(--surface);border:1px solid var(--accent-line);border-radius:14px;
 padding:1.9rem;margin-top:2rem}
.wall ul{list-style:none;padding:0;margin:1.2rem 0 0}
.wall li{padding:.42rem 0 .42rem 1.4rem;position:relative;font-size:var(--fs-md);color:var(--ink-2);
 border-bottom:1px solid var(--rule)}
.wall li:last-child{border-bottom:none}
.wall li::before{content:"";position:absolute;left:.15rem;top:.95rem;width:.32rem;height:.32rem;
 border-radius:50%;background:var(--accent)}

/* ★ hidden 속성은 무조건 이긴다.
   이 화면은 display 를 지정한 요소마다 「.무엇[hidden]{display:none}」 짝을
   손으로 붙여 왔다. 그러다 두 곳을 빠뜨렸다 –
     · .askmore  → 「6가지 더 보기」가 다 펼친 뒤에도 안 사라졌다
     · .rsec     → 「저희가 기억하고 있는 것」이 비어 있어도 떠 있었다
   짝을 붙이는 방식은 새로 만들 때마다 또 빠진다. 여기서 한 번에 막는다.
   ([hidden] 은 특이도가 클래스와 같아서, !important 없이는 뒤에 온 클래스가 이긴다.) */
[hidden]{display:none!important}

.hr{height:1px;background:var(--rule);margin:2.5rem 0}
/* 첫 화면의 구분선만 좁게 – 여기서 아낀 만큼 물음이 위로 올라온다 */
#s0 .hr{margin:1.5rem 0}
/* 합침 – 03-intro 첫 화면(먹빛) 의 방법 줄. 02 에 있던 margin-bottom:2rem(「갈래 칩과 붙어 숨을 넣는다」)은
   03 의 margin 에 가려 이미 안 걸리던 값이라 뺐다 – 지금 아래 여백은 1.6rem */
#s0 .how{padding:0;margin:2.2rem 0 1.6rem;max-width:none;font-size:var(--fs-md);background:none;
  border:none;border-radius:0;display:flex;flex-direction:column;gap:9px}
.foot{font-size:var(--fs-xs);color:var(--faint);line-height:1.7;margin-top:3rem;
 padding-top:1.3rem;border-top:1px solid var(--rule)}
.foot code{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-xs)}

/* ── 오늘 한 줄 ─────────────────────────────────────────────────
   첫 화면 맨 위. 날마다 바뀌는 유일한 자리라, 다시 오실 이유가 여기서 생긴다. */
.today{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem .7rem;
  margin:0 0 1.6rem;padding:.85rem 1rem;border-radius:12px;
  border:1px solid var(--rule);background:var(--surface-2);
  word-break:keep-all;overflow-wrap:break-word}
.today .day{flex:none;font-size:var(--fs-sm);letter-spacing:.02em;color:var(--muted)}
.today .gz{flex:none;font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;
  color:var(--accent-ink)}
.today .gz .han{font-size:.86em;color:var(--gold);margin-left:.2em}
.today .ln{flex-basis:100%;font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;
  line-height:1.55;letter-spacing:-.01em;color:var(--ink);margin:.1rem 0 0}
.today .ln .sh{display:block;margin-top:.2rem;font-family:"Noto Serif KR","Nanum Myeongjo","Apple SD Gothic Neo",serif;
  font-size:var(--fs-sm);font-weight:400;line-height:1.7;color:var(--ink-2)}

/* 「무엇을 하는 곳인가」 한 줄. 제목만 보면 서비스가 무엇인지 알 수 없다. */
.eyebrow0{margin:0 0 .5rem;font-size:var(--fs-sm);letter-spacing:.01em;color:var(--accent-ink)}


/* 2026-10-15 – 320px 에서 「✓ 생년월일」 · 「✓ 사주」 칸이 2px 넘쳐(t_size) 글자 사이를 좁힌다. 360px 이상은 그대로. */
@media (max-width:340px){.plab{letter-spacing:-.06em;gap:1px}}

/* 2026-10-18 (지시-1018e §3) – 가로 밀림 안전망. hidden 은 머리띠(.prog)의 sticky 를 죽이므로 clip 을 쓴다. */
html,body{overflow-x:clip}

/* 1021f – 카카오톡 문의 링크 한 줄 */
.kakaoline{margin:.4rem 0 0;font-size:var(--fs-sm)}

/* 1021g – 칸 안 안내 글씨는 한 줄에 다 들어가게 작게(--fs-xs). 입력한 이름은 그대로 본문 크기. */
.nameinput::placeholder{font-size:calc(var(--fs-xs) * 1.5);letter-spacing:0}