/* 책사 v3 — 하루의 리듬을 따르는 이중 테마
 * 낮(06~18시): 아침 한지 — 미색 종이에 먹 글씨, 주홍 인장
 * 밤(18~06시): 새벽 인디고 — 남색 하늘에 달빛 미색
 */

/* ───────── 낮: 아침 한지 (기본) ───────── */
:root{
  --body-bg:
    radial-gradient(120% 55% at 50% -12%, rgba(122,104,168,.16), transparent 62%),
    radial-gradient(90% 45% at 88% 108%, rgba(163,35,56,.05), transparent 60%),
    linear-gradient(180deg,#fbf9fa 0%,#f4eff2 100%);
  --bg:#f6f3f4; --bg2:#fbf9fa; --card:#fffdfe; --card2:#fffeff;
  --line:#e7dfe4; --line2:#d6c9d1;
  --ink:#241f33; --ink2:#544b60; --ink3:#786d84;
  --accent:#a32338; --accent2:#bd3b50; --accent-soft:rgba(163,35,56,.075); --accent-line:rgba(163,35,56,.26);
  --seal-bg:linear-gradient(145deg,#dcb765,#a8791f); --seal-ink:#241f33;
  --wood:#4a8560; --fire:#b13a48; --earth:#a07c3a; --metal:#7b7686; --water:#4272a6;
  --g3-bg:#f3e6c6; --g3-ink:#7d4a1c; --g2-bg:#e3ece2; --g0-bg:#f6dde2; --g0-ink:#973f52;
  --g3:#c98b3f; --g2:#6ba272; --g1:#c4bba8; --g0:#c07060;
  --shadow:0 3px 16px rgba(60,40,80,.07);
  --shadow-lift:0 8px 26px rgba(60,40,80,.12);
  --nav-bg:rgba(255,253,254,.90); --nav-shadow:0 8px 28px rgba(60,40,80,.15);
  --sky:radial-gradient(circle at 35% 32%, #ffe9b8, #f0b95e);
  --sky-glow:0 0 34px rgba(240,185,94,.45);
  --serif:"Noto Serif KR","Apple Myungjo","Batang",serif;
  --letter:"Gowun Batang","Noto Serif KR","Apple Myungjo",serif;
  --sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --r:18px;
  /* 타입 계단 — 7단. 제목은 반드시 본문보다 크다 */
  --t1:11.5px; --t2:13px; --t3:15px; --t4:17px; --t5:20px; --t6:25px; --t7:46px;
  /* 여백 계단 — 4단만 쓴다 */
  --s1:6px; --s2:12px; --s3:24px; --s4:40px;
  /* 먹색 히어로 — 화면에서 진하게 칠하는 유일한 곳 */
  --hero-bg:#2b241c; --hero-ink:#f5eee0;
  --hero-dim:rgba(245,238,224,.56); --hero-dim2:rgba(245,238,224,.42);
  --hero-accent:#e8b56b; --hero-line:rgba(245,238,224,.14); --hero-chip:rgba(245,238,224,.10);
  color-scheme:light;
}

/* ───────── 밤: 새벽 인디고 ───────── */
:root[data-theme="night"]{
  --body-bg:
    radial-gradient(100% 45% at 50% -8%, rgba(230,201,138,.11), transparent 60%),
    linear-gradient(180deg,#121030 0%,#1b1840 52%,#241f4d 100%);
  --bg:#161433; --bg2:#221f45; --card:#1c1a3c; --card2:#242147;
  --line:#302c5c; --line2:#443f76;
  --ink:#eeeaf7; --ink2:#b6aed4; --ink3:#8f87b3;
  --accent:#e6c98a; --accent2:#cbab63; --accent-soft:rgba(230,201,138,.11); --accent-line:rgba(230,201,138,.30);
  --seal-bg:linear-gradient(145deg,#f0d79b,#bb9445); --seal-ink:#1c1a3c;
  --wood:#7cc487; --fire:#ef95a4; --earth:#e6c98a; --metal:#ddd9ef; --water:#8cbcea;
  --g3-bg:#3b3670; --g3-ink:#f4e6bd; --g2-bg:#233b3f; --g0-bg:#412540; --g0-ink:#e7a3b0;
  --g3:#e9d8a6; --g2:#7cc487; --g1:#4a5378; --g0:#c98080;
  --shadow:0 6px 22px rgba(0,0,0,.30);
  --shadow-lift:0 12px 34px rgba(0,0,0,.42);
  --nav-bg:rgba(28,26,60,.88); --nav-shadow:0 10px 30px rgba(0,0,0,.5);
  --sky:radial-gradient(circle at 35% 34%, #f6f2e0, #cfc7a6);
  --sky-glow:0 0 30px rgba(244,240,221,.42);
  --hero-bg:#0d1122; --hero-ink:#e9ebf6;
  --hero-dim:rgba(233,235,246,.56); --hero-dim2:rgba(233,235,246,.40);
  --hero-accent:#e9d8a6; --hero-line:rgba(233,235,246,.13); --hero-chip:rgba(233,235,246,.09);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  background:var(--body-bg);background-attachment:fixed;
  color:var(--ink);font-family:var(--sans);line-height:1.6;
  word-break:keep-all;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  transition:background-color .4s ease,color .3s ease;
}
.wrap{max-width:520px;margin:0 auto;padding:20px 18px 118px;position:relative}

/* ───── 헤더 ───── */
header{display:flex;align-items:center;justify-content:space-between;padding:4px 0 20px;position:relative;z-index:1}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:.02em}
.logo .seal{
  font-style:normal;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--seal-bg);color:var(--seal-ink);font-size:20px;font-weight:900;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.28);
}
.logo small{display:block;font-family:var(--sans);font-weight:400;font-size:11.5px;color:var(--ink3);letter-spacing:.05em;margin-top:2px}
.hbtns{display:flex;gap:7px;align-items:center}
.btn-ghost{background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:7px 13px;font-size:12.5px;cursor:pointer;transition:.15s;font-family:var(--sans)}
.btn-ghost:hover{border-color:var(--accent2);color:var(--accent)}
.btn-icon{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;font-size:15px;border-radius:50%;color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}

/* ───── 카드 ───── */
.card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:var(--s3);
  box-shadow:var(--shadow);position:relative;z-index:1;
}
/* 카드 머리의 금선 — 색만 바꾼 평평한 상자와 「공들인 물건」을 가르는 한 줄 */
.card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-line),transparent);pointer-events:none}
.card h2{
  font-family:var(--letter);font-size:var(--t4);font-weight:700;color:var(--ink);
  letter-spacing:-.015em;margin-bottom:var(--s2);
  display:flex;align-items:baseline;gap:10px;
}
.card h3{font-family:var(--letter);font-size:22px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}

/* ───── 온보딩 ───── */
.hero{text-align:center;padding:16px 0 20px}
.hero-eyebrow{font-size:11.5px;letter-spacing:.38em;color:var(--accent);margin-bottom:12px}
.hero h3{font-family:var(--letter);font-size:29px;font-weight:700}
.hero-sub{font-family:var(--letter);font-size:14.5px;color:var(--ink2);margin-top:12px;line-height:1.85}

/* ───── 폼 ───── */
label{display:block;font-size:12.5px;color:var(--ink3);letter-spacing:.04em;margin:14px 0 6px}
.row{display:flex;gap:8px}.row>*{flex:1}
input,select{
  width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);
  border-radius:12px;padding:13px 14px;font-size:16px;outline:none;font-family:var(--sans);transition:.15s;
}
input:focus,select:focus{border-color:var(--accent2);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder{color:var(--ink3);opacity:.7}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);margin-top:12px}
.check input{width:auto;accent-color:var(--accent)}
.btn{
  width:100%;margin-top:18px;border:0;border-radius:13px;padding:15px;font-size:16px;font-weight:700;cursor:pointer;
  background:var(--seal-bg);color:var(--seal-ink);font-family:var(--sans);
  box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.25);transition:.15s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;box-shadow:none}
.btn.small{padding:11px;font-size:14px;margin-top:8px}
.btn.ghost{background:var(--bg2);color:var(--ink2);border:1px solid var(--line2);box-shadow:none}
.btn.danger{color:var(--g0-ink);background:var(--g0-bg);border-color:transparent}
.hint{font-size:12px;color:var(--ink3);margin-top:9px;line-height:1.65}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ───── 출산택일 신청서(.intake) — 신청 페이지(taekil-apply)와 결제 뒤 화면(pay-done)이 같이 쓴다 ───── */
.intake{margin:22px 0 8px;padding:20px 18px 22px;border-radius:14px;border:1px solid var(--line);
        background:var(--card);text-align:left}
.intake h2{font-family:var(--serif);font-size:18px;margin:0 0 6px}
.intake .lead{font-size:13.5px;line-height:1.8;color:var(--ink2);margin:0 0 4px}
.intake .hint{font-size:12px;line-height:1.65;color:var(--ink3);margin:8px 0 0}
.intake label em{font-style:normal;font-size:11px;color:var(--accent);margin-left:5px;letter-spacing:0}
/* 글자 크기는 input 과 같은 16px — 그보다 작으면 아이폰이 누를 때 화면을 키운다(전역 textarea 는 15.5px) */
.intake textarea{min-height:76px;font-size:16px}
.intake .seg{flex-wrap:wrap}
.intake .seg button{flex:1 1 28%;min-width:0}
.intake .send{width:100%;margin-top:20px;padding:15px;border:0;border-radius:13px;cursor:pointer;
              background:var(--seal-bg);color:var(--seal-ink);font-size:15.5px;font-weight:700;font-family:var(--sans)}
.intake .send[disabled]{opacity:.5;cursor:default}
.intake .msg{font-size:13px;line-height:1.75;margin:12px 0 0;color:var(--ink3)}
.intake .msg.bad{color:#b4534f}
.intake .msg a{color:var(--accent)}
.intake .agree{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;font-size:13px;line-height:1.7;
               color:var(--ink2);letter-spacing:0;cursor:pointer}
/* 전역 input{width:100%;padding…} 이 체크박스에도 걸린다 — 풀지 않으면 글이 한 글자씩 세로로 선다 */
.intake .agree input{width:auto;padding:0;margin:3px 0 0;flex:none;accent-color:var(--accent)}
.intake .agree a{color:var(--accent)}
.intake .notice{margin:14px 0 0;padding:12px 14px;border-radius:12px;border:1px solid var(--accent-line);
                background:var(--accent-soft);font-size:13px;line-height:1.75;color:var(--ink2)}
.intake .notice a{color:var(--accent)}

/* ───── 원국 기둥 ───── */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;text-align:center}
.pillar{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:13px 4px 10px;position:relative}
.pillar::before{content:"";position:absolute;top:0;left:24%;right:24%;height:2px;border-radius:0 0 3px 3px;background:var(--line2)}
.pillar.day::before{background:var(--accent)}
.pillar .t{font-size:10.5px;color:var(--ink3);letter-spacing:.2em;margin-bottom:7px}
.pillar .g{font-size:11px;color:var(--ink2);margin-top:5px;min-height:15px}
.han{font-size:31px;font-weight:900;line-height:1.15;font-family:var(--serif)}
.ko{font-size:10.5px;color:var(--ink3)}
.e-목{color:var(--wood)}.e-화{color:var(--fire)}.e-토{color:var(--earth)}.e-금{color:var(--metal)}.e-수{color:var(--water)}
.day{border-color:var(--accent2);background:var(--accent-soft)}
.hidden{font-size:10px;color:var(--ink3);margin-top:6px;letter-spacing:.12em}
.me{display:flex;gap:16px;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.me .big{
  flex:0 0 64px;height:64px;display:flex;align-items:center;justify-content:center;
  font-size:40px;font-weight:900;font-family:var(--serif);line-height:1;
  background:var(--bg2);border:1px solid var(--line2);border-radius:16px;
}
.me p{font-size:14px;color:var(--ink2);line-height:1.75}
.me b{color:var(--ink);font-family:var(--serif);font-size:15.5px}
.bars{margin-top:16px;display:grid;gap:7px}
.bar{display:grid;grid-template-columns:22px 1fr 22px;align-items:center;gap:10px;font-size:12px;color:var(--ink2)}
.bar i{display:block;height:7px;border-radius:4px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.bar i b{display:block;height:100%;border-radius:4px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--bg2);border:1px solid var(--line2);color:var(--ink2)}
.tag.on{border-color:var(--accent2);color:var(--accent);background:var(--accent-soft)}

/* ───── 브리핑 — 편지 ───── */
.brief{font-family:var(--letter);font-size:var(--t3);line-height:1.95;white-space:pre-line;color:var(--ink2)}
.brief p+p{margin-top:12px}
.brief b{color:var(--accent);font-weight:700}
.brief .act{
  font-family:var(--sans);margin-top:16px;padding:13px 16px;background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:12px;font-size:14.5px;white-space:normal;
  color:var(--ink);line-height:1.7;
}
.brief.loading{color:var(--ink3);font-family:var(--sans);font-size:14.5px}
.ganji-line{display:flex;gap:12px;font-size:12.5px;color:var(--ink3);margin-bottom:15px;flex-wrap:wrap}
.ganji-line span b{color:var(--accent);font-family:var(--serif);font-weight:700;margin-left:3px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center}
.week .wd{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:9px 2px;font-size:10.5px;color:var(--ink3)}
.week .wd b{display:block;font-size:var(--t3);color:var(--ink);font-family:var(--serif);margin:2px 0}
.week .wd i{display:block;width:7px;height:7px;border-radius:50%;margin:6px auto 0}
.week .wd.today{border-color:var(--accent2);background:var(--accent-soft)}

/* ───── 오늘의 시간대 (12시진 곡선) ───── */
.card h2 .h2sub{font-family:var(--sans);font-size:var(--t2);font-weight:400;color:var(--ink3);letter-spacing:0}
.hours{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;align-items:end;height:96px}
.hr{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%;cursor:pointer;
    background:none;border:0;padding:0;font-family:var(--sans);min-height:44px}
.hr .col{position:relative;width:100%;flex:1}
.hr .col::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line2)}
.hr .bar{position:absolute;left:0;right:0;background:var(--line2);transition:.15s}
.hr .bar.u{bottom:50%;border-radius:3px 3px 0 0}
.hr .bar.d{top:50%;border-radius:0 0 3px 3px}
.hr.up .bar{background:var(--accent)}
.hr.dn .bar{background:var(--g0)}
.hr .jin{font-size:10px;color:var(--ink3);line-height:1}
.hr.now .jin{color:var(--accent);font-weight:700}
.hr.now .jin::after{content:"";display:block;width:4px;height:4px;border-radius:50%;
    background:var(--accent);margin:3px auto 0}
