* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:24px
}
body {
    margin:0;
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-sans);
    font-size:15px;
    line-height:1.6;
    word-break:keep-all;
    overflow-wrap:break-word
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    color:var(--color-heading);
    line-height:1.4
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
button,a,input {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
button:disabled {
    cursor:default
}
img,svg {
    display:block;
    max-width:100%
}
a,button {
    touch-action:manipulation
}
button {
    color:inherit
}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #3457ce;
    outline-offset:4px
}
button {
    border:0
}
a:hover {
    color:var(--color-brand)
}
[hidden] {
    display:none!important
}
.container {
    width:min(var(--content-width),calc(100% - 64px));
    margin-inline:auto
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
}
.skip-link {
    position:fixed;
    top:0;
    left:20px;
    transform:translateY(-150%);
    z-index:100;
    background:#222;
    color:#fff;
    padding:12px 20px
}
.skip-link:focus {
    transform:translateY(0)
}
.announcement { background:#000; }
.announcement a { display:block; }
.announcement picture { display:block; }
.announcement img { display:block; width:100%; max-width:1200px; height:auto; margin-inline:auto; } /* 기존 띠배너 .wrap 1200px */
.announcement.is-mobile-only { display:none; }
.utility__user strong { color:var(--color-brand); font-weight:700; }
.utility {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:14px;
    color:#767676;
    font-size:12px
}
.utility>div {
    display:flex;
    gap:19px
}
.header-main {
    display:flex;
    align-items:center;
    gap:44px; /* 실서버처럼 검색창을 로고 바로 오른쪽에 둔다(ksy/search.png) */
    padding-block:26px 24px
}
.brand {
    display:block;
    flex-shrink:0;
    width:206px
}
.brand img {
    width:100%;
    height:auto
}
.search {
    display:flex;
    align-items:center;
    width:292px;
    border:1px solid #ddd;
    border-radius:20px;
    padding-inline:15px 8px
}
.search input {
    background:none;
    border:0;
    min-width:0;
    width:100%;
    padding:9px 0;
    color:#333;
    outline-offset:1px
}
.search input:focus-visible {
    outline:0 /* 입력칸 안쪽 파란 테두리 대신 바깥 상자 테두리로 포커스를 보인다 */
}
.search input::-webkit-search-cancel-button {
    -webkit-appearance:none;
    display:none /* 브라우저 기본 지우기(×) 버튼 숨김 */
}
.search:focus-within {
    border-color:#333
}
.search input::placeholder {
    color:#707070
}
.search button {
    padding:6px 4px 6px 10px;
    background:none
}
.search svg {
    width:23px;
    height:23px
}
.main-nav {
    display:flex;
    gap:52px;
    align-items:center;
    padding-block:15px 18px;
    font-size:16px;
    font-weight:650;
    color:#333
}
.main-nav>a {
    min-height:28px
}
.classroom-link {
    margin-left:auto
}
.classroom-link span {
    margin-left:8px
}
.site-header {
    border-bottom:1px solid #eee
}
.menu-toggle,.mobile-account {
    display:none
}
.section {
    padding-block:68px
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px
}
.eyebrow {
    color:#b8481b;
    font-size:13px;
    font-weight:650;
    letter-spacing:.02em;
    margin-bottom:9px
}
h2 {
    font-size:28px;
    font-weight:740;
    letter-spacing:-.7px
}
.text-link {
    font-size:14px;
    white-space:nowrap;
    padding:6px 0;
    font-weight:550;
    color:#555
}
.text-link span {
    margin-left:9px
}
.section-description {
    margin-top:11px;
    color:var(--color-muted)
}
.section-note {
    font-size:14px;
    color:var(--color-muted)
}
.floating-contact {
    display:flex;
    align-items:center;
    gap:9px;
    position:fixed;
    right:24px;
    bottom:24px;
    border-radius:30px;
    background:var(--color-brand);
    padding:14px 20px;
    color:#fff;
    box-shadow:0 5px 18px #0002;
    z-index:10;
    font-size:14px;
    font-weight:650
}
.floating-contact:hover {
    background:#e75e27;
    color:#fff
}
.floating-contact svg {
    width:22px;
    height:22px
}
.preview-modal {
    position:fixed;
    inset:0;
    z-index:100;
    display:grid;
    place-items:center;
    padding:24px
}
.preview-modal__backdrop {
    position:absolute;
    inset:0;
    background:#0006
}
.preview-modal__content {
    position:relative;
    background:#fff;
    max-width:420px;
    width:100%;
    padding:36px;
    border-radius:12px;
    box-shadow:0 20px 80px #0002
}
.preview-modal__content h2 {
    font-size:23px;
    padding-right:18px;
    margin-bottom:14px
}
.preview-modal__content>p:not(.eyebrow) {
    font-size:14px;
    color:#767676
}
.preview-close {
    position:absolute;
    right:12px;
    top:8px;
    background:none;
    font-size:28px;
    width:40px;
    height:40px
}
.button-primary {
    padding:12px 24px;
    background:var(--color-brand);
    color:#fff;
    border-radius:5px;
    margin-top:26px;
    width:100%;
    font-weight:650
}
.modal-open {
    overflow:hidden
}
@media(max-width:1023px) {
    .container {
        width:calc(100% - 48px)
    }
    .main-nav {
        gap:28px;
        font-size:15px
    }
    .header-main {
        padding-block:24px
    }
    .search {
        width:260px
    }
    .section {
        padding-block:48px
    }
    h2 {
        font-size:25px
    }
}
@media(max-width:767px) {
    .container {
        width:calc(100% - 36px)
    }
    .announcement img { max-width:none; }
    .announcement.is-mobile-only { display:block; }
    .announcement.is-pc-only { display:none; }
    .utility {
        display:none
    }
    .header-main {
        flex-wrap:wrap;
        gap:15px;
        padding-block:20px 16px
    }
    .brand {
        width:164px
    }
    .menu-toggle {
        margin-left:auto
    }
    .search {
        order:3;
        width:100%;
        border-color:transparent;
        background:#f5f5f5;
        border-radius:6px;
        padding-inline:13px
    }
    .search input {
        font-size:14px;
        padding:10px 0
    }
    .search svg {
        width:20px;
        height:20px
    }
    .menu-toggle {
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        width:40px;
        height:40px;
        background:none;
        padding:9px
    }
    .menu-toggle span {
        height:2px;
        width:22px;
        background:#333
    }
    .main-nav {
        display:none;
        padding-block:5px 20px;
        flex-wrap:wrap;
        gap:0
    }
    .main-nav.is-open {
        display:flex
    }
    .main-nav>a {
        flex:1 1 50%;
        padding-block:12px;
        min-height:48px
    }
    .main-nav .classroom-link {
        margin:0
    }
    .mobile-account {
        display:flex;
        flex-wrap:wrap;
        width:100%;
        border-top:1px solid #eee;
        margin-top:8px;
        padding-top:16px;
        gap:16px;
        font-size:12px;
        color:#767676
    }
    .section {
        padding-block:38px
    }
    .section-heading {
        gap:12px;
        margin-bottom:22px;
        align-items:start
    }
    h2 {
        font-size:22px;
        letter-spacing:-.5px
    }
    .eyebrow {
        font-size:12px;
        margin-bottom:7px
    }
    .text-link {
        font-size:12px;
        margin-top:22px
    }
    .text-link span {
        margin-left:3px
    }
    .section-description {
        font-size:13px
    }
    .section-note {
        display:none
    }
    .floating-contact {
        bottom:16px;
        right:16px;
        padding:12px 16px;
        font-size:12px
    }
    .floating-contact svg {
        width:20px;
        height:20px
    }
    .preview-modal__content {
        padding:30px 24px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        animation:none!important;
        transition:none!important
    }
}

/* 공통 푸터: 기존 SERVER-EDU common.css #footer(PC)·m_common.css #footer(모바일) 배치를 하나의 반응형 마크업으로 옮김 */
.site-footer { border-top:1px solid var(--color-border); font-size:12px; color:#7f7f7f; }
.footer-wrap { display:flex; align-items:flex-start; }
.footer-logo { flex:none; width:150px; padding-top:34px; }
.footer-logo img { display:block; width:100%; height:auto; }
.footer-info { flex:1; min-width:0; padding:30px 30px 30px 110px; }
.footer-info>* { margin:0; padding:5px 0; line-height:1.5; }
.footer-links { display:flex; flex-wrap:wrap; column-gap:40px; row-gap:4px; }
.footer-links a { font-size:14px; font-weight:500; color:var(--color-text); }
.footer-links a:hover, .footer-buttons a:hover, .footer-cs a:not(.footer-cs-button):hover { text-decoration:underline; }
.footer-company i { font-style:normal; padding:0 15px; color:var(--color-border); }
.footer-center { color:#333; }
.footer-center p { margin:0; }
.footer-icon { display:flex; align-items:center; gap:5px; }
.footer-icon svg { flex:none; width:13px; height:13px; }
.footer-center svg { fill:currentColor; }
.footer-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px!important; }
.footer-buttons a { width:138px; height:23px; border:1px solid var(--color-border); border-radius:3px; text-align:center; line-height:21px; font-size:13px; color:var(--color-text); }
.footer-cs { flex:none; padding:30px 0 70px 30px; border-left:1px solid var(--color-border); color:var(--color-text); }
.footer-title { font-size:15px; font-weight:500; letter-spacing:0; color:var(--color-text); }
.footer-cs ul { list-style:none; margin:5px 0 10px; padding:0 0 15px; border-bottom:1px solid var(--color-border); }
.footer-cs li { line-height:1.5; margin-top:5px; }
.footer-cs-button { display:inline-block; width:100px; line-height:36px; margin-bottom:5px; border-radius:6px; background:var(--color-brand); color:#fff; font-size:16px; font-weight:500; text-align:center; }
.footer-cs-button:hover { background:#e75e27; color:#fff; }
.footer-cs>a { margin-top:7px; }
.footer-mobile-only { display:none!important; }
@media(max-width:1023px) {
    .footer-wrap { flex-wrap:wrap; }
    .footer-logo { width:100%; padding-top:30px; }
    .footer-logo img { width:150px; }
    .footer-info { padding:10px 30px 30px 0; }
    .footer-cs { width:250px; }
}
@media(max-width:767px) {
    .site-footer { padding-bottom:76px; }
    .footer-wrap.container { flex-direction:column; flex-wrap:nowrap; width:100%; }
    .footer-info { display:contents; }
    .footer-info>*, .footer-cs { padding-inline:18px; }
    .footer-logo { order:1; width:auto; padding:20px 18px 0; }
    .footer-logo img { width:auto; height:24px; }
    .footer-company { order:2; padding-top:30px!important; line-height:1.8!important; }
    .footer-company span { display:block; }
    .footer-company i, .footer-pc-only { display:none!important; }
    .footer-cs { order:3; width:auto; padding-block:0; border:0; color:#7f7f7f; }
    .footer-cs ul { margin:0; padding:0; border:0; }
    .footer-cs li { line-height:1.8; margin:0; }
    .footer-title { font-weight:700; color:#333; padding:20px 0 10px; }
    .footer-cs-button { width:80px; line-height:22px; margin:0 0 10px; border-radius:0; font-size:12px; font-weight:400; }
    .footer-cs>a { margin:0; line-height:1.8; }
    .footer-center { order:4; color:#7f7f7f; }
    .footer-center .footer-icon { align-items:flex-start; line-height:1.8; }
    .footer-center svg { margin-top:5px; }
    .footer-buttons { order:5; margin-top:5px!important; padding-bottom:30px!important; border-bottom:1px solid var(--color-border); }
    .footer-links { order:6; justify-content:center; column-gap:0; padding:20px 30px!important; border-bottom:1px solid var(--color-border); line-height:2!important; }
    .footer-links a { padding:0 10px; font-size:12px; font-weight:400; color:#7f7f7f; }
    .footer-copy { order:7; text-align:center; font-size:11px; line-height:2!important; }
    .footer-mobile-only { display:block!important; }
    .footer-links .footer-mobile-only { display:inline!important; }
    .footer-icon.footer-mobile-only { display:flex!important; }
}

/* P33 상담 안내 창(components/consult-dialog.php) */
.consult-dialog { width:min(420px, calc(100% - 32px)); padding:32px 28px 28px; border:0; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.2); color:#333; }
.consult-dialog::backdrop { background:rgba(0,0,0,.45); }
.consult-dialog__close { position:absolute; top:14px; right:16px; width:32px; height:32px; border:0; background:none; color:#666; font-size:26px; line-height:1; cursor:pointer; }
.consult-dialog__eyebrow { color:var(--color-brand); font-size:13px; font-weight:700; }
.consult-dialog h2 { margin-top:4px; color:#000; font-size:24px; font-weight:700; }
.consult-dialog__lead { margin-top:8px; color:#666; font-size:14px; line-height:1.6; }
.consult-dialog__info { margin:20px 0 0; padding:16px; border-radius:10px; background:#f6f7f9; font-size:14px; }
.consult-dialog__info div { display:flex; gap:12px; padding:4px 0; }
.consult-dialog__info dt { flex:none; width:64px; color:#888; }
.consult-dialog__info dd { margin:0; }
.consult-dialog__note { margin-top:10px; color:#888; font-size:12px; line-height:1.5; }
.consult-dialog__start { display:block; margin-top:20px; border-radius:8px; background:var(--color-brand); color:#fff; font-size:16px; font-weight:700; line-height:52px; text-align:center; }
.consult-dialog__start:hover { color:#fff; filter:brightness(.95); }
.consult-dialog__corp { display:block; margin-top:12px; color:#555; font-size:13px; text-align:center; text-decoration:underline; }