@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&display=swap'); :root{--ink:#25232b;--muted:#83818c;--accent:#7856d5;--line:#ecebf0;--paper:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fff;color:var(--ink);font:16px/1.65 'Noto Sans KR',sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #8f69e3;outline-offset:5px}h1,h2,h3,p{margin-top:0}h2{font-size:26px;letter-spacing:-1px;line-height:1.5;margin-bottom:0}h3{line-height:1.55}header{height:88px;max-width:1240px;margin:auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:#433851;font-family:'Gowun Batang',serif;font-weight:700;font-size:29px;letter-spacing:-2px;line-height:1.1}.brand svg{width:35px;height:35px;stroke:#7355a4}.brand small{font:10px Georgia,serif;display:block;letter-spacing:4px;margin-top:7px;text-align:center}.head-actions{display:flex;gap:20px;align-items:center}.head-actions svg{width:22px;height:22px;fill:none;stroke:#302c39;stroke-width:1.5;display:block}.head-actions button{padding:0}.head-actions .login{font-size:13px;color:#77737e;margin-left:6px}header nav{display:flex;gap:35px;font-size:14px;color:#86818d}header nav .selected{font-weight:700;color:#35313b}main{overflow:hidden}.hero-wrap{max-width:1240px;margin:8px auto 0;padding:0 30px}.carousel{height:485px;position:relative;overflow:hidden;border-radius:16px;isolation:isolate;background:#151b13;touch-action:pan-y}.hero-track{height:100%;display:flex;transition:transform .8s cubic-bezier(.22,.68,0,1)}.hero-slide{flex:0 0 100%;height:100%;position:relative;overflow:hidden;color:white}.slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.7}.slide-character{position:absolute;width:58%;right:0;top:0;height:100%;object-fit:cover;object-position:50% 28%;mask-image:linear-gradient(90deg,transparent,#000 27%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 27%)}.slide-shade{position:absolute;inset:0;background:linear-gradient(90deg,#172519e6 0%,#182217b8 33%,transparent 67%),linear-gradient(0deg,#15201485,transparent 40%)}.slide-seoryeong{background:#170e1b}.slide-seoryeong .slide-bg{filter:blur(16px);opacity:.3}.slide-seoryeong .slide-shade{background:linear-gradient(90deg,#1b1127 0%,#211124c9 33%,transparent 75%),linear-gradient(0deg,#160b2260,transparent 50%)}.slide-seoryeong .slide-character{object-position:50% 30%}.slide-tree .slide-bg{opacity:1;object-position:50% 47%}.slide-tree .slide-shade{background:linear-gradient(90deg,#15251fed,transparent 90%)}.slide-copy{position:absolute;top:42px;left:58px;z-index:1}.hero-label{font-size:12px;letter-spacing:1px;display:inline-block;color:#e5e5d5;padding:5px 11px;border:1px solid #ffffff40;border-radius:4px}.character-caption{font-size:13px;margin:20px 0 10px;color:#dbdece}.slide-copy h1{font:38px/1.43 'Gowun Batang',serif;letter-spacing:-1.5px;margin:0 0 17px}.slide-copy h1 em{font-style:normal;color:#f4e5b7}.slide-seoryeong h1 em{color:#edc6ef}.slide-copy>p:not(.character-caption){font-size:13px;color:#d9ded5;line-height:1.9;margin-bottom:18px}.slide-copy>button{font-size:14px;background:#fff;color:#34372e;border-radius:6px;padding:12px 18px;min-width:180px;text-align:left;box-shadow:0 4px 16px #0001}.slide-copy button span{float:right;margin-left:28px}.hero-signature{position:absolute;right:47px;bottom:65px;text-align:right;font:italic 52px Georgia,serif;color:#fff9;letter-spacing:-2px}.hero-signature small{display:block;font:9px Georgia,serif;letter-spacing:3px;color:#fff9;margin-top:8px}.slider-controls{position:absolute;left:58px;right:35px;bottom:19px;display:flex;align-items:center;gap:14px;color:white}.slider-dots{display:flex;gap:7px;margin-right:auto}.slider-dots button{width:6px;height:6px;padding:0;border-radius:20px;background:#ffffff50;transition:width .4s}.slider-dots .active{width:25px;background:#fff}.slider-controls>span{font-size:11px;font-variant-numeric:tabular-nums;color:#fff9;letter-spacing:1px}.slider-controls>button{font-size:23px;line-height:1;padding:4px}.slider-controls #pause-slider{font-size:13px;min-width:25px}.quick-nav{display:flex;justify-content:center;gap:54px;padding:33px 30px 32px;max-width:1180px;margin:auto;border-bottom:1px solid var(--line)}.quick-nav button{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;min-width:75px;font-size:13px}.quick-nav img,.quick-icon{width:58px;height:58px;object-fit:cover;border-radius:50%;object-position:50% 22%}.quick-icon{display:flex;align-items:center;justify-content:center;font-size:30px;background:#f7f2e8;color:#aa8f54}.quick-icon.violet{background:#f0ebfb;color:#8561c7}.quick-icon.pink{background:#fceff4;color:#b97991}.quick-icon.grey{background:#f1f1f5;color:#747180}.section{max-width:1240px;margin:0 auto;padding:56px 30px 0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.section-head p:not(.eyebrow){color:#8d8894;font-size:14px;margin:9px 0 0}.eyebrow{font:11px Georgia,serif;letter-spacing:2px;color:#9a8fa8;margin:0 0 10px}.small-label{font-size:12px;color:#a19aaa}.text-button{color:#89818e;font-size:13px;white-space:nowrap}.worlds{display:grid;grid-template-columns:1fr 1fr;gap:20px}.world{height:320px;border-radius:12px;overflow:hidden;position:relative;color:white;padding:0;text-align:left;background:#121c1a}.world img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%;transition:transform 1s}.world:hover img{transform:scale(1.055)}.world-moon img{object-position:50% 30%;width:70%;left:auto;right:0;mask-image:linear-gradient(90deg,transparent,#000 40%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%)}.world-moon{background:#1d1128}.world-tint{position:absolute;inset:0;background:linear-gradient(90deg,#192718c7,#0b171841),linear-gradient(0deg,#0a1c1ac9,transparent 75%)}.world-moon .world-tint{background:linear-gradient(90deg,#1f142c9c,#1f142c00),linear-gradient(0deg,#1b112bab,transparent 80%)}.world-number{position:absolute;left:30px;top:24px;font:20px Georgia,serif;color:#ffffffb3}.world-number i{font:9px Georgia,serif;letter-spacing:2px;margin-left:12px;font-style:normal}.world-copy{position:absolute;left:30px;right:30px;bottom:23px}.world-copy>small{font-size:12px;color:#e5e3d1}.world-copy>strong{font:34px 'Gowun Batang',serif;display:block;letter-spacing:1px;margin:5px 0 10px}.world-copy>span{font:15px 'Gowun Batang',serif;color:#e4e1d6}.world-copy>b{font-size:13px;font-weight:500;display:flex;justify-content:space-between;border-top:1px solid #ffffff35;margin-top:24px;padding-top:13px}.world-copy i{font-style:normal}.reviews-section{padding-top:47px}.reviews-section h2{font-size:22px}.reviews-section .section-head p{font-size:12px}.review-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.review-card{background:#faf9fc;border:1px solid #f0edf5;border-radius:12px;padding:21px;text-align:left}.review-card .review-top{display:flex;gap:11px;align-items:center}.review-card img{width:35px;height:35px;border-radius:50%;object-fit:cover;object-position:50% 23%}.review-card strong{font-size:12px;display:block;font-weight:500}.review-card small{color:#aaa2b1;font-size:11px}.review-card .stars{margin:13px 0 7px;letter-spacing:2px;color:#bca16a;font-size:13px}.review-card p{font-size:14px;line-height:1.8;margin:0;color:#64606b}.sample-label{font-size:10px;color:#918499;display:inline-block;margin-top:14px;border:1px solid #ddd5e3;border-radius:3px;padding:1px 5px}.filters{display:flex;gap:9px;margin:0 0 24px;overflow:auto;padding-bottom:2px}.filters button{font-size:13px;background:#f5f4f7;border:1px solid transparent;border-radius:100px;padding:8px 19px;white-space:nowrap;color:#837c8b}.filters .active{background:#302838;color:white}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.product{position:relative}.product-open{width:100%;text-align:left;padding:0}.product-image{height:270px;position:relative;overflow:hidden;border-radius:10px;background:#ddd}.product-image img{width:100%;height:100%;object-fit:cover;object-position:50% 27%;transition:transform .6s}.product:hover img{transform:scale(1.04)}.product-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#10131dc9,transparent 65%)}.product-image>span{position:absolute;bottom:20px;left:18px;right:15px;font:21px/1.5 'Gowun Batang',serif;color:#fff;z-index:1;word-break:keep-all}.badge{position:absolute;left:12px;top:12px;z-index:1;font-size:9px;font-weight:400;color:#fff;background:#19162655;border:1px solid #ffffff50;border-radius:3px;padding:3px 7px;letter-spacing:1px}.save{position:absolute;top:12px;right:12px;width:29px;height:29px;z-index:2;color:#fff;font-size:22px;line-height:1;background:#17132650;border-radius:50%}.product small{font-size:11px;color:#99909f;display:block;margin:13px 0 4px}.product h3{font-size:16px;letter-spacing:-.5px;margin:0 0 5px;font-weight:600}.product p{font-size:12px;color:#928a97;line-height:1.7;margin-bottom:8px}.product .price{font-size:11px;color:#7f61a6}.free-banner{max-width:1180px;margin:52px auto 0;height:257px;border-radius:12px;position:relative;overflow:hidden;background:#f3eef9}.free-banner img{position:absolute;right:0;top:0;height:100%;width:50%;object-fit:cover;object-position:50% 24%;mask-image:linear-gradient(90deg,transparent,#000 45%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%)}.free-banner>div{position:relative;z-index:1;margin:29px 38px}.tag{font-size:11px;color:#9972b1}.free-banner h2{font-size:25px;font-weight:600;line-height:1.5;margin:6px 0 8px}.free-banner p{font-size:12px;color:#928499;margin:0 0 18px}.primary{background:#71519e;color:#fff;padding:11px 20px;border-radius:6px;font-size:14px;text-align:center;display:inline-block}.primary:disabled{background:#c7c1cf;cursor:not-allowed}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.article-grid button{text-align:left;padding:0}.article-art{display:block;height:155px;overflow:hidden;border-radius:9px;background:#eee}.article-art img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}.article-grid small{display:block;font-size:11px;color:#8a7e92;margin:14px 0 6px}.article-grid h3{font-size:18px;margin:0;letter-spacing:-.6px}.faq{padding-bottom:56px}.faq h2{font-size:22px;margin-bottom:18px}.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq summary{font-size:14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.faq summary:after{content:'+';color:#a394ae}.faq details[open] summary:after{content:'−'}.faq details p{font-size:14px;color:#8a808d;line-height:1.9;margin:15px 0 0}footer{border-top:1px solid var(--line);background:#fafafa;padding:35px max(30px,calc((100vw - 1180px)/2));color:#a39da6}.footer-links{display:flex;gap:19px;margin:20px 0}footer .brand{font-size:24px;color:#7e7588;display:inline-flex}footer p{font-size:12px;margin:17px 0}.footer-links button{font-size:12px;padding:0}footer>small{font-size:11px}.mobile-nav{display:none}dialog{border:0;padding:0;color:var(--ink);background:#fff;border-radius:16px;width:min(680px,calc(100% - 32px));max-height:90dvh;box-shadow:0 30px 100px #0005}dialog::backdrop{background:#15111dd9;backdrop-filter:blur(8px)}.close{position:sticky;float:right;top:15px;right:15px;margin:15px 15px -51px 0;background:#fffe;color:#342c3e;border-radius:50%;width:36px;height:36px;z-index:8;font-size:26px;line-height:1}dialog .content{padding:45px 38px 35px}dialog h2{font:28px/1.65 'Gowun Batang',serif;margin:0 0 20px;letter-spacing:-.6px}dialog h3{font-size:19px;font-weight:500}dialog p{font-size:15px;line-height:1.9;color:#83788c}.wide{width:100%;margin-top:15px}.outline{border:1px solid #dad3e0;padding:12px 18px;border-radius:6px;font-size:14px}.detail-image{width:100%;height:280px;object-fit:cover;object-position:50% 27%}.detail-row{border-bottom:1px solid #eee9f2;padding:17px 0;font-size:14px;color:#817389}.notice{background:#f7f4f9;border-radius:7px;padding:13px 17px;font-size:12px!important;margin:21px 0}.modal-grid{display:grid;gap:12px}.choice{width:100%;padding:17px;text-align:left;border:1px solid #e3dce9;border-radius:7px;display:flex;gap:10px;align-items:center;font-size:14px}.choice:hover{background:#f7f4fc}.choice small{font-size:12px;color:#8e8398}.leaf-icon{width:1em;height:1em;display:inline-block;vertical-align:-.1em;flex-shrink:0}.search-input{width:100%;padding:14px;background:#faf9fc;border:1px solid #e0dbe7;border-radius:6px;margin:12px 0 20px;color:var(--ink)}.saved-row{display:flex;gap:14px;border-bottom:1px solid #ece8f0;padding:15px 0;width:100%;align-items:center;text-align:left}.saved-row img{width:50px;height:60px;object-fit:cover;border-radius:4px}.saved-row strong{display:block;font-size:14px}.saved-row small{font-size:12px;color:#968aa0}.saved-row>button{margin-left:auto}.subnav{display:flex;gap:10px;margin:20px 0}.subnav button{padding:8px 14px;background:#f6f3fa;border-radius:5px;font-size:13px}.subnav .active{background:#77608f;color:#fff}.empty{text-align:center;padding:25px 0}.muted{font-size:13px!important;color:#a196a9}.result-leaf{font-size:50px;color:#9d84b0;text-align:center;margin:20px 0}.progress{background:#eee9f5;height:3px;margin:20px 0 30px}.progress div{height:100%;background:#9679bd}.result-block{border-top:1px solid #eae4f0;padding-top:20px;margin-top:20px}.result-block h3{font-size:17px}.result-block p{font-size:14px}.tarots{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:25px 0}.tarots button{height:180px;border-radius:8px;border:1px solid #b6a0c9;background:#281d3a;box-shadow:inset 0 0 0 6px #281d3a,inset 0 0 0 7px #a092b6;color:#d7bbd3;font-size:45px;transition:transform .4s}.tarots button:hover{transform:translateY(-7px)}#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#35253d;color:#fff;border-radius:8px;padding:13px 23px;font-size:14px;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s} /* Full-screen visual-novel entrance */ dialog.game-modal{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;background:#0b1010;overflow:hidden;color:white}.game-modal>.close{display:none}.game-stage{position:relative;height:100dvh;min-height:550px;overflow:hidden;background:#0d1510}.game-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 31%;animation:arrive 2s cubic-bezier(.2,.6,.2,1) both}.game-stage.intro .game-image{object-position:50% 47%}.game-stage.moon .game-image{object-position:50% 27%}.game-shade{position:absolute;inset:0;background:linear-gradient(0deg,#061311ee,transparent 67%),linear-gradient(90deg,#0b151377,transparent 50%,#0b151340);pointer-events:none}.moon .game-shade{background:linear-gradient(0deg,#16091fee,transparent 75%),linear-gradient(90deg,#170c2766,transparent 50%,#0b081e55)}.game-hud{position:absolute;z-index:3;top:25px;left:35px;right:35px;display:flex;align-items:center;gap:20px;color:#fff9;font-size:12px;letter-spacing:1px}.game-hud>button{color:white;border:1px solid #fff4;border-radius:30px;font-size:13px;padding:8px 15px;background:#10151044;backdrop-filter:blur(10px)}.game-hud>span{margin-left:auto}.game-stage .scene-title{position:absolute;left:50%;top:25%;transform:translateX(-50%);text-align:center;z-index:2;width:90%;animation:sceneReveal 1.6s ease both;color:#fff}.scene-title small{letter-spacing:5px;font:12px Georgia,serif;color:#eee4c6}.scene-title h2{font:62px 'Gowun Batang',serif;letter-spacing:12px;margin:16px 0;color:white;text-shadow:0 4px 35px #0005}.scene-title p{font:16px 'Gowun Batang',serif;color:#f4ead6;letter-spacing:3px}.game-dialogue{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:min(820px,calc(100% - 60px));z-index:3}.speaker{font-size:15px;letter-spacing:3px;color:#eddfb7;border:1px solid #d7c49080;border-bottom:none;padding:8px 27px;background:#172820d9;display:inline-block;position:relative;margin-left:22px;backdrop-filter:blur(15px)}.moon .speaker{color:#efd1f2;background:#28162ed9;border-color:#c69abe90}.dialogue-panel{background:linear-gradient(110deg,#0b1916e8,#142e26ab);border:1px solid #d7c49080;box-shadow:0 12px 50px #0005,inset 0 0 20px #fff04;backdrop-filter:blur(17px);padding:27px 34px;border-radius:3px;position:relative}.moon .dialogue-panel{background:linear-gradient(110deg,#1c1026f2,#321f3bbb);border-color:#c69abe90}.dialogue-panel:before,.dialogue-panel:after{content:'';position:absolute;width:7px;height:7px;border:1px solid #d8cda3;transform:rotate(45deg);background:#16251e;top:-4px}.dialogue-panel:before{left:-4px}.dialogue-panel:after{right:-4px}.game-dialogue p{font:22px/1.9 'Gowun Batang',serif;color:#fff3dd;margin:0;min-height:84px;white-space:pre-line;letter-spacing:.3px}.game-dialogue .next-line{width:100%;display:flex;justify-content:space-between;align-items:center;color:#d3ccb8;font-size:12px;text-align:right;margin-top:16px;padding:0}.next-line span:last-child{color:#eee0b2;font-size:14px}.game-options{display:grid;gap:10px;margin-top:18px}.game-options button{background:#fff0;border:1px solid #d7c49070;border-radius:2px;color:#f1e5c9;padding:13px 19px;text-align:left;font:16px 'Gowun Batang',serif;transition:background .3s}.game-options button:hover{background:#d7c4901f}.moon .game-options button{border-color:#c69abe90;color:#efdbeb}.fireflies{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.fireflies i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#e9dfa9;box-shadow:0 0 12px 3px #e2d99b77;animation:floatlight var(--duration) infinite ease-in-out;animation-delay:var(--delay)}.moon .fireflies i{background:#d9b0e7;box-shadow:0 0 13px 3px #c693d955}.game-hint{font-size:10px;color:#b3bfa3;text-align:center;margin-top:14px;letter-spacing:2px}.game-stage .scene-number{position:absolute;top:50%;left:34px;writing-mode:vertical-rl;font:10px Georgia,serif;letter-spacing:5px;color:#fff8}.game-stage.outro .game-image{filter:brightness(.7)}@keyframes arrive{from{transform:scale(1.045);opacity:0}to{transform:scale(1);opacity:1}}@keyframes sceneReveal{from{opacity:0;filter:blur(10px);margin-top:15px}to{opacity:1;filter:blur(0);margin-top:0}}@keyframes floatlight{0%,100%{transform:translate(0,0);opacity:.1}50%{transform:translate(20px,-35px);opacity:.85}} @media(max-width:1100px){.quick-nav{gap:38px;margin:0 30px}.free-banner{margin-left:30px;margin-right:30px}.slide-copy h1{font-size:34px}.slide-copy{left:38px}.hero-signature{font-size:42px}.product-image{height:240px}.world{height:300px}} @media(max-width:750px){header{height:73px;padding:0 22px}.brand{font-size:25px}.brand svg{width:30px;height:30px}.brand small{font-size:9px;letter-spacing:3px}header nav{display:none}.head-actions{gap:20px}.head-actions .login{display:none}.hero-wrap{margin-top:0;padding:0 16px}.carousel{height:515px;border-radius:13px}.slide-character{width:100%;mask-image:linear-gradient(90deg,transparent,#000 30%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);object-position:65% 30%;opacity:.95}.slide-bg{opacity:.5}.slide-shade{background:linear-gradient(90deg,#102218c9,transparent 90%),linear-gradient(0deg,#101e15e6,transparent 85%)}.slide-seoryeong .slide-shade{background:linear-gradient(90deg,#1b1025a6,transparent 90%),linear-gradient(0deg,#190d25f2,transparent 90%)}.slide-copy{left:26px;top:31px}.hero-label{font-size:10px;padding:4px 9px}.character-caption{font-size:11px;margin:25px 0 13px}.slide-copy h1{font-size:32px;line-height:1.5;text-shadow:0 2px 20px #0004}.slide-copy>p:not(.character-caption){font-size:12px;margin-top:15px;margin-bottom:23px}.slide-copy>button{font-size:13px;padding:12px 15px;min-width:173px}.hero-signature{font-size:29px;right:25px;bottom:63px;opacity:.6}.hero-signature small{font-size:7px;letter-spacing:1.4px}.slider-controls{left:26px;right:20px;bottom:17px;gap:13px}.quick-nav{padding:26px 0;margin:0 20px;gap:0;justify-content:space-between}.quick-nav button{min-width:0;font-size:11px;gap:9px}.quick-nav img,.quick-icon{width:43px;height:43px}.quick-icon{font-size:25px}.section{padding:38px 20px 0}.section-head{margin-bottom:20px;align-items:start;gap:10px}.section-head h2{font-size:21px;line-height:1.55;letter-spacing:-.9px}.section-head p:not(.eyebrow){font-size:12px;margin-top:7px}.eyebrow{font-size:10px;letter-spacing:1.5px}.small-label{display:none}.worlds{gap:12px}.world{height:298px;border-radius:8px}.world img{object-position:50% 45%}.world-moon img{width:100%;opacity:.8;object-position:48% 30%}.world-tint{background:linear-gradient(0deg,#0d211ce6,transparent 95%)}.world-moon .world-tint{background:linear-gradient(0deg,#180d22f0,transparent 95%)}.world-number{left:16px;top:18px;font-size:18px}.world-number i{display:block;font-size:7px;letter-spacing:1px;margin:5px 0 0}.world-copy{left:16px;right:16px;bottom:17px}.world-copy>small{font-size:10px;word-break:keep-all}.world-copy>strong{font-size:27px;margin-top:7px}.world-copy>span{font-size:12px;display:block;word-break:keep-all;line-height:1.7}.world-copy>b{font-size:12px;margin-top:20px;padding-top:13px}.reviews-section .section-head{display:block}.reviews-section h2{font-size:20px}.reviews-section .text-button{padding:0;font-size:12px;margin-top:12px}.review-cards{display:flex;gap:12px;overflow:auto;margin-right:-20px;padding-right:20px;padding-bottom:5px;scroll-snap-type:x mandatory}.review-card{flex:0 0 82%;padding:20px;scroll-snap-align:start}.review-card p{font-size:14px}.review-card strong{font-size:12px}.text-button{font-size:12px;align-self:center}.filters{gap:7px;margin-bottom:21px}.filters button{font-size:12px;padding:7px 16px}.product-grid{grid-template-columns:repeat(2,1fr);gap:27px 13px}.product-image{height:240px;border-radius:8px}.product-image>span{font-size:20px;bottom:17px;left:15px}.product h3{font-size:15px;line-height:1.7;word-break:keep-all}.product p{font-size:12px}.product small{font-size:11px}.product .price{font-size:11px}.free-banner{height:255px;margin:37px 20px 0;border-radius:10px}.free-banner img{width:65%;opacity:.7;object-position:55% 24%}.free-banner>div{margin:28px 22px}.free-banner h2{font-size:23px}.free-banner p{font-size:11px;max-width:210px}.free-banner .primary{font-size:12px}.article-grid{display:flex;gap:15px;overflow:auto;margin-right:-20px;padding-right:20px;padding-bottom:5px}.article-grid button{flex:0 0 70%}.article-art{height:158px}.article-grid h3{font-size:17px}.article-grid small{font-size:11px}.faq{padding-bottom:38px}.faq h2{font-size:21px}.faq summary{font-size:13px}.faq details p{font-size:13px}footer{padding:30px 22px 100px}.mobile-nav{position:fixed;display:flex;justify-content:space-around;align-items:center;bottom:0;left:0;right:0;height:70px;padding-bottom:env(safe-area-inset-bottom);background:#fffffff5;backdrop-filter:blur(10px);z-index:5;border-top:1px solid var(--line)}.mobile-nav a,.mobile-nav button{display:flex;flex-direction:column;align-items:center;font-size:24px;line-height:1.1;min-width:60px;color:#8e8597}.mobile-nav a:first-child{color:#71519e}.mobile-nav span{font-size:10px;margin-top:6px}.content .eyebrow{font-size:11px}dialog .content{padding:43px 23px 30px}dialog h2{font-size:25px}.detail-image{height:230px}.tarots{gap:12px}.tarots button{height:155px}#toast{bottom:88px;max-width:92%;width:max-content;font-size:12px;text-align:center}.game-hud{top:20px;left:20px;right:20px;gap:10px}.game-hud>button{font-size:12px;padding:7px 12px}.game-hud>span{font-size:10px;letter-spacing:.5px}.game-stage .scene-number{left:16px;font-size:8px}.game-stage .scene-title{top:24%}.scene-title h2{font-size:46px;letter-spacing:7px}.scene-title small{font-size:10px;letter-spacing:3px}.scene-title p{font-size:13px;letter-spacing:1px}.game-dialogue{width:calc(100% - 32px);bottom:27px}.speaker{font-size:13px;padding:7px 22px;margin-left:15px}.dialogue-panel{padding:24px 21px 19px}.game-dialogue p{font-size:18px;line-height:1.85;min-height:100px;letter-spacing:0}.game-options button{font-size:15px;padding:13px 14px}.game-image{object-position:50% 22%}.game-stage.moon .game-image{object-position:50% 15%}.game-stage.intro .game-image{object-position:50% 40%}.game-dialogue .next-line{font-size:10px}.next-line span:last-child{font-size:12px}.game-hint{font-size:9px}.game-options{gap:9px}.game-stage:has(.game-options) .game-dialogue p{min-height:50px}.game-stage:has(.game-options) .game-dialogue{bottom:22px}.game-stage:has(.game-options) .dialogue-panel{padding-top:20px}} @media(max-width:370px){.hero-wrap{padding:0 10px}.slide-copy{left:21px}.slide-copy h1{font-size:28px}.quick-nav{margin:0 15px}.quick-nav img,.quick-icon{width:38px;height:38px}.quick-nav button{font-size:10px}.world-copy{left:13px;right:13px}.product-image{height:210px}.game-dialogue p{font-size:16px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}} /* Keep secondary labels readable on small screens. */ .eyebrow,.hero-label,.character-caption,.hero-signature small,.slider-controls>span,.small-label,.world-copy>small,.world-number i,.review-card small,.sample-label,.product small,.product .price,.badge,.tag,.article-grid small,footer>small,.mobile-nav span{font-size:12px}.quick-nav button,.filters button,.world-copy>b,.product p,.free-banner p,.text-button{font-size:14px}.product small{font-size:12px}.game-hint,.game-stage .scene-number,.game-dialogue .next-line,.game-hud>span{font-size:12px} @media(max-width:750px){.world-number i{font-size:10px;letter-spacing:.5px}.world-copy>small{font-size:12px}.world-copy>span{font-size:13px}.quick-nav button{font-size:12px}.world-copy>b{font-size:13px}.character-caption{font-size:12px}.hero-label{font-size:11px}.hero-signature small{font-size:10px}.product p{font-size:13px}.filters button{font-size:13px}.free-banner p{font-size:12px}.free-banner .primary{font-size:14px}.game-hud>span{font-size:10px}.game-stage .scene-number{font-size:10px}.game-hint{font-size:10px}.game-dialogue .next-line{font-size:12px}.faq summary,.faq details p{font-size:14px}} .lore-card .lore-open{display:block;text-align:left;padding:0;width:100%}.lore-card .product-image>span:not(.lore-play){font-size:23px;right:40px}.lore-card .product-image .lore-play{left:auto;right:15px;bottom:20px;font:22px Georgia,serif;opacity:.85}.lore-card .product-image img{transition:transform 1s}.lore-card:hover img{transform:scale(1.04)}.lore-card small{display:block;margin:15px 0 7px;font-size:12px;color:#998c9f}.lore-card h3{font-size:18px;font-weight:600;margin:0 0 8px}.lore-card p{font-size:14px;line-height:1.8;color:#8a7f91;margin:0;word-break:keep-all;min-height:51px}.lore-cta{display:flex;justify-content:space-between;border-top:1px solid #efeaf3;padding:13px 0 0;margin-top:17px;font-size:13px;color:#80629b}.lore-footnote{text-align:center;font:15px 'Gowun Batang',serif;color:#a598af;margin:29px 0 0}.lore-cover{position:relative;height:270px;background:#19281d;color:white;overflow:hidden}.lore-cover img{position:absolute;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%}.lore-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#15271be8,transparent 95%)}.lore-moon .lore-cover:after{background:linear-gradient(0deg,#291733f5,transparent 100%)}.lore-cover>div{position:absolute;z-index:1;bottom:27px;left:37px;right:30px}.lore-cover small{font:12px Georgia,serif;letter-spacing:2px;color:#ece8d4}.lore-cover h2{color:white;margin:9px 0 4px;font:33px 'Gowun Batang',serif}.lore-cover p{font:15px/1.8 'Gowun Batang',serif;color:#f3e7db;margin:0}.lore-body{padding:29px 38px 35px;background:#fff}.lore-page-head{display:flex;justify-content:space-between;color:#9b8ca8;font-size:12px}.lore-progress{display:flex;gap:5px;margin:13px 0 28px}.lore-progress span{height:2px;flex:1;background:#ece5f1}.lore-progress .filled{background:#a08ba9}.lore-body h3{font:25px 'Gowun Batang',serif;color:#46314e;margin:0 0 25px}.lore-body>p{font:17px/2.1 'Gowun Batang',serif;color:#605367;margin:0 0 21px;word-break:keep-all}.lore-body blockquote{margin:32px 0;padding:23px 20px;border-top:1px solid #e3d8e9;border-bottom:1px solid #e3d8e9;font:20px/1.9 'Gowun Batang',serif;color:#83618f;text-align:center}.lore-navigation{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:30px}.lore-navigation>button{font-size:13px}.lore-navigation>button:disabled{opacity:.25;cursor:default}.lore-next{border-top:1px solid #e8dfee;margin-top:32px;padding-top:21px}.lore-next>span{font-size:12px;color:#a296aa}.lore-next button{width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center;padding:14px 0 0}.lore-next strong{font-size:16px;font-weight:500}.lore-next small{grid-column:1;font-size:12px;color:#a398aa}.lore-next b{grid-column:2;grid-row:1/3;font-weight:400;color:#987fa7} @media(max-width:750px){.lore-section .section-head{display:block}.lore-section .text-button{margin-top:15px;padding:0;font-size:12px}.lore-section .section-head h2{font-size:22px}.lore-card .product-image>span:not(.lore-play){font-size:21px;right:27px}.lore-card .product-image .lore-play{right:10px;font-size:17px;bottom:22px}.lore-card small{font-size:12px}.lore-card h3{font-size:17px}.lore-card p{font-size:13px;min-height:70px}.lore-card .badge{font-size:10px}.lore-footnote{font-size:13px;line-height:1.8;word-break:keep-all}.lore-cover{height:235px}.lore-cover>div{left:24px;bottom:23px;right:20px}.lore-cover h2{font-size:29px}.lore-cover p{font-size:13px;word-break:keep-all}.lore-body{padding:25px 24px 30px}.lore-body h3{font-size:23px}.lore-body>p{font-size:16px;line-height:2}.lore-body blockquote{font-size:18px;padding:20px 5px}.lore-navigation>button{font-size:12px}.lore-navigation .primary{padding:12px 14px}} dialog.roster-modal{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;overflow:auto;background:#0b1616}.roster-modal>.close{display:none}.roster-stage{position:relative;min-height:850px;height:100dvh;overflow:hidden;color:#f7f1dc;background:#112621;isolation:isolate}.roster-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:blur(2px);z-index:-3}.roster-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#0a1c19ed,transparent 80%),linear-gradient(0deg,#0a1718,transparent 55%);z-index:-1}.roster-character{position:absolute;right:2%;top:0;width:67%;height:100%;object-fit:cover;object-position:50% 28%;mask-image:linear-gradient(90deg,transparent,#000 26%),linear-gradient(0deg,transparent,#000 28%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26%);z-index:-2;animation:arrive 1s ease both}.roster-moon{background:#190f24}.roster-moon .roster-vignette{background:linear-gradient(90deg,#180e25ed,transparent 80%),linear-gradient(0deg,#160e21,transparent 55%)}.roster-top{max-width:none;height:100px;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;color:#eee5d4;border-bottom:1px solid #ffffff17;position:relative;z-index:2}.roster-top button{font-size:13px;border:1px solid #ffffff35;border-radius:4px;padding:8px 14px;background:#ffffff04}.roster-top>div{text-align:center}.roster-top span{display:block;font:10px Georgia,serif;letter-spacing:3px;color:#c5b99a}.roster-top strong{display:block;font:23px 'Gowun Batang',serif;margin-top:7px;letter-spacing:3px}.roster-heading{position:absolute;left:7%;top:142px}.roster-kicker{font:11px Georgia,serif;letter-spacing:3px;color:#c9be9a}.roster-heading h2{font:32px/1.5 'Gowun Batang',serif;color:#f7f0db;margin:15px 0 12px}.roster-heading p{color:#c7bd9e;font-size:13px;letter-spacing:2px}.roster-profile{position:absolute;left:7%;top:355px;width:390px;max-width:42%}.roster-role{font-size:13px;color:#c5c8aa;margin:0 0 5px;letter-spacing:2px}.roster-profile h3{font:56px 'Gowun Batang',serif;letter-spacing:3px;margin:0 0 15px;color:#fff5d7}.roster-profile h3 span{font:12px Georgia,serif;letter-spacing:5px;margin-left:22px;color:#d5caa2}.roster-profile blockquote{font:18px/1.7 'Gowun Batang',serif;margin:0 0 18px;color:#f0e4c9;word-break:keep-all}.roster-description{font-size:14px!important;line-height:1.9!important;color:#c0c8b8!important;word-break:keep-all;margin-bottom:22px}.roster-enter{width:100%;display:flex;align-items:center;justify-content:space-between;background:#e8e1c6;color:#263d33;border:1px solid #fff1b7;padding:15px 20px;font-size:15px;box-shadow:0 0 25px #c9bd651c;border-radius:2px}.roster-moon .roster-enter{background:#d9c7e2;color:#362240;border-color:#f6dcff}.roster-moon .roster-profile h3{color:#f0d8f2}.roster-moon .roster-role,.roster-moon .roster-heading p{color:#c9acd7}.roster-bottom{position:absolute;left:53%;right:7%;bottom:49px;z-index:2}.roster-list-label{display:flex;justify-content:space-between;max-width:390px;color:#ddd4bd;font-size:12px;padding-bottom:13px;border-bottom:1px solid #ffffff30;margin-bottom:17px}.roster-list{display:flex;gap:14px;max-width:100%;overflow:auto;padding:3px 3px 10px}.roster-list>button{flex:0 0 84px;padding:0;border:1px solid #c1b796;color:#f4e7c7;position:relative;border-radius:4px;overflow:hidden;background:#192b22}.roster-list>button.selected{box-shadow:0 0 0 2px #dccb87,0 0 25px #dec57922}.roster-list>button img{display:block;width:84px;height:83px;object-fit:cover;object-position:50% 24%}.roster-list>button span{display:block;font-size:12px;padding:4px}.roster-future{display:flex;align-items:center;gap:15px;padding:0 13px;color:#b1b49f;font-size:12px;border:1px dashed #ffffff25;border-radius:4px}.roster-future>span{font-size:29px;color:#bcb38e}.roster-future p{font-size:12px!important;color:#b1b49f!important;margin:0;white-space:nowrap}.roster-hint{font-size:12px!important;color:#a6ad9a!important;margin-top:14px}.roster-moon .roster-list>button{background:#291936}.roster-moon .roster-list>button.selected{box-shadow:0 0 0 2px #c69dd6,0 0 25px #c69dd622} @media(max-width:750px){.roster-stage{min-height:800px;height:100dvh}.roster-top{padding:17px 17px;height:85px}.roster-top button{font-size:11px;padding:7px 9px}.roster-top strong{font-size:18px;letter-spacing:2px}.roster-top span{font-size:8px;letter-spacing:1px}.roster-character{top:55px;right:-12%;width:113%;height:69%;object-position:50% 25%;opacity:.95;-webkit-mask-image:linear-gradient(0deg,transparent,#000 22%,#000 90%,transparent);mask-image:linear-gradient(0deg,transparent,#000 22%,#000 90%,transparent)}.roster-vignette{background:linear-gradient(0deg,#0a1718 28%,transparent 78%),linear-gradient(90deg,#0a1c1933,transparent)}.roster-moon .roster-vignette{background:linear-gradient(0deg,#160e21 28%,transparent 78%),linear-gradient(90deg,#180e2533,transparent)}.roster-heading{left:23px;top:118px}.roster-kicker{font-size:9px;letter-spacing:2px}.roster-heading h2{font-size:25px;margin:9px 0}.roster-heading p{font-size:12px}.roster-profile{left:23px;right:23px;top:auto;bottom:212px;width:auto;max-width:none}.roster-role{font-size:12px}.roster-profile h3{font-size:43px;margin-bottom:9px}.roster-profile h3 span{font-size:10px;letter-spacing:3px;margin-left:15px}.roster-profile blockquote{font-size:15px;margin-bottom:12px}.roster-description{font-size:12px!important;line-height:1.8!important;margin:0 0 16px;max-width:350px}.roster-enter{padding:13px 17px;font-size:14px}.roster-bottom{left:23px;right:23px;bottom:20px}.roster-list-label{margin-bottom:12px;padding-bottom:9px;font-size:11px;max-width:none}.roster-list>button{flex-basis:63px}.roster-list>button img{width:63px;height:59px}.roster-list>button span{font-size:11px;padding:3px}.roster-future{padding:0 14px;gap:10px}.roster-hint{font-size:11px!important;margin:8px 0 0}.roster-list{padding-bottom:5px}.roster-profile .roster-description{max-width:100%}} .world-moon img{width:100%;mask-image:none;-webkit-mask-image:none;object-position:50% 50%}.slide-hilda .slide-character{width:70%;object-position:60% 40%}.slide-seoryeong .slide-character{width:53%;object-position:50% 24%}.slide-seoryeong .slide-bg{filter:none;opacity:.6}.lore-card .product-image img{object-position:50% 35%!important}.roster-stage:not(.roster-moon) .roster-character{object-position:64% 30%} @media(max-width:750px){.slide-hilda .slide-character{width:116%;right:-22%;object-position:58% 30%}.slide-seoryeong .slide-character{width:92%;right:-12%;object-position:50% 23%}.roster-stage:not(.roster-moon) .roster-character{object-position:62% 30%}} /* Background lore webtoons */ dialog.webtoon-modal{width:min(100vw,780px);max-width:100vw;max-height:100dvh;height:100dvh;margin:0 auto;border:0;border-radius:0;padding:0;background:#101119}dialog.webtoon-modal>.close{display:none}.webtoon-reader{background:#f9faf7;color:#252d29;min-height:100%;padding:0}.webtoon-moon{background:#11121a;color:#f5f1ec}.webtoon-toolbar{position:sticky;top:0;z-index:5;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#ffffffed;color:#222;border-bottom:1px solid #ddd;backdrop-filter:blur(16px)}.webtoon-moon .webtoon-toolbar{background:#11121aed;color:#fff;border-color:#333}.webtoon-toolbar button{background:transparent;border:0;color:inherit;font-size:15px;cursor:pointer}.webtoon-toolbar span{font-size:14px}.webtoon-toolbar small{font-size:12px;letter-spacing:2px}.webtoon-title{text-align:center;padding:70px 20px 65px}.webtoon-title>p{font-size:12px;letter-spacing:3px;color:#718576}.webtoon-moon .webtoon-title>p{color:#d4a697}.webtoon-title h2{font-size:clamp(27px,5vw,42px);margin:18px 0 28px;letter-spacing:-1px}.webtoon-title>span{font-size:14px;opacity:.6}.webtoon-scene{margin:0 0 65px}.webtoon-art{position:relative;width:100%;aspect-ratio:var(--crop-ratio);overflow:hidden}.webtoon-art img{position:absolute;width:100%;height:var(--image-height);max-width:none;top:var(--image-top);left:0;object-fit:fill;display:block}.webtoon-caption{max-width:520px;margin:35px auto 0;padding:0 28px;text-align:center;line-height:1.9;font-size:17px;word-break:keep-all}.webtoon-caption p{margin:0}.webtoon-caption.dialogue{background:#fff;color:#242b29;border:1px solid #dce4dd;border-radius:28px;padding:22px 28px;width:calc(100% - 56px);position:relative;box-sizing:border-box}.webtoon-caption.dialogue:before{content:'';position:absolute;top:-11px;left:50%;width:19px;height:19px;background:#fff;border-top:1px solid #dce4dd;border-left:1px solid #dce4dd;transform:rotate(45deg)}.webtoon-caption small{display:block;color:#737d75;font-size:13px;margin-bottom:5px}.webtoon-ending{text-align:center;padding:15px 28px 65px}.webtoon-ending>small{letter-spacing:4px;opacity:.5}.webtoon-ending>p{line-height:1.9;margin:25px 0}.webtoon-ending .lore-next{text-align:left;margin:45px 0 30px}.webtoon-moon .lore-next button{background:#20222e;color:#fff}.webtoon-moon .text-button{color:#eee}@media(max-width:600px){.webtoon-title{padding:55px 20px}.webtoon-caption{font-size:16px}.webtoon-scene{margin-bottom:55px}.webtoon-toolbar{padding:0 16px}} .webtoon-modal #modal-content{padding:0}.webtoon-toolbar{width:100%;max-width:none;margin:0;box-sizing:border-box;gap:10px}.webtoon-caption p{color:inherit;font-size:inherit;line-height:inherit}.webtoon-ending{background:transparent;color:inherit;border:0}.webtoon-ending>p{color:inherit;font-size:16px}.webtoon-reader .lore-next{color:inherit}.webtoon-modal{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.webtoon-toolbar{padding-top:env(safe-area-inset-top);height:calc(60px + env(safe-area-inset-top))}.webtoon-ending{padding-bottom:calc(65px + env(safe-area-inset-bottom))} .webtoon-reader .webtoon-title h2{line-height:1.5}.webtoon-reader .webtoon-toolbar small{white-space:nowrap}.webtoon-reader .webtoon-title p{line-height:1.6}.webtoon-caption.narration{font-family:"Gowun Batang",serif}.webtoon-reader .lore-next button{width:100%;min-width:0}.webtoon-reader button:focus-visible{outline:3px solid #b496e8;outline-offset:4px} .webtoon-art{aspect-ratio:auto;height:0;padding-bottom:var(--panel-padding)}.webtoon-art img{height:auto;top:0;transform:translateY(var(--panel-shift))} /* Concern-led landing */ #readings,#characters{scroll-margin-top:100px}.concern-section{padding-top:38px;padding-bottom:8px}.concern-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.concern-list button{display:grid;grid-template-columns:46px 1fr;text-align:left;align-items:center;background:#f7f6fa;border:1px solid #ece8f0;border-radius:16px;padding:22px 18px;gap:5px 10px;transition:transform .2s,border-color .2s}.concern-list button:hover{transform:translateY(-4px);border-color:#9f83c8}.concern-list button>span{grid-row:span 2;font:32px Georgia;color:#8664a6}.concern-list strong{font-size:16px}.concern-list small{font-size:13px;color:#87808c}.landing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.offering-card{position:relative;border:1px solid #eee9f0;border-radius:18px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s}.offering-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px #29163812}.offering-main{display:block;width:100%;text-align:left;padding:0;background:transparent}.offering-art{height:220px;position:relative;overflow:hidden}.offering-art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .5s}.offering-card:hover img{transform:scale(1.04)}.offering-art>span{position:absolute;left:14px;bottom:14px;background:#ffffffea;padding:6px 12px;border-radius:50px;font-size:12px}.offering-copy{padding:20px}.offering-copy>small{color:#876e9c;font-size:13px}.offering-copy h3{font-size:19px;line-height:1.5;letter-spacing:-.6px;margin:9px 0}.offering-copy p{font-size:14px;color:#827a87;line-height:1.7;min-height:48px}.offering-copy strong{display:block;margin-top:20px;font-size:14px;color:#634479}.offering-card>.save{z-index:2}.how-section{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;border-top:1px solid #eee}.how-section h2{font-size:28px}.how-section p{color:#87808c;line-height:1.8;font-size:15px}.how-section ol{list-style:none;padding:0;margin:0}.how-section li{display:flex;gap:22px;padding:20px 0;border-bottom:1px solid #eee}.how-section li>b{font-size:24px;color:#af98c3}.how-section h3{font-size:17px;margin:0}.how-section li p{margin:7px 0 0}.section-head h2{word-break:keep-all}@media(max-width:750px){.concern-list{grid-template-columns:repeat(2,1fr);gap:10px}.concern-list button{padding:17px 12px;grid-template-columns:30px 1fr;gap:4px 7px}.concern-list button>span{font-size:26px}.concern-list strong{font-size:14px}.concern-list small{font-size:12px}.landing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.offering-art{height:180px}.offering-copy{padding:14px 12px}.offering-copy h3{font-size:16px;min-height:48px}.offering-copy p{font-size:13px;min-height:66px}.offering-copy strong{font-size:13px;margin-top:12px}.how-section{grid-template-columns:1fr;gap:18px}.section-head .small-label{display:none}.concern-section .section-head h2{font-size:23px}.readings-section .filters{overflow:auto;flex-wrap:nowrap}.readings-section .filters button{flex-shrink:0}}@media(max-width:370px){.offering-art{height:150px}.concern-list strong{font-size:13px}}@media(prefers-reduced-motion:reduce){.offering-card,.offering-art img,.concern-list button{transition:none}} .offering-copy strong.coming-soon{color:#89818f}.soon-message{display:inline-block;padding:8px 14px;border-radius:50px;background:#f1edf6;color:#75568d!important;font-weight:700}.primary:disabled{opacity:.55;cursor:not-allowed} dialog.guide-select-modal{width:min(760px,100vw);height:100dvh;max-height:100dvh;max-width:100vw;margin:0 auto;border-radius:0;background:#10251c;color:#faf7e8;overflow:auto}.guide-select-modal>.close{display:none}.guide-select{position:relative;min-height:100%;isolation:isolate}.select-backdrop{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.19}.guide-select:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#10251c55,#10251cf5)}.select-moon{background:#1b1223}.select-moon:after{background:linear-gradient(#1b122355,#1b1223f5)}.select-inner{padding:28px 32px 50px;max-width:640px;margin:auto}.select-back,.select-switch{background:transparent;color:#dedbcc;border:0;padding:12px 0;text-align:left;font-size:14px}.select-inner>.eyebrow{margin-top:34px;color:#d7c897;font-size:12px}.select-inner>h2{font-size:36px;color:#fff;margin-bottom:8px}.select-intro{color:#d1d8cd!important;font-size:16px!important}.guide-options{display:grid;gap:14px;margin:30px 0}.guide-option{width:100%;display:flex;align-items:center;gap:18px;padding:18px;background:#ffffff09;border:1px solid #fff3;border-radius:16px;color:#fff;text-align:left}.guide-option.selected{border-color:#e5d7a3;background:#d6c99912}.guide-option img{width:82px;height:104px;object-fit:cover;object-position:50% 20%;border-radius:9px}.guide-option-copy{display:grid;gap:8px;flex:1}.guide-option-copy small{font-size:12px;color:#c0c4b7}.guide-option-copy strong{font-size:24px;font-weight:500}.guide-option-copy>span{font-size:14px;color:#e1d6b9}.guide-option>b{font-size:20px;color:#e5d7a3}.future{opacity:.62}.future-mark{width:82px;height:82px;display:grid;place-items:center;font-size:35px;border:1px dashed #fff3;border-radius:9px}.select-action{padding-top:4px}.select-action p{color:#eee4c9!important;font-size:15px!important}.select-action .primary{min-height:54px;background:#ede2b9;color:#263528;border:0}.select-action>small{display:block;margin:14px 0 22px;color:#c8cbbf;font-size:13px;line-height:1.7}.select-switch{font-size:13px;text-decoration:underline}@media(max-width:500px){.select-inner{padding:18px 20px 35px}.select-inner>.eyebrow{margin-top:22px}.guide-option{padding:15px;gap:14px}.guide-option img{width:68px;height:90px}.future-mark{width:68px}.guide-option-copy strong{font-size:22px}} /* ── 오늘의 무료 리딩 구획 ── */ .today-section{padding-top:46px}.today-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .today-card{display:grid;grid-template-columns:200px 1fr;border:1px solid #eee9f0;border-radius:18px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s} .today-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px #29163812} .today-art{position:relative;overflow:hidden;min-height:240px} .today-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%} .today-chip{position:absolute;left:12px;bottom:12px;background:#ffffffea;padding:6px 12px;border-radius:50px;font-size:12px;z-index:1} .today-moon .today-art:after,.today-forest .today-art:after{content:'';position:absolute;inset:0} .today-moon .today-art:after{background:linear-gradient(0deg,#1b112340,transparent 60%)} .today-forest .today-art:after{background:linear-gradient(0deg,#15251f40,transparent 60%)} .today-copy{padding:24px 22px;display:flex;flex-direction:column} .today-copy>small{color:#876e9c;font-size:13px} .today-copy h3{font:22px/1.5 'Gowun Batang',serif;letter-spacing:-.6px;margin:8px 0 10px} .today-copy p{font-size:14px;color:#827a87;line-height:1.7;margin:0 0 18px} .today-copy .primary{margin-top:auto} .field-label{display:block;font-size:13px;color:#877f8e;margin:18px 0 -4px} .wish-grid{grid-template-columns:1fr 1fr;gap:10px} .choice.wish{justify-content:flex-start} .choice.wish.selected{border-color:#71519e;background:#f5f0fb;color:#4c3668} .wish-sigil{font:20px 'Gowun Batang',serif;color:#8664a6;width:1.4em;text-align:center} .today-result h2{margin-bottom:18px} .amulet-frame{display:flex;justify-content:center;margin:6px 0 18px} .amulet-svg{width:230px;height:auto;filter:drop-shadow(0 12px 30px #2916381f)} .amulet-line{text-align:center;font:17px/1.8 'Gowun Batang',serif;color:#6b5a76;margin:0 0 20px} .today-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 20px} .today-facts>div{background:#faf9fc;border:1px solid #efeaf3;border-radius:12px;padding:14px 16px} .today-facts small{display:block;font-size:12px;color:#968aa0;margin-bottom:6px} .today-facts strong{font-size:14px;font-weight:500;line-height:1.6;display:flex;align-items:center;gap:8px;word-break:keep-all} .swatch{width:13px;height:13px;border-radius:50%;display:inline-block;border:1px solid #0001;flex-shrink:0} .lucky-card{width:180px;height:270px;margin:4px auto 20px;border-radius:12px;background:#281d3a;border:1px solid var(--lucky,#a092b6);box-shadow:inset 0 0 0 6px #281d3a,inset 0 0 0 7px var(--lucky,#a092b6),0 14px 34px #29163826;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#e8dcf0} .lucky-mark{font-size:44px;color:var(--lucky,#d7bbd3)} .lucky-card b{font:21px 'Gowun Batang',serif;font-weight:400} .lucky-card small{font:9px Georgia,serif;letter-spacing:4px;color:#ffffff70} .lead-box{margin:22px 0 0;padding:20px;border:1px solid #e6dff0;border-radius:14px;background:#faf7fd} .lead-box strong{display:block;font-size:15px;font-weight:600;margin-bottom:6px} .lead-box p{font-size:13px!important;color:#877f8e!important;margin:0 0 14px;line-height:1.7} .lead-row{display:flex;gap:9px;align-items:stretch} .lead-row .search-input{margin:0;flex:1;background:#fff} .lead-row .primary{white-space:nowrap;padding:11px 18px} .lead-box small{display:block;margin-top:11px;font-size:12px;color:#a196a9;line-height:1.6} @media(max-width:750px){ .today-grid{grid-template-columns:1fr;gap:12px} .today-card{grid-template-columns:1fr} .today-art{min-height:190px} .today-copy{padding:18px 16px 20px} .today-copy h3{font-size:20px} .today-section .section-head h2{font-size:23px} .today-facts{grid-template-columns:1fr} .amulet-svg{width:200px} .lead-row{flex-direction:column} .lead-row .primary{width:100%} .wish-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){.today-card{transition:none}} /* ── 회원 / 로그인 ── */ .member-lock{display:block;margin-top:10px;font-size:12px;color:#a196a9;text-align:center} .login-view h2{margin-bottom:14px} .kakao-button{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:#fee500;color:#191600;border-radius:8px;padding:15px 18px;font-size:16px;font-weight:600;margin:24px 0 10px} .kakao-mark svg{width:21px;height:21px;display:block} .inline-link{padding:0;text-decoration:underline;color:#7b619b;font-size:inherit} .my-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 22px} .my-summary>div{background:#faf9fc;border:1px solid #efeaf3;border-radius:12px;padding:15px 14px;text-align:center} .my-summary small{display:block;font-size:12px;color:#968aa0;margin-bottom:7px} .my-summary strong{font-size:17px;font-weight:600} .my-links{display:flex;gap:18px;justify-content:center;margin:22px 0 4px;flex-wrap:wrap} .my-links button{font-size:13px;color:#87808c;text-decoration:underline;padding:0} /* ── 푸터 사업자 정보 ── */ .footer-top{margin-bottom:26px} .biz-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 40px;margin:0 0 20px;padding:22px 0 0;border-top:1px solid #ececf0} .biz-info>div{display:flex;gap:10px;font-size:12px;line-height:1.7} .biz-info dt{color:#b3aeb8;min-width:112px;flex-shrink:0;margin:0} .biz-info dd{margin:0;color:#8c8691;word-break:keep-all} .biz-info dd a{text-decoration:none;color:inherit} .biz-note{font-size:12px!important;color:#aba5b1!important;line-height:1.8;margin:0 0 16px!important;max-width:820px;word-break:keep-all} @media(max-width:750px){.biz-info{grid-template-columns:1fr;gap:8px}.biz-info dt{min-width:96px}.my-summary{gap:8px}.my-summary strong{font-size:15px}.kakao-button{font-size:15px}.mobile-nav a,.mobile-nav button{min-width:52px}} .biz-info .biz-wide{grid-column:1/-1} [hidden]{display:none!important} .review-mark{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-size:17px;flex-shrink:0} .review-mark.review-forest{background:#eef3ea;color:#6f8a5f} .review-mark.review-moon{background:#f2ecf6;color:#8a63a4} .review-card .review-top>div{min-width:0} /* ── 무료 체험 퍼널 ── */ .free-sub{display:block;margin-top:10px;font-size:12px;color:#9a8fa8} .topic-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px} .choice.topic{justify-content:center;text-align:center;font-size:15px} .choice.topic.selected{border-color:#71519e;background:#f5f0fb;color:#4c3668} .free-result .result-block:first-of-type{border-top:0;padding-top:4px;margin-top:0} .free-result .result-block h3{font-size:14px;color:#9a8fa8;font-weight:500;margin:0 0 8px;letter-spacing:.5px} .free-result .result-block p{font-size:16px;line-height:1.9;color:#5d5565;margin:0} .exit-stack{display:grid;gap:10px;margin:30px 0 18px} .exit-stack .outline{width:100%;margin:0} .exit-stack .primary{margin-top:0} .closing-line{text-align:center;font:15px/1.8 'Gowun Batang',serif;color:#8d8496;margin:0 0 22px} .fine-print{font-size:12px!important;color:#b3aeb8!important;line-height:1.7;margin:0;text-align:center} .hook-grid{display:grid;gap:12px;margin:22px 0 18px} .hook-card{text-align:left;padding:20px;border-radius:14px;border:1px solid #e6dff0;background:#faf7fd;display:grid;gap:9px} .hook-card:hover{border-color:#9f83c8} .hook-card strong{font-size:16px;font-weight:600;line-height:1.6;word-break:keep-all} .hook-card small{font-size:13px;color:#7b619b} .hook-moon{background:#f8f4fb}.hook-forest{background:#f6f9f4;border-color:#e2ebdd}.hook-forest small{color:#5f7a53} @media(max-width:750px){.topic-grid{grid-template-columns:1fr}.free-result .result-block p{font-size:15px}.hook-card strong{font-size:15px}} /* ── 부적 / 타로 실제 에셋 ── */ .talisman{position:relative;width:230px;aspect-ratio:260/420;border-radius:4px;overflow:hidden;background:url(assets/talisman-blank-260x420.webp) center/cover no-repeat;box-shadow:0 10px 30px #29163830;margin:0 auto} .tal-glyph{position:absolute;inset:13% 0 30%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:#8d2b24;font-size:34px;line-height:1;font-weight:600;font-family:'Gowun Batang',serif} .tal-glyph small{font-size:14px;letter-spacing:.34em;opacity:.85} .tal-sigil{width:46%;opacity:.9} .tal-name{position:absolute;left:0;right:0;bottom:17%;text-align:center;font-size:11px;letter-spacing:.18em;color:#5d2f21;opacity:.95} .tal-date{position:absolute;left:0;right:0;top:9%;text-align:center;font:9px Georgia,serif;letter-spacing:.2em;color:#6b3a2a;opacity:.55} .tarot-face{position:relative;width:190px;aspect-ratio:180/270;border-radius:9px;overflow:hidden;background:url(assets/tarot-face-blank-180x270.webp) center/cover no-repeat;box-shadow:0 10px 30px #29163830;margin:0 auto} .tf-num{position:absolute;left:0;right:0;top:13%;text-align:center;font:10px Georgia,serif;letter-spacing:.26em;color:#7a6236;opacity:.85} .tf-art{position:absolute;inset:22% 24% 28%;display:flex;align-items:center;justify-content:center} .tf-art svg{width:100%;height:100%;stroke:#8a6f3c;fill:none;stroke-width:1.5} .tf-cap{position:absolute;left:0;right:0;bottom:18%;text-align:center;font-size:11px;letter-spacing:.16em;color:#7a6236} .tarots button{background:url(assets/card-back.webp) center/cover no-repeat;aspect-ratio:180/270;height:auto;box-shadow:0 6px 18px #29163826;border:0;color:transparent;font-size:0} .tarots button:hover{transform:translateY(-7px)} .today-art.art-talisman,.today-art.art-tarot{background:#f7f3ec;display:grid;place-items:center;padding:22px 0} .today-art.art-talisman img,.today-art.art-tarot img{position:static;width:auto;height:100%;max-height:200px;object-fit:contain;filter:drop-shadow(0 8px 22px #0006)} .today-art.art-talisman:after,.today-art.art-tarot:after{display:none} @media(max-width:750px){.talisman{width:200px}.tarot-face{width:170px}.today-art.art-talisman img,.today-art.art-tarot img{max-height:160px}} /* 오늘의 부적 / 오늘의 카드 섹션 썸네일 */ .thumb-tal{display:block;width:124px;aspect-ratio:260/420;background:url(assets/amulet-love.webp) center/contain no-repeat;position:relative} .thumb-tal svg{display:none} .thumb-fan{display:block;position:relative;width:150px;height:170px} .thumb-fan i{position:absolute;left:50%;top:50%;width:88px;aspect-ratio:180/270;background:url(assets/card-back.webp) center/contain no-repeat;border-radius:6px;filter:drop-shadow(0 6px 14px #29163826);transform-origin:50% 90%} .thumb-fan i:nth-child(1){transform:translate(-50%,-50%) rotate(-15deg)} .thumb-fan i:nth-child(2){transform:translate(-50%,-50%) rotate(0deg)} .thumb-fan i:nth-child(3){transform:translate(-50%,-50%) rotate(15deg)} @media(max-width:750px){.thumb-tal{width:100px}.thumb-fan{width:130px;height:150px}.thumb-fan i{width:76px}} /* ── 모바일: 터치 타깃 44px 확보 (시각 크기는 그대로) ── */ @media(max-width:1024px) and (pointer:coarse){ .head-actions button{position:relative} .head-actions button:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)} .slider-dots button{position:relative} .slider-dots button:after{content:'';position:absolute;left:50%;top:50%;width:30px;height:44px;transform:translate(-50%,-50%)} .slider-controls>button{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0} .save{width:38px;height:38px;font-size:20px} .save:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)} .footer-links button,.my-links button,.text-button{min-height:44px;display:inline-flex;align-items:center} .faq summary{min-height:44px;align-items:center} header nav a,.head-actions .login{min-height:44px;display:inline-flex;align-items:center} .inline-link{min-height:auto} } /* ── 실제 부적/타로 아트 ── */ .talisman-art,.tarot-art{margin:0 auto 18px;display:grid;justify-items:center;gap:12px} .talisman-art img{width:236px;height:auto;border-radius:4px;box-shadow:0 14px 34px #29163833;display:block} .tarot-art img{width:196px;height:auto;border-radius:10px;box-shadow:0 14px 34px #29163833;display:block} .talisman-art figcaption,.tarot-art figcaption{font:14px 'Gowun Batang',serif;color:#6b5a76;letter-spacing:.04em;text-align:center} @media(max-width:750px){.talisman-art img{width:200px}.tarot-art img{width:172px}} /* ── 라인업 정리: 출시 예정 카드 구분 ── */ .offering-card.is-soon{background:#fbfafc} .offering-card.is-soon .offering-art img{opacity:.92} .offering-card.is-soon .offering-art:after{content:'곧 출시';position:absolute;left:14px;top:14px;background:#2f2739e0;color:#efe9f5;font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:50px} .offering-card.is-soon:hover{transform:none;box-shadow:none} .offering-card.is-soon .save{display:none} .filters button{letter-spacing:-.2px} /* ── 동적 요소 · 커서 효과 ───────────────────────────────── */ /* 1. 스크롤 등장 */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.68,0,1),transform .7s cubic-bezier(.22,.68,0,1)} .reveal.in{opacity:1;transform:none} .reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s} /* 2. 커스텀 커서 (정밀 포인터 기기 한정) */ @media(hover:hover) and (pointer:fine){ .cursor-on,.cursor-on *{cursor:none!important} #cur{position:fixed;left:0;top:0;width:9px;height:9px;border-radius:50%;background:#7b5aa8;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .25s} #cur-ring{position:fixed;left:0;top:0;width:34px;height:34px;border-radius:50%;border:1px solid #7b5aa899;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.22,.68,0,1),height .3s cubic-bezier(.22,.68,0,1),border-color .3s,opacity .3s,background .3s} body.cur-hot #cur{width:5px;height:5px} body.cur-hot #cur-ring{width:56px;height:56px;border-color:#7b5aa8;background:#7b5aa814} body.cur-dark #cur{background:#e9dfa9} body.cur-dark #cur-ring{border-color:#e9dfa999} body.cur-dark.cur-hot #cur-ring{border-color:#e9dfa9;background:#e9dfa918} body.cur-press #cur-ring{width:24px;height:24px} #cur.hide,#cur-ring.hide{opacity:0} } @media not all and (hover:hover){#cur,#cur-ring{display:none}} /* 3. 반딧불 — 히어로 위에 얕게 */ .hero-spark{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden} .hero-spark i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#efe6c2;box-shadow:0 0 10px 2px #efe6c266;opacity:.1;animation:sparkFloat var(--d) var(--dl) infinite ease-in-out} @keyframes sparkFloat{0%,100%{transform:translate(0,0);opacity:.08}50%{transform:translate(14px,-26px);opacity:.7}} /* 4. 카드 기울기 / 버튼 반응 */ .offering-card,.today-card,.world{transform-style:preserve-3d;will-change:transform} .primary,.outline,.choice,.concern-list button{transition:transform .18s cubic-bezier(.22,.68,0,1),box-shadow .18s,background .2s,border-color .2s} .primary:active,.outline:active,.choice:active{transform:scale(.978)} .primary{position:relative;overflow:hidden} .primary:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff38 48%,transparent 62%);transform:translateX(-120%)} .primary:hover:after{animation:sheen .85s ease} @keyframes sheen{to{transform:translateX(120%)}} /* 5. 섹션 제목 밑줄 그어짐 */ .section-head h2,.today-section h2{position:relative;display:inline-block} .section-head h2:after{content:'';position:absolute;left:0;bottom:-7px;height:2px;width:0;background:linear-gradient(90deg,#9f83c8,#9f83c800);transition:width .8s cubic-bezier(.22,.68,0,1) .2s} .reveal.in .section-head h2:after,.section-head.in h2:after{width:100%} /* 6. 숫자/뱃지 부드러운 등장 */ .today-chip,.badge,.offering-art>span{animation:chipIn .5s cubic-bezier(.22,.68,0,1) both} @keyframes chipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none!important} .hero-spark{display:none} .primary:hover:after{animation:none} #cur,#cur-ring{display:none} .cursor-on,.cursor-on *{cursor:auto!important} .section-head h2:after{transition:none;width:100%} } /* 히어로 picture 래퍼가 레이아웃을 깨지 않게 */ .hero-slide picture{display:contents} .world picture{display:contents} /* ── 고민 선택 추천 1개 ── */ .concern-list button.picked{border-color:#71519e;background:#f4effb} .concern-list button.picked>span{color:#6b4a90} .single-pick{display:block} .pick-card{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;border:1px solid #ece7f1;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 18px 44px #2916380f} .pick-art{position:relative;min-height:340px;overflow:hidden} .pick-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%} .pick-chip{position:absolute;left:16px;bottom:16px;background:#ffffffee;padding:7px 14px;border-radius:50px;font-size:12px;z-index:1} .pick-copy{padding:34px 34px 30px;display:flex;flex-direction:column} .pick-copy h3{font:26px/1.5 'Gowun Batang',serif;letter-spacing:-.6px;margin:2px 0 14px;word-break:keep-all} .pick-why{font-size:15px;line-height:1.85;color:#7d7588;margin:0 0 20px;word-break:keep-all} .pick-points{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:9px} .pick-points li{position:relative;padding-left:20px;font-size:14px;color:#6f6779;line-height:1.7} .pick-points li:before{content:'·';position:absolute;left:7px;top:-1px;color:#a98fd0;font-size:20px} .pick-copy .primary{margin-top:auto} .pick-reset{margin-top:14px;font-size:13px;color:#8f8799;text-decoration:underline;padding:8px 0} @media(max-width:750px){ .pick-card{grid-template-columns:1fr} .pick-art{min-height:210px} .pick-copy{padding:22px 18px 24px} .pick-copy h3{font-size:21px} .pick-why{font-size:14px} } /* 부적/카드 결과 배경도 아트 톤에 맞춤 */ .talisman-art img,.tarot-art img{box-shadow:0 12px 30px #2916381a} /* ── BGM 토글 ── */ #bgm-toggle{position:fixed;right:22px;bottom:22px;z-index:60;width:46px;height:46px;border-radius:50%; background:#1d1726cc;backdrop-filter:blur(12px);border:1px solid #ffffff2e;display:grid;place-items:center; box-shadow:0 8px 24px #0000004d;transition:transform .2s,background .2s,opacity .3s} #bgm-toggle svg{width:21px;height:21px;fill:#f0e9dc;stroke:#f0e9dc;stroke-width:1.6;stroke-linejoin:round} #bgm-toggle:hover{transform:scale(1.07);background:#251d30e6} #bgm-toggle.off svg{fill:#a49bad;stroke:#a49bad} #bgm-toggle[hidden]{display:none} @media(max-width:750px){#bgm-toggle{right:14px;bottom:86px;width:42px;height:42px}#bgm-toggle svg{width:19px;height:19px}} #modal #bgm-toggle{position:fixed;right:22px;bottom:22px;z-index:9999} @media(max-width:750px){#modal #bgm-toggle{right:14px;bottom:20px}} /* ═══ v10 패치 (2026-09-23) ═══ */ /* 후기 섹션 레이아웃 깨짐 수정 — 카드 높이 통일 + 6개 2행 그리드 */ .review-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch} .review-cards>.review-card{display:flex;flex-direction:column;min-width:0;height:100%} .review-card{overflow:hidden;word-break:keep-all;overflow-wrap:anywhere} .review-card .review-top>div{min-width:0;flex:1} .review-card strong{font-size:12.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .review-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .review-card p{flex:1;font-size:14px;line-height:1.8;margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} @media(min-width:751px) and (max-width:1000px){.review-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} /* 후기 전체보기 모달 */ .review-count{font-size:13px!important;color:#9a92a4!important;margin:0 0 16px} .review-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .review-modal-grid .review-card{display:flex;flex-direction:column;padding:17px} .review-modal-grid .review-card p{-webkit-line-clamp:unset;display:block;font-size:13.5px} @media(max-width:620px){.review-modal-grid{grid-template-columns:1fr}} /* 모바일 가로 스크롤 후기 — 높이 정렬 */ @media(max-width:750px){ .review-cards{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;margin-right:-20px;padding-right:20px;padding-bottom:6px;scroll-snap-type:x mandatory;align-items:stretch} .review-cards>.review-card{flex:0 0 82%;max-width:320px;padding:20px;scroll-snap-align:start} .review-card p{-webkit-line-clamp:6} } /* 오늘의 운세 — 운세 설명 블록 */ .today-reading{margin:4px 0 16px;padding:18px 20px;background:#faf8fc;border:1px solid #efeaf4;border-radius:14px} .today-reading-label{display:inline-block;font:11px Georgia,serif;letter-spacing:2px;color:#9a8fa8;margin-bottom:10px} .today-reading p{font-size:15px!important;line-height:1.9!important;margin:0 0 10px;color:#5d5866!important;word-break:keep-all} .today-reading p:last-child{margin-bottom:0} .today-reading-lead{font-weight:500;color:#3d3747!important} /* 행운의 아이템 강조 카드 */ .lucky-item{margin:0 0 18px;padding:20px;border-radius:14px;background:linear-gradient(135deg,#f6f0fb,#fdf7f2);border:1px solid #e9dff2;text-align:center} .lucky-item-label{display:block;font-size:12px;color:#9b7fb8;letter-spacing:1px;margin-bottom:9px} .lucky-item strong{display:block;font:20px/1.6 'Gowun Batang',serif;color:#4a3c5c;letter-spacing:-.5px;word-break:keep-all} .lucky-item p{font-size:13px!important;color:#8b8195!important;margin:10px 0 0!important;line-height:1.7!important} /* 알림 수신 동의 폼 */ .consent-box{margin:22px 0 0;padding:22px 20px;border:1px solid #e6dff0;border-radius:14px;background:#faf7fd} .consent-badge{display:inline-block;font-size:11px;letter-spacing:1px;color:#7b5aa8;background:#efe6fa;border-radius:100px;padding:4px 11px;margin-bottom:12px} .consent-badge.done{color:#4e8a5e;background:#e7f4ea} .consent-box strong{display:block;font-size:15.5px;font-weight:600;line-height:1.65;margin-bottom:7px;word-break:keep-all} .consent-box>p{font-size:13px!important;color:#877f8e!important;margin:0 0 16px!important;line-height:1.75!important} .consent-field{display:block;font-size:12.5px;color:#7e7688;margin-bottom:7px} .consent-box .search-input{margin:0 0 14px;background:#fff} .consent-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 11px;cursor:pointer;line-height:1.65} .consent-check input{margin:3px 0 0;width:17px;height:17px;flex-shrink:0;accent-color:#71519e} .consent-check span{font-size:13px;color:#5f5869;word-break:keep-all} .consent-check b{font-weight:600;color:#71519e} .consent-check small{display:block;font-size:11.5px;color:#9a92a4;margin-top:3px} .consent-box .primary.wide{margin-top:16px} .consent-fine{display:block;font-size:11.5px;line-height:1.7;color:#9c94a6;margin-top:12px;word-break:keep-all} /* ═══ v11 — 마우스 동적 효과 안정화 (2026-09-23) ═══ */ @media(hover:hover) and (pointer:fine){ /* 커스텀 커서는 .cursor-on 일 때만. 모달·키보드 사용 시 즉시 기본 커서 복귀 */ .cursor-on,.cursor-on *{cursor:none} /* 입력 요소는 항상 기본 캐럿/포인터 유지 — 타이핑 위치가 안 보이던 문제 */ .cursor-on input,.cursor-on textarea,.cursor-on select, .cursor-on [contenteditable],.cursor-on .search-input{cursor:auto!important} .cursor-on button,.cursor-on a,.cursor-on summary,.cursor-on label, .cursor-on [role="button"]{cursor:none} /* 모달(top layer) 안에서는 커스텀 커서가 가려지므로 전부 기본 커서 */ dialog,dialog *{cursor:auto!important} dialog button,dialog a,dialog summary,dialog label, dialog [role="button"],dialog .choice,dialog .tarots button{cursor:pointer!important} dialog input,dialog textarea,dialog select{cursor:auto!important} html:not(.cursor-on) #cur,html:not(.cursor-on) #cur-ring{opacity:0} /* 모달이 하나라도 열려 있으면 커서 장식 숨김 */ html:has(dialog[open]) #cur,html:has(dialog[open]) #cur-ring{opacity:0;display:none} html:has(dialog[open]),html:has(dialog[open]) *{cursor:auto} html:has(dialog[open]) button,html:has(dialog[open]) a, html:has(dialog[open]) summary,html:has(dialog[open]) label{cursor:pointer} } /* 등장 애니메이션 중인 카드는 틸트 transform을 받지 않는다 (튀어오름 방지) */ .reveal:not(.in){transform:translateY(22px)!important} .offering-card[data-tilting],.today-card[data-tilting],.world[data-tilting]{transition:transform .12s linear} .offering-card:not([data-tilting]),.today-card:not([data-tilting]),.world:not([data-tilting]){transition:transform .35s cubic-bezier(.22,.68,0,1),box-shadow .2s} /* 반딧불이 클릭을 가로채지 않게 (히어로 버튼 눌림 안 되던 구간) */ .hero-spark,.hero-spark i{pointer-events:none!important} /* 커서 장식이 스크롤바/선택을 방해하지 않도록 */ #cur,#cur-ring{pointer-events:none!important;user-select:none;will-change:transform} @media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){ #cur,#cur-ring{display:none!important} .cursor-on,.cursor-on *{cursor:auto!important} .cursor-on button,.cursor-on a,.cursor-on summary{cursor:pointer!important} } /* ═══ v11 — 후기 교체 대응 (2026-09-23) ═══ */ /* 별점이 항목마다 다름: 채운 별/빈 별 분리 */ .review-card .stars{margin:13px 0 9px;letter-spacing:2px;font-size:13px;line-height:1} .review-card .stars .star-on{color:#c9a961} .review-card .stars .star-off{color:#d9d3e0} /* 닉네임이 주인공, 서비스명은 보조로 */ .review-card strong{font-size:13.5px;font-weight:600;color:#3f3a49;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .review-card small{font-size:11.5px;color:#a8a0b2} /* 길이 편차가 크므로 메인 카드만 클램프, 모달은 전문 노출 */ .review-cards .review-card p{-webkit-line-clamp:6} .review-modal-grid .review-card p{-webkit-line-clamp:unset;display:block} /* 예시 후기 고지 — 눈에 거슬리지 않게, 그러나 읽히게 */ .review-disclosure{font-size:11.5px!important;color:#b0a9b8!important;line-height:1.7;margin:16px 0 0!important;text-align:right} .review-modal-grid+.review-disclosure{text-align:left;margin-top:18px!important;padding-top:14px;border-top:1px solid #efeaf4} @media(max-width:750px){.review-disclosure{text-align:left;margin-top:12px!important}} /* 한 줄짜리 후기가 카드 높이를 무너뜨리지 않게 최소 높이 */ .review-cards .review-card p{min-height:3.6em} /* ═══ v12 (2026-09-23) — 하단 입장 CTA + 동적 요소 확장 ═══ */ /* ── 하단 입장 게이트 ── */ .enter-section{padding-top:58px;padding-bottom:64px} .enter-head{text-align:center;margin-bottom:28px} .enter-head .eyebrow{margin-bottom:12px} .enter-head h2{font-size:27px;display:inline-block} .enter-head>p{color:#8d8894;font-size:14.5px;margin:12px 0 0;line-height:1.8;word-break:keep-all} .enter-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .enter-gate{position:relative;height:290px;border-radius:16px;overflow:hidden;padding:0;text-align:left;color:#fff;background:#121c1a;isolation:isolate; transition:transform .45s cubic-bezier(.22,.68,0,1),box-shadow .45s} .enter-gate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform 1.1s cubic-bezier(.22,.68,0,1),filter .6s} .gate-veil{position:absolute;inset:0;background:linear-gradient(0deg,#0a1c1af2 8%,#0a1c1a4d 55%,transparent 88%);transition:opacity .5s} .gate-moon{background:#1d1128} .gate-moon img{object-position:50% 34%} .gate-moon .gate-veil{background:linear-gradient(0deg,#170d24f5 8%,#170d2455 55%,transparent 88%)} .enter-gate:hover{transform:translateY(-7px);box-shadow:0 26px 54px #2916381f} .enter-gate:hover img{transform:scale(1.07)} .gate-body{position:absolute;left:28px;right:26px;bottom:24px;display:grid;gap:7px;z-index:2} .gate-body small{font:11px Georgia,serif;letter-spacing:2.5px;color:#e4dcc4;opacity:.9} .gate-body strong{font:33px 'Gowun Batang',serif;font-weight:400;letter-spacing:1px;line-height:1.3} .gate-body em{font:14.5px/1.75 'Gowun Batang',serif;font-style:normal;color:#e6e0cf;opacity:.92;word-break:keep-all} .gate-body b{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:500; border-top:1px solid #ffffff38;margin-top:14px;padding-top:13px;letter-spacing:.2px} .gate-body b i{font-style:normal;transition:transform .35s cubic-bezier(.22,.68,0,1)} .enter-gate:hover .gate-body b i{transform:translate(4px,-4px)} .gate-moon .gate-body small{color:#ddc9e8} .gate-moon .gate-body em{color:#e8dcee} .enter-foot{text-align:center;font:14px 'Gowun Batang',serif;color:#9b93a5;margin:24px 0 0} /* 게이트 반딧불 — 호버 시 떠오름 */ .gate-motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .gate-motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f2e8c4; box-shadow:0 0 9px 2px #f2e8c455;opacity:0;transition:opacity .5s} .gate-motes i:nth-child(1){left:14%;bottom:18%} .gate-motes i:nth-child(2){left:31%;bottom:40%} .gate-motes i:nth-child(3){left:52%;bottom:26%} .gate-motes i:nth-child(4){left:68%;bottom:52%} .gate-motes i:nth-child(5){left:82%;bottom:32%} .gate-motes i:nth-child(6){left:44%;bottom:64%} .enter-gate:hover .gate-motes i{opacity:.85;animation:moteRise 3.4s ease-in-out infinite} .enter-gate:hover .gate-motes i:nth-child(2){animation-delay:-.7s} .enter-gate:hover .gate-motes i:nth-child(3){animation-delay:-1.4s} .enter-gate:hover .gate-motes i:nth-child(4){animation-delay:-2.1s} .enter-gate:hover .gate-motes i:nth-child(5){animation-delay:-2.8s} .enter-gate:hover .gate-motes i:nth-child(6){animation-delay:-1.1s} .gate-moon .gate-motes i{background:#e8cdf2;box-shadow:0 0 9px 2px #e8cdf255} @keyframes moteRise{0%{transform:translateY(0);opacity:.15}45%{opacity:.9}100%{transform:translateY(-52px);opacity:0}} @media(max-width:750px){ .enter-section{padding-top:40px;padding-bottom:44px} .enter-head h2{font-size:23px} .enter-head>p{font-size:13.5px} .enter-grid{grid-template-columns:1fr;gap:12px} .enter-gate{height:238px;border-radius:12px} .gate-body{left:20px;right:18px;bottom:19px} .gate-body strong{font-size:28px} .gate-body em{font-size:13px} .gate-body b{font-size:13px;margin-top:12px;padding-top:11px} .enter-foot{font-size:13px} } /* ── 동적 요소 확장 ── */ /* 1. 히어로 제목 줄별 등장 */ .slide-copy h1{overflow:hidden} .hero-slide.is-active .slide-copy>*{animation:heroRise .75s cubic-bezier(.22,.68,0,1) both} .hero-slide.is-active .slide-copy>*:nth-child(1){animation-delay:.05s} .hero-slide.is-active .slide-copy>*:nth-child(2){animation-delay:.13s} .hero-slide.is-active .slide-copy>*:nth-child(3){animation-delay:.21s} .hero-slide.is-active .slide-copy>*:nth-child(4){animation-delay:.29s} .hero-slide.is-active .slide-copy>*:nth-child(5){animation-delay:.37s} @keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* 2. 히어로 배경 느린 줌 (Ken Burns) */ .hero-slide.is-active .slide-bg{animation:kenburns 15s ease-out both} @keyframes kenburns{from{transform:scale(1.005)}to{transform:scale(1.075)}} /* 3. 스크롤 진행 바 */ #scroll-bar{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,#8664a6,#c2a3d8);z-index:70;pointer-events:none;transition:opacity .3s} #scroll-bar.idle{opacity:0} /* 4. 헤더 축소 */ header{transition:height .35s cubic-bezier(.22,.68,0,1),box-shadow .35s,background .35s} body.scrolled header{position:sticky;top:0;z-index:40;height:68px;background:#fffffff2;backdrop-filter:blur(14px);box-shadow:0 1px 0 #00000010} body.scrolled .brand{font-size:25px;transition:font-size .35s} .brand{transition:font-size .35s} /* 5. 섹션 제목 글자 등장 */ .split-char{display:inline-block;opacity:0;transform:translateY(14px) rotate(2deg); transition:opacity .5s cubic-bezier(.22,.68,0,1),transform .5s cubic-bezier(.22,.68,0,1)} .in .split-char,.split-done .split-char{opacity:1;transform:none} /* 6. 숫자 카운트업 / 통계 */ .pulse-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7ec08a;margin-right:7px; box-shadow:0 0 0 0 #7ec08a80;animation:pulseDot 2.2s ease-out infinite;vertical-align:1px} @keyframes pulseDot{70%{box-shadow:0 0 0 9px #7ec08a00}100%{box-shadow:0 0 0 0 #7ec08a00}} /* 7. 카드 호버 광택 스윕 */ .offering-card,.today-card,.enter-gate,.review-card{position:relative} .offering-card:after,.today-card:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3; background:linear-gradient(115deg,transparent 38%,#ffffff42 50%,transparent 62%); transform:translateX(-130%);opacity:0} .offering-card:hover:after,.today-card:hover:after{opacity:1;animation:cardSheen .9s cubic-bezier(.22,.68,0,1)} @keyframes cardSheen{to{transform:translateX(130%)}} /* 8. 고민 버튼 아이콘 회전 */ .concern-list button>span{transition:transform .5s cubic-bezier(.22,.68,0,1),color .3s} .concern-list button:hover>span{transform:rotate(-12deg) scale(1.16);color:#6b4a90} /* 9. FAQ 열림 부드럽게 */ .faq details p{animation:faqOpen .4s cubic-bezier(.22,.68,0,1) both} @keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .faq summary:after{transition:transform .3s,color .3s} .faq details[open] summary:after{transform:rotate(180deg)} /* 10. 맨 위로 버튼 */ #to-top{position:fixed;right:22px;bottom:78px;z-index:59;width:44px;height:44px;border-radius:50%; background:#ffffffee;border:1px solid #e8e2ef;color:#6d5a86;font-size:18px;line-height:1; box-shadow:0 8px 24px #29163818;display:grid;place-items:center; opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s,transform .3s,visibility .3s,background .2s} #to-top.show{opacity:1;visibility:visible;transform:none} #to-top:hover{background:#f6f2fb;transform:translateY(-3px)} @media(max-width:750px){#to-top{right:14px;bottom:140px;width:40px;height:40px}} /* 11. 이미지 로드 페이드 */ img[data-fade]{opacity:0;transition:opacity .6s ease} img[data-fade].loaded{opacity:1} /* 12. 퀵내비 아이콘 반응 */ .quick-nav button img,.quick-nav .quick-icon{transition:transform .4s cubic-bezier(.22,.68,0,1),box-shadow .3s} .quick-nav button:hover img,.quick-nav button:hover .quick-icon{transform:translateY(-5px) scale(1.06);box-shadow:0 10px 22px #29163826} @media(prefers-reduced-motion:reduce){ .hero-slide.is-active .slide-copy>*,.hero-slide.is-active .slide-bg, .faq details p,.enter-gate:hover .gate-motes i{animation:none!important} .split-char{opacity:1!important;transform:none!important;transition:none!important} .enter-gate,.enter-gate img,.offering-card:after,.today-card:after,#to-top,header{transition:none!important} .offering-card:hover:after,.today-card:hover:after{animation:none;opacity:0} #scroll-bar{display:none} } /* v12-fix: 밝은 숲 이미지 위 텍스트 대비 확보 */ .gate-veil{background:linear-gradient(0deg,#07170fff 4%,#07170fd9 32%,#07170f70 62%,#07170f17 100%)} .gate-moon .gate-veil{background:linear-gradient(0deg,#120920ff 4%,#120920d9 32%,#12092070 62%,#12092017 100%)} .gate-body{bottom:26px} .gate-body small{color:#efe8d2;opacity:1;text-shadow:0 1px 8px #00000066} .gate-body strong{text-shadow:0 2px 14px #00000059} .gate-body em{color:#eee8d9;opacity:1;text-shadow:0 1px 8px #0000004d} .gate-body b{color:#fff;text-shadow:0 1px 8px #00000059} .enter-gate img{filter:saturate(1.02) brightness(.94)} .enter-gate:hover img{filter:saturate(1.08) brightness(1)} /* ═══ v13 (2026-09-23) ═══ */ /* ── 1) 결과 화면 안의 입장 퍼널 ── */ .enter-funnel{margin:26px 0 4px} .funnel-divider{display:flex;align-items:center;gap:14px;margin:0 0 22px;color:#c6b6d6} .funnel-divider i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#e2d9ec,transparent)} .funnel-divider span{font-size:13px;letter-spacing:2px} .funnel-head{text-align:center;margin-bottom:18px} .funnel-head .eyebrow{margin:0 0 9px} .funnel-head h3{font:23px/1.5 'Gowun Batang',serif;font-weight:400;letter-spacing:-.4px;margin:0 0 10px;color:#3f3749} .funnel-lead{font-size:14px!important;line-height:1.85!important;color:#857d90!important;margin:0!important;word-break:keep-all} .funnel-gates{display:grid;grid-template-columns:1fr 1fr;gap:12px} .funnel-gate{position:relative;height:210px;border-radius:14px;overflow:hidden;padding:0;text-align:left;color:#fff;background:#121c1a;isolation:isolate; transition:transform .4s cubic-bezier(.22,.68,0,1),box-shadow .4s} .funnel-gate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%; transition:transform 1s cubic-bezier(.22,.68,0,1),filter .5s;filter:brightness(.92)} .funnel-gate .gate-veil{position:absolute;inset:0;background:linear-gradient(0deg,#07170fff 6%,#07170fd6 34%,#07170f6b 64%,#07170f14 100%)} .funnel-gate.gate-moon{background:#1d1128} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#120920ff 6%,#120920d6 34%,#1209206b 64%,#12092014 100%)} .funnel-gate:hover{transform:translateY(-5px);box-shadow:0 20px 40px #2916381f} .funnel-gate:hover img{transform:scale(1.07);filter:brightness(1)} .funnel-gate .gate-body{position:absolute;left:18px;right:16px;bottom:16px;display:grid;gap:5px;z-index:2} .funnel-gate .gate-body small{font:10px Georgia,serif;letter-spacing:2px;color:#efe8d2;text-shadow:0 1px 8px #00000066} .funnel-gate .gate-body strong{font:25px 'Gowun Batang',serif;font-weight:400;letter-spacing:.5px;line-height:1.3;text-shadow:0 2px 14px #00000059} .funnel-gate .gate-body em{font:12.5px/1.7 'Gowun Batang',serif;font-style:normal;color:#eee8d9;text-shadow:0 1px 8px #0000004d;word-break:keep-all} .funnel-gate .gate-body b{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:500;color:#fff; border-top:1px solid #ffffff3d;margin-top:10px;padding-top:10px;text-shadow:0 1px 8px #00000059} .funnel-gate .gate-body b i{font-style:normal;transition:transform .3s cubic-bezier(.22,.68,0,1)} .funnel-gate:hover .gate-body b i{transform:translate(4px,-4px)} .funnel-gate .gate-motes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .funnel-gate .gate-motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f2e8c4;box-shadow:0 0 8px 2px #f2e8c455;opacity:0} .funnel-gate .gate-motes i:nth-child(1){left:18%;bottom:20%} .funnel-gate .gate-motes i:nth-child(2){left:42%;bottom:44%} .funnel-gate .gate-motes i:nth-child(3){left:66%;bottom:28%} .funnel-gate .gate-motes i:nth-child(4){left:84%;bottom:52%} .funnel-gate:hover .gate-motes i{opacity:.85;animation:moteRise 3.2s ease-in-out infinite} .funnel-gate:hover .gate-motes i:nth-child(2){animation-delay:-.8s} .funnel-gate:hover .gate-motes i:nth-child(3){animation-delay:-1.6s} .funnel-gate:hover .gate-motes i:nth-child(4){animation-delay:-2.4s} .funnel-gate.gate-moon .gate-motes i{background:#e8cdf2;box-shadow:0 0 8px 2px #e8cdf255} .funnel-foot{text-align:center;font:13px 'Gowun Batang',serif;color:#9b93a5;margin:16px 0 0} @media(max-width:600px){ .funnel-gates{grid-template-columns:1fr;gap:10px} .funnel-gate{height:172px} .funnel-gate .gate-body strong{font-size:23px} .funnel-head h3{font-size:21px} } /* ── 2) 모달 안에서도 커스텀 커서 유지 ── */ @media(hover:hover) and (pointer:fine){ /* v11/v12의 "모달에서 커서 끄기" 규칙을 되돌린다 */ html:has(dialog[open]) #cur,html:has(dialog[open]) #cur-ring{opacity:1;display:block} html:has(dialog[open]),html:has(dialog[open]) *{cursor:none} dialog,dialog *{cursor:none!important} /* 입력 요소만 기본 캐럿 */ dialog input,dialog textarea,dialog select,dialog [contenteditable], .cursor-on input,.cursor-on textarea,.cursor-on select,.cursor-on [contenteditable]{cursor:auto!important} /* 커서 장식이 dialog 안으로 옮겨져도 화면 기준으로 고정 */ dialog>#cur,dialog>#cur-ring{position:fixed;z-index:2147483647} /* 모달 위에서는 링을 살짝 밝게 */ body.cur-inmodal #cur{background:#e9dfa9} body.cur-inmodal #cur-ring{border-color:#e9dfa9aa} body.cur-inmodal.cur-hot #cur-ring{border-color:#e9dfa9;background:#e9dfa918} } /* 커서 효과를 못 쓰는 환경에서는 반드시 기본 커서 */ @media not all and (hover:hover){ html,html *{cursor:auto!important} html button,html a,html summary,html label,html [role="button"]{cursor:pointer!important} } /* ── 3) 모바일 터치 동적 효과 ── */ .touch-ripple{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; background:radial-gradient(circle,#b79ad8aa,#b79ad800 70%);pointer-events:none;z-index:2147483646; animation:tapRipple .7s cubic-bezier(.22,.68,0,1) forwards} @keyframes tapRipple{from{transform:scale(.4);opacity:.85}to{transform:scale(9);opacity:0}} .touch-fx .tap-on{transform:scale(.972)!important;transition:transform .12s ease!important} .touch-fx .slide-bg,.touch-fx .slide-character{transition:transform .25s cubic-bezier(.22,.68,0,1)} /* 터치 기기는 hover 연출 대신 등장 연출을 강하게 */ @media(hover:none),(pointer:coarse){ .reveal{transform:translateY(28px)} .funnel-gate .gate-motes i{opacity:.55;animation:moteRise 3.6s ease-in-out infinite} .funnel-gate .gate-motes i:nth-child(2){animation-delay:-.9s} .funnel-gate .gate-motes i:nth-child(3){animation-delay:-1.8s} .funnel-gate .gate-motes i:nth-child(4){animation-delay:-2.7s} .funnel-gate img{animation:slowDrift 18s ease-in-out infinite alternate} @keyframes slowDrift{from{transform:scale(1.02)}to{transform:scale(1.09)}} } /* ── 4) 입장 인트로 ── */ html.intro-lock,html.intro-lock body{overflow:hidden} #intro-veil{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center; background:radial-gradient(120% 90% at 50% 45%,#1d2a22 0%,#121a17 46%,#0a0f0d 100%); color:#efe6c6;cursor:pointer;transition:opacity 1.05s cubic-bezier(.4,0,.2,1),visibility 1.05s} #intro-veil.gone{opacity:0;visibility:hidden;pointer-events:none} .intro-core{position:relative;z-index:2;display:grid;justify-items:center;gap:2px} .intro-tree{width:112px;height:112px;color:#e7d9a6;overflow:visible} .intro-tree .ln{stroke-dasharray:90;stroke-dashoffset:90;animation:draw 1.6s cubic-bezier(.22,.68,0,1) forwards} .intro-tree .ln:nth-child(1){animation-delay:.12s} .intro-tree .ln:nth-child(2){animation-delay:.34s} .intro-tree .ln:nth-child(3){animation-delay:.46s} .intro-tree .ln:nth-child(4){animation-delay:.6s} .intro-tree .ln:nth-child(5){animation-delay:.72s} .intro-tree .ln:nth-child(6){animation-delay:.86s} .intro-tree .ln:nth-child(7){animation-delay:1s} .intro-tree .ln:nth-child(8){animation-delay:1.1s} .intro-tree .rg{stroke-dasharray:215;stroke-dashoffset:215;opacity:.5;animation:draw 2.2s cubic-bezier(.22,.68,0,1) .45s forwards} @keyframes draw{to{stroke-dashoffset:0}} .intro-word{font:31px 'Gowun Batang',serif;letter-spacing:9px;margin:16px 0 0;opacity:0; animation:introRise 1.15s cubic-bezier(.22,.68,0,1) 1.55s forwards;text-indent:9px} .intro-sub{font:10px Georgia,serif;letter-spacing:7px;color:#c9bd93;opacity:0; animation:introRise 1.15s cubic-bezier(.22,.68,0,1) 1.9s forwards;text-indent:7px} @keyframes introRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .intro-glow{position:absolute;left:50%;top:46%;width:180px;height:180px;transform:translate(-50%,-50%) scale(.2); border-radius:50%;background:radial-gradient(circle,#f3e4ae66,#f3e4ae00 68%);opacity:0; animation:introGlow 3.5s cubic-bezier(.22,.68,0,1) .5s forwards} @keyframes introGlow{25%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(6.5)}} .intro-motes{position:absolute;inset:0;z-index:1;overflow:hidden} .intro-motes i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%; background:#f0e4bb;box-shadow:0 0 10px 2px #f0e4bb55;opacity:0; animation:introMote 3.8s ease-in-out var(--dl) forwards} @keyframes introMote{18%{opacity:.85}62%{opacity:.6}100%{opacity:0;transform:translateY(-92px)}} @media(max-width:750px){.intro-tree{width:92px;height:92px}.intro-word{font-size:26px;letter-spacing:7px}} @media(prefers-reduced-motion:reduce){ #intro-veil{display:none!important} html.intro-lock,html.intro-lock body{overflow:auto} .touch-ripple{display:none} .funnel-gate,.funnel-gate img{transition:none!important;animation:none!important} } /* ── v13: B안 세계수 심볼 마크 ── */ .brand{align-items:center} .brand .brand-mark{width:40px;height:40px;object-fit:contain;display:block;flex-shrink:0; transition:transform .5s cubic-bezier(.22,.68,0,1),filter .4s} .brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06)} header .brand svg{display:none} footer .brand .brand-mark{width:32px;height:32px;opacity:.82} body.scrolled .brand .brand-mark{width:34px;height:34px} @media(max-width:750px){.brand .brand-mark{width:34px;height:34px}footer .brand .brand-mark{width:28px;height:28px}} /* 인트로 마크도 B안 실루엣에 맞춰 링 강조 */ .intro-tree .rg{opacity:.62} /* ── v13-b: 퍼널 게이트 설명줄 + 전환 연출 ── */ .funnel-gate .gate-desc{font:12px sans-serif;color:#ded5c4;opacity:.92;text-shadow:0 1px 8px #0000004d;margin-top:2px} .funnel-gate.gate-moon .gate-desc{color:#ded0e6} .funnel-transition{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;gap:0; background:radial-gradient(120% 90% at 50% 50%,#16241d 0%,#0b110e 70%); color:#efe6c6;opacity:0;transition:opacity .45s ease;pointer-events:none} .funnel-transition.to-moon{background:radial-gradient(120% 90% at 50% 50%,#231633 0%,#0d0813 70%);color:#eddcf3} .funnel-transition.on{opacity:1;pointer-events:auto} .funnel-transition .ft-mark{font-size:44px;line-height:1;animation:ftPulse 1.2s ease-in-out infinite} .funnel-transition .ft-line{display:block;margin-top:18px;font:14px 'Gowun Batang',serif;letter-spacing:3px;opacity:.8} @keyframes ftPulse{50%{opacity:.45;transform:scale(1.12)}} @media(prefers-reduced-motion:reduce){.funnel-transition{transition:none}.funnel-transition .ft-mark{animation:none}} /* v13-d: 퍼널 게이트 — 배경 아트가 보이도록 베일 완화 */ .funnel-gate img{object-position:50% 38%;filter:brightness(1)} .funnel-gate .gate-veil{background:linear-gradient(0deg,#050d09f5 0%,#070f0bd4 26%,#0a130d8c 48%,#0a130d33 72%,#0a130d0d 100%)} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#0d0616f5 0%,#100819d4 26%,#12091f8c 48%,#12091f33 72%,#12091f0d 100%)} .funnel-gate{height:236px} .funnel-gate .gate-body{bottom:15px} .funnel-gate .gate-body strong{font-size:26px} @media(max-width:600px){.funnel-gate{height:196px}} /* v13-e: 게이트 균형 — 달의 신당 아트 노출 + 텍스트 국소 스크림 */ .funnel-gate.gate-moon img{object-position:50% 30%;filter:brightness(1.35) saturate(1.08)} .funnel-gate.gate-forest img{object-position:50% 42%;filter:brightness(.98)} /* 전면 베일은 아주 옅게, 글자 뒤에만 국소 스크림 */ .funnel-gate .gate-veil{background:linear-gradient(0deg,#060d0a80 0%,#060d0a2e 42%,transparent 70%)} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#0c061480 0%,#0c06142e 42%,transparent 70%)} .funnel-gate .gate-body{padding:38px 14px 12px 14px;left:6px;right:6px;bottom:6px;border-radius:12px; background:linear-gradient(0deg,#04090699 0%,#0409066b 46%,#04090600 100%)} .funnel-gate.gate-moon .gate-body{background:linear-gradient(0deg,#0a051199 0%,#0a05116b 46%,#0a051100 100%)} .funnel-gate .gate-body small{text-shadow:0 1px 6px #000000b3,0 0 18px #00000080} .funnel-gate .gate-body strong{text-shadow:0 2px 10px #000000b3,0 0 22px #00000073} .funnel-gate .gate-body em,.funnel-gate .gate-desc{text-shadow:0 1px 6px #000000a6} .funnel-gate .gate-body b{text-shadow:0 1px 6px #000000a6} /* v13-f: 달의 신당 게이트 노출 보정 (원본이 어두운 야경) */ .funnel-gate.gate-moon img{filter:brightness(2.05) contrast(1.06) saturate(1.14);object-position:50% 34%} .funnel-gate.gate-moon{background:#241534} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#0c0614a6 0%,#0c061438 44%,transparent 72%)} .funnel-gate.gate-forest img{filter:brightness(1.02) saturate(1.04)} /* v13-g: 텍스트 패널이 아트를 덮던 문제 — 패널 제거, 하단 스크림만 */ .funnel-gate .gate-body,.funnel-gate.gate-moon .gate-body{ background:none;padding:0;left:16px;right:14px;bottom:14px;border-radius:0} .funnel-gate .gate-veil{background:linear-gradient(0deg,#050b08f0 0%,#050b08c4 18%,#050b0866 38%,#050b081a 58%,transparent 76%)} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#0b0512f0 0%,#0b0512c4 18%,#0b051266 38%,#0b05121a 58%,transparent 76%)} .funnel-gate .gate-body small{margin-bottom:1px} .funnel-gate .gate-body strong{font-size:25px;line-height:1.25} .funnel-gate .gate-body em{font-size:12px;line-height:1.55} .funnel-gate .gate-desc{font-size:11.5px;margin-top:1px} .funnel-gate .gate-body b{margin-top:9px;padding-top:9px} /* v13-h: 아트는 살리고 글자 가독성 확보 — 하단 스크림 강화 + 게이트 높이 */ .funnel-gate{height:250px} .funnel-gate .gate-veil{background:linear-gradient(0deg,#030705fa 0%,#030705ef 22%,#030705c9 38%,#0307057a 52%,#0307052e 66%,transparent 82%)} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#08040ffa 0%,#08040fef 22%,#08040fc9 38%,#08040f7a 52%,#08040f2e 66%,transparent 82%)} .funnel-gate.gate-moon img{filter:brightness(1.75) contrast(1.05) saturate(1.1)} .funnel-gate .gate-body small{color:#f3ecd9} .funnel-gate .gate-body em,.funnel-gate .gate-desc{color:#eae3d4;opacity:1} .funnel-gate.gate-moon .gate-body em,.funnel-gate.gate-moon .gate-desc{color:#ece0f2} .funnel-gate .gate-body b{border-top-color:#ffffff4d} @media(max-width:600px){.funnel-gate{height:208px}} /* v13-i: 스크림을 하단 45%로 한정 — 상단 아트 완전 노출 */ .funnel-gate .gate-veil{background:linear-gradient(0deg,#030705f7 0%,#030705e3 14%,#030705a8 27%,#03070552 38%,#0307051a 46%,transparent 56%)} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#08040ff7 0%,#08040fe3 14%,#08040fa8 27%,#08040f52 38%,#08040f1a 46%,transparent 56%)} /* v13-j 최종: 숲=하단 스크림 강화, 달=베일 완화(아트가 어두워 과중복) */ .funnel-gate .gate-veil{background:linear-gradient(0deg,#020604fc 0%,#020604f0 16%,#020604c4 30%,#0206045e 42%,#02060421 52%,transparent 64%)} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#07030ee6 0%,#07030eb8 18%,#07030e70 32%,#07030e26 46%,transparent 60%)} .funnel-gate.gate-moon img{filter:brightness(1.55) contrast(1.04) saturate(1.12)} /* ═══ v14 (2026-09-23) — 로고 폭주 방지 + 체크박스 보완 ═══ */ /* 로고: CSS 미적용 시 512px 원본이 그대로 펼쳐지던 문제 → HTML 속성도 작은 값으로 바꾸고, CSS에서 최대치를 강제로 묶는다. */ header .brand .brand-mark, footer .brand .brand-mark, img.brand-mark{ width:40px!important;height:40px!important; max-width:40px!important;max-height:40px!important; min-width:0;object-fit:contain;display:block;flex:0 0 40px} footer .brand .brand-mark{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important;flex-basis:32px} body.scrolled header .brand .brand-mark{width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important;flex-basis:34px} @media(max-width:750px){ header .brand .brand-mark,img.brand-mark{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important;flex-basis:32px} footer .brand .brand-mark{width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important;flex-basis:26px} } .brand{display:flex;align-items:center;gap:10px;min-width:0} .brand>span{min-width:0} /* 체크박스: 기본 사각 박스를 커스텀 마크로 — 눌린 상태가 분명히 보이게 */ .consent-check{position:relative;display:flex;gap:11px;align-items:flex-start; margin:0 0 10px;padding:12px 13px;border:1px solid #e8e1f0;border-radius:11px; background:#fff;cursor:pointer;line-height:1.6;transition:border-color .2s,background .2s} .consent-check:hover{border-color:#c3addd;background:#fdfbff} .consent-check input{position:absolute;opacity:0;width:0;height:0;margin:0} .consent-check>span{position:relative;padding-left:30px;font-size:13.5px;color:#4f4859;word-break:keep-all;flex:1} .consent-check>span:before{content:'';position:absolute;left:0;top:1px;width:20px;height:20px; border:1.5px solid #c4bbd2;border-radius:6px;background:#fff; transition:background .18s,border-color .18s,transform .12s} .consent-check>span:after{content:'';position:absolute;left:7px;top:5px;width:5px;height:10px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0; transition:opacity .18s,transform .18s} .consent-check input:checked+span:before{background:#71519e;border-color:#71519e} .consent-check input:checked+span:after{opacity:1;transform:rotate(45deg) scale(1)} .consent-check input:focus-visible+span:before{outline:3px solid #8f69e3;outline-offset:3px} .consent-check:has(input:checked){border-color:#b79ad8;background:#faf6fe} .consent-check b{font-weight:600;color:#71519e;margin-right:3px} .consent-check small{display:block;font-size:11.5px;color:#9a92a4;margin-top:3px} /* 필수 항목 미체크 상태 강조 */ .consent-check.need{border-color:#e0a79c;background:#fff8f6;animation:needShake .4s ease} @keyframes needShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} @media(max-width:600px){.consent-check>span{font-size:13px}} /* v14-b: 밝은 아트 위 라벨 가독성 */ .funnel-gate .gate-body small{color:#fff;font-weight:600;letter-spacing:1.8px; text-shadow:0 1px 3px #000c,0 2px 10px #000000b3,0 0 20px #00000099} .funnel-gate .gate-body em{text-shadow:0 1px 3px #000c,0 2px 10px #000000a6} .funnel-gate .gate-veil{background:linear-gradient(0deg,#020604fc 0%,#020604f2 18%,#020604d6 32%,#02060480 46%,#0206043d 56%,transparent 70%)} .funnel-gate.gate-moon .gate-veil{background:linear-gradient(0deg,#07030efa 0%,#07030ee6 18%,#07030eba 32%,#07030e6b 46%,#07030e2e 58%,transparent 72%)} /* v15: 오늘 빌 것 선택 — 체크박스와 같은 결의 카드형 선택 UI */ .wish-grid{grid-template-columns:1fr 1fr;gap:11px;margin:10px 0 4px} .choice.wish{position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-start; gap:9px;padding:16px 15px 15px;border:1px solid #e8e1f0;border-radius:13px;background:#fff; font-size:14px;color:#4f4859;overflow:hidden; transition:border-color .2s,background .2s,box-shadow .2s,transform .12s} .choice.wish:before{content:'';position:absolute;inset:0; background:radial-gradient(120% 90% at 85% 0%,#7856d514,transparent 62%);opacity:0;transition:opacity .25s} .choice.wish:hover{border-color:#c3addd;background:#fdfbff;transform:translateY(-1px)} .choice.wish:hover:before{opacity:1} .wish-sigil{display:flex;align-items:center;justify-content:center;width:42px;height:42px; font:24px/1 'Gowun Batang',serif;color:#8664a6;background:#f6f1fb;border:1px solid #ece3f6; border-radius:11px;text-align:center;flex-shrink:0;transition:background .2s,color .2s,border-color .2s} .choice.wish .wish-label{font-size:14.5px;letter-spacing:-.3px} .choice.wish:after{content:'';position:absolute;right:13px;top:13px;width:19px;height:19px; border:1.5px solid #ddd4e8;border-radius:50%;background:#fff; transition:background .18s,border-color .18s} .choice.wish.selected{border-color:#71519e;background:#faf6fe; box-shadow:0 6px 18px #71519e1f,inset 0 0 0 1px #71519e33;color:#4c3668} .choice.wish.selected .wish-sigil{background:#71519e;border-color:#71519e;color:#fff} .choice.wish.selected:after{background:#71519e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; border-color:#71519e} .choice.wish:focus-visible{outline:3px solid #8f69e3;outline-offset:3px} .wish-grid.need .choice.wish{border-color:#e0a79c;animation:needShake .4s ease} @media(max-width:600px){.wish-grid{grid-template-columns:1fr 1fr;gap:9px} .choice.wish{padding:13px 12px}.wish-sigil{width:36px;height:36px;font-size:21px} .choice.wish .wish-label{font-size:13.5px}} @media(prefers-reduced-motion:reduce){.choice.wish{transition:none}} /* v16: 인트로 한 템포 늦추기 — 마크가 다 그려진 뒤 잠깐 머무는 호흡 */ .intro-core{animation:introBreath 4.1s cubic-bezier(.33,0,.2,1) forwards} @keyframes introBreath{0%{transform:scale(.985)}55%{transform:scale(1)}85%{transform:scale(1.008)}100%{transform:scale(1.03);opacity:.92}} #intro-veil.gone .intro-core{transform:scale(1.05);opacity:0;transition:transform 1.05s cubic-bezier(.4,0,.2,1),opacity .8s ease} .intro-skip{position:absolute;left:0;right:0;bottom:40px;text-align:center; font:11px Georgia,serif;letter-spacing:3px;color:#efe6c67a;opacity:0; animation:introRise .8s ease 2.6s forwards;z-index:3} @media(prefers-reduced-motion:reduce){.intro-core,.intro-skip{animation:none}} /* ── v17: 라인업 확장 · 출시 예정 궁금증 · 사전 알림 ── */ .worlds{grid-template-columns:repeat(3,minmax(0,1fr))} .world-market{background:#140f1c} .world-market .world-tint{background:linear-gradient(90deg,#160f22b8,#160f2233),linear-gradient(0deg,#0d0817d9,transparent 72%)} .world.is-locked{cursor:pointer} .world-lock{position:absolute;right:18px;top:20px;z-index:2;font-size:11px;letter-spacing:.08em; color:#f0e6c8;background:#1b1426b8;border:1px solid #ffffff3d;border-radius:50px;padding:5px 12px; backdrop-filter:blur(4px)} .world.is-locked img{filter:saturate(.9)} .world.is-locked:hover img{transform:scale(1.06)} @media(max-width:980px){.worlds{grid-template-columns:1fr 1fr}.world-market{grid-column:span 2;height:260px}} @media(max-width:750px){.worlds{grid-template-columns:1fr}.world-market{grid-column:auto}} /* 출시 예정 카드 위 스쳐가는 한 줄 */ .soon-whisper{position:absolute;left:0;right:0;bottom:0;top:0;z-index:2;display:flex; align-items:center;justify-content:center;text-align:center;padding:0 18px; font:15px/1.6 'Gowun Batang',serif;font-style:normal;letter-spacing:-.3px;color:#f3ead4; background:linear-gradient(0deg,#120d1ce6,#120d1c9e);opacity:0;pointer-events:none; transition:opacity .45s ease} .offering-card.is-soon:hover .soon-whisper{opacity:1} .offering-card.is-soon .offering-copy strong.coming-soon{color:#75568d;font-weight:600} .offering-card.is-soon{cursor:pointer} .offering-card.is-soon:hover{transform:translateY(-4px);box-shadow:0 16px 36px #29163814} /* 사전 알림 모달 */ .waitlist-view .soon-message{margin:0 0 14px} .waitlist-view .soon-message.done{background:#eef6ef;color:#3f7a52!important} .waitlist-view h2{margin-bottom:14px} .wait-teaser{font:16px/1.85 'Gowun Batang',serif;color:#5f5670!important; border-left:2px solid #d9cde9;padding-left:14px;margin:0 0 18px} .wait-proof{font-size:13px!important;color:#7d6f8c!important;text-align:center;margin:14px 0 0} .waitlist-view .consent-field{display:block;font-size:13px;color:#877f8e;margin:20px 0 6px} .waitlist-view .search-input{margin:0 0 14px} .waitlist-view .fine-print{font-size:11.5px;color:#a49bad;line-height:1.7;margin-top:14px} @media(prefers-reduced-motion:reduce){.soon-whisper{transition:none}} /* ── v19: 라인업 카드 정리 — 카드가 펼쳐지듯 ── */ .landing-grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px;align-items:stretch} .offering-card{display:flex;flex-direction:column;border-radius:16px;border-color:#efeaf4} .offering-main{display:flex;flex-direction:column;flex:1} .offering-art{height:0;padding-bottom:132%;flex:none} .offering-art img{position:absolute;inset:0} .offering-art>span{left:12px;bottom:12px;font-size:11.5px;padding:5px 11px; background:#ffffffee;box-shadow:0 2px 10px #1b122c1a} .offering-copy{padding:16px 15px 18px;display:flex;flex-direction:column;flex:1} .offering-copy>small{font-size:12px} .offering-copy h3{font-size:17px;line-height:1.55;margin:7px 0 8px;min-height:2.9em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .offering-copy p{font-size:13px;line-height:1.7;min-height:0;margin:0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .offering-copy strong{margin-top:auto;padding-top:16px;font-size:13.5px} .offering-card.is-soon .offering-art:after{left:12px;top:12px;content:'공개 준비 중'} /* 펼쳐지는 등장 */ @keyframes dealIn{from{opacity:0;transform:translateY(22px) rotate(-2.2deg) scale(.96)} 60%{opacity:1}to{opacity:1;transform:none}} .offering-card.deal-in{animation:dealIn .62s cubic-bezier(.22,.68,0,1) var(--d,0ms) both} @media(max-width:750px){ .landing-grid{grid-template-columns:1fr 1fr;gap:11px} .offering-copy{padding:13px 11px 15px} .offering-copy h3{font-size:14.5px;min-height:3em} .offering-copy p{font-size:12.5px;-webkit-line-clamp:2} .offering-copy strong{font-size:12.5px;padding-top:12px} .offering-art>span{font-size:10.5px;padding:4px 9px} } @media(prefers-reduced-motion:reduce){.offering-card.deal-in{animation:none}} /* v19-b: 라인업 그리드 한 줄 정리 + 카드 위 겹침 제거 */ .landing-grid{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))} .offering-art>span{display:none} .offering-card.is-soon .offering-art:after{left:auto;right:12px;top:12px;content:'공개 준비 중'; background:#1e1729cc;backdrop-filter:blur(3px)} .offering-copy{padding:15px 14px 17px} .offering-copy>small{display:block;font-size:11.5px;letter-spacing:.02em;color:#8d74a8; text-transform:none;margin-bottom:2px} .offering-label{display:block;font:10px Georgia,serif;letter-spacing:.16em;color:#a99cb6;margin:0 0 6px} .offering-copy h3{margin:2px 0 8px} @media(max-width:1100px){.landing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:750px){.landing-grid{grid-template-columns:1fr 1fr}} /* v19-c: 공간 카드 예고 뱃지 — 상단 라벨과 겹치지 않게 아래쪽으로 */ .world-lock{top:auto;bottom:20px;right:18px;font-size:10.5px;padding:5px 11px} .worlds{grid-template-columns:1fr 1fr} @media(max-width:750px){.worlds{grid-template-columns:1fr}.world-lock{bottom:16px;right:14px}} /* v19-d: 예고 뱃지는 우상단 아래쪽, 화살표/입장 문구와 분리 */ .world-lock{top:60px;bottom:auto;right:18px} @media(max-width:750px){.world-lock{top:52px;right:14px}}