:root{
  --bg:#F0EDE5; --paper:#FBFAF5; --ink:#17161B; --muted:#6E6A60;
  --line:rgba(23,22,27,.14); --hard:#17161B;
  --earth:#F2B233; --water:#4A3AD6; --fire:#E8503C; --wood:#A9C86B; --metal:#E4E0D5;
  --wood-deep:#3F6B3A;
  /* --fire 위의 #FBFAF5는 실측 3.6:1로 작은 글씨에 AA 미달이다.
     경고·오류처럼 작은 본문이 들어가는 블록은 이 어두운 변형을 쓴다(5.8:1). */
  --fire-deep:#B23A29;
  /* 짝사랑 카드 배경. 흰 글씨로 6.4:1 */
  --rose-deep:#A62A5E;
  /* 경고·삭제 글자 전용. **--fire-deep를 글자색으로 쓰지 마라** — 그 색은 배경용이라
     (그 위 흰 글씨로 5.69:1) 어두운 바탕에 글자로 얹으면 다크에서 2.81:1까지 떨어진다.
     하필 값을 치르기 직전에 읽어야 하는 '답할 수 없는 질문' 목록이 그 색이었다.
     배경으로도 쓰이는 --fire-deep 자체를 다크에서 바꾸면 상품 카드 색까지 변한다. */
  --warn:#B23A29;
  /* '그래서 무엇을 하면 되는가' 그룹. 노랑·파랑·빨강·초록 어디와도 겹치지 않아야
     개인(노랑+파랑)·재회(초록)·짝사랑(빨강) 어느 리포트에서도 구분된다. 흰 글씨로 6.1:1 */
  --amethyst:#6A45B8;
  --r:26px;
  --sans:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --serif:"Apple SD Gothic Neo","AppleMyungjo","Noto Serif KR","Nanum Myeongjo","Batang",serif;
}
/* 다크 팔레트는 두 경로로 켜진다.
   · OS가 다크이고 사용자가 라이트를 고르지 않은 경우
   · 사용자가 다크를 명시적으로 고른 경우 (OS가 라이트여도 이쪽이 이긴다)
   두 블록의 토큰은 반드시 같아야 한다. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141317; --paper:#1E1D23; --ink:#EFEBE1; --muted:#9B968B;
  --line:rgba(239,235,225,.16); --hard:#EFEBE1; --metal:#3A3843;
  --warn:#FF7A66;   /* 다크에서 6.5~7.3:1 */
}}
:root[data-theme="dark"]{
  --bg:#141317; --paper:#1E1D23; --ink:#EFEBE1; --muted:#9B968B;
  --line:rgba(239,235,225,.16); --hard:#EFEBE1; --metal:#3A3843;
  --warn:#FF7A66;   /* 다크에서 6.5~7.3:1 */
}
*{box-sizing:border-box}
/* 안드로이드 크롬(갤럭시)은 터치한 요소 위에 파란 사각형을 덧칠한다.
   둥근 카드에서는 모서리를 무시한 네모가 번져 보여서, 눌렀다기보다 잘못 눌린 것처럼 읽힌다.
   끄되 피드백 자체를 없애지는 않는다 — 아래 :active가 대신 눌린 느낌을 만든다.
   껐는데 :active도 없으면 '눌렀는데 아무 반응이 없다'가 되어 두 번 누르게 된다. */
button,summary,a,label,select,input,textarea,details{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.62;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  /* 한국어는 낱말 사이에서만 줄을 바꾼다. 없으면 '배우자궁'이 '배우자'와 '궁'으로 갈린다. */
  word-break:keep-all;overflow-wrap:break-word}
.wrap{max-width:480px;margin:0 auto;padding:22px 16px 60px}
h1{font-size:38px;line-height:1.04;font-weight:900;letter-spacing:-.045em;margin:0;text-wrap:balance}
h2{font-size:25px;line-height:1.12;font-weight:900;letter-spacing:-.04em;margin:0;text-wrap:balance}
h3{font-size:17px;font-weight:800;letter-spacing:-.03em;margin:0}
p{margin:0}
s{opacity:.5}
/* 자간(.14em)은 모든 글자에 붙으므로 가운뎃점 양옆 공백까지 벌어져 점이 떠 보인다.
   word-spacing으로 **공백만** 되당긴다 — 글자 사이는 그대로 두고 점만 낱말에 붙는다.
   -.24em까지 가면 '커플 풀세트'처럼 낱말 안 공백도 붙어 한 낱말로 읽힌다. */
.lab{font-size:10.5px;font-weight:800;letter-spacing:.14em;word-spacing:-.18em;
  text-transform:uppercase;color:var(--muted)}
.sub{color:var(--muted);font-size:13.6px;margin-top:10px}
.note{color:var(--muted);font-size:11.5px;text-align:center;padding:16px 4px;line-height:1.55}
.hanja{font-family:var(--serif)}
.num{font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--line);margin:4px 0}

.screen{display:none;flex-direction:column;gap:14px}
.screen.on{display:flex}
.hero{padding:10px 4px 6px;display:flex;flex-direction:column;gap:8px}
.hero.small h1{font-size:30px}
/* 리포트 머리 — 왼쪽 '처음으로', 오른쪽 저장 버튼. 그 사이는 비워 둔다. */
.restop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.restop .back{margin-bottom:0}

/* 내려받기 두 버튼. 우열이 아니라 용도 차이라 같은 모양·같은 크기로 나란히 둔다.
   본문 위에 넓게 깔면 정작 읽으려는 것을 밀어내므로 우상단에 작게 놓는다. */
.dlrow{display:flex;gap:6px;flex:none;align-items:center}
/* 작고 얇게 — 단추를 도우는 말이지 그 자체가 눌리는 것이 아니다.
   자리가 좁아지면 가장 먼저 접는다(단추는 남고 설명만 사라진다). */
.dlrow-t{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:-.01em;
  white-space:nowrap;margin-right:3px}
@media (max-width:400px){ .dlrow-t{display:none} }
/* display:flex가 hidden 속성을 이긴다. 명시적으로 눌러 준다. */
.dlrow[hidden]{display:none}
.dlbtn{border:1.5px solid var(--line);background:var(--paper);color:inherit;
  border-radius:99px;padding:0 13px;font:inherit;font-size:11.5px;font-weight:800;
  letter-spacing:-.01em;cursor:pointer;min-height:34px;min-width:62px;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,border-color .15s ease}
.dlbtn:hover{border-color:var(--hard)}
.dlbtn:active{transform:scale(.985)}
.dlbtn:disabled{opacity:.55;cursor:default}
.dlbtn:focus-visible{outline:2.5px solid var(--hard);outline-offset:2px}

