/*
Theme Name: Wizard Village
Theme URI: https://example.com
Author: SHIN
Description: 삼척 궁촌항 마법사마을 맞춤 테마. 기업형 미니멀 디자인, 소식 게시판은 워드프레스 글로 운영.
Version: 1.0
Requires PHP: 7.4
Text Domain: wizard-village
*/

/* ==========================================================
   마법사마을 D안 — 기업형 미니멀 (金澤工務店 레퍼런스)
   배경 #f5f5f4 / 먹색 텍스트 / 빨강 포인트 절제
   영문 대형 타이틀: Inter / 감성 문장: Noto Serif KR / 본문: Pretendard
   ========================================================== */

:root{
  --bg:#f5f5f4;
  --white:#ffffff;
  --ink:#141414;
  --sub:#6f6f6f;
  --red:#e8342c;
  --hairline:#dcdcd8;
  --dark:#2b2b2b;
  --maxw:1100px;
  --font-en:'Inter', sans-serif;
  --font-serif:'Noto Serif KR', serif;
  --font-body:'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}
body{
  font-family:var(--font-body);font-weight:400;
  background:var(--bg);color:var(--ink);
  line-height:1.85;font-size:15.5px;word-break:keep-all;
  padding-bottom:56px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
dl,dt,dd{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.center{text-align:center}
.mt-30{margin-top:30px}
.mt-60{margin-top:64px}

.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ---------- 헤더 ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(245,245,244,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:20px;height:60px;
}
.logo{display:flex;align-items:baseline;gap:8px;margin-right:auto}
.logo b{font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.logo small{font-family:var(--font-en);font-size:.56rem;font-weight:600;
  letter-spacing:.26em;color:var(--sub)}
.gnb{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.gnb::-webkit-scrollbar{display:none}
.gnb a{
  padding:8px 11px;font-size:.86rem;font-weight:500;color:var(--sub);
  white-space:nowrap;transition:color .2s;
}
.gnb a:hover{color:var(--ink)}
.gnb a.active{color:var(--ink);font-weight:700;text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:2px}
.gnb a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.head-cta{
  background:var(--red);color:#fff;font-weight:700;font-size:.82rem;
  padding:8px 18px;border-radius:999px;white-space:nowrap;
  transition:opacity .2s;
}
.head-cta:hover{opacity:.85}
@media (max-width:820px){
  .header-inner{flex-wrap:wrap;height:auto;padding:10px 16px}
  .logo{width:100%;justify-content:center;margin:0 0 6px}
  .gnb{flex:1}
  .head-cta{padding:7px 14px}
}

/* ---------- 메인 히어로 ---------- */
.main-hero{position:relative;height:78svh;min-height:480px;overflow:hidden;background:#20323d}
.main-hero-media, .main-hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.main-hero-media{background:linear-gradient(165deg,#4b6b7d 0%,#22394a 60%,#16242f 100%)}
.main-hero-shade{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,15,20,.18) 0%, rgba(10,15,20,.05) 50%, rgba(10,15,20,.42) 100%)}
.main-hero-text{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 22px;color:#fff;
}
.main-hero-text h1{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.9rem, 5.4vw, 3.3rem);line-height:1.6;letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(0,10,20,.35);
}
.scroll-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  font-family:var(--font-en);font-size:.68rem;letter-spacing:.18em;
  color:rgba(255,255,255,.85);
}

/* ---------- 페이지 헤드 (서브) ---------- */
.page-head{padding:56px 0 0;border-bottom:1px solid var(--hairline);background:var(--bg)}
.page-head .wrap{padding-bottom:26px}

/* 타이틀 행: 큰 영문 좌 + 작은 국문 우 */
.page-title-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:30px;
}
.page-title-row.tight{margin-bottom:18px}
.page-title-row.big{border-bottom:none;padding-bottom:0;margin-bottom:18px}
.en-title{
  font-family:var(--font-en);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.7rem, 4.6vw, 2.5rem);line-height:1.15;
}
.en-title.xl{font-size:clamp(2.4rem, 7vw, 4rem)}
.kr-label{font-size:.82rem;color:var(--sub);letter-spacing:.06em;white-space:nowrap}
.page-head .chip-row{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--hairline);padding-top:20px}

/* ---------- 칩 / 알약 버튼 ---------- */
.chip{
  display:inline-block;font-size:.76rem;font-weight:600;
  padding:5px 14px;border-radius:999px;white-space:nowrap;
}
.chip.fill{background:var(--ink);color:#fff}
.chip.line{border:1px solid var(--ink);color:var(--ink);background:transparent}
a.chip{transition:background .2s,color .2s}
a.chip.line:hover{background:var(--ink);color:#fff}
.pill-btn{
  display:inline-block;border:1px solid var(--ink);border-radius:999px;
  padding:11px 30px;font-size:.86rem;font-weight:600;background:transparent;
  transition:background .2s,color .2s;
}
.pill-btn:hover{background:var(--ink);color:var(--white)}
.pill-btn.sm{padding:9px 22px;font-size:.82rem}
.pill-btn.line{border-color:var(--hairline);color:var(--sub)}
.pill-btn.line:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.pill-btn:focus-visible,.chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* ---------- 섹션 ---------- */
.sec{padding:72px 0}
.sec.alt{background:var(--white);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.sec-label{
  display:flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:600;color:var(--ink);
  letter-spacing:.04em;margin-bottom:22px;
}
.sec-label i{width:7px;height:7px;background:var(--red);border-radius:1px;flex-shrink:0}
.serif{font-family:var(--font-serif)}
.body-text{color:#3d3d3d;max-width:40em;margin-bottom:14px;font-size:.94rem}
.note-text{font-size:.82rem;color:var(--sub)}

/* ---------- Places 그리드 (Projects 패턴) ---------- */
.pj-grid{display:grid;gap:36px 24px;margin-bottom:44px}
@media (min-width:720px){.pj-grid{grid-template-columns:1fr 1fr}}
.pj figure{
  aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,#d9d9d5,#b9bdb8);
  margin-bottom:14px;
}
.pj figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pj:hover figure img{transform:scale(1.03)}
.pj figure.noimg{display:flex;align-items:center;justify-content:center}
.pj figure.noimg::after{content:"사진 준비 중";color:#fff;font-size:.8rem;font-weight:600}
.pj h3{font-size:1.02rem;font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.pj-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:10px;
}
.pj-meta span{font-family:var(--font-en);font-size:.74rem;color:var(--sub);letter-spacing:.02em}
.pj-meta .chip{border:1px solid var(--hairline);color:var(--sub);font-weight:500;font-size:.7rem;font-style:normal}
.pj:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- About ---------- */
.about-grid{display:grid;gap:26px}
@media (min-width:860px){
  .about-grid{grid-template-columns:220px 1fr;gap:60px}
  .about-grid .sec-label{margin-bottom:0;padding-top:10px}
}
.about-lead{
  font-weight:500;font-size:clamp(1.5rem, 4vw, 2.2rem);
  line-height:1.65;letter-spacing:.02em;margin-bottom:22px;
}

/* ---------- TV row ---------- */
.tvrow{display:grid;gap:34px;align-items:center}
@media (min-width:900px){.tvrow{grid-template-columns:.85fr 1.15fr;gap:56px}}
.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame.wide{margin-top:26px}

/* ---------- 행 리스트 (Company Information 패턴) ---------- */
.row-list{border-top:1px solid var(--ink)}
.row-list li{border-bottom:1px solid var(--hairline)}
.row-list a, .row-static{
  display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:baseline;
  padding:20px 2px;transition:background .2s;
}
.row-list a:hover{background:rgba(0,0,0,.03)}
.row-list b{font-size:.98rem;font-weight:700}
.row-list span{color:var(--sub);font-size:.88rem}
.row-list i{font-style:normal;color:var(--ink);font-family:var(--font-en);font-size:.9rem}
.row-list a:hover i{color:var(--red)}
@media (max-width:640px){
  .row-list a,.row-static{grid-template-columns:1fr auto}
  .row-list span{grid-column:1/3}
}

/* ---------- 뉴스 리스트 ---------- */
.news-list{border-top:1px solid var(--ink)}
.news-list li{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
  padding:18px 2px;border-bottom:1px solid var(--hairline);
}
.news-list p{font-size:.92rem}
.news-list time{font-family:var(--font-en);font-size:.76rem;color:var(--sub);letter-spacing:.04em}
@media (max-width:600px){
  .news-list li{grid-template-columns:auto 1fr}
  .news-list time{grid-column:2;justify-self:end}
}

/* ---------- 상세 (detail) ---------- */
.detail{padding:26px 0 64px;border-bottom:1px solid var(--hairline);margin-bottom:56px}
.detail:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.detail-grid{display:grid;gap:30px}
@media (min-width:900px){.detail-grid{grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}}
.detail-photo{
  aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(150deg,#d9d9d5,#b9bdb8);
}
.detail-photo img{width:100%;height:100%;object-fit:cover}
.detail-photo.noimg{display:flex;align-items:center;justify-content:center}
.detail-photo.noimg::after{content:"사진 준비 중";color:#fff;font-size:.85rem;font-weight:600}
.detail-lead{
  font-weight:500;font-size:clamp(1.35rem, 3.4vw, 1.9rem);
  line-height:1.6;letter-spacing:.01em;margin-bottom:18px;
}

/* 정의 테이블 (基礎工事 rows 패턴) */
.def-table{border-top:1px solid var(--ink);margin:22px 0 6px}
.def-table > div{
  display:grid;grid-template-columns:150px 1fr;gap:16px;
  padding:12px 2px;border-bottom:1px solid var(--hairline);
}
.def-table dt{font-weight:700;font-size:.86rem;color:var(--ink)}
.def-table dd{font-size:.9rem;color:#3d3d3d}
.def-table.menu dd{font-family:var(--font-en);font-weight:600;color:var(--ink);
  text-align:right;letter-spacing:.02em}
.def-table.menu > div{grid-template-columns:1fr auto}
@media (max-width:560px){
  .def-table > div{grid-template-columns:96px 1fr}
}

/* ---------- 푸터 (다크, The New Standard 패턴) ---------- */
.site-footer{background:var(--dark);color:#c9c9c9;font-size:.84rem;padding:64px 0 40px}
.foot-top{display:grid;gap:44px}
@media (min-width:860px){.foot-top{grid-template-columns:220px 1fr;gap:80px}}
.foot-label{
  font-family:var(--font-en);font-size:.68rem;letter-spacing:.14em;
  color:#8a8a8a;margin-bottom:12px;
}
.foot-nav a{display:block;padding:5px 0;color:#e8e8e8;font-size:.92rem;transition:color .2s}
.foot-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:26px}
.foot-slogan{
  font-family:var(--font-en);font-weight:700;color:#fff;
  font-size:clamp(2.2rem, 6vw, 3.6rem);line-height:1.1;letter-spacing:-.02em;
}
.foot-addr p{margin-bottom:3px;color:#c9c9c9}
.foot-addr-sub{margin-top:10px;font-size:.72rem;color:#8a8a8a;line-height:1.7}
.foot-sns{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.foot-sns a{font-family:var(--font-en);font-size:.74rem;letter-spacing:.08em;color:#a5a5a5;transition:color .2s}
.foot-sns a:hover{color:#fff}
@media (max-width:859px){
  .foot-right{align-items:flex-start;text-align:left}
  .foot-sns{justify-content:flex-start}
}
.foot-bottom{
  margin-top:52px;padding-top:24px;border-top:1px solid #3d3d3d;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.foot-logo{font-weight:800;color:#fff;font-size:1rem}
.foot-logo span{font-family:var(--font-en);font-weight:600;font-size:.6rem;letter-spacing:.26em;color:#8a8a8a;margin-left:6px}
.copyright{font-family:var(--font-en);font-size:.7rem;color:#8a8a8a;letter-spacing:.04em}

/* ---------- 모바일 하단 고정 바 ---------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:grid;grid-template-columns:1.15fr 1fr 1fr;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--hairline);
}
.action-bar a{
  padding:13px 4px calc(13px + env(safe-area-inset-bottom));
  text-align:center;font-size:.85rem;font-weight:600;color:var(--ink);
}
.action-bar a + a{border-left:1px solid var(--hairline)}
.action-bar .ab-call{background:var(--red);color:#fff;font-weight:700}
.action-bar a:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
@media (min-width:900px){.action-bar{display:none} body{padding-bottom:0}}

/* ========== v3: 모바일 햄버거 메뉴 ========== */
.menu-btn{display:none}
@media (max-width:820px){
  .header-inner{flex-wrap:nowrap;flex-direction:row;height:56px;padding:0 16px;gap:12px}
  .logo{width:auto;margin:0 auto 0 0;justify-content:flex-start}
  .gnb{display:none}
  .head-cta{display:none}
  .menu-btn{
    display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;
    width:44px;height:44px;background:var(--red);border:none;border-radius:999px;
    cursor:pointer;padding:0;flex-shrink:0;
  }
  .menu-btn span,.menu-btn::before,.menu-btn::after{
    content:"";display:block;width:16px;height:2px;background:#fff;border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
  }
  body.menu-open .menu-btn span{opacity:0}
  body.menu-open .menu-btn::before{transform:translateY(7px) rotate(45deg)}
  body.menu-open .menu-btn::after{transform:translateY(-7px) rotate(-45deg)}
  body.menu-open .site-header{background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--hairline)!important}
  body.menu-open .gnb{
    display:flex;flex-direction:column;position:fixed;top:56px;left:0;right:0;z-index:79;
    background:var(--dark);padding:20px 22px 26px;gap:0;overflow:visible;
  }
  body.menu-open .gnb a{
    color:#e8e8e8;font-size:1.02rem;font-weight:500;padding:13px 2px;
    border-bottom:1px solid #3d3d3d;text-decoration:none;
  }
  body.menu-open .gnb a.active{color:#fff;font-weight:800;text-decoration:none}
  /* 메뉴 열림 시 로고는 항상 진한 색 (투명 히어로 위에서도) */
  body.menu-open .site-header .logo b{color:var(--ink)!important;text-shadow:none!important}
  body.menu-open .site-header .logo small{color:var(--sub)!important;text-shadow:none!important}
}
/* 히어로 상단 음영 소폭 보강 (헤더 가독성) */
.main-hero-shade{
  background:linear-gradient(180deg, rgba(10,15,20,.34) 0%, rgba(10,15,20,.06) 42%, rgba(10,15,20,.42) 100%);
}

/* ========== v4: 흰 헤더 복귀 + 하단 슬로건형 히어로 ========== */
.main-hero{height:calc(100svh - 60px);min-height:520px}
@media (max-width:820px){.main-hero{height:calc(100svh - 56px);min-height:460px}}
.main-hero-text{
  top:auto;transform:none;bottom:72px;
}
.hero-kr{
  font-weight:500;font-size:clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing:.04em;color:rgba(255,255,255,.92);
  margin-bottom:14px;text-shadow:0 1px 12px rgba(0,10,20,.4);
}
.hero-en{
  font-family:var(--font-en);font-weight:700;
  font-size:clamp(3rem, 8.5vw, 6.2rem);line-height:1.04;letter-spacing:-.03em;
  color:#fff;text-shadow:0 2px 22px rgba(0,10,20,.35);
}
@media (max-width:820px){.main-hero-text{bottom:56px}}


/* ---------- 워드프레스 글 본문 ---------- */
.wv-post-content{max-width:44em}
.wv-post-content p{margin-bottom:16px}
.wv-post-content img{margin:20px 0;border-radius:4px}
.wv-post-content iframe{max-width:100%}
.wv-post-content .wp-block-embed{margin:24px 0}
.wv-post-content a{color:var(--red);text-decoration:underline}
.news-list p a{transition:color .2s}
.news-list p a:hover{color:var(--red)}
.navigation.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.navigation.pagination a,.navigation.pagination span{
  border:1px solid var(--hairline);border-radius:999px;padding:7px 16px;font-size:.85rem;
}
.navigation.pagination span.current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ========== v5: 히어로 한글 슬로건 + 지도 ========== */
.hero-big{
  font-family:var(--font-body);font-weight:800;
  font-size:clamp(2.4rem, 7vw, 4.6rem);line-height:1.22;letter-spacing:-.03em;
  color:#fff;text-shadow:0 2px 22px rgba(0,10,20,.35);
}
.wv-map{
  height:560px;background:#e9e9e6;border:1px solid var(--hairline);
  position:relative;z-index:1;
}
.wv-map.tall{height:480px}
@media (max-width:640px){.wv-map{height:420px}.wv-map.tall{height:440px}}
.map-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.leaflet-popup-content-wrapper{border-radius:6px;box-shadow:0 6px 22px rgba(20,25,30,.18)}
.leaflet-popup-content{margin:14px 16px;font-family:var(--font-body)}
.wv-pop b{display:block;font-size:.98rem;font-weight:800;color:var(--ink);margin-bottom:2px}
.wv-pop span{display:block;font-size:.82rem;color:var(--sub)}
.wv-pop em{display:block;font-style:normal;font-size:.82rem;font-weight:700;color:var(--red);margin-top:4px}
.wv-pop .wv-pop-links{display:flex;gap:10px;margin-top:10px}
.wv-pop .wv-pop-links a{
  font-size:.78rem;font-weight:700;color:var(--ink);
  border:1px solid var(--hairline);border-radius:999px;padding:5px 12px;
}
.wv-pop .wv-pop-links a:hover{border-color:var(--red);color:var(--red)}
.tour-list strong{color:var(--ink);font-weight:700}

/* ========== v6: 히어로 영상 크롭 보정 ========== */
/* 위쪽부터 보여주고 아래쪽을 잘라 상단 방송 로고·자막이 살도록 */
.main-hero-media video{object-position:center top}
/* 데스크톱: 화면이 충분히 크면 16:9 원본 비율에 맞춰 아예 잘리지 않게 */
@media (min-width:900px){
  .main-hero{height:min(calc(100svh - 60px), 56.25vw)}
}

/* ========== v7: 지도 범례 + fitBounds 대응 ========== */
.map-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.86rem;color:var(--sub)}
.map-legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.map-legend .dot.food{background:#e8342c}
.map-legend .dot.stay{background:#141414}
.map-legend .dot.play{background:#0e6b8f}
.map-legend .dot.partner{background:#8a8a8a}
.wv-pop{min-width:180px}

/* ========== v8: 히어로 영상 완전 표시 (상하단 방송 그래픽 보존) ========== */
/* 잘림이 없어졌으므로 중앙 정렬로 복귀 */
.main-hero-media video{object-position:center center}
/* 데스크톱: 컨테이너를 16:9 원본 비율로 고정 → 로고·자막 모두 보임.
   화면이 낮으면 히어로 하단이 스크롤 아래로 내려갈 뿐, 영상은 잘리지 않음 */
@media (min-width:900px){
  .main-hero{height:56.25vw;min-height:0}
}