/* 청람사 CHEONGNAM — 레퍼런스 n37c(feel.kiyomizudera.or.jp) 1:1 벤치마킹
   유지: 사진 없는 아주 밝은 첫 화면과 넓은 여백 · 화면 아래쪽 2단(좌 한글 / 우 영문) · 얇은 세리프
         · 자간 넓은 대문자 워드마크 · 작은 밑줄 링크 1개 · 뒤이어 나오는 전폭 시네마틱 따뜻한 사진 · 아주 조용한 모션
   변경: 상징색 금빛(35°) → 주홍(350°) · 세로로 쌓은 워드마크 → 가로 2줄 + 가는 선
         · 우측 점 인덱스 → 가는 눈금선 · 같은 크기 카드 줄 → 크기가 다른 칸 */

:root{
  --bg:#fdfcfa;
  --paper:#ffffff;
  --band:#f4f0e9;
  --ink:#1f1b19;
  --muted:#6f6862;
  --line:#e3ddd3;
  --red:#8e2436;        /* 강조 — 주홍 */
  --red-d:#611523;
  --red-l:#bf6a76;
  --red-f:#f6eaeb;
  --dark:#221c1a;
  --en:"Vesper Libre","Pretendard Variable",serif;
  --ko:"Noto Serif KR","Pretendard Variable",serif;
  --bd:"Pretendard Variable",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--bd);font-size:15px;line-height:1.85;letter-spacing:-.012em;word-break:keep-all}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:min(1200px,calc(100% - 56px));margin:0 auto}
.pop{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.pop.go{opacity:1;transform:none}
.reduce .pop{opacity:1;transform:none;transition:none}

/* ───── 헤더 ───── */
.hd{position:relative;z-index:40;background:var(--bg)}
.hd-in{display:flex;align-items:center;gap:40px;min-height:88px}
.brand{display:flex;align-items:center;gap:14px;min-height:48px;margin-right:auto}
.brand strong{font-family:var(--en);font-size:17px;font-weight:400;letter-spacing:.42em;color:var(--ink)}
.brand .rule{display:block;width:4px;height:4px;border-radius:50%;background:var(--red)}
.brand em{font-family:var(--ko);font-style:normal;font-size:13px;letter-spacing:.3em;color:var(--muted)}
.hd-nav{display:flex;gap:38px}
.hd-nav a{display:flex;align-items:center;justify-content:center;min-height:48px;font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--ink)}
.hd-nav a:hover,.hd-nav a[aria-current]{color:var(--red)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:transparent;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:18px;height:1px;background:var(--ink)}

