:root{--bg:#0f0f12;--text:#fff;--accent:#7cc4ff;--accent-2:#ffd36e;--surface:#181820;--border:#2a2a33;--radius:14px;--space:clamp(8px,2vw,20px);--font:clamp(14px,2.4vw,18px);--title:clamp(22px,4.5vw,34px);--h:clamp(18px,3.2vw,24px)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:url("images/bg.png") bottom center no-repeat,url("images/bg2.png") center/cover no-repeat,#4c9c51;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;font-size:var(--font);line-height:1.6;-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column;min-height:100vh;overflow:auto;-ms-overflow-style:none;scrollbar-width:none}
body::-webkit-scrollbar{display:none}
.theme-woossi{--bg:#0f0f12;--text:#fff;--surface:#16161d;--accent:#88e0ff;--accent-2:#ffd36e;--border:#2a2a33}
.theme-dark{--bg:#0a0a0b;--text:#fff;--surface:#141416;--accent:#9ad1ff;--accent-2:#ffc46e;--border:#2a2a33}
.theme-light{--bg:#f7f7fb;--text:#111;--surface:#fff;--accent:#3a7bd5;--accent-2:#f39c12;--border:#e6e6ef}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:36px;height:36px}
.brand-text{font-weight:800;font-size:var(--h)}
.view{display:none}
.hero{display:none}
.grid{display:grid;gap:var(--space)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid.cols-2{grid-template-columns:repeat(1,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}.grid.cols-4{grid-template-columns:repeat(1,minmax(0,1fr))}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:calc(var(--space)*1.1)}
.title{font-size:var(--title);font-weight:800;line-height:1.2}
.subtitle{font-size:var(--h);opacity:.9}
.row{display:flex;gap:var(--space);align-items:center;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#000;border:0}
.button.ghost{background:transparent}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface)}
.progress{height:12px;background:var(--border);border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--accent);width:0%}
.stat{display:flex;align-items:center;gap:8px}
.icon{width:22px;height:22px}
.list{display:flex;flex-direction:column;gap:12px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{width:min(520px,92vw);background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.card-thumb{width:100%;aspect-ratio:2/3;border-radius:12px;object-fit:cover;border:1px solid var(--border)}
.section{display:flex;flex-direction:column;gap:12px;scroll-snap-align:start}
.view section.card{border:none;background:transparent}
body.theme-woossi,body.theme-dark,body.theme-light{--bg:#4c9c51;--surface:#4c9c51;--border:transparent}
.view .card,.view .button,.view .pill,.view .badge,.view .modal,.view .card-thumb{border:0}
.logo{display:block;margin:20px auto;width:auto;max-width:100%;height:auto}
.content-group{width:92vw;max-width:92vw;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start}
.content-group .title,.content-group .subtitle,.content-group .content-text{text-align:left}
.content-group .play-link{align-self:center;margin-left:auto;margin-right:auto}
@media(min-width:900px){.content-group{max-width:560px}}
.page-item{margin:clamp(16px,3.5vw,28px) auto}
/* increase gap between logo and content group */
.logo.page-item{margin-bottom:clamp(36px,7vw,80px)}
@media(max-width:500px){.logo.page-item{margin-bottom:clamp(64px,12vw,140px)}}
.play-link{display:inline-block;margin:12px auto}
.play-logo{height:72px}
.title,.subtitle{text-align:center}
.title.page-item{margin-bottom:2px;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.25)}
.subtitle.page-item{margin-top:0;margin-bottom:8px;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.25)}
.content-text{max-width:min(1200px,92vw);margin:12px auto;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.25)}
.bg-bottom{display:none}
.hero{background-size:cover}
@media(max-width:500px){.hero{height:calc(var(--vh, 1vh) * 100)}.hero-logo{width:clamp(180px,60vw,440px);height:auto}}
.footer{display:none}
.copyright{position:fixed;left:0;right:0;bottom:30px;text-align:center;z-index:100;opacity:.9}
.lead{font-size:calc(var(--h) + 2px)}
.title,.subtitle{text-align:center}
.title.page-item{margin-bottom:2px}
.subtitle.page-item{margin-top:0;margin-bottom:8px}
.section .row{justify-content:center}
.lang-switch{display:flex;gap:10px;justify-content:center}
body.lang-ko .lang-ko{display:inline}
body.lang-ko .lang-en{display:none}
body.lang-en .lang-ko{display:none}
body.lang-en .lang-en{display:inline}
.muted{opacity:.75}
@media(max-width:500px){.logo{max-width:70vw}}
@media(min-width:900px){.logo{width:auto;height:auto;max-width:none}}
.content-group{width:92vw;max-width:92vw;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start}
.content-group .title,.content-group .subtitle,.content-group .content-text{text-align:left}
.content-group .play-link{align-self:center;margin-left:auto;margin-right:auto}
@media(min-width:900px){.content-group{max-width:560px}.content-group .content-text{max-width:560px}}
@media(max-width:500px){.content-group .title{font-size:calc(var(--title) + 4px)}.content-group .subtitle{font-size:calc(var(--h) + 2px)}.content-group .content-text{font-size:calc(var(--font) + 2px);line-height:1.7}}
.content-group .title.page-item,.content-group .subtitle.page-item{ text-align:left !important }
@media(min-width:900px){.content-group .title{font-size:clamp(36px,5vw,64px)}}
@media(max-width:500px){.content-group .title{font-size:clamp(28px,9vw,38px)}}