.hr.sel .bar{outline:2px solid var(--accent);outline-offset:1px}
.hr:hover .bar{filter:brightness(1.12)}
.hours-mid{height:1px;background:var(--line);margin:0 0 6px}
.hours-pick{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
    display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.hours-pick .t{font-family:var(--serif);font-size:var(--t3);color:var(--ink)}
.hours-pick .g{font-size:var(--t2);color:var(--accent);font-weight:500}
.hours-pick .d{font-size:var(--t2);color:var(--ink2);flex-basis:100%;line-height:1.7}

.c-domain{background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:13px 15px;margin-bottom:12px}
.c-domain p{font-size:var(--t2);color:var(--ink2);line-height:1.7;margin-bottom:10px}
.c-domain p b{color:var(--ink)}
.c-domain .row{display:flex;flex-wrap:wrap;gap:6px}
.c-domain .row>*{flex:0 0 auto}
.c-domain .chip{font-size:12.5px;padding:7px 13px;border-radius:999px;background:var(--card);
  border:1px solid var(--line2);color:var(--ink2);cursor:pointer;font-family:var(--sans);min-height:36px}
.c-domain .chip.on{border-color:var(--accent2);color:var(--accent);background:var(--accent-soft);font-weight:700}
.c-miss{font-size:var(--t2);color:var(--g0-ink);background:var(--g0-bg);border-radius:10px;
  padding:11px 14px;margin-bottom:12px;line-height:1.7}

/* ───── 원국: 진태양시 보정 비교 ───── */
.solar-cmp{margin-top:var(--s3);padding-top:18px;border-top:1px solid var(--line)}
.sc-head b{display:block;font-family:var(--serif);font-size:var(--t3);line-height:1.5;color:var(--ink)}
.sc-head span{display:block;font-size:var(--t2);color:var(--ink3);margin-top:5px;font-variant-numeric:tabular-nums}
.sc-same{font-size:var(--t2);color:var(--ink2);line-height:1.7;margin-top:10px}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sc-col{border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;background:var(--bg2)}
.sc-col.on{border-color:var(--accent2);background:var(--accent-soft)}
.sc-col .t{font-size:var(--t1);color:var(--ink3);letter-spacing:.06em;margin-bottom:9px}
.sc-col.on .t{color:var(--accent);font-weight:700}
.sc-col span{display:inline-block;font-family:var(--serif);font-size:17px;font-weight:700;
  color:var(--ink3);margin:0 1px;line-height:1.5}
.sc-col span.hit{color:var(--ink)}
.sc-col.on span.hit{color:var(--accent)}
.sc-col .s{font-size:var(--t2);color:var(--ink2);margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.sc-why{list-style:none;margin-top:13px;display:flex;flex-direction:column;gap:6px}
.sc-why li{font-size:var(--t2);color:var(--ink2);line-height:1.6;padding-left:13px;position:relative}
.sc-why li::before{content:"·";position:absolute;left:2px;color:var(--accent)}
.sc-note{font-size:var(--t2);color:var(--ink2);line-height:1.7;margin-top:12px;
  background:var(--accent-soft);border-radius:10px;padding:11px 13px}
.sc-note b{color:var(--accent)}

/* ───── 상담: 언제가 좋고 나쁜가 ───── */
.c-asked{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;
  padding:13px 15px;margin:0 0 14px}
.c-asked b{display:block;font-size:var(--t3);line-height:1.6;color:var(--ink)}
.c-asked span{display:block;font-size:var(--t2);color:var(--ink2);margin-top:6px;line-height:1.7}
.tlc.asked .bar{outline:2px solid var(--accent);outline-offset:1px}
.tlc.asked .k{color:var(--accent);font-weight:700}
.c-when .c-base{font-size:var(--t2);color:var(--ink2);line-height:1.75;margin:0 0 12px}
.c-when .c-base b{color:var(--ink)}
.tl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;align-items:end;height:82px;margin:4px 0 12px}
.tlc{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.tlc .col{position:relative;width:100%;flex:1}
.tlc .col::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line2)}
.tlc .bar{position:absolute;left:0;right:0}
.tlc.u .bar{bottom:50%;border-radius:3px 3px 0 0;background:var(--accent)}
.tlc.d .bar{top:50%;border-radius:0 0 3px 3px;background:var(--g0)}
.tlc .k{font-size:10px;color:var(--ink3);line-height:1}
.c-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line)}
.c-days h5{font-size:var(--t1);color:var(--accent);letter-spacing:.12em;font-weight:500;margin-bottom:8px}
.c-days ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.c-days li{font-size:12.5px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:5px;align-items:baseline;line-height:1.5}
.c-days li b{color:var(--ink);font-weight:500}
.c-days li .gz{font-family:var(--serif);color:var(--ink)}
.c-days li .v{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink3)}
@media (max-width:380px){ .c-days{grid-template-columns:1fr} }

/* ───── 대운·흐름 ───── */
.daeun{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.daeun::-webkit-scrollbar{display:none}
.du{flex:0 0 66px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:9px 4px;text-align:center}
.du.now{border-color:var(--accent2);background:var(--accent-soft)}
.du .age{font-size:10.5px;color:var(--ink3)}
.du .han{font-size:21px}.du .yr{font-size:10px;color:var(--ink3)}
.flow{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.flow:last-child{border:0}
.flow .gz{flex:0 0 62px;font-family:var(--serif);font-size:19px;font-weight:700}
.flow .gz small{display:block;font-family:var(--sans);font-size:10.5px;color:var(--ink3);font-weight:400;margin-top:2px}
.flow p{font-size:13.5px;color:var(--ink2);line-height:1.75}.flow p b{color:var(--ink)}

/* ───── 달력 ───── */
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:13px;padding:7px 14px;border-radius:999px;background:var(--bg2);border:1px solid var(--line2);color:var(--ink2);cursor:pointer;transition:.15s;font-family:var(--sans)}
.chip.on{border-color:var(--accent2);color:var(--accent);background:var(--accent-soft)}
.calnav{display:flex;align-items:center;justify-content:space-between;margin:10px 0 12px}
.calnav b{font-family:var(--serif);font-size:17px}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calgrid .h{font-size:10.5px;color:var(--ink3);text-align:center;padding:4px 0;letter-spacing:.1em}
.cd{aspect-ratio:1;border-radius:11px;background:var(--bg2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:.12s}
.cd:hover{border-color:var(--accent2)}
.cd.empty{background:none;border:0}
.cd i{width:5px;height:5px;border-radius:50%;margin-top:3px}
.cd.g3{background:var(--g3-bg);color:var(--g3-ink);font-weight:700;border-color:transparent}
.cd.g2{background:var(--g2-bg);border-color:transparent}
.cd.g0{background:var(--g0-bg);color:var(--g0-ink);border-color:transparent}
.cd.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cd.today{border-color:var(--ink3)}
.cd.past{opacity:.5}
.g3{background:var(--g3)}.g2{background:var(--g2)}.g1{background:var(--g1)}.g0{background:var(--g0)}
.legend{display:flex;gap:13px;font-size:11px;color:var(--ink3);margin-top:12px;flex-wrap:wrap}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.best{display:grid;gap:7px;margin-top:10px}
.best .b{display:flex;gap:12px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px}
.best .b b{font-family:var(--serif);color:var(--accent)}
.best .b span{color:var(--ink3);font-size:12px;margin-left:auto}

/* ───── 궁합 ───── */
.score{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.score b{font-family:var(--serif);font-size:48px;font-weight:900;color:var(--accent);white-space:nowrap;line-height:1}
.score span{color:var(--ink3);font-size:13px}
.pl{display:flex;gap:6px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.pl:last-child{border:0}.pl small{color:var(--ink3)}
.pl button{background:none;border:0;color:var(--ink3);cursor:pointer;font-size:13px;padding:2px 6px}
.pl button:hover{color:var(--accent)}

/* ───── 채팅 ───── */
.msgs{display:flex;flex-direction:column;gap:11px;min-height:120px;max-height:52vh;overflow-y:auto;margin-bottom:12px}
.msg{max-width:88%;padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.75;white-space:pre-line}
.msg.u{align-self:flex-end;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--ink);border-bottom-right-radius:5px}
.msg.a{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px;font-family:var(--letter);font-size:15.5px}
.msg.t{align-self:flex-start;color:var(--ink3);font-size:13px}
.suggest{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}.suggest::-webkit-scrollbar{display:none}
.suggest button{flex:0 0 auto;font-size:12px;padding:7px 12px;border-radius:999px;background:none;border:1px solid var(--line2);color:var(--ink2);cursor:pointer;transition:.15s;font-family:var(--sans)}
.suggest button:hover{border-color:var(--accent2);color:var(--accent)}
.ask{display:flex;gap:8px}
.ask input{flex:1}
.ask button{flex:0 0 auto;background:var(--seal-bg);color:var(--seal-ink);border:0;border-radius:12px;padding:0 18px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.ask button:disabled{background:var(--line);color:var(--ink3)}

/* ───── 네비 ───── */
nav{
  position:fixed;left:0;right:0;bottom:0;z-index:9;
  /* 칸 수를 박아 두면 버튼을 지울 때마다 쏠린다(2026-08-30 여섯 칸에 버튼 넷) */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;
  padding:8px max(14px,calc((100vw - 520px)/2 + 14px));
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--nav-bg);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
nav button{
  background:none;border:0;color:var(--ink3);font-size:var(--t1);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:44px;padding:4px 0;border-radius:10px;transition:.15s;font-family:var(--sans);
}
nav button svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
nav button.on{color:var(--accent);font-weight:700}
nav button:hover{color:var(--ink2)}
nav button.on:hover{color:var(--accent)}

/* ───── 오늘 · 먹색 히어로 ───── */
.hero-day{
  background:var(--hero-bg);color:var(--hero-ink);
  border:1px solid var(--hero-line);
  border-radius:var(--r);padding:22px 20px 24px;margin-bottom:var(--s3);
  position:relative;z-index:1;box-shadow:var(--shadow-lift);
}
.hero-day .hd-top{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3)}
.hero-day .hd-date{font-size:var(--t2);color:var(--hero-dim);letter-spacing:.03em}
.hero-day .hd-chip{
  margin-left:auto;display:flex;align-items:center;gap:6px;font-size:var(--t1);
  color:var(--hero-dim);background:var(--hero-chip);border-radius:999px;padding:5px 11px;
}
.hero-day .hd-chip i{width:5px;height:5px;border-radius:50%;background:var(--hero-accent)}
.hero-day .hd-gz{display:flex;align-items:flex-end;gap:13px}
.hero-day .hd-gz .han{font-size:var(--t7);font-weight:700;line-height:.95;font-family:var(--serif)}
.hero-day .hd-gz .lab{padding-bottom:5px}
.hero-day .hd-gz .lab small{display:block;font-size:var(--t1);color:var(--hero-dim);letter-spacing:.1em}
.hero-day .hd-gz .lab b{display:block;font-size:var(--t4);color:var(--hero-accent);margin-top:3px}
.hero-day .hd-lede{
  font-family:var(--serif);font-size:var(--t5);font-weight:500;line-height:1.6;
  letter-spacing:-.02em;margin-top:var(--s3);text-wrap:pretty;
}
.hero-day .hd-lede.loading{font-family:var(--sans);font-size:var(--t3);color:var(--hero-dim)}
/* 로그인 안내 — 히어로 안에서도 읽히게 */
.hero-day .hd-gate{
  margin-top:var(--s3);padding-top:18px;border-top:1px solid var(--hero-line);
}
.hero-day .hd-gate b{display:block;font-family:var(--serif);font-size:var(--t3);color:var(--hero-ink)}
.hero-day .hd-gate p{font-size:var(--t2);color:var(--hero-dim);line-height:1.7;margin-top:6px}
.hero-day .hd-gate .btn{margin-top:14px;padding:13px}
.hero-day .hd-note{display:block;font-family:var(--sans);font-size:var(--t1);color:var(--hero-dim2);margin-top:10px;letter-spacing:.02em}
/* 통변좌표 — 우리 엔진만 내놓는 값 */
.coord{margin-top:var(--s3);padding-top:18px;border-top:1px solid var(--hero-line)}
.coord .c-row{display:flex;align-items:baseline;gap:7px}
.coord .c-row .k{font-size:var(--t1);color:var(--hero-dim)}
.coord .c-row .v{
  margin-left:auto;font-size:var(--t5);font-weight:700;color:var(--hero-accent);
  line-height:1;font-variant-numeric:tabular-nums;
}
.coord .c-row .s{font-size:var(--t1);color:var(--hero-dim)}
.coord .gauge{position:relative;height:4px;border-radius:999px;background:var(--hero-line);margin-top:11px}
.coord .gauge .mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--hero-dim2)}
.coord .gauge .fill{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--hero-accent)}
.coord .scale{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-size:10.5px;color:var(--hero-dim2)}
.coord .chain{margin-top:10px;font-size:10.5px;line-height:1.6;color:var(--hero-dim2);letter-spacing:.02em;overflow-wrap:anywhere}

