/* 별별당 — 원고 조판 (2026-08-24)
 *
 * ⚠️ 색을 새로 정의하지 않는다. `style.css` :root 토큰만 쓴다.
 *    (--paper --surface --ink --sub --line --point --hi --hi-soft --day-bg --night-bg --geum --su …)
 *    여기서 팔레트를 따로 만들면 결과 화면 절반은 밝고 절반은 어두운 상태가 된다.
 *    나중에 사이트 전체가 어두워지면 style.css 의 :root 만 바꾸면 이 파일은 따라온다.
 *
 * ⚠️ 하나만 새로 만든다 — 대사 색 `--say`. 본문에 101곳이라 기존 토큰으로는 구분이 안 된다.
 *    --sub(회색)은 「덜 중요한 것」이고 대사는 그 반대라 같이 쓸 수 없다.
 *
 * 규격 = content/_용어사전_2026-08-23.md §3~§5 · design/_시안_강조체계_2026-08-24.html
 */

:root{ --say:#6FB5C4; --quiet:#B0A69B; } /* --say: 구 #3F7F8C 는 어두운 판에서 3.8:1 로 기준(4.5:1) 미달 — 7.5:1 로 상향 (2026-08-28 꾸비 B안 승인) */

.ms{ width:100%; max-width:640px; margin-inline:auto; font-size:16px }

/* ── 파트 · 소제목 ───────────────────────────────── */
.ms h2.h-part{
  font-family:Jua,sans-serif; font-size:22px; line-height:1.4;
  margin:52px 0 16px; padding-top:26px;
  display:flex; gap:10px; align-items:flex-start;
  border-top:1.5px solid var(--line);
}
.ms h2,.ms h3{ text-wrap:balance }
.ms h2.h-part:first-of-type{ border-top:0; padding-top:0; margin-top:12px }
.ms h2.h-part .em{ font-size:23px; flex:0 0 auto; line-height:1.25 }
.ms h2.h-part .em,.ms-toc summary .em{ display:none }
.ms .ms-pillars-summary{ display:none }
.ms h2.h-part .tx{ flex:1; min-width:0 }
.ms h2.h-part .tx::before{
  content:"✦"; display:inline-block; color:var(--point);
  font-family:Georgia,serif; font-size:16px; margin-right:7px;
  vertical-align:2px;
}
.ms h2.h-part .no{ color:var(--point); margin-right:2px }
.ms h2.h-part .no::after{ content:" ·"; color:var(--quiet); font-weight:400 }

.ms h3.h-sub{
  font-family:Jua,sans-serif; font-size:17.5px; line-height:1.45;
  margin:32px 0 11px; display:flex; gap:10px;
}
.ms h3.h-sub .n{
  flex:0 0 auto; font-size:13px; color:var(--surface); background:var(--point);
  border-radius:99px; min-width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center; margin-top:2px;
}

/* 소제목 바로 뒤의 「통째로 굵은 문단」 = 요약 한 줄 */
.ms p.lead{
  font-size:15.5px; color:var(--ink); font-weight:600;
  margin:-2px 0 18px; line-height:1.72;
  padding-left:12px; border-left:3px solid var(--hi);
}
.ms p{ margin-bottom:16px; line-height:1.75; text-wrap:pretty }
.ms p:not(.lead):not(.fine) > .ms-em{ color:var(--point); font-weight:750 }

/* 좁은 한글 본문은 pretty 재배치가 줄끝을 계단처럼 만들 수 있어 자연 줄바꿈을 쓴다. */
@media(max-width:560px){ .ms p{ text-wrap:wrap } }

/* 구분선 2종 — 가는 선(주제 전환) · 별 셋(파트 끝) */
.ms hr.rule{ border:0; border-top:1.5px solid var(--line); margin:30px 0 }
.ms .rule-star{ text-align:center; margin:44px 0 0; color:var(--hi); font-size:13px; letter-spacing:.7em }
.ms .rule-star::before{ content:"✦ ✦ ✦" }
.ms .rule-star + h2.h-part{ border-top:0; padding-top:0; margin-top:16px }

/* ── 강조 5종 (여섯 번째를 만들지 않는다) ──────────── */
.ms .key{                                    /* ⭐ 핵심 명제 — 한 파트에 하나 */
  background:var(--hi-soft); border:2px solid var(--hi); border-radius:14px;
  padding:15px 17px; margin:18px 0; font-size:16px; line-height:1.7; font-weight:600;
}
.ms .key .kt{ font-family:Jua,sans-serif; font-size:12px; color:var(--sub);
  display:block; margin-bottom:6px; font-weight:400 }

.ms .unni{                                   /* 🗨️ 언니 한마디 — 전체 3~4번 */
  background:var(--surface); border:2px solid var(--point); border-left-width:7px;
  border-radius:11px; padding:13px 15px; margin:18px 0; font-size:15px; line-height:1.7;
}
.ms .unni .ut{ font-family:Jua,sans-serif; font-size:12.5px; color:var(--point);
  display:block; margin-bottom:5px }

.ms .talk{ margin:16px 0; display:flex; flex-direction:column; gap:9px }   /* 💬 대화 */
.ms .talk .b{
  position:relative; max-width:82%; padding:10px 14px; border-radius:17px;
  font-size:14.6px; line-height:1.55; font-weight:600;
}
.ms .talk .b.them{
  background:var(--talk-them-bg); color:var(--talk-them-fg);
  border-bottom-left-radius:5px; align-self:flex-start;
}
.ms .talk .b.me{
  background:var(--talk-me-bg); color:var(--talk-me-fg);
  border-bottom-right-radius:5px; align-self:flex-end;
  box-shadow:0 6px 16px rgba(254,228,90,.12);
}
.ms .talk .b.them::after,.ms .talk .b.me::after{
  content:""; position:absolute; bottom:0; width:0; height:0; border-style:solid;
}
.ms .talk .b.them::after{
  left:-6px; border-width:0 0 10px 9px;
  border-color:transparent transparent var(--talk-them-bg) transparent;
}
.ms .talk .b.me::after{
  right:-6px; border-width:0 9px 10px 0;
  border-color:transparent transparent var(--talk-me-bg) transparent;
}
.ms .talk .who{ display:block; font-size:11px; margin-bottom:2px; font-weight:700 }
.ms .talk .them .who{ color:#AEB6CE }
.ms .talk .me .who{ color:#6B5F15 }
.ms .talk .say{ color:inherit }

.ms .thought{                                /* 🗯 속마음 — 상자를 안 씌운다 */
  color:var(--sub); font-style:italic; margin:13px 0; padding-left:13px;
  border-left:2px dotted var(--quiet); font-size:14.8px;
}

.ms .thought .tt{display:block;margin-bottom:6px;color:var(--hot);font-size:12px;font-style:normal;font-weight:800;letter-spacing:.01em}

.ms .vs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 }  /* ⚖️ 대조 */
@media(max-width:560px){ .ms .vs{ grid-template-columns:1fr } }
.ms .vs>div{ border-radius:11px; padding:15px 14px 12px; font-size:14.6px; line-height:1.62; position:relative }
.ms .vs .o{ background:var(--night-bg); border:2px solid var(--su) }
.ms .vs .x{ background:var(--zero-bg); border:2px solid var(--point) }
.ms .vs .o::before,.ms .vs .x::before{
  position:absolute; top:-11px; left:11px; font-size:15px; line-height:1;
  background:var(--paper); border-radius:99px; padding:0 3px;
}
.ms .vs .o::before{ content:"⭕" } .ms .vs .x::before{ content:"❌" }

.ms blockquote{ border-left:3px solid var(--hi); background:var(--hi-soft);
  border-radius:0 9px 9px 0; padding:11px 15px; margin:16px 0 }

/* 대사·인용 — 101곳이라 배경을 씌우면 색종이가 된다. 색만 */
.ms .say{ color:var(--say); font-weight:600 }
/* 화자 — 상자로 빼면 문장이 잘리는 자리라 이름에만 색을 준다 */
.ms .unni-n{ color:var(--point); font-weight:700 }

/* 번호 목록 = 카드 (「오래 못 가는 사람 다섯」·「오늘부터 세 개」가 제일 빽빽하다) */
.ms .li{ display:flex; gap:11px; margin:9px 0; line-height:1.7;
  background:var(--surface); border:1.5px solid var(--line); border-radius:11px; padding:11px 13px }
.ms .li .n{ flex:0 0 auto; color:var(--surface); background:var(--point); border-radius:99px;
  font-weight:800; font-size:12.5px; min-width:21px; height:21px;
  display:inline-flex; align-items:center; justify-content:center; margin-top:3px }
.ms .li.dot{ background:transparent; border:0; padding:2px 0; margin:5px 0 }
.ms .li.dot .n{ background:transparent; color:var(--point); min-width:auto; height:auto; font-size:15px }

/* ── 인라인·플로팅 목차 ─────────────────────────── */
.ms-toc{ background:var(--surface); border:1.5px solid var(--line); border-radius:16px;
  padding:8px 13px 12px; margin:6px 0 30px; overflow:hidden }
.ms-toc-toggle{ width:100%; min-height:62px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:9px 2px; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer }
.ms-toc-heading{ display:grid; gap:3px; min-width:0 }
.ms-toc-heading strong{ font-family:Jua,sans-serif; font-size:16px; line-height:1.35; font-weight:400;
  text-wrap:balance }
.ms-toc-heading small{ color:var(--sub); font-size:12px; line-height:1.4 }
.ms-toc-toggle-state{ flex:0 0 auto; min-width:50px; color:var(--point); font-size:11.5px;
  font-weight:800; text-align:right }
.ms-toc-toggle-state::after{ content:"⌃"; display:inline-block; margin-left:5px; transition:transform .18s ease }
.ms-toc-toggle[aria-expanded="false"] .ms-toc-toggle-state::after{ transform:rotate(180deg) }
.ms-toc-body{ border-top:1px solid var(--line); padding-top:3px }
.ms-toc details{ border-top:1px solid var(--line) }
.ms-toc details:first-of-type{ border-top:0 }
.ms-toc summary{ min-height:44px; list-style:none; cursor:pointer; padding:9px 4px; display:flex; gap:7px; align-items:center;
  border-radius:9px }
.ms-toc summary::-webkit-details-marker{ display:none }
.ms-toc summary::before{
  content:"✦"; display:grid; place-items:center; flex:0 0 16px;
  width:16px; height:16px; color:color-mix(in srgb,var(--point) 42%,var(--quiet));
  font-family:Georgia,serif; font-size:14px; line-height:1;
}
.ms-toc details.is-current > summary{
  background:var(--hi-soft); box-shadow:inset 2px 0 var(--point)
}
.ms-toc details.is-current > summary::before{
  color:var(--point); font-size:16px;
}
.ms-toc summary .em{ flex:0 0 auto; font-size:14px }
.ms-toc summary .tx{ font-size:13.4px; flex:1; min-width:0; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ms-toc summary .no{ font-size:12.5px; color:var(--point); font-weight:800; margin-right:4px }
.ms-toc summary .no::after{ content:" ·"; color:var(--quiet); font-weight:400 }
.ms-toc summary .ar{ flex:0 0 auto; color:var(--quiet); font-size:10px }
.ms-toc .kids{ padding:0 0 6px 26px }
.ms-toc .kids a{ min-height:44px; display:flex; align-items:center; font-size:12.4px; color:var(--sub); padding:10px 0;
  text-decoration:none; line-height:1.45 }
.ms-toc .kids a b{ color:var(--point); font-size:11px; margin-right:5px; font-weight:800 }
.ms-toc-toggle:focus-visible,.ms-toc summary:focus-visible,.ms-toc .kids a:focus-visible{
  outline:3px solid var(--point); outline-offset:2px
}

.ms-top-share{ min-width:66px; height:44px; padding:0 12px; display:inline-flex; align-items:center;
  justify-content:center; gap:5px; border:1px solid rgba(255,225,77,.34); border-radius:12px;
  background:rgba(255,225,77,.08); color:var(--point); font-size:12px; font-weight:800; cursor:pointer }
.ms-top-share:hover{ background:rgba(255,225,77,.14) }
.ms-top-share:active{ transform:translateY(1px) }
.ms-top-share:focus-visible,.ms-toc-fab:focus-visible,.ms-toc-dialog button:focus-visible{
  outline:3px solid var(--point); outline-offset:2px
}

.ms-toc-fab{ position:fixed; right:max(16px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom)); z-index:32; min-width:132px; min-height:48px;
  padding:9px 12px 9px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid rgba(255,225,77,.46); border-radius:15px; background:rgba(20,26,46,.96);
  color:var(--ink); box-shadow:0 14px 34px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); cursor:pointer }
.ms-toc-fab>span{ color:var(--point); font-family:Jua,sans-serif; font-size:14px }
.ms-toc-fab b{ font-size:12px; font-variant-numeric:tabular-nums }
.ms-toc-fab:active{ transform:translateY(1px) }

.ms-toc-layer{ position:fixed; inset:0; z-index:45; display:grid; align-items:end }
.ms-toc-backdrop{ position:absolute; inset:0; width:100%; height:100%; border:0;
  background:rgba(3,6,16,.72); cursor:default }
.ms-toc-dialog{ position:relative; width:100%; max-height:min(82dvh,720px); overflow:auto;
  padding:18px 17px calc(18px + env(safe-area-inset-bottom)); border:1px solid var(--line);
  border-radius:22px 22px 0 0; background:#10162A; box-shadow:0 -24px 70px rgba(0,0,0,.44) }
.ms-toc-dialog-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:15px; border-bottom:1px solid var(--line) }
.ms-toc-dialog-head strong{ display:block; max-width:290px; font-family:Jua,sans-serif; font-size:18px;
  line-height:1.35; font-weight:400; text-wrap:balance }
.ms-toc-dialog-head p{ margin-top:4px; color:var(--sub); font-size:12.5px }
.ms-toc-close{ flex:0 0 44px; width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.05); color:var(--ink); font-size:22px; cursor:pointer }
.ms-toc-part-list{ display:grid; gap:5px; padding:12px 0 }
.ms-toc-part-list button{ width:100%; min-height:48px; display:grid; grid-template-columns:26px minmax(0,1fr);
  align-items:center; gap:8px; padding:8px 10px; border:0; border-radius:11px; background:transparent;
  color:var(--ink); text-align:left; cursor:pointer }
