*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* 상단 메뉴바가 고정(sticky)이라, 메뉴로 이동했을 때 제목이 메뉴바에 가리지 않도록 여백을 줍니다 */
section[id],header[id],footer[id]{scroll-margin-top:88px}
body{margin:0;background:#fff7e6;font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#111;overflow-x:hidden}
img,video{content-visibility:auto}
img{background:#f4eee0}
video{background:#000}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
input,select,textarea,button{font-family:inherit}
@keyframes wob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-2deg)}}
.board-card{background:#fff;border:3px solid #111;box-shadow:8px 8px 0 #111;padding:24px 24px 22px}
.board-card h3{font-size:24px;font-weight:900;color:#111;margin-bottom:10px}
.board-card p{font-size:14px;line-height:1.6;color:#555;font-weight:600;margin-bottom:14px}
.board-form{display:grid;gap:10px;margin-bottom:16px}
.board-form input,.board-form textarea,.board-form button{width:100%;border:3px solid #111;padding:12px 13px;font-size:14px;color:#111;background:#fff7e6;outline:none}
.board-form textarea{min-height:92px;resize:vertical}
.board-form button{background:var(--accent,#ff4d3d);color:#fff;font-weight:900;cursor:pointer;box-shadow:4px 4px 0 #111}
.board-list{display:grid;gap:10px}
.board-item{border:3px solid #111;background:#fff7e6;padding:12px 13px}
.board-item strong{display:block;font-size:14px;font-weight:900;color:#111;margin-bottom:4px}
.board-item .meta{font-size:12px;color:#666;font-weight:700;margin-bottom:6px}
.board-item .content{font-size:13px;line-height:1.6;color:#444;white-space:pre-wrap}
.board-item img{max-width:100%;margin-top:8px;border:2px solid #111;display:block}
.board-empty{border:3px dashed #111;padding:16px;text-align:center;color:#666;font-weight:700;background:#fff}
.portal-shell{display:grid;gap:18px}
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.portal-card{background:#fff;border:3px solid #111;box-shadow:8px 8px 0 #111;padding:24px 24px 22px}
.portal-card h3{font-size:22px;font-weight:900;color:#111;margin-bottom:8px}
.portal-card p{font-size:14px;line-height:1.6;color:#555;font-weight:600;margin-bottom:14px}
.portal-badge{display:inline-block;background:#111;color:#ffd23f;font-weight:900;font-size:12px;padding:6px 12px;border:2px solid #111;margin-bottom:12px}
.portal-form{display:grid;gap:10px}
.portal-form input,.portal-form select,.portal-form textarea,.portal-form button{width:100%;border:3px solid #111;padding:12px 13px;font-size:14px;color:#111;background:#fff7e6;outline:none}
.portal-form textarea{min-height:90px;resize:vertical}
.portal-form button{background:var(--accent,#ff4d3d);color:#fff;font-weight:900;cursor:pointer;box-shadow:4px 4px 0 #111}
.portal-form .subtle{background:#fff;border:2px solid #111;box-shadow:none}
.portal-list{display:grid;gap:10px}
.portal-item{border:3px solid #111;padding:12px 13px;background:#fff7e6}
.portal-item strong{display:block;font-size:14px;font-weight:900;color:#111;margin-bottom:4px}
.portal-item .meta{font-size:12px;color:#666;font-weight:700;margin-bottom:6px}
.portal-item .content{font-size:13px;line-height:1.6;color:#444;white-space:pre-wrap}
.portal-empty{border:3px dashed #111;padding:14px;text-align:center;color:#666;font-weight:700;background:#fff}
.portal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.portal-actions button{flex:1;min-width:120px;padding:9px 12px;font-size:13px}
.portal-inline{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:900px){.portal-grid{grid-template-columns:1fr}}
/* ===== 상단 메뉴바 (드롭다운) ===== */
.nav-menu{display:flex;align-items:center;gap:2px;font-size:14px;font-weight:800;color:#111}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:5px;padding:11px 14px;cursor:pointer;white-space:nowrap}
.nav-item:hover>a{background:#111;color:#ffd23f}
.nav-item .caret{font-size:10px;line-height:1}
.dropdown{position:absolute;top:100%;left:0;min-width:186px;background:#fff;border:3px solid #111;box-shadow:5px 5px 0 #111;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .12s,transform .12s;z-index:60}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:12px 16px;font-size:13.5px;font-weight:700;color:#111;border-bottom:2px solid #111;white-space:nowrap}
.dropdown a:last-child{border-bottom:0}
.dropdown a:hover{background:#ffd23f}
/* 햄버거 버튼 (모바일 전용) */
.nav-toggle-cb{display:none}
.hamburger{display:none;cursor:pointer;user-select:none;font-size:24px;line-height:1;padding:5px 9px;border:3px solid #111;background:#fff;box-shadow:3px 3px 0 #111}
.hamburger::before{content:"\2630"}
@media(max-width:820px){
.hamburger{display:block}
.nav-toggle-cb:checked ~ .hamburger::before{content:"\2715"}
.nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#ffd23f;border-bottom:3px solid #111;padding:4px 22px 18px;display:none}
.nav-toggle-cb:checked ~ .nav-menu{display:flex}
.nav-item{border-top:2px solid #111}
.nav-item>a{padding:14px 4px;justify-content:space-between}
.nav-item:hover>a{background:transparent;color:#111}
.dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;min-width:0;background:transparent;padding:0 0 10px 14px}
.dropdown a{border-bottom:0;padding:9px 4px;font-weight:600;color:#333}
.dropdown a:hover{background:transparent;text-decoration:underline}
.nav-menu>a[href$="#contact"]{margin:12px 0 0;text-align:center}
}
/* ===== 모바일 반응형 (폰 화면) ===== */
@media(max-width:700px){
.site h1{font-size:38px !important;line-height:1.08 !important}
.site h2{font-size:27px !important;line-height:1.22 !important}
.site h3{font-size:20px !important}
.site header,.site section{padding-left:18px !important;padding-right:18px !important}
.site header{padding-top:40px !important;padding-bottom:44px !important}
.site section{padding-top:52px !important;padding-bottom:52px !important}
.site [style*="grid-template-columns"]{grid-template-columns:1fr !important}
.site [style*="grid-template-columns"][style*="gap:16px"]{grid-template-columns:1fr 1fr !important;gap:10px !important}
.site [style*="position:absolute"]{display:none !important}
.site p,.site li{word-break:keep-all}
}
/* ---- 페이지 분리 후 추가 ---- */
/* 현재 보고 있는 메뉴 표시 - 밑줄 대신 배경을 채워서 표시합니다 */
.nav-menu .nav-item>a.nav-current{background:#111;color:#ffd23f}
.nav-menu .nav-item>a.nav-current .caret{color:#ffd23f}
/* 마우스를 올렸을 때도 같은 모양을 유지 */
.nav-menu .nav-item:hover>a.nav-current{background:#111;color:#ffd23f}
/* '로그인' 처럼 이미 색이 있는 버튼은 조금 어둡게 눌린 느낌으로 */
.nav-menu>a.nav-current{filter:brightness(.72)}
/* 각 하위 페이지 상단 제목 영역 */
.page-head{background:#ffd23f;border-bottom:3px solid #111;padding:46px 40px}
.page-head .inner{max-width:1200px;margin:0 auto}
.page-head .tag{display:inline-block;background:#111;color:#ffd23f;font-weight:800;font-size:13px;padding:8px 15px;transform:rotate(-1deg);margin-bottom:12px}
.page-head h1{font-size:40px;font-weight:900;color:#111;letter-spacing:-.03em;line-height:1.1;margin:0}
.page-head p{margin-top:12px;font-size:16px;line-height:1.65;color:#333;font-weight:600;max-width:760px}
@media (max-width:900px){.page-head{padding:34px 20px}.page-head h1{font-size:28px}}
/* 상단 메뉴 'KI암산챔피언' 안의 암산챔피언 바로가기 - 눈에 띄게 */
.dropdown a.go-champion{background:var(--accent,#ff4d3d);color:#fff;font-weight:900;font-size:15px;text-align:center;padding:16px 18px;letter-spacing:-.01em}
.dropdown a.go-champion:hover{background:#111;color:#ffd23f}
@media (max-width:900px){
.dropdown a.go-champion{margin:8px 0 4px;border:3px solid #111;box-shadow:3px 3px 0 #111;color:#fff;font-weight:900}
.dropdown a.go-champion:hover{text-decoration:none;color:#ffd23f}
}
/* 한글이 단어 중간에서 어중간하게 잘려 내려가는 것을 막습니다.
(예: "KI암산챔피언 논산 내 / 동점" 처럼 쪼개지는 현상)
word-break 는 자식 요소로 상속되므로 .site 한 곳에만 지정하면 됩니다. */
.site{word-break:keep-all;overflow-wrap:break-word}
/* ===== Q&A ===== */
.qna-search{display:flex;gap:10px;margin-bottom:10px}
.qna-search input{flex:1;min-width:0;border:3px solid #111;background:#fff7e6;padding:15px 17px;font-size:16px;font-weight:600;color:#111;outline:none;box-shadow:5px 5px 0 #111}
.qna-search input:focus{background:#fff;box-shadow:5px 5px 0 var(--accent,#ff4d3d)}
.qna-search button{border:3px solid #111;background:#111;color:#ffd23f;font-weight:900;font-size:14px;padding:0 18px;cursor:pointer;box-shadow:5px 5px 0 #111;white-space:nowrap}
.qna-search button:hover{background:var(--accent,#ff4d3d);color:#fff}
.qna-search-info{font-size:14px;font-weight:800;color:#555;margin:14px 2px 18px;min-height:20px}
.qna-list{display:flex;flex-direction:column;gap:14px}
.qna-item{border:3px solid #111;background:#fff;box-shadow:6px 6px 0 #111}
.qna-item[open]{box-shadow:6px 6px 0 var(--accent,#ff4d3d)}
.qna-item summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.qna-item summary::-webkit-details-marker{display:none}
.qna-item summary:hover{background:#fff7e6}
.qna-q{display:flex;align-items:flex-start;gap:10px;font-size:17px;font-weight:900;color:#111;line-height:1.45}
.qna-q .mark{color:var(--accent,#ff4d3d);font-size:19px;line-height:1.3}
.qna-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;font-weight:800;color:#666}
.qna-badge{display:inline-block;background:#ffd23f;color:#111;border:2px solid #111;padding:3px 9px;font-size:11.5px;font-weight:900}
.qna-badge.wait{background:#eee;color:#666}
.qna-badge.cat{background:#2b6bff;color:#fff}
.qna-a{border-top:3px solid #111;background:#fff7e6;padding:18px 20px;font-size:15.5px;line-height:1.75;font-weight:600;color:#333;white-space:pre-wrap}
.qna-a .mark{color:#2b6bff;font-weight:900;margin-right:6px}
.qna-a.empty{color:#888;font-weight:700}
.qna-admin{border-top:3px dashed #111;padding:14px 20px;background:#fff}
.qna-admin textarea{width:100%;border:3px solid #111;padding:11px 13px;font-size:14.5px;font-family:inherit;outline:none;resize:vertical;min-height:70px;background:#fff7e6}
.qna-admin .row{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.qna-admin button{border:3px solid #111;background:#17c08a;color:#fff;font-weight:900;font-size:13.5px;padding:9px 15px;cursor:pointer}
.qna-admin button.danger{background:#fff;color:#111}
.qna-admin button:hover{filter:brightness(.9)}
.qna-empty{border:3px dashed #111;background:#fff7e6;padding:34px 20px;text-align:center;font-size:15px;font-weight:800;color:#666}
.qna-ask-message{margin-top:12px;font-size:14px;font-weight:800;display:none}
@media (max-width:700px){
.qna-search{flex-direction:column}
.qna-search button{padding:12px}
.qna-q{font-size:15.5px}
}
/* ===== 로그인이 필요한 페이지 안내 ===== */
.login-gate{max-width:560px;margin:20px auto;border:3px solid #111;background:#fff7e6;box-shadow:10px 10px 0 #111;padding:44px 30px;text-align:center}
.login-gate-icon{font-size:46px;line-height:1;margin-bottom:16px}
.login-gate h3{font-size:26px;font-weight:900;color:#111;letter-spacing:-.02em;margin-bottom:12px}
.login-gate p{font-size:15.5px;line-height:1.7;font-weight:600;color:#555;margin-bottom:24px}
.login-gate-btn{display:inline-block;background:var(--accent,#ff4d3d);color:#fff;font-weight:900;font-size:16px;padding:15px 28px;border:3px solid #111;box-shadow:6px 6px 0 #111}
.login-gate-btn:hover{background:#111;color:#ffd23f}
@media (max-width:700px){.login-gate{padding:34px 20px;box-shadow:6px 6px 0 #111}.login-gate h3{font-size:21px}}