/* =========================================================
   site.css — FINDS Lab Global Styles (FULL, unified panels)
   ========================================================= */

/* ========== CSS Variables ========== */
:root{
  --accent:  rgb(172, 14, 14); /* 브랜드 포인트 */
  --accent2: rgb(172, 14, 14); /* 보조 포인트(요청 반영, 현재는 동일값) */
  --gold:    rgb(214, 177, 77);
  --gold-fg: #111827;          /* 골드 배경 위 전경색 */
  --fg-on-accent:#ffffff;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --ring:0 0 0 3px rgba(172,14,14,.25);

  /* 레이아웃 유틸 */
  --header-height: 64px;
}

/* ========== Base ========== */
html,body{
  font-family:"Noto Sans KR","Noto Sans","Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body{ background:var(--bg-soft); color:#0f172a; }
img, video { display:block; max-width:100%; height:auto; }
img[width][height] { height:auto; }
:focus-visible{ outline:none; box-shadow:var(--ring); }
html { scrollbar-gutter: stable both-edges; }
@media (max-width: 360px){ html, body { min-width: 360px; } }

/* ========== 전체 사이트 단어 단위 줄바꿈 (추가) ========== */
* {
  word-break: keep-all !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* 주요 텍스트 요소들에 대한 세부 설정 */
p, span, div, h1, h2, h3, h4, h5, h6, 
li, td, th, a, button, label, input, textarea,
.nav-link, .submenu-item, .card, .home-panel {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* 긴 영문 URL이나 코드 처리 */
code, pre, .url, .email {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* 작은 유틸들 */
.line-1{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tag-gold{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .5rem; border-radius:.5rem;
  font-weight:900; font-size:12px; background:var(--gold); color:var(--gold-fg);
}

/* ========== Header / Nav ========== */
/* 헤더를 항상 최상단 + 불투명 배경으로 고정 (덮임/투명 이슈 방지) */
.site-header, header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #fff;
}

/* (선택) 상단 고정 + 살짝 블러 */
.sticky-blur{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.85);
  will-change: transform;
  border-bottom:1px solid #e5e7eb; /* 안전선 */
}

/* 공통 네비게이션 링크 기본형(베이스) */
.nav-link{
  color:#1f2937; /* slate-800 */
  font-weight:800;
  border-radius:.6rem;
  padding:.4rem .6rem;              /* pill 형태 */
  transition:
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

/* === 헤더 내 데스크톱 네비 통일: 높이, 정렬, 색상 === */
header nav[aria-label="Primary"]{ display:flex; align-items:center; gap:24px; }
header nav[aria-label="Primary"] .menu-group{ position:relative; }

header .nav-link{
  /* 높이 들쭉 해결 핵심 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;           /* ← 통일된 줄 높이 */
  padding:0 14px;        /* 좌우 패딩만 */
  border-radius:10px;
  line-height:1;
  letter-spacing:.1px;
  color:#fff;            /* 헤더 배경이 금색이므로 흰색 텍스트 */
  text-decoration:none;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* 높이를 흔드는 임의 밑줄 제거(다른 곳에서 넣었던 효과 무시) */
header .nav-link::after{ content:none !important; }

/* 호버/포커스 */
header .nav-link:hover{ color:rgba(255,255,255,.9); }
header .nav-link:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); }

/* 드롭다운 패널/아이템 */
.submenu-panel{ font-size:13px; line-height:1.25rem; width:13.5rem; }
.submenu-item{
  color:#1f2937;
  padding:.35rem .75rem;
  font-weight:700;
  border-radius:.55rem;
  transition: background-color .2s ease, color .2s ease;
}

/* 드롭다운의 기준점 보장 */
.menu-group{ position: relative; }

/* 드롭다운 기본: 숨김 (HTML은 .submenu-panel 사용) */
.menu-group > .submenu-panel{
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  min-width:180px; padding:8px 0;

  visibility:hidden; opacity:0; transform: translateY(6px);
  pointer-events:none;
  transition: visibility .18s ease, opacity .18s ease, transform .18s ease;
  z-index:30;
}

/* 보여지는 상태(세 경로 지원: data-open, :hover, :focus-within) */
.menu-group[data-open="true"] > .submenu-panel,
.menu-group:hover > .submenu-panel,
.menu-group:focus-within > .submenu-panel{
  visibility:visible; opacity:1; transform: translateY(0);
  pointer-events:auto;
}

/* 드롭다운 아이템 통일 */
header .submenu-panel a,
header .submenu-item{
  display:block; padding:8px 14px; border-radius:8px;
  color:#1f2937; font-weight:700; font-size:14px; line-height:1.25;
  transition: background-color .18s ease, color .18s ease;
}
header .submenu-panel a:hover{ background:#fff7e0; color:#8a6a12; }

/* 텍스트만 골드(옵션 A) — 모바일 링크 포함 */
.menu-group[data-open="true"] > .nav-link,
.menu-group:hover > .nav-link,
.nav-link:hover,
.submenu-item:hover,
#mobileNav a:hover{
  color: var(--gold);
  background: transparent;
  box-shadow: none;
}
/* 키보드 포커스 */
.nav-link:focus-visible,
.submenu-item:focus-visible{
  color: var(--gold);
  background: transparent;
  box-shadow: var(--ring);
}

/* ========== Mobile Navigation ========== */
/* 모바일 네비 패널 - 핵심 */
.mobile-nav-panel {
  position: absolute;
  top: 70px;  /* 헤더 바로 아래 */
  left: 0;
  right: 0;
  background: white;
  z-index: 9998;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: none;
}

.mobile-nav-panel.show {
  display: block !important;
}

.mobile-nav-inner {
  max-width: 100%;
  padding: 1rem;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}

/* 모바일 아코디언 래퍼 */
.mobile-accordion-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* 모바일 아코디언 헤더 */
.mobile-accordion-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* 모바일 링크 - 높이 통일 */
.mobile-link {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #1f2937 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  min-height: 48px !important;
}

.mobile-link:hover {
  background: #fff7e0 !important;
  color: #8a6a12 !important;
}

/* 아코디언 헤더 내 링크 */
.mobile-accordion-header .mobile-link {
  flex: 1 !important;
  border-radius: 8px 0 0 8px !important;
}

/* 아코디언 버튼 */
.mobile-acc-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  cursor: pointer !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  transition: all 0.2s !important;
  min-height: 48px !important;
}

.mobile-acc-btn:hover {
  background: #fff7e0 !important;
  color: #d97706 !important;
}

/* 모바일 아코디언 패널 - 중요! */
.mobile-acc-panel {
  margin: 4px 0 4px 24px !important;
  padding: 0 !important;
  display: none !important;  /* 기본적으로 숨김 */
}

/* hidden 클래스가 없을 때만 보이기 */
.mobile-acc-panel:not(.hidden) {
  display: grid !important;
  gap: 2px !important;
}

.mobile-acc-panel a {
  display: block !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #555 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}

.mobile-acc-panel a:hover {
  background: #fff7e0 !important;
  color: #8a6a12 !important;
}

/* 모바일 메뉴 링크 */
#mobileNav a{
  border-radius:.6rem;
  transition:background-color .2s ease, color .2s ease;
  /* 모바일에서도 높이 통일 */
  height:44px; display:flex; align-items:center;
}
#mobileNav.hidden{ display:none; }

/* 접근성/성능 */
@media (prefers-reduced-motion: reduce){
  .submenu-panel{ transition:none; transform:none; }
}

/* ========== Buttons / Badges / Cards (PANELS UNIFIED) ========== */
.btn-primary{
  background:var(--accent); color:var(--fg-on-accent);
  border-radius:.75rem; padding:.6rem .95rem; font-weight:900;
  box-shadow:0 6px 20px rgba(0,0,0,.12); transition:.2s;
}
.btn-primary:hover{ transform:translateY(-1px); opacity:.95; }

.btn-ghost{
  background:#0f172a; color:#fff; border-radius:.75rem;
  padding:.6rem .95rem; font-weight:900;
  box-shadow:0 6px 20px rgba(0,0,0,.12); transition:.2s;
}
.btn-ghost:hover{ transform:translateY(-1px); opacity:.95; }

/* News(.card), Notice(.home-panel) 공통 스타일 */
.card,
.home-panel{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  padding:1.25rem;
  transition:.2s;
}
.card:hover,
.home-panel:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* 텍스트 강조 언더라인 */
.warm-underline{
  position:relative;
  text-decoration:none;
}
.warm-underline::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--gold); opacity:.6; transform:scaleX(0);
  transform-origin:left; transition:transform .2s;
}
.warm-underline:hover::after{ transform:scaleX(1); }