.mobile-nav{position:fixed;inset:var(--mm-top,88px) 0 0;background:var(--bg);z-index:120;transform:translateX(100%);transition:transform .36s ease;overflow:auto;visibility:hidden}
.mobile-nav.open{transform:none;visibility:visible}
.mobile-nav ul{padding:12px 28px}
.mobile-nav li{border-bottom:1px solid var(--line)}
.mobile-nav li a{display:flex;align-items:center;padding:20px 2px;font-family:var(--en);font-size:18px;letter-spacing:.3em}
.mnav-foot{padding:26px}
.mnav-foot .fill{display:flex;align-items:center;justify-content:center;min-height:52px;background:var(--red);color:#fff;font-size:14px}
.mnav-foot p{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}
body.mm-open{overflow:hidden}

/* ───── 히어로 — 사진 없이 흰 여백(레퍼런스 충실) ───── */
.hero{position:relative;min-height:min(80vh,700px);display:flex;align-items:flex-end;padding-bottom:clamp(44px,6vw,86px);background:var(--bg)}
.hero-in{width:100%;display:grid;grid-template-columns:.9fr 1.25fr;gap:clamp(30px,5vw,88px);align-items:end}
.hero-ko{font-family:var(--ko);font-size:24px;letter-spacing:.24em;line-height:2.05;color:var(--ink)}
.hero-ko small{display:block;margin-top:24px;font-size:15px;letter-spacing:.16em;line-height:2.25;color:var(--muted)}
.hero-en{font-family:var(--en);font-size:clamp(30px,3.5vw,46px);line-height:1.24;color:var(--ink)}
.hero-note{margin-top:26px;max-width:32em;font-family:var(--en);font-size:15px;line-height:2;color:var(--muted)}
.hero-enter{display:inline-flex;align-items:center;min-height:44px;margin-top:30px;padding:0 2px 4px;border-bottom:1px solid var(--red);color:var(--red-d);font-family:var(--en);font-size:14px;letter-spacing:.2em}
.hero-enter:hover{color:var(--ink);border-color:var(--ink)}
.hero-mark{position:absolute;right:clamp(26px,4vw,56px);top:clamp(10px,3vw,40px);padding-right:.5em;font-family:var(--en);font-size:12px;letter-spacing:.5em;color:var(--red-l)}

/* ───── 전폭 시네마틱 사진 구획 ───── */
.cine{position:relative;min-height:min(84vh,760px);display:flex;align-items:center;overflow:hidden;background:#241c18}
.cine>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,20,16,.72),rgba(28,20,16,.12) 62%)}
.cine-in{position:relative;color:#fff;max-width:640px}
.cine-en{font-family:var(--en);font-size:clamp(26px,3.4vw,44px);letter-spacing:.24em;line-height:1.45}
.cine-ko{margin-top:22px;font-family:var(--ko);font-size:20px;color:#f2ece4;line-height:1.9}
.cine-p{margin-top:16px;font-size:14.5px;color:#ddd4cb;line-height:2;max-width:30em}
.cine-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:26px;font-family:var(--en);font-size:13px;letter-spacing:.24em;color:#fff}
.cine-link::after{content:"";display:block;width:56px;height:1px;background:rgba(255,255,255,.75)}
.tick{position:absolute;right:clamp(16px,3vw,44px);top:50%;transform:translateY(-50%);display:grid;gap:8px}
.tick i{display:block;width:26px;height:1px;background:rgba(255,255,255,.45)}
.tick i.on{background:#fff;width:40px}

/* ───── 일반 구획 ───── */
.sec{padding:clamp(66px,8vw,120px) 0}
.sec.alt{background:var(--band)}
.h-en{font-family:var(--en);font-size:clamp(24px,3vw,38px);letter-spacing:.2em;line-height:1.4}
.h-ko{margin-top:14px;font-family:var(--ko);font-size:17px;letter-spacing:.06em;color:var(--muted)}

/* 전각 — 크기가 다른 세 칸 */
.halls{display:grid;grid-template-columns:1.5fr .95fr 1.2fr;gap:22px;margin-top:clamp(32px,4vw,56px)}
.halls article{background:var(--paper)}
.halls img{width:100%;object-fit:cover}
.halls article:nth-child(1) img{height:clamp(250px,27vw,340px)}
.halls article:nth-child(2) img{height:clamp(195px,21vw,255px)}
.halls article:nth-child(3) img{height:clamp(220px,24vw,295px)}
.halls .body{padding:22px 24px 28px}
.halls em{font-family:var(--en);font-style:normal;font-size:12px;letter-spacing:.24em;color:var(--red)}
.halls h3{margin:10px 0 8px;font-family:var(--ko);font-size:20px}
.halls p{font-size:14px;color:var(--muted)}

/* 시간표 */
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,4vw,66px);align-items:start}
.tt{margin-top:32px;border-top:1px solid var(--red)}
.tt .row{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:baseline;padding:18px 2px;border-bottom:1px solid var(--line)}
.tt .row b{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--red);font-weight:400}
.tt .row span{font-family:var(--ko);font-size:16.5px}
.tt .row i{font-style:normal;font-size:14.5px;color:var(--muted)}
.tt .row.hi{background:var(--red-f)}
.side .lead{font-family:var(--ko);font-size:21px;line-height:1.8}
.side p{margin-top:14px;font-size:14.5px;color:var(--muted);line-height:2.05}
.olink{display:inline-flex;align-items:center;min-height:46px;margin-top:24px;padding:0 2px 4px;border-bottom:1px solid var(--red);color:var(--red-d);font-family:var(--en);font-size:13.5px;letter-spacing:.16em}
.olink:hover{color:var(--ink);border-color:var(--ink)}

/* 안쪽으로 들인 판 */
.panel{margin:0 clamp(0px,3vw,48px);background:var(--dark);color:#f2ebe4;padding:clamp(42px,5vw,74px) clamp(28px,4vw,64px)}
.panel .h-en{color:#e6c9cd}
.panel .h-ko{color:#b6ada6}
.plist{margin-top:32px;display:grid;gap:1px;background:rgba(255,255,255,.14)}
.plist li{background:var(--dark);display:grid;grid-template-columns:170px 1fr;gap:20px;padding:22px 4px}
.plist time{font-family:var(--en);font-size:14px;letter-spacing:.14em;color:#e6c9cd}
.plist h3{font-family:var(--ko);font-size:18px;margin-bottom:6px}
.plist p{font-size:14px;color:#cfc6bf}

/* 글/사진 반반 */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,4vw,66px);align-items:center}
.split img{width:100%;height:clamp(300px,35vw,450px);object-fit:cover}
.split p{margin-top:16px;font-size:14.5px;color:var(--muted);line-height:2.05}
.split .q{margin-top:26px;font-family:var(--ko);font-size:20px;color:var(--red-d);letter-spacing:.04em}

/* 하위 페이지 */
.sub-hero{padding:clamp(52px,7vw,104px) 0 clamp(40px,5vw,70px);background:var(--bg);position:relative}
.sub-in .k{font-family:var(--en);font-size:12px;letter-spacing:.42em;color:var(--red)}
.sub-in h1{margin-top:14px;font-family:var(--en);font-size:clamp(30px,4.2vw,52px);letter-spacing:.14em}
.sub-in p{margin-top:14px;font-family:var(--ko);font-size:19px;letter-spacing:.08em;color:var(--muted)}
.prose{max-width:46em}
.prose p{margin-top:15px;font-size:14.5px;color:var(--muted);line-height:2.1}
.dl{margin-top:28px;border-top:1px solid var(--red)}
.dl>div{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:18px 2px;border-bottom:1px solid var(--line)}
.dl dt{font-family:var(--ko);font-size:15.5px;color:var(--red-d)}
.dl dd{margin:0;font-size:14.5px;color:var(--muted)}
.cardbox{background:var(--paper);border:1px solid var(--line);padding:30px 28px}
.cardbox h2{font-family:var(--ko);font-size:20px;margin-bottom:14px}
.cardbox .line{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.cardbox .line:last-child{border-bottom:0}
.cardbox p{font-size:14px;color:var(--muted)}
.wide-img{width:100%;height:clamp(240px,30vw,420px);object-fit:cover}
.mini{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center}
.mini img{width:100%;height:clamp(200px,24vw,320px);object-fit:cover}

/* 푸터 */
.ft{background:var(--dark);color:#eae2da;padding:clamp(54px,6vw,88px) 0 30px}
.ft-in{display:grid;grid-template-columns:1fr 2fr;gap:clamp(26px,4vw,60px)}
.ft-brand strong{display:block;font-family:var(--en);font-size:19px;font-weight:400;letter-spacing:.42em;color:#e6c9cd}
.ft-brand em{display:block;margin-top:14px;font-family:var(--ko);font-style:normal;font-size:15px;letter-spacing:.24em;color:#cfc6bf}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ft-col h2{font-family:var(--en);font-size:13px;letter-spacing:.28em;color:#e6c9cd;margin-bottom:12px}
.ft-col a{display:flex;align-items:center;min-height:44px;font-size:13.5px;color:#d4ccc4}
.ft-col a:hover{color:#fff}
.ft-legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.ft-legal p{font-size:12.5px;color:#a49b94;line-height:2}
.ft-legal i{font-style:normal;margin:0 9px;opacity:.5}
.ft-copy{margin-top:8px !important;color:#88807a !important}

.mbar{display:none}

@media (max-width:1024px){
  .wrap{width:calc(100% - 36px)}
  .hd-nav{display:none}
  .burger{display:flex}
  .hd-in{min-height:68px}
  .hero-in{grid-template-columns:1fr;gap:34px}
  .halls{grid-template-columns:1fr 1fr}
  .two,.split,.mini{grid-template-columns:1fr}
  .tick{display:none}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 30px)}
  .brand strong{font-size:14px;letter-spacing:.3em}
  .brand em{font-size:12px;letter-spacing:.2em}
  .hero{min-height:74vh}
  .hero-en{font-size:clamp(28px,8.5vw,38px)}
  .hero-mark{display:none}
  .cine{min-height:70vh}
  .cine-en{font-size:clamp(21px,6.4vw,28px);letter-spacing:.16em}
  .halls{grid-template-columns:1fr}
  .tt .row{grid-template-columns:110px 1fr;row-gap:4px}
  .tt .row i{grid-column:2}
  .plist li{grid-template-columns:1fr;gap:6px}
  .dl>div{grid-template-columns:1fr;gap:4px}
  .ft{padding-bottom:96px}
  .ft-in{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:1fr 1fr}
  .mbar{display:grid;grid-template-columns:1.2fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--dark)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:56px;color:#f0e9e2;font-size:13px}
  .mbar a svg{width:17px;height:17px}
  .mbar .tel{background:var(--red);color:#fff}
}