@charset "utf-8";

/* ─────────────────────────────────────────
   연호2리 마을기록관
   색·크기는 아래 변수만 고치면 전체에 반영된다.
   ───────────────────────────────────────── */
:root{
  --red:        #c34733;   /* 로고에서 뽑은 벽돌색 */
  --red-dark:   #a63a28;
  --ink:        #2b2b2b;
  --white:      #fff;
  --hd-h:       88px;      /* PC 헤더 높이 */
  --hd-h-m:     96px;      /* 모바일 헤더 높이 (로고줄 56 + 기관로고줄 40) */
  --wrap:       1400px;
  --pad:        40px;
  --pad-m:      16px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
              "Noto Sans KR",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.5;
  word-break:keep-all;          /* 한글이 단어 중간에서 안 끊기게 */
  overflow-wrap:break-word;
  /* 메인사진이 남은 높이를 채우고, 하단은 첫 화면 맨 아래에 붙게 */
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
}
img{ display:block; max-width:100%; height:auto; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

/* ── 상단 ───────────────────────────────── */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--hd-h);
  background:var(--white);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.hd__inner{
  max-width:var(--wrap); height:100%; margin:0 auto;
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.hd__brand{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); min-width:0; }
.hd__logo{ display:flex; align-items:center; flex-shrink:0; }
.hd__logo img{ height:32px; width:auto; }   /* 여백 정리한 logo-header.png 기준 */

/* 로고 옆 기관 로고 (높이는 config.php 의 'h' 값) */
.hd__partners{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,24px);
  padding-left:clamp(16px,2vw,28px);
  border-left:1px solid rgba(0,0,0,.12);
}
.hd__partners img{ height:var(--h,30px); width:auto; }

.hd__nav ul{ display:flex; align-items:center; gap:clamp(20px,4vw,56px); }
.hd__nav a,
.hd__nav button{
  display:inline-block;
  padding:10px 4px;
  background:none; border:0;
  font-size:clamp(16px,1.3vw,20px); font-weight:700;
  letter-spacing:-.02em;
  position:relative;
  transition:color .2s;
}
.hd__nav a::after,
.hd__nav button::after{
  content:""; position:absolute; left:4px; right:4px; bottom:4px;
  height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:center;
  transition:transform .25s;
}
.hd__nav a:hover, .hd__nav button:hover{ color:var(--red); }
.hd__nav a:hover::after, .hd__nav button:hover::after{ transform:scaleX(1); }

/* ── 메인 비주얼 ────────────────────────── */
main{ flex:1 0 auto; display:flex; margin-top:var(--hd-h); }
.hero{
  position:relative;
  flex:1;
  min-height:360px;
  display:flex;
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* 사진 위 글씨가 묻히지 않게 깔아주는 그늘 */
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.18) 45%,
      rgba(0,0,0,.45) 100%);
}
.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap);
  margin:0 auto; padding:clamp(40px,8vh,96px) var(--pad);
  display:flex; align-items:center; justify-content:flex-end;
}
.hero__box{ text-align:right; max-width:min(100%,620px); }

.hero__title{
  margin:0 0 clamp(24px,4vh,44px);
  color:var(--white);
  letter-spacing:-.03em;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.hero__title span,
.hero__title strong{ display:block; }
.hero__title span{
  font-size:clamp(26px,4.2vw,56px); font-weight:400;
  margin-bottom:.15em;
}
.hero__title strong{
  font-size:clamp(30px,4.8vw,64px); font-weight:700;
}

/* ── 빨간 버튼 ──────────────────────────── */
.btn{
  display:inline-block;
  padding:clamp(14px,1.6vw,20px) clamp(32px,4vw,56px);
  border:0; border-radius:4px;
  background:var(--red); color:var(--white);
  font-size:clamp(17px,1.7vw,24px); font-weight:700;
  letter-spacing:-.02em;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:background .2s, transform .15s, box-shadow .2s;
}
.btn:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.3); }
.btn:active{ transform:translateY(0); box-shadow:0 4px 14px rgba(0,0,0,.25); }

