/* ── 계통 ── */
.tree{margin:1.8rem 0 0;text-align:center}
.tnode{display:inline-block;background:var(--surface);border:1px solid var(--rule);
 border-radius:10px;padding:.7rem 1.1rem;min-width:9rem}
.tnode.top{background:var(--sunken)}
.tnode b{font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;margin-right:.35rem}
.tnode span{font-size:var(--fs-sm);color:var(--muted)}
.tnode em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--muted);margin-top:.25rem}
.tline{width:1px;height:1.1rem;background:var(--rule-2);margin:0 auto}
.tfork{display:grid;grid-template-columns:1fr;height:1.1rem;margin:0 auto;max-width:none;position:relative}
.tfork::before{content:"";position:absolute;top:.75rem;left:25%;right:25%;height:1px;background:var(--rule-2);display:none}
.tfork span{position:relative}
.tfork span:last-child{display:none}
.tfork span::before{content:"";position:absolute;top:0;left:1.6rem;width:1px;height:1.1rem;background:var(--rule-2)}
.tfork span::after{content:"";position:absolute;top:.75rem;left:50%;width:1px;height:.75rem;background:var(--rule-2);display:none}
.tpair{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-left:1.1rem;padding-left:1.1rem;
 border-left:1px solid var(--rule-2);text-align:left}
.tbranch{display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative}
.tbranch::before{content:"";position:absolute;left:-1.1rem;top:1.5rem;width:1.1rem;height:1px;
 background:var(--rule-2)}
/* 합침 – 바로 아래 한 줄 */
.tbranch .tnode{text-align:left;min-width:0;width:100%}
.tarrow{color:var(--faint);font-size:var(--fs-md);line-height:1}
.tleaf{width:100%;border-radius:11px;padding:.95rem 1.05rem;text-align:left;
 border:1px solid var(--rule);background:var(--surface)}
.tleaf.done{border-color:var(--accent-line);background:var(--accent-soft)}
.tleaf.hold{border-color:var(--gold);background:var(--surface-2)}
.tleaf>b:first-child{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;
 display:block;margin-bottom:.35rem}
.tleaf p b{font-weight:600;color:var(--ink)}
.tleaf p{margin:0 0 .5rem;font-size:var(--fs-sm);line-height:1.6}
.tleaf .got{margin:0;padding-top:.5rem;border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--ink)}
.tleaf.done .got{border-top-color:var(--accent-line);color:var(--accent-ink);font-weight:500}
.tleaf.hold .got{border-top-color:var(--rule-2)}

/* ── 혜택 ── */
.benefit{border:1px solid var(--rule);border-radius:12px;background:var(--surface);
 margin:1.2rem 0 0;overflow:hidden}
/* 왜 #016 */
.bhead{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:wrap;gap:.2rem .6rem;padding:.85rem 1.2rem;
 background:var(--surface-2);border-bottom:1px solid var(--rule)}
.bhead h3{margin:0;font-family:"Gowun Batang",serif;font-size:var(--fs-base);min-width:0}
.bhead > span{font-family:"Gowun Batang",serif;font-size:var(--fs-sm);color:var(--muted)}
.benefit ul{list-style:none;margin:0;padding:.5rem 1.2rem 1.1rem}
.benefit li{padding:.55rem 0 .55rem 1.15rem;position:relative;font-size:var(--fs-md);
 color:var(--ink-2);border-bottom:1px solid var(--rule);line-height:1.7}
.benefit li:last-child{border-bottom:none}
/* 왜 #018 */
/* ★ 2026-09-30 – :has() 를 못 읽는 사파리 대응. .nobottom 은 JS(paintSubGate)가 붙인다. */
.benefit li:has(+ li[hidden]),
.benefit li.nobottom{border-bottom:none}
.benefit li::before{content:"";position:absolute;left:0;top:1.05rem;width:.3rem;height:.3rem;
 border-radius:50%;background:var(--accent)}

/* ── 요금제 ── */
.plan{display:block;cursor:pointer;border:1.5px solid var(--rule-2);border-radius:12px;
 padding:1.05rem 1.15rem;background:var(--surface);transition:border-color .15s,background .15s}
.plan:hover{border-color:var(--accent-line)}
.plan.sel{border-color:var(--accent);background:var(--accent-soft)}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.warnbox{border-color:var(--warn-line)!important;background:var(--warn-soft)!important}
.warnbox .tag{color:var(--warn)!important}

/* ══ 결제 전 법정 고지 ══ */
.lawbox{margin:1.1rem 0 0;padding:.95rem 1.05rem;border:1px solid var(--rule-2);border-radius:10px;
  background:var(--accent-soft);font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2);
  word-break:keep-all;overflow-wrap:break-word}
