:root{
    --paper:#edefe9; --ink:#1f2620; --ink-soft:#4c564d; --mist:#5e6a63;
    --line:rgba(31,38,32,.14); --celadon:#4f7361; --celadon-deep:#3d5b4d; --seal:#9a3b2c;
    --mtn-far:#c2cabf; --mtn-near:#3d473f; --fog:#edefe9;
    --panel:rgba(255,255,255,.42);--field-bg:#f3f5ef;
    --serif:"AppleMyungjo","Apple SD Gothic Neo","Nanum Myeongjo","Batang",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Noto Sans KR",sans-serif;
    --maxw:34rem;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#10140e; --ink:#dde3d8; --ink-soft:#9aa49a; --mist:#8a948b;
      --line:rgba(221,227,216,.12); --celadon:#82a892; --celadon-deep:#9cbfab; --seal:#c15b48;
      --mtn-far:#33402f; --mtn-near:#0b0e08; --fog:#10140e;
      --panel:rgba(255,255,255,.04);--field-bg:#1a1f16;
    }
  }
  :root[data-theme="light"]{
    --paper:#edefe9; --ink:#1f2620; --ink-soft:#4c564d; --mist:#5e6a63;
    --line:rgba(31,38,32,.14); --celadon:#4f7361; --celadon-deep:#3d5b4d; --seal:#9a3b2c;
    --mtn-far:#c2cabf; --mtn-near:#3d473f; --fog:#edefe9; --panel:rgba(255,255,255,.42);--field-bg:#f3f5ef;
  }
  :root[data-theme="dark"]{
    --paper:#10140e; --ink:#dde3d8; --ink-soft:#9aa49a; --mist:#8a948b;
    --line:rgba(221,227,216,.12); --celadon:#82a892; --celadon-deep:#9cbfab; --seal:#c15b48;
    --mtn-far:#33402f; --mtn-near:#0b0e08; --fog:#10140e; --panel:rgba(255,255,255,.04);--field-bg:#1a1f16;
  }

  /* 오행 색 — 수묵 톤(저채도), 라이트/다크 각각 */
  :root{--el-mok:#5c7d5a;--el-hwa:#a4553f;--el-to:#a3894f;--el-geum:#8e959b;--el-su:#46586b}
  @media (prefers-color-scheme:dark){
    :root{--el-mok:#7fa07c;--el-hwa:#c07a63;--el-to:#bfa76b;--el-geum:#a6adb3;--el-su:#7c93a8}
  }
  :root[data-theme="light"]{--el-mok:#5c7d5a;--el-hwa:#a4553f;--el-to:#a3894f;--el-geum:#8e959b;--el-su:#46586b}
  :root[data-theme="dark"]{--el-mok:#7fa07c;--el-hwa:#c07a63;--el-to:#bfa76b;--el-geum:#a6adb3;--el-su:#7c93a8}

  /* 네이티브 드롭다운/폼 컨트롤이 테마에 맞게 뜨도록 (다크에서 흰 팝업 방지) */
  :root{color-scheme:light}
  @media (prefers-color-scheme:dark){:root{color-scheme:dark}}
  :root[data-theme="light"]{color-scheme:light}
  :root[data-theme="dark"]{color-scheme:dark}
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
    font-size:17px;line-height:1.72;letter-spacing:.005em;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
  section{padding:5.5rem 0}
  h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0}
  p{margin:0}
  a{color:inherit}
  .label{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--mist);
    font-weight:600;margin-bottom:1.2rem}

  /* HERO */
  .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
    justify-content:flex-end;padding:0 0 3.4rem;overflow:hidden}
  #mountains{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,transparent 34%,var(--paper) 96%)}
  .hero .wrap{position:relative;z-index:2}
  .seal{display:inline-flex;align-items:center;justify-content:center;
    width:3.05rem;height:3.05rem;background:var(--seal);color:#f4ede2;
    font-family:var(--serif);font-size:1.02rem;line-height:1;letter-spacing:-.04em;
    border-radius:5px;transform:rotate(-3deg);writing-mode:vertical-rl;
    padding:.34rem .1rem;box-shadow:0 2px 10px rgba(0,0,0,.14);flex:0 0 auto}
  .hero-mark{display:flex;align-items:center;gap:.95rem;margin-bottom:1.7rem}
  .hero-mark .who{font-family:var(--serif);font-size:1.02rem;letter-spacing:.06em;color:var(--ink)}
  .hero-mark .who small{display:block;font-size:.72rem;letter-spacing:.3em;
    color:var(--mist);text-transform:uppercase;margin-top:.28rem}
  .hero h1{font-size:clamp(2.35rem,8.4vw,3.5rem);line-height:1.24;letter-spacing:-.01em;word-break:keep-all}
  .hero .sub{margin-top:1.5rem;font-size:1.06rem;color:var(--ink-soft);max-width:24rem;line-height:1.7;word-break:keep-all}
  .hero .micro{margin-top:2rem;font-size:.82rem;letter-spacing:.06em;color:var(--mist);
    display:flex;align-items:center;gap:.6rem}
  .hero .micro b{color:var(--celadon-deep);font-weight:600}
  .cta{display:inline-flex;align-items:center;gap:.6rem;background:var(--celadon);color:#f3f6f1;
    font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.02em;
    padding:1rem 1.7rem;border-radius:2px;border:0;cursor:pointer;text-decoration:none;
    margin-top:2.2rem;transition:transform .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}
  .cta:hover{background:var(--celadon-deep);transform:translateY(-1px)}
  .cta:focus-visible{outline:2px solid var(--celadon-deep);outline-offset:3px}
  .cta .arw{transition:transform .18s ease}
  .cta:hover .arw{transform:translateX(3px)}

  /* reveal */
  .rise{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
  .rise.in{opacity:1;transform:none}

  /* EMPATHY */
  .empathy h2{font-size:clamp(1.5rem,5.6vw,1.95rem);line-height:1.5}
  .feel{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:0}
  .feel li{padding:1.15rem 0 1.15rem 1.5rem;border-top:1px solid var(--line);position:relative;
    color:var(--ink-soft);font-size:1.02rem}
  .feel li:last-child{border-bottom:1px solid var(--line)}
  .feel li::before{content:"";position:absolute;left:0;top:1.6rem;width:.42rem;height:.42rem;
    border:1px solid var(--mist);border-radius:50%}
  .quiet{margin-top:2.4rem;font-family:var(--serif);font-size:1.28rem;line-height:1.7;
    color:var(--ink);text-wrap:balance}
  .quiet b{color:var(--celadon-deep);font-weight:400}

  /* DIFF */
  .diff{background:var(--fog)}
  .diff .inner{border-left:2px solid var(--celadon);padding-left:1.5rem}
  .diff h2{font-size:clamp(1.7rem,6.4vw,2.3rem);line-height:1.34}
  .diff p{margin-top:1.6rem;color:var(--ink-soft);font-size:1.04rem}
  .diff .stress{color:var(--ink);border-bottom:1px solid var(--celadon);padding-bottom:1px}

  /* GAINS */
  .gains .row{display:flex;flex-direction:column;gap:1.1rem;margin-top:2rem}
  .gain{display:flex;gap:1.1rem;align-items:baseline;padding:1.25rem 1.3rem;
    background:var(--panel);border:1px solid var(--line);border-radius:3px}
  .gain .no{font-family:var(--serif);font-size:1.05rem;color:var(--celadon-deep);
    font-variant-numeric:tabular-nums;flex:0 0 auto}
  .gain h3{font-size:1.12rem;margin-bottom:.3rem}
  .gain p{font-size:.94rem;color:var(--ink-soft);line-height:1.6}

  /* ABOUT — 산목 소개 밴드 (2026-07-20 3팀 딥회의: 신청 직전 화자 실체 보강) */
  .about .mark{display:flex;align-items:center;gap:.95rem;margin:0 0 1.7rem}
  .about .mark .who{font-family:var(--serif);font-size:1.06rem;letter-spacing:.06em;color:var(--ink)}
  .about .mark .who small{display:block;font-size:.72rem;letter-spacing:.3em;color:var(--mist);text-transform:uppercase;margin-top:.28rem}
  .about .bio{font-family:var(--serif);font-size:1.14rem;line-height:1.95;color:var(--ink);word-break:keep-all;text-wrap:balance}
  .about .bio b{color:var(--celadon-deep);font-weight:400}
  .tl{list-style:none;margin:2.6rem 0 0;padding:0;display:flex;gap:.6rem}
  .tl li{flex:1;position:relative;padding-top:1.15rem;font-size:.8rem;color:var(--mist);line-height:1.5;word-break:keep-all}
  .tl li::before{content:"";position:absolute;top:2.5px;left:.85rem;right:0;height:1px;background:var(--line)}
  .tl li:last-child::before{right:.4rem}
  .tl li::after{content:"";position:absolute;top:0;left:0;width:6px;height:6px;border-radius:50%;background:var(--celadon)}
  .tl li:last-child::after{background:var(--seal)}
  .tl li b{display:block;color:var(--ink);font-family:var(--serif);font-weight:400;font-size:.94rem;margin-bottom:.2rem}
  .tl-cap{margin:2.4rem 0 0;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--mist);font-weight:600}
  .about .more{margin-top:2rem;font-size:.92rem}
  .about .more a{color:var(--celadon-deep);text-decoration:none;border-bottom:1px solid var(--celadon);padding-bottom:1px}

  /* APPLY */
  .apply h2{font-size:clamp(1.8rem,6.8vw,2.4rem);line-height:1.3}
  .apply .lead{margin-top:1.3rem;color:var(--ink-soft);font-size:1.04rem}
  .apply .cred{margin-top:1.4rem;font-family:var(--serif);font-size:1.02rem;line-height:1.7;
    color:var(--ink);border-left:2px solid var(--seal);padding-left:1.1rem;word-break:keep-all}
  form{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.35rem}
  .field{display:flex;flex-direction:column;gap:.5rem}
  .field[hidden]{display:none} /* display:flex가 [hidden] 기본값을 덮는 것 방지 */
  .field label{font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft);font-weight:600}
  .field label .opt{color:var(--mist);font-weight:400;letter-spacing:0}
  .field input,.field textarea{font-family:var(--sans);font-size:1rem;color:var(--ink);
    background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:.85rem .95rem;
    width:100%;transition:border-color .16s ease,box-shadow .16s ease}
  .field textarea{resize:vertical;min-height:5.5rem;line-height:1.6}
  .field input::placeholder,.field textarea::placeholder{color:var(--mist)}
  .field select{font-family:var(--sans);font-size:1rem;color:var(--ink);background-color:var(--field-bg);
    border:1px solid var(--line);border-radius:3px;padding:.85rem .95rem;width:100%}
  .field select option{background-color:var(--field-bg);color:var(--ink)}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--celadon);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--celadon) 22%,transparent)}
  .choice{display:flex;flex-wrap:wrap;gap:.55rem}
  .choice label{flex:1 1 6rem;position:relative;display:flex;align-items:center;justify-content:center;
    padding:.75rem .5rem;border:1px solid var(--line);border-radius:3px;cursor:pointer;
    background:var(--panel);color:var(--ink-soft);font-size:.95rem;text-align:center;
    transition:border-color .15s ease,color .15s ease,box-shadow .15s ease}
  .choice input{position:absolute;opacity:0;width:1px;height:1px}
  .choice label:has(input:checked){border-color:var(--celadon);color:var(--ink);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--celadon) 20%,transparent)}
  .choice label:focus-within{outline:2px solid var(--celadon-deep);outline-offset:2px}
  .choice small{display:block;font-size:.72rem;color:var(--mist);font-weight:400;margin-top:.22rem}
  .choice label:has(input:checked) small{color:var(--celadon-deep)}
  /* 방식 3택 — 세로 스택 카드 (이름+가격 배지 / 조건 한 줄) */
  .choice.methods{flex-direction:column}
  .choice.methods label{flex:1 1 auto;flex-direction:column;align-items:stretch;
    justify-content:flex-start;text-align:left;padding:.85rem .95rem;gap:.28rem}
  .m-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%}
  .m-name{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink-soft)}
  .choice.methods label:has(input:checked) .m-name{color:var(--ink)}
  .m-price{font-size:.72rem;white-space:nowrap;padding:.15rem .5rem;border-radius:999px;
    border:1px solid var(--line);color:var(--mist)}
  .m-price.free{color:var(--celadon-deep);border-color:color-mix(in srgb,var(--celadon) 40%,transparent)}
  .m-price.sale{color:var(--celadon-deep);border-color:color-mix(in srgb,var(--celadon) 40%,transparent)}
  .m-price.sale s{color:var(--mist);margin-right:.3rem}
  .choice.methods small{margin-top:0;color:var(--mist)}
  .choice.chips .chk{padding:.6rem .8rem}
  .chk[hidden]{display:none}
  /* 인라인 입력줄: 숫자입력 + 체크(음력/윤달/모름) — 만세력앱식 간단폼 */
  .inline-row{display:flex;gap:.55rem;align-items:stretch}
  .inline-row input[type=text]{flex:1 1 auto;min-width:0;letter-spacing:.06em}
  .chk{display:flex;align-items:center;gap:.42rem;font-size:.92rem;color:var(--ink-soft);cursor:pointer;
    padding:0 .8rem;border:1px solid var(--line);border-radius:3px;background:var(--panel);
    white-space:nowrap;transition:border-color .15s ease,color .15s ease}
  .chk input{width:1.02rem;height:1.02rem;accent-color:var(--celadon);margin:0;flex:0 0 auto}
  .chk:has(input:checked){border-color:var(--celadon);color:var(--ink);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--celadon) 20%,transparent)}
  .chk:has(input:disabled){opacity:.45;cursor:default}
  .hint{margin-top:.7rem;font-size:.85rem;line-height:1.55;color:var(--ink-soft);
    background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--celadon);
    border-radius:3px;padding:.7rem .85rem}
  .hint b{color:var(--celadon-deep);font-weight:600}
  .hint[hidden]{display:none}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
  .consent input{margin-top:.28rem;width:1.05rem;height:1.05rem;accent-color:var(--celadon);flex:0 0 auto}
  form .cta{margin-top:.4rem;justify-content:center;width:100%}
  .note{font-size:.9rem;line-height:1.6;padding:.2rem 0;min-height:1.2rem}
  .note.ok{color:var(--celadon-deep)}
  .note.err{color:var(--seal)}

  /* 공지 배너 (daily-data.js의 MW_NOTICE에 문구 넣으면 표시) */
  .notice-bar{position:sticky;top:0;z-index:50;display:flex;align-items:flex-start;gap:.8rem;
    background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);border-left:3px solid var(--seal);
    padding:.8rem 1rem .8rem 1.2rem}
  .notice-bar p{flex:1;font-size:.88rem;line-height:1.55;color:var(--ink);word-break:keep-all;margin:0}
  .notice-bar button{background:none;border:0;color:var(--mist);font-size:1.15rem;line-height:1;
    cursor:pointer;padding:.1rem .3rem;flex:0 0 auto}

  /* SAYING — 오늘의 한 구절 (고전 명언 로테이션) */
  .saying{padding:3.8rem 0;border-bottom:1px solid var(--line)}
  .saying .card{position:relative;background:var(--panel);border:1px solid var(--line);
    border-radius:3px;padding:1.7rem 1.4rem 2.2rem}
  .saying .qdate{font-size:.72rem;color:var(--seal);letter-spacing:.2em;margin-bottom:1.1rem}
  .saying .sit{font-size:.92rem;color:var(--celadon-deep);word-break:keep-all}
  .saying .who{margin-top:.25rem;font-size:.8rem;color:var(--mist)}
  .saying .hanja{margin-top:1.1rem;font-family:var(--serif);
    font-size:clamp(1.3rem,5.6vw,1.75rem);line-height:1.6;color:var(--ink);word-break:keep-all}
  .saying .qeum{margin-top:.35rem;font-size:.78rem;letter-spacing:.04em;color:var(--mist);word-break:keep-all}
  .saying .ko{margin-top:.75rem;font-size:.97rem;color:var(--ink-soft);line-height:1.7;word-break:keep-all}
  .seal.mini{width:2.3rem;height:2.3rem;font-size:.72rem;box-shadow:0 1px 6px rgba(0,0,0,.12)}
  .saying .src-seal{position:absolute;right:.95rem;bottom:-.75rem}
  .fadeq{transition:opacity .45s ease,filter .45s ease}
  .fadeq.out{opacity:0;filter:blur(3px)}
  @media (prefers-reduced-motion:reduce){.fadeq{transition:none}}
  .saying .cta{margin-top:1.5rem;padding:.72rem 1.25rem;font-size:.92rem}
  .saying .cap{margin-top:.9rem;font-size:.76rem;color:var(--mist);word-break:keep-all}

  /* ZODIAC — 오늘의 일진 + 띠 오늘의운세 */
  .zodiac h2{font-size:clamp(1.55rem,5.8vw,2rem);line-height:1.4}
  .zodiac .ztxt{margin-top:.9rem;font-family:var(--serif);font-size:1.08rem;line-height:1.7;
    color:var(--ink-soft);word-break:keep-all}
  .zodiac .zq{margin-top:1.8rem;font-size:.92rem;color:var(--ink-soft)}
  .zgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1rem}
  .zbtn{padding:.62rem .2rem .55rem;text-align:center;background:var(--panel);
    border:1px solid var(--line);border-radius:3px;cursor:pointer;color:var(--ink-soft);
    font-family:var(--sans);transition:border-color .15s ease,box-shadow .15s ease,color .15s ease;
    -webkit-tap-highlight-color:transparent}
  .zbtn b{display:block;font-family:var(--serif);font-weight:400;font-size:1.32rem;line-height:1.25;color:inherit}
  .zbtn span{font-size:.7rem;color:var(--mist)}
  .zbtn.on{border-color:var(--celadon);color:var(--ink);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--celadon) 20%,transparent)}
  .zbtn:focus-visible{outline:2px solid var(--celadon-deep);outline-offset:2px}
  .zres{margin-top:1.8rem;border-left:2px solid var(--celadon);padding-left:1.25rem}
  .zres .rel{font-size:.84rem;color:var(--celadon-deep);word-break:keep-all}
  .zres .row{margin-top:.85rem;font-size:.95rem;color:var(--ink-soft);line-height:1.65;word-break:keep-all}
  .zres .row b{display:block;color:var(--mist);font-weight:600;font-size:.74rem;letter-spacing:.12em;margin-bottom:.2rem}
  .zres .elline{margin-top:1rem;font-size:.9rem;color:var(--ink-soft);word-break:keep-all}
  .zres .try-link{margin-top:1.2rem}
  .zdisc{margin-top:1.6rem;font-size:.75rem;color:var(--mist);word-break:keep-all}

  /* TRY — 1단계: 가볍게 보기 (무료 간단사주) */
  .try{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .try h2{font-size:clamp(1.7rem,6.4vw,2.3rem);line-height:1.34}
  .try .lead{margin-top:1.3rem;color:var(--ink-soft);font-size:1.02rem}
  .try form{margin-top:2rem}
  .try .priv{font-size:.78rem;color:var(--mist);line-height:1.55;margin-top:-.4rem}
  /* 명식(命式) 카드: 시·일·월·년 4주, 일주=나 강조 */
  .mset{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-top:2.2rem}
  .pillar{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:3px;
    padding:.8rem .3rem .9rem;text-align:center;display:flex;flex-direction:column;align-items:center}
  .pillar .role{font-size:.66rem;letter-spacing:.16em;color:var(--mist);margin-bottom:.5rem;white-space:nowrap}
  .pillar .han{font-family:var(--serif);font-size:clamp(1.55rem,6.6vw,2.15rem);line-height:1.16;
    display:block;position:relative}
  .pillar .han .dot{display:block;width:.32rem;height:.32rem;border-radius:50%;margin:.22rem auto 0}
  .pillar .eum{font-size:.7rem;color:var(--ink-soft);display:block;margin:.12rem 0 .4rem}
  .pillar .cut{width:1.4rem;height:1px;background:var(--line);margin:.15rem auto .55rem}
  .pillar.me{border-color:color-mix(in srgb,var(--seal) 55%,transparent);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--seal) 30%,transparent)}
  .pillar.me::after{content:"나";position:absolute;top:-.6rem;right:-.35rem;background:var(--seal);
    color:#f4ede2;font-family:var(--serif);font-size:.72rem;line-height:1;padding:.22rem .36rem;
    border-radius:3px;transform:rotate(-3deg)}
  .pillar.empty{border-style:dashed;color:var(--mist)}
  .pillar .qm{color:var(--mist)}
  .dot.el-mok{background:var(--el-mok)} .dot.el-hwa{background:var(--el-hwa)}
  .dot.el-to{background:var(--el-to)} .dot.el-geum{background:var(--el-geum)} .dot.el-su{background:var(--el-su)}
  .tbadge{margin-top:1.4rem}
  /* 일간 해석 */
  .ilgan{margin-top:2.2rem;border-left:2px solid var(--celadon);padding-left:1.3rem}
  .ilgan-t{font-family:var(--serif);font-size:1.22rem;line-height:1.55;color:var(--ink)}
  .ilgan-d{margin-top:.55rem;font-size:.97rem;color:var(--ink-soft);line-height:1.7}
  .ilgan-d span{display:block;margin-top:.5rem;font-size:.86rem;color:var(--mist)}
  /* 오행 분포 바 — 먹 농담, 채도 낮게 */
  .obar-wrap{margin-top:2.2rem}
  .obar-t{font-size:.82rem;letter-spacing:.05em;color:var(--ink-soft);font-weight:600}
  .obar-t span{color:var(--mist);font-weight:400;margin-left:.35rem;font-size:.76rem}
  .obar{display:flex;gap:2px;margin-top:.7rem;border-radius:2px;overflow:hidden}
  .obar .seg{display:flex;align-items:center;justify-content:center;gap:.28rem;height:2.1rem;
    color:#f4efe6;font-size:.8rem;min-width:2.4rem}
  .obar .seg b{font-family:var(--serif);font-weight:400;font-size:.92rem}
  .obar .seg.el-mok{background:var(--el-mok)} .obar .seg.el-hwa{background:var(--el-hwa)}
  .obar .seg.el-to{background:var(--el-to)} .obar .seg.el-geum{background:var(--el-geum)}
  .obar .seg.el-su{background:var(--el-su)}
  .obar .seg.zero{flex:0 0 3rem;background:transparent;border:1px dashed var(--line);
    border-radius:2px;color:var(--mist)}
  .obar-d{margin-top:.9rem;font-size:.93rem;color:var(--ink-soft);line-height:1.65}
  .obar-fix{margin-top:.7rem;font-size:.83rem;color:var(--mist)}
  /* 다음 걸음 (2·3단계 이월) */
  .next{margin-top:2.6rem;text-align:center;border-top:1px solid var(--line);padding-top:2.2rem}
  .next .teaser{font-family:var(--serif);font-size:1.18rem;line-height:1.7;color:var(--ink);text-wrap:balance;word-break:keep-all}
  .ilgan-t,.ilgan-d,.obar-d,.obar-fix,.tbadge{word-break:keep-all}
  .next .teaser b{color:var(--celadon-deep);font-weight:400}
  .nextbtns{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
  .nextbtns .cta{margin-top:0;justify-content:center;width:100%}
  .cta.ghost{background:transparent;color:var(--celadon-deep);border:1px solid var(--celadon)}
  .cta.ghost:hover{background:color-mix(in srgb,var(--celadon) 10%,transparent)}
  .tfoot{margin-top:1.8rem;font-size:.74rem;line-height:1.6;color:var(--mist)}
  .try-link{display:inline-block;margin-top:1.1rem;font-size:.92rem;color:var(--ink-soft);
    text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.15rem}
  .try-link:hover{color:var(--celadon-deep);border-color:var(--celadon)}
  @media (min-width:480px){ .nextbtns{flex-direction:row} .nextbtns .cta{flex:1} }

  /* STORY — 산목 이름의 뜻 (접이식) */
  .story{padding:3.6rem 0;border-top:1px solid var(--line)}
  .story details{background:var(--panel);border:1px solid var(--line);border-radius:3px}
  .story summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.8rem;
    padding:1.1rem 1.3rem;font-family:var(--serif);font-size:1.08rem;color:var(--ink);
    -webkit-tap-highlight-color:transparent}
  .story summary::-webkit-details-marker{display:none}
  .story summary::before{content:"";width:.44rem;height:.44rem;border-radius:50%;
    background:var(--celadon);flex:0 0 auto;transition:transform .25s ease}
  .story details[open] summary::before{transform:scale(1.35)}
  .story summary small{color:var(--mist);font-family:var(--sans);font-size:.78rem;margin-left:auto}
  .story .body{padding:.2rem 1.3rem 1.5rem;border-top:1px solid var(--line)}
  .story .body p{margin-top:1.1rem;font-size:.96rem;line-height:1.8;color:var(--ink-soft);word-break:keep-all}
  .story .body p b{color:var(--ink);font-weight:400;font-family:var(--serif)}
  .story .body .cite{font-size:.78rem;color:var(--mist)}

  /* CLOSING */
  .closing{text-align:center;padding-bottom:6.5rem}
  .closing .brush{font-family:var(--serif);font-size:clamp(1.5rem,5.6vw,1.95rem);line-height:1.6;
    color:var(--ink);text-wrap:balance}
  .closing .ho{margin-top:1.8rem;font-family:var(--serif);font-size:1.15rem;letter-spacing:.1em;color:var(--celadon-deep)}
  .disc{margin-top:3rem;font-size:.78rem;line-height:1.7;color:var(--mist);max-width:26rem;
    margin-inline:auto;padding-top:1.6rem;border-top:1px solid var(--line)}

  footer{padding:2.4rem 0 7rem;text-align:center;color:var(--mist);font-size:.78rem;letter-spacing:.06em}
  footer .fho{font-family:var(--serif);font-size:1rem;letter-spacing:.16em;color:var(--ink-soft)}

  /* sticky bottom CTA */
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(9px);
    border-top:1px solid var(--line);transform:translateY(120%);transition:transform .35s ease}
  .dock.show{transform:none}
  .dock a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    background:var(--celadon);color:#f3f6f1;font-weight:600;font-size:1rem;text-decoration:none;
    padding:.95rem;border-radius:2px;max-width:var(--maxw);margin:0 auto}
  .dock a:active{background:var(--celadon-deep)}

  @media (prefers-reduced-motion:reduce){
    .rise{transition:none;opacity:1;transform:none}
    .cta,.cta .arw{transition:none}
  }
  @media (min-width:640px){ body{font-size:18px} .gains .row{gap:1.25rem} }

