@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 03 READ · 입력 폼 · 시각 · 달력 · 원국 카드 · 8줄 요약 — index.html 에 적힌 순서대로 불러온다 */
/* ============ READ (birth input) ============ */
.read{padding:var(--sp-9) 0;background:var(--bg-2);transition:background .5s}
.read-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:stretch}
/* 제목은 무조건 한 줄이어야 한다(섹션 하나가 한 화면에 들어가야 하므로).
vw 기준으로는 안 된다 — 이 칼럼은 980px 에서 1단으로 접히면서 폭이 두 배로 뛰기 때문에
뷰포트 폭과 칼럼 폭의 비율이 일정하지 않다. 칼럼 자체를 컨테이너로 삼아 cqi 로 잰다. */
.read-form{display:flex;flex-direction:column;container-type:inline-size}
/* "여덟 글자로 당신의 기운을 읽습니다." = 한글 15자(1em) + 공백 4 + 마침표,
자간 -.04em 을 빼면 약 15.5em → 100cqi/15.5 ≈ 6.4cqi 가 한계다. 6.1 로 여유를 둔다. */
.read-form .sec-title{text-align:left;margin:20px 0;
font-size:clamp(17px,6.1cqi,34px);letter-spacing:-.04em;white-space:nowrap}
.read-form .sec-sub{margin:0 0 var(--sp-7);max-width:none;word-break:keep-all}
@media (max-width:600px){.read-form .sec-sub br{display:none}}
.pc-br{display:inline}
@media (max-width:900px){.pc-br{display:none}}
.rd-grp{margin-bottom:var(--sp-6)}
/* :not(.rd-chk) — 이 규칙은 '필드 이름표'용이다. 체크박스 라벨(.rd-chk)도 .rd-grp 의
직계 label 이라 그냥 두면 (0,1,1) 로 (0,1,0) 인 .rd-chk 를 이겨 display:block 이 걸린다.
그러면 18px 체크박스가 블록으로 한 줄을 먹고 글자가 아래로 밀리고,
mono·대문자·자간까지 함께 상속돼 본문이 라벨처럼 보인다. */
.rd-grp>label:not(.rd-chk){display:block;font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--sp-1)}
.rd-input{font-weight:var(--fw-d4);width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
padding:var(--sp-2) 0;font-family:var(--serif);font-size:var(--fs-7);color:var(--ink);letter-spacing:.02em;transition:border-color .25s}
.rd-input:focus{outline:none;border-color:var(--cobalt)}
/* 날짜·시각 모두 커스텀으로 바뀌어 네이티브 입력이 남아 있지 않다.
::-webkit-calendar-picker-indicator 와 accent-color 규칙은 그래서 걷어냈다.
(accent-color 는 크롬 달력에 적용되지 않았다 — 유일한 레버가 막힌 셈이라 직접 만들었다) */
select.rd-input{-webkit-appearance:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808893' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 2px center}
select.rd-input:disabled{opacity:.4;cursor:not-allowed}
select.rd-input option{color:#111827;background:#fff}
/* ---- 커스텀 시각 선택 (네이티브 time 팝업 대체) ----
라운드는 동심(concentric)으로 잡는다 : 바깥 14 − 안쪽 여백 8 = 항목 6.
폰 목업(--r-device 44 / --r-screen 34)과 같은 규칙이다. */
.rd-twrap{position:relative}
button.rd-time{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
text-align:left;cursor:pointer}
button.rd-time svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink-3);
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
button.rd-time:disabled{opacity:.4;cursor:not-allowed}
button.rd-time[aria-expanded="true"]{border-color:var(--cobalt)}
.rd-tpop{position:absolute;left:0;top:100%;z-index:40; /* 입력 밑줄 바로 아래에 붙인다(간격 없음) */
background:var(--card);border:1px solid var(--line);border-radius:var(--r-2);
box-shadow:var(--shadow-lg);padding:var(--sp-3)}
.rd-tpop[hidden]{display:none}
/* 오전/오후 — 남/여 세그먼트(.seg)와 같은 부품. 선택 표시도 같은 규칙을 쓴다 */
.rd-tseg{display:flex;width:100%}
.rd-tseg .seg-b{flex:1;font-size:var(--fs-3);padding:var(--sp-1) var(--sp-2)}
/* 두 열은 헤어라인 하나로 위 세그먼트와 나뉜다. 상자를 더 두르지 않는다 */
.rd-tcols{display:flex;gap:var(--sp-3);justify-content:center;
margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line-2)}
.rd-tcolw{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}
.rd-tlab{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.16em;color:var(--ink-3)}
/* 분 60개를 다 펼치면 화면을 넘긴다 → 열마다 따로 스크롤한다.
overscroll-behavior:contain — 열 끝에서 판(.pg) 스크롤로 넘어가지 않게 막는다.
position:relative — 항목의 offsetTop 기준을 이 열로 만든다.
없으면 기준이 .rd-tpop 이 되어 '선택값 가운데 맞추기' 계산이 어긋난다.
위아래 페이드(mask) — 목록이 상자 안에서 잘리는 게 아니라 흘러 들어오고
흘러 나가는 것으로 읽힌다. 다이얼이라는 신호를 스크롤바 없이 만든다.
scroll-snap — 손을 떼면 값이 칸에 맞춰 선다. */
/* 높이는 JS(fit)가 버튼 아래 남은 공간을 재서 --tcol-h 로 넣는다.
변수가 없을 때(스크립트 전)를 대비해 216px 을 기본값으로 둔다. */
.rd-tcol{position:relative;list-style:none;margin:0;padding:10px 0;
display:flex;flex-direction:column;align-items:center;gap:2px;
width:62px;max-height:var(--tcol-h,216px);overflow-y:auto;overscroll-behavior:contain;
scroll-snap-type:y proximity;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
scrollbar-width:thin;scrollbar-color:var(--metal) transparent}
/* 윈도우 크롬은 스크롤바를 스타일하는 순간 위아래 화살표 버튼을 같이 그린다 → 지운다 */
.rd-tcol::-webkit-scrollbar{width:4px}
.rd-tcol::-webkit-scrollbar-button{display:none;height:0;width:0}
.rd-tcol::-webkit-scrollbar-track{background:transparent}
.rd-tcol::-webkit-scrollbar-thumb{background:var(--metal);border-radius:var(--r-full)}
@media(prefers-reduced-motion:reduce){.rd-tcol{scroll-snap-type:none}}
/* 항목 규격은 달력 날짜 칸(.rd-cday)에 맞춘다 — 높이 34, 알약 라운드, 12px.
두 자리 숫자(시·분·월)는 34×34 정원이 되고, 폭이 더 필요한 열
(오전/오후 · 네 자리 연도)은 같은 곡률의 알약으로 늘어난다.
→ 두 컨트롤(시각·달력)이 하나의 선택 언어를 쓴다. */
.rd-topt{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.06em;color:var(--ink-2);
height:30px;min-width:30px;padding:0 var(--sp-2);
display:flex;align-items:center;justify-content:center;cursor:pointer;
border-radius:var(--r-full);transition:background .16s ease,color .16s ease}
/* 호버는 무채색 — 선택(퍼플)과 같은 계열이면 둘이 서로를 지운다 */
.rd-topt:hover{background:var(--line-2);color:var(--ink)}
.rd-topt[aria-selected="true"],
.rd-topt[aria-selected="true"]:hover{background:var(--brand-grad);color:#fff}
/* ---- 시각 팝업 : 다이얼 휠 (시안 1) ----
달력과 같은 274×270. 스크롤바 없이 가운데 하늘색 띠에 온 값이 선택값이다.
.rd-tcol/.rd-topt 는 달력의 연·월 목록도 쓰므로 여기서는 #rdTimePop 안으로만 한정한다.
항목 34px · 위아래 여백은 JS(center)가 '열 높이 − 34 의 절반'으로 넣어 첫·끝 값도 띠에 온다. */
#rdTimePop{width:274px;height:326px;display:flex;flex-direction:column} /* 아래 취소 · 적용(44 + 간격 12) 만큼 270 → 326 */
#rdTimePop[hidden]{display:none}
#rdTimePop .rd-tseg{flex:none}
#rdTimePop .rd-tcols{position:relative;flex:1 1 auto;min-height:0;gap:6px;align-items:stretch;
margin-top:var(--sp-3);padding-top:0;border-top:0}
#rdTimePop .rd-tcolw{min-height:0;gap:var(--sp-1)}
#rdTimePop .rd-tlab{height:16px;line-height:16px;flex:none}
/* 선택 띠 — 라벨(16) + 간격(4) 아래 남은 열 높이의 정가운데 */
#rdTimePop .rd-tcols::before{content:"";position:absolute;left:var(--sp-2);right:var(--sp-2);
top:calc(20px + (100% - 20px) / 2);height:34px;transform:translateY(-50%);
border-radius:var(--r-full);background:var(--cobalt-soft);pointer-events:none}
#rdTimePop .rd-tcolon{align-self:center;margin-top:20px;font-family:var(--mono);font-size:17px;color:var(--ink-3);position:relative}
#rdTimePop .rd-tcol{flex:1 1 auto;min-height:0;max-height:none;width:72px;gap:0;padding:0;
scroll-snap-type:y mandatory;scrollbar-width:none;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 66%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 66%,transparent 100%)}
#rdTimePop .rd-tcol::-webkit-scrollbar{display:none}
#rdTimePop .rd-topt{flex:none;height:34px;width:100%;font-size:var(--fs-3);scroll-snap-align:center;position:relative;
transition:color .15s ease,font-size .15s ease}
#rdTimePop .rd-topt:hover{background:transparent;color:var(--ink)}
#rdTimePop .rd-topt[aria-selected="true"],
#rdTimePop .rd-topt[aria-selected="true"]:hover{background:transparent;color:var(--ink);font-size:17px;font-weight:500}
@media(prefers-reduced-motion:reduce){#rdTimePop .rd-tcol{scroll-snap-type:y mandatory}}
/* ---- 커스텀 달력 (네이티브 date 팝업 대체) ----
시각 목록과 달리 선택 표시는 '면을 채우는' 쪽이다.
날짜 격자는 칸이 정사각이라 채운 원이 덩어리로 읽히지 않고, 오히려
7×6 격자 안에서 한 칸을 짚어내는 데는 면이 밑줄보다 빠르다. */
.rd-cpop{width:274px}
.rd-chead{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-1)}
.rd-cnav{flex:none;width:30px;height:30px;border:0;background:transparent;cursor:pointer;
border-radius:var(--r-full);color:var(--ink-2);font-size:var(--fs-6);line-height:1;
font-family:var(--sans);transition:background .16s ease,color .16s ease}
.rd-cnav:hover:not(:disabled){background:var(--line-2);color:var(--ink)}
.rd-cnav:disabled{opacity:.28;cursor:not-allowed}
.rd-ctitle{flex:1;border:0;background:transparent;cursor:pointer;color:var(--ink);
font-family:var(--mono);font-size:var(--fs-3);letter-spacing:.06em;
padding:var(--sp-2) 0;border-radius:calc(var(--r-2) - var(--sp-2));
transition:background .16s ease}
.rd-ctitle:hover{background:var(--line-2)}
.rd-cdow,.rd-cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
/* display 를 명시하면 UA 의 [hidden]{display:none} 을 이겨버린다 → 직접 되돌려 준다 */
.rd-cdow[hidden],.rd-cgrid[hidden]{display:none}
.rd-cdow{margin-bottom:var(--sp-1)}
.rd-cdow span{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.04em;
color:var(--ink-3);text-align:center;padding:var(--sp-1) 0}
.rd-cdow .sun{color:var(--fire-t)}
.rd-cdow .sat{color:var(--water-t)}
.rd-cgrid span{height:34px} /* 1일 앞의 빈 칸 */
.rd-cday{height:34px;border:0;background:transparent;cursor:pointer;
font-family:var(--mono);font-size:var(--fs-2);color:var(--ink-2);
border-radius:var(--r-full);transition:background .16s ease,color .16s ease}
.rd-cday:hover:not(:disabled){background:var(--line-2);color:var(--ink)}
.rd-cday:disabled{opacity:.22;cursor:not-allowed}
.rd-cday[aria-selected="true"],
.rd-cday[aria-selected="true"]:hover{background:var(--brand-grad);color:#fff}
.rd-cday:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
/* 연·월 목록은 .rd-topt 규칙을 그대로 쓴다(.rd-copt 는 JS 훅 전용).
다만 이 패널 위에는 세그먼트가 없으므로 .rd-tcols 의 구분선은 걷어낸다 */
.rd-cpanel .rd-tcol{max-height:238px}
.rd-cpanel .rd-tcols{margin-top:0;padding-top:0;border-top:0}
@media(prefers-reduced-motion:reduce){.rd-cday,.rd-cnav,.rd-ctitle{transition:none}}
.rd-topt:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.rd-topt{transition:none}}
/* 달력 · 시각 팝업 아래 취소 / 적용 (앱 AN-01 과 같은 짝) — 고른 값은 적용을 눌러야 확정, 취소 · 바깥 클릭 · Esc 는 열기 전 값으로 */
.rd-pfoot{flex:none;display:flex;gap:8px;margin-top:var(--sp-3)}
.rd-pbtn{height:44px;border:0;border-radius:var(--r-full);font-family:var(--sans);font-size:var(--fs-3);font-weight:600;cursor:pointer;transition:transform .2s ease,filter .2s ease}
.rd-pbtn:active{transform:scale(.97)}
.rd-pbtn--no{flex:0 0 36%;background:var(--cobalt-soft);color:var(--ink-2)}
.rd-pbtn--ok{flex:1;background:var(--brand-grad);color:#fff}
.rd-pbtn--ok:hover{filter:brightness(1.05)}
.rd-pbtn:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.rd-chk{display:inline-flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);cursor:pointer;font-size:var(--fs-3);color:var(--ink-2)}
.rd-chk input{position:absolute;opacity:0;width:0;height:0}
/* 기본 상태 : 흰 바탕 + 또렷한 테두리. 연한 하늘 바탕 위에서 '빈 칸'으로 분명히 읽히게 */
.rd-chk .box{width:18px;height:18px;border:1px solid rgba(11,31,58,.24);background:var(--card);border-radius:var(--r-1);display:grid;place-items:center;transition:.2s;flex:0 0 auto}
.rd-chk:hover .box{border-color:var(--cobalt)}
.rd-chk input:checked+.box{background:var(--brand-grad);border-color:transparent}
.rd-chk input:checked+.box::after{content:"";width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg) translateY(-1px)}
.rd-chk input:focus-visible+.box{outline:2px solid var(--cobalt);outline-offset:2px}
/* 폼 하단 버튼 줄 : 내 기운 읽기(메인) */
.rd-acts{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6);align-self:flex-start}
/* 크기 = 사이트 기본 .btn(요약 하단 '내 오행 아이템 보러가기')과 같은 50px · 좌우 24px · 16px.
헤더 CTA(38px) 한 단계 위 — 바로 위 달력·성별 타일(38px)보다 커서 제출 버튼이 위계상 앞선다.
line-height:1 + 아이콘 block → 한글 글자 박스와 화살표가 세로 가운데에 정확히 맞는다 */
.rd-acts .btn{height:50px;padding:0 var(--sp-5);font-size:var(--fs-4);line-height:1;gap:var(--sp-2)}
.rd-acts .btn svg{display:block;width:16px;height:16px;flex:none}
.rd-hint{margin-top:var(--sp-4);font-size:var(--fs-2);line-height:1.7;color:var(--ink-3)}
.rd-stage{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);
display:grid;place-items:center;text-align:center;padding:var(--sp-7);min-height:380px}
.rd-ph{font-weight:var(--fw-d5);font-family:var(--serif);font-size:var(--fs-5);line-height:1.7;color:var(--ink-3);letter-spacing:var(--ls-d5)}
/* ---- 분석 중 : 木火土金水 다섯 점이 원을 돌며 차례로 숨쉰다 ---- */
.rd-load{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.rd-load[hidden]{display:none}
.rd-spin{position:relative;width:76px;height:76px;margin-bottom:var(--sp-4);animation:rdSpin 2.4s linear infinite}
.rd-spin i{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
transform:rotate(var(--a)) translateY(-28px);animation:rdPulse 1.2s ease-in-out infinite;animation-delay:var(--d)}
/* 상생 순서(木→火→土→金→水)로 시계 방향에 놓는다 */
.rd-spin .w{--a:0deg; --d:0s; background:#4FB98A}
.rd-spin .f{--a:72deg; --d:.24s; background:#D9508C}
.rd-spin .e{--a:144deg;--d:.48s; background:#D2A56A}
.rd-spin .m{--a:216deg;--d:.72s; background:#7F8FA1}
.rd-spin .s{--a:288deg;--d:.96s; background:#25272B}
@keyframes rdSpin{to{transform:rotate(360deg)}}
/* 크기는 scale 이 아니라 opacity·filter 로만 — transform 은 원 위 자리(rotate·translate)가 쓰고 있다 */
@keyframes rdPulse{0%,100%{opacity:.35}50%{opacity:1}}
/* 분자 스페시멘 : 3초 동안 木→火→土→金→水.
점 다섯 로더는 WebGL 을 못 쓸 때(.no-spec)만 보인다 */
.rd-spec{display:block;width:min(192px,27.2cqh);height:min(192px,27.2cqh);aspect-ratio:1;margin-bottom:var(--sp-5)} /* 240px 의 80% */
.rd-load:not(.no-spec) .rd-spin{display:none}
.rd-load.no-spec .rd-spec{display:none}
/* 분자 아래 木火土金水 — 앱 AN-02 와 같은 연출 : 지금 기운만 진하게 · 살짝 떠오름 */
.rd-els{display:flex;gap:14px;margin:-4px 0 var(--sp-2);font-family:var(--serif);font-size:17px;font-weight:600;line-height:1}
.rd-els i{font-style:normal;opacity:.2;transition:opacity .3s ease,transform .3s ease}
.rd-els i.on{opacity:1;transform:translateY(-3px)}
.rd-els .w{color:#5E7A3C} .rd-els .f{color:#D9508C} .rd-els .e{color:#B08A3C} .rd-els .m{color:#6B7480} .rd-els .s{color:#3B88D6}
@media(prefers-reduced-motion:reduce){ .rd-els i{transition:none} .rd-els i.on{transform:none} }
.rd-load-t{font-family:var(--serif);font-weight:var(--fw-d5);font-size:var(--fs-5);letter-spacing:var(--ls-d5);color:var(--ink)}
.rd-load-s{font-size:var(--fs-2);color:var(--ink-3);letter-spacing:.02em;min-height:1.5em;transition:opacity .25s ease}
.rd-load-s.out{opacity:0}
@media(prefers-reduced-motion:reduce){.rd-spin,.rd-spin i{animation:none}.rd-spin i{opacity:1}}
.rd-res{width:100%;text-align:left;container-type:inline-size}
.rd-res-lab{font-size:var(--fs-1);letter-spacing:.12em;color:var(--cobalt-t);margin-bottom:var(--sp-5)}
.rd-bars{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.rd-btop{font-weight:var(--fw-d5);display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);font-size:var(--fs-3);margin-bottom:var(--sp-2);letter-spacing:var(--ls-d5)}
.rd-btop .sc{font-family:var(--mono);font-size:var(--fs-2);color:var(--ink-2)}
.rd-btrack{height:7px;background:var(--line);border-radius:var(--r-full);overflow:hidden}
/* display:block 필수 — 이 요소는 이라 기본이 인라인이고,
인라인 비대체 요소에는 width·height 가 적용되지 않는다.
아래 .rd-bfill 의 position:relative 는 블록화 기능이 없어(absolute·fixed 와 다르다)
이게 없으면 막대가 0 폭으로 사라지고, 옅은 고스트(opacity .2)만 남아 흐리게 보인다. */
.rd-bfill{display:block;height:100%;border-radius:var(--r-full);width:0;transition:width 1s cubic-bezier(.22,1,.36,1)}
/* 한 줄 고정. 문장은 약 22em 이라 100cqi/22 ≈ 4.5cqi 가 한계 → 4.3cqi 로 여유를 둔다.
14px 을 넘겨 키우지는 않는다(본문이 막대 라벨보다 커지면 안 된다). */
.rd-res-note{font-size:clamp(10px,4.3cqi,var(--fs-3));line-height:1.7;letter-spacing:-.015em;
color:var(--ink-2);white-space:nowrap}
.rd-res-note b{font-weight:700}
/* 아래 요약으로 가는 안내 — 결과 문장보다 한 단계 작고 연하게, 위 여백으로 해석과 떼어 놓는다 */
.rd-next{margin:var(--sp-3) 0 0;font-size:var(--fs-2);line-height:1.6;color:var(--ink-3);word-break:keep-all}
/* 보러가기 — 밑줄 링크. 아래 화살표가 위아래로 살짝 오르내리며 '아래로 이어짐' 을 알린다 */
.rd-next-go{display:inline-flex;align-items:center;gap:4px;margin-left:var(--sp-1);
color:var(--cobalt-t);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.rd-next-go:hover{text-decoration-thickness:2px}
.rd-next-go svg{width:14px;height:14px;flex:none;animation:rdNextBob 1.6s ease-in-out infinite}
@keyframes rdNextBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@media(prefers-reduced-motion:reduce){.rd-next-go svg{animation:none}}
/* ---- 원국(四柱) · 실만세력 결과 ---- */
.rd-stage.has-res{place-items:stretch;text-align:left;padding:var(--sp-6)}
.rd-live{margin-top:var(--sp-3);font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.06em;color:var(--ink-3)}
.rd-live b{color:var(--cobalt-t);font-weight:600}
/* 칩과 느낌표의 높이를 한 값으로 묶는다. 인라인 요소의 그려지는 높이는 line-height 가
아니라 폰트 메트릭이 정해서 서체마다 달라지므로, 둘 다 inline-flex + 고정 높이로 못박는다. */
.rd-grp>label .req{--chip-h:20px;
display:inline-flex;align-items:center;height:var(--chip-h);vertical-align:middle;
font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.1em;color:var(--fire-t);
border:1px solid currentColor;border-radius:var(--r-full);padding:0 var(--sp-2);margin-left:var(--sp-2)}
/* ---- 필수 칩 옆 느낌표 · 호버 툴팁 ----
라벨은 mono·대문자·자간 .14em 이라 툴팁 본문이 그대로 상속받으면 읽히지 않는다
→ .rd-tip 에서 서체·자간·정렬을 전부 되돌려 놓는다. */
.rd-tipwrap{position:relative;display:inline-flex;vertical-align:middle;margin-left:var(--sp-2);line-height:1}
/* 라인 아이콘 : 브랜드 컬러 테두리 + 느낌표. 회색 테두리는 라벨 옆에서 묻히므로 브랜드 컬러로 둔다.
느낌표는 텍스트 글리프를 쓰면 mono 폰트의 자간·베이스라인 때문에 찌그러져 보였다
→ 24 viewBox 안에서 세로 중심이 정확히 12 인 SVG(막대 6.5–13.5, 점 17.5)로 그린다. */
.rd-tipbtn{width:18px;height:18px;padding:0;display:inline-grid;place-items:center;cursor:help;
box-sizing:border-box;border:1.5px solid var(--brand);border-radius:var(--r-full);background:transparent;color:var(--brand);
transition:box-shadow .2s,transform .2s,background .2s}
.rd-tipbtn svg{display:block;width:12px;height:12px}
.rd-tipwrap:hover .rd-tipbtn,.rd-tipwrap.on .rd-tipbtn,.rd-tipbtn:focus-visible{
background:color-mix(in srgb, var(--brand) 10%, transparent);
box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 24%, transparent);transform:scale(1.08)}
.rd-tipbtn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* 아이콘 기준 가운데 정렬(left:50%/-50%)이면 폭 360px 의 절반이 왼쪽으로 나가면서
폼 칼럼 바깥으로 삐져나온다. 아이콘 왼쪽에 붙여 아래로 펼친다. */
/* 폭은 내용에 맞춘다(max-content) — 고정 폭이면 keep-all 줄바꿈 뒤 오른쪽 여백만 넓게 남는다 */
.rd-tip{position:absolute;left:-10px;top:calc(100% + 10px);z-index:50;width:max-content;max-width:min(360px,calc(100vw / var(--vz,1) - var(--sp-6) * 2));
/* 사이트 공통 말풍선 모양 — 결과 화면 ! 말풍선(.rd-pop)과 같은 테두리 · 그림자 · 글자색 */
background:var(--card);border:1px solid rgba(11,31,58,.16);border-radius:var(--r-2);
box-shadow:0 2px 6px rgba(11,31,58,.08),0 16px 36px rgba(11,31,58,.18);
padding:var(--sp-3) var(--sp-4);text-align:left;text-transform:none;word-break:keep-all;
font-family:var(--sans);font-size:var(--fs-2);font-weight:400;line-height:1.65;letter-spacing:-.01em;color:var(--ink);
opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.rd-tip::before{content:"";position:absolute;left:14px;top:-5px;width:9px;height:9px;
background:var(--card);border-left:1px solid rgba(11,31,58,.16);border-top:1px solid rgba(11,31,58,.16);transform:rotate(45deg)}
.rd-tip .t{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}
.rd-tip b:not(.t){color:var(--cobalt-t);font-weight:600}
.rd-tip .tl{display:block}
.rd-tip .tl+.tl{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line-2)}
.rd-tipwrap:hover .rd-tip,.rd-tipwrap:focus-within .rd-tip,.rd-tipwrap.on .rd-tip{
opacity:1;visibility:visible;transform:translateY(0)}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:var(--r-full);padding:var(--sp-1);gap:var(--sp-1);transition:border-color .2s}
.seg.err{border-color:var(--fire-t)}
.seg-b{font-family:var(--sans);font-size:var(--fs-4);color:var(--ink-2);background:transparent;border:0;
border-radius:var(--r-full);padding:var(--sp-2) var(--sp-5);cursor:pointer;transition:.2s;letter-spacing:-.01em}
.seg-b[aria-checked="true"]{background:var(--brand-grad);color:#fff}
.seg-b:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.rd-opts{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.rd-opts .rd-chk{margin-top:0}
.rd-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-4);flex-wrap:wrap}
.rd-head .rd-res-lab{margin-bottom:0}
.rd-who{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.08em;color:var(--ink-3)}
/* ---- 원국 카드 (시안 B · 카드 뒤집기) ----
규칙 : 그림자 + 아래 파란 '뒤집기' = 누를 수 있다 / 테두리 없는 회색 글자 = 그냥 정보.
앞·뒷면을 같은 격자 칸에 겹쳐 두어, 카드 높이 = 두 면 중 긴 쪽 (고정 높이 없음) */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.pil{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:center}
button.pil{cursor:pointer}
button.pil:focus-visible{outline:2px solid var(--cobalt-t);outline-offset:3px;border-radius:var(--r-2)}
/* 뒤집기 = 3D 회전 대신 '가로로 접혔다 펴지는' 2D 연출.
3D 로 180° 돌린 면은 브라우저가 글자를 이미지처럼 그려 흐릿해진다 → 다 펴진 뒤엔 변형이 0 이라 글자가 선명하다 */
.pil .in{display:grid;height:100%}
.pil .face{grid-area:1/1;display:flex;flex-direction:column;align-items:center;
border:1px solid var(--line);border-radius:var(--r-2);background:var(--card);
padding:var(--sp-3) var(--sp-2);box-shadow:0 6px 16px rgba(11,31,58,.07);transition:box-shadow .2s}
.pil.self .face{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt),0 8px 20px rgba(87,161,234,.2)}
button.pil:hover .face{box-shadow:0 12px 26px rgba(11,31,58,.13)}
button.pil.self:hover .face{box-shadow:0 0 0 1px var(--cobalt),0 12px 26px rgba(87,161,234,.3)}
.pil .back,.pil[aria-pressed="true"] .front{visibility:hidden}
.pil[aria-pressed="true"] .back{visibility:visible}
@keyframes pilOut{to{transform:scaleX(0)}}
@keyframes pilIn{from{transform:scaleX(0)}}
.pil.t-out .in{animation:pilOut .15s ease-in forwards}
.pil.t-in .in{animation:pilIn .2s ease-out}
.pil .back{align-items:stretch;text-align:left;padding:var(--sp-3)}
.pil .pos{font-size:var(--fs-1);font-weight:600;color:var(--ink-2);letter-spacing:-.01em}
.pil.self .pos{color:var(--cobalt-t)}
.pil .pos .me{font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--cobalt-t);
border-radius:var(--r-full);padding:1px 6px;margin-left:4px;vertical-align:1px}
.pil .gz{font-family:var(--serif);font-weight:var(--fw-d3);font-size:var(--fg-0);line-height:1.1;margin-top:var(--sp-2);letter-spacing:var(--ls-d3)}
.pil .gz span{display:block}
.pil .kr{font-size:var(--fs-2);font-weight:600;color:var(--ink);margin-top:var(--sp-2)}
.pil .nick{font-size:var(--fs-1);line-height:1.5;color:var(--ink-2);margin-top:var(--sp-1);word-break:keep-all}
.pil .turn{margin-top:auto;display:inline-flex;align-items:center;gap:4px;align-self:center;
font-size:11px;font-weight:600;color:var(--cobalt-t);background:var(--cobalt-soft);border-radius:var(--r-full);padding:4px 9px}
.pil .face>.nick{margin-bottom:var(--sp-3)}
.pil .turn svg{width:12px;height:12px}
/* 뒷면 = 세 묶음 : ① 어느 자리(작은 회색) + 무엇을 보나(굵게) ② 두 글자의 뜻 ③ 나에게 주는 의미 한 문장 */
.pil .bk{font-size:11px;font-weight:600;color:var(--ink-3)}
.pil .bt{display:block;font-size:var(--fs-3);font-weight:700;color:var(--ink);margin-top:2px;letter-spacing:-.02em}
.pil.self .bt{color:var(--cobalt-t)}
.pil .rows{display:flex;flex-direction:column;gap:6px;margin:var(--sp-3) 0;padding:var(--sp-2) 0;
border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.pil .row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);line-height:1.35;word-break:keep-all}
.pil .row .h{flex:none;width:22px;text-align:center;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1}
.pil .row b{color:var(--ink);font-weight:600}
.pil .bp{font-size:12.5px;line-height:1.6;color:var(--ink);word-break:keep-all;margin-bottom:var(--sp-3)}
/* 앞면 '뒤집기' 처럼 카드 맨 아래에 붙인다 → 문장 길이가 달라도 네 카드의 '앞면 보기' 가 한 줄에 선다 */
.pil .back .turn{margin-top:auto}
/* 시간 모름 카드 — 누를 수는 없지만 생김새·높이는 다른 세 기둥과 같게 (흰 카드 · 같은 테두리·그림자 · 줄 높이 꽉) */
.pil.void .face{height:100%}
.pil.void .gz{color:var(--ink-3);font-size:var(--fs-6);padding:var(--sp-1) 0}
@keyframes pilPeek{0%,100%{transform:none}35%{transform:scaleX(.86)}70%{transform:scaleX(1.02)}}
.pil.hint .in{animation:pilPeek .9s ease 1.2s 1}
@media (prefers-reduced-motion:reduce){ .pil.hint .in,.pil.t-out .in,.pil.t-in .in{animation:none} }
/* 좁은 화면 : 뒷면 설명이 4칸에 들어가지 않으므로 2 × 2 */
@media (max-width:560px){ .pillars{grid-template-columns:repeat(2,1fr)} }
/* 핵심 지표 — 테두리 없는 '그냥 정보' 줄. 누를 수 있는 건 파란 ! 뿐 */
.rd-keys{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-4);margin-bottom:var(--sp-5);
padding-top:var(--sp-3);border-top:1px solid var(--line-2)}
.rd-keys>span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2);color:var(--ink-2);letter-spacing:-.01em}
.rd-keys b{color:var(--ink);font-weight:600}
.rd-keys b.on{color:var(--cobalt-t)}
.rd-keys em{font-style:normal}
.rd-q{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border:0;border-radius:50%;cursor:pointer;
background:var(--cobalt);color:#fff;font:700 11px/1 var(--sans);box-shadow:0 0 0 3px var(--cobalt-soft);transition:transform .15s}
.rd-q:hover{transform:scale(1.15)}
.rd-q:focus-visible{outline:2px solid var(--cobalt-t);outline-offset:2px}
/* ! 말풍선 — 누른 ! 의 칸 바로 아래. 입력 폼 ⓘ 툴팁(.rd-tip)과 같은 흰 카드 */
.rd-keys>span{position:relative}
.rd-pop{position:absolute;left:-6px;top:calc(100% + 10px);z-index:50;width:max-content;max-width:min(300px,calc(100vw / var(--vz,1) - 48px));
/* 결과 박스도 흰 바탕이라 흰 카드가 묻힌다 → 바탕은 흰색 그대로(ⓘ 툴팁과 통일), 테두리·그림자·글자색을 진하게 */
background:var(--card);border:1px solid rgba(11,31,58,.16);border-radius:var(--r-2);
box-shadow:0 2px 6px rgba(11,31,58,.08),0 16px 36px rgba(11,31,58,.18);
padding:var(--sp-3) 36px var(--sp-3) var(--sp-4);text-align:left;word-break:keep-all;
font-size:var(--fs-2);line-height:1.65;letter-spacing:-.01em;color:var(--ink);
opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.rd-pop.r{left:auto;right:-6px}
.rd-pop.on{opacity:1;visibility:visible;transform:none}
.rd-pop::before{content:"";position:absolute;left:var(--ax,14px);top:-5px;width:9px;height:9px;
background:var(--card);border-left:1px solid rgba(11,31,58,.16);border-top:1px solid rgba(11,31,58,.16);transform:rotate(45deg)}
.rd-pop .t{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}
.rd-pop .tx b:not(.t){color:var(--cobalt-t);font-weight:600}
.rd-pop .x{position:absolute;right:4px;top:4px;width:28px;height:28px;border:0;background:none;color:var(--ink-3);font-size:17px;cursor:pointer;border-radius:50%}
.rd-pop .x:hover{background:var(--line-2);color:var(--ink)}
.rd-btrack{position:relative}
.rd-bghost{position:absolute;inset:0;width:0;border-radius:var(--r-full);opacity:.2;
transition:width 1.2s cubic-bezier(.22,1,.36,1) .12s}
.rd-bfill{position:relative;z-index:1}
.rd-btop .sc em{font-style:normal;font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.06em;
padding:var(--sp-0) var(--sp-2);border-radius:var(--r-full);margin-left:var(--sp-2);border:1px solid currentColor}
.rd-bleg{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.05em;color:var(--ink-3);
display:flex;gap:var(--sp-4);margin:calc(var(--sp-3) * -1) 0 var(--sp-4)}
.rd-bleg i{font-style:normal;display:inline-flex;align-items:center;gap:var(--sp-2)}
.rd-bleg i::before{content:"";width:14px;height:6px;border-radius:var(--r-full);background:var(--ink-deco)}
.rd-bleg i.gh::before{opacity:.25}
/* ---- 8줄 요약 ---- */
.rd-read{grid-column:1/-1;margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid var(--line)}
.rd-read-head{display:grid;grid-template-columns:1fr 340px;gap:var(--sp-7);align-items:end;margin-bottom:var(--sp-6)}
.rd-read-t{font-family:var(--serif);font-weight:var(--fw-d3);font-size:var(--fd-t);line-height:1.3;margin-top:var(--sp-5);letter-spacing:var(--ls-d3)}
.rd-read-t em{font-style:normal;color:var(--cobalt-t)}
.rd-read-s{font-size:var(--fs-3);line-height:1.75;color:var(--ink-3)}
.rd-lines{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);
grid-auto-flow:column;gap:0 var(--sp-7);border-top:1px solid var(--line)}
.rd-line{display:flex;gap:var(--sp-4);padding:var(--sp-5) var(--sp-0);border-bottom:1px solid var(--line-2)}
.rd-line .n{flex:0 0 auto;width:22px;padding-top:var(--sp-0);font-family:var(--mono);font-size:var(--fs-2);color:var(--cobalt-t)}
.rd-line .tp{display:block;font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.14em;color:var(--ink-3);margin-bottom:var(--sp-2)}
.rd-line .tx{font-size:var(--fs-4);line-height:1.8;color:var(--ink-2);word-break:keep-all}
.rd-line .tx b{color:var(--ink);font-weight:600}
.rd-cta{margin-top:var(--sp-6);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
border:1px solid var(--cobalt);border-radius:var(--r-m);background:var(--cobalt-soft);padding:var(--sp-5) var(--sp-6)}
.rd-cta p{font-size:var(--fs-4);line-height:1.85;color:var(--ink-2);max-width:60ch;word-break:keep-all}
.rd-cta p b{color:var(--ink);font-weight:600}
@media (max-width:900px){
.rd-read-head{grid-template-columns:1fr;gap:var(--sp-4)}
.rd-lines{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
.rd-read{margin-top:var(--sp-7);padding-top:var(--sp-6)}
}
@media (max-width:420px){
.pil .gz{font-size:var(--fs-6)}.pil .kr{font-size:var(--fs-1)}.rd-stage.has-res{padding:var(--sp-5)}
}