/* 초기화 & 기본 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'S-CoreDream', 'Noto Sans KR', sans-serif;
  font-weight: 400;
  color: #333;
  background: url('../images/bg.png') no-repeat center center;
  background-size: cover;
  line-height: 1.8; /* ✅ 전체 행간 20% 확대 (기본 1.5 -> 1.8) */
}


body.sub-bg { background: #f0f7e3 !important; }


/* =========================
   sub_1 배경
========================= */

/* PC용 배경 */
body.sub1-bg {
  background: url('../images/bg_sub1.png') no-repeat center center;
  background-size: cover;
}

/* 모바일용 배경 */
@media (max-width: 768px) {
  body.sub1-bg {
    background: url('../images/bg_m_sub1.png') no-repeat center center;
    background-size: cover;
  }
}


/* 레이아웃 */
.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }

/* 배경 클릭 레이어: 헤더/내비/푸터와 z-index 계층 분리 */
.background-wrapper {
  flex: 1; display: flex; flex-direction: column;
  position: relative; z-index: 1; /* 배경 레이어 */
}

.sub-main { flex: 1; max-width: 1100px; margin: 1px auto; padding: 20px; }

/* =========================
   헤더 (PC: Grid 3열)
========================= */
.header-wrapper {
  width: 100%; display: flex; justify-content: center;
  position: relative; z-index: 2; /* 배경보다 위 */
}
.header-1200{
  width:1200px; display:grid;
  grid-template-columns:auto 1fr auto; /* 좌: 로고, 중: 센터, 우: SNS+점프 */
  align-items:center; gap:16px; padding:20px;
}
.header-left,.header-center,.header-right{ min-width:0; }
.header-left{ justify-self:start; display:flex; align-items:center; }
.header-center{ justify-self:center; display:flex; align-items:center; }
.header-right{ justify-self:end; display:flex; align-items:center; }
.logo{ height:50px; }

/* 중앙 이미지(PC에서 영역 초과 금지) */
.center-image{ display:block; max-width:100%; height:auto; }

/* SNS + 점프메뉴 (한 줄 고정) */
.sns-group{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; white-space:nowrap; }
.sns-group > * { flex:0 0 auto; }
.sns-icons{ display:flex; gap:5px; }
.sns-icons img{ width:30px; height:30px; }