.lawbox p{margin:0 0 .5rem}
.lawbox p:last-child{margin:0}
.lawbox b{color:var(--ink)}
.lawbox a{color:var(--accent-ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ══ 언제든 물어보기 ══ */
/* 왜 #019 */
.opafter{display:block;margin:.5rem 0 0;font-size:var(--fs-base);line-height:1.6;color:var(--ink-2)}
.opafter b{color:var(--ink)}
.bwsub{display:block;margin:.3rem 0 0;font-size:var(--fs-md);color:var(--ink-2)}
/* ── 이 값이 어떻게 나왔는지 ── 글자를 줄이지 않는다. 값 이야기는 눈이 편해야 읽힌다 */
.whyprice{margin:1.1rem 0 0}
.whybox{border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.whybox>summary{list-style:none;cursor:pointer;padding:.9rem 1rem;font-size:var(--fs-base);
  font-weight:600;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.whybox>summary::-webkit-details-marker{display:none}
.whybox>summary::after{content:"펴 보기";margin-left:auto;font-size:var(--fs-md);font-weight:400;color:var(--ink-2)}
.whybox[open]>summary::after{content:"접기"}
.whyin{padding:0 1rem 1.1rem}
.whylead{margin:0 0 .7rem;font-size:var(--fs-base);color:var(--ink-2);line-height:1.6}
.whylist{list-style:none;margin:0;padding:0}
.whylist li{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--line)}
.whylist .wn{flex:1 1 auto;min-width:0}
.whylist .wn b{display:block;font-size:var(--fs-base);font-weight:600;color:var(--ink);line-height:1.5}
.whylist .wn em{display:block;margin:.2rem 0 0;font-style:normal;font-size:var(--fs-base);
  color:var(--ink-2);line-height:1.55;word-break:keep-all}
.whylist .ww{flex:0 0 auto;font-size:var(--fs-base);color:var(--ink-2);white-space:nowrap;padding-top:.1rem}
.whylist .ww small{font-size:var(--fs-md);margin-left:.1rem}
.whysum,.whyrow{display:flex;align-items:baseline;gap:1rem;margin:0;padding:.6rem 0;
  border-top:1px solid var(--line);font-size:var(--fs-base);line-height:1.6}
.whysum{border-top-width:2px;color:var(--ink-2)}
.whysum span,.whyrow span{flex:1 1 auto}
.whysum b{color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1px}
.whyrow b{font-size:var(--fs-lg);color:var(--ink)}
.whyrow em{font-style:normal;font-size:var(--fs-md);color:var(--ink-2)}
.whyrow i{flex:0 0 auto;font-style:normal;font-size:var(--fs-md);color:var(--ink-2);white-space:nowrap}
.whyrow.now{border-top-width:2px}
.whyrow.now b{font-size:var(--fs-xl);color:var(--accent-ink);font-weight:700}
.whyrow.now i{color:var(--accent-ink);font-weight:600}
.whytail{margin:.9rem 0 0;font-size:var(--fs-base);line-height:1.7;color:var(--ink-2);word-break:keep-all}
.whyref{margin:1.1rem 0 0;padding:.9rem 1rem;border-radius:12px;background:var(--sunken)}
.whyref h5{margin:0 0 .6rem;font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.whyref ul{list-style:none;margin:0;padding:0}
.whyref li{display:flex;gap:.8rem;align-items:baseline;padding:.35rem 0;font-size:var(--fs-base);line-height:1.6}
.whyref li span{flex:1 1 auto;color:var(--ink-2);word-break:keep-all}
.whyref li b{flex:0 0 auto;color:var(--ink);white-space:nowrap}
.whyrefnote{margin:.7rem 0 0;font-size:var(--fs-base);line-height:1.65;color:var(--ink-2);word-break:keep-all}
/* ── 한 달이 지나면 ── */
.afterbox{margin:1rem 0 0;padding:1rem 1.1rem;border-radius:14px;background:var(--sunken);border:1px solid var(--line)}
.afterbox h4{margin:0 0 .7rem;font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.abline{margin:0 0 .6rem;font-size:var(--fs-base);line-height:1.7;color:var(--ink-2);word-break:keep-all}
.abline b{color:var(--ink)}
.abwhy{margin:.9rem 0 0;padding:.8rem .9rem;border-radius:10px;background:var(--surface-2);
  font-size:var(--fs-base);line-height:1.75;color:var(--ink-2);word-break:keep-all}
.abwhy b{color:var(--ink)}
.chat,.pqcta{display:block;margin:2.4rem 0 0;padding:1.4rem 1.3rem;border:1.5px solid var(--rule-2);
  border-radius:14px;word-break:keep-all;overflow-wrap:break-word}
.chatlead{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.8;margin:.7rem 0 1.1rem}
/* ══ 막대 – 오행과 성격을 그림으로 ══
   ★ 2026-09-13 – 글로만 쫙 적으니 무엇이 많고 적은지 안 보인다는 지적.
     글자 막대(▓░)는 조잡해서 안 쓴다. 서버가 숫자를 주고 화면이 그린다. */
.chart{margin:.9rem 0 .2rem;display:flex;flex-direction:column;gap:.75rem}
.crw{display:grid;grid-template-columns:5.4rem 1fr auto;align-items:center;
  gap:.55rem;column-gap:.7rem}
.crw .cnm{font-size:var(--fs-md);font-weight:600;color:var(--ink);line-height:1.35;
  word-break:keep-all}
.crw .cnm small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--muted);
  letter-spacing:.01em}
.crw .cbar{height:1.15rem;border-radius:999px;background:var(--rule);overflow:hidden;position:relative}
.crw .cbar i{display:block;height:100%;border-radius:999px;background:var(--accent-ink);
  transition:width .45s ease}
.crw .cvl{font-size:var(--fs-md);font-weight:600;color:var(--ink-2);
  min-width:2.6rem;text-align:right;font-variant-numeric:tabular-nums}
/* 「36점」이 아니라 「36%」다 – 또래 100명 중 내 자리이지 시험 점수가 아니다.
   아래 「성격 × 결」 대목도 % 로 적으므로 같은 값이 두 이름으로 나가지 않는다. */
.crw.trait .cvl{min-width:3.4rem}
/* 다섯 기운은 저마다 빛깔이 있다. 오래된 표(청·적·황·백·흑)를 그대로 쓴다. */
.crw.oh-목 .cbar i{background:#3f7d58}
.crw.oh-화 .cbar i{background:#c4553b}
.crw.oh-토 .cbar i{background:#b08946}
.crw.oh-금 .cbar i{background:#8a8f98}
.crw.oh-수 .cbar i{background:#3c5a80}
.crw.zero .cbar i{background:repeating-linear-gradient(90deg,var(--rule-2) 0 4px,transparent 4px 8px)}
.crw.zero .cvl{color:var(--warn)}
.cnm em{font-style:normal;font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);
  margin-left:.25rem;vertical-align:.05em}
.ckeys{grid-column:1 / -1;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;
  margin:-.3rem 0 .1rem;word-break:keep-all}
/* 성격 다섯 갈래는 한가운데(50)를 금으로 긋는다 */
.crw.trait .cbar::after{content:"";position:absolute;left:50%;top:-.18rem;bottom:-.18rem;width:2px;
  background:var(--ink-2);opacity:.5;z-index:2;border-radius:1px}
.crw.trait .cbar i{background:#8a8f98}
.crw.trait.hi .cbar i{background:#3f7d58}
.crw.trait.lo .cbar i{background:#3c5a80}
.cnote{font-size:var(--fs-sm);color:var(--muted);margin:.5rem 0 0;line-height:1.7}

/* ══ 다 읽고 나서 갈 자리 ══ */
.nextgrid{display:flex;flex-direction:column;gap:.7rem;margin-top:.9rem}
.nxt{display:block;text-align:left;width:100%;font:inherit;cursor:pointer;
  border:1.5px solid var(--rule-2);border-radius:12px;background:var(--surface);
  padding:1rem 1.1rem;transition:border-color .15s}
.nxt:hover{border-color:var(--accent-line)}
.nxt b{display:block;font-size:var(--fs-base);color:var(--ink);margin-bottom:.25rem}
.nxt span{display:block;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;word-break:keep-all}

/* 왜 #020 */
#chatlog{display:flex;flex-direction:column;gap:.35rem;
  max-height:min(28rem,58vh);overflow-y:auto;overscroll-behavior:contain;
  padding:.9rem .85rem;margin:.5rem 0 0;
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  scroll-padding-block:.5rem}
#chatlog:empty{display:none}

/* 한 줄 = 말풍선 + 시각. 내 말은 오른쪽, 답은 왼쪽. */
.crow{display:flex;align-items:flex-end;gap:.35rem;max-width:100%}
.crow.me{align-self:flex-end;flex-direction:row}
.crow.you{align-self:flex-start;flex-direction:row}
.crow + .crow{margin-top:.3rem}
.ctime{font-size:var(--fs-xs);color:var(--faint);white-space:nowrap;padding-bottom:.2rem;
  letter-spacing:-.01em}

.cq,.ca{max-width:min(28rem,76vw);padding:.6rem .85rem;font-size:var(--fs-md);line-height:1.8;
  white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;border-radius:16px}
.cq{background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent-line);
  border-bottom-right-radius:5px}
.ca{background:var(--bg);color:var(--ink);border:1px solid var(--rule-2);
  border-bottom-left-radius:5px;scroll-margin-top:.6rem}
.ca.err{background:transparent;color:var(--warn);border-style:dashed}
.ca.think{color:var(--muted)}
.ca.think::after{content:" ···";animation:cadot 1.3s ease-in-out infinite}
@keyframes cadot{0%,100%{opacity:.25}50%{opacity:1}}

/* 날짜가 바뀌는 자리에 금 한 줄 */
.chatday{align-self:center;font-size:var(--fs-xs);color:var(--muted);letter-spacing:.03em;
  background:var(--rule);border-radius:999px;padding:.2rem .75rem;margin:.5rem 0}

/* 입력칸 – 한 줄로 시작해서 글이 넘치면 저절로 커진다 */
.chatin{display:flex;gap:.4rem;align-items:center;margin-top:.6rem;
  padding:.25rem .3rem .25rem .55rem;
  border:1.5px solid var(--rule-2);border-radius:22px;background:var(--surface)}
.chatin:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.chatin textarea{flex:1;font:inherit;font-size:var(--fs-md);line-height:1.55;
  padding:.4rem .2rem;border:0;background:transparent;color:var(--ink);
  resize:none;overflow-y:auto;height:2.3rem;max-height:8rem;display:block}
.chatin textarea:focus{outline:none}
.chatin .btn{flex:0 0 auto;border-radius:999px;padding:.5rem 1rem;line-height:1.2;
  font-size:var(--fs-sm);align-self:flex-end;margin-bottom:.05rem}
.chatnote{font-size:var(--fs-xs);color:var(--muted);margin:.7rem 0 0;line-height:1.7}

/* ══ 풀이 편지 파일럿 (2026-09-27) ══ 챗봇 입력칸(.chatin)과 달리 여러 줄이라 세로로 쌓는다. */
.letterin{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;margin-top:.3rem}
.letterin textarea{width:100%;font:inherit;font-size:var(--fs-md);line-height:1.7;
  padding:.85rem 1rem;border:1.5px solid var(--rule-2);border-radius:12px;
  background:var(--surface);color:var(--ink);resize:vertical}
.letterin textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.letterin .note{margin:0;color:var(--warn);font-size:var(--fs-sm)}
.letterconsent{margin:0;font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.letterwait{margin:.3rem 0 0;font-size:var(--fs-md);line-height:1.8;color:var(--ink-2)}
.letterdone{margin:0;font-size:var(--fs-md);line-height:1.8;color:var(--ink)}
.letterc{margin:0 0 1.3rem;padding:1.1rem 1.2rem;background:var(--card);
  border:1px solid var(--line);border-radius:12px}
.letterh{margin:0 0 .7rem;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);
  line-height:1.4;color:var(--ink)}
.letterbody{font-size:var(--fs-base);line-height:1.9;color:var(--ink-2);word-break:keep-all}
.letterdate{margin:.9rem 0 0;font-size:var(--fs-xs);color:var(--muted)}

/* ══ 전문풀이 신청 (2026-09-30) – 신청 전 · 기다리는 중 화면은 #report·#pairout 안에 fr-paper 와 같은 틀로 선다 ══ */
.reqcard{padding:1.6rem 1.4rem}
@media (max-width:520px){.reqcard{padding:1.6rem 1rem}}
/* 굳힌 풀이 – 열어 드린 날 한 줄(2026-10-03). 글자는 --fs-md 그대로, 줄이지 않는다. */
.fr-pqnote{margin:0 0 1.4rem;padding:1rem 1.2rem;border:1px solid var(--rule);background:var(--surface)}
.fr-pqnote p{margin:0 0 .8rem;font-size:var(--fs-base);color:var(--ink-2)}
.fr-pqnote .acts{margin:0}
.fr-since{display:block;color:var(--muted);font-size:var(--fs-md);margin:0 0 .6rem}
.reqdepth{margin:0 0 1rem;font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.reqdepth small{display:block;margin-top:.25rem;font-size:var(--fs-xs);font-weight:400;color:var(--muted)}
.reqqh{margin:1.2rem 0 .5rem;font-size:var(--fs-md);font-weight:600;color:var(--ink-2)}
.reqqbox{display:flex;flex-direction:column;gap:.7rem}
.reqqbox textarea{width:100%;font:inherit;font-size:var(--fs-md);line-height:1.7;min-height:3.4rem;
  padding:.85rem 1rem;border:1.5px solid var(--rule-2);border-radius:12px;
  background:var(--surface);color:var(--ink);resize:vertical}
.reqqbox textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.reqface{margin-top:1.3rem}
.reqface .fine{margin:.5rem 0 0;font-size:var(--fs-xs);color:var(--muted);line-height:1.7}
.reqface .okline{margin-top:.8rem}
.reqqlist{margin:0;padding:0 0 0 1.2rem;font-size:var(--fs-md);line-height:1.9;color:var(--ink-2)}
.reqqa{margin-top:0}
.reqqarow{padding:.7rem 0;border-top:1px solid var(--rule)}
.reqqarow:first-child{border-top:none;padding-top:0}
.reqqarow .q{margin:0 0 .3rem;font-weight:700;color:var(--ink)}
.reqqarow .a{font-size:var(--fs-md);line-height:1.8;color:var(--ink-2)}
.reqmorebox{margin:1.6rem 0 0;padding-top:1.2rem;border-top:1px solid var(--rule)}
.reqmoreform{margin-top:1rem}
.reqmoreform[hidden]{display:none}
/* ★ 2026-09-30 – 관상(얼굴 재기, js/16-face.js). 사진·영상은 안 보낸다 – 이 폰 안에서만 잰다. */
.reqfacelead{margin:0 0 .6rem;font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.warn{margin:.6rem 0;font-size:var(--fs-md);font-weight:600;color:var(--warn);
  background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:8px;padding:.6rem .8rem}
/* ★ 2026-10-01 – 화면 안 카메라(얼굴 타원 틀). 영상 + 틀(svg)을 한 칸에 겹쳐 두고, 그 칸을 통째로
   거울처럼 좌우 반전한다 – 그러면 틀 자리 계산(js)은 반전 안 한 원본 좌표만 다루면 된다. */
.facecam-msg{margin:0 0 .6rem;font-size:var(--fs-md);font-weight:700;color:var(--ink);text-align:center;
  min-height:1.6em}
.facecam-wrap{position:relative;width:100%;max-width:22rem;margin:0 auto;border-radius:14px;overflow:hidden;
  background:#000;aspect-ratio:3/4;transform:scaleX(-1)}
.facecam-video{width:100%;height:100%;object-fit:cover;display:block}
.facecam-guide-host{position:absolute;inset:0;pointer-events:none}
.facecam-guide-host svg{width:100%;height:100%;display:block}
#facecamarea .acts{justify-content:center;margin-top:.9rem}

/* 값 표시. 고르는 것이 아니라 사시는 것 하나라 카드 한 장으로 둔다. */
.onlyprice{display:block;margin:1.6rem 0 0;padding:1.2rem 1.1rem;text-align:center;
 border:1.5px solid var(--accent-line);border-radius:12px;background:var(--surface)}
.onlyprice.waiting{opacity:.55}
.onlyprice .opk{display:block;font-size:var(--fs-md);color:var(--muted);letter-spacing:.04em}
.onlyprice .opp{display:block;font-family:"Gowun Batang",serif;font-size:var(--fs-3xl);
 font-weight:700;color:var(--ink);line-height:1.15;margin:.25rem 0 .1rem}
.onlyprice .opp small{font-size:var(--fs-sm);font-weight:400;color:var(--muted);font-family:inherit}
.onlyprice .opd{display:block;font-size:var(--fs-md);color:var(--ink-2);margin-top:.35rem}
/* ══ 고르실 것 셋 ══
   ★ 손님이 사십에서 육십대다. 셋을 옆으로 늘어놓으면 좁은 화면에서
     글자가 줄어든다. 세로로 쌓고 글자를 안 줄인다. */
.plans3{display:flex;flex-direction:column;gap:.7rem;margin:1.6rem 0 0}
.plans3[hidden]{display:none}
.p3{display:block;cursor:pointer;border:1.5px solid var(--rule-2);border-radius:12px;
 padding:1rem 1.1rem;background:var(--surface);transition:border-color .15s,background .15s}
.p3:hover{border-color:var(--accent-line)}
/* ★ 2026-09-30 – :has() 를 못 읽는 사파리 대응. .sel 은 JS(paintPick)가 붙인다. */
.p3:has(input:checked),
.p3.sel{border-color:var(--accent-ink);border-width:2px;
 background:var(--accent-soft);padding:calc(1rem - .5px) calc(1.1rem - .5px)}
.p3:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.p3 input{position:absolute;opacity:0;width:0;height:0}
.p3b{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.p3n{font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;color:var(--ink)}
.p3v{margin-left:auto;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);
 font-weight:700;color:var(--ink);white-space:nowrap}
.p3s{display:block;margin-top:.45rem;font-size:var(--fs-md);line-height:1.75;
 color:var(--ink-2);word-break:keep-all;overflow-wrap:break-word}
/* 값 차이는 사실이라 적는다. 「가장 많이 고르십니다」 같은 말은 안 쓴다 –
   아직 아무도 안 샀다. */
.p3win{display:block;margin-top:.3rem;color:var(--accent-ink);font-weight:700}
.p3sep{display:block;font-size:var(--fs-md);color:var(--muted)}
.p3.mark{border-color:var(--accent-line)}

/* 값 아래에 「무엇을 얼마 동안」을 두 줄로 편다.
   ★ 값 상자는 가운데 정렬이지만 이 목록은 왼쪽으로 되돌린다 –
     번호가 붙은 두 줄은 가운데로 두면 어느 쪽이 ①인지 눈이 못 따라간다.
   ★ 글자를 줄이지 않는다. 사는 자리에서 제일 크게 읽혀야 하는 두 줄이다. */
.buywhat{list-style:none;counter-reset:bw;margin:1.1rem 0 0;padding:0;text-align:left;
 border-top:1px solid var(--rule-2)}
.buywhat li{counter-increment:bw;position:relative;padding:.85rem 0 .85rem 2rem;
 border-bottom:1px solid var(--rule)}
.buywhat li:last-child{border-bottom:none}
.buywhat li::before{content:counter(bw,decimal);position:absolute;left:0;top:.95rem;
 display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;
 border-radius:50%;background:var(--accent);color:#fff;
 font-family:"IBM Plex Mono",monospace;font-size:var(--fs-sm);font-weight:700;line-height:1}
.buywhat .bwt{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.buywhat .bwt b{font-family:"Gowun Batang",serif;font-size:var(--fs-base);color:var(--ink)}
.buywhat .bwt em{font-style:normal;font-size:var(--fs-md);color:var(--accent-ink);
 font-weight:700;white-space:nowrap}
.buywhat .bwd{display:block;margin-top:.3rem;font-size:var(--fs-md);color:var(--ink-2);
 line-height:1.75;word-break:keep-all;overflow-wrap:break-word}
.buyafter{margin:.9rem 0 0;padding-top:.85rem;border-top:1px solid var(--rule-2);text-align:left;
 font-size:var(--fs-md);color:var(--ink-2);line-height:1.8;
 word-break:keep-all;overflow-wrap:break-word}
.buyafter b{color:var(--ink)}
/* ★ 2026-09-30 – 다시 보기(전에 전체 풀이를 받으신 분) 안내. .opafter 와 같은 자리·모양. */
.opreread{display:block;margin:.5rem 0 0;font-size:var(--fs-base);line-height:1.6;color:var(--ink-2)}
.opreread b{color:var(--ink)}
/* ★ 2026-09-30 – 값 목록 한 곳(궁합·선물·더 묻기). 결제 상자 아래, 짧게. */
.pricelist{margin:1.4rem 0 0;padding:1rem 1.1rem;border:1px solid var(--rule-2);border-radius:10px;
  background:var(--surface-2);text-align:left}
.prih{font-weight:700;color:var(--ink);margin:0 0 .5rem;font-size:var(--fs-md)}
.prow{padding:.5rem 0;border-top:1px solid var(--rule);font-size:var(--fs-md);color:var(--ink-2)}
.prow:first-of-type{border-top:none}
.prow b{display:block;color:var(--ink);font-weight:700;margin-bottom:.15rem}
.prow > span{display:block;word-break:keep-all}
/* 아래 두 묶음이 위 요약의 ①② 를 편 것임을 번호로 잇는다 */
/* 왜 #021 */
.bno{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;
 margin-right:.15rem;border-radius:50%;background:var(--accent-ink);color:var(--surface);
 font-size:var(--fs-md);font-weight:700;line-height:1;vertical-align:.05em;
 font-family:"IBM Plex Mono",monospace}
/* 한 달 맛보기 묶음은 본 묶음과 살짝 구분해 둔다 – 기간이 있는 것이라. */
.benefit.trial{border-style:dashed}

/* ══ 구독 관리 ══ */
.manage{display:block;margin-top:2rem}
.manage p{font-size:var(--fs-md);color:var(--ink-2);line-height:1.8;margin:.6rem 0 0;
  word-break:keep-all;overflow-wrap:break-word}

/* ══════════════════════════════════════════════════════════════════════
   전체 풀이 – 새 틀 (2026-09-28)  참고\fullreading-mockup.html
   ★ 2026-09-29 – 무료 화면(s2·s6·s7·s11)도 이 모양을 쓴다. 그래서 색 변수는
     01-token.css :root 로 옮겼다(전에는 #report 안에서만 정의했다).
   무료 상황판의 .rsec·.rblk·.rnote 는 그대로 두고 이 새 이름(.fr-*)만 공용으로 쓴다.
   글자 크기는 01-token.css 의 --fs-* 만 쓴다. en dash(–)만. */
.fr-paper{max-width:44rem;margin:0 auto;background:var(--fr-paper);
  padding:2.2rem 1.6rem 2.6rem;border:1px solid var(--fr-rule);border-radius:14px}
@media (max-width:520px){.fr-paper{padding:1.6rem 1rem 2rem}}

/* 전통 문양 – 번개무늬 띠 · 삶의결 마크 */
.fr-band{height:16px;background-repeat:repeat-x;background-size:44px 16px;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16' viewBox='0 0 44 16'%3E%3Cpath d='M0 12 C6 12 7 4 13 4 C18 4 19 10 15 10.5 C12 11 11.5 7.5 14 7.3 M15 10.5 C20 11 24 12 28 12 C34 12 35 4 41 4 C43 4 44 5 44 5' fill='none' stroke='%238A6E2F' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.fr-tg{display:inline-block;width:22px;height:22px;flex:none;background-size:contain;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.01 -1.01 2.02 2.02'%3E%3Cg transform='rotate(-90)'%3E%3Ccircle r='1' fill='%238A6A2A'/%3E%3Cpath d='M1 0A1 1 0 0 1 -1 0A.5 .5 0 0 1 0 0A.5 .5 0 0 0 1 0Z' fill='%232B2B2A'/%3E%3C/g%3E%3C/svg%3E")}
.fr-tbar{display:flex;align-items:center;gap:.6rem}.fr-tbar .fr-band{flex:1}
.fr-tg.big{width:54px;height:54px;margin:.9rem auto .2rem;display:block}
/* 1026 – 차례로 올라가는 떠 있는 단추(전문풀이). 지름 56px 이상 · 색은 변수만 · 밝게 · 어둡게 같은 모양. */
.tocfab{position:fixed;right:16px;bottom:96px;z-index:49;width:56px;height:56px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;
  background:var(--surface);color:var(--gold);border:1px solid var(--rule-2);
  box-shadow:0 6px 16px color-mix(in srgb,var(--ink) 16%,transparent);cursor:pointer}
.tocfab[hidden]{display:none}
.tocfab svg{width:22px;height:22px}
.tocfab span{font-size:var(--fs-sm);line-height:1;color:var(--ink-2)}

/* 표지 */
.fr-cover{text-align:center;padding:.5rem 0 1.6rem}
.fr-cover .k{font-size:var(--fs-sm);letter-spacing:.3em;color:var(--gold);margin:1.4rem 0 .6rem}
.fr-cover h1{font-family:"Gowun Batang",serif;font-size:var(--fs-2xl);margin:0 0 .4rem;line-height:1.4;word-break:keep-all}
.fr-cover .sub{color:var(--ink-2);font-size:var(--fs-md);margin:0 0 1.2rem;word-break:keep-all}
.fr-palja{display:inline-grid;grid-template-columns:repeat(4,3.2rem);gap:.3rem;margin:.4rem 0 .4rem}
.fr-palja span{font-size:1.7rem;line-height:1.35;color:var(--ink);font-family:"Gowun Batang",serif}
.fr-palja span.me{color:var(--fr-red);font-weight:700}
.fr-palja span.to{color:var(--gold)}
.fr-pnote{font-size:var(--fs-sm);color:var(--muted);margin:0 0 1.2rem;word-break:keep-all}

/* 차례 */
.fr-toc{margin:1.4rem 0 2rem;padding:1rem 1.2rem;border:1px solid var(--fr-rule);background:var(--surface-2);border-radius:10px}
.fr-toc .t{font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-lg);text-align:center;margin:0 0 .6rem}
/* 10-25 대표님 – 차례는 한 줄에 한 장씩 길게 */
.fr-toc ol{margin:0;padding:0;list-style:none}
.fr-toc li{break-inside:avoid;border-bottom:1px dotted var(--fr-rule)}
.fr-toc a{display:flex;gap:.6rem;padding:.55rem 0;color:var(--ink);text-decoration:none;font-size:var(--fs-md)}
.fr-toc a i{font-style:normal;color:var(--gold);min-width:1.5rem}

/* 장(章) 제목 */
.fr-ch{margin:2.6rem 0 0;scroll-margin-top:1rem}
.fr-ch > h2{font-family:"Gowun Batang",serif;font-size:var(--fs-xl);text-align:center;margin:.6rem 0 .7rem;letter-spacing:.04em}
.fr-ch > h2 small{display:block;font-size:var(--fs-sm);color:var(--gold);letter-spacing:.3em;font-weight:400;margin-bottom:.1rem}
.fr-ch > h2 + .fr-band{margin-bottom:1.4rem}

/* 블록 – 소제목 ◆ + 본문. rnote·basis·「N편」 딱지 없음(시안대로) */
.fr-blk h3{font-size:var(--fs-lg);margin:1.6rem 0 .6rem;font-weight:700;word-break:keep-all}
.fr-blk h3::before{content:"◆ ";color:var(--gold);font-size:.8em}
.fr-blk p{font-size:var(--fs-base);line-height:1.85;color:var(--ink-2);margin:0 0 1rem;
  word-break:keep-all;overflow-wrap:break-word}
.fr-blk p:first-of-type{margin-top:0}
.fr-blk b{color:var(--ink)}

/* 세 겹 상자 */
.fr-three{margin:1.4rem 0;border:1px solid var(--fr-rule);background:var(--surface-2);border-radius:10px;overflow:hidden}
.fr-three .hd{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem .8rem;
  border-bottom:1px solid var(--fr-rule);font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-lg)}
.fr-three .cols{display:grid;grid-template-columns:repeat(3,1fr)}
.fr-three .cols div{padding:.8rem .8rem;border-right:1px dotted var(--fr-rule)}
.fr-three .cols div:last-child{border-right:none}
.fr-three .cols b{display:block;font-size:var(--fs-md);color:var(--gold);margin-bottom:.15rem}
.fr-three .cols b small{font-weight:400;color:var(--muted)}
.fr-three .cols span{font-size:var(--fs-md);line-height:1.75;display:block;color:var(--ink-2);word-break:keep-all}
.fr-three .sum{margin:0;padding:.85rem 1rem;border-top:1px solid var(--fr-rule);background:var(--accent-soft);
  font-size:var(--fs-base);line-height:1.8;color:var(--ink-2);word-break:keep-all}
.fr-three .sum b{color:var(--ink)}
@media (max-width:520px){.fr-three .cols{grid-template-columns:1fr}.fr-three .cols div{border-right:none;border-bottom:1px dotted var(--fr-rule)}}
.fr-three.sm .hd{font-size:var(--fs-base);justify-content:flex-start}
.fr-three.sm{margin:1.6rem 0 0}

/* 성품 – 서른 가지(facet30) */
.fr-f30{margin:1rem 0 1.2rem;padding:1rem 1.1rem;border:1px solid var(--fr-rule);background:var(--surface-2);border-radius:10px}
.fr-picks{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0 0 1.1rem}
@media (max-width:460px){.fr-picks{grid-template-columns:1fr}}
.fr-picks > div{padding:.7rem .9rem;background:var(--fr-paper);border:1px solid var(--fr-rule);border-radius:8px}
.fr-picks .h{font-weight:700;margin:0 0 .3rem;font-size:var(--fs-md);word-break:keep-all}
.fr-picks .up .h{color:var(--accent-ink)} .fr-picks .dn .h{color:var(--gold)}
.fr-picks span{display:flex;justify-content:space-between;font-size:var(--fs-base);line-height:1.8}
.fr-picks em{font-style:normal;color:var(--muted);font-size:var(--fs-md)}
.fr-grp{margin:0 0 .8rem}
.fr-grp > p{margin:0 0 .2rem;font-weight:700;font-size:var(--fs-md)}
.fr-row{display:grid;grid-template-columns:7rem 1fr 2.8rem;align-items:center;gap:.6rem;font-size:var(--fs-md);line-height:1.85}
/* ★ 2026-09-29 대표님 – 가운데선에서 좌우로 뻗던 막대를 왼쪽(0)에서 차오르는 보통 막대로.
   기본은 청록 한 가지, 「강한 것」 셋만 진하게, 「약한 것」 셋만 옅은 황토. 가운데선 · 축 글씨는 없앤다. */
.fr-row .tr{position:relative;height:10px;background:var(--rule);border-radius:5px}
.fr-row .tr i{position:absolute;left:0;top:1px;bottom:1px;border-radius:4px;background:#0F8F80}
.fr-row.top .tr i{background:#0B6B5F}
.fr-row.low .tr i{background:#D9C6A0}
.fr-row .pc{text-align:right;color:var(--muted);font-size:var(--fs-sm)}
.fr-row.top{font-weight:700}
@media (max-width:460px){.fr-row{grid-template-columns:1fr auto;row-gap:.2rem}
  .fr-row .tr{grid-column:1/-1;order:3}}

/* 바탕(접힘) */
.fr-details{margin-top:2.6rem;border-top:1px solid var(--fr-rule);padding-top:1rem}
.fr-details summary{cursor:pointer;font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-lg);list-style:none}
.fr-details summary::after{content:" ⌄";color:var(--muted)}
.fr-details[open] summary::after{content:" ⌃"}
.fr-details p{font-size:var(--fs-md);color:var(--ink-2);line-height:1.8;margin:.7rem 0 0;word-break:keep-all}
.fr-sign{text-align:center;margin-top:2.2rem;color:var(--ink-2);font-size:var(--fs-base);line-height:1.9}

/* 풀이 아래 한 줄 적기 – 예전엔 「겹치는 것」 장 안에 있었다(2026-09-28) */
.fr-said{max-width:44rem;margin:1.6rem auto 0;padding:1.2rem 1.4rem;
  border:1px solid var(--rule-2);border-radius:12px;background:var(--surface)}

/* ★ 2026-10-20 (지시-1020b) – 결제 화면(s7): 머리 · 받으시는 것 · 미리 보기 · 진행 안내 · 맨 아래 「함께 보면 좋은 것」 */
.s7gh{margin:0 0 .5rem;font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;color:var(--ink);word-break:keep-all}
.s7get,.s7prev,.s7prog{margin:1rem 0 0}
.s7gl{margin:0;padding:0;list-style:none;font-size:var(--fs-base);line-height:1.75;color:var(--ink-2);word-break:keep-all}
.s7gl li{padding:.3rem 0 .3rem 1rem;position:relative}
.s7gl li::before{content:"";position:absolute;left:0;top:.8rem;width:.3rem;height:.3rem;border-radius:50%;background:var(--accent)}
.s7steps{list-style:decimal;padding-left:1.4rem}
.s7steps li{padding:.3rem 0}
.s7steps li::before{content:none}
.s7endnote{margin:.7rem 0 0;font-size:var(--fs-sm);color:var(--muted);word-break:keep-all}
/* 2026-10-23 (지시-1022d) – 태어난 시각 한 줄(오전/오후 · 시 · 분 · 모름). 360 에서 넘치지 않게 줄을 감는다. */
/* 지시-1022n – 시 · 분 한 줄. 360 폭에서도 들어가게 단추 · 칸을 줄였다(글자 --fs-sm). */
.hourbox{display:flex;flex-wrap:nowrap;gap:.35rem;align-items:center;margin:.5rem 0 0}
.hourbox .hapg{display:inline-flex;flex:none;border:1px solid var(--rule-2);border-radius:10px;overflow:hidden}
.hourbox .hap{min-width:3.2rem;min-height:40px;padding:0 .4rem;border:0;background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.hourbox .hap.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.hourbox .hwrap{display:inline-flex;flex:none;align-items:center;gap:.2rem;font-size:var(--fs-sm);color:var(--ink-2)}
.hourbox .hh,.hourbox .hmin{width:3rem;height:40px;padding:0 .2rem;text-align:center;font:inherit;font-size:var(--fs-base);border:1px solid var(--rule-2);border-radius:8px;background:var(--surface-2);color:var(--ink)}
/* 생년월일 칸(.inputs)의 입력 칸 규칙이 너비를 덮지 않게 한 단계 더 세게 */
.inputs .hourbox .hh,.inputs .hourbox .hmin{width:3rem;min-width:0}
/* 2026-10-23 – 결제 전 「약 1~2일 뒤」 한 줄. 잘 보이게 금색 선과 옅은 바탕을 준다(s7pay 와 같은 꼴). */
.s7due{margin:.9rem 0 0;padding:.7rem .9rem;border-left:3px solid var(--accent-line);background:var(--accent-soft);
  border-radius:0 10px 10px 0;font-size:var(--fs-md);line-height:1.7;color:var(--ink);word-break:keep-all}
.s7prev .lockblk{margin-top:.5rem}
.lockone h4{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.lockic{width:14px;height:14px;flex:none;color:var(--muted)}
.pricelist{margin:1.8rem 0 0;font-size:var(--fs-sm)}
.pricelist .prih{font-size:var(--fs-sm);color:var(--muted)}
.pricelist .prow{font-size:var(--fs-sm);padding:.3rem 0}

/* ★ 2026-10-20 (지시-1020c) – 신청 처지 셋 · 「+ 하나 더」 · 손님께 드리는 글 */
.situbox{margin:0 0 1.1rem;padding:.9rem .9rem .8rem;border:1px solid var(--rule);border-radius:12px;background:var(--surface-2)}
.situh{margin:.8rem 0 .45rem;font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.situh:first-child{margin-top:0}
.situh small{display:block;margin-top:.15rem;font-size:var(--fs-xs);font-weight:400;color:var(--muted)}
.situbtns{display:flex;flex-wrap:wrap;gap:.4rem}
.situb{min-height:40px;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--fs-md);cursor:pointer}
.situb.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.situbox textarea{margin-top:.2rem}
.reqletter{margin:0 0 1.4rem;padding:1rem 1.1rem;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.reqletter h3{margin:0 0 .6rem;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.reqletter p{margin:0 0 .7rem;font-size:var(--fs-base);line-height:1.85;color:var(--ink-2);word-break:keep-all}
.reqletter p:last-child{margin-bottom:0}
.situbox textarea{display:block;width:100%;box-sizing:border-box;min-height:5.2rem;margin-top:.3rem;font:inherit;font-size:var(--fs-md);line-height:1.6;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}

/* ★ 2026-10-20 (지시-1020d) – 「고민상담」 안내 한 줄 */
.askhint{margin:.8rem 0 0}
.linkbtn{background:none;border:0;padding:0;margin:0;color:var(--accent-ink);text-decoration:underline;font:inherit;cursor:pointer}

/* ★ 2026-10-21 (지시-1021a) – 결제 덮개 한 장 (토스 결제위젯이 그려지는 자리) */
.paysheet{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(20,22,21,.42)}
.paysheet[hidden]{display:none}
.paybox{width:100%;max-width:30rem;max-height:90vh;overflow:auto;padding:1.2rem 1.1rem;border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.paybox h3{margin:0 0 .4rem;font-family:"Gowun Batang",serif;font-size:var(--fs-lg)}
.paybox .acts{justify-content:flex-end;margin-top:.9rem}

/* ★ 2026-10-22 (지시-1021g) – 후기: 전문풀이 맨 끝 한 줄 · 내 풀이 한 줄 · 별 다섯 · 글칸 */
.revask,.revmine{margin:1.4rem 0 0;padding:1rem 1.1rem;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.revask p,.revmine p{margin:0 0 .6rem;font-size:var(--fs-sm);color:var(--ink-2);word-break:keep-all}
#revsheet textarea{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-md);line-height:1.6;padding:.7rem .85rem;border:1.5px solid var(--rule-2);border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical}
#revsheet textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
#revsheet .field{margin:.2rem 0 .4rem}

/* 1024m – 「PDF로 받기」 단추: 목차 바로 아래 폭 100% */
.fr-pdf{display:block;width:100%;margin:0 0 2rem;box-sizing:border-box}

/* 1024m – 표지 편지 · 달마다 표(360 폭 한 줄) */
.fr-letter{margin:0 0 1.4rem;background:var(--surface);border:1px solid var(--fr-rule);border-left:3px solid var(--gold)}
.fr-letter-h{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);margin:0 0 .6rem}
.fr-letter-sign{text-align:right;color:var(--muted);margin:1rem 0 0;font-family:"Gowun Batang",serif}
.fr-mtab{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;margin:.5rem 0 .9rem;padding:.5rem .3rem;border:1px solid var(--fr-rule);border-radius:8px;background:var(--surface-2);text-align:center}
.fr-mtab span{min-width:0}
.fr-mtab small{display:block;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.fr-mtab b{font-family:"Gowun Batang",serif;font-size:var(--fs-md);font-weight:700}

/* 10-25 – 신청 상자 · 후기 칸 버튼도 폭을 채워 세로로(CLAUDE.md 모양 규칙) */
.reqcard .acts .btn,.revask .acts .btn{flex:1 1 100%;box-sizing:border-box}
#chatbox[hidden]{display:none !important}

/* 2026-10-25 대표님 – 전문풀이 첫머리에 힘을 싣는다: 편지 첫 문단 · 올해 상자, 01장 「한 줄로 말하면」 · 여덟 글자 큰 표 · 세 가지 */
/* 10-25 – 편지 글은 한 크기로. 강조는 금빛 상자 하나로만 */
/* 덧붙임 8 – 편지 글 문단은 본문(.fr-blk p)과 같은 크기 · 줄 간격. 첫 문단 gist 는 제 크기(같은 --fs-base)를 지킨다. */
.fr-letter p:not(.gist){font-size:var(--fs-base);line-height:1.85;color:var(--ink-2);word-break:keep-all;overflow-wrap:break-word}
.fr-letter .fr-l-lead p{word-break:keep-all}
.fr-letter .fr-l-hl{margin:1.2rem 0;padding:.9rem 1rem;border:1px solid var(--gold);border-radius:10px;background:color-mix(in srgb,var(--gold) 7%,transparent)}
.fr-letter .fr-l-hl p{margin:0;word-break:keep-all}
.fr-hero{text-align:center;padding:.6rem 0 1.4rem}
.fr-hero .k{letter-spacing:.3em;color:var(--gold);font-size:var(--fs-sm);margin:.2rem 0 .8rem}
.fr-hero .big{font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-2xl);line-height:1.45;margin:0 0 1rem;word-break:keep-all;color:var(--ink)}
.fr-hero .fr-band{margin:0 auto 1.2rem;max-width:12rem}
.fr-hero p:not(.k):not(.big){text-align:left}
.fr-pbig{margin:1.4rem 0;padding:1.2rem .8rem 1rem;border:1px solid var(--fr-rule);border-top:3px solid var(--gold);border-radius:12px;text-align:center}
.fr-pbig .k{letter-spacing:.2em;color:var(--gold);font-size:var(--fs-sm);margin:0 0 .8rem}
.fr-pbig .grid{display:grid;gap:.4rem;max-width:22rem;margin:0 auto}
.fr-pbig .col{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.4rem 0;border-radius:8px}
.fr-pbig .col.me{background:color-mix(in srgb,var(--fr-red) 8%,transparent)}
.fr-pbig .lab{font-size:var(--fs-xs);color:var(--muted)}
.fr-pbig .ss{font-size:var(--fs-xs);color:var(--ink-2)}
.fr-pbig .gz{font-family:"Gowun Batang",serif;font-size:2rem;line-height:1.3;color:var(--ink)}
.fr-pbig .gz.to{color:var(--gold)}
.fr-pbig .gz.day{color:var(--fr-red);font-weight:700}
.fr-pbig .fr-pnote{margin:.8rem 0 0}
.fr-traits{margin:1.4rem 0}
.fr-traits .k{font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-lg);margin:0 0 .6rem}
.fr-traits ol{list-style:none;margin:0;padding:0;counter-reset:t}
.fr-traits li{counter-increment:t;position:relative;padding:.7rem 0 .7rem 2.4rem;border-bottom:1px dotted var(--fr-rule)}
.fr-traits li::before{content:counter(t);position:absolute;left:0;top:.65rem;width:1.7rem;height:1.7rem;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center}
.fr-traits li small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.fr-traits li b{font-family:"Gowun Batang",serif;font-size:var(--fs-md)}
.fr-hero .bridge{color:var(--ink-2);margin:0 0 1.1rem;word-break:keep-all}
.fr-askend{text-align:center;margin:1rem 0 0}
.fr-pbig .us{font-size:var(--fs-xs);color:var(--gold);margin-top:.1rem}

/* 1026 – 궁합 대목 · 번호 줄(close 의 1. 2. 3.) – 본문 크기 그대로, 매달린 들여쓰기 */
.perblk p.numli{margin:0 0 .5rem;padding-left:1.4em;text-indent:-1.4em;color:var(--ink-2);line-height:1.85;word-break:keep-all}

/* 1026 – 속궁합 보여 주기 줄: 보여 주기가 꺼져 있으면 흐리게 */
.pairshare.off{opacity:.45}
.pairshare.off .chk{pointer-events:none}

/* 1026 – 궁합 「부딪히는 장면」 꼬리표(하나) */
.scenetag{margin:1.4rem 0 .3rem}