/* ── 하단 ───────────────────────────────── */
.ft{ flex-shrink:0; background:var(--ink); color:rgba(255,255,255,.78); }
.ft__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:24px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:6px 32px;
  font-size:14px; line-height:1.6;
}
.ft__addr{ font-style:normal; }
.ft__label{ color:var(--white); font-weight:700; margin-right:.6em; }
.ft__notice{ margin:0; color:rgba(255,255,255,.6); }

/* ── 준비중 팝업 ────────────────────────── */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__dim{ position:absolute; inset:0; background:rgba(0,0,0,.55); animation:fade .2s ease; }
.modal__box{
  position:relative;
  width:min(100%,380px);
  padding:36px 28px 28px;
  background:var(--white); border-radius:14px;
  border-top:5px solid var(--red);   /* 로고 색 포인트 */
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  text-align:center;
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.modal__title{ margin:0 0 10px; font-size:21px; font-weight:700; letter-spacing:-.02em; }
.modal__text{ margin:0 0 26px; font-size:15px; color:#6b6b6b; }
.modal__ok{
  width:100%; padding:14px; border:0; border-radius:8px;
  background:var(--red); color:var(--white);
  font-size:16px; font-weight:700;
  transition:background .2s;
}
.modal__ok:hover{ background:var(--red-dark); }

@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} }

/* 팝업 열렸을 때 뒤 스크롤 잠금 */
body.is-locked{ overflow:hidden; }

/* 키보드 포커스 표시 */
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:4px; }

/* ── 태블릿 ─────────────────────────────── */
@media (max-width:1024px){
  :root{ --pad:24px; }
  .hd__logo img{ height:28px; }
  .hd__partners img{ height:calc(var(--h,30px) * .85); }
}

/* ── 모바일 ─────────────────────────────── */
@media (max-width:767px){
  :root{ --pad:var(--pad-m); }
  .hd{ height:var(--hd-h-m); }
  /* 모바일 상단 2줄: [로고 | 메뉴] / [기관 로고] */
  .hd__inner{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:56px 40px;
    grid-template-areas:"logo nav" "partners partners";
    align-items:center; gap:0 12px;   /* 줄 사이 간격 0 (PC용 gap 덮어쓰기) */
  }
  .hd__brand{ display:contents; }
  .hd__logo{ grid-area:logo; }
  .hd__nav{ grid-area:nav; justify-self:end; }
  .hd__partners{
    grid-area:partners; align-self:stretch;
    justify-content:center; gap:20px;
    margin:0 calc(var(--pad-m) * -1);
    padding-left:0; border-left:0;
    border-top:1px solid rgba(0,0,0,.08);
  }
  .hd__partners img{ height:calc(var(--h,30px) * .7); }
  .hd__logo img{ height:24px; }
  .hd__nav ul{ gap:18px; }
  .hd__nav a, .hd__nav button{ font-size:15px; padding:8px 2px; }

  main{ margin-top:var(--hd-h-m); }
  /* 모바일 전용 세로 사진이라 가운데 기준 */
  .hero__bg img{ object-position:center; }
  .hero::after{
    background:linear-gradient(180deg,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.25) 40%,
        rgba(0,0,0,.6) 100%);
  }
  .hero__inner{
    align-items:flex-end; justify-content:center;
    padding:40px var(--pad-m) 56px;
  }
  .hero__box{ text-align:center; max-width:100%; }
  .hero__title span{ font-size:24px; }
  .hero__title strong{ font-size:28px; }
  .btn{ width:100%; max-width:280px; padding:16px 24px; font-size:18px; }

  .ft__inner{
    padding:18px var(--pad-m);
    flex-direction:column; justify-content:center; text-align:center;
    gap:2px; font-size:13px;
  }
}

/* 아주 좁은 화면 */
@media (max-width:359px){
  .hd__logo img{ height:20px; }
  .hd__partners{ gap:14px; }
  .hd__partners img{ height:calc(var(--h,30px) * .62); }
  .hd__nav ul{ gap:12px; }
  .hd__nav a, .hd__nav button{ font-size:14px; }
}

/* 가로로 누운 저높이 화면 */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; }
  .hero__inner{ padding:32px var(--pad); align-items:center; justify-content:flex-end; }
  .hero__box{ text-align:right; }
  .hero__title{ margin-bottom:20px; }
  .btn{ width:auto; }
}

/* 애니메이션을 꺼둔 사용자 존중 */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .btn:hover{ transform:none; }
}