/* ===== TABBAR — 하단 고정 4탭 (2026-07-20 탭 구조 개편, common.js가 렌더) ===== */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:.3rem .5rem calc(.3rem + env(safe-area-inset-bottom))}
.tabbar a{flex:1;max-width:8.5rem;display:flex;flex-direction:column;align-items:center;gap:.12rem;
  padding:.42rem .2rem .38rem;text-decoration:none;color:var(--mist);border-radius:4px;
  -webkit-tap-highlight-color:transparent}
.tabbar a b{font-family:var(--serif);font-weight:400;font-size:1.08rem;line-height:1.2}
.tabbar a span{font-size:.66rem;letter-spacing:.02em}
.tabbar a.on,.tabbar a.on b{color:var(--celadon-deep)}
main{padding-bottom:4.8rem} /* 탭바 자리 확보 */

/* ===== BRANDBAR — 서브페이지 상단 브랜드 줄 ===== */
.brandbar{padding:2rem 0 0}
.brandbar .hero-mark{margin-bottom:0}

/* ===== RANK — 오늘의 열두 자리 (단계 B, 2026-07-20) ===== */
.rank h2{font-size:clamp(1.55rem,5.8vw,2rem);line-height:1.4}
.ranklist{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-direction:column;counter-reset:rk}
.ranklist li{display:flex;align-items:center;gap:.8rem;padding:.6rem .65rem;border-top:1px solid var(--line)}
.ranklist li:last-child{border-bottom:1px solid var(--line)}
.ranklist .no{font-family:var(--serif);font-size:.95rem;color:var(--mist);width:2.3rem;flex:0 0 auto;
  font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.ranklist li.top{background:var(--panel)}
.ranklist li.top .no{color:var(--seal)}
.ranklist .zh{font-family:var(--serif);font-size:1.28rem;line-height:1;color:var(--ink);width:1.6rem;text-align:center;flex:0 0 auto}
.ranklist .an{font-size:.93rem;color:var(--ink-soft);flex:0 0 auto}
.ranklist .why{font-size:.79rem;color:var(--mist);margin-left:auto;text-align:right;word-break:keep-all}
.ranklist li.me{border-left:2px solid var(--celadon);background:color-mix(in srgb,var(--celadon) 8%,transparent)}
.ranklist .mebadge{font-size:.64rem;color:#f3f6f1;background:var(--celadon);border-radius:2px;padding:.14rem .34rem;flex:0 0 auto}

/* ===== HWANGRYEOK — 오늘의 황력 宜/忌 (단계 B, 2026-07-20) ===== */
.hr h2{font-size:clamp(1.55rem,5.8vw,2rem);line-height:1.4}
.hrcols{display:flex;flex-direction:column;gap:.8rem;margin-top:1.7rem}
@media (min-width:520px){.hrcols{flex-direction:row}.hrcols .hrcol{flex:1}}
.hrcol{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:1rem 1.15rem}
.hrcol>b{display:block;font-size:.76rem;letter-spacing:.12em;font-weight:600;margin-bottom:.55rem}
.hrcol.good>b{color:var(--celadon-deep)}
.hrcol.avoid>b{color:var(--seal)}
.hrcol ul{list-style:none;margin:0;padding:0}
.hrcol li{padding:.32rem 0 .32rem 1.02rem;position:relative;font-size:.95rem;color:var(--ink-soft);word-break:keep-all}
.hrcol li::before{content:"";position:absolute;left:0;top:.84rem;width:.32rem;height:.32rem;border-radius:50%}
.hrcol.good li::before{background:var(--celadon)}
.hrcol.avoid li::before{border:1px solid var(--seal)}

/* ===== 단계 C (2026-07-20): 십간 유형 카드 · 궁합 · 사이트 공유 ===== */
.tcard{margin-top:1.6rem;background:var(--panel);border:1px solid var(--line);
  border-left:2px solid var(--seal);border-radius:3px;padding:1.15rem 1.25rem}
.tcard-h{font-family:var(--serif);font-size:1.12rem;color:var(--ink);word-break:keep-all}
.tcard-h b{color:var(--seal);font-weight:400}
.tcard-row{margin-top:.7rem;font-size:.93rem;color:var(--ink-soft);line-height:1.65;word-break:keep-all}
.tcard-row b{display:block;color:var(--mist);font-weight:600;font-size:.72rem;letter-spacing:.14em;margin-bottom:.15rem}
.ghpair{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2.2rem}
.ghpair .ghp{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.ghpair .ghp .han{width:5.4rem;height:5.4rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:2.6rem;color:var(--ink);background:var(--panel);
  border:1px solid var(--celadon);border-radius:50%}
.ghpair .ghp small{font-size:.78rem;color:var(--mist);word-break:keep-all;text-align:center}
.ghpair .ghline{flex:0 0 3.2rem;height:2px;background:linear-gradient(90deg,transparent,var(--celadon-deep),transparent)}
.siteshare{display:block;margin:1.6rem auto 0;background:transparent;border:1px solid var(--line);
  border-radius:999px;color:var(--mist);font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;
  padding:.55rem 1.15rem;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.siteshare:hover{color:var(--celadon-deep);border-color:var(--celadon)}
.igline{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;color:var(--mist);font-family:var(--sans);font-size:.78rem;
  letter-spacing:.05em;text-decoration:none;transition:color .15s ease}
.igline:hover{color:var(--celadon-deep)}
.igline svg{color:var(--celadon)}
.igline:hover svg{color:var(--seal)}

/* ===== 인스타 소통 (2026-07-20 3팀 회의: 자체 배너, embed 금지) ===== */
.ig-connect{margin:1.6rem 0 2rem}
.ig-connect__link{display:flex;align-items:center;gap:.9rem;background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--seal);border-radius:6px;
  padding:1rem 1.1rem;text-decoration:none;transition:border-color .15s ease}
.ig-connect__link:hover{border-color:var(--celadon)}
.ig-icon{color:var(--celadon);flex-shrink:0}
.ig-connect__link:hover .ig-icon{color:var(--seal)}
.ig-connect__txt{font-family:var(--sans);font-size:.92rem;line-height:1.55;color:var(--ink-soft);word-break:keep-all}
.ig-connect__txt em{font-style:normal;font-size:.8rem;color:var(--mist)}
/* ===== 시각·시주 안내 (진태양시·야자시, 접이식) ===== */
.timenote{margin:1rem 0 .2rem;border:1px solid var(--line);border-radius:5px;background:var(--panel);
  padding:0 1rem;font-family:var(--sans)}
.timenote summary{padding:.85rem 0;cursor:pointer;font-size:.9rem;color:var(--celadon-deep);
  list-style:none;position:relative;padding-right:1.4rem;word-break:keep-all}
.timenote summary::-webkit-details-marker{display:none}
.timenote summary::after{content:"+";position:absolute;right:.2rem;top:.75rem;color:var(--mist);font-size:1.1rem}
.timenote[open] summary::after{content:"−"}
.timenote p{font-size:.9rem;line-height:1.72;color:var(--ink-soft);margin:0 0 .8rem;word-break:keep-all}
.timenote p:first-of-type{margin-top:.2rem}
.timenote .tn-foot{font-size:.84rem;color:var(--mist);padding-bottom:.9rem}

/* ===== 홈 화면 바로가기 카드 (4팀 회의: 조용한 카드, 2회차 방문+14일 억제) ===== */
.a2hs{margin:2.2rem auto 0;max-width:30rem;background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:1.3rem 1.2rem;text-align:center}
.a2hs-t{font-family:var(--serif);font-size:1.02rem;color:var(--ink);word-break:keep-all;line-height:1.6}
.a2hs-btns{display:flex;gap:.6rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.a2hs-btns .cta{margin:0;padding:.65rem 1.3rem;font-size:.88rem}
.a2hs-ios{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);text-align:left}
.a2hs-ios p{font-family:var(--sans);font-size:.88rem;color:var(--ink-soft);margin:.45rem 0;word-break:keep-all}
.a2hs-ios svg{vertical-align:-3px;color:var(--celadon-deep)}

/* 공유 카드 저장 직후 얇은 밴드 */
.ig-after{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;padding-top:.6rem;
  border-top:1px solid var(--line);color:var(--mist);font-family:var(--sans);font-size:.8rem;
  text-decoration:none;transition:color .15s ease}
.ig-after:hover{color:var(--celadon-deep)}
.ig-after svg{color:var(--celadon);flex-shrink:0}

/* ===== 산목 서당 (단계 D, 2026-07-20) ===== */
.sd-card{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:1.6rem 1.4rem 1.8rem}
.sd-no{font-size:.72rem;letter-spacing:.3em;color:var(--seal);text-transform:uppercase}
.sd-t{font-family:var(--serif);font-size:clamp(1.4rem,5.4vw,1.8rem);margin-top:.7rem;color:var(--ink);word-break:keep-all}
.sd-big{font-family:var(--serif);font-size:clamp(2.6rem,11vw,3.6rem);line-height:1.25;color:var(--ink);
  margin:1.2rem 0 0;text-align:center;letter-spacing:.12em;word-break:keep-all}
.sd-body{margin-top:1.2rem;font-size:.98rem;line-height:1.8;color:var(--ink-soft);word-break:keep-all}
.sd-keep{margin-top:1.3rem;font-family:var(--serif);font-size:.98rem;color:var(--ink);
  border-left:2px solid var(--seal);padding-left:1rem;word-break:keep-all}
.sd-keep b{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;color:var(--mist);font-weight:600;margin-bottom:.25rem}
.sd-card .nextbtns{margin-top:1.7rem}
.sd-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin-top:1rem}
.sd-grid button{padding:.55rem 0;background:var(--panel);border:1px solid var(--line);border-radius:3px;
  color:var(--mist);font-family:var(--serif);font-size:.92rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sd-grid button.done{color:var(--celadon-deep);border-color:color-mix(in srgb,var(--celadon) 45%,transparent)}
.sd-grid button.cur{color:#f3f6f1;background:var(--celadon);border-color:var(--celadon)}
.sd-quiz{margin-top:2.6rem}
.sdq{margin-top:1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:1rem 1.1rem}
.sdq-q{font-size:.97rem;color:var(--ink);word-break:keep-all}
.sdq-opts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.sdq-opts button{flex:1 1 5.5rem;padding:.6rem .4rem;background:transparent;border:1px solid var(--line);
  border-radius:3px;color:var(--ink-soft);font-family:var(--sans);font-size:.95rem;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.sdq-opts button.ok{border-color:var(--celadon);color:var(--celadon-deep);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--celadon) 20%,transparent)}
.sdq-opts button.no{border-color:color-mix(in srgb,var(--seal) 55%,transparent);color:var(--seal);opacity:.75}
.sdq-r{margin-top:.6rem;font-size:.86rem;min-height:1.1rem}
.sdq-r.good{color:var(--celadon-deep)}
.sdq-r.bad{color:var(--seal)}

/* ===== 명리 승단 시험 (2026-07-20, 3팀 회의 디자인 지침: 먹 붓획·낙관·한자) ===== */
.exsec{padding:4.2rem 0 5rem}
.ex-h{font-family:var(--serif);font-size:clamp(1.7rem,6.4vw,2.3rem);line-height:1.35;color:var(--ink);word-break:keep-all}
.ex-lead{margin-top:1.2rem;font-size:1rem;line-height:1.75;color:var(--ink-soft);word-break:keep-all}
.ex-best{margin-top:1.1rem;font-size:.9rem;color:var(--mist)}
.ex-best b{color:var(--celadon-deep);font-family:var(--serif);font-weight:400}
#exam .cta{margin-top:1.8rem}
.ex-where{font-size:.74rem;letter-spacing:.28em;color:var(--seal);text-transform:uppercase}
.ex-brush{margin-top:.9rem;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.ex-brush span{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 55%,transparent),var(--ink));
  transition:width .5s ease}
.ex-q{margin-top:1.7rem;font-family:var(--serif);font-size:1.18rem;line-height:1.65;color:var(--ink);word-break:keep-all}
.ex-opts{display:flex;flex-direction:column;gap:.55rem;margin-top:1.4rem}
.ex-opts button{text-align:left;padding:.85rem 1rem;background:var(--panel);border:1px solid var(--line);
  border-radius:3px;color:var(--ink-soft);font-family:var(--sans);font-size:.97rem;cursor:pointer;
  position:relative;word-break:keep-all;-webkit-tap-highlight-color:transparent}
.ex-opts button.ok{border-color:var(--celadon);color:var(--ink);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--celadon) 20%,transparent)}
.ex-opts button.ok::after{content:"印";position:absolute;right:.75rem;top:50%;transform:translateY(-50%) rotate(-6deg);
  color:#f4ede2;background:var(--celadon);font-family:var(--serif);font-size:.7rem;
  padding:.18rem .3rem;border-radius:2px}