/* 오늘 할 하나 — 카드가 아니라 지시 */
.act-one{display:flex;gap:13px;align-items:flex-start;margin-bottom:var(--s3)}
.act-one .mark{
  flex:0 0 34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.act-one .mark svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.act-one .k{font-size:var(--t1);color:var(--accent);letter-spacing:.14em;font-weight:500}
.act-one p{font-size:var(--t4);font-weight:500;line-height:1.68;margin-top:5px;text-wrap:pretty}

/* ───── 모달 ───── */
.modal{position:fixed;inset:0;background:rgba(20,15,10,.5);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:10}
:root[data-theme="night"] .modal{background:rgba(6,8,18,.65)}
.sheet{
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-bottom:0;
  border-radius:22px 22px 0 0;padding:24px 20px 34px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-lift);
}
.sheet h3{font-family:var(--serif)}
.seg{display:flex;gap:6px;margin-top:6px}
.seg button{flex:1;padding:10px;border-radius:11px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink2);font-size:13.5px;cursor:pointer;font-family:var(--sans)}
.seg button.on{border-color:var(--accent2);color:var(--accent);background:var(--accent-soft);font-weight:700}
footer{font-size:11px;color:var(--ink3);text-align:center;margin-top:34px;line-height:1.85;letter-spacing:.02em;position:relative;z-index:1}
.hide{display:none!important}

/* ───── 랜딩 ───── */
.lp-hero{text-align:center;padding:22px 4px 30px}
.lp-seal{
  width:60px;height:60px;margin:0 auto 20px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--seal-bg);color:var(--seal-ink);
  font-family:var(--serif);font-size:32px;font-weight:900;
  box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.28);
}
.lp-hero h1{
  font-family:var(--letter);font-size:31px;font-weight:700;line-height:1.45;
  letter-spacing:-.015em;color:var(--ink);
}
.lp-lead{font-size:14.5px;color:var(--ink2);line-height:1.85;margin-top:16px}
.lp-lead b{color:var(--accent);font-weight:700}
.lp-today{
  display:inline-flex;align-items:center;gap:9px;margin:24px 0 4px;
  padding:9px 18px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
}
.lp-today-label{font-size:11.5px;color:var(--ink3);letter-spacing:.1em}
.lp-today b{font-family:var(--serif);font-size:20px;font-weight:900;color:var(--accent)}
.lp-today span:last-child{font-size:12.5px;color:var(--ink2)}
.lp-cta{max-width:320px;margin:20px auto 0}
/* ───── 장면 히어로 ─────
   첫 화면은 글이 아니라 장면이어야 한다. 삽화(app/art)를 계절에 맞춰 깔고
   그 위에 글을 얹는다. 낮·밤 어느 쪽이든 이 블록만은 밤으로 고정한다 —
   장면은 한 세계여야 하고, 그림 위의 글은 밝아야 읽힌다. */
