/* ══ 결 정하기 (11번 화면) ══
   새 색을 만들지 않는다 – 이미 있는 토큰만 쓴다.
   크기도 --fs-* 여덟 단계 말고는 쓰지 않는다. 손가락으로 누르는 자리는 44px 이상. */
.cqways{display:flex;flex-direction:column;gap:.7rem;margin:1.6rem 0 0}
/* 왜 #029 */
.cqway{position:relative;display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  min-height:56px;padding:1rem 3.2rem 1rem 1.1rem;border-radius:12px;
  border:2px solid var(--accent-ink);background:var(--accent-soft);color:var(--ink);
  box-shadow:0 2px 0 var(--accent-line);
  transition:border-color .13s,background .13s,transform .1s}
.cqway::after{content:"";position:absolute;right:1.15rem;top:50%;width:.7rem;height:.7rem;
  border-top:2.5px solid var(--accent-ink);border-right:2.5px solid var(--accent-ink);
  transform:translateY(-50%) rotate(45deg)}
.cqway:hover{background:var(--surface);border-color:var(--accent)}
.cqway:active{transform:translateY(1px)}
.cqway:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cqway .t{display:block;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);
  line-height:1.5;word-break:keep-all}
.cqway .s{display:block;margin-top:.3rem;font-size:var(--fs-sm);color:var(--ink-2);
  line-height:1.7;word-break:keep-all}

/* 넷을 카드로. 이름이 크고, 한 줄과 힌트가 작다. */
.cqcards{display:flex;flex-direction:column;gap:.7rem;margin:1.6rem 0 0}
.cqcard{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  min-height:44px;padding:1rem 1.1rem;border-radius:12px;
  border:1.5px solid var(--rule-2);background:var(--surface);color:var(--ink);
  transition:border-color .13s,background .13s}
.cqcard:hover{border-color:var(--accent-line)}
.cqcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cqcard[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.cqcard .n{display:block;font-family:"Gowun Batang",serif;font-size:var(--fs-xl);
  line-height:1.35;color:var(--ink)}
.cqcard .l{display:block;margin-top:.35rem;font-size:var(--fs-md);color:var(--ink-2);
  line-height:1.8;word-break:keep-all}
.cqcard .h{display:block;margin-top:.35rem;font-size:var(--fs-sm);color:var(--ink-2);
  line-height:1.75;word-break:keep-all}
.cqask{margin:1.6rem 0 0;padding-top:1.2rem;border-top:1px solid var(--rule)}

/* ══ 체질 캐릭터 (2026-09-25) ══
   그림은 336×672(1:2)라 높이로 크기를 정한다. 글자는 줄이지 않는다 – 카드는 글이 길어지면 같이 길어진다. */
.charimg{display:block;max-width:100%;width:auto;height:auto}
/* 결과 · 이미 정한 결 위의 한 덩어리 */
.cqchar{margin:1.2rem 0 0;text-align:center}
.cqchar .charimg.big{height:240px;width:auto;margin:0 auto}
.cqchar .chname{margin:.7rem 0 0;font-size:var(--fs-lg);line-height:1.4;color:var(--ink)}
.cqchar .cht{margin:.4rem auto 0;max-width:30rem;font-size:var(--fs-md);line-height:1.8;color:var(--ink-2);word-break:keep-all}
/* 고르기(cqDrawPick) 카드 – 왼쪽 작은 그림 */
.cqcard.hasimg{display:flex;align-items:center;gap:1rem}
.cqcard .charimg.sm{flex:0 0 auto;height:88px;width:auto}
.cqcard .cqtxt{display:block;min-width:0;flex:1}
.cqcard .n .chk,.chcard .chk{padding:.05rem .6rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);
  font-family:inherit;font-style:normal;font-size:var(--fs-sm);line-height:1.6}
.cqcard .nrow{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem}
.cqcard .nrow .chk{flex:0 0 auto}
/* 체질 문 첫 화면 */
#cq-doorhome .chh{font-family:"Gowun Batang",serif;font-size:var(--fs-2xl);line-height:1.35;margin:.4rem 0 0;color:var(--ink);word-break:keep-all}
#cq-doorhome .chlead{margin:.6rem 0 0;font-size:var(--fs-md);line-height:1.7;color:var(--ink-2);word-break:keep-all}
.chsx{display:flex;justify-content:center;margin:1.1rem 0 .2rem}
/* 09-25 대표님 – 남자 · 여자 바꾸기를 잘 보이게. 넓게 · 누른 쪽은 채워서 */
#cq-doorhome .chsx button{min-width:96px;min-height:48px;font-size:var(--fs-base);border-color:var(--accent)}
#cq-doorhome .chsx button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
/* 자세히 보기 */
#chdetail{text-align:center}
#chdetail .chback{display:inline-block;min-height:44px;margin:0 0 .4rem;padding:0 .2rem;background:none;border:none;
  font:inherit;font-size:var(--fs-md);color:var(--accent-ink);cursor:pointer}
