/* Wolryeongdang UI unification — isolated visual layer; no API/DB logic */
:root{--wry-ui-bg:#10090e;--wry-ui-gold:#dcb77f;--wry-ui-text:#f7eee7}
html{background:#09070a}
body{margin:0!important;padding:0!important;background:#09070a!important;color:var(--wry-ui-text);font-family:'Noto Serif KR','Malgun Gothic',serif}
#wryGlobalHeader{width:100%;max-width:520px;min-height:72px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:50;box-sizing:border-box}
#wryGlobalHeader .wry-global-brand{flex:1 1 auto;min-width:0;font-size:17px;letter-spacing:0}
#wryGlobalHeader .wry-global-actions{flex:0 0 auto;display:flex;gap:6px}
#wryGlobalHeader .wry-global-account,#wryGlobalHeader .wry-global-nav{width:112px;flex:0 0 112px}
#wryGlobalHeader .wry-global-action{width:112px;height:44px;min-height:44px;padding:0 6px;font-size:12px;box-sizing:border-box}
#wryGlobalHeader .wry-global-menu{max-width:calc(100vw - 16px)}
#app .shell,body>main{width:100%;max-width:520px;min-height:calc(100dvh - 72px);margin:0 auto!important;padding:0 0 calc(28px + env(safe-area-inset-bottom))!important;border:0!important;border-radius:0!important;background:var(--wry-ui-bg)!important;box-shadow:none!important;box-sizing:border-box}
#app .shell{overflow:hidden}
#app .shell .content{padding:0 24px 12px!important}
#app .shell .content>.top,.wry-saju-header{display:none!important}
#app .hero,body>main>.wry-shared-hero{height:360px!important;min-height:360px!important;width:auto!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;box-sizing:border-box;text-align:center;margin:0 -24px 16px!important;padding:20px 12px!important;border:0!important;border-radius:0!important;background:radial-gradient(circle at 50% 36%,#ae4c4c66,transparent 30%),linear-gradient(180deg,#24121d,#401823 57%,#10090e)!important}
body>main>.wry-shared-hero{width:100%!important;margin:0 0 16px!important}
#app .hero .moon,body>main>.wry-shared-hero .moon{font-size:92px!important;line-height:1;color:var(--wry-ui-gold)}
#app .hero .ornament,body>main>.wry-shared-hero .ornament{font-size:16px;letter-spacing:12px!important;margin:16px!important;color:#e0ad7b}
#app .hero h1,body>main>.wry-shared-hero h1{font-size:34px!important;line-height:1.45!important;font-weight:500!important;margin:10px 0!important;color:#fff0e6!important;text-align:center}
#app .hero p,body>main>.wry-shared-hero p{font-size:16px!important;line-height:1.9!important;margin:5px 24px!important;color:#e0c5c1!important;text-align:center}
body>main>.wry-shared-hero:before,body>main>.wry-shared-hero:after{content:'✦';position:absolute;font-size:80px;color:#db9d6b2b;top:20%;left:4%;pointer-events:none}
body>main>.wry-shared-hero:after{left:auto;right:5%;top:50%}
body>main>.wry-saju-invitation{padding:0 24px 4px!important}
body>main>.wry-saju-invitation .label{font-size:12px;color:#c84e59;margin:24px 0 8px}
body>main>.wry-saju-invitation .title{font-size:28px;line-height:1.55;font-weight:500;color:#f7eee7;margin:10px 0 18px}
body>main>.wry-saju-invitation .muted{font-size:15px;line-height:1.8;color:#baa5a6}
body>main>form,body>main>#result{margin-left:24px!important;margin-right:24px!important;max-width:calc(100% - 48px)}
body>main>form{margin-top:24px!important}
body>main>form fieldset{min-width:0}
body>main>form input,body>main>form select{max-width:100%}
@media(max-width:400px){#app .shell .content{padding-left:16px!important;padding-right:16px!important}#app .hero{margin-left:-16px!important;margin-right:-16px!important}#app .hero h1,body>main>.wry-shared-hero h1{font-size:29px!important}body>main>.wry-saju-invitation{padding-left:16px!important;padding-right:16px!important}body>main>form,body>main>#result{margin-left:16px!important;margin-right:16px!important;max-width:calc(100% - 32px)}}
@media(max-width:370px){#wryGlobalHeader{flex-wrap:wrap;padding:10px 12px;row-gap:8px}#wryGlobalHeader .wry-global-brand{flex:1 0 100%}#wryGlobalHeader .wry-global-actions{width:100%;justify-content:flex-end}#app .shell,body>main{min-height:calc(100dvh - 116px)}}
@media(min-width:600px){body{padding:0!important}}