/*
Theme Name: Hearium
Theme URI: https://hearium.kr/
Author: Bluecoconut
Author URI: https://bluecoconut.kr/
Description: 헤아리움 전용 테마. 정적 시안을 그대로 재현하며 워드프레스 콘텐츠 기능을 더한다. 페이지빌더 미사용.
Version: 1.0.0
License: Proprietary
Text Domain: hearium
*/

/* ═══════════════════════════════════════════════
   HEARIUM — 미드나잇 홀 (1안)
   짙은 남색 바탕 · 골드 포인트 · 명조 제목
   ═══════════════════════════════════════════════ */
:root{
  --bg:#0b1728;
  --bg-deep:#081120;
  --panel:#102036;
  --panel-2:#132741;
  --line:rgba(201,162,94,.22);
  --line-soft:rgba(242,234,217,.12);
  --gold:#c9a25e;
  --gold-bright:#e0bd7e;
  --cream:#f2ead9;
  --body:#c9d4de;
  --muted:#8fa1b3;
  --serif:'Noto Serif KR','Nanum Myeongjo',serif;
  --sans:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--body);font-family:var(--sans);
     font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
::selection{background:var(--gold);color:var(--bg-deep);}

.wrap{width:min(1120px,92%);margin:0 auto;}

/* ── 헤더 ─────────────────────────────── */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(8,17,32,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);}
.nav{display:flex;align-items:center;gap:32px;height:72px;}
.brand{font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:.42em;
  color:var(--cream);margin-right:auto;white-space:nowrap;}
.brand span{color:var(--gold);}
.menu{display:flex;gap:28px;font-size:.95rem;font-weight:500;color:var(--body);}
.menu a{padding:6px 2px;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;}
.menu a:hover,.menu a.on{color:var(--gold-bright);border-bottom-color:var(--gold);}
.cta{background:var(--gold);color:#14100a;font-weight:700;font-size:.9rem;
  padding:10px 20px;border-radius:3px;transition:.2s;white-space:nowrap;}
.cta:hover{background:var(--gold-bright);}
#menu-toggle{display:none;background:none;border:0;color:var(--cream);font-size:1.6rem;cursor:pointer;}

/* ── 히어로 ───────────────────────────── */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;
  background:var(--bg-deep);overflow:hidden;}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.5;}
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,17,32,.94) 30%,rgba(8,17,32,.35) 75%,rgba(8,17,32,.15));}
.hero .wrap{position:relative;z-index:2;padding:140px 0 90px;}
.kicker{font-size:.85rem;font-weight:700;letter-spacing:.28em;color:var(--gold);
  margin-bottom:20px;}
.hero h1{font-family:var(--serif);font-weight:700;color:var(--cream);
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.42;margin-bottom:22px;
  word-break:keep-all;}
.hero h1 em{font-style:normal;color:var(--gold-bright);}
.hero .sub{font-size:1.06rem;color:var(--body);max-width:34em;margin-bottom:38px;word-break:keep-all;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-block;padding:14px 30px;font-weight:700;font-size:.95rem;
  border-radius:3px;transition:.2s;}
.btn.gold{background:var(--gold);color:#14100a;}
.btn.gold:hover{background:var(--gold-bright);}
.btn.ghost{border:1px solid var(--gold);color:var(--gold-bright);}
.btn.ghost:hover{background:rgba(201,162,94,.12);}
.hero .tagline{position:absolute;right:0;bottom:-34px;font-size:.78rem;letter-spacing:.34em;
  color:var(--muted);}

/* ── 섹션 공통 ─────────────────────────── */
section.block{padding:96px 0;}
section.block.tint{background:var(--bg-deep);}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:48px;}
.sec-no{font-size:.82rem;font-weight:700;letter-spacing:.26em;color:var(--gold);}
.sec-label{font-size:.82rem;letter-spacing:.14em;color:var(--muted);}
h2.sec-title{font-family:var(--serif);font-weight:700;color:var(--cream);
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.5;margin-bottom:18px;word-break:keep-all;}
.lead{color:var(--body);max-width:38em;word-break:keep-all;}
.gold-rule{width:44px;height:2px;background:var(--gold);margin-bottom:26px;}

