/* ============================================================
   Lunar Soopoolleaf — 최종안
   베이스: B안(귀여움 섞인 고급)
   추가:  ① 타로 박스 하단 그림자가 호버 시 좌 → 우로 초록색으로 차오름
          ② 타로 스프레드는 C안(밤하늘)의 5장 부채꼴 + 순차 지연 애니메이션
   ============================================================ */

   :root {
    --bg:#f7f4ed;
    --bg-blob-1:rgba(90,200,189,.20);
    --bg-blob-2:rgba(120,220,100,.14);
    --surface:#ffffff;
    --soft:#f0eee7;
    --text:#26332d;
    --muted:#788079;
    --line:#e4e3db;
    --primary:#52b788;
    --primary-ink:#3b8e67;
    --primary-deep:#3b8e67;
    --secondary:#5ac8bd;
    --clover-1:#78dc64;
    --clover-2:#82ea6e;
    --tree:#a67c52;
  
    /* 카드 하단 '턱' 그림자 (여기에 초록이 차오릅니다) */
    --ledge:rgba(38,51,45,.10);
    --shadow-soft:0 10px 24px rgba(46,64,54,.08);
    --shadow-soft-lg:0 22px 46px rgba(46,64,54,.13);
    --shadow-sm:0 4px 0 rgba(38,51,45,.05), 0 10px 24px rgba(46,64,54,.08);
  
    /* 타로 카드 뒷면 */
    --card-face:#2e4139;
    --card-face-2:#22302a;
    --card-inner:rgba(120,220,100,.30);
    --card-glyph:rgba(130,234,110,.70);
    --deck-glow:rgba(82,183,136,.18);
  }
  
  html[data-theme="dark"] {
    --bg:#18231f;
    --bg-blob-1:rgba(90,200,189,.16);
    --bg-blob-2:rgba(120,220,100,.09);
    --surface:#22302a;
    --soft:#293a33;
    --text:#edf5f0;
    --muted:#9caaa3;
    --line:#35483f;
    --primary:#5ec99a;
    --primary-ink:#8fe2ba;
    --primary-deep:#3f9a72;
    --secondary:#6ad6ca;
    --clover-1:#7fe06c;
    --clover-2:#8bf077;
    --tree:#c39a70;
  
    --ledge:rgba(0,0,0,.34);
    --shadow-soft:0 10px 24px rgba(0,0,0,.28);
    --shadow-soft-lg:0 22px 46px rgba(0,0,0,.38);
    --shadow-sm:0 4px 0 rgba(0,0,0,.20), 0 10px 24px rgba(0,0,0,.26);
  
    --card-face:#16211c;
    --card-face-2:#0f1815;
    --card-inner:rgba(120,220,100,.26);
    --card-glyph:rgba(130,234,110,.62);
    --deck-glow:rgba(94,201,154,.22);
  }
  
  * { box-sizing:border-box; }
  
  html { min-height:100%; background:var(--bg); }
  
  body {
    min-width:320px;
    min-height:100dvh;
    margin:0;
    overflow-x:hidden;
    background:
      radial-gradient(circle at 50% -10%,var(--bg-blob-1),transparent 38%),
      radial-gradient(circle at 6% 78%,var(--bg-blob-2),transparent 30%),
      var(--bg);
    color:var(--text);
    font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
    -webkit-font-smoothing:antialiased;
    transition:background-color .34s ease,color .34s ease;
  }
  
  a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
  
  :focus-visible { outline:2.5px solid var(--primary); outline-offset:3px; border-radius:12px; }
  
  .page {
    width:min(100%,900px);
    min-height:100dvh;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    flex-direction:column;
  }
  
  /* ---------- header ---------- */
  
  .hd {
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  
  .brand { display:inline-flex; align-items:center; gap:9px; }
  
  .brand-badge {
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
  }
  
  .brand-badge img {
    width:30px;
    height:30px;
    display:block;
    object-fit:contain;
    border-radius:9px;
  }
  
  .brand-name { font-size:13.5px; font-weight:800; letter-spacing:-.02em; }
  
  .hd-right { display:inline-flex; align-items:center; gap:8px; }
  
  .lang {
    height:36px;
    display:inline-flex;
    align-items:center;
    padding:4px;
    border-radius:999px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
  }
  
  .lang a {
    min-width:38px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.05em;
    transition:background .18s ease,color .18s ease,transform .18s ease;
  }
  
  .lang a:active { transform:scale(.9); }
  .lang a.is-active { background:var(--primary); color:#fff; }
  html[data-theme="dark"] .lang a.is-active { color:#12201a; }
  
  .theme-btn {
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:13px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    color:var(--text);
    cursor:pointer;
    transition:transform .2s cubic-bezier(.3,1.4,.5,1);
  }
  
  .theme-btn:hover { transform:translateY(-2px) rotate(-8deg); }
  .theme-btn:active { transform:scale(.9); }
  .theme-btn svg { width:17px; height:17px; }
  .theme-btn .i-moon { display:none; }
  html[data-theme="dark"] .theme-btn .i-sun { display:none; }
  html[data-theme="dark"] .theme-btn .i-moon { display:block; }
  
  /* ---------- hero ---------- */
  
  .hero {
    padding:16px 0 4px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  
  .mascot {
    position:relative;
    width:94px;
    height:94px;
    margin-bottom:2px;
    animation:bob 3.4s ease-in-out infinite;
  }
  
  .mascot svg { width:100%; height:100%; overflow:visible; }
  .mascot:hover { animation:wiggle .6s ease-in-out; }
  
  .eye { animation:blink 5s infinite; transform-origin:center; }
  .eye.e2 { animation-delay:.08s; }
  
  .mascot-spark {
    position:absolute;
    color:var(--secondary);
    font-size:13px;
    animation:twinkle 2.8s ease-in-out infinite;
  }
  
  .mascot-spark.a { right:4px; top:16px; }
  .mascot-spark.b { left:2px; bottom:30px; animation-delay:-1.4s; }
  
  .hello {
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:23px;
    padding:0 10px;
    margin-bottom:8px;
    border-radius:999px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    color:var(--primary-ink);
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.02em;
  }
  
  .hero h1 {
    margin:0;
    font-size:clamp(27px,4.8vw,36px);
    font-weight:850;
    line-height:1.14;
    letter-spacing:-.045em;
  }
  
  .hero p {
    margin:8px 0 0;
    color:var(--muted);
    font-size:12.5px;
    font-weight:500;
    line-height:1.72;
    letter-spacing:-.015em;
  }
  
  /* ---------- 메뉴 ---------- */
  
  .menu { margin:24px 0 0; }
  
  .menu-label {
    margin:0 0 12px 6px;
    color:var(--muted);
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.1em;
  }
  
  /* ① 하단 턱: 회색 → 호버 시 좌→우로 초록 */
  
  .tarot-slot {
    position:relative;
    transition:transform .24s cubic-bezier(.3,1.2,.5,1);
  }
  
  .tarot-slot:hover,
  .tarot-slot:focus-within { transform:translateY(-4px); }
  
  .ledge-base,
  .ledge-fill {
    position:absolute;
    inset:0;
    border-radius:28px;
    transform:translateY(5px);
    pointer-events:none;
  }
  
  .ledge-base {
    z-index:0;
    background:var(--ledge);
  }
  
  .ledge-fill {
    z-index:1;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    clip-path:inset(0 100% 0 0);
    transition:clip-path .62s cubic-bezier(.32,.86,.24,1);
  }
  
  .tarot-slot:hover .ledge-fill,
  .tarot-slot:focus-within .ledge-fill { clip-path:inset(0 0 0 0); }
  
  .big-card {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:26px 26px 26px 28px;
    border-radius:28px;
    background:
      radial-gradient(circle at 106% -30%,rgba(82,183,136,.15),transparent 48%),
      var(--surface);
    box-shadow:var(--shadow-soft);
    transition:box-shadow .24s ease;
  }
  
  .tarot-slot:hover .big-card,
  .tarot-slot:focus-within .big-card { box-shadow:var(--shadow-soft-lg); }
  
  .tarot-slot:active { transform:translateY(-1px); }
  
  .bc-copy { position:relative; z-index:2; text-align:left; }
  
  .pill {
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:23px;
    padding:0 10px;
    margin-bottom:11px;
    border-radius:999px;
    background:rgba(82,183,136,.14);
    color:var(--primary-ink);
    font-size:9.5px;
    font-weight:850;
    letter-spacing:.06em;
  }
  
  .bc-copy h3 {
    margin:0;
    font-size:27px;
    font-weight:850;
    letter-spacing:-.045em;
  }
  
  .bc-copy p {
    margin:8px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    line-height:1.5;
  }
  
  .cta {
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:38px;
    padding:0 18px;
    margin-top:18px;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:-.01em;
    box-shadow:0 4px 0 var(--primary-deep);
    transition:transform .16s ease,box-shadow .16s ease;
  }
  
  html[data-theme="dark"] .cta { color:#12201a; }
  
  .tarot-slot:hover .cta { transform:translateY(-1px); box-shadow:0 5px 0 var(--primary-deep); }
  .tarot-slot:active .cta { transform:translateY(3px); box-shadow:0 1px 0 var(--primary-deep); }
  .cta svg { width:13px; height:13px; }
  
  /* ② 타로 스프레드 (C안 방식) */
  
  .spread {
    position:relative;
    width:200px;
    height:124px;
    flex:0 0 200px;
    z-index:2;
  }
  
  .deck-glow {
    position:absolute;
    left:50%;
    top:54%;
    width:150px;
    height:70px;
    border-radius:50%;
    background:radial-gradient(ellipse,var(--deck-glow),transparent 70%);
    transform:translate(-50%,-50%) scale(.8);
    opacity:.5;
    transition:transform .45s ease,opacity .45s ease;
  }
  
  .tarot-slot:hover .deck-glow,
  .tarot-slot:focus-within .deck-glow { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
  
  .tc {
    position:absolute;
    left:50%;
    bottom:10px;
    width:44px;
    height:74px;
    border:1px solid rgba(140,190,160,.20);
    border-radius:8px;
    background:linear-gradient(150deg,var(--card-face),var(--card-face-2));
    box-shadow:0 8px 18px rgba(28,44,36,.26);
    transform-origin:center 116px;
    transition:transform .48s cubic-bezier(.2,.85,.25,1),box-shadow .3s ease;
  }
  
  .tc::before {
    content:"";
    position:absolute;
    inset:4px;
    border:1px solid var(--card-inner);
    border-radius:5px;
  }
  
  .tc::after {
    content:"✦";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--card-glyph);
    font-size:11px;
  }
  
  .tc.c1 { transform:translateX(-50%) rotate(-6deg); }
  .tc.c2 { transform:translateX(-48%) rotate(-3deg); }
  .tc.c3 { transform:translateX(-50%); }
  .tc.c4 { transform:translateX(-52%) rotate(3deg); }
  .tc.c5 { transform:translateX(-50%) rotate(6deg); }
  
  .tarot-slot:hover .tc.c1,
  .tarot-slot:focus-within .tc.c1 { transform:translateX(-110px) translateY(8px) rotate(-22deg); }
  .tarot-slot:hover .tc.c2,
  .tarot-slot:focus-within .tc.c2 { transform:translateX(-72px) translateY(-4px) rotate(-11deg); transition-delay:.04s; }
  .tarot-slot:hover .tc.c3,
  .tarot-slot:focus-within .tc.c3 { transform:translateX(-22px) translateY(-11px); transition-delay:.08s; }
  .tarot-slot:hover .tc.c4,
  .tarot-slot:focus-within .tc.c4 { transform:translateX(30px) translateY(-4px) rotate(11deg); transition-delay:.12s; }
  .tarot-slot:hover .tc.c5,
  .tarot-slot:focus-within .tc.c5 { transform:translateX(68px) translateY(8px) rotate(22deg); transition-delay:.16s; }
  
  .tarot-slot:hover .tc,
  .tarot-slot:focus-within .tc { box-shadow:0 11px 24px rgba(28,44,36,.32); }
  
  /* ---------- 준비 중 ---------- */
  
  .soon-grid {
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
  }
  
  .soon-card {
    padding:18px 16px;
    border-radius:20px;
    border:1.5px dashed var(--line);
    background:transparent;
    text-align:center;
  }
  
  .soon-icon {
    width:34px;
    height:34px;
    margin:0 auto 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:var(--soft);
    color:var(--muted);
    font-size:15px;
  }
  
  .soon-card strong {
    display:block;
    font-size:14px;
    font-weight:800;
    letter-spacing:-.03em;
  }
  
  .soon-card span {
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
  }
  
  .note {
    margin:16px 0 0;
    color:var(--muted);
    font-size:11px;
    font-weight:500;
    text-align:center;
  }
  
  /* ---------- footer ---------- */
  
  .ft {
    margin-top:auto;
    padding:34px 0 28px;
    color:var(--muted);
    font-size:10px;
    font-weight:600;
    text-align:center;
  }
  
  /* ---------- responsive ---------- */
  
  @media (max-width:640px) {
    .hd { height:56px; }
    .brand-badge { width:34px; height:34px; border-radius:11px; }
    .brand-badge img { width:27px; height:27px; border-radius:8px; }
  
    .hero { padding:8px 0 2px; }
    .mascot {
      width:78px;
      height:78px;
      margin-bottom:0;
    }
  
    .hello {
      height:21px;
      margin-bottom:6px;
      padding:0 9px;
      font-size:9px;
    }
  
    .hero h1 {
      font-size:clamp(25px,7.8vw,31px);
      line-height:1.1;
    }
  
    .hero p {
      margin-top:7px;
      font-size:11.5px;
      line-height:1.55;
    }
  
    .menu {
      margin-top:18px;
    }
  
    .menu-label {
      margin-bottom:8px;
    }
  
    .big-card { padding:18px 16px; border-radius:24px; }
    .ledge-base,.ledge-fill { border-radius:24px; }
    .bc-copy { max-width:54%; }
    .bc-copy h3 { font-size:22px; }
    .bc-copy p { margin-top:6px; font-size:10.5px; }
    .pill { height:21px; margin-bottom:8px; font-size:8.8px; }
    .cta { height:33px; margin-top:13px; padding:0 14px; font-size:10.5px; }
  
    .spread { width:126px; height:102px; flex-basis:126px; }
    .tc { width:36px; height:62px; transform-origin:center 96px; }
    .deck-glow { width:120px; height:60px; }
  
    .tarot-slot:hover .tc.c1,.tarot-slot:focus-within .tc.c1 { transform:translateX(-70px) translateY(6px) rotate(-19deg); }
    .tarot-slot:hover .tc.c2,.tarot-slot:focus-within .tc.c2 { transform:translateX(-48px) translateY(-2px) rotate(-9deg); }
    .tarot-slot:hover .tc.c3,.tarot-slot:focus-within .tc.c3 { transform:translateX(-16px) translateY(-7px); }
    .tarot-slot:hover .tc.c4,.tarot-slot:focus-within .tc.c4 { transform:translateX(18px) translateY(-2px) rotate(9deg); }
    .tarot-slot:hover .tc.c5,.tarot-slot:focus-within .tc.c5 { transform:translateX(38px) translateY(6px) rotate(19deg); }
  
    .soon-grid { gap:9px; }
    .soon-card { padding:14px 8px; border-radius:17px; }
    .soon-card strong { font-size:12.5px; }
    .soon-card span { font-size:9px; }
  }
  
  @media (max-width:390px) {
    .page { padding:0 14px; }
    .big-card { padding:20px 14px; }
    .bc-copy { max-width:58%; }
    .spread { width:118px; flex-basis:118px; transform:scale(.94); transform-origin:right center; }
  }
  
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important; transition:none!important; }
  }
  
  @keyframes bob {
    0%,100% { transform:translateY(0) rotate(-1deg); }
    50% { transform:translateY(-9px) rotate(1.5deg); }
  }
  
  @keyframes wiggle {
    0%,100% { transform:rotate(0); }
    25% { transform:rotate(-7deg) scale(1.04); }
    75% { transform:rotate(7deg) scale(1.04); }
  }
  
  @keyframes blink {
    0%,92%,100% { transform:scaleY(1); }
    95% { transform:scaleY(.08); }
  }
  
  @keyframes twinkle {
    0%,100% { opacity:.3; transform:scale(.8); }
    50% { opacity:1; transform:scale(1.1); }
  }
  
  /* ---------- touch device tarot preview ---------- */
  
  @media (hover:none), (pointer:coarse) {
    .tc.c1 { transform:translateX(-70px) translateY(6px) rotate(-19deg); }
    .tc.c2 { transform:translateX(-48px) translateY(-2px) rotate(-9deg); }
    .tc.c3 { transform:translateX(-16px) translateY(-7px); }
    .tc.c4 { transform:translateX(18px) translateY(-2px) rotate(9deg); }
    .tc.c5 { transform:translateX(38px) translateY(6px) rotate(19deg); }
    .deck-glow { transform:translate(-50%,-50%) scale(1.08); opacity:.85; }
  }
  
  
  /* ============================================================
     v3 · ABOVE-THE-FOLD COMPACT LAYOUT
  
     목표:
     일반 Windows 노트북/데스크톱과 모바일에서
     첫 화면에 타로 메뉴가 바로 보이도록 hero의 세로 높이를 줄입니다.
     ============================================================ */
  
  @media (max-height:820px) and (min-width:641px) {
    .hd { height:58px; }
  
    .hero {
      padding-top:8px;
    }
  
    .mascot {
      width:78px;
      height:78px;
      margin-bottom:0;
    }
  
    .hello {
      height:21px;
      margin-bottom:6px;
      font-size:9px;
    }
  
    .hero h1 {
      font-size:30px;
      line-height:1.1;
    }
  
    .hero p {
      margin-top:7px;
      font-size:11.5px;
      line-height:1.5;
    }
  
    .menu {
      margin-top:17px;
    }
  
    .menu-label {
      margin-bottom:8px;
    }
  
    .big-card {
      padding-top:20px;
      padding-bottom:20px;
    }
  }
  
  @media (max-height:700px) and (min-width:641px) {
    .mascot {
      width:66px;
      height:66px;
    }
  
    .hello {
      margin-bottom:4px;
    }
  
    .hero h1 {
      font-size:27px;
    }
  
    .hero p {
      font-size:11px;
    }
  
    .menu {
      margin-top:12px;
    }
  }
  
  @media (max-width:640px) and (max-height:760px) {
    .page {
      padding-left:14px;
      padding-right:14px;
    }
  
    .hero {
      padding-top:4px;
    }
  
    .mascot {
      width:66px;
      height:66px;
    }
  
    .hello {
      height:20px;
      margin-bottom:5px;
      font-size:8.8px;
    }
  
    .hero h1 {
      font-size:25px;
    }
  
    .hero p {
      margin-top:6px;
      font-size:10.8px;
    }
  
    .menu {
      margin-top:13px;
    }
  
    .big-card {
      padding-top:16px;
      padding-bottom:16px;
    }
  }
  /* =========================================================
   HOME BRAND FAVICON · LIGHT MODE BACKGROUND REMOVE
========================================================= */

html[data-theme="light"] .brand-badge {
    background: transparent !important;
    box-shadow: none !important;
}


/* 파비콘 이미지 자체에도 별도 배경/그림자가 생기지 않게 */

html[data-theme="light"] .brand-badge img {
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   SAJU SLOT

   타로 슬롯과 같은 틀(턱 · 카드 · CTA)을 쓰고,
   오른쪽 그림만 다릅니다.
   겹쳐 있던 네 기둥이 hover/focus 시 시·일·월·년 자리로 펼쳐집니다.
========================================================= */

.saju-slot {
  position:relative;
  margin-top:14px;
  transition:transform .24s cubic-bezier(.3,1.2,.5,1);
}

.saju-slot:hover,
.saju-slot:focus-within { transform:translateY(-4px); }

.saju-slot:active { transform:translateY(-1px); }

.saju-slot .big-card {
  background:
    radial-gradient(circle at 106% -30%,rgba(255,159,190,.20),transparent 48%),
    var(--surface);
}

.saju-slot:hover .big-card,
.saju-slot:focus-within .big-card { box-shadow:var(--shadow-soft-lg); }

.saju-slot .ledge-fill {
  background:linear-gradient(90deg,var(--primary),#ff9fbe);
}

.saju-slot:hover .ledge-fill,
.saju-slot:focus-within .ledge-fill { clip-path:inset(0 0 0 0); }

.saju-slot .pill {
  background:rgba(255,159,190,.18);
  color:#b3557a;
}

html[data-theme="dark"] .saju-slot .pill { color:#ffc4d6; }

.saju-slot:hover .cta { transform:translateY(-1px); box-shadow:0 5px 0 var(--primary-deep); }
.saju-slot:active .cta { transform:translateY(3px); box-shadow:0 1px 0 var(--primary-deep); }


/* ---- 네 기둥 ---- */

.saju-spread {
  position:relative;
  width:200px;
  height:124px;
  flex:0 0 200px;
  z-index:2;
}

.saju-spread .deck-glow {
  background:radial-gradient(ellipse,rgba(255,159,190,.28),transparent 70%);
}

.saju-slot:hover .deck-glow,
.saju-slot:focus-within .deck-glow { transform:translate(-50%,-50%) scale(1.2); opacity:1; }

.sp {
  position:absolute;
  left:50%;
  bottom:10px;
  width:40px;
  display:flex;
  flex-direction:column;
  gap:5px;
  transition:transform .5s cubic-bezier(.2,.85,.25,1);
}

.sp b {
  display:block;
  text-align:center;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .3s ease,transform .3s ease;
}

.sp i {
  display:flex;
  align-items:center;
  justify-content:center;
  height:40px;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:11px;
  font-style:normal;
  font-size:18px;
  font-weight:800;
  line-height:1;
  box-shadow:0 7px 16px rgba(28,44,36,.20);
  transition:border-color .3s ease,box-shadow .3s ease;
}

.saju-spread [data-el="목"] { background:#d9f2df; color:#3f7d5c; }
.saju-spread [data-el="화"] { background:#ffe0e3; color:#c2555f; }
.saju-spread [data-el="토"] { background:#fff0cf; color:#9a7226; }
.saju-spread [data-el="금"] { background:#f3f4f8; color:#6b7180; }
.saju-spread [data-el="수"] { background:#dfeaff; color:#4a6ea8; }

html[data-theme="dark"] .sp i { border-color:rgba(255,255,255,.10); }
html[data-theme="dark"] .saju-spread [data-el="목"] { background:#2b4736; color:#a8e6c0; }
html[data-theme="dark"] .saju-spread [data-el="화"] { background:#4d2b31; color:#ffb3bd; }
html[data-theme="dark"] .saju-spread [data-el="토"] { background:#4a3d24; color:#ffdca0; }
html[data-theme="dark"] .saju-spread [data-el="금"] { background:#333a44; color:#dfe5ef; }
html[data-theme="dark"] .saju-spread [data-el="수"] { background:#2a3850; color:#b3ccf5; }

/* 겹쳐 있는 모습 */

.sp.s1 { transform:translateX(-34px) rotate(-7deg); }
.sp.s2 { transform:translateX(-26px) rotate(-2deg); }
.sp.s3 { transform:translateX(-14px) rotate(3deg); }
.sp.s4 { transform:translateX(-6px) rotate(8deg); }

/* 펼쳐진 모습 — 왼쪽부터 시 · 일 · 월 · 년 */

.saju-slot:hover .sp.s1,
.saju-slot:focus-within .sp.s1 { transform:translateX(-88px); }

.saju-slot:hover .sp.s2,
.saju-slot:focus-within .sp.s2 { transform:translateX(-43px); transition-delay:.05s; }

.saju-slot:hover .sp.s3,
.saju-slot:focus-within .sp.s3 { transform:translateX(2px); transition-delay:.1s; }

.saju-slot:hover .sp.s4,
.saju-slot:focus-within .sp.s4 { transform:translateX(47px); transition-delay:.15s; }

/* 다 펼쳐진 뒤 이름표가 올라오고, 일간에 분홍 테두리가 들어옵니다 */

.saju-slot:hover .sp b,
.saju-slot:focus-within .sp b { opacity:1; transform:none; transition-delay:.3s; }

.saju-slot:hover .sp.s2 i:nth-of-type(1),
.saju-slot:focus-within .sp.s2 i:nth-of-type(1) {
  border-color:#ff9fbe;
  box-shadow:0 7px 16px rgba(28,44,36,.20),0 0 0 3px rgba(255,159,190,.5);
  transition-delay:.34s;
}


/* ---- 준비 중은 이제 두 칸 ---- */

.soon-grid { grid-template-columns:repeat(2,1fr); }


/* ---- 작은 화면 ---- */

@media (max-width:640px) {
  .saju-slot { margin-top:10px; }

  .saju-spread { width:126px; height:102px; flex-basis:126px; }

  .sp { width:28px; gap:4px; bottom:8px; }
  .sp i { height:28px; border-radius:8px; font-size:13px; }
  .sp b { font-size:8px; }

  .sp.s1 { transform:translateX(-22px) rotate(-7deg); }
  .sp.s2 { transform:translateX(-17px) rotate(-2deg); }
  .sp.s3 { transform:translateX(-11px) rotate(3deg); }
  .sp.s4 { transform:translateX(-6px) rotate(8deg); }

  .saju-slot:hover .sp.s1,
  .saju-slot:focus-within .sp.s1 { transform:translateX(-61px); }

  .saju-slot:hover .sp.s2,
  .saju-slot:focus-within .sp.s2 { transform:translateX(-30px); }

  .saju-slot:hover .sp.s3,
  .saju-slot:focus-within .sp.s3 { transform:translateX(1px); }

  .saju-slot:hover .sp.s4,
  .saju-slot:focus-within .sp.s4 { transform:translateX(32px); }
}

@media (max-width:390px) {
  .saju-spread { width:118px; flex-basis:118px; transform:scale(.94); transform-origin:right center; }
}


/*
 * 손가락으로 쓰는 화면에는 hover 가 없으니,
 * 펼쳐진 모습을 처음부터 보여줍니다.
 */

@media (hover:none), (pointer:coarse) {
  .sp.s1 { transform:translateX(-88px); }
  .sp.s2 { transform:translateX(-43px); }
  .sp.s3 { transform:translateX(2px); }
  .sp.s4 { transform:translateX(47px); }

  .sp b { opacity:1; transform:none; }

  .sp.s2 i:nth-of-type(1) {
    border-color:#ff9fbe;
    box-shadow:0 7px 16px rgba(28,44,36,.20),0 0 0 3px rgba(255,159,190,.5);
  }

  .saju-spread .deck-glow { transform:translate(-50%,-50%) scale(1.08); opacity:.85; }
}

/* 좁은 화면에서 손가락으로 쓸 때는 간격도 좁혀야 합니다. */

@media (max-width:640px) and (hover:none),
       (max-width:640px) and (pointer:coarse) {
  .sp.s1 { transform:translateX(-61px); }
  .sp.s2 { transform:translateX(-30px); }
  .sp.s3 { transform:translateX(1px); }
  .sp.s4 { transform:translateX(32px); }
}


/* =========================================================
   TIME SLOT — 양력 ↔ 음력 변환기

   타로 · 사주와 같은 틀을 쓰고, 오른쪽 그림만 다릅니다.
   평소에는 해 · 바꿈 · 달이 나란히 있다가,
   hover/focus 시 해와 달이 서로 자리를 바꾸고
   가운데 화살표가 반 바퀴 돕니다.
========================================================= */

.time-slot {
  position:relative;
  margin-top:14px;
  transition:transform .24s cubic-bezier(.3,1.2,.5,1);
}

.time-slot:hover,
.time-slot:focus-within { transform:translateY(-4px); }

.time-slot:active { transform:translateY(-1px); }

.time-slot .big-card {
  background:
    radial-gradient(circle at 106% -30%,rgba(90,200,189,.20),transparent 48%),
    var(--surface);
}

.time-slot:hover .big-card,
.time-slot:focus-within .big-card { box-shadow:var(--shadow-soft-lg); }

/* 턱은 해(주황)에서 달(민트)로 흐릅니다 */
.time-slot .ledge-fill { background:linear-gradient(90deg,#e8974f,var(--secondary)); }

.time-slot:hover .ledge-fill,
.time-slot:focus-within .ledge-fill { clip-path:inset(0 0 0 0); }

.time-slot .pill-tool { background:rgba(90,200,189,.18); color:#2f8d84; }
html[data-theme="dark"] .time-slot .pill-tool { color:#8fe0d7; }

.time-slot:hover .cta { transform:translateY(-1px); box-shadow:0 5px 0 var(--primary-deep); }
.time-slot:active .cta { transform:translateY(3px); box-shadow:0 1px 0 var(--primary-deep); }


/* ---- 해 · 바꿈 · 달 ---- */

.time-orbit {
  position:relative;
  width:200px;
  height:124px;
  flex:0 0 200px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.time-orbit .deck-glow {
  background:radial-gradient(ellipse,rgba(90,200,189,.26),transparent 70%);
}

.time-slot:hover .deck-glow,
.time-slot:focus-within .deck-glow { transform:translate(-50%,-50%) scale(1.2); opacity:1; }

.tc-badge {
  position:relative;
  width:52px;
  height:52px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform .5s cubic-bezier(.2,.85,.25,1);
}

.tc-badge svg { width:26px; height:26px; }

.tc-badge-swap {
  width:36px;
  height:36px;
  border-radius:12px;
  background:transparent;
  border:0;
  box-shadow:none;
}

.tc-badge-swap svg { width:22px; height:22px; }

.tc-sun  { color:#e8974f; }
.tc-swap { color:var(--primary); }
.tc-moon { color:#6f8fd6; }

html[data-theme="dark"] .tc-sun  { color:#f0b070; }
html[data-theme="dark"] .tc-moon { color:#93aee8; }

/* 해와 달이 자리를 바꿉니다 (52 + 10 + 36 + 10 = 108 → 서로 108px 이동) */

.time-slot:hover .tc-badge-sun,
.time-slot:focus-within .tc-badge-sun { transform:translateX(98px) rotate(28deg); }

.time-slot:hover .tc-badge-moon,
.time-slot:focus-within .tc-badge-moon { transform:translateX(-98px) rotate(-18deg); }

.time-slot:hover .tc-badge-swap,
.time-slot:focus-within .tc-badge-swap { transform:rotate(180deg); }


/* ---- 작은 화면 ---- */

@media (max-width:640px) {
  .time-slot { margin-top:10px; }

  .time-orbit { width:126px; height:102px; flex-basis:126px; gap:6px; }

  .tc-badge { width:36px; height:36px; border-radius:12px; }
  .tc-badge svg { width:19px; height:19px; }

  .tc-badge-swap { width:24px; height:24px; }
  .tc-badge-swap svg { width:16px; height:16px; }

  .time-slot:hover .tc-badge-sun,
  .time-slot:focus-within .tc-badge-sun { transform:translateX(66px) rotate(28deg); }

  .time-slot:hover .tc-badge-moon,
  .time-slot:focus-within .tc-badge-moon { transform:translateX(-66px) rotate(-18deg); }
}

@media (max-width:390px) {
  .time-orbit { width:118px; flex-basis:118px; }
}


/*
 * 손가락으로 쓰는 화면에는 hover 가 없으니,
 * 가만히 있는 모습 그대로 둡니다.
 * (타로 · 사주처럼 펼쳐 둘 것이 없어 자리만 지키면 됩니다)
 */

@media (hover:none), (pointer:coarse) {
  .time-orbit .deck-glow { transform:translate(-50%,-50%) scale(1.08); opacity:.85; }
}