/* KoFest 웹 — 색과 글꼴은 앱과 같다.
   이 파일을 고치면 새로고침만으로 반영된다. */
:root{
  --jaju:#6B1E32; --deep:#3E1420; --hwangto:#A8783A;
  --paper:#FCFAF9; --ink:#231C1E; --muted:#8A7C7E; --line:#EAE3E2;
  --m:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
     font-family:Pretendard,-apple-system,system-ui,sans-serif;
     line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--m)}

/* 공지 */
.notice-bar{background:#F3EAD9;color:#7A5A14;font-size:13px;text-align:center;padding:9px 20px}

/* 상단 */
.nav{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:30}
.nav-in{max-width:1080px;margin:0 auto;padding:16px var(--m);display:flex;align-items:center;gap:28px}
.logo{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;letter-spacing:.1em;color:var(--jaju)}
.menu{display:flex;gap:22px;flex:1}
.menu a{font-size:14px;font-weight:500;padding-bottom:2px}
.menu a.on{color:var(--jaju);font-weight:700;border-bottom:2px solid var(--jaju)}
.search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);
        border-radius:20px;padding:6px 14px;background:#fff}
.search svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:0 0 auto}
.search input{border:0;outline:0;font-family:inherit;font-size:12.5px;width:120px;background:none}
.seg{display:flex;border:1px solid var(--jaju);border-radius:20px;overflow:hidden}
.seg a{font-size:11.5px;font-weight:600;padding:5px 11px;color:var(--jaju)}
.seg a.on{background:var(--jaju);color:#fff}

/* 배너 슬라이더
   이미지 하나로 다 보여준다. 옆에 글자를 두지 않는다.
   문구가 이미지 안에 있으므로 절대 자르지 않는다 — height:auto */
.hero{background:linear-gradient(160deg,#F6EFEF 0%,#F1E7E8 100%);padding:26px 0 20px}

/* 배너는 아래 콘텐츠와 같은 폭을 쓴다.
   다만 원본이 1.35:1 이라 폭을 다 쓰면 높이가 740px 이 되어 화면을 다 먹는다.
   그래서 높이를 잘라 얹는다. 위아래가 잘리므로 이미지 만들 때
   글자를 세로 가운데에 두고 위아래에 여백을 남겨야 한다.

   ★ 높이를 바꾸려면 아래 --banner-h 하나만 고치면 된다. */
.slides{--banner-h:440px;max-width:1080px;margin:0 auto;padding:0 var(--m)}
.slide{display:none}
.slide.on{display:block}
.slide img{width:100%;height:var(--banner-h);object-fit:cover;object-position:center;
           border-radius:3px;
           box-shadow:0 1px 2px rgba(35,28,30,.10),0 10px 30px rgba(35,28,30,.12)}
.slide-nav{display:flex;align-items:center;justify-content:center;gap:16px;
           max-width:1080px;margin:16px auto 0;padding:0 var(--m)}
.dots{display:flex;gap:6px}
.dots i{width:26px;height:2px;background:rgba(107,30,50,.22);cursor:pointer}
.dots i.on{background:var(--jaju)}
.arrow{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:50%;
       display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.arrow svg{width:13px;height:13px;stroke:var(--ink);fill:none;stroke-width:1.8}

/* 매거진 */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.story-card .im{width:100%;aspect-ratio:16/10;border-radius:3px;overflow:hidden;
                background:var(--deep);margin-bottom:12px;position:relative}
.story-card .im img{width:100%;height:100%;object-fit:cover}
.story-card .im .blank{font-size:44px}
.story-card .pin{position:absolute;left:10px;top:10px;font-size:10.5px;font-weight:700;
                 color:#fff;background:rgba(62,20,32,.62);backdrop-filter:blur(6px);
                 padding:4px 9px;border-radius:20px}
.story-card h4{font-family:'Nanum Myeongjo',serif;font-size:17px;font-weight:700;
               line-height:1.42;margin-bottom:6px}
.story-card .ex{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:7px;
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story-card .dt{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--muted)}

/* 글 본문 */
.article{max-width:720px;margin:0 auto;padding-top:18px}
.article h1{font-family:'Nanum Myeongjo',serif;font-size:31px;font-weight:700;
            line-height:1.36;margin-bottom:12px}
.a-meta{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--muted);margin-bottom:22px}
.a-lead{font-size:16px;line-height:1.8;color:#4A3E40;padding-bottom:22px;
        border-bottom:1px solid var(--line);margin-bottom:26px}
.a-cover{margin-bottom:30px;border-radius:4px;overflow:hidden;background:#F4EFEF}
.a-cover img{width:100%;height:auto;display:block}
.a-body{font-size:15.5px;line-height:1.9;color:#332A2C}
.a-body h2{font-family:'Nanum Myeongjo',serif;font-size:21px;font-weight:700;
           margin:38px 0 12px;color:var(--ink)}
.a-body h3{font-family:'Nanum Myeongjo',serif;font-size:17px;font-weight:700;margin:28px 0 10px}
.a-body p{margin-bottom:18px}
.a-body ul,.a-body ol{margin:0 0 18px 20px}
.a-body li{margin-bottom:7px}
.a-body a{color:var(--jaju);border-bottom:1px solid rgba(107,30,50,.28)}
.a-body img{width:100%;height:auto;border-radius:3px;margin:8px 0 20px}
.a-body blockquote{border-left:2px solid var(--jaju);padding:2px 0 2px 16px;
                   margin:0 0 18px;color:var(--muted);font-size:14.5px}
.a-body hr{border:0;border-top:1px solid var(--line);margin:32px 0}

/* 본문 안 축제 카드 */
.embed{display:flex;gap:16px;align-items:center;border:1px solid var(--line);
       border-radius:4px;padding:14px;margin:8px 0 22px;background:#fff}
.embed:hover{border-color:var(--jaju)}
.embed .embed-im{flex:0 0 110px;height:78px;border-radius:3px;overflow:hidden;background:var(--deep)}
.embed .embed-im img{width:100%;height:100%;object-fit:cover}
.embed .embed-im .blank{font-size:28px}
.embed .embed-tx{flex:1;min-width:0}
.embed h4{font-size:16px;font-weight:600;margin-bottom:5px;line-height:1.35}
.embed .pl{font-size:12.5px;color:var(--muted);margin-bottom:5px}
.embed .wh{font-size:12.5px;color:var(--muted);display:flex;gap:9px;align-items:center}

/* 준비 중 */
.soon{text-align:center;padding:110px 20px 130px}
.soon-mark{width:58px;height:58px;margin:0 auto 26px;border:1px solid var(--line);
           border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff}
.soon-mark svg{width:24px;height:24px;stroke:var(--jaju);fill:none;stroke-width:1.5}
.soon h1{font-family:'Nanum Myeongjo',serif;font-size:26px;font-weight:700;margin-bottom:14px}
.soon p{font-size:14.5px;color:var(--muted);line-height:1.85;margin-bottom:28px}
.soon .btn{display:inline-block;width:auto;padding:12px 26px}

/* 섹션 */
.sec{padding:52px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.sec-head h3{font-family:'Nanum Myeongjo',serif;font-size:21px;font-weight:700}
.sec-head .sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--muted);margin-top:5px}
.more{font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card .card-im{width:100%;aspect-ratio:4/3;border-radius:3px;overflow:hidden;
               background:var(--deep);margin-bottom:11px;position:relative}
.card .card-im img{width:100%;height:100%;object-fit:cover}
.card h4{font-size:15px;font-weight:600;line-height:1.4;margin-bottom:5px}
.card .meta{font-size:12.5px;color:var(--muted);line-height:1.55}
.blank{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
       font-family:'Nanum Myeongjo',serif;font-size:38px;color:rgba(255,255,255,.2);
       background:repeating-linear-gradient(-38deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px),
                  linear-gradient(158deg,#5C1B2C 0%,#3E1420 100%)}
.mark{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:5px;
      font-size:10.5px;font-weight:600;color:#fff;background:rgba(62,20,32,.6);
      backdrop-filter:blur(6px);padding:4px 9px;border-radius:20px}
.mark i{width:4px;height:4px;border-radius:50%;background:#E3B15E}

.regions{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.reg{border:1px solid var(--line);background:#fff;border-radius:3px;
     padding:18px 0 16px;text-align:center}
.reg:hover{border-color:var(--jaju)}
.reg b{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
/* 건수가 주인공이다. 어디에 축제가 많은지 한눈에 보여야 한다 */
.reg span{display:block;font-family:'Cormorant Garamond',serif;font-size:26px;
          font-weight:600;color:var(--jaju);line-height:1}

.lang-note{border:1px solid var(--line);border-radius:4px;padding:20px;background:#F7F1F0;
           display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lang-note p{font-size:14px;color:var(--muted)}
.lang-note b{color:var(--ink)}
.lang-note a{font-size:13.5px;font-weight:600;padding:10px 18px;background:var(--jaju);color:#fff;border-radius:2px}

/* 목록 */
.page-head{display:flex;align-items:baseline;gap:12px;padding:32px 0 0}
.page-head h1{font-family:'Nanum Myeongjo',serif;font-size:26px;font-weight:700}
.page-head span{font-size:14px;color:var(--muted)}
.list-wrap{display:flex;gap:36px;padding-top:22px}
.side{flex:0 0 190px}
.side-sec{margin-bottom:26px}
.side h5{font-size:12px;font-weight:700;color:var(--jaju);padding-bottom:8px;
         border-bottom:1px solid var(--line);margin-bottom:8px}
.fl{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0}
.fl.on{color:var(--jaju);font-weight:700}
.fl span{font-family:'Cormorant Garamond',serif;font-size:12.5px;color:var(--muted)}
.list-main{flex:1;min-width:0}
.month-h{display:flex;align-items:baseline;gap:10px;padding:22px 0 8px}
.month-h b{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--jaju)}
.month-h span{font-size:12px;color:var(--muted)}
.row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.row .dt{flex:0 0 46px;text-align:center;padding-top:3px}
.row .dt b{display:block;font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:600;color:var(--jaju);line-height:1}
.row .dt span{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11.5px;color:var(--muted);margin-top:3px}
.row .im{flex:0 0 150px;height:100px;border-radius:3px;overflow:hidden;background:var(--deep)}
.row .im img{width:100%;height:100%;object-fit:cover}
.row .im .blank{font-size:30px}
.row .tx{flex:1;min-width:0}
.row .tx h4{font-size:17px;font-weight:600;margin-bottom:6px}
.row .tx .pl{font-size:13px;color:var(--muted);margin-bottom:6px}
.row .tx .wh{font-size:12.5px;color:var(--muted);display:flex;gap:9px;align-items:center}
.now{display:inline-flex;align-items:center;gap:5px;color:var(--hwangto);font-weight:600}
.now i{width:4px;height:4px;border-radius:50%;background:var(--hwangto)}

.pager{display:flex;gap:6px;justify-content:center;padding:34px 0}
.pager a,.pager span{font-family:'Cormorant Garamond',serif;font-size:15px;
  padding:7px 13px;border:1px solid var(--line);border-radius:2px;color:var(--muted)}
.pager a.on{background:var(--jaju);border-color:var(--jaju);color:#fff}

.empty{text-align:center;padding:70px 20px}
.empty .t{font-size:16px;font-weight:600;margin-bottom:8px}
.empty .s{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.btn{display:inline-block;text-align:center;font-family:inherit;font-size:13.5px;font-weight:600;
     padding:11px 20px;border-radius:2px;background:var(--jaju);color:#fff;border:0;cursor:pointer;width:100%;
     margin-bottom:8px}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}

/* 상세 */
.crumb{font-size:12.5px;color:var(--muted);padding-top:22px}
.d-top{display:flex;gap:36px;padding-top:16px;padding-bottom:50px}
.d-main{flex:1;min-width:0}
.d-side{flex:0 0 290px}
.d-main h1{font-family:'Nanum Myeongjo',serif;font-size:29px;font-weight:700;line-height:1.32;margin:12px 0 12px}
.d-meta{display:flex;gap:16px;font-size:14px;color:var(--muted);margin-bottom:24px;flex-wrap:wrap;align-items:center}
.d-meta b{color:var(--jaju);font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600}
.d-meta .soon{color:var(--hwangto);font-weight:600}
.d-meta .ended{color:#9A3232;font-weight:600}
/* 상세 대표 이미지 — 비율을 고정하지 않는다.
   축제 이미지는 세로 포스터와 가로 사진이 섞여 있어서
   16:9 로 잘라내면 포스터의 날짜와 장소가 날아간다.
   원본 비율 그대로 두고 높이만 제한한다. */
.d-hero{width:100%;margin-bottom:22px;display:flex;justify-content:center;
        background:#F4EFEF;border-radius:4px;overflow:hidden}
.d-hero img{width:auto;max-width:100%;height:auto;max-height:560px;
            object-fit:contain;display:block}
.d-main h3{font-family:'Nanum Myeongjo',serif;font-size:17px;font-weight:700;margin:32px 0 12px}
.d-txt{font-size:14px;line-height:1.85;color:#3F3436;white-space:pre-line}
.d-none{border:1px solid var(--line);background:#F7F1F0;border-radius:3px;padding:18px;
        font-size:13.5px;color:var(--muted);margin-top:12px}
.d-tbl{width:100%;border-collapse:collapse}
.d-tbl th{width:100px;text-align:left;font-size:13px;font-weight:500;color:var(--muted);
          padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.d-tbl td{font-size:13.5px;padding:11px 0;border-bottom:1px solid var(--line);line-height:1.65;white-space:pre-line}
.d-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.d-gal a{aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--deep);display:block}
.d-gal img{width:100%;height:100%;object-fit:cover}
.d-box{border:1px solid var(--line);border-radius:4px;padding:20px;background:#fff;margin-bottom:16px;
       position:sticky;top:90px}
.d-box + .d-box{position:static}
.d-box .k{font-size:12px;color:var(--muted);margin-bottom:4px}
.d-box .v{font-size:15px;font-weight:600;margin-bottom:14px}
.d-box .v.sm{font-size:13.5px;font-weight:500;line-height:1.55}
.near{display:block;padding:9px 0;border-bottom:1px solid var(--line)}
.near:last-child{border-bottom:0}
.near b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.near span{font-size:12px;color:var(--muted)}

/* 달력 */
.cal-top{display:flex;align-items:center;justify-content:center;gap:20px;padding:34px 0 22px}
.cal-top h1{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:var(--jaju)}
.cal-top h1 small{font-family:Pretendard;font-size:13px;font-weight:500;color:var(--muted);margin-left:10px}
.cal-top .arrow{text-decoration:none}
.cal-wd{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.cal-wd span{text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;
             font-size:12px;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding-bottom:50px}
.cal-d{min-height:104px;border:1px solid var(--line);border-radius:3px;padding:8px;background:#fff}
.cal-d.out{background:none;border-color:transparent}
.cal-d.today{border-color:var(--jaju)}
.cal-d > b{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:600;color:var(--muted)}
.cal-d.has > b{color:var(--ink)}
.cal-d.today > b{color:var(--jaju)}
.cal-list{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.cal-list a{font-size:11px;line-height:1.35;color:var(--jaju);
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-list a.on{color:var(--hwangto);font-weight:600}
.cal-list .more{font-size:10.5px;color:var(--muted)}

.local-note{font-size:12px;color:var(--muted);padding:24px 0 50px;line-height:1.7}

/* 푸터 */
.foot{margin-top:60px;border-top:1px solid var(--line);padding:32px 0 44px;background:#F7F2F1}
.foot-in{max-width:1080px;margin:0 auto;padding:0 var(--m);display:flex;gap:40px;flex-wrap:wrap}
.foot-in > div{flex:1;min-width:170px}
.foot h6{font-size:12px;font-weight:700;margin-bottom:10px}
.foot a{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.foot .cp{font-size:11.5px;color:var(--muted);line-height:1.7}

/* ── 모바일 ── */
@media (max-width: 900px){
  :root{--m:18px}
  /* 메뉴를 아랫줄로 내린다.
     flex:1 이 걸려 있으면 flex-basis:0 이 width:100% 를 이겨서
     줄바꿈이 안 되고 오른쪽에서 글자가 깨진다. flex 를 다시 지정한다. */
  .nav-in{gap:10px 14px;flex-wrap:wrap;padding:12px var(--m)}
  .logo{flex:0 0 auto}
  .menu{order:3;flex:0 0 100%;gap:20px;overflow-x:auto;
        padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .menu::-webkit-scrollbar{height:0}
  .menu a{flex:0 0 auto;white-space:nowrap}
  .search{flex:1 1 120px;min-width:0}
  .search input{width:100%;min-width:0}
  .seg{flex:0 0 auto}
  .hero{padding:14px 0 16px}
  .slides{padding:0 var(--m)}
  /* 좁은 화면에서는 자르지 않는다. 폭이 좁아 높이도 알아서 낮아진다 */
  .slide img{height:auto}
  .soon{padding:70px 16px 90px}
  .soon h1{font-size:21px}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .regions{grid-template-columns:repeat(3,1fr)}
  .story-grid{grid-template-columns:1fr;gap:22px}
  .article{padding-top:8px}
  .article h1{font-size:23px}
  .a-lead{font-size:14.5px}
  .a-body{font-size:15px;line-height:1.85}
  .a-body h2{font-size:19px;margin:30px 0 10px}
  .embed{gap:12px;padding:12px}
  .embed .embed-im{flex:0 0 86px;height:62px}
  .embed h4{font-size:14.5px}
  .reg{padding:14px 0 12px}
  .reg span{font-size:22px}
  /* 목록도 같은 이유로 flex 를 끈다 */
  .list-wrap{display:block;padding-top:14px}
  .side{width:100%;flex:none;display:flex;gap:20px;overflow-x:auto;
        padding-bottom:10px;margin-bottom:6px}
  .side::-webkit-scrollbar{height:0}
  .side-sec{margin-bottom:0;flex:0 0 auto;min-width:150px}
  .list-main{width:100%;flex:none}
  .row .im{flex:0 0 100px;height:74px}
  .row .tx h4{font-size:15.5px}
  /* 상세 — flex 를 아예 끈다.
     세로로 쌓는 데 flex 가 필요 없고, 켜두면 부작용이 생긴다.
     .d-main{flex:1} 은 세로 방향에서 flex-basis:0 이 '높이'에 걸리고
     .d-side{flex:0 0 290px} 는 높이 290px 로 고정된다.
     둘 다 의도한 적 없는 동작이라 빈 공간이 생긴다. */
  .d-top{display:block;padding-top:8px;padding-bottom:36px}
  .d-main{width:100%;flex:none;min-width:0}
  .d-side{width:100%;flex:none;margin-top:26px}
  .d-box{position:static}
  .crumb{padding-top:16px}
  .d-main h1{font-size:23px;margin:10px 0 10px}
  /* 날짜·지역·상태를 한 줄에 흩뿌리지 않는다 */
  .d-meta{gap:6px 12px;font-size:13.5px;margin-bottom:18px}
  .d-meta b{font-size:15px}
  .d-hero{margin-bottom:18px}
  .d-hero img{max-height:420px}
  .d-main h3{margin:26px 0 10px}
  .d-gal{grid-template-columns:repeat(3,1fr)}
  .cal-grid{gap:3px}
  .cal-d{min-height:74px;padding:5px}
  .cal-list a{font-size:9.5px}
  .foot-in{gap:24px}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .regions{grid-template-columns:repeat(2,1fr)}
  .cal-list{display:none}
  .cal-d{min-height:44px;text-align:center}
  .cal-d.has{background:#F6EFF0}
}