:root { --blue:#315fc5; --blue-deep:#254a9c; --soft-blue:#6f91f5; --blue-pale:#edf3ff; --line:#dfe5f0; --gray:#627493; --ink:#25324a; }
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img,video { max-width:100%; }
body { min-width:320px; overflow-x:hidden; background:#fbfcff; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }
button,input { font:inherit; } button { border:0; cursor:pointer; } a { color:inherit; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* UI 1 — original concept, refined */
.site-header { height:84px; display:flex; align-items:center; padding:0 48px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); box-shadow:0 2px 14px rgba(41,67,120,.04); }
.logo { width:280px; flex:0 0 auto; display:flex; align-items:center; }
.logo img { display:block; width:255px; height:auto; max-width:100%; }
.navigation { flex:1; display:flex; justify-content:center; align-items:center; gap:clamp(20px,3vw,60px); }
.nav-item { min-width:132px; height:44px; display:grid; place-items:center; padding:0 18px; border:0; border-radius:11px; background:transparent; color:#6a768d; font-size:17px; font-weight:800; text-decoration:none; white-space:nowrap; transition:background .18s,color .18s,transform .18s; }
.nav-item:hover { background:rgba(49,95,197,.09); color:var(--blue); transform:translateY(-1px); }
.nav-item:active { transform:translateY(0) scale(.97); }
.nav-item.active { color:var(--blue-deep); box-shadow:inset 0 -2px 0 var(--blue); }
.header-tools { width:110px; position:relative; display:flex; justify-content:flex-end; gap:10px; }
.settings-button,.profile-button { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; color:#fff; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.settings-button { border:1px solid #dce4f0; background:#f5f8fd; color:#63718a; font-size:19px; }.settings-button:hover,.profile-button:hover { transform:translateY(-2px); box-shadow:0 7px 13px rgba(39,67,122,.14); }
.profile-button { background:linear-gradient(135deg,#416fd3,#2d58ba); display:grid; place-items:center; }
.profile-button.signed-in { font-size:15px; font-weight:800; }.profile-button.signed-in span { display:none; }
.profile-button span { width:15px; height:15px; border:2px solid #fff; border-radius:50%; position:relative; transform:translateY(-5px); }
.profile-button span::after { content:""; position:absolute; top:12px; left:50%; width:20px; height:10px; border:2px solid #fff; border-bottom:0; border-radius:12px 12px 0 0; transform:translateX(-50%); }
.user-menu { position:absolute; top:54px; right:0; z-index:15; width:250px; padding:10px; border:1px solid #e0e5ee; border-radius:14px; background:#fff; box-shadow:0 16px 35px rgba(37,50,74,.18); }.user-summary { display:flex; align-items:center; gap:10px; padding:10px 9px 14px; border-bottom:1px solid #edf0f5; }.user-avatar { width:36px; height:36px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; background:var(--blue-pale); color:var(--blue); font-size:14px; font-weight:800; }.user-summary strong,.user-summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.user-summary strong { max-width:170px; font-size:13px; }.user-summary small { max-width:170px; margin-top:4px; color:#818ca0; font-size:11px; }.user-menu button { width:100%; height:38px; padding:0 9px; border-radius:8px; background:transparent; color:#536079; font-size:12px; font-weight:700; text-align:left; }.user-menu button:hover { background:#f1f5fc; color:var(--blue); }
.search-section { width:min(1000px,80%); margin:160px auto 0; }
.search-box { height:88px; display:flex; border:1px solid #d4deef; border-radius:26px; overflow:hidden; background:#fff; box-shadow:0 7px 19px rgba(38,64,115,.13); transition:border-color .2s,box-shadow .2s; }.search-box:focus-within { border-color:var(--blue); box-shadow:0 9px 24px rgba(49,95,197,.2); }
.search-box input { min-width:0; flex:1; padding:0 28px; border:0; outline:0; font-size:22px; }
.search-box input::placeholder { color:#b0b0b0; }
.search-box button { width:152px; color:#fff; background:linear-gradient(135deg,#7d9cff,#5276dd); font-size:25px; font-weight:800; transition:filter .2s; }.search-box button:hover { filter:brightness(.95); }
.dashboard-container { margin:100px 6vw 45px; }
.card-section { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:64px; }
.info-card { min-height:300px; display:flex; flex-direction:column; padding:34px 40px; border:1px solid rgba(59,83,129,.15); border-radius:30px; background:#74839d; color:#f7f9ff; box-shadow:0 11px 22px rgba(46,64,102,.12); transition:transform .2s,box-shadow .2s; }.info-card:hover { transform:translateY(-4px); box-shadow:0 17px 28px rgba(46,64,102,.18); }
.card-heading { display:flex; align-items:center; }
.card-heading h2 { font-size:27px; }
.empty-card { flex:1; display:flex; flex-direction:column; justify-content:center; border-top:1px solid rgba(255,255,255,.28); margin-top:19px; }
.empty-card p { font-size:16px; font-weight:700; }.empty-card small { margin-top:9px; color:#e3e3e3; font-size:13px; }
.card-link { color:#fff; font-size:13px; font-weight:700; text-decoration:none; }.card-link::after { content:" →"; }
.advertisement-slot { min-height:92px; display:flex; align-items:center; justify-content:center; flex-direction:column; margin-top:26px; border:1px dashed #c5d2e9; border-radius:14px; background:#fff; color:#8290a6; }
.advertisement-slot b { color:#9aacc8; font-size:10px; letter-spacing:.12em; }.advertisement-slot span { margin-top:7px; color:#52627c; font-size:13px; font-weight:700; }.advertisement-slot small { margin-top:5px; font-size:11px; }

/* Settings and login */
.settings-overlay,.login-overlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(20,25,40,.38); opacity:0; visibility:hidden; transition:.2s; }.settings-overlay.show,.login-overlay.show { opacity:1; visibility:visible; }
.settings-modal,.login-modal { width:min(500px,100%); padding:30px; border-radius:20px; background:#fff; box-shadow:0 20px 55px rgba(0,0,0,.2); }
.modal-top { display:flex; justify-content:space-between; align-items:start; }.modal-top p { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.12em; }.modal-top h2,.login-modal h2 { margin-top:5px; font-size:24px; }.modal-top button,.close-button { background:transparent; color:#888; font-size:28px; }.modal-description,.login-modal>p { margin-top:13px; color:#777; font-size:13px; line-height:1.6; }
.ui-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:23px; }.ui-option { padding:13px; border:2px solid #e1e3e9; border-radius:13px; background:#fff; color:left; text-align:left; }.ui-option.selected { border-color:var(--blue); }.ui-option strong,.ui-option small { display:block; }.ui-option strong { margin-top:10px; font-size:14px; }.ui-option small { margin-top:5px; color:#7d8494; font-size:11px; line-height:1.45; }
.preview { height:54px; display:grid; gap:4px; padding:7px; border-radius:6px; background:#f4f4f4; }.preview i { display:block; background:#b2b2b2; border-radius:2px; }.classic-preview { grid-template-columns:repeat(3,1fr); }.classic-preview i { height:100%; }.portal-preview { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }.portal-preview i:first-child { grid-row:span 2; }.portal-preview i { background:#d2d2d2; }
.login-modal { position:relative; width:min(420px,100%); }.close-button { position:absolute; top:14px; right:19px; }.login-modal form { display:grid; gap:13px; margin-top:24px; }.login-modal label { display:grid; gap:7px; font-size:13px; font-weight:700; }.login-modal input { height:48px; padding:0 13px; border:1px solid #ddd; border-radius:10px; outline-color:var(--soft-blue); }.login-modal form button { height:50px; border-radius:11px; background:var(--soft-blue); color:#fff; font-weight:800; }.signup-only { display:none !important; }.signup-only.visible { display:grid !important; }.auth-message { min-height:18px; color:#c95050; font-size:12px; text-align:center; }.auth-message.success { color:#258553; }.auth-toggle { width:100%; margin-top:15px; background:transparent; color:var(--blue); font-size:13px; font-weight:700; }
.login-modal .consent-field { grid-template-columns:auto 1fr; align-items:center; gap:7px; color:#65718a; font-size:11px; font-weight:500; }.login-modal .consent-field input { width:15px; height:15px; padding:0; }.login-modal .consent-field a { color:var(--blue); font-weight:700; }
.auth-reset { display:block; width:100%; margin-top:8px; background:transparent; color:#7a869a; font-size:12px; text-decoration:underline; }
.auth-reset:hover { color:var(--blue); }
.account-modal { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }.account-modal select { height:48px; padding:0 13px; border:1px solid #ddd; border-radius:10px; background:#fff; color:var(--ink); outline-color:var(--soft-blue); }.account-danger { margin-top:24px; padding-top:20px; border-top:1px solid #e7ebf1; }.account-danger strong { color:#a24b55; font-size:13px; }.account-danger p { margin-top:7px; color:#7d8798; font-size:11px; line-height:1.55; }.account-danger>button { margin-top:12px; border:0; background:transparent; color:#b45761; font-size:12px; text-decoration:underline; }.account-danger>div { display:grid; gap:10px; margin-top:14px; padding:14px; border-radius:10px; background:#fff4f4; }.account-danger label { display:grid; gap:6px; color:#6d5559; font-size:12px; font-weight:700; }.account-danger label input { height:42px; padding:0 10px; border:1px solid #e2c7c9; border-radius:8px; }.account-danger #withdrawConfirm { height:40px; border-radius:8px; background:#b95560; color:#fff; font-size:12px; font-weight:800; }
.account-modal textarea { min-height:82px; padding:11px 13px; border:1px solid #dbe3ef; border-radius:10px; background:#fbfcff; color:var(--ink); line-height:1.5; resize:vertical; outline-color:var(--soft-blue); }

/* UI 2 — compact portal inspired layout */
body[data-ui="portal"] { background:#f5f6f7; } body[data-ui="portal"] .site-header { height:68px; max-width:1280px; margin:auto; padding:0 22px; border:0; } body[data-ui="portal"] .logo { width:170px; } body[data-ui="portal"] .logo img { width:145px; max-width:100%; } body[data-ui="portal"] .navigation { justify-content:flex-start; gap:4px; } body[data-ui="portal"] .nav-item { min-width:auto; height:34px; padding:0 11px; border-radius:4px; background:transparent; color:#474747; font-size:14px; } body[data-ui="portal"] .nav-item.active { background:transparent; color:#315fc5; box-shadow:inset 0 -2px 0 #315fc5; } body[data-ui="portal"] .nav-item:hover { background:#e8f8ee; color:#03a94d; } body[data-ui="portal"] .header-tools { width:auto; } body[data-ui="portal"] .profile-button { background:#03c75a; }
body[data-ui="portal"] main { max-width:1280px; margin:auto; } body[data-ui="portal"] .search-section { width:min(720px,100%); margin:42px auto 0; } body[data-ui="portal"] .search-box { height:60px; border:2px solid #315fc5; border-radius:6px; box-shadow:none; } body[data-ui="portal"] .search-box button { width:105px; background:#315fc5; font-size:17px; } body[data-ui="portal"] .dashboard-container { max-width:1100px; margin:28px auto 45px; } body[data-ui="portal"] .card-section { grid-template-columns:2fr 1fr; grid-template-rows:repeat(2,190px); gap:12px; } body[data-ui="portal"] .info-card { min-height:0; padding:23px; border:1px solid #e3e5e8; border-radius:8px; background:#fff; color:#333; } body[data-ui="portal"] .school-card { grid-row:span 2; } body[data-ui="portal"] .card-heading h2 { font-size:18px; } body[data-ui="portal"] .card-heading span { color:#03a94d; } body[data-ui="portal"] .empty-card { margin-top:17px; border-color:#edf0f2; } body[data-ui="portal"] .empty-card p { font-size:14px; } body[data-ui="portal"] .empty-card small { color:#777; font-size:12px; } body[data-ui="portal"] .card-link { color:#03a94d; } body[data-ui="portal"] .advertisement-slot { min-height:105px; margin-top:12px; border-radius:7px; background:#fff; }

/* Community */
.community-main { max-width:1120px; margin:70px auto; padding:0 24px; }.community-heading { display:flex; justify-content:space-between; align-items:end; padding-bottom:20px; border-bottom:1px solid #ddd; }.community-heading h1 { font-size:27px; }.community-heading p { margin-top:8px; color:#777; font-size:13px; }.board-layout { display:grid; grid-template-columns:1fr 260px; gap:20px; margin-top:20px; }.board,.side-panel { border:1px solid #ddd; border-radius:14px; background:#fff; }.board-tabs { display:flex; gap:20px; padding:0 22px; border-bottom:1px solid #eee; }.board-tabs button { height:48px; background:transparent; color:#777; font-weight:700; }.empty-board { min-height:300px; display:grid; place-items:center; color:#888; text-align:center; }.empty-board p { margin-top:8px; font-size:13px; }.side-panel { padding:21px; }.side-panel h2 { font-size:15px; }.side-panel p { margin-top:9px; color:#777; font-size:12px; line-height:1.6; }.side-panel a { display:inline-block; margin-top:15px; color:var(--blue); font-size:12px; font-weight:700; text-decoration:none; }
.write-post-button,.post-submit { min-height:43px; padding:0 20px; border-radius:10px; background:var(--blue); color:#fff; font-weight:800; }.write-post-button:hover,.post-submit:hover { background:var(--blue-deep); }.board-tabs button.active { color:var(--blue); border-bottom:2px solid var(--blue); }.post-list { min-height:300px; }.post-item { display:grid; grid-template-columns:76px minmax(0,1fr) auto; align-items:center; column-gap:12px; padding:18px 22px; border-bottom:1px solid #eef0f4; }.post-item:last-child { border-bottom:0; }.post-item:hover { background:#f8faff; }.post-category { grid-row:span 2; width:max-content; padding:5px 9px; border-radius:7px; background:var(--blue-pale); color:var(--blue); font-size:11px; font-weight:800; }.post-item strong { overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.post-item p { grid-column:2; overflow:hidden; margin-top:6px; color:#78859a; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.post-item small { grid-column:3; grid-row:1 / span 2; color:#9ba5b5; font-size:11px; white-space:nowrap; }.community-overlay { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(20,25,40,.38); opacity:0; visibility:hidden; transition:.2s; }.community-overlay.show { opacity:1; visibility:visible; }.post-modal { width:min(580px,100%); padding:30px; border-radius:20px; background:#fff; box-shadow:0 20px 55px rgba(0,0,0,.2); }.post-modal .modal-top button { border:0; }.post-modal form { display:grid; gap:15px; margin-top:22px; }.post-modal label { display:grid; gap:7px; color:#46536b; font-size:13px; font-weight:700; }.post-modal input:not([type="checkbox"]),.post-modal select,.post-modal textarea { width:100%; border:1px solid #dbe1eb; border-radius:10px; outline-color:var(--soft-blue); }.post-modal input:not([type="checkbox"]),.post-modal select { height:45px; padding:0 12px; }.post-modal textarea { min-height:180px; padding:12px; resize:vertical; line-height:1.55; }.post-modal .anonymous-option { display:flex; align-items:center; gap:8px; }.post-message { min-height:18px; color:#c95050; font-size:12px; text-align:center; }.post-message.success { color:#258553; }.post-submit:disabled { cursor:wait; opacity:.65; }
.post-item:focus-visible { outline:2px solid var(--soft-blue); outline-offset:-2px; }.post-detail-modal { max-height:min(760px,calc(100vh - 40px)); overflow:auto; }.detail-meta { margin-top:12px; color:#8792a5; font-size:12px; }.detail-body { min-height:150px; padding:24px 0; border-bottom:1px solid #e9edf4; color:#34415a; font-size:14px; line-height:1.8; white-space:pre-wrap; }.comments-section { padding-top:22px; }.comments-section h3 { font-size:15px; }.comments-section h3 span { color:var(--blue); }.comment-list { margin-top:12px; }.comment-item { display:grid; grid-template-columns:1fr auto; gap:5px; padding:13px 0; border-bottom:1px solid #eef1f5; }.comment-item strong { font-size:12px; }.comment-item small { color:#98a2b1; font-size:11px; }.comment-item p { grid-column:1 / -1; color:#4b5870; font-size:13px; line-height:1.5; white-space:pre-wrap; }.no-comments { padding:20px 0; color:#8a95a5; font-size:12px; text-align:center; }.comment-form { display:flex !important; grid-template-columns:1fr auto; gap:8px !important; margin-top:16px !important; }.comment-form input { height:42px; min-width:0; padding:0 12px; border:1px solid #dbe1eb; border-radius:9px; outline-color:var(--soft-blue); }.comment-form button { min-width:62px; border-radius:9px; background:#eff3fa; color:var(--blue); font-size:12px; font-weight:800; }.comment-form button:disabled { opacity:.6; }
.detail-actions { display:flex; align-items:center; gap:9px; }.delete-button,.comment-delete { border:0; background:transparent; color:#d25d67; font-size:12px; font-weight:700; }.delete-button:hover,.comment-delete:hover { text-decoration:underline; }.comment-actions { grid-column:2; grid-row:2; display:flex; justify-self:end; gap:8px; }.comment-edit,.comment-delete { background:transparent; color:#98a2b1; font-size:11px; }.comment-edit:hover { color:var(--blue); text-decoration:underline; }.comment-form #commentBody { flex:1; }.comment-anonymous { display:flex !important; align-items:center; gap:4px; flex:0 0 auto; color:#76839a; font-size:11px !important; font-weight:600 !important; white-space:nowrap; }.comment-anonymous input { width:14px !important; height:14px !important; padding:0 !important; }
.comment-edit-form { grid-column:1 / -1; display:grid; gap:7px; margin-top:5px; }.comment-edit-form textarea { width:100%; min-height:76px; padding:9px 10px; border:1px solid #dbe3ef; border-radius:8px; resize:vertical; color:#3f4d66; line-height:1.5; }.comment-edit-form>div { display:flex; justify-content:flex-end; gap:6px; }.comment-edit-form button { min-width:56px; height:32px; border-radius:6px; background:#eef3fb; color:#526fae; font-size:11px; font-weight:800; }.comment-edit-form button[type="submit"] { background:var(--blue); color:#fff; }

@media (max-width:1300px) and (min-width:761px) { .site-header { padding:0 28px; }.logo { width:220px; }.logo img { width:220px; }.navigation { gap:16px; }.nav-item { min-width:110px; font-size:16px; } }
@media (max-width:760px) { .site-header { height:auto; min-height:70px; flex-wrap:wrap; padding:10px 16px; gap:8px; }.logo { width:auto; flex:1; }.logo img { width:190px; max-width:100%; }.header-tools { width:auto; }.settings-button,.profile-button { width:40px; height:40px; }.navigation { order:3; display:grid; grid-template-columns:repeat(3,1fr); width:100%; gap:6px; }.nav-item { min-width:0; height:39px; padding:0 4px; border-radius:10px; font-size:12px; }.search-section { width:calc(100% - 32px); margin-top:65px; }.search-box { height:64px; border-radius:18px; }.search-box input { padding:0 16px; font-size:15px; }.search-box button { width:88px; font-size:18px; }.dashboard-container { margin:60px 16px 32px; }.card-section { grid-template-columns:1fr; gap:18px; }.info-card { min-height:245px; padding:30px; border-radius:26px; }.advertisement-slot { min-height:90px; margin-top:18px; }.ui-options { grid-template-columns:1fr; }.settings-modal,.login-modal { padding:24px; }
body[data-ui="portal"] .site-header { padding:10px 16px; } body[data-ui="portal"] .navigation { justify-content:initial; } body[data-ui="portal"] .search-section { width:calc(100% - 32px); margin-top:26px; } body[data-ui="portal"] .dashboard-container { margin:18px 16px 30px; } body[data-ui="portal"] .card-section { grid-template-columns:1fr; grid-template-rows:none; } body[data-ui="portal"] .info-card,body[data-ui="portal"] .school-card { min-height:190px; grid-row:auto; }.community-main { margin:35px auto; padding:0 16px; }.board-layout { grid-template-columns:1fr; }.side-panel { display:none; } }
@media (max-width:760px) { .community-heading { align-items:start; gap:16px; }.community-heading h1 { font-size:23px; }.write-post-button { flex:0 0 auto; padding:0 14px; }.post-item { grid-template-columns:58px minmax(0,1fr); padding:16px; }.post-item small { grid-column:2; grid-row:auto; margin-top:7px; }.post-item p { display:none; } }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; max-width:1400px; margin:0 auto; padding:25px 6vw 32px; border-top:1px solid #e4e9f2; color:#8994a8; font-size:11px; }.site-footer nav { display:flex; gap:16px; }.site-footer a { color:#68768f; text-decoration:none; }.site-footer a:hover { color:var(--blue); text-decoration:underline; }.legal-page { max-width:880px; margin:70px auto; padding:0 24px 70px; }.legal-page h1 { font-size:30px; }.legal-page .legal-updated { margin-top:10px; color:#7a879b; font-size:13px; }.legal-page section { margin-top:35px; padding-top:28px; border-top:1px solid #e2e7ef; }.legal-page h2 { font-size:18px; }.legal-page p,.legal-page li { margin-top:11px; color:#536079; font-size:14px; line-height:1.75; }.legal-page ul { padding-left:20px; }.legal-page .legal-notice { padding:16px 18px; border-radius:12px; background:#fff7df; color:#6d5420; font-size:13px; line-height:1.65; }
@media (max-width:760px) { .site-footer { display:block; padding:22px 16px 28px; line-height:1.6; }.site-footer nav { margin-top:10px; }.legal-page { margin:38px auto; padding:0 16px 45px; }.legal-page h1 { font-size:25px; } }

/* Unified interface layer */
:root { --surface:#ffffff; --surface-soft:#f6f8fc; --blue:#3d67d3; --blue-deep:#2d52af; --soft-blue:#6f91f5; --blue-pale:#eef3ff; --line:#e2e8f2; --ink:#202d45; --muted:#728099; --shadow:0 12px 30px rgba(45,67,112,.09); }
body { min-height:100vh; display:flex; flex-direction:column; background:linear-gradient(180deg,#fbfcff 0,#f7f9fd 100%); } body>main { flex:1; }
.site-header { position:relative; z-index:20; height:78px; padding:0 clamp(20px,4vw,64px); border-color:var(--line); background:rgba(255,255,255,.92); box-shadow:0 1px 0 rgba(38,57,93,.03); backdrop-filter:blur(12px); }.logo { width:250px; }.logo img { width:238px; }.navigation { gap:clamp(6px,1.3vw,24px); }.nav-item { min-width:auto; height:40px; padding:0 14px; border-radius:9px; color:var(--muted); font-size:15px; }.nav-item.active { color:var(--blue-deep); box-shadow:inset 0 -2px 0 var(--blue); }.header-tools { width:auto; }.profile-button { width:42px; height:42px; border-radius:50%; box-shadow:0 6px 15px rgba(45,82,175,.2); }.profile-button:hover { box-shadow:0 9px 19px rgba(45,82,175,.26); }
.search-section { width:min(980px,calc(100% - 32px)); margin:112px auto 0; }.search-box { height:76px; border:1px solid #d9e2f1; border-radius:20px; box-shadow:var(--shadow); }.search-box input { padding:0 26px; color:var(--ink); font-size:19px; }.search-box button { width:134px; background:var(--blue); font-size:20px; }.search-box button:hover { background:var(--blue-deep); filter:none; }
.dashboard-container { width:min(1400px,calc(100% - 32px)); margin:64px auto 42px; }.card-section { gap:20px; }.info-card { position:relative; min-height:270px; overflow:hidden; padding:29px 30px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }.info-card::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--blue); }.info-card:hover { transform:translateY(-3px); box-shadow:0 17px 34px rgba(45,67,112,.14); }.meal-card::before { background:#5e7cdb; }.admissions-card::before { background:#8199e7; }.card-heading h2 { font-size:21px; letter-spacing:-.03em; }.empty-card { margin-top:17px; border-top:1px solid var(--line); }.empty-card p { color:#4e5e77; font-size:14px; }.empty-card small { color:#8996aa; font-size:12px; }.card-link { align-self:flex-start; padding:8px 11px; border-radius:8px; background:var(--blue-pale); color:var(--blue-deep); font-size:12px; }.card-link:hover { background:#dfe9ff; }.advertisement-slot { min-height:82px; margin-top:20px; border-color:#d7e1f0; border-radius:12px; box-shadow:none; }.advertisement-slot span { color:#63728b; }
.user-menu { top:50px; border-color:var(--line); border-radius:16px; box-shadow:var(--shadow); }.settings-modal,.login-modal,.post-modal { border:1px solid var(--line); border-radius:18px; box-shadow:0 22px 55px rgba(29,43,73,.2); }.login-modal form button,.post-submit,.write-post-button { background:var(--blue); }.login-modal form button:hover,.post-submit:hover,.write-post-button:hover { background:var(--blue-deep); }.login-modal input,.account-modal select { border-color:#dbe3ef; background:#fbfcff; }.account-danger { border-color:var(--line); }
.community-main { width:min(1120px,calc(100% - 32px)); margin:58px auto; padding:0; }.community-heading { padding:0 4px 20px; border-color:var(--line); }.community-heading h1 { font-size:26px; letter-spacing:-.04em; }.community-heading p { color:var(--muted); }.board,.side-panel { border-color:var(--line); border-radius:16px; box-shadow:0 6px 20px rgba(45,67,112,.05); }.board-tabs { gap:4px; padding:9px 12px; border-color:var(--line); }.board-tabs button { height:36px; padding:0 12px; border-radius:8px; font-size:13px; }.board-tabs button.active { border:0; background:var(--blue-pale); color:var(--blue-deep); }.post-item { padding:17px 20px; }.post-item:hover { background:#f6f8fd; }.post-category { background:var(--blue-pale); color:var(--blue-deep); }.side-panel { padding:22px; background:linear-gradient(145deg,#fff,#f6f8ff); }.side-panel h2 { color:var(--ink); }.side-panel p { color:var(--muted); }.post-modal { background:var(--surface); }.comment-form button { background:var(--blue-pale); color:var(--blue-deep); }
body[data-ui="portal"] { background:#f4f6fb; } body[data-ui="portal"] .site-header { height:70px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); } body[data-ui="portal"] .logo img { width:170px; } body[data-ui="portal"] .nav-item:hover { background:var(--blue-pale); color:var(--blue-deep); } body[data-ui="portal"] .profile-button { background:var(--blue); } body[data-ui="portal"] .search-box { border-color:var(--blue); } body[data-ui="portal"] .info-card { border-radius:12px; background:var(--surface); color:var(--ink); } body[data-ui="portal"] .empty-card { border-color:var(--line); } body[data-ui="portal"] .empty-card p { color:#4e5e77; } body[data-ui="portal"] .empty-card small { color:#8996aa; } body[data-ui="portal"] .card-link { color:var(--blue-deep); } body[data-ui="portal"] .advertisement-slot { background:var(--surface); }
.portal-layout { display:contents; }.portal-sidebar,.portal-profile-panel { display:none; }
@media (max-width:760px) { .site-header { min-height:66px; padding:9px 16px; }.logo img { width:178px; }.navigation { gap:4px; }.nav-item { height:38px; padding:0 3px; font-size:12px; }.search-section { margin-top:58px; }.search-box { height:62px; border-radius:16px; }.search-box input { font-size:16px; }.dashboard-container { width:calc(100% - 32px); margin:48px auto 30px; }.card-section { gap:14px; }.info-card { min-height:210px; padding:25px; border-radius:17px; }.card-heading h2 { font-size:19px; }.community-main { width:calc(100% - 32px); margin:35px auto; }.board-layout { margin-top:15px; }.site-footer { width:calc(100% - 32px); padding-right:0; padding-left:0; } body[data-ui="portal"] .site-header { height:auto; } }

/* Portal layout: wide and deliberate rather than a compressed dashboard */
body[data-ui="portal"] .site-header { max-width:none; margin:0; padding:0 clamp(20px,4vw,64px); } body[data-ui="portal"] .logo { width:230px; } body[data-ui="portal"] .logo img { width:190px; } body[data-ui="portal"] .navigation { justify-content:center; gap:clamp(5px,1vw,16px); } body[data-ui="portal"] .nav-item { padding:0 13px; }
body[data-ui="portal"] main { width:100%; max-width:none; } body[data-ui="portal"] .search-section { width:min(920px,calc(100% - 32px)); margin:56px auto 0; } body[data-ui="portal"] .search-box { height:66px; border-width:1px; border-radius:14px; box-shadow:0 8px 20px rgba(45,67,112,.08); } body[data-ui="portal"] .search-box button { width:120px; font-size:18px; }
body[data-ui="portal"] .dashboard-container { width:min(1280px,calc(100% - 48px)); max-width:none; margin:36px auto 46px; } body[data-ui="portal"] .card-section { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:none; gap:16px; } body[data-ui="portal"] .info-card,body[data-ui="portal"] .school-card { min-height:238px; grid-row:auto; padding:27px; border-radius:14px; } body[data-ui="portal"] .card-heading h2 { font-size:19px; } body[data-ui="portal"] .empty-card { margin-top:16px; } body[data-ui="portal"] .advertisement-slot { min-height:88px; margin-top:16px; border-radius:12px; }
body[data-ui="portal"] .portal-layout { display:grid; grid-template-columns:minmax(0,1fr) 282px; gap:16px; align-items:stretch; } body[data-ui="portal"] .card-section { grid-template-columns:repeat(3,minmax(0,1fr)); } body[data-ui="portal"] .portal-profile-panel { display:block; min-height:238px; padding:23px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(150deg,#fff 0,#f0f4ff 100%); box-shadow:0 8px 20px rgba(45,67,112,.06); }.portal-panel-label { display:block; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.11em; }.portal-profile-guest>strong { display:block; margin-top:15px; color:var(--ink); font-size:16px; line-height:1.5; letter-spacing:-.03em; }.portal-profile-panel button { width:100%; height:38px; margin-top:17px; border-radius:8px; background:var(--blue); color:#fff; font-size:12px; font-weight:800; }.portal-profile-panel button:hover { background:var(--blue-deep); }.portal-user-head { display:flex; align-items:center; gap:10px; margin-top:14px; }.portal-avatar { width:42px; height:42px; display:grid; flex:0 0 auto; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:15px; font-weight:800; }.portal-user-head strong,.portal-user-head small { display:block; max-width:175px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.portal-user-head strong { color:var(--ink); font-size:14px; }.portal-user-head small { margin-top:4px; color:var(--muted); font-size:11px; }.portal-bio { min-height:42px; margin-top:15px; color:#66748b; font-size:12px; line-height:1.55; }.portal-profile-panel .portal-logout { margin-top:8px; background:#fff; color:#68768f; border:1px solid #dce4f1; }.portal-profile-panel .portal-logout:hover { background:#f5f7fb; color:var(--blue-deep); }
@media (max-width:760px) { body[data-ui="portal"] .site-header { padding:9px 16px; } body[data-ui="portal"] .logo { width:auto; } body[data-ui="portal"] .logo img { width:178px; } body[data-ui="portal"] .search-section { width:calc(100% - 32px); margin-top:30px; } body[data-ui="portal"] .dashboard-container { width:calc(100% - 32px); margin:24px auto 30px; } body[data-ui="portal"] .portal-layout { grid-template-columns:1fr; } body[data-ui="portal"] .portal-profile-panel { min-height:0; } body[data-ui="portal"] .card-section { grid-template-columns:1fr; gap:14px; } body[data-ui="portal"] .info-card,body[data-ui="portal"] .school-card { min-height:205px; } }

/* UI 1: spacious controls for touch and quick scanning */
body[data-ui="classic"] .nav-item { min-height:46px; padding:0 18px; } body[data-ui="classic"] .profile-button { width:46px; height:46px; } body[data-ui="classic"] .card-link { display:inline-flex; min-height:42px; align-items:center; padding:0 14px; } body[data-ui="classic"] .write-post-button { min-height:46px; padding:0 22px; } body[data-ui="classic"] .board-tabs button { min-height:44px; padding:0 15px; } body[data-ui="classic"] .post-item { min-height:76px; }

/* UI 2: dedicated mouse-oriented sidebar and compact hover targets */
body[data-ui="portal"] .portal-layout { grid-template-columns:minmax(0,1fr) 298px; gap:18px; } body[data-ui="portal"] .portal-sidebar { display:grid; gap:12px; align-content:start; } body[data-ui="portal"] .portal-profile-panel { min-height:0; padding:20px; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(45,67,112,.07); } body[data-ui="portal"] .portal-guide-panel { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(45,67,112,.05); } .portal-guide-panel>strong { padding:15px 17px 11px; color:var(--ink); font-size:13px; }.portal-guide-panel a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:42px; padding:0 17px; border-top:1px solid #edf0f5; color:#536079; font-size:12px; text-decoration:none; transition:background .15s,color .15s; }.portal-guide-panel a:hover { background:var(--blue-pale); color:var(--blue-deep); }.portal-guide-panel small { color:#97a1b0; font-size:10px; }.portal-guide-panel a:hover small { color:var(--blue); } body[data-ui="portal"] .portal-profile-panel button { height:34px; margin-top:14px; border-radius:7px; transition:background .15s,transform .15s; } body[data-ui="portal"] .portal-profile-panel button:hover { transform:translateY(-1px); } body[data-ui="portal"] .portal-profile-panel .portal-logout { margin-top:7px; } body[data-ui="portal"] .portal-profile-guest>strong { font-size:15px; } body[data-ui="portal"] .portal-bio { min-height:38px; padding:10px; border-radius:8px; background:#f6f8fd; } body[data-ui="portal"] .info-card { cursor:pointer; transition:transform .15s,box-shadow .15s,border-color .15s; } body[data-ui="portal"] .info-card:hover { border-color:#cbd8f4; transform:translateY(-2px); } body[data-ui="portal"] .card-link { padding:6px 8px; background:transparent; } body[data-ui="portal"] .card-link:hover { background:var(--blue-pale); } body[data-ui="portal"] .post-item { cursor:pointer; transition:background .13s; }
@media (max-width:760px) { body[data-ui="classic"] .card-link { min-height:40px; } body[data-ui="portal"] .portal-sidebar { grid-template-columns:1fr; } body[data-ui="portal"] .portal-guide-panel { display:none; } body[data-ui="portal"] .portal-profile-panel { padding:18px; } }

/* Notice board */
.notice-preview { display:grid; gap:8px; min-height:112px; margin-top:17px; padding-top:14px; border-top:1px solid var(--line); }.notice-preview>p { color:#4e5e77; font-size:14px; }.notice-preview>small { color:#8996aa; font-size:12px; }.notice-preview-item { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; color:var(--ink); font-size:13px; text-decoration:none; }.notice-preview-item:hover strong { color:var(--blue); text-decoration:underline; }.notice-preview-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.notice-preview-item small { flex:0 0 auto; color:#98a2b2; font-size:11px; }
.notice-main { width:min(980px,calc(100% - 32px)); margin:58px auto; }.notice-heading { display:flex; align-items:end; justify-content:space-between; gap:22px; padding:4px 4px 22px; border-bottom:1px solid var(--line); }.section-label { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.1em; }.notice-heading h1 { margin-top:6px; font-size:28px; letter-spacing:-.05em; }.notice-heading p:last-child { margin-top:8px; color:var(--muted); font-size:14px; }.notice-board { overflow:hidden; margin-top:18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 6px 20px rgba(45,67,112,.05); }.notice-item { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:70px; padding:16px 22px; border-bottom:1px solid #edf0f5; cursor:pointer; transition:background .15s; }.notice-item:last-child { border-bottom:0; }.notice-item:hover { background:#f6f8fd; }.notice-item:focus-visible { outline:2px solid var(--soft-blue); outline-offset:-2px; }.notice-item span { width:max-content; padding:5px 8px; border-radius:7px; background:var(--blue-pale); color:var(--blue-deep); font-size:11px; font-weight:800; }.notice-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }.notice-item small { color:#94a0b2; font-size:11px; white-space:nowrap; }.notice-loading { padding:30px; color:var(--muted); font-size:13px; text-align:center; }.edit-button { border:0; background:transparent; color:var(--blue); font-size:12px; font-weight:700; }.edit-button:hover { text-decoration:underline; }
@media (max-width:760px) { .notice-main { width:calc(100% - 32px); margin:35px auto; }.notice-heading { align-items:start; }.notice-heading h1 { font-size:24px; }.notice-heading .write-post-button { flex:0 0 auto; min-height:42px; padding:0 13px; }.notice-item { grid-template-columns:48px minmax(0,1fr); gap:10px; min-height:64px; padding:14px 16px; }.notice-item small { grid-column:2; margin-top:-7px; }.notice-item strong { font-size:13px; } }

/* Community rich-text editor */
.editor-label { display:grid; gap:8px !important; color:#46536b; font-size:13px; font-weight:700; }.editor-shell { overflow:hidden; border:1px solid #dbe3ef; border-radius:11px; background:#fff; }.editor-shell:focus-within { border-color:var(--soft-blue); box-shadow:0 0 0 3px rgba(111,145,245,.13); }.editor-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:7px; border-bottom:1px solid #e7ecf4; background:#f7f9fd; }.editor-toolbar select { width:auto !important; height:30px !important; padding:0 7px !important; border:1px solid #dde5f0 !important; border-radius:6px !important; background:#fff; color:#536079; font-size:11px; }.editor-toolbar button { display:grid; min-width:30px; height:30px; place-items:center; padding:0 6px; border:1px solid transparent !important; border-radius:6px; background:transparent; color:#45536d; font-size:12px; line-height:1; }.editor-toolbar button:hover { border-color:#d5dff0 !important; background:#fff; color:var(--blue); }.toolbar-divider { width:1px; height:18px; margin:0 2px; background:#dce4ef; }.rich-editor { min-height:210px; max-height:420px; overflow-y:auto; padding:14px; outline:0; color:#34415a; font-size:14px; font-weight:400; line-height:1.75; white-space:pre-wrap; -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }.rich-editor:empty::before { content:attr(data-placeholder); color:#a1abba; pointer-events:none; }.rich-editor p,.rich-editor div { min-height:1.75em; }.rich-editor blockquote,.detail-body blockquote { margin:12px 0; padding:9px 13px; border-left:3px solid var(--soft-blue); background:#f4f7ff; color:#52617a; }.rich-editor ul,.rich-editor ol,.detail-body ul,.detail-body ol { padding-left:24px; }.rich-editor table,.detail-body table { width:100%; margin:14px 0; border-collapse:collapse; white-space:normal; }.rich-editor th,.rich-editor td,.detail-body th,.detail-body td { min-width:72px; padding:8px 10px; border:1px solid #dbe3ef; vertical-align:top; }.rich-editor th,.detail-body th { background:#f3f6fb; font-weight:800; }.editor-help { color:#8c98ab; font-size:11px; font-weight:500; }.detail-body { white-space:normal; }.detail-body.plain-content { white-space:pre-wrap; }.detail-body p,.detail-body div { min-height:1.8em; }.rich-editor font[face="Arial"],.detail-body font[face="Arial"] { font-family:Arial,sans-serif; }.rich-editor font[face="Georgia"],.detail-body font[face="Georgia"] { font-family:Georgia,serif; }.rich-editor font[face="Noto Sans KR"],.detail-body font[face="Noto Sans KR"] { font-family:"Noto Sans KR",sans-serif; }.rich-editor font[face="Courier New"],.detail-body font[face="Courier New"] { font-family:"Courier New",monospace; }
.rich-editor img,.detail-body img { display:block; max-width:100%; height:auto; margin:14px 0; border:1px solid #e0e6ef; border-radius:10px; background:#f5f7fb; }
@media (max-width:760px) { .post-modal { padding:20px; }.editor-toolbar { gap:3px; }.editor-toolbar select { max-width:108px; }.editor-toolbar button { min-width:28px; height:28px; padding:0 5px; font-size:11px; }.toolbar-divider { display:none; }.rich-editor { min-height:180px; padding:12px; } }

/* Keep every modal usable when its content is taller than the viewport. */
.settings-overlay,.login-overlay,.community-overlay { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }.settings-modal,.login-modal,.post-modal { max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* Community board refinement */
.board-head { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:58px; padding:0 18px; border-bottom:1px solid var(--line); }.board-head .board-tabs { flex:1; min-width:0; padding:0; border:0; }.board-head .board-tabs button { position:relative; border-bottom:0; }.board-head .board-tabs button.active::after { content:""; position:absolute; right:12px; bottom:0; left:12px; height:2px; border-radius:2px; background:var(--blue); }.post-count { flex:0 0 auto; color:#8b97a9; font-size:11px; font-weight:700; }.post-item { position:relative; grid-template-columns:74px minmax(0,1fr) auto; min-height:78px; padding:17px 22px; }.post-item::after { content:"›"; position:absolute; top:50%; right:10px; color:#b1bac8; font-size:20px; transform:translateY(-50%); transition:color .15s,transform .15s; }.post-item:hover::after { color:var(--blue); transform:translate(2px,-50%); }.post-item small { margin-right:18px; }.post-item strong { color:#2d3951; letter-spacing:-.015em; }.post-item:hover strong { color:var(--blue-deep); }.post-item p { max-width:95%; color:#8290a3; }.post-category { justify-self:start; min-width:48px; text-align:center; }.post-detail-modal .modal-top { padding-bottom:15px; border-bottom:1px solid var(--line); }.post-detail-modal .detail-meta { margin-top:13px; }.post-detail-modal .detail-body { padding-top:25px; }
@media (max-width:760px) { .board-head { min-height:54px; padding:0 12px; }.board-head .board-tabs { gap:2px; overflow-x:auto; scrollbar-width:none; }.board-head .board-tabs::-webkit-scrollbar { display:none; }.board-head .board-tabs button { flex:0 0 auto; min-width:51px; }.board-head .board-tabs button.active::after { right:8px; left:8px; }.post-count { font-size:10px; }.post-item { grid-template-columns:55px minmax(0,1fr); min-height:70px; padding:14px 30px 14px 14px; }.post-item small { grid-column:2; grid-row:auto; margin:2px 0 0; }.post-item::after { right:13px; font-size:18px; }.post-item p { display:none; }.post-category { min-width:42px; padding:5px 6px; font-size:10px; } }

/* Post form actions and quiet detail controls */
.post-form-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }.post-form-actions .anonymous-option { margin:0; padding:8px 10px; border:1px solid #e0e6f0; border-radius:8px; background:#f8faff; color:#6f7c91; font-size:12px; font-weight:600; }.post-form-actions .post-submit { min-width:100px; }.detail-actions { gap:3px; }.detail-actions .delete-button,.detail-actions .edit-button { min-width:auto; height:30px; padding:0 8px; border-radius:6px; background:transparent; font-size:12px; line-height:1; }.detail-actions .delete-button { color:#ad6570; }.detail-actions .delete-button:hover { background:#fff2f3; color:#b84d5a; text-decoration:none; }.detail-actions .edit-button { color:#526fae; }.detail-actions .edit-button:hover { background:var(--blue-pale); text-decoration:none; }.detail-actions #detailModalClose { width:32px; height:32px; display:grid; place-items:center; margin-left:2px; border-radius:7px; color:#69768b; font-size:22px; line-height:1; }.detail-actions #detailModalClose:hover { background:#f1f4f9; }
@media (max-width:760px) { .post-form-actions { gap:8px; }.post-form-actions .anonymous-option { padding:8px; font-size:11px; }.post-form-actions .post-submit { min-width:88px; } }

/* Directly managed school information */
.meal-preview,.timetable-preview { min-height:112px; margin-top:17px; padding-top:14px; border-top:1px solid var(--line); }.meal-preview p,.timetable-preview p { max-height:122px; overflow:auto; color:#4e5e77; font-size:14px; line-height:1.7; white-space:pre-line; }.meal-preview small,.timetable-preview small { display:block; margin-top:7px; color:#8996aa; font-size:11px; }.admin-card-action { border:0; cursor:pointer; font-family:inherit; }.modal-kicker { color:var(--blue); font-size:10px !important; font-weight:800; letter-spacing:.12em; }.school-data-modal textarea { min-height:185px; padding:12px 13px; border:1px solid #dbe3ef; border-radius:10px; background:#fbfcff; color:var(--ink); line-height:1.6; resize:vertical; outline-color:var(--soft-blue); }.school-data-modal #schoolDataDate { width:100%; }.school-data-modal [hidden] { display:none; }
.timetable-table,.timetable-grid-editor table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:10px; }.timetable-table th,.timetable-table td,.timetable-grid-editor th,.timetable-grid-editor td { padding:5px 3px; border:1px solid #e0e6ef; text-align:center; word-break:break-all; }.timetable-table th,.timetable-grid-editor th { background:#f3f6fb; color:#65728a; font-weight:800; }.timetable-table th:first-child,.timetable-grid-editor th:first-child { width:28px; }.timetable-table td { color:#3f4d66; }.timetable-grid-field { display:grid; gap:8px; }.timetable-grid-field>strong { color:#46536b; font-size:13px; }.timetable-grid-field>small { color:#8793a5; font-size:11px; line-height:1.5; }.timetable-grid-editor { overflow-x:auto; border:1px solid #dbe3ef; border-radius:10px; }.timetable-grid-editor table { min-width:540px; }.timetable-grid-editor th,.timetable-grid-editor td { padding:0; }.timetable-grid-editor th { padding:8px 4px; }.timetable-grid-editor input { width:100%; min-width:80px; height:40px; padding:0 6px; border:0; outline:0; background:#fff; color:#34415a; font-size:12px; text-align:center; }.timetable-grid-editor input:focus { background:#eef3ff; box-shadow:inset 0 0 0 2px var(--soft-blue); }.timetable-grid-editor input::placeholder { color:#b5bfce; }

/* Anonymous open chat */
.chat-main { width:min(1120px,calc(100% - 32px)); margin:58px auto; }.chat-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:4px 4px 22px; border-bottom:1px solid var(--line); }.chat-heading h1 { margin-top:6px; font-size:28px; letter-spacing:-.05em; }.chat-heading p:last-child { margin-top:8px; color:var(--muted); font-size:14px; }.chat-layout { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:560px; margin-top:18px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(45,67,112,.06); }.chat-room-panel { border-right:1px solid var(--line); background:#fafbfe; }.chat-panel-title { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 17px; border-bottom:1px solid var(--line); }.chat-panel-title strong { font-size:14px; }.chat-panel-title span { min-width:23px; padding:3px 6px; border-radius:20px; background:var(--blue-pale); color:var(--blue); font-size:11px; font-weight:800; text-align:center; }.chat-room-list { padding:7px; }.chat-room-item { display:grid; width:100%; gap:5px; padding:13px 12px; border-radius:10px; background:transparent; color:var(--ink); text-align:left; transition:background .15s; }.chat-room-item:hover,.chat-room-item.active { background:var(--blue-pale); }.chat-room-item strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.chat-room-item small { overflow:hidden; color:#8490a2; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.chat-empty,.chat-placeholder { padding:30px 15px; color:#8b97a9; font-size:12px; line-height:1.65; text-align:center; }.chat-window { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; }.chat-window-head { display:flex; align-items:start; justify-content:space-between; gap:15px; min-height:92px; padding:18px 20px; border-bottom:1px solid var(--line); }.chat-window-head span { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.1em; }.chat-window-head h2 { margin-top:5px; font-size:18px; letter-spacing:-.03em; }.chat-window-head p { margin-top:5px; color:#8591a4; font-size:12px; }.chat-window-head button { height:32px; padding:0 9px; border-radius:7px; background:#fff4f4; color:#a75b65; font-size:11px; font-weight:800; }.chat-messages { min-height:330px; overflow-y:auto; padding:20px; background:linear-gradient(180deg,#fcfdff,#f8faff); }.chat-message { max-width:min(78%,500px); margin:0 0 13px; }.chat-message.mine { margin-right:0; margin-left:auto; }.chat-message>div { display:flex; gap:7px; margin-bottom:4px; }.chat-message.mine>div { justify-content:flex-end; }.chat-message strong { color:#526079; font-size:11px; }.chat-message small { color:#9aa5b5; font-size:10px; }.chat-message p { padding:9px 11px; border:1px solid #e2e8f2; border-radius:4px 12px 12px 12px; background:#fff; color:#3c4960; font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }.chat-message.mine p { border-color:#d4e0ff; border-radius:12px 4px 12px 12px; background:#eaf0ff; }.chat-message>button { display:block; margin:4px 2px 0; background:transparent; color:#9aa4b3; font-size:10px; }.chat-message.mine>button { margin-left:auto; }.chat-form { display:flex; gap:8px; padding:13px; border-top:1px solid var(--line); background:#fff; }.chat-form input { min-width:0; flex:1; height:43px; padding:0 13px; border:1px solid #dbe3ef; border-radius:9px; outline-color:var(--soft-blue); }.chat-form button { min-width:65px; border-radius:9px; background:var(--blue); color:#fff; font-size:12px; font-weight:800; }.chat-form button:disabled { background:#c6cfdf; cursor:not-allowed; }.room-modal textarea { min-height:115px; padding:12px; border:1px solid #dbe3ef; border-radius:10px; resize:vertical; outline-color:var(--soft-blue); }.room-modal label small { color:#8994a6; font-weight:500; }
.chat-window-head small { display:block; margin-top:8px; color:#71809a; font-size:11px; font-weight:700; }
@media (max-width:760px) { .chat-main { width:calc(100% - 32px); margin:35px auto; }.chat-heading { align-items:start; }.chat-heading h1 { font-size:24px; }.chat-heading .write-post-button { min-height:42px; padding:0 13px; }.chat-layout { grid-template-columns:1fr; min-height:0; }.chat-room-panel { border-right:0; border-bottom:1px solid var(--line); }.chat-panel-title { height:48px; }.chat-room-list { display:flex; gap:6px; overflow-x:auto; padding:8px; }.chat-room-item { flex:0 0 155px; padding:10px; border:1px solid #edf0f5; background:#fff; }.chat-window { min-height:470px; }.chat-window-head { min-height:82px; padding:15px; }.chat-messages { min-height:300px; padding:15px; }.chat-message { max-width:87%; }.chat-form { padding:10px; } }

/* Shared layout refinements: keep these responsive rules together. */
[hidden] { display:none !important; }
button,input,select,textarea { font-family:inherit; }
button,a,input,select,textarea,[contenteditable] { -webkit-tap-highlight-color:transparent; }
:where(button,a,input,select,textarea,[contenteditable]):focus-visible {
  outline:2px solid var(--blue); outline-offset:3px;
}
button:disabled { cursor:not-allowed; opacity:.65; }
:root { --muted:#62728b; --shadow:0 5px 20px rgba(45,67,112,.055); }
.site-header { flex-shrink:0; }
.navigation,.board,.chat-window,.info-card,.modal-top>div:first-child { min-width:0; }
.community-heading h1,.notice-heading h1,.chat-heading h1 { font-size:28px; line-height:1.3; }
.community-heading p,.notice-heading p:last-child,.chat-heading p:last-child { line-height:1.7; }
.community-heading .write-post-button,.notice-heading .write-post-button,.chat-heading .write-post-button { flex-shrink:0; }
.site-footer { width:min(1280px,calc(100% - 48px)); padding:24px 0; font-size:12px; line-height:1.7; }
.site-footer nav { flex-wrap:wrap; }
body[data-ui="portal"] main:is(.community-main,.notice-main,.chat-main) {
  width:min(1120px,calc(100% - 32px)); margin:48px auto;
}

/* Home: preserve the search and three cards, giving the timetable more space. */
.dashboard-container { max-width:1280px; }
.info-card { padding:26px; }
.info-card::before { width:3px; }
.info-card:hover,body[data-ui="portal"] .info-card:hover { transform:none; box-shadow:var(--shadow); }
body[data-ui="portal"] .info-card { cursor:default; }
.notice-preview,.meal-preview,.timetable-preview { flex:1; margin-bottom:18px; }
.timetable-table { font-size:12px; }
.timetable-table td,.timetable-table th { padding:7px 3px; overflow-wrap:anywhere; }
body[data-ui="portal"] .card-section { grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
body[data-ui="portal"] .admissions-card { grid-column:1 / -1; }
body[data-ui="portal"] .info-card { min-height:220px; padding:22px; }

/* Lists: keep metadata below titles so long author names do not squeeze them. */
.post-item { grid-template-columns:62px minmax(0,1fr); row-gap:5px; }
.post-item .post-category { grid-row:1 / span 3; }
.post-item strong { font-size:15px; }
.post-item p { margin:0; }
.post-item small { grid-column:2; grid-row:auto; white-space:normal; overflow-wrap:anywhere; color:#6e7c91; font-size:12px; }
.notice-item small { color:#6e7c91; }
.empty-board { min-height:220px; padding:30px 20px; color:#68768c; }
.side-panel { align-self:start; }
.side-panel p { font-size:13px; }

/* Dialogs: bounded scrolling, readable content, separate close/action sizes. */
.settings-overlay,.login-overlay,.community-overlay { z-index:100; padding:16px; }
.settings-modal,.login-modal,.post-modal { min-width:0; overflow-wrap:anywhere; }
#postModal .post-modal,.post-detail-modal { width:min(720px,100%); }
.school-data-modal { width:min(660px,100%); }
.modal-top { gap:16px; }
.modal-top h2 { font-size:22px; line-height:1.5; }
.detail-actions { flex-shrink:0; }
.modal-top button[aria-label],.close-button {
  width:36px; height:36px; flex-shrink:0; border-radius:9px; font-size:24px; line-height:1;
}
.modal-top button[aria-label]:hover,.close-button:hover { background:var(--surface-soft); }
.detail-body { font-size:15px; line-height:1.85; overflow-wrap:anywhere; }
.editor-toolbar button { min-height:36px; }
.editor-toolbar select { min-height:36px; }
.editor-toolbar button[data-command="justifyLeft"]::after { content:"왼쪽"; }
.editor-toolbar button[data-command="justifyCenter"]::after { content:"가운데"; }
.editor-toolbar button[data-command="justifyRight"]::after { content:"오른쪽"; }
.editor-toolbar button[data-command^="justify"] { font-size:0; }
.editor-toolbar button[data-command^="justify"]::after { font-size:11px; }
.timetable-grid-editor table { min-width:0; }
.timetable-grid-editor input { min-width:0; border-radius:0; }
.comment-form { flex-wrap:wrap; }
.comment-form #commentBody { flex-basis:60%; }
.comment-form button { min-height:42px; }
.legal-page { width:min(880px,calc(100% - 32px)); padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:18px; }

/* Chat: scroll history inside a bounded panel; keep the composer reachable. */
.chat-layout { height:clamp(480px,70dvh,760px); min-height:0; }
.chat-room-panel { display:flex; flex-direction:column; min-height:0; min-width:0; }
.chat-panel-title { flex-shrink:0; }
.chat-room-list { min-height:0; overflow-y:auto; }
.chat-room-item.active { box-shadow:inset 3px 0 var(--blue); }
.chat-window { min-height:0; overflow:hidden; }
.chat-window-head { min-height:0; background:#fff; }
.chat-window-head>div { min-width:0; overflow-wrap:anywhere; }
.chat-window-head button { flex-shrink:0; }
.chat-messages { min-height:0; overscroll-behavior:contain; background:#f1f5fa; }
.chat-message p { font-size:14px; padding:11px 14px; box-shadow:0 2px 4px rgba(30,50,80,.035); }
.chat-message strong { font-size:12px; }
.chat-message small { font-size:11px; color:#6f7e91; }
.chat-message>button { min-height:28px; padding:0 5px; color:#6f7e91; }
.chat-form { padding:14px; }
.chat-form input { font-size:15px; }
.chat-room-item small,.chat-placeholder,.chat-empty { color:#6e7c91; }
.chat-placeholder { margin:auto; }
.chat-messages:has(>.chat-placeholder:only-child) { display:grid; place-items:center; }

@media (max-width:1000px) {
  .site-header,body[data-ui="portal"] .site-header { height:auto; padding:12px 20px; flex-wrap:wrap; gap:10px; }
  .logo,body[data-ui="portal"] .logo { flex:1; width:auto; }
  .navigation { order:3; flex-basis:100%; justify-content:center; }
  .nav-item,body[data-ui="classic"] .nav-item,body[data-ui="portal"] .nav-item { padding:0 12px; min-width:0; font-size:14px; }
  body[data-ui="portal"] .portal-layout { grid-template-columns:minmax(0,1fr) 250px; }
  .card-section { gap:14px; }
  .info-card { padding:20px; }
}

@media (max-width:760px) {
  .site-header,body[data-ui="portal"] .site-header { padding:12px 16px; }
  .navigation,body[data-ui="portal"] .navigation { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .nav-item,body[data-ui="classic"] .nav-item,body[data-ui="portal"] .nav-item { min-height:42px; padding:0 5px; font-size:13px; }
  .search-section { margin-top:42px; }
  .dashboard-container { margin-top:30px; }
  body[data-ui="portal"] .portal-layout,body[data-ui="portal"] .card-section { grid-template-columns:minmax(0,1fr); }
  body[data-ui="portal"] .admissions-card { grid-column:auto; }
  .community-heading h1,.notice-heading h1,.chat-heading h1 { font-size:23px; }
  .board-head { flex-wrap:wrap; gap:0; padding:8px 12px; }
  .board-head .board-tabs { overflow:visible; flex-wrap:wrap; }
  .board-head .board-tabs button,body[data-ui="classic"] .board-head .board-tabs button { min-width:0; padding:0 10px; }
  .post-item { grid-template-columns:46px minmax(0,1fr); }
  .post-item small { font-size:11px; }
  .notice-item small { white-space:normal; }
  .settings-modal,.login-modal,.post-modal { padding:22px 18px; }
  .detail-actions .delete-button,.detail-actions .edit-button { height:40px; }
  .editor-toolbar button { min-width:36px; min-height:40px; }
  .editor-toolbar select { min-height:40px; }
  .login-modal input,.login-modal textarea,.post-modal input:not([type="checkbox"]),.post-modal textarea,.rich-editor,.chat-form input { font-size:16px; }
  .timetable-grid-editor input { font-size:12px; padding:0 2px; }
  .site-footer { width:calc(100% - 32px); }
  .legal-page { padding:24px 18px; }
  .chat-layout { height:auto; grid-template-rows:auto auto; }
  .chat-room-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:180px; overflow-x:hidden; overflow-y:auto; }
  .chat-room-item { width:100%; min-width:0; }
  .chat-room-list>.chat-empty { grid-column:1 / -1; }
  .chat-window { min-height:0; height:clamp(360px,65dvh,620px); }
  .chat-messages { min-height:0; }
  .chat-form input { height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; }
}

/* Managed advertisement */
.advertisement-slot { position:relative; min-height:104px; padding:14px 18px; flex-direction:row; justify-content:stretch; border-style:solid; }
.advertisement-preview { min-width:0; flex:1; }
.advertisement-preview:not(:has(.advertisement-content)) { display:flex; align-items:center; justify-content:center; flex-direction:column; }
.advertisement-content { display:flex; align-items:center; justify-content:center; gap:18px; min-height:72px; color:inherit; text-align:left; text-decoration:none; }
.advertisement-content img { width:min(220px,30%); height:72px; flex:0 0 auto; border-radius:9px; object-fit:cover; }
.advertisement-content>div { min-width:0; display:flex; flex-direction:column; }
.advertisement-content span { overflow:hidden; max-width:680px; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.advertisement-content small { overflow:hidden; max-width:680px; color:#71809a; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.advertisement-manage { position:absolute; top:8px; right:8px; min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--blue-deep); font-size:11px; font-weight:800; box-shadow:0 3px 10px rgba(45,67,112,.08); }
.advertisement-modal { width:min(520px,100%); }
.advertisement-modal label small { color:#8994a6; font-weight:500; }
.advertisement-form-actions { display:flex; gap:8px; }
.advertisement-form-actions>button { flex:1; }
.advertisement-form-actions .advertisement-remove { border:1px solid #efd9dc; background:#fff7f7; color:#ad5964; }
.chat-history-limit { width:max-content; max-width:100%; margin:0 auto 18px; padding:6px 10px; border-radius:999px; background:#e5ebf4; color:#68778d; font-size:11px; text-align:center; }
@media (max-width:760px) {
  .advertisement-slot { padding:14px; }
  .advertisement-content { justify-content:flex-start; gap:11px; padding-right:0; }
  .advertisement-slot:has(.advertisement-manage:not([hidden])) .advertisement-content { padding-right:68px; }
  .advertisement-content img { width:82px; height:64px; }
  .advertisement-content span,.advertisement-content small { white-space:normal; }
}

/* Mobile interface: thumb-friendly header, bottom navigation and sheets. */
@media (max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  body[data-ui] { padding-bottom:calc(68px + env(safe-area-inset-bottom)); background:#f5f7fb; }
  body[data-ui] .site-header,body[data-ui="portal"] .site-header {
    position:sticky; top:0; z-index:70; min-height:62px; height:62px; padding:8px 14px;
    overflow:visible; flex-wrap:nowrap; gap:8px; background:rgba(255,255,255,.96); box-shadow:0 1px 12px rgba(36,53,87,.08);
  }
  body[data-ui] .logo,body[data-ui="portal"] .logo { width:auto; min-width:0; flex:1; }
  body[data-ui] .logo img,body[data-ui="portal"] .logo img { width:clamp(126px,42vw,154px); max-width:100%; }
  body[data-ui] .header-tools { width:auto; flex:0 0 auto; z-index:2; }
  body[data-ui] .profile-button,body[data-ui="classic"] .profile-button,body[data-ui="portal"] .profile-button {
    width:auto; min-width:72px; height:42px; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:0 11px; border:1px solid #dbe4f5; border-radius:13px; background:var(--blue-pale); color:var(--blue-deep); box-shadow:none;
  }
  body[data-ui] .profile-button::after { content:"로그인"; font-size:11px; font-weight:800; }
  body[data-ui] .profile-button.signed-in::after { content:"프로필"; }
  body[data-ui] .profile-button span { width:13px; height:13px; border-color:var(--blue); }
  body[data-ui] .profile-button span::after { width:18px; height:9px; border-color:var(--blue); }
  body[data-ui] .user-menu {
    position:fixed; top:auto; right:12px; bottom:calc(72px + env(safe-area-inset-bottom)); left:12px; z-index:110;
    width:auto; max-height:min(430px,calc(100dvh - 150px)); overflow-y:auto; padding:12px;
    border-radius:18px; box-shadow:0 18px 50px rgba(25,40,72,.24);
  }
  body[data-ui] .user-menu button { min-height:46px; padding:0 12px; font-size:13px; }
  body[data-ui] .user-summary { padding:10px 10px 15px; }

  body[data-ui] .navigation,body[data-ui="portal"] .navigation {
    position:fixed; right:0; bottom:0; left:0; z-index:80; order:initial; display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; height:calc(64px + env(safe-area-inset-bottom));
    padding:5px 6px env(safe-area-inset-bottom); gap:2px; border-top:1px solid #dde4ef;
    background:rgba(255,255,255,.97); box-shadow:0 -5px 20px rgba(35,52,86,.1); backdrop-filter:blur(14px);
  }
  body[data-ui] .navigation .nav-item,body[data-ui="classic"] .navigation .nav-item,body[data-ui="portal"] .navigation .nav-item {
    min-width:0; min-height:54px; height:54px; padding:0 2px; border-radius:11px; box-shadow:none;
    color:#718098; font-size:10px; font-weight:800; line-height:1.2; text-align:center; white-space:normal;
    word-break:keep-all; transform:none;
  }
  body[data-ui] .navigation .nav-item::before,body[data-ui] .navigation .nav-item::after { content:none; display:none; }
  body[data-ui] .navigation .nav-item.active { background:var(--blue-pale); color:var(--blue-deep); }

  body[data-ui] .search-section,body[data-ui="portal"] .search-section { width:min(calc(100% - 28px),680px); margin:18px auto 0; }
  body[data-ui] .search-box,body[data-ui="portal"] .search-box { height:56px; border-width:1px; border-radius:15px; }
  body[data-ui] .search-box input { padding:0 14px; font-size:16px; }
  body[data-ui] .search-box button,body[data-ui="portal"] .search-box button { width:76px; font-size:15px; }
  body[data-ui] .dashboard-container,body[data-ui="portal"] .dashboard-container { width:min(calc(100% - 28px),680px); margin:16px auto 24px; }
  body[data-ui] .portal-layout,body[data-ui="classic"] .portal-layout,body[data-ui="portal"] .portal-layout {
    display:flex; flex-direction:column; gap:12px;
  }
  body[data-ui] .portal-sidebar,body[data-ui="classic"] .portal-sidebar,body[data-ui="portal"] .portal-sidebar {
    order:-1; display:block;
  }
  body[data-ui] .portal-profile-panel,body[data-ui="classic"] .portal-profile-panel,body[data-ui="portal"] .portal-profile-panel {
    display:block; min-height:0; padding:17px; border:1px solid var(--line); border-radius:16px;
    background:linear-gradient(145deg,#fff,#f1f5ff); box-shadow:0 4px 14px rgba(42,61,99,.06);
  }
  body[data-ui] .portal-guide-panel { display:none; }
  body[data-ui] .portal-profile-guest>strong { margin-top:11px; font-size:15px; }
  body[data-ui] .portal-user-head { margin-top:10px; }
  body[data-ui] .portal-bio { min-height:0; margin-top:11px; padding:9px 10px; border-radius:9px; background:#f6f8fd; }
  body[data-ui] .portal-profile-panel button { min-height:42px; height:42px; margin-top:11px; border-radius:10px; }
  body[data-ui] .portal-profile-panel .portal-logout { margin-top:7px; }
  body[data-ui] .card-section,body[data-ui="portal"] .card-section { grid-template-columns:minmax(0,1fr); gap:12px; }
  body[data-ui] .info-card,body[data-ui="portal"] .info-card,body[data-ui="portal"] .school-card {
    min-height:0; padding:18px; border-radius:16px; box-shadow:0 4px 14px rgba(42,61,99,.06);
  }
  body[data-ui] .card-heading h2 { font-size:18px; }
  body[data-ui] .notice-preview,body[data-ui] .meal-preview,body[data-ui] .timetable-preview { min-height:70px; margin:12px 0; padding-top:12px; }
  body[data-ui] .card-link,body[data-ui="classic"] .card-link { min-height:40px; }
  body[data-ui] .timetable-preview { overflow-x:auto; }
  body[data-ui] .timetable-table { min-width:410px; }
  body[data-ui] .advertisement-slot { min-height:92px; margin-top:12px; border-radius:14px; }

  body[data-ui] main:is(.community-main,.notice-main,.chat-main),body[data-ui="portal"] main:is(.community-main,.notice-main,.chat-main) {
    width:min(calc(100% - 28px),680px); margin:20px auto;
  }
  .community-heading,.notice-heading,.chat-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:0 2px 16px; }
  .community-heading>div,.notice-heading>div,.chat-heading>div { min-width:0; }
  .community-heading p,.notice-heading p:last-child,.chat-heading p:last-child { margin-top:5px; font-size:12px; }
  .community-heading .write-post-button,.notice-heading .write-post-button,.chat-heading .write-post-button {
    min-width:max-content; min-height:44px; padding:0 13px; border-radius:12px; font-size:12px;
  }
  .board-layout { margin-top:12px; }
  .board { border-radius:14px; }
  .board-head { min-height:58px; }
  .post-item { min-height:76px; padding:14px 28px 14px 12px; }
  .post-item strong { font-size:14px; }
  .post-category { align-self:start; margin-top:1px; }
  .notice-board { margin-top:12px; border-radius:14px; }
  .notice-item { min-height:72px; padding:14px 12px; }
  .notice-item strong { white-space:normal; line-height:1.4; }

  .settings-overlay,.login-overlay,.community-overlay { place-items:end center; padding:0; }
  .settings-modal,.login-modal,.post-modal,.school-data-modal,.advertisement-modal {
    width:100%; max-width:none; max-height:calc(100dvh - 12px); margin:0; padding:22px 18px calc(20px + env(safe-area-inset-bottom));
    overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
    border-right:0; border-bottom:0; border-left:0; border-radius:22px 22px 0 0;
  }
  .modal-top { position:sticky; top:-22px; z-index:2; margin:-22px -18px 0; padding:18px 18px 12px; background:#fff; }
  .account-modal>.close-button,.login-modal>.close-button { top:12px; right:14px; }
  .login-modal form { gap:12px; }
  .login-modal input,.login-modal select,.login-modal textarea,.post-modal input:not([type="checkbox"]),.post-modal select,.post-modal textarea { min-height:48px; }
  .editor-toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .editor-toolbar select { width:100% !important; max-width:none; }
  .editor-toolbar #editorFont,.editor-toolbar #editorSize { grid-column:span 2; }
  .editor-toolbar button { width:100%; min-width:0; }
  .rich-editor { min-height:190px; }
  .post-form-actions { position:sticky; bottom:0; margin:0 -18px -20px; padding:10px 18px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); }
  .post-form-actions .post-submit { min-height:46px; }
  .comment-form { display:grid !important; grid-template-columns:1fr auto; }
  .comment-form #commentBody { grid-column:1 / -1; width:100%; }
  .comment-form button { min-width:82px; }
  .timetable-grid-editor table { min-width:520px; }

  .chat-layout { height:auto; margin-top:12px; border-radius:14px; }
  .chat-room-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:166px; }
  .chat-room-item { min-height:64px; }
  .chat-window { height:clamp(320px,calc(100dvh - 210px),600px); min-height:320px; }
  .chat-window-head { padding:13px 14px; }
  .chat-window-head h2 { font-size:16px; }
  .chat-window-head p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .chat-messages { padding:14px 12px; }
  .chat-message { max-width:90%; }
  .chat-form { position:sticky; bottom:0; padding:9px; }
  .chat-form input { min-height:46px; }
  .chat-form button { min-width:64px; }

  .site-footer { display:block; margin-top:10px; padding:18px 0 22px; font-size:11px; }
  .site-footer nav { margin-top:8px; gap:12px; }
}

/* Tablet and narrow desktop: prevent three-column content from being squeezed. */
@media (min-width:901px) and (max-width:1180px) and (hover:hover) {
  .site-header,body[data-ui="portal"] .site-header { height:auto; min-height:72px; padding:12px 24px; flex-wrap:wrap; }
  .navigation,body[data-ui="portal"] .navigation { order:3; flex-basis:100%; justify-content:space-between; }
  .nav-item,body[data-ui="portal"] .nav-item { flex:1; min-width:0; padding:0 8px; }
  .card-section,body[data-ui="portal"] .card-section { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card-section>.info-card:last-child,body[data-ui="portal"] .card-section>.info-card:last-child { grid-column:1 / -1; }
  body[data-ui="portal"] .portal-layout { grid-template-columns:minmax(0,1fr); }
  body[data-ui="portal"] .portal-sidebar { order:-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:380px) {
  body[data-ui] .navigation .nav-item { font-size:9px; }
  .community-heading,.notice-heading,.chat-heading { align-items:flex-start; }
  .community-heading .write-post-button,.notice-heading .write-post-button,.chat-heading .write-post-button { min-height:40px; padding:0 10px; }
  .chat-room-list { grid-template-columns:1fr; }
  .chat-room-item { min-height:58px; }
}

/* Administrator dashboard */
.admin-main { width:min(1180px,calc(100% - 32px)); min-height:calc(100vh - 210px); margin:52px auto; }
.admin-gate { min-height:440px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:42px 20px; border:1px solid var(--line); border-radius:20px; background:#fff; text-align:center; box-shadow:var(--shadow); }
.admin-gate[hidden] { display:none; }
.admin-gate-mark { width:54px; height:54px; display:grid; place-items:center; margin-bottom:18px; border-radius:16px; background:var(--blue-pale); color:var(--blue-deep); font-size:22px; font-weight:900; }
.admin-gate h1 { font-size:24px; letter-spacing:-.04em; }
.admin-gate p { margin-top:9px; color:var(--muted); font-size:14px; }
.admin-gate button,.admin-gate a { min-height:42px; margin-top:20px; padding:0 18px; display:grid; place-items:center; border-radius:10px; font-size:13px; font-weight:800; text-decoration:none; }
.admin-gate button { background:var(--blue); color:#fff; }
.admin-gate a { margin-top:7px; color:var(--muted); }
.admin-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:4px 2px 22px; border-bottom:1px solid var(--line); }
.admin-heading h1 { margin-top:6px; font-size:30px; letter-spacing:-.05em; }
.admin-heading p:last-child { margin-top:8px; color:var(--muted); font-size:14px; }
.admin-heading button { min-height:40px; padding:0 15px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--blue-deep); font-size:12px; font-weight:800; }
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:20px; }
.admin-stat-grid article { min-width:0; padding:20px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 5px 17px rgba(45,67,112,.05); }
.admin-stat-grid span,.admin-stat-grid small { display:block; color:var(--muted); font-size:12px; }
.admin-stat-grid strong { display:block; margin:10px 0 7px; color:var(--blue-deep); font-size:29px; line-height:1; }
.admin-section { margin-top:18px; padding:22px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 5px 17px rgba(45,67,112,.05); }
.admin-section-title { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.admin-section-title h2 { font-size:18px; letter-spacing:-.03em; }
.admin-section-title p { margin-top:4px; color:var(--muted); font-size:12px; }
.admin-section-title>a { color:var(--blue); font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; }
.admin-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.admin-action-grid>a { min-width:0; min-height:132px; display:flex; flex-direction:column; padding:17px; border:1px solid #e5eaf3; border-radius:13px; background:var(--surface-soft); color:inherit; text-decoration:none; transition:border-color .16s,transform .16s,background .16s; }
.admin-action-grid>a:hover { border-color:#bdcdf1; background:#f1f5ff; transform:translateY(-2px); }
.admin-action-grid b { font-size:15px; }
.admin-action-grid span { margin-top:7px; color:var(--muted); font-size:12px; line-height:1.5; }
.admin-action-grid em { margin-top:auto; padding-top:12px; color:var(--blue); font-size:11px; font-style:normal; font-weight:800; }
.admin-columns { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:0 18px; }
.admin-status-card { grid-row:span 2; }
.admin-status-list { list-style:none; }
.admin-status-list li { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #edf0f5; font-size:13px; }
.admin-status-list li:last-child { border-bottom:0; }
.admin-status-list strong { padding:5px 9px; border-radius:999px; background:#eaf7ef; color:#24774b; font-size:11px; }
.admin-status-list strong.missing { background:#fff2e8; color:#a45a24; }
.admin-recent-list { overflow:hidden; border:1px solid #edf0f5; border-radius:11px; }
.admin-recent-list>a { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-bottom:1px solid #edf0f5; color:inherit; text-decoration:none; }
.admin-recent-list>a:last-child { border-bottom:0; }
.admin-recent-list>a:hover { background:#f7f9fd; }
.admin-recent-list span { min-width:0; }
.admin-recent-list strong,.admin-recent-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-recent-list strong { font-size:13px; }
.admin-recent-list small { margin-top:5px; color:var(--muted); font-size:10px; }
.admin-recent-list>a>b { flex:0 0 auto; color:var(--blue); }
.admin-recent-list>p,.admin-empty { padding:24px 14px; color:var(--muted); font-size:12px; text-align:center; }
.admin-feedback { margin-top:12px; color:var(--muted); font-size:11px; text-align:right; }

@media (max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  .admin-main { width:min(calc(100% - 28px),680px); min-height:0; margin:20px auto; }
  .admin-gate { min-height:360px; padding:28px 18px; border-radius:16px; }
  .admin-gate h1 { font-size:20px; }
  .admin-heading { align-items:center; padding:0 2px 16px; }
  .admin-heading h1 { font-size:23px; }
  .admin-heading p:last-child { font-size:12px; }
  .admin-heading button { min-width:max-content; padding:0 11px; }
  .admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; }
  .admin-stat-grid article { padding:15px; border-radius:13px; }
  .admin-stat-grid strong { margin:8px 0 5px; font-size:24px; }
  .admin-section { margin-top:12px; padding:16px; border-radius:14px; }
  .admin-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .admin-action-grid>a { min-height:126px; padding:14px; }
  .admin-action-grid span { font-size:11px; }
  .admin-columns { display:block; }
  .admin-recent-list>a { min-height:62px; }
}

@media (max-width:380px) {
  .admin-action-grid { grid-template-columns:1fr; }
  .admin-action-grid>a { min-height:108px; }
}

/* Member dashboard */
.member-main { width:min(1080px,calc(100% - 32px)); min-height:calc(100vh - 210px); margin:52px auto; }
.member-profile-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; padding:26px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,#fff 58%,#f0f4ff); box-shadow:var(--shadow); }
.member-avatar { width:76px; height:76px; display:grid; place-items:center; border-radius:22px; background:linear-gradient(135deg,var(--blue),#7291ed); color:#fff; font-size:28px; font-weight:900; box-shadow:0 10px 22px rgba(49,95,197,.2); }
.member-profile-copy { min-width:0; }
.member-profile-copy h1 { margin-top:5px; font-size:25px; letter-spacing:-.04em; }
.member-profile-copy>span { display:block; margin-top:3px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.member-profile-copy>p:last-child { max-width:620px; margin-top:11px; color:#52627b; font-size:13px; line-height:1.6; white-space:pre-wrap; }
.member-profile-actions { display:flex; align-items:stretch; flex-direction:column; gap:7px; }
.member-profile-actions [hidden] { display:none; }
.member-profile-actions button,.member-profile-actions a { min-width:132px; min-height:40px; display:grid; place-items:center; padding:0 13px; border-radius:10px; background:var(--blue); color:#fff; font-size:12px; font-weight:800; text-decoration:none; }
.member-profile-actions a { border:1px solid #cad6ee; background:#fff; color:var(--blue-deep); }
.member-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.member-stat-grid article { padding:19px 20px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 5px 17px rgba(45,67,112,.05); }
.member-stat-grid span,.member-stat-grid small { display:block; color:var(--muted); font-size:11px; }
.member-stat-grid strong { display:block; margin:9px 0 6px; color:var(--blue-deep); font-size:27px; line-height:1; }
.member-stat-grid .member-date { font-size:20px; }
.member-quick-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.member-quick-links a { min-width:0; min-height:86px; display:flex; justify-content:center; flex-direction:column; padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); color:inherit; text-decoration:none; transition:background .16s,transform .16s; }
.member-quick-links a:hover { background:var(--blue-pale); transform:translateY(-2px); }
.member-quick-links b { font-size:13px; }
.member-quick-links span { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.4; }
.member-activity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.member-activity-list { overflow:hidden; border:1px solid #edf0f5; border-radius:11px; }
.member-activity-list>a { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-bottom:1px solid #edf0f5; color:inherit; text-decoration:none; }
.member-activity-list>a:last-child { border-bottom:0; }
.member-activity-list>a:hover { background:#f7f9fd; }
.member-activity-list span { min-width:0; }
.member-activity-list strong,.member-activity-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-activity-list strong { font-size:13px; }
.member-activity-list small { margin-top:5px; color:var(--muted); font-size:10px; }
.member-activity-list>a>b { color:var(--blue); }

@media (max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  .member-main { width:min(calc(100% - 28px),680px); min-height:0; margin:20px auto; }
  .member-profile-card { grid-template-columns:auto minmax(0,1fr); gap:14px; padding:18px; border-radius:16px; }
  .member-avatar { width:58px; height:58px; border-radius:17px; font-size:22px; }
  .member-profile-copy h1 { font-size:21px; }
  .member-profile-copy>p:last-child { font-size:12px; }
  .member-profile-actions { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-profile-actions button,.member-profile-actions a { min-width:0; }
  .member-stat-grid { gap:8px; }
  .member-stat-grid article { padding:14px 12px; }
  .member-stat-grid strong { font-size:22px; }
  .member-stat-grid .member-date { font-size:14px; line-height:1.25; }
  .member-quick-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .member-quick-links a { min-height:78px; }
  .member-activity-grid { display:block; }
}

@media (max-width:480px) {
  .member-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-stat-grid article:last-child { grid-column:1 / -1; }
  .admin-heading,.community-heading,.notice-heading,.chat-heading { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; }
  .admin-heading button,.community-heading .write-post-button,.notice-heading .write-post-button,.chat-heading .write-post-button { justify-self:start; }
}

@media (hover:none) and (pointer:coarse) {
  .info-card:hover,.admin-action-grid>a:hover,.member-quick-links a:hover,.profile-button:hover { transform:none; }
  button,a { -webkit-tap-highlight-color:rgba(49,95,197,.12); }
}

/* 2026 visual cleanup: flatter home panels and roomier working dialogs. */
:root {
  --panel-radius:10px;
  --control-radius:7px;
  --panel-shadow:0 8px 24px rgba(37,55,92,.055);
}
.site-header { border-bottom:1px solid #e4e9f1; box-shadow:none; }
.nav-item { border-radius:6px; }
.profile-button { border-radius:10px; }
.user-menu { border-radius:10px; box-shadow:0 14px 38px rgba(29,43,73,.16); }

body[data-ui="classic"] .search-section { width:min(1040px,calc(100% - 40px)); margin-top:76px; }
body[data-ui="classic"] .search-box {
  height:72px; border-color:#cfd9e8; border-radius:11px; box-shadow:0 8px 22px rgba(39,57,94,.07);
}
body[data-ui="classic"] .search-box button { border-radius:0; }
body[data-ui="classic"] .dashboard-container { width:min(1280px,calc(100% - 40px)); margin-top:38px; }
body[data-ui="classic"] .card-section { gap:16px; }
body[data-ui="classic"] .info-card {
  min-height:248px; padding:25px 26px; border-radius:12px; box-shadow:var(--panel-shadow);
}
.info-card::before { inset:0 0 auto; width:auto; height:3px; }
.info-card:hover { border-color:#cbd5e5; box-shadow:0 10px 25px rgba(37,55,92,.08); }
.card-heading h2 { font-size:20px; }
.notice-preview,.meal-preview,.timetable-preview { min-height:94px; margin-top:14px; padding-top:13px; }
.card-link,body[data-ui="classic"] .card-link {
  min-height:38px; padding:0 12px; border:1px solid #dce5f3; border-radius:6px; background:#f5f8fd;
}
.advertisement-slot { border-radius:8px; border-style:solid; box-shadow:none; }
.advertisement-manage { border-radius:5px; box-shadow:none; }

body[data-ui="portal"] { background:#f3f5f8; }
body[data-ui="portal"] .site-header { min-height:66px; }
body[data-ui="portal"] .search-section { margin-top:32px; }
body[data-ui="portal"] .search-box { height:58px; border-radius:4px; box-shadow:none; }
body[data-ui="portal"] .dashboard-container { width:min(1320px,calc(100% - 40px)); margin-top:24px; }
body[data-ui="portal"] .portal-layout { grid-template-columns:minmax(0,1fr) 300px; gap:14px; }
body[data-ui="portal"] .card-section { gap:12px; }
body[data-ui="portal"] .info-card,body[data-ui="portal"] .school-card {
  min-height:218px; padding:21px; border-radius:5px; box-shadow:none;
}
body[data-ui="portal"] .info-card:hover { border-color:#bfcce0; box-shadow:none; }
body[data-ui="portal"] .portal-profile-panel,body[data-ui="portal"] .portal-guide-panel {
  border-radius:5px; box-shadow:none;
}
body[data-ui="portal"] .portal-bio { border-radius:4px; }
body[data-ui="portal"] .portal-profile-panel button { border-radius:4px; }
body[data-ui="portal"] .advertisement-slot { border-radius:5px; }

.settings-overlay,.login-overlay,.community-overlay {
  padding:28px; background:rgba(18,27,45,.48); backdrop-filter:blur(3px);
}
.settings-modal,.login-modal,.post-modal,.school-data-modal,.advertisement-modal,.room-modal {
  max-height:calc(100dvh - 56px); padding:34px 36px; border:1px solid #dfe5ee; border-radius:12px;
  box-shadow:0 28px 80px rgba(18,30,54,.24);
}
.settings-modal { width:min(660px,100%); }
#loginModal .login-modal { width:min(500px,100%); }
#accountModal .account-modal { width:min(620px,100%); }
#postModal .post-modal { width:min(820px,100%); }
#noticeEditor .post-modal { width:min(740px,100%); }
.post-detail-modal { width:min(820px,100%); }
.school-data-modal { width:min(860px,100%); }
.advertisement-modal { width:min(640px,100%); }
.room-modal { width:min(580px,100%); }
.modal-top h2,.login-modal h2 { font-size:26px; }
.modal-description,.login-modal>p { max-width:620px; font-size:14px; }
.login-modal form,.post-modal form { gap:16px; }
.login-modal input,.login-modal select,.login-modal textarea,
.post-modal input:not([type="checkbox"]),.post-modal select,.post-modal textarea,
.school-data-modal textarea,.room-modal textarea,.account-modal textarea {
  border-radius:var(--control-radius); background:#fff;
}
.login-modal form button,.post-submit { border-radius:var(--control-radius); }
.editor-shell,.timetable-grid-editor { border-radius:var(--control-radius); }
.rich-editor { min-height:250px; }
.account-danger { margin-top:28px; padding-top:24px; }

@media (max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  .site-header { box-shadow:0 1px 10px rgba(35,50,80,.06); }
  body[data-ui="classic"] .search-section,body[data-ui="portal"] .search-section { margin-top:16px; }
  body[data-ui="classic"] .search-box,body[data-ui="portal"] .search-box { height:54px; border-radius:9px; }
  body[data-ui="classic"] .dashboard-container,body[data-ui="portal"] .dashboard-container { margin-top:14px; }
  body[data-ui="classic"] .info-card,body[data-ui="portal"] .info-card,body[data-ui="portal"] .school-card {
    min-height:0; padding:17px; border-radius:9px; box-shadow:none;
  }
  body[data-ui] .portal-profile-panel,body[data-ui="classic"] .portal-profile-panel,body[data-ui="portal"] .portal-profile-panel { border-radius:9px; }
  .advertisement-slot,body[data-ui="portal"] .advertisement-slot { border-radius:7px; }
  .settings-overlay,.login-overlay,.community-overlay { padding:0; backdrop-filter:blur(2px); }
  .settings-modal,.login-modal,.post-modal,.school-data-modal,.advertisement-modal,.room-modal,
  #loginModal .login-modal,#accountModal .account-modal,#postModal .post-modal,#noticeEditor .post-modal,.post-detail-modal {
    width:100%; max-width:none; max-height:calc(100dvh - 8px); padding:22px 18px calc(20px + env(safe-area-inset-bottom));
    border-right:0; border-bottom:0; border-left:0; border-radius:16px 16px 0 0;
  }
  .modal-top h2,.login-modal h2 { font-size:23px; }
  .rich-editor { min-height:200px; }
}

/* Placeholder for features that are intentionally not available yet. */
.coming-soon-main { width:min(920px,calc(100% - 40px)); min-height:calc(100vh - 180px); display:grid; place-items:center; margin:0 auto; padding:70px 0; }
.coming-soon-card { width:100%; padding:64px 54px; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:8px; background:#fff; box-shadow:var(--panel-shadow); text-align:center; }
.coming-soon-label { color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.14em; }
.coming-soon-card h1 { margin-top:13px; font-size:31px; letter-spacing:-.05em; }
.coming-soon-card p { max-width:560px; margin:14px auto 0; color:var(--muted); font-size:14px; line-height:1.7; }
.coming-soon-card>div { display:flex; justify-content:center; gap:8px; margin-top:28px; }
.coming-soon-card a { min-height:42px; display:grid; place-items:center; padding:0 16px; border:1px solid #d9e2f0; border-radius:6px; color:var(--blue-deep); font-size:12px; font-weight:800; text-decoration:none; }
.coming-soon-card a:first-child { border-color:var(--blue); background:var(--blue); color:#fff; }

/* Home integrated search */
.search-section { position:relative; z-index:12; }
.search-results {
  position:absolute; top:calc(100% + 10px); right:0; left:0; overflow:hidden;
  max-height:min(560px,calc(100dvh - 190px)); border:1px solid #d8e0ec; border-radius:9px;
  background:#fff; box-shadow:0 20px 50px rgba(27,42,72,.16);
}
.search-results-head { height:49px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; border-bottom:1px solid #e8ecf2; }
.search-results-head strong { overflow:hidden; color:#3f4d64; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.search-results-head button { width:34px; height:34px; flex:0 0 auto; border-radius:5px; background:transparent; color:#718096; font-size:23px; }
.search-results-head button:hover { background:#f0f3f8; }
.search-results-list { max-height:min(511px,calc(100dvh - 239px)); overflow-y:auto; overscroll-behavior:contain; }
.search-results-list>a { min-height:72px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #edf0f4; color:inherit; text-decoration:none; }
.search-results-list>a:last-child { border-bottom:0; }
.search-results-list>a:hover { background:#f7f9fc; }
.search-results-list>a>span { width:max-content; padding:5px 7px; border-radius:4px; background:var(--blue-pale); color:var(--blue-deep); font-size:10px; font-weight:900; }
.search-results-list>a>div { min-width:0; }
.search-results-list strong,.search-results-list p,.search-results-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-results-list strong { font-size:14px; }
.search-results-list p { margin-top:5px; color:var(--muted); font-size:11px; }
.search-results-list small { margin-top:4px; color:#98a3b3; font-size:10px; }
.search-results-list>a>b { color:var(--blue); }
.search-loading,.search-empty { padding:32px 18px; color:var(--muted); font-size:12px; text-align:center; }
.search-empty strong { color:var(--ink); font-size:14px; }
.search-empty p { margin-top:7px; line-height:1.6; }

/* Class-specific timetable controls */
.timetable-heading { justify-content:space-between; gap:12px; }
.meal-heading { justify-content:space-between; gap:12px; }
.meal-date-selector { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; font-weight:800; }
.meal-date-selector input { width:132px; height:32px; padding:0 7px; border:1px solid #d9e2ef; border-radius:5px; background:#fff; color:#42516a; font-size:11px; font-weight:700; }
.timetable-class-selector { display:flex; align-items:center; gap:6px; }
.timetable-class-selector label { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:10px; font-weight:800; }
.timetable-class-selector select { height:32px; padding:0 24px 0 8px; border:1px solid #d9e2ef; border-radius:5px; background:#fff; color:#42516a; font-size:11px; font-weight:700; }
.timetable-table caption { padding:0 0 8px; color:var(--blue-deep); font-size:12px; font-weight:900; text-align:left; }
.timetable-target-field { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:8px; }
.timetable-target-field label { display:grid; gap:7px; color:#46536b; font-size:13px; font-weight:700; }
.timetable-target-field select { width:100%; height:46px; padding:0 12px; border:1px solid #dbe3ef; border-radius:7px; background:#fff; color:var(--ink); }
.meal-editor-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.meal-editor-fields label { min-width:0; }
.school-data-modal .meal-editor-fields textarea { min-height:150px; }
.school-data-form-actions { display:flex; gap:9px; }
.school-data-form-actions>button { flex:1; }
.school-data-form-actions .school-data-remove { border:1px solid #efd9dc; background:#fff7f7; color:#ad5964; }
.school-data-form-actions .school-data-remove:hover { background:#fff0f1; }
.meal-preview { max-height:210px; overflow-y:auto; overscroll-behavior:contain; }
.meal-service { padding:8px 0 11px; border-bottom:1px solid #edf0f5; }
.meal-service:first-child { padding-top:0; }
.meal-service strong { display:block; margin-bottom:6px; color:var(--blue-deep); font-size:12px; }
.meal-service p { max-height:none; overflow:visible; white-space:pre-line; }
.meal-service .meal-empty { color:#9aa5b5; font-size:12px; }
.meal-service small { margin-top:6px; }
.school-data-source { padding-top:8px; color:#8996aa; font-size:10px; }

@media (max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  .coming-soon-main { width:min(calc(100% - 28px),680px); min-height:calc(100dvh - 150px); padding:24px 0; }
  .coming-soon-card { padding:42px 20px; border-radius:8px; }
  .coming-soon-card h1 { font-size:24px; }
  .coming-soon-card>div { display:grid; grid-template-columns:1fr; }
  .search-results { position:relative; top:auto; max-height:none; margin-top:8px; border-radius:8px; box-shadow:0 8px 22px rgba(27,42,72,.08); }
  .search-results-list { max-height:min(52dvh,480px); }
  .search-results-list>a { grid-template-columns:46px minmax(0,1fr) auto; min-height:68px; padding:11px 12px; }
  .timetable-heading { align-items:flex-start; flex-direction:column; }
  .meal-heading { align-items:flex-start; flex-direction:column; }
  .meal-date-selector { width:100%; }
  .meal-date-selector input { min-width:0; width:100%; height:38px; }
  .timetable-class-selector { width:100%; }
  .timetable-class-selector label { flex:1; }
  .timetable-class-selector select { width:100%; height:38px; }
  .meal-editor-fields { grid-template-columns:1fr; }
  .school-data-modal .meal-editor-fields textarea { min-height:100px; }
}

/* Shared finishing touches for reading, editing and responsive panels. */
body[data-ui] .dashboard-container { margin-left:auto; margin-right:auto; }
.card-heading { flex-wrap:wrap; row-gap:10px; }
.meal-heading h2,.timetable-heading h2 { flex-shrink:0; }
.board,.notice-board,.side-panel,.admin-section,.member-activity-list {
  border-color:var(--line); border-radius:var(--panel-radius); background:#fff;
}
.side-panel h2 { color:var(--ink); }
.board-tabs button { transition:color .15s,background .15s; }
.board-tabs button:hover { color:var(--blue); background:var(--blue-pale); }
.detail-body { font-size:15px; line-height:1.85; overflow-wrap:anywhere; }
.detail-actions { flex-wrap:wrap; justify-content:flex-end; }
.post-detail-modal #detailTitle { overflow-wrap:anywhere; }
.comment-actions { grid-column:1 / -1; grid-row:auto; }
.comment-edit,.comment-delete { min-height:34px; padding:0 10px; border-radius:6px; color:#62728b; }
.comment-edit:hover,.comment-delete:hover { background:#f1f4f9; text-decoration:none; }
.post-modal .comment-edit-form { margin-top:8px; gap:8px; }
.post-modal .comment-edit-form textarea { min-height:96px; font-size:14px; }
.close-button { width:40px; height:40px; display:grid; place-items:center; border-radius:7px; line-height:1; }
.close-button:hover { background:#f0f3f8; color:var(--ink); }
.login-modal>h2 { padding-right:42px; }
.auth-toggle,.auth-reset { min-height:40px; border-radius:7px; }
.auth-toggle:hover,.auth-reset:hover { background:var(--blue-pale); }
.editor-toolbar { gap:6px; padding:10px; }
.editor-toolbar button { min-height:36px; }
.editor-toolbar select { min-height:36px; }
.editor-toolbar button:focus-visible,.editor-toolbar select:focus-visible { outline-offset:1px; }
.rich-editor { line-height:1.85; }
.meal-preview { scrollbar-width:thin; scrollbar-color:#c1ccdd transparent; }
.meal-service { padding:12px 0; }
.meal-service strong { font-size:13px; }
.meal-service:last-of-type { border-bottom:0; }
.school-data-source { line-height:1.6; }

@media (min-width:901px) and (max-width:1150px) {
  body[data-ui] .site-header { padding-left:20px; padding-right:20px; gap:12px; }
  body[data-ui] .logo { width:180px; }
  body[data-ui] .logo img { width:180px; }
  body[data-ui] .navigation { gap:4px; }
  body[data-ui] .navigation .nav-item { min-width:0; padding:0 10px; font-size:14px; }
  body[data-ui] .header-tools { width:auto; }
  body[data-ui="classic"] .card-section { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-ui="classic"] .admissions-card { grid-column:1 / -1; }
}

@media (max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  body[data-ui] .dashboard-container { width:min(calc(100% - 28px),680px); }
  body[data-ui] .card-section { grid-template-columns:minmax(0,1fr); grid-template-rows:none; }
  body[data-ui] .card-section .info-card { grid-column:auto; grid-row:auto; }
  body[data-ui] .board-layout { grid-template-columns:minmax(0,1fr); }
  .board-layout>.side-panel { display:none; }
  body[data-ui] .community-main { padding-left:0; padding-right:0; }
  .board-tabs { gap:0; }
  .board-head .board-tabs button { min-width:0; flex:1; padding:0 8px; }
  .post-count { font-size:11px; white-space:nowrap; }
  .post-item strong { white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
  body[data-ui] .timetable-table { min-width:0; font-size:11px; }
  body[data-ui] .timetable-table td,body[data-ui] .timetable-table th { padding:8px 2px; }
  .meal-date-selector input,.timetable-class-selector select { min-height:44px; font-size:16px; }
  .editor-toolbar { gap:6px; padding:8px; }
  .editor-toolbar .toolbar-divider { display:none; }
  .editor-toolbar button { min-height:44px; font-size:12px; }
  .editor-toolbar select { min-height:44px; font-size:16px; }
  .comment-edit,.comment-delete { min-height:44px; font-size:12px; }
  .post-modal .comment-edit-form textarea { font-size:16px; }
  .comment-edit-form button { min-height:44px; }
  .detail-body { font-size:16px; }
  .site-footer { width:calc(100% - 28px); gap:12px; }
}

/* Community: cover, public author cards and a full-page reading area. */
.community-page .logo { height:100%; overflow:hidden; }
.community-page:has(.author-profile-dialog[open]) { overflow-y:hidden; }
.community-cover { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; overflow:hidden; padding:38px; margin-bottom:28px; border:1px solid #d7e3f5; border-radius:14px; background:linear-gradient(115deg,#edf4ff,#f2f0ff 75%,#e8f7fa); }
.community-eyebrow { display:block; color:#4d69aa; font-size:10px; font-weight:800; letter-spacing:.14em; }
.community-cover h1 { margin-top:12px; color:#263f70; font-size:32px; letter-spacing:-.05em; line-height:1.35; }
.community-cover p { margin-top:10px; color:#617293; font-size:14px; line-height:1.7; }
.cover-topics { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.cover-topics span { padding:6px 10px; border:1px solid #dce5f3; border-radius:5px; background:#ffffffb3; color:#57729b; font-size:11px; }
.cover-art { width:200px; height:160px; flex-shrink:0; position:relative; }
.cover-art span { position:absolute; z-index:1; padding:12px 17px; background:#fff; color:#496391; border-radius:14px 14px 14px 3px; box-shadow:0 8px 25px #355ba312; font-size:13px; font-weight:700; transform:rotate(-6deg); }
.cover-art span:nth-child(2) { top:51px; right:0; transform:rotate(5deg); background:#446cc6; color:#fff; }
.cover-art b { position:absolute; right:22px; bottom:-30px; color:#638ad020; font-size:126px; }
.community-page .community-heading h2 { font-size:22px; letter-spacing:-.04em; }
.community-page .community-heading { border-color:var(--line); }
.community-page .side-panel { padding:24px; }
.community-page .board { align-self:start; }
.community-page .post-list { min-height:0; }
.community-emblem { display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px; border-radius:12px; background:#edf3ff; color:var(--blue); font-size:24px; font-weight:900; }
.community-guide { display:grid; gap:6px; margin-top:20px; padding-top:17px; border-top:1px solid #edf0f5; }
.community-guide strong { font-size:12px; color:#415477; }
.community-guide span { font-size:12px; color:#7a879d; line-height:1.7; }
.community-page .post-item { grid-template-columns:58px minmax(0,1fr); padding:20px; row-gap:7px; cursor:default; }
.community-page .post-item::after { display:none; }
.community-page .post-title-link { grid-column:2; color:var(--ink); font-size:15px; font-weight:750; line-height:1.5; text-decoration:none; overflow-wrap:anywhere; }
.community-page .post-title-link:hover { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.community-page .post-item small { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:3px 0 0; }
.community-page .post-item small>span { color:#8290a5; font-size:11px; }
.author-chip { display:inline-flex; align-items:center; gap:8px; min-height:36px; max-width:100%; padding:2px 4px; border-radius:7px; background:transparent; color:#50617c; font-size:12px; font-weight:700; text-align:left; text-decoration:none; }
.author-chip>span:last-child { overflow-wrap:anywhere; }
button.author-chip:hover { background:#edf3ff; color:var(--blue); }
.author-avatar { display:inline-grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:10px; color:#5674b1; background:#eaf0fb; font-size:12px; font-weight:800; }
.community-read-view { max-width:980px; margin:auto; }
.read-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.read-navigation a,.read-navigation button { display:inline-flex; align-items:center; min-height:42px; padding:0 14px; border:1px solid #dce4f1; border-radius:7px; background:#fff; color:#526786; font-size:13px; font-weight:700; text-decoration:none; }
.read-navigation a:hover,.read-navigation button:hover { background:#edf3ff; color:var(--blue); }
.read-status { color:#6b7c96; font-size:13px; line-height:1.7; }
.read-status:not(:empty) { padding:14px; margin-bottom:16px; background:#edf3ff; border-radius:7px; }
.community-article { padding:40px 48px; border:1px solid #dfe6f0; border-top:3px solid #7091d2; border-radius:10px; background:#fff; box-shadow:0 8px 28px #25375c05; }
.article-heading { display:flex; align-items:flex-start; gap:20px; justify-content:space-between; }
.article-heading>div:first-child { min-width:0; }
#detailCategory { color:var(--blue); font-size:12px; font-weight:800; }
.article-heading h1 { margin-top:12px; font-size:30px; line-height:1.5; letter-spacing:-.035em; overflow-wrap:anywhere; }
.article-byline { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:20px 0; border-bottom:1px solid #edf0f5; }
.article-byline .detail-meta { margin:0; }
.community-article .detail-body { min-height:260px; padding:34px 0; font-size:16px; line-height:1.95; }
.community-article .detail-body table { display:block; max-width:100%; overflow:auto; }
.community-article .comment-item { align-items:start; }
.community-article .comment-item>small { padding-top:10px; }
.community-article .comment-form { align-items:center; }
.community-article .comment-form button { min-height:42px; }
.author-profile-dialog { width:min(480px,calc(100% - 28px)); max-height:calc(100dvh - 40px); margin:auto; padding:0; overflow:auto; border:1px solid #dce4ef; border-radius:16px; background:#fff; color:var(--ink); box-shadow:0 24px 80px #1c2c5040; }
.author-profile-dialog::backdrop { background:#17274466; backdrop-filter:blur(3px); }
.author-profile-dialog .close-button { top:10px; right:10px; z-index:1; background:#ffffffb3; }
.author-profile-cover { height:88px; background:linear-gradient(110deg,#dceaff,#ece5ff,#ddf3f0); }
.author-profile-content { padding:0 26px 26px; }
.author-profile-avatar { position:relative; display:grid; place-items:center; width:68px; height:68px; margin:-30px 0 18px; border:4px solid #fff; border-radius:22px; background:#5276bd; color:#fff; font-size:28px; font-weight:800; }
.author-profile-content h2 { margin-top:7px; font-size:23px; overflow-wrap:anywhere; }
.author-profile-description { margin-top:10px; color:#7a879b; font-size:13px; line-height:1.7; }
.author-profile-content h3 { margin-top:26px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; }
#authorProfileStatus { margin:10px 0; color:#8390a4; font-size:12px; }
.author-profile-posts a { display:block; padding:14px 0; border-bottom:1px solid #edf0f5; text-decoration:none; }
.author-profile-posts strong { display:block; color:#425575; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.author-profile-posts a:hover strong { color:var(--blue); }
.author-profile-posts small { display:block; margin-top:6px; color:#8491a5; font-size:11px; }
@media(max-width:900px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  .community-page .site-header { backdrop-filter:none; background:#fff; }
  .community-page .community-heading { flex-direction:row; align-items:center; }
  .community-cover { padding:24px 20px; margin-bottom:22px; border-radius:10px; }
  .community-cover h1 { font-size:26px; }
  .cover-art { display:none; }
  .community-cover p { font-size:13px; }
  .cover-topics { gap:5px; }
  .cover-topics span { font-size:10px; padding:5px 7px; }
  .community-page .post-item { padding:16px 12px; grid-template-columns:44px minmax(0,1fr); gap:6px 10px; }
  .community-page .post-category { min-width:0; font-size:10px; }
  .community-page .post-item small { gap:4px 10px; }
  .author-chip { min-height:44px; }
  .community-article { padding:24px 18px; border-radius:8px; }
  .article-heading { flex-direction:column; gap:10px; }
  .article-heading .detail-actions { align-self:flex-end; }
  .article-heading h1 { font-size:24px; }
  .article-byline { gap:4px 12px; }
  .community-article .detail-body { min-height:200px; padding:26px 0; }
  .community-article .comment-form input { font-size:16px; }
}