/*
Theme Name: EIN School
Theme URI: https://einschool.net
Author: EIN School
Description: 이인스쿨(EIN School) 공식 홈페이지 커스텀 테마
Version: 1.0
Text Domain: einschool
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#132038;
  --navy:#06315C;
  --blue-900:#06315C;
  --blue-700:#005AAB;
  --blue-600:#0E6FC7;
  --blue-400:#6FA8DE;
  --blue-200:#C9DEF2;
  --blue-50:#EFF5FC;
  --green:#00A651;
  --green-soft:#B7E3A0;
  --lime:#6EBE44;
  --paper:#FFFFFF;
  --line:#DCE5F1;
  --muted:#5A6B85;
  --serif:'Noto Serif KR', serif;
  --sans:'Noto Sans KR', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}

/* ---------- HEADER / NAV ---------- */
header{position:sticky; top:0; z-index:200; background:var(--blue-900); border-bottom:1px solid rgba(255,255,255,.08);}
.header-inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.logo{font-family:var(--serif); font-weight:700; font-size:21px; color:#fff; display:flex; align-items:baseline; gap:6px;}
.logo span{font-family:var(--sans); font-weight:300; font-size:11.5px; color:var(--blue-200); letter-spacing:2px;}

.nav-toggle{display:none;}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px;}
.hamburger span{width:24px; height:2px; background:#fff; display:block;}

nav.main-nav{display:flex; gap:8px;}
nav.main-nav > ul{display:flex; gap:6px;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav > ul > li > a{
  display:block; padding:22px 16px; color:#E1EAF6; font-size:14.5px; font-weight:500;
}
nav.main-nav > ul > li:hover > a, nav.main-nav > ul > li.active > a{color:#fff;}
nav.main-nav > ul > li:hover > a::after{content:''; }
ul.sub-menu{
  position:absolute; top:100%; left:0; min-width:210px; background:#fff;
  box-shadow:0 18px 34px rgba(6,49,92,.18); border-top:2px solid var(--green);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s ease;
}
nav.main-nav > ul > li:hover ul.sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
ul.sub-menu li a{display:block; padding:13px 20px; font-size:13.8px; color:#3C4A65; border-bottom:1px solid #F0F3F8;}
ul.sub-menu li:last-child a{border-bottom:none;}
ul.sub-menu li a:hover{background:var(--blue-50); color:var(--blue-700);}
ul.sub-menu li a .ext{color:var(--green); font-size:11.5px; margin-left:4px;}

.header-right{display:flex; align-items:center; gap:16px;}
.lang-toggle{display:flex; border:1px solid rgba(255,255,255,.25); border-radius:20px; overflow:hidden; font-size:11.5px;}
.lang-toggle a{padding:6px 13px; color:#B9C9E2;}
.lang-toggle a.active{background:var(--green); color:#06315C; font-weight:700;}

@media (max-width:960px){
  nav.main-nav{
    display:none; position:fixed; inset:60px 0 0 0; background:var(--blue-900);
    overflow-y:auto; padding:10px 0 40px;
  }
  .nav-toggle:checked ~ nav.main-nav{display:block;}
  nav.main-nav > ul{flex-direction:column; gap:0;}
  nav.main-nav > ul > li > a{padding:16px 24px; border-bottom:1px solid rgba(255,255,255,.08);}
  ul.sub-menu{position:static; box-shadow:none; border-top:none; opacity:1; visibility:visible; transform:none; background:rgba(255,255,255,.04); display:block;}
  ul.sub-menu li a{color:#C9D8ED; padding:12px 40px; border-bottom:1px solid rgba(255,255,255,.06);}
  .hamburger{display:flex;}
}

/* ---------- HERO (메인 전용) ---------- */
.hero{position:relative; background:linear-gradient(160deg,#06315C 0%,#0A4A85 45%,#005AAB 100%); color:#fff; overflow:hidden; padding:110px 24px 120px;}
.hero-routes{position:absolute; inset:0; opacity:.55; pointer-events:none;}
.hero-content{max-width:1180px; margin:0 auto; position:relative; z-index:2; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:3px; color:var(--green-soft); text-transform:uppercase; margin-bottom:24px;}
.eyebrow::before,.eyebrow::after{content:''; width:28px; height:1px; background:var(--green);}
.hero h1{font-family:var(--serif); font-weight:700; font-size:clamp(28px,4.4vw,48px); line-height:1.42; margin-bottom:22px;}
.hero h1 em{font-style:normal; color:var(--green-soft);}
.hero p{max-width:600px; margin:0 auto 40px; color:#CBDBF0; font-size:16px; font-weight:300;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn{display:inline-block; padding:13px 28px; border-radius:2px; font-size:14px; font-weight:600; letter-spacing:.3px; transition:.2s;}
.btn-accent{background:var(--green); color:#06315C;}
.btn-accent:hover{background:var(--lime);}
.btn-outline{border:1px solid rgba(255,255,255,.5); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.1);}
.hero-stats{max-width:1180px; margin:64px auto 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.18); position:relative; z-index:2;}
.hero-stats div{padding:24px 10px 0; text-align:center; border-left:1px solid rgba(255,255,255,.18);}
.hero-stats div:first-child{border-left:none;}
.hero-stats .num{font-family:var(--serif); font-size:24px; color:var(--green-soft); font-weight:600;}
.hero-stats .label{font-size:12px; color:#AFC3DE; margin-top:6px;}

/* ---------- PAGE BANNER (서브페이지 상단) ---------- */
.page-banner{background:linear-gradient(120deg,#06315C, #0A4A85); color:#fff; padding:52px 24px 34px;}
.page-banner-inner{max-width:1180px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.page-banner h1{font-family:var(--serif); font-size:clamp(22px,3vw,30px); font-weight:700;}
.breadcrumb{font-size:12.5px; color:#AFC3DE;}
.breadcrumb a{color:#AFC3DE;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{margin:0 6px; color:#5D7BA6;}
.breadcrumb .current{color:var(--green-soft);}

/* ---------- SECTION ---------- */
.section{padding:80px 24px;}
.section.tint{background:var(--blue-50);}
.section-inner{max-width:1180px; margin:0 auto;}
.section-head{margin-bottom:44px;}
.section-head .tag{font-size:12px; letter-spacing:2.5px; color:var(--blue-700); font-weight:700; text-transform:uppercase; margin-bottom:12px; display:block;}
.section-head h2{font-family:var(--serif); font-size:clamp(22px,2.8vw,30px); color:var(--navy); font-weight:700;}
.section-head .desc{color:var(--muted); margin-top:14px; max-width:640px; font-size:14.5px;}

.subnav{display:flex; gap:8px; flex-wrap:wrap; margin:30px 0 0; border-bottom:1px solid var(--line);}
.subnav a{padding:10px 18px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;}
.subnav a.current{color:var(--blue-700); border-color:var(--green);}
.subnav a:hover{color:var(--blue-700);}

/* ---------- 인사말 ---------- */
.greeting-wrap{display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start;}
.greeting-photo{width:300px; aspect-ratio:3/4; background:linear-gradient(150deg,var(--blue-200),var(--blue-50)); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.greeting-photo::before{content:'대표이사 사진'; color:var(--blue-600); font-size:13px; letter-spacing:1px;}
.greeting-photo::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:6px; background:var(--green);}
.photo-caption{margin-top:16px; text-align:center; font-size:14px; color:var(--muted);}
.photo-caption strong{color:var(--navy); font-size:15.5px; margin-left:4px;}
.greeting-text h3{font-family:var(--serif); font-weight:700; font-size:24px; color:var(--navy); line-height:1.5; margin-bottom:26px;}
.greeting-text p{color:#42506A; font-size:15px; margin-bottom:16px;}

/* ---------- 조직도 ---------- */
.org-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.org-card{background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue-700); padding:26px 22px; transition:.2s;}
.org-card:hover{border-top-color:var(--green); transform:translateY(-4px); box-shadow:0 12px 30px rgba(20,40,80,.08);}
.org-card .idx{font-family:var(--serif); font-size:13px; color:var(--blue-400); margin-bottom:12px;}
.org-card h4{font-size:16.5px; color:var(--navy); margin-bottom:15px; font-weight:700;}
.org-card li{font-size:13.3px; color:#546281; padding-left:14px; position:relative; margin-bottom:9px;}
.org-card li::before{content:''; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--green);}

/* ---------- 임원진 ---------- */
.exec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
.exec-card{background:#fff; border:1px solid var(--line); display:grid; grid-template-columns:150px 1fr;}
.exec-photo{background:linear-gradient(160deg,var(--blue-700),var(--navy)); display:flex; align-items:center; justify-content:center; color:#B9C9E2; font-size:12px;}
.exec-body{padding:24px 22px;}
.exec-role{display:inline-block; font-size:11px; letter-spacing:1.5px; color:var(--green-soft); background:var(--navy); padding:4px 10px; margin-bottom:10px; font-weight:700;}
.exec-body h4{font-family:var(--serif); font-size:18px; color:var(--navy); margin-bottom:2px;}
.exec-body .romaji{font-size:12px; color:#8593AC; margin-bottom:13px;}
.exec-body p{font-size:12.8px; color:#546281; margin-bottom:4px;}

/* ---------- 연혁 ---------- */
.timeline{position:relative; padding-left:36px;}
.timeline::before{content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--blue-200);}
.tl-item{position:relative; padding-bottom:38px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:''; position:absolute; left:-36px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--green); border:3px solid #fff; box-shadow:0 0 0 2px var(--blue-700);}
.tl-date{font-family:var(--serif); color:var(--blue-700); font-weight:700; font-size:15px; margin-bottom:6px;}
.tl-text{color:#42506A; font-size:14.3px;}

/* ---------- 오시는 길 ---------- */
.visit-wrap{display:grid; grid-template-columns:1.3fr .9fr; gap:36px;}
.map-box{aspect-ratio:16/10; border:1px solid var(--line); overflow:hidden;}
.map-box iframe{width:100%; height:100%; border:0;}
.info-card{background:var(--navy); color:#fff; padding:30px 26px;}
.info-card h4{font-family:var(--serif); font-size:17px; margin-bottom:20px; color:var(--green-soft);}
.info-row{display:flex; gap:14px; margin-bottom:16px; font-size:13.8px;}
.info-row .k{width:64px; flex-shrink:0; color:#8FA6CC; font-weight:600;}
.info-row .v{color:#EAF0FA;}

/* ---------- 사업분야 카드 ---------- */
.biz-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.biz-card{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; transition:.2s;}
.biz-card:hover{box-shadow:0 16px 34px rgba(6,49,92,.1); transform:translateY(-3px);}
.biz-thumb{height:140px; background:linear-gradient(135deg,var(--blue-700),var(--navy)); position:relative;}
.biz-thumb.alt{background:linear-gradient(135deg,var(--green),#067A3D);}
.biz-thumb .ext-badge{position:absolute; top:14px; right:14px; background:#fff; color:var(--navy); font-size:11px; font-weight:700; padding:5px 10px; border-radius:20px;}
.biz-body{padding:24px 24px 26px; flex:1; display:flex; flex-direction:column;}
.biz-body .cat{font-size:11.5px; letter-spacing:1.5px; color:var(--blue-700); font-weight:700; margin-bottom:8px;}
.biz-body h3{font-family:var(--serif); font-size:19px; color:var(--navy); margin-bottom:10px; font-weight:700;}
.biz-body p{font-size:13.6px; color:var(--muted); margin-bottom:18px; flex:1;}
.biz-more{font-size:13px; font-weight:700; color:var(--blue-700); display:inline-flex; align-items:center; gap:6px;}
.biz-more:hover{color:var(--green);}

/* 사업분야 서브 상세 페이지 */
.detail-block{margin-bottom:44px;}
.detail-block h3{font-family:var(--serif); font-size:19px; color:var(--navy); margin-bottom:16px; font-weight:700; padding-left:14px; border-left:3px solid var(--green);}
.detail-block p{color:#42506A; font-size:14.5px; margin-bottom:12px;}
.info-table{width:100%; border-collapse:collapse; font-size:14px;}
.info-table th,.info-table td{border:1px solid var(--line); padding:14px 16px; text-align:left;}
.info-table th{background:var(--blue-50); color:var(--navy); width:180px; font-weight:700;}
.schedule-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.schedule-card{background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue-700);}
.schedule-card h5{background:var(--blue-50); padding:14px 18px; color:var(--navy); font-size:15px; font-weight:700;}
.schedule-card ol{padding:18px 20px; counter-reset:step;}
.schedule-card ol li{font-size:13.3px; color:#546281; margin-bottom:10px; padding-left:22px; position:relative;}
.schedule-card ol li::before{counter-increment:step; content:counter(step); position:absolute; left:0; top:0; width:16px; height:16px; background:var(--green); color:#fff; font-size:10px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.field-list{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.field-list li{background:#fff; border:1px solid var(--line); padding:14px 18px; font-size:13.6px; color:#3C4A65;}
.field-list li strong{color:var(--blue-700);}
.cta-banner{background:var(--blue-50); border:1px dashed var(--blue-400); padding:26px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:10px;}
.cta-banner p{font-size:14px; color:var(--navy); font-weight:500;}

/* ---------- 외부 사이트 연결 배너 (국제무용경연대회 → aowfa.com) ---------- */
.site-banner{
  background:linear-gradient(120deg,var(--navy) 0%, var(--blue-700) 100%);
  color:#fff; padding:44px 40px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.site-banner::after{
  content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px;
  border-radius:50%; background:rgba(0,166,81,.18);
}
.site-banner .sb-text{position:relative; z-index:1;}
.site-banner .sb-eyebrow{font-size:11.5px; letter-spacing:2px; color:var(--green-soft); text-transform:uppercase; margin-bottom:10px;}
.site-banner h3{font-family:var(--serif); font-size:21px; margin-bottom:8px; font-weight:700;}
.site-banner p{color:#C9DBF0; font-size:13.8px;}
.site-banner .btn{position:relative; z-index:1; white-space:nowrap;}

/* ---------- 갤러리 ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.gallery-item{background:linear-gradient(150deg,var(--blue-200),var(--blue-50)); aspect-ratio:4/3; position:relative; overflow:hidden;}
.gallery-item .cap{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(0deg,rgba(6,49,92,.82),transparent); color:#fff; font-size:12px; padding:24px 12px 10px;}
.gallery-item .date{position:absolute; top:10px; right:10px; background:rgba(255,255,255,.85); color:var(--navy); font-size:10.5px; padding:3px 8px; font-weight:700;}

/* ---------- 홍보/보도자료 (준비중) ---------- */
.empty-box{border:1px dashed var(--blue-400); background:var(--blue-50); padding:70px 24px; text-align:center; color:var(--muted); font-size:14px;}
.empty-box strong{display:block; color:var(--navy); font-size:16px; margin-bottom:8px; font-family:var(--serif);}

/* ---------- 공지사항 ---------- */
.notice-table{width:100%; border-collapse:collapse;}
.notice-table thead th{background:var(--navy); color:#fff; font-size:12.5px; padding:14px 16px; text-align:left; font-weight:600;}
.notice-table tbody td{padding:15px 16px; border-bottom:1px solid var(--line); font-size:13.8px; color:#3C4A65;}
.notice-table tbody tr:hover{background:var(--blue-50);}
.notice-table td.num{color:var(--blue-400); width:50px;}
.notice-table td.date{width:110px; color:var(--muted);}
.notice-table td.title a:hover{color:var(--blue-700); text-decoration:underline;}
.badge-new{display:inline-block; background:var(--green); color:#fff; font-size:9.5px; padding:2px 6px; margin-left:8px; border-radius:2px; vertical-align:middle;}

/* ---------- GUIDE & FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:14px;}
.faq-item{background:#fff; border:1px solid var(--line); overflow:hidden;}
.faq-q{display:flex; gap:14px; align-items:flex-start; padding:18px 22px; font-weight:700; color:var(--navy); font-size:15px; border-bottom:1px solid var(--line); background:var(--blue-50);}
.faq-a{display:flex; gap:14px; align-items:flex-start; padding:18px 22px; color:#42506A; font-size:14px; line-height:1.8;}
.faq-a a{color:var(--blue-700); text-decoration:underline;}
.faq-mark{flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--blue-700); color:#fff; font-family:var(--serif); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.faq-mark.alt{background:var(--green);}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.contact-card{background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue-700); padding:30px 28px;}
.contact-card.alt{border-top-color:var(--green);}
.cc-tag{font-size:11.5px; letter-spacing:1.5px; color:var(--blue-700); font-weight:700; text-transform:uppercase; margin-bottom:10px;}
.contact-card.alt .cc-tag{color:var(--green);}
.contact-card h3{font-family:var(--serif); font-size:19px; color:var(--navy); margin-bottom:12px; font-weight:700;}
.contact-card p{font-size:13.8px; color:var(--muted); margin-bottom:20px;}
.cc-info div{display:flex; gap:10px; font-size:13.8px; color:#3C4A65; padding:10px 0; border-top:1px solid var(--line);}
.cc-info div span{width:52px; flex-shrink:0; color:var(--blue-700); font-weight:700;}

/* ---------- FOOTER ---------- */
footer{background:var(--blue-900); color:#9FB3D2; padding:48px 24px 28px;}
.footer-inner{max-width:1180px; margin:0 auto;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-logo{font-family:var(--serif); color:#fff; font-size:18px; font-weight:700;}
.footer-links{display:flex; gap:22px; font-size:12.8px;}
.footer-bottom{padding-top:20px; font-size:12.3px; line-height:2; color:#7C8FB0;}

@media (max-width:880px){
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .hero-stats div:nth-child(3){border-left:none;}
  .greeting-wrap, .exec-grid, .visit-wrap, .biz-grid{grid-template-columns:1fr;}
  .org-grid{grid-template-columns:repeat(2,1fr);}
  .exec-card{grid-template-columns:1fr;}
  .exec-photo{height:140px;}
  .schedule-grid{grid-template-columns:1fr;}
  .field-list{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
}