/* 점프메뉴: 접근성 + 포커스 스타일 */
.year-jump{
  display:inline-block; padding:6px 12px; font-size:14px; margin-left:10px;
  cursor:pointer; border:1px solid #ddd; border-radius:6px; background:#fff;
}
.year-jump:focus{ outline:2px solid #ffcc8a; outline-offset:2px; }

/* 내비(PC) */
.main-nav{
  text-align:center; margin:10px 0 20px;  letter-spacing: -0.5px;
  position: relative; z-index: 2; /* 배경보다 위 */
}
.main-nav ul{ list-style:none; padding:0; display:inline-block; }
.main-nav li{ display:inline-block; margin:0 10px; }
/* 메뉴 폰트: 20px */
.main-nav a{ text-decoration:none; font-size:20px; font-weight:bold; color:#257c55; padding:8px 12px; }

/* 제목/구분선 */
.section-title{ text-align:center; font-size:32px; font-weight:bold; color:#005d44; margin-bottom:10px; }
.orange-line{ width:1100px; max-width:100%; height:3px; background:#789c8c; margin:0 auto 30px; }

/* 공통 섹션/표 */
.section{ border-bottom:1px solid #ccc; margin-bottom:25px; padding-bottom:10px; }
.section h3{ font-size:20px; font-weight:bold; color:#ffffff; margin-bottom:8px; }

/* ✅ 각 섹션 p 위아래 동일 여백 + 확대된 행간 */
.section p{
  font-size:16px;
  line-height:1.7;      /* 20% 확대 */
  margin:10px 0;        /* 상·하 동일 여백 */
}

.p_subtitle{
  font-size: 19px; letter-spacing: -0.5px; margin:10px 0 -25px 0; 
}


.p_subtitle2{
  font-size: 19px; letter-spacing: -1px; 
}

/* 표 기본 */
.award-table{ width:1100px; max-width:100%; border-collapse:collapse; margin-bottom:30px; }
.award-table th, .award-table td{ border:1px solid #ccc; padding:12px; text-align:center; }
.award-table th{ background:#e0f0dc; vertical-align:middle; }
.award-summary{ color:rgb(46, 170, 139); font-size:0.95em; margin:6px 0 12px; }

/* ✅ 모바일 가로 스크롤 래퍼 */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
/* 표가 접히지 않도록 최소 가로폭 지정 */
.table-wrap .award-table{ min-width: 820px; }

/* 푸터 */
.footer-gray, footer{
  background:#eee; min-height:80px;
  display:flex; justify-content:center; align-items:center;
  padding:10px 20px; position: relative; z-index: 2;
}
.footer-content{
  width:1200px; display:flex; align-items:center; gap:40px; flex-wrap:wrap; text-align:left;
}
.footer-logo{ height:auto; width:auto; }
.footer-text{ font-size:14px; line-height:1.8; } /* ✅ 행간 반영 */
.footer-sns{ display:none; }
.footer-sns img{ width:24px; height:24px; margin-right:8px; }

/* 표시 도우미 */
.desktop-only{ display:block; }
.mobile-only{ display:none; }

/* 모바일 메뉴(드로어) */
.menu-toggle{ border:0; background:transparent; padding:0; cursor:pointer; display:none; z-index:1001; }
.menu-toggle img{ display:block; width:36px; height:auto; }
.mobile-menu{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; justify-content:flex-end; align-items:stretch; z-index:1000;
}
.mobile-menu[hidden]{ display:none !important; }
.mobile-menu-panel.side{
  height:100%; width:80%; max-width:320px; background:#fff;
  box-shadow:-6px 0 24px rgba(0,0,0,.12);
  position:relative; transform:translateX(100%); transition:transform 200ms ease-out;
}
.mobile-menu-panel.side.open{ transform:translateX(0); }
.mobile-menu-close{ border:none; background:transparent; font-size:28px; line-height:1; cursor:pointer; position:absolute; right:12px; top:8px; }
.mobile-menu-panel ul{ list-style:none; margin-top:44px; }
/* 모바일 드로어 메뉴 폰트도 20px */
.mobile-menu-panel a{ display:block; padding:14px; text-decoration:none; font-size:20px; font-weight:700; color:#789c8c; }
.mobile-menu-panel li+li{ border-top:1px solid #eee; }

/* sub_1 */
.title-wrap{ text-align:center; margin-top:30px; }
/* .title-inline{ display:inline-block; font-size:28px; font-weight:700; color:#789c8c; padding-bottom:6px; border-bottom:3px solid #789c8c; line-height:1.2; } */
.title-inline{ 
  display: inline-block;
  
  background: linear-gradient(90deg, #0a8d56, #005d44);
  color: #ffffff;
  padding: 15px 40px;
  font-size: 35px;
  font-weight: 700;
  border-radius: 999px;
  text-align: center;
  line-height: 1;
  margin: 50px auto 1px; }

.intro-text{ max-width:900px; margin:100px auto 40px; text-align:center; font-size:21px; font-weight: 500; line-height:1.8; letter-spacing: -0.5px; color:#333; padding:0 16px; word-break:keep-all; }

/* sub_3/4 (PC 3열) */
.winners-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.winners-grid > * { min-width:0; }
.winners-grid a{ display:block; width:100%; }
.winners-grid img{ display:block; width:100%; height:auto; }

/* sub_5 */
.body_sub5{ max-width:1100px; margin:0 auto; }
.blind_img{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.img-box{ position:relative; width:100%; background:#f7f3e8; }
.img-box > img{ width:100%; height:auto; display:block; }
.img-box .next{ position:absolute; top:220px; right:0; }
.img_sub_box{ margin-top:16px; }
.img_row{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.img_row a, .img_row img{ display:block; width:100%; height:auto; }

/* === sub_6(심사평) — h2 숨김, 밑줄 유지, 텍스트만 왼쪽 여백 20px === */
.reviews-list { margin-top: 6px; }
/* sub_6에서만 상단 h2/오렌지 라인 감추기 (:has 지원 브라우저) */
.sub-main:has(.reviews-list) .section-title,
.sub-main:has(.reviews-list) .orange-line { display: none; }

/* 아이템 간 간격 */
.review-item { padding: 0; margin-bottom: 55px; }
.reviews-list .review-item:last-child { margin-bottom: 0; }

/* 제목(밑줄은 컨테이너에 맞추고, 텍스트만 20px 들여쓰기) */
.review-head {
  font-size: 20px; font-weight: 800; color: #005d44;
  line-height: 1.35; margin-bottom: 10px; padding-left: 20px; position: relative;  flex-wrap: nowrap;
}
.review-head::after {
  content: ""; display: block; height: 2px; background: #f0a34b;
  margin-top: 10px; margin-left: -20px; width: 1050px;
}


.review-head .review-icon {
  width: 20px;  
  height: auto;
  vertical-align: middle;
  margin-right: 2.5px;
}


.review-icon-right {
  margin-left: 4px; /* 오른쪽 잎사귀와 텍스트 간격 */
  margin-right: 5px;
  width: 20px;  
  vertical-align: middle;
  transform: scaleX(-1);
}



/* 본문 텍스트도 20px 들여쓰기 */
.review-body { padding-left: 50px; }
.review-body p { font-size: 16px; margin-left: 20px; line-height: 1.4; }
.review-body p + p { margin-top: 6px; }

/* =========================
   ★ 탭 UI (일반부문 / 학생부문)
   HTML: <nav class="sub-tabs"> 안의 <a class="sub-tab"> 두 개
========================= */
.sub-tabs{
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin:0 auto 16px; max-width:1100px; padding:4px;
}
.sub-tab{
  display:inline-block; text-decoration:none; user-select:none;
  padding:10px 18px; border:1px solid #cddbd4; border-radius:999px;
  font-size:18px; font-weight:700; line-height:1; color:#257c55; background:#fff;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sub-tab:hover{ box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sub-tab:focus{ outline:2px solid #ffcc8a; outline-offset:2px; }
.sub-tab.is-active{
  background:#005d44; color:#fff; border-color:#257c55;
}

/* 패널 토글 — JS가 hidden 속성 토글 */
.tab-panel[hidden]{ display:none !important; }

/* 스크린리더 전용 텍스트 */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 반응형 (모바일) */
@media (max-width:768px){
  body{ background-image:url('../images/bg_m.png'); }

  /* 헤더 (모바일: Grid 2열, top2.png 왼쪽) */
  .header-1200{
    width:100%; padding:12px 16px;
    grid-template-columns:auto 1fr; gap:12px;
  }
  .logo{ display:none; }
  .header-center{ grid-column:1; justify-self:start; }
  .header-right{ grid-column:2; justify-self:end; }
  .menu-toggle.header-toggle{ display:inline-block; }
  .desktop-only{ display:none !important; }

  /* 내비 숨김 */
  .main-nav{ display:none; }

  /* h2 기본 보정(다른 서브 공통) */
  .section-title{ font-size:22px; line-height:1.3; margin-bottom:8px; }
  .orange-line{ height:2px; margin:0 auto 20px; }

  /* 본문 폭 보정 */
  .sub-main{ max-width:100%; padding:16px; margin:20px auto; }

  /* sub_1 */
  .title-inline{ font-size:24px; }
  .intro-text{ font-size:16px; margin-top:50px; }

  /* sub_3/4: 그리드 OFF, 원본 크기 + 가운데 정렬 */
  .winners-grid{ display:block !important; }
  .winners-grid a{ display:block; width:max-content !important; max-width:100%; margin:0 auto 12px; }
  .winners-grid a img{ width:auto !important; max-width:100% !important; height:auto !important; }

  /* ★ 탭 — 모바일에서 좌우 스크롤 가능하게 */
  .sub-tabs{
    overflow:auto; -webkit-overflow-scrolling:touch; gap:8px;
    padding:0 4px 8px;
  }
  .sub-tab{ flex:0 0 auto; font-size:15px; padding:10px 16px; }

  /* sub_6 모바일 글자 보정 */
  .review-head { font-size: 18px; }
  .review-body p { font-size: 15px; line-height: 1.7; }

  /* 푸터: 좌정렬 + SNS 위쪽 + 로고 숨김 */
  .footer-gray, footer{ justify-content:flex-start; }
  .footer-content{ width:100%; max-width:100%; padding:12px 16px; gap:12px; align-items:flex-start; flex-direction:column; }
  .footer-logo{ display:none; }
  .footer-sns{ display:flex; }
  .footer-text{ font-size:13px; line-height:1.8; }

  /* sub_5 모바일: 메인 큰 이미지 '다음' 버튼 숨김 */
  .body_sub5 .prev,
  .body_sub5 .next{ display:none !important; }

  /* sub_5 썸네일 2열 */
  .img_row{ grid-template-columns:repeat(2,1fr); }
}

/* PC 전용: SNS 오른쪽에 점프메뉴 한 줄 고정 (우선순위 강화) */
@media (min-width: 769px) {
  .header-right > .sns-group { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 10px; white-space: nowrap; }
  .header-right > .sns-group .sns-icons { display: inline-flex !important; gap: 5px; }
  .header-right > .sns-group .year-jump { display: inline-block !important; width: auto !important; margin-left: 10px !important; flex: 0 0 auto !important; }
}

/* ===== sub_6 최종 패치 ===== */
.main-nav a, .mobile-menu-panel a { font-size: 20px !important; }
.reviews-list .review-head { padding-left: 20px !important; }
.reviews-list .review-body { padding-left: 20px !important; }
.reviews-list .review-head::after{
  content:""; display:block; height:2px; background:#789c8c; margin-top:10px; margin-left:-20px;
}
@media (max-width: 768px) {
  .reviews-list .review-head::after { margin-left: 0; width: 100%; }
}

/* 헤더 가운데 이미지 살짝 오른쪽 이동 — PC 전용 */
@media (min-width: 769px) {
  .header-center { transform: translateX(35px); }
}

/* 배지 스타일 */
.badge-title {
  display: inline-block;
  background-color: #005d44;
  color: #fff;
  padding: 10px 24px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px; /* pill shape */
  text-align: center;
  line-height: 1;
  margin: 0 auto 16px;
}
.section .badge-title { display: inline-block; margin: 0 auto 16px; }

.badge-title2 {
  display: inline-block;
  background-color: #578561;
  color: #ffffff;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 999px;
  text-align: center;
  line-height: 1;
  margin: 0 auto 16px;
}
.section .badge-title2 { display: inline-block; margin: 0 auto 16px; }