/* Box sizing 설정 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 기본 마진, 패딩 제거 */
* {
    margin: 0;
    padding: 0;
}

/* HTML, Body 기본 설정 */
html,
body {
    height: 100%;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* 미디어 요소 기본 설정 */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 폼 요소 폰트 상속 */
input,
button,
textarea,
select {
    font: inherit;
}

/* 폼 요소 focus 스타일 */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 텍스트 오버플로우 처리 */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    word-break: keep-all; /* 한국어 텍스트 최적화 */
}

/* 리스트 스타일 제거 */
ul,
ol {
    list-style: none;
}

/* 링크 기본 스타일 제거 */
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

/* 버튼 기본 스타일 제거 */
button {
    background: none;
    border: none;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 테이블 기본 설정 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Body 스타일 */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', '맑은 고딕', sans-serif;
    font-size: 16px;
    color: #222;
    background-color: #fff;
    word-break: keep-all;
    word-wrap: break-word;
}

/* 유틸리티 클래스 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/* =======================================
   레이아웃 구조 확인용 (뼈대 단계)
======================================= */

/* 콘텐츠 영역 공통 (최대 너비 1300px) */
.inner {
    max-width: 1300px;
    margin: 0 auto;
}

/* 배경 이미지 공통 속성 (원본 사이즈로 반복) */
.site-header,
.site-main,
.site-footer {
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;
}