/* ── 인용 섹션 ─────────────────────────── */
.quote-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch;}
.quote-grid .photo{min-height:420px;background-size:cover;background-position:center;}
.quote-grid .text{background:var(--panel);padding:64px 56px;display:flex;
  flex-direction:column;justify-content:center;}
blockquote{font-family:var(--serif);font-size:1.28rem;line-height:1.85;color:var(--cream);
  word-break:keep-all;margin-bottom:22px;}
blockquote::before{content:"“";display:block;font-size:2.6rem;color:var(--gold);line-height:1;margin-bottom:10px;}
.quote-grid .note{font-size:.92rem;color:var(--muted);word-break:keep-all;}

/* ── 카드 3열 ─────────────────────────── */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.pcard .thumb{aspect-ratio:4/3;background-size:cover;background-position:center;
  border:1px solid var(--line-soft);margin-bottom:20px;}
.pcard h3{font-family:var(--serif);font-size:1.12rem;color:var(--cream);line-height:1.55;
  margin-bottom:10px;word-break:keep-all;}
.pcard p{font-size:.93rem;color:var(--muted);word-break:keep-all;}

/* ── 프로그램 하이라이트 ────────────────── */
.prog-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:0;}
.prog-grid .photo{min-height:480px;background-size:cover;background-position:center;}
.prog-grid .body{background:var(--panel);padding:64px 56px;}
.num-list li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line-soft);
  font-size:.98rem;color:var(--body);word-break:keep-all;}
.num-list li:last-child{border-bottom:0;}
.num-list .n{font-size:.8rem;font-weight:700;color:var(--gold);letter-spacing:.06em;padding-top:3px;}

/* ── 대관 리스트 ───────────────────────── */
.rental-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start;}
.rental-grid .photo{aspect-ratio:4/3;background-size:cover;background-position:center;
  border:1px solid var(--line-soft);position:sticky;top:100px;}
.def-list li{display:grid;grid-template-columns:120px 1fr;gap:18px;
  padding:18px 0;border-bottom:1px solid var(--line-soft);word-break:keep-all;}
.def-list .k{font-family:var(--serif);font-weight:700;color:var(--gold-bright);font-size:1.02rem;}
.def-list p{font-size:.95rem;color:var(--body);}

/* ── 갤러리 ───────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;}
.gallery .g{background-size:cover;background-position:center;border:1px solid var(--line-soft);}
.gallery .g.tall{grid-row:span 2;}
.gallery .g.wide{grid-column:span 2;}

/* ── 안내 표 ──────────────────────────── */
table.info{width:100%;border-collapse:collapse;}
table.info th,table.info td{padding:16px 18px;border-bottom:1px solid var(--line-soft);
  text-align:left;vertical-align:top;font-size:.97rem;word-break:keep-all;}
table.info th{width:180px;font-family:var(--serif);color:var(--gold-bright);font-weight:700;
  white-space:nowrap;}
table.info td{color:var(--body);}
table.info td small{color:var(--muted);}

/* ── FAQ ─────────────────────────────── */
.faq details{border-bottom:1px solid var(--line-soft);}
.faq summary{cursor:pointer;padding:20px 8px;font-weight:600;color:var(--cream);
  font-size:1rem;list-style:none;position:relative;padding-right:36px;word-break:keep-all;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:1.3rem;font-weight:400;}
.faq details[open] summary::after{content:"–";}
.faq .a{padding:0 8px 22px;color:var(--muted);font-size:.95rem;word-break:keep-all;}

/* ── 공지 배너 ─────────────────────────── */
.notice{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:20px 26px;font-size:.93rem;color:var(--body);word-break:keep-all;margin-top:40px;}
.notice b{color:var(--gold-bright);}

/* ── 페이지 헤더(서브페이지) ─────────────── */
.page-hero{position:relative;padding:170px 0 80px;background:var(--bg-deep);overflow:hidden;}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;}
.page-hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(8,17,32,.55),rgba(8,17,32,.94));}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero h1{font-family:var(--serif);font-weight:700;color:var(--cream);
  font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:14px;}
