/* ── 갈림 맛보기 ───────────────────────────────────────────── */
/* 합침 – 같은 파일 아래 「갈림 맛보기」 두 번째 벌 */
.split{padding:1.3rem 1.2rem;display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin:2rem 0 0}
/* 맛보기 – 결 이름 · 교차 하나 · 네 결 대조 */
/* 정해진 결 한 줄. 판을 만들지 않는다 – 이미 정하신 것을 다시 설명할 이유가 없다. */
.gyone{margin:1.4rem 0 0;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);
  line-height:1.6;color:var(--ink);word-break:keep-all}
.xfree{margin:1.4rem 0 0;padding:1.1rem 1.15rem;border:1px solid var(--accent-line);border-radius:12px;
 background:var(--surface)}
.xfree h3{font-family:"Gowun Batang",serif;font-size:var(--fs-base);margin:0 0 .7rem;word-break:keep-all}
.xfree p{margin:.55rem 0 0;line-height:1.8;color:var(--ink-2)}
.taste{margin:1.5rem 0 0;padding:1.15rem 1.2rem;border:1.5px solid var(--accent-line);
 border-radius:12px;background:var(--surface)}
.taste h3{font-family:"Gowun Batang",serif;font-size:var(--fs-base);margin:0 0 .5rem;word-break:keep-all}
.taste .tlead{margin:.3rem 0 1rem;color:var(--ink-2);font-size:var(--fs-md)}
/* 네 줄을 나란히. 남의 답이 같이 보여야 대조가 산다 – 접거나 지우지 않는다. */
.taste .trow{margin:0;padding:.85rem .9rem;line-height:1.75;font-size:var(--fs-md);color:var(--ink-2);
 border-top:1px solid var(--rule);opacity:.72;word-break:keep-all}
.taste .trow.mine{opacity:1;color:var(--ink);font-weight:500;background:var(--accent-soft,rgba(0,0,0,.03));
 border-left:3px solid var(--accent-line);border-radius:0 8px 8px 0}
/* 잠긴 것. 제목은 또렷하게, 본문 자리는 흐린 막대로 둔다.
   진짜 글자를 흐리게 덮는 것이 아니다 – 서버가 본문을 안 보낸다.
   그래서 이 막대는 「여기에 글이 있다」는 표시일 뿐이고, 벗겨도 나올 것이 없다. */
.lockwrap{margin:1.6rem 0 0}
.lockwrap>.grpname{margin-bottom:.2rem}
.lockblk{margin:.75rem 0 0;padding:.9rem 1rem;border:1px solid var(--rule-2);border-radius:8px}
.lockblk h4{margin:0;font-size:var(--fs-base);font-weight:600;word-break:keep-all;line-height:1.5}
.lockblk .lsrc{display:block;margin:.25rem 0 0;font-size:var(--fs-sm);color:var(--muted)}
.lockblk .lbars{margin:.6rem 0 0;display:flex;flex-direction:column;gap:.42rem}
.lockblk .lbars i{display:block;height:.62rem;border-radius:3px;background:var(--rule-2);opacity:.55}
.lockblk .lbars i:last-child{width:62%}
.lockblk .lkey{display:flex;align-items:center;gap:.35rem;margin:.6rem 0 0;
  font-size:var(--fs-sm);color:var(--muted)}
/* .ic 는 크기를 쓰는 쪽에서 정한다 – #s0 도 자리마다 따로 준다.
   안 주면 svg 가 칸을 다 차지해 자물쇠가 화면 절반만 해진다. 실제로 그랬다. */
.lockblk .lkey .ic{width:14px;height:14px;flex:none}
/* ★ 2026-09-29 – 48편을 줄줄이 늘어놓지 않고 갈래별 묶음(.lockgrp)으로 접는다(paintLocked).
   낱장(.lockblk)의 꼴은 그대로 두고, 그 위에 묶음 머리만 더한다. */