#chdetail .charimg.big{display:block;width:auto;height:300px;max-width:100%;margin:.2rem auto 0}
#chdetail .chname{margin:.6rem 0 0;font-family:"Gowun Batang",serif;font-size:var(--fs-xl)}
#chdetail .chname .chk{display:inline-block;vertical-align:middle;margin-left:.3rem;padding:.05rem .6rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-family:inherit;font-size:var(--fs-sm);line-height:1.6}
#chdetail .cht{margin:.6rem auto 0;max-width:30rem;font-size:var(--fs-base);line-height:1.8;color:var(--ink);word-break:keep-all}
#chdetail .chmore{margin:1.2rem auto 0;max-width:30rem;padding:1rem 1.1rem;text-align:left;background:var(--surface);
  border:1px solid var(--rule);border-radius:12px}
#chdetail .chmore dt{margin:.7rem 0 0;font-size:var(--fs-sm);font-weight:700;color:var(--accent-ink)}
#chdetail .chmore dt:first-child{margin-top:0}
#chdetail .chmore dd{margin:.2rem 0 0;font-size:var(--fs-md);line-height:1.75;color:var(--ink-2);word-break:keep-all}
#chdetail .note{margin:1.1rem 0 0;font-size:var(--fs-md);line-height:1.7;color:var(--ink-2)}
#chdetail .btn{display:block;width:100%;margin-top:.8rem;text-align:center}
.chsx button{min-width:44px;min-height:44px;padding:0 1rem;border:1.5px solid var(--rule-2);background:var(--surface);
  color:var(--ink-2);font:inherit;font-size:var(--fs-md);cursor:pointer}
.chsx button:first-child{border-radius:10px 0 0 10px}
.chsx button:last-child{border-radius:0 10px 10px 0;border-left:0}
.chsx button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.chsx button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .6rem;margin:.6rem 0 0}
.chcard{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:.5rem .3rem .9rem;
  background:none;border:none;border-radius:12px;font:inherit;color:var(--ink);cursor:pointer}
.chcard:hover{background:var(--surface)}
.chcard:active{transform:translateY(1px)}
.chcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chcard .charimg{width:70%;height:auto;aspect-ratio:1/2}
.chcard .chn{margin-top:.5rem;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);line-height:1.35;color:var(--ink)}
.chcard .chk{margin-top:.35rem}
.chcard .cht{margin-top:.55rem;font-size:var(--fs-md);line-height:1.75;color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere}
#cq-doorhome .btn{display:block;width:100%;margin-top:1.4rem;text-align:center}
#cq-doorhome .note{margin:1.1rem 0 0;text-align:center;font-size:var(--fs-md);line-height:1.7;color:var(--ink-2)}
.cqask .acts{flex-direction:column;align-items:stretch}

/* 문진 – 한 화면에 한 문항. 답 단추는 큼직하게 세로로. */
/* 2026-09-19 (9) – 「몇 쪽」 표시를 위 머리(.prog) 바로 아래에 붙인다. --progh · --qstickh 는
   맨 위 :root 참고(JS 가 실제 높이로 채운다). */
.qstick{position:sticky;top:var(--progh);z-index:15;background:var(--bg);padding:1px 0 .3rem}
.cqprog{margin:1.6rem 0 .5rem;font-family:"Gowun Batang",serif;
  font-size:var(--fs-sm);letter-spacing:.02em;color:var(--ink-2)}
/* ★ 2026-09-12 – 문진(스물다섯)·성격검사(40·120)를 미는 동안 위 진행바는 한 칸에 머문다.
     글자만으로는 얼마나 남았는지 손에 안 잡힌다. 글자 아래 가는 막대를 더해 답할 때마다 차오르게 한다. */
.qbar{height:6px;max-width:34rem;margin:0 0 1.1rem;border-radius:99px;background:var(--rule);overflow:hidden}
.qbar i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width .25s ease}
/* 옛 한 문항짜리 선택지(.cqopts/.cqopt)는 걷어냈다 – 이제 .qpage 한 벌만 쓴다. */
/* 왜 #030 */
/* 2026-09-19 (10) – 쪽을 넘기면 이 자리로 스크롤한다(scroll-margin-top). 위 두 겹 sticky
   (.prog · .qstick) 에 가리지 않고 첫 문항이 그 바로 아래에 오게. */
.qpage{margin:1.4rem 0 0;scroll-margin-top:calc(var(--progh) + var(--qstickh))}
.qitem{padding:1.3rem 0 1.5rem;border-top:1px solid var(--line)}
.qitem:first-child{border-top:0;padding-top:.2rem}
/* 2026-09-19 – 단추가 질문보다 강조돼 보여 질문을 굵게. 글자 크기는 그대로(노안). */
.qq{display:flex;gap:.7rem;margin:0 0 1rem;font-family:"Gowun Batang",serif;font-weight:600;
  font-size:var(--fs-lg);line-height:1.55;color:var(--ink);word-break:keep-all;max-width:34rem}
.qno{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:1.9rem;height:1.9rem;margin-top:.15rem;border-radius:99px;
  background:var(--rule);color:var(--ink-2);font-family:inherit;font-size:var(--fs-md);font-weight:600}
.qitem.done .qno{background:var(--accent-soft);color:var(--accent-ink)}
.qitem.miss{background:var(--warn-soft);border-radius:12px;
  padding-left:.8rem;padding-right:.8rem;margin:0 -.8rem}
