:root{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans Thai",Meiryo,system-ui,sans-serif;background:#eef4f5;color:#193847;font-size:15px}
*{box-sizing:border-box}body{margin:0}.top{position:sticky;z-index:20;top:0;background:#193847;color:white;min-height:68px;padding:12px max(18px,calc((100vw - 1220px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.075em;font-weight:900;line-height:1.2}.brand small{display:block;font-size:10px;letter-spacing:.12em;color:#bcd6db;margin-top:5px}.logo{width:39px;height:39px;border:1px solid #548f9b;border-radius:10px;display:grid;place-items:center;font-size:15px;font-weight:900}
.top-actions{display:flex;align-items:center;gap:9px}.top-actions #account{font-size:12px;color:#bed2d9;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top button{border:1px solid #52808a;background:#254b59;color:#fff;border-radius:9px;padding:9px 12px;cursor:pointer;font-weight:700}
.root{max-width:1230px;margin:0 auto;padding:26px 19px 80px}
.hidden{display:none!important}.panel{background:white;border:1px solid #dae5e9;border-radius:18px;box-shadow:0 10px 28px #18465908}
.intro{padding:26px 28px;margin-bottom:19px}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:900;color:#25868a}.intro h1{font-size:clamp(25px,2.5vw,35px);margin:5px 0 10px;line-height:1.45}.muted{color:#657e89;font-size:13px}.intro p{margin:0}.layout{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start;gap:16px}.sidebar{position:sticky;top:85px;max-height:calc(100vh - 107px);overflow:auto}.side-head{padding:17px 15px 13px;border-bottom:1px solid #e5edef}.side-head h2{margin:0 0 11px;font-size:18px}.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.between{justify-content:space-between}.filters{display:flex;gap:5px}.filters button{padding:6px 8px;border-radius:8px;border:1px solid #dbe5e7;background:#fff;font-size:11px;cursor:pointer}.filters .active{color:#fff;background:#237d83;border-color:#237d83}
.topic-list{padding:8px}.topic-card{display:block;text-align:left;width:100%;background:white;border:1px solid transparent;border-radius:10px;padding:12px 10px;cursor:pointer;color:#253d49;margin:1px 0 5px}.topic-card.active,.topic-card:hover{background:#eef7f6;border-color:#c7e4df}.topic-card strong{display:block;font-size:13px;line-height:1.55}.topic-card small{display:block;color:#799098;font-size:11px;margin-top:5px}.topic-card .id{display:inline-block;font-size:10px;color:#2b777d;margin-bottom:2px}
.maincol{min-width:0}.detail{padding:0;overflow:hidden}.question-title{display:flex;gap:15px;align-items:start;padding:23px 25px;background:#fff;border-bottom:1px solid #e5edef}.question-number{background:#23848b;color:white;font-size:13px;font-weight:900;border-radius:10px;padding:13px 15px;min-width:53px;text-align:center}.question-heading{min-width:0;flex:1}.question-heading h2{margin:3px 0 8px;font-size:clamp(20px,2.2vw,27px);line-height:1.5}.chip{display:inline-block;border-radius:999px;background:#e8f2f1;color:#236d70;font-size:11px;font-weight:900;padding:4px 10px;white-space:nowrap}.chip.closed{background:#edf0f1;color:#718087}.chip.answered{background:#fff2da;color:#a26814}.chip.pending{background:#fff4db;color:#956d19}
.question-grid{display:grid;grid-template-columns:1fr 1fr}.question-body{padding:22px 25px;border-right:1px solid #e4edef;white-space:pre-wrap;word-break:break-word;font-size:16px;line-height:1.9}.files-pane{background:#f7f9f9;padding:18px 20px}.caption{font-size:11px;color:#397783;text-transform:uppercase;letter-spacing:.08em;font-weight:850;margin-bottom:13px}.empty{background:#eef2f2;color:#8b9ca2;text-align:center;border:1px dashed #c4d6db;border-radius:11px;padding:25px 14px;font-size:13px}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.file-figure{border:1px solid #dce5e7;background:#fff;padding:7px;border-radius:10px;min-width:0}.file-figure img{width:100%;height:170px;object-fit:contain;cursor:zoom-in}.file-figure a{display:block;color:#1c717b;font-size:11px;text-decoration:none;word-break:break-all}.file-figure figcaption{font-size:11px;color:#7b8b90;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread{padding:22px 24px}.thread h3{font-size:19px;margin:0 0 14px}.post{background:#f5f9fa;border:1px solid #e3eced;border-radius:13px;padding:15px;margin:10px 0}.post.pg{border-left:4px solid #3f8b91}.post.staff{border-left:4px solid #c39d6b}.post .who{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#607780;margin-bottom:10px}.post .who strong{font-size:13px;color:#294f5a}.post .message{white-space:pre-wrap;word-break:break-word;line-height:1.8}.post .files{display:flex;gap:10px;flex-wrap:wrap;margin-top:9px}.post .files img{max-width:170px;max-height:160px;object-fit:contain;border:1px solid #dde8e7;border-radius:7px;cursor:zoom-in}.post .files a{display:inline-block;font-size:12px;color:#257980}
.formbox{padding:19px 24px;border-top:1px solid #e2eaec;background:#fcfefe}.formbox h4{margin:0 0 8px;font-size:16px}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:13px}label{display:block;font-weight:750;font-size:12px;color:#496b77;margin:10px 0 5px}input,textarea,select{display:block;width:100%;font:inherit;font-size:14px;padding:10px 12px;border-radius:9px;background:white;border:1px solid #cbdce0;outline:none}input:focus,textarea:focus,select:focus{border-color:#27828c;box-shadow:0 0 0 3px #dceeee}textarea{resize:vertical;min-height:110px}
button{font:inherit}.btn{display:inline-flex;gap:7px;align-items:center;justify-content:center;border:1px solid #cadadd;background:#fff;color:#264754;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:850;cursor:pointer}.btn.primary{background:#1d5365;color:#fff;border-color:#1d5365}.btn.success{background:#247d81;color:white;border-color:#247d81}.btn.danger{color:#8d5050}.btn:disabled{opacity:.5;cursor:wait}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:9px;margin-top:12px}
.login{max-width:490px;padding:30px;margin:30px auto}.login h2{font-size:24px;margin:4px 0}.login p{font-size:13px;color:#71838a;margin:7px 0 18px}.login button{margin-top:18px;width:100%}
.notice{font-size:12px;color:#806b49;background:#fff8e9;border:1px solid #f2e3c9;border-radius:9px;padding:10px 12px;margin-top:10px}.events{padding:18px 25px;background:#f6f9fa;color:#6f858e;font-size:11px;border-top:1px solid #e1e9eb}.events p{margin:4px 0}
.modalbg{position:fixed;inset:0;background:#0a202bb3;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}.modal{background:#fff;padding:24px;border-radius:16px;width:min(650px,100%);max-height:92vh;overflow:auto;box-shadow:0 12px 65px #071d2a55}.modal h2{margin:0;font-size:23px}.modal .close{float:right}.modal .notice{word-break:break-all}
.toast{position:fixed;bottom:18px;right:19px;max-width:380px;background:#1b4654;color:#fff;padding:11px 16px;border-radius:12px;font-weight:700;font-size:13px;z-index:100;box-shadow:0 8px 30px #0002;display:none}.toast.show{display:block}.lightbox{position:fixed;z-index:110;inset:0;background:#0d1e27e9;display:flex;align-items:center;justify-content:center;padding:28px}.lightbox img{max-width:95vw;max-height:94vh;object-fit:contain;background:#fff}.lightbox button{position:absolute;right:18px;top:18px;background:white;border:0;border-radius:50%;width:40px;height:40px;font-size:22px;cursor:pointer}
@media(max-width:850px){.root{padding:14px 10px 60px}.intro{padding:18px}.layout{grid-template-columns:1fr}.sidebar{position:static;max-height:none}.topic-list{display:flex;gap:5px;overflow:auto}.topic-card{min-width:215px;max-width:215px}.side-head{padding:12px}.question-grid{grid-template-columns:1fr}.question-body{border-right:0;border-bottom:1px solid #e4edef;padding:16px}.files-pane{padding:16px}.question-title{padding:16px}.thread{padding:16px}.formbox{padding:15px}}
@media(max-width:500px){.top{padding:9px 12px}.brand{font-size:12px;gap:6px}.brand small{font-size:8px}.logo{width:34px;height:34px}.top-actions{gap:5px}.top button{padding:7px 9px;font-size:11px}.top-actions #account{display:none}.formrow{grid-template-columns:1fr}.question-heading h2{font-size:20px}.gallery{grid-template-columns:1fr}.file-figure img{height:auto;max-height:290px}.actions{justify-content:stretch}.actions button{flex:1}.intro h1{font-size:24px}}