.ex-opts button.no{opacity:.6}
.ex-r{margin-top:1rem;font-size:.9rem;line-height:1.6;color:var(--ink-soft);min-height:1.2rem;word-break:keep-all}
.ex-r .good{color:var(--celadon-deep);font-family:var(--serif);font-weight:400}
.ex-r .bad{color:var(--seal);font-family:var(--serif);font-weight:400}
.ex-src{color:var(--mist);font-size:.8rem}
.ex-next{margin-top:1.2rem}
.ex-up{margin-top:1.4rem;font-family:var(--serif);font-size:1.3rem;line-height:1.7;color:var(--ink);word-break:keep-all}
.ex-up b{color:var(--celadon-deep);font-weight:400}
.ex-bridge{margin-top:1.8rem;font-size:.92rem;color:var(--ink-soft)}
.ex-bridge a{color:var(--celadon-deep);text-decoration:none;border-bottom:1px solid var(--celadon)}
.ghpair .ghp .ghb{color:var(--celadon-deep);font-size:.74rem;letter-spacing:.03em}

/* ===== 명리 실력 시험 v2 — 단계 선택·점수 (2026-07-20 강위 피드백) ===== */
.ex-levels{display:flex;flex-direction:column;gap:.55rem;margin-top:1.7rem}
.ex-levels button{display:grid;grid-template-columns:4.4rem 1fr;grid-template-rows:auto auto;
  column-gap:.9rem;align-items:center;text-align:left;padding:.85rem 1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;cursor:pointer;position:relative;
  -webkit-tap-highlight-color:transparent;transition:border-color .15s ease,box-shadow .15s ease}