.qitem.miss .qno{background:var(--warn);color:var(--surface)}
/* ── 셋 단 – 가로 세 칸 ── */
.qrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:34rem}
/* 2026-09-19 – 단추가 질문보다 강조돼 보였다. 여백·테두리만 줄인다(누르는 높이 44px는 지킨다). */
.qpick{font-family:inherit;cursor:pointer;min-height:48px;padding:.6rem .5rem;border-radius:12px;
  font-size:var(--fs-md);line-height:1.35;word-break:keep-all;
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);
  transition:border-color .13s,background .13s}
.qpick:hover{border-color:var(--accent-line)}
.qpick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qpick[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent-ink);font-weight:600}
/* ── 다섯 단 – 동그라미 다섯에 양 끝 말 ── */
.qdots{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;align-items:center;
  justify-items:center;max-width:26rem}
.qdot{cursor:pointer;border-radius:99px;background:var(--surface);
  border:2.5px solid var(--rule-2);transition:border-color .13s,background .13s,transform .1s;
  width:52px;height:52px;padding:0}
.qdot.s1,.qdot.s3{width:44px;height:44px}
.qdot.s2{width:38px;height:38px}
.qdot:hover{border-color:var(--accent-line)}
.qdot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.qdot[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);transform:scale(1.06)}
.qends{display:flex;justify-content:space-between;gap:1rem;margin:.55rem 0 0;
  max-width:26rem;font-size:var(--fs-base);line-height:1.4;color:var(--ink-2)}
.qends span{word-break:keep-all}
.qends span:last-child{text-align:right}
/* ── 쪽 아래 ── */
.qacts{margin-top:1.6rem}
/* 정하신 것 2026-09-17 – 한 쪽 다섯 문항 판의 1rem · .95rem 도 단계로 옮겼다(1rem 16px → base 17.6px · .95rem 15.2px → md 15.36px). */
.qleft{margin:.7rem 0 0;font-size:var(--fs-base);color:var(--ink-2)}
.cqwhy{margin:.9rem 0 0;font-size:var(--fs-base);line-height:1.7;color:var(--ink-2);word-break:keep-all;max-width:34rem}
.cqwhy b{color:var(--ink)}
#cq-done h3{font-family:"Gowun Batang",serif;font-size:var(--fs-2xl);line-height:1.35;
  margin:1.8rem 0 0;color:var(--ink);word-break:keep-all}
/* 왜 #031 */
/* 결 정하기 끝 – 다음으로 이어 주는 한 줄. 글자는 본문 크기 그대로 둔다. */
/* 결을 정하신 직후 펴는 그 결의 풀이. 사주 풀이와 같은 옷을 입힌다 – 새 디자인을 만들지 않는다. */
.gyintro{margin:1.6rem 0 0}
.gyih{font-family:"Gowun Batang",serif;font-size:var(--fs-xl);line-height:1.4;
 margin:1.4rem 0 0;color:var(--ink);word-break:keep-all}
.gyi{margin:1.5rem 0 0;padding:1.1rem 1.2rem;background:var(--card);
 border:1px solid var(--line);border-radius:12px}
.gyi h4{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);line-height:1.45;
 margin:0 0 .7rem;color:var(--ink);word-break:keep-all}
.gyi p{margin:.7rem 0 0;line-height:1.78;word-break:keep-all;overflow-wrap:break-word}
.gyi p:first-of-type{margin-top:0}
.gyi .step{margin:.9rem 0 0;padding:.75rem .95rem;background:var(--surface-2);
 border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
 line-height:1.72;color:var(--ink);word-break:keep-all}
/* 결 일곱 편을 다 읽으신 뒤, 유료가 무엇을 더 하는지 말하는 자리.
   잠금이 아니라 이음이라 상자를 두르지 않고 선 하나로만 뗀다. */
/* 몸과 때가 어긋나는 자리 – 결 풀이와 유료 안내 사이.
   상자를 두르지 않는다. 앞의 일곱 편과 같은 흐름에서 이어지는 말이라야
   「그런데 사주는 다른 말을 합니다」가 선다. 딱지 한 줄로만 구분한다. */
.clashfree{margin:1.8rem 0 0}
.clashtag{font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em;
 color:var(--accent-ink);margin:1.4rem 0 .5rem}