.ms-toc-part-list button span{ color:var(--point); font-size:12px; font-weight:900;
  font-variant-numeric:tabular-nums }
.ms-toc-part-list button b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14px; font-weight:650 }
.ms-toc-part-list button.is-current{ background:var(--hi-soft); box-shadow:inset 3px 0 var(--point) }
.ms-toc-part-list button.is-current b::after{ content:"지금 읽는 중"; margin-left:8px; color:var(--point);
  font-size:10px; font-weight:800 }
.ms-toc-dialog-foot{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:13px;
  border-top:1px solid var(--line) }
.ms-toc-dialog-foot button{ min-height:48px; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.05); color:var(--ink); font-weight:800; cursor:pointer }
.ms-toc-dialog-foot .ms-toc-share{ border-color:var(--point); background:var(--point); color:var(--point-fg) }
.ms h2.h-part{ scroll-margin-top:76px }

@media(min-width:900px){
  .ms-toc-fab{ right:max(28px,calc((100vw - 960px)/2 + 22px)); bottom:28px }
  .ms-toc-layer{ align-items:stretch; justify-items:end }
  .ms-toc-dialog{ width:min(420px,calc(100vw - 48px)); height:100%; max-height:none; padding:24px 22px;
    border-radius:0; border-top:0; border-bottom:0; border-right:0; box-shadow:-24px 0 70px rgba(0,0,0,.44) }
}