.lockgrp{margin:1.1rem 0 0}
.lockgh{margin:0 0 .35rem;font-size:var(--fs-md);font-weight:700;color:var(--ink-2);word-break:keep-all}
.lockgh span{margin-left:.4rem;font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
.lockmore{margin:.5rem 0 0;font-size:var(--fs-sm);color:var(--muted)}
.lockall{margin:1.2rem 0 0;font-size:var(--fs-sm);color:var(--muted);text-align:center}
/* ★ 2026-10-22 (지시-1022a 5번) – 미리보기 한 편을 잠긴 제목 다섯 개 아래 한 박스로(09-board lockMoreHTML). */
.lockprev{margin:1rem 0 0;padding:1.05rem 1.15rem;border:1px solid var(--rule-2);border-radius:12px;background:var(--surface-2)}
.lockprev h3{font-family:"Gowun Batang",serif;font-size:var(--fs-base);margin:0;word-break:keep-all;line-height:1.5;color:var(--ink)}
.lockprev .lsrc{display:block;margin:.3rem 0 .2rem;font-size:var(--fs-sm);color:var(--ink-2)}
.lockprev p{margin:.6rem 0 0;line-height:1.85;color:var(--ink-2);word-break:keep-all}
.taste .tdo{margin:1.1rem 0 0;padding-top:.95rem;border-top:1px solid var(--accent-line);
 font-size:var(--fs-base);line-height:1.8;color:var(--ink);font-weight:500}

.rx.shut{opacity:.55}
.rx.shut h4{margin:0}
.rx.shut::after{content:"순서가 뒤에 있습니다";display:block;margin-top:.35rem;
  font-size:var(--fs-sm);color:var(--faint)}
/* 급함 딱지. 예전에는 .card .ur 에 크기와 색이 적혀 있었는데 그 규칙은
   한 번도 안 걸렸다 – 딱지는 .band li 안에만 그려진다. 그래서 색이 없었고,
   먹빛 그대로 문장 끝에 붙어 「…감당이 안 될 것 같다 급함」으로 읽혔다.
   ★ 크기로 낮추지 않는다. --fs-xs(12.5px)까지 내리면 2.7px 를 줄이는 것이라
     노안 규칙에 걸린다. 딱지 티는 색과 굵기로 낸다.
     --fs-sm(14.1px)은 하한 14px 을 0.08px 넘는 값이라 사실상 하한이다.
     색과 굵기가 붙었으니 md(15.4px)로도 딱지 티는 난다. 노안 쪽에 붙였다. */
.band li .ur{margin-left:.5rem;font-size:var(--fs-md);letter-spacing:-.01em}
.band li .ur.HIGH{color:var(--warn);font-weight:700}

.prog5{border:1px solid var(--accent-line);background:var(--accent-soft);
  border-radius:12px;padding:1.3rem 1.2rem;margin:1.6rem 0}
/* ★ 2026-09-29 – prog5 를 접힘(<details>)으로 – summary(.bhead) 에 자세히/접기 표를 단다. */
.prog5 > summary{cursor:pointer;list-style:none;margin:-1.3rem -1.2rem 1.1rem;
  border-radius:12px 12px 0 0}
.prog5 > summary::-webkit-details-marker{display:none}
.prog5 > summary::after{content:"자세히";margin-left:auto;flex:0 0 auto;font-size:var(--fs-sm);
  color:var(--accent-ink);border:1px solid var(--accent-line);border-radius:99px;padding:.2rem .6rem}
.prog5[open] > summary::after{content:"접기"}
.prog5:not([open]) > summary{border-radius:12px}
.p5lead{margin:.2rem 0 1.1rem;line-height:1.72;word-break:keep-all;overflow-wrap:break-word}
.days{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.55rem}
.days li{display:flex;gap:.9rem;align-items:baseline;padding:.55rem .8rem;
  background:var(--card);border-radius:.5rem}
.days li>b{flex:0 0 3.2rem;font-size:var(--fs-sm);color:var(--accent-ink,var(--ink))}
.days li>span{line-height:1.6;word-break:keep-all;overflow-wrap:break-word;font-size:var(--fs-md)}
/* ★ 2026-09-19 대표님 – 「한 번 사시면 계속 보십니다」가 상자 왼쪽에 딱 붙었다.
     .benefit ul 은 좌우 1.2rem 을 갖는데 이 줄은 .benefit 바로 아래 자식이라 여백이 없었다. */
.benefit > .p5note{padding-left:1.2rem;padding-right:1.2rem;padding-bottom:1.1rem}
.p5note{margin:0;padding-top:1rem;border-top:1px solid var(--accent-line);
  font-size:var(--fs-md);color:var(--muted);line-height:1.72;
  word-break:keep-all;overflow-wrap:break-word}

/* ★ 2026-09-15 – 5일 일정표(.p5days · .p5day) 스타일을 걷어냈다. 그 화면이 없어졌다. */

.okline{display:flex;gap:.7rem;align-items:flex-start;margin:1.4rem 0 0;
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:10px;
  background:var(--card);cursor:pointer;font-size:var(--fs-md);line-height:1.7;
  color:var(--ink-2);word-break:keep-all;overflow-wrap:break-word}
.okline.on{border-color:var(--accent-ink);background:var(--accent-soft)}
.okline input{flex:none;margin-top:.35rem;width:1.05rem;height:1.05rem;accent-color:var(--accent)}
.okline a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.perblk{border:1px solid var(--line);border-radius:11px;background:var(--card);
  padding:1.1rem 1.2rem;margin:1rem 0}
.perblk .tag{margin:0 0 .3rem}
.perblk .hit{margin:0 0 .6rem}
.perblk p{line-height:1.72;word-break:keep-all;overflow-wrap:break-word}

.pairlink{margin:1rem 0;padding:.85rem 1rem;border:1px dashed var(--line);
  border-radius:9px;background:var(--sunken);overflow-x:auto}
.pairlink code{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-sm);
  color:var(--ink-2);white-space:nowrap}
