:root { --cream:#fff8e9; --ink:#21352b; --orange:#f27635; --green:#397957; --line:#eadfca; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif; }
body::before,body::after { content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(4px); }
body::before { width:42vw; height:42vw; left:-15vw; top:-18vw; background:rgba(242,118,53,.18); }
body::after { width:38vw; height:38vw; right:-14vw; bottom:-19vw; background:rgba(57,121,87,.15); }
.portal { width:min(1080px,calc(100% - 36px)); margin:auto; padding:70px 0 34px; }
.portal-hero { max-width:760px; margin-bottom:44px; }
.badge { display:inline-block; padding:8px 12px; color:var(--green); background:#e8f3e9; border-radius:999px; font-size:.74rem; font-weight:900; letter-spacing:.14em; }
h1 { margin:17px 0 15px; font-size:clamp(3rem,8vw,6.5rem); line-height:.98; letter-spacing:-.065em; }
h1 em { color:var(--orange); font-style:normal; }
.portal-hero p { margin:0; color:#67756d; font-size:clamp(1rem,2.2vw,1.2rem); line-height:1.7; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.service-card { position:relative; min-height:310px; padding:30px; display:flex; flex-direction:column; color:var(--ink); text-decoration:none; background:rgba(255,255,251,.94); border:1px solid var(--line); border-radius:30px; box-shadow:0 18px 45px rgba(73,54,25,.1); overflow:hidden; transition:transform .2s ease,box-shadow .2s ease; }
.service-card:hover,.service-card:focus-visible { transform:translateY(-6px); box-shadow:0 24px 55px rgba(73,54,25,.16); outline:none; }
.service-card::after { content:""; position:absolute; width:180px; height:180px; right:-70px; bottom:-75px; border-radius:50%; background:rgba(242,118,53,.13); }
.service-card.about::after { background:rgba(57,121,87,.13); }
.service-card.community::after { background:rgba(92,87,173,.13); }
.service-card.games::after { background:rgba(42,141,184,.14); }
.icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:auto; background:#fff0de; border-radius:18px; font-size:1.75rem; }
.about .icon { background:#e9f4eb; }
.community .icon { background:#efedff; }
.games .icon { background:#e6f6fb; }
.number { position:absolute; top:32px; right:32px; color:#c5bbab; font-size:.8rem; font-weight:900; letter-spacing:.1em; }
.service-card strong { margin-top:34px; font-size:1.55rem; letter-spacing:-.03em; }
.service-card small { max-width:390px; margin-top:9px; color:#68756e; font-size:.93rem; line-height:1.55; }
.arrow { z-index:1; margin-top:22px; color:var(--orange); font-weight:900; }
.about .arrow { color:var(--green); }
.community .arrow { color:#5c57ad; }
.games .arrow { color:#237da3; }
footer { padding-top:36px; color:#7c877f; text-align:center; font-size:.8rem; }
@media (max-width:650px) { .portal{padding-top:42px}.portal-hero{margin-bottom:30px}.service-grid{grid-template-columns:1fr}.service-card{min-height:270px;padding:24px;border-radius:24px}.number{top:27px;right:25px} }