.ex-levels button:hover{border-color:var(--celadon);box-shadow:0 0 0 2px color-mix(in srgb,var(--celadon) 16%,transparent)}
.ex-levels .lvh{grid-row:1/3;font-family:var(--serif);font-size:1.7rem;color:var(--ink);text-align:center}
.ex-levels .lvn{font-family:var(--serif);font-size:1.04rem;color:var(--ink)}
.ex-levels .lvd{font-size:.8rem;color:var(--mist);word-break:keep-all}
.ex-levels em{position:absolute;right:.9rem;top:.8rem;font-style:normal;font-size:.7rem;color:var(--celadon-deep)}
.ex-levels button.warn{border-left:2px solid var(--seal)}
.ex-levels button.warn .lvh{color:var(--seal)}
.ex-levels .ban{font-style:normal;color:#f4ede2;background:var(--seal);font-family:var(--serif);
  font-size:.66rem;padding:.1rem .3rem;border-radius:2px;margin-left:.35rem;vertical-align:2px}
.ex-score{margin-top:1rem;font-family:var(--serif);color:var(--ink)}
.ex-score b{font-size:3.4rem;color:var(--seal);font-weight:400}
.ex-score{font-size:1.5rem}
.ex-score-lv{display:block;font-size:.85rem;color:var(--mist);font-family:var(--sans);margin-top:.3rem;letter-spacing:.06em}

