/* ============================================================
   CoolSpace 공통 레이아웃 스타일 (header + footer) — 단일 관리
   디자인 기준: 8700/wizard = landing-nav.js (라이트 마케팅 nav) · 사용: layout.js 로더가 주입
   ⚠️ 헤더/푸터 스타일은 여기서만 수정. 개별 페이지에 복붙 금지.
   (CLSP-12: 헤더 다크 → 라이트 전환)
   ============================================================ */
/* 공통 폰트: 헤더가 쓰는 폰트는 전부 공통 레이아웃에서 로드한다(개별 페이지 로드 금지).
   ① Pretendard — nav 링크/CTA/KO·EN 토글
   ② DM Sans (weight 800 포함) — 로고(.nav-logo/.footer-logo, font-weight:800)
   ⚠️ 개별 페이지들이 DM Sans 를 제각각(800 미포함/미로드) 로드해서 로고 굵기가 달라지던 문제 방지.
      → 로고용 800 은 반드시 여기서 공통 로드(페이지가 700까지만 로드해도 800 이 항상 존재). */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --teal:#F28C38; --teal2:#D97828;
  --border:#E0E0E0; --muted:#666666; --light:rgba(255,255,255,0.7);
  --white:#ffffff; --ink:#1A1A1A; --nav-text:#333333; /* --navy 제거(CLSP-12): layout.css에선 안 쓰는데 전역 :root라 landing/floorplan 자체 --navy를 덮어써 남색 버그 유발. 재추가 금지. */
}

/* ===== HEADER (nav-shared.html) — 라이트 톤 ===== */
/* 슬롯 래퍼가 박스를 만들면 sticky nav가 래퍼(72px) 안에서만 붙어 스크롤 시 사라짐.
   display:contents 로 래퍼 박스를 없애 nav의 컨테이닝 블록을 body(전체높이)로 → 스크롤 내내 고정. */
#site-header{display:contents;}
nav{position:sticky;top:0;z-index:100;padding:0 30px;height:100px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:background 0.3s ease;font-family:'Pretendard Variable','Pretendard',sans-serif;}
/* KO/EN 토글 버튼(nav-shared.html 인라인 font-family:inherit)이 페이지 body 폰트를 상속받아
   크기/모양이 달라지던 것 방지 — 헤더 폰트를 공통에서 강제. */
nav .lang-toggle button{font-family:'Pretendard Variable','Pretendard',sans-serif!important;}
nav.scrolled{background:rgba(255,255,255,0.98);box-shadow:0 2px 12px rgba(0,0,0,0.05);}
.nav-logo{font-family:'DM Sans',sans-serif;font-size:26px;font-weight:800;letter-spacing:-0.5px;color:var(--ink);text-decoration:none;}
.nav-logo .logo-teal{color:var(--teal);}
.nav-links{display:flex;gap:0;align-items:center;}
.nav-links a{font-size:18px;font-weight:500;color:var(--nav-text);text-decoration:none;padding:8px 15px;border-radius:8px;transition:all 0.2s;font-family:'Pretendard Variable','Pretendard',sans-serif;}
.nav-links a:hover{color:var(--teal);background:rgba(242, 140, 56,0.07);}
/* 1단 메뉴(솔루션·내 교실 만들기·구축사례·장비 둘러보기·도입절차)만 hover 파란 글씨.
   견적 문의하기(CTA)·로그인·회원가입은 종전 그대로 둔다(대표 지시 2026-09-02). */