/* ── 각주 [n] + 팝오버 ───────────────────────────── */
.ms .fn{ min-width:44px; min-height:44px; margin:-6px; display:inline-grid; place-items:center; font-size:11px; color:var(--point);
  font-weight:800; vertical-align:middle; cursor:pointer; background:none; border:0; padding:0 2px;
  font-family:inherit; line-height:1 }
.ms .fn:hover{ text-decoration:underline }
.ms .fn:focus-visible{ outline:2px solid var(--point); outline-offset:2px; border-radius:3px }

.ms-fnlist{ margin-top:40px; padding-top:8px; border-top:1.5px dashed var(--line);
  font-size:13px; color:var(--sub); line-height:1.68 }
.ms-fn-summary{ min-height:44px; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:12px; cursor:pointer; color:var(--ink); font-family:Jua,sans-serif; font-size:13.5px }
.ms-fn-summary::-webkit-details-marker{ display:none }
.ms-fn-summary small{ margin-left:4px; color:var(--sub); font-family:inherit; font-size:12px }
.ms-fn-state{ color:var(--point); font-family:inherit; font-size:12px; font-weight:800 }
.ms-fn-summary:focus-visible{ outline:2px solid var(--point); outline-offset:2px; border-radius:4px }
.ms-fnlist-body{ padding-top:5px }
.ms-fnlist .fni{ margin:0 }
.ms-fnlist .fn-back{ width:100%; min-height:44px; border:0; background:none; color:var(--sub);
  padding:8px 0; font-family:inherit; font-size:13px; font-weight:400; line-height:1.68;
  text-align:left; cursor:pointer }