.lp-hero.scene{
  position:relative;overflow:hidden;border-radius:22px;background:#161433;
  padding:40px 22px 34px;margin:0 0 18px;box-shadow:0 14px 40px rgba(30,20,60,.22);
}
.lp-hero.scene::before{
  content:"";position:absolute;inset:0;background-image:var(--hero-art,none);
  background-size:cover;background-position:50% 28%;
}
.lp-hero.scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,48,.28) 0%,rgba(18,16,48,.70) 46%,rgba(18,16,48,.95) 100%);
}
.lp-hero.scene>*{position:relative;z-index:1}
.lp-hero.scene h1{color:#f7f3ff;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.lp-hero.scene .lp-lead{color:#dbd5f0}
.lp-hero.scene .lp-lead b{color:#e6c98a}
.lp-hero.scene .lp-seal{box-shadow:0 6px 24px rgba(0,0,0,.45)}
.lp-hero.scene .lp-today{background:rgba(230,201,138,.13);border-color:rgba(230,201,138,.42)}
.lp-hero.scene .lp-today-label{color:#bdb5d8}
.lp-hero.scene .lp-today b{color:#e6c98a}
.lp-hero.scene .lp-today span:last-child{color:#dbd5f0}
.lp-hero.scene .hint{color:#c3bcdc}

/* ───── 홈의 얼굴 ─────
   메뉴판이 아니라 하루의 장면. 오늘의 회의 그림 위에 이름과 간지를 얹는다. */
.home-scene{position:relative;border-radius:20px;overflow:hidden;margin:0 0 16px;
  aspect-ratio:4/5;max-height:none;display:flex;align-items:flex-end;background:#161433;
  box-shadow:0 12px 34px rgba(30,20,60,.20)}
/* 얼굴이 주인공이다 — 위를 넉넉히 남기고 눈높이가 위쪽 1/3 에 오게 잡는다 */
.home-scene .hs-face{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 32%}
.home-scene.noface{aspect-ratio:auto;min-height:150px}
.hs-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,16,48,.05) 0%,rgba(18,16,48,.10) 38%,rgba(18,16,48,.72) 66%,rgba(18,16,48,.96) 100%)}
.hs-body{position:relative;padding:22px 20px 18px;width:100%}
.hs-name{font-family:var(--letter);font-size:22px;font-weight:700;color:#f7f3ff;margin:0}
.hs-day{font-family:var(--letter);font-size:16px;color:#e2ddf3;margin:5px 0 0}
.hs-sub{font-size:11px;letter-spacing:.22em;color:#e6c98a;margin:10px 0 0}

.hs-hail{font-family:var(--letter);font-size:15px;color:#e6c98a;margin:0 0 8px;letter-spacing:.01em}

/* ───── 책사단 도열 ─────
   「나를 위해 여럿이 나와 있다」를 맡던 칸이다.
   홈의 도열(#todayEnvoy)은 2026-09-12 에 걷었다 — 열 얼굴이 문 노릇까지 하는 바람에
   홈 목록이 뺀 화면으로 들어가는 샛길이 생겨 이동경로가 어긋났다.
   지금 이 규칙을 쓰는 곳은 **랜딩 한 곳뿐**이다(app.js showLanding 의 #lpCorps).
   거기선 span 이라 누를 수 없다 — 세워만 두는 소개다.
   그래서 배경 그림(.corps-bg)·머리말(.corps-k)·오늘 표시(.cm.on)·누름(.cm:active)은 같이 걷었다. */
.corps{position:relative;overflow:hidden;border:1px solid var(--accent-line);
  border-radius:18px;padding:16px 14px 14px;margin:0 0 16px;
  background:linear-gradient(135deg,var(--accent-soft),var(--card))}
.corps > *{position:relative;z-index:1}
.corps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 4px}
.cm{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;
  padding:0;cursor:pointer;font-family:inherit;color:var(--ink3);transition:transform .06s ease}
.cm-face{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--line2);opacity:.55;transition:.18s}
.cm-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cm-seal{font-family:var(--serif);font-size:17px;font-weight:900;color:var(--ink3)}
.cm-name{font-size:11px;letter-spacing:0;line-height:1.2;text-align:center}
/* 오늘 나온 책사 — 이름을 크게, 직함과 축은 그 아래 작게.
   이름만 두면 부를 수는 있는데 어느 고전에서 왔는지가 사라진다. 둘 다 세운다. */
.hs-who{font-family:var(--letter);font-size:26px;font-weight:700;color:#f7f3ff;margin:14px 0 0;
  letter-spacing:.02em}
.hs-role{font-size:11px;letter-spacing:.16em;color:#e6c98a;margin:5px 0 0}

/* 오늘 나온 책사의 한마디 — 얼빡 아래, 그림 위에 얹는다 */
.hs-say{display:flex;align-items:center;gap:9px;width:100%;margin:14px 0 0;padding:11px 12px;
  border-radius:13px;border:1px solid rgba(230,201,138,.34);background:rgba(18,16,48,.55);
  cursor:pointer;font-family:inherit;text-align:left;color:#eeeaf7;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hs-say .cs-txt{color:#ddd7ef}
.cs-who{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:3px 9px}
.cs-txt{font-size:12.5px;color:var(--ink2);line-height:1.5}
.cs-go{margin-left:auto;color:var(--accent);flex:0 0 auto}

/* 들어서면 차례로 일어선다 — 「이미 준비되어 있었다」는 느낌은 이런 데서 온다 */
@keyframes 일어서기{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
[data-tab="home"] > .home-scene,
[data-tab="home"] > #chong{animation:일어서기 .5s ease both}
[data-tab="home"] > #chong{animation-delay:.08s}
@media (prefers-reduced-motion:reduce){
  [data-tab="home"] > .home-scene,
  [data-tab="home"] > #chong{animation:none}
}


/* 서신을 기다리는 자리에도 장면을 둔다 */
/* 유료 화면의 서랍 — 근거는 버리지 않고 접는다. 열어야 할 문처럼 보이게. */
.pb-fold{margin:16px 0 0;border:1px solid var(--line);border-radius:13px;
  background:var(--bg2);padding:0 13px}
.pb-fold > summary{padding:12px 0;font-size:13px;color:var(--accent);font-weight:700;
  letter-spacing:-.01em}
.pb-fold[open]{padding-bottom:10px}
.pb-fold[open] > summary{border-bottom:1px solid var(--line);margin-bottom:8px}
/* 답이 맨 위에 선다 — 값을 치른 자리에서 제일 먼저 보여야 할 것 */
/* 「한 편」 제목 줄 — 모델이 첫 줄에 대괄호로 짓고, 앱이 벗겨서 여기 세운다(2026-09-12) */
.pb-ai-t { font-family: var(--letter, inherit); font-size: 16.5px; color: var(--accent); margin: 0 0 10px; line-height: 1.5; }
.pb-ai-slot:empty{display:none}
.pb-ai-slot .pb-ai{margin:14px 0 4px}

/* 회의록 — 누가 한 말인지 눈에 걸려야 회의로 읽힌다 */
.gm-say{position:relative}
.gm-num{color:var(--ink3);margin-right:6px;font-weight:700}
.gm-who img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 50%;
  margin:0 6px 0 -5px;vertical-align:-6px;border:1px solid var(--accent-line);background:var(--bg2)}
.gm-who{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:999px;padding:2px 9px;margin-right:8px;
  vertical-align:2px;white-space:nowrap}
.lp-feat{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.lp-feat:last-child{border:0;padding-bottom:0}
.lp-feat i{
  flex:0 0 38px;height:38px;border-radius:11px;font-style:normal;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--line2);color:var(--accent);
}
.lp-feat b{font-size:15px;display:block;margin-bottom:3px}
.lp-feat p{font-size:13.5px;color:var(--ink2);line-height:1.7}
.lp-trust{display:grid;gap:15px}
.lp-trust>div{padding-left:14px;border-left:2px solid var(--accent-line)}
.lp-trust b{font-size:14.5px;display:block;margin-bottom:4px}
.lp-trust p{font-size:13.5px;color:var(--ink2);line-height:1.75}
.lp-trust p b{display:inline;color:var(--accent);font-size:inherit}
.lp-rules{display:grid;gap:13px}
.lp-rules p{font-family:var(--letter);font-size:15px;color:var(--ink2);line-height:1.8}
.lp-rules b{color:var(--ink);font-weight:700}
/* 공유 카드 */
.share-wrap{margin-top:14px;text-align:center}
.share-wrap canvas{width:100%;max-width:320px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.share-btns{display:flex;gap:8px;margin-top:12px}
.share-btns .btn{margin-top:0}

/* ───── 심층 상담 ───── */
textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);border-radius:12px;padding:13px 14px;font-size:15.5px;outline:none;font-family:var(--sans);line-height:1.7;resize:vertical}
textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 3px var(--accent-soft)}
nav button{position:relative}
nav .dot{position:absolute;top:3px;right:calc(50% - 16px);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.c-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.c-tag{font-size:11.5px;color:var(--accent);letter-spacing:.06em;padding:5px 11px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-line);white-space:nowrap}
.c-q{font-family:var(--letter);font-size:19px;line-height:1.6;color:var(--ink);margin-bottom:14px}
.c-lead{font-family:var(--letter);font-size:16px;line-height:1.85;color:var(--ink2);padding:14px 16px;background:var(--bg2);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;margin-bottom:18px}
.c-recall{padding:13px 15px;border:1px dashed var(--accent-line);border-radius:12px;margin-bottom:16px;background:var(--accent-soft)}
.c-recall b{font-size:12px;color:var(--accent);letter-spacing:.06em}
.c-recall p{font-size:14px;color:var(--ink2);line-height:1.75;margin-top:6px}
.c-sec{margin-bottom:22px}
.c-sec h4{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.c-sec h4 small{font-size:12px;color:var(--ink3);font-weight:400}
.c-toggle{background:none;border:0;color:var(--accent);font-size:12px;letter-spacing:.08em;cursor:pointer;padding:0;font-family:var(--sans)}
.c-struct{margin-top:12px;padding:14px;background:var(--bg2);border-radius:12px;border:1px solid var(--line)}
.c-layer{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.c-layer:last-of-type{border:0}
.c-layer b{flex:0 0 42px;font-size:11.5px;color:var(--ink3);letter-spacing:.08em}
.c-layer .gz{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--accent);flex:0 0 auto}
.c-layer p{font-size:12.5px;color:var(--ink2);line-height:1.6}
.c-mods{margin-bottom:18px;display:grid;gap:9px}
.c-mods p{font-size:13.5px;color:var(--ink2);line-height:1.75;padding-left:13px;border-left:2px solid var(--line2)}
.hyp{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:11px;background:var(--bg2)}
.hyp.top{border-color:var(--accent2);background:var(--accent-soft)}
.hyp-h{display:flex;gap:9px;align-items:baseline;margin-bottom:9px}
.hyp-h .rank{flex:0 0 auto;font-size:11px;color:var(--accent);border:1px solid var(--accent-line);border-radius:999px;padding:3px 9px;letter-spacing:.04em}
.hyp-h b{font-family:var(--letter);font-size:16px;line-height:1.5}
.hyp-bar{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.hyp-bar i{flex:1;display:block;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.hyp-bar i b{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .45s ease}
.hyp-bar span{font-size:12px;color:var(--ink3);flex:0 0 34px;text-align:right}
.hyp-basis{font-size:13.5px;color:var(--ink2);line-height:1.75;margin-bottom:10px}
.hyp-signs b{font-size:11.5px;color:var(--ink3);letter-spacing:.05em}
.hyp-signs ul{margin:6px 0 0;padding:0;list-style:none}
.hyp-signs li{font-size:13px;color:var(--ink2);line-height:1.7;padding-left:13px;position:relative}
.hyp-signs li::before{content:"\00B7";position:absolute;left:3px;color:var(--accent)}
.cq-row{padding:13px 0;border-bottom:1px solid var(--line)}
.cq-row:last-child{border:0}
.cq-row p{font-size:14.5px;line-height:1.7;margin-bottom:9px;display:flex;gap:9px}
.cq-n{flex:0 0 20px;height:20px;border-radius:50%;background:var(--bg2);border:1px solid var(--line2);font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--ink3);margin-top:3px}
.cq-row.answered .cq-n{background:var(--accent);border-color:var(--accent);color:var(--seal-ink)}
.cq-btns{display:flex;gap:7px;padding-left:29px}
.cq-btns button{flex:0 0 auto;font-size:13px;padding:8px 15px;border-radius:999px;background:var(--bg2);border:1px solid var(--line2);color:var(--ink2);cursor:pointer;font-family:var(--sans);transition:.15s}
.cq-btns button:hover{border-color:var(--accent2)}
.cq-btns button.on{background:var(--accent);border-color:var(--accent);color:var(--seal-ink);font-weight:700}
.c-flip,.c-hold{padding:15px 16px;border-radius:13px;margin-bottom:20px}
.c-flip{background:var(--accent-soft);border:1px solid var(--accent2)}
.c-hold{background:var(--bg2);border:1px solid var(--line2)}
.c-flip b,.c-hold b{font-size:14.5px;color:var(--accent)}
.c-hold b{color:var(--ink2)}
.c-flip p,.c-hold p{font-size:14px;color:var(--ink2);line-height:1.8;margin-top:7px}
.c-act,.c-metric{padding:14px 16px;border-radius:12px;margin-bottom:10px}
.c-act{background:var(--accent-soft);border:1px solid var(--accent-line)}
.c-metric{background:var(--bg2);border:1px solid var(--line)}
.c-act b,.c-metric b{font-size:11.5px;letter-spacing:.06em;color:var(--accent)}
.c-metric b{color:var(--ink3)}
.c-act p,.c-metric p{font-size:15px;color:var(--ink);line-height:1.75;margin-top:6px}
.past{border:1px solid var(--line);border-radius:13px;padding:14px;margin-bottom:10px;background:var(--bg2)}
.past-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.past-h b{font-family:var(--letter);font-size:15px;line-height:1.5}
.past-h span{font-size:11.5px;color:var(--ink3);flex:0 0 auto}
.past p{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.65}
.past-m{font-size:11.5px;color:var(--ink3);margin-top:7px}
.past-b{display:flex;gap:7px;margin-top:11px}

.c-diff{font-size:13px;color:var(--ink3);margin-top:9px;line-height:1.7}
.c-diff b{color:var(--ink2);font-weight:600}

/* ───── 선택지 비교 (Decision Lab) ───── */
.opt{border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:10px;background:var(--bg2)}
.opt.top{border-color:var(--accent2);background:var(--accent-soft)}
.opt-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.opt-k{flex:0 0 26px;height:26px;border-radius:8px;background:var(--seal-bg);color:var(--seal-ink);font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center}
.opt-h b{flex:1;font-family:var(--letter);font-size:16px;line-height:1.45}
.opt-s{font-size:12px;color:var(--ink3);flex:0 0 auto}
.opt p{font-size:13.5px;color:var(--ink2);line-height:1.7;margin-top:5px;padding-left:36px}
.opt p b{display:inline-block;min-width:70px;font-size:11.5px;color:var(--accent);letter-spacing:.04em;margin-right:4px}
/* ───── 관측 지표 기록 ───── */
.past.due{border-color:var(--accent2)}
.metric-box{margin-top:11px;padding:12px;border-radius:11px;background:var(--card);border:1px solid var(--line)}
.metric-h{display:flex;align-items:center;gap:9px}
.metric-h b{font-size:13px;flex:1}
.tr{font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--ink3)}
.tr.up{color:var(--wood);border-color:var(--wood)}
.tr.down{color:var(--fire);border-color:var(--fire)}
.metric-logs{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.metric-logs span{font-size:12px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:4px 9px;color:var(--ink2)}
.metric-logs i{font-style:normal;color:var(--ink3);margin-right:5px;font-size:11px}
.metric-add{display:flex;gap:6px;margin-top:10px}
.metric-add input{flex:1;padding:9px 11px;font-size:14px;border-radius:9px}
.metric-add button{flex:0 0 auto}

/* ───── 양력/음력 토글 ───── */
.seg{display:flex;gap:6px;margin-bottom:8px}
.seg button{flex:1;padding:9px;border-radius:10px;background:var(--bg2);border:1px solid var(--line2);color:var(--ink3);font-size:14px;cursor:pointer;font-family:var(--sans);transition:.15s}
.seg button.on{background:var(--accent-soft);border-color:var(--accent2);color:var(--accent);font-weight:700}
.conv{font-size:13px;color:var(--ink2);margin-top:9px;padding:9px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.conv b{color:var(--accent)}

/* ───── 로그인 / 동기화 ───── */
.btn.kakao{background:#FEE500;color:#191600;box-shadow:0 3px 12px rgba(254,229,0,.25)}
.btn.kakao span{margin-right:7px}
.mailfold{margin-top:12px}
.mailfold summary{font-size:13px;color:var(--ink3);cursor:pointer;list-style:none;padding:6px 0}
.mailfold summary::-webkit-details-marker{display:none}
.mailfold summary::before{content:"› ";color:var(--accent)}
.mailfold[open] summary::before{content:"⌄ "}
.synced{font-size:13.5px;color:var(--ink2);margin-bottom:10px;line-height:1.6}
.synced b{color:var(--accent);display:block;font-size:15px}


/* ───── 마무리: 넘침 방지 · 손가락으로 누를 수 있는 크기 ───── */
/* 1fr은 내용 크기까지 늘어날 수 있어 칸이 카드 밖으로 밀려난다. minmax(0,1fr)로 고정한다. */
.cd, .pillar, .week .wd, .du { min-width: 0 }
.card, .tab { min-width: 0 }
/* 터치 영역: 44px 미만은 손가락으로 정확히 누르기 어렵다 */
.btn-ghost { min-height: 42px; display: inline-flex; align-items: center; justify-content: center }
.btn-icon { width: 42px; height: 42px }
.calnav .btn-ghost { min-width: 42px; font-size: 18px; line-height: 1 }
.cq-btns button { min-height: 42px }
.seg button { min-height: 42px }
.suggest button, .chips .chip { min-height: 38px }
.pl button { min-height: 40px; padding: 0 10px }
.metric-add button { min-height: 42px }

/* ───── 사람 전환 ───── */
#btnPerson{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#btnPerson b{color:var(--ink);font-weight:700}
.pr{display:flex;gap:8px;align-items:stretch;margin-bottom:9px}
.pr-main{flex:1;text-align:left;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;cursor:pointer;font-family:var(--sans);min-height:56px}
.pr.on .pr-main{border-color:var(--accent2);background:var(--accent-soft)}
.pr-main b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:3px}
.pr-main span{font-size:12.5px;color:var(--ink3)}
.pr .btn-ghost{flex:0 0 auto}
#personForm .sheet{padding-bottom:26px}
#personForm .btn{margin-top:10px}

/* ───── 6차원 적층 체용 ───── */
.cy{padding:12px 0;border-bottom:1px solid var(--line)}
.cy:last-child{border:0;padding-bottom:0}
.cy-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cy-lv{flex:0 0 20px;height:20px;border-radius:6px;background:var(--bg2);border:1px solid var(--line2);font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.cy-h b{font-size:14px}
.cy-h .gz{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--accent)}
.cy-god{font-size:12px;color:var(--ink2);background:var(--bg2);border-radius:999px;padding:2px 9px}
.cy-sign{margin-left:auto;font-size:12.5px;font-weight:700;font-family:var(--serif)}
.cy-sign.up{color:var(--wood)}.cy-sign.dn{color:var(--fire)}.cy-sign.mid{color:var(--ink3)}
.cy-bar{height:5px;border-radius:3px;background:var(--line);margin:8px 0 6px;overflow:hidden}
.cy-bar i{display:block;height:100%;border-radius:3px;background:var(--ink3)}
.cy.up .cy-bar i{background:var(--wood)}
.cy.dn .cy-bar i{background:var(--fire)}
.cy.base{background:var(--accent-soft);margin:-4px -10px 6px;padding:12px 10px;border-radius:10px;border-bottom:0}
.cy p{font-size:12.5px;color:var(--ink2);line-height:1.7;margin-top:5px}
.seg.tier button{font-size:13px;padding:10px 4px}

/* ───── 사용량 · 잠금 안내 ───── */
.gate{padding:15px 16px;border-radius:13px;background:var(--accent-soft);border:1px solid var(--accent-line)}
.gate b{font-size:15px;color:var(--accent);display:block;margin-bottom:6px}
.gate p{font-size:14px;color:var(--ink2);line-height:1.8}
.gate .btn{margin-top:12px}
.ub{display:grid;grid-template-columns:88px 1fr 52px;align-items:center;gap:9px;font-size:12.5px;color:var(--ink2);margin-bottom:7px}
.ub i{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.ub i b{display:block;height:100%;border-radius:3px;background:var(--accent)}
.ub span:last-child{text-align:right;color:var(--ink3)}

/* ───── 말로 설명하기 ───── */
.freetell{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line2)}
.freetell .btn-ghost{width:100%}
#cTellBox{margin-top:10px}
.told{padding:13px 15px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-line);margin-bottom:14px}
.told b{font-size:12px;color:var(--accent);letter-spacing:.05em}
.told p{font-size:14px;color:var(--ink);line-height:1.75;margin:6px 0 4px}
.told .hint{margin:0}

/* ── 홈: 타일 격자와 가운데 만세력 ── */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.tiles+.tiles{margin-top:0}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:14px 15px;
  cursor:pointer;font-family:inherit;color:var(--ink);transition:transform .06s ease}
.tile:active{transform:scale(.98)}
.tile .ti-k{font-size:11.5px;letter-spacing:.14em;color:var(--ink3);font-weight:500}
.tile .ti-big{font-size:21px;font-weight:800;font-family:var(--serif);line-height:1.2}
.tile .ti-sub{font-size:12px;color:var(--ink2);line-height:1.5}
.home-manse{margin-bottom:12px}
.hm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.hm-head h2{margin:0}
.hm-people{display:flex;gap:6px;flex-wrap:wrap}
.hm-people button{border:1px solid var(--line);background:var(--bg2);color:var(--ink2);
  border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.hm-people button.on{background:var(--accent-soft);border-color:var(--accent2);color:var(--ink);font-weight:600}
.hm-meta{margin-top:12px;font-size:13px;color:var(--ink2);line-height:1.8}
.hm-meta b{color:var(--ink)}

/* ── 원국 한입 카드 덱 (가로 스와이프) ── */
.mzdeck{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;margin:0 -2px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mzdeck::-webkit-scrollbar{display:none}
.mzcard{flex:0 0 76%;max-width:300px;scroll-snap-align:start;border-radius:18px;
  padding:18px 18px 16px;border:1px solid var(--line);background:var(--bg2);
  display:flex;flex-direction:column;gap:8px;min-height:150px}
.mzcard .mk{font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:600}
.mzcard .mb{font-size:21px;font-weight:800;font-family:var(--serif);line-height:1.25;letter-spacing:-.02em}
.mzcard .ms{font-size:13px;color:var(--ink2);line-height:1.7}
.mzcard .mtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.mzcard .mtags span{font-size:11.5px;color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:3px 9px}
.mzcard .stat{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2)}
.mzcard .stat b{width:16px;text-align:center;font-size:13px}
.mzcard .stat .bar{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.mzcard .stat .bar i{display:block;height:100%;border-radius:99px}
.mzcard .stat .n{width:14px;text-align:right;font-variant-numeric:tabular-nums}
.mzcard .stat .bar .f-목{background:var(--wood)}.mzcard .stat .bar .f-화{background:var(--fire)}
.mzcard .stat .bar .f-토{background:var(--earth)}.mzcard .stat .bar .f-금{background:var(--metal)}
.mzcard .stat .bar .f-수{background:var(--water)}

/* ── 사주 법정 판결문 ── */
#verdict{margin-top:14px;border:1.5px solid var(--line2);border-radius:14px;overflow:hidden}
#verdict .vh{background:var(--accent-soft);padding:14px 16px;border-bottom:1px dashed var(--line2);
  text-align:center}
#verdict .vh .no{font-size:11px;letter-spacing:.22em;color:var(--ink3)}
#verdict .vh .tt{font-family:var(--serif);font-size:19px;font-weight:800;margin-top:4px}
#verdict .vb{padding:6px 16px 14px}
#verdict .chg{padding:12px 0;border-bottom:1px dashed var(--line)}
#verdict .chg:last-of-type{border-bottom:0}
#verdict .chg .ct{font-weight:700;font-size:14.5px}
#verdict .chg .ct em{font-style:normal;color:var(--accent);margin-right:6px}
#verdict .chg .cx{font-size:13px;color:var(--ink2);line-height:1.75;margin-top:4px}
#verdict .mercy{background:var(--bg2);border-radius:10px;padding:12px 14px;margin:10px 0 4px;
  font-size:13px;line-height:1.75;color:var(--ink2)}
#verdict .mercy b{color:var(--ink)}
#verdict .foot{font-size:11.5px;color:var(--ink3);text-align:center;padding:10px 14px 2px;line-height:1.7}

/* ── 유형 카드 뽑기 ── */
/* 카드는 반드시 이 두 규칙을 짝으로 받는다 — Wrap(가운데 정렬) + Flip(폭·3D).
   한쪽만 넣으면 카드가 왼쪽에 붙거나 뒤집기가 죽는다. 새 카드 추가 시 둘 다 등록할 것. */
/* ── 콘텐츠 카드 공통 ──
   예전엔 카드마다 ID를 세 군데(정렬·폭·모서리) 나열했는데, 새 카드를 만들 때마다
   한 군데씩 빠뜨려 왼쪽에 붙거나 뒤집기가 죽거나 그림자가 없었다.
   이제 래퍼/플립/SVG에 클래스만 달면 된다: .cardwrap > .cardflip > .cardsvg */
.cardwrap{margin-top:14px;perspective:900px;display:flex;flex-direction:column;align-items:center}
.cardflip{width:min(300px,86%);transform-style:preserve-3d;animation:gflip .9s ease-out}
.cardwrap .btn{width:min(300px,86%)}
.cardsvg svg{border-radius:20px;box-shadow:0 10px 34px rgba(40,30,15,.28)}


@keyframes gflip{0%{transform:rotateY(180deg) scale(.85);opacity:0}60%{transform:rotateY(-14deg) scale(1.02)}100%{transform:rotateY(0)}}


/* ── 웹툰식 홈: 인기 배너와 콘텐츠 진열대 ── */
.hero-banner{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;border:1px solid var(--accent2);border-radius:18px;padding:20px 18px;
  background:linear-gradient(135deg,var(--accent-soft),var(--bg2));color:var(--ink);
  margin-bottom:16px;position:relative;overflow:hidden;transition:transform .06s ease}
.hero-banner:active{transform:scale(.985)}
.hb-badge{position:absolute;top:14px;right:14px;background:var(--accent);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;border-radius:999px;padding:4px 10px}
.hb-title{font-family:var(--serif);font-size:21px;font-weight:800;letter-spacing:-.02em}
.hb-sub{font-size:12.5px;color:var(--ink2);line-height:1.6}
.sec-label{font-size:11.5px;letter-spacing:.18em;color:var(--ink3);font-weight:600;margin:4px 2px 10px}
.backhome{width:auto;margin-bottom:14px;padding:8px 14px;font-size:13px}

/* 택일 상담 배너 — 콘텐츠 배너(가챠)와 색을 갈라 성격이 다름을 보인다 */
.hero-banner.alt{background:linear-gradient(135deg,var(--card),var(--bg2));border:1px solid var(--line)}
.hero-banner.alt .hb-badge{background:#2f6b4f;color:#fff}
.hero-banner.alt .hb-title,.hero-banner.alt .hb-sub{color:var(--ink)}
.hero-banner.alt .hb-sub{color:var(--ink2)}

/* 정적 문서 본문 — .brief(AI 답변용, pre-line)와 달리 HTML 줄바꿈을 무시한다 */
.doc{font-family:var(--sans);font-size:14px;line-height:1.72;color:var(--ink);letter-spacing:-.15px}
.doc p+p{margin-top:10px}
.doc b{color:var(--accent);font-weight:700}
.doc .sub{color:var(--ink2)}
/* .card h3(22px 명조)보다 구체적이어야 한다 — 안 그러면 h3가 h2보다 커진다 */
.card h3.doc-h{font-family:var(--sans);margin:22px 0 10px;font-size:13px;font-weight:700;
  color:var(--ink2);letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.card h3.doc-h::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── 비망록 ── */
.mm{border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px;
  background:var(--bg2);position:relative}
.mm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mm-head b{font-size:15px}
.mm-when{font-size:12.5px;color:var(--accent);font-weight:600;white-space:nowrap}
.mm-v{margin-top:5px;font-size:12.5px}
.mm-grade{font-weight:700;color:var(--ink)}
.mm-dim{color:var(--ink3)}
.mm-line{margin-top:5px;font-size:12.5px;color:var(--ink2);line-height:1.6}
.mm-out{margin-top:9px;font-size:13px;color:var(--ink2);line-height:1.6}
.mm-ask{margin-top:10px;font-size:12.5px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mm-ask .chip{font-size:12px;padding:5px 10px}
/* 오른쪽 위 구석은 '1달째'가 쓰는 자리다. 지우기를 절대위치로 거기 박으니 겹쳤다.
   흐름 맨 끝에 두고 오른쪽으로 민다 — 실수로 누를 일도 줄어든다. */
.mm-del{display:block;margin:12px 0 0 auto;border:0;background:none;cursor:pointer;
  font-size:11px;color:var(--ink3);font-family:inherit;padding:4px 2px}
.mm-del:hover{color:var(--g0-ink)}
.mm-sep{font-size:11.5px;letter-spacing:.14em;color:var(--ink3);margin:16px 0 9px}
.mm-logs{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.mm-log{font-size:12px;color:var(--ink2);background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.mm-pat{margin-top:9px;font-size:12.5px;line-height:1.65;color:var(--ink);
  background:var(--accent-soft);border-radius:9px;padding:9px 11px}
.mm-pat.mm-dim{background:none;padding:0;color:var(--ink3)}
.mm-say{margin-top:10px;font-size:13px;line-height:1.75;color:var(--ink);
  border-left:3px solid var(--accent2);padding:2px 0 2px 11px}
.mm-say.mm-up,.mm-say.mm-keep{border-left-color:#3e7d4f}
.mm-say.mm-hold,.mm-say.mm-wait{border-left-color:#3a6ea5}
.mm-say.mm-miss{border-left-color:#b23a2a}

/* ── 첫 마디 — 힘들어서 들어온 사람에게 먼저 하는 말 ── */
.standing{border-left:4px solid var(--line2)}
.standing.down{border-left-color:#3a6ea5}
.standing.up{border-left-color:#3e7d4f}
.st-head{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.st-body{margin-top:9px;font-size:14.5px;line-height:1.8;color:var(--ink2)}
.st-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--ink3)}
.st-meta b{color:var(--ink2);font-family:var(--serif);font-size:13px}
.st-ahead{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line2);
  font-size:13.5px;line-height:1.75;color:var(--ink2)}
.st-ahead b{color:var(--ink);font-weight:700}
.card.warn{border-left:4px solid #c8a24a;font-size:13.5px;line-height:1.75;color:var(--ink2)}
.card.warn b{color:var(--ink)}

/* ── 격국 성패 · 형충회합 · 갈림 (2026-08-28) ────────────────────────── */
.gk-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.gk-head .nm{font-size:20px;font-weight:700;letter-spacing:-.01em}
.gk-head .vd{font-size:13px;padding:4px 11px;border-radius:999px;font-weight:600}
.gk-head .vd.ok{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent2)}
.gk-head .vd.mid{background:var(--bg2);color:var(--ink2);border:1px solid var(--line2)}
.gk-head .vd.no{background:#f6e2dc;color:#9c5344;border:1px solid #e8c6bb}
:root[data-theme="dark"] .gk-head .vd.no{background:#3a2420;color:#e0a394;border-color:#4d312a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gk-head .vd.no{background:#3a2420;color:#e0a394;border-color:#4d312a}}
.gk-sang{font-size:13.5px;color:var(--ink2);margin:0 0 14px}
.gk-sang b{color:var(--accent)}
.gk-why{margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.gk-why div{display:flex;gap:9px;font-size:13.5px;line-height:1.6}
.gk-why .lb{flex:0 0 52px;color:var(--ink3);font-size:12.5px;padding-top:1px}
.gk-force{font-size:12.5px;color:var(--ink3);line-height:1.9;border-top:1px solid var(--line);padding-top:11px;margin:0 0 4px;
  font-variant-numeric:tabular-nums}
.gk-force b{color:var(--ink2);font-weight:600}
.gk-rel{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.gk-rel .t{font-size:12.5px;color:var(--ink3);margin:0 0 7px}
.gk-rel ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.gk-rel li{font-size:13px;line-height:1.6;color:var(--ink2)}
.gk-rel li.off{color:var(--ink3)}
.gk-fork{margin-top:14px;border:1px solid var(--accent2);border-radius:10px;padding:14px 15px;background:var(--accent-soft)}
.gk-fork .t{font-size:13px;font-weight:700;color:var(--accent);margin:0 0 9px}
.gk-fork .it{font-size:13px;line-height:1.75;color:var(--ink2)}
.gk-fork .it + .it{margin-top:10px;padding-top:10px;border-top:1px solid var(--accent2)}
.gk-fork .it b{color:var(--ink)}
.gk-fork .arm{color:var(--ink3);font-size:12.5px}

.gk-more{background:none;border:0;padding:6px 0;margin:2px 0 0;font:inherit;font-size:13px;
  color:var(--ink3);cursor:pointer}
.gk-more:hover{color:var(--accent)}
.gk-detail{margin-top:10px}

/* 그 사람은 지금 — 우리 둘 사이 위에 얹는 절 */
.nowbox{border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin:0 0 16px;background:var(--bg2)}
.nowbox .nk{font-size:12px;color:var(--ink3);margin:0 0 6px;letter-spacing:.02em}
.nowbox .nb{font-family:"Gowun Batang","Noto Serif KR",serif;font-size:17px;font-weight:700;
  margin:0 0 6px;color:var(--ink);letter-spacing:-.01em}
.nowbox .ns{font-size:13.5px;line-height:1.75;color:var(--ink2);margin:0 0 9px}
.nowbox .nm,.nowbox .nm2{font-size:12px;color:var(--ink3);margin:0}
.nowbox .nm2{margin-top:4px}

/* 두 분 다 좋은 달 */
.bmbox{border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin:0 0 16px;background:var(--bg2)}
.bmbox .nk{font-size:12px;color:var(--ink3);margin:0 0 10px}
.bmbox .bm{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:7px 0}
.bmbox .bm+.bm{border-top:1px solid var(--line)}
.bmbox .bm b{font-family:"Gowun Batang","Noto Serif KR",serif;font-size:15.5px;color:var(--ink);
  min-width:104px;font-variant-numeric:tabular-nums}
.bmbox .bm .gz{font-size:12.5px;color:var(--accent)}
.bmbox .bm .rs{font-size:12.5px;color:var(--ink2);flex:1 1 100%}
.bmbox .bmno{font-size:12.5px;color:var(--ink3);margin:10px 0 0;line-height:1.7}
.bmbox .bmft{font-size:12px;color:var(--ink3);margin:9px 0 0;line-height:1.7}

/* 「그 다음」 — 해에서 달·날로 */
.nextbox{border:1px dashed var(--accent2);border-radius:14px;padding:16px;background:var(--accent-soft)}
.nextbox .nx-k{font-family:"Gowun Batang","Noto Serif KR",serif;font-size:17px;font-weight:700;
  color:var(--ink);margin:0 0 8px}
.nextbox .nx-free{font-size:12px;color:var(--ink3);margin:0 0 10px}
.nextbox .nx-free b{color:var(--accent)}
.nextbox .nx-q{font-size:13.5px;line-height:1.8;color:var(--ink2);margin:0 0 14px}
.nextbox .nx-cta{width:100%;text-align:center}
.nextbox .nx-ft{font-size:11.5px;line-height:1.7;color:var(--ink3);margin:10px 0 0}

.bmbox .bmdays{font-size:13px;color:var(--ink2);margin:11px 0 0;line-height:1.75;
  padding-top:11px;border-top:1px solid var(--line)}
.bmbox .bmdays b{color:var(--accent)}

/* 유료 열람 — 결제한 사람에게 열리는 해상도 (paidbox) */
.paidbox{margin-top:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--accent-line);background:var(--accent-soft)}
.paidbox .pb-k{font-size:11.5px;color:var(--accent);letter-spacing:2px;margin:0 0 10px}
.pb-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.pb-row>b{width:34px;flex:none}
.pb-row .gz2{font-family:var(--serif);font-size:12px;color:var(--ink3);flex:none}
.pb-bar{flex:1;height:7px;border-radius:4px;background:var(--line);overflow:hidden;min-width:46px}
.pb-bar i{display:block;height:100%;background:var(--accent)}
.pb-rs{font-size:11.5px;color:var(--ink3);max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-h{font-size:13.5px;margin:12px 0 4px;color:var(--ink)}
.pb-d{font-size:13px;color:var(--ink2);margin:2px 0 2px 8px}
.pb-ft{font-size:12px;color:var(--ink3);margin-top:10px;line-height:1.7}
.pb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.pb-cell{border:1px solid var(--line);border-radius:8px;padding:6px 2px;text-align:center;font-size:10.5px;color:var(--ink3)}
.pb-cell b{display:block;font-size:13px;color:var(--ink)}
.pb-cell.good{border-color:var(--accent-line);background:var(--accent-soft)}
.pb-cell.bad{opacity:.45}
.pb-cell.now{outline:2px solid var(--accent);outline-offset:-1px}

/* paidbox 보고서 요소 */
.pb-lede{font-size:13px;line-height:1.8;color:var(--ink2);margin:0 0 12px}
.pb-month{padding:9px 0;border-bottom:1px dashed var(--line)}
.pb-month:last-of-type{border-bottom:0}
.pb-month.open{background:var(--accent-soft);margin:0 -8px;padding:9px 8px;border-radius:9px;border-bottom:0}
.pb-god{font-size:11px;color:var(--accent);flex:none}
.pb-why{font-size:12.5px;line-height:1.7;color:var(--ink2);margin:3px 0 0 2px}
.pb-say{font-size:12.5px;line-height:1.7;color:var(--ink3);margin:3px 0 0 2px}
.pb-days{font-size:12.5px;line-height:1.9;color:var(--ink);margin:6px 0 0 2px}
.pb-days-why{font-size:11.5px;color:var(--ink3)}
.pb-dd{margin:7px 0;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:13px}
.pb-dd>b{color:var(--ink)}
.pb-avoid{font-size:12.5px;color:var(--ink3);margin:8px 0 2px}

/* 진단 — 엔진 근거로 만든 그 사람만의 이유. 잠금 카드와 유료 머리에 같은 얼굴로 */
.nx-diag{margin:12px 0;padding:13px 15px;border-left:3px solid var(--accent);border-radius:0 11px 11px 0;background:var(--accent-soft)}
.nx-diag p{font-size:13px;line-height:1.85;color:var(--ink);margin:0 0 7px}
.nx-diag p:last-child{margin-bottom:0}
.nx-diag-k{font-size:11px !important;letter-spacing:2px;color:var(--accent) !important;margin-bottom:8px !important}
.nx-diag.pbd{margin:4px 0 14px}

/* 너의 연애 스토리 */
.ls-lede{font-size:13.5px;line-height:1.85;color:var(--ink2);margin:0 0 14px}
.ls-item{padding:12px 0 10px;border-left:3px solid var(--accent-line);padding-left:14px;margin:0 0 10px;border-radius:0 8px 8px 0}
.ls-when{display:flex;align-items:baseline;gap:8px}
.ls-when b{font-family:var(--serif);font-size:16px;color:var(--ink)}
.ls-when span{font-size:12px;color:var(--ink3)}
.ls-say{font-size:14px;line-height:1.8;color:var(--ink);margin:4px 0 0}
.ls-why{font-size:12px;color:var(--ink3);margin:4px 0 0}
.ls-shake{font-size:12.5px;line-height:1.8;color:var(--ink3);margin:6px 0 14px;padding-left:14px}
.ls-now{margin:16px 0 10px;padding:15px 17px;border-radius:13px;border:1px solid var(--line)}
.ls-now.ls-open{border-color:var(--accent-line);background:var(--accent-soft)}
.ls-now.ls-quiet{background:transparent}
.ls-now-k{font-size:11px;letter-spacing:2px;color:var(--accent);margin:0 0 7px}
.ls-now-say{font-size:14.5px;line-height:1.85;color:var(--ink);margin:0}
.ls-honest{font-size:11.5px;line-height:1.75;color:var(--ink3);margin-top:14px;padding-top:10px;border-top:1px dashed var(--line)}

.ls-month{font-size:13px;color:var(--accent);margin:4px 0 0;font-weight:500}

/* 유료 계단 로딩 */
.pb-load{font-size:13px;color:var(--ink2);padding:10px 0 8px;min-height:20px}
.pb-loadbar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:8px}
.pb-loadbar i{display:block;height:100%;background:var(--accent);transition:width .55s ease}

/* 책사의 말 — 유료 화면의 AI 서술 */
.pb-ai{margin-top:16px;padding:15px 17px;border-radius:12px;background:var(--card,#fff);border:1px solid var(--accent-line)}
.pb-ai-k{font-size:11px;letter-spacing:2px;color:var(--accent);margin:0 0 9px}
.pb-ai p{font-size:13.5px;line-height:1.95;color:var(--ink);margin:0 0 10px}
.pb-ai p:last-child{margin-bottom:0}
.pb-ai-load{color:var(--ink3) !important;font-size:12.5px !important}

.pb-dd.pb-open{border-color:var(--accent-line);background:var(--accent-soft)}
.pb-dd.pb-leak{border-color:rgba(180,83,79,.4)}
.pb-inbar{margin:6px 0 4px}

.pb-scene{margin:-2px -2px 8px;overflow:hidden;border-radius:9px}
.ls-item .pb-scene{margin:0 0 8px}
.ls-now .pb-scene{margin:-4px -6px 10px}

/* 계산 원장 로딩 */
.pb-ledger{max-height:168px;overflow:hidden;padding:6px 2px;font-size:12.5px;line-height:1.9}
.pb-lg-line{color:var(--ink2);transition:opacity .5s;animation:lgin .35s ease-out}
.pb-lg-line.dim{opacity:.35}
.pb-lg-h{color:var(--ink);font-weight:500}
.pb-lg-mark{display:inline-block;width:18px;color:var(--accent)}
.pb-lgfoot{display:flex;justify-content:flex-end;font-size:11px;color:var(--ink3);
  font-variant-numeric:tabular-nums;margin:4px 0 6px;min-height:14px}
@keyframes lgin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.pb-lg-line{animation:none}}

.ls-pul{font-size:13px;line-height:1.85;color:var(--ink2);margin:6px 0 0}

.pb-link{font-size:12.5px;line-height:1.75;color:var(--accent);margin:0 0 8px;font-style:normal;
  padding:7px 11px;background:var(--accent-soft);border-radius:8px}

.pb-verdict{margin:4px 0 14px;padding:13px 15px;border:1.5px solid var(--accent);border-radius:12px;background:var(--card,#fff)}
.pb-vd{font-size:13.5px;line-height:1.85;color:var(--ink);margin:0 0 9px}
.pb-vd:last-child{margin-bottom:0}

/* 홈 접힘 구역 — 재물·일·재미 (2026-08-29 여성향 재배열) */
details.fold > summary { cursor: pointer; list-style: none; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: " ▸"; opacity: .6; }
details.fold[open] > summary::after { content: " ▾"; }
details.fold > .tiles { margin-top: 10px; }

/* 간명서 채점 줄 — 알약 셋 (2026-08-30) */
.gm-grade { display: flex; gap: 8px; margin-top: 12px; }
.gm-grade .gmg { flex: 0 0 auto; padding: 7px 18px; border-radius: 999px;
  border: 1px solid var(--line, #8886); background: transparent; color: inherit;
  font: inherit; font-size: .92em; cursor: pointer; }
.gm-grade .gmg.on { border-color: var(--accent, #b8860b); color: var(--accent, #b8860b); font-weight: 700; }

/* 좌장의 맺음 — 회의를 닫는 말. 채점하지 않는 자리라 알약이 없고,
   금테로 둘러 스무 발언과 결이 다르다는 것을 눈으로 먼저 알린다. */
.gm-close{border-left-color:var(--g3);background:var(--g3-bg)}
.gm-close .gm-who{color:var(--g3-ink)}

/* 「이 한마디 간직하기」 — 얼빡 장면 아래. 아뢰는 말 버튼보다 한 단 조용하게,
   누르면 4:5 카드가 나온다. 캡처하고 싶어지는 자리에 캡처보다 나은 것을 둔다. */
.hs-keep{display:block;width:100%;margin:8px 0 0;padding:9px 12px;border:1px solid rgba(230,201,138,.34);
  border-radius:11px;background:rgba(22,20,51,.42);color:#e6c98a;font-size:12.5px;letter-spacing:.02em;
  cursor:pointer;transition:background .16s,border-color .16s}
.hs-keep:hover{background:rgba(22,20,51,.62);border-color:rgba(230,201,138,.6)}
.hs-keep:disabled{opacity:.6;cursor:default}

/* 첫 만남의 예 — 열 사람이 자리에 앉는다. 처음 사주를 넣으신 한 번만 뜬다.
   붙잡지 않는다: 3.4초 뒤 스스로 물러나고, 아무 데나 누르면 즉시 넘어간다. */
.seatin{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(120% 70% at 50% 34%,rgba(45,38,92,.97),rgba(18,16,44,.99));
  animation:si-fade .34s ease both;cursor:pointer;-webkit-tap-highlight-color:transparent}
.seatin.out{animation:si-fade .4s ease reverse both;pointer-events:none}
.si-in{width:100%;max-width:440px;text-align:center}
.si-k{margin:0 0 22px;font-size:11px;letter-spacing:.26em;color:#e6c98a;
  animation:si-up .5s ease both}
.si-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 6px;margin:0 0 26px}
.si-m{display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:si-seat .62s cubic-bezier(.22,1,.36,1) both}
.si-face{position:relative;width:52px;height:52px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(230,201,138,.42);background:#241f4d;
  display:flex;align-items:center;justify-content:center}
.si-face img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.si-seal{position:absolute;font-family:"Noto Serif KR",serif;font-size:19px;color:#e6c98a}
.si-face img + .si-seal{display:none}
.si-name{font-size:10.5px;color:#c7bfe4;letter-spacing:.02em}
.si-hail{margin:0;font-family:"Gowun Batang","Noto Serif KR",serif;font-size:19px;color:#f2eefb;
  animation:si-up .7s ease 1.5s both}
.si-skip{margin:16px 0 0;font-size:10.5px;color:#8f87b3;animation:si-up .5s ease 2.2s both}
@keyframes si-fade{from{opacity:0}to{opacity:1}}
@keyframes si-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes si-seat{from{opacity:0;transform:translateY(16px) scale(.86)}to{opacity:1;transform:none}}
/* 움직임을 줄여 달라고 하신 분께는 앉는 동작 없이 글자만. 시간도 짧게 잡는다. */
.seatin.still .si-m,.seatin.still .si-k,.seatin.still .si-hail,.seatin.still .si-skip{animation:none;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .si-m,.si-k,.si-hail,.si-skip{animation:none!important;opacity:1;transform:none}
  .seatin{animation:none}
}

/* 한 줄 받기 — 브라우저 prompt 대신 우리 옷을 입은 칸.
   이 화면에서 유일하게 남의 집 물건처럼 생긴 회색 창이 여기 있었다. */
.askline{position:fixed;inset:0;z-index:82;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(18,16,44,.62);backdrop-filter:blur(2px);animation:al-f .18s ease both}
.al-in{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px 18px 16px;box-shadow:var(--shadow-lift)}
.al-q{margin:0 0 6px;font-family:"Gowun Batang","Noto Serif KR",serif;font-size:16px;color:var(--ink)}
.al-h{margin:0 0 14px;font-size:12px;line-height:1.6;color:var(--ink3)}
.al-i{width:100%;padding:11px 12px;border:1px solid var(--line2);border-radius:10px;
  background:var(--bg2);color:var(--ink);font-size:14px;font-family:inherit}
.al-i:focus{outline:none;border-color:var(--accent)}
.al-b{display:flex;gap:8px;margin-top:12px}
.al-b .btn{flex:1;margin:0}
@keyframes al-f{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.askline{animation:none}}

/* 서고 — 홈의 아래쪽. 격자가 아니라 목록이다.
   격자는 「고르는 화면」이고 목록은 「읽는 화면」이다. 로판의 홈은 뒤쪽이다.
   (공주님 원칙 — 기각의 「대시보드」는 색이 아니라 구조이기도 하다) */
.shelf{margin:26px 0 0}
.shelf.last{margin-bottom:8px}
.shelf-k{margin:0 4px 9px;font-size:10.5px;letter-spacing:.24em;color:var(--accent);
  font-weight:700}
.shelf .row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;
  width:100%;margin:0;padding:13px 2px 13px 4px;border:0;border-bottom:1px solid var(--line);
  background:none;text-align:left;font-family:inherit;cursor:pointer;
  transition:background .15s,padding-left .15s}
.shelf .row:last-child{border-bottom:0}
.shelf .row:hover{background:var(--accent-soft);padding-left:9px}
.shelf .row b{grid-column:1;font-family:"Gowun Batang","Noto Serif KR",serif;
  font-size:15px;font-weight:400;color:var(--ink);letter-spacing:-.01em}
.shelf .row span{grid-column:1;font-size:12px;line-height:1.6;color:var(--ink3);
  margin-top:3px}
/* 오른쪽 끝 작은 글자 — 오늘 간지·등급처럼 app.js 가 채우는 값.
   비어 있으면 자리를 안 차지한다(빈 칸이 목록을 흔들지 않게). */
.shelf .row .row-x{grid-column:2;grid-row:1;font-style:normal;font-size:11.5px;
  color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums;
  /* 값이 길어질 수 있다(무재·대기만성형…). 제목을 밀어내지 않고 스스로 줄어든다 */
  max-width:38%;overflow:hidden;text-overflow:ellipsis}
.shelf .row .row-x:empty{display:none}

/* 얼빡 — 책사가 말을 시작할 때 얼굴이 크게 선다.
   22px 동그라미는 단추지 얼빡이 아니다(2026-08-30 「잘생긴애들이 얼빡으로 나와야지」).
   화자가 바뀔 때만 세운다 — 스무 발언에 스무 번 나오면 홈이 다시 마흔 화면이 된다. */
.say-head{position:relative;margin:16px 0 0;height:112px;border-radius:13px;overflow:hidden;
  background:linear-gradient(160deg,#241f4d,#161433);display:flex;align-items:flex-end}
.say-head:first-child{margin-top:2px}
/* 인용 상자(.nx-diag) 안에서는 그 좌우 여백(15px)을 되물려 가장자리까지 채운다 —
   「얼빡」은 크게 나와야 얼빡이다. 상자 밖(유료 .pb-ai)에서는 그대로 둔다. */
.nx-diag > .say-head{margin-left:-15px;margin-right:-15px;border-radius:9px}
/* 유료 서술(.pb-ai)도 같은 이유로 제 여백(17px)을 되물린다.
   실측 2026-08-30: 되물리기 전 223px / 뒤 259px (뷰포트 375). */
.pb-ai > .say-head{margin-left:-17px;margin-right:-17px;border-radius:9px}
.say-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 26%}
.say-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:72px;
  background:linear-gradient(180deg,rgba(18,16,44,0),rgba(18,16,44,.92))}
/* 인장은 늘 뒤에 깔아 둔다. 그림이 없거나 못 받아와도 빈 액자가 되지 않는다 —
   onerror 로 지우는 방식은 안 쓴다(그 방식이 깨지면 조용히 빈 칸이 남는다). */
.say-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Noto Serif KR",serif;font-size:34px;color:rgba(230,201,138,.5)}
.say-id{position:relative;z-index:1;padding:0 14px 11px;display:flex;align-items:baseline;gap:8px}
.say-id b{font-family:"Gowun Batang","Noto Serif KR",serif;font-size:17px;color:#f4efff;
  font-weight:700;letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.say-id span{font-size:11px;color:#c9c0e6;letter-spacing:.02em;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}
/* 띠가 선 뒤의 말 — 붙여서 한 덩이로 읽히게 */
.say-head + .gm-say{margin-top:9px}

/* 층 칩 — 누가 그렇게 말하는가(2026-09-04 「세 층으로 나누자」). 원전 · 잣대 · 통설 */
.tier{display:inline-block;font-size:10px;line-height:1;padding:3px 6px;border-radius:4px;margin-left:6px;
  vertical-align:middle;font-style:normal;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.tier-원전{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.tier-잣대{background:var(--bg2);color:var(--ink2);border:1px solid var(--line2)}
.tier-통설{background:transparent;color:var(--ink3);border:1px dashed var(--line2)}
.gm-say .tier{margin-left:8px}
.ch-row .tier{background:rgba(255,255,255,.1);color:#e6c98a;border-color:rgba(230,201,138,.4)}
.ch-row .tier-통설{color:#c9c0e6;border-color:rgba(201,192,230,.4)}
.tier-legend{margin:0 0 10px;font-size:11px;color:var(--ink3);line-height:2}
.tier-legend .tier{margin:0 2px 0 0}

/* 육안(六眼) — 여섯 축을 나란히(2026-09-04). 좋다·나쁘다·열림·표시·— */
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 10px}
.six .sx{padding:8px 9px 9px;border-radius:10px;background:var(--card2);border:1px solid var(--line);min-height:72px}
.six .sx b{display:block;font-size:10.5px;color:var(--ink3);letter-spacing:.04em;font-weight:700}
.six .sx i{display:block;font-style:normal;font-family:var(--letter);font-size:18px;font-weight:700;margin:2px 0 3px;color:var(--ink3)}
.six .sx.good i{color:#2a9d5c}.six .sx.bad i{color:var(--accent)}.six .sx.open i{color:#b8862b}.six .sx.mark i{color:var(--ink2)}
.six .sx span{display:block;font-size:10.5px;line-height:1.45;color:var(--ink2)}
.six .sx .tier{margin:5px 0 0}
.chorus .six .sx{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

/* 홈 — 웹툰 목록처럼(2026-09-04 「네이버 웹툰 메인처럼」). 표지에 얼굴, 제목은 약속 한 줄, 시간순 탭 */
.wt{margin:0 0 18px}
.wt-head{display:flex;align-items:baseline;gap:8px;margin:6px 2px 10px}
.wt-head b{font-family:var(--letter);font-size:17px;color:var(--ink)}
.wt-head span{font-size:11px;color:var(--ink3);letter-spacing:.12em}
/* 이레 띠(.wt-strip · .wt-post · .wt-seal)는 2026-09-12 이야기 서점 전략으로 홈에서 걷었다. 오늘 탭의 「이번 주 한눈에」가 그 몫이다. */
/* 접어 두는 칸 — 없애는 게 아니라 한 겹 아래다(2026-09-12 「홈화면과 콘텐츠의 길이 너무 복잡해」).
   여닫는 표시를 오른쪽에 세우고 기본 삼각형은 지운다. 열면 안의 목록이 그 자리에서 그대로 펴진다.
   (여기 있던 시간순 탭 .wt-tabs · 격자 .wt-grid · 타일 .wt-tile · 표지 .wt-cover 는 걷었다 —
    그리는 코드가 없어서 화면에 한 번도 나온 적이 없다.) */
.wt-fold{margin:16px 0 0;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.wt-fold > summary{display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;list-style:none}
.wt-fold > summary::-webkit-details-marker{display:none}
.wt-fold > summary b{font-family:var(--letter);font-size:15px;color:var(--ink);font-weight:700}
.wt-fold > summary span{font-size:11.5px;color:var(--ink3);letter-spacing:.02em}
.wt-fold > summary::after{content:'＋';margin-left:auto;font-size:15px;color:var(--ink3);line-height:1}
.wt-fold[open] > summary::after{content:'－'}
.wt-fold[open] > summary{border-bottom:1px solid var(--line)}
.wt-fold .wt-free{margin:0;padding:2px 0}

/* 코러스 — 콘텐츠마다 책사들이 한 번씩 나와 한 문장씩(2026-09-03 「일반인은 누가 누군지 몰라」).
   제목 바로 아래, 본문 위. 얼굴이 곧 삽화다. */
.chorus{display:flex;flex-direction:column;gap:8px;margin:10px 0 16px}
/* 얼굴이 크게 — 50px 동그라미는 단추였다(2026-09-03 「얼굴이 너무 작지 않아?」).
   왼쪽 5분의 2를 얼굴이 채우고 글 쪽으로 밤에 잠긴다. 홈 얼빡과 같은 결. */
/* 2026-09-03 「삽화 아래로 글이 나와야 읽기 편하겠지」 — 얼굴이 위에 띠로 서고 글은 그 아래 폭 전체.
   옆에 두면 마디가 여럿일 때 글이 좁은 기둥이 됐다. */
.ch-row{position:relative;display:block;padding:0;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#241f4d,#161433);border:1px solid var(--line)}
.ch-face,.ch-seal{display:block;width:100%;height:118px;
  background:linear-gradient(160deg,#241f4d,#161433)}
.ch-face{object-fit:cover;object-position:50% 22%;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.35));
  mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.35))}
.ch-seal{display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif KR",serif;font-size:30px;color:rgba(230,201,138,.5)}
.ch-row > div{position:relative;z-index:1;padding:0 14px 13px}
.ch-row b{display:block;font-family:"Gowun Batang","Noto Serif KR",serif;font-size:15px;
  color:#e6c98a;margin:-14px 0 7px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ch-row p{margin:0;font-size:13.5px;line-height:1.7;color:#eeeaf7}
/* 한 사람이 여러 마디 — 「그 사람을 두고」(칸 없음). 마디 사이는 얇은 줄로 */
.ch-row p + p{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08)}
.tenbox{margin:0 0 16px}
.tenbox .mnk{margin:0 0 8px;font-size:10.5px;letter-spacing:.22em;color:var(--ink3);font-weight:700}
.tenbox .mns{margin:8px 0 0;font-size:11.5px;line-height:1.65;color:var(--ink3)}

/* 우리 둘 사이 — 맺음이 제목이고, 비대칭이 그 아래 마주 선다.
   공주님이 그 사람 생일을 넣는 이유는 「이 사람이 그 사람인가」다(2026-08-30). */
.rel-verdict{font-family:"Gowun Batang","Noto Serif KR",serif;font-size:16px;line-height:1.8;
  color:var(--ink);margin:0 0 16px;padding:14px 15px;border-radius:12px;
  background:var(--accent-soft);border:1px solid var(--accent-line)}
.matchbox{margin:0 0 16px;padding:14px 15px;border-radius:12px;
  border:1px solid var(--g3);background:var(--g3-bg)}
.matchbox .mk{margin:0 0 8px;font-size:10.5px;letter-spacing:.22em;color:var(--g3-ink);font-weight:700}
.matchbox .mb{margin:0 0 6px;font-size:13.5px;line-height:1.75;color:var(--ink)}
.matchbox .ms{margin:8px 0 0;font-size:11.5px;line-height:1.65;color:var(--ink3)}
.rel-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.rel-two > div{padding:12px 13px;border-radius:12px;background:var(--card2);
  border:1px solid var(--line)}
.rel-two .rk{margin:0 0 6px;font-size:10.5px;color:var(--ink3);letter-spacing:.02em}
.rel-two .rb{margin:0 0 5px;font-family:"Gowun Batang","Noto Serif KR",serif;
  font-size:14.5px;color:var(--accent);line-height:1.5}
.rel-two .rs{margin:0;font-size:11.5px;line-height:1.65;color:var(--ink2)}
.signbox{margin:0 0 14px}
.signbox .sg{margin:0 0 6px;font-size:12.5px;line-height:1.7;color:var(--ink2)}
.signbox .sg b{color:var(--accent);font-weight:700;margin-right:5px}
@media (max-width:340px){ .rel-two{grid-template-columns:1fr} }

/* 「그 사람은 어떤 사람인가」 — 「이 사람 쓸만한가」가 이 화면의 물음이다.
   판정은 공주님 화면과 똑같은 함수로 낸다. 잣대가 다르면 견줄 수가 없다. */
.manbox{margin:0 0 16px;padding:15px 16px;border-radius:13px;
  border:1px solid var(--line);background:var(--card2)}
.manbox .mnk{margin:0 0 12px;font-size:10.5px;letter-spacing:.22em;color:var(--accent);font-weight:700}
.manbox .mn{display:grid;grid-template-columns:44px 1fr;gap:2px 10px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.manbox .mn:last-of-type{border-bottom:0}
.manbox .mn-k{grid-row:span 2;font-size:11px;color:var(--ink3);padding-top:3px;
  letter-spacing:.04em}
.manbox .mn-v{font-family:"Gowun Batang","Noto Serif KR",serif;font-size:15px;color:var(--ink)}
.manbox .mn-s{font-size:11.5px;line-height:1.65;color:var(--ink3)}
.manbox .mns{margin:11px 0 0;font-size:11px;color:var(--ink3);opacity:.8}

/* 근거 — 원문 한 줄 + 해설. 「기준을 공개하는 명리」가 파는 물건이라
   판정 옆에 실제 조문을 두면 그것이 증거가 된다(2026-08-30).
   원문은 작게 뒤로 물러나 있고, 읽는 것은 우리 말이다. */
.wonmun{margin:7px 0 0;padding:8px 11px;border-left:2px solid var(--g3);
  background:var(--g3-bg);border-radius:0 8px 8px 0}
.wonmun q{display:block;font-family:"Noto Serif KR",serif;font-size:12.5px;
  line-height:1.7;color:var(--g3-ink);quotes:none;letter-spacing:.02em}
.wonmun cite{display:block;margin-top:3px;font-size:10.5px;font-style:normal;
  color:var(--ink3);opacity:.85}

/* 어제 한 말 — 얼빡 아래, 오늘 한마디와 간직하기 사이. 오늘보다 한 단 조용하게 */
.hs-yday{margin:10px 0 0;padding:8px 12px;border-left:2px solid rgba(230,201,138,.4);color:#c9c2dd;font-size:13px}
.hs-yday .k{display:block;font-size:11px;letter-spacing:.04em;opacity:.7;margin-bottom:2px}
.hs-yday p{margin:0;line-height:1.45}

/* 이레 펼침 상자(.wt-daybox) · 조심할 날(.wt-care) · 일일 리포트(.daily .dr-*)는 2026-09-12 에 걷었다 — 그리는 코드가 없어졌다. */

/* 이 남자, 나한테 돈을 쓸까요? — 물음 열 개 */
.gn-q{padding:12px 0;border-top:1px solid var(--line)}
.gn-q:first-of-type{border-top:0}
.gn-k{margin:0 0 6px;font-family:var(--letter);font-size:15.5px;font-weight:700}
.gn-a{margin:0 0 6px;font-weight:700;color:var(--accent)}
.gn-a.dim{color:var(--ink3);font-weight:400}
.gn-w{margin:0;font-size:14px;line-height:1.6;color:var(--ink2)}
.gn-q.locked .gn-k{color:var(--ink3)}
.gn-card{margin-top:14px;padding:14px 16px;border-radius:12px;border:1px solid var(--accent-line);background:var(--accent-soft);line-height:1.6}
.gn-card .k{margin:0 0 6px;font-size:11.5px;color:var(--accent);letter-spacing:2px}
.gn-card p{margin:0 0 4px}

/* 파는 것 아홉 장 — 세 칸 격자 (2026-09-12 사장님 「아무리 작아도 3열은 나오는데 이렇게 안되나?」)
   가로로 긴 카드는 한 장이 화면의 사분의 일을 먹어서 여섯 장만 세워도 스크롤이 길었다.
   격자로 세우니 아홉 장이 두 줄 반에 들어간다 — 접어 뒀던 셋을 도로 꺼냈다.
   제목은 두 줄까지 보이고 넘치면 자른다. 칸이 좁아 부제는 안 세우고 값 한 줄만 남긴다. */
/* ───── 이야기 서점 (2026-09-12 사장님 확정 전략) ─────
   한 줄 소개 → 큰 표지 진열대 → 사이 칩 → 3열 표지 → 전체 목록. 긴 소개문은 없다. */
.wt-tag{margin:6px 4px 12px;font-family:var(--letter);font-size:17px;color:var(--ink);letter-spacing:-.01em}
.wt-hero{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.wt-hero::-webkit-scrollbar{display:none}
.wt-hero .wt-cd{flex:0 0 58%;scroll-snap-align:start}
@media(min-width:560px){.wt-hero .wt-cd{flex-basis:30%}}
.wt-hero .wt-cd .cd-img{aspect-ratio:3/4}
.wt-hero .wt-cd .cd-t{font-size:15px;left:10px;right:9px;bottom:10px}
.wt-hero .wt-cd .cd-num{position:absolute;left:8px;top:6px;z-index:3;font-family:var(--letter);font-size:30px;font-weight:900;color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.wt-hero .wt-cd .cd-tag{left:auto;right:6px}
.wt-hero .wt-cd .cd-s{white-space:normal;color:var(--ink2);font-size:12px;line-height:1.45}
.wt-hero .wt-cd .cd-free{font-size:10.5px;color:var(--ink3)}
.wt-chips{display:flex;gap:6px;overflow-x:auto;margin:6px 0 12px;padding:0 2px 4px;-webkit-overflow-scrolling:touch}
.wt-chips::-webkit-scrollbar{display:none}
.wt-chips button{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink2);
  background:var(--card);font-family:inherit;cursor:pointer;white-space:nowrap}
.wt-chips button.on{background:var(--ink);color:var(--card);border-color:var(--ink);font-weight:700}
.wt-grid .wt-cd[hidden]{display:none}
.wt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;margin:0 0 18px}
@media(min-width:560px){.wt-grid{grid-template-columns:repeat(4,1fr)}}
.wt-cd{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;background:none;padding:0;
  text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink)}
/* 표지 그림 자체가 제목을 품는다 (2026-09-12 사장님 「삽화에 콘텐츠 이름을 넣고」).
   그림 파일에 한글을 그려 넣지 않는다 — 깨지고, 말을 고칠 때마다 다시 그려야 한다.
   대신 아래 3분의 2 에 드리움을 깔고 그 위에 글자를 얹는다. 이레 띠(.wt-post)가 쓰는 것과 같은 수법이다. */
.wt-cd .cd-img{position:relative;display:block;aspect-ratio:3/4.35;border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg,#241f4d,#161433)}
.wt-cd .cd-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;z-index:1}
.wt-cd .cd-img::after{content:'';position:absolute;left:0;right:0;bottom:0;height:68%;z-index:2;
  background:linear-gradient(180deg,rgba(16,14,38,0),rgba(16,14,38,.62) 46%,rgba(16,14,38,.93));pointer-events:none}
.wt-cd .cd-t{position:absolute;left:7px;right:6px;bottom:7px;z-index:3;font-family:var(--letter);
  font-size:12px;line-height:1.3;font-weight:800;color:#fbf7ef;letter-spacing:-.01em;
  text-shadow:0 1px 5px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.5);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wt-cd .cd-seal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif KR",serif;font-size:34px;color:rgba(230,201,138,.5)}
/* 무료 표시는 그림 위 띠로 — 아래 한 줄에 값과 같이 적으면 108px 칸에서 잘린다 */
.wt-cd .cd-tag{position:absolute;top:5px;left:5px;z-index:3;font-size:9.5px;font-weight:700;
  padding:2px 6px;border-radius:6px;background:rgba(18,16,44,.72);color:#f2ead7;letter-spacing:0;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.wt-cd .cd-s{font-size:10.5px;line-height:1.3;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-cd:active .cd-img{transform:scale(.97);transition:transform .06s ease}
/* 그림이 둘이면(책사 얼굴 + 이야기 썸네일) 썸네일이 위에 온다 */
.wt-cd .cd-img img + img{z-index:1}

/* ───── 이야기 화면 — 질문 하나, 날짜로 답 (2026-09-12) ───── */
/* 표지 그림은 2:3 세로판(사람은 가운데 띠). 16:9 로 자르면 얼굴이 날아간다(09-12 사장님 「삽화 다 짤린다」) — 4:3 에 위쪽을 잡는다. */
.st-cover{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#241f4d,#161433);margin:0 0 6px}
.st-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.st-cover::after{content:'';position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(180deg,rgba(16,14,38,0),rgba(16,14,38,.9))}
.st-cover b{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-family:var(--letter);font-size:20px;line-height:1.3;color:#fbf7ef;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.st-days{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.st-day{display:grid;grid-template-columns:52px 26px 1fr;gap:8px;align-items:start;padding:11px 12px;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.st-day:first-child{border-top:0}
.st-day b{font-size:14px;color:var(--ink)}
.st-day b small{display:block;font-size:11px;color:var(--ink3);font-weight:400}
.st-day i{font-style:normal;font-size:17px;line-height:1.2;text-align:center}
/* 줄 바탕은 카드색 그대로. 색은 ○△✕ 와 왼쪽 테두리에만 — 줄마다 초록·카키로 칠하면 읽기 전에 눈이 먼저 지친다. */
.st-day.s3 i,.st-day.s2 i{color:#2a9d5c}
.st-day.s1 i{color:var(--ink3)}
.st-day.s0 i{color:var(--accent)}
.st-day.s3,.st-day.s2{box-shadow:inset 3px 0 0 #2a9d5c}
.st-day.s0{box-shadow:inset 3px 0 0 var(--accent)}
.st-day em{font-style:normal;font-weight:700;color:var(--ink);margin-right:4px}
.st-day span{color:var(--ink2)}
.st-day.today b{color:var(--accent)}
.st-best{margin:10px 2px 0;font-size:14px;color:var(--ink2);line-height:1.55}
.st-best b{color:var(--ink)}
/* 하루 한 줄 = 결론 / 이유 / 할 것 — 셋을 줄 바꿔 세운다. 이유는 옅게, 할 것은 강조색 */
.st-day .why{color:var(--ink3);font-size:13px}
.st-day .do{color:var(--accent);font-size:13.5px}
.st-days.mini .st-day{padding:7px 12px;font-size:13px}
.st-days.mini .st-day span{align-self:center}
.st-pick{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:14px}
.st-pick label{color:var(--ink3);font-size:12px;flex:none}
.st-pick select{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-family:inherit;font-size:14px}
.st-pick p{margin:0;flex:1;line-height:1.5}

/* 무료 칸 — 글자 목록 */
.wt-free{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.wt-free li+li{border-top:1px solid var(--line)}
.wt-free button{display:flex;flex-direction:column;gap:2px;width:100%;padding:12px 14px;border:0;background:none;text-align:left;cursor:pointer;font-family:var(--sans)}
.wt-free b{font-size:14.5px;color:var(--ink)}
.wt-free span{font-size:12.5px;color:var(--ink3);line-height:1.4}
.gn-k i{font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--accent);margin-right:6px;vertical-align:1px}
.gn-sec{margin:18px 0 4px;font-size:11.5px;letter-spacing:.14em;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:4px}
.gn-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 14px}
.gn-cd{padding:10px 12px;border-radius:12px;border:1px solid var(--accent-line);background:var(--accent-soft);min-height:64px}
.gn-cd .k{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--accent);margin-bottom:4px}
.gn-cd .gn-cq{display:block;font-style:normal;font-size:12px;line-height:1.4;color:var(--ink3);margin-bottom:5px}
.gn-cd b{display:block;font-size:13.5px;line-height:1.45;font-weight:700}
.gn-cd.locked{border-color:var(--line);background:transparent}
.gn-cd.locked b{color:var(--ink3);font-weight:400}
.gn-cd details{margin-top:6px}
.gn-cd summary{font-size:12px;color:var(--ink3);cursor:pointer}
.gn-cd details p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink2)}
.gn-cards-k{margin:10px 0 0;font-size:11.5px;letter-spacing:.14em;color:var(--ink3)}
.gn-cd b{font-size:14px;line-height:1.5}
@media (max-width:420px){.gn-cards{grid-template-columns:1fr}}

/* 문의 버튼의 인장 글자 — 이모지 대신 한자를 쓴다(공주님 원칙 기각 목록) */
.btn .seal{margin-right:6px;font-weight:700}