.nav-links>a:not(.nav-cta):hover,
.nav-links>.nav-dropdown>a:hover{color:#0033A0;background:rgba(0, 51, 160,0.06);}
.nav-links>.nav-dropdown>a:hover::after{color:#0033A0;}
.nav-cta{background:var(--teal)!important;color:#fff!important;font-weight:700!important;padding:12px 22px!important;border-radius:10px!important;font-size:14px!important;}
.nav-cta:hover{background:var(--teal2)!important;}
.nav-dropdown{position:relative}
.nav-dropdown>a{display:flex;align-items:center;gap:0.3rem;cursor:pointer}
.nav-dropdown>a::after{content:'▾';font-size:0.6rem;opacity:0.55;color:var(--nav-text);}
.dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:0.75rem;min-width:160px;z-index:200;}
.dropdown-menu-inner{background:rgba(255,255,255,0.98);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.nav-dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:0.8rem 1.35rem;font-size:16px;color:var(--nav-text);text-decoration:none;transition:all 0.15s;white-space:nowrap;font-family:'Pretendard Variable','Pretendard',sans-serif;}
.dropdown-menu a:hover{background:rgba(242, 140, 56,0.08);color:var(--teal)}
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:0.5rem;background:rgba(242, 140, 56,0.08);border:1.5px solid rgba(242, 140, 56,0.25);color:var(--teal);padding:10px 18px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Pretendard Variable','Pretendard',sans-serif;}
.user-btn:hover{background:rgba(242, 140, 56,0.15);}
.user-btn::after{content:'▾';font-size:0.6rem;opacity:0.7;}
.user-dropdown{display:none;position:absolute;top:100%;right:0;padding-top:0.5rem;min-width:160px;z-index:200;}
.user-dropdown-inner{background:rgba(255,255,255,0.98);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.user-menu:hover .user-dropdown{display:block;}
.user-dropdown-inner a,.user-dropdown-inner button{display:block;width:100%;text-align:left;padding:0.7rem 1.1rem;font-size:14px;color:var(--nav-text);text-decoration:none;transition:all 0.15s;cursor:pointer;background:transparent;border:none;font-family:'Pretendard Variable','Pretendard',sans-serif;}
.user-dropdown-inner a:hover{background:rgba(242, 140, 56,0.08);color:var(--teal);}
.user-dropdown-inner .logout-item{color:var(--muted);}
.user-dropdown-inner .logout-item:hover{background:rgba(255,107,107,0.08);color:#ef4444;}
.user-dropdown-inner hr{border:none;border-top:1px solid var(--border);margin:0;}
.nav-hamburger{display:none;background:transparent;border:none;flex-direction:column;gap:5px;cursor:pointer;padding:0.5rem;}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--nav-text);border-radius:2px;transition:all 0.2s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:100px;left:0;right:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:1.5rem 2rem;flex-direction:column;gap:1.25rem;z-index:99;}
.mobile-menu.open{display:flex;}
.mobile-menu a{color:var(--nav-text);font-size:16px;text-decoration:none;padding:0.5rem 0;border-bottom:1px solid var(--border);}
.mobile-menu a:hover{color:var(--teal);}

/* ===== 메인(landing)만: 히어로 영상 위 투명 헤더 (coolschool.co.kr 톤) =====
   landing <body class="has-hero-nav"> 로 옵트인. nav를 fixed 투명으로 → 영상이 최상단까지.
   스크롤 시(.scrolled) solid 라이트로 복귀. 다른 페이지는 기본 라이트 헤더 유지. */
body.has-hero-nav nav{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:none;box-shadow:none;}
body.has-hero-nav nav .nav-logo{color:#fff;}
body.has-hero-nav nav .nav-links a{color:rgba(255,255,255,0.92)!important;}
body.has-hero-nav nav .nav-links a:hover{color:#fff!important;background:rgba(255,255,255,0.14)!important;}
/* 드롭다운 메뉴는 흰 배경 → 항목 글씨는 검정 유지 (히어로 화이트 상속 방지) */
body.has-hero-nav nav .dropdown-menu a{color:var(--nav-text)!important;background:transparent!important;}
body.has-hero-nav nav .dropdown-menu a:hover{color:var(--teal)!important;background:rgba(242, 140, 56,0.08)!important;}
/* 유저(계정) 드롭다운도 흰 배경 → 로그인 시 사용자명 호버 메뉴(마이스페이스/개인정보/로그아웃) 글씨 검정 유지 */
body.has-hero-nav nav .user-dropdown-inner a{color:var(--nav-text)!important;}
body.has-hero-nav nav .user-dropdown-inner a:hover{color:var(--teal)!important;}
body.has-hero-nav nav .user-dropdown-inner .logout-item{color:var(--muted)!important;}
body.has-hero-nav nav .nav-dropdown>a::after{color:rgba(255,255,255,0.7);}
body.has-hero-nav nav .nav-hamburger span{background:#fff;}
body.has-hero-nav nav #navGuest a[data-i18n="nav.login"]{color:#fff!important;}
body.has-hero-nav nav .lang-toggle button{border-color:rgba(255,255,255,0.45)!important;color:#fff!important;}
/* 스크롤하면 solid 라이트 */
body.has-hero-nav nav.scrolled{background:rgba(255,255,255,0.95);border-bottom:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,0.05);}
body.has-hero-nav nav.scrolled .nav-logo{color:var(--ink);}
body.has-hero-nav nav.scrolled .nav-links a{color:var(--nav-text)!important;}
body.has-hero-nav nav.scrolled .nav-links>a:not(.nav-cta):hover,
body.has-hero-nav nav.scrolled .nav-links>.nav-dropdown>a:hover{color:#0033A0!important;background:rgba(0, 51, 160,0.06)!important;}
body.has-hero-nav nav.scrolled .nav-dropdown>a::after{color:var(--nav-text);}
body.has-hero-nav nav.scrolled .nav-hamburger span{background:var(--nav-text);}
body.has-hero-nav nav.scrolled #navGuest a[data-i18n="nav.login"]{color:#333!important;}
body.has-hero-nav nav.scrolled .lang-toggle button{border-color:rgba(0,0,0,0.18)!important;color:#333!important;}

/* ===== FOOTER ===== */
footer{padding:3rem 48px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#fff;font-family:'Pretendard Variable','Pretendard',sans-serif;}
.footer-logo{font-family:'DM Sans',sans-serif;font-size:0.9rem;font-weight:800;letter-spacing:2px;color:var(--teal)}
.footer-links{display:flex;gap:2rem}
.footer-links a{font-size:0.78rem;color:var(--muted);text-decoration:none;transition:color 0.2s}
.footer-links a:hover{color:var(--teal)}
.footer-copy{font-size:0.75rem;color:var(--muted)}

@media(max-width:768px){
  nav{padding:0 20px}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  footer{flex-direction:column;gap:1.25rem;text-align:center;padding:2rem 1.5rem}
  .footer-links{flex-wrap:wrap;justify-content:center}
}