/* Only new functional pages. Original styles.css, layout, typography and colors remain authoritative. */
.narrow,.page{padding:24px 20px}.narrow h1,.page h1{font-size:26px;line-height:1.5;margin:12px 0 24px}.narrow h2{font-size:20px;margin:12px 0}.back{display:block;font-size:14px;margin:16px 0;color:var(--sub)}.eyebrow,.muted,.fine{font-size:14px;color:var(--sub);line-height:1.8}.fine{margin:14px 0}.panel{padding:20px 0;border-bottom:1px solid var(--line2);margin:16px 0}.summary-row{display:flex;justify-content:space-between;gap:12px;margin:16px 0;font-size:14px}.consent{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.8;margin:18px 0}.consent input{flex-shrink:0;width:18px;height:18px;margin-top:3px}.consent a,.fine a{text-decoration:underline}.notice{padding:14px;background:#f5f5f5;font-size:14px;line-height:1.8;margin:16px 0}.narrow .btn{display:inline-flex;justify-content:center;align-items:center;margin:12px 0}.narrow .full{width:100%}.narrow textarea{width:100%;border:1px solid var(--line2);border-radius:8px;padding:12px;font:inherit;margin:12px 0}.legal p,.legal li{font-size:14px;line-height:1.9}.legal h2{margin-top:28px}.legal ul{padding-left:20px}.order-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--line2)}.order-item h3{font-size:16px;margin:8px 0}.order-item p{font-size:14px;color:var(--sub)}.pill{font-size:14px;padding:5px 9px;border:1px solid var(--line2);border-radius:20px}.form textarea{width:100%;font:inherit;border:1.5px solid #d4d4d8;border-radius:10px;padding:12px}
/* 2026-10-15 사용자: 「텍스트박스가 잘 안 보인다」 — 테두리를 진하게, 안내 문구는 흐리게 */
.fld input::placeholder,.form textarea::placeholder{color:#a1a1aa}
.form textarea:focus{outline:none;border-color:#111}.report-section{padding:24px 20px;border-bottom:1px solid var(--line)}.report-section h2{font-size:20px;margin-bottom:14px}.report-section p{font-size:14px;line-height:1.85}.report-section .fine{font-size:14px}.basis{padding:14px;background:#f7f7f7;margin:12px 0}.basis>span{font-size:14px;color:var(--sub)}.report-toc{padding:20px;display:grid;gap:12px;font-size:14px}.report-actions{display:flex;gap:10px;padding:20px}.report-actions .btn{flex:1;text-align:center}.month-grid,.daeun-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.month-grid>div,.daeun-grid>div{padding:12px;background:#f7f7f7}.month-grid h3{font-size:15px}.month-grid small,.daeun-grid small,.daeun-grid span{display:block;color:var(--sub);font-size:14px}.report-section textarea{width:100%;padding:12px;margin:12px 0;font:inherit;border:1px solid var(--line2);border-radius:8px}.element-chips{display:flex;gap:8px;flex-wrap:wrap}#payment-error{color:#b42318;font-size:14px}
@media print{.hd,.bn,.drawer,.scrim,footer,.no-print{display:none!important}body,.app{background:white;max-width:none;width:100%}.report-section{break-inside:avoid}}


/* ---------- 주문서 맛보기 + 페이월 ---------- */
/* .pil 은 어두운 배경 위에서 쓰라고 만든 컴포넌트다(반투명 흰색). 주문서는 밝은
   페이지라 그대로 두면 보이지 않으므로, 결과 페이지의 .res-top 과 같은 네이비 카드에 얹는다. */
.preview-card{background:linear-gradient(160deg,#1b2b52,#2b4a86 55%,#0f172e);
  color:#fff;border-radius:14px;padding:22px 18px 20px;margin:20px 0 16px}
.preview-kicker{font-size:14px;opacity:.82;margin:0 0 4px}
.preview-card .pillars{margin-top:14px}
.preview-note{margin-top:14px;font-size:14px;opacity:.75;line-height:1.6}

.preview-el{margin:0 0 18px}
.preview-h{font-size:17px;margin:0 0 12px}

.locked{position:relative;border:1px solid var(--line);border-radius:14px;
  padding:22px 18px;background:#fbfaf7;margin-bottom:22px}
.locked-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#efece3;color:#8a7b57;margin-bottom:12px}
.locked-ico svg{width:20px;height:20px}
.locked-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.locked-list li{position:relative;padding-left:24px;font-size:14px;color:#5b5f68}
.locked-list li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;
  border-radius:50%;border:1.6px solid #c3b58d}
/* 목차는 또렷하게 두고 '아직 잠겨 있다'는 신호만 준다. 글자를 흐리면 무엇을
   사는지 읽지 못해 결제 이유가 오히려 약해진다. */
.quiet-refund{margin-top:28px;padding-top:18px;border-top:1px solid #e7e7e2}.quiet-refund>summary{cursor:pointer;font-size:14px;color:#8a8a82;list-style:none}.quiet-refund>summary::-webkit-details-marker{display:none}.quiet-refund>summary::before{content:"· "}.quiet-refund p,.quiet-refund label{font-size:14px;color:#6b6b63}.quiet-refund textarea{width:100%;margin:8px 0 12px;padding:12px;border-radius:10px;border:1.5px solid #d4d4d8;font-size:15px;line-height:1.6}.quiet-refund>summary::before{content:none}.quiet-refund>summary::after{content:" ›"}.quiet-refund[open]>summary{margin-bottom:10px}.quiet-refund label{display:block;margin-top:12px;font-weight:600}

/* ── 태어난 시각 휠 — 아이폰 알람 설정 같은 세로 롤링 ──────────────
   드롭다운은 두 번 눌러야 하고 목록이 화면을 덮는다. 생년월일 다음에 바로 돌리는
   동작이라 손가락이 머문 자리에서 끝나야 한다. 자바스크립트가 없으면 아래 select 가
   그대로 보이므로 이 블록은 hidden 이 풀린 뒤에만 쓰인다. */
.timewheel{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;
  height:180px;margin:4px 0 2px;border:1px solid var(--line,#e5e5ea);border-radius:14px;
  background:var(--card,#fff);overflow:hidden;touch-action:pan-y}
/* scroll-snap 은 일부러 쓰지 않는다. mandatory 는 굴러가는 내내 칸마다 붙잡아서
   손가락을 따라오지 못하고 뚝뚝 끊긴다. 멈춘 뒤 가까운 칸으로 붙이는 일은
   timewheel.js 가 ease-out 으로 직접 한다. */
.timewheel .tw-col{height:100%;flex:0 0 72px;overflow-y:scroll;
  scrollbar-width:none;-ms-overflow-style:none;outline:none;overscroll-behavior:contain;
  cursor:grab;user-select:none;-webkit-user-select:none}
.timewheel .tw-col.is-dragging{cursor:grabbing}
.timewheel .tw-col::-webkit-scrollbar{display:none}
.timewheel .tw-col:focus-visible{box-shadow:inset 0 0 0 2px #3c6cf0;border-radius:10px}
.timewheel ul{list-style:none;margin:0;padding:70px 0}      /* (180-40)/2 = 70 */
/* 투명도와 크기는 가운데에서 떨어진 거리만큼 timewheel.js 가 프레임마다 준다.
   전환을 걸면 그 계산과 싸워서 한 박자씩 늦게 따라온다 — 여기서는 걸지 않는다. */
.timewheel li{height:40px;line-height:40px;text-align:center;
  font:600 24px/40px 'Pretendard Variable',Pretendard,sans-serif;
  color:#1b1b1f;font-variant-numeric:tabular-nums;opacity:.26;
  transition:color .12s ease;will-change:opacity,transform}
.timewheel .tw-sep{font-size:14px;color:#8a8a93;align-self:center;padding-bottom:2px}
/* 시진 휠은 한 칸에 「자시 00:00~01:29」 가 다 들어가야 해서 넓고 글자가 작다. */
.timewheel.is-sijin .tw-col{flex:0 0 230px}
.timewheel.is-sijin li{font-size:19px;font-weight:500;white-space:nowrap}
.timewheel.is-sijin li b{font-weight:700;margin-right:6px}
/* 생년월일은 칼럼이 셋이라 더 좁게 가져가고, 네 자리인 연도만 넓게 쓴다. */
.timewheel:not(.is-sijin){gap:2px}
.timewheel:not(.is-sijin) .tw-col{flex:0 0 58px}
.timewheel:not(.is-sijin) .tw-col.is-year{flex:0 0 86px}
.timewheel:not(.is-sijin) li{font-size:21px}
.timewheel:not(.is-sijin) .tw-col.is-year li{font-size:22px}
@media (max-width:360px){
  .timewheel:not(.is-sijin) .tw-col{flex:0 0 50px}
  .timewheel:not(.is-sijin) .tw-col.is-year{flex:0 0 76px}
  .timewheel:not(.is-sijin) li{font-size:19px}
  .timewheel:not(.is-sijin) .tw-sep{font-size:14px}
}
/* 가운데 선택 밴드와 위아래 페이드. 클릭을 막지 않게 pointer-events 를 끈다. */
.timewheel .tw-mask{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(#fff 0%,rgba(255,255,255,.72) 24%,rgba(255,255,255,0) 38%,
    rgba(255,255,255,0) 62%,rgba(255,255,255,.72) 76%,#fff 100%)}
.timewheel .tw-mask::after{content:'';position:absolute;left:8px;right:8px;top:50%;height:40px;
  transform:translateY(-50%);border-radius:10px;background:rgba(120,120,128,.1)}
.timewheel.is-unknown{opacity:.4;pointer-events:none}
@media (prefers-reduced-motion:reduce){.timewheel li{transition:none}}
@media (prefers-color-scheme:dark){
  .timewheel{background:#1c1c20;border-color:#32323a}
  .timewheel li{color:#f2f2f5}
  .timewheel .tw-mask{background:linear-gradient(#1c1c20 0%,rgba(28,28,32,.72) 24%,rgba(28,28,32,0) 38%,
    rgba(28,28,32,0) 62%,rgba(28,28,32,.72) 76%,#1c1c20 100%)}
}

/* ── 생년월일 라벨 줄의 양력·음력 ──────────────────────────────────
   따로 떼어 두면 성별 밑에 놓인 또 하나의 항목처럼 보여서 고를 수 있다는 것을
   지나친다. 라벨과 한 줄에 두어 휠과 한 덩어리로 읽히게 한다. */
.fld-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.fld-head label{margin:0}
.seg-sm{flex:0 0 auto;gap:4px;padding:2px;border-radius:9px;background:#f1f1f4}
.seg-sm button{flex:0 0 auto;min-width:52px;padding:6px 12px;border:0;border-radius:7px;
  font-size:14px;font-weight:600;color:#86868e;background:transparent}
.seg-sm button[aria-pressed="true"]{background:#fff;color:#1b1b1f;font-weight:700;
  box-shadow:0 1px 2px #0000001f}
/* 윤달은 음력일 때만 열린다. 양력에는 윤달이 없다. */
.leap-row[hidden]{display:none}
.leap-row{margin-top:8px}
@media (prefers-color-scheme:dark){
  .seg-sm{background:#2a2a30}
  .seg-sm button{color:#8c8c96}
  .seg-sm button[aria-pressed="true"]{background:#45454e;color:#f2f2f5}
}
/* 궁합의 나 · 상대 구역 머리 (2026-10-14 사용자: 상대랑 나를 명확히) */
.who-head{display:flex;align-items:center;gap:8px;margin:8px 0 16px;font-size:21px;font-weight:800;letter-spacing:-.02em}.who-head::before{content:'';width:6px;height:22px;border-radius:3px;background:var(--brand-accent,#b29b6c)}.who-head.is-partner{margin-top:36px;padding-top:26px;border-top:2px solid var(--line2,#e5e7eb)}
/* 한 화면 한 질문 (이슈 #82) — static/js/one-question.js 가 form 에 .is-cards 를 붙일 때만 */
.is-cards .q-intro{display:none}
.is-cards .q-step{animation:q-in .28s ease both}
.is-cards .q-step:not(.is-on){position:absolute;left:-9999px;top:0;width:100%;visibility:hidden;animation:none}
@keyframes q-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.is-cards .q-step.is-shake{animation:q-shake .32s ease}
@keyframes q-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.q-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.q-top{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.q-back{display:inline-flex;align-items:center;gap:4px;padding:6px 8px 6px 2px;border:0;background:none;font-size:15px;font-weight:600;color:inherit;cursor:pointer}
.q-back .ic{width:20px;height:20px}
.q-progress{flex:1;height:6px;border-radius:99px;background:#ececef;overflow:hidden}
.q-progress i{display:block;height:100%;width:var(--q,10%);background:#111;border-radius:inherit;transition:width .3s ease}
.q-count{font-size:14px;font-weight:600;color:#71717a;font-variant-numeric:tabular-nums}
.q-guide{display:flex;align-items:flex-end;gap:12px;margin:6px 0 22px}
.q-face{flex:0 0 56px;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.q-bubble{position:relative;flex:1;padding:14px 16px;border-radius:18px 18px 18px 6px;background:#f4f4f5}
.q-bubble small{display:block;margin-bottom:4px;font-size:14px;font-weight:700;color:#8a6a24}
.q-say{margin:0;font-size:20px;font-weight:700;line-height:1.45;letter-spacing:-.02em;word-break:keep-all;outline:0}
.q-live{margin:0 0 10px;min-height:0;font-size:15px;font-weight:600;color:#c2302f}
.q-live:empty{display:none}
.q-step .q-live{margin:10px 0 0}
.q-quick{margin-top:14px}
.q-summary{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0 0 18px;padding:16px;border-radius:14px;background:#f4f4f5;font-size:15px}
.q-summary dt{color:#71717a;font-weight:600}
.q-summary dd{margin:0;font-weight:700;word-break:keep-all}