/* ===== 읽을거리 연재 (단계 E, 2026-07-20) ===== */
#articles .art{background:var(--panel);border:1px solid var(--line);border-radius:3px;margin-top:.8rem}
#articles .art summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:.25rem;
  padding:1.05rem 1.25rem;-webkit-tap-highlight-color:transparent;position:relative}
#articles .art summary::-webkit-details-marker{display:none}
#articles .art .art-cat{font-size:.7rem;letter-spacing:.16em;color:var(--seal)}
#articles .art .art-t{font-family:var(--serif);font-size:1.12rem;color:var(--ink);word-break:keep-all}
#articles .art summary small{font-size:.74rem;color:var(--mist)}
#articles .art.done summary .art-t{color:var(--mist)}
#articles .art.done summary .art-cat{color:var(--mist)}
#articles .art .body{padding:.2rem 1.25rem 1.5rem;border-top:1px solid var(--line)}
#articles .art .body p{margin-top:1.05rem;font-size:.97rem;line-height:1.85;color:var(--ink-soft);word-break:keep-all}
#articles .art .art-bridge{font-size:.88rem;color:var(--mist)}
#articles .art .art-bridge a{color:var(--celadon-deep);text-decoration:none;border-bottom:1px solid var(--celadon)}

/* ===== 손 없는 날 (2026-07-20) ===== */
.sn-list{list-style:none;margin:1.6rem 0 0;padding:0}
.sn-list li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.85rem .2rem;border-top:1px solid var(--line)}
.sn-list li:last-child{border-bottom:1px solid var(--line)}
.sn-list b{font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--ink)}
.sn-list span{font-size:.82rem;color:var(--mist)}
.sn-list li.today b{color:var(--seal)}
.sn-list li.today span{color:var(--celadon-deep)}
/* 일주 유형 카드 확장 (2026-07-20) */
.tcard-gz{font-size:.72rem;letter-spacing:.12em;color:var(--mist);font-family:var(--sans)}
.tcard-t{margin-top:.55rem;font-family:var(--serif);font-size:.98rem;line-height:1.7;color:var(--ink-soft);word-break:keep-all}