/* 헤더 배경 */
.site-header {
    padding: 0;
    background-color: #fff;
    background-image: url('../images/bg_header.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* 푸터 배경 */
.site-footer {
    background-image: url('../images/bg_footer.png');
}


/* =======================================
   Mobile First (모바일 기본값)
======================================= */
/* 가로폭 0px ~ 767px까지 적용될 모바일 레이아웃 */
/* =======================================
   HEADER - PC
======================================= */

/* ---------- 상단 링크 ---------- */
.header-top {
    height: 100px;
    background-color: #fff;
}

.header-top .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header-logo {
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #b01bc8; /* 그라데이션 미지원 대비 */
    background: linear-gradient(90deg, #c21bc9 0%, #7a1fd1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-book-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 58px;
    padding: 0 22px;
    border-radius: 29px;
    background-color: #ffcb05;
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #222;
    transition: filter 0.2s;
}

.header-book-link:hover {
    text-decoration: none;
    filter: brightness(0.96);
}

/* ---------- 히어로 비주얼 ---------- */
.header-hero {
    min-height: 890px;
}

.header-hero .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 70px 0 60px;
}

.hero-title img {
    width: 902px; /* 이미지 원본 크기에 맞춰 조정 */
}

.hero-visual {
    margin-top: 25px;
}

.hero-visual img {
    width: 1280px; /* 이미지 원본 크기에 맞춰 조정 */
    animation: hero-float 4s ease-in-out infinite; /* 둥실둥실 떠 있는 느낌 */
}

/* 히어로 비주얼: 위아래로 10px 정도만 천천히 움직임 */
@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
/* 시스템에서 '동작 줄이기'를 켠 사용자는 움직임 없음 */
@media (prefers-reduced-motion: reduce) {
    .hero-visual img { animation: none; }
}

.btn-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 474px;
    height: 80px;
    margin-top: 27px;
    border-radius: 40px;
    background: linear-gradient(180deg, #e000d6 0%, #c900c0 100%);
    box-shadow: 0 8px 0 #8a0a8f, 0 14px 20px rgba(0, 0, 0, 0.25);
    font-weight: 600;
    font-size: 34px;
    color: #fff;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn-start:hover {
    text-decoration: none;
    transform: translateY(2px);
    box-shadow: 0 6px 0 #8a0a8f, 0 10px 16px rgba(0, 0, 0, 0.25);
}

.btn-start .icon-external {
    width: 34px;
    height: 34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- 하단 정보 전달 ---------- */
.header-info {
    height: 230px;
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.header-info .inner {
    height: 100%;
}

.info-list {
    width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    height: 100%;
}

.info-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 항목 사이 구분선 */
.info-item + .info-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 150px;
    transform: translateY(-50%);
    background-color: #d5dbe5;
}

.info-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.info-step .info-icon    { background-image: url('../images/info_icon_01.png'); }
.info-major .info-icon   { background-image: url('../images/info_icon_02.png'); }
.info-subject .info-icon { background-image: url('../images/info_icon_03.png'); }
.info-time .info-icon    { background-image: url('../images/info_icon_04.png'); }

.info-num {
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.info-step .info-num    { color: #ff9a1f; }
.info-major .info-num   { color: #11b58a; }
.info-subject .info-num { color: #ff5c98; }
.info-time .info-num    { color: #2f9bf0; }

.info-desc {
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    margin-top: 6px;
    font-weight: 400;
    font-size: clamp(16px, 1.9vw, 26px);
    color: #222;
}

/* 1340px 이하: 콘텐츠가 화면 끝에 붙지 않도록 */
@media (max-width: 1340px) {
    .site-header .inner {
        padding: 0 20px;
    }
}

/* 768px ~ 1340px (태블릿): PC 고정 px 값 때문에 깨지던 헤더 영역을 화면 폭에 맞게 조정 */
@media (min-width: 768px) and (max-width: 1340px) {

    /* 상단: 로고·도서 안내 버튼이 한 줄에 들어가도록 축소 */
    .header-top {
        height: 90px;
    }

    .header-logo {
        font-size: clamp(28px, 4.2vw, 40px);
    }

    .header-book-link {
        height: 50px;
        padding: 0 18px;
        font-size: clamp(18px, 2.4vw, 26px);
    }

    /* 히어로: 고정 높이 해제, 이미지는 inner 폭을 넘지 않게 */
    .header-hero {
        min-height: 0;
    }

    .header-hero .inner {
        padding: 50px 20px 60px;
    }

    .hero-title img {
        width: 100%;
        max-width: 902px;
        height: auto;
    }

    .hero-visual img {
        width: 100%;
        max-width: 1280px;
        height: auto;
    }

    .btn-start {
        width: min(474px, 70%);
        height: 72px;
        font-size: clamp(26px, 3.4vw, 34px);
    }

    /* 하단 정보: 4열 유지, 고정 폭 1300px 해제 */
    .header-info {
        height: auto;
    }

    .info-list {
        width: 100%;
        height: auto;
        padding: 40px 0;
    }

    .info-item + .info-item::before {
        height: 110px;
    }
}

@media (max-width: 767px) {

    /* 헤더 배경 (모바일용 이미지로 교체) */
    .site-header {
        background-image: url('../images/bg_header_mo.png');
    }

    .site-header .inner {
        padding: 0 16px;
    }

    /* 상단: 로고만 가운데 정렬, 도서 안내 링크는 숨김 */
    .header-top {
        height: 90px;
    }

    .header-top .inner {
        justify-content: center;
    }

    .header-logo {
        font-size: clamp(28px, 8.5vw, 40px);
    }

    .header-book-link {
        display: none;
    }

    /* 히어로 */
    .header-hero {
        min-height: 0;
    }

    .header-hero .inner {
        padding: 40px 16px 50px;
    }

    .hero-title img {
        width: 80%;
        margin: 0 auto;
    }

    .hero-visual {
        margin-top: 20px;
    }

    .hero-visual img {
        width: 94%;
        margin: 0 auto;
    }

    .btn-start {
        width: 88%;
        height: 76px;
        margin-top: 24px;
        border-radius: 38px;
        font-size: clamp(22px, 6.5vw, 28px);
    }

    .btn-start .icon-external {
        width: 30px;
        height: 30px;
    }

    /* 하단 정보: 1열 세로 배치 */
    .header-info {
        height: auto;
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .info-list {
        width: 100%;
        grid-template-columns: repeat(2, 1fr); /* 2열 배치 (1열 → 2열) */
        height: auto;
        padding: 10px 0;
    }

    .info-item {
        padding: 20px 8px;
    }

    .info-item + .info-item::before {
        display: none;
    }

    .info-icon {
        width: 56px;
        height: 56px;
    }

    .info-num {
        font-size: clamp(24px, 7.5vw, 30px);
    }

    /* 2열이라 칸이 좁아져 글자 크기를 줄임 */
    .info-desc {
        font-size: clamp(16px, 4.6vw, 22px);
        line-height: 1.4;
        word-break: keep-all;
    }
}


/* ===== SECTION STEPS - PC ===== */
.section-steps {
    background-color: #F5F5F5;
    padding: 180px 0 0;
}
.section-steps .inner {
    max-width: 1300px; /* 기존 inner 유지하되 내부 리스트 폭을 별도 지정 */
}
.section-steps .sec-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 110px;
}
.section-steps .sec-char img {
    width: 228px;
    height: auto;
}

.section-steps .sec-title {
    display: inline-block;
    background-color: #4224EB;
    color: #fff;
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 50px;
    padding: 6px 14px;
    border-radius: 26px;
    border-bottom-left-radius: 0;
}
.section-steps .sec-desc {
    margin-top: 8px;
    font-size: 30px;
    color: #222;
}

.section-steps ol.steps-list {
    max-width: 1080px; 
    margin: 0 auto;
    padding: 0;
}
.section-steps .steps-item {
    position: relative;
    margin-bottom: 70px;
}
.section-steps .steps-item:last-child {
    margin-bottom: 0;
}
.section-steps .steps-card {
    background: #fff;
    width: 100%;
    max-width: 1080px;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    padding: 50px 60px;
    position: relative;
}
.section-steps .steps-num {
    position: absolute;
    width: 101px;
    height: 101px;
    border-radius: 50%;
    background: #4224eb;
    color: #fff;
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: -44px;
    top: -44px;
    z-index: 1;
}
.section-steps .steps-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.section-steps .steps-name {
    color: #00A974;
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 40px;
}
.section-steps .steps-page {
    background: #FFCC00;
    color: #222;
    font-weight: 600;
    font-size: 28px;
    padding: 2px 12px;
    border-radius: 999px;
    align-self: center;
}
.section-steps .steps-desc {
    margin-top: 10px;
    font-size: 32px;
    color: #222;
}

/* 카드 사이의 아래쪽 화살표 (삼각형) */
.section-steps .steps-item::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -40px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #fff;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.15));
}
.section-steps .steps-item:last-child::after {
    display: none;
}

/* ===== SECTION STEPS - MOBILE ===== */
@media (max-width: 767px) {
    .section-steps {
        padding: 40px 0;
    }

    .section-steps .sec-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        margin-bottom: 60px;
    }

    .section-steps .sec-char img {
        width: 70vw;
        max-width: 173px;
        height: auto;
        margin-bottom: 0;
    }

    .section-steps ol.steps-list {
        max-width: 100%;
        padding: 0 16px;
        margin: 0 auto;
    }

    .section-steps .steps-card {
        padding: 22px 18px;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        padding-top: 40px; /* 번호 원과 겹치지 않도록 여유 */
    }

    .section-steps .steps-num {
        width: 60px;
        height: 60px;
        left: 50%;
        transform: translate(-50%, 0);
        top: -30px;
        font-size: clamp(30px, 12vw, 40px);
    }

    .section-steps .steps-name {
        font-size: clamp(28px, 9vw, 38px);
    }

    .section-steps .steps-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .section-steps .steps-page {
        font-size: clamp(12px, 4.8vw, 16px);
    }

    .section-steps .steps-desc {
        font-size: clamp(18px, 5.4vw, 24px);
        line-height: 1.5;
        text-align: center;
    }

    .section-steps .steps-item{
        margin-bottom: 100px;
    }

    /* 모바일에서 .br-pc 는 숨김 처리 */
    .section-steps .br-pc {
        display: none;
    }
}


/* ===== SECTION USERS - PC ===== */
.section-users {
    background-color: #F5F5F5; /* 섹션 배경(steps와 동일) */
    padding: 180px 0 ;
}
.section-users .inner {
    max-width: 1300px;
    margin: 0 auto;
}
.section-users .sec-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; /* 캐릭터와 텍스트 사이 간격 약 30px */
    margin-bottom: 35px; /* sec-head 아래 여백 */
}
.section-users .sec-char img {
    width: 188px;
    height: auto;
}
.section-users .sec-title {
    display: inline-block;
    background-color: #4224EB; /* 말풍선 색(임시) */
    color: #ffffff;
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 50px;
    padding: 6px 14px;
    border-radius: 26px;
    border-bottom-left-radius: 0;
}

.section-users .sec-desc {
    margin-top: 8px; /* 제목과 약 8px 간격 */
    font-size: 30px;
    color: #222;
    line-height: 46px; /* 줄 간격 약 46px */
}

/* ===== 교사 박스 ===== */
.section-users .users-box.users-teacher {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    background: linear-gradient(180deg, #6677ff 0%, #8D4BFF 100%);
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    padding: 48px 57px 54px;
    text-align: center;
}
.section-users .users-teacher .users-title {
    color: #FDDB00; /* 제목 노란색(임시) */
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 50px;
}
.section-users .users-teacher .users-lead {
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 30px;
    margin-top: 20px;
}
.section-users .users-teacher .time-list {
    display: flex;
    gap: 22px;
    justify-content: center;
    margin-top: 27px; /* 리드와 약 27px 간격 */
}
.section-users .users-teacher .time-item {
    width: 215px;
    height: 125px;
    background-color: #5300B9; 
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.section-users .users-teacher .time-min {
    color: #ffd400; /* 노란색(임시) */
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 36px;
}
.section-users .users-teacher .time-name {
    color: #fff;
    font-size: 26px;
    margin-top: 8px;
}

.section-users .users-teacher .users-bullet {
    width: fit-content;
    margin: 29px auto 0; /* time-list와 약 29px 간격 */
    text-align: left;
    color: #fff;
    font-size: 28px;
    letter-spacing: -0.03em;
}
.section-users .users-teacher .users-bullet li {
    position: relative;
    padding-left: 20px; 
    margin-bottom: 20px; 
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
}
.section-users .users-teacher .users-bullet li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.section-users .users-teacher .btn-teacher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 563px;
    height: 75px;
    margin: 25px auto 0;
    background: #ffcc00;
    color: #222;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 30px;
    border-radius: 20px;
    box-shadow: 0 8px 0 #ff5a1f, 0 6px 18px rgba(34,34,34,0.08);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
/* 마우스오버 시 살짝 눌리는 효과 (히어로 .btn-start와 동일: 2px 내려가고 하단 띠 2px 감소) */
.section-users .users-teacher .btn-teacher:hover {
    text-decoration: none;
    transform: translateY(2px);
    box-shadow: 0 6px 0 #ff5a1f, 0 4px 14px rgba(34,34,34,0.08);
}

/* ===== 학생 박스 ===== */
.section-users .users-box.users-student {
    width: 100%;
    max-width: 1300px;
    margin: 40px auto 0; /* 교사 박스와의 간격 약 40px */
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    border: 8px solid transparent;
    background: linear-gradient(#f2fbff, #f2fbff) padding-box, linear-gradient(180deg, #5ab0ff, #5a2be0) border-box;
    padding: 42px 52px 26px; /* 테두리 8px 별도 */
    text-align: center;
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
}
.section-users .users-student .users-title {
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    color: #4224EB; /* 파란 보라색(임시) */
    font-weight: 700;
    font-size: 50px;
}
.section-users .users-student .users-lead {    
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    color: #4224EB;
    font-weight: 500;
    font-size: 30px;
    margin-top: 20px;
}
.section-users .users-student .users-bullet {
    width: fit-content;
    margin: 40px auto 0; 
    text-align: left;
    color: #222;
    font-size: 28px;
    font-weight: 500;
}
.section-users .users-student .users-bullet li {
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px; 
}
.section-users .users-student .users-bullet li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #D800CD; /* 자홍색(임시) */
    border-radius: 50%;
}


/* ===== SECTION USERS - MOBILE ===== */
@media (max-width: 767px) {
    .section-users { padding: 40px 0; }
    .section-users .inner { padding: 0; }

    .section-users .sec-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0; /* 캐릭터와 제목 간격 0으로 */
        margin-bottom: 40px; /* 설명 → 교사 박스 약 80px */
    }
    .section-users .sec-char img {
        width: 40vw;
        max-width: 173px;
        height: auto;
        margin-bottom: 0;
    }
    .section-users .br-pc { display: none; }

    /* 교사 박스 모바일 */
    .section-users .users-box.users-teacher {
        margin: 0 auto;
        border-radius: 22px;
        padding: 30px 30px 50px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    }
    .section-users .users-teacher .users-title {
        font-size: clamp(34px, 11.63vw, 50px);
        text-align: center;
    }
    .section-users .users-teacher .users-lead {
        font-size: clamp(18px, 5.4vw, 24px);
        text-align: center;
        line-height: 1.5;
        margin-top: 8px;
    }
    /* 시간 카드 2열 배치 (5개라서 마지막 1개는 가운데 정렬) */
    .section-users .users-teacher .time-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin-top: 20px;
    }
    .section-users .users-teacher .time-item {
        width: calc((100% - 16px) / 2);
        max-width: 215px;
        height: 125px;
    }
    .section-users .users-teacher .time-min { font-size: clamp(26px, 7.5vw, 32px); }
    .section-users .users-teacher .time-name { font-size: clamp(16px, 4.6vw, 22px); }
    .section-users .users-teacher .users-bullet {
        width: 100%;
        margin: 40px 0 0;
        text-align: left;
        font-size: clamp(12px, 6.05vw, 18px);
        line-height: 1.25;
        padding: 0 10px;
    }
    .section-users .users-teacher .users-bullet li { margin-bottom: 20px; }
    .section-users .users-teacher .users-bullet li::before { top: 50%; }

    .section-users .users-teacher .btn-teacher {
        width: 100%;
        height: 73px;
        max-width: none;
        border-radius: 20px;
        font-size: clamp(20px, 6.51vw, 28px);
        white-space: nowrap;
        box-shadow: 0 8px 0 #ff5a1f;
        margin-top: 38px;
    }

    /* 학생 박스 모바일 */
    .section-users .users-box.users-student {
        margin: 40px auto 0;
        border-radius: 22px;
        padding: 20px; /* 테두리 8px 별도 */
    }
    .section-users .users-student .users-title {
        font-size: clamp(34px, 11.63vw, 50px);
        text-align: center;
    }
    .section-users .users-student .users-lead {
        color: #4224EB;
        text-align: left; /* 모바일에서 왼쪽 정렬 */
        margin-top: 8px;
        font-size: clamp(18px, 5.4vw, 24px);
        line-height: 1.5;
        text-align: center;
    }
    .section-users .users-student .users-bullet {
        width: 100%;
        margin-top: 32px;
        text-align: left;
        font-size: clamp(12px, 6.05vw, 18px);
        line-height: 1.15;
        padding: 0 10px;
    }
    .section-users .users-student .users-bullet li { margin-bottom: 22px; }
    .section-users .users-student .users-bullet li::before { top: 50%; left: 0; transform: translateY(-50%); }
}

/* ===== SECTION BOOK - PC ===== */
.section-book {
    background-image: url('../images/bg_banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    min-height: 454px;
    padding: 105px 0;
}
.section-book .inner {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}
.section-book .book-text {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
}
.section-book .book-cover {
    flex: 0 0 198px;
}
.section-book .book-cover img {
    width: 198px;
    height: 260px;
    display: block;
}
.section-book .book-title {
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 1.3;
    letter-spacing: -0.04em;
    white-space: nowrap;
    width: fit-content;
    color: #5300B9; /* fallback */
    background: linear-gradient(90deg, #5300B9 0%, #CC00FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-book .book-desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: #222;
    line-height: 1.45; /* 약 40px */
    margin-top: 18px;
    text-align: left;
}
.section-book .book-btns {
    display: flex;
    gap: 41px;
    margin-top: 45px;
    padding-bottom: 11px;
}
.section-book .btn-book {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 253px;
    height: 54px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 24px;
    border: 1px solid transparent;
    box-shadow: 0 11px 0 rgba(0,0,0,0.12); /* 하단 띠(임시 색은 각각 아래에서 덮어씀) */
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.section-book .btn-book:hover {
    text-decoration: none;
    transform: translateY(2px); /* 살짝 눌리는 효과 (히어로 .btn-start와 동일) */
}
.section-book .btn-cmall {
    background: #d400cc;
    border-color: #a8009f;
    color: #fff;
    box-shadow: 0 11px 0 #a3009c;
}
.section-book .btn-kyobo {
    background: #fff;
    border-color: #ffd966;
    color: #222;
    box-shadow: 0 11px 0 #ffd36e;
}
/* 오버 시 하단 띠를 2px 줄여 눌린 느낌 완성 (색상별 규칙보다 뒤에 둬야 적용됨) */
.section-book .btn-cmall:hover { box-shadow: 0 9px 0 #a3009c; }
.section-book .btn-kyobo:hover { box-shadow: 0 9px 0 #ffd36e; }


/* ===== SECTION BOOK - TABLET (768px ~ 1180px) ===== */
@media (min-width: 768px) and (max-width: 1180px) {
    .section-book .inner { padding: 0 20px; }
    .section-book .book-text { flex: 1 1 0; }
    .section-book .book-title { white-space: normal; width: auto; }
    .section-book .book-desc .br-pc { display: none; }
}


/* ===== SECTION BOOK - MOBILE ===== */
@media (max-width: 767px) {
    .section-book {
        background-image: url('../images/bg_banner_mo.png');
        background-size: cover;
        background-position: center top;
        display: block;
        min-height: 0;
        padding: 52px 10px 41px;
    }
    .section-book .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .section-book .book-cover {
        order: -1;
        margin-bottom: 53px;
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
    }
    .section-book .book-text { width: 100%; text-align: center; }
    .section-book .book-title { margin: 0 auto; white-space: normal; font-size: clamp(30px, 9.5vw, 40px); }
    .section-book .book-title-name { display: block; font-size: clamp(36px, 12vw, 50px); margin-top: 7px; }
    .section-book .book-desc { font-size: clamp(18px, 5.6vw, 24px); line-height: 1.5; text-align: center; margin-top: 20px; }
    .section-book .br-pc { display: none; }
    .section-book .book-btns { flex-direction: column; align-items: center; gap: 41px; margin-top: 41px; padding-bottom: 11px; }
    .section-book .btn-book { width: 253px; height: 54px; font-size: clamp(18px, 5.6vw, 24px); }
}


/* ===== SECTION FAQ - PC ===== */
.section-faq {
    background-color: #F5F5F5;
    padding: 180px 0;
}
.section-faq .inner {
    max-width: 1300px;
    margin: 0 auto;
}
.section-faq .sec-head {
    display: flex;
    align-items: center; /* 세로 가운데 정렬 */
    justify-content: center;
    gap: 47px;
    margin-bottom: 19px; /* 헤더와 첫 문항 사이 */
}
.section-faq .sec-char img { width: 234px; height: auto; }
.section-faq .sec-title {
    display: inline-block;
    background-color: #5300B9;
    color: #fff;
    font-family: 'Paperlogy', 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 90px; /* 박스 높이 90px */
    padding: 0 20px;
    border-radius: 26px;
    border-bottom-left-radius: 0;
}
.section-faq .sec-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 28px;
    color: #222;
    margin-top: 10px;
    text-align: left;
}

.section-faq .faq-list {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
}
.section-faq .faq-item {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e1e5ec;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    margin-bottom: 30px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.section-faq .faq-item:last-child { margin-bottom: 0; }

/* 마우스오버 시 살짝 위로 떠오르는 효과 (마우스 있는 기기에서만 적용) */
@media (hover: hover) {
    .section-faq .faq-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.18);
    }
}
@media (prefers-reduced-motion: reduce) {
    .section-faq .faq-item { transition: none; }
    .section-faq .faq-item:hover { transform: none; }
}

.section-faq .faq-q-wrap { font-size: inherit; font-weight: inherit; }
.section-faq .faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 30px 28px 50px;
    text-align: left;
    cursor: pointer;
}
.section-faq .faq-q-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 26px;
    color: #222;
    line-height: 40px;
}
.section-faq .faq-icon {
    width: 30px;
    height: 30px;
    position: relative;
    flex: 0 0 30px;
    margin-left: 30px;
}
.section-faq .faq-icon::before,
.section-faq .faq-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #aaaaaa;
    border-radius: 1px;
}
.section-faq .faq-icon::before { width: 25px; height: 5px; }
.section-faq .faq-icon::after { width: 5px; height: 25px; }
.section-faq .faq-item.is-open .faq-icon::after { display: none; }

/* 답변 영역(애니메이션은 JS에서 처리) */
.section-faq .faq-a {
    overflow: hidden;
    height: 0;
}
@media (prefers-reduced-motion: reduce) {
    .section-faq .faq-a { transition: none !important; }
}
.section-faq .faq-a-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
    color: #1a5eea;
    position: relative;
    padding: 0 50px 25px 70px; /* top/right/bottom/left */
    margin-top: 15px;
}
.section-faq .faq-a-text::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 18px;
    transform: translateY(-50%) rotate(-45deg);
    width: 10px;
    height: 10px;
    border-right: 3px solid #1a5eea;
    border-bottom: 3px solid #1a5eea;
}

/* 열린 상태의 간격 조정 */
.section-faq .faq-item.is-open { margin-bottom: 41px; }


/* ===== SECTION FAQ - MOBILE ===== */
@media (max-width: 767px) {
    .section-faq { padding: 40px 0; }
    .section-faq .inner { padding: 0; }
    .section-faq .sec-head { display:flex; flex-direction:column; align-items:center; text-align: center; gap:0; margin-bottom:40px; }
    .section-faq .sec-char img { width: 190px; }

    .section-faq .faq-list { padding: 0 10px; }
    .section-faq .faq-item { margin-bottom: 30px; }
    .section-faq .faq-q { display: flex; flex-direction: column; align-items: stretch; padding: 32px 31px 22px; }
    .section-faq .faq-q-text { font-size: clamp(18px, 5.3vw, 26px); line-height: 1.3; text-align: left; }
    .section-faq .faq-icon { margin: 15px auto 0; }

    .section-faq .faq-item.is-open .faq-q { padding: 32px 31px 0; }
    .section-faq .faq-a-text { font-size: clamp(16px, 5vw, 24px); line-height: 1.5; padding: 0 30px 31px 51px; }
    .section-faq .faq-a-text::before { left: 31px; top: 13px; }
}


/* ===== SITE FOOTER - PC ===== */
.site-footer {
    display: flex;
    align-items: center;
    min-height: 345px;
    background-color: #222; /* fallback; background-image rule kept elsewhere */
}
.site-footer .inner {
    width: 100%;
    max-width: 1332px; /* footer-specific width */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
@media (min-width: 768px) and (max-width: 1372px) {
    .site-footer .inner { padding: 0 20px; }
}

.site-footer .footer-info { display: flex; flex-direction: column; }
.site-footer .footer-brand img { width: 162px; height: auto; display: block; }
.site-footer .footer-contact {
    margin-top: 14px;
    color: #fff;
    line-height: 52px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 36px;
}
.site-footer .footer-contact .footer-tel {
    font-weight: 700;
    font-size: 40px;
    color: inherit;
    margin-left: 13px;
    white-space: nowrap;
}
.site-footer .footer-contact .footer-ext {
    font-weight: 700;
    font-size: 28px;
    margin-left: 12px;
}

.site-footer .btn-kakao {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 14px 0 10px;
    background: #ffe000;
    border-radius: 8px;
    font-weight: 700;
    font-size: 22px;
    color: #191919;
    text-decoration: none;
    margin-bottom: 6px;
}
.site-footer .btn-kakao:hover { text-decoration: none; }
.site-footer .kakao-logo { width: 94px; height: auto; display: block; }
.site-footer .arrow { font-size: 22px; font-weight: 700; margin-left: 10px; }


/* ===== SITE FOOTER - MOBILE ===== */
@media (max-width: 767px) {
    .site-footer { background-image: url(../images/bg_footer_mo.png); display: block; min-height: 0; padding: 50px 15px 48px; }
    .site-footer .inner { max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
    .site-footer .footer-brand img { width: 155px; margin: 0 auto; }
    .site-footer .footer-contact { text-align: center; margin-top: 42px; font-size: clamp(26px, 8vw, 36px); line-height: 1.45; }
    .site-footer .footer-contact .footer-tel { font-size: clamp(30px, 9vw, 40px); }
    .site-footer .footer-contact .footer-ext { display: block; font-size: clamp(20px, 6.2vw, 28px); }
    .site-footer .btn-kakao { width: 100%; max-width: 360px; height: 48px; justify-content: center; margin: 45px auto 0; padding: 0 10px; font-size: clamp(16px, 5vw, 22px); }
    .site-footer .kakao-logo { width: 94px; }
}


/* =======================================================
   TABLET (768px ~ 1340px) - 아이패드 미니 / 에어 / 프로 등
   PC 고정 px 값을 화면 폭에 맞게 줄이는 구간.
   clamp(최소, 가변(vw), 최대) : 768px에서는 최소값, 1340px 부근에서는 PC 값에 가깝게 변함
======================================================= */
@media (min-width: 768px) and (max-width: 1340px) {

    /* ----- STEPS ----- */
    .section-steps { padding: clamp(90px, 12vw, 160px) 0 0; }
    .section-steps .inner { padding: 0 20px; }
    .section-steps .sec-head { margin-bottom: clamp(80px, 9vw, 110px); }
    .section-steps .sec-char img { width: clamp(150px, 17vw, 228px); }
    .section-steps .sec-title { font-size: clamp(36px, 4.4vw, 50px); }
    .section-steps .sec-desc { font-size: clamp(22px, 2.6vw, 30px); }

    /* 번호 원이 화면 밖으로 잘리지 않도록 좌우에 여백을 둠 */
    .section-steps ol.steps-list { padding: 0 44px; }
    .section-steps .steps-card { padding: clamp(36px, 4vw, 50px) clamp(30px, 4.5vw, 60px); }
    .section-steps .steps-num {
        width: clamp(80px, 8vw, 101px);
        height: clamp(80px, 8vw, 101px);
        font-size: clamp(48px, 4.6vw, 60px);
        left: -36px;
        top: -36px;
    }
    .section-steps .steps-name { font-size: clamp(30px, 3.2vw, 40px); }
    .section-steps .steps-page { font-size: clamp(22px, 2.2vw, 28px); }
    .section-steps .steps-desc { font-size: clamp(24px, 2.5vw, 32px); }

    /* ----- USERS ----- */
    .section-users { padding: clamp(90px, 12vw, 160px) 0; }
    .section-users .inner { padding: 0 20px; }
    .section-users .sec-char img { width: clamp(140px, 14vw, 188px); }
    .section-users .sec-title { font-size: clamp(36px, 4.4vw, 50px); }
    .section-users .sec-desc { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; }

    .section-users .users-box.users-teacher { padding: 44px clamp(24px, 4vw, 57px) 50px; }
    .section-users .users-box.users-student { padding: 38px clamp(24px, 4vw, 52px) 22px; }
    .section-users .users-title,
    .section-users .users-teacher .users-title,
    .section-users .users-student .users-title { font-size: clamp(36px, 4.4vw, 50px); }
    .section-users .users-teacher .users-lead,
    .section-users .users-student .users-lead { font-size: clamp(22px, 2.6vw, 30px); }

    /* 시간 카드: 고정 215px → 4칸이 남는 폭을 나눠 가짐 */
    .section-users .users-teacher .time-list { gap: clamp(10px, 1.6vw, 22px); }
    .section-users .users-teacher .time-item {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 215px;
    }
    .section-users .users-teacher .time-min { font-size: clamp(26px, 2.8vw, 36px); }
    .section-users .users-teacher .time-name { font-size: clamp(18px, 2vw, 26px); }

    .section-users .users-teacher .users-bullet,
    .section-users .users-student .users-bullet { font-size: clamp(22px, 2.3vw, 28px); }

    .section-users .users-teacher .btn-teacher {
        width: min(563px, 100%);
        font-size: clamp(24px, 2.6vw, 30px);
    }

    /* ----- BOOK ----- (768~1180 규칙은 위에 있고, 여기서는 폭이 더 넓은 구간과 버튼 폭을 보완) */
    .section-book .inner { padding: 0 20px; }
    .section-book .book-btns { gap: clamp(14px, 2vw, 41px); }
    .section-book .btn-book {
        flex: 1 1 0;
        width: auto;
        max-width: 253px;
        font-size: clamp(20px, 2vw, 24px);
    }

    /* ----- FAQ ----- */
    .section-faq { padding: clamp(90px, 12vw, 160px) 0; }
    .section-faq .inner { padding: 0 20px; }
    .section-faq .sec-head { gap: clamp(24px, 3.5vw, 47px); }
    .section-faq .sec-char img { width: clamp(150px, 17vw, 234px); }
    .section-faq .sec-title { font-size: clamp(36px, 4.4vw, 50px); line-height: clamp(72px, 7vw, 90px); }
    .section-faq .sec-desc { font-size: clamp(22px, 2.4vw, 28px); }

    .section-faq .faq-q { padding: 24px 24px 24px clamp(28px, 4vw, 50px); }
    .section-faq .faq-q-text { font-size: clamp(22px, 2.3vw, 26px); }
    .section-faq .faq-a-text {
        font-size: clamp(20px, 2.1vw, 24px);
        line-height: 1.6;
        padding: 0 clamp(28px, 4vw, 50px) 24px clamp(48px, 5.5vw, 70px);
    }
    .section-faq .faq-a-text::before { left: clamp(28px, 4vw, 50px); }

    /* ----- FOOTER ----- */
    .site-footer { min-height: 280px; }
    .site-footer .footer-contact { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.5; }
    .site-footer .footer-contact .footer-tel { font-size: clamp(30px, 3.2vw, 40px); }
    .site-footer .footer-contact .footer-ext { font-size: clamp(22px, 2.2vw, 28px); }

    /* 카카오 버튼: 글자가 두 줄로 꺾여 잘리던 문제 → 한 줄 고정 */
    .site-footer .btn-kakao {
        white-space: nowrap;
        flex: 0 0 auto;
        font-size: clamp(18px, 1.8vw, 22px);
    }
    .site-footer .kakao-logo { width: clamp(76px, 7.5vw, 94px); }
}


/* =======================================================
   MOBILE (767px 이하) - 섹션 제목(.sec-title) 공통
   모든 섹션에서 글자 크기를 동일하게 맞추고, 배경(말풍선)은 텍스트 길이에 맞춰 늘어남
   ※ 각 섹션별 모바일 규칙보다 뒤에 있어야 적용됨
======================================================= */
@media (max-width: 767px) {
    .section-steps .sec-title,
    .section-users .sec-title,
    .section-faq .sec-title {
        display: inline-block;
        width: fit-content;            /* 배경 폭 = 텍스트 폭 */
        max-width: calc(100% - 20px);  /* 텍스트가 길면 화면 안에서 줄바꿈 */
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.3;
        padding: 12px 18px;
        margin-top: 0;
    }

    /* 섹션 설명(.sec-desc)도 동일하게 통일 */
    .section-steps .sec-desc,
    .section-users .sec-desc,
    .section-faq .sec-desc {
        font-size: clamp(18px, 5vw, 22px);
        line-height: 1.5;
        text-align: center;
        margin-top: 14px;
        padding: 0 10px;
    }
}