/* 링크 언더라인 슬라이드(footer 등에서 사용) */
.link-underline{
  position:relative; color:#334155; transition:color .2s ease;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:100%; height:2px; background:linear-gradient(90deg, var(--gold), var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease; border-radius:1px;
}
.link-underline:hover{ color:var(--gold); }
.link-underline:hover::after{ transform:scaleX(1); }

/* ========== Typography helpers ========== */
.ko-tight{ word-break:keep-all; line-break:strict; overflow-wrap:break-word; }
@supports (text-wrap: balance){ .ko-tight{ text-wrap: balance; } }

/* ========== Carousel ========== */
.carousel{ position:relative; overflow:hidden; border-radius:1.25rem; background:#0b1020; }
.carousel-track{ display:flex; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.carousel-slide{ min-width:100%; height:520px; position:relative; background:#0b1020; }
.carousel-slide img.bg{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-caption{
  position:absolute; inset:0; display:flex; align-items:center;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 55%,rgba(0,0,0,0));
  color:#fff; padding:0 1rem;
}
.dot{ width:10px; height:10px; border-radius:9999px; background:#e5e7eb; }
.dot.active{ background:var(--accent); }

/* ========== Scrollbar ========== */
*{ scrollbar-width:thin; scrollbar-color:var(--accent) #f1f5f9; }
*::-webkit-scrollbar{ height:8px; width:8px; }
*::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:9999px; }

/* ========== Ratios / Layout helpers ========== */
.ar-16x9 { aspect-ratio: 16 / 9; object-fit: cover; }
.content-offset { scroll-margin-top: var(--header-height); }

/* 지도/캐러셀 등 위에서 보이는 블록은 높이 미리 예약 */
#kakao-map { height: 460px; }
@media (max-width: 640px){ #kakao-map { height: 360px; } }

/* 리스트 임베드(News/Notice) 로딩 중 높이 출렁임 방지 */
#news-feed, #notice-feed { min-height: 4.5rem; }

/* 모바일 메뉴 열릴 때 바디 스크롤 잠금 */
body.no-scroll { overflow: hidden; }

/* ========== Footer ========== */
footer[aria-label="Site footer"]{
  background:#ffffff;
  border-top:1px solid #e5e7eb;
}
#btnTop{
  opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  z-index:40;
}
#btnTop.is-visible{ opacity:1; transform:translateY(0); }

/* ========== Dark Mode (opt-in tweaks; PANELS STAY LIGHT) ========== */
@media (prefers-color-scheme: dark){
  body{ background:#0b0f19; color:#e2e8f0; }
  .sticky-blur{ background:rgba(11,15,25,.85); border-color:#1f2937; }
  .submenu-item, .nav-link{ color:#e2e8f0; }
  .submenu-panel{ background:#0f172a; border-color:#1f2937; box-shadow:0 12px 40px rgba(0,0,0,.5); }

  /* 패널은 항상 밝게 유지 (News/Notice 모두) */
  .card, .home-panel{
    background:#ffffff !important;
    border-color:#e5e7eb !important;
    color:#0f172a !important;
  }

  /* 텍스트만 골드(다크에서도 동일) */
  .menu-group[data-open="true"] > .nav-link,
  .menu-group:hover > .nav-link,
  .nav-link:hover,
  .submenu-item:hover,
  #mobileNav a:hover{
    color: var(--gold);
    background: transparent;
    box-shadow: none;
  }
  .nav-link:focus-visible,
  .submenu-item:focus-visible{
    color: var(--gold);
    background: transparent;
    box-shadow: var(--ring);
  }

  footer[aria-label="Site footer"]{ background:#0b0f19; border-color:#1f2937; }
  .link-underline{ color:#cbd5e1; }
  .link-underline:hover{ color:var(--gold); }
  #btnTop{ background:rgba(15,23,42,.85); border:1px solid #334155; }
  #btnTop svg{ color:#e2e8f0; }
}

/* ========== Banner responsive text fix (no HTML changes) ========== */
.relative.rounded-2xl .absolute.inset-x-0.bottom-4.px-4,
.relative.rounded-2xl .absolute.inset-x-0.bottom-3.px-4{
  bottom:.75rem; /* 여백 살짝 위로 */
}
.relative.rounded-2xl .absolute.inset-x-0.bottom-4.px-4 > .max-w-7xl,
.relative.rounded-2xl .absolute.inset-x-0.bottom-3.px-4 > .max-w-7xl{
  display:grid; row-gap:.25rem;
}
.absolute.inset-x-0.bottom-4.px-4 .breadcrumbs,
.absolute.inset-x-0.bottom-3.px-4 .breadcrumbs{
  display:flex; flex-wrap:wrap;
  font-size: clamp(10px, 2.6vw, 12px);
  line-height:1.25;
  word-break: keep-all;
}
.absolute.inset-x-0.bottom-4.px-4 h1,
.absolute.inset-x-0.bottom-4.px-4 h2,
.absolute.inset-x-0.bottom-3.px-4 h1,
.absolute.inset-x-0.bottom-3.px-4 h2{
  margin:0;
  font-size: clamp(18px, 5vw, 24px);
  line-height:1.2;
  word-break: keep-all;
}
.absolute.inset-x-0.bottom-4.px-4 p,
.absolute.inset-x-0.bottom-3.px-4 p{
  margin:0;
  font-size: clamp(11px, 3.4vw, 15px);
  line-height:1.4;
  word-break: keep-all;
  text-wrap: balance;
}

/* 아주 작은 화면에서 패딩 보정 */
@media (max-width: 420px){
  .absolute.inset-x-0.bottom-4.px-4,
  .absolute.inset-x-0.bottom-3.px-4{ padding-right:0; }
}

/* === Mobile: always show submenus expanded === */
@media (max-width: 768px){
  /* 모바일 전용 네비 컨테이너 안에서 드롭다운 패널을 '항상 보이게' 전환 */
  #mobileNav .submenu-panel{
    position: static;           /* absolute → 일반 흐름 */
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: block;

    /* 모바일 스타일로 재배치 */
    margin: .25rem 0 .4rem 1.0rem;   /* 살짝 들여쓰기 */
    padding: .25rem 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
  }

  /* 데스크톱용 고정 폭/폰트 보정 */
  #mobileNav .submenu-panel{ width: auto; font-size: 14px; line-height: 1.5; }
  #mobileNav .submenu-item{
    display: block;
    padding: .4rem .5rem;
    border-radius: .5rem;
    font-weight: 800;            /* 모바일에서 가독성 ↑ */
  }

  /* 상위 탭(부모 링크) */
  #mobileNav .menu-group > .nav-link{
    display: block;
    padding: .55rem .6rem .25rem;
  }

  /* 호버 하이라이트는 텍스트만 골드(배경은 유지) — 기존 옵션 A와 일치 */
  #mobileNav .nav-link:hover,
  #mobileNav .submenu-item:hover{
    color: var(--gold);
    background: transparent;
    box-shadow: none;
  }

  /* 만약 상위 항목에 '∨' 같은 케럿 아이콘을 의사요소로 넣었다면 제거(겹침 방지) */
  #mobileNav .menu-group > .nav-link::after{ content: none; }
}

/* 히어로/캐러셀이 헤더를 덮지 않도록 안전장치 */
.hero-section, .carousel-container, .carousel-overlay{ z-index: 0; }