/* ===== 사주로 보는 성향 — 네 갈래 기질 (2026-07-20) ===== */
.mb-card{margin-top:1.6rem;background:var(--panel);border:1px solid var(--line);
  border-left:2px solid var(--celadon);border-radius:3px;padding:1.2rem 1.25rem}
.mb-rows{list-style:none;margin:0;padding:0}
.mb-rows li{border-top:1px solid var(--line)}
.mb-rows li:first-child{border-top:0}
.mb-rows summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;
  padding:.8rem .1rem;-webkit-tap-highlight-color:transparent}
.mb-rows summary::-webkit-details-marker{display:none}
.mb-word{font-family:var(--serif);font-size:1.14rem;color:var(--ink);word-break:keep-all}
.mb-letter{font-size:.78rem;color:var(--mist);letter-spacing:.06em}
.mb-edge{font-style:normal;font-size:.64rem;color:var(--seal);border:1px solid color-mix(in srgb,var(--seal) 45%,transparent);
  border-radius:999px;padding:.08rem .4rem}
.mb-dot{margin-left:auto;width:.55rem;height:.55rem;border-radius:50%;border:1px solid var(--line);flex:0 0 auto}
.mb-rows li.hit .mb-dot{background:var(--celadon);border-color:var(--celadon)}
.mb-rows li.miss .mb-dot{background:color-mix(in srgb,var(--ink) 55%,transparent);border-color:transparent;
  box-shadow:0 0 6px 2px color-mix(in srgb,var(--ink) 25%,transparent)}
