.online-main{background:#100c13;color:#f7f1f6}.online-hero{position:relative;overflow:hidden;min-height:570px;padding:125px max(7vw,32px) 90px;display:grid;grid-template-columns:minmax(0,1fr) 430px;align-items:center;gap:8vw;background:radial-gradient(circle at 75% 20%,rgba(118,77,137,.28),transparent 26%),linear-gradient(135deg,#120d15 0%,#221628 58%,#110c14 100%);isolation:isolate}.online-hero:after{content:"";position:absolute;inset:0;opacity:.19;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");pointer-events:none}.online-hero-copy{position:relative;z-index:2;max-width:760px}.online-hero .eyebrow{color:#d8bfdf}.online-hero h1{margin:18px 0 24px;font-family:"Noto Serif KR",serif;font-size:clamp(52px,5vw,80px);line-height:1.16;letter-spacing:-.055em;color:#fff}.online-hero h1 em{display:block;margin-top:.07em;font-style:normal;color:#ddc8e5}.online-hero-copy>p:last-of-type{max-width:680px;color:#cfc4d2;font-size:18px;line-height:1.9;word-break:keep-all}.online-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}.online-trust span{padding:9px 12px;border:1px solid rgba(255,255,255,.1);color:#cfc4d3;font-size:11px}.online-mini-spread{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:330px;perspective:1000px}.online-mini-spread i{position:absolute;display:grid;place-items:center;width:164px;height:270px;border:1px solid rgba(229,213,236,.36);background:linear-gradient(150deg,#e9deca,#cbb496);color:#50385d;font:400 68px/1 Georgia,serif;box-shadow:0 30px 65px rgba(0,0,0,.32)}.online-mini-spread i:nth-child(1){transform:translateX(-120px) rotate(-12deg)}.online-mini-spread i:nth-child(2){z-index:2;transform:translateY(-18px)}.online-mini-spread i:nth-child(3){transform:translateX(120px) rotate(12deg)}.online-orbit{position:absolute;border:1px solid rgba(226,205,234,.11);border-radius:50%;z-index:1;animation:onlineOrbit 35s linear infinite}.online-orbit.o1{width:500px;height:500px;right:1%;top:5%}.online-orbit.o2{width:350px;height:350px;right:6%;top:17%;border-style:dashed;animation-direction:reverse;animation-duration:27s}@keyframes onlineOrbit{to{transform:rotate(360deg)}}
.reading-shell{width:min(1120px,calc(100% - 40px));margin:-42px auto 100px;position:relative;z-index:5;background:#f6f1eb;color:#1d181e;border:1px solid rgba(255,255,255,.12);box-shadow:0 35px 100px rgba(0,0,0,.3)}.reading-progress{height:78px;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;padding:0 40px;border-bottom:1px solid #ddd4da;background:#fff}.reading-progress span{display:flex;align-items:center;gap:9px;font-size:11px;color:#9a9098}.reading-progress span b{display:grid;place-items:center;width:26px;height:26px;border:1px solid #cec4cd;border-radius:50%;font-size:9px}.reading-progress span.active{color:#382c3d;font-weight:800}.reading-progress span.active b{background:#251c29;color:#fff;border-color:#251c29}.reading-progress i{height:1px;background:#ddd4da;margin:0 18px}.reading-step{display:none;padding:56px 64px 50px}.reading-step.active{display:block;animation:stepIn .45s ease both}@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.reading-head{max-width:760px;margin-bottom:32px}.reading-head small{color:#8e6d97;font-size:10px;font-weight:800;letter-spacing:.16em}.reading-head h2{margin:8px 0 12px;font-family:"Noto Serif KR",serif;font-size:clamp(32px,4vw,48px);line-height:1.3;letter-spacing:-.045em}.reading-head p{margin:0;color:#756d75;font-size:14px;line-height:1.8}.question-box{position:relative;display:grid;gap:10px;padding:22px 24px;background:#fff;border:1px solid #d9d0d7}.question-box>span{font-size:12px;font-weight:800;color:#5c4d61}.question-box textarea{border:0;resize:vertical;outline:0;font:500 17px/1.8 "Noto Sans KR",sans-serif;color:#292229;background:transparent;min-height:110px}.question-box>small{position:absolute;right:20px;bottom:14px;color:#9d939b;font-size:10px}.spread-title{display:flex;align-items:end;justify-content:space-between;margin:34px 0 14px}.spread-title b{font-size:14px}.spread-title span{font-size:11px;color:#8e858c}.spread-options{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d9d0d7;border-left:1px solid #d9d0d7}.spread-options button{min-height:128px;padding:20px;border:0;border-right:1px solid #d9d0d7;border-bottom:1px solid #d9d0d7;background:#fff;text-align:left;cursor:pointer;display:grid;gap:6px;transition:.2s}.spread-options button:hover{background:#faf7f3}.spread-options button.selected{background:#241b28;color:#fff}.spread-options button>span{font-family:Georgia,serif;color:#8e689a;font-size:20px}.spread-options button.selected>span{color:#d7b7df}.spread-options b{font-size:14px}.spread-options small{color:#8b8289;font-size:10px}.spread-options button.selected small{color:#bfb3c1}.reading-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:34px}.reading-primary{border-radius:0!important;background:#2b2030!important;color:#fff!important;box-shadow:none!important;min-height:50px}.reading-primary:disabled{opacity:.4;cursor:not-allowed}.reading-primary span{margin-left:8px}.reading-back,.reading-home{border:0;background:none;color:#746b73;font:700 12px/1 "Noto Sans KR",sans-serif;text-decoration:none;cursor:pointer;padding:12px 0}.reading-boundary{margin:18px 0 0;color:#968c94;font-size:10px;line-height:1.7}.pick-roles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d8cfd6;border-bottom:1px solid #d8cfd6;margin-bottom:30px}.pick-roles div{display:flex;align-items:center;gap:12px;padding:13px 14px;color:#999097}.pick-roles div+div{border-left:1px solid #d8cfd6}.pick-roles b{font-size:9px;color:#94779c}.pick-roles span{font-size:12px}.pick-roles div.active{color:#251d29;background:#eee7e1}.card-deck{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;min-height:235px;align-items:center}.pick-card{position:relative;aspect-ratio:2/3;border:0;background:none;padding:0;cursor:pointer;perspective:800px}.pick-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1),translate .25s ease}.pick-card:hover .pick-card-inner{translate:0 -7px}.pick-card.chosen .pick-card-inner{transform:rotateY(180deg);translate:0 -12px}.pick-front,.pick-back{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #4a384f;display:grid;place-items:center}.pick-back{background:linear-gradient(145deg,#392a40,#1e1723);box-shadow:inset 0 0 0 5px #17111b,inset 0 0 0 6px rgba(217,190,224,.24);color:#b998c4;font:400 22px/1 Georgia,serif}.pick-back:after{content:"☾";position:absolute;font-size:11px;transform:translate(13px,15px);opacity:.6}.pick-front{transform:rotateY(180deg);background:linear-gradient(155deg,#eadfc9,#c8b18e);color:#3d2b46;padding:8px;text-align:center}.pick-front span{font:400 30px/1 Georgia,serif}.pick-front b{position:absolute;left:4px;right:4px;bottom:10px;font:700 7px/1.2 Georgia,serif;letter-spacing:.06em}.pick-card.used:not(.chosen){pointer-events:none;opacity:.24}.chosen-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.chosen-summary>div{min-height:64px;border-top:1px solid #d8cfd6;padding:12px 4px;display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:start}.chosen-summary b{font-size:9px;color:#96799e}.chosen-summary span{font-size:12px;color:#4e444e}.result-question{padding-left:15px;border-left:2px solid #9c7da6!important;color:#60565f!important}.result-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 30px}.result-card{min-height:210px;background:#211827;color:#fff;padding:24px;position:relative;overflow:hidden;border:1px solid #392d3e}.result-card:after{content:"";position:absolute;right:-60px;bottom:-80px;width:160px;height:160px;border:1px solid rgba(223,205,230,.08);border-radius:50%}.result-card small{color:#ac91b5;font-size:9px;letter-spacing:.08em}.result-card i{display:block;margin:30px 0 20px;color:#d6bcdd;font:400 45px/1 Georgia,serif;font-style:normal}.result-card b{font-family:"Noto Serif KR",serif;font-size:17px}.reading-loader{min-height:230px;display:flex;flex-direction:column!important;align-items:center;justify-content:center;text-align:center;border:1px solid #ddd4da;background:#fff}.loader-orbit{font:400 28px/1 Georgia,serif;color:#8d6997;animation:loaderSpin 1.8s linear infinite;margin-bottom:20px}.reading-loader b{font-size:15px}.reading-loader small{margin-top:7px;color:#988f96}@keyframes loaderSpin{to{transform:rotate(360deg)}}.reading-result{padding:34px 38px!important;border-radius:0!important;background:#fff!important;border:1px solid #ddd4da!important;color:#3d343c!important;box-shadow:none!important}.reading-result p{margin:0 0 15px!important;color:#514751!important;line-height:1.9;white-space:pre-wrap;word-break:keep-all}.reading-result p:last-child{margin-bottom:0!important}.result-next{margin-top:24px;padding:24px 26px;display:flex!important;justify-content:space-between;align-items:center;gap:20px;background:#1c151f;color:#fff}.result-next div{display:grid;gap:5px}.result-next small{color:#bda9c2}.result-next b{font-family:"Noto Serif KR",serif;font-size:15px;line-height:1.55;max-width:640px}.result-next .btn{white-space:nowrap}.result-actions{border-top:1px solid #d9d0d7;padding-top:22px}.online-note{width:min(980px,calc(100% - 40px));margin:0 auto 100px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:28px 30px;border-top:1px solid #3e3044;border-bottom:1px solid #3e3044}.online-note>span{color:#b998c3;font:400 24px/1 Georgia,serif}.online-note b{font-family:"Noto Serif KR",serif;font-size:17px}.online-note p{margin:5px 0 0;color:#a99eaa;font-size:12px;line-height:1.8}
@media(max-width:900px){.online-hero{grid-template-columns:1fr;padding:100px 24px 70px}.online-mini-spread{height:290px;margin-top:20px}.online-mini-spread i{width:135px;height:220px}.online-mini-spread i:nth-child(1){transform:translateX(-90px) rotate(-11deg)}.online-mini-spread i:nth-child(3){transform:translateX(90px) rotate(11deg)}.reading-step{padding:42px 34px}.card-deck{grid-template-columns:repeat(6,1fr)}.spread-options{grid-template-columns:1fr}.spread-options button{min-height:92px}.result-next{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.online-hero{min-height:auto;padding:86px 20px 72px}.online-hero h1{font-size:41px;line-height:1.25}.online-hero-copy>p:last-of-type{font-size:16px}.online-trust span{font-size:9px}.online-mini-spread{height:240px}.online-mini-spread i{width:112px;height:184px;font-size:48px}.online-mini-spread i:nth-child(1){transform:translateX(-74px) rotate(-11deg)}.online-mini-spread i:nth-child(3){transform:translateX(74px) rotate(11deg)}.reading-shell{width:calc(100% - 24px);margin-top:-28px;margin-bottom:70px}.reading-progress{height:68px;padding:0 14px}.reading-progress span{font-size:9px;gap:5px}.reading-progress span b{width:22px;height:22px}.reading-progress i{margin:0 8px}.reading-step{padding:34px 18px 30px}.reading-head h2{font-size:30px}.question-box{padding:18px}.question-box textarea{font-size:15px}.spread-title{display:grid;gap:4px}.card-deck{grid-template-columns:repeat(5,1fr);gap:7px}.pick-front span{font-size:22px}.pick-front b{font-size:6px}.pick-roles{grid-template-columns:1fr}.pick-roles div+div{border-left:0;border-top:1px solid #d8cfd6}.chosen-summary{grid-template-columns:1fr}.result-cards{grid-template-columns:1fr}.result-card{min-height:150px}.result-card i{margin:20px 0 15px}.reading-result{padding:24px 20px!important}.online-note{width:calc(100% - 40px);grid-template-columns:auto 1fr;padding:22px 0}.online-note>span:last-child{display:none}.reading-actions{align-items:flex-end}.result-actions{align-items:center}.reading-primary{padding-left:16px!important;padding-right:16px!important}}
@media(prefers-reduced-motion:reduce){.online-orbit,.loader-orbit{animation:none}.reading-step{animation:none}.pick-card-inner{transition:none}}

/* Arcana visual upgrade */
.pick-back{overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(160,116,177,.18),transparent 34%),linear-gradient(145deg,#34263b,#17111b 72%)}
.pick-back:before{content:"";position:absolute;inset:9px;border:1px solid rgba(220,193,228,.16);box-shadow:inset 0 0 0 3px rgba(11,8,14,.55)}
.back-orbit{position:absolute;width:58%;aspect-ratio:1;border:1px solid rgba(216,186,224,.34);border-radius:50%;transform:rotate(18deg)}
.back-orbit:before,.back-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(216,186,224,.16)}
.back-orbit:before{inset:18%}.back-orbit:after{inset:34%}.back-star{position:relative;z-index:2;font:400 21px/1 Georgia,serif;color:#c4a1ce;text-shadow:0 0 18px rgba(197,161,207,.35)}
.pick-front{overflow:hidden;display:block;padding:0!important;background:#d8c5a8!important}
.pick-front:before{content:"";position:absolute;inset:8px;border:1px solid rgba(54,36,64,.38);box-shadow:inset 0 0 0 3px rgba(255,255,255,.16);z-index:3;pointer-events:none}
.pick-front:after{content:"";position:absolute;inset:16px;border:1px solid rgba(75,52,84,.18);z-index:3;pointer-events:none}
.pick-front>small{position:absolute;top:12px;left:0;right:0;font:700 6px/1 Georgia,serif;letter-spacing:.14em;color:#533f5c;z-index:4}
.arcana-symbol{position:absolute!important;left:50%;top:46%;transform:translate(-50%,-50%);display:grid!important;place-items:center;width:58%;aspect-ratio:1;border:1px solid rgba(71,46,82,.32);border-radius:50%;font:400 28px/1 Georgia,serif!important;color:#563b63;z-index:2;box-shadow:0 0 0 7px rgba(80,55,91,.045)}
.front-orbit{position:absolute;left:10%;right:10%;top:28%;height:44%;border-top:1px solid rgba(76,50,86,.18);border-bottom:1px solid rgba(76,50,86,.18);border-radius:50%;z-index:1;transform:rotate(-13deg)}
.pick-front>b{bottom:20px!important;font-family:"Noto Serif KR",serif!important;font-size:7px!important;letter-spacing:-.02em!important;z-index:4;color:#3b2c42!important}
.pick-front>em{position:absolute;left:3px;right:3px;bottom:10px;font:600 4.8px/1 Georgia,serif;font-style:normal;letter-spacing:.07em;color:#756173;z-index:4}
.card-theme-moon{background:radial-gradient(circle at 50% 33%,#e9e0c8 0 7%,transparent 8%),linear-gradient(160deg,#c7c4ce,#9d91a6 55%,#b8a88e)!important}.card-theme-star{background:radial-gradient(circle at 50% 38%,rgba(255,250,217,.74),transparent 20%),linear-gradient(155deg,#c5d1cc,#9caeae 55%,#c2af91)!important}.card-theme-sun{background:radial-gradient(circle at 50% 38%,#f1d28f 0 10%,transparent 11%),linear-gradient(150deg,#e6cca0,#caa66d 58%,#d3b982)!important}.card-theme-fire{background:linear-gradient(155deg,#dbc19f,#bd9276 56%,#c8ac87)!important}.card-theme-earth{background:linear-gradient(155deg,#c9c6a8,#a9aa87 56%,#c3ad8c)!important}.card-theme-water{background:linear-gradient(155deg,#bdced0,#95aeb2 56%,#c0aa8b)!important}.card-theme-rose{background:linear-gradient(155deg,#d9beb9,#b99191 56%,#c9ad91)!important}.card-theme-night{background:linear-gradient(155deg,#c0b7c7,#92869c 56%,#b9a383)!important}.card-theme-wheel{background:linear-gradient(155deg,#d5c6a2,#a99672 56%,#c4a984)!important}.card-theme-stone{background:linear-gradient(155deg,#cec8bf,#aaa19c 56%,#c0aa8b)!important}.card-theme-ember{background:linear-gradient(155deg,#c5a29a,#966f70 56%,#b99c80)!important}.card-theme-storm{background:linear-gradient(155deg,#bbb9c0,#85818a 56%,#b5a183)!important}.card-theme-air{background:linear-gradient(155deg,#d4d0c2,#b1b2aa 56%,#c7b18f)!important}.card-theme-world{background:radial-gradient(circle at 50% 45%,rgba(226,213,166,.55),transparent 26%),linear-gradient(155deg,#bec9b5,#98a58e 56%,#c2a987)!important}
.result-card[class*="card-theme-"]{background:#211827!important}.result-card[class*="card-theme-"]:before{content:"";position:absolute;inset:0;opacity:.13;background:radial-gradient(circle at 82% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 72% 28%,#fff 0 1px,transparent 2px),radial-gradient(circle at 88% 39%,#fff 0 1px,transparent 2px);background-size:100% 100%}.result-card i{position:relative;z-index:1}.result-card b,.result-card small{position:relative;z-index:1}
@media(max-width:600px){.arcana-symbol{font-size:22px}.pick-front>b{font-size:6px!important}.pick-front>em{display:none}}

/* Illustrated Major Arcana */
.arcana-art{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;z-index:0;opacity:.96;filter:saturate(.9) contrast(1.02)}
.arcana-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,18,.02) 0%,rgba(15,10,18,.02) 57%,rgba(15,10,18,.62) 100%)}
.pick-front>small,.pick-front>b,.pick-front>em{color:#f5e7c7!important;text-shadow:0 2px 8px rgba(0,0,0,.76)}
.pick-front>small{top:15px!important}.pick-front>b{bottom:27px!important;font-size:8px!important}.pick-front>em{bottom:15px!important;font-size:5.3px!important;color:#e6d3b1!important}
.arcana-symbol{z-index:1!important;opacity:.12!important;border-color:rgba(247,224,181,.2)!important;color:#f6e8c9!important;mix-blend-mode:screen}
.front-orbit{z-index:1!important;border-color:rgba(247,224,181,.16)!important}
.pick-front:before{z-index:5!important;border-color:rgba(231,191,121,.76)!important;box-shadow:inset 0 0 0 2px rgba(20,12,24,.55),0 0 20px rgba(213,169,97,.08)!important}
.pick-front:after{z-index:5!important;border-color:rgba(244,217,169,.26)!important}
.pick-card.chosen .pick-front{box-shadow:0 18px 38px rgba(36,21,42,.28),0 0 0 1px rgba(204,160,96,.22)}
.result-card{min-height:330px!important;padding:22px 22px 20px!important;display:flex;flex-direction:column;justify-content:flex-end;background:#151019!important;border-color:rgba(207,165,101,.28)!important;box-shadow:0 18px 42px rgba(17,10,20,.16)}
.result-card-art{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.95;filter:saturate(.92) contrast(1.03)}
.result-card-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,9,16,.08) 0%,rgba(13,9,16,.14) 50%,rgba(13,9,16,.92) 100%)}
.result-card small{position:absolute!important;left:20px;top:18px;color:#efd59f!important;text-shadow:0 2px 8px rgba(0,0,0,.72)}
.result-card i{position:relative;z-index:2!important;margin:0 0 12px!important;font-size:28px!important;color:#efd7a0!important;text-shadow:0 0 16px rgba(232,196,124,.22)}
.result-card b{position:relative;z-index:2!important;color:#fff4df;font-size:17px!important;text-shadow:0 2px 10px rgba(0,0,0,.72)}
.result-card:after{z-index:1!important;border-color:rgba(226,190,129,.1)!important}
.reading-result{background:linear-gradient(180deg,#fff,#fbf7f1)!important;border-color:#d9c8b0!important;box-shadow:0 18px 45px rgba(57,39,62,.06)!important}
.result-next{background:linear-gradient(110deg,#1b1420,#291b2e)!important;border:1px solid rgba(210,169,103,.18)}
@media(max-width:600px){.result-card{min-height:290px!important}.pick-front>b{font-size:6.5px!important;bottom:19px!important}.pick-front>small{top:10px!important}.pick-front>em{display:none!important}}

/* Immersive dark-luxury online tarot theme */
.online-main{
  position:relative;
  background:
    radial-gradient(circle at 18% 10%,rgba(92,52,112,.20),transparent 22%),
    radial-gradient(circle at 82% 16%,rgba(72,44,95,.18),transparent 24%),
    radial-gradient(circle at 50% 78%,rgba(157,102,64,.07),transparent 30%),
    linear-gradient(180deg,#0d0911 0%,#120b17 42%,#0a070d 100%);
  overflow:hidden;
}
.online-main:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:
    radial-gradient(circle at 12% 14%,rgba(255,240,199,.75) 0 1px,transparent 1.5px),
    radial-gradient(circle at 25% 26%,rgba(255,240,199,.45) 0 1px,transparent 1.5px),
    radial-gradient(circle at 40% 8%,rgba(255,240,199,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 62% 18%,rgba(255,240,199,.52) 0 1px,transparent 1.5px),
    radial-gradient(circle at 76% 9%,rgba(255,240,199,.38) 0 1px,transparent 1.5px),
    radial-gradient(circle at 90% 24%,rgba(255,240,199,.60) 0 1px,transparent 1.5px),
    radial-gradient(circle at 14% 58%,rgba(255,240,199,.35) 0 1px,transparent 1.5px),
    radial-gradient(circle at 31% 70%,rgba(255,240,199,.30) 0 1px,transparent 1.5px),
    radial-gradient(circle at 68% 66%,rgba(255,240,199,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 85% 79%,rgba(255,240,199,.32) 0 1px,transparent 1.5px);
  background-size:520px 420px;
}
.online-hero{
  min-height:620px;
  padding-top:138px;
  padding-bottom:105px;
  border-bottom:1px solid rgba(210,165,103,.13);
  background:
    radial-gradient(circle at 72% 32%,rgba(149,94,175,.24),transparent 22%),
    radial-gradient(circle at 68% 45%,rgba(217,170,106,.06),transparent 20%),
    linear-gradient(115deg,rgba(19,12,24,.98),rgba(36,20,43,.96) 52%,rgba(12,8,16,.98));
}
.online-hero:before{
  content:"";position:absolute;right:8%;top:70px;width:520px;height:520px;border-radius:50%;
  background:
    radial-gradient(circle at 44% 42%,rgba(203,184,222,.15) 0 6%,transparent 7%),
    radial-gradient(circle at 50% 50%,rgba(147,105,171,.16) 0 34%,rgba(90,53,109,.09) 35% 49%,transparent 50%);
  box-shadow:0 0 90px rgba(140,90,164,.12),inset -55px -25px 80px rgba(0,0,0,.28);
  opacity:.72;z-index:0;pointer-events:none;
}
.online-hero-copy>p:last-of-type{color:#cfc2d0!important}.online-trust span{border-color:rgba(218,177,114,.18)!important;background:rgba(255,255,255,.025);color:#d6c7d8!important}.online-trust span:first-child{color:#ead2a5!important}
.online-mini-spread i{border-color:rgba(221,179,110,.7)!important;box-shadow:0 30px 70px rgba(0,0,0,.38),0 0 30px rgba(191,145,81,.08)!important}.online-mini-spread i:nth-child(2){box-shadow:0 38px 85px rgba(0,0,0,.44),0 0 36px rgba(203,164,104,.12)!important}

.reading-shell{
  width:min(1180px,calc(100% - 40px));
  margin-top:-56px;
  background:linear-gradient(180deg,rgba(25,17,29,.96),rgba(17,12,21,.98))!important;
  color:#f5edf5!important;
  border:1px solid rgba(204,160,98,.22)!important;
  box-shadow:0 38px 110px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.015) inset!important;
  backdrop-filter:blur(22px);
}
.reading-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.014),transparent 18%,transparent 82%,rgba(222,172,101,.025));}
.reading-progress{background:rgba(11,8,14,.7)!important;border-bottom-color:rgba(213,169,106,.16)!important}.reading-progress span{color:#8f8292!important}.reading-progress span b{border-color:rgba(211,171,111,.28)!important;color:#bfa88a}.reading-progress span.active{color:#f2e6ed!important}.reading-progress span.active b{background:linear-gradient(135deg,#e9c384,#c9985e)!important;color:#241722!important;border-color:#e3bb7b!important;box-shadow:0 0 24px rgba(220,172,102,.16)}.reading-progress i{background:linear-gradient(90deg,rgba(210,165,100,.08),rgba(210,165,100,.28),rgba(210,165,100,.08))!important}
.reading-step{position:relative}.reading-head small{color:#c99a64!important}.reading-head h2{color:#fff7f1!important}.reading-head p{color:#b7abb9!important}.question-box{background:rgba(13,9,16,.72)!important;border-color:rgba(213,169,107,.18)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}.question-box>span{color:#d7c1dd!important}.question-box textarea{color:#f5edf5!important}.question-box textarea::placeholder{color:#766b79}.question-box>small{color:#827687!important}.spread-title b{color:#f0e7ed}.spread-title span{color:#928694!important}
.spread-options{border-top-color:rgba(210,165,101,.17)!important;border-left-color:rgba(210,165,101,.17)!important}.spread-options button{background:rgba(15,10,18,.74)!important;border-right-color:rgba(210,165,101,.13)!important;border-bottom-color:rgba(210,165,101,.13)!important;color:#ede3ec!important}.spread-options button:hover{background:rgba(37,23,43,.9)!important}.spread-options button.selected{background:linear-gradient(145deg,rgba(68,42,77,.96),rgba(35,22,40,.96))!important;box-shadow:inset 0 0 0 1px rgba(222,176,109,.34),0 12px 30px rgba(0,0,0,.14)}.spread-options button>span{color:#d6ad74!important}.spread-options small{color:#8f8292!important}.spread-options button.selected small{color:#cfc1d0!important}
.reading-primary{background:linear-gradient(135deg,#efc985,#d5a360)!important;color:#251825!important;border:1px solid #f1d09b!important;box-shadow:0 12px 30px rgba(190,139,72,.18)!important}.reading-primary:hover{background:linear-gradient(135deg,#f5d69c,#ddb06d)!important}.reading-back,.reading-home{color:#aa9bac!important}.reading-boundary{color:#776c7b!important}.pick-roles{border-top-color:rgba(211,169,106,.14)!important;border-bottom-color:rgba(211,169,106,.14)!important}.pick-roles div{color:#8d8290!important}.pick-roles div+div{border-left-color:rgba(211,169,106,.11)!important}.pick-roles b{color:#c99b65!important}.pick-roles div.active{color:#f3e8f0!important;background:linear-gradient(90deg,rgba(92,56,102,.34),rgba(92,56,102,.10))!important}.pick-roles div.active span{color:#f3e8f0!important}
.card-deck{padding:10px 2px 18px}.pick-back{border-color:#5c3f66!important;background:radial-gradient(circle at 50% 44%,rgba(154,103,177,.18),transparent 30%),linear-gradient(155deg,#2e1b37,#130d18)!important;box-shadow:inset 0 0 0 5px #120b16,inset 0 0 0 6px rgba(220,173,103,.32),0 14px 28px rgba(0,0,0,.30)!important}.back-orbit{border-color:rgba(223,177,107,.48)!important}.back-star{color:#e1b976!important}.pick-card:hover .pick-card-inner{translate:0 -10px}.pick-card.chosen .pick-card-inner{translate:0 -14px}.chosen-summary>div{border-top-color:rgba(211,169,106,.14)!important}.chosen-summary b{color:#c99c69!important}.chosen-summary span{color:#cfc1d0!important}
.result-question{border-left-color:#c69360!important;color:#c8bbc9!important}.result-cards{gap:20px}.reading-loader{background:rgba(11,8,14,.66)!important;border-color:rgba(211,169,106,.17)!important}.loader-orbit{color:#e0b875!important}.reading-loader b{color:#f5edf5}.reading-loader small{color:#8d8291}.reading-result{background:linear-gradient(180deg,rgba(24,17,27,.96),rgba(17,12,20,.98))!important;border-color:rgba(211,169,106,.22)!important;color:#eadfe8!important;box-shadow:0 22px 60px rgba(0,0,0,.22)!important}.reading-result p{color:#d7cbd7!important}.reading-result p:first-child{color:#f2e6ec!important}.result-next{border-color:rgba(218,170,102,.22)!important;background:linear-gradient(110deg,#17101c,#2b1b31)!important}.result-next small{color:#b99fbe!important}.result-next b{color:#f1e8ef!important}.result-actions{border-top-color:rgba(211,169,106,.14)!important}
.online-note{position:relative;color:#efe6ef!important;border-top-color:rgba(210,165,101,.2)!important;border-bottom-color:rgba(210,165,101,.2)!important}.online-note>span{color:#d4a96d!important}.online-note p{color:#988c9b!important}

/* soft ambient motion */
.online-hero:before{animation:planetDrift 14s ease-in-out infinite alternate}.online-mini-spread{animation:spreadFloat 7.5s ease-in-out infinite}.online-orbit.o1{animation-duration:42s}.online-orbit.o2{animation-duration:31s}.reading-shell{animation:shellRise .7s cubic-bezier(.2,.8,.2,1) both}.pick-back .back-star{animation:cardStarPulse 3.4s ease-in-out infinite}
@keyframes planetDrift{0%{transform:translate3d(0,0,0) scale(.98);opacity:.62}100%{transform:translate3d(-14px,10px,0) scale(1.025);opacity:.82}}
@keyframes spreadFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shellRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cardStarPulse{0%,100%{opacity:.48;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@media(max-width:900px){.reading-shell{margin-top:-38px}.online-hero:before{right:-120px;top:80px;width:430px;height:430px;opacity:.55}.result-cards{gap:14px}}
@media(max-width:600px){.online-main:before{background-size:380px 320px}.online-hero{padding-top:96px;padding-bottom:82px}.online-hero:before{right:-165px;top:120px;width:360px;height:360px;opacity:.42}.reading-shell{width:calc(100% - 18px);margin-top:-24px}.reading-progress{background:rgba(11,8,14,.84)!important}.reading-step{padding-left:16px!important;padding-right:16px!important}.spread-options button{min-height:96px}.pick-roles div+div{border-left:0!important;border-top:1px solid rgba(211,169,106,.11)!important}.result-card{min-height:300px!important}.reading-result{padding:24px 18px!important}.online-note{margin-bottom:72px}}
@media(prefers-reduced-motion:reduce){.online-hero:before,.online-mini-spread,.reading-shell,.pick-back .back-star{animation:none!important}}

/* Conversion + interaction polish */
.online-hero-actions{display:flex;align-items:center;gap:16px;margin-top:30px}.online-start{min-height:52px;border-radius:0!important;background:linear-gradient(135deg,#efc985,#d5a360)!important;color:#251825!important;border:1px solid #f1d09b!important;box-shadow:0 14px 34px rgba(188,136,69,.18)!important}.online-start span{margin-left:9px;transition:transform .2s ease}.online-start:hover span{transform:translateX(4px)}.online-book{color:#d3c5d5;text-decoration:none;font-size:12px;font-weight:700;border-bottom:1px solid rgba(213,197,215,.35);padding:8px 0}.online-book:hover{color:#fff}
.question-examples{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:12px}.question-examples>span{font-size:9px;color:#9e8fa2;letter-spacing:.08em;margin-right:3px}.question-examples button{border:1px solid rgba(210,165,101,.15);background:rgba(255,255,255,.025);color:#a99cac;padding:7px 10px;font:500 10px/1.45 "Noto Sans KR",sans-serif;cursor:pointer;transition:.18s}.question-examples button:hover{color:#f3e9f1;border-color:rgba(210,165,101,.36);background:rgba(105,65,117,.18)}
.card-deck.shuffling .pick-card{animation:dealCard .64s cubic-bezier(.18,.8,.2,1) both;animation-delay:var(--deal-delay)}@keyframes dealCard{0%{opacity:0;transform:translate(0,-22px) scale(.88) rotate(-4deg)}65%{opacity:1;transform:translate(0,4px) scale(1.015) rotate(.5deg)}100%{opacity:1;transform:none}}
.result-card{animation:resultCardReveal .55s cubic-bezier(.2,.8,.2,1) both}.result-card:nth-child(2){animation-delay:.08s}.result-card:nth-child(3){animation-delay:.16s}@keyframes resultCardReveal{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.reading-result{display:grid;gap:0}.reading-result>.reading-intro{font-family:"Noto Serif KR",serif;font-size:17px!important;line-height:1.85!important;color:#f0e4ed!important;padding-bottom:22px;margin-bottom:0!important;border-bottom:1px solid rgba(211,169,106,.14)}.reading-section{padding:24px 0;border-bottom:1px solid rgba(211,169,106,.11)}.reading-section:last-child{border-bottom:0}.reading-section h3{margin:0 0 10px;color:#e8c58d;font-family:"Noto Serif KR",serif;font-size:16px;line-height:1.45}.reading-section p{margin:0!important}.reading-overall{background:rgba(255,255,255,.018);padding-left:18px;padding-right:18px;margin-left:-18px;margin-right:-18px}.reading-question{position:relative;padding-left:48px}.reading-question:before{content:"☾";position:absolute;left:4px;top:22px;color:#d6ac72;font:400 26px/1 Georgia,serif}.reading-question h3{color:#d9b57e}
.result-tools{display:flex;align-items:center;gap:9px;margin-top:18px}.result-tools button{border:1px solid rgba(211,169,106,.18);background:rgba(255,255,255,.025);color:#b5a8b7;padding:9px 12px;font:700 10px/1 "Noto Sans KR",sans-serif;cursor:pointer}.result-tools button:hover{color:#fff;border-color:rgba(211,169,106,.42)}.result-tools span{font-size:10px;color:#d3b37f;margin-left:4px}
@media(max-width:600px){.online-hero-actions{align-items:stretch;flex-direction:column;gap:10px}.online-start{width:100%;justify-content:center}.online-book{align-self:flex-start}.question-examples{align-items:stretch;flex-direction:column}.question-examples>span{margin-bottom:2px}.question-examples button{text-align:left;width:100%}.reading-result>.reading-intro{font-size:15px!important}.reading-section{padding:20px 0}.reading-section h3{font-size:15px}.reading-overall{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}.result-tools{flex-wrap:wrap}.result-tools span{width:100%;margin:2px 0 0}}
@media(prefers-reduced-motion:reduce){.card-deck.shuffling .pick-card,.result-card{animation:none!important}}

/* Layout audit corrections + realistic consultation atmosphere */
.online-hero{
  min-height:620px!important;
  height:auto!important;
  padding:112px max(32px,calc((100vw - 1180px)/2)) 88px!important;
  grid-template-columns:minmax(0,620px) minmax(320px,460px)!important;
  gap:70px!important;
  background:
    linear-gradient(90deg,rgba(12,8,15,.97) 0%,rgba(14,9,17,.89) 37%,rgba(12,8,15,.48) 64%,rgba(12,8,15,.26) 100%),
    linear-gradient(180deg,rgba(13,8,16,.10),rgba(13,8,16,.48)),
    url('/assets/tarot-master-bg.webp') center 46%/cover no-repeat!important;
}
.online-hero:before{display:none!important}
.online-hero:after{opacity:.10!important}
.online-hero-copy{max-width:620px!important}
.online-hero h1{font-size:clamp(50px,4.2vw,68px)!important;line-height:1.18!important;margin:14px 0 20px!important}
.online-hero-copy>p:last-of-type{max-width:570px!important;font-size:16px!important;line-height:1.85!important}
.online-hero-actions{margin-top:24px!important}
.online-trust{margin-top:24px!important;gap:7px!important}
.online-trust span{padding:7px 10px!important}
.online-mini-spread{height:280px!important;align-self:center!important;opacity:.86;transform:translateY(6px) scale(.9)}
.online-mini-spread i{width:142px!important;height:234px!important;box-shadow:0 22px 55px rgba(0,0,0,.38)!important}
.online-mini-spread i:nth-child(1){transform:translateX(-104px) rotate(-10deg)!important}
.online-mini-spread i:nth-child(2){transform:translateY(-10px)!important}
.online-mini-spread i:nth-child(3){transform:translateX(104px) rotate(10deg)!important}

.reading-shell{width:min(1080px,calc(100% - 40px))!important;margin-top:-42px!important}
.reading-progress{height:70px!important;padding-left:34px!important;padding-right:34px!important}
.reading-step{padding:48px 72px 46px!important}
.reading-head{max-width:720px!important;margin-bottom:26px!important}
.reading-head h2{font-size:clamp(31px,3.2vw,42px)!important}
.question-box,.spread-title,.spread-options,.question-examples,.reading-boundary,.reading-actions{max-width:900px;margin-left:auto;margin-right:auto}
.question-box{padding:20px 22px!important}
.question-box textarea{min-height:96px!important}
.question-examples{margin-top:10px!important}
.spread-title{margin-top:30px!important;margin-bottom:12px!important}
.spread-options button{min-height:116px!important}
.reading-actions{margin-top:28px!important}
.reading-boundary{margin-top:16px!important}
.pick-roles,.card-deck,.chosen-summary,.result-cards,.reading-loader,.reading-result,.result-next,.result-tools,.result-actions{max-width:900px;margin-left:auto;margin-right:auto}
.pick-roles{margin-bottom:24px!important}
.card-deck{min-height:210px!important;gap:9px!important}
.result-cards{margin-top:6px!important;margin-bottom:24px!important}
.online-note{width:min(900px,calc(100% - 40px))!important;margin-bottom:80px!important}

@media(max-width:1100px){
 .online-hero{grid-template-columns:minmax(0,1fr) 360px!important;gap:36px!important;padding-left:40px!important;padding-right:40px!important}
 .online-mini-spread{transform:scale(.82)!important}
 .reading-shell{width:min(980px,calc(100% - 32px))!important}
 .reading-step{padding-left:46px!important;padding-right:46px!important}
}
@media(max-width:820px){
 .online-hero{min-height:auto!important;grid-template-columns:1fr!important;gap:28px!important;padding:92px 24px 64px!important;background-position:68% center!important}
 .online-hero:before{display:none!important}
 .online-hero-copy{max-width:640px!important}
 .online-hero h1{font-size:46px!important}
 .online-mini-spread{height:205px!important;margin:0 auto!important;transform:scale(.76)!important;transform-origin:center center!important}
 .reading-shell{margin-top:-24px!important}
 .reading-step{padding:38px 28px 36px!important}
}
@media(max-width:600px){
 .online-hero{padding:84px 20px 54px!important;background:
   linear-gradient(180deg,rgba(11,7,14,.90) 0%,rgba(11,7,14,.80) 52%,rgba(11,7,14,.92) 100%),
   url('/assets/tarot-master-bg.webp') 67% center/cover no-repeat!important}
 .online-hero h1{font-size:38px!important;line-height:1.24!important;margin:12px 0 16px!important}
 .online-hero-copy>p:last-of-type{font-size:14px!important;line-height:1.75!important}
 .online-hero-actions{margin-top:20px!important}
 .online-trust{margin-top:18px!important}
 .online-mini-spread{height:150px!important;transform:scale(.58)!important;margin-top:-6px!important;margin-bottom:-18px!important}
 .reading-shell{width:calc(100% - 20px)!important;margin-top:-14px!important;border-radius:0!important}
 .reading-progress{height:62px!important;padding-left:12px!important;padding-right:12px!important}
 .reading-step{padding:30px 16px 28px!important}
 .reading-head{margin-bottom:22px!important}
 .reading-head h2{font-size:27px!important;line-height:1.35!important}
 .question-box{padding:16px!important}.question-box textarea{min-height:86px!important}
 .spread-title{margin-top:24px!important}
 .spread-options button{min-height:88px!important;padding:16px!important}
 .reading-actions{margin-top:24px!important}
 .online-note{width:calc(100% - 36px)!important;margin-bottom:58px!important}
}

/* Final realism pass */
.online-mini-spread i{
  color:transparent!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border-color:rgba(225,182,112,.7)!important;
}
.online-mini-spread i:nth-child(1){background-image:url('/assets/arcana-premium/moon.webp')!important}
.online-mini-spread i:nth-child(2){background-image:url('/assets/arcana-premium/star.webp')!important}
.online-mini-spread i:nth-child(3){background-image:url('/assets/arcana-premium/sun.webp')!important}
@media(max-width:600px){
 .online-mini-spread{display:flex!important;height:195px!important;margin-top:8px!important}
 .online-mini-spread i{width:100px!important;height:164px!important}
 .online-mini-spread i:nth-child(1){transform:translateX(-68px) rotate(-12deg)!important}
 .online-mini-spread i:nth-child(2){transform:translateY(-8px)!important}
 .online-mini-spread i:nth-child(3){transform:translateX(68px) rotate(12deg)!important}
 .online-hero{padding-bottom:32px!important}
}

/* Scroll-stop ergonomics */
html{scroll-padding-top:88px}
#readingApp{scroll-margin-top:88px}
.reading-step{scroll-margin-top:156px}
@media(max-width:600px){
 html{scroll-padding-top:74px}
 #readingApp{scroll-margin-top:74px}
 .reading-step{scroll-margin-top:136px}
 /* Step 2 must fit inside one mobile viewport after the fixed header. */
 .reading-step[data-step="2"]{padding-top:24px!important;padding-bottom:22px!important}
 .reading-step[data-step="2"] .reading-head{margin-bottom:14px!important}
 .reading-step[data-step="2"] .pick-roles{margin-bottom:14px!important}
 .reading-step[data-step="2"] .card-deck{min-height:190px!important;padding-top:4px!important;padding-bottom:8px!important}
 .reading-step[data-step="2"] .chosen-summary{margin-top:12px!important}
 .reading-step[data-step="2"] .reading-actions{margin-top:16px!important}
}

/* Full 22-card Major Arcana deck — large, tactile cards */
.deck-toolbar{max-width:900px;margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#9f92a3}
.deck-toolbar>span{font:700 10px/1 Georgia,serif;letter-spacing:.12em;color:#cbb07e}.deck-toolbar>span b{font-size:17px;margin-right:6px;color:#efd19a}.deck-toolbar small{font-size:10px;color:#8d8091}
.card-deck{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center!important;
  gap:16px!important;
  width:100%;max-width:900px!important;
  min-height:262px!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  padding:14px 12px 24px!important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(220,177,109,.5) rgba(255,255,255,.04);
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.card-deck::-webkit-scrollbar{height:7px}.card-deck::-webkit-scrollbar-track{background:rgba(255,255,255,.035)}.card-deck::-webkit-scrollbar-thumb{background:rgba(220,177,109,.46);border-radius:999px}
.pick-card{
  flex:0 0 150px!important;
  width:150px!important;
  height:225px!important;
  aspect-ratio:auto!important;
  scroll-snap-align:start;
  border-radius:8px;
}
.pick-card-inner{border-radius:8px}.pick-front,.pick-back{border-radius:8px}
.pick-card:hover .pick-card-inner{translate:0 -9px!important}
.pick-card.chosen .pick-card-inner{translate:0 -8px!important}
.pick-card.used:not(.chosen){opacity:.36!important;filter:saturate(.55)}
.pick-card.chosen{z-index:4}.pick-card.chosen .pick-front{box-shadow:0 22px 46px rgba(0,0,0,.36),0 0 0 2px rgba(235,194,127,.66),0 0 26px rgba(218,174,104,.18)!important}
.arcana-symbol{font-size:42px!important}.pick-front>small{font-size:8px!important}.pick-front>b{font-size:11px!important;bottom:32px!important}.pick-front>em{font-size:7px!important;bottom:18px!important}
.back-star{font-size:28px!important}.back-orbit{width:64%!important}
.reading-step[data-step="2"] .chosen-summary{margin-top:14px!important}
.reading-step[data-step="2"] .reading-actions{margin-top:18px!important}
@media(max-width:900px){
 .card-deck{gap:14px!important;max-width:none!important}
 .pick-card{flex-basis:142px!important;width:142px!important;height:213px!important}
}
@media(max-width:600px){
 .deck-toolbar{margin:0 0 8px;align-items:flex-end}.deck-toolbar small{max-width:190px;text-align:right;line-height:1.45}
 .reading-step[data-step="2"]{padding-left:14px!important;padding-right:14px!important}
 .reading-step[data-step="2"] .card-deck{
   width:calc(100% + 28px)!important;
   max-width:none!important;
   margin-left:-14px!important;margin-right:-14px!important;
   min-height:224px!important;
   gap:12px!important;
   padding:10px 18px 18px!important;
   scroll-padding-inline:18px;
 }
 .pick-card{flex:0 0 132px!important;width:132px!important;height:198px!important}
 .arcana-symbol{font-size:34px!important}.pick-front>small{font-size:7px!important}.pick-front>b{font-size:9px!important;bottom:24px!important}.pick-front>em{display:block!important;font-size:5.5px!important;bottom:13px!important}
 .reading-step[data-step="2"] .pick-roles{margin-bottom:10px!important}
 .reading-step[data-step="2"] .chosen-summary{margin-top:8px!important}
 .reading-step[data-step="2"] .reading-actions{margin-top:12px!important}
}

/* Rich tarot loader motion */
.loader-sigil{position:relative;width:104px;height:104px;margin:0 auto 20px;filter:drop-shadow(0 0 16px rgba(221,177,109,.12))}
.sigil-ring{position:absolute;inset:3px;border:1px solid rgba(225,184,116,.34);border-radius:50%;animation:sigilOrbit 7s linear infinite}
.sigil-ring:before,.sigil-ring:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#e7c68f;box-shadow:0 0 10px rgba(231,198,143,.55)}
.sigil-ring:before{left:50%;top:-3px;transform:translateX(-50%)}
.sigil-ring:after{right:-3px;top:50%;transform:translateY(-50%)}
.sigil-ring-inner{inset:17px;border-style:dashed;border-color:rgba(201,159,212,.25);animation-duration:5.2s;animation-direction:reverse}
.sigil-ring-inner:before,.sigil-ring-inner:after{display:none}
.sigil-moon,.sigil-star,.sigil-sun,.sigil-core{position:absolute;display:grid;place-items:center;font-family:Georgia,serif;color:#e4c58c;text-shadow:0 0 12px rgba(228,197,140,.24);font-style:normal}
.sigil-moon{left:4px;top:40px;font-size:24px;animation:sigilFloatMoon 3.2s ease-in-out infinite}
.sigil-star{left:50%;top:-1px;font-size:17px;transform:translateX(-50%);animation:sigilTwinkle 1.9s ease-in-out infinite}
.sigil-sun{right:3px;bottom:17px;font-size:21px;animation:sigilFloatSun 3.8s ease-in-out infinite}
.sigil-core{inset:0;margin:auto;width:46px;height:46px;border:1px solid rgba(231,196,138,.22);border-radius:50%;font-size:21px;color:#f0d6a5;animation:sigilCore 2.8s ease-in-out infinite}
.reading-loader b{font-size:16px!important;letter-spacing:-.02em}.reading-loader small{margin-top:8px!important}
@keyframes sigilOrbit{to{transform:rotate(360deg)}}
@keyframes sigilFloatMoon{0%,100%{transform:translateY(2px) rotate(-7deg);opacity:.64}50%{transform:translateY(-7px) rotate(4deg);opacity:1}}
@keyframes sigilFloatSun{0%,100%{transform:translateY(-1px) scale(.94);opacity:.62}50%{transform:translateY(5px) scale(1.07);opacity:1}}
@keyframes sigilTwinkle{0%,100%{opacity:.34;transform:translateX(-50%) scale(.82) rotate(0deg)}50%{opacity:1;transform:translateX(-50%) scale(1.22) rotate(24deg)}}
@keyframes sigilCore{0%,100%{transform:scale(.9) rotate(0deg);box-shadow:0 0 0 rgba(228,193,133,0)}50%{transform:scale(1.08) rotate(18deg);box-shadow:0 0 25px rgba(228,193,133,.13)}}
@media(max-width:600px){.loader-sigil{width:92px;height:92px;margin-bottom:16px}.sigil-moon{font-size:21px;top:34px}.sigil-sun{font-size:19px}.sigil-core{width:42px;height:42px}.reading-loader b{font-size:15px!important}}
@media(prefers-reduced-motion:reduce){.sigil-ring,.sigil-moon,.sigil-star,.sigil-sun,.sigil-core{animation:none!important}}

/* =========================================================
   FINAL RESPONSIVE FOUNDATION
   One mobile gutter, no negative-width hacks, 320px+ safe
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,textarea,select{max-width:100%}

@media(max-width:600px){
  :root{--m-gutter:16px}

  /* One horizontal alignment line across the whole page */
  header.top{padding-left:var(--m-gutter)!important;padding-right:var(--m-gutter)!important}
  .online-hero{padding-left:var(--m-gutter)!important;padding-right:var(--m-gutter)!important}
  .online-hero-copy{width:100%!important;max-width:none!important}
  .online-note{width:calc(100% - (var(--m-gutter) * 2))!important;margin-left:var(--m-gutter)!important;margin-right:var(--m-gutter)!important}

  /* Reading surface becomes true full-width; content itself owns the 16px gutter. */
  .reading-shell{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    border-left:0!important;
    border-right:0!important;
  }
  .reading-progress{width:100%!important;padding-left:var(--m-gutter)!important;padding-right:var(--m-gutter)!important}
  .reading-step,
  .reading-step[data-step="2"]{
    width:100%!important;
    padding-left:var(--m-gutter)!important;
    padding-right:var(--m-gutter)!important;
  }

  /* Every functional block shares exactly the same width. */
  .reading-head,
  .question-box,
  .question-examples,
  .spread-title,
  .spread-options,
  .reading-boundary,
  .reading-actions,
  .pick-roles,
  .deck-toolbar,
  .card-deck,
  .chosen-summary,
  .result-cards,
  .reading-loader,
  .reading-result,
  .result-next,
  .result-tools,
  .result-actions{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Remove previous full-bleed negative-margin deck hack. */
  .reading-step[data-step="2"] .card-deck{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:4px!important;
    padding-right:4px!important;
    scroll-padding-inline:4px!important;
  }

  /* Typography scales safely on narrow phones. */
  .online-hero h1{font-size:clamp(34px,10.2vw,40px)!important;line-height:1.24!important;word-break:keep-all}
  .online-hero-copy>p:last-of-type{font-size:14px!important;line-height:1.72!important;word-break:keep-all}
  .reading-head h2{font-size:clamp(25px,7.4vw,29px)!important;line-height:1.34!important;word-break:keep-all}
  .reading-head p,.result-question{word-break:keep-all;overflow-wrap:anywhere}

  /* Touch targets and buttons */
  .btn,.reading-primary,.spread-options button,.question-examples button,.result-tools button{min-height:44px}
  .online-start{width:100%!important;display:flex!important;align-items:center;justify-content:center}
  .reading-actions{gap:10px!important;align-items:center!important}
  .reading-actions .reading-primary{flex:1;min-width:0}
  .result-actions{flex-wrap:wrap!important;gap:8px!important}
  .result-actions>*{min-height:44px;display:flex;align-items:center}

  /* Progress must not squeeze or overflow at 320px. */
  .reading-progress{grid-template-columns:auto minmax(12px,1fr) auto minmax(12px,1fr) auto!important;gap:0!important}
  .reading-progress span{font-size:8.5px!important;gap:4px!important;white-space:nowrap}
  .reading-progress span b{width:22px!important;height:22px!important;flex:0 0 22px}
  .reading-progress i{margin:0 6px!important;min-width:8px}

  /* Forms */
  .question-box{padding:16px!important}
  .question-box textarea{width:100%!important;font-size:16px!important;line-height:1.65!important;min-height:88px!important}
  .question-examples{gap:7px!important}
  .question-examples button{width:100%!important;padding:10px 11px!important}
  .spread-options{grid-template-columns:1fr!important}
  .spread-options button{width:100%!important;padding:15px 16px!important;min-height:84px!important}

  /* Card selection */
  .deck-toolbar{gap:8px!important;align-items:flex-end!important}
  .deck-toolbar small{max-width:58%!important;font-size:9px!important;line-height:1.45!important}
  .pick-card{flex:0 0 132px!important;width:132px!important;height:198px!important}
  .card-deck{gap:12px!important;min-height:224px!important}
  .chosen-summary{grid-template-columns:1fr!important;gap:4px!important}
  .chosen-summary>div{min-height:52px!important;padding:9px 2px!important}

  /* Result / loader / CTA */
  .result-cards{grid-template-columns:1fr!important;gap:12px!important}
  .result-card{width:100%!important;min-height:280px!important}
  .reading-loader{min-height:210px!important}
  .reading-result{padding:22px 16px!important}
  .result-next{padding:20px 16px!important;gap:14px!important}
  .result-next .btn{width:100%!important;justify-content:center}
  .result-tools{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .result-tools button{width:100%!important}
  .result-tools span{grid-column:1/-1;width:100%!important}

  /* Footer also follows phone width instead of desktop 64px padding. */
  footer{width:100%!important;padding-left:var(--m-gutter)!important;padding-right:var(--m-gutter)!important;word-break:keep-all}
}

/* Extra narrow phones */
@media(max-width:350px){
  :root{--m-gutter:14px}
  .online-trust{gap:5px!important}.online-trust span{padding:6px 8px!important;font-size:8px!important}
  .reading-progress{padding-left:10px!important;padding-right:10px!important}
  .reading-progress span{font-size:8px!important}
  .reading-progress span b{width:20px!important;height:20px!important;flex-basis:20px}
  .pick-card{flex-basis:124px!important;width:124px!important;height:186px!important}
  .deck-toolbar small{display:none}
  .reading-actions{flex-wrap:wrap!important}
  .reading-actions>.reading-back{order:2;width:100%;justify-content:flex-start}
  .reading-actions>.reading-primary{order:1;width:100%!important;flex-basis:100%}
}

/* Tablet consistency */
@media(min-width:601px) and (max-width:900px){
  .reading-shell{width:calc(100% - 32px)!important}
  .reading-step{padding-left:32px!important;padding-right:32px!important}
  .online-note{width:calc(100% - 40px)!important}
  .card-deck{width:100%!important;max-width:none!important}
}

/* Mobile step-2 compactness: keep cards + action reachable even at 320px */
@media(max-width:600px){
  .reading-step[data-step="2"] .pick-roles{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    border-top:1px solid rgba(211,169,106,.14)!important;
    border-bottom:1px solid rgba(211,169,106,.14)!important;
    margin-bottom:8px!important;
  }
  .reading-step[data-step="2"] .pick-roles div{
    min-width:0!important;
    padding:8px 5px!important;
    display:grid!important;
    gap:2px!important;
    text-align:center!important;
    justify-items:center!important;
  }
  .reading-step[data-step="2"] .pick-roles div+div{
    border-top:0!important;
    border-left:1px solid rgba(211,169,106,.11)!important;
  }
  .reading-step[data-step="2"] .pick-roles b{font-size:8px!important}
  .reading-step[data-step="2"] .pick-roles span{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .reading-step[data-step="2"] .reading-head{margin-bottom:10px!important}
  .reading-step[data-step="2"] .reading-head p{font-size:12px!important;line-height:1.55!important}
  .reading-step[data-step="2"] .deck-toolbar{margin-bottom:5px!important}
  .reading-step[data-step="2"] .card-deck{min-height:214px!important;padding-top:6px!important;padding-bottom:10px!important}
  .reading-step[data-step="2"] .chosen-summary{margin-top:5px!important}
  .reading-step[data-step="2"] .chosen-summary>div{min-height:42px!important;padding:6px 2px!important}
  .reading-step[data-step="2"] .reading-actions{margin-top:8px!important}
}
@media(max-width:350px){
  .reading-step[data-step="2"]{padding-top:18px!important;padding-bottom:16px!important}
  .reading-step[data-step="2"] .reading-head p{font-size:11px!important}
  .reading-step[data-step="2"] .card-deck{min-height:202px!important}
  .reading-step[data-step="2"] .chosen-summary>div{min-height:38px!important;padding:4px 2px!important}
}

/* Prevent mobile browser scroll anchoring from fighting step-position logic */
.reading-shell,.reading-progress,.reading-step{overflow-anchor:none}
@media(max-width:600px){html,body{overflow-anchor:none}}

/* Mobile 22-card overview: two overlapping rows */
@media(max-width:600px){
  .deck-toolbar small{display:none!important}
  .deck-toolbar{margin-bottom:8px!important}
  .deck-toolbar:after{content:"22장 전체가 한 화면에 펼쳐집니다";font-size:9px;line-height:1.4;color:#8f8393;text-align:right;max-width:56%}
  .reading-step[data-step="2"] .card-deck{
    --card-w:84px;--card-h:126px;--step-x:27px;--row-gap:12px;
    display:grid!important;
    grid-template-columns:repeat(10,var(--step-x)) var(--card-w)!important;
    grid-auto-rows:var(--card-h)!important;
    gap:var(--row-gap) 0!important;
    justify-content:center!important;align-items:start!important;
    width:100%!important;height:calc((var(--card-h)*2) + var(--row-gap))!important;
    min-height:calc((var(--card-h)*2) + var(--row-gap))!important;
    overflow:visible!important;padding:0!important;scroll-snap-type:none!important;scrollbar-width:none!important;touch-action:manipulation
  }
  .reading-step[data-step="2"] .card-deck::-webkit-scrollbar{display:none!important}
  .reading-step[data-step="2"] .pick-card{position:relative!important;width:var(--card-w)!important;height:var(--card-h)!important;flex:none!important;aspect-ratio:auto!important;scroll-snap-align:none!important;transform-origin:50% 100%;z-index:1;transition:transform .2s ease,filter .2s ease,opacity .2s ease}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+1){transform:rotate(-4deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+2){transform:rotate(-3deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+3){transform:rotate(-2deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+4){transform:rotate(-1deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+5){transform:rotate(-.4deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+6){transform:rotate(.4deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+7){transform:rotate(1deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+8){transform:rotate(2deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+9){transform:rotate(3deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+10){transform:rotate(4deg)}
  .reading-step[data-step="2"] .pick-card:nth-child(11n+11){transform:rotate(5deg)}
}
@media(max-width:350px){.reading-step[data-step="2"] .card-deck{--card-w:72px;--card-h:108px;--step-x:22px;--row-gap:10px}.deck-toolbar:after{font-size:8px}}
@media(max-width:600px){
  .reading-step[data-step="2"] .pick-card-inner{border-radius:6px!important}
  .reading-step[data-step="2"] .pick-front,.reading-step[data-step="2"] .pick-back{border-radius:6px!important}
  .reading-step[data-step="2"] .pick-back{box-shadow:inset 0 0 0 3px #120b16,inset 0 0 0 4px rgba(220,173,103,.32),0 7px 14px rgba(0,0,0,.28)!important}
  .reading-step[data-step="2"] .back-orbit{width:58%!important}.reading-step[data-step="2"] .back-star{font-size:19px!important}
  .reading-step[data-step="2"] .pick-front>small{font-size:6px!important;top:7px!important}.reading-step[data-step="2"] .pick-front>b{font-size:7px!important;bottom:17px!important}.reading-step[data-step="2"] .pick-front>em{display:none!important}.reading-step[data-step="2"] .arcana-symbol{font-size:25px!important}
  .reading-step[data-step="2"] .pick-card.chosen{z-index:40!important;transform:translateY(-14px) scale(1.16) rotate(0deg)!important;filter:drop-shadow(0 14px 16px rgba(0,0,0,.34))}
  .reading-step[data-step="2"] .pick-card.chosen .pick-card-inner{translate:0 0!important}
  .reading-step[data-step="2"] .pick-card.used:not(.chosen){opacity:.42!important;filter:saturate(.6)!important}
  .reading-step[data-step="2"] .chosen-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;margin-top:10px!important}
  .reading-step[data-step="2"] .chosen-summary>div{display:block!important;min-height:44px!important;padding:7px 4px!important;text-align:center!important}
  .reading-step[data-step="2"] .chosen-summary b{display:block!important;margin-bottom:3px!important;font-size:8px!important}.reading-step[data-step="2"] .chosen-summary span{display:block!important;font-size:9px!important;line-height:1.35!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .reading-step[data-step="2"] .reading-actions{margin-top:10px!important}
}
@media(max-width:350px){.reading-step[data-step="2"] .pick-card.chosen{transform:translateY(-11px) scale(1.14) rotate(0deg)!important}}

/* Stabilize overlapping deck on every phone width */
@media(max-width:600px){
  .deck-toolbar:after{content:"겹쳐진 카드의 보이는 가장자리를 눌러 3장을 골라보세요"!important;max-width:62%!important}
  .reading-step[data-step="2"] .card-deck{
    --card-w:84px;
    --card-h:126px;
    --step-x:calc((100% - var(--card-w))/10);
    --row-gap:12px;
    grid-template-columns:repeat(10,var(--step-x)) var(--card-w)!important;
    overflow:visible!important;
  }
  .reading-step[data-step="2"] .pick-card,
  .reading-step[data-step="2"] .pick-card:nth-child(n){
    transform:none!important;
  }
  .reading-step[data-step="2"] .pick-card.chosen{
    z-index:50!important;
    transform:translateY(-10px)!important;
    filter:drop-shadow(0 12px 16px rgba(0,0,0,.36))!important;
  }
  .reading-step[data-step="2"] .pick-card.chosen .pick-front{
    box-shadow:0 14px 28px rgba(0,0,0,.34),0 0 0 2px rgba(235,194,127,.72),0 0 20px rgba(218,174,104,.18)!important;
  }
}
@media(max-width:350px){
  .reading-step[data-step="2"] .card-deck{--card-w:72px;--card-h:108px;--step-x:calc((100% - var(--card-w))/10);--row-gap:10px}
  .reading-step[data-step="2"] .pick-card.chosen{transform:translateY(-8px)!important}
}

/* Fix real card width inside overlapping grid: do not inherit global button max-width */
@media(max-width:600px){
  .reading-step[data-step="2"] .pick-card{
    max-width:none!important;
    min-width:var(--card-w)!important;
    width:var(--card-w)!important;
    height:var(--card-h)!important;
    justify-self:start!important;
    overflow:visible!important;
  }
  .reading-step[data-step="2"] .pick-card-inner,
  .reading-step[data-step="2"] .pick-front,
  .reading-step[data-step="2"] .pick-back{width:100%!important;height:100%!important;max-width:none!important}
  .reading-step[data-step="2"] .arcana-symbol{max-width:70%!important;overflow:hidden!important;line-height:1!important}

  /* Never clip functional mobile copy */
  .reading-head h2,.reading-head p,.result-question,.deck-toolbar,.pick-roles span,
  .chosen-summary span,.reading-result,.reading-result p,.reading-section h3,.reading-section p,
  .result-next b,.result-next small,.reading-actions,.result-tools button,.question-examples button,
  .spread-options b,.spread-options small,footer,footer span,footer small{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:keep-all!important;
    white-space:normal!important;
  }
  .reading-actions button,.reading-actions a,.result-tools button{white-space:normal!important;text-align:center!important}
}

/* Mobile deck v3: 8 + 8 + 6 cards, wide exposed tap strips */
@media(max-width:600px){
  .deck-toolbar:after{content:"22장을 한눈에 보고, 보이는 카드 가장자리를 눌러 3장을 골라보세요"!important;max-width:64%!important}
  .reading-step[data-step="2"] .card-deck{
    --card-w:76px;--card-h:114px;--step-x:calc((100% - var(--card-w))/7);--row-gap:8px;
    display:grid!important;
    grid-template-columns:repeat(7,var(--step-x)) var(--card-w)!important;
    grid-auto-rows:var(--card-h)!important;
    gap:var(--row-gap) 0!important;
    height:calc((var(--card-h)*3) + (var(--row-gap)*2))!important;
    min-height:calc((var(--card-h)*3) + (var(--row-gap)*2))!important;
    overflow:visible!important;padding:0!important;justify-content:center!important;
  }
  .reading-step[data-step="2"] .pick-card{
    width:100%!important;min-width:0!important;max-width:none!important;height:var(--card-h)!important;
    justify-self:stretch!important;overflow:visible!important;z-index:1!important;transform:none!important;
  }
  .reading-step[data-step="2"] .pick-card:nth-child(8n),
  .reading-step[data-step="2"] .pick-card:last-child{width:var(--card-w)!important}
  .reading-step[data-step="2"] .pick-card-inner{
    width:var(--card-w)!important;height:var(--card-h)!important;max-width:none!important;pointer-events:none!important;
  }
  .reading-step[data-step="2"] .pick-front,.reading-step[data-step="2"] .pick-back{width:var(--card-w)!important;height:var(--card-h)!important;max-width:none!important}
  .reading-step[data-step="2"] .pick-card.chosen{z-index:50!important;transform:translateY(-7px)!important}
  .reading-step[data-step="2"] .back-star{font-size:17px!important}
  .reading-step[data-step="2"] .arcana-symbol{font-size:22px!important}
  .reading-step[data-step="2"] .pick-front>b{font-size:6.5px!important;bottom:15px!important}
  .reading-step[data-step="2"] .chosen-summary{margin-top:6px!important}
  .reading-step[data-step="2"] .reading-actions{margin-top:6px!important}
}
@media(max-width:350px){
  .reading-step[data-step="2"] .card-deck{--card-w:64px;--card-h:96px;--step-x:calc((100% - var(--card-w))/7);--row-gap:7px}
  .reading-step[data-step="2"] .pick-card.chosen{transform:translateY(-5px)!important}
  .reading-step[data-step="2"] .back-star{font-size:15px!important}
  .reading-step[data-step="2"] .arcana-symbol{font-size:19px!important}
}