.page-hero p{color:var(--body);max-width:40em;word-break:keep-all;}

/* ── CTA 밴드 ─────────────────────────── */
.cta-band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:64px 0;text-align:center;}
.cta-band h2{font-family:var(--serif);color:var(--cream);font-size:1.6rem;margin-bottom:12px;word-break:keep-all;}
.cta-band p{color:var(--muted);margin-bottom:28px;}

/* ── 푸터 ─────────────────────────────── */
footer.site{position:relative;background:var(--bg-deep);padding:90px 0 40px;overflow:hidden;}
footer.site .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;}
footer.site .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(8,17,32,.55),rgba(8,17,32,.97) 70%);}
footer.site .wrap{position:relative;z-index:2;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px;}
.foot-grid h3{font-family:var(--serif);color:var(--cream);font-size:1.35rem;letter-spacing:.3em;margin-bottom:14px;}
.foot-grid .slogan{font-size:.95rem;color:var(--body);word-break:keep-all;max-width:22em;}
.foot-grid h4{font-size:.78rem;font-weight:700;letter-spacing:.22em;color:var(--gold);margin-bottom:14px;}
.foot-grid li{font-size:.93rem;color:var(--body);margin-bottom:8px;word-break:keep-all;}
.foot-grid a:hover{color:var(--gold-bright);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-top:26px;font-size:.8rem;color:var(--muted);}
.foot-bottom .tag{letter-spacing:.3em;}

/* ── 반응형 ───────────────────────────── */
@media(max-width:960px){
  .cards3{grid-template-columns:1fr;}
  .quote-grid,.prog-grid{grid-template-columns:1fr;}
  .quote-grid .photo,.prog-grid .photo{min-height:300px;}
  .rental-grid{grid-template-columns:1fr;}
  .rental-grid .photo{position:static;}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
  #menu-toggle{display:block;}
  .menu{display:none;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;gap:0;background:rgba(8,17,32,.98);
    border-bottom:1px solid var(--line-soft);padding:10px 0 16px;}
  .menu.open{display:flex;}
  .menu a{padding:13px 6%;border-bottom:0;font-size:1.02rem;}
  .nav .cta{display:none;}
  .hero .wrap{padding:120px 0 80px;}
  .quote-grid .text,.prog-grid .body{padding:44px 28px;}
  .def-list li{grid-template-columns:1fr;gap:6px;}
  table.info th{width:110px;}
  section.block{padding:64px 0;}
}

/* ── 소식(블로그) ── */
.news-wrap{max-width:860px;margin:0 auto;padding:90px 22px}
.news-item{padding:34px 0;border-bottom:1px solid rgba(0,0,0,.09)}
.news-item:first-child{padding-top:0}
.news-item h2{font-size:26px;line-height:1.4;margin:0 0 10px}
.news-item h2 a{color:inherit;text-decoration:none}
.news-item h2 a:hover{opacity:.7}
.news-meta{font-size:13px;letter-spacing:.06em;color:#8a8178;margin-bottom:12px}
.news-item p{margin:0;color:#5d574f;line-height:1.85}
.news-single{max-width:760px;margin:0 auto;padding:90px 22px}
.news-single h1{font-size:34px;line-height:1.35;margin:0 0 14px}
.news-single .entry{margin-top:34px;line-height:1.95;color:#3f3a34}
.news-single .entry p{margin:0 0 20px}
.news-single .entry img{max-width:100%;height:auto;border-radius:2px}
.news-single .entry h2{font-size:24px;margin:38px 0 14px}
.news-single .entry h3{font-size:20px;margin:30px 0 12px}
.news-nav{margin-top:56px;display:flex;justify-content:space-between;gap:16px;font-size:14px}
.page-head{padding:120px 22px 0;text-align:center}
.page-head .kicker{font-size:12px;letter-spacing:.22em;color:#a08a5b}
.page-head h1{font-size:40px;margin:12px 0 0}