.pairhead{display:flex;align-items:center;gap:.8rem;margin:1.2rem 0 .8rem}
.pairhead>div{flex:1;text-align:center;padding:.9rem .5rem;border:1px solid var(--line);
  border-radius:10px;background:var(--card)}
.pairhead span{display:block;font-size:var(--fs-xs);color:var(--muted)}
.pairhead b{display:block;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);margin:.2rem 0}
.pairhead em{font-style:normal;font-size:var(--fs-sm);color:var(--accent-ink)}
.pairhead .pairx{flex:0 0 auto;border:0;background:none;color:var(--muted);font-size:var(--fs-base);padding:0}

.perblk.own{border-color:var(--accent-line);background:var(--accent-soft)}
.perblk.own .tag{color:var(--accent-ink)}
/* 일간 짝 두 방향 – 넓으면 나란히, 좁으면 위아래로 (2026-09-16) */
.pairgan{display:grid;gap:.8rem;margin:.8rem 0}
.pairgan .perblk{margin:0}
.pairallow{margin:1rem 0}
/* 성격 궁합 다섯 갈래 – 일간 짝과 같은 틀 (2026-09-18) */
.pairpq{display:grid;gap:.8rem;margin:.8rem 0}
.pairpq .perblk{margin:0}
/* 겹쳐 보면 · 두 사람 판 – 성격 궁합과 같은 틀 (2026-09-18) */
.pairclash{display:grid;gap:.8rem;margin:.8rem 0}
.pairclash .perblk{margin:0}
/* ── v0.7 추가 ── */
.dot.paid{background:var(--rule)}
/* 유료 칸 앞 이름표 – 새 묶음이라는 표시. 금색 칸과 같은 색이다. */
.prog .proglab{flex:none;margin-right:.25rem;font-size:var(--fs-md);font-weight:600;line-height:1.2;
  color:var(--gold);white-space:nowrap}