/* 서비스 이름. 첫 화면 맨 위에서 이것부터 읽혀야 한다 — 헤드라인보다 먼저 온다. */
.brand{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.brandmark{font-size:26px;line-height:1}
.brandname{font-size:23px;font-weight:900;letter-spacing:-.05em}
/* 터치 타겟은 44px 아래로 내려가지 않게 한다(기존 32~33px).
   같은 파일의 .cta는 60px, 폼 select는 45px인데 내비게이션만 절반이었다. */
/* 뒤로가기 — 글자 없이 화살표만. 어디로 가는지는 aria-label이 들고 있다. */
.back{align-self:flex-start;display:grid;place-items:center;
  border:1.5px solid var(--line);background:transparent;color:inherit;
  border-radius:99px;width:38px;height:38px;padding:0;font:inherit;font-size:17px;font-weight:800;
  cursor:pointer;margin-bottom:6px}
.back:hover{border-color:var(--hard)}
.back:active{background:var(--hard);color:var(--bg)}

/* ── 상품 ── */
/* 바닥글 · 약관 문서 */
.foot{margin-top:26px;padding-top:18px;border-top:1.5px solid var(--line);
  display:flex;flex-direction:column;gap:10px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px}
/* <button>이었다가 진짜 <a>가 됐다(2026-09-06). 생김새는 그대로 둔다 —
   바뀐 것은 스크립트 없이도 열린다는 사실이지 모양이 아니다. */
.foot-links a,.foot-links button{background:none;border:0;padding:0;color:var(--muted);
  font:inherit;font-size:12.8px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.foot-links a:hover,.foot-links button:hover{color:var(--ink)}
.foot p{font-size:11.8px;line-height:1.6;color:var(--muted)}
/* 사업자 정보는 법정 표기다. 작더라도 읽히게 둔다 — 흐리게 만들지 않는다. */
.foot .biz{font-size:11.4px;line-height:1.7;padding-bottom:2px}
/* 전화·메일은 누를 수 있다는 것만 알리면 된다. 사업자 정보 덩어리 안에서
   이 두 줄만 색이 튀면 광고처럼 보이므로, 색은 그대로 두고 밑줄로만 표시한다. */
.foot .biz a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.doc{display:flex;flex-direction:column;gap:11px;font-size:14px;line-height:1.68}
.doc h3{font-size:15.5px;font-weight:800;letter-spacing:-.03em;margin-top:9px}
.doc h3:first-child{margin-top:0}
.doc ul{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:5px}
.doc .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.doc table{border-collapse:collapse;width:100%;font-size:13px;min-width:300px}
.doc th,.doc td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.doc th{background:var(--metal);font-weight:800;white-space:nowrap}


/* 첫 화면 로그인·회원가입 */
.hauth{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);
  padding:18px 18px 16px;margin:14px 0 18px;display:flex;flex-direction:column;gap:9px}
.hauth-t{font-size:16px;font-weight:800;letter-spacing:-.03em}
.hauth-s{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.hauth-a{display:flex;gap:8px;margin-top:3px}
/* 두 단추. 자리가 있으면 나란히, 좁으면 쌓는다.
   '회원가입하고 샘플 리포트 보러가기'는 길어서(≈261px) 로그인(76px)과 나란히 서려면
   409px쯤 필요하다 — 폭 420px 아래에서만 쌓는다.
   **가로모드(눕힌 폰)에서 세로로 쌓으면 안 된다.** 그때는 화면 높이가 390px 안팎인데
   이 박스만 240px을 먹어 상품 카드가 통째로 화면 밖으로 밀린다. */
/* 첫 단추(긴 문구)가 필요한 만큼 갖고, 로그인은 제 글자만큼만 차지한다.
   둘 다 flex:1이면 반씩 나눠 가져 긴 문구가 두 줄로 접힌다 — 실제로 접혔다. */
.hauth-a.col .tb:first-child{flex:1 1 auto;white-space:nowrap}
/* 로그인은 제 글자만큼만 갖되, 너무 좁으면 단추로 안 보인다(40px까지 쪼그라들었다). */
.hauth-a.col .tb:last-child{flex:0 0 auto;min-width:96px}
.hauth-a.col .tb{justify-content:center}
@media (max-width:420px){
  .hauth-a.col{flex-direction:column}
  .hauth-a.col .tb{width:100%}
}
/* 눕힌 화면 — 세로가 귀하다. 여백과 줄 간격을 눌러 상품이 화면 안에 남게 한다. */
@media (max-height:520px) and (orientation:landscape){
  .hauth{padding:13px 16px 12px;margin:10px 0 12px;gap:6px}
  .hauth-t{font-size:15px}
  .hauth-s{font-size:12.5px;line-height:1.45}
  .hauth-fine{display:none}
}
/* 글 속에 섞이는 링크. button은 브라우저 기본 모양(회색 알약)을 갖고 태어나므로
   글자처럼 보이게 하려면 그 기본을 하나하나 벗겨야 한다. */
.hauth-link{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--ink);
  font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hauth-link:hover{opacity:.75}
.hauth-fine{margin-top:9px;font-size:12px;opacity:.85}
/* 샘플 안내. 로그인 안내보다 먼저 읽히도록 테두리로 떼어 놓는다 —
   '사기 전에 볼 수 있다'가 이 화면에서 가장 힘센 말이다. */
.hauth-sample{margin:2px 0 4px;padding:11px 13px;border-radius:12px;
  background:rgba(242,178,51,.08);border:1.5px solid rgba(242,178,51,.3)}
/* 로그인한 사람에게 가는 한 줄. 카드가 아니라 줄이라 상품을 밀어내지 않는다. */
.hsample{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:10px 14px;margin:0 0 2px;
  background:transparent;border:1.5px dashed var(--line);border-radius:13px;
  font:inherit;font-size:12.5px;text-align:left;color:var(--muted);cursor:pointer}
.hsample:hover{border-color:var(--hard);color:var(--ink)}
.hsample b{color:var(--ink);font-weight:800}
/* 제목과 설명을 줄로 나눈다. <small>은 인라인이라 그냥 두면 제목 뒤에 붙어
   '샘플 리포트 보러가기 가상 인물 한 사람의…'가 한 줄로 이어져 읽힌다. */
.hsample .hs-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hsample .hs-t small{font-size:11.5px;color:var(--muted);font-weight:400}
.hs-go{flex:none;font-weight:800;color:var(--ink);white-space:nowrap;font-size:11.5px}
@media(max-width:430px){.hsample{flex-direction:column;align-items:flex-start;gap:3px}}
.hauth-a .tb{flex:1;justify-content:center;padding:11px 0;font-size:14.5px}
.hauth.in{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
.hauth.in .hauth-t{flex:1;min-width:140px;font-size:15px}
.hauth.in .hauth-p{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.hauth.in .hauth-a{width:100%;margin-top:2px}

.prods{display:flex;flex-direction:column;gap:12px}
/* padding·display는 여기 적지 않는다 — 카드가 <details>로 바뀌면서 아래쪽
   '.prod{display:block;padding:0;margin:0}'이 최상위에서 덮어쓴다.
   여기 남겨 두면 고칠 때 이 값을 보고 고쳤다가 화면이 안 바뀌어 헤맨다. */
.prod{border:0;border-radius:var(--r);text-align:left;
  flex-direction:column;gap:12px}
.prod.earth{background:var(--earth);color:#17161B}
/* 컬러 카드 위의 흰 소형 텍스트는 --fire(3.56:1)에서 AA에 미달한다.
   --fire-deep(5.69:1)으로 깔면 13px 본문·10.5px 라벨까지 한 번에 통과한다.
   --fire는 .progress i·focus outline 같은 비텍스트 용도로만 남긴다. */
.prod.fire{background:var(--fire-deep);color:#FBFAF5}
.prod.water{background:var(--water);color:#FBFAF5}
/* 재회 카드. --wood(#A9C86B)는 흰 글씨로 1.9:1이라 본문이 안 읽힌다.
   짙은 초록을 따로 두고 그 위에 흰 글씨를 올린다(5.4:1). */
.prod.wood{background:var(--wood-deep);color:#FBFAF5}
/* 짝사랑 카드. 궁합(--fire-deep)과 같은 붉은 계열이면 두 상품이 한 덩어리로 읽힌다.
   장미빛으로 갈라 두되 흰 글씨가 읽히는 농도로 내린다(6.4:1). */
.prod.rose{background:var(--rose-deep);color:#FBFAF5}
/* 컬러 카드 위에서는 opacity로 위계를 만들지 않는다 — 대비가 그만큼 곧장 깎인다 */
.prod .lab{color:inherit;opacity:1;font-weight:800}
.ptop{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* 상품 아이콘 — 화살표가 있던 자리(라벨 줄 오른쪽 끝).
   줄 안에 들어가므로 카드 높이는 아이콘을 넣기 전과 같다.
   자간을 벌려야 고양이-하트-고양이가 한 덩어리로 뭉치지 않는다. */
/* 상품 카드의 고양이 짝. 자간을 **음수**로 당겨 여러 마리가 한 덩어리로 보이게 한다 —
   +0.5px일 때는 🐱❤️🐱가 따로 놀아 세 개의 그림처럼 읽혔다. */
/* 자간은 **넉넉한 쪽으로 둔다.** -3px은 이모지를 그림(<img>)으로 박았을 때 맞춘 값이라,
   글자로 되돌린 지금은 너무 붙어 보인다. 이모지 글자는 기기마다 상자 안 여백이 달라
   (애플은 넉넉, 안드로이드는 빠듯) 한쪽에 맞춰 세게 당기면 다른 쪽이 겹친다.
   이미 검증된 .scat·.vcat과 같은 값을 쓴다. */
.picon{font-size:21px;line-height:1.25;letter-spacing:-1.5px;flex:none;white-space:nowrap}
.feat{margin:0;padding-left:16px;font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:3px}
.pacts{display:flex;flex-direction:column;gap:8px;margin-top:2px}
/* 카드 위에 얹는 버튼 — 배경/글자 모두 고정색으로 두어 대비를 계산 가능하게 만든다 */
.pgo{border:0;background:#FBFAF5;color:#17161B;border-radius:99px;padding:14px;font:inherit;
  font-size:15px;font-weight:800;letter-spacing:-.02em;cursor:pointer;width:100%;
  min-height:44px;transition:transform .15s ease}
.prod.earth .pgo{background:#17161B;color:#FBFAF5}
.pgo:active{transform:scale(.985)}
.pgo:focus-visible{outline:2.5px solid currentColor;outline-offset:2px}
/* 가격. -.04em은 27px에서 1px 넘게 당겨 '1,200'이 뭉치고, 그 당김이 마지막 글자
   뒤에도 걸려 'P'가 0에 달라붙었다. 숫자만 살짝 조이고 P는 한 칸 띄운다. */
.price{font-size:13px;font-weight:800;margin-top:2px;letter-spacing:-.01em}
.price b{font-size:27px;font-weight:900;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;margin-right:2.5px}
.price s{font-size:12.5px;font-weight:700;margin-right:4px}

/* ── 카드 · 폼 ── */
.card{background:var(--paper);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px}
.slot{background:var(--paper);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px}
.slot .who{display:flex;align-items:center;gap:9px}
.dot{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;
  font-size:11px;font-weight:800;background:var(--hard);color:var(--bg)}
.dot.earth{background:var(--earth);color:#17161B}
.dot.water{background:var(--water);color:#FBFAF5}
.f{display:flex;flex-direction:column;gap:6px}
/* .flab은 셀렉트 여러 개를 한 묶음으로 안내하는 그룹 라벨이다
   (label 하나에 for를 여러 개 걸 수 없으므로 role=group + aria-labelledby로 잇는다) */
.f>label,.f>.flab{display:block;font-size:11.5px;font-weight:800;letter-spacing:-.02em;color:var(--muted)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px}
/* iOS Safari는 16px 미만 입력에 포커스하면 페이지를 강제 확대한다.
   viewport에 maximum-scale을 거는 건 접근성상 옳지 않으므로 글자를 키운다. */
input,select{font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid var(--line);
  border-radius:14px;background:var(--bg);color:var(--ink);width:100%;min-width:0}
input:focus,select:focus{outline:2.5px solid var(--fire);outline-offset:-1px;border-color:transparent}

/* 화살표를 우리가 그린다.
   브라우저가 그리는 기본 화살표는 상자의 오른쪽 끝에 붙는데, 이 상자는 모서리가
   14px로 둥글어서 화살표가 그 곡선에 닿아 삐져나온 것처럼 보였다.
   appearance:none 으로 기본 화살표를 끄고, 배경 그림으로 16px 안쪽에 세운다.
   currentColor를 쓸 수 없는 자리(배경 이미지)라 획 색은 두 테마 모두에서 읽히는
   중간 회색으로 고정한다 — 밝은 바탕에서도 어두운 바탕에서도 4:1 위다. */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8A93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 14.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:15px 15px}
/* 화살표 자리를 비워 두었으므로 글자가 그 아래로 지나가면 안 된다 */
select::-ms-expand{display:none}

/* 라디오는 display:none으로 숨기면 접근성 트리와 탭 순서에서 사라진다.
   (키보드·스크린리더로는 성별·MBTI 40문항·결제수단을 아예 고를 수 없게 된다)
   시각적으로만 감추고 포커스는 살려 둔다. */
.seg input,.pay input,.scale input{position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none;margin:0}
.seg input:focus-visible+label,.scale input:focus-visible+label,
.pay input:focus-visible+span{outline:2.5px solid var(--fire);outline-offset:2px}
.seg{display:flex;gap:6px;position:relative}
.seg label{flex:1;text-align:center;padding:10px;border:1.5px solid var(--line);border-radius:14px;
  font-size:13.5px;font-weight:700;cursor:pointer}
.seg input:checked+label{background:var(--hard);color:var(--bg);border-color:var(--hard)}

/* 양력·음력 — 생년월일 세 칸 바로 위에 붙는 작은 토글.
   성별처럼 화면 폭을 다 쓰면 날짜보다 커 보인다. 절반만 쓰고 살짝 눕힌다. */
.calseg{max-width:200px;margin:0 0 7px}
.calseg label{padding:7px 10px;font-size:13.5px;border-radius:11px}
.leapbox{display:flex;align-items:center;gap:8px;margin-top:8px;
         font-size:13.5px;cursor:pointer;user-select:none}
.leapbox[hidden]{display:none}
/* 아래 셋은 모두 같은 부류다 — **display를 준 요소는 hidden 속성이 안 먹는다.**
   자바스크립트가 `.hidden = true`로 껐다고 믿는데 화면에는 그대로 남는다.
   display를 새로 줄 때마다 이 짝을 함께 적어라.
     · #ask-list  — 질문 목록. 껐는데 계속 보였다(app.js 2326행).
     · .ghost     — '+ 질문 더하기'. 상한에 닿아도 단추가 남았다(app.js 2259행).
     · .peerrel   — 아래 참고. */
#ask-list[hidden]{display:none}
.ghost[hidden]{display:none}
/* #ask-open은 **아이디로** display:block을 받는다(아래 '.picksave, #ask-open').
   아이디(1,0,0)가 클래스(0,2,0)를 이기므로 .ghost[hidden]으로는 못 누른다 —
   같은 무게로 맞받아야 한다. 짝인 .picksave도 함께 눌러 둔다. */
#ask-open[hidden],.picksave[hidden]{display:none}
/* '그 밖의 사이'를 골랐을 때만 열리는 칸. .f가 display:flex라 hidden 속성만으로는
   안 닫힌다 — 동업자를 골라도 칸이 계속 보여서 손님이 거기에 적었다.
   이 파일에서 [hidden]을 눌러 주는 여섯 번째 자리다. display를 준 요소에는 늘 필요하다. */
.peerrel[hidden]{display:none}
.leapbox input{width:17px;height:17px;flex:none;accent-color:var(--hard);margin:0}
/* 변환 결과는 확인용이라 눈에 걸려야 한다 — 다른 힌트보다 한 톤 진하게. */
.hint.conv{margin-top:7px;font-weight:600}
.hint.conv.bad{color:#D64545;font-weight:700}
.hint{font-size:11px;color:var(--muted);line-height:1.5}

.cta{border:0;background:var(--hard);color:var(--bg);border-radius:99px;padding:17px;
  font:inherit;font-size:16px;font-weight:800;letter-spacing:-.02em;cursor:pointer;width:100%}
.cta:active{opacity:.85}
.cta:disabled{opacity:.45;cursor:default}

/* ── 결제 ── */
.row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}
.row.big{font-size:15px;font-weight:800}
.row.big b{font-size:23px;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.row span:last-child{font-variant-numeric:tabular-nums}
.pays{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pay{position:relative}
.pay span{display:block;text-align:center;padding:13px;border:1.5px solid var(--line);
  border-radius:14px;font-size:13.5px;font-weight:700;cursor:pointer}
.pay input:checked+span{background:var(--hard);color:var(--bg);border-color:var(--hard)}
.mock{background:var(--fire-deep);color:#FBFAF5;border-radius:18px;padding:14px 16px;font-size:13px;line-height:1.55}

/* ── 로딩 ── */
.loading{padding:70px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
/* 바깥 지름을 96 → 116px로 넓혔다. 고리 사이 간격(9px)은 오행 다섯이라 못 건드리는데,
   96px일 때는 가운데 구멍이 20px뿐이라 고양이(잉크 ~21px)가 안쪽 고리를 밟았다.
   바깥만 키우면 간격은 그대로 두고 구멍만 52px로 열린다. */
.orbit{position:relative;width:116px;height:116px;margin-bottom:8px}
.orbit i{position:absolute;inset:0;border-radius:99px;border:2px solid var(--line);
  animation:spin 3.6s linear infinite}
.orbit i:nth-child(1){border-top-color:var(--wood);animation-duration:2.4s}
.orbit i:nth-child(2){inset:9px;border-top-color:var(--fire);animation-duration:3.1s}
.orbit i:nth-child(3){inset:18px;border-top-color:var(--earth);animation-duration:2.8s}
.orbit i:nth-child(4){inset:27px;border-top-color:var(--metal);animation-duration:3.6s}
.orbit i:nth-child(5){inset:36px;border-top-color:var(--water);animation-duration:2.1s}
@keyframes spin{to{transform:rotate(360deg)}}
/* 고리 한가운데 앉는 수정구. 고리는 돌아도 이것은 가만히 있는다 —
   같이 돌면 어지럽고, 기다리는 화면에서 어지러운 것은 더 길게 느껴진다.
   숨쉬듯 아주 조금만 커졌다 작아진다. 표식이 있을 때만 나온다. */
.ocore{display:none}
body.cats .ocore{display:grid;position:absolute;inset:0;place-items:center;
  font-size:22px;line-height:1;animation:ocore-breathe 2.8s ease-in-out infinite}
@keyframes ocore-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){body.cats .ocore{animation:none}}
/* 빈 보관함의 조는 고양이. 아무것도 없는 화면이 허전하지 않게. */
.ecat{display:block;font-size:30px;line-height:1;margin-bottom:9px;letter-spacing:-2px}
.steps{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);margin-top:8px}
.steps b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.orbit i{animation:none}*{transition:none!important}}

/* ── 명식 카드 ── */
.phead{border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:15px}
.phead.earth{background:var(--earth);color:#17161B}
.phead.water{background:var(--water);color:#FBFAF5}
/* 궁합 점수 카드는 2,000P 상품의 핵심 산출물이다. 점수 근거(.factors)가 여기 들어가므로
   --fire(흰 글씨 3.56:1)가 아니라 --fire-deep(5.69:1)을 깐다. */
.phead.fire{background:var(--fire-deep);color:#FBFAF5}
.phead .lab{color:inherit;opacity:1;font-weight:800}
/* 이름 뒤에 붙는 사이 — '유하늘 (연인)'. 이름이 주인공이므로 **얇고 작게** 둔다.
   굵게 두면 이름과 같은 무게로 읽혀 무엇이 이름인지 흐려진다.
   마음·질문의 곁사람에게만 붙는다(궁합·재회는 사이가 뻔해 안 받는다). */
.phead h2 .prel{font-weight:500;font-size:.7em;opacity:.75;margin-left:6px;letter-spacing:-.01em}
.bazi{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.bz{background:rgba(0,0,0,.14);border-radius:16px;padding:10px 4px;text-align:center}
.phead.earth .bz{background:rgba(23,22,27,.12)}
/* 컬러 카드 안의 소형 텍스트 — 위계는 굵기·크기로 주고 opacity는 최소한만 쓴다 */
.bz .t{font-size:9.5px;font-weight:800;letter-spacing:.1em;opacity:.85;display:block}
/* 한글을 크게 앞세우고 한자를 아래 작게. 명조체는 한자 쪽에 준다 */
.bz .g{font-size:22px;line-height:1.2;font-weight:900;letter-spacing:-.04em;display:block}
.bz .k{font-family:var(--serif);font-size:13px;font-weight:600;opacity:.9;display:block;margin-top:1px}
.wx{display:grid;grid-template-columns:26px 1fr 22px;align-items:center;gap:8px;font-size:11px;font-weight:800}
.wx+.wx{margin-top:5px}
.wx .bar{height:9px;border-radius:99px;background:rgba(0,0,0,.15)}
.phead.water .bar,.phead.fire .bar{background:rgba(255,255,255,.2)}
.wx .bar i{display:block;height:100%;border-radius:99px;background:currentColor}
.wx.zero{opacity:.42}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;padding:5px 11px;border:1.5px solid currentColor;border-radius:99px;
  font-size:11.5px;font-weight:800;letter-spacing:-.02em}
.warn{background:var(--fire-deep);color:#FBFAF5;border-radius:18px;padding:13px 15px;font-size:12.5px;line-height:1.55}

/* 결과 화면의 카드 묶음.
   .screen이 gap:14px를 주지만 그건 '직계 자식'까지다. 아래 컨테이너들은
   안에 카드를 여러 장 쌓으면서 간격 규칙이 없어, 둥근 모서리끼리 맞붙어
   서로 파고든 것처럼 보였다. 간격은 마진이 아니라 레이아웃으로 준다. */
#res-share, #res-charts, #res-compat, #res-sections,
#chart-cards, #chart-compat, #vault-list, #pv-groups, #charge-history {
  display:flex; flex-direction:column; gap:12px;
}
/* 비어 있을 때 gap이 남아 허공이 생기지 않게 한다 */
#res-share:empty, #res-charts:empty, #res-compat:empty, #res-sections:empty,
#chart-compat:empty { display:none }

/* ── 아코디언 ── */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:14px 4px 2px}
/* display:flex/block이 hidden 속성을 이긴다. 명시적으로 눌러 준다. */
.shead[hidden],.card[hidden]{display:none}
.expand{border:1.5px solid var(--hard);background:transparent;color:inherit;border-radius:99px;
  padding:11px 14px;min-height:44px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;
  white-space:nowrap}
details{background:var(--paper);border-radius:22px;overflow:hidden;border:1.5px solid transparent;margin-bottom:8px}
details[open]{border-color:var(--line)}
summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:11px}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2.5px solid var(--fire);outline-offset:-2px}
.sq{flex:0 0 auto;min-width:26px;height:24px;padding:0 6px;border-radius:99px;background:var(--hard);
  color:var(--bg);font-size:10px;font-weight:800;display:grid;place-items:center}
.stitle{flex:1;font-size:15px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
/* 화살표는 글자가 아니라 도형이다.
   예전에는 '›' 문자를 썼다. place-items:center는 글자 '상자'를 가운데 두지만
   글자의 잉크는 그 상자 안에서 폰트마다 다르게 치우쳐 있어서, 원 안에서 삐뚤어 보이고
   90도 돌리면 그 치우침이 위아래로 드러났다. 도형은 좌표가 정확해 그런 일이 없다.
   path의 잉크가 x=9.5~14.5, y=6~18이라 24 상자의 한가운데(12,12)에 대칭으로 앉는다. */
.chev{flex:0 0 auto;width:28px;height:28px;border-radius:99px;border:1.5px solid var(--hard);
  display:grid;place-items:center;transition:transform .22s,background .22s,border-color .22s}
.chev svg{display:block;width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
details[open] .chev{transform:rotate(90deg);background:var(--hard);color:var(--bg);border-color:var(--hard)}
/* 항목 그룹 — A/B/C/D/E를 제목과 색으로 갈라준다.
   24개를 한 줄로 늘어놓으면 어디까지가 '나에 대한 것'이고 어디부터가 '시기'인지 안 읽힌다.
   배지 색은 상품 카드와 같은 오행 색을 재사용해 화면 전체가 한 팔레트로 묶이게 했다. */
.ghead{font-size:22px;font-weight:900;letter-spacing:-.04em;margin:22px 0 12px;
  display:flex;align-items:center;gap:9px}
.ghead::before{content:'';width:5px;height:20px;border-radius:99px;background:var(--gc,var(--hard))}
.ghead:first-child{margin-top:4px}
/* 무리 제목 옆에 붙은 '전체 펼치기'. 제목이 주인공이므로 단추는 한 치수 작게 두고
   오른쪽 끝으로 민다. 제목이 길어 두 줄이 되어도 단추는 안 찌그러진다(flex:none). */
.ghead .expand{flex:none;margin-left:auto;font-size:11.5px;padding:9px 13px;min-height:38px}
.ghead.gA,details.gA{--gc:var(--earth)}
.ghead.gB,details.gB{--gc:var(--water)}
.ghead.gC,details.gC{--gc:var(--fire-deep)}
.ghead.gD,details.gD{--gc:var(--wood-deep)}
.ghead.gE,details.gE{--gc:var(--wood-deep)}
.ghead.gF,details.gF{--gc:var(--fire-deep)}
.ghead.gG,details.gG{--gc:var(--amethyst)}
/* 아래 열둘은 색이 없어 **전부 회색으로 떨어져 있었다.** 색을 준 것은 A~G·S 여덟뿐인데
   실제로 쓰이는 무리 글자는 스물이다 — 10년 운세에서 눈에 띄었지만 연애운·마음·
   자식·시댁·부모·관계·질문도 다 회색이었다. 새 상품을 넣을 때마다 빠뜨린 자리다.
   ⚠ 색은 **그 상품의 카드 색을 그대로 따른다.** 손님이 고른 카드의 색이 리포트 안에서
      이어지므로, 무슨 풀이를 읽고 있는지가 색만으로도 읽힌다. 새 색을 들이지 않는다.
   카드 색이 변수가 아닌 것(하늘·흙벽 등)은 .prod 규칙에 적힌 값과 같은 값을 쓴다. */
.ghead.gR,details.gR{--gc:#A8442A}              /* 연애운 — .prod.ember */
.ghead.gU,details.gU{--gc:#33517A}              /* 앞으로 10년 — .prod.dusk */
.ghead.gV,details.gV{--gc:#33517A}
.ghead.gT,details.gT{--gc:var(--water)}         /* 마음 — .prod.water */
.ghead.gP,details.gP{--gc:var(--water)}
.ghead.gH,details.gH{--gc:#2F6E8F}              /* 자식 — .prod.sky */
.ghead.gM,details.gM{--gc:#2F6E8F}
.ghead.gJ,details.gJ{--gc:#2F6E8F}
.ghead.gL,details.gL{--gc:#2F6E8F}
.ghead.gK,details.gK{--gc:#7A5240}              /* 시댁·처가 — .prod.clay */
.ghead.gN,details.gN{--gc:#7A5240}
.ghead.gQ,details.gQ{--gc:#5B3A6E}              /* 부모와 나 — .prod.plum */
.ghead.gW,details.gW{--gc:#1F6F63}              /* 이 사람과 나 — .prod.teal */
.ghead.gY,details.gY{--gc:#1F6F63}
.ghead.gX,details.gX{--gc:#55525E}              /* 질문 — .prod.slate */
/* 배지는 그룹 색을 채우고, 대비를 위해 밝은 색 위에는 검은 글씨를 얹는다.
   기본값을 --hard로 두면 안 된다 — 다크 테마에서 --hard는 밝은 크림색이라
   그 위의 흰 글씨가 사라진다(실제로 G 그룹이 그렇게 안 보였다).
   그래서 기본값을 테마와 무관하게 흰 글씨가 읽히는 중간 회색으로 고정한다. */
details .sq{background:var(--gc,#4A4750);color:#FBFAF5}
details.gA .sq{color:#17161B}
details[open]{border-color:var(--gc,var(--line))}

.body{padding:0 18px 20px;font-size:14.2px;display:flex;flex-direction:column;gap:10px}
.body p{margin:0}
.body strong{font-weight:800}
.body ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px}
.body blockquote{margin:0;padding:10px 14px;background:var(--metal);border-radius:14px;font-size:13.6px}
/* 리포트 본문의 표 — 대운 지도처럼 칸이 많은 표가 실제로 들어온다.
   좁은 화면에서 페이지 전체가 옆으로 밀리지 않도록 표만 따로 스크롤시킨다. */
.body .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2px 0}
.body table{border-collapse:collapse;width:100%;min-width:340px;font-size:13px}
.body th,.body td{border:1px solid var(--line);padding:7px 9px;text-align:left;
  vertical-align:top;line-height:1.5}
.body th{background:var(--metal);font-weight:800;white-space:nowrap}
.body td strong{font-weight:800}
.body tbody tr:nth-child(2n) td{background:rgba(127,127,127,.05)}

/* ── 미리보기 · 포인트 ── */
/* 미리 보기는 span이 아니라 버튼이다 — 탭 순서에 들어가고 Enter로 열린다.
   컬러 카드 위이므로 opacity로 낮추지 않고 배경 없는 밑줄 링크 모양만 유지한다. */
.peek{display:block;width:100%;text-align:left;margin-top:2px;font:inherit;font-size:12.5px;
  font-weight:700;color:inherit;background:transparent;border:0;cursor:pointer;
  padding:11px 2px;min-height:44px;
  text-decoration:underline;text-underline-offset:3px}
.peek:focus-visible{outline:2.5px solid currentColor;outline-offset:2px;border-radius:8px}
.pvlist{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;
  font-size:13.8px;line-height:1.45}
.pvlist li::marker{font-weight:800;opacity:.5}
.amounts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.amt{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;
  padding:12px 8px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:2px;
  align-items:center}
.amt b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.amt span{font-size:10.5px;font-weight:700;opacity:.6}
.amt.on{background:var(--hard);color:var(--bg);border-color:var(--hard)}
.amt.on span{opacity:.8}
.row small{font-weight:400;font-size:11px;margin-left:5px}

/* ── SNS 공유 카드 ── */
/* 바탕을 한 색으로 채우면 큰 면이 납작해 보인다. 오른쪽 위에서 왼쪽 아래로
   아주 옅게 기울여, 같은 색인데 면이 살아 있게 한다. */
.sharecard{background:
    radial-gradient(120% 90% at 88% 4%, rgba(255,255,255,.13), rgba(255,255,255,0) 58%),
    linear-gradient(158deg, var(--fire) 0%, var(--fire-deep) 62%);
  /* 아래를 위(26px)보다 넉넉히 둔다. 22px일 때 아랫줄이 바닥에 눌려 보였다 —
     같은 값이어도 아래가 좁아 보이므로 조금 더 준다(광학 여백). */
  color:#FBFAF5;border-radius:var(--r);padding:26px 24px 30px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
/* 장식. 예전에는 **테두리가 뚜렷한 원**이라 그 선이 글자 위를 지나갔다 —
   같은 줄인데 반쪽만 밝아 보였다. 가장자리가 없는 빛으로 바꾼다:
   가운데서 바깥으로 흐려져 끝나므로 어디에 걸쳐도 선이 생기지 않는다. */
.sharecard::after{content:'';position:absolute;right:-120px;bottom:-140px;width:340px;height:340px;
  border-radius:99px;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.11), rgba(255,255,255,0))}
.sc-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.sc-badge{font-size:11px;font-weight:800;letter-spacing:-.02em;border:1.5px solid currentColor;
  border-radius:99px;padding:4px 11px}
.sc-brand{font-size:10.5px;font-weight:800;letter-spacing:.12em;opacity:.88;text-transform:uppercase}
/* 상품 고양이는 이름과 **같은 줄**에 선다. 오른쪽 아래의 이름과 마주 보는 낙관 자리다 —
   이름만 있으면 아랫줄이 한쪽으로 기운다.
   따로 띄워(absolute) bottom 값을 눈대중하면 이름과 줄이 어긋난다 —
   실제로 어긋났다. 같은 줄에 넣고 세로 가운데를 브라우저가 맞추게 한다.
   상품마다 그림이 달라서, 무엇에 대한 카드인지 그림만 봐도 갈린다. */
/* 고양이와 '썸네일 공유하기'를 **붙여서** 왼쪽에 두고, 이름만 오른쪽 끝으로 민다.
   space-between이면 셋이 고르게 벌어져 단추가 한가운데에 홀로 떠 있었다 —
   표식과 단추는 한 짝이므로 붙어 있어야 하나로 읽힌다. */
.sc-bottom:has(.scat){justify-content:flex-start;align-items:center;gap:8px}
.sc-bottom:has(.scat) .sc-foot{margin-left:auto}
/* 자간을 -5px로 뒀더니 **갤럭시에서 고양이가 겹쳤다.** 이모지 그림은 기기마다
   글자 상자 안 여백이 다르다 — 애플은 넉넉하고 안드로이드는 빠듯하다.
   한쪽에 맞춰 세게 당기면 다른 쪽이 깨지므로, 어디서나 견딜 만한 값으로 낮춘다. */
.scat{flex:none;font-size:22px;line-height:1;letter-spacing:-1.5px;
  white-space:nowrap;user-select:none}
.sc-score{font-size:64px;font-weight:900;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;position:relative;z-index:1}
.sc-score small{font-size:19px;font-weight:800;opacity:.65;margin-left:3px}
.sc-hook{font-size:29px;line-height:1.18;font-weight:900;letter-spacing:-.045em;
  margin:2px 0 0;text-wrap:balance;position:relative;z-index:1}
.sc-line{font-size:14px;line-height:1.55;opacity:1;position:relative;z-index:1}
/* 이름은 그림에 서명하듯 오른쪽 아래에 크게 둔다.
   12px로 왼쪽 아래에 붙여 두었더니 누구의 카드인지가 맨 마지막에 읽혔다.
   본문(23px)보다 조금 작게 두어 제목 자리를 뺏지는 않게 한다. */
.sc-foot{font-size:21px;font-weight:900;letter-spacing:-.045em;line-height:1.1;
  opacity:.96;position:relative;z-index:1;text-align:right}

/* 하면 좋은 것 / 안 되는 것 — 카드를 본 사람이 가져갈 한마디.
   분석만 있고 처방이 없으면 '그래서 어쩌라고'로 끝나고 공유될 이유도 없다. */
.sc-adv{display:flex;flex-direction:column;gap:7px;margin-top:4px;position:relative;z-index:1;
  border-top:1px solid rgba(255,255,255,.24);padding-top:11px}
.sc-adv>div{display:flex;gap:9px;align-items:baseline;font-size:12.6px;line-height:1.45}
.sc-adv b{flex:none;font-size:10.5px;font-weight:800;letter-spacing:-.02em;
  border-radius:99px;padding:2.5px 8px;white-space:nowrap}
.sc-do b{background:rgba(255,255,255,.92);color:#17161B}
.sc-dont b{border:1.5px solid rgba(255,255,255,.55)}

/* 카드 안의 '썸네일 공유하기'. 카드가 쓰는 말투를 그대로 따른다 —
   흰 알약에 어두운 글자(.sc-do b와 같은 꼴). 새 색을 들이지 않는다.
   ⚠ 손님이 카드를 캡처하면 이 단추도 함께 찍힌다. 그래서 **이미지를 만드는 쪽
   (report-html.js의 shareCardPage)에는 이 단추가 없다** — 이미지에는 안 나온다. */
/* 크기는 위 라벨(.sc-adv b)과 같게 낮추되, **아이콘 하나**로 '누르는 것'임을 알린다 —
   이 카드에서 흰 알약은 이미 라벨의 말투라(배지·하면 좋은 것) 알약만으로는 라벨로 읽힌다.
   아이콘은 상단 도구줄의 공유 단추와 **같은 그림**을 쓴다. 새 그림을 들이지 않는다. */
/* 「하면 안 되는 것」과 같은 꼴 — 흰 선 두른 둥근 상자.
   꽉 채운 흰 알약(.sc-do b)을 쓰면 '하면 좋은 것' 라벨과 똑같아져 눌리는 것으로 안 읽힌다.
   선만 두르면 라벨 무리에 섞이면서도 한 겹 물러나 있어, 아이콘이 '누르는 것'을 맡는다. */
.sc-share{flex:none;cursor:pointer;font:inherit;
  font-size:10.5px;font-weight:800;letter-spacing:-.02em;
  border:1.5px solid rgba(255,255,255,.55);border-radius:99px;
  padding:2.5px 10px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
  background:none;color:#fff;
  transition:border-color .12s ease,background .12s ease}
/* ⚠ 여기 :hover와 :disabled가 **두 벌** 있었다. 아래쪽 것이 꽉 채운 흰 알약이던
   시절의 규칙(background:#fff)인데, 선만 두른 꼴로 바꾸면서 안 지웠다.
   나중 규칙이 이기므로 마우스를 대면 단추가 통째로 하얘지고 흰 글자가 사라졌다.
   한 벌로 합친다 — 같은 선택자를 두 군데 두지 마라. */
.sc-share:hover{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.12);
  transform:translateY(-1px)}
.sc-share:active{transform:none}
.sc-share:disabled{opacity:.55;cursor:default;transform:none}
.sc-share .ic{width:11px;height:11px;flex:none}

/* 썸네일 대화창 — 확인창(#confirm)과 같은 몸을 쓴다. */
#shot{border:none;border-radius:20px;padding:22px;max-width:420px;width:calc(100% - 32px);
  background:var(--paper);color:var(--ink)}
#shot::backdrop{background:rgba(0,0,0,.45)}
#shot h3{margin:0 0 8px;font-size:19px}
#shot .hint{margin:0 0 4px}
/* 두 갈래는 세로로 쌓는다. 나란히 두면 '저장'과 '공유'가 반반이라
   무엇이 먼저인지 안 읽힌다 — 폰에서는 공유가, 데스크탑에서는 저장이 주인공이다. */
.shot-acts{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.shot-acts button{width:100%}
#shot-msg{margin-top:10px}

/* 서명 줄. margin-top:auto로 카드 바닥에 붙여 세운다 —
   내용이 짧은 카드에서도 이름이 중간에 떠 있지 않게 한다. */
.sc-bottom{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;
  margin-top:auto;padding-top:4px;position:relative;z-index:1}
/* 아이콘 — 글자만 있으면 무엇을 하는 버튼인지 한 박자 늦게 읽힌다 */
.ic{width:13px;height:13px;flex:none;display:block}
.dlbtn .ic{width:12.5px;height:12.5px}
.dlbtn{gap:4px}

/* 공유 링크로 들어온 사람에게는 저장·공유 버튼을 감춘다 — 남의 리포트다 */
body.shared-view .dlrow,
body.shared-view .restop .back{display:none}

/* ── 상단바 · 인증 · 보관함 ── */
/* 상단 바 — 왼쪽 이름(홈), 오른쪽 프로필 하나.
   버튼 넷을 늘어놓던 시절에는 좁은 화면에서 두 줄로 접혔다. */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:2px 2px 10px;min-height:44px}
.tbrand{display:flex;align-items:center;gap:7px;border:0;background:none;color:inherit;
  padding:6px 4px;margin:0;font:inherit;cursor:pointer;min-height:38px}
/* 상자는 가운데 맞았는데도 글자가 떠 보였다. 글자 상자(line-height 25px)가
   글자보다 커서 글리프가 상자 위쪽에 앉기 때문이다. 둘 다 상자를 글자에 붙인다. */
/* 이모지 글리프는 em 상자를 넘어가는 경우가 있다. line-height 1로 딱 붙이면
   아래가 잘린다. 여유를 조금 주되 정렬은 flex가 맡는다. */
.tbrand .brandmark{font-size:20px;line-height:1.15;display:block}
.tbrand .brandname{font-size:15.5px;font-weight:900;letter-spacing:-.04em;
  line-height:1;display:block}
.tbrand:active{opacity:.65}
.tbrand:focus-visible{outline:2.5px solid var(--hard);outline-offset:2px;border-radius:12px}

.tbmenu{position:relative;flex:none}
.tbprof{display:grid;place-items:center;width:38px;height:38px;border-radius:99px;
  border:1.5px solid var(--line);background:transparent;color:inherit;cursor:pointer;padding:0}
.tbprof .ic{width:19px;height:19px}
.tbprof:hover{border-color:var(--hard)}
.tbprof:focus-visible{outline:2.5px solid var(--hard);outline-offset:2px}

.tbpop{position:absolute;right:0;top:44px;z-index:80;min-width:196px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:18px;
  padding:6px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 14px 40px rgba(0,0,0,.22)}
.tbpop[hidden]{display:none}
.tbpop-h{font-size:12px;font-weight:800;color:var(--muted);padding:8px 12px 6px}
.tbpop-i{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:0;background:none;color:inherit;border-radius:12px;padding:11px 12px;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:left;min-height:44px}
.tbpop-i:hover{background:var(--metal)}
.tbpop-i b{font-weight:900;font-variant-numeric:tabular-nums}
.tbpop-i:focus-visible{outline:2.5px solid var(--hard);outline-offset:-2px}
/* .tb는 로그인·포인트·내 리포트·로그아웃 전부이자 유일한 전역 내비게이션이다 */
.tb{border:1.5px solid var(--line);background:transparent;color:inherit;border-radius:99px;
  padding:11px 14px;min-height:44px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.tb.solid{background:var(--hard);color:var(--bg);border-color:var(--hard)}
.tb.who{border:0;color:var(--muted);cursor:default;padding-left:2px}
.social{display:flex;flex-direction:column;gap:8px}
.social button{border:1.5px solid var(--line);border-radius:14px;padding:13px;font:inherit;
  font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;background:var(--bg);color:var(--ink)}
.social button i{width:9px;height:9px;border-radius:99px;display:block}
.social .off{opacity:.45;cursor:default}
.err{background:var(--fire-deep);color:#FBFAF5;border-radius:14px;padding:11px 14px;font-size:13px}
/* 제목+상태가 한 줄, 날짜가 그 아래, '이어서 묻기'가 실선 아래 한 줄.
   flex 한 줄이던 시절에는 날짜 옆에 단추가 붙어 어느 쪽이 눌리는지 안 읽혔다. */
.vitem{background:var(--paper);border-radius:20px;padding:16px 18px;margin-bottom:9px;
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:0 12px;
  cursor:pointer;border:1.5px solid transparent}
.vitem:active{border-color:var(--line)}
/* 상품 고양이는 **제목 줄 안**에 산다. 따로 칸을 주면 카드 세로 가운데에 떠서
   제목과 따로 놀았다 — 제목의 일부처럼 읽혀야 무엇에 대한 그림인지 이어진다.
   자간을 좁혀 여러 마리가 한 덩어리로 보이게 하고, 제목이 길어 줄이 바뀔 때
   그림만 홀로 떨어지지 않도록 통째로 묶는다. */
/* 오른쪽 위는 **늘 상품 그림**이다. 상태(완료·쓰는 중)는 제목 옆으로 옮겼다 —
   한 칸이 상태와 상품을 겸하면 무엇을 뜻하는 자리인지 매번 달라진다.
   지금은 갈래가 뚜렷하다: 제목 옆 = 어떤 상태 / 오른쪽 위 = 어떤 상품. */
/* 16px인 이유: 이모지는 글자와 달리 상자를 꽉 채운다. 제목이 15.5px이라고
   그림도 그만큼 주면 잉크 높이가 20px 대 12px이 되어 두 배로 크게 보인다.
   19px로 뒀다가 눈에 띄게 컸다 — 그림은 글자보다 한 치수 작게 잡아야 나란히 선다. */
.vcat{font-size:16px;line-height:1;letter-spacing:-1.5px;white-space:nowrap;
  user-select:none;padding-top:2px}
.vitem .vi{flex:1;min-width:0}
.vitem h3{font-size:15.5px;margin-bottom:2px}
/* 안내문 안의 곁설명. 총액이 먼저 읽히고 셈은 그 뒤에 따라와야 한다. */
.hint .dim,#ask-intro .dim{opacity:.62;font-weight:600}
.vitem small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
/* 작성 중 안내. 알약에 '쓰는 중' 세 글자만 있으면 손님은 이 화면을 켜 두고 기다린다.
   얼마나 걸리는지와 '닫아도 된다'를 말해 주는 것이 이 줄의 일이다. */
.vitem .writing{margin:8px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
.vitem .writing b{color:var(--ink);font-weight:800}
/* 작성 중인 카드는 눌러도 볼 본문이 없다 — 손 모양을 주지 않는다(진행 화면은 열린다) */
.vitem.pending{cursor:default}
/* 보관함 줄의 '이어서 더 묻기'.
   .ghost 기본값(16px 글자 · 17px 여백 · 2px 테두리)은 결제 단추용 크기라
   목록 한 줄 안에 들어오면 제목보다 커져서 카드가 단추에 먹힌다.
   여기서는 날짜 아래에 붙는 **작은 조각**이어야 한다 — 카드를 누르는 것이 본 동작이고
   이건 곁가지다. 그래서 글자도 색도 한 단계 낮춘다. */
/* 곁가지 동작. 카드를 누르는 것이 본 동작이라 테두리 없는 글줄로 두고,
   실선 하나로만 위와 가른다 — 알약 단추로 만들면 제목보다 눈에 먼저 들어온다. */
.vitem .vmore{grid-column:1 / -1;justify-self:stretch;text-align:left;
  margin:12px -18px -16px;padding:12px 18px 14px;
  border:0;border-top:1px solid var(--line);border-radius:0 0 20px 20px;
  background:none;color:var(--muted);cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:-.02em;
  transition:color .12s,background .12s}
.vitem .vmore i{font-style:normal;opacity:.6;margin-left:2px}
.vitem .vmore:hover{color:var(--ink);background:rgba(128,128,128,.07)}
.vitem .vmore:focus-visible{outline:2.5px solid var(--fire);outline-offset:-3px}
.tag{font-size:10px;font-weight:800;padding:4px 9px;border-radius:99px;white-space:nowrap}
.tag.done{background:var(--wood);color:#17161B}
.tag.pending{background:var(--earth);color:#17161B}
/* 샘플 딱지. 완료(초록)·쓰는 중(노랑)과 색을 갈라 '내 것이 아님'을 먼저 알린다 —
   목록에 남의 이름이 섞여 보이면 '누가 내 계정을 봤나' 하고 놀란다. */
/* 어두운 화면에서 --hard와 --ink는 **둘 다 밝은 색**이라 글자가 배경에 묻혔다
   (흰 알약만 보였다). 완료·쓰는 중과 같은 방식으로 밝은 바탕에 어두운 글자를 쓴다. */
.tag.sample{background:var(--metal);color:var(--ink)}
/* 테스트용. 샘플(무채색)과 한눈에 갈려야 하므로 선만 두른 꼴로 둔다 —
   채워 넣으면 샘플 딱지와 같은 무게로 읽혀 둘을 헷갈린다. */
.tag.testtag{background:none;border:1.5px solid var(--muted);color:var(--muted)}
/* 제목 줄 안에 서는 상태 딱지 — **「쓰는 중」에만 붙는다.**
   「완료」도 달아 봤는데, 거의 모든 줄에 붙으면서 알려주는 것이 없었다.
   딱지가 넷 나란히 서니 정작 급한 노란 딱지가 그 사이에 묻혔다 —
   딱지가 많을수록 딱지의 힘이 약해진다. 완료는 이미 세 가지로 읽힌다:
   '이어서 질문하기' 줄이 붙고, 쓰는 중 설명이 없고, 눌러서 열린다.
   크기는 제목 잉크(19px)보다 작게 — 딱지가 제목보다 크면 주인공이 뒤바뀐다.
   제목이 길어 줄이 바뀔 때 딱지만 홀로 떨어지지 않게 붙여 둔다. */
.vst{display:inline-block;margin-left:8px;vertical-align:3px;font-weight:800;
  font-size:8.5px;padding:1.5px 7px}
.empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:13.5px}

/* ── 대기 상태 ── */
.pending-box{background:var(--earth);color:#17161B;border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center}
.pending-box h2{font-size:22px}
.pending-box .dots{display:flex;gap:6px}
.pending-box .dots i{width:8px;height:8px;border-radius:99px;background:currentColor;
  animation:pulse 1.4s ease-in-out infinite}
.pending-box .dots i:nth-child(2){animation-delay:.2s}
.pending-box .dots i:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ── MBTI 검사 ── */
.progress{height:7px;background:var(--metal);border-radius:99px;overflow:hidden;margin:0 4px}
.progress i{display:block;height:100%;width:0;background:var(--fire);border-radius:99px;
  transition:width .25s ease}
.q{background:var(--paper);border-radius:20px;padding:16px 18px;margin-bottom:9px;
  display:flex;flex-direction:column;gap:11px}
.q.done{background:var(--metal)}
.qt{font-size:14.5px;font-weight:700;letter-spacing:-.025em;line-height:1.45;display:flex;gap:9px}
.qt em{font-style:normal;color:var(--muted);font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;position:relative}
/* MBTI 40문항 × 5선택지 = 200개 타겟. 무료 유입 경로의 핵심 화면이므로 44px을 지킨다. */
.scale label{text-align:center;padding:14px 2px;min-height:44px;display:flex;align-items:center;
  justify-content:center;border:1.5px solid var(--line);border-radius:12px;
  font-size:10.5px;font-weight:700;cursor:pointer;line-height:1.25;letter-spacing:-.03em}
.scale input:checked+label{background:var(--hard);color:var(--bg);border-color:var(--hard)}
.axes{display:flex;flex-direction:column;gap:11px}
.ax{display:flex;flex-direction:column;gap:5px}
.axtop{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800}
.axbar{height:10px;border-radius:99px;background:var(--metal);position:relative;overflow:hidden}
.axbar i{position:absolute;top:0;bottom:0;background:var(--hard);border-radius:99px}
.axbar b{position:absolute;top:0;bottom:0;width:2px;left:50%;background:var(--bg);opacity:.6}
.mtype{font-size:52px;font-weight:900;letter-spacing:.02em;line-height:1;text-align:center;padding:6px 0}

/* ── 궁합 점수 ── */
.score{font-size:56px;font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
/* 점수 바로 아래 한 줄 — 등급과 등수. 숫자만으로는 크기를 알 수 없어서 붙인다. */
.gradeline{font-size:14px;font-weight:800;letter-spacing:-.02em;margin-top:7px}
.gradeline span{font-weight:700;opacity:.82}
.score small{font-size:16px;font-weight:800;opacity:.6}
.factors{display:flex;flex-direction:column;gap:5px;font-size:13px}
.factors div{display:flex;gap:9px}
.factors b{font-variant-numeric:tabular-nums;min-width:32px;font-weight:800}
/* --wood(#A9C86B)를 붉은 배경에 올리면 1.98:1로 사실상 읽히지 않는다.
   가·감점은 색이 아니라 부호(+/−)와 굵기로 구분한다. */
.up,.down{color:inherit;opacity:1}
.up b{font-weight:900}
.down b{font-weight:800}
.down span{opacity:.92}

/* ── 명리 용어 · 꾹 누르면 뜨는 말풍선 ── */
.term{font:inherit;background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;
  border-bottom:1.5px dotted var(--muted);-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;user-select:none}
.term:focus-visible{outline:2.5px solid var(--fire);outline-offset:2px;border-radius:3px}
.term.open{background:var(--metal);border-bottom-color:transparent;border-radius:4px;
  box-shadow:0 0 0 3px var(--metal)}
.termtip{position:absolute;z-index:60;max-width:min(320px,calc(100vw - 24px));
  background:var(--hard);color:var(--bg);border-radius:16px;padding:13px 15px;
  box-shadow:0 12px 32px rgba(0,0,0,.28);opacity:0;transform:translateY(4px);
  pointer-events:none;transition:opacity .14s ease,transform .14s ease}
.termtip.on{opacity:1;transform:none;pointer-events:auto}
.termtip b{display:block;font-size:13px;font-weight:800;letter-spacing:-.02em;margin-bottom:5px;
  font-family:var(--serif)}
.termtip p{margin:0;font-size:13.2px;line-height:1.55;opacity:.88;font-family:var(--sans)}
.termtip i{position:absolute;bottom:-7px;width:14px;height:14px;background:var(--hard);
  transform:translateX(-50%) rotate(45deg);border-radius:2px}
.termtip.below i{bottom:auto;top:-7px}
@media (prefers-reduced-motion:reduce){.termtip{transition:none}}

/* 오픈 베타 가입 지급 안내 — 로그인 화면 맨 위 */
#signup-bonus{border:1.5px solid var(--gold,#F2B233)}
.bonusline{margin:6px 0 0;font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.45}
.bonusline b{font-size:22px;font-weight:900;letter-spacing:-.03em;
             font-variant-numeric:tabular-nums}
/* 가입 전 고지. 눈에 걸려야 하지만 겁을 줄 자리는 아니다 —
   테두리만 세우고 배경은 건드리지 않는다. */
.beta-warn{border:1.5px solid var(--fire-deep)}
.beta-warn p{font-size:14px;line-height:1.62;margin-top:7px}
.beta-warn .hint{margin-top:9px}
/* 이벤트가 끝나면 금색 테두리를 거둔다. 마감인데 계속 반짝이면 낚시가 된다. */
#signup-bonus.closed{border:1.5px solid var(--line)}
#signup-bonus.closed .bonusline{color:var(--muted)}

/* 풀이 앞의 피드백 아코디언. 풀이 항목(details)과 **같은 몸을 쓴다** —
   배경·모서리·테두리·여닫는 화살표까지 그대로다. 같은 화면에서 여닫는 물건이
   둘인데 결이 다르면 하나만 나중에 붙인 티가 난다. */
.fbacc{background:var(--paper);border-radius:22px;overflow:hidden;
  border:1.5px solid transparent}
.fbacc.on{border-color:var(--line)}
.fbsum{width:100%;background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  padding:16px 18px;display:flex;align-items:center;gap:11px;text-align:left}
.fbsum:focus-visible{outline:2.5px solid var(--fire);outline-offset:-2px}
/* 제목과 밑줄을 한 덩어리로 세운다. gap을 1px까지 좁혀 두 줄이 붙어 읽히게 한다 —
   details의 .stitle은 flex:1이라 여기서는 풀어 줘야 세로로 늘어나지 않는다. */
.fbtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fbsum .stitle{flex:none;font-size:14px;line-height:1.3}
/* 밑줄은 얇게. 제목과 무게가 비슷하면 두 줄이 서로 싸운다. */
.fbsub{font-size:11.5px;font-weight:400;line-height:1.3;color:var(--muted);
  letter-spacing:-.01em}
/* 답례가 들어설 자리. 누르기 전에는 비어 있으므로 자리까지 접는다 —
   빈 <p>를 그냥 두면 안 누른 화면에서 줄 간격만 벌어진다. */
.fback:empty{display:none}
/* 풀이 항목의 번호 배지(.sq)가 서는 자리를 고양이가 대신 쓴다.
   크기를 그 배지에 맞춰야 두 줄이 나란히 설 때 글머리가 어긋나지 않는다. */
.fbcat{flex:0 0 auto;font-size:19px;line-height:24px;width:26px;text-align:center}
/* 화살표는 details와 같은 도형·같은 회전각을 쓴다. */
.fbacc.on .chev{transform:rotate(90deg);background:var(--hard);color:var(--bg);
  border-color:var(--hard)}
#fb-slot-new[hidden]{display:none}
/* 몸통은 바깥 아코디언이 이미 그렸다. 안쪽 칸은 껍데기를 벗고 내용만 남긴다 —
   카드 테두리가 한 겹 더 생기면 상자 안의 상자가 된다. */
#fb-slot-new .card{background:transparent;border:0;border-radius:0;
  margin:0;padding:2px 18px 18px}

/* 맨 끝에서 피드백 칸으로 데려가는 줄.
   카드로 만들지 않는다 — 마지막 안내문들 뒤에 카드가 하나 더 서면 '아직 안 끝났나'가
   되고, 정작 눌러 주었으면 하는 것이 판매 카드(이어서 더 묻기)와 무게가 같아진다.
   글줄 하나로 두되 밑줄로 누를 곳임을 알린다. */
/* 결제·충전 창의 환불 안내.
   카드로 만들지 않는다 — 상품 정보 카드들과 같은 무게로 서면 '또 읽을 것'이 되어
   정작 눌러야 할 버튼이 밀린다. 테두리 없이 옅은 바탕에 얹어 **버튼 바로 위**에 둔다.
   법정 고지라 흐리게 만들지 않는다(본문과 같은 색, 크기만 한 단계 작게). */
.refundbox{background:var(--paper);border-radius:14px;padding:13px 15px;margin:16px 0 0;
  font-size:12.6px;line-height:1.6}
.refundbox > b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  color:var(--muted);margin-bottom:6px}
.refundbox ul{margin:0;padding-left:16px}
.refundbox li{margin:3px 0}
.refundbox li b{font-weight:700}
.refundbox a{display:inline-block;margin-top:8px;color:var(--ink);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}
.refundbox a:hover{color:var(--warn)}

.fbjump{margin:18px 2px 0;text-align:center}
.fbjump button{background:none;border:0;padding:8px 10px;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--muted);line-height:1.5;
  display:inline-flex;align-items:center;gap:2px;border-radius:12px}
.fbjump .u{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;color:var(--ink);font-weight:700}
/* ⚠ --fire를 글자색으로 쓰지 않는다. 이 파일 머리에 적힌 대로 밝은 배경에서
   3.6:1이라 작은 글씨에 AA 미달이고, 다크에서는 토큰이 안 바뀌어 더 나쁘다.
   글자 전용으로 둔 --warn을 쓴다(밝은 곳 6.5:1 · 다크 7.3:1). */
.fbjump button:hover .u{color:var(--warn)}
.fbjump button:focus-visible{outline:2.5px solid var(--fire);outline-offset:1px}
/* 이 자리에서는 고양이가 글줄에 얹히므로 칸 너비를 따로 주지 않는다 */
.fbjump .fbcat{width:auto;font-size:15px;line-height:1;margin-right:5px}

/* 그림 이모지. 글자 흐름에 얹히므로 글자와 밑선을 맞춘다.
   그림이라 기기마다 달라지지 않고, 자간을 억지로 당길 일도 없다. */

/* 오픈 베타 피드백 칸 */
.fb{border:1.5px dashed var(--line)}
.fb-q{font-size:16.5px;font-weight:800;letter-spacing:-.03em;margin:7px 0 2px}
/* 제목이 <label>이 되었으므로 블록으로 세운다(label은 인라인이라 그냥 두면
   아래 글칸이 옆에 붙는다). '(선택)'은 얇게 — 안 써도 된다는 사실이
   제목만큼 세게 말할 것은 아니다. */
label.fb-q{display:block;cursor:pointer}
.fb-q .opt{font-weight:400;font-size:13px;color:var(--muted);letter-spacing:0}
.fb textarea{width:100%;font:inherit;font-size:14.5px;line-height:1.6;color:inherit;
  background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;
  resize:vertical;min-height:82px}
.fb textarea:focus{outline:none;border-color:var(--hard)}
#fb-done{font-weight:700;color:var(--wood-deep)}
/* 공유 링크로 들어온 사람은 이 리포트의 주인이 아니다 */
body.shared-view .fb{display:none}

/* 자식 사주 — 기존 다섯 색(노랑·빨강·초록·장미·파랑)과 겹치지 않는 하늘빛.
   흰 글씨로 5.9:1 */
.prod.sky{background:#2F6E8F;color:#FBFAF5}
/* 시댁·처가 — 흙빛. 가족·집의 색이면서 위 다섯과 구분된다. 흰 글씨로 6.2:1 */
.prod.clay{background:#7A5240;color:#FBFAF5}

/* 한 장 요약 — 리포트 맨 위. 접히지 않고, 다른 항목과 다르게 보여야 한다.
   여기까지만 읽고 덮는 손님이 실제로 있다. */
.ghead.gS,details.gS{--gc:var(--wood-deep)}
details.gS{border:2px solid var(--wood-deep);background:var(--paper)}
details.gS .body{font-size:15.5px;line-height:1.75}
details.gS summary .stitle{font-weight:900}


/* 팩폭과 긍정 한 줄은 같은 무게다. 하나가 크고 하나가 작으면 큰 쪽만 남는다.
   한때 둘 사이에 짧은 선을 그었는데, 왼쪽에만 걸친 그 토막이 문단 나누기로도
   장식으로도 안 읽히고 앞 줄에 딸린 부스러기처럼 보였다.
   선을 걷고 밝기를 조금 낮춰 봤더니 그것도 마찬가지였다 — 미묘한 차이는
   의도가 아니라 흐릿함으로 읽힌다. **가르는 것은 간격 하나뿐**이다. */
.sc-pair{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.sc-pair .sc-hook,.sc-pair .sc-good{font-size:23px;font-weight:900;letter-spacing:-.04em;
  line-height:1.22;margin:0;text-wrap:balance}

/* 점검 공지. 화면 맨 위에 걸린다 — 손님이 '내 주문이 잘못됐나' 하고
   기다리는 것을 막는 것이 목적이라, 상품보다 먼저 읽혀야 한다. */
.notice{background:var(--earth);color:#17161B;border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px;display:flex;flex-direction:column;gap:4px}
.notice[hidden]{display:none}
/* 첫 화면이 아닐 때. go()가 붙였다 뗀다 — [hidden]과 서로 간섭하지 않는다. */
.notice.offhome{display:none}
/* 제목만 한 칸 띄운다. 본문 문단끼리는 붙여 둔다 —
   세 문단이 각각 7px 사이에 1.6 줄높이까지 겹치면 한 덩이가 아니라
   세 개의 다른 안내처럼 보인다. 같은 이야기의 세 대목이다. */
.notice b{font-size:16.5px;font-weight:900;letter-spacing:-.03em;line-height:1.35;
  margin-bottom:4px}
.notice p{font-size:14px;line-height:1.52}
.notice .when{font-weight:800;font-variant-numeric:tabular-nums}
.notice .hint{font-size:12.8px;opacity:.82;line-height:1.55}

/* 인원 늘리기·줄이기. 슬롯 아래에 붙는다. */
.slotadd{display:flex;flex-direction:column;gap:8px;padding:2px 2px 0}
.slotadd .hint{text-align:center;margin-top:2px}

/* 부모와 나 — 기존 여섯 색과 겹치지 않는 자줏빛. 흰 글씨로 6.6:1 */
.prod.plum{background:#5B3A6E;color:#FBFAF5}
/* 질문만 하기 — 풀이 여덟 상품이 저마다 색을 갖는 사이에서 이것만 무채색이다.
   읽을거리가 아니라 '묻는 창구'라서, 색으로 끼워 넣으면 아홉 번째 풀이처럼 보인다.
   #55525E 위의 흰 글씨는 7.3:1 — 본문까지 읽힌다. */
.prod.slate{background:#55525E;color:#FBFAF5}
/* 이 사람과 나 — 청록. 연애(붉은 계열)와도, 가족(흙·자주)과도 멀어야
   '연애도 가족도 아닌 사이'라는 이 상품의 자리가 목록에서 한눈에 읽힌다.
   sky(#2F6E8F)는 시댁·처가가 이미 쓰고 있어 같은 색을 두 장 두면 두 상품이
   한 덩어리로 보인다. #1F6F63 위의 흰 글씨는 5.9:1 — 본문까지 읽힌다. */
.prod.teal{background:#1F6F63;color:#FBFAF5}

/* 입력 칸 사이 간격. .screen의 gap은 #form-slots '한 덩어리'에만 걸려서,
   그 안의 .slot 여럿은 서로 붙어 겹쳐 보였다. 두 사람 이상인 상품에서 드러난다. */
#form-slots{display:flex;flex-direction:column;gap:14px}

/* ── 가로가 넉넉한 화면 (11) ──
   480px 한 칸은 손에 쥔 화면을 위한 폭이다. 태블릿을 눕히거나 데스크톱에서 열면
   첫 화면의 상품 목록만 끝없이 세로로 흐른다 — 여기만 두 칸으로 편다.

   (24) 나머지 화면은 넓혀 봤자 좋을 게 없었다. 입력 칸을 가로로 늘리면
   그냥 늘어난 상자가 되고, 라벨을 옆으로 빼서 이력서처럼 나눠도
   한 줄에 이름 한 칸만 놓인 성긴 화면이 된다. 세로 한 칸이 원래 이 폼의 모양이다.
   그래서 폭을 넓히는 건 '첫 화면이 켜져 있을 때'로 못박는다 —
   .screen 중 켜진 것에 .on이 붙으므로, 그 조건을 그대로 선택자로 쓴다.

   가로:세로가 4:3보다 넓고 실제 폭도 충분할 때만 편다 —
   폭 조건이 없으면 작은 가로 폰(예: 660×300)에서도 두 칸이 되어 더 좁아진다. */
@media (min-aspect-ratio: 4/3) and (min-width: 900px){
  .wrap:has(#s-home.on){max-width:1040px;padding:28px 24px 72px}
  .wrap:has(#s-home.on) .prods{display:grid;grid-template-columns:1fr 1fr;
    gap:12px;align-items:start}
  .wrap:has(#s-home.on) .hero h1{font-size:46px}
  /* 상품은 두 칸으로 나뉘는데 회원가입 박스만 1040px를 통째로 쓰면,
     단추가 473px까지 늘어나 14.5px 글자가 허허벌판에 뜬다.
     글줄과 단추에 각각 읽기 좋은 폭을 못박는다 — 상자는 넓어도 내용은 안 늘어난다. */
  .wrap:has(#s-home.on) .hauth-s{max-width:62ch}
  .wrap:has(#s-home.on) .hauth-a{max-width:480px}

  /* 제목 오른쪽이 통째로 비어 있었다. 회원가입 박스를 그 자리로 올려 나란히 세운다 —
     아래에 있으면 손가락을 굴려야 보이는데, 이 화면에서 가장 눌러야 할 것이 그것이다.
     자식 전부를 한 줄로 두고 제목·박스만 두 칸으로 갈라 놓는다. 상품 목록처럼
     나머지는 그대로 폭을 다 쓴다 — 자식이 늘어도 배치가 안 깨진다. */
  /* 칸 나눔을 **상품 목록과 똑같이** 맞춘다(1fr 1fr · gap 12px).
     그래야 회원가입 박스가 아래 오른쪽 상품 카드와 폭·세로선이 딱 맞는다 —
     372px처럼 제 마음대로 잡으면 그 줄만 어긋나 보인다. */
  .wrap:has(#s-home.on) #s-home{display:grid;grid-template-columns:1fr 1fr;
    column-gap:12px;align-items:start}
  .wrap:has(#s-home.on) #s-home > *{grid-column:1 / -1}
  .wrap:has(#s-home.on) #s-home > .hero{grid-column:1;grid-row:1}
  /* 위에 붙인다 — 가운데 맞추면 제목 사이에 떠서 어디에 걸린 것인지 안 읽힌다. */
  .wrap:has(#s-home.on) #s-home > #home-auth{grid-column:2;grid-row:1;align-self:start}
  .wrap:has(#s-home.on) #s-home > #home-auth .hauth{margin:0}
  /* 박스가 비어 있으면(로그인했고 샘플도 없을 때) 오른칸을 없앤다 —
     안 그러면 372px가 빈 채로 남아 제목만 괜히 좁아진다. */
  .wrap:has(#s-home.on) #s-home:has(> #home-auth:empty){grid-template-columns:1fr}
  /* 좁아진 칸 안에서는 단추를 쌓는다. 372px에 긴 문구와 로그인이 나란히 못 선다. */
  .wrap:has(#s-home.on) #home-auth .hauth-a.col{flex-direction:column}
  .wrap:has(#s-home.on) #home-auth .hauth-a.col .tb{width:100%}
  .wrap:has(#s-home.on) #home-auth .hauth-s{max-width:none}
}

/* ── 접히는 상품 카드 (19) ──
   상품이 여덟이 되면서 첫 화면이 손가락 열 번을 굴려야 끝났다.
   접힌 카드의 높이는 '머리글 두 줄'로 못박는다 — 라벨과 아이콘은 펼쳤을 때만 나오고,
   접힌 동안 오른쪽에 남는 것은 값과 펼침 표시뿐이다.
   <details>로 만든 이유는 접힘 상태가 키보드·스크린리더에 그대로 전해지기 때문이다 —
   div와 클래스로 흉내 내면 그 정보가 사라진다. */
.prod{display:block;padding:0;margin:0}
.prod > summary{list-style:none;cursor:pointer;border-radius:var(--r);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;
  padding:18px 20px}
.prod > summary::-webkit-details-marker{display:none}
.prod > summary:focus-visible{outline:2.5px solid currentColor;outline-offset:-4px}
/* 파란 덧칠 대신. 카드 색을 살짝 눌러 준다 — 크기를 바꾸면 옆 카드까지 흔들려 보인다. */
.prod > summary:active{filter:brightness(.93)}
/* 라벨과 아이콘은 접혀 있어도 보인다 — 무슨 상품인지가 머리글만으로는 안 읽힌다.
   한 줄을 통째로 쓰고, 그 아래에 머리글과 값이 나란히 선다. */
.prod > summary .ptop{grid-column:1 / -1}
.prod > summary h2{font-size:21px;line-height:1.16;grid-column:1;align-self:center}
/* 펼칠 때 머리글 크기나 안쪽 여백을 바꾸지 않는다. 누른 순간 글자가 커지면
   방금 읽던 줄이 움직여, 열린 내용보다 그 흔들림이 먼저 눈에 들어온다.
   접힘·펼침에서 달라지는 것은 아래 내용이 있고 없고뿐이다. */
/* 값과 펼침 표시는 오른쪽 한 칸에 세로로 쌓는다 — 머리글 높이 안에 들어간다 */
/* 값 칸. flex column으로 두면 <b>1,200</b>과 그 뒤의 'P'가 서로 다른 flex 항목이 되어
   'P'가 아래 줄로 떨어진다 — 실제로 그렇게 나왔다. 블록으로 두고 인라인 흐름에 맡긴다.
   줄높이도 본문(1.62)에서 물려받으면 숫자 한 줄이 36px가 되므로 여기서 눌러 둔다. */
.prod > summary .price{grid-column:2;margin:0;text-align:right;line-height:1.1;
  display:block;white-space:nowrap;align-self:center}
.prod > summary .price b{font-size:20px;line-height:1.15}
.prod > summary .price::after{content:'자세히 ▾';display:block;margin-top:2px;
  font-size:11.5px;font-weight:800;letter-spacing:-.01em}
.prod[open] > summary .price::after{content:'접기 ▴'}
.pbody{display:flex;flex-direction:column;gap:12px;padding:0 20px 20px}
/* 카드 색 위에서 실선은 너무 세다. 같은 색을 옅게 깔아 칸만 나눈다. */
.pbody{border-top:1.5px solid rgba(255,255,255,.28);padding-top:14px}
/* 카드 안의 짧은 설명. 항목 나열(feat)과 값 사이에서 '이게 무엇인지'를 말한다 —
   풀세트를 버튼 이름만으로 알아본 사람이 없었다. */
.pnote{font-size:12.8px;line-height:1.55;font-weight:600;opacity:.92;
  background:rgba(255,255,255,.13);border-radius:14px;padding:11px 13px}
.prod.earth .pnote{background:rgba(23,22,27,.1)}
/* 버튼 두 줄짜리 — 값 아래에 무엇이 묶인 것인지 작게 적는다 */
/* 풀세트 단추의 둘째 줄('개인 사주 2인 + 궁합').
   이 줄 때문에 단추가 위의 '궁합만'보다 18.8px 높아 두 단추가 짝이 안 맞았다.
   글을 지우지 않고 **같은 높이로 맞춘다** — 행간을 붙이고(1.05) 위 여백을 없애,
   늘어나는 몫을 11.6px로 줄인 뒤 아래 :has(small)에서 세로 여백을 14→8px로 깎는다.
   8 + 24.3 + 11.6 + 8 ≒ 52 로 '궁합만'(52.3)과 같아진다. */
.pgo small{display:block;font-size:11px;font-weight:700;opacity:.7;line-height:1.05;margin-top:0}
/* 둘째 줄이 있는 단추만 세로 여백을 깎는다. 한 줄짜리 단추는 14px 그대로 둔다. */
.pacts .pgo:has(small){padding-top:8px;padding-bottom:8px}
/* 미리 보기 링크가 둘 이상인 카드(궁합+풀세트)에서는 둘이 한 묶음으로 읽혀야 한다.
   .peek의 44px 터치 영역은 그대로 두고, 그 위에 겹쳐 있던 pacts의 gap과
   margin-top만 걷어낸다 — 터치 크기를 줄이지 않으면서 글줄만 붙는다. */
.pacts .peek{margin-top:0}
.pacts .peek + .peek{margin-top:-8px}   /* -10px면 터치 영역이 2px 겹쳐 경계에서 옆 버튼이 눌린다 */
.prod.earth .pbody{border-top-color:rgba(23,22,27,.2)}
@media (prefers-reduced-motion:no-preference){
  .prod[open] .pbody{animation:pbopen .18s ease-out}
  @keyframes pbopen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* 오픈 베타 고지. 바닥글·리포트 두 곳에서 같은 말을 한다.
   흐리게 만들지 않는다 — 나중에 지웠을 때 "못 봤다"는 말이 나오면 안 되는 문장이다. */
.beta-foot{font-size:11.8px;line-height:1.65;color:var(--ink);opacity:.9;
  border:1.5px solid var(--line);border-radius:14px;padding:11px 13px}
.beta-note{text-align:left;color:var(--ink);opacity:.9;font-size:12px;line-height:1.6;
  border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:4px}

/* 연애운 카드. 궁합(--fire-deep)·짝사랑(--rose-deep)과 같은 붉은 계열이면
   셋이 한 덩어리로 읽힌다. 주황 쪽으로 갈라 두되 흰 글씨가 읽히는 농도로 내린다(5.5:1). */
.prod.ember{background:#A8442A;color:#FBFAF5}
/* 앞으로 10년. 남색 계열을 새로 들인 이유는 자리가 없어서다 — 하늘(#2F6E8F)은
   푸른 기가 돌고 물(--water)은 보라 쪽이라, 시간을 말하는 카드가 둘 중 하나에
   붙으면 자식 사주나 마음 사주와 한 덩어리로 읽힌다. 흰 글씨로 7:1을 넘긴다. */
.prod.dusk{background:#33517A;color:#FBFAF5}

/* 빠른 반응 세 칸. 누르는 데 드는 품이 별점보다 적어야 의미가 있으므로
   한 손가락으로 닿는 큰 과녁으로 만든다. */
.fb.react{gap:10px}
.rx{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rx button{display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1.5px solid var(--line);background:var(--paper);color:inherit;
  border-radius:16px;padding:13px 6px;font:inherit;cursor:pointer;min-height:76px;
  transition:border-color .15s ease,transform .12s ease}
.rx button span{font-size:12.5px;font-weight:800;letter-spacing:-.02em}
.rx button:not(.on){font-size:26px;line-height:1}
.rx button:hover{border-color:var(--hard)}
.rx button:active{transform:scale(.97)}
.rx button:focus-visible{outline:2.5px solid var(--hard);outline-offset:2px}
/* 고른 것 — 색이 아니라 테두리와 배경으로 표시한다. 셋 중 하나를 붉게 만들면
   '싫어요'를 고른 사람이 자기 선택을 경고로 받게 된다. */
.rx button.on{border-color:var(--hard);background:var(--hard);color:var(--bg);font-size:26px;line-height:1}

/* 값 물음 — 반응과 같은 카드 안에 있으므로 선을 하나 그어 물음이 둘임을 알린다. */
.fb-sep{height:1px;background:var(--line);opacity:.6;margin:4px 0 2px}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.yn button{border:1.5px solid var(--line);background:var(--paper);color:inherit;
  border-radius:14px;padding:13px 6px;font:inherit;font-size:15px;font-weight:800;
  letter-spacing:-.02em;cursor:pointer;transition:border-color .15s ease,transform .12s ease}
.yn button:hover{border-color:var(--hard)}
.yn button:active{transform:scale(.97)}
.yn button:focus-visible{outline:2.5px solid var(--hard);outline-offset:2px}
/* '아니오'도 붉게 칠하지 않는다. 솔직한 답을 경고처럼 되돌려주면 다음부터 안 누른다. */
.yn button.on{border-color:var(--hard);background:var(--hard);color:var(--bg)}

/* 마음 고르기 — 상품 카드가 아니라 입력 칸이다. 세로로 쌓아 한눈에 다섯을 본다.
   .seg처럼 가로로 늘어놓으면 다섯 개가 눌려 글자가 안 읽힌다. */
.mindpick{display:flex;flex-direction:column;gap:8px}
.mindopt{display:block;cursor:pointer}
.mindopt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mindopt span{display:block;position:relative;padding:13px 44px 13px 15px;
  border:1.5px solid var(--line);border-radius:14px;
  transition:border-color .12s,background .12s,color .12s}
.mindopt b{display:block;font-size:15.5px;font-weight:600}
.mindopt em{display:block;margin-top:2px;font-size:13px;font-style:normal;color:var(--muted)}
/* 고른 것 — 테두리만 밝히면 어두운 바탕에서 고른 것과 안 고른 것이 구별되지 않았다.
   성별·혼인 칸(.seg)과 같이 칸을 통째로 채우고, 오른쪽에 체크를 하나 세운다. */
.mindopt input:checked+span{border-color:var(--hard);background:var(--hard);color:var(--bg)}
.mindopt input:checked+span b{color:var(--bg)}
.mindopt input:checked+span em{color:var(--bg);opacity:.74}
.mindopt input:checked+span::after{content:'✓';position:absolute;top:50%;right:15px;
  transform:translateY(-50%);font-size:19px;font-weight:800;line-height:1;color:var(--bg)}
.mindopt input:focus-visible+span{outline:2px solid var(--hard);outline-offset:2px}

/* 상품 카드 안에서 감정을 눌러 보는 자리. 자바스크립트 없이 :has()로만 돈다.
   헤드라인이 '사무치게 슬플 때' 하나로 못 박혀 있어, 다섯 중 하나일 뿐이라는 것을
   글로 설명하는 대신 눌러서 알게 한다. */
.emobox{margin:0 0 14px}
.emochips{display:flex;flex-wrap:wrap;gap:6px}
.emochips input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.emochips label{cursor:pointer;padding:7px 12px;font-size:13.5px;border-radius:999px;
  border:1.5px solid var(--line);transition:border-color .12s,background .12s,color .12s}
.emochips input:checked+label{background:var(--hard);color:var(--bg);border-color:var(--hard)}
.emochips input:focus-visible+label{outline:2px solid var(--hard);outline-offset:2px}
.emoline{display:none;margin:10px 0 0;font-size:14px;line-height:1.7}
.emobox:has(#emo-sad:checked)    .e-sad,
.emobox:has(#emo-lonely:checked) .e-lonely,
.emobox:has(#emo-unfair:checked) .e-unfair,
.emobox:has(#emo-angry:checked)  .e-angry,
.emobox:has(#emo-empty:checked)  .e-empty,
.emobox:has(#emo-confused:checked) .e-confused,
.emobox:has(#emo-tired:checked)  .e-tired{display:block}
/* :has()를 모르는 브라우저에서는 첫 줄만 보인다 — 아무것도 안 보이는 것보다 낫다 */
@supports not selector(:has(*)){ .emoline.e-sad{display:block} }

/* 마지막 확인 창. 손님이 적은 것을 되읽어 주는 자리다. */
#confirm{border:none;border-radius:20px;padding:22px;max-width:420px;width:calc(100% - 32px);
  background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.28)}
#confirm::backdrop{background:rgba(0,0,0,.45)}
#confirm h3{margin:0 0 14px;font-size:19px}
.cf-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.cf-row:last-of-type{border-bottom:none}
.cf-row .k{flex:0 0 88px;color:var(--muted)}
.cf-row .v{flex:1;font-weight:600;word-break:break-all}
.cf-warn{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--warn)}
/* 확인창 맨 위에 뜨는 되짚기. 막지는 않는다 — 그대로 맞는 분들도 계신다. */
.cf-note{margin:0 0 14px;padding:11px 13px;border-radius:11px;
  background:rgba(214,106,74,.09);border:1.5px solid rgba(214,106,74,.32);
  font-size:13px;line-height:1.6}
.cf-note b{color:var(--warn)}
.cf-note .sub{display:block;margin-top:4px;font-size:12.3px;color:var(--muted)}
#cf-mailwrap{margin:16px 0 0;padding-top:14px;border-top:1.5px solid var(--line)}
.cf-acts{display:flex;gap:8px;margin-top:18px}
.cf-acts button{flex:1}
.cf-who{margin:14px 0 4px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cf-who:first-child{margin-top:0}

/* 카드 헤드라인이 아래 칩을 따라 바뀐다. 접혀 있어도 라디오는 DOM에 남으므로
   :checked가 그대로 먹는다 — 자바스크립트 없이 돈다. */
.emohead .hd{display:none}
.prod:has(#emo-sad:checked)    .h-sad,
.prod:has(#emo-lonely:checked) .h-lonely,
.prod:has(#emo-unfair:checked) .h-unfair,
.prod:has(#emo-angry:checked)  .h-angry,
.prod:has(#emo-empty:checked)  .h-empty,
.prod:has(#emo-confused:checked) .h-confused,
.prod:has(#emo-tired:checked)  .h-tired{display:block}
@supports not selector(:has(*)){ .emohead .h-sad{display:block} }

/* 추가 질문 */
#ask-list{display:flex;flex-direction:column;gap:8px;margin:12px 0 0}
.askrow{display:flex;gap:8px;align-items:flex-start}
.askrow input{flex:1}
.askdel{flex:0 0 auto;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);
  background:none;color:var(--muted);cursor:pointer;font-size:13px}
.askdel:hover{border-color:var(--warn);color:var(--warn)}
#ask-add{margin-top:8px}
#askinfo{border:none;border-radius:20px;padding:22px;max-width:420px;width:calc(100% - 32px);
  background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.28)}
#askinfo::backdrop{background:rgba(0,0,0,.45)}
#askinfo h3{margin:0 0 12px;font-size:19px}
#ai-list{margin:12px 0;padding-left:18px;font-size:14px;line-height:1.9}
#ai-list li b{color:var(--warn)}

/* 취소된 주문 카드 */
.vitem.canceled{cursor:default;opacity:.95}
.tag.canceled{background:var(--fire-deep);color:#fff}
/* margin은 여기 적지 않는다 — 아래 '.vcancel{margin:11px 0 0; …}'이 덮어쓴다. */
.vcancel{font-size:13.5px;line-height:1.7;color:var(--muted)}
.vcancel b{color:var(--ink)}
.vredo{margin-top:10px}

/* 팩폭과 긍정 한 줄은 같은 무게다. 하나가 크고 하나가 작으면 큰 쪽만 남는다.
   한때 둘 사이에 짧은 선을 그었는데, 왼쪽에만 걸친 그 토막이 문단 나누기로도
   장식으로도 안 읽히고 앞 줄에 딸린 부스러기처럼 보였다.
   선을 걷고 밝기를 조금 낮춰 봤더니 그것도 마찬가지였다 — 미묘한 차이는
   의도가 아니라 흐릿함으로 읽힌다. **가르는 것은 간격 하나뿐**이다. */

/* 저장한 사람 불러오기 — 입력 칸 맨 위에 놓는다.
   생년월일시를 다시 넣다가 한 자리만 틀리면 아예 다른 명식이 되고,
   그건 값을 치른 뒤에야 드러난다. 다시 안 넣는 것이 가장 확실한 예방이다. */
/* 부모 .f 가 flex-direction:column 을 걸어 두므로 여기서 반드시 되돌린다.
   안 되돌리면 '지우기'가 셀렉트 아래로 떨어져 화면 폭을 다 먹는다 —
   비활성 상태(opacity .4)와 겹쳐서 회색 슬래브 하나가 깔린 것처럼 보였다.
   display:flex 만 덮어써서는 방향이 안 바뀐다. */
.pickrow{display:flex;flex-direction:row;gap:8px;align-items:center}
.pickrow select{flex:1;min-width:0}
/* 옆 선택상자와 같은 테두리·모서리·높이로 맞춘다. 버튼만 다른 모양이면
   한 줄 안에서 둘이 따로 논다. 굵기만 올려 '누르는 것'임을 알린다. */
.pickrow .picksave{flex:0 0 auto;width:auto;white-space:nowrap;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:800;padding:11px 14px;
  border:1.5px solid var(--line);border-radius:14px;
  background:var(--bg);color:var(--ink);
  transition:border-color .12s,background .12s}
.pickrow .picksave:hover{border-color:var(--hard)}
.pickrow .picksave:active{transform:scale(.985)}
.pickrow .picksave:disabled{opacity:.55;cursor:default}
.pickrow .picksave:focus-visible{outline:2.5px solid var(--fire);outline-offset:-1px}
/* 지우기 — 불러오기 칸 옆. 되돌릴 수 없는 일이라 평소엔 눈에 덜 띄게 두고,
   사람을 고른 뒤에만 열린다. 열리면 위험한 쪽 색으로 바뀐다. */
.pickrow .pickdel{flex:0 0 auto;width:auto;white-space:nowrap;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:14px;
  background:var(--bg);color:var(--muted);
  transition:border-color .12s,color .12s}
.pickrow .pickdel:not(:disabled):hover{border-color:var(--warn);color:var(--warn)}
.pickrow .pickdel:disabled{opacity:.4;cursor:default}
.pickrow .pickdel:focus-visible{outline:2.5px solid var(--fire);outline-offset:-1px}
/* 한 줄을 다 쓰는 두툼한 버튼 — '이 사람 저장해 두기'와 '질문 작성하기'가 같은 모양이다.
   둘 다 본 동작(결제)이 아니라 '해도 되고 안 해도 되는' 곁가지라, 채운 버튼(.cta)보다
   한 단계 낮은 테두리형으로 둔다. 대신 입력 칸보다 두툼하게 잡아 눌러야 할 것으로 읽히게 한다.
   부모가 .pickrow 든 .f 든 같은 모양이어야 한다 — 자리를 옮겼다고 모양이 바뀌면 안 된다. */
.picksave, #ask-open{
  display:block;width:100%;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:800;letter-spacing:-.02em;
  padding:15px 16px;
  border:2px solid var(--line);border-radius:99px;
  background:var(--bg);color:var(--ink);
  transition:border-color .12s,background .12s}
.picksave:hover, #ask-open:hover{border-color:var(--hard)}
.picksave:active, #ask-open:active{transform:scale(.985)}
.picksave:disabled{opacity:.55;cursor:default}
.picksave:focus-visible, #ask-open:focus-visible{
  outline:2.5px solid var(--fire);outline-offset:2px}
/* 불러오기 줄 안에 있을 때만 폭을 내용에 맞춘다 */
.pickrow .picksave{display:inline-block;width:auto;padding:11px 14px;font-size:14.5px}
/* 공용 확인 창 — #confirm 과 같은 모양으로 둔다. 창마다 생김새가 다르면
   같은 사이트에서 다른 앱이 뜬 것처럼 읽힌다. */
#ask2{border:none;border-radius:20px;padding:22px;max-width:420px;width:calc(100% - 32px);
  background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.28)}
#ask2::backdrop{background:rgba(0,0,0,.45)}
#ask2 h3{margin:0 0 14px;font-size:19px}

/* 취소·되돌아가기 단추. CSS에 정의가 아예 없어서 맨몸 회색 네모로 보였다.
   확인 쪽(.cta)과 같은 알약 모양·같은 높이로 두되, 채우지 않고 테두리만 둔다 —
   되돌리는 쪽이 더 눈에 띄면 손이 그리로 먼저 간다. */
.ghost{
  display:inline-block;cursor:pointer;
  font:inherit;font-size:16px;font-weight:800;letter-spacing:-.02em;
  padding:17px;border-radius:99px;
  border:2px solid var(--line);background:transparent;color:var(--ink);
  transition:border-color .12s,background .12s}
.ghost:hover{border-color:var(--hard)}
.ghost:active{transform:scale(.985)}
.ghost:disabled{opacity:.5;cursor:default}
.ghost:focus-visible{outline:2.5px solid var(--fire);outline-offset:2px}

/* 누를 수 있는 것에는 손 모양이 떠야 한다. 기본값(화살표)이면 눌러도 되는지 모른다. */
button:not(:disabled),summary,label[for],.mindopt,.emochips label{cursor:pointer}
button:disabled{cursor:default}

/* ── 답해 드릴 수 없는 질문 안내 (25) ──
   값을 치르기 전에 보여야 하는 글이라 감추지 않는다. 다만 펼쳐 두면
   질문 칸보다 길어져 정작 적을 자리를 아래로 밀어내므로, 접은 채로 둔다.
   무서운 경고가 아니라 '이건 못 해 드립니다'라는 안내라 색을 쓰지 않는다. */
.askforbid{margin:2px 0 0;border:1.5px solid var(--line);border-radius:14px;
  padding:0;overflow:hidden}
.askforbid>summary{list-style:none;cursor:pointer;padding:11px 14px;
  font-size:12.5px;font-weight:700;letter-spacing:-.02em;color:var(--muted);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.askforbid>summary::-webkit-details-marker{display:none}
.askforbid>summary span{font-weight:600;opacity:.65;white-space:nowrap}
.askforbid[open]>summary span::after{content:' ▴'}
.askforbid:not([open])>summary span::after{content:' ▾'}
.askforbid>summary:hover{color:var(--ink)}
.askforbid>summary:focus-visible{outline:2.5px solid var(--fire);outline-offset:-2px}
.askforbid ul{list-style:none;margin:0;padding:0 14px 4px}
.askforbid li{padding:8px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.55}
.askforbid li b{display:block;font-weight:800;color:var(--ink)}
.askforbid li span{color:var(--muted)}
.askforbid .hint{padding:0 14px 12px;margin:0}

/* ── 무엇에 이어 붙는 답인지 (26) ──
   이어서 질문한 글은 본문이 "말씀드린 대로"처럼 앞 글을 계속 가리킨다.
   그 표시가 없으면 공유 링크로 받은 사람은 무슨 말인지 알 수 없다.
   경고가 아니라 안내라 색을 쓰지 않고, 본문보다 한 단계 낮춰 둔다. */
.basedon{margin:0 0 12px;padding:11px 14px;border-radius:14px;
  background:var(--paper);border:1.5px solid var(--line);
  color:var(--muted);font-size:12.8px;line-height:1.6;font-weight:600}
@media print{ .basedon{border:0;padding:0 0 6px;background:none} }

/* ── 답해 드릴 수 없었던 질문 (27) ──
   경고가 아니라 **안내와 환불 영수증**이다. 붉은색을 옅게만 쓴다 —
   진하게 쓰면 손님이 뭘 잘못한 것처럼 읽힌다. 잘못한 사람은 없다. */
.vcancel{margin:11px 0 0;padding:13px 14px;border-radius:16px;
  background:rgba(232,80,60,.06);border:1px solid rgba(232,80,60,.22)}
/* 머리글과 환불 금액을 한 줄에. 손님이 먼저 보고 싶은 것은 '돈은 돌아왔는가'다 */
/* 머리글과 환불 칩은 **한 줄에 붙어 있어야** 짝으로 읽힌다.
   wrap을 두었더니 좁은 화면에서 칩이 아래로 떨어져 홀로 떠 있었다.
   머리글이 줄어들 수 있게(min-width:0) 두고 칩은 줄이지 않는다. */
.vc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px}
.vc-top .vc-head{min-width:0}
.vc-head{margin:0;font-size:12.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.vc-refund{flex:none;font-size:11px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  padding:4px 10px;border-radius:99px;background:var(--wood);color:#17161B}

/* 묶음이 읽히려면 안쪽은 붙이고 바깥쪽은 띄운다 */
.vc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.vc-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 9px;align-items:start}
.vc-list .qno{grid-row:1;grid-column:1;margin-top:1px;
  font-size:10.5px;font-weight:800;white-space:nowrap;line-height:1.5;
  padding:2px 8px;border-radius:99px;background:var(--fire-deep);color:#FBFAF5}
.vc-list .qtext{grid-row:1;grid-column:2;font-size:12.8px;line-height:1.5;
  font-weight:700;color:var(--ink);word-break:keep-all}
.vc-list .qwhy{grid-row:2;grid-column:2;font-size:11.8px;line-height:1.5;color:var(--muted)}
.vc-list li:not(:has(.qno)) .qtext,
.vc-list li:not(:has(.qno)) .qwhy{grid-column:1 / -1}

/* 다음에 할 일 두 가지를 한 줄에 놓는다. 세로로 쌓으면 카드가 길어지고
   '다시 주문'과 '지우기'가 같은 무게로 보인다 — 하나는 하던 일을 잇는 것이고
   하나는 되돌릴 수 없는 정리다. 폭으로 그 차이를 말한다. */
/* 두 단추의 **키를 맞춘다.** 하나가 두 줄이 되어 늘어나면 옆의 짧은 단추가
   길쭉한 타원이 되어 같은 줄에 있는 것처럼 안 보인다. 높이를 못박고 글을 줄였다. */
.vitem .vacts{grid-column:1 / -1;display:flex;align-items:stretch;gap:8px;margin-top:12px}
.vitem .vredo{flex:1;min-width:0;margin:0;padding:0 14px;height:46px;font-size:13px;
  border-width:1.5px;border-radius:99px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vitem .vdel{flex:none;margin:0;padding:0 18px;height:46px;
  border:1.5px solid var(--line);border-radius:99px;background:none;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:-.02em;color:var(--muted);
  transition:color .12s,border-color .12s,background .12s}
.vitem .vdel:hover{color:var(--warn);border-color:var(--warn);
  background:rgba(232,80,60,.08)}
.vitem .vdel:active{transform:scale(.97)}
.vitem .vdel:disabled{opacity:.5;cursor:default;transform:none}
.vitem .vdel:focus-visible{outline:2.5px solid var(--fire);outline-offset:2px}