.mb-rows li.miss .mb-word{color:var(--seal)}
.mb-why{padding:0 .1rem .9rem;font-size:.88rem;line-height:1.65;color:var(--ink-soft);word-break:keep-all}
.mb-compare{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:1rem}
.mb-compare label{display:block;font-size:.85rem;color:var(--ink-soft);margin-bottom:.5rem}
.mb-compare select{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background-color:var(--field-bg);border:1px solid var(--line);border-radius:3px;padding:.75rem .9rem}
.mb-diff{margin-top:1rem}
.mb-sum{font-size:.95rem;color:var(--ink);word-break:keep-all}
.mb-line{margin-top:.6rem;font-size:.9rem;line-height:1.65;color:var(--ink-soft);word-break:keep-all}
.mb-line.hook{font-family:var(--serif);color:var(--ink)}
.mb-note{margin-top:1.1rem}
.mb-note summary{cursor:pointer;font-size:.85rem;color:var(--celadon-deep);list-style:none}
.mb-note summary::-webkit-details-marker{display:none}
.mb-note p{margin-top:.6rem;font-size:.88rem;line-height:1.7;color:var(--ink-soft);word-break:keep-all}

/* footer CTA (외부 마케팅 감사 반영) */
.footcta{color:var(--celadon-deep);text-decoration:none;border-bottom:1px solid var(--celadon);padding-bottom:1px}
/* 터치 타깃 확대 (외부 개발 감사: 서당 격자·퀴즈 보기 44px 근접) */
.sd-grid button{padding:.72rem 0}
.sdq-opts button{padding:.75rem .5rem}

/* ===== CALLI — 붓글씨 캘리그라피 (2026-07-21 디자인팀 스펙 v1.0) =====
   다크모드 대응 핵심: 먹 PNG를 img가 아니라 mask로 쓰고 var(--ink)로 채색
   → 라이트 #1f2620 / 다크 #dde3d8 이 테마 변수 체계 그대로 자동 적용 */
@font-face{
  font-family:"Nanum Brush";
  src:url("assets/calli/nanum-brush-ks.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+AC00-D7A3,U+0020-007E,U+00B7,U+2014,U+2018-201D,U+2026;
}
.calli-ink{display:block;background-color:var(--ink);
  -webkit-mask:var(--calli) no-repeat left center/contain;
          mask:var(--calli) no-repeat left center/contain}
.calli-logo{height:2.7rem;aspect-ratio:384/161}
.calli-head{width:100%;max-width:29rem;aspect-ratio:992/109;margin-bottom:.4rem}
/* 시각만 숨김 — SEO·스크린리더·복사 텍스트 보존 */
.sr-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* mask 미지원 폴백: 이미지 숨기고 텍스트 헤드라인으로 강등 */
@supports not ((mask-image:url("")) or (-webkit-mask-image:url(""))){
  .calli-ink{display:none}
  .calli-wrap{position:relative}
  .calli-wrap .sr-text{position:static;width:auto;height:auto;margin:0;clip:auto;white-space:normal}
}
/* 캘리 웹폰트 — 문장형 감성 h2 전용 (나눔브러시는 x-height가 작아 크기 보정 겸용)
   섹션별 h2 규칙(.empathy h2 등, 0-1-1)과 .closing .brush(0-2-0)를 이기도록 특이도 보강 */
h2.calli-f, p.calli-f{font-family:"Nanum Brush",var(--serif);font-weight:400;
  font-size:clamp(2rem,7.6vw,2.7rem);line-height:1.35;letter-spacing:0}
.closing .brush.calli-f{font-family:"Nanum Brush",var(--serif);font-weight:400;
  font-size:clamp(1.7rem,6vw,2.2rem);line-height:1.5;letter-spacing:0}

/* ── 히어로 배경 한문 화제(畫題) — 甲木參天, 적천수 論木 (디자인팀 스펙 v1.1) ──
   "3초 안에 눈에 안 들어오고, 찾으면 보이는" 선: 라이트 6% / 다크 8%.
   960px 미만은 빈 공간이 없어 표시하지 않음(축소 아님) — 사이트 전체 유일 워터마크 */
:root{--hanmun-op:.06}
@media (prefers-color-scheme:dark){:root{--hanmun-op:.08}}
:root[data-theme="light"]{--hanmun-op:.06}
:root[data-theme="dark"]{--hanmun-op:.08}
.hero-hanmun{display:none}
@media (min-width:60rem){
  .hero-hanmun{display:block;position:absolute;z-index:0;top:9svh;right:4rem;
    writing-mode:vertical-rl;font-family:var(--serif);font-weight:400;
    font-size:clamp(3.2rem,4.5vw,4.5rem);line-height:1;letter-spacing:.34em;
    color:var(--ink);opacity:var(--hanmun-op);
    user-select:none;-webkit-user-select:none;pointer-events:none}
}

/* ── 다음 걸음 추천 카드 (recommend.js, 2026-07-21 파트1) ── */
.nextsteps{padding:3.6rem 0 1rem}
.ns-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.4rem}
.ns-card{display:flex;flex-direction:column;gap:.35rem;padding:1.05rem 1.1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  text-decoration:none;color:var(--ink);transition:transform .16s ease,border-color .16s ease}
.ns-card:hover{transform:translateY(-1px);border-color:var(--celadon)}
.ns-card b{font-family:var(--serif);font-weight:400;font-size:1.0rem;line-height:1.4}
.ns-card span{font-size:.8rem;color:var(--mist);line-height:1.5;word-break:keep-all}
.ns-apply{border-color:var(--celadon);background:transparent}
.ns-apply b{color:var(--celadon-deep)}
@media (max-width:26rem){.ns-grid{grid-template-columns:1fr}}
/* 무료·상담 경계 카피 (파트2) */
.ns-boundary{font-family:var(--serif);font-size:1.02rem;line-height:1.85;color:var(--ink-soft);
  margin-bottom:2rem;word-break:keep-all;text-wrap:balance}
