/* HOME owns its layout. cqw below is confined to approved control artwork crops. */
.page-home .home{position:relative;width:100%;max-width:480px;margin:auto;background:#f8efdd url('../assets/home/common-bg.png') center top/cover no-repeat;padding-bottom:24px;isolation:isolate}
.page-home .paper{display:none}.page-home .artwork{position:relative;width:100%;aspect-ratio:853/818;margin:auto;overflow:hidden}
.page-home .artwork img{display:block;width:100%;height:auto}
.page-home .identity{text-align:center;color:#291b0c;padding:0 8px 10px}.page-home .identity h1{font:bold 30px/1.1 Batang,serif;letter-spacing:2px;margin:0 0 5px}
.page-home .identity p{margin:0}.page-home .roman-name{font:16px/1.4 'Times New Roman',serif;letter-spacing:5px}
.page-home .roles{font:8.2px/1.6 Arial,sans-serif;letter-spacing:1.9px}.page-home .credentials{font:11.4px/1.6 Batang,serif;margin-top:5px}
.page-home .channels,.page-home .detail-menu{display:grid;grid-template-columns:1fr 1fr;gap:5px 4px;width:calc(100% - 26px);max-width:364px;margin:0 auto}
.page-home .gold-button{position:relative;container-type:inline-size;display:block;min-width:0;height:72px;border:0;padding:0;background:transparent;overflow:hidden;text-align:left;color:#462708}
.page-home .gold-button .surface{position:absolute;max-width:none;height:auto;pointer-events:none}
.page-home .gold-button span{position:absolute;left:44%;top:50%;transform:translateY(-50%);white-space:nowrap;font:bold 14px/1.1 'Malgun Gothic',sans-serif}
.page-home #youtube .surface{width:197.454cqw;left:-6.25cqw;top:calc(-241.90cqw + 1px)}
.page-home #tiktok .surface{width:234.34cqw;left:-126.92cqw;top:-287.087cqw}
.page-home #tiktok span{left:46%;font:17px/1.1 'Times New Roman',serif}
.page-home #instagram,.page-home #facebook{height:50px}
.page-home #instagram .surface{width:214.861cqw;left:-7.808cqw;top:-300cqw}
.page-home #facebook .surface{width:218.159cqw;left:-110.23cqw;top:-304.6cqw}
.page-home #instagram span,.page-home #facebook span{font:13px/1.1 Arial,sans-serif;color:#111}
.page-home .detail-menu{margin-top:6px;row-gap:6px}
.page-home .detail-menu .gold-button{height:80px}
.page-home .detail-menu span{left:50%;top:39%;font:14px/1.1 'Times New Roman',serif}
.page-home .detail-menu .gold-button::after{content:attr(data-label-ko);position:absolute;left:50%;top:58%;font:700 9px/1.2 'Malgun Gothic',sans-serif;color:#6a4321;white-space:nowrap}
.page-home [data-page='CONTENTS'] .surface,.page-home [data-page='CAREER'] .surface{width:214.861cqw;left:-7.808cqw}
.page-home [data-page='BEAUTY'] .surface,.page-home [data-page='COLLAB'] .surface{width:216.497cqw;left:-109.14cqw}
.page-home [data-page='CONTENTS'] .surface{top:-328.73cqw}.page-home [data-page='BEAUTY'] .surface{top:-331.22cqw}
.page-home [data-page='CAREER'] .surface{top:-372.04cqw}.page-home [data-page='COLLAB'] .surface{top:-374.86cqw}
.page-home .utility{container-type:inline-size;position:relative;display:grid;grid-template-columns:1.1fr 1fr .95fr;margin:8px auto 0;width:calc(100% - 30px);max-width:360px;height:60px;overflow:hidden}
.page-home .utility>.surface{position:absolute;width:108.386cqw;height:auto;max-width:none;left:-4.32cqw;top:-210.667cqw;pointer-events:none}
.page-home .utility button{position:relative;background:none;border:0;padding:0 0 0 54px;font:bold 10px/1.2 Batang,serif;white-space:nowrap}
.page-home .utility #qr{padding-left:22px}.page-home #offline{position:fixed;bottom:0;left:0;right:0;background:#fff4de;text-align:center;font-size:12px}
.page-home .install-icon{display:block;margin:auto;border-radius:16px}.page-home dialog ol{padding-left:24px}.page-home dialog li{font-size:16px;line-height:1.7;padding:6px 0}
.page-home dialog input{width:100%;padding:12px}.page-home #qr-code{padding:16px;background:white;width:288px;max-width:100%;margin:16px auto;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.page-home #qr-code:empty{display:none}.page-home #qr-code img,.page-home #qr-code canvas{max-width:100%;height:auto}.page-home #qr-url{overflow-wrap:anywhere;font-size:12px}
.page-home #toast{position:fixed;z-index:50;bottom:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:12px 20px;border-radius:12px;color:white;background:#402c1e;font-size:14px;line-height:1.6}


/* Finite sprite windows. */
.page-home #youtube .surface{clip-path:inset(56.67028200% 46.18991794% 35.57483731% 3.16529894%)}
.page-home #tiktok .surface{clip-path:inset(56.67028200% 3.16529894% 35.57483731% 54.16178195%)}
.page-home #instagram .surface{clip-path:inset(64.58785249% 49.82415006% 29.71800434% 3.63423212%)}
.page-home #facebook .surface{clip-path:inset(64.58785249% 3.63423212% 29.71800434% 50.52754982%)}
.page-home [data-page="CONTENTS"] .surface{clip-path:inset(70.77006508% 49.82415006% 19.84815618% 3.63423212%)}
.page-home [data-page="BEAUTY"] .surface{clip-path:inset(70.77006508% 3.39976553% 19.84815618% 50.41031653%)}
.page-home [data-page="CAREER"] .surface{clip-path:inset(80.09761388% 49.82415006% 10.79175705% 3.63423212%)}
.page-home [data-page="COLLAB"] .surface{clip-path:inset(80.09761388% 3.39976553% 10.79175705% 50.41031653%)}
.page-home .utility .surface{clip-path:inset(89.91323210% 3.75146542% 3.03687636% 3.98593200%)}

/* This page owns its dialog layout as well. */
.page-home dialog{width:calc(100% - 24px);max-width:430px;max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--gold);border-radius:18px;background:var(--ivory);color:var(--ink);padding:44px 20px 24px}.page-home dialog::backdrop{background:#22180db3}.page-home dialog h2{font-size:23px;line-height:1.4;text-align:center;margin:0 0 14px}.page-home dialog p{line-height:1.7;font-size:15px}.page-home dialog .close{position:absolute;top:4px;right:6px;width:44px;height:44px;border:0;background:none;font-size:30px}.page-home dialog a,.page-home dialog button:not(.close){display:block;min-height:44px;width:100%;text-align:center;border:1px solid var(--gold);border-radius:10px;background:#fff9ef;margin-top:14px;padding:12px}