.dot.paid.on{background:var(--accent)}
.eyebrow.paid{color:var(--gold)}
.pilnote{display:grid;gap:.3rem;margin:-.6rem 0 1.6rem;font-size:var(--fs-sm);color:var(--muted)}
.pilnote b{color:var(--ink-2);font-weight:500;margin-right:.35rem}
.ohtag{display:inline-block;font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-base);
 padding:.05rem .5rem;border:1px solid currentColor;border-radius:6px;margin-right:.45rem}
.rel{font-size:var(--fs-sm);color:var(--muted)}
.split .col{background:var(--surface);padding:1.15rem 1.25rem}
.split h3{font-family:"Gowun Batang",serif;font-size:var(--fs-base);margin:0 0 .6rem}
.split ul{margin:0;padding-left:1.05rem;font-size:var(--fs-md);color:var(--ink-2)}
.split li{margin-bottom:.4rem;line-height:1.6}

.vs{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:.9rem}
.vs>div{background:var(--surface);border:1px solid var(--rule);border-radius:9px;padding:.85rem 1rem}
.vsk{display:block;font-size:var(--fs-xs);color:var(--faint);margin-bottom:.3rem}
.vs p{margin:0;font-size:var(--fs-md)}

.rx{border-top:1px solid var(--rule);padding:1rem 0}
.rx h4{margin:0 0 .4rem;font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.rx p{margin:0 0 .55rem;font-size:var(--fs-md)}
.rx p:last-child{margin-bottom:0}
.lockmsg{font-size:var(--fs-sm);color:var(--muted);margin:.2rem 0 0}
/* 테스트 오픈 – 초대 쿠폰 · 정식 오픈 알림.
   글자는 본문 크기 그대로 둔다(노안). 칸과 단추는 위아래로 쌓는다 – 320px 에서 옆으로 두면
   단추 글자가 두 줄로 꺾이고, 손가락이 닿는 넓이도 줄어든다. */
.coupon{margin:1.6rem 0 0;padding:1.15rem 1.2rem;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft)}
.coupon.wl{background:var(--card);border-color:var(--line)}
.coupon h3{margin:0 0 .45rem;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);color:var(--ink)}
.cplead{margin:0 0 .8rem;font-size:var(--fs-md);color:var(--ink-2);line-height:1.7;word-break:keep-all;overflow-wrap:break-word}
.cprow{display:flex;flex-direction:column;gap:.55rem}
.cprow input{width:100%;box-sizing:border-box;font:inherit;font-size:var(--fs-base);padding:.8rem .9rem;min-height:48px;
  border:1px solid var(--rule-2);border-radius:9px;background:var(--bg);color:var(--ink)}
.cprow input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* 대문자로 보이게만 한다. 값은 치신 그대로 서버로 간다 – 다듬는 것은 서버 한 곳에서만. */
#cpcode{text-transform:uppercase;letter-spacing:.08em}
#cpcode::placeholder{text-transform:none;letter-spacing:0}
.cprow .btn{width:100%;min-height:48px}
.cpkeep{margin:.8rem 0 0;font-size:var(--fs-md);color:var(--ink);line-height:1.7;word-break:keep-all;overflow-wrap:break-word}
.cpmsg{margin:.6rem 0 0;font-size:var(--fs-md);color:var(--warn);line-height:1.6;word-break:keep-all;overflow-wrap:break-word}
.cpmsg:empty{display:none}
.cpmsg.ok{color:var(--accent-ink)}

/* base.css 의 section{display:none} 은 11단계 화면 전환용이다.
   리포트 안의 <section class="rsec"> 까지 같이 숨어버려서 v0.9 에서는
   10단계 전체 리포트가 통째로 안 보였다. 여기서 되살린다. */
.rsec{display:block;margin:0 0 2.4rem;animation:none}
.rhead{display:flex;align-items:baseline;gap:.7rem;padding-bottom:.55rem;
 margin-bottom:1.1rem;border-bottom:2px solid var(--ink)}