.ms-fnlist .fn-back>span,.ms-fnlist .fn-back>b{ color:var(--point); font-weight:800 }
.ms-fnlist .fn-back:focus-visible{ outline:2px solid var(--point); outline-offset:2px }
.ms-fnlist .fni.flash .fn-back{ color:var(--ink) }

/* ── 월별 아코디언 ───────────────────────────────── */
.ms .month-intro{ margin-top:10px }
.ms .month-accordion{ display:grid; gap:8px; margin:16px 0 }
.ms .month-item{
  min-width:0; overflow:clip; border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface)
}
.ms .month-item.hit{ background:var(--hi-soft); border-color:var(--hi) }
.ms .month-summary{
  min-height:52px; box-sizing:border-box; padding:11px 12px; cursor:pointer; list-style:none;
  display:grid; grid-template-columns:52px minmax(108px,.85fr) minmax(0,1.8fr) 20px;
  grid-template-areas:"month ganji force toggle"; gap:8px; align-items:center
}
.ms .month-summary::-webkit-details-marker{ display:none }
.ms .month-summary:focus-visible{ outline:2px solid var(--point); outline-offset:-2px; border-radius:10px }
.ms .month-label{ grid-area:month; color:var(--sub); font-weight:800; white-space:nowrap }
.ms .month-ganji{
  grid-area:ganji; min-width:0; font-family:Jua,sans-serif; letter-spacing:-.03em;
  line-height:1.35; overflow-wrap:anywhere
}
.ms .month-force{ grid-area:force; min-width:0; line-height:1.5; overflow-wrap:anywhere }
.ms .month-star{ margin-right:3px; font-size:11px }
.ms .month-toggle{ grid-area:toggle; width:20px; height:20px; position:relative; justify-self:end; overflow:hidden }
.ms .month-toggle::before{
  content:"›"; position:absolute; inset:0; display:grid; place-items:center; color:var(--sub);
  font-size:18px; line-height:1; transform:rotate(90deg); transition:transform .16s ease
}
.ms .month-item[open] .month-toggle::before{ transform:rotate(-90deg) }
.ms .month-detail{ border-top:1px solid var(--line); padding:13px 14px 5px }
.ms .month-detail p{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; margin:0 0 10px; line-height:1.65 }
.ms .month-detail p b{ color:var(--sub); font-size:12px }
.ms .month-detail p span{ min-width:0; overflow-wrap:anywhere }

