:root{--ink:#14364b;--muted:#71838f;--line:#d7e5e8;--teal:#176577;--teal2:#2d8398;--coral:#c96658;--coral2:#e8896f}
*{box-sizing:border-box}body{margin:0;background:#f4faf9;color:var(--ink);font-family:Pretendard,"Malgun Gothic",sans-serif}.shell{width:min(1024px,100%);margin:0 auto;padding:0 20px}
.site-header{position:sticky;z-index:20;top:0;border-bottom:1px solid #e1e9ec;background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}.head-row{display:flex;height:68px;align-items:center;gap:18px}.brand{color:#2670d5;font-size:25px;font-weight:900;letter-spacing:-1.2px;text-decoration:none}.search{height:42px;min-width:0;flex:1;padding:0 18px;border:1px solid #d5dee5;border-radius:24px;background:#fff;font-size:14px}.header-action{border:0;background:transparent;color:#41515d;font-size:12px;text-decoration:none}.hub-nav{display:flex;gap:26px;overflow:auto;padding-bottom:13px;white-space:nowrap;scrollbar-width:none}.hub-nav a{color:#41515d;font-size:13px;font-weight:800;text-decoration:none}.hub-nav a.active{padding-bottom:11px;border-bottom:2px solid #2773da;color:#2773da}
.community-main{padding:12px 0 70px}.community-hero{position:relative;overflow:hidden;display:grid;min-height:142px;grid-template-columns:minmax(0,1fr) 150px;align-items:center;padding:20px 34px;border:1px solid #c8dfe2;border-radius:20px;background:linear-gradient(135deg,#e8f8f8,#fffdf5);box-shadow:0 12px 30px rgba(39,91,104,.08)}.community-hero.wish{border-color:#efd2c5;background:linear-gradient(135deg,#fff6ef,#fffdf8)}.hero-copy .eyebrow{margin:0 0 6px;color:#29788a;font-size:9px;font-weight:900;letter-spacing:1.5px}.community-hero.wish .eyebrow{color:#bd624f}.hero-copy h1{margin:0;color:#123348;font-size:28px;line-height:1.15;letter-spacing:-1px}.hero-copy p{margin:7px 0 0;color:#617985;font-size:12px;line-height:1.5}.hero-meta{display:flex;gap:7px;margin-top:11px}.hero-meta span{padding:5px 9px;border-radius:999px;background:#fff;color:#315668;font-size:9px;font-weight:900;box-shadow:0 5px 14px rgba(39,91,104,.07)}.community-hero img{justify-self:end;width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(37,88,101,.14))}
.community-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 16px}.filter-row{display:flex;gap:7px;overflow:auto;scrollbar-width:none}.filter{flex:0 0 auto;padding:9px 14px;border:1px solid #cfdee2;border-radius:999px;background:#fff;color:#56707d;font-size:11px;font-weight:800;cursor:pointer}.filter.active{border-color:var(--teal);background:var(--teal);color:#fff}.wish-page .filter.active{border-color:var(--coral);background:var(--coral)}.message-search{width:250px;height:40px;padding:0 14px;border:1px solid #cedde2;border-radius:20px;background:#fff;color:#294b5d;font-size:12px}
.community-intro{display:grid;min-height:124px;grid-template-columns:minmax(0,1fr) auto 108px;align-items:center;gap:14px;padding:12px 24px;border:1px solid #c8dfe2;border-radius:18px;background:linear-gradient(135deg,#e8f8f8,#fffdf5);box-shadow:0 10px 24px rgba(39,91,104,.07)}.wish-page .community-intro{border-color:#efd2c5;background:linear-gradient(135deg,#fff6ef,#fffdf8)}.intro-eyebrow{margin:0 0 6px;color:#3275c6;font-size:9px;font-weight:900;letter-spacing:.5px}.wish-page .intro-eyebrow{color:#bd624f}.community-intro h1{margin:0;color:#181d22;font-size:25px;line-height:1.18;letter-spacing:-.9px}.community-intro div>p:last-child{max-width:600px;margin:6px 0 0;color:#68747b;font-size:10.5px;line-height:1.5}.community-intro>a{display:inline-flex;min-width:142px;min-height:40px;align-items:center;justify-content:center;padding:0 18px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:linear-gradient(135deg,#2d6e87,#478fa0);box-shadow:0 7px 16px rgba(39,91,104,.16);color:#fff;font-size:11px;font-weight:900;text-decoration:none}.wish-page .community-intro>a{background:linear-gradient(135deg,#bd6d5c,#d58a77);box-shadow:0 7px 16px rgba(158,82,64,.14)}.community-intro img{width:102px;height:102px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(37,88,101,.12))}.privacy-notice{display:flex;gap:12px;margin:18px 0 28px;padding:16px;border-radius:6px;background:#f7f7f7;color:#4d565d}.privacy-notice>b{display:flex;width:20px;height:20px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:50%;background:#2e70cb;color:#fff;font-size:11px}.privacy-notice strong{display:block;margin-bottom:4px;font-size:12px}.privacy-notice p{margin:0;color:#6d7479;font-size:11px;line-height:1.55}.community-intro+.board-heading{margin-top:24px}.board-heading{margin:0 0 14px}.board-heading>p{margin:0 0 5px;color:#3275c6;font-size:10px;font-weight:900}.board-heading h2{margin:0;color:#171c20;font-size:21px;letter-spacing:-.5px}.board-heading h2 span{margin-left:6px;color:#2e70cb;font-size:11px}.board-heading small{display:block;margin-top:6px;color:#899197;font-size:10px}.message-board-head{display:grid;grid-template-columns:174px minmax(0,1fr);padding:11px 16px;border:1px solid #dde2e4;border-bottom:0;border-radius:7px 7px 0 0;background:#f8f8f8;color:#5d676d;font-size:11px;font-weight:900}.message-grid{display:flex;overflow:hidden;flex-direction:column;border:1px solid #dde2e4;border-radius:0 0 7px 7px;background:#fff}.message-card{display:grid;min-height:54px;grid-template-columns:174px minmax(0,1fr);align-items:center;padding:0 16px;border:0;border-bottom:1px solid #e5e8e9;background:#fff}.message-card:last-of-type{border-bottom:0}.message-card.new{background:#fffdf4}.message-card header{display:block}.artist{color:#2b6dc2;font-size:11px;font-weight:900}.message-card time{display:none}.message-card p{overflow:hidden;margin:0;color:#263e4b;font-size:12px;font-weight:600;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}.message-card footer{display:none}.empty-state{padding:60px 20px;background:#fff;text-align:center;color:#758792}.list-actions{display:flex;justify-content:center;margin-top:24px}.back-participate{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:0 22px;border-radius:4px;background:#2868c7;color:#fff;font-size:13px;font-weight:900;text-decoration:none}.wish-page .back-participate{background:#2868c7}.footer{padding:28px;color:#80909a;font-size:11px;text-align:center}
@media(max-width:767px){.shell{padding:0 14px}.head-row{height:58px}.brand{font-size:21px}.search{height:36px}.hub-nav{gap:20px;font-size:12px}.community-main{padding-top:6px}.community-intro{min-height:132px;grid-template-columns:minmax(0,1fr) 70px;gap:9px;padding:13px;border-radius:14px}.community-intro div{min-width:0}.community-intro h1{font-size:20px}.community-intro div>p:last-child{font-size:9.5px}.community-intro>a{min-height:36px;grid-column:1/-1;grid-row:2;width:100%}.community-intro img{width:68px;height:82px;grid-column:2;grid-row:1}.community-intro+.board-heading{margin-top:18px}.privacy-notice{margin:14px 0 24px;padding:13px}.message-board-head{grid-template-columns:90px minmax(0,1fr);padding:10px 12px}.message-grid{border-radius:0 0 7px 7px}.message-card{min-height:60px;grid-template-columns:90px minmax(0,1fr);padding:0 12px}.message-card p{font-size:11px}.back-participate{width:100%}}
@media(max-width:479px){.head-row .search{display:none}.community-intro h1{font-size:20px}}

/* Desktop list banners stay editorial; the direct action remains available on mobile. */
@media(min-width:768px){.community-intro{grid-template-columns:minmax(0,1fr) 108px}.community-intro>a{display:none}}
@media(max-width:767px){.community-intro>a{display:inline-flex}}

/* Match participation actions to each page's banner palette. */
.back-participate{background:linear-gradient(110deg,#174b70,#2d8398)}.wish-page .back-participate{background:linear-gradient(110deg,#c96658,#e8896f)}
.load-more-wrap{display:flex;justify-content:center;margin-top:16px}.load-more-button{min-width:150px;height:42px;border:1px solid #cfd8dc;border-radius:4px;background:#fff;color:#345160;font-size:12px;font-weight:900;cursor:pointer}.load-more-button:disabled{cursor:wait;opacity:.55}
@media(max-width:767px){.wish-page .community-intro>div>p:last-child{text-wrap:balance}}

/* Use the approved Ktown4u artwork instead of a text-rendered logo. */
.brand{display:flex;flex:0 0 auto;align-items:center;letter-spacing:0}
.brand img{display:block;width:140px;height:auto}
@media(max-width:767px){.brand img{width:116px}}