.clashh{font-family:"Gowun Batang",serif;font-size:var(--fs-xl);line-height:1.4;
 margin:0 0 .9rem;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.clashfree p{margin:.8rem 0 0;font-size:var(--fs-base);line-height:1.9;
 word-break:keep-all;overflow-wrap:break-word}
.clashfree .gist{font-family:"Gowun Batang",serif;font-weight:700;color:var(--ink)}
.clashlock{margin:1.2rem 0 0;padding-left:.9rem;border-left:2px solid var(--accent-line);
 font-size:var(--fs-md);line-height:1.75;color:var(--ink-2);word-break:keep-all}
.clashlock b{color:var(--ink)}

/* ══ 무료 운세 다섯 갈래 (#fgate) ══
   여덟 글자에서 바로 나오는 것만 그린다. 칩으로 들어오신 갈래는 맨 위에 오고
   왼쪽에 굵은 선이 붙는다 – 그 갈래를 보러 오셨다는 표시다.
   「전체 리포트에서」 줄은 잠금이 아니라 안내다. 겁주지 않고 무엇이 더 있는지만 말한다. */
/* ★ 2026-09-29 – s2 미리보기는 제목 + 한 줄뿐이라 두 칸 격자로 좁힌다(s2 줄이기 2차). */
.fglist{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:1.1rem}
.fglist .fgi{width:100%;box-sizing:border-box;min-width:0}
.fgt{display:block;font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;line-height:1.45;color:var(--ink);margin:0 0 .3rem;word-break:keep-all;overflow-wrap:break-word}
.fgs{display:block;font-size:var(--fs-base);line-height:1.75;color:var(--ink-2);word-break:keep-all;overflow-wrap:break-word}
.fgtag{margin:.2rem 0 .3rem;font-family:"Gowun Batang",serif;font-weight:700;font-size:var(--fs-sm);color:var(--accent-ink);word-break:keep-all}
.fgw{margin:.6rem 0 0;font-size:var(--fs-base);line-height:1.75;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.fgw b{font-weight:700}
.fgwk{display:inline-block;margin-right:.45rem;padding:.05rem .45rem;border:1px solid var(--accent-line);border-radius:999px;font-family:"Gowun Batang",serif;font-size:var(--fs-sm);color:var(--accent-ink)}
.fgi{margin:0;padding:.85rem .9rem;background:var(--surface);
 border:1px solid var(--rule);border-radius:10px}
.fgi.first{border-color:var(--accent-line);background:var(--accent-soft);
 border-left:3px solid var(--accent)}
.fgn{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin:0 0 .4rem}
.fgn b{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;
 color:var(--ink);word-break:keep-all}
.fgn i{font-style:normal;font-size:var(--fs-sm);color:var(--muted);word-break:keep-all}
.fgfirst{font-style:normal;font-family:"Gowun Batang",serif;font-size:var(--fs-sm);
 letter-spacing:.04em;color:var(--accent-ink);border:1px solid var(--accent-line);
 border-radius:999px;padding:.1rem .4rem;margin-left:auto;flex:none;white-space:nowrap}
.fgh{font-family:"Gowun Batang",serif;font-size:var(--fs-md);font-weight:700;
 line-height:1.5;margin:0;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.fgmore{margin:1rem 0 0;padding-top:.8rem;border-top:1px solid var(--rule);
 font-size:var(--fs-md);line-height:1.75;color:var(--ink-2);word-break:keep-all}
/* 궁합으로 들어오지 않으신 분께는 접어서 둔다. 있는 basis 모양을 그대로 쓴다. */
.pairfold{margin:1.4rem 0 0}
.pairfold>summary{cursor:pointer;list-style:none;padding:.8rem 0}
.pairfold>summary::-webkit-details-marker{display:none}
.pairfold>summary .btl{font-family:"Gowun Batang",serif;font-size:var(--fs-lg);
 color:var(--ink);word-break:keep-all}
.pairfold>summary .btl::before{content:"＋ ";color:var(--muted);font-family:inherit}
.pairfold[open]>summary .btl::before{content:"－ "}
.pairfold>.bdy{padding:.2rem 0 0}

/* 첫 화면 칩 아래 한 줄. 어느 칩 안에 무엇이 들어 있는지 밝힌다. */
.gatehint{margin:-.9rem 0 1.4rem;font-size:var(--fs-md);line-height:1.75;
 color:var(--ink-2);word-break:keep-all;max-width:32rem}
.gatehint b{color:var(--ink)}

.cqnext{margin:1.4rem 0 0;font-size:var(--fs-lg);line-height:1.7;color:var(--ink-2);word-break:keep-all;max-width:34rem}
.cqnext b{color:var(--ink)}

/* ══ 체질 문(/?g=gyeol)으로 오신 분의 결과 밑 – 글 · 한 줄 · 단추 둘 ══ */
#cq-door .doorlinks{margin:1.8rem 0 0}
#cq-door .doorlinks .tag{margin:0 0 .5rem;font-size:var(--fs-sm);letter-spacing:.06em;color:var(--accent-ink)}
#cq-door .doorlinks ul{list-style:none;margin:0;padding:0}
#cq-door .doorlinks li{margin:0 0 .6rem}
#cq-door .doorlinks a{font-size:var(--fs-lg);line-height:1.6;color:var(--accent-ink);word-break:keep-all}
.cqinvite{margin:1.4rem 0 0;font-size:var(--fs-lg);line-height:1.7;color:var(--ink);word-break:keep-all;max-width:34rem}
#cq-door .acts{flex-direction:column;align-items:stretch;margin-top:1rem}
#cq-door .note{margin:.8rem 0 0;font-size:var(--fs-md);line-height:1.7;color:var(--ink-2);text-align:center}

/* ══ 왜 축이 셋인가 ══
   세 축 그림 바로 위. 이 사이트가 하려는 일을 적은 자리다.
   ★ 글자를 줄이지 않는다 – 여기가 제일 먼저, 제일 오래 읽히는 대목이다. */
.whywe{margin:2.2rem auto 0;max-width:32rem;padding:1.3rem 1.2rem;
  border-left:2.5px solid var(--accent);background:var(--accent-soft);
  border-radius:0 12px 12px 0;word-break:keep-all;overflow-wrap:break-word}
.whywe p{margin:0 0 .85rem;font-size:var(--fs-base);line-height:1.95;color:var(--ink-2)}
.whywe p:last-child{margin:0}
/* 세 축은 줄로 세운다 – 한 문단에 뭉치면 셋이라는 것이 안 보인다. */
.whywe .three b{display:block;color:var(--ink)}
.whywe .three .u{color:var(--ink-2)}
.whywe .three .u:first-of-type{margin-top:.5rem}
.whywe b{color:var(--ink)}

/* ══ 세 축 그림 ══
   예전의 .twoaxis 문단(두 축)을 이 그림이 대신한다.
   ★ SVG 안의 px 는 viewBox 좌표라 화면 px 가 아니다. 글꼴 차수에서
     var(--fs-*) 로 바꾸지 말 것. 바꾸면 그림이 뒤틀린다. */
/* 유료에서 성격까지 채우시면 세 번째 화살표를 실선으로 바꾼다 */

/* ── 양력·음력 ─────────────────────────────────────────────────────────
   나이 드신 분들이 보십니다. 라디오 점 대신 누르는 칸으로 만들고,
   지금 무엇이 눌려 있는지가 멀리서도 보이게 색을 채웁니다. */
.cal{display:flex;gap:.5rem;margin:0 0 .7rem}
/* 상대를 고르는 줄만 접히게 둔다. 다섯 칸이고 「마음에 둔 사람」처럼 긴 것이 있어서
   한 줄에 세우면 320px 에서 가로로 밀린다.
   .cal 전체를 건드리지 않는 이유는 양력/음력처럼 둘뿐인 자리는 접힐 일이 없어서다. */
#gatewho{flex-wrap:wrap}
/* 짝 초대 관계도 여섯 칸이라 접는다 (2026-09-16) */
#pairrel{flex-wrap:wrap}
.cal .calopt{flex:0 0 auto;min-width:5.4rem;text-align:center;cursor:pointer;
  padding:.6rem 1.1rem;border:1.5px solid var(--rule-2);border-radius:8px;
  font-size:var(--fs-base);color:var(--ink-2);background:transparent;
  transition:background .12s,border-color .12s,color .12s}
.cal .calopt input{position:absolute;opacity:0;width:0;height:0}
/* 왜 #032 */
.cal .calopt:has(input:checked),
.cal .calopt.on{background:var(--accent-soft);border-color:var(--accent-ink);
  color:var(--accent-ink);font-weight:600}
.cal .calopt:hover{border-color:var(--accent-ink)}
.cal .calopt input:focus-visible + span{outline:2px solid var(--accent-ink);outline-offset:4px}

/* 윤달 선택 – 스무 명 중 한 명쯤만 보시는 화면이라, 볼 때만은 확실히 보여야 한다. */
.leapask{margin:.9rem 0 0;padding:1rem 1.1rem;border:1.5px solid var(--accent-ink);
  border-radius:10px;background:var(--accent-soft)}
.leapask .lq{margin:0 0 .8rem;font-size:var(--fs-base);line-height:1.8;color:var(--ink-2);
  word-break:keep-all;overflow-wrap:break-word}
.leapask .lq b{color:var(--ink)}
.lopts{display:flex;gap:.6rem;flex-wrap:wrap}
.lopt{flex:1 1 12rem;text-align:left;cursor:pointer;padding:.75rem .9rem;
  border:1.5px solid var(--rule-2);border-radius:9px;background:var(--surface);
  transition:border-color .12s,background .12s}
.lopt b{display:block;font-size:var(--fs-base);font-weight:600;color:var(--ink-2);white-space:nowrap}
.lopt em{display:block;margin-top:.2rem;font-style:normal;font-size:var(--fs-md);color:var(--muted)}
.lopt:hover{border-color:var(--accent-ink)}
.lopt.on{border-color:var(--accent-ink);background:var(--surface-2)}
.lopt.on b{color:var(--accent-ink)}

.calhint{margin:.6rem 0 0;font-size:var(--fs-md);line-height:1.75;color:var(--muted);
  word-break:keep-all;overflow-wrap:break-word}
.calerr{margin:.6rem 0 0;font-size:var(--fs-md);line-height:1.75;color:#B3261E;font-weight:500;
  word-break:keep-all;overflow-wrap:break-word}
:root:not([data-theme=light]) .calerr{color:#F2B8B5}
[data-theme=dark] .calerr{color:#F2B8B5}

/* 환산 결과 – s2 제목 아래. 옮겨서 계산했다는 사실을 감추지 않는다. */
.conv{margin:.4rem 0 1.1rem;font-size:var(--fs-base);line-height:1.8;color:var(--muted);
  word-break:keep-all;overflow-wrap:break-word}
.conv b{color:var(--ink-2);font-weight:600}

/* 예시 두 개를 한 상자 안에서 가르는 얇은 선. 화면 전체를 가르는 .hr 보다 좁게. */
.hr.sm{margin:1.6rem 0;background:var(--rule-2);opacity:.6}

/* 게이트 안의 작은 물음. 한 화면에 둘을 놓으니 구분이 필요하다. */
.gate .cal{margin-bottom:.5rem}

.lnk{background:none;border:none;padding:0;font:inherit;cursor:pointer;
  color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.lnk:hover{opacity:.75}
/* .after 안의 링크에 색이 없어 브라우저 기본 파랑(#0000EE)으로 나오고 있었다.
   어두운 바탕에서 그 파랑은 읽기도 어렵고 우리 것으로도 안 보인다. .lnk 와 맞춘다. */
.after a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.after a:hover{opacity:.75}

/* 신체적 체질 – 화면 하나를 쓰던 것을 체크 한 줄로 줄였다.
   법이 요구하는 것은 "따로, 알고, 스스로" 지 화면 하나가 아니다.
   기본은 꺼둔다. 미리 켜두면 동의가 아니라 통보다. */
/* 위 줄 – 왼쪽은 몇 번째 화면인지, 오른쪽은 지금이 어느 절기인지.
   우리는 「달력이 아니라 절기로 끊는다」고 말하면서 정작 화면 어디에도
   지금이 어느 절기인지가 없었다. 한 줄을 새로 만들지 않고 이 줄에 얹는다. */
.eyebrow .term{margin-left:auto;font-family:"Gowun Batang",serif;font-size:var(--fs-sm);
  letter-spacing:.01em;text-transform:none;color:var(--muted);white-space:nowrap}
.eyebrow .term b{color:var(--accent-ink);font-weight:700}

/* ══ 검증 문항 ══ 판정이 맞았는지를 쌓는 자리.
   ★ section 안의 section 이라 base 의 section{display:none} 에 걸린다.
     되살리는 줄과, 되살린 뒤 [hidden] 을 다시 세우는 줄이 둘 다 있어야 한다.
     하나만 빼면 통째로 안 보이거나, 숨겨야 할 때 안 숨는다.
   ★ 버튼은 전부 같은 크기·같은 색이다. 「맞습니다」를 도드라지게 만들면
     그쪽으로 기운 답이 모이고, 쌓아도 못 쓰는 자료가 된다.
     그래서 셋을 한 클래스(.vopt)로만 그리고, 하나만 따로 꾸미는 규칙을 두지 않는다. */
.vsec{display:block;margin:2.2rem 0 0;padding:1.4rem 1.3rem;border:1px solid var(--rule);
  border-radius:12px;background:var(--surface-2)}
.vsec[hidden]{display:none}
.vsec .vq{font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;
  color:var(--ink);margin:0 0 .9rem}
.vsec .vq2{font-size:var(--fs-md);color:var(--ink-2);margin:1.1rem 0 .55rem}
.vopts{display:flex;flex-direction:column;gap:.5rem}
.vopts .vopt{width:100%;font-family:inherit;font-size:var(--fs-md);font-weight:500;cursor:pointer;
  padding:.72rem .8rem;border-radius:9px;text-align:center;white-space:nowrap;
  background:var(--surface);color:var(--ink-2);border:1px solid var(--rule-2);
  transition:border-color .15s,background .15s}
.vopts .vopt:hover{background:var(--sunken);border-color:var(--accent-line)}
.vopts .vopt.on{background:var(--accent-soft);border-color:var(--accent-ink);color:var(--accent-ink)}
.vopts .vopt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vopts .vopt:disabled{opacity:.45;cursor:default}
.vin{display:flex;gap:.5rem;flex-wrap:wrap}
.vin input{flex:1 1 14rem;font-family:inherit;font-size:var(--fs-md);padding:.72rem .8rem;
  border:1px solid var(--rule-2);border-radius:9px;background:var(--surface);color:var(--ink)}
.vin input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vnote{font-size:var(--fs-sm);color:var(--muted);margin:.5rem 0 0}
.vdone{font-size:var(--fs-md);color:var(--accent-ink);margin:.9rem 0 0}
.vsec .read{margin-top:1.1rem}
.hchk{display:flex;align-items:flex-start;gap:.8rem;cursor:pointer;
  margin:0 0 1rem;padding:.95rem 1.1rem;border:1.5px dashed var(--rule-2);border-radius:10px;
  transition:border-color .12s,background .12s}
.hchk:hover{border-color:var(--accent-ink)}
.hchk.on{border-style:solid;border-color:var(--accent-ink);background:var(--accent-soft)}
.hchk input{width:1.35rem;height:1.35rem;margin:.15rem 0 0;flex:0 0 auto;accent-color:var(--accent-ink)}
.hchk span{display:block}
.hchk b{display:block;font-size:var(--fs-base);font-weight:600;color:var(--ink);
  word-break:keep-all;overflow-wrap:break-word}
.hchk em{display:block;margin-top:.3rem;font-style:normal;font-size:var(--fs-md);line-height:1.75;
  color:var(--muted);word-break:keep-all;overflow-wrap:break-word}
.hchk a{color:var(--muted);text-underline-offset:3px}
#s3 .cal{margin:1.2rem 0 .5rem}

/* ══ 기다리는 동안 ══
   버튼 글자만 바뀌면 1~2초가 멈춘 것처럼 보인다. 화면 가운데를 덮고
   무엇을 하고 있는지 말로 알려드려야 기다림이 기다림으로 읽힌다.
   모달(60)보다 위에 둔다 – 로그인 중에도 이 위에 떠야 한다. */
.wait{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;
  background:rgba(251,250,248,.82);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* .modal 과 같은 이유 – display:flex 가 hidden 을 이겨버린다 */
.wait[hidden]{display:none}
.wbox{display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  max-width:22rem;padding:1.6rem 1.4rem;text-align:center}

.wdot{display:flex;gap:.45rem}
.wdot i{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);
  animation:wpulse 1.1s ease-in-out infinite}
.wdot i:nth-child(1){animation-delay:0s}
.wdot i:nth-child(2){animation-delay:.16s}
.wdot i:nth-child(3){animation-delay:.32s}
@keyframes wpulse{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:none}}

.wmsg{margin:0;font-size:var(--fs-base);line-height:1.9;color:var(--ink-2);
  word-break:keep-all;overflow-wrap:break-word}

/* ★ 2026-09-29 – s2 는 큰 도형 대신 한 줄 요약(사주 ● · 체질 ○ · 성격 ○)만 작게(s2 줄이기 2차). */
.fw3mini{margin:1.4rem 0 0;text-align:center;font-size:var(--fs-sm);color:var(--ink-2)}
.fw3mini span{display:inline-block;margin:0 .15rem;font-size:var(--fs-base);color:var(--muted)}
.fw3mini span.on{color:var(--accent-ink)}
.fw3mini em{display:block;margin-top:.3rem;font-style:normal;color:var(--muted);font-size:var(--fs-xs)}

/* 왜 #033 */
.fw3{margin:0 0 2rem}
.fw3-step{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;
  font-family:"Gowun Batang",serif;font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.fw3-step em{margin-left:auto;font-style:normal;font-size:var(--fs-sm);color:var(--muted);font-family:inherit}
.fw3-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--gold);flex:0 0 auto}
.fw3-box{background:#0d0c0a;border:1px solid rgba(243,242,242,.12);border-radius:16px;padding:1.6rem 1.2rem 1.1rem}
.fw3-box svg{max-width:22rem;margin:0 auto;display:block}
.fw3-say{margin:1rem 0 0;font-size:var(--fs-base);line-height:1.8;color:var(--ink)}
.fw3-say b{color:var(--accent-ink)}
.fw3-ex{margin:.95rem 0 0;padding:.95rem 1.1rem;border-left:3px solid var(--rule);
  background:var(--sunken);border-radius:0 10px 10px 0}
.fw3-ex.full{border-left-color:var(--gold);background:var(--accent-soft)}
.fw3-ex p{margin:0}
.fw3-ex-tag{font-size:var(--fs-sm);color:var(--muted);margin:0 0 .6rem}
.fw3-ex-prev{padding:0 0 .7rem;margin:0 0 .7rem;border-bottom:1px solid var(--rule);
  font-size:var(--fs-md);line-height:1.65;color:var(--muted)}
.fw3-ex-prev span{display:block;font-size:var(--fs-sm);margin:0 0 .15rem}
.fw3-ex-now{font-size:var(--fs-base);font-weight:600;line-height:1.7;color:var(--ink)}
.fw3-ex-note{font-size:var(--fs-sm);color:var(--muted);margin:.55rem 0 0}
@keyframes fwdash{to{stroke-dashoffset:-32}}
@keyframes fwdashring{to{stroke-dashoffset:-30}}
@keyframes fwripple{0%{transform:scale(.14);opacity:.9}70%{opacity:.25}100%{transform:scale(1.12);opacity:0}}
@keyframes fwbeat{0%,100%{transform:scale(1);opacity:.9}42%{transform:scale(1.34);opacity:1}}
@keyframes fwwave{0%,100%{opacity:.5;stroke-width:2}40%{opacity:1;stroke-width:3.4}}
.fw3-flow{animation:fwdash 1.1s linear infinite}
.fw3-ring{animation:fwdashring 1.6s linear infinite}
/* ★ 2026-09-25 (가) 세 칸 채우기 – s2, 체질부터 오신 분 */
.tri3{margin:1.6rem 0 0;padding:1.1rem 1rem 1.2rem;background:var(--surface);border:1px solid var(--accent-line);border-radius:14px}
.tri3-h{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin:0;font-family:"Gowun Batang",serif;
  font-size:var(--fs-base);font-weight:700;color:var(--ink)}
.tri3-h em{font-style:normal;font-family:inherit;font-size:var(--fs-md);color:var(--accent-ink)}
.tri3-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.9rem 0 0;padding:0;list-style:none}
.tri3-row li{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:.7rem .3rem .75rem;
  border:1.5px dashed var(--rule-2);border-radius:12px;color:var(--muted)}
.tri3-row li.on{border:1.5px solid var(--accent);background:var(--accent-soft);color:var(--ink)}
.tri3-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
  border:1.5px dashed var(--rule-2);font-size:1.3rem;font-weight:700;color:var(--accent-ink)}
.tri3-row li.on .tri3-ic{border:none;background:var(--accent);color:#fff}
.tri3-row .tri3-img{width:auto;height:64px;margin:-10px 0 -2px}
.tri3-row b{margin-top:.45rem;font-size:var(--fs-md);line-height:1.4;word-break:keep-all}
.tri3-row span:not(.tri3-ic){margin-top:.2rem;font-size:var(--fs-sm);line-height:1.5;word-break:keep-all}
.tri3-say{margin:.9rem 0 0;font-size:var(--fs-md);line-height:1.75;color:var(--ink-2);word-break:keep-all}

/* ★ 2026-09-26 체질 문 결과 – 읽을거리 셋 · 가족 공유 */
#cq-door .doorlinks{padding:1.1rem 1.1rem .6rem;background:var(--surface);border:1px solid var(--rule);border-radius:14px}
#cq-door .doorlinks .tag{font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;letter-spacing:0;color:var(--ink)}
.doorread{margin:.2rem 0 .9rem}
.doorread dt{margin:.9rem 0 0;font-size:var(--fs-sm);font-weight:700;color:var(--accent-ink)}
.doorread dd{margin:.25rem 0 0;font-size:var(--fs-md);line-height:1.75;color:var(--ink);word-break:keep-all}
.doorread .dbad{display:block;margin-top:.15rem;color:var(--ink-2)}
.doorread .dsm{display:block;margin-top:.3rem;font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}
#cq-door .doorlinks ul{border-top:1px solid var(--rule);padding-top:.7rem}
#cq-door .doorlinks a{font-size:var(--fs-md);text-decoration:none}
.doorshare{margin:2rem 0 0;padding:1.1rem 1rem;text-align:center;border:1.5px dashed var(--accent-line);border-radius:14px}
.doorshare .dsh{margin:0 0 .7rem;font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;color:var(--ink);word-break:keep-all}
.doorshare .btn{display:block;width:100%}
.doorshare .note{margin:.6rem 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.doorshare .note:empty{display:none}
/* 가족 결 맞혀 보기(2026-10-03) – 칩은 손가락으로 누르기 쉽게 높이 44px · 글자는 --fs-base 그대로 */
.fam{margin:0 0 1rem;text-align:left}
.famh{margin:0 0 .6rem;font-family:"Gowun Batang",serif;font-size:var(--fs-base);font-weight:700;color:var(--ink);text-align:center}
.famq{margin:.7rem 0 .4rem;font-size:var(--fs-md);color:var(--ink-2)}
.famchips{display:flex;flex-wrap:wrap;gap:.45rem}
.famchip{font:inherit;font-size:var(--fs-base);min-height:44px;padding:.4rem .9rem;border:1.5px solid var(--rule-2);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer}
.famchip[aria-pressed="true"]{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--bg)}
.cqfam{margin:0 0 1rem;padding:.8rem 1rem;border:1.5px solid var(--accent-line);border-radius:12px;
  font-size:var(--fs-base);line-height:1.7;color:var(--ink);text-align:center;word-break:keep-all}
.cqfam[hidden]{display:none}

/* ══ 2026-10-04 성격검사 무료 · 검사 포인트 · 성격 짧은 결과 ══ */
.ptsline{margin:.9rem 0 0;padding:.65rem .85rem;border:1px solid var(--accent-line);border-radius:.6rem;
  background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-md);line-height:1.6;font-weight:600}
.pqfree{margin:1.1rem 0 0;padding:.9rem 1rem;border:1px solid var(--rule);border-radius:.7rem}
.pqfree .pqf-t{margin:0;font-weight:700;color:var(--ink)}
.pqfree .pqf-d{margin:.35rem 0 0;color:var(--ink);font-size:var(--fs-md);line-height:1.7}
.pqfree .pqf-s{margin:.25rem 0 .7rem;color:var(--muted);font-size:var(--fs-md);line-height:1.6}
#pq-brief .bfrow{display:block}
#pq-brief .bfrow>summary{cursor:pointer;list-style:none;padding:.15rem 0}
#pq-brief .bfrow>summary::-webkit-details-marker{display:none}
#pq-brief .cends{display:flex;justify-content:space-between;gap:.5rem;margin:.2rem 0 0 5.4rem;
  font-size:var(--fs-xs);color:var(--muted);line-height:1.4}
#pq-brief .bfline{margin:.35rem 0 .3rem;padding:0 0 0 .1rem;color:var(--ink-2);font-size:var(--fs-md);line-height:1.7}
#pq-brief .pqb-sum{margin:1rem 0 0;color:var(--ink);line-height:1.75}
#pq-brief .pqb-rest{margin:.5rem 0 0;color:var(--ink-2);line-height:1.75}

/* ══ 2026-10-14 내 풀이 목록 · 궁합 보여 주기 스위치 ══ */
.minelist{list-style:none;margin:.8rem 0 0;padding:0}
.minelist li{border-bottom:1px solid var(--rule)}
.minelist button,.minelist li.pending span{display:block;width:100%;text-align:left;padding:.9rem .2rem;background:none;border:none;
  color:var(--ink);font:inherit;font-size:var(--fs-md);line-height:1.6;cursor:pointer}
.minelist li.pending span{color:var(--muted);cursor:default}
.pairshare{margin:1.2rem 0 0}
.pairshare .chk{display:flex;gap:.6rem;align-items:center;font-weight:600;color:var(--ink)}

/* ══ 2026-10-15 궁합 알림 · 사이 고르기 · 새 사이 · 알림 점 ══ */
.pairevts{margin:.9rem 0 0;padding:.65rem .85rem;border:1px solid var(--accent-line);border-radius:.6rem;background:var(--accent-soft);color:var(--accent-ink)}
.pairevts p{margin:.15rem 0;font-size:var(--fs-md);line-height:1.6;font-weight:600}
.pairpick{margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.pairpick .tag{width:100%;margin:0 0 .1rem}
.pairpick .pickb{position:relative;padding:.5rem .85rem;border:1.5px solid var(--rule-2);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-md);cursor:pointer}
.pairpick .pickb.on{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--bg)}
.ndot,.hasdot::after{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--warn,#c4553b)}
.pairpick .ndot{position:absolute;top:-.1rem;right:-.1rem}
#who-me.hasdot::after,#who-mine.hasdot::after{content:"";margin-left:.35rem;vertical-align:middle}
.pairnew{margin:1.2rem 0 0}