@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 03 READ · 결과 카드 팝업 — index.html 에 적힌 순서대로 불러온다 */
/* ============================================================================
   결과 카드 팝업 (js/main/read.js openCard) — '보러가기' 를 누르면 풀이 영역 위에 뜬다
   카드 폭 = min(화면 폭 92%, (화면 높이 − 여백) ÷ 1.4, 500px) → 어떤 모니터에서도 카드 전체가 한 화면에 보인다.
   html 에 zoom(view-zoom.js)이 걸리면 vh·vw 도 같이 줄어들므로 var(--vz) 로 나눠 되돌린다
   ========================================================================== */
.ec-back{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px 16px;
  background:rgba(11,31,58,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s}
.ec-back.on{opacity:1}
.ec-back[hidden]{display:none}
.ec-wrap{position:relative;container-type:inline-size;
  width:min(calc(92vw / var(--vz,1)),calc((100vh / var(--vz,1) - 120px) / 1.4),500px);
  transform:translateY(14px) scale(.97);transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
.ec-back.on .ec-wrap{transform:none}
/* 닫기 — 카드 오른쪽 위 바깥, 어두운 배경 위에 바탕 없이 얇은 X + '닫기' (카드를 가리지 않는다) */
.ec-x{position:absolute;right:0;bottom:calc(100% + 10px);z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 2px;border:0;background:none;cursor:pointer;
  font:500 15px/1 var(--sans);letter-spacing:.02em;color:rgba(255,255,255,.9);transition:color .15s}
.ec-x svg{width:18px;height:18px;transition:transform .25s}
.ec-x:hover{color:#fff}
.ec-x:hover svg{transform:rotate(90deg)}
.ec-x:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}

.ec-card{background:#fff;border-radius:5cqw;padding:3cqw;display:flex;flex-direction:column;color:#0B1F3A;font-family:var(--sans);
  box-shadow:0 30px 80px rgba(20,50,100,.35);word-break:keep-all;text-align:left}
.ec-img{position:relative;aspect-ratio:1/1;border-radius:3.4cqw;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#5B93D9 0%,#7FAEE6 38%,#BDD5F4 60%,#D7E5F8 63%,#8DB4E8 63.4%,#6F9ADA 100%)}
.ec-img>svg{position:absolute;inset:0;width:100%;height:100%}
.ec-logo{position:absolute;left:4cqw;top:3.8cqw;display:block;color:#fff}
.ec-logo svg{display:block;height:2.8cqw;width:auto}
.ec-tr{position:absolute;right:4cqw;top:3.6cqw;font-size:2.4cqw;letter-spacing:.02em;color:rgba(255,255,255,.92)}
.ec-flow{stroke-dasharray:6 3;animation:ecFlow 14s linear infinite}
.ec-flow.s{animation-duration:20s;animation-direction:reverse}
@keyframes ecFlow{to{stroke-dashoffset:-90}}

.ec-info{display:flex;flex-direction:column;gap:3.4cqw;padding:3.6cqw 2cqw 1cqw}
.ec-code{display:flex;justify-content:space-between;font-size:2.4cqw;letter-spacing:.02em;color:rgba(11,31,58,.58)}
.ec-code b{font-weight:500;color:#0072D9}
.ec-nm{font-family:var(--serif);font-weight:500;font-size:6cqw;letter-spacing:-.02em;line-height:1.2;margin:1.4cqw 0 0;color:#0B1F3A}
.ec-kw{margin-top:2.2cqw;font-size:2.8cqw;line-height:1.75;color:rgba(11,31,58,.74);letter-spacing:-.01em}
.ec-kw>div{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;overflow:hidden}
.ec-kw b{font-weight:600;color:#0B1F3A}
/* 구분 점 — 정수 px 로 고정. cqw(카드 폭 비례)면 4.25px 같은 소수 크기가 되어 점마다 번짐이 달라 크기가 들쭉날쭉해 보인다 */
.ec-kw i{flex:none;width:3px;height:3px;border-radius:50%;background:rgba(11,31,58,.3)}
.ec-el5{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding-top:2.8cqw;border-top:1px solid rgba(11,31,58,.09)}
.ec-els{display:flex;gap:3.6cqw;align-items:center}
.ec-e{display:flex;align-items:center;gap:1cqw}
.ec-e b{font-weight:500;font-size:2.8cqw;color:rgba(11,31,58,.74)}
.ec-e span{width:2cqw;height:2cqw;border-radius:50%;background:var(--c)}
.ec-e em{font-style:normal;font-weight:600;font-size:2.4cqw;color:#0B1F3A;font-variant-numeric:tabular-nums}
.ec-e.max b{color:#0B1F3A}
.ec-e.max em{color:var(--n,#0B1F3A)}
.ec-e.zero span{background:none;border:.3cqw dashed var(--c)}
.ec-e.zero em{color:rgba(11,31,58,.58)}
.ec-need{display:flex;align-items:center;gap:1.6cqw;white-space:nowrap}
.ec-need small{font-size:2.4cqw;color:rgba(11,31,58,.58)}
/* 채울 기운 — 브랜드 오행 그래픽(구슬)을 작게 한 군데만. 누르면 04 큐레이션 */
.ec-need-go{display:inline-flex;align-items:center;gap:1.4cqw;font-weight:600;font-size:2.9cqw;color:#0072D9;text-decoration:none}
.ec-need-go:hover{text-decoration:underline;text-underline-offset:3px}
.ec-gx{display:inline-grid;place-items:center;width:6cqw;height:6cqw;flex:none;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#fff,#E3F0FD);box-shadow:0 0 0 1px rgba(60,130,214,.18);transition:transform .2s}
.ec-gx img{display:block;width:118%;height:118%;object-fit:contain}
.ec-need-go:hover .ec-gx{transform:scale(1.08) rotate(-8deg)}
@media (prefers-reduced-motion:reduce){ .ec-flow{animation:none} .ec-wrap,.ec-back{transition:none} }

/* 결과 카드 장면의 움직임 — 유리 오브제는 숨 쉬고, 이슬비(癸)는 떨어진다 */
.ec-img .obj{transform-box:fill-box;transform-origin:50% 50%;animation:ecBreath 5s ease-in-out infinite}
@keyframes ecBreath{50%{transform:scale(1.04)}}
.ec-img .rain{animation:ecRain 2.4s linear infinite}
@keyframes ecRain{from{transform:translateY(-3px);opacity:0}30%{opacity:.9}to{transform:translateY(5px);opacity:0}}
@media (prefers-reduced-motion:reduce){ .ec-img .obj,.ec-img .rain{animation:none} }
/* 달력 — 연·월만 고르고 적용을 누를 때의 안내 (js/main/pickers.js 커스텀 달력) */
.rd-pbtn--ok.is-wait{opacity:.45}
/* 달력 맨 위 가운데에 붙어 뜨는 안내 말풍선 (꼬리는 아래 = 달력을 가리킨다) */
.rd-chint{position:absolute;left:50%;top:-16px;transform:translateX(-50%);z-index:3;margin:0;white-space:nowrap;
  font:500 13px/1 var(--sans);color:#fff;background:var(--cobalt-t);border-radius:99px;padding:9px 14px;
  box-shadow:0 8px 20px rgba(0,114,217,.3);animation:cHintIn .25s ease}
.rd-chint b{font-weight:700}
.rd-chint::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:var(--cobalt-t);transform:rotate(45deg)}
.rd-chint[hidden]{display:none}
.rd-chint.need{animation:cHintShake .45s ease}
@keyframes cHintIn{from{opacity:0;transform:translate(-50%,-6px)}}
@keyframes cHintShake{20%,60%{transform:translateX(calc(-50% - 5px))}40%,80%{transform:translateX(calc(-50% + 5px))}}
.rd-cgrid.need .rd-cday:not([disabled]){animation:cDayPulse .9s ease 2}
@keyframes cDayPulse{50%{background:var(--cobalt-soft);box-shadow:inset 0 0 0 1px var(--cobalt)}}@media (prefers-reduced-motion:reduce){ .rd-chint,.rd-cgrid.need .rd-cday{animation:none} }
/* 생년월일 · 시각 — 미리 채우지 않는다. 아직 안 골랐으면 안내 글씨(작고 연하게) */
.rd-input.is-empty span{font-family:var(--sans);font-size:.6em;font-weight:500;letter-spacing:-.01em;color:var(--ink-3);
  line-height:2.1667}   /* 글씨는 0.6 배로 작게, 줄 높이는 1.3 ÷ 0.6 배로 — 숫자가 들어간 칸(줄높이 1.3)과 높이가 같아 밑줄이 한 선에 선다 */
.sec-sub b{font-weight:600;color:var(--cobalt-t)}
/* 질문 미리보기의 '다음 카드 보기' — 흰 카드 위라 기본 테두리(10%)가 거의 안 보인다 → 한 단계 진하게 */
.rv .btn-ghost{border-color:rgba(11,31,58,.22)}