:root {
    --bg-top: #2a2944;
    --bg-bot: #14131f;
    --glass: rgba(255,255,255,0.06);
    --stroke: rgba(255,255,255,0.10);
    --text: #eef0fb;
    --text-2: #a9abc6;
    --text-3: #6f7191;
    --glow: #8fb7ff;
    --glow-2: #b79cff;
    --sheet-a: #e9e6f7;
    --sheet-b: #c9d2f3;
    --sheet-ink: #2b2d4a;
    --sheet-ink-2: #6e7196;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* 스크롤바: 브라우저 기본 흰색 대신 앱 배경에 어울리는 가늘고 은은한 라벤더색으로 통일한다. */
  * { scrollbar-width: thin; scrollbar-color: rgba(175,190,255,.38) transparent; }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: rgba(175,190,255,.34); border: 2px solid transparent; background-clip: content-box; border-radius: 999px; }
  *::-webkit-scrollbar-thumb:hover { background: rgba(205,214,255,.58); background-clip: content-box; }
  .reading-tabs, .pager, #resultModal .page { scrollbar-width: none; }
  /* 모서리가 둥근 창은 스크롤바가 모서리 밖으로 삐져나와 보이므로, 크롬/사파리에서는 스크롤 트랙의 위아래를 둥근 반경만큼 띄운다. */
  @supports selector(::-webkit-scrollbar) {
    .about-box, .menu-box, .intro-box { scrollbar-width: auto; scrollbar-color: auto; }
    .about-box::-webkit-scrollbar-track, .menu-box::-webkit-scrollbar-track, .intro-box::-webkit-scrollbar-track { margin: 28px 0; }
  }
  html, body { margin: 0; min-height: 100%; }
  body {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    color: var(--text);
    background: radial-gradient(120% 60% at 50% 0%, #3a3760 0%, transparent 60%),
                linear-gradient(180deg, var(--bg-top), var(--bg-bot));
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
  }
  .stars { position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      radial-gradient(1.5px 1.5px at 18% 12%, #fff9 50%, transparent 51%),
      radial-gradient(1px 1px at 72% 8%, #fff7 50%, transparent 51%),
      radial-gradient(1px 1px at 86% 26%, #fff6 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 40% 30%, #cfe0ff99 50%, transparent 51%),
      radial-gradient(1px 1px at 8% 44%, #fff5 50%, transparent 51%),
      radial-gradient(1px 1px at 62% 48%, #fff4 50%, transparent 51%);
    animation: tw 5s ease-in-out infinite alternate; transition: opacity .3s ease; }
  @keyframes tw { from { opacity: .5 } to { opacity: 1 } }

  .app {
    position: relative; z-index: 1;
    width: 100%; max-width: none; margin: 0 auto; height: 100vh; height: 100svh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column;
    padding: max(14px, env(safe-area-inset-top)) clamp(20px, 4vw, 72px) 0;
  }

  /* 상단 */
  .top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
  .text-btn {
    height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--stroke);
    background: var(--glass); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap;
  }
  .text-btn:active { transform: scale(.97); }
  /* Keep header dropdowns above home greetings and pending conversations, below dialogs. */
  .top { position: relative; z-index: 45; }
  .brand { position: absolute; left: 50%; transform: translateX(-50%); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .brand:focus-visible { outline: 2px solid rgba(241,210,138,.7); outline-offset: 4px; border-radius: 8px; }
  .brand { font-weight: 600; font-size: 13px; letter-spacing: .2em; display: flex; align-items: center; gap: 6px; color: #f3e3b5; padding-left: .2em; }
  @media (max-width: 420px) { .brand { font-size: 0; letter-spacing: 0; padding: 0; gap: 0; } .bmark { width: 30px !important; height: 30px !important; } }
  .bmark { display: block; width: 24px; height: 24px; } .bmark svg { display: block; width: 100%; height: 100%; }

  /* 날짜는 숨기되, 궁합 알림 칩을 위한 자리로는 유지합니다. */
  .hello { margin: 0 2px; min-height: 0; }
  .hello:empty { display: none; }

  /* 히어로: 아이소메트릭 제단 */
  /* 모든 스프레드가 함께 쓰는 넉넉한 카드 무대 */
  /* flex-shrink를 막아서, 밑에 내용(PC에서 펼쳐진 리딩 메뉴 등)이 길어져도 테이블/수정구가 찌그러지지 않고
     정해진 높이를 유지한다 - 대신 화면 전체가 스크롤된다. */
  .hero { position: relative; height: clamp(438px, 52vw, 720px); margin-top: auto; display: grid; place-items: center; flex-shrink: 0; }
  .hero-messages { position:absolute; z-index:40; top:max(10px,calc(50% - 205px)); left:50%; transform:translateX(-50%); width:min(470px,calc(100% - 24px)); display:grid; gap:8px; }
  .app.reading .hero-messages, .app.picking .hero-messages { display:none; }
  .hero-memory { position:relative; display:flex; align-items:flex-start; gap:12px; width:100%; min-height:108px; box-sizing:border-box; padding:10px 14px 10px 10px; border:1px solid rgba(233,203,145,.55); border-radius:12px; background:#29233b; color:#f7f1e8; box-shadow:0 14px 32px #09081680; text-align:left; pointer-events:auto; }
  .hero-memory[hidden], .app.reading .hero-memory, .app.picking .hero-memory { display:none; }
  .hero-memory-portrait { display:block; width:80px; height:96px; flex:0 0 80px; border-radius:12px; object-fit:cover; object-position:center 18%; background:#161420; box-shadow:0 0 0 1px #e8d9af44; }
  .hero-memory-portrait[hidden] { display:none; }
  .hero-memory-copy { flex:1; min-width:0; }
  .hero-memory-close { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:#d8d1e5; font:inherit; font-size:22px; line-height:1; cursor:pointer; }
  .hero-memory-close:hover { background:#ffffff12; color:#fff; }
  .hero-memory-close:focus-visible { outline:2px solid #efd18e; outline-offset:1px; }
  .hero-memory-copy { padding-right:24px; align-self:stretch; display:flex; flex-direction:column; }
  /* 첫 방문 환영의 캐릭터 변경: 글은 박스 위쪽, 버튼은 오른쪽 아래 */
  .hero-memory-change { align-self:flex-end; margin:auto -16px 0 0; padding:5px 12px; border:1px solid #e9cb918c; border-radius:999px; background:transparent; color:#efd18e; font:inherit; font-size:12px; font-weight:700; line-height:1.3; white-space:nowrap; cursor:pointer; }
  .hero-memory-change[hidden] { display:none; }
  .hero-memory-change:hover { background:#efd18e1a; color:#fff; }
  .hero-memory-change:focus-visible { outline:2px solid #efd18e; outline-offset:2px; }
  .hero-memory-name { display:block; margin-bottom:4px; color:#efd18e; font-size:11px; font-weight:750; }
  .hero-memory-text { margin:0 0 8px;color:#f7f1e8; font-size:13px; line-height:1.5; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
  @media (max-width:420px) { .hero-memory { gap:10px; padding:9px 11px 9px 9px; } .hero-memory-portrait { width:68px; height:80px; flex-basis:68px; } .hero-memory-text { font-size:12px; -webkit-line-clamp:5; } }
  @media (max-width:599.98px) { .hero-messages { top:max(0px,calc(50% - 205px)); } }
  /* PC 홈의 수정구 영역은 최소 560px라 낮은 창(높이 약 840px 이하)에서는 위쪽이 화면 밖으로 밀린다.
     인사 박스는 그 영역 맨 위가 아니라 상단 메뉴 바로 아래(화면 기준 약 86px)에 오도록 내린다. 영역 크기·카드 배치는 그대로. */
  @media (min-width:1000px) { .hero-messages { top:max(0px,calc(50% - 285px),calc(850px - 100dvh)); } }
  @media (min-width:1000px) { .app:not(.reading):not(.picking) .hero { min-height:560px; } }
  /* picking이 끝나기 전(테이블이 아직 페이드 중)에 margin-top이 먼저 바뀌면 테이블이 자리를 옮기며 사라지는 것처럼 보인다.
     picking이 완전히 끝나 테이블이 이미 투명해진 뒤에만 위치를 확정한다. */
  .app.reading:not(.picking) .hero { margin-top: 0; }
  #drawBtn { margin-bottom: auto; }
  .altar {
    --altar-scale: 1;
    position: absolute; width: clamp(230px, 30vw, 500px); height: clamp(230px, 30vw, 500px); top: var(--stage-y, 69%); left: 50%;
    transform: translate(-50%, -50%) scale(var(--altar-scale)) rotateX(58deg) rotateZ(45deg);
    border-radius: 42px;
    /* 3D 회전이 걸린 상태로 opacity/scale이 함께 바뀌면 모바일 GPU가 레이어를 다시 만들며 순간적으로 번쩍이는 경우가 있어, 레이어를 고정해 둔다. */
    will-change: transform, opacity;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .altar, .crystal .ball .lens-altar {
    /* 실제 테이블과 유리 안 반사에 같은 재질만 적용한다. 좌표·각도·모션은 변경하지 않는다. */
    background: radial-gradient(ellipse at 30% 25%, #62577155, transparent 65%), linear-gradient(135deg, #353147, #202236);
    box-shadow: inset 0 0 35px #0b0b1745, 0 0 0 2px #d4bd8899, 14px 14px 0 #75634f, 22px 22px 0 #3e3545, 30px 30px 40px #0008;
  }
  .altar::after {
    content: ""; position: absolute; inset: 18px; border-radius: 30px;
  }
  .altar::after, .crystal .ball .lens-altar::after {
    border: 1px solid #d4bd8840;
    background: linear-gradient(135deg, #f3dbaa0a, transparent 55%);
  }
  .glow-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #cfe0ff; transition: opacity .35s ease; }

  .spread {
    position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
    transform: translateY(34px);
  }
  /* 유리 수정구 */
  .crystal { --crystal-scale: 1; position: relative; width: 150px; height: 150px; animation: bob 5s ease-in-out infinite; transition: opacity .35s ease; }
  .crystal .ball {
    position: absolute; left: 0; top: 0; width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
    box-shadow:
      inset 0 0 0 1.5px rgba(255,255,255,.75),
      inset -8px -4px 14px rgba(0,0,0,.75),
      0 18px 28px -10px rgba(0,0,0,.6), 0 0 40px rgba(143,183,255,.18);
  }
  /* 구슬 유리 바탕(어두운 가장자리와 빛)은 .glass 로 옮겨, 그 아래 .lens(굴절된 테이블)가 비쳐 보이게 한다. */
  .crystal .ball .glass { position: absolute; inset: 0; z-index: 1; border-radius: 50%;
    background:
      radial-gradient(circle at 36% 46%, transparent 0, transparent 64%, rgba(0,0,10,.55) 74%, rgba(0,0,6,.9) 86%),
      /* 유리를 지난 빛이 아래쪽에 모이는 밝은 점(빛은 오른쪽 위에서 온다) */
      radial-gradient(ellipse 34% 16% at 42% 87%, rgba(225,238,255,.55) 0%, rgba(200,220,255,.18) 55%, transparent 100%),
      radial-gradient(ellipse 60% 52% at 42% 70%, rgba(236,243,255,.16) 0%, rgba(205,220,255,.08) 55%, transparent 100%),
      linear-gradient(180deg, rgba(40,46,100,.18) 0%, rgba(30,34,80,.06) 100%); }
  /* 진짜 유리구슬은 뒤를 그대로 비추지 않고 뒤집힌 장면만 보인다: 테이블 밖(위쪽 배경)은 뒤집혀 아래쪽에 깔리는 배경으로 채운다 */
  .crystal .ball .lens { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; border-radius: 50%;
    /* 배경색은 화면(캐릭터 테마) 색을 그대로 쓰고 위아래만 뒤집는다: 화면 위쪽의 밝은 빛이 구슬 아래쪽에 깔린다 */
    background: radial-gradient(ellipse 70% 45% at 50% 100%, color-mix(in srgb, var(--kcs-glow, transparent) 26%, transparent), transparent 75%),
      linear-gradient(0deg, var(--bg-top) 0%, color-mix(in srgb, var(--bg-top) 50%, var(--bg-bot)) 45%, var(--bg-bot) 100%);
    -webkit-mask: radial-gradient(circle, #000 70%, rgba(0,0,0,.55) 86%, transparent 97%); mask: radial-gradient(circle, #000 70%, rgba(0,0,0,.55) 86%, transparent 97%); }
  .crystal .ball .lens-altar { position: absolute; left: 50%; top: 50%; border-radius: 42px; transform-origin: 50% 50%;
    filter: blur(.5px) saturate(1.25) brightness(1.08) contrast(1.12);
    /* 비친 테이블이 구슬에 붙어 같이 움직이지 않게, 구슬 안에서 조금 늦게 따라간다(구슬 이동의 60%, 거리는 JS --lens-bob, 사용자 선택 B 2026-10-28).
       같은 5s·ease-in-out·같은 시작이라 bob과 박자가 맞고, 움직임 줄이기·카드 고르는 중 정지 규칙(.crystal *)도 함께 적용된다 */
    animation: lens-bob 5s ease-in-out infinite; }
  @keyframes lens-bob { 0%,100% { translate: 0 0 } 50% { translate: 0 var(--lens-bob, 0px) } }
  /* 유리구슬이 모은 빛이 테이블에 떨어진 자리: 테이블 위에 머물도록 구슬 bob과 반대로 내려가고, 구슬이 뜰수록 퍼지며 옅어진다 */
  .crystal::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 96px; height: 22px; margin-left: -48px; border-radius: 50%; pointer-events: none;
    /* 흐림(filter)·합성(mix-blend-mode) 없이 그라데이션만으로 부드럽게: 매 프레임 다시 그리지 않고 GPU가 위치·크기·투명도만 바꾼다(2026-10-28 성능 점검) */
    background: radial-gradient(ellipse closest-side, rgba(214,230,255,.5) 0%, rgba(180,205,255,.26) 35%, rgba(160,190,255,.08) 70%, transparent 100%);
    will-change: translate, scale, opacity;
    animation: caustic 5s ease-in-out infinite; }
  @keyframes caustic { 0%,100% { translate: 0 0; scale: 1; opacity: .9 } 50% { translate: 0 8px; scale: 1.18 .9; opacity: .6 } }
  .crystal .ball .lens-altar::after { content: ""; position: absolute; inset: 18px; border-radius: 30px; }
  .crystal .ball::before { content: ''; position: absolute; right: 12px; top: 10px; width: 78px; height: 78px; border-radius: 50%; z-index: 3;
    background: conic-gradient(from 0deg at 50% 100%, transparent 0deg, #fff 14deg, #fff 44deg, rgba(255,255,255,.6) 60deg, transparent 66deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle at 20% 105%, transparent 60%, #000 61%, #000 78%, transparent 79%); mask: radial-gradient(circle at 20% 105%, transparent 60%, #000 61%, #000 78%, transparent 79%); transform: rotate(8deg); opacity: 1; }
  .crystal .ball::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; z-index: 2; pointer-events: none;
    background: conic-gradient(from 180deg, rgba(255,255,255,.0) 0deg, rgba(255,255,255,.9) 40deg, rgba(150,225,255,1) 70deg, rgba(255,255,255,0) 100deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 69%, #000 71%, #000 73%, transparent 75%); mask: radial-gradient(circle, transparent 69%, #000 71%, #000 73%, transparent 75%); }
  .crystal .mist {
    position: absolute; inset: 14%; border-radius: 50%; filter: blur(14px); opacity: .9;
    background: conic-gradient(from 0deg, rgba(143,183,255,.0), rgba(143,183,255,.75), rgba(183,156,255,.0), rgba(230,160,255,.6), rgba(143,183,255,.0));
    animation: swirl 9s linear infinite;
  }
  .crystal .mist.m2 { inset: 26%; filter: blur(10px); animation-duration: 6s; animation-direction: reverse; opacity: .75;
    background: conic-gradient(from 90deg, rgba(255,255,255,0), rgba(210,225,255,.8), rgba(255,255,255,0), rgba(183,156,255,.7), rgba(255,255,255,0)); }
  .crystal .core { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); border-radius: 50%;
    background: radial-gradient(circle, #fff, rgba(210,225,255,.6) 45%, transparent 70%); animation: breathe 3.2s ease-in-out infinite; }
  .crystal .speck { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #cfe0ff; animation: breathe 2.6s ease-in-out infinite; }
  .crystal .shine { position: absolute; left: 72px; top: 20px; width: 5px; height: 5px; border-radius: 50%; z-index: 3; opacity: .9;
    background: #fff; box-shadow: 0 0 4px 1px rgba(255,255,255,.7); }
  .crystal .shine2 { position: absolute; right: 22px; bottom: 26px; width: 26px; height: 7px; border-radius: 50%; transform: rotate(-38deg); z-index: 3;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); }
  .crystal .rim { position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(120,150,255,.18) 80%, transparent 90%); mix-blend-mode: screen; }
  .crystal .stand { position: absolute; left: 50%; bottom: 0; width: 96px; height: 38px; transform: translateX(-50%);
    border-radius: 50% 50% 14px 14px / 60% 60% 14px 14px;
    background: linear-gradient(180deg, #e9e4f7 0%, #b9b2d8 55%, #8d86b8 100%);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.7), 0 10px 18px rgba(0,0,0,.45); }
  .crystal .stand::before { content: ""; position: absolute; left: 50%; top: -6px; width: 70px; height: 14px; transform: translateX(-50%);
    border-radius: 50%; background: radial-gradient(ellipse, rgba(143,183,255,.9), rgba(143,183,255,0) 70%); filter: blur(3px); }
  .crystal .shine, .crystal .shine2, .crystal .rim { display: none; }
  .crystal .mist { opacity: .12; mix-blend-mode: screen; } .crystal .mist.m2 { display: none; } .crystal .speck, .crystal .core { display: none !important; }
  @keyframes swirl { to { transform: rotate(360deg) } }
  @keyframes breathe { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.85) } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.15) } }
  .crystal .speck { transform: none; animation-name: twk; }
  @keyframes twk { 0%,100% { opacity: .3 } 50% { opacity: 1 } }
  @keyframes bob { 0%,100% { transform: translateY(0) scale(var(--crystal-scale)) } 50% { transform: translateY(-8px) scale(var(--crystal-scale)) } }
  .crystal .ball { transition: filter .4s; }

  .card {
    width: min(calc((100vw - 76px) / 3), 120px); aspect-ratio: 5 / 8; perspective: 1000px; cursor: pointer;
    opacity: 0; transform: translateY(26px) scale(.92);
    animation: cardRise .6s cubic-bezier(.2,.9,.3,1.2) forwards;
  }
  /* The picker already showed the card landing. Reveal its result position with
     the spread fade rather than making the same card rise a second time. */
  @media (hover: none) and (pointer: coarse) {
    .card.picker-dealt { opacity: 1; transform: none; animation: none; }
  }
  .spread.one .card { width: min(50vw, 192px); }
  .spread { gap: 10px; }
  .spread.ten { display: grid; width: 100%; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 14px 8px; align-items: start; transform: translateY(34px); }
  .spread.ten > div { min-width: 0; text-align: center; }
  .spread.ten .card { width: 100%; }
  .spread.ten .pos { display: block; width: max-content; max-width: none; margin: 8px 0 0 50%; transform: translateX(-50%); font-size: 11.5px; line-height: 1.25; white-space: nowrap; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes cardRise { 0% { opacity: 0; transform: translateY(26px) scale(.92); } 72% { opacity: 1; transform: translateY(-2px) scale(1.018); } 100% { opacity: 1; transform: none; } }
  .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
  .card.flipped .inner { transform: rotateY(180deg); }
  .app.shared .card .inner { transition:none; }
  .inner { -webkit-transform-style: preserve-3d; will-change: transform; }
  .face { -webkit-transform: translateZ(0); }
  .face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
  .back {
    background-color: #0f172a;
    background-image: var(--kc-card-back, url("/a/card-fan.fk8tej.webp"));
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    box-shadow: 0 0 18px rgba(241,210,138,.3), 0 16px 24px rgba(0,0,0,.5);
    display: grid; place-items: center;
  }
  .back::before { display: none; }
  .app.shared .altar, .app.shared .glow-dot { display: none; }
  .back .cb, .pk-slot i .back .cb { position: absolute; inset: 0; width: 100% !important; height: 100%; object-fit:fill; opacity: 1; filter: none; visibility: hidden; }
  /* An uploaded back may contain transparent pixels. Once the sharp image is
     ready, its opaque base prevents the small CSS preview from showing through. */
  .back .cb.loaded { visibility: visible; background-color: #0f172a; }
  /* 뒤집기 전 뒷면의 숨쉬는 빛: 그림자 자체를 움직이면 매 프레임 다시 그려서 휴대폰에서 끊긴다.
     기본 그림자는 고정하고, 더 밝은 빛을 덧씌운 층의 투명도만 움직인다(화면 합성만 하므로 가볍다). 보이는 모양은 같다. */
  .card:not(.flipped) .back { box-shadow: 0 0 14px rgba(241,210,138,.22), 0 16px 24px rgba(0,0,0,.5); }
  .inner::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: 0 0 26px rgba(241,210,138,.5); opacity: 0; transition: opacity .3s; }
  .card:not(.flipped) .inner::after { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 0 } 50% { opacity: 1 } }
  /* 카드를 고르는 동안에는 뒤 배경의 반짝임(전체 화면 별, 수정구슬 안개의 흐림 회전)을 잠시 멈춰 카드 움직임에 그래픽 처리를 몰아 준다. */
  body:has(.app.picking) .stars, .app.picking .crystal .mist, .app.picking .crystal .core, .app.picking .crystal .speck { animation-play-state: paused; }
  /* 휴대폰(터치 화면): 반짝이는 별 배경 위의 반투명 흐림(backdrop-filter)은 매 프레임 다시 계산돼 GPU 부담이 크다. 흐림 없이 거의 같은 색의 반투명 배경으로 바꾼다. */
  @media (hover: none) and (pointer: coarse) {
    .text-btn, .reading-select { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(30,30,52,.72); }
  }
  .art { display: block; width: 100%; height: 100%; }
  .front {
    transform: rotateY(180deg);
    background: #1b1c38;
    padding: 0;
    box-shadow: 0 0 20px rgba(183,156,255,.35), 0 16px 24px rgba(0,0,0,.45);
  }
  .card.reversed .front .art { transform: rotate(180deg); }
  /* 카드 아래 자리 이름: 금빛 테두리와 은은한 그라데이션의 명패 느낌 */
  /* 카드 아래 자리 이름: 박스 없이 글자만 두고 아래에 금빛 실선 하나 */
  .pos { position: relative; display: table; margin: 12px auto 0; padding: 0 2px 7px; font-size: 14px; white-space: nowrap; color: rgba(240,238,255,.94); font-weight: 600; letter-spacing: .05em; text-shadow: 0 1px 8px rgba(6,6,22,.85), 0 0 2px rgba(6,6,22,.6); }
  .pos::after, .pk-slot > span::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 120%; max-width: 64px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(241,210,138,.85), transparent); }

  .hint { text-align: center; font-size: 14.5px; color: rgba(238,240,255,.94); text-shadow: 0 1px 10px rgba(6,6,20,.75); margin: -4px 0 14px; min-height: 18px; }
  .hint b { color: #f1d28a; font-weight: 700; }
  .hint { transition: opacity .18s ease; }
  .hint.pk-off { opacity: 0; visibility: hidden; pointer-events: none; }
  .hint { word-break: keep-all; text-wrap: balance; padding: 0 6px; }
  /* 일본어는 띄어쓰기가 없어 keep-all이면 한 줄로 이어져 창 밖으로 넘친다(초대·쿠폰 등). 일본어는 글자 단위 줄바꿈(금칙 처리)으로. */
  html[lang="ja"] body * { word-break: normal !important; line-break: strict; }
  /* Selection guidance belongs between the reserved card positions and the table. */
  .app.picking .hero { --stage-y: 76%; }
  .hero .pk-hint { position: absolute; left: 50%; top: 36%; z-index: 3; width: calc(100% - 24px); max-width: 620px; transform: translateX(-50%); margin: 0; min-height: 0; pointer-events: none; font-size: 13px; line-height: 1.6; }
  @media (min-width: 1000px) { .app.picking .hero { --stage-y: 82%; } .hero .pk-hint { font-size: 14.5px; } }
  /* Low-height desktops need the same extra selection space as mobile.
     The table and card planes share this target; draw() animates from the old center. */
  @media (min-width: 1000px) and (max-height: 800px) {
    .app.picking .hero { --stage-y: max(92%, 340px); align-self: start; }
    .app.picking #hint, .app.picking #drawBtn { display: none; }
  }
  /* Very short desktop windows still retain room for the table's raised edge. */
  @media (min-width: 1000px) and (max-height: 550px) { .app.picking .hero { --stage-y: max(92%, 320px); } }

  /* 리딩 방식: 홈에서는 한 줄, 목록은 필요할 때만 펼칩니다. */
  .modes { margin-bottom: 14px; }
  .modes[hidden] { display: none; }
  .reading-select {
    width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border: 1px solid var(--stroke); border-radius: 18px; background: var(--glass); color: var(--text); cursor: pointer;
    font: inherit; text-align: left; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: border-color .2s, background .2s, transform .15s;
  }
  .reading-select:active { transform: scale(.985); }
  .reading-select.chosen { border-color: rgba(143,183,255,.58); background: rgba(112,132,245,.13); }
  .reading-select-icon, .mode .ring {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px;
    color: var(--text); background: rgba(124,140,255,.16); border: 1px solid rgba(143,183,255,.24);
  }
  .reading-select-icon svg, .mode .ring svg { width: 21px; height: 21px; }
  .reading-select-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
  .reading-select-copy small { color: var(--text-2); font-size: 11px; line-height: 1.15; }
  .reading-select-copy b { overflow: hidden; color: var(--text); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .reading-chevron, .mode-go { width: 18px; height: 18px; flex: none; color: var(--text-2); }

  .reading-sheet { position: fixed; inset: 0; z-index: 64; display: flex; align-items: flex-end; justify-content: center; background: rgba(6,7,19,.64); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .reading-sheet[hidden] { display: none; }
  .reading-box { width: 100%; max-width: 440px; height: min(80svh, 680px); max-height: min(80dvh, 680px); display:flex; flex-direction:column; padding: 12px 18px calc(20px + env(safe-area-inset-bottom)); border: 1px solid rgba(183,200,255,.18); border-bottom: 0; border-radius: 30px 30px 0 0; overflow: hidden; color: #eef0ff; background: radial-gradient(120% 56% at 50% 0%, rgba(112,126,222,.24), transparent 64%), linear-gradient(180deg, #24254b 0%, #16172f 100%); box-shadow: 0 -18px 52px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06); }
  .reading-box .grab { background: rgba(238,240,255,.24); }
  .reading-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .reading-eyebrow { display: block; color: #f1d28a; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
  .reading-head h2 { margin: 3px 0 2px; font-size: 20px; line-height: 1.2; }
  .reading-head p { margin: 0; color: rgba(214,218,250,.68); font-size: 13px; }
  .reading-close { width: 34px; height: 34px; flex: none; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #fff; background: rgba(255,255,255,.07); cursor: pointer; font: inherit; font-size: 18px; }
  .reading-tabs { display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pinch-zoom; scrollbar-width: none; margin: 0 -2px 12px; padding: 2px 2px 4px; }
  .reading-tabs::-webkit-scrollbar { display: none; }
  .reading-tab { flex: 0 0 auto; min-height: 34px; padding: 0 13px; border: 1px solid rgba(221,229,255,.11); border-radius: 999px; background: rgba(255,255,255,.055); color: rgba(226,230,255,.72); cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; }
  .reading-tab.active { border-color: rgba(168,181,255,.18); background: linear-gradient(100deg, #5f73d8, #826bc6); color: #fff; box-shadow: 0 4px 13px rgba(91,110,213,.28); }
  .reading-tab[hidden], .mode[hidden] { display: none; }
  /* 휴대폰: 다른 언어 탭 이름도 한국어처럼 4개가 한 화면에 들어오게 여백만 조금 줄인다 */
  @media (max-width: 999.98px) { html:not([lang="ko"]) .reading-tab { padding: 0 11px; } html:not([lang="ko"]) .reading-tabs { gap: 6px; } }
  .reading-box > .grab, .reading-head, .reading-tabs { flex:none; }
  .reading-viewport { position:relative; flex:1; min-height:0; height:auto; overflow:hidden; }
  .reading-list { display: grid; grid-template-columns:minmax(0,1fr); align-content:start; gap: 8px; height:100%; max-height: calc(min(80dvh, 680px) - 182px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; contain: layout style; padding: 2px 1px 3px; }
  .reading-list.dragging, .reading-list.sliding { will-change: transform; }
  .reading-ghost { position:absolute; inset:0; pointer-events:none; will-change:transform; }
  .mode { width: 100%; min-width:0; max-width:100%; min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid rgba(221,229,255,.09); border-radius: 16px; background: rgba(255,255,255,.045); color: #eef0ff; cursor: pointer; font: inherit; text-align: left; transition: border-color .18s, background .18s, transform .15s; }
  .mode:active { transform: scale(.985); }
  .mode .ring { color: #cbd7ff; background: rgba(112,132,245,.14); border-color: rgba(143,183,255,.22); }
  .mode-copy { min-width: 0; flex: 1; display: grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:3px; }
  .mode-heading { min-width:0; display:flex; align-items:center; gap:6px; }
  .mode-copy b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 14px; line-height: 1.2; }
  .mode-copy small { overflow: hidden; color: rgba(214,218,250,.64); font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .mode-go { color: rgba(214,218,250,.7); }
  .mode.active { border-color: rgba(143,183,255,.42); background: linear-gradient(135deg, rgba(100,120,222,.24), rgba(153,118,219,.15)); box-shadow: 0 3px 14px rgba(80,98,190,.16); }
  .mode.active .ring { color: #fff; background: linear-gradient(135deg, #6579dd, #9275d3); border-color: transparent; box-shadow: 0 4px 12px rgba(101,121,221,.28); }

  .mode .ring { background: linear-gradient(135deg, rgba(143,183,255,.26), rgba(153,118,219,.22)); box-shadow: 0 3px 10px rgba(90,100,200,.18); }
  .mode-badge { order: 3; flex: none; white-space:nowrap; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); color: rgba(226,230,255,.8); font-size: 10px; font-weight: 700; letter-spacing: .01em; }
  .mode.active .mode-badge { background: rgba(255,255,255,.16); color: #fff; }
  .mode-go { order: 4; }
  .mode-tag { flex:none; justify-self:start; white-space:nowrap; width: fit-content; margin:0; padding: 2px 7px; border-radius: 999px; background: linear-gradient(100deg, #f1d28a, #e0b865); color: #2a2210; font-size: 9.5px; font-weight: 800; letter-spacing: .01em; }
  .mode-tag.soon { background: rgba(255,255,255,.12); color: rgba(226,230,255,.75); }
  .mode.locked { background: rgba(255,255,255,.025); border-color: rgba(221,229,255,.06); }
  .mode.locked .ring { color: rgba(226,230,255,.4); background: rgba(255,255,255,.04); }
  .mode.locked .mode-copy b { color: rgba(238,240,255,.55); }
  .mode.locked .mode-copy small { color: rgba(238,240,255,.35); }
  .mode.locked .mode-go { color: rgba(226,230,255,.3); }
  .mode-lock { display: none; width: 18px; height: 18px; flex: none; order: 4; color: #f1d28a; }
  .mode.plan-lock { background: rgba(255,255,255,.025); border-color: rgba(221,229,255,.06); }
  .mode.plan-lock .ring { color: rgba(226,230,255,.4); background: rgba(255,255,255,.04); }
  .mode.plan-lock .mode-copy b { color: rgba(238,240,255,.55); }
  .mode.plan-lock .mode-copy small { color: rgba(238,240,255,.35); }
  .mode.plan-lock .mode-go { display: none; }
  .mode.plan-lock .mode-lock { display: block; }

  /* 넓은 화면과 폴더블 펼침 화면: 빈 여백 대신 무대·카드·패널을 함께 확장한다. */
  @media (min-width: 600px) {
    .app { padding-left: clamp(32px, 5vw, 96px); padding-right: clamp(32px, 5vw, 96px); }
    .hero { height: clamp(520px, 62dvh, 780px); }
    .crystal { --crystal-scale: 1.45; }
    .spread.one .card { width: min(clamp(192px, 22vw, 340px), calc((var(--hero-h, 9999px) - 56px) / 1.6)); }
    .spread:not(.one) .card { width: clamp(120px, 14vw, 220px); }
    .spread.ten { width: min(100%, 980px); gap: 18px 12px; }
    .hint, .modes, #drawBtn, .lang-row, .hello { width: min(100%, 620px); margin-left: auto; margin-right: auto; }
    .reading-box, .intro-box { max-width: 720px; }
    .mbox { max-width: min(720px, calc(100vw - 72px)); }
  }
  @media (min-width: 1000px) {
    .crystal { --crystal-scale: 1.5; }
    .spread.ten { width: min(100%, 1280px); grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 16px; }
    .spread.ten .pos { font-size: 12.5px; }
    /* PC에서는 버튼을 눌러 시트를 여는 대신, 테이블/카드 영역 옆에 리딩 메뉴를 나란히 펼쳐서 보여준다.
       세로로 계속 쌓이면 화면 스크롤이 생기므로, 왼쪽(테이블)·오른쪽(메뉴) 2단 구성으로 바꾸고
       테이블 높이도 줄여서 화면 하나에 스크롤 없이 들어오게 한다. */
    .app {
      display: grid; height: 100dvh;
      max-width: 1680px; margin-left: auto; margin-right: auto;
      grid-template-columns: minmax(0, 1fr) 400px;
      grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
      grid-template-areas: "top top" "hello hello" "hero modes" "hint modes" "drawBtn modes" ". legal";
      column-gap: clamp(24px, 4vw, 56px); row-gap: 0;
      align-items: stretch;
    }
    /* 상단도 모바일용 "가운데 로고 + 좌측 햄버거"가 아니라, 일반적인 PC 헤더처럼
       로고는 왼쪽, 메뉴 버튼은 오른쪽에 배치한다. */
    .top { grid-area: top; justify-content: flex-start; height: 56px; }
    .brand { position: static; transform: none; order: -1; margin-right: auto; font-size: 15px; }
    .hello { grid-area: hello; }
    .hero { grid-area: hero; height: min(48dvh, 460px); min-height: 0; margin-top: 0; align-self: center; }
    #hint { grid-area: hint; }
    #modes { grid-area: modes; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
    #drawBtn { grid-area: drawBtn; margin-bottom: 0; align-self: end; }
    .legal-foot { grid-area: legal; align-self: end; max-width: none; margin: 8px 0 10px; padding: 0; text-align: center; }
    .reading-select { display: none; }
    .reading-sheet, .reading-sheet[hidden] {
      position: static; inset: auto; z-index: auto; display: flex; align-items: stretch; min-height: 0; flex: 1; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0;
    }
    .reading-box {
      width: 100%; min-height: 0; align-self: stretch; display: flex; flex-direction: column; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--stroke);
      background: var(--glass); box-shadow: none; animation: none;
    }
    .reading-box .grab, .reading-close { display: none; }
    .reading-viewport { flex:1; height:auto; }
    .reading-list { min-height: 0; max-height: none; overflow-y: auto; scrollbar-gutter: stable; }
  }

  @media (max-width: 599px) and (max-height: 740px) {
    .hero { height: 380px; margin-top: 0; }
  }
  @media (max-width: 380px) { .reading-box { padding-left: 14px; padding-right: 14px; } .mode { gap: 10px; } }
  #drawBtn.btn-wait { opacity: 0; transform: translateY(14px) scale(.96); visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility 0s .2s; }
  .cta {
    width: 100%; height: 56px; border: none; border-radius: 18px; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 600; color: #fff;
    background: linear-gradient(90deg, #6a7cff, #9a7cff);
    box-shadow: 0 10px 24px rgba(106,124,255,.4), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .15s;
  }
  .cta:active { transform: scale(.98); }
  /* A warmer face and restrained gold edge lift the main action off the dark stage. */
  #drawBtn {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px solid #dfc98f; font-weight: 700; letter-spacing: .04em; color: #fff9ed;
    background: linear-gradient(145deg, #8a76a8 0%, #6a5787 54%, #514369 100%);
    box-shadow: 0 0 0 1px rgba(241,210,138,.1), 0 12px 28px rgba(53,39,92,.38), inset 0 1px 0 rgba(255,242,210,.28), inset 0 -1px 0 rgba(14,9,28,.28);
    transition: transform .15s, box-shadow .25s, border-color .25s;
  }
  #drawBtn .cta-icon {
    width: 17px; height: 17px; flex: none; color: #f1d99d;
  }
  #drawBtn:focus-visible { outline: 2px solid #f1d99d; outline-offset: 4px; }
  /* 카드 뽑기 = 질문 입력줄(2026-10-28): #drawBtn은 입력칸 + 뽑기 버튼을 담는 틀(배치·숨김 규칙은 그대로). 입력칸 모양, 오른쪽에 금테 보라 뽑기 버튼 */
  #drawBtn.draw-ask { padding: 6px; gap: 6px; align-items: stretch; cursor: text; background: rgba(22,20,40,.82); border-color: rgba(223,201,143,.55);
    box-shadow: 0 10px 26px rgba(10,8,24,.35), inset 0 1px 0 rgba(255,242,210,.08); }
  #drawBtn.draw-ask::after { display: none; }
  #drawBtn.draw-ask:focus-within { border-color: #f1d28a; box-shadow: 0 0 0 3px rgba(241,210,138,.16), 0 10px 26px rgba(10,8,24,.35); }
  #drawBtn.draw-ask:active { transform: none; }
  /* 모바일 키보드가 입력줄을 가릴 때만 그만큼 위로(app-character.js askKeyboardLift). transform과 따로 움직이는 translate를 써서 누름 효과와 겹치지 않게 */
  #drawBtn.kb-lift { translate: 0 calc(-1 * var(--kb-lift, 0px)); z-index: 45; box-shadow: 0 0 0 3px rgba(241,210,138,.16), 0 14px 34px rgba(6,6,18,.6); }
  #drawBtn .ask-input { flex: 1; min-width: 0; padding: 10px 10px 10px 12px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: 0; outline: none;
    resize: none; overflow-y: hidden; overflow-wrap: anywhere; box-sizing: border-box; margin: 0; }
  /* 글이 길어지면 입력줄이 위로 늘어난다(2026-10-29 사용자 요청, app-character.js askGrow): 늘어난 만큼 위쪽 여백을 당겨 아래 끝·다른 배치는 그대로, 최대 4줄 뒤로는 안에서 스크롤.
     버튼·마이크는 원래 높이로 아래에 붙는다 */
  #drawBtn.ask-tall { height: auto; align-items: flex-end; margin-top: calc(-1 * var(--ask-grow, 0px)); z-index: 6; background: #16142a; }
  #drawBtn.ask-tall .draw-go, #drawBtn.ask-tall .kcs-mic { height: var(--ask-btn-h, 44px); align-self: flex-end; }
  #drawBtn .ask-input::placeholder { color: rgba(226,222,245,.55); font-size: 15px; }
  /* 메인 동작은 주변 패널·캐릭터 강조색과 같은 계열로, 명도 차이로 구분한다. */
  #drawBtn.draw-ask { border-radius: 14px; border-color: rgba(184,178,220,.28); }
  #drawBtn .draw-go { position: relative; overflow: hidden; isolation: isolate; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; margin: 0; border: 1px solid color-mix(in srgb, var(--kcs-a, #8276b6) 50%, #aaa3c6); border-radius: 9px; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .015em; color: #f4f0ff; white-space: nowrap; text-shadow: none;
    background: linear-gradient(165deg, color-mix(in srgb, var(--kcs-a, #8276b6) 42%, #302c45), color-mix(in srgb, var(--kcs-b, #7662a0) 30%, #29253c));
    box-shadow: 0 2px 8px rgba(8,6,20,.2), inset 0 1px 0 rgba(233,225,255,.12);
    transition: transform .16s ease, background .2s ease, box-shadow .2s ease; }
  #drawBtn .draw-go > * { position: relative; z-index: 2; }
  #drawBtn .draw-go .cta-icon { width: 18px; height: 18px; color: #dbd1f2; filter: none; }
  #drawBtn .draw-go:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(10,8,24,.3); }
  #drawBtn .draw-go:focus-visible { outline: 2px solid #d4c9f2; outline-offset: 3px; }
  @media (hover: hover) { #drawBtn .draw-go:hover { background: linear-gradient(165deg, color-mix(in srgb, var(--kcs-a, #8276b6) 55%, #302c45), color-mix(in srgb, var(--kcs-b, #7662a0) 42%, #29253c)); box-shadow: 0 4px 12px rgba(8,6,20,.25), inset 0 1px 0 rgba(233,225,255,.18); } }
  @media (prefers-reduced-motion: reduce) { #drawBtn .draw-go { transition: none; } }
  /* 질문 입력줄 마이크(stage.txt setupMic이 브라우저 음성 인식이 되고 캐릭터 음성 입력이 켜져 있을 때만 붙인다): 입력칸 안 오른쪽 끝 작은 아이콘 */
  #drawBtn .kcs-mic { flex: none; align-self: center; width: 40px; height: 40px; min-width: 40px; margin: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: rgba(226,222,245,.72); cursor: pointer; }
  #drawBtn .kcs-mic svg { width: 20px; height: 20px; }
  /* 순서(2026-10-29 사용자 요청): 입력칸 → 카드 뽑기 → 마이크. 마이크는 stage.txt가 입력칸 바로 뒤에 끼우므로 배치만 order로 바꾼다 */
  #drawBtn .ask-input { order: 0; } #drawBtn .draw-go { order: 1; } #drawBtn .kcs-mic { order: 2; }
  #drawBtn .kcs-mic.on { background: var(--kcs-gold, #f1d28a); color: #1a1530; box-shadow: 0 0 0 3px rgba(241,210,138,.22); animation: askMicPulse 1.4s ease-in-out infinite; }
  #drawBtn .kcs-mic:focus-visible { outline: 2px solid #f1d99d; outline-offset: 1px; }
  @keyframes askMicPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(241,210,138,.22) } 50% { box-shadow: 0 0 0 6px rgba(241,210,138,.08) } }
  @media (prefers-reduced-motion: reduce) { #drawBtn .kcs-mic.on { animation: none; } }
  /* 좁은 화면: 뽑기 버튼의 별 아이콘을 빼 입력칸 안내('선택')가 잘리지 않게 */
  @media (max-width: 479.98px) { #drawBtn .draw-go { padding: 0 14px; } #drawBtn .draw-go .cta-icon { display: none; } #drawBtn .ask-input { padding-left: 10px; } }
  /* 사용 안내(2026-10-28): 화면을 어둡게 덮고 대상만 둥근 구멍으로 밝게, 말풍선은 대상 위·아래(PC 리딩 패널은 왼쪽 옆) */
  .kc-guide { position: fixed; inset: 0; z-index: 90; }
  .kc-guide[hidden] { display: none; }
  .kc-guide-hole { position: fixed; border-radius: 22px; box-shadow: 0 0 0 200vmax rgba(6,6,18,.74), 0 0 0 2px rgba(241,210,138,.85), 0 0 26px 4px rgba(241,210,138,.35); pointer-events: none; transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
  .kc-guide-tip { position: fixed; z-index: 1; padding: 16px 16px 14px; border: 1px solid rgba(241,210,138,.6); border-radius: 18px; background: #221f3a; color: var(--text); box-shadow: 0 18px 40px rgba(0,0,0,.45); transition: left .3s ease, top .3s ease; }
  .kc-guide-tip::after { content: ""; position: absolute; width: 14px; height: 14px; background: #221f3a; border: solid rgba(241,210,138,.6); border-width: 0 1px 1px 0; }
  .kc-guide-tip[data-arrow="down"]::after { left: calc(var(--arrow-x, 50%) - 7px); bottom: -8px; transform: rotate(45deg); }
  .kc-guide-tip[data-arrow="up"]::after { left: calc(var(--arrow-x, 50%) - 7px); top: -8px; transform: rotate(225deg); }
  .kc-guide-tip[data-arrow="right"]::after { right: -8px; top: 28px; transform: rotate(-45deg); }
  .kc-guide-step { margin: 0 0 6px; color: #f1d28a; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
  .kc-guide-text { margin: 0; font-size: 15px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
  .kc-guide-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
  .kc-guide-skip, .kc-guide-next, .kc-guide-more { font: inherit; cursor: pointer; }
  .kc-guide-skip { min-height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: transparent; color: var(--text-2); font-size: 14px; }
  .kc-guide-skip[hidden] { display: none; }
  .kc-guide-next { min-height: 40px; padding: 0 18px; border: 1px solid #dfc98f; border-radius: 12px; background: linear-gradient(145deg, #8a76a8, #514369); color: #fff9ed; font-size: 14px; font-weight: 700; }
  .kc-guide-more { display: block; margin: 10px 0 0 auto; padding: 4px 2px; border: 0; background: none; color: var(--text-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
  .kc-guide-more[hidden] { display: none; }
  .kc-guide-skip:focus-visible, .kc-guide-next:focus-visible, .kc-guide-more:focus-visible { outline: 2px solid #f1d99d; outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .kc-guide-hole, .kc-guide-tip { transition: none; } }
  #drawBtn:active { transform: scale(.98); box-shadow: 0 5px 14px rgba(53,39,92,.3), inset 0 1px 0 rgba(255,242,210,.2); }
  @media (hover: hover) {
    #drawBtn:hover { transform: translateY(-1px); border-color: #f3dea9; box-shadow: 0 0 0 2px rgba(241,210,138,.13), 0 15px 32px rgba(53,39,92,.44), inset 0 1px 0 rgba(255,242,210,.35); }
  }

  .app.idle { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .grab { position: relative; width: 40px; height: 4px; border-radius: 4px; background: rgba(43,45,74,.2); margin: 0 auto 14px; touch-action: none; cursor: grab; }
  .grab::before { content: ''; position: absolute; inset: -16px -70px -12px; }
  [role="dialog"]:focus { outline: none; }
  .badge {
    width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: #3b3e6e; color: #fff; font-weight: 700; font-size: 13px;
    box-shadow: 0 6px 14px rgba(59,62,110,.35);
  }
  /* 셔플 생략 스위치: 테이블 오른쪽 아래의 작은 토글. 고르는 중·결과 화면에서는 숨긴다 */
  .shuffle-skip { position:absolute; right:14px; bottom:14px; z-index:4; display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:6px 12px 6px 8px; border:1px solid rgba(241,210,138,.28); border-radius:999px; background:rgba(14,13,30,.62); color:rgba(238,234,255,.82); font-size:12.5px; font-weight:600; letter-spacing:-.01em; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .shuffle-skip i { position:relative; width:28px; height:16px; flex:none; border-radius:999px; background:rgba(255,255,255,.18); transition:background .2s; }
  .shuffle-skip i::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .2s; }
  .shuffle-skip.on { border-color:rgba(241,210,138,.6); color:#f6e7bd; }
  .shuffle-skip.on i { background:#c9a85c; }
  .shuffle-skip.on i::after { transform:translateX(12px); }
  .shuffle-skip:focus-visible { outline:2px solid #f1d99d; outline-offset:2px; }
  .app.picking .shuffle-skip, .app.reading .shuffle-skip, .app.shared .shuffle-skip { display:none; }
  @media (prefers-reduced-motion: reduce) { .shuffle-skip i, .shuffle-skip i::after { transition:none; } }

  /* 처음 온 사람에게는 셔플 생략 스위치를 숨긴다(home-startup.js의 html.kc-new-visitor) */
  html.kc-new-visitor .shuffle-skip, html.kc-new-visitor .desktop-nav .nav-skip { display: none !important; }
  /* 모바일 리딩 방식 줄의 '다른 리딩 보기' 안내(화살표 앞) */
  .reading-select-more { flex: none; margin-left: auto; color: var(--gold, #f1d28a); font-size: 12px; font-weight: 650; white-space: nowrap; }
  .reading-select-more:empty { display: none; }
  /* 언어 안내(홈 알림 영역 맨 위): 그 언어로 옮길지 묻는 작은 띠 */
  .lang-suggest { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; padding:8px 8px 8px 14px; border:1px solid rgba(233,203,145,.45); border-radius:12px; background:#29233bf2; color:#f7f1e8; box-shadow:0 10px 26px #09081666; font-size:13px; line-height:1.4; pointer-events:auto; }
  .lang-suggest[hidden], .app.reading .lang-suggest, .app.picking .lang-suggest { display:none; }
  .lang-suggest-text { flex:1; min-width:0; overflow-wrap:anywhere; }
  .lang-suggest-go { flex:none; padding:6px 12px; border:1px solid #e9cb918c; border-radius:999px; color:#efd18e; font-weight:700; font-size:12px; text-decoration:none; white-space:nowrap; }
  .lang-suggest-go:hover { background:#efd18e1a; color:#fff; }
  .lang-suggest-x { flex:none; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:transparent; color:#d8d1e5; font:inherit; font-size:20px; line-height:1; cursor:pointer; }
  .lang-suggest-go:focus-visible, .lang-suggest-x:focus-visible { outline:2px solid #efd18e; outline-offset:2px; }

  /* 온보딩 */
  .intro { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(10,10,20,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .intro[hidden] { display: none; }
  #docSheet, #bizSheet { z-index: 80; }
  .intro-box {
    width: 100%; max-width: 440px; border-radius: 30px 30px 0 0; padding: 12px 22px calc(24px + env(safe-area-inset-bottom));
    background: linear-gradient(160deg, var(--sheet-a), var(--sheet-b)); color: var(--sheet-ink);
    animation: up .3s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes up { from { transform: translateY(100%) } to { transform: none } }
  .intro-box h2 { margin: 6px 0 4px; font-size: 22px; font-weight: 700; }
  .intro-box .lead { font-size: 14px; color: var(--sheet-ink-2); margin-bottom: 14px; }
  .istep { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
  .istep .badge { width: 36px; height: 36px; font-size: 14px; }
  .istep b { display: block; font-size: 15px; }
  .istep span { font-size: 13px; color: var(--sheet-ink-2); line-height: 1.55; }
  .intro .cta { margin-top: 12px; }

  .menu-tool[hidden] { display: none !important; }
  .menu-tool.installed, .menu-tool:disabled { opacity: .42; cursor: default; pointer-events: none; }
  .menu-tool.installed .menu-icon, .menu-tool:disabled .menu-icon { color: rgba(241,210,138,.58); background: rgba(241,210,138,.06); }
  /* 결과 모달 */
  .modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(8,8,18,.78); }
  .modal[hidden] { display: none; }
  #cardModal { z-index:85;background:rgba(8,8,18,.84);--sheet-ink:#eef0ff;--sheet-ink-2:#d1cde4;--gold:#f1d28a; }
  #cardModal .mbox { color: var(--sheet-ink); border: 1px solid rgba(183,156,255,.22);
    background:linear-gradient(160deg,#2a2946,#1a1928) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08) !important; }
  #cardModal .mhead h2 { font-size:20px;font-weight:750;letter-spacing:-.02em;color:#fff; }
  #cardModal .mclose { width: 38px; height: 38px; font-size: 16px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 4px 12px rgba(0,0,0,.3); flex-shrink: 0; }
  #cardModal .mhead { padding:18px 20px;border-bottom:1px solid rgba(225,228,255,.12); }
  .card-modal-body { padding:20px;overflow-y:auto;flex:1;min-height:0; }
  .card-profile { display:grid;grid-template-columns:94px minmax(0,1fr);gap:10px 16px;margin-bottom:24px; }
  #cardModal .pvisual { grid-column:1;grid-row:1 / span 2;margin:0;cursor:default; }
  #cardModal .pcard { width:94px !important;border-radius:12px; }
  #cardModal .pmeta { grid-column:2;align-self:end;justify-content:flex-start;margin:0; }
  #cardModal .kws { grid-column:2;align-self:start;justify-content:flex-start;margin:0; }
  #cardModal .pdesc { margin: 0; }
  #cardModal .pill { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: var(--sheet-ink-2); }
  #cardModal .pill.rev { color: #ff9fb4; border-color: rgba(255,159,180,.3); }
  #cardModal .kws span { background: rgba(241,210,138,.1); color: var(--gold); border: 1px solid rgba(241,210,138,.22); font-weight: 500; }
  #cardModal .kws.rev span { background: rgba(255,159,180,.08); color: #ffb3c4; border-color: rgba(255,159,180,.22); }
  .card-meaning { padding:18px 0;border-top:1px solid rgba(225,228,255,.12); }
  #cardModal .pmean { padding:0;border:0;border-radius:0;background:none;color:#eeeafa;font-size:15px;line-height:1.85; }
  #cardModal .xcore { font-size:15px;font-weight:500;line-height:1.8;color:#d1cde4;margin:0 0 20px; }
  .pmean-label { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--gold, #b98a3e); text-transform: uppercase; }
  #cardModal .pmean-label { margin:0 0 8px;font-size:14px;color:#f1d28a;text-transform:none; }
  .card-dictionary-link { display:block;margin-top:8px;padding:14px 0;color:#f1d28a;font-size:14px;font-weight:650;line-height:1.6;text-decoration:underline;text-underline-offset:4px; }
  .card-dictionary-link:focus-visible { outline:2px solid #f1d28a;outline-offset:4px; }
  #cardModal .ptitle { color: #fff; }
  /* 카드 1장 결과: 이미지 안에 카드 이름이 있으므로 아래에는 방향만 표시한다. */
  .strip-info { display: grid; gap: 8px; justify-items: center; margin: 12px 0 0; text-align: center; }
  .strip-info .pmeta, .strip-info .kws { margin: 0 !important; justify-content: center; }
  #resultModal .strip-info .pill { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
  /* PC 카드 설명창: 세로로 길게 늘어놓지 않고 왼쪽 카드 / 오른쪽 설명 2단으로 배치하고, 뒤의 결과창이 비쳐 보이지 않게 어둡게 한다. */
  @media (min-width: 1000px) {
    #cardModal { background: rgba(6,6,18,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    #cardModal .mbox { width: min(860px, calc(100vw - 96px)); max-width: none; height: auto; max-height: min(720px, calc(100dvh - 56px)); }
    #cardModal .card-modal-body { display:grid;grid-template-columns:210px minmax(0,1fr);gap:32px;align-items:start;padding:28px; }
    .card-profile { position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:14px;margin:0; }
    #cardModal .pcard { width:210px !important; }
    #cardModal .pmeta,#cardModal .kws { justify-content:center; }
  }
  .modal { overscroll-behavior: contain; touch-action: pan-x pan-y; }
  .mbox { max-height: calc(100vh - 40px); }
  @supports (height: 100svh) { .mbox { max-height: calc(100svh - 40px) !important; } }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
  .mbox { width: 100%; max-width: 400px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column;
    border-radius: 28px; overflow: hidden; color: var(--sheet-ink);
    background: linear-gradient(165deg, #f3f0fc 0%, #dfe3f8 60%, #cdd6f5 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.5) inset;
    animation: pop .2s ease-out both; }
  @keyframes pop { from { opacity: 0 } to { opacity: 1 } }
  .mhead { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
  .mhead h2 { margin: 0; font-size: 16px; font-weight: 700; }
  .mclose { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(43,45,74,.08); color: var(--sheet-ink); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
  .pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1; min-height: 0; }
  .pager::-webkit-scrollbar { display: none; }
  .page { flex: 0 0 100%; scroll-snap-align: center; padding: 6px 22px 8px; overflow-y: auto; }
  .ptag { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: #3b3e6e; padding: 5px 12px; border-radius: 999px; }
  .pvisual { display: flex; justify-content: center; margin: 12px 0 12px; cursor: pointer; }
  .pvisual:active .pcard { transform: scale(.97); }
  .tap-hint { text-align: center; font-size: 12.5px; color: var(--sheet-ink-2); margin: 6px 0 0; opacity: .9; }
  #resultModal .tap-hint { color: rgba(238,240,255,.74); }
  .lead-sum { margin: 14px 0 16px; padding: 12px 14px; border-radius: 12px; border-left: 3px solid #f1d28a; background: rgba(241,210,138,.09); color: inherit; font-size: 14.5px; line-height: 1.65; word-break: keep-all; }
  .ai-box { margin: 18px 0 8px; padding: 16px 16px 14px; border-radius: 16px; border: 1px solid rgba(154,124,255,.4); background: linear-gradient(180deg, rgba(106,124,255,.13), rgba(154,124,255,.06)); }
  .ai-box.hist { margin: 14px 0 4px; }
  /* 프리미엄 느낌: 금빛 테두리·상단 선·깊은 그림자 */
  .ai-box:not(.hist) { position: relative; border-color: rgba(241,210,138,.45); background: linear-gradient(180deg, rgba(241,210,138,.08), rgba(106,124,255,.11) 38%, rgba(154,124,255,.06)); box-shadow: 0 0 0 1px rgba(241,210,138,.08) inset, 0 18px 40px rgba(16,12,44,.4); }
  .ai-box:not(.hist)::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #f1d28a, transparent); }
  /* 카드를 읽는 중(의식) */
  .ai-rit { padding: 4px 0 10px; text-align: center; }
  .ai-orb { width: 54px; height: 54px; margin: 10px auto 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7d6, #f1d28a 42%, rgba(154,124,255,.55) 72%, transparent 74%); box-shadow: 0 0 28px rgba(241,210,138,.6); animation: aiOrb 2s ease-in-out infinite; }
  @keyframes aiOrb { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.1); opacity: 1; } }
  .ai-prog { height: 6px; max-width: 260px; margin: 0 auto 10px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.12); }
  .ai-prog i { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #9a7cff, #f1d28a); transition: transform .2s linear; }
  .ai-rit-pct { margin-top: 4px; color: #c9c6df; font-size: 12px; font-variant-numeric: tabular-nums; }
  .ai-rit-msg { min-height: 22px; color: #f1d28a; font-size: 14px; font-weight: 700; transition: opacity .3s; }
  .ai-rit-msg.fade { opacity: 0; }
  /* 리포트 머리(날짜·질문·뽑은 카드)와 마무리 */
  .ai-rep { margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid rgba(225,228,255,.12); text-align:left; }
  .ai-rep-meta { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin-bottom:12px; }
  .ai-rep .ai-rep-t { font-size:13px; font-weight:650; color:rgba(238,240,255,.78); }
  .ai-rep-date { font-size:11px; color:rgba(238,240,255,.5); }
  .ai-question { display:grid; gap:5px; margin:0 0 12px; padding:12px 14px; border:1px solid rgba(177,164,230,.18); border-left:3px solid rgba(177,164,230,.65); border-radius:10px; background:rgba(177,164,230,.07); text-align:left; }
  .ai-question[hidden] { display:none; }
  .ai-question-label { font-size:11px; font-weight:700; color:rgba(210,201,245,.8); }
  .ai-question p, .ai-body .ai-question p, html[lang] #resultModal .ai-body .ai-question p { margin:0; color:rgba(238,240,255,.95); font-size:14px; font-style:normal; font-weight:500; line-height:1.65; text-align:left; word-break:keep-all; overflow-wrap:anywhere; }
  .ai-rep .ai-question { margin-bottom:10px; }
  .ai-rep-cards { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
  .ai-rep-cards span { padding:3px 8px; border-radius:6px; background:rgba(225,228,255,.045); color:rgba(238,240,255,.6); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
  .ai-rep-deck summary { width:fit-content; cursor:pointer; color:rgba(238,240,255,.6); font-size:11.5px; line-height:1.7; }
  .ai-body h4::before, #resultModal .ai-body h4::before { content: '✦'; margin-right: 6px; font-size: 11px; opacity: .8; }
  @keyframes aiReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .ai-body.reveal { animation: aiReveal .7s ease both; }
  @keyframes aiRevealSoft { from { opacity: 0; } to { opacity: 1; } }
  @keyframes aiOrbSoft { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .ai-orb { animation-name: aiOrbSoft; } .ai-body.reveal { animation-name: aiRevealSoft; } }
  .ai-head { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; } .ai-character-face { width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:center 24%; border:1px solid rgba(241,210,138,.35); flex:0 0 48px; } .ai-character-caption { display:grid; gap:4px; flex:1; min-width:100px; } .ai-character-caption small { font-size:12px; color:var(--gold); } .ai-examples { margin-top:8px; font-size:12px; color:#c9c6df; } .ai-examples summary { cursor:pointer; }
  .ai-head b { font-size: 17px; letter-spacing: -.01em; }
  .ai-badge { padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(241,210,138,.6); color: #f1d28a; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
  .ai-body h4, #resultModal .ai-body h4 { margin: 20px 0 6px; padding: 0; border: 0; font-size: 14.5px; font-weight: 800; line-height: 1.75; letter-spacing: 0; color: #f1d28a; }
  .ai-body h4:first-child, #resultModal .ai-body h4:first-child { margin-top: 0; }
  .ai-body p, .ai-body li { margin: 0 0 10px; font-size: 14.5px; line-height: 1.75; word-break: keep-all; }
  .ai-body ul { margin: 0 0 8px; padding-left: 18px; }
  .ai-wait { color: rgba(238,240,255,.7); }
  .ai-wait::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #f1d28a; animation: aiDot 1s ease-in-out infinite; }
  @keyframes aiDot { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
  .ai-err { color: #ffb7c5; }
  .ai-safe { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); line-height: 1.75; }
  .ai-btn { position: relative; overflow: hidden; width: 100%; min-height: 48px; margin-top: 4px; border: 1px solid rgba(210,193,255,.45); border-radius: 14px; background: linear-gradient(110deg, #7568d6, #9c7ee0); box-shadow: 0 9px 22px rgba(80,62,158,.32), inset 0 1px 0 rgba(255,255,255,.26); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .16s ease, border-color .2s ease, box-shadow .2s ease; }
  /* A brief surface glint, followed by a long quiet interval. Only opacity and transform animate. */
  #drawBtn::after, #drawBtn .draw-go::after, .ai-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3) 50%, transparent); opacity: 0; transform: translateX(0) skewX(-18deg); }
  /* 모바일·PC 모두 메인 버튼에 주기적으로 빛이 지나간다. 텍스트보다 아래에서 표시한다. */
  #drawBtn .draw-go::after { z-index: 1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65) 50%, transparent); }
  @keyframes actionGlint { 0% { opacity: 0; transform: translateX(0) skewX(-18deg); } 3% { opacity: .8; } 15% { opacity: .7; transform: translateX(360%) skewX(-18deg); } 19%, 100% { opacity: 0; transform: translateX(360%) skewX(-18deg); } }
  @media (prefers-reduced-motion: no-preference) {
    #drawBtn:not(.btn-wait):not(:disabled)::after, #drawBtn:not(.btn-wait) .draw-go:not(:disabled)::after, .ai-btn:not([hidden]):not(:disabled)::after { animation: actionGlint 6.2s ease-in-out infinite; }
  }
  .ai-btn[hidden] { display: none; }
  .ai-btn:disabled { cursor: wait; opacity: .65; box-shadow: none; }
  .ai-btn:focus-visible { outline: 2px solid #f1d28a; outline-offset: 3px; }
  .ai-btn:active:not(:disabled) { transform: scale(.99); }
  @media (hover: hover) { .ai-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(237,221,255,.8); box-shadow: 0 12px 26px rgba(80,62,158,.4), inset 0 1px 0 rgba(255,255,255,.3); } }
  .ai-charge { display: block; width: 100%; min-height: 44px; margin-top: 10px; border-radius: 12px; border: 1px solid rgba(241,210,138,.6); background: rgba(241,210,138,.12); color: #f1d28a; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
  .ai-status { display: block; margin: 6px 0 10px; font-size: 12.5px; line-height: 1.7; color: #d9d8e9; }
  .ai-status[hidden] { display: none; }
  .ai-status:not([hidden]):has(.ai-access-lead) { display:grid; gap:8px; margin:0 0 14px; text-align:left; line-height:1.5; }
  .ai-access-lead { margin:0; color:#f6f3ff; font-size:14.5px; font-weight:600; line-height:1.6; letter-spacing:-.01em; text-wrap:balance; overflow-wrap:anywhere; }
  .ai-access-detail { margin:0; color:#c9c6df; font-size:13px; line-height:1.65; white-space:pre-line; text-wrap:balance; }
  .ai-access-gift { display:block; padding-top:12px; border-top:1px solid rgba(241,210,138,.18); color:#f5d78f; font-size:15px; font-weight:750; text-wrap:balance; }
  .ai-access-meta { display:block; padding-top:10px; border-top:1px solid rgba(241,210,138,.18); color:#aaa8c2; font-size:11.5px; line-height:1.65; white-space:pre-line; }
  .ai-box[data-access="offer"] .ai-btn:disabled { cursor:default; box-shadow:none; }
  /* 비로그인·질문권 부족 안내는 로그인 때와 같은 머리·버튼·하단 문구를 쓴다(입력칸이 없으니 입력 안내만 숨김) */
  .ai-box[data-access="offer"] .ai-input-disclosure { display:none; }
  .ai-have--solo { grid-template-columns:minmax(0,1fr); }
  .ai-have li.ai-have-gift { color:#f5d78f; }
  .ai-status .ai-have + .history-retry { margin-top:8px; }
  .ai-box .ai-note.ai-foot { margin:12px 0 0; text-align:center; letter-spacing:.015em; line-height:1.5; }
  /* 안내 문구는 맨 아래에 같은 작은 글씨로 모은다 */
  .ai-box .ai-fine { margin: 6px 0 0; font-size: 11px; line-height: 1.6; color: #a9a6c4; text-align: left; } .ai-box .ai-fine a { color: #c9b8ff; }
  /* 보유 내역은 알약 대신 한 줄의 차분한 글로 */
  .ai-status > b { margin-right: 8px; color: #a9a6c4; font-size: 12px; font-weight: 600; }
  .ai-status span { color: #dcd8f0; font-weight: 600; }
  /* 보유 내역: 왼쪽 '보유' 제목, 오른쪽에 항목을 한 줄씩(금색 점) */
  .ai-have { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 10px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.03); text-align: left; }
  .ai-have > b { padding-top: 1px; color: #a9a6c4; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .ai-have ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
  .ai-have li { display: flex; align-items: baseline; gap: 8px; color: #eceaf8; font-size: 13px; font-weight: 600; line-height: 1.45; }
  .ai-have li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #f1d28a; transform: translateY(-2px); }
  /* PC: 질문 예시는 접지 않고 펼쳐 둔다(여는 줄 없이 예시 버튼만) */
  @media (min-width: 1000px) { .ai-examples[open] > summary { display: none; } .ai-examples[open] > .ai-chips { margin-top: 0; } }
  /* 질문 말로 입력(마이크) 녹음 중: 빨간 원으로 확실히 구분하고, 아이콘이 숨쉬듯 작아졌다 커지며 둘레에 파동이 퍼진다 */
  .ai-q-field #kcsMic.on { background: #e5484d; border-color: #ff9a9e; color: #fff; box-shadow: 0 0 0 0 rgba(229,72,77,.55); animation: kcMicRing 1.4s ease-out infinite; }
  .ai-q-field #kcsMic.on svg { animation: kcMicBeat 1s ease-in-out infinite; transform-origin: 50% 50%; }
  @keyframes kcMicBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }
  @keyframes kcMicRing { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); } 100% { box-shadow: 0 0 0 10px rgba(229,72,77,0); } }
  @media (prefers-reduced-motion: reduce) { .ai-q-field #kcsMic.on, .ai-q-field #kcsMic.on svg { animation: none; } }
  /* 해석이 끝난 뒤 평가는 주 행동으로, 신고는 작은 보조 링크로 둔다. */
  /* 해석 마무리 카드 */
  .ai-feedback-tools { display:grid; gap:12px; margin-top:18px; padding:14px 16px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.035); }
  .ai-fb { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; }
  .ai-feedback-tools .ai-fb-q { margin:0; padding:0; font-size:13.5px; font-weight:600; line-height:1.5; color:rgba(238,240,255,.9); }
  .ai-fb-q.ai-fb-done { color:#9fe9cd; font-weight:600; }
  .ai-fb-btns { display:flex; gap:8px; }
  .ai-fb .ai-fb-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:38px; padding:0 14px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.05); color:#eef0fb; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s; }
  .ai-fb .ai-fb-btn { white-space:nowrap; }
  .ai-fb .ai-fb-btn span { font-size:15px; }
  .ai-fb .ai-fb-btn:hover { border-color:rgba(241,210,138,.55); background:rgba(241,210,138,.1); }
  .ai-wrap-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
  .ai-wrap-meta:has(> .ai-wrap-voice:empty):not(:has(> .ai-report)) { display:none; }
  .ai-wrap-voice { display:flex; align-items:center; gap:8px; min-width:0; }
  .ai-wrap-voice:empty { display:none; }
  .ai-wrap-voice .kcs-voice { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
  .ai-wrap-voice .kcs-voice #kcsListen, .ai-wrap-voice .kcs-voice .kcs-note { display:none; }
  .ai-wrap-voice .kcs-voice button:not([hidden]) { min-height:34px; padding:6px 14px; font-size:12.5px; }
  .ai-wrap-meta > .ai-report { flex:none; width:auto; min-height:34px; margin:0 0 0 auto; padding:6px 2px; border:0; background:transparent; box-shadow:none; color:#a9a3bd; font-size:12px; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
  .ai-wrap-meta > .ai-report:hover { color:#f1d28a; background:transparent; }
  @media (max-width:560px) { .ai-feedback-tools .ai-fb-q { flex:1 1 100%; } .ai-fb-btns { flex:1 1 100%; } .ai-fb .ai-fb-btn { flex:1; min-width:0; padding-inline:10px; } }
  .ai-hook { margin: 0 0 10px; font-size: 13px; line-height: 1.65; color: rgba(238,240,255,.85); word-break: keep-all; }
  .ai-need { margin: 0 0 10px; font-size: 14px; font-weight: 600; line-height: 1.6; color: #efe6cf; word-break: keep-all; text-wrap: pretty; }
  /* 질문 안내 문구는 캐릭터 이름 오른쪽(좁은 화면에서는 아래 줄). 질문 칸이 숨으면 같이 숨는다. */
  .ai-head:has(> .ai-need) .ai-character-caption { flex:0 1 auto; }
  .ai-head > .ai-need { flex:1 1 240px; margin:0; padding-left:14px; border-left:1px solid rgba(241,210,138,.22); }
  .ai-box:not([data-access="offer"]):has(#aiQ[hidden]) .ai-head > .ai-need, .ai-head > .ai-need:empty { display:none; }
  @media (max-width:560px) { .ai-head > .ai-need { flex-basis:100%; padding-left:0; border-left:0; } }
  .ai-pending-slot { position:relative; z-index:41; min-width:0; }
  .ai-pending-slot[hidden] { display:none; }
  .ai-pending { position:relative; z-index:40; width:100%; box-sizing:border-box; margin:0; padding:10px 14px; border:1px solid rgba(231,196,124,.38); border-radius:18px; background:#231d33; color:#f7f1e4; box-shadow:0 10px 30px rgba(0,0,0,.2); }
  .ai-pending[hidden] { display:none; }
  .ai-pending-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .ai-pending-toggle { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:5px 4px; border:0; background:none; color:inherit; font:inherit; font-size:15px; font-weight:700; line-height:1.5; text-align:left; cursor:pointer; }
  .ai-pending-icon { flex:none; width:22px; height:22px; color:#e8c67e; }
  #aiPendingTitle { flex:1; min-width:0; }
  .ai-pending-toggle::after { content:''; flex:none; width:9px; height:9px; margin:0 4px 4px auto; border-right:2px solid #e8c67e; border-bottom:2px solid #e8c67e; transform:rotate(45deg); transition:transform .2s ease; }
  .ai-pending-toggle[aria-expanded="true"]::after { transform:rotate(225deg); }
  .ai-pending-list { display:grid; gap:9px; max-height:min(360px,55dvh); margin-top:10px; overflow-y:auto; }
  .ai-pending-list[hidden] { display:none; }
  .ai-pending-item { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.04); }
  .ai-pending-copy { flex:1; min-width:0; line-height:1.45; }
  /* 대화 상대 캐릭터 얼굴(40px 원형, 160px 축소본 사용) */
  .ai-pending-face { flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:center 20%; background:#161420; box-shadow:0 0 0 1px rgba(231,196,124,.45); }
  .ai-pending-face[hidden] { display:none; }
  .ai-pending-ini { display:grid; place-items:center; color:#e8c67e; font-weight:700; font-size:15px; }
  .ai-pending-topic { display:block; overflow-wrap:anywhere; }
  .ai-pending-copy small { display:block; margin-top:2px; color:rgba(245,239,225,.67); }
  .ai-pending-item button { flex:none; padding:9px 12px; border:0; border-radius:9px; background:#e8c67e; color:#241a32; font:inherit; font-weight:700; cursor:pointer; }
  .ai-pending-item button:disabled { opacity:.55; cursor:wait; }
  @media (max-width:560px) {
    .ai-pending { padding:14px; }
    .ai-pending-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 9px; }
    .ai-pending-face { width:34px; height:34px; }
    .ai-pending-topic { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:12px; line-height:1.35; }
    .ai-pending-copy small { margin-top:3px; font-size:10px; line-height:1.35; }
    .ai-pending-item button { align-self:center; min-height:34px; padding:7px 8px; font-size:11px; white-space:nowrap; }
  }
  @media (max-width:380px) { .ai-pending-toggle { font-size:14px; } }
  .ai-pending[data-expanded="true"] { border-radius:14px 14px 0 0; }
  .ai-pending-list:not([hidden]) { position:absolute; right:-1px; top:calc(100% - 1px); left:-1px; z-index:1; margin:0; padding:8px 12px; max-height:min(248px,40dvh); border:1px solid rgba(231,196,124,.38); border-top:0; border-radius:0 0 14px 14px; background:#231d33; box-shadow:0 16px 36px rgba(0,0,0,.34); overscroll-behavior:contain; animation:aiPendingListIn .2s ease-out both; }
  @media (max-width:560px) { .ai-pending-list:not([hidden]) { gap:6px; padding:8px; } }
  @media (min-width:1000px) {
    /* Reserve the notice row before account/data requests or DOM relocation finish. */
    .app #modes { position:relative; --pending-notice-height:clamp(52px,6.5dvh,60px); padding-top:calc(var(--pending-notice-height) + 20px); }
    #modes > .ai-pending-slot { position:absolute; inset:0 0 auto; height:var(--pending-notice-height); margin:0; }
    #modes > .ai-pending-slot .ai-pending, #modes > .ai-pending-slot .ai-pending-head { height:100%; }
    .ai-pending { padding:10px 14px; }
    .ai-pending[data-expanded="true"] { box-shadow:0 12px 28px rgba(0,0,0,.28); }
    .ai-pending-toggle { font-size:13px; }
    .ai-pending-list { gap:0; max-height:min(248px,45dvh); margin-top:8px; overscroll-behavior:contain; }
    .ai-pending-list:not([hidden]) { animation:aiPendingListIn .2s ease both; }
    .ai-pending-item { gap:10px; padding:10px 0; border:0; border-top:1px solid rgba(255,255,255,.1); border-radius:0; background:none; }
    .ai-pending-topic { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:12px; line-height:1.45; }
    .ai-pending-copy small { margin-top:4px; font-size:10px; line-height:1.4; }
    .ai-pending-item button { min-height:34px; padding:7px 10px; font-size:11px; white-space:nowrap; }
  }
  @keyframes aiPendingListIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion:reduce) { .ai-pending { transition:none; } .ai-pending-list:not([hidden]) { animation:none; } }
  .ai-q { margin: 0 0 10px; }
  /* 키보드가 열린 동안에는 실제 보이는 높이를 한 번만 적용한다.
     하단 닫기 대신 AI 시작 버튼에 공간을 주고, 상단 닫기는 유지한다. */
  #resultModal.kb-open { top: var(--ai-view-top, 0px); bottom: auto; height: var(--ai-view-height); padding: 12px 16px; box-sizing: border-box; }
  #resultModal.kb-open .mbox { height: 100%; max-height: 100% !important; }
  #resultModal.kb-open .mhead { flex: none; padding: 10px 14px 6px; }
  #resultModal.kb-open .mfoot, #resultModal.kb-open .ai-chips, #resultModal.kb-open .ai-need { display: none; }
  #resultModal.kb-open .page { padding-bottom: 12px !important; }
  #resultModal.kb-open .ai-box { padding: 12px; }
  #resultModal.kb-open .ai-head { margin-bottom: 10px; }
  #resultModal.kb-compact .ai-head, #resultModal.kb-compact .ai-status { display: none; }
  .ai-q[hidden], .ai-q-err[hidden], .ai-hook[hidden] { display: none; }
  .ai-q-field { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); transition: border-color .2s, box-shadow .2s; }
  .ai-q-field:focus-within { border-color: rgba(241,210,138,.55); box-shadow: 0 0 0 3px rgba(241,210,138,.12); }
  .ai-q-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: 14px; }
  .ai-q-field input::placeholder { color: rgba(238,240,255,.5); }
  @media (max-width: 999.98px), (pointer: coarse) { .ai-q-field input { font-size: 16px; } }
  .ai-q-count { flex: none; font-size: 10.5px; color: rgba(238,240,255,.5); }
  .ai-q-field.invalid { border-color: rgba(255,159,180,.6); animation: questionShake .35s ease; }
  .ai-q-field.empty-hint textarea::placeholder { color: #ffb4c5; opacity: 1; }
  @keyframes questionShake { 0%,100% { transform:translateX(0); } 30% { transform:translateX(-3px); } 65% { transform:translateX(3px); } }
  .ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .ai-chips button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: rgba(238,240,255,.9); font: inherit; font-size: 12.5px; cursor: pointer; }
  .ai-q-err { margin: 6px 2px 0; font-size: 12px; color: #ff9fb4; }
  .ai-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: rgba(238,240,255,.6); }
  .lead-sum b { display: block; margin-bottom: 4px; color: #f1d28a; font-size: 11.5px; letter-spacing: .08em; }
  .result-question { text-align: center; font-size: 13px; font-style: italic; color: var(--sheet-ink-2); margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.04); }
  #resultModal .result-question { color: rgba(238,240,255,.75); background: rgba(255,255,255,.05); }
  @media (max-height: 740px) { .pcard { width: min(32vw, 118px) !important; } .pvisual { margin: 8px 0; } }
  .ynbig { text-align: center; margin: 2px 0 10px; }
  .ynbig.yes { color: #2f7d62; } .ynbig.no { color: #b4546a; }
  .yn-word { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
  .yn-reason { display: block; font-size: 13px; font-weight: 500; color: var(--sheet-ink-2); margin-top: 12px; line-height: 1.5; }
  .page { padding-bottom: 28px !important; }
  .pcard { width: min(40vw, 156px); aspect-ratio: 5 / 8; border-radius: 18px; position: relative; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(143,183,255,.6), 0 0 26px rgba(143,183,255,.45), 0 18px 30px rgba(43,45,74,.35); }
  .pcard.rev .art, .mini.rev .art { transform: rotate(180deg); }
  .ptitle { text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
  .pmeta { display: flex; justify-content: center; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
  .pill { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--sheet-ink-2); }
  .pill.rev { color: #b4546a; }
  .pill.yes { color: #2f7d62; } .pill.no { color: #b4546a; }
  .pmean { font-size: 15px; line-height: 1.8; background: rgba(255,255,255,.6); border-radius: 18px; padding: 14px 16px; margin: 0; }
  .altar { transition: transform .6s cubic-bezier(.3,.7,.2,1), opacity .4s ease; }
  .app.picking .altar { --altar-scale: 1.3; }
  /* 카드가 펼쳐진 뒤에는 테이블·장식 효과를 완전히 숨겨 카드에만 집중합니다. */
  .app.reading .altar, .app.reading .glow-dot { opacity: 0; pointer-events: none; }
  body:has(.app.reading) .stars { opacity: 0; animation: none; }
  /* 구슬은 카드 선택 단계에서 이미 감춰져 있으므로, 결과 전환 중 다시 보이지 않게 유지합니다. */
  .app.reading .crystal { opacity: 0; visibility: hidden; transform: scale(1.06); pointer-events: none; }
  .app.reading .pk-top, .app.reading .pk-x { visibility: hidden; pointer-events: none; }
  .app.reading-focus .top, .app.reading-focus .hello, .app.reading-focus .modes, .app.reading-focus #drawBtn, .app.reading-focus .lang-row { opacity: 0; visibility: hidden; pointer-events: none; }
  /* 10장: 카드 놓는 자리 두 줄이 테이블 꼭짓점과 겹치지 않도록 영역 높이(560px)를 넉넉히 둔다(테이블·카드 부채꼴은 영역 높이의 69% 지점이라 함께 내려간다) */
  .app.ten-picking .hero { height: calc((560px + (var(--rows, 2) - 2) * 78px) * var(--picker-scale)); margin-top: 0; }
  @media (max-width: 999.98px) {
    /* A language navigation can reopen the browser toolbar. The stable small
       viewport keeps the home controls/footer in the same visible frame. */
    body .app:not(.picking) { height:100svh; overflow-anchor:none; }
    .app.ten-picking .pk-x { top: -46px; }
  }
  .app.ten-spread .hero { height: calc(480px + (var(--rows, 2) - 2) * 150px); margin-top: 0; }
  html.picking .stars, .app.picking .crystal, .app.picking .crystal *, .app.picking .crystal::after, .app.picking .card .back { animation-play-state: paused !important; }
  .app.picking .spread { visibility: hidden; transition: opacity .4s, transform .5s, visibility 0s .5s; }
  /* 카드 선택 종료 후 실제 카드가 렌더링되기 전까지, 이전 스프레드(수정구 등)가 잠깐 다시 보이는 깜빡임을 막습니다. */
  .app.dealing .spread { visibility: hidden; opacity: 0; transform: translateY(-18px) scale(.7); pointer-events: none; }
  /* The selected card has landed in its slot. Grow the result spread when it
     becomes visible, without making each card rise a second time. */
  @keyframes pickerResultGrow { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
  @media (hover: none) and (pointer: coarse) {
    .app.reading:not(.dealing) .spread.picker-result { transition: none; animation: pickerResultGrow .5s cubic-bezier(.2,.9,.3,1) both; }
  }
  @media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
    .app.reading:not(.dealing) .spread.picker-result { animation: none; }
  }
  .deal-status { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: var(--text-2); font-size: 14px; pointer-events: none; }
  .deal-status[hidden] { display: none; }
  .top, .hello, .modes, #drawBtn, .lang-row, .spread { transition: opacity .4s, transform .5s; }
  html.picking, html.picking body { overflow-x: hidden; }
  .app.picking { overflow-y: hidden; }
  .app.picking .top, .app.picking .hello, .app.picking .modes, .app.picking #drawBtn, .app.picking .lang-row { opacity: 0; pointer-events: none; }
  .app.picking .spread { opacity: 0; transform: translateY(-18px) scale(.7); pointer-events: none; }
  .pk-top { position: absolute; left: 0; right: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .35s; pointer-events: none; }
  .app.picking .pk-top { opacity: 1; transition-delay: .3s; }
  .pk-x { position: absolute; top: 0; right: 0; z-index: 4; border-radius: 50%; border: 1px solid var(--stroke); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .35s; }
  .app.picking .pk-x { opacity: 1; pointer-events: auto; transition-delay: .3s; }
  /* 카드 선택이 끝나면(closing-picker) picking 상태(테이블 확대, 카드 숨김 등)는 그대로 둔 채
     장식 요소만 먼저 투명해진다. 실제 상태 전환은 이 페이드가 끝난 뒤 JS에서 한 번에 처리한다. */
  .app.closing-picker .altar, .app.closing-picker .glow-dot,
  .app.closing-picker .pk-top, .app.closing-picker .pk-x { opacity: 0; pointer-events: none; transition-delay: 0s !important; }
  .pk-slots { display: flex; }
  .pk-slots.many { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
  .pk-slot { display: flex; flex-direction: column; align-items: center; font-weight: 500; color: var(--text-2); }
  .pk-slots.many .pk-slot { line-height: 1.2; text-align: center; }
  .pk-slot i { position: relative; display: block; aspect-ratio: 5 / 8; border: 1px dashed rgba(183,156,255,.5); background: rgba(255,255,255,.04); }
  .pk-slot i .face { animation: rise .45s cubic-bezier(.2,.9,.3,1.2) both; }
  /* The landing card already reached full size and opacity in flight. A second
     rise here briefly dimmed its shadow and made the landing look like a pop. */
  .pk-slot i.arrived .face { animation: none; }
  .pk-slot i.arrived.pk-burst::after { content:""; position:absolute; inset:-6px; border-radius:14px; pointer-events:none; box-shadow:0 0 0 2px rgba(255,235,179,.92),0 0 22px 8px rgba(241,210,138,.8); opacity:0; will-change:transform,opacity; animation:pk-slot-burst .26s ease-out both; }
  @keyframes pk-slot-burst { 0% { transform:scale(.8); opacity:0; } 25% { transform:scale(1); opacity:1; } 100% { transform:scale(1.18); opacity:0; } }
  /* 선택한 카드에만 잠깐 생기는 이동 잔상. 테이블·덱의 조명이나 호버는 바꾸지 않습니다. */
  /* A zero-size origin can hold the fixed flight without rastering a full
     viewport-sized paint container on high-density Android screens. */
  .pk-flight-layer { position:fixed; left:0; top:0; width:0; height:0; z-index:32; pointer-events:none; contain:layout style; }
  .pk-flight-card,.pk-flight-mist { position:absolute; left:0; top:0; transform-origin:50% 50%; will-change:transform,opacity; pointer-events:none; }
  .pk-flight-card { border-radius:12px; box-shadow:0 0 18px rgba(241,210,138,.3),0 16px 24px rgba(0,0,0,.5); backface-visibility:hidden; }
  .pk-flight-card .face { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; }
  .pk-flight-card .back { box-shadow:none; }
  .pk-flight-mist { border-radius:45%; background:radial-gradient(ellipse at 40% 60%,rgba(210,202,234,.3),rgba(137,127,166,.16) 38%,transparent 70%); filter:blur(9px); }
  @media(prefers-reduced-motion:reduce) { .pk-slot i.arrived .face, .pk-slot i.arrived.pk-burst::after { animation:none; } }
  /* 휴대폰: 날아가는 카드 뒤 안개는 흐림 필터 대신 가장자리를 더 부드럽게 푼 그라데이션으로(매 프레임 흐림 계산 없음, 보이는 모양은 거의 같음). */
  @media (hover: none) and (pointer: coarse) { .pk-flight-mist { filter: none; background: radial-gradient(ellipse at 40% 60%,rgba(210,202,234,.24),rgba(137,127,166,.12) 34%,rgba(137,127,166,.04) 58%,transparent 76%); } }
  .pk-slot i .back::before { inset: 3px; border-radius: 5px; }
  .pk-slot i .back svg { width: 50%; }
  .pk-fan { --pk-scale: 1; position: absolute; left: -20px; right: -20px; top: 0; bottom: 0; z-index: 2; pointer-events: none; touch-action: none; contain: layout style; user-select: none; -webkit-user-select: none; }
  .app.picking .pk-fan { pointer-events: auto; cursor: pointer; }
  .pk-plane { position: absolute; left: var(--pk-x, 50%); top: var(--pk-y, var(--stage-y, 69%)); width: 0; height: 0; transform: translate3d(0,0,0) rotateX(58deg); transition: transform .46s cubic-bezier(.22,.82,.28,1); }
  .pk-card { position: absolute; width: calc(40px * var(--pk-scale)); height: calc(64px * var(--pk-scale)); margin-left: calc(-20px * var(--pk-scale)); border-radius: calc(5px * var(--pk-scale)); pointer-events: none;
    background-color: #0f172a; background-image: var(--kc-card-back, url("/a/card-fan.fk8tej.webp")); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: none; box-shadow: 0 4px 0 rgba(8,8,28,.5);
    transform: rotate(-70deg); transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .25s; }
  .pk-plane.hide > .pk-card { opacity: 0; transition: none; }
  .pk-fan.open .pk-card { transform: rotate(var(--a)); }
  /* 셔플 생략: 펼친 상태를 전환 없이 바로 그린다(다음 프레임부터는 원래 전환으로 돌아가 고르기 반응은 그대로) */
  .pk-fan.pk-instant .pk-card, .pk-fan.pk-instant .pk-plane { transition: none !important; }
  .pk-vplane { z-index: 6; pointer-events: none; transform: none; transform-style: flat; transition: transform .38s cubic-bezier(.22,.82,.28,1); }
  .pk-fan.fade { opacity: 0; transition: opacity .3s; pointer-events: none !important; }
  .pk-vx { position: absolute; left: calc(-20px * var(--pk-scale)); top: calc(-32px * var(--pk-scale)); width: calc(40px * var(--pk-scale)); height: calc(64px * var(--pk-scale)); }
  .pk-vx .pk-card { top: 0; left: 0; margin-left: 0; transition: none; transform: none; will-change: transform; box-shadow: 0 calc(.65px * var(--pk-scale)) 0 #d8d2c5, 0 calc(1.35px * var(--pk-scale)) 0 #777b85, 0 calc(2px * var(--pk-scale)) 0 #242b3a, 0 calc(5px * var(--pk-scale)) calc(7px * var(--pk-scale)) rgba(4,7,18,.25); }
  .pk-vglow { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(8,12,24,.3), transparent 65%); transform: scaleY(.53); z-index: -1; }
  .pk-fan.open .pk-card.hot { transform: rotate(var(--a)) translateY(calc(-8px * var(--pk-scale))); transition-duration: .15s; transition-delay: 0s !important; filter: brightness(1.2); }
  .pk-fan.open .pk-card.gone { transform: rotate(var(--a)) translateY(-10px); opacity: 0; visibility: hidden; transition: transform .18s, opacity .18s, visibility 0s .18s; transition-delay: 0s !important; }
  /* The flight clone already covers the picked card. Fading its source keeps
     repainting the moving back and the full stage on Android during takeoff. */
  @media (hover: none) and (pointer: coarse) {
    .pk-fan.open .pk-card.gone { transform: rotate(var(--a)); opacity: 0; visibility: hidden; transition: none; }
  }
  .xbtn { width: 100%; height: 48px; border: none; border-radius: 14px; font: inherit; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(90deg, #6f7cff, #b28bff); }
  .xtease { margin: 10px 0 12px; padding: 16px; border-radius: 20px; text-align: center; color: #fff;
    background: radial-gradient(120% 90% at 50% 0%, rgba(178,139,255,.55), transparent 70%), linear-gradient(160deg, #3b3a78, #25244a); box-shadow: 0 12px 24px rgba(43,45,74,.28); }
  .xtease > b { display: block; font-size: 16px; font-weight: 700; }
  .xtease > b + .xbtn { margin-top: 12px; }
  .xtease p { margin: 4px 0 10px; font-size: 13px; line-height: 1.55; color: rgba(235,236,255,.8); }
  .xq { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 12px; }
  .xq span { font-size: 12px; color: rgba(235,236,255,.75); font-weight: 600; }
  .xq b { font-size: 36px; font-weight: 800; letter-spacing: .04em; color: #fff; text-shadow: 0 0 18px rgba(207,180,255,.9); animation: xpulse 1.6s ease-in-out infinite; }
  .xq i { font-style: normal; font-size: 16px; margin-left: 2px; }
  @keyframes xpulse { 0%,100% { opacity: .65 } 50% { opacity: 1 } }
  .xtease .xbtn { height: 52px; font-size: 16px; box-shadow: 0 8px 20px rgba(111,124,255,.45); }
  .xcmp { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 4px; }
  .xcmp div { text-align: center; }
  .xcmp small { display: block; font-size: 12px; font-weight: 600; color: var(--sheet-ink-2); }
  .xcmp b { font-size: 26px; font-weight: 700; color: var(--sheet-ink-2); }
  .xcmp b.real { font-size: 42px; font-weight: 800; background: linear-gradient(90deg, #5b64d8, #c0609a); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .xcmp i { font-style: normal; font-size: 20px; color: var(--sheet-ink-2); }
  .xnote { text-align: center; margin: 2px 0 10px; font-size: 14px; font-weight: 600; line-height: 1.5; }
  .xnote span { font-size: 12px; font-weight: 500; color: var(--sheet-ink-2); }
  .xnotice { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); z-index: 95; width: calc(100% - 24px); max-width: 420px; display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 12px 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, rgba(126,86,214,.96), rgba(54,48,124,.96));
    border: 1px solid rgba(255,255,255,.2); box-shadow: 0 16px 40px rgba(0,0,0,.45); transform: translate(-50%, -160%); transition: transform .55s cubic-bezier(.2,.9,.3,1.15); }
  .xnotice.show { transform: translate(-50%, 0); }
  .xnotice div { flex: 1; min-width: 0; }
  .xnotice b { display: block; font-size: 14px; font-weight: 700; }
  .xnotice span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; margin-top: 2px; color: rgba(240,235,255,.85); }
  .xnotice a { flex-shrink: 0; padding: 9px 13px; border-radius: 12px; background: #fff; color: #3b2d7a; font-size: 13px; font-weight: 700; text-decoration: none; }
  .xnotice button { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; cursor: pointer; }
  .xtease.sent { background: radial-gradient(120% 90% at 50% 0%, rgba(90,200,160,.45), transparent 70%), linear-gradient(160deg, #2f4a66, #23284a); }
  .xbtn.ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); box-shadow: none !important; }
  .xchip { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--stroke);
    background: var(--glass); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .xlist { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding-bottom: 4px; }
  .xitem { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
  .xinfo { flex: 1; min-width: 0; }
  .xinfo b, .xinfo span, .xinfo em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xinfo b { font-size: 13px; font-weight: 600; }
  .xinfo span { font-size: 12px; color: rgba(225,228,255,.7); margin-top: 1px; }
  .xinfo em { white-space: normal !important; font-style: normal; font-size: 11.5px; color: rgba(225,228,255,.55); margin-top: 4px; }
  .xinfo i { font-style: normal; } .xinfo i.ok { color: #8ff0c4; font-weight: 600; }
  .xbtns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .xdel { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); font-size: 11px; cursor: pointer; }
  .xempty { text-align: center; color: rgba(225,228,255,.6); font-size: 13px; padding: 20px 0; margin: 0; }
  .xact { flex-shrink: 0; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
  .xact.ok { background: linear-gradient(90deg, #6f7cff, #b28bff); border: none; }
  #resultModal h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: #f1d28a; letter-spacing: .02em; }
  @media (max-width: 460px) { }
  .xcore { text-align: left; font-size: 16px; font-weight: 600; margin: 0 0 10px; color: #fff; line-height: 1.5; }
  .xdo { margin-top: 8px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; font-weight: 400; color: rgba(238,240,255,.86); }
  .xdo i { font-style: normal; display: inline-block; width: 18px; color: #7fe3bd; } .xdo span + span i { color: #ff9fb4; }
  .xq2 { margin: 10px 0 0; padding: 12px 16px; border-radius: 16px; border: 1px dashed rgba(241,210,138,.35); font-size: 14.5px; line-height: 1.6; color: #fff; }
  .xq2 b { display: block; font-size: 12px; font-weight: 600; color: #f1d28a; margin-bottom: 2px; }
  .xheart { align-self: center; font-size: 20px; color: #e0708e; margin-bottom: 20px; }
  .kws { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }
  .kws span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(91,100,216,.1); color: #4a52b8; }
  .kws.rev span { background: rgba(180,84,106,.1); color: #b4546a; }
  .padv { margin: 10px 0 0; background: linear-gradient(135deg, rgba(91,100,216,.13), rgba(143,183,255,.16)); border-radius: 18px; padding: 12px 16px; font-size: 15px; line-height: 1.7; font-weight: 500; }
  .padv b, .pflow b { display: block; font-size: 12px; font-weight: 600; color: #5b64d8; margin-bottom: 2px; }
  .pflow { background: rgba(255,255,255,.6); border-radius: 18px; padding: 12px 16px; margin-bottom: 10px; font-size: 15px; line-height: 1.7; }
  .pflow p { margin: 0; } .pflow p + p { margin-top: 6px; font-size: 14px; color: var(--sheet-ink-2); }
  .summary-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 0; }
  .mini-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sheet-ink-2); cursor: pointer; }
  .mini-wrap:active .mini { transform: scale(.94); }
  .mini { width: 68px; aspect-ratio: 5 / 8; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 14px rgba(43,45,74,.28); }
  .card-strip { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(43,45,74,.12); }
  .mainHead { margin: 0 0 14px; font-size: 21px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--sheet-ink); }
  #resultModal .mainHead { color: #fff; }
  .mfoot { padding: 10px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .dots { display: flex; gap: 6px; }
  .dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(43,45,74,.2); transition: all .25s; }
  .dots i.on { width: 20px; background: #5b64d8; }
  #resultModal .dots { gap: 0; padding: 8px 10px; margin: -8px 0; cursor: pointer; position: relative; z-index: 5; touch-action: manipulation; }
  #resultModal .dots i { cursor: pointer; position: relative; margin: 0 4px; pointer-events: none; }
  @media (hover: hover) and (pointer: fine) { #resultModal .dots i { width: 9px; height: 9px; margin: 0 5px; } #resultModal .dots i.on { width: 24px; } }
  @media (hover: hover) { #resultModal .dots i:not(.on):hover { background: rgba(255,255,255,.45); } }
  .mbtns.single { grid-template-columns: 1fr; }
  .mlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .mlinks[hidden] { display: none; }
  .mlinks button { min-width: 0; min-height: 44px; padding: 0 2px; border: 0; border-radius: 999px; background: transparent; color: rgba(238,240,255,.82); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; letter-spacing: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(241,210,138,.5); text-underline-offset: 4px; }
  .mlinks button:hover { color: #f1d28a; }
  @media (max-width: 359px) {
    .mlinks button { font-size: 12px; padding-inline: 1px; }
    html[lang="ko"] .mlinks { grid-template-columns: .92fr 1.26fr 1.12fr; }
  }
  .mbtns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; width: 100%; }
  .mbtn { height: 50px; border-radius: 16px; border: none; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .mbtn.ghost { background: rgba(43,45,74,.08); color: var(--sheet-ink); }
  .mbtn.main { background: linear-gradient(90deg, #6a7cff, #9a7cff); color: #fff; box-shadow: 0 8px 18px rgba(106,124,255,.35); }
  .hint .again { display: inline-flex; align-items: center; height: 40px; margin: 6px 3px 0; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(143,183,255,.5); background: rgba(143,183,255,.16); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .hint .again.alt { background: var(--glass); border-color: var(--stroke); }
  .hint { line-height: 1.6; }
  .mh-actions { display: flex; gap: 8px; align-items: center; }
  .mshare { height: 40px; padding: 0 12px 0 10px; border-radius: 999px; border: none; background: #3b3e6e; color: #fff; font: inherit; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; cursor: pointer; }
  .mshare svg { width: 15px; height: 15px; }
  .about-box { background: linear-gradient(180deg, #2a2946, #1a1928); color: var(--text); max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--stroke); border-bottom: none; }
  .about-box .grab { background: rgba(255,255,255,.25); }
  /* Keep every informational sheet dismissible at any scroll position. */
  .about-box > .about > .menu-head { position:sticky;top:-12px;z-index:6;flex:none;background:transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin:0 -22px 18px;padding:12px 22px;border-bottom:1px solid rgba(225,228,255,.1); }
  #deleteSheet .about-box { padding:16px 24px calc(28px + env(safe-area-inset-bottom)); }
  #deleteSheet .about > .menu-head { top:-16px;margin:0 -24px 22px;padding:14px 24px; }
  #deleteBody { display:grid;gap:18px; }
  #deleteBody .dg-lead,#deleteBody .dg-card { margin:0; }
  #deleteBody .dg-card { padding:20px; }
  #deleteBody .dg-notes { padding-left:0;line-height:1.85; }
  #deleteBody .dg-notes li + li { margin-top:10px; }
  .mhead { flex-shrink:0; }
  .about { margin: 0 0 6px; color: var(--text-2); font-size: 14px; line-height: 1.75; }
  .about ol.how { padding-left: 20px; margin: 0; }
  .about-box .cta { margin-top: 14px; }
  .about h2 { color: var(--text); font-size: 18px; margin: 0 0 8px; }
  .about h3 { color: var(--text); font-size: 15px; margin: 22px 0 8px; }
  .about ul { padding-left: 18px; margin: 0; }
  .about li { margin-bottom: 4px; }
  .about b { color: var(--text); font-weight: 600; }
  .about details { border: 1px solid var(--stroke); background: var(--glass); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
  .about summary { color: var(--text); font-weight: 600; cursor: pointer; list-style: none; }
  .about summary::-webkit-details-marker { display: none; }
  .about summary::after { content: "+"; float: right; color: var(--text-3); }
  .about details[open] summary::after { content: "−"; }
  .about details p { margin: 8px 0 0; }
  .about a { color: var(--glow); font-weight: 600; text-decoration: none; }
  .about-link { margin-top: 18px; }
  .history-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
  .history-empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 28px 0; }
  .history-entry { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); border-radius: 14px; padding: 0 13px; transition: border-color .2s, background .2s, transform .2s; }
  .history-entry:hover, .history-entry:focus-within { border-color: rgba(241,210,138,.42); background: rgba(241,210,138,.085); }
  .history-entry:active { transform: scale(.99); }
  .history-entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .history-date { font-size: 12px; color: var(--text-3); }
  .history-mode { font-size: 13px; font-weight: 600; color: var(--text); }
  .history-question { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); font-style: italic; }
  .history-cards { display: flex; gap: 8px; flex-wrap: wrap; }
  .history-card { width: 40px; aspect-ratio: 5 / 8; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
  .history-card svg.art, .history-card img { display: block; width: 100%; height: 100%; }
  .history-card img { object-fit: cover; }
  .history-card.rev .art, .history-card.rev img { transform: rotate(180deg); }
  .history-clear { display: block; width: fit-content; align-self: flex-end; margin: 12px 0 0; padding: 7px 10px; border-radius: 9px; border: 1px solid rgba(255,159,180,.2); background: transparent; color: rgba(255,159,180,.75); font: inherit; font-size: 11px; cursor: pointer; }
  /* 기록 목록은 선택만 담당하고, 긴 해설은 별도 읽기 화면에 표시한다. */
  .history-entry .history-summary { display: grid; grid-template-columns: 118px minmax(95px, .8fr) minmax(0, 1.5fr) 18px; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .history-entry .history-summary:focus-visible { outline: 2px solid #f1d28a; outline-offset: 4px; border-radius: 8px; }
  .history-preview { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .history-chevron { color: #f1d28a; text-align: right; font-size: 20px; line-height: 1; }
  .history-card-list { display: flex; flex-wrap: wrap; gap: 7px; }
  .history-card-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 8px 5px 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: var(--text-2); font-size: 11px; }
  .history-card-item .history-card { width: 27px; flex: none; }
  #historyBrowse[hidden], #historyDetail[hidden] { display: none !important; }
  #historyDetail { display: grid; grid-template-columns: minmax(215px, 250px) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 32px); align-items: start; width: 100%; margin: 12px 0 0; }
  .history-detail-nav { grid-column: 1 / -1; position: sticky; top: 0; z-index: 6; width: 100%; padding: 8px 0 10px; margin: 0 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); background:transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
  .history-back { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 1px solid rgba(241,210,138,.38); border-radius: 999px; background: rgba(32,31,52,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 22px rgba(7,8,24,.32); color: #f1d28a; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
  .history-back:hover { background: rgba(55,52,78,.96); border-color: rgba(241,210,138,.65); }
  .history-back:focus-visible { outline: 2px solid #f1d28a; outline-offset: 3px; }
  .history-detail-date { grid-column: 1 / -1; display: block; margin: 0 0 5px; color: var(--text-3); font-size: 12px; }
  #historyDetail .history-detail-heading { grid-column: 1 / -1; margin: 0 0 5px; color: #fff; font-size: clamp(20px, 2.5vw, 26px); line-height: 1.35; }
  #historyDetail .history-question { grid-column: 1 / -1; margin: 0 0 14px; }
  #historyDetail .history-card-list { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 16px 8px; min-width: 0; margin: 16px 0 0; padding: 10px 17px 12px 0; border-right: 1px solid rgba(255,255,255,.09); }
  #historyDetail .history-card-list.single { grid-template-columns: 1fr; }
  @media (min-width: 761px) { #historyDetail .history-card-list.single { position: sticky; top: 74px; } }
  #historyDetail .history-card-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; }
  #historyDetail .history-card-item .history-card { width: min(100%, 102px); margin-inline: auto; border: 0; border-radius: 7px; background: #1b1c38; box-shadow: 0 6px 15px rgba(0,0,0,.27); }
  #historyDetail .history-card-list.single .history-card-item .history-card { width: min(100%, 165px); }
  #historyDetail .history-card-caption { display: grid; gap: 2px; min-width: 0; }
  #historyDetail .history-card-caption b { color: #f6f2e9; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
  #historyDetail .history-card-caption small { color: rgba(225,230,255,.58); font-size: 11px; }
  #historyDetail .history-card-index { position: absolute; top: 0; left: 2px; color: rgba(241,210,138,.72); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
  #historyDetail .history-card-list.single .history-card-index { display: none; }
  #historyDetail .history-result { grid-column: 2; min-width: 0; }
  .history-retry { margin-top: 10px; padding: 7px 12px; border: 1px solid rgba(241,210,138,.3); border-radius: 9px; background: rgba(241,210,138,.08); color: #f1d28a; font: inherit; cursor: pointer; }
  .history-snapshot { word-break: keep-all; }
  .history-snapshot .hs-kicker { display: block; margin: 0 0 5px; color: #f1d28a; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
  .history-snapshot .hs-title { margin: 0 0 18px; color: #fff; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; }
  .history-snapshot .hs-h3 { margin: 22px 0 10px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.1); color: #e9dcbd; font-size: 14px; }
  .history-snapshot .hs-h4 { margin: 20px 0 8px; color: #f1d28a; font-size: 13px; line-height: 1.5; }
  .history-snapshot .hs-paragraph { margin: 0 0 13px; color: rgba(238,240,255,.9); font-size: 14px; line-height: 1.85; }
  .history-snapshot .hs-callout { margin: 12px 0 18px; padding: 13px 15px; border: 1px solid rgba(241,210,138,.2); border-radius: 12px; background: rgba(241,210,138,.065); color: #f6e7bd; font-size: 14px; line-height: 1.7; }
  .history-snapshot .hs-summary-title { margin: 18px 0 0; padding: 14px 15px 4px; border: 1px solid rgba(143,217,190,.28); border-bottom: 0; border-radius: 12px 12px 0 0; background: rgba(143,217,190,.08); color: #9ee6cb; font-size: 13px; line-height: 1.5; }
  .history-snapshot .hs-summary { margin: 0 0 18px; padding: 3px 15px 15px; border: 1px solid rgba(143,217,190,.28); border-top: 0; border-radius: 0 0 12px 12px; background: rgba(143,217,190,.08); color: #f0f7f5; font-size: 14px; font-weight: 650; line-height: 1.8; }
  .history-snapshot .hs-anchor { margin: 8px 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(4,8,22,.18); color: rgba(238,240,255,.86); font-size: 12.5px; line-height: 1.65; }
  .history-snapshot--legacy .hs-paragraph { margin-bottom: 15px; }
  html[lang="ko"] .history-snapshot .hs-paragraph, html[lang="ko"] .history-snapshot .hs-summary { text-align: left; }
  #historyStorageNote { margin: 0 0 10px; color: var(--text-3); font-size: 12px; line-height: 1.5; }
  @media (max-width: 760px) { #historyDetail { grid-template-columns: minmax(0, 1fr); } #historyDetail .history-card-list, #historyDetail .history-result { grid-column: 1; } #historyDetail .history-card-list { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); padding: 6px 0 18px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); } #historyDetail .history-card-list.single { grid-template-columns: 1fr; } #historyDetail .history-card-list.single .history-card-item .history-card { width: min(100%, 150px); } }
  @media (max-width: 560px) { .history-entry .history-summary { grid-template-columns: 58px minmax(0, 1fr) 18px; gap: 2px 8px; padding: 8px 0; } .history-summary .history-preview { grid-column: 2; font-size: 11px; } .history-summary .history-chevron { grid-column: 3; grid-row: 1 / 3; } .history-nores { text-align: left; } #historyDetail .history-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } #historyDetail .history-card-list.single .history-card-item .history-card { width: 112px; } }
  .history-result { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); color: rgba(238,240,255,.9); font-size: 13.5px; line-height: 1.8; }
  .history-result .mainHead { margin: 0 0 10px; font-size: 15px; font-weight: 750; color: #fff; }
  .history-result h4 { margin: 14px 0 4px; color: #f1d28a; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
  .history-result h4:first-child { margin-top: 0; }
  .history-result p { margin: 0 0 8px; }
  .history-result .pinterp, .history-result .syn { background: none; border: 0; padding: 0; margin: 0; }
  .history-result .ynbig { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .history-result .yn-word { display: block; font-size: 22px; font-weight: 800; }
  .history-result .ynbig.yes .yn-word { color: #7fe3bd; }
  .history-result .ynbig.no .yn-word { color: #ff9fb4; }
  .history-nores { color: var(--text-3); font-size: 11.5px; text-align: right; line-height: 1.5; }
  /* 오늘의 금전운: 동전 게이지 */
  .mnbig { display: grid; justify-items: center; gap: 6px; margin: 2px 0 14px; text-align: center; }
  .mnbig small { color: #f1d28a; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
  .mnbig .coins { display: flex; gap: 8px; }
  .mnbig .coins i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(241,210,138,.35); background: rgba(255,255,255,.08); }
  .mnbig .coins i.on { border-color: #f6dc9a; background: radial-gradient(circle at 35% 30%, #fff4d0, #e6c273 55%, #a87a30); box-shadow: 0 0 12px rgba(241,210,138,.45); }
  .mnbig .mn-word { font-size: 24px; font-weight: 800; color: #f8ecc8; text-shadow: 0 0 22px rgba(241,210,138,.4); }
  .mnbig .mn-sub { color: rgba(214,218,250,.66); font-size: 12px; }
  .mn-note { margin: 14px 0 0 !important; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(214,218,250,.55); font-size: 11.5px !important; line-height: 1.6; }
  .history-result .mnbig { padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
  /* 기록이 많아도 가볍게: 화면 밖 기록은 그리기를 미루고, 더 보기로 나눠 보여준다 */
  .history-entry { content-visibility: auto; contain-intrinsic-size: auto 56px; }
  .history-morebtn { display: block; width: 100%; margin: 4px 0 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(241,210,138,.32); background: rgba(241,210,138,.07); color: #f1d28a; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
  .hist-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .cal-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .cal-side .cal-day-title { margin-bottom: 3px; }
  .cal-side .history-morebtn { margin: 4px 0 0; }
  .cal-side .history-clear { margin-top: 6px; }
  @media (min-width: 900px) {
    #historySheet .about-box { width: min(94vw, 940px); max-width: 940px; }
    #historyList.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: clamp(24px, 3vw, 34px); }
    #historyList.cal-layout .hist-bar { grid-column: 1 / -1; }
    #historyList.cal-layout .cal-panel { margin-top: 0; }
    #historyList.cal-layout .cal-day-title { margin-top: 0; }
    #historyList.cal-layout .history-entry .history-summary { grid-template-columns: 48px minmax(0, 1fr) minmax(90px, 1.2fr) 16px; gap: 8px; }
  }
  .hist-filter { height: 34px; max-width: 100%; padding: 0 10px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(255,255,255,.06); color: var(--text-2); font: inherit; font-size: 12.5px; }
  .hist-filter { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6daf0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; cursor: pointer; }
  .hist-filter option { color: #1b1a2e; }

  /* 회원가입(체험) */
  .su-flow { display:grid; gap:20px; margin-top:2px; }
  .su-lead { margin:0; color:#d5d3ea; font-size:14px; line-height:1.65; }
  .su-gift { display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid rgba(241,210,138,.32); border-radius:14px; background:linear-gradient(135deg,rgba(241,210,138,.12),rgba(241,210,138,.04)); color:#f6e7bd; font-size:13.5px; line-height:1.55; }
  .su-gift i { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(241,210,138,.2); color:#f1d28a; font-style:normal; font-size:15px; }
  .su-sec { min-width:0; }
  .su-sec h4 { margin:0 2px 8px; color:#f1d28a; font-size:12.5px; font-weight:700; letter-spacing:.02em; }
  .su-agree { padding:2px 14px; border:1px solid var(--stroke); border-radius:14px; background:rgba(255,255,255,.03); }
  .su-check { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px; color: var(--text-2); cursor: pointer; }
  .su-check:last-child { border-bottom: 0; }
  .su-check span { flex: 1; }
  .su-check a { color: var(--text-3); font-size: 12px; text-decoration: underline; }
  .su-check input { width: 18px; height: 18px; accent-color: #f1d28a; flex: none; }
  .su-all { color: var(--text); font-weight: 700; }
  .su-provs { display: grid; gap: 10px; transition: opacity .2s; }
  .su-provs.su-off { opacity: .45; }
  .su-btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 13px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.12); transition: transform .15s, filter .15s, box-shadow .15s; }
  .su-btn:active { transform: scale(.985); }
  .su-btn:hover { filter: brightness(.97); box-shadow: 0 10px 24px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.2); }
  .su-btn i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
  .su-btn i svg { width: 24px; height: 24px; display: block; }
  .su-btn span { flex: 1; text-align: center; padding-right: 24px; }
  #googlePromptHost { position: fixed; z-index: 100; top: max(12px, env(safe-area-inset-top)); right: 12px; }
  .su-more { display: block; margin: 12px auto 0; padding: 8px 14px; border: 0; background: none; color: var(--text-3); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
  .su-birth { display:block; }
  .su-birth input { width:100%; min-height:48px; padding:8px 14px; border:1px solid var(--stroke); border-radius:12px; background:rgba(255,255,255,.05); color:#fff; font:inherit; font-size:15px; color-scheme:dark; }
  .su-birth.bad input { border-color:#ff9fb4; }
  .su-note { margin:7px 2px 0; color:#a9abc6; font-size:12px; line-height:1.55; }
  .su-note.bad { color:#ff9fb4; }
  .su-hint { margin:10px 0 0; text-align:center; color:#f1d28a; font-size:12.5px; }
  .su-consent { padding: 18px 16px; border: 1px solid var(--stroke); border-radius: 16px; background: rgba(255,255,255,.04); text-align: center; }
  .su-badge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 16px; }
  .su-badge i { display: grid; place-items: center; width: 28px; height: 28px; }
  .su-badge svg { width: 28px; height: 28px; }
  .su-consent p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
  .su-consent ul { margin: 0; padding: 0; list-style: none; text-align: left; font-size: 13px; color: var(--text); }
  .su-consent li { padding: 9px 12px; border-top: 1px solid rgba(255,255,255,.07); }
  .set-card { margin:0 0 12px; padding:16px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); }
  .set-card--hero { padding:16px 18px; border-color:rgba(241,210,138,.28); background:linear-gradient(145deg,rgba(241,210,138,.12),rgba(241,210,138,.03) 60%,rgba(255,255,255,.02)); }
  .set-card--hero .su-card { margin:0; padding:0; border:0; background:none; gap:14px; }
  .set-card--hero .su-avatar { width:50px; height:50px; font-size:19px; box-shadow:0 0 0 3px rgba(241,210,138,.18); }
  .set-card--hero .su-card b { font-size:17px; letter-spacing:-.01em; }
  .set-card--hero .su-card small { display:block; margin-top:3px; font-size:12.5px; }
  #walletBox .pay-actions .cta { width:100%; }
  .sw { position:relative; width:46px; height:26px; flex:none; border:0; border-radius:999px; background:rgba(255,255,255,.16); cursor:pointer; transition:background .2s; }
  .sw::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transition:transform .2s; }
  .sw[aria-checked="true"] { background:linear-gradient(135deg,#f1d28a,#d9ad54); }
  .sw[aria-checked="true"]::after { transform:translateX(20px); }
  .sw:disabled { opacity:.45; cursor:default; }
  .sw:focus-visible { outline:2px solid #f1d28a; outline-offset:2px; }
  #walletDetailBox { padding:6px 16px; }
  .wl-more > summary { list-style:none; display:flex; align-items:center; gap:10px; padding:10px 0; color:#fff; font-size:14px; font-weight:700; cursor:pointer; }
  .wl-more > summary::-webkit-details-marker { display:none; }
  .wl-more > summary i { display:grid; flex:none; place-items:center; width:26px; height:26px; border-radius:9px; color:#f1d28a; background:rgba(241,210,138,.12); }
  .wl-more > summary i svg { width:15px; height:15px; }
  .wl-more > summary span { flex:1; }
  #walletDetailBox .wl-more, #memorySettingsBox .wl-more { margin:0; padding:0; border:0; border-radius:0; background:none; }
  #walletDetailBox .wl-more > summary::after { float:none; content:""; width:8px; height:8px; margin-right:4px; border:solid rgba(255,255,255,.55); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .2s; }
  #memorySettingsBox .wl-more > summary::after { float:none; content:""; width:8px; height:8px; margin-right:4px; border:solid rgba(255,255,255,.55); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .2s; }
  #walletDetailBox .wl-more[open] > summary::after { content:""; transform:rotate(-135deg); }
  #memorySettingsBox .wl-more[open] > summary::after { content:""; transform:rotate(-135deg); }
  .wl-body { padding:2px 0 8px; }
  .wl-body .wl-sec { margin-top:0; padding:18px 0 4px; border-top:1px solid rgba(255,255,255,.09); }
  .wl-body .wl-sec h4, .wl-body .wl-info h4 { margin:0 0 10px; color:#f1d28a; font-size:12px; font-weight:700; letter-spacing:.04em; }
  .wl-body .wl-hint { margin:-4px 0 6px; }
  .wl-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; }
  .wl-row + .wl-row { border-top:1px solid rgba(255,255,255,.06); }
  .wl-row b { display:block; color:#eeeafa; font-size:13.5px; font-weight:600; }
  .wl-row small { display:block; margin-top:2px; color:#a9abc6; font-size:11.5px; }
  .wl-row em { flex:none; color:#f6f4ff; font-size:14px; font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; }
  .wl-body .ord { margin:0; padding:14px 0; border:0; border-radius:0; background:none; }
  .wl-body .ord + .ord { border-top:1px solid rgba(255,255,255,.07); }
  .wl-body .ord-foot { margin-top:10px; padding-top:0; border-top:0; }
  .wl-body .wl-info { margin-top:0; padding:18px 0 4px; border:0; border-top:1px solid rgba(255,255,255,.09); border-radius:0; background:none; }
  .wl-body .wl-info ul { margin:0 0 10px; padding-left:16px; color:#cfd0e6; }
  .wl-body .wl-info li + li { margin-top:4px; }
  .wl-body .wl-info p { margin:0 0 6px; color:#a9abc6; font-size:12px; }
  .wl-body .wl-use li { padding:10px 0; }
  .acct-zone { margin-top:2px; }
  .dg-lead { margin:-2px 0 14px; color:#d6d2ee; font-size:13px; line-height:1.6; }
  .dg-card { margin:0 0 14px; padding:15px 16px 14px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); }
  .dg-card h4 { display:flex; align-items:center; gap:9px; margin:0 0 12px; color:#f6f4ff; font-size:14px; font-weight:750; letter-spacing:-.01em; }
  .dg-card h4 i { display:grid; flex:none; place-items:center; width:24px; height:24px; border-radius:50%; font-size:13px; font-weight:800; font-style:normal; }
  .dg-card h4 em { margin-left:auto; min-width:22px; padding:2px 8px; border-radius:999px; background:rgba(241,210,138,.16); color:#f1d28a; font-size:11.5px; font-weight:800; font-style:normal; text-align:center; }
  .dg-lose { border-color:rgba(232,165,183,.3); background:radial-gradient(120% 120% at 0% 0%,rgba(232,165,183,.12),rgba(232,165,183,.02) 60%),rgba(255,255,255,.02); }
  .dg-lose h4 i { background:rgba(232,165,183,.18); color:#f2b6c7; }
  .dg-refund { border-color:rgba(241,210,138,.26); background:radial-gradient(120% 120% at 0% 0%,rgba(241,210,138,.1),rgba(241,210,138,.015) 60%),rgba(255,255,255,.02); }
  .dg-refund h4 i { background:rgba(241,210,138,.16); color:#f1d28a; }
  .dg-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; margin:0 0 12px; }
  .dg-tile { padding:9px 11px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(8,8,22,.28); }
  .dg-tile small { display:block; color:#a9abc6; font-size:11px; line-height:1.3; }
  .dg-tile b { display:block; margin-top:2px; color:#f6f4ff; font-size:15px; font-variant-numeric:tabular-nums; }
  .dg-notes { margin:0; padding:0; list-style:none; color:#dcdaf0; font-size:13px; line-height:1.6; }
  .dg-notes li { position:relative; padding-left:16px; }
  .dg-notes li + li { margin-top:6px; }
  .dg-notes li::before { content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:#f2b6c7; }
  .dg-refund > h4 { margin:0 0 20px; line-height:1.5; }
  .dg-refund .wl-body { display:grid; gap:20px; padding:0; }
  .dg-refund .wl-body .wl-info { display:grid; gap:12px; padding:0; border:0; line-height:1.75; }
  .dg-refund .wl-info ul,.dg-refund .wl-info p { margin:0; }
  .dg-refund .wl-info li { margin:0; padding-left:2px; }
  .dg-refund .wl-info li + li { margin-top:8px; }
  .dg-refund .wl-body .wl-info a { display:inline-flex; align-items:center; justify-self:start; min-height:40px; color:#bcd0ff; font-size:12.5px; font-weight:650; text-decoration:none; }
  .dg-refund .wl-body .wl-sec { padding:20px 0 0; }
  .dg-refund .wl-sec h4 { margin:0 0 14px; }
  .dg-refund .wl-empty { margin:0; padding:14px 16px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.025); line-height:1.7; }
  .dg-check { display:flex; align-items:flex-start; gap:11px; margin:2px 0 14px; padding:11px 13px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.035); color:#eeeafa; font-size:13px; line-height:1.55; cursor:pointer; transition:border-color .15s,background .15s; }
  .dg-check:has(input:checked) { border-color:rgba(232,165,183,.55); background:rgba(232,165,183,.08); }
  .dg-check input { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:#e58aa4; }
  .dg-actions { display:flex; gap:10px; }
  .dg-actions .cta { flex:1; min-width:0; margin-top:0; }
  .dg-danger { flex:1; min-width:0; height:48px; border:1px solid rgba(232,165,183,.5); border-radius:14px; background:rgba(232,165,183,.1); color:#f6bfd0; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
  .dg-danger:hover:not(:disabled) { background:rgba(232,165,183,.2); }
  .dg-danger:disabled { opacity:.38; cursor:default; }
  .acct-note { display:flex; gap:12px; margin:0 0 14px; padding:14px 16px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.03); }
  .acct-note > i { display:grid; flex:none; place-items:center; width:26px; height:26px; border-radius:9px; color:#f1d28a; background:rgba(241,210,138,.12); font-style:normal; }
  .acct-note > i svg { width:15px; height:15px; }
  .acct-note b { display:block; margin-bottom:6px; color:#fff; font-size:13.5px; }
  .acct-note ul { margin:0 0 10px; padding-left:16px; color:#b9bbd6; font-size:12.5px; line-height:1.65; }
  .acct-link { padding:0; border:0; background:none; color:#f1d28a; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
  .acct-link:hover { text-decoration:underline; text-underline-offset:3px; }
  .acct-zone .account-actions { padding:0; border-top:0; }
  #settingsSheet .acct-zone .account-actions .text-btn { flex:1; height:44px; min-height:44px; }
  .set-card:empty { display: none; margin: 0; padding: 0; border: 0; }
  .set-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #fff; }
  .set-card h3 i { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 9px; color: #f1d28a; background: rgba(241,210,138,.12); font-style: normal; }
  .set-card h3 i svg { width: 15px; height: 15px; }
  .set-card .su-card { margin: 0 0 12px; }
  .set-card .settings-row { padding: 10px 0; }
  .set-card .settings-row:first-of-type { padding-top: 0; }
  .set-card .settings-row:last-of-type { border-bottom: none; padding-bottom: 0; }
  .set-card .pay-demo, .set-card .su-hint { margin-top: 0; }
  .set-card .pay-actions { margin-top: 12px; }
  /* 초대·쿠폰: 요약(혜택 한 줄) → 할 일(링크·코드) → 조건·받은 혜택. 카드 안 카드를 겹치지 않고 한 장의 흐름으로 */
  .benefit-input { width:100%; box-sizing:border-box; background:#24233d; color:#f3f1fc; border:1px solid rgba(195,182,242,.28); border-radius:12px; padding:13px 14px; font:inherit; min-height:46px; }
  .benefit-input:focus-visible { outline:2px solid #ac98ed; outline-offset:2px; }
  .benefit-input::placeholder { color:#a4a2bf; opacity:1; }
  .benefit-code { text-transform:uppercase; letter-spacing:.09em; }
  .benefit-status { min-height:1.6em; margin:10px 0 0; overflow-wrap:anywhere; color:#f1d28a; line-height:1.6; font-size:13px; }
  .bn-hero { display:flex; align-items:center; gap:14px; padding:4px 2px 2px; }
  .bn-hero h3 { margin:0; color:#f7ecd0; font-size:18px; line-height:1.4; font-weight:700; letter-spacing:-.01em; word-break:keep-all; }
  .bn-hero p { margin:4px 0 0; color:var(--text-2); font-size:13.5px; line-height:1.6; word-break:keep-all; }
  .bn-badge { flex:none; display:grid; place-items:center; align-content:center; gap:2px; width:64px; height:64px; border-radius:18px; color:#f1d28a; background:radial-gradient(120% 120% at 30% 20%, rgba(241,210,138,.26), rgba(241,210,138,.06)); box-shadow:inset 0 0 0 1px rgba(241,210,138,.3); }
  .bn-badge svg { width:22px; height:22px; }
  .bn-badge b { font-size:13px; font-weight:800; line-height:1; color:#f8e2a6; white-space:nowrap; }
  .bn-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; }
  .bn-steps li { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border-radius:12px; background:rgba(255,255,255,.035); text-align:center; font-size:12.5px; line-height:1.4; color:var(--text-2); word-break:keep-all; }
  .bn-steps b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(241,210,138,.16); color:#f1d28a; font-size:12px; }
  .bn-card { display:grid; gap:10px; padding:16px; border:1px solid rgba(241,210,138,.14); border-radius:16px; background:rgba(255,255,255,.03); }
  .bn-label { margin:0; font-size:12.5px; font-weight:650; color:#d9d2ea; }
  .bn-field { position:relative; display:flex; align-items:center; gap:8px; }
  .bn-field .benefit-input { flex:1; min-width:0; }
  #benefitLink { padding-right:84px; text-overflow:ellipsis; color:#e8e4f6; font-size:13.5px; }
  .bn-inline { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 11px; border:1px solid rgba(241,210,138,.3); border-radius:9px; background:rgba(241,210,138,.1); color:#f6e3b4; font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; }
  .bn-inline svg { width:15px; height:15px; }
  .bn-inline:hover { background:rgba(241,210,138,.18); }
  .bn-wide { width:100%; margin:0; }
  .bn-code-row .cta { flex:none; width:auto; min-width:96px; height:46px; min-height:46px; margin:0; padding:0 18px; }
  .bn-stat { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid rgba(255,255,255,.07); font-size:13px; color:var(--text-2); }
  .bn-stat b { color:#f6f1e3; font-size:14px; }
  .bn-note, .bn-muted { margin:0; color:var(--text-2); font-size:13px; line-height:1.6; word-break:keep-all; }
  #benefitsBody .benefit-status:empty { display:none; }
  #benefitsBody .benefit-status { margin:0; }
  .bn-rules { border-radius:12px; background:rgba(255,255,255,.025); }
  .bn-rules > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; color:var(--text-2); font-size:13px; font-weight:650; cursor:pointer; }
  .bn-rules > summary::-webkit-details-marker { display:none; }
  .bn-rules > summary::after { content:'+'; color:#f1d28a; font-size:16px; line-height:1; }
  .bn-rules[open] > summary::after { content:'−'; }
  .bn-rules p { margin:0; padding:0 14px 14px; color:var(--text-2); font-size:12.5px; line-height:1.7; word-break:keep-all; }
  .bn-rewards h4 { margin:2px 2px 8px; color:#e9e3f5; font-size:13px; font-weight:700; }
  .bn-rewards ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
  .bn-rewards li { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); font-size:13.5px; color:#f1ecdf; }
  .bn-rewards li i { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:9px; color:#f1d28a; background:rgba(241,210,138,.12); }
  .bn-rewards li i svg { width:15px; height:15px; }
  .bn-rewards li span { flex:1; min-width:0; }
  .bn-rewards time { color:var(--text-3, #9a96b0); font-size:12px; white-space:nowrap; }
  @media (max-width:380px) { .bn-hero { align-items:flex-start; } .bn-badge { width:54px; height:54px; border-radius:15px; } .bn-hero h3 { font-size:16.5px; } .bn-steps li { font-size:11.5px; } }
  .benefit-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 14px; padding:4px; border:1px solid rgba(241,210,138,.16); border-radius:14px; background:rgba(255,255,255,.035); }
  .benefit-tabs button { min-height:42px; border:0; border-radius:10px; background:transparent; color:var(--text-2); font:inherit; font-size:14px; font-weight:650; cursor:pointer; }
  .benefit-tabs button[aria-selected="true"] { background:rgba(241,210,138,.14); color:#f6e3b4; box-shadow:inset 0 0 0 1px rgba(241,210,138,.32); }
  .benefit-tabs button:focus-visible { outline:2px solid #f1d28a; outline-offset:2px; }
  /* 두 탭 패널을 같은 칸에 겹쳐 두고 고르지 않은 쪽은 보이지만 않게 한다 → 창 높이가 늘 더 긴 쪽에 맞춰져 탭을 바꿔도 출렁이지 않는다 */
  .benefit-panels { display:grid; }
  .benefit-panel { grid-area:1 / 1; display:grid; gap:14px; align-content:start; }
  .benefit-panel[hidden] { display:grid; visibility:hidden; pointer-events:none; }
  /* 초대·쿠폰 창도 회원 정보 창처럼 창·머리글을 같은 단색으로(캐릭터 테마의 :is(... #id ...)보다 높은 명시도) */
  html body #benefitsSheet .benefit-dialog { --member-sheet-bg:#25233a; background:var(--member-sheet-bg) !important; }
  html.kc-themed body #benefitsSheet .benefit-dialog { --member-sheet-bg:color-mix(in srgb, var(--bg-top) 55%, var(--bg-bot)); }
  .benefit-dialog .menu-head { position:sticky; top:0; z-index:2; background:var(--member-sheet-bg, #25233a); backdrop-filter:none; -webkit-backdrop-filter:none; padding:12px 0; margin-top:-12px; }
  #benefitsSheet .benefit-dialog { animation:pop .16s ease-out both; }
  body:has(#benefitsSheet:not([hidden])) .app *, body:has(#benefitsSheet:not([hidden])) .stars { animation-play-state:paused!important; }
  @media(prefers-reduced-motion:reduce){#benefitsSheet .benefit-dialog{animation:none;}}
  .cta-danger { background: linear-gradient(90deg,#ff9fb4,#ff7c93); box-shadow: 0 10px 24px rgba(255,124,147,.35), inset 0 1px 0 rgba(255,255,255,.25); }
  /* 회원 정보 화면의 금색 테마(카드 아이콘·KCARD78 로고와 같은 색)에 맞춘 버튼 — 기본 파랑·보라 CTA 대신 씀 */
  .cta-gold { background: linear-gradient(90deg,#f7e3a8,#e0b865); color: #2a2210; box-shadow: 0 10px 24px rgba(224,184,101,.35), inset 0 1px 0 rgba(255,255,255,.35); }
  #acctActionsBox { margin-top: 18px; }
  #acctActionsBox:empty { display: none; margin-top: 0; }
  .su-card { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; padding: 12px 14px; border: 1px solid rgba(241,210,138,.3); border-radius: 16px; background: rgba(241,210,138,.06); }
  .su-card b { display: block; font-size: 15px; }
  .su-card small { color: var(--text-3); font-size: 12px; }
  .su-avatar { position: relative; display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #fff1c4, #e6c273); color: #2a2210; font-weight: 800; font-size: 17px; overflow: hidden; }
  .su-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  @media (pointer: coarse) { .hist-bar .hist-filter { font-size: 16px; } }
  /* 화면에는 보이지 않지만 읽기 도구·검색 로봇이 읽는 소개(제목·설명·안내 링크) */
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* 준비 중인 리딩은 접어 두고, 사용 가능한 리딩이 먼저 눈에 들어오게 */
  .mode.soon-hide { display: none; }
  .soon-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 4px 0 2px; padding: 10px 12px; border: 1px dashed rgba(221,229,255,.2); border-radius: 14px; background: rgba(255,255,255,.03); color: rgba(226,230,255,.7); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .soon-toggle::after { content: '▾'; font-size: 11px; transition: transform .2s; }
  .soon-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .soon-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
  .menu-tool.wide { grid-column: 1 / -1; }
  .history-clear:active { transform: scale(.98); }
  /* 타로 기록: 달력 보기 */
  .hist-tabs { display: flex; gap: 4px; width: fit-content; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.06); }
  .hist-tabs button { padding: 6px 18px; border: 0; border-radius: 9px; background: none; color: var(--text-3); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
  .hist-tabs button.on { background: rgba(241,210,138,.16); color: #f1d28a; }
  /* 달력: 유리 패널 안에 월 제목·요일·날짜를 정돈하고, 기록이 있는 날은 카드 썸네일이 놓인 작은 명패로 보여준다 */
  .cal-panel { margin-top: 8px; padding: 12px; border-radius: 16px; border: 1px solid rgba(241,210,138,.18); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); }
  .cal-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
  .cal-title { display: grid; justify-items: center; gap: 2px; }
  .cal-title b { color: #f8ecc8; font-size: 18px; font-weight: 750; letter-spacing: .04em; }
  .cal-title small { color: rgba(214,218,250,.6); font-size: 11px; letter-spacing: .04em; }
  .cal-title small:empty { display: none; }
  .cal-head button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(241,210,138,.24); border-radius: 10px; background: rgba(241,210,138,.04); color: #f1d28a; cursor: pointer; transition: background .2s, transform .2s; }
  .cal-head button:hover { background: rgba(241,210,138,.16); }
  .cal-head button:active { transform: scale(.92); }
  .cal-head button svg { width: 16px; height: 16px; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .cal-dow { padding: 0 0 5px; color: rgba(214,218,250,.5); font-size: 10px; font-weight: 650; text-align: center; border-bottom: 1px solid rgba(255,255,255,.07); grid-row: 1; }
  .cal-dow.sun { color: rgba(255,159,180,.75); }
  .cal-dow.sat { color: rgba(143,183,255,.8); }
  .cal-cell { position: relative; height: 43px; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 0; border: 1px solid transparent; border-radius: 9px; background: none; color: rgba(214,218,250,.55); font: inherit; font-size: 11px; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
  .cal-cell .cal-n { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; font-weight: 600; }
  .cal-cell.sun .cal-n { color: rgba(255,159,180,.7); }
  .cal-cell.sat .cal-n { color: rgba(143,183,255,.75); }
  .cal-cell.blank { visibility: hidden; }
  button.cal-cell { cursor: pointer; background: rgba(241,210,138,.075); border-color: rgba(241,210,138,.18); color: #f6ecd0; }
  button.cal-cell .cal-n { color: #f6ecd0; }
  button.cal-cell:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(241,210,138,.2), rgba(241,210,138,.07)); }
  .cal-cell.today .cal-n { color: #2a2210; background: linear-gradient(135deg, #fff1c4, #e6c273); font-weight: 800; box-shadow: 0 0 12px rgba(241,210,138,.5); }
  button.cal-cell.today .cal-n { color: #2a2210; }
  .cal-cell.sel { border-color: #f1d28a; background: linear-gradient(180deg, rgba(241,210,138,.26), rgba(241,210,138,.1)); box-shadow: 0 0 0 1px rgba(241,210,138,.5), 0 8px 20px rgba(241,210,138,.16); }
  .cal-dot { width: 4px; height: 4px; border-radius: 50%; background: #f1d28a; }
  .cal-count { position: absolute; top: 1px; right: 2px; color: #f1d28a; font-size: 9px; font-style: normal; font-weight: 700; }
  .cal-day-title { display: flex; align-items: baseline; gap: 8px; margin: 13px 2px 4px; color: #f8ecc8; font-size: 13px; font-weight: 700; }
  .cal-day-title span { color: var(--text-3); font-size: 11px; font-weight: 500; }
  @media (min-width: 700px) { .cal-cell { height: 52px; } .cal-panel { padding: 14px 16px; } }
  .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--stroke); font-size: 14px; color: var(--text-2); }
  /* 회원 정보: 아래에서 올라오는 시트 대신 화면 가운데 모달로 띄운다(모바일 포함) */
  #settingsSheet.member-modal { align-items:center; padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
  #settingsSheet.member-modal .intro-box { width:min(100%, 560px); max-width:560px; max-height:min(88dvh, 860px); padding:0 22px 22px; border:1px solid rgba(241,210,138,.16); border-radius:24px; background:linear-gradient(180deg,#26253f,#191826); box-shadow:0 30px 80px rgba(0,0,0,.55); animation:memberIn .2s cubic-bezier(.2,.9,.3,1); }
  @keyframes memberIn { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
  /* 회원 정보 창과 고정 머리글은 같은 단색: 공통 테마의 대각선 그라데이션(!important) 대신 이 창만 단색으로 두어, 머리글이 배경과 어긋나거나 스크롤할 때 색이 바뀌지 않게 한다 */
  /* 캐릭터 테마(html.kc-themed :is(...,#siteMenu .menu-box,...))는 :is 안의 id 때문에 명시도가 높아, html body를 붙여 그보다 높게 둔다.
     창과 머리글은 같은 변수(--member-sheet-bg)를 써서 테마가 있어도 항상 같은 단색이다 */
  html body #settingsSheet.member-modal .intro-box { --member-sheet-bg:#25233a; background:var(--member-sheet-bg) !important; }
  html.kc-themed body #settingsSheet.member-modal .intro-box { --member-sheet-bg:color-mix(in srgb, var(--bg-top) 55%, var(--bg-bot)); }
  #settingsSheet.member-modal .about > .menu-head { top:0; margin:0 -22px 4px; padding:18px 22px 14px; background:var(--member-sheet-bg, #25233a); backdrop-filter:none; -webkit-backdrop-filter:none; }
  #settingsSheet.member-modal .about { gap:12px; }
  #settingsSheet.member-modal .set-card { margin:0; padding:16px; border-radius:18px; }
  #settingsSheet.member-modal .set-card--hero .su-card { margin:0; }
  #settingsSheet.member-modal .set-card h3 { margin:0 0 12px; font-size:14px; color:#f6f1e3; }
  #settingsSheet.member-modal #walletDetailBox, #settingsSheet.member-modal #serviceHistoryBox, #settingsSheet.member-modal #memorySettingsBox { padding:4px 16px; }
  #memorySettingsBox .wl-body { padding:2px 0 12px; }
  #settingsSheet.member-modal #serviceHistoryBox[hidden] { display:none; }
  /* 구독권 카드: 제목은 월간/연간 구독권, 아래에 만료일 */
  .wl-pass { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.035); }
  .wl-pass.on { border-color:rgba(241,210,138,.38); background:linear-gradient(135deg,rgba(241,210,138,.16),rgba(241,210,138,.04)); }
  .wl-pass > div { min-width:0; }
  .wl-pass b { display:block; color:#c9c6df; font-size:15px; font-weight:700; }
  .wl-pass.on b { color:#f6e7bd; font-size:18px; letter-spacing:-.01em; }
  .wl-pass span { display:block; margin-top:4px; color:#e3d6b4; font-size:13px; font-variant-numeric:tabular-nums; }
  .wl-pass .wl-tag { display:inline-block; margin-left:6px; padding:1px 7px; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#d8d5ea; font-size:11px; font-style:normal; font-weight:650; letter-spacing:0; vertical-align:3px; }
  .wl-pass span.wl-note { margin-top:2px; color:#b9b6cf; font-size:12px; }
  .wl-pass span.wl-next { color:#f1d28a; font-weight:650; }
  .wl-link { flex:none; max-width:46%; padding:8px 12px; border:1px solid rgba(241,210,138,.4); border-radius:10px; background:transparent; color:#f1d28a; font:inherit; font-size:12px; font-weight:650; line-height:1.4; cursor:pointer; }
  .wl-actions { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:46%; }
  .wl-actions .wl-link { max-width:none; }
  .wl-sub-link { padding:2px 4px; border:0; background:none; color:#b9b6cf; font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .wl-sub-link:disabled { opacity:.5; cursor:default; }
  .wl-link:hover:not(:disabled) { background:rgba(241,210,138,.1); }
  .wl-link:disabled { opacity:.5; cursor:default; }
  .wl-bal { display:grid; gap:0; margin-top:10px; padding:0 4px; }
  .wl-bal > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
  .wl-bal > div + div { border-top:1px solid rgba(255,255,255,.07); }
  .wl-bal small { color:#c9c6df; font-size:13.5px; }
  .wl-bal b { color:#f6f4ff; font-size:15px; font-variant-numeric:tabular-nums; }
  #settingsSheet.member-modal #walletBox .pay-actions { margin-top:12px; }
  #settingsSheet.member-modal #walletBox .pay-actions .cta, #settingsSheet.member-modal #memberBox .pay-actions .cta { width:100%; height:44px; }
  /* 로그인 전 계정 카드의 로그인 버튼·구독권 안내도 로그인 때 카드와 같은 모양(가로 전체 버튼, 상태 상자) */
  #settingsSheet.member-modal #memberBox .pay-actions { margin-top:12px; }
  .wl-pass--guest b { font-size:14px; font-weight:600; line-height:1.6; }
  /* 최근 사용 내역: 서비스 이름 · 사용 시각 · 결제 수단 */
  #settingsSheet .wl-use, #settingsSheet .svc-list { margin:0; padding:0; }
  .wl-use .use-main { min-width:0; }
  .wl-use .use-main b { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
  .wl-use .use-main b em { padding:1px 7px; border-radius:999px; background:rgba(143,183,255,.13); color:#bcd0ff; font-size:10.5px; font-style:normal; font-weight:650; }
  .wl-use time { font-variant-numeric:tabular-nums; }
  .use-amt.use-plan { padding:3px 9px; border-radius:999px; background:rgba(241,210,138,.12); color:#f1d28a; font-size:12px; }
  .use-amt.use-rest { color:#7fe3bd; font-size:12.5px; }
  /* AI 이용·오류 내역(별도 카드, member-client가 채움) */
  #serviceHistoryBox .wl-more { margin:0; padding:0; border:0; border-radius:0; background:none; }
  #serviceHistoryBox .wl-more > summary::after { content:""; width:8px; height:8px; margin-right:4px; border:solid rgba(255,255,255,.55); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .2s; }
  #serviceHistoryBox .wl-more[open] > summary::after { transform:rotate(-135deg); }
  .svc-body { padding:4px 0 10px; }
  .svc-body .wl-hint { margin:0 0 6px; }
  .svc-list { margin:0; padding:0; list-style:none; }
  .svc-row { display:grid; gap:2px; padding:11px 0; border-top:1px solid rgba(255,255,255,.07); }
  .svc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .svc-top b { color:#eeeafa; font-size:13.5px; }
  .svc-state { flex:none; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.07); color:#d5d6ea; font-size:11.5px; font-weight:650; }
  .svc-state.svc-delivered, .svc-state.svc-generated { background:rgba(127,227,189,.12); color:#9fe9cd; }
  .svc-state.svc-failed, .svc-state.svc-blocked, .svc-state.svc-cancelled { background:rgba(255,159,180,.12); color:#ffc2cf; }
  .svc-time { color:#a9abc6; font-size:12px; font-variant-numeric:tabular-nums; }
  .svc-note { margin:2px 0 0; color:#e3d6b4; font-size:12px; }
  .svc-ref { color:#8d8fab; font-size:11px; overflow-wrap:anywhere; }
  .svc-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; color:#c9c6df; font-size:12.5px; }
  .svc-pager .ord-btn { min-height:38px; padding:0 14px; font-size:12.5px; }
  @media (max-width:480px) {
    #settingsSheet.member-modal { padding:12px; }
    #settingsSheet.member-modal .intro-box { max-height:calc(100dvh - 24px); padding:0 16px 16px; border-radius:20px; }
    #settingsSheet.member-modal .about > .menu-head { margin:0 -16px 4px; padding:14px 16px 12px; }
    .wl-pass { flex-direction:column; align-items:stretch; }
    .wl-link { max-width:none; }
    .wl-actions { max-width:none; align-items:stretch; }
  }
  @media (prefers-reduced-motion:reduce) { #settingsSheet.member-modal .intro-box { animation:none; } }

  /* 결제 미리보기(체험) 화면 */
  #paySheet .pay-box { display:flex;flex-direction:column;max-height:92dvh;overflow:hidden; }
  #paySheet .about { display:flex;flex-direction:column;flex:1;min-height:0;margin:0;color:#e4e2f4; }
  #payBody { display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; }
  .pay-selection { flex:none; display:grid; gap:10px; padding:2px; }
  .pay-selection > :not(.pay-plan):not(.pay-product) { grid-column:1 / -1; }
  .pay-demo[hidden] { display:none; }
  .pay-demo { display:inline-flex; align-items:center; margin:0 0 12px; padding:5px 11px; border:1px solid rgba(241,210,138,.3); border-radius:999px; background:rgba(241,210,138,.08); color:#f1d28a; font-size:12px; line-height:1.4; }
  .pay-intro { display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; padding:13px 15px; border:1px solid rgba(241,210,138,.3); border-radius:16px; background:radial-gradient(120% 140% at 0% 0%,rgba(241,210,138,.16),rgba(241,210,138,.03) 60%),rgba(255,255,255,.02); }
  .pay-lead-ico { flex:none; display:grid; place-items:center; width:30px; height:30px; margin-top:1px; border-radius:50%; background:linear-gradient(135deg,#f9e7b0,#e3b95e); color:#2a2210; font-size:14px; }
  .pay-lead-body { min-width:0; color:#d6d2ee; font-size:12.5px; line-height:1.55; }
  .pay-lead-body b { display:block; margin-bottom:1px; color:#f6e3ad; font-size:15px; font-weight:750; letter-spacing:-.01em; }
  .pay-fine { margin:7px 0 0; color:#a9b5de; font-size:11.5px; line-height:1.5; }
  .pay-price small.pay-usd { margin-top:2px; color:#f1d28a; font-weight:650; }
  .pay-fine::before { content:"ⓘ"; margin-right:5px; color:#8fb7ff; }
  .pay-plan { position:relative; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:15px 16px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); color:var(--text); cursor:pointer; font:inherit; text-align:left; transition:border-color .18s, background .18s, box-shadow .18s, transform .15s; }
  .pay-plan:hover { border-color:rgba(241,210,138,.4); }
  .pay-plan:active { transform:scale(.99); }
  .pay-tabs { display:flex;align-self:start;gap:4px;padding:4px;margin:0 0 4px;border:1px solid var(--stroke);border-radius:12px;background:rgba(0,0,0,.12); }
  .pay-tabs button { flex:1;min-width:0;padding:10px 4px;border:0;border-radius:8px;font:inherit;font-size:14px;font-weight:700;color:#d9d5ee;background:none;cursor:pointer; }
  .pay-tabs button[aria-pressed="true"] { color:#fff;background:rgba(150,130,230,.3); }
  .pay-plan:focus-visible,.pay-tabs button:focus-visible { outline:2px solid #f1d28a;outline-offset:2px; }
  .pay-radio { flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); display:grid; place-items:center; transition:border-color .18s, background .18s; }
  .pay-plan.on .pay-radio { border-color:#f1d28a; background:#f1d28a; }
  .pay-plan.on .pay-radio::after { content:""; width:5px; height:9px; margin-top:-2px; border:solid #2a2210; border-width:0 2px 2px 0; transform:rotate(45deg); }
  .pay-main { flex:1; min-width:0; display:grid; gap:3px; }
  .pay-plan.on { border-color:#f1d28a; background:linear-gradient(145deg,rgba(241,210,138,.16),rgba(241,210,138,.04)); box-shadow:0 10px 28px rgba(0,0,0,.3), inset 0 0 0 1px rgba(241,210,138,.18); }
  .pay-plan b { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:16px; color:#f6f4ff; font-weight:750; letter-spacing:-.01em; }
  .pay-plan small { display:block; margin-top:0; color:#c9c5e0; font-size:12.5px; line-height:1.5; }
  /* 이름 줄 안에서 이름 바로 옆에 인기·절약 표시를 둔다. 표시는 줄바꿈하지 않고, 자리가 모자라면 이름이 줄임표로 줄어든다 */
  .pay-namerow { display:flex; align-items:center; gap:4px 7px; min-width:0; flex-wrap:wrap; }
  .pay-namerow b { display:block; flex:0 1 auto; min-width:0; white-space:normal; overflow-wrap:break-word; }
  .pay-chips { flex:none; display:flex; align-items:center; gap:4px; white-space:nowrap; }
  .pay-chips i { flex:none; display:inline-flex; align-items:center; gap:3px; height:19px; padding:0 8px; border-radius:999px; font-size:10.5px; font-weight:800; font-style:normal; line-height:1; letter-spacing:.01em; white-space:nowrap; }
  .pay-uses { color:#f1d28a; font-size:13.5px; font-weight:700; }
  /* 상품의 이점(설정값에서 자동으로 만든 문구)을 체크 목록으로 */
  .pay-facts { display:grid; gap:6px; }
  .pay-benefits { margin:0; padding:0; list-style:none; display:grid; gap:4px; }
  .pay-benefits li { position:relative; padding-left:17px; color:#dcd8f0; font-size:12.5px; line-height:1.5; }
  .pay-benefits li::before { content:"\2713"; position:absolute; left:0; color:#f1d28a; font-weight:800; }
  .pay-save { background:rgba(143,217,190,.14); color:#a9f0d2; border:1px solid rgba(143,217,190,.5); }
  .pay-price { flex:none;text-align:right;font-size:18px;font-weight:750;color:#f6f4ff;white-space:nowrap;font-variant-numeric:tabular-nums; }
  .pay-price small { font-weight: 500; }
  .pay-tag { background:linear-gradient(135deg,#f9e7b0,#e3b95e); color:#2a2210; }
  .pay-tag::before { content:"★"; font-size:9px; }
  .pay-checkout { flex:none;padding-top:16px;margin-top:12px;border-top:1px solid var(--stroke);background:transparent; }
  .pay-checkout .cta { margin-top:0; }
  .pay-sum { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 10px; padding:10px 14px; border:1px solid rgba(241,210,138,.3); border-radius:14px; background:linear-gradient(135deg,rgba(241,210,138,.12),rgba(241,210,138,.04)); }
  .pay-sum small { display:block; color:#b9bbd6; font-size:11px; line-height:1.35; }
  .pay-sum b { display:block; margin-top:1px; color:#f6f4ff; font-size:14px; }
  .pay-sum-price { text-align:right; }
  .pay-sum .pay-price { font-size:19px; }
  .pay-sec h4, .pay-info h4 { margin:0 0 8px; color:#f1d28a; font-size:12.5px; font-weight:700; letter-spacing:.02em; }
  .pay-sec { margin:0 0 14px; }
  .pay-check { display:flex; align-items:flex-start; gap:11px; margin:0 0 8px; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.03); color:#eeeafa; font-size:13px; line-height:1.55; cursor:pointer; transition:border-color .15s,background .15s; }
  .pay-check:has(input:checked) { border-color:rgba(241,210,138,.55); background:rgba(241,210,138,.07); }
  .pay-check input { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:#e0b865; }
  .pay-info { margin:0 0 16px; padding:14px 16px; border:1px solid rgba(143,183,255,.28); border-radius:16px; background:rgba(143,183,255,.07); color:#d5d9f2; font-size:12.5px; line-height:1.6; }
  .pay-info ul { margin:0 0 10px; padding-left:18px; }
  .pay-links { display:flex; flex-wrap:wrap; gap:8px; }
  .pay-links a { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border:1px solid rgba(143,183,255,.4); border-radius:999px; color:#bcd0ff; font-size:12.5px; font-weight:650; text-decoration:none; }
  .pay-links a:hover { background:rgba(143,183,255,.14); }
  .pay-dock { position:sticky; bottom:0; margin-top:4px; padding:10px 0 2px; }
  .pay-dock::before { content:""; position:absolute; left:0; right:0; top:-26px; bottom:0; z-index:-1; background:rgba(26,25,40,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); -webkit-mask-image:linear-gradient(transparent,#000 26px); mask-image:linear-gradient(transparent,#000 26px); pointer-events:none; }
  .pay-btns { display:flex; gap:10px; }
  @media (max-width:560px) { .pay-sum { margin-bottom:8px; padding:7px 12px; } .pay-sum > span:first-child small { display:none; } .pay-sum b { font-size:13.5px; } .pay-sum .pay-price { font-size:17px; } }
  .pay-btns .cta { flex:1; min-width:0; margin-top:0; }
  .pay-btns .cta-cancel { background:rgba(255,255,255,.07); color:#eeeafa; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
  .legal-foot { max-width:720px;margin:auto auto calc(10px + env(safe-area-inset-bottom));padding:18px 16px 0;text-align:center;font-size:11.5px;line-height:1.6;color:#6f7191; }
  .legal-foot .foot-line { display:flex; flex-wrap:nowrap; justify-content:center; gap:0 4px; }
  .legal-foot .foot-line a { position:relative; padding:9px 13px; color:#b6b9d9; font-size:13px; font-weight:500; white-space:nowrap; text-decoration:none; transition:color .15s; }
  .legal-foot .foot-line a + a::before { content:''; position:absolute; left:-2px; top:50%; width:1px; height:11px; background:rgba(255,255,255,.2); transform:translateY(-50%); }
  .legal-foot .foot-line a:hover, .legal-foot .foot-line a:focus-visible { color:#fff; text-decoration:underline; text-underline-offset:3px; }
  @media (max-width: 599.98px) {
    html[lang="ja"] .legal-foot { width:100%; min-width:0; padding-inline:0; }
    html[lang="ja"] .legal-foot .foot-line { gap:0; }
    html[lang="ja"] .legal-foot .foot-line a { display:inline-flex; align-items:center; min-height:44px; padding:9px 6px; font-size:12px; }
    html[lang="ja"] .legal-foot .foot-line a + a::before { left:0; }
  }
  /* Reserve real text/control heights, not a fixed 322px estimate. Browser bars,
     font loading and localized reading guidance can all change this space. */
  @media (max-width: 999.98px) {
    body .app > .top, body .app > .hello, body .app > #hint, body .app > #modes,
    body .app > #drawBtn, body .app > .legal-foot { flex:0 0 auto; }
    body .app:not(.picking) .hero { flex:1 1 0; height:auto; min-height:0; max-height:660px; container-type:size; }
    body .app:not(.picking):not(.reading) .hero { overflow:clip; }
    body .app:not(.picking):not(.reading) .spread { transform:translateY(min(34px,10cqh)); }
    body .app:not(.picking) .crystal { scale:var(--orb-fit,1); }
    body .app:not(.picking) .altar { width:min(clamp(230px,30vw,500px),56cqh); height:min(clamp(230px,30vw,500px),56cqh); }
    body .app:not(.picking) #drawBtn { margin-bottom:0; }
    body .app .legal-foot { width:min(720px,100%); min-width:0; padding:18px 0 0; margin-top:0; }
    body .app .legal-foot .foot-line { gap:0; }
    body .app .legal-foot .foot-line a { display:inline-flex; align-items:center; min-height:44px; padding:9px clamp(2px,1vw,6px); }
    body .app .legal-foot .foot-line a + a::before { left:0; }
    body .app.reading:not(.picking) .hero { overflow:auto; overflow-x:hidden; overscroll-behavior:contain; }
    body .app.reading:not(.picking) .spread.one .card { width:min(50vw,192px,max(32px,calc((100cqh - 60px) / 1.6))); }
    body .app.reading:not(.picking) .spread:not(.one):not(.ten) .card { width:min(calc((100vw - 76px) / 3),120px,max(32px,calc((100cqh - 60px) / 1.6))); }
  }
  @media (max-width:599.98px) {
    body .app:not(.picking) .altar { width:min(clamp(214px,58vw,330px),56cqh); height:min(clamp(214px,58vw,330px),56cqh); }
  }
  @media (max-width:359px) { body .app .legal-foot .foot-line a { font-size:12px; } }
  @media (min-width:600px) and (max-width:999.98px) {
    body .app:not(.picking) .hero { max-height:none; }
    body .app.reading:not(.picking) .spread.one .card { width:min(clamp(150px,30vw,300px),max(32px,calc((100cqh - 60px) / 1.6))); }
    body .app.reading:not(.picking) .spread:not(.one):not(.ten) .card { width:min(clamp(110px,22vw,230px),max(32px,calc((100cqh - 60px) / 1.6))); }
    body .app.reading .spread.ten { grid-template-columns:repeat(var(--colsw,5),minmax(0,1fr)); }
    body .app.reading .spread.ten .card { width:min(100%,max(28px,calc((100cqh - var(--rowsw,2) * 48px - (var(--rowsw,2) - 1) * 18px) / (var(--rowsw,2) * 1.6)))); margin-inline:auto; }
    body .app.reading .spread.ten .pos { width:100%; max-width:100%; margin-left:0; transform:none; white-space:normal; overflow-wrap:anywhere; }
  }
  .legal-copy { margin:8px 0 0;font-size:11px;opacity:.7;text-align:center; }
  @media (min-width:700px) { #bizSheet { align-items:center; } #bizSheet .about-box { width:min(520px,calc(100vw - 40px)); border-radius:24px; border-bottom:1px solid var(--stroke); } }
  .legal-doc .doc-toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; }
  .legal-doc .doc-toc a { display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--stroke); border-radius:999px; color:#e1e3f7; font-size:13px; font-weight:650; text-decoration:none; }
  .legal-doc .doc-sect > h2 { margin:26px 0 12px; padding-top:18px; border-top:1px solid var(--stroke); color:#f6f4ff; font-size:17px; }
  .legal-doc .doc-panel { margin:0 0 10px; padding:14px 16px; border:1px solid var(--stroke); border-radius:14px; background:rgba(255,255,255,.03); }
  .legal-doc h3, .legal-doc .lg-h { margin:0 0 6px; color:#f1d28a; font-size:14px; }
  .legal-doc .lg-sub { margin:16px 0 4px; color:#f6f4ff; font-size:13.5px; }
  .legal-doc p, .legal-doc li { color:#d5d3ea; font-size:13px; line-height:1.7; }
  .legal-doc p { margin:0 0 8px; }
  .legal-doc ul { margin:0 0 8px; padding-left:18px; }
  .legal-doc a { color:#a9c4ff; }
  .legal-doc .lg-table { width:100%; border-collapse:collapse; }
  .legal-doc .lg-table th, .legal-doc .lg-table td { padding:9px 6px; border-bottom:1px solid var(--stroke); text-align:left; vertical-align:top; font-size:13px; }
  #docSheet .about-box { max-height:min(88dvh,880px); overflow-y:auto; }
  @media (min-width:700px) { #docSheet { align-items:center; } #docSheet .about-box { width:min(680px,calc(100vw - 40px)); border-radius:24px; border-bottom:1px solid var(--stroke); } }
  .biz-list { margin:0;padding:0;list-style:none; }
  .biz-list li { display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:4px 14px;padding:11px 0;border-bottom:1px solid var(--stroke);font-size:13.5px;line-height:1.6; }
  .biz-list li:last-child { border-bottom:0; }
  .biz-list b { color:#cfd0e6;font-weight:650; }
  .biz-list span { color:#f4f2ff;overflow-wrap:anywhere; }
  .wl-sec { margin-top:20px; }
  .wl-sec h4, .wl-info h4 { margin:0 0 8px; color:#f1d28a; font-size:12.5px; font-weight:700; letter-spacing:.02em; }
  .wl-hint { margin:-4px 0 10px; color:#a9abc6; font-size:12px; line-height:1.55; }
  html.no-sale-a .sale-gate { display:none!important } html.no-sale-p .sl-p { display:none } #aiBox[data-no-sale="true"] #aiBtn { display:none!important }
  .wl-empty { margin:6px 0; color:#a9abc6; font-size:13px; }
  .wl-warn { margin:10px 0 0; padding:9px 12px; border:1px solid rgba(255,159,180,.4); border-radius:10px; background:rgba(255,159,180,.08); color:#ffc2cf; font-size:12.5px; }
  .ord { margin:0 0 10px; padding:14px; border:1px solid var(--stroke); border-radius:16px; background:rgba(255,255,255,.035); }
  .ord-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .ord-top b { color:#f6f4ff; font-size:15px; }
  .ord-price { color:#eeeafa; font-size:14px; font-variant-numeric:tabular-nums; }
  .ord-meta { margin-top:2px; color:#a9abc6; font-size:12px; }
  .ord-bar { height:6px; margin:12px 0 7px; border-radius:6px; background:rgba(255,255,255,.1); overflow:hidden; }
  .ord-bar i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#f7e3a8,#e0b865); }
  .ord-use { display:flex; justify-content:space-between; gap:10px; color:#b9bbd6; font-size:12px; }
  .ord-use b { color:#f6f4ff; font-weight:650; }
  .ord-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
  .ord-refund { min-width:0; font-size:12.5px; line-height:1.55; color:#cfd0e6; }
  .ord-refund small { display:block; color:#a9abc6; font-size:12px; }
  .ord-refund b { color:#f6f4ff; }
  .ord-refund em { color:#a9abc6; font-style:normal; }
  .ord-btn { flex:none; min-height:44px; padding:0 16px; border:1px solid rgba(241,210,138,.5); border-radius:12px; background:rgba(241,210,138,.1); color:#f6e7bd; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
  .ord-btn:hover:not(:disabled) { background:rgba(241,210,138,.18); }
  .ord-btn:disabled { opacity:.45; cursor:default; }
  .ord .chip { flex:none; padding:5px 11px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.06); color:#e1e3f7; font-size:12px; font-weight:650; }
  .wl-info { margin-top:20px; padding:14px 16px; border:1px solid rgba(143,183,255,.28); border-radius:16px; background:rgba(143,183,255,.07); color:#d5d9f2; font-size:12.5px; line-height:1.6; }
  .wl-info ul { margin:0 0 8px; padding-left:18px; }
  .wl-info p { margin:0 0 6px; color:#b9bfe0; }
  .wl-info a { color:#a9c4ff; font-size:12.5px; font-weight:650; text-decoration:none; }
  .wl-use { margin:0; padding:0; list-style:none; }
  .wl-use li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); }
  .wl-use li:last-child { border-bottom:0; }
  .wl-use b { display:block; color:#eeeafa; font-size:13.5px; font-weight:600; }
  .wl-use small { display:block; margin-top:2px; color:#a9abc6; font-size:12px; line-height:1.5; }
  .use-amt { flex:none; color:#f6f4ff; font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; }
  .wl-skel i { display:block; height:52px; margin-top:12px; border-radius:14px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04)); background-size:200% 100%; animation:wlShimmer 1.2s linear infinite; }
  @keyframes wlShimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
  .acct-notice { margin:0 0 8px;color:#a9abc6;font-size:12px;line-height:1.6; }
  .pay-loading { min-height:260px;display:grid;place-items:center;color:var(--text-2);font-size:14px; }
  .pay-plan:disabled,.pay-tabs button:disabled { cursor:default; }
  @media(max-width:380px){.pay-plan{gap:8px;padding:12px 10px}.pay-plan b{font-size:14px}.pay-price{font-size:15px}.pay-radio{width:14px;height:14px}}
  @media(max-height:700px){#paySheet .pay-intro{display:none}}
  @media(min-width:700px){#paySheet{align-items:center}#paySheet .pay-box{width:min(760px,calc(100vw - 40px));max-height:calc(100dvh - 48px);border-radius:24px;border-bottom:1px solid var(--stroke)}}
  /* 상품 배열: 좁은 화면은 가로로 긴 한 줄 목록(이름·혜택·가격이 한 줄에 읽힘), 700px 이상은 상품을 나란히 놓은 세로형 카드(가격·혜택을 한눈에 비교). 칸이 좁아도 인기·절약 표시가 밀리지 않게 라디오와 같은 줄에 둔다 */
  @media(min-width:700px){
    #paySheet .pay-selection { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; align-items:stretch; }
    #paySheet .pay-selection:has(> .pay-plan ~ .pay-plan ~ .pay-plan ~ .pay-plan) { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #paySheet .pay-plan { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"r n c" "u u u" "f f f" "p p p"; grid-template-rows:auto auto 1fr auto; align-items:center; gap:6px 8px; padding:16px; }
    #paySheet .pay-main, #paySheet .pay-namerow { display:contents; }
    #paySheet .pay-radio { grid-area:r; }
    #paySheet .pay-chips { grid-area:c; justify-self:end; }
    #paySheet .pay-namerow b { grid-area:n; min-width:0; margin-top:0; font-size:17px; white-space:normal; overflow-wrap:anywhere; }
    #paySheet .pay-uses { grid-area:u; }
    #paySheet .pay-main > small, #paySheet .pay-main > .pay-facts { grid-area:f; align-self:start; }
    #paySheet .pay-plan .pay-price { grid-area:p; margin-top:10px; padding-top:12px; border-top:1px solid rgba(255,255,255,.1); text-align:left; font-size:21px; }
  }
  /* 큰 화면: 상품과 확인 영역은 각자 스크롤하며 선택 금액·결제 버튼은 항상 보인다. */
  @media(min-width:1000px) and (min-height:740px){

    #payBody { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,1fr); grid-template-rows:minmax(0,1fr) auto; gap:0 22px; align-content:start; overflow:hidden; }
    #payBody > .pay-selection { grid-column:1; grid-row:1 / span 2; min-height:0; align-content:start; overflow-y:auto; overscroll-behavior:contain; }
    #payBody > .pay-checkout { grid-column:2; grid-row:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:0; padding:2px 0 0; border-top:0; }
    #payBody > .pay-dock { grid-column:2; grid-row:2; align-self:end; position:static; margin:0; padding:6px 0 0; }
    #payBody > .pay-dock::before { display:none; }
  }
  /* Product selection has its own scroll area; purchase consent is a second step. */
  #paySheet.pay-storefront .pay-intro { display:none; }
  #paySheet.pay-storefront .pay-box { height:min(860px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);padding:18px 26px 20px;border-radius:26px;border:1px solid rgba(215,191,139,.22); }
  #paySheet.pay-storefront .menu-head { margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08); }
  #paySheet.pay-storefront .menu-head h2 { margin:4px 0 0;font-size:22px; }
  #paySheet.pay-storefront .pay-demo { margin:0 0 8px;align-self:flex-start; }
  #paySheet.pay-storefront #payBody { display:flex;flex-direction:column;gap:0;overflow:hidden; }
  #paySheet.pay-storefront #payBody > .pay-selection { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;grid-auto-rows:max-content;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:16px;padding:2px 4px 22px; }
  #paySheet.pay-storefront .pay-hero { padding:14px 0 10px; }
  #paySheet.pay-storefront .pay-step { color:#d9c18c;font-size:11px;letter-spacing:.08em;font-weight:650; }
  #paySheet.pay-storefront .pay-hero h3 { margin:10px 0 9px;color:#f7f1e8;font-size:28px;line-height:1.35;letter-spacing:-.03em; }
  #paySheet.pay-storefront .pay-hero p { margin:0;max-width:620px;font-size:14px;line-height:1.7;color:var(--text-2); }
  #paySheet.pay-storefront .pay-catalog-note { margin:2px 0 0;padding:12px 2px 0;border-top:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.75;color:var(--text-2); }
  #paySheet.pay-storefront .pay-tabs { width:min(100%,420px);margin-bottom:6px;border-radius:14px; }
  #paySheet.pay-storefront .pay-tabs button { min-height:44px;padding:8px 12px;font-size:14px; }
  #paySheet.pay-storefront .pay-product { display:flex;flex-direction:column;min-width:0;border:1px solid var(--stroke);border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(0,0,0,.08));overflow:hidden; }
  #paySheet.pay-storefront .pay-product.on { border-color:#d9c18c;background:linear-gradient(150deg,rgba(216,191,141,.14),rgba(124,96,173,.1)); }
  /* 1회 구매(횟수권)는 구독과 상품 형태가 달라 달빛 청록으로 구분한다(2026-10-27) */
  #paySheet.pay-storefront .pay-product.pay-once { border-color:rgba(132,196,214,.42);background:linear-gradient(150deg,rgba(120,190,214,.15),rgba(40,80,110,.08)); }
  #paySheet.pay-storefront .pay-product.pay-once:hover { border-color:rgba(150,210,228,.6); }
  #paySheet.pay-storefront .pay-product.pay-once.on { border-color:#9fd3e6;background:linear-gradient(150deg,rgba(130,200,224,.18),rgba(60,110,150,.12));box-shadow:inset 0 0 0 1px rgba(159,211,230,.18); }
  #paySheet.pay-storefront .pay-product.pay-once .pay-benefits li::before { color:#9fd3e6; }
  #paySheet.pay-storefront .pay-product.pay-once .pay-plan.on .pay-choice { color:#bfe3ef; }
  #paySheet.pay-storefront .pay-product.pay-once .pay-plan.on .pay-radio { border-color:#9fd3e6;background:#9fd3e6; }
  #paySheet.pay-storefront .pay-product.pay-once .pay-plan.on .pay-radio::after { border-color:#10303a; }
  #paySheet.pay-storefront .pay-product .pay-plan,#paySheet.pay-storefront .pay-product .pay-plan.on { display:flex;flex-direction:column;align-items:stretch;flex:1;width:100%;border:0;border-radius:0;background:none;box-shadow:none;text-align:left; }
  #paySheet.pay-storefront .pay-product .pay-card-content { flex:1;height:auto; }
  #paySheet.pay-storefront .pay-reading-open { display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:42px;margin:0 18px 18px;padding:10px 12px;border:1px solid rgba(215,191,139,.22);border-radius:12px;background:rgba(255,255,255,.035);color:#e6cfa1;font:inherit;font-size:12px;line-height:1.5;text-align:left;cursor:pointer; }
  #paySheet.pay-storefront .pay-reading-open span { font-variant-numeric:tabular-nums;color:var(--text-2); }
  #paySheet.pay-storefront .pay-reading-open:hover { background:rgba(215,191,139,.09); }
  .pay-readings-dialog { box-sizing:border-box;width:min(640px,calc(100vw - 32px));max-width:none;max-height:min(640px,calc(100dvh - 40px));margin:auto;padding:0;border:1px solid rgba(215,191,139,.3);border-radius:22px;background:linear-gradient(155deg,#29253d,#1c192c);color:#f5f0e7;box-shadow:0 24px 80px #0008;overflow:hidden; }
  .pay-readings-dialog:not([open]) { display:none; }
  .pay-readings-dialog[open] { display:flex;flex-direction:column; }
  .pay-readings-dialog::backdrop { background:rgba(8,7,16,.72);backdrop-filter:blur(4px); }
  /* 상품 선택: 상담 예시·하루 단가·1회권 표시(2026-10-27) */
  .pay-sample-open { justify-self:start;margin-top:6px;padding:4px 0;border:0;background:none;color:#f1d28a;font:inherit;font-size:13px;font-weight:700;cursor:pointer; }
  .pay-sample-open:hover { text-decoration:underline; }
  .pay-sample-body { display:grid;gap:10px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 22px; }
  .pay-sample-turn { max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.65; }
  .pay-sample-turn b { display:block;margin-bottom:2px;font-size:11.5px;color:#bdb7cb; }
  .pay-sample-turn p { margin:0; }
  .pay-sample-turn.user { justify-self:end;background:rgba(217,193,140,.14);border:1px solid rgba(217,193,140,.28); }
  .pay-sample-turn.guide { justify-self:start;background:rgba(255,255,255,.05);border:1px solid #ffffff14; }
  #paySheet .pay-daily { color:#bdb7cb;font-weight:600; }
  #paySheet .pay-tag.pay-tag-try { background:linear-gradient(135deg,#d3eef6,#8fcbe0);color:#10303a; }
  /* 월간·연간 고르기(2026-10-27) */
  #paySheet .pay-period { display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04);justify-self:start; }
  #paySheet .pay-period button { padding:5px 12px;border:0;border-radius:999px;background:none;color:var(--text-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap; }
  #paySheet .pay-period button[aria-pressed="true"] { background:linear-gradient(135deg,#f3dfa7,#d9b765);color:#2a2210; }
  #paySheet .pay-period button i { font-style:normal;font-size:11px;opacity:.85; }
  #paySheet .pay-tag.pay-tag-off { background:linear-gradient(135deg,#e7d9ff,#b9a3f0);color:#231a3a; }
  @media(min-width:1000px) { #paySheet.pay-storefront .pay-hero .pay-period { margin-left:auto; } }
  /* 결제 후 환영(2026-10-27) */
  .pay-welcome-dialog { width:min(460px,calc(100vw - 32px)); }
  .pay-welcome-body { display:flex;gap:16px;align-items:flex-start;padding:22px 22px 6px; }
  .pay-welcome-portrait { flex:none;width:84px;height:104px;object-fit:cover;object-position:top;border-radius:14px;border:1px solid rgba(215,191,139,.35); }
  .pay-welcome-body h2 { margin:0 0 6px;color:#f1d28a;font-size:18px;line-height:1.4; }
  .pay-welcome-name { display:block;margin:0 0 4px;color:#f7f1e8;font-size:13px; }
  .pay-welcome-body p { margin:0 0 8px;color:#e8e3f3;font-size:14px;line-height:1.65; }
  .pay-welcome-foot { display:grid;gap:8px;padding:12px 22px 20px; }
  .pay-welcome-foot .cta { margin:0; }
  .pay-welcome-later { padding:6px;border:0;background:none;color:#bdb7cb;font:inherit;font-size:13px;cursor:pointer; }
  .pay-readings-head { display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 22px 16px;border-bottom:1px solid #ffffff18; }
  .pay-readings-head h2 { margin:0;font-size:20px;line-height:1.5; }
  .pay-readings-head p { margin:6px 0 0;color:#bdb7cb;font-size:13px;line-height:1.6; }
  .pay-readings-head button { flex:none;width:36px;height:36px;border:1px solid #ffffff24;border-radius:50%;background:#ffffff08;color:inherit;font-size:20px;cursor:pointer; }
  .pay-readings-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:18px 22px; }
  .pay-readings-list li { display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff04;font-size:14px;line-height:1.5;overflow-wrap:anywhere; }
  .pay-readings-list li::before { content:'✓';color:#e6cfa1; }
  .pay-readings-list li.off { color:#aaa5b6;background:#ffffff02;border-style:dashed; }
  .pay-readings-list li.off::before { content:'−';color:#878292; }
  .pay-reading-name { flex:1;min-width:0; }
  .pay-reading-state { flex:none;max-width:78px;padding:2px 5px;border:1px solid #ffffff20;border-radius:5px;font-size:10px;line-height:1.4; }
  /* 가격표 '모든 이용권 공통' 묶음(2026-10-27): 상품 카드 아래 한 번만, PC 4칸·좁은 화면 2칸 */
  .pay-included { margin:0;padding:12px 14px;border:1px solid rgba(215,191,139,.18);border-radius:14px;background:rgba(255,255,255,.025); }
  .pay-included-title { margin:0 0 8px;color:#f1d28a;font-size:12.5px;font-weight:800;line-height:1.4; }
  .pay-included-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;margin:0;padding:0;list-style:none; }
  .pay-included-grid li { position:relative;display:grid;align-content:start;gap:1px;padding-left:17px;min-width:0; }
  .pay-included-grid li::before { content:'✓';position:absolute;left:0;top:0;color:#f1d28a;font-weight:800;font-size:12.5px; }
  .pay-included-grid b { color:#f3efe6;font-size:12.5px;line-height:1.45; }
  .pay-included-grid span { color:var(--text-2);font-size:11.5px;line-height:1.45; }
  .pay-included-link { padding:0;border:0;background:none;color:#f1d28a;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;text-align:left; }
  .pay-included-link:hover { text-decoration:underline; }
  @media (max-width:760px) { .pay-included-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

  .pay-readings-foot { flex:none;padding:14px 22px 18px;border-top:1px solid #ffffff18; }
  .pay-readings-foot button { width:100%;min-height:44px;border:1px solid #d9c18c66;border-radius:12px;background:#d9c18c18;color:#f5e7c8;font:inherit;font-size:14px;cursor:pointer; }
  @media(max-width:599.98px) { .pay-readings-list { grid-template-columns:minmax(0,1fr);padding:14px 18px;gap:8px; } .pay-readings-head { padding:18px; } .pay-readings-foot { padding:12px 18px 16px; } }
  #paySheet.pay-storefront .pay-plan { position:relative;display:block;min-height:0;padding:0;border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(0,0,0,.08));box-shadow:none; }
  #paySheet.pay-storefront .pay-card-content { display:flex;flex-direction:column;gap:14px;min-height:300px;padding:22px 18px; }
  #paySheet.pay-storefront .pay-plan:hover { border-color:rgba(217,193,140,.65); }
  #paySheet.pay-storefront .pay-plan.on { background:linear-gradient(150deg,rgba(216,191,141,.14),rgba(124,96,173,.1));border-color:#d9c18c;box-shadow:inset 0 0 0 1px rgba(217,193,140,.16); }
  #paySheet.pay-storefront .pay-main { display:flex;flex:1;flex-direction:column;gap:12px; }
  #paySheet.pay-storefront .pay-namerow { grid-area:name;display:flex;align-items:center;flex-wrap:wrap;padding-right:26px;gap:8px;min-height:24px; }
  #paySheet.pay-storefront .pay-namerow b { font-size:19px;line-height:1.45;white-space:normal;overflow-wrap:anywhere; }
  #paySheet.pay-storefront .pay-chips { display:flex; }
  #paySheet.pay-storefront .pay-chips i { height:auto;min-height:22px;padding:4px 8px;font-size:11px; }
  #paySheet.pay-storefront .pay-radio { position:absolute;top:23px;right:17px;width:20px;height:20px; }
  #paySheet.pay-storefront .pay-uses { grid-area:uses;font-size:15px; }
  #paySheet.pay-storefront .pay-main > small,#paySheet.pay-storefront .pay-facts { grid-area:facts;display:grid;align-content:start;gap:10px; }
  #paySheet.pay-storefront .pay-plan small,#paySheet.pay-storefront .pay-benefits li { font-size:13px;line-height:1.65; }
  #paySheet.pay-storefront .pay-benefits { gap:7px; }
  #paySheet.pay-storefront .pay-card-footer { display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;margin-top:8px;border-top:1px solid rgba(255,255,255,.1); }
  #paySheet.pay-storefront .pay-plan .pay-price { flex:1;min-width:0;margin:0;padding:0;border:0;font-size:25px;line-height:1.3;text-align:left;white-space:normal;overflow-wrap:anywhere; }
  #paySheet.pay-storefront .pay-price .pay-usd { font-size:12px; }
  #paySheet.pay-storefront .pay-choice { flex:0 1 90px;align-self:flex-end;max-width:90px;padding-bottom:2px;color:var(--text-2);font-size:11px;line-height:1.5;text-align:right; }
  #paySheet.pay-storefront .pay-plan.on .pay-choice { color:#e6cfa1;font-weight:700; }
  #paySheet.pay-storefront #payBody > .pay-dock { flex:none;position:static;align-self:stretch;width:100%;margin:0;padding:14px 2px 0;border-top:1px solid rgba(255,255,255,.12); }
  #paySheet.pay-storefront .pay-dock::before { display:none; }
  #paySheet.pay-storefront .pay-browse-summary { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px; }
  #paySheet.pay-storefront .pay-browse-summary > span { min-width:0; }
  #paySheet.pay-storefront .pay-browse-summary small { display:block;margin-bottom:4px;font-size:11px;color:var(--text-2); }
  #paySheet.pay-storefront .pay-browse-summary b { display:block;font-size:15px;line-height:1.4; }
  #paySheet.pay-storefront .pay-browse-price { color:#f4e8cf;text-align:right;font-size:22px;font-weight:700;white-space:nowrap; }
  #paySheet.pay-storefront .pay-browse-price small { font-weight:400;font-size:11px;white-space:normal; }
  #paySheet.pay-storefront .pay-browse-dock .cta { width:100%;margin:0;min-height:50px;font-size:15px; }
  #paySheet.pay-storefront #payBody > .pay-checkout { flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start;overflow-y:auto;min-height:0;margin:0;padding:2px 4px 20px;border:0; }
  #paySheet.pay-storefront .pay-review-head { grid-column:1 / -1; }
  /* 상품 다시 선택: 금색 테두리의 작은 보조 버튼(글자와 테두리 사이 여백 확보) */
  #paySheet.pay-storefront .pay-review-head .text-btn { display:inline-flex;align-items:center;justify-content:center;gap:6px;justify-self:start;width:auto;height:auto;min-height:38px;padding:0 16px 0 13px;border:1px solid rgba(217,193,140,.42);border-radius:999px;background:rgba(217,193,140,.08);color:#ecd59f;font-size:13px;font-weight:650;line-height:1;box-shadow:none; }
  #paySheet.pay-storefront .pay-review-head .text-btn:hover:not(:disabled) { background:rgba(217,193,140,.16);border-color:rgba(217,193,140,.6); }
  #paySheet.pay-storefront .pay-review-head .text-btn:disabled { opacity:.45;cursor:default; }
  #paySheet.pay-storefront .pay-review-head h3 { margin:10px 0 8px;font-size:25px;line-height:1.4; }
  #paySheet.pay-storefront .pay-review-head p { margin:0;color:var(--text-2);font-size:13px;line-height:1.6; }
  #paySheet.pay-storefront .pay-review-product { padding:18px;border:1px solid rgba(217,193,140,.3);border-radius:18px;background:linear-gradient(135deg,rgba(217,193,140,.1),rgba(124,96,173,.06)); }
  #paySheet.pay-storefront .pay-review-product > small { color:var(--text-2);font-size:12px; }
  #paySheet.pay-storefront .pay-review-product h4 { margin:6px 0 12px;font-size:19px;color:#f5e6c8;overflow-wrap:anywhere; }
  #paySheet.pay-storefront .pay-review-product .pay-benefits { margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px; }
  #paySheet.pay-storefront .pay-sec { margin:0;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.025); }
  #paySheet.pay-storefront .pay-sec h4,#paySheet.pay-storefront .pay-info h4 { font-size:14px;margin-bottom:12px; }
  #paySheet.pay-storefront .pay-check { padding:12px 0;margin:0;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;background:transparent;line-height:1.7; }
  #paySheet.pay-storefront .pay-check:last-child { border-bottom:0;padding-bottom:0; }
  #paySheet.pay-storefront .pay-check:has(input:checked) { background:transparent; }
  #paySheet.pay-storefront .pay-check:focus-within { outline:2px solid #d9c18c;outline-offset:3px;border-radius:6px; }
  #paySheet.pay-storefront .pay-processor { display:block;margin:10px 0 0;text-align:center;font-size:11px;color:var(--text-2); }
  /* 결제 확인: 얻는 것·다음 결제일, 모두 동의, 제목 포커스 테두리 없음(2026-10-27) */
  #paySheet .pay-value { margin:0 0 4px;color:#f3efe6;font-size:13.5px;line-height:1.6; }
  #paySheet .pay-value-box { margin:0 0 12px; }
  #paySheet .pay-next { margin:0;color:#e6cfa1;font-size:12.5px;font-weight:700;line-height:1.5; }
  #paySheet .pay-sec-head { display:flex;align-items:center;justify-content:space-between;gap:10px; }
  #paySheet .pay-sec-head h4 { margin-bottom:8px; }
  #paySheet .pay-agree-all { flex:none;margin:0 0 8px;padding:5px 12px;border:1px solid rgba(217,193,140,.45);border-radius:999px;background:rgba(217,193,140,.08);color:#ecd59f;font:inherit;font-size:12px;font-weight:700;cursor:pointer; }
  #paySheet .pay-agree-all:hover:not(:disabled) { background:rgba(217,193,140,.16); }
  #payReviewTitle:focus { outline:none; }
  #paySheet.pay-storefront .pay-btns .cta-cancel { flex:0 0 28%; }
  #paySheet.pay-storefront .pay-sum { padding:12px 0;margin:0 0 12px;border:0;border-radius:0;background:transparent; }
  #paySheet.pay-storefront .pay-sum > span { min-width:0; }
  #paySheet.pay-storefront .pay-sum b { overflow-wrap:anywhere; }
  #paySheet.pay-storefront .pay-sum .pay-price { font-size:24px; }
  #paySheet.pay-storefront .pay-sum-price small { max-width:230px;margin-top:5px;line-height:1.5; }

  #paySheet.pay-storefront .pay-info { margin:0;align-self:start;width:100%;padding:16px 18px;background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.1); }
  #paySheet.pay-storefront .pay-btns .cta { min-height:48px; }
  @media(min-width:1000px) {
    #paySheet.pay-storefront .grab,#paySheet.pay-storefront .menu-eyebrow { display:none; }
    /* 1단계(상품 선택)와 2단계(결제 확인) 사이에 창 크기가 바뀌지 않게 높이를 고정한다(가장 긴 2단계 기준 760px, 화면이 낮으면 화면에 맞춤). 넘치는 내용은 창 안에서 스크롤. */
    #paySheet.pay-storefront .pay-box { height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:12px 24px; }
    #paySheet.pay-storefront #payBody { flex:1 1 auto;min-height:0; }
    #paySheet.pay-storefront #payBody > .pay-selection,#paySheet.pay-storefront #payBody > .pay-checkout { flex:1 1 auto;min-height:0;overflow-y:auto; }
    #paySheet.pay-storefront .menu-head { margin-bottom:6px;padding-bottom:8px; }
    #paySheet.pay-storefront #payBody > .pay-selection { gap:16px;padding-bottom:12px; }
    #paySheet.pay-storefront .pay-hero { padding:4px 0; }
    #paySheet.pay-storefront .pay-hero h3 { font-size:24px;margin:5px 0; }
    #paySheet.pay-storefront .pay-hero p { max-width:none;font-size:13px; }
    #paySheet.pay-storefront .pay-tabs { margin-bottom:0; }
    #paySheet.pay-storefront .pay-tabs button { min-height:38px;padding:6px 12px; }
    #paySheet.pay-storefront .pay-card-content { min-height:230px;padding:14px;gap:8px; }
    #paySheet.pay-storefront .pay-reading-open { margin:0 14px 12px; }
    #paySheet.pay-storefront .pay-main { gap:8px; }
    #paySheet.pay-storefront .pay-main > small,#paySheet.pay-storefront .pay-facts { gap:6px; }
    #paySheet.pay-storefront .pay-benefits { gap:4px; }
    #paySheet.pay-storefront .pay-plan small,#paySheet.pay-storefront .pay-benefits li { line-height:1.5; }
    #paySheet.pay-storefront .pay-radio { top:19px;right:13px; }
    #paySheet.pay-storefront .pay-card-footer { padding-top:8px;margin-top:2px; }
    #paySheet.pay-storefront .pay-catalog-note { padding-top:8px;font-size:11px;line-height:1.6; }
    #paySheet.pay-storefront #payBody > .pay-browse-dock { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:center;padding-top:10px; }
    #paySheet.pay-storefront .pay-browse-summary { display:contents; }
    #paySheet.pay-storefront .pay-browse-dock .cta { min-height:46px;grid-column:1 / -1; }
  }
  /* Desktop compares products in one row; review uses the same compact canvas. */
  @media(min-width:1000px) {
    #paySheet.pay-storefront .pay-hero { display:flex;align-items:center;gap:12px;padding:4px 0; }
    #paySheet.pay-storefront .pay-hero h3 { margin:4px 0;font-size:20px; }
    #paySheet.pay-storefront .pay-hero p { display:none; }
    #paySheet.pay-storefront .pay-catalog-note { margin:0;padding-top:6px;line-height:1.45; }
    #paySheet.pay-storefront .pay-plan .pay-choice { display:none; }
    #paySheet.pay-storefront .pay-box { width:min(1280px,calc(100vw - 32px));max-width:1280px;padding:12px 20px; }
    /* 모든 언어를 한국어와 같은 폭으로(사용자 결정 2026-10-21: 한국어 디자인 기준). 긴 문구는 카드 안에서 줄바꿈된다. */
    html #paySheet.pay-storefront .pay-box { width:min(1060px,calc(100vw - 32px)); }
    #paySheet.pay-storefront #payBody > .pay-selection { grid-template-columns:repeat(var(--pay-plan-count,4),minmax(0,1fr));gap:12px; }
    #paySheet.pay-storefront .pay-card-content { padding:14px 12px;min-height:220px; }
    #paySheet.pay-storefront .pay-reading-open { margin:0 12px 12px; }
    #paySheet.pay-storefront .pay-namerow b { font-size:17px; }
    #paySheet.pay-storefront .pay-card-footer { gap:8px; }
    #paySheet.pay-storefront .pay-choice { flex-basis:56px;max-width:56px; }
    #paySheet.pay-storefront .pay-plan .pay-price { font-size:22px; }
    /* 계속 버튼 칸은 가격 글자 폭과 무관한 고정 비율이라 상품을 바꿔도 크기가 변하지 않는다 */
    #paySheet.pay-storefront #payBody > .pay-browse-dock { grid-template-columns:minmax(0,1fr) auto clamp(220px,34%,420px);gap:16px; }
    #paySheet.pay-storefront .pay-browse-dock .cta { grid-column:auto; }
    #paySheet.pay-storefront #payBody > .pay-checkout { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;gap:12px 18px;padding-bottom:12px; }
    #paySheet.pay-storefront .pay-review-head { grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:center; }
    #paySheet.pay-storefront .pay-review-head .text-btn { grid-column:2;grid-row:1 / span 2;justify-self:end; }
    #paySheet.pay-storefront .pay-review-head h3 { grid-column:1;grid-row:1;margin:4px 0;font-size:23px; }
    #paySheet.pay-storefront .pay-review-head p { grid-column:1;grid-row:2; }
    #paySheet.pay-storefront .pay-review-product { grid-column:1;grid-row:2;padding:14px; }
    #paySheet.pay-storefront .pay-review-product h4 { margin:4px 0 10px;font-size:18px; }
    #paySheet.pay-storefront .pay-review-product .pay-benefits { gap:6px 12px; }
    #paySheet.pay-storefront .pay-sec { grid-column:2;grid-row:2 / span 2;padding:14px; }
    #paySheet.pay-storefront .pay-info { grid-column:1;grid-row:3;padding:14px; }
    #paySheet.pay-storefront .pay-check { padding:10px 0;line-height:1.55; }
    #paySheet.pay-storefront .pay-sec h4,#paySheet.pay-storefront .pay-info h4 { margin-bottom:8px; }
    #paySheet.pay-storefront #payBody > .pay-dock:not(.pay-browse-dock) { display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:2px 24px;align-items:center;padding-top:8px; }
    #paySheet.pay-storefront .pay-sum { margin:0;padding:0; }
    #paySheet.pay-storefront .pay-processor { grid-column:2;margin:3px 0 0; }
    /* 모든 언어·두 단계가 같은 창 크기(사용자 결정 2026-10-21: 하단 빈 공간 없이). 2단계는 선택 상품을 위 한 줄로 펴서
       1단계 높이 안에 들어오게 하고, 1단계 상품 카드는 남는 높이만큼 늘어나 빈 공간이 생기지 않는다. */
    #paySheet.pay-storefront .pay-box { height:auto;min-height:min(720px,calc(100dvh - 24px));max-height:calc(100dvh - 24px); } /* 2026-10-27: 결제 확인의 환불 요약을 펼친 채 보이게 660 → 720px. 2026-10-29: 720px 고정이면 구독 중 안내처럼 줄이 늘 때 큰 화면에서도 스크롤 → 최소 720px, 내용이 많으면 화면 높이까지 늘어남 */
    #paySheet.pay-storefront #payBody > .pay-selection { grid-template-rows:auto minmax(max-content,1fr);align-content:stretch; }
    #paySheet.pay-storefront .pay-product { display:flex;flex-direction:column; }
    #paySheet.pay-storefront .pay-product .pay-facts { flex:1;align-content:space-evenly; }
    #paySheet.pay-storefront .pay-product .pay-benefits { gap:6px; }
    #paySheet.pay-storefront .pay-check { padding:7px 0; }
    #paySheet.pay-storefront .pay-review-head h3 { margin:0; }
    #paySheet.pay-storefront #payBody > .pay-checkout { grid-template-rows:auto auto 1fr;padding-bottom:2px; }
    #paySheet.pay-storefront #payBody > .pay-selection { padding-bottom:2px; }
    #paySheet.pay-storefront .pay-review-product { grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 24px;align-items:center; }
    #paySheet.pay-storefront .pay-review-product > small { grid-column:1;grid-row:1; }
    #paySheet.pay-storefront .pay-review-product h4 { grid-column:1;grid-row:2;margin:0; }
    #paySheet.pay-storefront .pay-review-product .pay-benefits { grid-column:2;grid-row:1 / span 2;grid-template-columns:repeat(2,minmax(0,1fr)); }
    #paySheet.pay-storefront .pay-review-product .pay-value-box { grid-column:1 / -1;grid-row:3;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;margin-top:4px; }
    #paySheet.pay-storefront .pay-review-product .pay-value-box p { margin:0; }
    #paySheet.pay-storefront .pay-sec { grid-row:3; }
  }
  /* 언어와 관계없이 같은 틀(2026-10-27): 표시 줄(높이 고정) → 이름 → 설명 2줄 → 숫자 칸 → 가격. 결제 확인은 요약 한 칸 + 환불·동의 두 칸 */
  #paySheet.pay-storefront .pay-product { position:relative;overflow:visible; }
  /* 표시(인기·1회 결제)는 카드 위 테두리에 걸친 리본: 언어마다 길이가 달라도 카드 안 줄 수가 바뀌지 않는다 */
  #paySheet.pay-storefront .pay-eyebrow { position:absolute;top:-11px;left:14px;z-index:1;display:flex;gap:4px;max-width:calc(100% - 28px);pointer-events:none; }
  #paySheet.pay-storefront .pay-eyebrow:empty { display:none; }
  #paySheet.pay-storefront .pay-eyebrow i { box-shadow:0 2px 8px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  #paySheet.pay-storefront .pay-namerow { min-height:0; }
  #paySheet.pay-storefront .pay-stats { display:grid;gap:4px;width:100%; }
  #paySheet.pay-storefront .pay-main,#paySheet.pay-storefront .pay-product .pay-facts { align-self:stretch;width:100%; }
  #paySheet.pay-storefront .pay-plan .pay-stat { display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:4px 10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.04); }
  #paySheet.pay-storefront .pay-plan .pay-stat small { min-width:0;color:var(--text-2);font-size:12px;line-height:1.4;overflow-wrap:anywhere; }
  #paySheet.pay-storefront .pay-plan .pay-stat b { flex:none;color:#f7f1e8;font-size:13.5px;line-height:1.4;white-space:nowrap; }
  #paySheet.pay-storefront .pay-product.pay-once .pay-stat b { color:#d6eef6; }
  #paySheet .pay-stat-line { display:flex;flex-wrap:wrap;gap:4px 6px;margin:6px 0; }
  #paySheet .pay-stat-line span { padding:2px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04);color:#e8e3f3;font-size:12px;line-height:1.6; }
  @media(min-width:1000px) {
    #paySheet.pay-storefront .pay-plan .pay-desc { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5; }
    #paySheet.pay-storefront .pay-product .pay-facts { flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:10px; }
    #paySheet.pay-storefront .pay-stats { gap:5px; }
    #paySheet.pay-storefront .pay-plan .pay-stat { padding:6px 12px; }
    #paySheet.pay-storefront .pay-plan .pay-stat b { font-size:15px; }
    #paySheet.pay-storefront #payBody > .pay-selection { padding-top:12px;row-gap:12px; }
    #paySheet.pay-storefront .pay-card-content { padding:12px; }
    #paySheet.pay-storefront .pay-card-footer { padding-top:6px;margin-top:0; }
    #paySheet.pay-storefront .pay-hero { padding:0; }
    #paySheet.pay-storefront .pay-hero h3 { margin:0; }
    #paySheet.pay-storefront .pay-included { padding:10px 14px; }
    #paySheet.pay-storefront .pay-included-title { margin-bottom:6px; }
    #paySheet.pay-storefront .pay-included-grid { gap:6px 14px; }
    #paySheet.pay-storefront .pay-main { gap:6px; }
    #paySheet.pay-storefront .pay-card-content { min-height:0; }
    #paySheet.pay-storefront .pay-review-product .pay-value-box { grid-column:2;grid-row:1 / span 2;display:block;margin:0; }
    #paySheet.pay-storefront .pay-review-product .pay-value-box p { margin:0; }
    #paySheet.pay-storefront .pay-review-product .pay-value-box .pay-stat-line { margin:5px 0; }
    #paySheet.pay-storefront .pay-info ul { margin:0 0 8px;font-size:12px;line-height:1.5; }
    #paySheet.pay-storefront .pay-info ul li + li { margin-top:2px; }
    #paySheet.pay-storefront .pay-info .pay-links { gap:2px 14px; }
    #paySheet.pay-storefront .pay-info .pay-links a { min-height:0;padding:0;border:0;border-radius:0;background:none;font-size:12px;text-decoration:underline;text-underline-offset:3px; }
    #paySheet.pay-storefront .pay-check { font-size:12.5px;line-height:1.5; }
    #paySheet.pay-storefront .pay-processor { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  }
  /* 환불 요약 접기: 제목을 눌러 펼친다 */
  #paySheet .pay-refund { margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none; }
  #paySheet .pay-refund summary { display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer; }
  #paySheet .pay-refund summary::-webkit-details-marker { display:none; }
  #paySheet .pay-refund summary::after { content:'▾';color:#bdb7cb;font-size:11px;transition:transform .15s; }
  #paySheet .pay-refund:not([open]) summary::after { transform:rotate(-90deg); }
  #paySheet .pay-refund summary h4 { margin:0; }
  #paySheet .pay-refund ul { margin-top:6px; }
  #paySheet .pay-refund + .pay-links { margin-top:6px; }
  /* 결제 확인 단계(2026-10-27 사용자 요청): 가로 공백이 많아 창 폭을 줄이고, 상자 없이 요약 → 결제 전 확인 → 환불 안내를 세로로. 높이는 상품 선택과 같다 */
  @media(min-width:1000px) {
    html #paySheet.pay-storefront .pay-box { transition:width .25s ease; }
    html #paySheet.pay-storefront.pay-step-checkout .pay-box { width:min(820px,calc(100vw - 32px)); }
    #paySheet.pay-storefront.pay-step-checkout #payBody > .pay-checkout { grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:10px;align-content:start; }
    #paySheet.pay-storefront.pay-step-checkout .pay-review-head { grid-template-columns:1fr auto; }
    #paySheet.pay-storefront.pay-step-checkout .pay-review-head .text-btn { grid-row:1; }
    #paySheet.pay-storefront.pay-step-checkout .pay-review-head p { display:none; }
    #paySheet.pay-storefront.pay-step-checkout .pay-review-product { grid-column:1;grid-row:auto;padding:12px 14px; }
    #paySheet.pay-storefront.pay-step-checkout .pay-sec,#paySheet.pay-storefront.pay-step-checkout .pay-info { grid-column:1;grid-row:auto;padding:12px 2px 0;border:0;border-top:1px solid rgba(255,255,255,.09);border-radius:0;background:none; }
    #paySheet.pay-storefront.pay-step-checkout .pay-sec h4,#paySheet.pay-storefront.pay-step-checkout .pay-info h4 { margin-bottom:4px; }
    #paySheet.pay-storefront.pay-step-checkout .pay-check { padding:4px 0;border-bottom:0; }
    #paySheet.pay-storefront.pay-step-checkout .pay-info ul { margin-bottom:6px; }
    #paySheet.pay-storefront.pay-step-checkout .pay-info { display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 16px; }
    #paySheet.pay-storefront.pay-step-checkout .pay-refund { flex:1 1 auto;min-width:0; }
    #paySheet.pay-storefront.pay-step-checkout .pay-refund + .pay-links { margin-top:1px;flex:none; }
    #paySheet.pay-storefront.pay-step-checkout #payBody > .pay-dock:not(.pay-browse-dock) { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    #paySheet.pay-storefront.pay-step-checkout .pay-sum small { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    #paySheet.pay-storefront.pay-step-checkout .pay-sum-price small { max-width:none; }
    #paySheet.pay-storefront.pay-step-checkout .pay-review-product { padding:10px 14px; }
  }
  @media(min-width:1000px) and (max-height:650px) {
    #paySheet.pay-storefront .pay-card-content { padding:10px 12px; }
    #paySheet.pay-storefront .pay-review-product .pay-benefits { gap:4px 10px; }
    #paySheet.pay-storefront .pay-review-product .pay-benefits li { font-size:12px; }
    #paySheet.pay-storefront .pay-info ul { margin-bottom:6px; }
    #paySheet.pay-storefront .pay-review-head h3 { font-size:20px;margin:0; }
    #paySheet.pay-storefront .pay-hero { display:none; }
    #paySheet.pay-storefront .menu-head { padding-bottom:4px;margin-bottom:4px; }
    #paySheet.pay-storefront .pay-review-head p { display:none; }
    #paySheet.pay-storefront #payBody > .pay-checkout { gap:8px 16px;padding-bottom:8px; }
    #paySheet.pay-storefront .pay-review-product,#paySheet.pay-storefront .pay-info,#paySheet.pay-storefront .pay-sec { padding:12px; }
    #paySheet.pay-storefront .pay-review-product h4 { margin-bottom:6px; }
    #paySheet.pay-storefront .pay-info .pay-links { gap:4px; }

    #paySheet.pay-storefront .pay-review-head .text-btn { grid-row:1; }
  }
  @media(max-width:699.98px) {
    #paySheet.pay-storefront { align-items:stretch; }
    #paySheet.pay-storefront .pay-box { width:100%;max-width:none;height:100dvh;max-height:100dvh;padding:calc(12px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));border:0;border-radius:0;animation:none; }
    #paySheet.pay-storefront .grab { display:none; }
    #paySheet.pay-storefront .menu-head { margin-bottom:6px;padding:0 0 12px;top:0; }
    #paySheet.pay-storefront .menu-head h2 { font-size:20px; }
    #paySheet.pay-storefront .menu-eyebrow { font-size:10px; }
    #paySheet.pay-storefront .menu-close { width:40px;height:40px; }
    #paySheet.pay-storefront #payBody > .pay-selection,#paySheet.pay-storefront .pay-selection:has(> .pay-plan ~ .pay-plan ~ .pay-plan ~ .pay-plan) { grid-template-columns:minmax(0,1fr);gap:16px;padding:0 2px 20px; }
    #paySheet.pay-storefront .pay-hero { padding:10px 0 7px; }
    #paySheet.pay-storefront .pay-hero h3 { font-size:24px;margin:8px 0; }
    #paySheet.pay-storefront .pay-hero p { font-size:13px; }
    #paySheet.pay-storefront .pay-tabs { width:100%; }
    #paySheet.pay-storefront .pay-plan { min-height:0;padding:0; }
    #paySheet.pay-storefront .pay-card-content { min-height:260px;padding:20px;gap:12px; }
    #paySheet.pay-storefront .pay-reading-open { margin:0 20px 20px; }
    #paySheet.pay-storefront .pay-plan .pay-price { font-size:26px; }
    #paySheet.pay-storefront #payBody > .pay-checkout { display:flex;flex-direction:column;gap:14px; }
    #paySheet.pay-storefront #payBody > .pay-dock { padding-top:10px; }
    #paySheet.pay-storefront .pay-browse-summary { margin-bottom:9px; }
    #paySheet.pay-storefront .pay-browse-summary b { font-size:14px; }
    #paySheet.pay-storefront .pay-sum { padding:4px 0;margin-bottom:10px; }
    #paySheet.pay-storefront .pay-review-product .pay-benefits { grid-template-columns:minmax(0,1fr); }
    #paySheet.pay-storefront .pay-btns .cta { font-size:14px; }
  }
  @media(max-height:500px) {
    #paySheet.pay-storefront .pay-box { padding-top:8px;padding-bottom:8px;height:100dvh;max-height:100dvh; }
    #paySheet.pay-storefront .menu-eyebrow { display:none; }
    #paySheet.pay-storefront .menu-head { padding-bottom:6px;margin-bottom:4px; }
    #paySheet.pay-storefront .pay-hero { padding:4px 0; }
    #paySheet.pay-storefront .pay-hero h3 { font-size:20px; }
    #paySheet.pay-storefront .pay-dock .cta { min-height:42px; }
    #paySheet.pay-storefront .pay-browse-dock { display:grid;grid-template-columns:minmax(0,1fr) auto clamp(180px,40%,360px);align-items:center;gap:16px; }
    #paySheet.pay-storefront .pay-browse-summary { display:contents; }
    #paySheet.pay-storefront #payBody > .pay-dock:not(.pay-browse-dock) { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center; }
    #paySheet.pay-storefront .pay-dock .pay-sum { margin:0; }

  }
  .pay-actions { display: flex; gap: 8px; margin-top: 14px; }
  .pay-actions .cta { margin-top: 0; }
  .pay-actions .cta:disabled,.pay-checkout .cta:disabled,.pay-dock .cta:disabled { opacity:.4; cursor:default; filter:saturate(.5); box-shadow:none; }
  .settings-row:last-of-type { border-bottom: none; }
  .settings-row b { color: var(--text); font-weight: 600; }
  .settings-row .text-btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
  .share-sheet { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(6,6,16,.72); }
  .share-sheet[hidden] { display: none; }
  @media (min-width: 600px) { .share-sheet { align-items: center; } .share-box { border-radius: 28px !important; border-bottom: 1px solid rgba(183,156,255,.25) !important; } }
  .share-box { position: relative; width: 100%; max-width: 420px; border-radius: 28px 28px 0 0; padding: 10px 20px calc(18px + env(safe-area-inset-bottom)); color: #fff; overflow: hidden;
    background: radial-gradient(120% 60% at 50% 0%, rgba(120,110,230,.35), transparent 60%), linear-gradient(180deg, #25244a, #16162c);
    border: 1px solid rgba(183,156,255,.25); border-bottom: none; box-shadow: 0 -20px 60px rgba(0,0,0,.45); animation: up .3s cubic-bezier(.2,.9,.3,1); }
  .share-box .grab { background: rgba(255,255,255,.22); }
  .sh-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 12px; }
  .sh-head h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
  .sh-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff; font-size: 14px; cursor: pointer; }
  .share-box { max-height:90dvh;display:flex;flex-direction:column; }
  .share-box > .grab,.sh-head { flex:none; }
  .sh-head { background:none;padding:10px 0; }
  .sh-body { min-height:0;overflow-y:auto;overscroll-behavior:contain; }
  .sbtn:disabled,.sh-tool:disabled { opacity:.45;cursor:progress; }  /* 결제 확인 단계는 결제 버튼에 금액이 있으므로 큰 금액을 한 번 더 쓰지 않는다(2026-10-28 사용자 요청). 원화 환산·기간 줄은 남긴다 */
  #paySheet.pay-step-checkout .pay-sum .pay-price { display:none; }
  /* 구독 중 상품 고르기(2026-10-28): 고를 수 없는 구독 상품은 흐리게 */
  #paySheet .pay-product.pay-locked { opacity:.5; }
  #paySheet .pay-product.pay-locked .pay-plan { cursor:not-allowed; }
  #paySheet .pay-tag.pay-tag-lock { background:rgba(255,255,255,.1); color:#d6d3e8; border-color:rgba(255,255,255,.2); }

  /* 결제창은 해석 창(.modal, z 70) 위에 연다 — 해석 화면의 '음성듣기' 안내에서 이용권을 열 때 가려지지 않게(2026-10-28). 알림(z 300)·Dodo 결제창(z 1000)보다는 아래 */
  #paySheet { z-index: 80; }
  /* 음성 낭독 안내(2026-10-28 사용자 요청: 한눈에 들어오게) — 머리(아이콘·제목) / 포함 이용권 카드 / 기능 두 줄 / 작은 안내 / 버튼 */
  .voice-upsell-dialog { width:min(440px,calc(100vw - 32px)); padding:0; }
  .vu-head { position:relative; display:flex; gap:14px; align-items:flex-start; padding:22px 52px 16px 22px; border-bottom:1px solid rgba(255,255,255,.08); }
  .vu-icon { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:#1d1930; background:linear-gradient(135deg,#f6dfa4,#d9b56a); box-shadow:0 6px 18px rgba(241,210,138,.25); }
  .vu-icon svg { width:24px; height:24px; }
  .vu-head h2 { margin:2px 0 4px; color:#f6e7bd; font-size:18px; line-height:1.35; }
  .vu-head p { margin:0; color:#d9d5e8; font-size:13.5px; line-height:1.55; }
  .vu-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border:0; border-radius:10px; background:rgba(255,255,255,.06); color:#d9d5e8; font-size:20px; line-height:1; cursor:pointer; }
  .vu-body { display:grid; gap:12px; padding:16px 22px 4px; }
  .vu-label { color:#b9b5cc; font-size:12px; font-weight:650; letter-spacing:.02em; }
  .vu-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:-4px 0 0; padding:0; list-style:none; }
  .vu-plans li { display:grid; gap:2px; padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.035); }
  .vu-plans li.on { border-color:rgba(241,210,138,.6); background:linear-gradient(135deg,rgba(241,210,138,.14),rgba(241,210,138,.04)); }
  .vu-plans b { color:#f4efff; font-size:15px; }
  .vu-price { color:#f1d28a; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
  .vu-price i { margin-left:2px; color:#cfc7a6; font-size:12px; font-style:normal; font-weight:500; }
  .vu-plans small { color:#bdb8d0; font-size:12px; }
  .vu-points { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
  .vu-points li { position:relative; padding-left:22px; color:#e6e2f2; font-size:13.5px; line-height:1.5; }
  .vu-points li::before { content:'✓'; position:absolute; left:2px; top:0; color:#a8f0cb; font-weight:700; }
  .vu-tip { margin:2px 0 0; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.04); color:#bdb8d0; font-size:12px; line-height:1.5; }
  .vu-foot { display:grid; gap:6px; padding:14px 22px 18px; }
  .vu-foot .cta { margin:0; }

  .vu-plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:380px), (max-height:700px) {
    .vu-head { gap:10px; padding:16px 46px 12px 16px; }
    .vu-icon { width:36px; height:36px; border-radius:11px; }
    .vu-icon svg { width:20px; height:20px; }
    .vu-head h2 { font-size:16px; }
    .vu-head p { font-size:12.5px; }
    .vu-body { gap:9px; padding:12px 16px 2px; }
    .vu-plans { gap:8px; }
    .vu-plans li { padding:9px 10px; }
    .vu-plans b { font-size:14px; }
    .vu-price { font-size:14px; }
    .vu-points li { font-size:12.5px; }
    .vu-tip { padding:7px 10px; }
    .vu-foot { padding:10px 16px 14px; }
  }
  /* 잠금 표시를 또렷하게(2026-10-28) */
  #paySheet .pay-tag.pay-tag-lock { background:#3a3650; color:#e8e5f5; border-color:#55506e; font-weight:700; }
  /* 모바일 상품 목록(2026-10-28 사용자 요청: 카드가 커서 스크롤이 많음): 고르지 않은 상품은 이름·가격만 보이는 한 줄로 접고, 고른 상품만 자세히 펼친다 */
  @media (max-width:560px) {
    #paySheet.pay-storefront .pay-selection { gap:10px; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-card-content { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-height:0; padding:16px 46px 12px 14px; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-main { gap:0; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-facts, #paySheet.pay-storefront .pay-product:not(.on) .pay-choice, #paySheet.pay-storefront .pay-product:not(.on) .pay-daily, #paySheet.pay-storefront .pay-product:not(.on) .pay-usd { display:none; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-namerow b { font-size:16px; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-card-footer { display:block; margin:0; padding:0; border:0; text-align:right; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-price { font-size:16px; line-height:1.3; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-price small { display:block; font-size:11px; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-radio { top:50%; right:14px; transform:translateY(-50%); }
    #paySheet.pay-storefront .pay-product.on .pay-card-content { min-height:0; }
    #paySheet.pay-storefront .pay-product:not(.on) .pay-reading-open { display:none; }
  }
  #paySheet .pay-tag.pay-tag-lock::before { content:none; } /* 잠금 표시는 별 없이 */
  /* 다음 결제일 상품 변경(2026-10-28) */
  #paySheet .pay-tag.pay-tag-change { background:#f1d28a; color:#2a1f08; border-color:#f1d28a; font-weight:800; }
  #paySheet .pay-tag.pay-tag-change::before { content:'⟳ '; }
  #paySheet .pay-change { display:grid; gap:4px; margin:0 0 12px; padding:12px 14px; border:1px solid rgba(241,210,138,.45); border-radius:14px; background:rgba(241,210,138,.08); }
  #paySheet .pay-change b { color:#f6e7bd; font-size:14px; }
  #paySheet .pay-change span { color:#e3e1f0; font-size:13px; line-height:1.5; }
  /* PC 결제창 높이 맞춤(2026-10-29 사용자 요청: 결제창에 스크롤이 생김). 실제 사이트 측정: 1280×720 상품 선택 16px, 1366×650 상품 24px·결제 확인 20px 넘침.
     화면 높이 800px 이하에서 여백·간격만 줄인다(글자·내용 그대로). 650px 이하는 큰 제목을 숨기던 기존 규칙 때문에 월간/연간 선택까지 사라져
     연간 상품을 고를 수 없었다 → 제목만 숨기고 'AI 상담 예시'와 월간/연간은 한 줄로 남기고, 공통 혜택의 작은 설명 줄(목록 보기 링크는 유지)을 숨겨 자리를 낸다 */
  @media (min-width:700px) and (max-height:800px){
    #paySheet.pay-storefront .menu-head{padding-top:6px}
    #paySheet.pay-storefront #payBody>.pay-selection{gap:8px;padding-top:6px}
    #paySheet.pay-storefront #payBody>.pay-selection .pay-included{padding-top:6px;padding-bottom:6px}
    #paySheet.pay-storefront .pay-product .pay-card-content{gap:6px}
    #paySheet.pay-storefront .pay-product .pay-facts{gap:6px}
    #paySheet.pay-storefront .pay-product .pay-stat{padding-top:4px;padding-bottom:4px}
    #paySheet.pay-storefront .pay-dock.pay-browse-dock{padding-top:6px}
    #paySheet.pay-storefront #payBody>.pay-checkout{gap:4px}
    #paySheet.pay-storefront #payBody>.pay-checkout .pay-review-product{padding-top:6px;padding-bottom:6px}
    #paySheet.pay-storefront #payBody>.pay-checkout .pay-sec,#paySheet.pay-storefront #payBody>.pay-checkout .pay-info{padding-top:8px}
  }
  @media (min-width:1000px) and (max-height:650px){
    #paySheet.pay-storefront .pay-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 2px}
    #paySheet.pay-storefront .pay-hero .pay-step,#paySheet.pay-storefront .pay-hero h3,#paySheet.pay-storefront .pay-hero p{display:none}
    #paySheet.pay-storefront .pay-hero .pay-sample-open{margin:0;padding:0}
    #paySheet.pay-storefront .pay-hero .pay-period button{padding:3px 11px}
    #paySheet.pay-storefront #payBody>.pay-selection{gap:6px}
    #paySheet.pay-storefront .pay-included li span:not(:has(button)){display:none}
  }
  /* 높이 700px 이하: 구독 중 회원의 '같은 결제 주기…' 안내 줄은 숨긴다(상품 카드의 '이용 중'·'다음 결제부터' 표시가 같은 뜻) */
  @media (min-width:1000px) and (max-height:700px){ #paySheet.pay-storefront .pay-lock-hint{display:none} }

/* Both providers use the same storefront. Native status stays outside its scrollable steps. */
#paySheet.pay-play #playCheckoutStatus { flex:none;margin:0 0 10px;padding:10px 12px;border:1px solid var(--stroke);border-radius:12px;background:var(--glass);font-size:13px;line-height:1.65;overflow-wrap:anywhere; }
#paySheet.pay-play #playCheckoutStatus[hidden] { display:none; }
#paySheet.pay-play .play-reload { flex:none;align-self:center;margin:6px 0 0;padding:4px 10px;font-size:12px; }

/* Play buttons do not include the price, so keep Google’s actual price visible. */
#paySheet.pay-play.pay-step-checkout .pay-sum .pay-price { display:block; }

  /* Reserve two status lines so image preparation cannot resize/recenter the sheet. */
  .sh-image-status { color:#d5d1ee;font-size:12px;line-height:1.6;height:3.2em;overflow-y:auto;overflow-wrap:anywhere;margin:0 0 12px; }
  .sh-preview { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; margin-bottom: 18px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
  .sh-cards { display: flex; flex: 0 0 auto; min-width: 0; max-width: 100%; gap:6px; }
  .sh-cards div { flex: 0 0 66px; width:66px; aspect-ratio: 5 / 8; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 0 0 1px rgba(143,183,255,.4); background: #1b1c38; }
  .sh-cards div.rev .art { transform: rotate(180deg); }
  .sh-text { min-width: 0; }
  .sh-text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; line-height: 1.4; }
  /* 카드가 5장 이상(연간 운세·켈틱 크로스 등)이면 카드 줄을 위에 한 줄로 펼치고 글은 아래에 둔다 — 옆에 두면 글 자리가 사라져 세로로 깨진다 */
  .sh-preview:has(.sh-cards div:nth-child(3)) { flex-direction: column; align-items: stretch; gap: 12px; }
  .sh-preview:has(.sh-cards div:nth-child(3)) .sh-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:10px; }
  .sh-preview:has(.sh-cards div:nth-child(3)) .sh-cards div { width:100%;max-width:82px;justify-self:center; }
  .sh-preview:has(.sh-cards div:nth-child(3)) .sh-text { text-align: center; }
  .sh-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.5; color: rgba(225,228,255,.7); margin-top: 2px; }
  .sh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; margin-bottom: 18px; }
  .sbtn { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; font: inherit; font-size: 11.5px; line-height: 1.5; color: rgba(235,236,255,.85); cursor: pointer; padding: 0; }
  .sbtn i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-style: normal; box-shadow: 0 8px 18px rgba(0,0,0,.35); transition: transform .15s; }
  .sbtn:active i { transform: scale(.92); }
  .sbtn svg { width: 26px; height: 26px; }
  /* 공유 채널은 각 서비스의 대표색 배경에 흰색(카카오는 짙은 갈색) 심볼 — 어떤 앱으로 보내는지 한눈에 알아보게 한다 */
  .sbtn i { color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
  .sbtn.s-kakao i { background: #FEE500; color: #191919; }
  .sbtn.s-instagram i { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
  .sbtn.s-threads i, .sbtn.s-x i { background: #000; box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.22); }
  .sbtn.s-facebook i { background: #1877f2; }
  .sbtn.s-band i { background: #1ec800; }
  .sbtn.s-line i { background: #06c755; }
  .sbtn.s-whatsapp i { background: #25d366; }
  .sbtn.s-telegram i { background: linear-gradient(180deg, #37aee2, #1e96c8); }
  @media (hover: hover) { .sbtn:hover i { transform: translateY(-2px); } .sbtn:hover { color: #fff; } }
  .sh-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
  .sh-tool { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .sh-tool svg { width: 17px; height: 17px; flex-shrink: 0; }
  .sh-tool:active { background: rgba(255,255,255,.12); }
  .sh-url { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  /* 해설에 집중할 수 있도록 결과창 뒤의 그래픽은 그리지 않는다. */
  /* 모달이 실제로 다 나타난 뒤에만(JS의 waitForFade로 확인) result-open을 붙이므로,
     여기서는 별도의 지연 없이 바로 숨겨도 빈 화면이 끼지 않는다. */
  body.result-open .app, body.result-open .stars { visibility: hidden; pointer-events: none; }
  /* 창이 열려 가려진 배경 애니메이션은 멈춤 */
  body.sheet-open .stars, body.sheet-open .app *, body.sheet-open .app *::before, body.sheet-open .app *::after,
  body.page-paused *, body.page-paused *::before, body.page-paused *::after { animation-play-state: paused !important; }
  .crystal .mist { will-change: transform; }
  /* 기기에서 '동작 줄이기'를 켠 사용자 */
  @media (prefers-reduced-motion: reduce) {
    .stars, .crystal, .crystal *, .crystal::after, .card:not(.flipped) .back, #drawBtn::after, #drawBtn .draw-go::after, #drawBtn svg, .wl-skeleton::after { animation: none !important; }
    .intro-box, .site-menu, .pk-top, .pk-x, .hero, .altar, .ai-q-field.invalid { animation:none!important; transition:none!important; }
  }
  /* 하단 알림: 본문 대비를 유지하는 보라색 표면과 골드 안내 아이콘. */
  .toast { position:fixed; left:50%; bottom:calc(32px + env(safe-area-inset-bottom)); transform:translate(-50%,12px) scale(.98); opacity:0; visibility:hidden;
    display:flex; align-items:center; gap:13px; box-sizing:border-box; width:max-content; max-width:min(520px,calc(100vw - 32px)); padding:16px 22px 16px 16px;
    border:1px solid #d6bb855e; border-radius:18px; background:linear-gradient(125deg,#352c46,#272236); color:#faf6ff;
    box-shadow:0 12px 36px #09061266,0 3px 10px #09061240,inset 0 1px 0 #fff1;
    font-size:15px; font-weight:600; line-height:1.6; letter-spacing:0; text-align:left; word-break:keep-all; overflow-wrap:anywhere;
    transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .22s; z-index:300; pointer-events:none; cursor:pointer; }
  .toast::before { content:''; flex:none; width:30px; height:30px; border-radius:50%; background:#e6ca9317 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ecd39e' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7v.1'/%3E%3C/svg%3E") center/18px no-repeat; }
  .toast.show { opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); pointer-events:auto; }
  @media(max-width:560px) { .toast { bottom:calc(24px + env(safe-area-inset-bottom)); max-width:calc(100vw - 28px); gap:11px; padding:14px 18px 14px 14px; border-radius:16px; font-size:16px; } }
  @media(prefers-reduced-motion:reduce) { .toast { transition:opacity .15s,visibility .15s; transform:translate(-50%,0); } .toast.show { transform:translate(-50%,0); } }
  /* ---- 결과창: 앱 배경과 어울리는 어두운 유리 톤 ---- */
  #resultModal { --sheet-ink: #eef0ff; --sheet-ink-2: rgba(214,218,250,.66); --gold: #f1d28a; background: rgba(6,6,18,.66) !important; opacity: 1; transition: opacity .25s ease; }
  @starting-style { #resultModal:not([hidden]) { opacity: 0; } }
  #resultModal .mbox { color: var(--sheet-ink); }
  #resultModal .mhead h2 { font-weight: 600; letter-spacing: .01em; color: #fff; }
  #resultModal .mclose { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.12); }
  #resultModal .mshare { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
  #resultModal .ptag { background: transparent; color: var(--gold); border: 1px solid rgba(241,210,138,.4); font-weight: 600; letter-spacing: .04em; }
  #resultModal .pcard { box-shadow: 0 0 0 1px rgba(183,200,255,.35), 0 0 40px rgba(143,183,255,.28), 0 20px 40px rgba(0,0,0,.5); }
  #resultModal .ptitle { color: #fff; font-weight: 600; font-size: 23px; }
  #resultModal .pill { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: var(--sheet-ink-2); }
  #resultModal .pill.rev { color: #ff9fb4; border-color: rgba(255,159,180,.3); }
  #resultModal .kws span { background: rgba(241,210,138,.1); color: var(--gold); border: 1px solid rgba(241,210,138,.22); font-weight: 500; }
  #resultModal .kws.rev span { background: rgba(255,159,180,.08); color: #ffb3c4; border-color: rgba(255,159,180,.22); }
  #resultModal .pmean, #resultModal .pflow, #resultModal .pinterp, #resultModal .syn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(238,240,255,.9); }
  #resultModal .pmean { line-height: 1.85; }
  #resultModal .padv { background: linear-gradient(135deg, rgba(126,110,240,.22), rgba(143,183,255,.10)); border: 1px solid rgba(183,156,255,.25); color: #fff; }
  #resultModal .padv b, #resultModal .pflow b { color: var(--gold); letter-spacing: .03em; }
  #resultModal .pinterp, #resultModal .syn { border-radius: 18px; padding: 18px 18px 20px; }
  #resultModal .pinterp h4, #resultModal .syn h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .04em; text-transform: uppercase; }
  #resultModal .syn h4:not(:first-child), #resultModal .pinterp h4:not(:first-child) { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
  #resultModal .pinterp p, #resultModal .syn p { margin: 0 0 14px; font-size: 15px; line-height: 1.85; }
  #resultModal .pinterp p:last-child, #resultModal .syn p:last-child { margin-bottom: 0; }
  #resultModal .pdesc .pmean { margin-top: 8px; }
  #resultModal .reveal-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .45s ease, margin .45s ease; margin-top: 0; }
  #resultModal .reveal-panel.open { max-height: 4000px; opacity: 1; margin-top: 12px; }
  #resultModal .reveal-panel .pinterp, #resultModal .reveal-panel .syn { border: 1px solid rgba(241,210,138,.22); box-shadow: 0 0 0 1px rgba(241,210,138,.06) inset; }
  #resultModal .reveal-note { margin: 0 0 10px; font-size: 12.5px; color: var(--gold); opacity: .85; letter-spacing: .01em; }
  #resultModal .ynbig.yes { color: #7fe3bd; text-shadow: 0 0 22px rgba(127,227,189,.35); }
  #resultModal .ynbig.no { color: #ff9fb4; text-shadow: 0 0 22px rgba(255,159,180,.35); }
  #resultModal .xheart { color: #ff9fb4; }
  #resultModal .xtease { border: 1px solid rgba(183,156,255,.3); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
  #resultModal .dots i { background: rgba(255,255,255,.18); }
  #resultModal .dots i.on { background: var(--gold); }
  #resultModal .mbtn.ghost { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #fff; }
  #resultModal .mbtn.main { background: linear-gradient(90deg, #6f7cff, #a98bff); box-shadow: 0 10px 24px rgba(111,124,255,.35); }
  /* Keep the same satin-plum surface while quota is checked and when reading can start. */
  #resultModal .page #aiBox .ai-btn {
    border-color: #d8bd86; color: #fff3d9; font-weight: 750;
    background: linear-gradient(180deg, rgba(255,243,214,.12), transparent 46%), linear-gradient(115deg, #614d70, #715a79 48%, #483a59);
    box-shadow: 0 0 0 1px rgba(241,210,138,.1), 0 12px 26px rgba(13,8,28,.4), inset 0 1px 0 rgba(255,244,219,.23);
  }
  #resultModal .page #aiBox[data-state="checking"] .ai-btn:disabled { opacity: 1; cursor: wait; box-shadow: 0 0 0 1px rgba(241,210,138,.1), 0 12px 26px rgba(13,8,28,.4), inset 0 1px 0 rgba(255,244,219,.23); }
  @media (hover: hover) {
    #resultModal .page #aiBox .ai-btn:hover:not(:disabled) { border-color: #f2dba6; box-shadow: 0 0 0 2px rgba(241,210,138,.13), 0 14px 30px rgba(13,8,28,.46), inset 0 1px 0 rgba(255,244,219,.3); }
  }
  #resultModal .mbtns .mbtn.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  #resultModal .mbtns .mbtn.ghost svg { width: 15px; height: 15px; flex: none; }
  #resultModal .mbtns .mbtn:focus-visible { outline: 2px solid #f1d28a; outline-offset: 3px; }
  /* Close is an outline control, while share has a distinct violet surface. */
  #resultModal .mbtns.single .mbtn.ghost {
    height: 48px; border-radius: 12px; border: 1px solid rgba(206,195,226,.42);
    background: rgba(255,255,255,.055);
    color: #eae3f3; font-size: 14.5px; font-weight: 650; letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .15s, background .2s, border-color .2s, box-shadow .2s, color .2s;
  }
  #resultModal .mbtns.single .mbtn.ghost:active { transform: scale(.97); }
  @media (hover: hover) {
    #resultModal .mbtns.single .mbtn.ghost:hover { border-color: rgba(231,218,249,.7); color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 0 3px rgba(198,175,226,.08); }
  }
  /* Keep both footer actions at their familiar size and position. */
  #resultModal .mbtns.single { display: flex; justify-content: center; gap: 10px; }
  #resultModal .mbtns.single .mbtn { flex: 1 1 0; width: auto; max-width: 200px; margin: 0; }
  #resultModal .mbtn.share {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; border-radius: 12px; border: 1px solid rgba(183,159,235,.6);
    background: linear-gradient(135deg, rgba(132,101,196,.38), rgba(101,75,155,.25));
    color: #f5edff; font: inherit; font-size: 14.5px; font-weight: 650; letter-spacing: .02em; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 6px 16px rgba(29,18,52,.22);
    transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
  }
  #resultModal .mbtn.share svg { width: 16px; height: 16px; flex: none; }
  #resultModal .mbtn.share:active { transform: scale(.97); }
  @media (hover: hover) { #resultModal .mbtn.share:hover { border-color: rgba(214,195,255,.9); background: linear-gradient(135deg, rgba(151,119,216,.5), rgba(112,82,173,.33)); box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 0 0 3px rgba(172,145,226,.1), 0 8px 20px rgba(29,18,52,.27); } }
  #resultModal .page::-webkit-scrollbar { width: 0; }
  #resultModal { background: #070719 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #cardModal { background: #070719 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .pager { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; will-change: scroll-position; }
  .page { contain: layout paint; }
  #resultModal .mini [filter] { filter: none; }
  body:has(#resultModal:not([hidden])) .card .back, body:has(#resultModal:not([hidden])) .xq b { animation-play-state: paused; }
  #resultModal .xq b { animation: none; }
  /* 결과창 박스 간격 통일 */
  #resultModal .page .pmean, #resultModal .page .padv, #resultModal .page .pflow, #resultModal .page .xq2,
  #resultModal .page .xtease,
  #resultModal .page .pdesc, #resultModal .page .pinterp, #resultModal .page .syn { margin: 0 0 12px !important; }
  #resultModal .page .kws { margin: 0 0 12px; }
  #resultModal .page .xcore { margin: 0 0 12px; }
  #resultModal .page .pmeta { margin: 8px 0 12px; }
  #resultModal .page .summary-row { margin: 14px 0 12px; }
  #resultModal .page > :last-child { margin-bottom: 0 !important; }
  /* 간결한 확장형 메뉴 */
  .menu-btn { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--stroke); background: var(--glass); color: #f3e3b5; cursor: pointer; }
  .menu-btn svg { width: 19px; height: 19px; }
  .menu-btn:active { transform: scale(.94); }
  /* 언어 선택: 메뉴를 열지 않아도 상단에서 바로 바꿀 수 있다 */
  .lang-switch { position: relative; z-index: 6; }
  .ls-btn { height: 36px; min-width: 36px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass); color: #f3e3b5; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
  .ls-btn svg { width: 16px; height: 16px; flex: none; }
  .ls-code { text-transform: uppercase; }
  .ls-btn:active { transform: scale(.95); }
  .ls-btn[aria-expanded="true"] { border-color: rgba(241,210,138,.5); background: rgba(241,210,138,.1); }
  .ls-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 156px; padding: 6px; border-radius: 16px; border: 1px solid var(--stroke); background: rgba(30,29,52,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
  .ls-menu[hidden] { display: none; }
  .ls-menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 0 12px; border-radius: 11px; color: rgba(238,240,255,.92); font-size: 14px; font-weight: 500; text-decoration: none; }
  .ls-menu a:hover { background: rgba(255,255,255,.07); }
  .ls-menu a[aria-current="true"] { color: #f1d28a; background: rgba(241,210,138,.1); font-weight: 650; }
  .ls-menu a[aria-current="true"]::after { content: '✓'; font-size: 13px; }
  .desktop-nav { display: none; }
  /* PC 리딩 메뉴 박스: 큰 화면용 규칙(max-height 760px 등)이 뒤에서 덮어써 박스가 카드 뽑기 버튼보다 짧게 끝나던 문제 —
     .app 로 한 단계 더 구체화해서 항상 카드 뽑기 버튼 아랫선까지 늘어나게 한다. 메뉴 이름 굵기도 한 값으로 고정한다. */
  @media (min-width: 1000px) {
    .app .reading-sheet { align-items: stretch; }
    .app .reading-box { max-height: none; height: 100%; }
    .app .reading-list { max-height: none; align-content: start; }
    /* 머리글과 리딩 메뉴 박스 사이에 숨 쉴 공간을 두고, 테이블(수정구) 영역은 아래로 내려 카드 뽑기 버튼 쪽에 붙인다 */
    .app #modes { margin-top: clamp(14px, 3.2dvh, 36px); }
    .app .hero { align-self: end; margin-bottom: clamp(6px, 2dvh, 24px); }
    /* 카드 뽑기를 누를 때 상태(idle → picking)가 바뀌어도 PC 레이아웃이 1px도 움직이지 않게 한다:
       아래 여백·수정구 영역 안쪽 여백을 상태와 관계없이 고정하고, 머리글·리딩 메뉴에 걸리던 채도 필터(합성 레이어 전환으로 글자가 움찔함)와 전환 효과를 뺀다. */
    body .app, body .app.idle, body .app.picking, body .app.reading { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
    body .app.picking .hero { padding-bottom: 0; }
    body .app.picking .top, body .app.picking .modes, body .app.reading-focus .top, body .app.reading-focus .modes { filter: none; transition: none; }
    /* 뽑은 카드를 놓는 자리(슬롯): 항상 머리글 바로 아래(머리글 선에서 약 8px)에 오도록 화면 높이로 계산한다.
       수정구 영역(hero)은 화면이 클수록 아래로 내려가므로(높이 960px 근처에서 위쪽이 약 114px), 슬롯의 오프셋은 936px − 화면 높이를 따라가고
       낮은 화면(≈900px 이하)에서는 수정구 영역 위쪽 +20px에 둔다. 뽑는 동안 JS 가 --picker-scale(예: 1.85)을 바꾸므로 그 값은 곱하지 않는다. */
    body .app .pk-top, body .app .pk-top:has(.pk-slots.many) { top: min(20px, calc(936px - 100dvh)); }
    /* 결과 화면: 뽑은 카드는 머리글과 카드 뽑기 버튼 사이의 한가운데에 놓는다.
       수정구 영역(hero)을 남는 공간의 가운데에 두고, 카드 묶음은 영역 안에서 아래로 밀지 않으며(translate 제거),
       카드 크기는 영역의 가로(cqw)와 세로(--hero-h)에서 함께 정해서 화면이 작아지면 카드가 함께 줄어든다. */
    body .app.reading:not(.picking) .hero { align-self: center; margin-bottom: 0; }
    /* 10장 이상의 결과 영역은 줄(row) 높이(= --hero-h + 약 19px)를 넘지 않게 한다 — 넘으면 머리글·카드 뽑기 버튼과 겹친다 */
    body .app.ten-spread .hero { --sp-h: min(74dvh, 700px, calc(var(--hero-h) + 16px)); }
    body .app.reading .spread.one .card { width: min(clamp(150px, 26cqw, 340px), calc((var(--hero-h, 9999px) - 96px) / 1.6)); }
    body .app.reading .spread:not(.one):not(.ten) .card { width: min(clamp(110px, 24cqw, 270px), calc((var(--hero-h, 9999px) - 110px) / 1.6)); }
  }
  /* 결과 화면의 카드 묶음은 모든 화면 폭에서 영역(hero) 한가운데에 놓는다(아래로 밀던 translate 제거) */
  body .app.reading .spread, body .app.reading .spread.ten { transform: none; }
  /* 태블릿: 카드를 폭(cqw)과 화면 높이에서 함께 정해 가로·세로 어느 쪽이 줄어도 같이 작아지게 한다 */
  @media (min-width: 600px) and (max-width: 999px) {
    body .app.reading .spread.one .card { width: min(clamp(150px, 30vw, 300px), calc((78dvh - 100px) / 1.6)); }
    body .app.reading .spread:not(.one):not(.ten) .card { width: min(clamp(110px, 22vw, 230px), calc((78dvh - 130px) / 1.6)); }
  }
  /* 모바일: 화면이 좌우로 끌려 움직이지 않게 한다(가로 스크롤 자체를 막고, 세로 스크롤·핀치 확대만 허용) */
  html, body { overflow-x: hidden; overscroll-behavior-x: none; }
  .app { touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
  /* 모바일: 안내 문구 영역을 두 줄 높이로 고정 — 카드 뽑기를 눌러 문구가 길어져도 아래 버튼·하단 링크가 밀려 내려가지 않는다 */
  @media (max-width: 999.98px) { .app.picking .top, .app.picking .hello, .app.picking .modes, .app.picking #drawBtn, .app.picking .lang-row, .app.picking .hint { transition: none; } .hint { min-height: 47px; } body .app, body .app.idle { padding-bottom: 0; } }
  /* 모바일: 화면 높이에 맞춰 테이블 영역과 테이블 크기가 함께 변하고, 모든 기물은 아래로 붙인다.
     남는 공간은 전부 테이블 영역 위쪽으로 보내서(= 기물이 아래로 내려간 상태가 기준) 카드 뽑기 전·중·후에 하단 링크 위치가 변하지 않는다. */
  @media (max-width: 599.98px) {
    .app { --m-hero: clamp(320px, calc(100dvh - 322px), 660px); }
    .hero { height: var(--m-hero); }
    .altar { width: min(clamp(214px, 58vw, 330px), calc(var(--m-hero) * .56)); height: min(clamp(214px, 58vw, 330px), calc(var(--m-hero) * .56)); }
    .app:not(.reading) .hero { margin-top: auto; }
    /* 10장 이상을 뽑을 때도 테이블 영역 높이는 그대로 — 카드 자리는 테이블 위 공간에 맞춰 배치되고 하단 링크는 움직이지 않는다 */
    .app.ten-picking .hero { height: var(--m-hero); }
    /* 뽑는 동안 보이지 않는 메뉴·버튼은 자리를 차지하지 않게 해서, 그만큼 테이블·카드 자리가 아래로 내려가 넓어진다(하단 링크는 그대로) */
    .app.picking .modes, .app.picking #drawBtn { position: absolute; }
    /* 결과 화면(10장 이상): 테이블 영역 높이를 고정하고 카드는 그 안에 들어가는 열 수·크기로 놓는다 → 카드 수가 많아도 아래 메뉴·버튼·링크가 밀려 내려가지 않는다 */
    .app.ten-spread .hero { height: var(--m-hero); }
    .spread.ten { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px 8px; }
    .spread.ten > div { flex: none; width: var(--cw, 62px); }
    .spread.ten .pos { display: block; width: 100%; max-width: none; margin: 6px 0 0; transform: none; white-space: normal; word-break: keep-all; text-wrap: balance; text-align: center; font-size: clamp(9.5px, calc(var(--cw, 62px) * .19), 12px); line-height: 1.2; }
    .app:not(.reading) #drawBtn { margin-bottom: 0; }
    .app:not(.reading) .legal-foot { margin-top: 0; }
  }
  .mode-copy b { font-weight: 700; }
  .menu-sheet { position: fixed; inset: 0; z-index: 65; display: flex; justify-content: center; align-items: flex-start; padding: max(12px, env(safe-area-inset-top)) 12px 12px; background: rgba(8,9,25,.38); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .menu-sheet[hidden] { display: none; }
  .menu-box { width: min(440px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 10px 14px 16px; border: 1px solid rgba(173,190,255,.16); border-radius: 24px; color: #eef0ff; background: radial-gradient(100% 62% at 50% 0%, rgba(90,108,180,.16), transparent 66%), rgba(20,22,49,.94); box-shadow: 0 18px 44px rgba(0,0,0,.34); animation: menuIn .22s cubic-bezier(.2,.9,.3,1) both; }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
  .menu-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; }
  .menu-head h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
  .menu-eyebrow { display: block; margin-bottom: 2px; color: #f1d28a; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
  .menu-close { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.07); color: #fff; font-size: 18px; cursor: pointer; }
  .menu-section { margin-top: 12px; }
  .menu-section-title { margin: 0 2px 7px; color: rgba(225,228,255,.62); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
  .menu-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .menu-tool { min-width: 0; min-height: 68px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 7px 3px; border: 1px solid rgba(221,229,255,.075); border-radius: 15px; background: rgba(255,255,255,.03); color: rgba(238,240,255,.82); cursor: pointer; font: inherit; font-size: 10px; line-height: 1.15; text-align: center; text-decoration: none; }
  .menu-tool:active { transform: scale(.97); background: rgba(255,255,255,.075); }
  .menu-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; color: #f1d28a; background: rgba(241,210,138,.12); }
  .menu-icon svg { width: 17px; height: 17px; }
  .menu-icon .menu-char-face { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center 20%; }
  .menu-icon .menu-char-face[hidden], .menu-icon.has-face svg { display: none; }
  .menu-sound .on { display: none; }
  .menu-sound.act .on { display: grid; }
  .menu-sound.act .off { display: none; }
  /* 모바일 전체 메뉴: 계정 요약과 목적별 바로가기를 한 가지 정렬 체계로 보여준다. */
  @media (max-width: 999px) {
    #siteMenu { padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
    #siteMenu .menu-box { width:min(540px,100%); max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); padding:16px; border-radius:22px; background:radial-gradient(100% 55% at 50% 0%,rgba(111,104,185,.14),transparent 68%),#20203a; }
    #siteMenu .grab { display:none; }
    #siteMenu .menu-head { position:sticky; top:-16px; z-index:2; margin:-16px -16px 14px; padding:16px; gap:12px; background:transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(221,229,255,.1); }
    #siteMenu .menu-head h2 { font-size:19px; }
    #siteMenu .menu-close { flex:none; width:44px; height:44px; }
    #siteMenu .menu-profile { display:block; width:100%; padding:14px; border:1px solid rgba(241,210,138,.2); border-radius:16px; background:rgba(241,210,138,.045); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
    #siteMenu .menu-profile-top { display:grid; grid-template-columns:36px minmax(0,1fr) 16px; gap:10px; align-items:center; }
    #siteMenu .menu-profile-copy { min-width:0; }
    #siteMenu .menu-profile-copy b { display:block; font-size:15px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
    #siteMenu .menu-profile-copy small { display:block; margin-top:3px; font-size:12px; line-height:1.4; color:var(--text-2); overflow-wrap:anywhere; }
    #siteMenu .menu-profile-arrow { color:var(--text-2); font-size:22px; text-align:right; }
    #siteMenu .menu-profile-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(241,210,138,.12); }
    #siteMenu .menu-profile-stats[hidden] { display:none; }
    #siteMenu .menu-profile-stats > span { display:flex; flex-direction:column; min-width:0; }
    #siteMenu .menu-profile-stats > span > span { display:block; flex:1; color:var(--text-2); font-size:11.5px; line-height:1.5; }
    #siteMenu .menu-profile-stats strong { display:block; margin-top:4px; font-size:13px; line-height:1.5; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
    #siteMenu .menu-section { margin-top:16px; padding:0; }
    #siteMenu .menu-section-title { margin:0 2px 8px; color:rgba(238,240,255,.72); font-size:12px; font-weight:650; letter-spacing:.015em; }
    #siteMenu .menu-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    #siteMenu .menu-tool { grid-column:auto!important; display:grid; grid-template-columns:30px minmax(0,1fr); align-content:center; align-items:center; justify-items:stretch; gap:9px; min-height:60px; padding:10px; border-radius:13px; border-color:rgba(221,229,255,.1); background:rgba(255,255,255,.035); font-size:12px; line-height:1.4; text-align:left; color:var(--text); }
    #siteMenu .menu-tool > span { min-width:0; word-break:keep-all; overflow-wrap:anywhere; }
    #siteMenu .menu-icon { width:30px; height:30px; margin:0; }
    #siteMenu .menu-profile .menu-icon { width:36px; height:36px; border-radius:12px; }
    #siteMenu .menu-profile:active, #siteMenu .menu-tool:active { background:rgba(255,255,255,.085); }
  }
  @media (max-width: 360px) {
    #siteMenu .menu-tool { grid-template-columns:24px minmax(0,1fr); gap:7px; padding:8px; }
    #siteMenu .menu-tool .menu-icon { width:24px; height:24px; }
  }
  /* 전체 메뉴(siteMenu)는 모바일 전용이다. PC는 상단 메뉴(타로 안내 드롭다운·내 공간·설정)만 쓴다 — 창을 넓혀도 열린 채 남지 않게 숨긴다 */
  @media (min-width: 1000px) { #siteMenu { display:none !important; } }

  /* ---- 반응형 UI 시스템: 무대는 넓게, 읽고 누르는 영역은 안정적으로 ---- */
  :root { --control-h: 44px; --panel-pad: 22px; --reading-width: 620px; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button:focus-visible, a:focus-visible { outline: 2px solid #f1d28a; outline-offset: 3px; }
  @media (hover: hover) {
    .text-btn:hover, .menu-btn:hover{ border-color: rgba(241,210,138,.56); background-color: rgba(255,255,255,.1); }
    .reading-select:hover { border-color: rgba(143,183,255,.52); background: rgba(112,132,245,.11); }
    .mode:not(.locked):hover { border-color: rgba(143,183,255,.36); background: rgba(255,255,255,.075); transform: translateY(-1px); }
  }

  /* 카드 선택 보조 요소도 팬 카드와 같은 비율로 커집니다. */
  .hero { --picker-scale: 1; }
  .pk-top { top: calc(42px * var(--picker-scale)); }
  .pk-top:has(.pk-slots.many) { top: calc(8px * var(--picker-scale)); }
  .pk-x { width: max(40px, calc(34px * var(--picker-scale))); height: max(40px, calc(34px * var(--picker-scale))); font-size: calc(14px * var(--picker-scale)); }
  .pk-slots { --sgap: calc(var(--sw) * .16); gap: var(--sgap); }
  /* 자리 폭(--sw): 화면 폭을 자리 수로 나눈 값, 화면 높이(9dvh)를 넘지 않게. 작은 폰은 줄고 큰 폰은 커진다 */
  .pk-slots { --sw: clamp(44px, min(calc((100vw - 56px - (var(--n, 1) - 1) * 10px) / var(--n, 1) * .8), 7.8dvh), 76px); }
  .pk-slots.many { --sw: min(calc(58px * var(--picker-scale)), calc((100vw - 36px - (var(--cols, 5) - 1) * 8px) / var(--cols, 5))); --sgap: calc(8px * var(--picker-scale)); gap: calc(6px * var(--picker-scale)) var(--sgap); }
  .pk-slot { width: var(--sw); gap: calc(var(--sw) * .09); font-size: calc(10px * var(--picker-scale)); }
  .pk-slots.many .pk-slot { width: var(--sw); font-size: calc(9px * var(--picker-scale)); }
  .pk-slot i { width: var(--sw); border-radius: calc(var(--sw) * .16); }
  .pk-slot i .face { border-radius: calc(var(--sw) * .16); }
  /* 자리 이름(현재·장애물 등)이 작고 흐려서 잘 안 보이던 것을 크고 밝게 */
  .pk-slot > span { position: relative; padding: 0 2px 7px; font-size: max(11.5px, calc(11px * var(--picker-scale))); line-height: 1.25; white-space: normal; text-align: center; word-break: keep-all; text-wrap: balance; max-width: calc(var(--sw) + var(--sgap, 12px) - 6px); color: rgba(240,238,255,.94); font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 8px rgba(6,6,22,.85), 0 0 2px rgba(6,6,22,.6); }
  .pk-slots.many .pk-slot { width: var(--sw); font-size: inherit; }
  .pk-slots.many .pk-slot > span { font-size: clamp(10px, calc(var(--sw) * .21), 12.5px); }
  /* 긴 자리 이름이 카드 폭을 줄일수록 더 길어지는 피드백을 막는다. 원문은 title로도 제공한다. */
  .pk-slot > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  @media (max-width: 599.98px) and (max-height: 650px) {
    .app.picking .hero { --stage-y: max(76%, 320px); }
    .app.picking .legal-foot { visibility: hidden; pointer-events: none; }
  }
  .pk-vglow { left: calc(-70px * var(--pk-scale)); top: calc(-70px * var(--pk-scale)); width: calc(140px * var(--pk-scale)); height: calc(140px * var(--pk-scale)); }

  /* 접힌 폴더블과 휴대폰: 한 손 조작을 우선합니다. */
  @media (max-width: 599px) {
    .top { height: 46px; }
    .menu-btn{ width: 40px; height: 40px; }
    .ls-btn { height: 40px; }
    .reading-select { min-height: 68px; }
    .cta { min-height: 52px; }
  }

  /* 모바일은 기존 배치를 보존하고, 카드 선택 중 브라우저만 스크롤되지 않게 합니다. */
  @media (max-width: 999px) {
    html.picking, html.picking body { height: 100%; overflow: hidden; }
  }

  /* 태블릿·펼친 폴더블: 패널 폭과 타이포그래피를 함께 확장합니다. */
  @media (min-width: 600px) {
    :root { --control-h: 48px; --panel-pad: 28px; --reading-width: 720px; }
    .top { height: 52px; }
    .menu-btn{ width: 42px; height: 42px; }
    .ls-btn { height: 42px; }
    .brand { font-size: 14px; }
    .hint { font-size: 15.5px; margin-bottom: 18px; }
    .reading-select { min-height: 72px; padding: 12px 16px; border-radius: 20px; }
    .reading-select-icon, .mode .ring { width: 46px; height: 46px; border-radius: 15px; }
    .reading-select-icon svg, .mode .ring svg { width: 23px; height: 23px; }
    .reading-select-copy b, .mode-copy b { font-size: 15px; }
    .reading-select-copy small, .mode-copy small { font-size: 12px; }
    .cta { min-height: 54px; font-size: 16px; }
    .reading-box { width: min(100%, 760px); max-width: 760px; height: min(82svh, 760px); max-height: min(82dvh, 760px); padding-left: var(--panel-pad); padding-right: var(--panel-pad); }
    .reading-head h2 { font-size: 22px; }
    .reading-head p { font-size: 14px; }
    .reading-close { width: 40px; height: 40px; }
    .reading-tab { min-height: 38px; padding: 0 16px; font-size: 13px; }
    .reading-viewport { height:auto; }
    .reading-list { gap: 10px; max-height: calc(min(82dvh, 760px) - 196px); }
    .mode { min-height: 86px; padding: 12px; border-radius: 18px; }
    .mode-badge { padding: 4px 9px; font-size: 11px; }

    /* 이 선언은 기본 규칙 뒤에 두어 기존 400~440px 제한을 실제로 해제합니다. */
    .intro-box { width: min(100%, 680px); max-width: 680px; padding-left: var(--panel-pad); padding-right: var(--panel-pad); }
    .share-box { width: min(100%, 620px); max-width: 620px; padding-left: var(--panel-pad); padding-right: var(--panel-pad); }
    .menu-box { width: min(100%, 680px); max-width: 680px; padding: 14px 20px 20px; }
    .mbox { width: min(100%, 760px); max-width: min(760px, calc(100vw - 64px)); border-radius: 30px; }
    .mhead { padding: 20px var(--panel-pad) 8px; }
    .mhead h2 { font-size: 18px; }
    .page, .card-modal-body { padding-left: var(--panel-pad); padding-right: var(--panel-pad); }
    .page > .pinterp, .page > .syn, .card-modal-body > .pdesc { max-width: 68ch; margin-left: auto; margin-right: auto; }
    .menu-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .menu-tool { min-height: 76px; font-size: 11px; }
  }

  /* 넓은 PC: 카드 무대는 화면을 쓰되, 읽을 글은 지나치게 늘어나지 않습니다. */
  @media (min-width: 1000px) {
    :root { --panel-pad: 34px; --reading-width: 680px; }
    .app { padding-left: clamp(28px, 3.5vw, 72px); padding-right: clamp(28px, 3.5vw, 72px); }
    .top { max-width: 1440px; width: 100%; margin: 0 auto; }
    /* 테이블 높이는 창 높이에서 상단/문구/입력창/버튼이 쓰는 자리를 뺀 만큼만 쓴다. 창이 낮아져도 아래 입력창과 겹치지 않는다. */
    /* 테이블은 화면(vw)이 아니라 자기가 놓인 왼쪽 칸(cqw)의 폭에 맞춘다. 선택 중 확대(1.14배)되어도 옆 리딩 메뉴를 침범하지 않는다. */
    .hero { --hero-h: clamp(230px, calc(100dvh - 275px), 640px); --stage-y: 62%; height: var(--hero-h); container-type: inline-size; }
    /* 테이블 중심을 조금 위로 올려, 확대되어도 아래 안내 문구를 가리지 않고 위쪽 카드 자리와도 간격이 생기게 한다. */
    .altar { top: var(--stage-y); width: min(500px, 60cqw, calc(var(--hero-h) * .72)); height: min(500px, 60cqw, calc(var(--hero-h) * .72)); }
    .pk-plane { top: var(--pk-y, var(--stage-y)); }
    /* 뽑은 카드가 놓일 자리는 PC에서 지나치게 커지지 않게 고정 배율을 쓴다. */
    .pk-top { --picker-scale: 1.15; top: 14px; }
    .pk-top:has(.pk-slots.many) { --picker-scale: 1; top: 26px; }
    /* 카드 놓는 자리를 PC에서 크게: 1~3장은 넉넉한 크기, 10장은 한 줄로 늘어놓아 각 자리를 키운다. */
    /* 자리(카드+이름표)가 테이블 꼭짓점 위 빈 공간(대략 hero 높이의 33%)에 들어가도록 크기를 맞춘다 */
    .pk-slots { --sw: min(84px, max(48px, calc((var(--hero-h) * .327 - 66px) / 1.6))); --sgap: 26px; gap: var(--sgap); }
    .pk-slots.many { --sw: min(88px, calc((100cqw - 150px) / var(--n, 10))); display: flex; flex-wrap: nowrap; --sgap: 10px; gap: var(--sgap); }
    .pk-slot, .pk-slots.many .pk-slot { width: var(--sw); gap: 10px; }
    .pk-slot i { width: var(--sw); border-radius: 11px; }
    .pk-slot i .face { border-radius: 11px; }
    .pk-slot > span, .pk-slots.many .pk-slot > span { font-size: 13.5px; }
    .pk-slots.many .pk-slot > span { font-size: 12.5px; }
    .hint, .modes, #drawBtn, .lang-row, .hello { width: min(100%, var(--reading-width)); }
    .reading-box { width: min(100%, 920px); max-width: 920px; }
    .intro-box { width: min(100%, 760px); max-width: 760px; }
    .share-box { width: min(100%, 680px); max-width: 680px; }
    .menu-box { width: min(100%, 800px); max-width: 800px; }
    .mbox { width: min(100%, 860px); max-width: min(860px, calc(100vw - 96px)); }
    #resultModal .page { padding-bottom: 34px !important; }
    #resultModal .pinterp p, #resultModal .syn p { font-size: 15.5px; }

    /* 선택 중 제단이 안내 문구 영역을 침범하지 않도록 확대 폭을 절제합니다. */
    .app.picking .altar { --altar-scale: 1.14; }
    .app.picking .hero { padding-bottom: 42px; }
  }

  /* Desktop reading workspace: keep the stage open while making navigation and choices easy to scan. */
  @media (min-width: 1000px) {
    .app {
      grid-template-columns: minmax(0, 1fr) clamp(390px, 25vw, 460px);
      column-gap: clamp(36px, 4vw, 72px);
      padding-top: clamp(18px, 2.4vh, 30px);
      padding-bottom: clamp(20px, 3vh, 34px);
    }
    .top {
      width: 100%; max-width: none; min-height: 58px; height: auto; margin: 0; padding: 0 2px 14px;
      display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
      border-bottom: 1px solid rgba(212,220,255,.1);
    }
    /* 전체 메뉴(모바일 전용 시트)를 여는 햄버거 버튼은 PC에서 없앤다 — 같은 항목이 상단 메뉴(타로 안내 드롭다운·내 공간·설정)에 있다 */
    .menu-btn { display: none; }
    .lang-switch { grid-column: 3; grid-row: 1; }
    .ls-btn { height: 42px; padding: 0 14px; border-radius: 13px; border-color: rgba(212,220,255,.15); background: rgba(255,255,255,.055); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
    .brand { position: static; transform: none; font-size: 15px; letter-spacing: .24em; }
    .brand { grid-column: 1; grid-row: 1; }
    .desktop-nav { grid-column: 2; grid-row: 1; display: flex; justify-self: end; align-items: center; gap: 10px; min-width: 0; }
    /* 성격이 같은 항목끼리 한 묶음(둘러보기 / 내 공간 / 설정)으로 보여 준다. */
    .nav-group {
      display: flex; align-items: center; border: 1px solid rgba(212,220,255,.13); border-radius: 13px;
      background: rgba(255,255,255,.035);
    }
    /* 묶음 안에 타로 안내 드롭다운이 들어가므로 overflow로 자르지 않고, 양 끝 버튼만 묶음 모서리에 맞춰 둥글게 한다 */
    .nav-group > :first-child, .nav-group > :first-child .nav-drop-btn { border-radius: 12px 0 0 12px; }
    .nav-group > :last-child, .nav-group > :last-child .nav-drop-btn { border-radius: 0 12px 12px 0; }
    .nav-group .nav-drop { display: flex; align-self: stretch; }
    /* 캐릭터 버튼이 숨겨져 있으면 회원 버튼이 맨 앞: 앞 구분선 없이 왼쪽 모서리를 둥글게 */
    #navCharBtn[style*="none"] + #navMemberBtn { border-left: 0; border-radius: 12px 0 0 12px; }
    .desktop-nav .nav-group .nav-drop-btn { border: 0; border-radius: 0; background: transparent; }
    /* 안내(개인정보·약관·문의)는 다른 묶음보다 눈에 덜 띄어도 되는 부가 정보라 살짝 옅게 */
    .desktop-nav button, .desktop-nav a {
      min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px;
      border: 0; border-radius: 0; color: rgba(235,238,255,.78);
      background: transparent; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
      line-height: 1; text-decoration: none; transition: border-color .18s, background .18s, color .18s, transform .15s;
    }
    .nav-group > * + * { border-left: 1px solid rgba(212,220,255,.1); }
    /* PC 상단 메뉴의 "회원 정보" 버튼 안에 이름과 포인트·구독권을 한 덩어리로 붙여 보여 준다 */
    .nav-wallet-sub { margin-left: 6px; color: #f1d28a; font-weight: 700; }
    .nav-wallet-sub[hidden] { display: none; }
    #navMemberLabel { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #navCharBtn { gap: 8px; padding-left: 8px; }
    .nav-char-face { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 1px solid rgba(241,210,138,.55); box-shadow: 0 0 0 2px rgba(241,210,138,.1); background: rgba(255,255,255,.06); }
    .nav-char-face[hidden] { display: none; }
    .nav-wallet-sub::before { content: '· '; color: rgba(235,238,255,.45); font-weight: 600; }
    .menu-head { padding: 0 0 12px; } /* 결제·기록 등 다른 시트 머리글 */
    /* 타로 안내: 사용 방법·카드 사전·리딩 가이드를 담은 드롭다운 */
    .nav-drop { position: relative; }
    .desktop-nav .nav-drop-btn { white-space: nowrap; gap: 6px; border: 1px solid rgba(212,220,255,.13); border-radius: 13px; background: rgba(255,255,255,.035); }
    .nav-drop-btn svg { width: 14px; height: 14px; transition: transform .18s; }
    .nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
    .nav-drop-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; min-width: 190px; display: grid; gap: 2px; padding: 6px; border: 1px solid rgba(173,190,255,.16); border-radius: 14px; background: #16183a; box-shadow: 0 18px 48px rgba(0,0,0,.42); }
    .nav-drop-menu[hidden] { display: none; }
    .desktop-nav .nav-drop-menu button, .desktop-nav .nav-drop-menu a { justify-content: flex-start; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 13px; text-align: left; white-space: nowrap; }
    .desktop-nav button:hover, .desktop-nav a:hover { border-color: rgba(241,210,138,.42); background: rgba(241,210,138,.09); color: #fff; }
    .desktop-nav button:active { transform: scale(.97); }
    /* 앱 설치·효과음: PC 상단 메뉴의 작은 보조 묶음. 효과음은 켜졌을 때 금색 점으로 상태를 보여 준다 */
    .desktop-nav .nav-utils button[hidden] { display: none; }
    /* 효과음: 글자 대신 스피커 아이콘(켜짐 = 소리 물결, 꺼짐 = X) */
    .desktop-nav .nav-sound { display: inline-flex; align-items: center; justify-content: center; padding-left: 10px; padding-right: 10px; }
    .desktop-nav .nav-sound > span { display: inline-flex; }
    .desktop-nav .nav-sound .on, .desktop-nav .nav-sound.act .off { display: none; }
    .desktop-nav .nav-sound.act .on { display: inline-flex; color: #f1d28a; }
    .desktop-nav button:disabled { cursor: default; color: rgba(226,230,255,.42); border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
    #modes { width: auto; margin: 0; align-self: stretch; }
    /* The reading desk remains as an orientation point while cards and results take focus. */
    .app.picking .top, .app.reading-focus .top,
    .app.picking .modes, .app.reading-focus .modes { opacity: 1; visibility: visible; }
    .app.picking .top, .app.picking .modes { filter: saturate(.72); pointer-events: none; }
    .app.reading-focus .top, .app.reading-focus .modes { pointer-events: none; }
    .app.ten-picking .hero { height: min(72dvh, 680px); max-height: 680px; }
    .app.ten-picking .altar { --altar-scale: .98; }
    /* Give a 10-card result two generous rows instead of a cramped single line. */
    .app.ten-spread .hero { --sp-h: min(74dvh, 700px, calc(var(--hero-h) + 60px)); height: var(--sp-h); max-height: 700px; }
    .spread.ten {
      width: min(100%, 980px);
      grid-template-columns: repeat(var(--colsw, 5), minmax(0, 1fr));
      gap: 18px clamp(14px, 1.6vw, 22px);
      transform: translateY(12px);
    }
    .spread.ten .card { width: min(100%, 170px, calc((var(--sp-h, 700px) - 12px - var(--rowsw, var(--rows, 2)) * 44px - (var(--rowsw, var(--rows, 2)) - 1) * 18px) / (var(--rowsw, var(--rows, 2)) * 1.6))); max-width: 170px; margin-left: auto; margin-right: auto; }
    .spread.ten .pos { display: table; width: auto; margin: 10px auto 0; transform: none; font-size: 13.5px; white-space: nowrap; }
    .reading-sheet, .reading-sheet[hidden] { width: 100%; }
    .reading-box {
      padding: 22px;
      border: 1px solid rgba(192,204,255,.16);
      border-radius: 26px;
      background:
        radial-gradient(115% 48% at 52% 0%, rgba(112,126,222,.2), transparent 66%),
        linear-gradient(180deg, rgba(37,39,77,.92), rgba(20,21,48,.92));
      box-shadow: 0 20px 52px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.055);
    }
    .reading-head { margin-bottom: 16px; padding: 1px 2px 0; }
    .reading-eyebrow { font-size: 10.5px; letter-spacing: .14em; }
    .reading-head h2 { margin-top: 5px; font-size: 23px; letter-spacing: -.025em; }
    .reading-head p { margin-top: 4px; font-size: 13px; line-height: 1.45; }
    .reading-tabs {
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
      overflow: visible; margin: 0 0 16px; padding: 0;
    }
    .reading-tab {
      min-width: 0; min-height: 38px; padding: 0 7px;
      border-radius: 12px; font-size: 11.5px; white-space: nowrap;
    }
    .reading-list {
      gap: 9px; padding: 2px 6px 4px 1px;
      scrollbar-width: thin;
      scrollbar-color: rgba(175,190,255,.42) rgba(255,255,255,.04);
    }
    .reading-list::-webkit-scrollbar { width: 5px; }
    .reading-list::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; }
    .reading-list::-webkit-scrollbar-thumb { background: rgba(175,190,255,.35); border-radius: 999px; }
    .mode { min-height: 76px; padding: 11px 12px; border-radius: 17px; }
    /* 선택되지 않은 리딩 항목은 테두리와 배경 없이 목록처럼, 선택된 항목과 마우스를 올린 항목만 강조한다. */
    .mode:not(.active) { border-color: transparent; background: none; }
    .mode:not(.active):not(.locked):hover { background: rgba(255,255,255,.06); }
    .mode-badge { border-color: transparent; }
    .mode .ring { width: 44px; height: 44px; border-radius: 14px; }
    .mode-copy { gap: 4px; }
    .mode-copy b { font-size: 14px; }
    .mode-copy small { font-size: 11.5px; }
    .mode-badge { padding: 4px 8px; font-size: 10px; }
  }

  /* 낮은 높이의 가로 화면에서도 제단과 컨트롤이 겹치지 않도록 유지합니다. */
  @media (min-width: 600px) and (max-width: 999px) and (max-height: 680px) {
    .hero { height: 460px; }
    .crystal { --crystal-scale: 1.2; }
    .reading-box { max-height: 88dvh; }
  }
  /* PC 카드 선명도: will-change:transform 이 붙은 레이어는 처음 그려진 배율(카드가 .92배로 떠오르는 순간)로 고정되어
     이후 확대되면 흐릿해 보인다. PC에서는 이 힌트를 빼서 최종 크기로 다시 그리게 하고, 결과창의 카드 그림도 키운다. */
  @media (min-width: 1000px) {
    .inner { will-change: auto; }
    /* 모든 언어가 한국어처럼 탭 4개를 한 줄에(2026-10-21 사용자 결정: 한국어 디자인 기준). 다른 언어 탭 이름은 짧게(Quick·Rápidas 등). */
    .art { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
    .mini { width: 104px; border-radius: 12px; }
    .mini-wrap { font-size: 13px; gap: 8px; }
    .pcard { width: clamp(130px, 24dvh, 200px) !important; }
  }
  /* PC 첫 화면: 수정구를 위로 올린다. (구슬 안의 굴절 테이블은 PC·모바일 공통으로 .lens 가 그린다.) */
  @media (min-width: 1000px) and (hover: hover) {
    .crystal { translate: 0 -56px; }
  }
  /* 결과창은 카드 수와 관계없이 같은 프레임·카드 패널·해설 위계를 사용한다. */
  #resultModal.modal > .mbox { background: linear-gradient(145deg,#242336,#161724) !important; border: 1px solid #cbb58d45; box-shadow: 0 24px 80px #05050b99 !important; }
  #resultModal .mhead { padding: 22px 26px 18px; border-bottom: 1px solid #cbb58d22; }
  #resultModal .mhead h2 { color: #f3eee4; font-size: 17px; line-height: 1.4; }
  #resultModal .mhead h2::before { content: 'KCARD78'; display: block; margin-bottom: 6px; color: #cbb58d; font-size: 9px; font-weight: 600; letter-spacing: .2em; }
  #resultModal .page { padding: 20px 22px 24px; }
  #resultModal .card-strip { margin: 0 0 20px; padding: 22px 18px 18px; border: 1px solid #cbb58d30; border-radius: 18px; background: linear-gradient(150deg,#cbb58d0c,#080a160f); box-shadow: inset 0 1px 0 #ffffff06; }
  #resultModal .card-strip .summary-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 12px; margin: 0; }
  #resultModal .card-strip .mini { width: 100%; max-width: 150px; border-radius: 10px; box-shadow: 0 8px 18px #0006,0 0 0 1px #cbb58d55; }
  #resultModal .card-strip .mini-wrap > span { color: #dfc99f; font-size: 12px; font-weight: 500; }
  #resultModal .card-strip .summary-row:has(.mini-wrap:only-child) .mini { width: 140px; }
  #resultModal .card-strip .tap-hint { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #cbb58d22; color: #aaa7bc; text-align: center; font-size: 12px; line-height: 1.65; }
  #resultModal .mfoot { border-top: 1px solid #cbb58d22; background: #11121d70; }
  #resultModal .mlinks button { color: #bdb9cc; text-decoration: none; }
  #resultModal .mlinks button:hover { color: #ead6af; background: #cbb58d0c; }
  #resultModal .mbtn { border-radius: 12px; }
  @media (min-width: 1000px) {
    #resultModal .mbox { width: min(1120px, calc(100vw - 64px)); max-width: none; height: min(820px, calc(100dvh - 56px)); max-height: none; }
    #resultModal .page:has(> .card-strip):has(> .interp-block) {
      display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 24px 28px 28px;
    }
    #resultModal .page:has(> .card-strip):has(> .interp-block) > .card-strip {
      position: sticky; top: 0; grid-column: 1; grid-row: 1 / span 6; margin: 0; max-height: calc(min(820px,100dvh - 56px) - 208px); overflow-y: auto;
    }
    #resultModal .page:has(> .card-strip):has(> .interp-block) > :not(.card-strip) { grid-column: 2; min-width: 0; }
    #resultModal .page:has(> .card-strip):has(> .interp-block) > .interp-block { margin: 0; }
    #resultModal .card-strip .summary-row:has(.mini-wrap:only-child) .mini { width: min(180px,100%); max-width: 180px; }
    #resultModal .card-strip .summary-row:has(.mini-wrap:nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 10px; }
    #resultModal .card-strip .summary-row:has(.mini-wrap:nth-child(8)) { grid-template-columns: repeat(5,minmax(0,1fr)); }
    #resultModal .card-strip .summary-row:has(.mini-wrap:nth-child(4)) .mini-wrap > span { font-size: 11px; }
    #resultModal .mbtns.single .mbtn { width: auto; max-width: 220px; margin: 0; }
  }
  /* 낮은 PC 창(브라우저 확대 포함)에서는 수정구도 함께 줄여 테이블 위에 자연스럽게 얹히게 한다. */
  @media (min-width: 1000px) and (max-height: 760px) { .crystal { --crystal-scale: 1.25; } }
  @media (min-width: 1000px) and (max-height: 620px) { .crystal { --crystal-scale: 1; } }
  /* A real two-card grid; a decorative third child must not skew compatibility. */
  #resultModal #pager .page .card-strip--pair .summary-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:18px;width:100%;max-width:320px;margin:0 auto 12px;overflow:visible;padding:0;justify-content:center; }
  #resultModal #pager .page .card-strip--pair .summary-row .mini-wrap { min-width:0;flex:none;align-items:center; }
  #resultModal #pager .page .card-strip--pair .summary-row .mini { width:100%;max-width:150px;border-radius:12px; }
  #resultModal #pager .page .card-strip--pair .tap-hint { text-align:center; }
  @media (max-width:559px) { #resultModal #pager .page .card-strip--pair .summary-row { max-width:270px;gap:16px; } }
  #resultModal .mbtns.single .mbtn.share { min-width:0;font-size:13px;letter-spacing:0; }
  /* 셔플 생략(PC): 테이블 위 스위치 대신 상단 메뉴 효과음 옆의 설정 스위치로 둔다. 모바일은 상단 메뉴가 없어 테이블 스위치를 쓴다 */
  .desktop-nav .nav-skip { display: none; }
  @media (min-width: 1000px) {
    .hero .shuffle-skip { display: none; }
    .desktop-nav .nav-skip { display: inline-flex; align-items: center; gap: 7px; padding-left: 10px; padding-right: 12px; white-space: nowrap; }
    .desktop-nav .nav-skip i { position: relative; width: 26px; height: 15px; flex: none; border-radius: 999px; background: rgba(255,255,255,.18); transition: background .2s; }
    .desktop-nav .nav-skip i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .2s; }
    .desktop-nav .nav-skip.on { color: #f6e7bd; }
    .desktop-nav .nav-skip.on i { background: #c9a85c; }
    .desktop-nav .nav-skip.on i::after { transform: translateX(11px); }
  }
  /* 좁은 PC에서 글자가 긴 영어·스페인어는 메뉴가 더 줄바꿈되지 않게 글자를 숨기고 토글만(이름은 title·aria-label). 한국어·일본어는 글자 유지 */
  @media (min-width: 1000px) and (max-width: 1359.98px) { html:is([lang|="en"],[lang|="es"]) .desktop-nav .nav-skip span { display: none; } html:is([lang|="en"],[lang|="es"]) .desktop-nav .nav-skip { padding-right: 10px; } }

  /* 높은 PC 화면 확대(2026-10-27 사용자 요청): 화면 높이 946px 배치의 비율을 유지한 채 화면을 채운다.
     배율 --kc-s = min(화면 높이/946, 화면 폭/1680)은 home-startup.js가 정하고, 1보다 클 때만 html[data-kc-scale]이 붙는다(그 밖의 화면은 이 규칙이 적용되지 않는다).
     카드 영역(hero·테이블·수정구·카드 자리·결과 카드)은 zoom 없이 원래 반응형 크기의 상한만 배율만큼 키운다 — picker.js가 화면 좌표와 요소 크기를 함께 써서 zoom 안에서는 비행 경로가 어긋난다.
     상단 메뉴·리딩 메뉴·카드 뽑기 버튼·하단 링크·홈 알림은 zoom으로 키운다. #hint는 뽑기를 마칠 때 화면 좌표로 옮기는 애니메이션이 있어 글자·폭만 키운다. */
  @media (min-width: 1000px) {
    html[data-kc-scale] .app {
      max-width: calc(1680px * var(--kc-s));
      grid-template-columns: minmax(0, 1fr) calc(clamp(390px, calc(25vw / var(--kc-s)), 460px) * var(--kc-s));
      column-gap: calc(clamp(36px, calc(4vw / var(--kc-s)), 72px) * var(--kc-s));
      padding-left: calc(clamp(28px, calc(3.5vw / var(--kc-s)), 72px) * var(--kc-s)); padding-right: calc(clamp(28px, calc(3.5vw / var(--kc-s)), 72px) * var(--kc-s));
      padding-top: clamp(18px, 2.4vh, calc(30px * var(--kc-s)));
      padding-bottom: calc(28px * var(--kc-s) + env(safe-area-inset-bottom));
    }
    html[data-kc-scale] .app .top, html[data-kc-scale] .app .hello, html[data-kc-scale] .app #modes, html[data-kc-scale] .app #drawBtn, html[data-kc-scale] .app .legal-foot, html[data-kc-scale] .hero-messages > * { zoom: var(--kc-s); }
    /* zoom 안의 화면 높이 단위는 배율이 한 번 더 곱해지므로 나눠 둔다 */
    html[data-kc-scale] .app #modes { margin-top: clamp(14px, calc(3.2dvh / var(--kc-s)), 36px); --pending-notice-height: clamp(52px, calc(6.5dvh / var(--kc-s)), 60px); }
    html[data-kc-scale] .app #hint { width: min(100%, calc(var(--reading-width) * var(--kc-s))); font-size: calc(15.5px * var(--kc-s)); margin-bottom: calc(18px * var(--kc-s)); }
    html[data-kc-scale] .hero-messages { top: max(0px, calc(50% - 285px * var(--kc-s)), calc(850px * var(--kc-s) - 100dvh)); width: min(calc(470px * var(--kc-s)), calc(100% - 24px)); gap: calc(8px * var(--kc-s)); }
    html[data-kc-scale] .app .hero { --hero-h: clamp(230px, calc(100dvh - 275px * var(--kc-s)), calc(640px * var(--kc-s))); margin-bottom: clamp(6px, 2dvh, calc(24px * var(--kc-s))); }
    html[data-kc-scale] .app:not(.reading):not(.picking) .hero { min-height: calc(560px * var(--kc-s)); }
    html[data-kc-scale] .app .crystal { --crystal-scale: calc(1.5 * var(--kc-s)); }
    html[data-kc-scale] .app .altar { width: min(calc(500px * var(--kc-s)), 60cqw, calc(var(--hero-h) * .72)); height: min(calc(500px * var(--kc-s)), 60cqw, calc(var(--hero-h) * .72)); }
    html[data-kc-scale] .hero .pk-hint { font-size: calc(14.5px * var(--kc-s)); max-width: calc(620px * var(--kc-s)); }
    html[data-kc-scale] body .app .pk-top, html[data-kc-scale] body .app .pk-top:has(.pk-slots.many) { top: min(calc(20px * var(--kc-s)), calc(936px * var(--kc-s) - 100dvh)); }
    html[data-kc-scale] .app .pk-slots { --sw: min(calc(84px * var(--kc-s)), max(calc(48px * var(--kc-s)), calc((var(--hero-h) * .327 - 66px * var(--kc-s)) / 1.6))); --sgap: calc(26px * var(--kc-s)); }
    html[data-kc-scale] .app .pk-slots.many { --sw: min(calc(88px * var(--kc-s)), calc((100cqw - 150px * var(--kc-s)) / var(--n, 10))); --sgap: calc(10px * var(--kc-s)); }
    html[data-kc-scale] .app .pk-slot, html[data-kc-scale] .app .pk-slots.many .pk-slot { gap: calc(10px * var(--kc-s)); }
    html[data-kc-scale] .app .pk-slot > span { font-size: calc(13.5px * var(--kc-s)); }
    html[data-kc-scale] .app .pk-slots.many .pk-slot > span { font-size: calc(12.5px * var(--kc-s)); }
    html[data-kc-scale] .app.ten-picking .hero { height: min(72dvh, calc(680px * var(--kc-s))); max-height: calc(680px * var(--kc-s)); }
    html[data-kc-scale] body .app.ten-spread .hero { --sp-h: min(74dvh, calc(700px * var(--kc-s)), calc(var(--hero-h) + 16px * var(--kc-s))); max-height: calc(700px * var(--kc-s)); }
    html[data-kc-scale] body .app.reading .spread.one .card { width: min(clamp(calc(150px * var(--kc-s)), 26cqw, calc(340px * var(--kc-s))), calc((var(--hero-h, 9999px) - 96px * var(--kc-s)) / 1.6)); }
    html[data-kc-scale] body .app.reading .spread:not(.one):not(.ten) .card { width: min(clamp(calc(110px * var(--kc-s)), 24cqw, calc(270px * var(--kc-s))), calc((var(--hero-h, 9999px) - 110px * var(--kc-s)) / 1.6)); }
    html[data-kc-scale] .app .spread.ten { width: min(100%, calc(980px * var(--kc-s))); gap: calc(18px * var(--kc-s)) calc(clamp(14px, calc(1.6vw / var(--kc-s)), 22px) * var(--kc-s)); }
    html[data-kc-scale] .app .spread.ten .card { width: min(100%, calc(170px * var(--kc-s)), calc((var(--sp-h, 700px) - (12px + var(--rowsw, var(--rows, 2)) * 44px + (var(--rowsw, var(--rows, 2)) - 1) * 18px) * var(--kc-s)) / (var(--rowsw, var(--rows, 2)) * 1.6))); max-width: calc(170px * var(--kc-s)); }
    html[data-kc-scale] .app .spread.ten .pos { font-size: calc(13.5px * var(--kc-s)); }
  }
  /* 첫 방문 캐릭터 선택 전 홈 가림·드러남(app-reading-layout.css에서 옮김): 결과·AI CSS는 늦게 받으므로 첫 화면 CSS에 둔다 */
  html.kc-gate .hero,html.kc-gate #hint,html.kc-gate .modes,html.kc-gate #drawBtn{visibility:hidden}
  html.kc-reveal .hero,html.kc-reveal #hint,html.kc-reveal .modes,html.kc-reveal #drawBtn{animation:kcReveal .9s ease both}
  @keyframes kcReveal{from{opacity:0}to{opacity:1}}
  @media(prefers-reduced-motion:reduce){html.kc-reveal .hero,html.kc-reveal #hint,html.kc-reveal .modes,html.kc-reveal #drawBtn{animation:none}}

  .guide-help span[aria-hidden="true"]{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1px solid currentColor;border-radius:50%;font-size:18px;font-weight:650;line-height:1;color:var(--gold,#e2bc6c)}
  .guide-help:focus-visible{outline:2px solid var(--gold,#e2bc6c);outline-offset:3px}