@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 03 READ · 오늘의 카드 뽑기 — index.html 에 적힌 순서대로 불러온다 */
/* ============================================================================
   READ · 오늘의 카드 뽑기 (2026-11-01 시안 확정 · assets/js/read-cards.js)
   제목 오른쪽 부채 6장 → 누르면 떠올라 뒤집힘 → 한 번 더 누르면 질문 미리보기(그 질문의 풀이 한 단락 + 앱으로)
   카드 앞뒤 틀 = 그 질문의 기운 (마지막 '필요한 기운' = 입력값의 채울 기운) · 다시 섞기 = 살짝 흩어졌다 한 장씩 내려앉음
   ========================================================================== */
@media(min-width:901px){ .rd-read-head{grid-template-columns:minmax(0,1fr) 380px;align-items:center} }
.rd-read-t{word-break:keep-all}
/* ── 오늘의 카드 뽑기 (앱 AN-04 와 같은 규칙 · 데스크톱이라 카드를 1.25배) ── */
  .rc{--ink:#0B1F3A}
  .rc__fan{position:relative;height:320px}
  @keyframes rcBreath{0%,100%{translate:0 0}50%{translate:0 -8px}}
  .rc__card{position:absolute;left:50%;bottom:66px;width:120px;height:180px;margin-left:-60px;padding:0;border:0;background:none;cursor:pointer;perspective:1000px;
    transform:translate(calc(var(--x) * var(--fx,1)),calc(var(--a,0) * 1px)) rotate(var(--r));transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .35s;
    animation:rcBreath 3.2s ease-in-out infinite;animation-delay:var(--d)}
  .rc__card:hover:not(.is-sel){translate:0 -14px;animation-play-state:paused}
  .rc__flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,1,.36,1)}
  .rc__back,.rc__front{position:absolute;inset:0;border-radius:16px;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
  .rc__back{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0 12px;color:#fff;
    background:radial-gradient(120% 80% at 30% 10%,#BFE3FF 0%,transparent 60%),linear-gradient(160deg,#3E95F7 0%,#7CBDFB 100%);
    border:1px solid rgba(255,255,255,.7);box-shadow:0 16px 30px -14px rgba(0,80,170,.55)}
  .rc__back::before{content:"";position:absolute;inset:6px;border-radius:11px;border:1px solid rgba(255,255,255,.45)}
  .rc__mark{font-family:var(--serif);font-size:10px;letter-spacing:.32em;padding-left:.32em}
  .rc__no{font-family:var(--mono);font-size:10px;letter-spacing:.12em;opacity:.85}
  .rc__front{transform:rotateY(180deg);display:flex;flex-direction:column;padding:12px 11px 11px;text-align:left;
    background:linear-gradient(170deg,#FFFFFF 40%,var(--tint) 100%);border:1px solid #fff;box-shadow:0 16px 30px -16px rgba(30,80,150,.5)}
  .rc__q{margin-top:auto;font-family:var(--serif);font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);word-break:keep-all}   /* 질문 미리보기(.rv__q)와 같은 세리프 600 · 고른 카드(1.5배)에서 질문 21px(--fs-6) · 설명 · 버튼 12px(--fs-2) */
  .rc__s{margin-top:3px;font-size:8px;line-height:1.4;color:rgba(11,31,58,.48);word-break:keep-all}
  .rc__open{margin-top:11px;font-size:8px;font-weight:600;color:#0072D9}
  .rc__badge{position:absolute;left:10px;top:11px;padding:1px 6px;border-radius:999px;background:#0072D9;font-size:7.5px;font-weight:700;font-style:normal;color:#fff}
  .rc__front .sh{position:absolute;right:10px;top:10px;width:30px;height:38px}
  .rc__fan.has-sel .rc__card:not(.is-sel){opacity:.3}
  .rc__card.is-sel{z-index:5;animation:none;transform:translate(0,-22px) rotate(0) scale(1.5)}
  .rc__card.is-sel .rc__flip{transform:rotateY(180deg)}
  /* 뒤집기가 끝난 뒤 평면으로 (read-cards.js) — 3D 를 풀어야 1.5배 크기에서 글자가 또렷하게 다시 그려진다 */
  .rc__card.is-flat{perspective:none}
  .rc__card.is-flat .rc__flip{transform:none;transform-style:flat;transition:none}
  .rc__card.is-flat .rc__back{display:none}
  .rc__card.is-flat .rc__front{transform:none}
  /* 다시 섞기 모션 : 흩어짐(is-fly) → 무작위 자리에서 출발(is-in) → 한 장씩 부채로 내려앉음 (JS 가 --sx · --sy · --sr · --ss 와 박자를 준다) */
  .rc__fan.is-fly .rc__card{animation:none;opacity:.9;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(var(--ss));
    transition:transform .45s cubic-bezier(.33,1,.68,1),opacity .35s}
  .rc__card.is-in{animation:none;opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(var(--ss));transition:none}
  .rc__card{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .4s}
  /* 안내 문구 옆 밑줄 버튼 다시 섞기 */
  .rc__cap{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:-4px;font-size:12.5px;color:rgba(11,31,58,.48)}
  .rc .rc__shuffle{padding:2px 0;border:0;background:none;font:700 12.5px var(--sans);color:#0072D9;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
  .rc .rc__shuffle:hover{color:#0B1F3A}

  /* 오행 틀 (앱과 같은 다섯 모양) */
  .sh{display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,var(--t1),var(--t2))}
  .sh img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}
  .sh--wood{--t1:#F3F8EC;--t2:#D2E3BD;clip-path:inset(0 round 22%)}
  .sh--water{--t1:#E9F4FE;--t2:#C4DFF8;clip-path:ellipse(50% 50% at 50% 50%)}
  .sh--metal{--t1:#F4F6F9;--t2:#DADFE6;clip-path:polygon(30% 0,76% 5%,100% 27%,94% 72%,70% 100%,22% 95%,0 66%,6% 20%)}
  .sh--earth{--t1:#FBF3E3;--t2:#EEDBB2;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 .95V.25Q0 .2.06 .2H.26Q.3 .2.3 .165V.13Q.3 .08.36 .08H.64Q.7 .08.7 .13V.165Q.7 .2.74 .2H.94Q1 .2 1 .25V.95Q1 1 .94 1H.06Q0 1 0 .95Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0 .95V.25Q0 .2.06 .2H.26Q.3 .2.3 .165V.13Q.3 .08.36 .08H.64Q.7 .08.7 .13V.165Q.7 .2.74 .2H.94Q1 .2 1 .25V.95Q1 1 .94 1H.06Q0 1 0 .95Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
  .sh--fire{--t1:#FFF1F6;--t2:#F7C3D9;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 186' preserveAspectRatio='none'%3E%3Cpath d='M0 170V55.8C0 11.2 30 3.7 49.5 33.5C64.5 0 85.5 0 100.5 33.5C120 3.7 150 11.2 150 55.8V170Q150 186 134 186H16Q0 186 0 170Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 186' preserveAspectRatio='none'%3E%3Cpath d='M0 170V55.8C0 11.2 30 3.7 49.5 33.5C64.5 0 85.5 0 100.5 33.5C120 3.7 150 11.2 150 55.8V170Q150 186 134 186H16Q0 186 0 170Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
  .rc__back .sh{width:52px;height:64px;box-shadow:0 6px 14px -6px rgba(0,40,100,.4)}
  .el-wood{--tint:#EAF2E1} .el-fire{--tint:#FCE6EF} .el-earth{--tint:#F8EEDB} .el-metal{--tint:#ECEFF4} .el-water{--tint:#E3F0FE}

  /* 질문 미리보기 : 흰 유리 딤 + 카드 · 풀이 한 단락 · 앱으로 */
  .rv{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(236,244,253,.42);-webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1);opacity:0;transition:opacity .3s}   /* 뒤 사이트가 살짝 비치게 : 옅은 하늘빛 42% + 블러 7px */
  .rv[hidden]{display:none} .rv.is-on{opacity:1}
  .rv__box{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:center;width:min(820px,calc(100% - 48px));padding:40px;border-radius:32px;background:#fff;box-shadow:0 40px 80px -40px rgba(30,70,130,.45);border:1px solid #fff;
    transform:translateY(12px) scale(.98);transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .rv.is-on .rv__box{transform:none}
  .rv__card{position:relative;display:flex;flex-direction:column;height:320px;padding:20px 18px;border-radius:24px;background:linear-gradient(170deg,#FFFFFF 38%,var(--tint) 100%);box-shadow:0 30px 50px -26px rgba(30,80,150,.55);border:1px solid #fff}
  .rv__card .sh{position:absolute;right:18px;top:18px;width:70px;height:86px}
  .rv__no{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#0072D9}
  .rv__q{margin-top:auto;font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.35;color:#0B1F3A;word-break:keep-all}
  .rv__s{margin-top:6px;font-size:13px;color:rgba(11,31,58,.48)}
  .rv__tp{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.14em;color:var(--ink-3)}
  .rv__bd{margin-top:10px;font-size:var(--fs-4);line-height:1.85;color:var(--ink-2);word-break:keep-all}
  .rv__bd b{color:var(--ink);font-weight:600}
  .rv__more{margin-top:18px;padding:14px 16px;border-radius:16px;background:#E3F0FE;font-size:13.5px;line-height:1.6;color:#0B1F3A}
  .rv__more b{color:#0072D9}
  .rv__acts{display:flex;gap:10px;margin-top:20px}
  .rv__x{position:absolute;right:20px;top:20px;width:40px;height:40px;border:0;border-radius:50%;background:#EEF4FB;font-size:18px;cursor:pointer}
  .rv__box{position:relative}
  @media (prefers-reduced-motion:reduce){ .rc__card{animation:none} }
@media(max-width:900px){ .rc{max-width:380px;margin:0 auto} }
@media(max-width:560px){ .rc{--fx:.82} .rc__fan{height:286px} .rc__card{width:104px;height:156px;margin-left:-52px;bottom:58px}
  .rv__box{grid-template-columns:1fr;gap:20px;padding:28px 22px} .rv__card{height:240px} }
/* 질문 미리보기 · 다음 카드 보기 : 카드는 360° 한 바퀴(뒤로 돈 동안 글자는 숨고 바탕만), 풀이는 옅어지며 바뀐다 */
@keyframes rvSpin{0%{transform:perspective(900px) rotateY(0) scale(1);animation-timing-function:cubic-bezier(.55,0,1,.45)}25%{transform:perspective(900px) rotateY(90deg) scale(.95);animation-timing-function:linear}75%{transform:perspective(900px) rotateY(270deg) scale(.95);animation-timing-function:cubic-bezier(0,.55,.45,1)}100%{transform:perspective(900px) rotateY(360deg) scale(1)}}
.rv__card{transform-style:preserve-3d}
.rv__card > *{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rv__card.is-spin{animation:rvSpin 1.2s both}
/* 미리보기 카드 뒷면 (부채 카드 뒷면과 같은 블루 · ETHER · 오행 틀) */
/* 뒷면 = 부채 카드 뒷면(.rc__back)과 같은 블루 그라데이션 · 흰 ETHER(위) · 가운데 오행 틀 · 흰 번호(아래) (2026-11-03) */
.rv__back{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0 22px;border-radius:inherit;transform:rotateY(180deg);color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 80% at 30% 10%,#BFE3FF 0%,transparent 60%),linear-gradient(160deg,#3E95F7 0%,#7CBDFB 100%);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 50px -26px rgba(0,80,170,.55)}
.rv__back::before{content:"";position:absolute;inset:9px;border-radius:16px;border:1px solid rgba(255,255,255,.45)}
.rv__back .sh{position:relative;right:auto;top:auto;width:88px;height:108px;box-shadow:0 10px 22px -10px rgba(0,40,100,.45)}
.rv__mark{font-family:var(--serif);font-size:14px;letter-spacing:.34em;padding-left:.34em}
.rv__bno{font-family:var(--mono);font-size:12px;letter-spacing:.14em;opacity:.85}
.rv__card + div{transition:opacity .22s ease,transform .22s ease}
.rv__box.is-swap .rv__card + div{opacity:0;transform:translateX(8px)}
@media(prefers-reduced-motion:reduce){ .rv__card.is-spin{animation:none} }

/* 칸 안내 (js/main/read.js hint(msg, 이름 줄)) : 성별 미선택처럼 칸에 문제가 있을 때, 그 칸의 이름 줄('성별 · GENDER 필수 ⓘ') 오른쪽 끝에
   'ⓘ 문구'를 빨간 테두리(.rd-tiles.err)와 같은 火색으로 — 이름 줄의 빈 오른쪽을 써서 위아래 줄과 부딪히지 않는다 */
.rd-grp > label{position:relative}
.rd-need{position:absolute;right:8px;top:50%;display:inline-flex;align-items:center;gap:5px;
  font:600 13px/1 "Pretendard",system-ui,sans-serif;letter-spacing:-.01em;color:var(--fire-t);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translate(6px,-50%);transition:opacity .2s,transform .3s cubic-bezier(.22,1,.36,1)}
.rd-need svg{width:14px;height:14px;flex:none}
.rd-need.on{opacity:1;transform:translate(0,-50%)}
@media (prefers-reduced-motion:reduce){.rd-need{transition:opacity .2s;transform:translate(0,-50%)}}
/* ---- 오늘의 카드 '여기 보세요' 유도 (2026-11-06 시안 C 확정 · read-cards.js .rc__lure) ----
   부채(320px) 뒤로 오행 파스텔 오로라 후광이 천천히 돌고, 위에 'PICK A CARD · 궁금한 질문을 골라 보세요' 머리말 ·
   카드 뒷면에 사선 빛이 왼쪽 카드부터 물결처럼 지나간다(다시 섞어도 끊기지 않게 페이지 시계에 맞춤) · 카드를 한 번 누르면(.is-touched) 후광과 빛은 걷히고 머리말만 남는다 */
@keyframes rcSweep{0%,62%{transform:translateX(-150%) rotate(var(--sa,22deg))}100%{transform:translateX(420%) rotate(var(--sa,22deg))}}
.rc{position:relative;isolation:isolate}
.rc__lure{position:absolute;left:0;right:0;top:0;height:320px;pointer-events:none}
.rc__halo{position:absolute;z-index:-1;left:50%;top:170px;width:380px;height:240px;margin:-120px 0 0 -190px;border-radius:50%;filter:blur(34px);opacity:.7;
  background:conic-gradient(from var(--ab-a),#459EFA,#B6F0FF,#E2F5C4,#FFE7B0,#FFD1E6,#459EFA);animation:abSpin 8s linear infinite;transition:opacity .4s}
.rc__head{position:absolute;z-index:0;left:0;right:0;top:4px;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 14px/1.2 var(--sans);color:var(--ink);transition:opacity .3s}
/* 카드 묶음은 머리말보다 위 — 고른 카드(1.5배로 떠오름)가 머리말을 덮고, 그동안 머리말은 살짝 걷힌다 */
.rc .rc__fan{z-index:1}
.rc:has(.rc__fan.has-sel) .rc__head{opacity:0}
.rc__head b{font:500 10px/1 var(--mono);letter-spacing:.24em;color:#0072D9}
.rc__back::after{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:40%;pointer-events:none;--sa:calc(22deg - var(--r,0deg));   /* 카드 기울기(--r)를 빼서 화면에서는 모든 카드에 같은 22° 사선으로 */
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));
  animation:rcSweep 4.2s ease-in-out infinite;animation-delay:calc(var(--sw0,0ms) + var(--d) * .4)}   /* 페이지 시계(--sw0) + 자리 순서(왼쪽부터 0.1초씩) */
.rc.is-touched .rc__halo{opacity:0;animation-play-state:paused}
.rc.is-touched .rc__back::after{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){ .rc__halo,.rc__back::after{animation:none!important} }