@media(max-width:560px){
  .ms .month-summary{
    grid-template-columns:auto minmax(0,1fr) 20px;
    grid-template-areas:"month ganji toggle" "force force toggle";
    gap:5px 8px; padding:11px 12px
  }
  .ms .month-label{ font-size:13px }
  .ms .month-force{ font-size:13.5px }
  .ms .month-detail p{ grid-template-columns:1fr; gap:2px }
}

/* 이전 번들 호환용 월별 표. D-044 런타임에서는 생성하지 않는다. */
.ms table.months{ table-layout:fixed; width:100%; border-collapse:collapse; font-size:13.5px }
.ms table.months th{ font-size:11.5px; color:var(--sub); font-weight:400; text-align:left;
  border-bottom:1.5px solid var(--line); padding:4px 6px }
.ms table.months td{ border-bottom:1px solid var(--line); padding:9px 6px; vertical-align:middle }
.ms table.months td:nth-child(1){ width:58px; color:var(--sub); white-space:nowrap }
.ms table.months td:nth-child(2){ width:104px; font-family:Jua,sans-serif; letter-spacing:-.03em; line-height:1.3 }
.ms table.months td:nth-child(3){ width:34px; text-align:center; font-size:11px }
.ms table.months td:nth-child(4){ line-height:1.5 }
.ms table.months tr.hit{ background:var(--hi-soft) }
.ms table.months tr.hit td:nth-child(1){ font-weight:700; color:var(--ink) }
.ms .tw{ overflow-x:auto; margin:14px 0 }
.ms p.fine{ font-size:12.3px; color:var(--sub); margin:9px 0 4px; line-height:1.6 }