/* 오늘의 먹색 (파트4) */
.ink-color{margin-top:.9rem;font-size:.94rem;color:var(--ink-soft);line-height:1.7;word-break:keep-all}
.ink-dot{display:inline-block;width:.72rem;height:.72rem;border-radius:50%;margin-right:.45rem;
  vertical-align:-1px;box-shadow:0 0 0 1px var(--line)}
.ink-note{color:var(--mist);font-size:.86rem}
/* 주제 체크리스트 (파트7) */
.topicpick{margin:1rem 0 .2rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.topicpick .zdisc{width:100%}
.topicpick .chk{border:1px solid var(--line);border-radius:99px;padding:.34rem .8rem;cursor:pointer;font-size:.88rem}
.topicpick .chk:has(input:checked){border-color:var(--celadon);color:var(--celadon-deep)}
.topicpick input{position:absolute;opacity:0;pointer-events:none}
/* 서당 장별 CTA (파트7) */
.sd-ask{margin-top:.9rem;font-size:.9rem}

/* ── 자시(子時)의 방 (파트8) ── */
.jasi-door{width:5.4rem;height:7.6rem;margin:1.2rem 0 1.4rem;border:1px solid var(--line);
  border-radius:4px 4px 0 0;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--panel),transparent)}
.jasi-door::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.jasi-door .jasi-han{font-family:var(--serif);font-size:2rem;color:var(--mist);opacity:.55}
.jasi-door.open{border-color:var(--celadon);box-shadow:0 0 22px rgba(130,168,146,.18)}
.jasi-door.open .jasi-han{color:var(--celadon-deep);opacity:.9}
.jasi-t{font-family:var(--serif);font-weight:400;font-size:1.32rem;margin-bottom:.8rem}
.jasi-b{color:var(--ink-soft);font-size:.98rem;line-height:1.85;word-break:keep-all;max-width:30rem}
.jasi-cta{margin-top:1rem;font-size:.94rem}
.jasi-cta a{color:var(--celadon-deep);text-decoration:none;border-bottom:1px solid var(--celadon);padding-bottom:1px}

/* ── 일주도감 격자 내비 (2차-1) ── */
.ilju-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem;margin-top:1rem}
.ilju-grid a{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:3px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:.98rem;
  transition:border-color .16s ease}
.ilju-grid a:hover{border-color:var(--celadon)}
.ilju-grid a small{font-size:.72rem;color:var(--mist);font-family:var(--sans)}

/* ── 순간의 명식 (2차-3) ── */
.mpils{display:flex;gap:.6rem;margin-top:1.4rem}
.mp{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem .4rem;
  border:1px solid var(--line);border-radius:3px;background:var(--panel)}
.mp small{font-size:.7rem;letter-spacing:.2em;color:var(--mist)}
.mp .han{font-family:var(--serif);font-size:1.5rem;color:var(--ink)}

/* ── 오늘의 산가지 (2차-4) ── */
.sg-stick{width:3.4rem;height:8rem;margin:1rem 0 .4rem;border:1px solid var(--line);border-radius:99px 99px 6px 6px;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:.8rem;cursor:pointer;
  background:linear-gradient(180deg,transparent,var(--panel));transition:border-color .2s ease}
.sg-stick:hover{border-color:var(--celadon)}
.sg-stick span{font-family:var(--serif);font-size:1.4rem;color:var(--mist)}
.sg-stick.drawn{cursor:default;border-color:var(--celadon)}
.sg-stick.drawn span{color:var(--celadon-deep)}
.sg-stick.shake{animation:sgshake .7s ease}
@keyframes sgshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}

/* ── 명식 서랍 (3차-2) ── */
.dw-item{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:3px;
  padding:.7rem .9rem;margin-bottom:.5rem;background:var(--panel)}
.dw-open{flex:1;display:flex;flex-direction:column;gap:.15rem;text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-size:1.02rem}
.dw-open small{color:var(--mist);font-size:.78rem;font-family:var(--sans)}
.dw-del{background:none;border:none;color:var(--mist);font-size:.78rem;cursor:pointer;padding:.4rem}
.dw-del:hover{color:var(--seal)}
.dw-tools{display:flex;gap:.5rem;margin-top:.6rem}

/* ── 산목 달력 (3차-3) — 길·평·흉을 먹 농담으로만 ── */
.dal-nav{display:flex;align-items:center;justify-content:space-between;margin:1.6rem 0 .8rem}
.dal-nav .cta{padding:.5rem .9rem;margin-top:0}
.dal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.dal-w{text-align:center;font-size:.7rem;letter-spacing:.1em;color:var(--mist);padding:.3rem 0}
.dal-d{display:flex;flex-direction:column;align-items:center;gap:.05rem;padding:.45rem .1rem;
  border:1px solid var(--line);border-radius:3px;background:none;cursor:pointer;color:var(--ink);font-family:var(--sans)}
.dal-d b{font-weight:600;font-size:.92rem}
.dal-d small{font-size:.62rem;color:var(--mist)}
.dal-d small.sin{font-family:var(--serif)}
.dal-d.gil{background:color-mix(in srgb, var(--ink) 14%, transparent)}
.dal-d.pyeong{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.dal-d.hyung{background:transparent;border-style:dashed}
.dal-d.today{border-color:var(--celadon);border-width:2px}
.dal-d:hover{border-color:var(--celadon)}
.dal-legend{font-size:.78rem;color:var(--mist);margin-top:.8rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.dal-legend .lg{display:inline-block;width:.9rem;height:.9rem;border:1px solid var(--line);border-radius:2px}
.dal-legend .lg.gil{background:color-mix(in srgb, var(--ink) 14%, transparent)}
.dal-legend .lg.pyeong{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.dal-legend .lg.hyung{border-style:dashed}
/* FAQ 아코디언 (3차-4) */
details.faq{border-top:1px solid var(--line);padding:.6rem 0}
details.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.02rem;color:var(--ink)}
details.faq[open] summary{color:var(--celadon-deep)}
details.faq .row{margin-top:.5rem}

/* ── 살아 있는 산방 1단계 — 시진 4군 먹빛 오버레이 (기존 테마 무손상, 비침습) ── */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.2s ease, background 1.2s ease}
:root[data-sijin="dawn"] body::before{opacity:.05;background:linear-gradient(180deg,#7c93a8,transparent 60%)}
:root[data-sijin="day"] body::before{opacity:.035;background:linear-gradient(180deg,#bfa76b,transparent 55%)}
:root[data-sijin="dusk"] body::before{opacity:.055;background:linear-gradient(180deg,#c07a63,transparent 60%)}
:root[data-sijin="night"] body::before{opacity:.06;background:linear-gradient(180deg,#46586b,transparent 65%)}
main{position:relative;z-index:1}