:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body,p,h1,h2,h3{margin:0}code{font-family:ui-monospace,Consolas,monospace}:root{--bg:#0e0a1f;--bg-soft:#1a1432;--surface:#221a3d;--surface-2:#2d2350;--gold:#d4a85a;--gold-soft:#f5e6c8;--burgundy:#6b2737;--text:#f1eada;--text-dim:#b8a99a;--text-mute:#7a6e85;--danger:#e07a5f;--border:#d4a85a40;--shadow:0 10px 40px #00000080}*{box-sizing:border-box}html,body,#root{background:var(--bg);min-height:100%;color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Pretendard,-apple-system,Apple SD Gothic Neo,Noto Sans KR,sans-serif}body{background:radial-gradient(ellipse at top, #6b273759 0%, transparent 60%), radial-gradient(ellipse at bottom, #d4a85a1f 0%, transparent 60%), var(--bg)}.app{flex-direction:column;align-items:center;min-height:100vh;padding:24px 16px 80px;display:flex;position:relative}.dev-banner{border:1px solid var(--border);width:100%;max-width:480px;color:var(--gold-soft);text-align:center;background:#d4a85a1f;border-radius:10px;margin-bottom:16px;padding:10px 14px;font-size:12px;line-height:1.5}.dev-banner code{background:#0000004d;border-radius:4px;padding:1px 5px;font-size:11px}.saju-form{background:var(--surface);border:1px solid var(--border);width:100%;max-width:420px;box-shadow:var(--shadow);border-radius:20px;flex-direction:column;gap:18px;padding:32px 24px;display:flex}.brand{letter-spacing:-.5px;color:var(--gold-soft);margin:0;font-family:Noto Serif KR,serif;font-size:32px;font-weight:700}.brand span{color:var(--gold);letter-spacing:4px;margin-left:8px;font-size:14px}.tagline{color:var(--text-dim);margin:-10px 0 14px;font-size:14px}.field{flex-direction:column;gap:8px;display:flex}.field>span:first-child{color:var(--text-dim);font-size:13px;font-weight:500}.field em{color:var(--text-mute);margin-left:4px;font-size:11px;font-style:normal}.field input[type=text],.field input[type=date],.field input[type=time]{background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:10px;outline:none;padding:12px 14px;font-family:inherit;font-size:16px;transition:border-color .15s}.field input:focus{border-color:var(--gold)}.gender-row{gap:10px;display:flex}.pill{background:var(--bg-soft);color:var(--text-dim);border:1px solid var(--border);cursor:pointer;border-radius:10px;flex:1;padding:12px;font-family:inherit;font-size:15px;transition:all .15s}.pill.active{background:linear-gradient(135deg, var(--gold) 0%, #b8923f 100%);color:#1a1432;border-color:var(--gold);font-weight:600}.check{color:var(--text);cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.check input{accent-color:var(--gold)}.error{color:var(--danger);background:#e07a5f26;border-radius:8px;padding:10px 12px;font-size:13px}.primary{background:linear-gradient(135deg, var(--gold) 0%, #b8923f 100%);color:#1a1432;cursor:pointer;border:none;border-radius:12px;padding:14px;font-family:inherit;font-size:16px;font-weight:700;transition:transform .1s,box-shadow .15s;box-shadow:0 4px 14px #d4a85a4d}.primary:hover{transform:translateY(-1px)}.primary:disabled{background:var(--surface-2);color:var(--text-mute);cursor:not-allowed;box-shadow:none}.ghost{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:10px;justify-content:center;align-items:center;padding:10px 14px;font-family:inherit;font-size:14px;text-decoration:none;display:inline-flex}.ghost:hover{color:var(--text);border-color:var(--gold)}.notice{color:var(--text-mute);text-align:center;margin:8px 0 0;font-size:11px}.loading{color:var(--text-dim);flex-direction:column;align-items:center;gap:18px;margin-top:80px;display:flex}.spinner{border:3px solid #d4a85a33;border-top-color:var(--gold);border-radius:50%;width:48px;height:48px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-sub{opacity:.7;margin-top:-10px;font-size:13px}.result{flex-direction:column;gap:20px;width:100%;max-width:520px;display:flex}.result-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.result-header h1{color:var(--gold-soft);margin:0;font-family:Noto Serif KR,serif;font-size:22px}.pillars{background:var(--surface);border:1px solid var(--border);border-radius:16px;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;padding:16px;display:grid}.pillar{text-align:center;background:var(--bg-soft);border-radius:10px;padding:10px 4px}.pillar-label{color:var(--text-mute);margin-bottom:4px;font-size:11px}.pillar-stem,.pillar-branch{color:var(--gold-soft);font-family:Noto Serif KR,serif;font-size:22px;line-height:1.2}.pillar-branch{color:var(--gold)}.pillar-kor{color:var(--text-dim);margin-top:4px;font-size:11px}.elements{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px}.elements-title{color:var(--text-dim);margin-bottom:10px;font-size:13px}.elements-row{grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;display:grid}.element{background:var(--bg-soft);text-align:center;border:1px solid #0000;border-radius:10px;flex-direction:column;gap:2px;padding:10px 4px;display:flex}.element .ek{color:var(--gold-soft);font-family:Noto Serif KR,serif;font-size:18px}.element .ekor{color:var(--text-mute);font-size:10px}.element .ecount{color:var(--gold);font-size:13px;font-weight:600}.el-木{background:#4caf501f}.el-火{background:#e549491f}.el-土{background:#d4a85a1f}.el-金{background:#dcdcdc1a}.el-水{background:#4389dc1f}.yongshin{color:var(--text-dim);text-align:center;border-top:1px solid var(--border);padding-top:4px;font-size:13px}.yongshin strong{color:var(--gold)}.reading{flex-direction:column;gap:12px;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px}.card-title{color:var(--gold);margin-bottom:8px;font-size:14px;font-weight:600}.card-body{color:var(--text);font-size:14px;line-height:1.7}.lucky-meta{background:var(--surface);border:1px solid var(--border);border-radius:14px;grid-template-columns:1fr 1fr;gap:10px;padding:14px;display:grid}.lucky-meta>div{flex-direction:column;gap:4px;display:flex}.meta-label{color:var(--text-mute);font-size:11px}.lucky-btn{color:var(--gold-soft);text-shadow:0 1px 2px #0006;background:linear-gradient(135deg,#d4a85a 0%,#b8923f 50%,#6b2737 100%);margin-top:10px;padding:18px;font-size:17px}.modal-backdrop{z-index:100;background:#000000d9;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.ad-modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:14px;width:100%;max-width:380px;padding:18px;display:flex}.ad-header{color:var(--text-dim);justify-content:space-between;align-items:center;font-size:12px;display:flex}.ad-header>span:first-child{color:var(--gold);background:#d4a85a26;border-radius:4px;padding:3px 8px;font-weight:600}.ad-timer{color:var(--text-mute)}.ad-placeholder{border:1px dashed var(--border);height:280px;color:var(--text-mute);background:linear-gradient(135deg,#2d2350 0%,#1a1432 100%);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.ad-mark{color:var(--gold);letter-spacing:1px;background:#d4a85a26;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600}.ad-text{font-size:13px}.painting-screen{z-index:200;background:#000;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex;position:fixed;inset:0}.painting-close{color:#fff;cursor:pointer;z-index:10;background:#00000080;border:1px solid #fff3;border-radius:50%;width:38px;height:38px;font-size:18px;position:absolute;top:16px;right:16px}.painting-frame{aspect-ratio:9/16;opacity:0;background:#1a1432;width:100%;max-width:min(56.25vh,100vw);transition:opacity .6s;position:relative;overflow:hidden}.painting-frame.revealed{opacity:1}.painting-frame img{object-fit:cover;object-position:center;width:100%;height:100%}.painting-overlay{color:#fff;background:linear-gradient(#0000 0%,#000000d9 100%);flex-direction:column;gap:4px;padding:20px 18px 16px;display:flex;position:absolute;bottom:0;left:0;right:0}.painting-element{background:var(--gold);color:#1a1432;border-radius:4px;align-self:flex-start;margin-bottom:6px;padding:2px 8px;font-family:Noto Serif KR,serif;font-size:13px;font-weight:700}.painting-title{font-family:Noto Serif KR,serif;font-size:22px;font-weight:700}.painting-artist{color:#ffffffbf;font-size:13px;font-style:italic}.painting-effect{color:var(--gold-soft);margin-top:6px;font-size:13px}.painting-actions{gap:8px;width:100%;max-width:420px;padding:14px 16px;display:flex}.painting-actions>*{flex:1}.app-footer{color:var(--text-mute);font-size:11px;position:absolute;bottom:16px}.layout{flex-direction:column;min-height:100vh;display:flex}.site-header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;background:#0e0a1fb3;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex;position:sticky;top:0}.site-header .brand{color:var(--gold-soft);letter-spacing:-.3px;align-items:center;gap:8px;font-family:Noto Serif KR,serif;font-size:20px;font-weight:700;text-decoration:none;display:inline-flex}.site-header .brand-mark{background:linear-gradient(135deg, var(--gold), var(--burgundy));color:#fff;border-radius:8px;place-items:center;width:30px;height:30px;font-size:16px;font-weight:700;display:inline-grid}.site-nav{flex-wrap:wrap;gap:4px 14px;font-size:13px;display:flex}.site-nav .nav-link{color:var(--text-dim);border-radius:6px;padding:4px 8px;text-decoration:none;transition:color .15s,background .15s}.site-nav .nav-link:hover{color:var(--gold-soft);background:#d4a85a14}.site-nav .nav-link.active{color:var(--gold)}.site-main{flex-direction:column;flex:1;align-items:center;width:100%;padding:24px 16px 48px;display:flex}.site-footer{border-top:1px solid var(--border);color:var(--text-dim);background:#0e0a1f99;padding:32px 20px 24px;font-size:13px}.footer-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;max-width:1000px;margin:0 auto;display:grid}.footer-grid h4{color:var(--gold-soft);letter-spacing:.5px;margin:0 0 8px;font-size:14px}.footer-grid ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.footer-grid a{color:var(--text-dim);text-decoration:none}.footer-grid a:hover{color:var(--gold);text-decoration:underline}.footer-desc{color:var(--text-mute);margin:0;line-height:1.6}.footer-bottom{max-width:1000px;color:var(--text-mute);border-top:1px solid #d4a85a1f;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:28px auto 0;padding-top:18px;font-size:11px;display:flex}.home{flex-direction:column;align-items:center;gap:24px;width:100%;display:flex}.hero{text-align:center;max-width:560px;padding:12px 4px 0}.hero h1{color:var(--gold-soft);letter-spacing:-.5px;margin:0 0 12px;font-family:Noto Serif KR,serif;font-size:28px;line-height:1.3}.hero-sub{color:var(--text-dim);margin:0;font-size:15px;line-height:1.7}.home-info{border:1px solid var(--border);background:#221a3d80;border-radius:14px;width:100%;max-width:560px;margin-top:8px;padding:20px 22px}.home-info h2{color:var(--gold);letter-spacing:.3px;margin:0 0 10px;font-size:16px}.home-links{gap:6px;margin:0 0 14px;padding:0;font-size:14px;list-style:none;display:grid}.home-links a{color:var(--text);border-bottom:1px dashed #0000;text-decoration:none}.home-links a:hover{border-bottom-color:var(--gold);color:var(--gold-soft)}.home-note{color:var(--text-mute);margin:0;font-size:12px;line-height:1.6}.home-meta{color:var(--text-mute);font-size:11px}.content{background:var(--surface);border:1px solid var(--border);width:100%;max-width:720px;box-shadow:var(--shadow);color:var(--text);border-radius:16px;padding:36px 32px;font-size:15px;line-height:1.75}.content h1{color:var(--gold-soft);letter-spacing:-.3px;margin:0 0 16px;font-family:Noto Serif KR,serif;font-size:28px}.content h2{color:var(--gold);letter-spacing:.2px;margin:32px 0 10px;font-size:19px}.content h3{color:var(--gold-soft);margin:22px 0 8px;font-size:16px}.content .lede{color:var(--text-dim);margin:0 0 24px;font-size:16px;line-height:1.8}.content .meta{color:var(--text-mute);margin:-8px 0 18px;font-size:12px}.content p{margin:12px 0}.content ul,.content ol{margin:10px 0 14px;padding-left:22px}.content li{margin:4px 0}.content a{color:var(--gold);text-underline-offset:2px;text-decoration:underline}.content a:hover,.content strong{color:var(--gold-soft)}.cta-row{border-top:1px solid #d4a85a26;flex-wrap:wrap;gap:12px;margin-top:28px;padding-top:16px;display:flex}.primary-link,.ghost-link{border-radius:10px;padding:10px 16px;font-size:14px;font-weight:500;display:inline-block;text-decoration:none!important}.primary-link{background:var(--gold);border:1px solid var(--gold);color:#1a1432!important}.primary-link:hover{background:var(--gold-soft)}.ghost-link{border:1px solid var(--border);background:0 0;color:var(--text-dim)!important}.ghost-link:hover{border-color:var(--gold);color:var(--gold-soft)!important}.motif-list{background:#00000026;border-radius:10px;padding:14px 22px;list-style:outside}.faq-list{flex-direction:column;gap:4px;margin:0;display:flex}.faq-item{border-top:1px solid #d4a85a1f;padding:16px 0}.faq-item:last-child{border-bottom:1px solid #d4a85a1f}.faq-item dt{color:var(--gold-soft);margin-bottom:6px;font-size:15px;font-weight:600}.faq-item dd{color:var(--text-dim);margin:0;line-height:1.7}.contact-card{border:1px solid var(--border);background:#0003;border-radius:12px;flex-direction:column;gap:10px;margin:16px 0 24px;padding:18px 20px;display:flex}.contact-row{gap:14px;font-size:14px;display:flex}.contact-label{width:110px;color:var(--text-mute);flex-shrink:0}.contact-value{color:var(--text)}.contact-value[href^=mailto]{color:var(--gold)}.contact-note{color:var(--text-mute);border-left:3px solid var(--gold);background:#00000026;border-radius:8px;margin-top:24px;padding:12px 14px;font-size:13px}.not-found{text-align:center}.not-found .cta-row{border:0;justify-content:center}@media (width<=600px){.site-header{flex-wrap:wrap;padding:12px 14px}.site-header .brand{font-size:18px}.site-nav{flex-basis:100%;justify-content:flex-start;gap:2px 8px;font-size:12px}.content{border-radius:12px;padding:24px 18px;font-size:14px}.content h1{font-size:22px}.content h2{font-size:17px}.footer-bottom{font-size:10px}}