/* A절 사주표 등 일반 표 — `table.months` 만 꾸며서 맨몸으로 나오던 것 (2026-08-24) */
.ms table:not(.months){ width:100%; border-collapse:collapse; font-size:14.5px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:10px; overflow:hidden }
.ms table:not(.months) th,.ms table:not(.months) td{
  border:1px solid var(--line); padding:9px 10px; text-align:center }
.ms table:not(.months) th{ background:var(--hi-soft); font-weight:700; font-size:12.5px; color:var(--sub) }
.ms table:not(.months) td{ font-family:Jua,sans-serif; font-size:16px; letter-spacing:-.02em }
.ms table:not(.months) td:first-child,.ms table:not(.months) th:first-child{
  font-family:inherit; font-size:12.5px; color:var(--sub); width:52px }

/* ── 진행 게이지 ─────────────────────────────────── */
#ms-gauge{ position:fixed; top:0; left:0; right:0; height:4px; background:transparent; z-index:31 }
#ms-gauge i{ display:block; height:100%; width:0; background:var(--point); transition:width .08s linear }

/* 움직임을 줄이라는 설정이면 게이지 애니메이션과 부드러운 스크롤을 끈다 */
@media (prefers-reduced-motion: reduce){
  #ms-gauge i{ transition:none }
  .ms .month-toggle::before{ transition:none }
  .ms-toc-toggle-state::after{ transition:none }
  .ms *{ scroll-behavior:auto !important }
}

@media print{
  .ms-top-share,.ms-toc-fab,.ms-toc-layer,#ms-gauge{ display:none !important }
  .ms .month-item{ break-inside:avoid }
  .ms .month-item:not([open])>.month-detail{ display:block !important }
  .ms .month-toggle{ display:none }
  .ms-fn-summary{ display:none }
  .ms-fnlist:not([open])>.ms-fnlist-body{ display:block !important }
}