@charset "utf-8";
@import url(common.css);

#wrap {
    display: grid;
    /* 2열 구조: 좌측 메뉴 너비(250px)와 나머지 전체 영역(1fr) */
    grid-template-columns: clamp(200px, 7.38vw + 158.3px, 300px) 1fr 250px;
    /* 3행 구조: 상단 높이(80px), 메인(높이 자동 채움), 하단 높이(100px) */
    grid-template-rows: auto 1fr auto;
    /* 구역 이름 정의 (직관적인 시각화 가능) */
    grid-template-areas:
        "header header header"
        "gnb main sidebar"
        "footer footer footer";
    min-height: 100vh;
    gap: var(--gap);
}

/* HEADER */
#header {grid-area: header; padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--border);}
#header .container {display: flex;align-items: flex-end; height: 100%; gap:var(--gap-sm)}
#header .container .action-area {margin-left: auto}

/* GNB */
#gnb {grid-area: gnb; font-size: 1.125rem;}
#gnb a {display: block; padding: .25rem .5rem;;}
#gnb .active {font-weight: bold; background-color: var(--gray80);}

/* SIDEBAR */
#sidebar {grid-area: sidebar;position: sticky; top:0}

/* MAIN */
section h1 {font-size: clamp(22px, 0.74vw + 17.83px, 32px);margin-bottom: 2rem;}
section h1+p {font-size: 1.25rem; margin-top: -1.5rem; margin-bottom: 2rem;}
.tool-grid {display: grid; grid-template-columns: 1fr; gap: var(--gap);}
.tool-grid a {display: block; border: 1px solid var(--border); border-radius: .25rem; padding:2rem; box-shadow: var(--shadow); position: relative;}
.tool-grid a:after {content: "\f285"; font-family: bootstrap-icons; font-size: 2rem; color: var(--gray50); position: absolute; right: 1.5rem; top: 50%; transform: translate(0, -50%);}
.tool-grid p {margin-bottom: 0;}
#content{grid-area: main;padding: var(--gap-lg);}
h2 {font-size: clamp(22px, 0.74vw + 17.83px, 32px);margin-bottom: 2rem;}
h2+p {font-size: 1.25rem; margin-top: -1.5rem; margin-bottom: 2rem;}
h3 {font-size: 1.125rem; margin-bottom: 1rem;}
h3+p {margin-top: -.5rem;margin-bottom: 1rem;}
.board-section h3 {font-size: clamp(22px, 0.74vw + 17.83px, 32px);}
.board-list {font-size: 1.125rem;}
.board-list li {display: flex; gap: var(--gap-xs);}
.board-list li+li {margin-top: 0.5rem;}
.board-list li:before {content: "\f26e"; font-family: bootstrap-icons; font-size: 1.125rem;}
.bottom-ad {margin-top:2rem}

/* FOOTER */
#footer {grid-area: footer;font-size: 90%; background-color: var(--gray80); padding-top: 2rem; padding-bottom: 2rem; text-align: center;}
.footer-disclaimer {color: var(--gray);}

.guide-text {color: var(--gray); margin-bottom: 1rem;}
.guide-text:last-child {margin-bottom: 0;}

@media (max-width: 1024px) {
    #wrap {
        grid-template-columns: clamp(200px, 4.34vw + 166.67px, 250px) 1fr;
        grid-template-areas:
        "header header"
        "gnb main"
        "footer footer";
    }
    #sidebar {display: none;}
}

@media (max-width: 565px) {
    #wrap {grid-template-columns: 1fr;
        grid-template-areas:
        "header"
        "main"
        "footer";
    }
    #header {position: sticky;top: 0;}
    #header p {text-align: right;max-width: 50%;font-size: 0;}
    #header p span{font-size: 1rem;}
    #gnb {position: absolute; display: none;}
}