.rhead h3{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;margin:0}
.rhead span{margin-left:auto;font-family:"Gowun Batang",serif;font-size:var(--fs-sm);color:var(--muted)}
/* 섹션 머리말 – 「앞에서 보신 것을 한자리에 모았습니다」 한 줄. 서버가 보낼 때만 그린다. */
.rlead{margin:.55rem 0 1.1rem;font-size:var(--fs-md);line-height:1.7;color:var(--muted)}
.rblk{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;
 padding:1rem 0;border-top:1px solid var(--rule)}
.rblk:first-of-type{border-top:none}
.rnote{font-family:"Gowun Batang",serif;font-size:var(--fs-sm);color:var(--faint);padding-top:.25rem;line-height:1.5;order:-1}
.rbody h4{margin:0 0 .4rem;font-size:var(--fs-base);font-weight:600;color:var(--ink);line-height:1.5}
.rbody p{margin:0 0 .7rem;font-size:var(--fs-md)}
.rbody p:last-child{margin-bottom:0}
/* 교차 문단의 마지막 → 은 처방이다. 읽고 나서 할 것이 무엇인지가 거기 있어
   앞 문단들과 눈에 띄게 갈라 둔다. 새 색을 만들지 않고 있는 토큰만 쓴다. */
.rbody .xdo{margin:.9rem 0 0;padding:.75rem .95rem;background:var(--surface-2);
 border-left:3px solid var(--accent);border-radius:0 8px 8px 0}
/* ★ 2026-09-14 대표님 – 「할일이 47가지나 되네」.
   글 끝의 「→」 한 줄은 숭제가 아니라 그 글의 마침표다.
   눈에 띄되 무겁지 않게 – 새 색을 만들지 않고 있는 토큰만 쓴다. */
/* 왜 #015 */
.rbody .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}
/* 48줄 가운데 오늘 하나. 이것만 무겁게 둔다 – 나머지는 다 하실 일이 아니다. */
.todayone{margin:1.3rem 0 0;padding:.95rem 1.1rem;background:var(--accent-soft);
 border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
 font-size:var(--fs-lg);line-height:1.7;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.todayone b{display:block;margin:0 0 .35rem;font-size:var(--fs-sm);
 color:var(--accent-ink);font-weight:700}
/* 「지금 하지 않아도 되는 것」은 덜어 주는 말이라 조용히 둔다. */
.gdefer{margin:.95rem 0 0;font-size:var(--fs-base);line-height:1.75;
 color:var(--ink-2);word-break:keep-all;overflow-wrap:break-word}
/* 근거는 제목이 아니다. 문단 아래에 작게 둔다. */
.rbody .xnote{margin:.85rem 0 0;font-family:"Gowun Batang",serif;
 font-size:var(--fs-sm);color:var(--muted)}
/* ══ 홈 화면에 두기(2026-09-30) ── 결제 단추(.btn)보다 눈에 덜 띄게 – 크기는 안 줄이고 색으로만. ══ */
.homeadd{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--rule)}
.homeadd-lead{margin:0 0 .6rem;font-size:var(--fs-md);color:var(--muted)}
.homeadd-ios{margin:.7rem 0 0;font-size:var(--fs-md);line-height:1.7;color:var(--ink-2);
 display:flex;align-items:flex-start;gap:.4em}
.homeadd-ic{width:1em;height:1em;flex:none;margin-top:.15em;color:var(--muted)}


/* ══ 2026-10-17h 고민 카드 – 두 묶음(그 입구 카드 / 그 밖에 요즘 마음에 걸리는 것) ══ */
.crossgrp{margin-top:1.4rem}
.crosshd{margin:0 0 .5rem;font-size:var(--fs-lg);font-weight:700;color:var(--muted)}
.crossmore{display:block;margin:.7rem auto 0;padding:.5rem 1rem;background:none;border:none;color:var(--accent-ink);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}