/* --- [기본 디자인 설정] --- */
:root {
    --ink: #0E1526;
    --red: #FF4A5C;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; color: #333; line-height: 1.6; word-break: keep-all; background: #fff; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; }
.accent { color: var(--red); }

/* Header - site.js 연동을 위해 .hd 클래스 대응 */
header.hd { position: absolute; top: 0; width: 100%; height: 100px; z-index: 1000; display: flex; align-items: center; }
.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo img {
    height: 80px; /* 로고 높이를 적절하게 조절하세요 */
    display: block;
	margin: 20px auto 0; 
}
nav a { color: rgba(255,255,255,0.7); margin-left: 30px; font-weight: 500; font-size: 16px; }

/* PC에서 메뉴와 로그인 버튼 위치를 아래로 미세 조정 */
nav, 
.header-right {
    transform: translateY(13px); /* 숫자를 키울수록 아래로 더 내려갑니다 */
}



/* 로그인 버튼: .login-btn을 .login으로 변경 (JS 연동) */
.login { border: 2px solid rgba(255,255,255,0.3); color: #fff; padding: 8px 24px; border-radius: 30px; font-size: 14px; cursor: pointer; }

/* ☰ 메뉴 버튼: 모바일에서만 보임 (JS 연동) */
.menu { background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; display: none; }

/* --- [1. PC 버전 - 로고 라인에 맞춘 왼쪽 정렬 유지] --- */
.hero { 
    height: 100vh; 
    min-height: 750px; 
    background: var(--ink); 
    color: #fff; 
    position: relative; 
    display: flex; 
    align-items: center; 
    overflow: hidden; 
}

.hero .container {
    margin: 0 auto; 
    width: 100%;
}

.hero-bg-layer { 
    position: absolute; 
    inset: 0; 
    background: url('images/hero-photo.png') no-repeat center center / cover; 
    opacity: 1 !important;
    z-index: 1;
}

.hero-content { 
    position: relative; 
    z-index: 10; 
    max-width: 800px; 
    text-align: left; 
}

.hero-content h1 { 
    font-size: clamp(38px, 5vw, 64px); 
    font-weight: 900; 
    line-height: 1.3; 
    margin-bottom: 24px; 
    letter-spacing: -0.04em; 
}

.hero-desc { 
    font-size: 19px; 
    opacity: 0.9; 
    margin-bottom: 48px; 
}

.hero-cta { 
    display: flex; 
    gap: 16px; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
}

.btn { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    width: 280px; 
    height: 68px; 
    padding: 0 24px; 
    border-radius: 6px; 
    font-size: 18px; 
    font-weight: 700; 
    transition: 0.3s;
}

.btn-red { 
    background-color: #ffffff !important; 
    color: var(--red) !important;         
    border: 1px solid #ffffff;
}

/* "수능하루 신청하기" 버튼 마우스 올렸을 때 효과 */
.btn-red:hover {
    background-color: #ffffff !important; /* 배경색은 흰색 그대로 유지 */
    opacity: 0.8 !important;              /* 0.8 만큼 투명하게 (숫자가 낮을수록 더 투명해짐) */
    transition: 0.3s;                     /* 부드럽게 변하는 시간 */
}
.btn-outline { border: 1px solid #fff !important; color: #fff !important; background: transparent; }

/* --- [Drawer: 모바일 메뉴판 디자인 추가 (site.js 필수)] --- */
.drawer {
    position: fixed; top: 0; right: -100%; width: 280px; height: 100%; 
    background: #fff; z-index: 2000; padding: 100px 30px; 
    box-shadow: -10px 0 30px rgba(0,0,0,0.2); transition: 0.4s ease-in-out;
    display: flex; flex-direction: column; gap: 15px;
}
.drawer.on { right: 0; } /* site.js가 붙여주는 클래스 */
.drawer .x { position: absolute; top: 30px; right: 30px; background: none; border: none; font-size: 40px; cursor: pointer; color: #000; }
.drawer a { font-size: 20px; font-weight: 700; color: #222; padding: 15px 0; border-bottom: 1px solid #f5f5f5; }
.drawer a.on { color: var(--red); }

/* --- [중간 섹션들 유지] --- */
.strip { background: #fff; padding: 24px 0; border-bottom: 1px solid #eee; }
.strip-flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-size: 16px; }
.strip b { color: #000; font-weight: 800; }

.features { padding: 120px 0; background: #fff; text-align: center; }
.section-title { margin-bottom: 80px; }
.section-title h2 { font-size: 36px; font-weight: 800; margin-bottom: 15px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.item { padding: 20px; }
.icon-placeholder { width: 100px; height: 100px; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 50%; }
.icon-placeholder img { width: 80%; }
.item h3 { font-size: 20px; font-weight: 800; margin-bottom: 15px; }
.item h3 em { font-style: normal; margin-right: 8px; color: var(--red); }
.item p { font-size: 15px; color: #555; }

/* --- [특별한 이유 섹션] --- */
.special { 
    padding: 120px 0; 
    background: #0E1526; 
    color: #fff; 
    position: relative; 
}

/* PC용 배경 (기본값) */
.special-bg { 
    position: absolute; 
    inset: 0; 
    background: url('images/why-bg.jpg') no-repeat center center / cover; 
    opacity: 0.8; 
    z-index: 1;
}

.special-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 60px; 
    position: relative; 
    z-index: 5; 
}

/* 리스트 전체 스타일 */
.special-list { 
    list-style: none; 
    position: relative; 
    z-index: 5; 
}

/* 리스트 항목: 아이콘과 글자를 가로로 나란히 정렬 */
.special-list li { 
    font-size: 19px; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; /* 아이콘과 글자 높이를 중앙으로 맞춤 */
    gap: 15px;           /* 아이콘과 글자 사이 간격 */
    font-weight: 600; 
}

/* 새롭게 추가된 아이콘 이미지 스타일 */
.special-list li img {
    width: 32px;  /* 아이콘 크기 (눈에 잘 띄게 32px 추천) */
    height: 32px;
    object-fit: contain;
}

.special-text h2 { font-size: 36px; line-height: 1.3; margin-bottom: 24px; }
.special-list { list-style: none; }
.special-list li { font-size: 19px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; font-weight: 600; }
.special-list span { color: var(--red); }



.outro { padding: 120px 0; background: #F3F5F8; position: relative; }
.outro-bg { position: absolute; inset: 0; background: url('images/tmr-bg.jpg') center/cover; opacity: 1; }
.outro h2 { font-size: 38px; font-weight: 800; position: relative; z-index: 5; }
.outro p { font-size: 20px; color: #444; position: relative; z-index: 5; margin-top: 20px; }

/* --- [Footer] --- */
.ft { background: #0B1220; color: #888; padding: 80px 0 40px; font-size: 13.5px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; border-bottom: 1px solid #222; padding-bottom: 50px; margin-bottom: 30px; }
.col h3 { color: #fff; font-size: 15px; margin-bottom: 20px; font-weight: 800; }
.col p { line-height: 1.8; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
/* 푸터 로고 이미지 크기 및 정렬 */
.footer-logo img {
    height: 80px;   /* 푸터에 어울리는 적당한 높이로 설정 */
    width: auto;    /* 가로 세로 비율 유지 */
    display: block;
    margin-left: auto; /* 우측 정렬을 유지하기 위함 */
}


/* --- [2. 모바일 반응형 디자인 강화] --- */
@media (max-width: 820px) {
    /* 헤더 오른쪽 영역 설정 */
    .header-right {
        display: flex !important;
        flex-direction: row !important; /* 가로로 나열 */
        align-items: center !important; /* 세로 중앙 맞춤 */
        gap: 12px; /* 버튼 사이 간격 */
        justify-content: flex-end; /* 우측 끝으로 밀기 */
    }

    /* 로그인 버튼 (왼쪽 배치) */
    .login {
        display: block !important;
        order: 1; /* 첫 번째 순서 */
        padding: 6px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
        margin: 0 !important;
    }

    /* 메뉴 버튼 (오른쪽 배치) */
    .menu {
        display: block !important;
        order: 2; /* 두 번째 순서 */
        font-size: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1;
    }

    .special-bg {
        /* 모바일에서는 세로형 이미지인 why-bg-m.jpg를 불러옵니다 */
        background-image: url('images/why-bg-m.jpg');
        background-position: center center;
        opacity: 0.8;
    }

    .special { padding: 80px 0; } 
	
	.special-list li {
        font-size: 17px;
    }
    .special-list li img {
        width: 26px;
        height: 26px;
    }
    
    .footer-logo img {
        margin: 0 auto; /* 모바일에서는 중앙으로 */
        height: 60px;   /* 모바일에서는 살짝 작게 */
    }

    /* --- 기타 모바일 최적화 (유지) --- */
    .pc-only { display: none; }
    .hero { height: auto; padding: 140px 0 80px; text-align: center; }
    .hero-content { margin: 0 auto; text-align: center; }
    .hero-cta { justify-content: center; }
}

/* --- [보정: 모바일 오버플로·타이포·아이콘 4열] --- */
img{max-width:100%;display:block}
.header-inner .logo img{margin:0}
.footer-cols a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.strip-flex{justify-content:center;gap:40px;color:#666}
@media (max-width: 820px) {
  .hero{padding:110px 0 70px}
  .hero-content h1{font-size:30px;line-height:1.35}
  .hero-desc{font-size:15px;margin-bottom:30px}
  .btn{width:100%;max-width:320px;height:56px;font-size:16px}
  .strip-flex{gap:10px 18px;font-size:13.5px;justify-content:center}
  .features{padding:64px 0}
  .section-title{margin-bottom:36px} .section-title h2{font-size:24px}
  .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .item{padding:0 2px;word-break:normal;overflow-wrap:anywhere;min-width:0}
  .icon-placeholder{width:58px;height:58px;margin-bottom:12px}
  .item h3{font-size:12px;line-height:1.3;margin-bottom:6px} .item h3 em{margin-right:3px}
  .item p{font-size:10.5px;line-height:1.5} .item p br{display:none}
  .special-text h2{font-size:26px}
  .outro{padding:80px 0} .outro h2{font-size:28px} .outro p{font-size:16px}
  .footer-cols{grid-template-columns:1fr;gap:26px;padding-bottom:30px}
  .footer-bottom{flex-direction:column;gap:16px;text-align:center}
  .footer-logo img{margin:0 auto}
}


/* --- [본문 · FAQ 섹션] --- */
.about{padding:110px 0;background:#F7F7F5}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 60px;max-width:1000px;margin:0 auto}
.about-grid h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px;color:#12171F}
.about-grid p{font-size:16px;line-height:1.85;color:#3E4652}
.about-grid b{color:#12171F;font-weight:700}
.faq{padding:110px 0;background:#fff}
.faq-list{max-width:820px;margin:0 auto}
.faq-list details{border:1px solid rgba(18,23,31,.12);border-radius:14px;margin-bottom:10px;padding:0 24px;background:#fff}
.faq-list summary{cursor:pointer;font-weight:700;font-size:17px;padding:20px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:#12171F}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:24px;color:#6B7482;font-weight:400;flex:none}
.faq-list details[open] summary::after{content:"−"}
.faq-list p{padding:0 0 22px;font-size:15.5px;line-height:1.85;color:#3E4652}
.faq-list b{color:#12171F}
@media (max-width:820px){
  .about{padding:64px 0} .about-grid{grid-template-columns:1fr;gap:32px}
  .about-grid h3{font-size:18px} .about-grid p{font-size:15px}
  .faq{padding:64px 0} .faq-list summary{font-size:15.5px;padding:18px 0} .faq-list p{font-size:14.5px}
  .faq-list details{padding:0 18px}
}