@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
/* 라틴 제목용. 한글은 Pretendard 가 맡고, 영문 큰 글자만 이 글꼴이 받는다 -
   브랜드 그래픽(HANDMADE FESTA 2027)의 기하학적인 글자 모양이 이것이다. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap");

/* ============================================================================
   HANDMADE FESTA 2027 브랜드 색
   ---------------------------------------------------------------------------
   브랜드 그래픽에서 뽑은 색은 딱 둘이다.
       #231F20  먹색 - 완전한 검정이 아니라 붉은 기가 도는 검정이다
       #FAD8E7  연분홍
   여기에 흰색을 더해 셋으로 사이트 전체를 만든다.

   읽히는 규칙(이것만 지키면 대비가 무너지지 않는다)
       연분홍은 <글자색으로 쓰지 않는다>. 흰 바탕 위 연분홍 글자는 1.3:1 이라 안 보인다.
       연분홍은 <어두운 글자를 올려 두는 바탕>으로만 쓴다 - 그러면 11.7:1 이다.
       먹색 바탕에는 흰 글자(15.9:1) 또는 연분홍 글자(11.7:1)를 올린다.
       흰 바탕에는 먹색 글자(15.9:1)를 올린다.
   ========================================================================== */
:root {
    /* 브랜드 원색. 아래 --color-* 는 이 셋에서 나온다. */
    --brand-ink: #231f20;
    --brand-blush: #fad8e7;
    /* 연분홍을 조금 눌러 테두리·구분선에 쓰는 값. 글자색으로는 쓰지 않는다. */
    --brand-blush-deep: #f0b9d1;
    /* 흰색에 분홍 기를 아주 살짝 섞은 바탕. 구역을 나눌 때 회색 대신 쓴다. */
    --brand-cream: #fbf6f8;

    --color-primary: #231f20;
    --color-primary-dark: #000000;
    --color-accent: #fad8e7;
    --color-highlight: #fad8e7;
    --color-text: #231f20;
    /* 먹색에서 뽑은 회색이라 본문과 같은 계열로 보인다(순회색은 따로 논다). 흰 바탕에서 5.6:1. */
    --color-text-muted: #6f6467;
    --color-border: #e7e0e3;
    --color-bg: #ffffff;
    --color-bg-soft: #fbf6f8;
    /* 그림자는 먹색을 흐리게 깐다 - 검정 그림자는 회색 때가 낀 것처럼 보인다. */
    --shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.05);
    --shadow-md: 0 10px 28px rgba(35, 31, 32, 0.09);
    --shadow-lg: 0 24px 56px rgba(35, 31, 32, 0.16);
    --radius-md: 12px;
    --radius-lg: 20px;
    --hf-offcanvas-width: min(300px, 84vw);
    /* 본문 글꼴. 전시회 테마에서 덮어쓸 수 있게 이름을 준 것뿐이고, 기본값은 예전과 같다. */
    --font-body: "Pretendard", "Segoe UI", "Malgun Gothic", -apple-system, sans-serif;
    /* 라틴 제목. 한글이 섞이면 Pretendard 로 자연스럽게 넘어간다. */
    --font-display: "Poppins", "Pretendard", "Segoe UI", -apple-system, sans-serif;
    /* 새 위젯이 쓰는 이름. 브랜드색의 주인은 전시회 등록 화면의 "테마 컬러" 하나뿐이라
       (fragments/layout.html 이 --color-primary 로 내보낸다) 여기서 그걸 그대로 이어받는다.
       같은 값을 두 곳에서 정하지 않기 위해서다. */
    --hm-accent: var(--color-primary);
    /* 위젯을 담는 칸의 여백·간격. 원본 카페쇼는 이런 여백이 없어 훨씬 촘촘하다 -
       전시회 테마에서 줄일 수 있게 이름을 준 것뿐이고, 기본값은 예전과 같다. */
    --grid-pad-y: 80px;
    --grid-pad-x: 24px;
    --grid-row-gap: 24px;
    --grid-col-gap: 40px;
    --grid-unit: 55px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body, "Pretendard", "Segoe UI", "Malgun Gothic", -apple-system, sans-serif);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Header */
.site-header {
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.site-logo img {
    max-height: 56px;
    width: auto;
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-nav__member {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.site-nav__lang {
    position: relative;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}

.lang-toggle:hover {
    border-color: var(--color-accent);
}

.lang-toggle__menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 120px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    z-index: 10;
}

.site-nav__lang.is-open .lang-toggle__menu,
.hf-lang.is-open .lang-toggle__menu {
    display: block;
}

.lang-toggle__menu a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--color-text);
}

.lang-toggle__menu a:hover {
    background-color: var(--color-bg-soft);
    color: var(--color-primary);
}

/* Mega nav */
.mega-nav {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.mega-nav__list {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    list-style: none;
}

.mega-nav__item {
    position: relative;
    flex: 1;
    text-align: center;
}

.mega-nav__label {
    position: relative;
    display: block;
    padding: 14px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: default;
    transition: color 0.2s ease;
}

.mega-nav__label::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transform: translateX(-50%);
    transition: width 0.2s ease;
}

.mega-nav__item:hover .mega-nav__label {
    color: var(--color-primary);
}

.mega-nav__item:hover .mega-nav__label::after {
    width: 28px;
}

.mega-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    z-index: 10;
    list-style: none;
}

.mega-nav__item:hover .mega-nav__sub {
    display: block;
}

.mega-nav__sub li a {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: left;
}

.mega-nav__sub li a:hover {
    background-color: var(--color-bg-soft);
    color: var(--color-primary);
}

/* Coming soon */
.wip-wrap {
    max-width: 600px;
    margin: 110px auto;
    padding: 0 24px;
    text-align: center;
}

.wip-icon {
    font-size: 48px;
    margin: 0 0 8px;
}

.wip-wrap .btn {
    margin-top: 12px;
}

@media (max-width: 768px) {
    .mega-nav__list {
        flex-wrap: wrap;
    }

    .mega-nav__item {
        flex: 1 1 50%;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--primary {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(35, 31, 32, 0.22);
}

.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(35, 31, 32, 0.3);
}

.btn--ghost {
    border-color: var(--color-border);
    color: var(--color-text);
    background-color: var(--color-bg);
}

.btn--ghost:hover {
    border-color: var(--brand-ink);
    color: var(--color-primary);
    background-color: var(--brand-blush);
}

.btn--block {
    width: 100%;
    text-align: center;
}

/* 메인페이지 전용 고정 배경(이미지/동영상) - 위젯이 아니라 전시회 전체 설정(mainStyle). 뷰포트
   기준으로 항상 고정되어야 하므로 <body> 맨 앞(어떤 transform 조상도 없는 위치)에 렌더링된다 -
   position:fixed는 transform이 걸린 조상이 있으면 그 조상 기준으로 바뀌어버리는 CSS 특성이 있다. */
.page-bg-media {
    width: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}

/* FULL - 뷰포트에 항상 고정으로 꽉 채운다(스크롤해도 계속 화면을 덮음). */
.page-bg-media--full {
    position: fixed;
    inset: 0;
    height: 100%;
}

/* TOP - 문서 맨 위에만 화면 높이(100vh)만큼 놓인다. position:fixed가 아니라 absolute라서
   문서 좌표 기준으로 고정되고, 스크롤하면 나머지 콘텐츠와 함께 지나가며 사라진다. */
.page-bg-media--top {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
}

/* 스크롤 스냅(mainStyle.scrollSnap) - 스크롤할 때 한 화면씩(pageHeight, 기본 100vh) 딱딱 멈춰서
   넘어가게 한다(마덱스 스타일). scroll-snap-type은 실제로 스크롤되는 요소(문서 루트, html)에
   줘야 동작한다 - <main>은 자체 스크롤(overflow)이 없는 그냥 블록이라 거기 줘봐야 아무 효과가
   없다(스크롤 스냅이 전혀 안 되던 원인).

   처음엔 섹션 행(.row-grid/.free-grid) 하나하나를 스냅 지점 겸 최소 높이 강제 대상으로 삼았는데,
   실제 콘텐츠(카드/게시글목록/영상 등)를 자유배치로 쌓다 보면 한 행의 실제 높이가 pageHeight
   보다 커지는 경우가 흔했다 - 그 행 안에서는 스냅 지점이 시작(위) 하나뿐이라 스크롤이 그 행의
   중간까지밖에 못 내려가고, 더 내리려 하면 갈 곳(다음 스냅 지점)이 없어 mandatory 스냅이 도로
   그 행 맨 위로 튕겨 올려버렸다("푸터까지 내렸는데 다시 튕겨 올라간다"던 버그의 진짜 원인 -
   실제로는 푸터가 아니라 그 앞의 마지막 행 안에 갇힌 것이었다). 그래서 행 경계가 아니라, JS
   (index.html의 setupScrollSnapMarkers)가 문서 전체를 pageHeight 간격으로 균등하게 잘라 보이지
   않는 스냅 지점(.snap-page-marker)을 필요한 만큼 만들어 박아준다 - 행이 페이지보다 크든 작든
   상관없이 항상 pageHeight 간격으로 정확히 멈춘다. */
html.scroll-snap-page {
    scroll-snap-type: y mandatory;
    /* 헤더가 겹침(overlap)+고정(sticky)이 같이 켜져 fixed로 뜬 상태면, 그 헤더 높이만큼
       scroll-padding-top을 줘서 각 페이지가 헤더 "밑에서" 시작하도록 스냅 지점을 밀어낸다 -
       안 그러면 맨 위 배너(1페이지, 겹침이 원래 의도된 자리)는 그대로 겹쳐 보이지만, 스크롤로
       넘어가는 2페이지부터는 고정 헤더가 매번 그 페이지 상단 내용을 가려서 "잘려 보이는"
       문제가 있었다. --fixed-header-height는 index.html의 JS(updateScrollSnapHeaderOffset)가
       실제 헤더 높이를 측정해서 채운다 - 헤더가 fixed가 아니면(겹침 안 켜짐 등) 0이라 아무
       영향이 없다. scrollY는 음수로 못 내려가므로 1페이지(문서 맨 위)는 이 패딩과 무관하게
       그대로 y=0에서 시작해 헤더가 원래대로 겹쳐 보인다(배너가 제일 위에 있을 때는 겹치는 게
       의도된 디자인이라는 요청 그대로). */
    scroll-padding-top: var(--fixed-header-height, 0px);
}

.snap-page-marker {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    scroll-snap-align: start;
    pointer-events: none;
    visibility: hidden;
}

/* Hero carousel - unlimited banner posts, one slide fully visible at a time */
.hero-carousel {
    position: relative;
    overflow: hidden;
}

.hero-carousel__track {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-slide {
    position: relative;
    overflow: hidden;
    flex: 0 0 100%;
    /* 관리자가 "메인페이지 구성"에서 배너 높이를 조절하면 --banner-height로 흘러 들어온다
       (.hero-carousel에 인라인으로 설정, fragments/section-content.html 참고) - 없으면 기존 기본값. */
    min-height: var(--banner-height, 440px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 110px 24px;
    text-align: center;
    background: radial-gradient(120% 140% at 82% 18%, rgba(250, 216, 231, 0.42), transparent 58%), radial-gradient(90% 120% at 12% 92%, rgba(250, 216, 231, 0.22), transparent 60%), var(--brand-ink);
}

/* IMAGE 타입 배너는 배경색을 background:none으로 명시해서 이미지와 겹치지 않게 하는데,
   이미지 로드가 실패했을 때만 이 대체 그라데이션을 다시 켜준다(인라인 style보다 우선해야
   해서 !important 필요). */
.hero-slide.hm-img-failed {
    background: radial-gradient(120% 140% at 82% 18%, rgba(250, 216, 231, 0.42), transparent 58%), radial-gradient(90% 120% at 12% 92%, rgba(250, 216, 231, 0.22), transparent 60%), var(--brand-ink) !important;
}

.hero-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* --bg-pos-y(0~100, 관리자에서 지정, 기본 50=중앙)는 인라인 style로 각 img에 내려온다 */
    object-position: 50% calc(var(--bg-pos-y, 50) * 1%);
    z-index: 0;
}

/* 이미지 맞춤 모드(ImageFit) - COVER는 위 기본값 그대로, 나머지 3개만 전용 클래스로 덮어쓴다.
   inset:0으로 잡혔던 4면을 전부 명시적으로 다시 지정해야 충돌 없이 정확히 적용된다. */
.hero-slide__bg--fit-width {
    top: calc(var(--bg-pos-y, 50) * 1%);
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    object-fit: unset;
    transform: translateY(calc(var(--bg-pos-y, 50) * -1%));
}

.hero-slide__bg--fit-height {
    top: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    width: auto;
    height: 100%;
    object-fit: unset;
    transform: translateX(-50%);
}

.hero-slide__bg--original {
    top: calc(var(--bg-pos-y, 50) * 1%);
    left: 50%;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    object-fit: none;
    transform: translate(-50%, calc(var(--bg-pos-y, 50) * -1%));
}

.hero-slide__overlay {
    position: absolute;
    inset: 0;
    /* 먹색으로 덮는다. 아래로 갈수록 짙어져 흰 글자와 버튼이 어디서나 읽힌다.
       예전에는 자주색(rgba(118,0,49,.75))이었는데, 브랜드 색이 먹색·연분홍 둘뿐이라
       그 자주색만 혼자 다른 색이 되어 있었다. */
    background: linear-gradient(180deg, rgba(35, 31, 32, 0.45), rgba(35, 31, 32, 0.82));
    z-index: 1;
    pointer-events: none;
}

/* 배경 전체를 덮는 클릭 영역 - 연결된 게시글로 이동. HTML 콘텐츠 레이어는 이 위에 있지만
   pointer-events:none이라 클릭이 이 링크로 그대로 전달된다(버튼 등 실제 클릭 요소만 예외). */
.hero-slide__bg-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide__content {
    position: relative;
    z-index: 2;
    max-width: 640px;
}

/* 관리자 드래그앤드랍 에디터가 만든 배너 HTML을 위한 캔버스. 에디터는 위치/크기를 %로 저장하지만
   글자크기/테두리두께/둥글기/그림자 등은 고정 px라서 화면폭이 달라져도 그대로였다(반응형 아님).
   그래서 이 박스를 기준 크기(1905×440, PC 기준)로 고정해두고 JS가 실제 배너 폭에 맞춰
   transform:scale()로 통째로 축소/확대한다 - 그러면 px 값들도 위치/크기와 함께 비례해서 같이 줄고 늘어난다.
   width/height/left/top/transform은 JS(scaleHeroCanvases)가 매긴다, 여기서는 기본 뼈대만. */
.hero-slide__html {
    position: absolute;
    z-index: 2;
    /* 컨테이너 자체는 클릭을 통과시켜 배경(hero-slide__bg-link)이 눌리게 하고,
       버튼처럼 실제 클릭 가능한 요소만 자기 자신의 href로 독립 동작하게 한다. */
    pointer-events: none;
}

.hero-slide__html a,
.hero-slide__html button {
    pointer-events: auto;
}

/* 관리자는 화면 크기(모바일/태블릿/일반/와이드/울트라와이드)마다 배치를 완전히 따로 저장한다.
   저장된 HTML에는 5개 그룹이 전부 들어있고(.bx-bp-group-*), 방문자의 실제 화면 폭에 맞는 그룹
   하나만 보이도록 여기서 감춘다. 구간 경계값은 관리자 미리보기의 5단계 프리셋(모바일 390 /
   태블릿 820 / 일반 1440 / 와이드 1920 / 울트라와이드 3440) 사이 경계와 반드시 같아야 한다 -
   한쪽만 바뀌면 관리자 미리보기와 실사이트 결과가 어긋난다. */
.bx-bp-group {
    position: absolute;
    inset: 0;
    display: none;
}
@media (max-width: 599px) {
    .bx-bp-group-mobile { display: block; }
}
@media (min-width: 600px) and (max-width: 1023px) {
    .bx-bp-group-tablet { display: block; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
    .bx-bp-group-regular { display: block; }
}
@media (min-width: 1600px) and (max-width: 2559px) {
    .bx-bp-group-wide { display: block; }
}
@media (min-width: 2560px) {
    .bx-bp-group-ultrawide { display: block; }
}

/* 관리자 HTML 캔버스에서 버튼/요소에 data-auth="logged-in" 또는 "logged-out"을 지정하면
   로그인 상태에 따라 자동으로 보이거나 숨겨진다(로그인 전용 버튼 / 로그아웃 전용 버튼 구분용). */
.hero-slide.is-logged-out [data-auth="logged-in"],
.hero-slide.is-logged-in [data-auth="logged-out"] {
    display: none !important;
}

.hero__eyebrow {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.hero-slide__content h1 {
    margin: 0 0 16px;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* 배경이 영상/이미지/밝은 그라데이션 등 무엇이든(관리자가 뭘 고르든) 흰 글자가 항상 읽히도록
   그림자를 확실히 준다 - 옅은 배경 위에서 날짜/부제 같은 얇은 글자가 묻혀 보이던 문제. */
.hero-slide__content p {
    margin: 0 0 30px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 17px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* 히어로 버튼 - 흰색 채움 대신 테두리만 있는(outline) 스타일(MADEX 참고) - 어두운 히어로
   배경/영상 위에서 채워진 흰 버튼보다 은은하게 어울린다. */
.hero-slide__content .btn--primary {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, .65);
    box-shadow: none;
    padding: 13px 30px;
    font-size: 15px;
    backdrop-filter: blur(2px);
}

.hero-slide__content .btn--primary:hover {
    background: rgba(255, 255, 255, .18);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Generic carousel controls - shared by hero + feature carousels */
.carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-primary-dark);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 5;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.carousel__arrow:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.08);
}

.carousel__arrow--prev {
    left: 16px;
}

.carousel__arrow--next {
    right: 16px;
}

.carousel__arrow[hidden] {
    display: none;
}

.carousel__dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}

.carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.carousel__dot.is-active {
    width: 22px;
    background: #ffffff;
}

/* Sections */
.section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 24px;
}

.text-block {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text);
    word-break: break-word;
}

.text-block table {
    border-collapse: collapse;
    max-width: 100%;
    margin: 12px 0;
}

.text-block td,
.text-block th {
    border: 1px solid var(--color-border);
    padding: 6px 10px;
}

.text-block img {
    max-width: 100%;
    height: auto;
}

.section h2 {
    position: relative;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 48px;
    padding-bottom: 16px;
    text-align: center;
    letter-spacing: -0.01em;
}

.section h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* Row grid — groups sections that share a RowNo side-by-side, splitting evenly by however
   many sections survive in that row (--row-cols, set inline per row by the template).
   The centered 1100px box that .section used to own by itself now lives here instead, so a
   1-column row stays pixel-equivalent to the old standalone .section layout. */
.row-grid {
    display: grid;
    grid-template-columns: repeat(var(--row-cols, 1), 1fr);
    column-gap: 40px;
    align-items: start;
    /* 관리자 "메인페이지 구성" 화면에서 폭(--main-content-width)을 지정하면 그 값을, 아니면
       기존 기본값(1100px)을 쓴다 - main 태그(index.html)에 인라인으로 흘려보낸 변수를 상속받는다. */
    max-width: var(--main-content-width, 1100px);
    margin: 0 auto;
    padding: 80px 24px;
}

.row-grid > .section {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* BANNER is designed edge-to-edge (hero-carousel is intentionally not max-width
   constrained) - a row containing one must not get the centered box, and the carousel
   spans every grid column defensively in case a row ever mixes it with other types. */
.row-grid:has(> .hero-carousel) {
    max-width: none;
    margin: 0;
    padding: 0;
}

.row-grid > .hero-carousel {
    grid-column: 1 / -1;
}

/* 직접 작성 페이지(CODE)의 본문. 위젯 페이지(.row-grid/.free-grid)와 <b>같은 박스</b>를 쓴다 -
   전에는 폭 제한이 없어 혼자만 화면 끝까지 퍼졌다. 전시회 설정(--main-content-width)도 같이 따른다.
   통째 문서(Standalone)는 응답 전체가 사무국 것이라 이 틀을 거치지 않으므로 영향이 없다. */
.page-code {
    max-width: var(--main-content-width, 1100px);
    margin: 0 auto;
    padding: 80px 24px;
}

@media (max-width: 640px) {
    .page-code { padding: 48px 16px; }
}

/* Free grid — 관리자 페이지 빌더에서 자유 배치(드래그/리사이즈)로 저장한 행. 12칸/55px 좌표계로
   각 섹션을 정확히 지정된 위치·크기에 놓는다(--gc/--gr, index.html에서 섹션별 인라인 스타일로 계산).
   높이는 minmax(55px, auto)로 "최소값"만 강제한다 — 실제 콘텐츠가 저장된 h보다 길어도(예: 카드가
   많은 카드메뉴) 절대 잘리지 않고 자연스럽게 늘어난다. */
.free-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(var(--grid-unit, 55px), auto);
    column-gap: var(--grid-col-gap, 40px);
    row-gap: var(--grid-row-gap, 24px);
    max-width: var(--main-content-width, 1100px);
    margin: 0 auto;
    /* 폴백이 예전 값이라 설정을 안 만들면 지금과 똑같다. */
    padding: var(--grid-pad-y, 80px) var(--grid-pad-x, 24px);
}

.free-grid__item {
    grid-column: var(--gc);
    grid-row: var(--gr);
    min-width: 0;
}

.free-grid__item > .section {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 게시글목록은 옆 카드메뉴가 실제 콘텐츠(이미지+텍스트)로 인해 아무리 키가 커져도, 자기가
   저장된 칸 수(h)만큼의 높이만 정확히 차지해야 한다(옆 섹션 높이에 맞춰 늘어나지 않음).
   grid-auto-rows:minmax(55px,auto)는 "같은 행을 공유하는 가장 큰 섹션" 기준으로 트랙 자체를
   늘리므로, 게시글목록 칸에 h값으로 계산한 고정 높이(--rh, index.html에서 내려줌)를 명시해
   늘어난 트랙 안에서도 정확히 그 칸 수만큼만 차지하고 넘치는 내용은 감춘다. 글자/여백도
   좁은 높이에 맞춰 축소한다. */
.free-grid__item:has(.post-list) {
    height: calc(var(--rh, 1) * var(--grid-unit, 55px) + (var(--rh, 1) - 1) * var(--grid-row-gap, 24px));
    overflow: hidden;
}

/* 쪽 넘김을 켜면 고정 높이가 쪽 번호까지 잘라 버린다 - 그때는 내용 높이를 따른다. */
.free-grid__item:has(.post-list):has(.sc-grid__pages) {
    height: auto;
    overflow: visible;
}

.free-grid__item:has(.post-list):has(.sc-grid__pages) > .section {
    height: auto;
    overflow: visible;
}

.free-grid__item:has(.post-list) > .section {
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 4px 2px;
}

.free-grid__item:has(.post-list) .post-list__head {
    margin: 0 0 6px;
    gap: 6px;
}

.free-grid__item:has(.post-list) .post-list__head h2 {
    font-size: 15px;
    font-weight: 700;
}

.free-grid__item:has(.post-list) .post-list__link {
    padding: 6px 2px;
    gap: 8px;
}

.free-grid__item:has(.post-list) .post-list__title {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.free-grid__item:has(.post-list) .post-list__date {
    font-size: 11px;
    flex-shrink: 0;
}

/* 배너(확장 배너)는 자유배치에서도 항상 폭 12칸(전체 행) 고정이라 다른 섹션과 한 행에 섞이지
   않는다 — 기존 .row-grid와 동일하게 화면 끝까지 번지는(edge-to-edge) 디자인을 유지한다. */
.free-grid:has(.hero-carousel) {
    max-width: none;
    margin: 0;
    padding: 0;
    /* 배너는 항상 이 줄에 혼자만 있다(자유배치 저장 시 다른 섹션과 절대 합쳐지지 않음 —
       sections.html의 groupByConnectedRows 참고). row-gap(24px)은 "서로 다른 섹션들 사이"의
       간격인데, 배너처럼 한 칸이 여러 행(row)에 걸쳐 있는 단일 아이템에도 span된 행 개수만큼
       누적 적용되어(예: 8행이면 7번, 168px) 관리자가 지정한 실제 높이(8행×55px=440px)보다
       배너가 훨씬 크게(608px) 렌더링되는 문제가 있었다. 이 줄은 배너 혼자뿐이라 행 사이
       간격이 필요 없으므로 0으로 없애 관리자 편집 화면의 높이 계산과 정확히 일치시킨다. */
    row-gap: 0;
}

.free-grid__item:has(> .hero-carousel) {
    grid-column: 1 / -1;
}

/* 배너(확장 배너) 바로 다음 줄은 일반 섹션 사이 간격(80px)을 그대로 쓰면 배너와 유독 크게
   떨어져 보인다 — 배너 자체는 이미 시각적으로 꽉 찬 블록이라 위쪽 여백이 필요 없기 때문.
   배너 바로 다음에 오는 줄만 위쪽 여백을 줄인다(그 줄의 아래쪽 여백은 그대로 유지). */
.row-grid:has(> .hero-carousel) + .row-grid,
.row-grid:has(> .hero-carousel) + .free-grid,
.free-grid:has(.hero-carousel) + .row-grid,
.free-grid:has(.hero-carousel) + .free-grid {
    padding-top: 32px;
}

/* 모바일에서는 자유배치 좌표를 전부 무시하고, 기존 .row-grid 모바일 처리와 동일하게
   저장 순서(DOM 순서) 그대로 세로 1단으로 쌓는다. */
@media (max-width: 768px) {
    .free-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        column-gap: 0;
    }

    .free-grid__item,
    .free-grid__item:has(> .hero-carousel) {
        grid-column: auto;
        grid-row: auto;
    }
}

/* 헤더/푸터 전체 바(bar) 수준 스타일 - 관리자 "헤더/푸터 구성" 상단 패널에서 저장한 배경/그림자/
   테두리를 적용한다. --hf-bg는 layout.html이 인라인으로 내려주는 실제 배경색(또는 기본값). */
.site-header--custom,
.site-footer--custom {
    background-color: var(--hf-bg, var(--color-bg));
}

/* .site-header 기본값은 항상 sticky(box-shadow 포함)지만, 커스텀 헤더는 관리자가 "고정" 설정을
   켰을 때만(.hf-bar--sticky) sticky여야 한다 - 그 전까지는 일반 문서 흐름을 따른다. */
.site-header--custom {
    position: static;
    top: auto;
    box-shadow: none;
}

.hf-bar--shadow {
    box-shadow: var(--shadow-md);
}

/* 고정(sticky) - 스크롤해도 항상 화면 상단에 붙어있는다. */
.hf-bar--sticky {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 겹쳐 배치(overlap) - 헤더를 문서 흐름에서 완전히 빼서 페이지 맨 위 콘텐츠(히어로 배너 등) 위에
   뜨게 한다. sticky와 달리 페이지 로드 시점부터 항상 겹쳐 있다 - 아래 콘텐츠가 헤더 높이만큼
   밀리지 않는다. 겹칠 상대가 있어야 의미가 있으므로 <main>이 자연히 그 자리를 채운다. */
.hf-bar--overlap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 90;
}

/* 겹쳐 배치 + 고정을 동시에 켜면(둘 다 흔한 조합 - 처음엔 히어로 위에 겹쳐 있다가 스크롤해도
   계속 화면 상단에 붙어있는 스타일) 두 규칙이 서로 다른 position 값(absolute vs sticky)을
   같은 element에 걸고 있어서 명시도(specificity)가 같은 두 클래스 규칙 중 나중에 선언된 쪽이
   그냥 이겨버려 - sticky를 켜도 조용히 무시되고 있었다(실제 발견된 버그). 두 클래스를 모두 가진
   경우만 걸리는 이 규칙(명시도가 더 높음)으로 fixed를 줘서 "흐름에서 빠짐(겹침)"과 "뷰포트에
   고정(스크롤해도 안 움직임)"을 한 번에 만족시킨다. */
.hf-bar--overlap.hf-bar--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
}

/* 겹쳐 배치+고정 헤더는 항상 position:fixed라 스크롤해도 화면 상단을 계속 덮는다 - 스크롤 스냅이
   켜져 있으면 scroll-padding-top(위 참고)이 이미 이 문제를 스냅 지점 단위로 처리하지만, 스냅이
   꺼진 일반 스크롤 페이지에서는 아무 보정이 없어 헤더 높이(--fixed-header-height, layout.html
   스크립트가 채움)만큼 <main>의 두 번째 콘텐츠부터 계속 가려져 있었다. <main>에 그 높이만큼 여백을
   주고, 첫 번째 블록(히어로 등)만 그만큼 다시 끌어올려서 "첫 블록은 헤더 아래 겹쳐 보이고 그 다음
   블록부터는 가려지지 않는" 의도한 모양을 유지한다. */
html:not(.scroll-snap-page) header.hf-bar--overlap.hf-bar--sticky + main {
    padding-top: var(--fixed-header-height, 0px);
}

html:not(.scroll-snap-page) header.hf-bar--overlap.hf-bar--sticky + main > *:first-child {
    margin-top: calc(-1 * var(--fixed-header-height, 0px));
}

/* 투명 헤더 - 맨 위에서는 배경이 없다가(히어로 이미지 위에 얹히는 형태), 일정 거리 이상
   스크롤하면(.is-scrolled, layout.html의 스크롤 리스너가 붙임) 저장된 배경색으로 자연스럽게
   전환된다 - 업계 표준 헤더 빌더(Elementor 등)의 sticky+transparent 패턴과 동일. */
.hf-bar--transparent {
    /* border-bottom-color/box-shadow와 마찬가지로 !important를 붙인다 - 이게 없으면 .site-header/
       .site-header--custom의 background-color(둘 다 이 규칙과 클래스 명세 동점이라 순서로만 이김)와
       계속 우선순위 경합을 벌여서, 맨 위(스크롤 전)에서도 배경이 흰색으로 보이는 문제가 실제로
       있었다 - "투명" 설정이 켜져 있으면 맨 위에서는 무조건 투명해야 한다. */
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hf-bar--transparent.is-scrolled {
    background-color: var(--hf-bg, var(--color-bg));
}

.hf-bar--transparent.hf-bar--shadow.is-scrolled {
    box-shadow: var(--shadow-md);
}

/* Header/Footer 위젯 캔버스 — 관리자 "헤더 구성"/"푸터 구성" 바둑판 화면에서 만든 자유배치
   위젯(로고/메뉴/로그인상태/언어전환/버튼)을 그대로 그린다. 좌표계(--gc/--gr)는 메인페이지
   자유배치(.free-grid)와 완전히 같은 12칸 기준 — 다만 상단/하단 고정 표시줄이라 페이지 여백
   (80px)은 쓰지 않고 훨씬 낮게 잡는다. */
.hf-canvas {
    max-width: 1100px;
    margin: 0 auto;
    padding: 6px 24px;
}

.hf-canvas .row-grid {
    max-width: none;
    margin: 0;
    padding: 6px 0;
    align-items: center;
}

.hf-free-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(40px, auto);
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .hf-free-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: 4px;
    }

    .hf-free-grid > .free-grid__item {
        grid-column: auto;
        grid-row: auto;
    }
}

/* LOGO 위젯 */
.hf-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 기본값(CONTAIN, "내부에 다 들어가게") - 비율을 유지한 채 위젯 칸 안에 딱 맞게 축소, 잘리지 않음. */
.hf-logo img,
.hf-logo--CONTAIN img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

.hf-logo--FIT_WIDTH img {
    max-height: none;
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}

.hf-logo--FIT_HEIGHT img {
    max-height: 100%;
    max-width: none;
    width: auto;
    height: 100%;
    display: block;
}

.hf-logo--ORIGINAL img {
    max-height: none;
    max-width: none;
    width: auto;
    height: auto;
    display: block;
}

.hf-logo__text {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
}

/* MENU 위젯 — 가로형(기본, 위젯의 w>=h일 때)과 세로형(사이드바, w<h일 때)을 위젯 배치 비율로
   자동 전환한다. 세로형은 관리자 사이드바처럼 접고 펼 수 있는 토글이 함께 그려진다. */
.hf-menu {
    position: relative;
    display: flex;
    --hf-menu-font-size: 14px;
    --hf-menu-color: var(--color-text);
    --hf-menu-hover-color: var(--color-primary);
    --hf-menu-font-family: inherit;
    --hf-menu-letter-spacing: normal;
    --hf-menu-item-gap: 4px;
}

.hf-menu__collapse-toggle {
    display: none;
}

.hf-menu--horizontal {
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hf-menu--horizontal .hf-menu__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--hf-menu-item-gap);
}

.hf-menu--horizontal .hf-menu__item {
    position: relative;
}

/* 확장형(가로 전체 꽉 채우기)이 아닌 메뉴는 배치된 칸 폭이 좁을 수 있으므로 줄바꿈 대신
   한 줄을 유지하고(JS가 폭에 안 맞으면 패딩/간격/글자 크기를 자동으로 줄인다), 넘치는 부분은
   잘라서 다른 위젯과 겹쳐 보이지 않게 한다. overflow-x:hidden만 쓰면 될 것 같지만, CSS 스펙상
   overflow-x/overflow-y 중 하나만 hidden이고 나머지가 visible이면 그 visible 쪽이 조용히
   auto로 바뀌어버려서(스펙 정의 동작) 결국 아래로 펼쳐지는 하위메뉴(.hf-menu__sub, top:100%로
   목록 박스 밖에 위치)까지 잘리는 문제가 있었다 - overflow 대신 clip-path로 가로축만 정확히
   잘라서 세로(하위메뉴)는 전혀 안 잘리게 한다. */
.hf-menu--horizontal:not(.hf-menu--full) .hf-menu__list {
    flex-wrap: nowrap;
    clip-path: inset(-9999px 0 -9999px 0);
}

.hf-menu--horizontal:not(.hf-menu--full) .hf-menu__label {
    white-space: nowrap;
}

.hf-menu--horizontal .hf-menu__label {
    position: relative;
    display: block;
    padding: 10px 14px;
    font-size: var(--hf-menu-font-size);
    font-family: var(--hf-menu-font-family);
    letter-spacing: var(--hf-menu-letter-spacing);
    font-weight: 600;
    color: var(--hf-menu-color);
    cursor: default;
    transition: color 0.2s ease;
}

.hf-menu--horizontal .hf-menu__label::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transform: translateX(-50%);
    transition: width 0.2s ease;
}

.hf-menu--horizontal .hf-menu__item:hover .hf-menu__label {
    color: var(--hf-menu-hover-color);
}

.hf-menu--horizontal .hf-menu__item:hover .hf-menu__label::after {
    width: 24px;
}

/* 하위메뉴는 즉시 나타나지 않고 살짝 페이드인된다(opacity 전환만 - 이동(translateY) 애니메이션은
   움직임이 과하다는 피드백으로 뺐다). display:none 대신 visibility/opacity를 써야 transition이 걸린다. */
.hf-menu--horizontal .hf-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    /* 관리자 "메뉴 스타일"에서 지정한 하위메뉴 배경 투명도(--hf-menu-sub-opacity, 기본 100%=완전
       불투명) - color-mix()로 테마 배경색과 투명을 섞어서, 실제 색상값을 몰라도(다크모드 등) 항상
       올바르게 옅어진다. */
    background-color: color-mix(in srgb, var(--color-bg) var(--hf-menu-sub-opacity, 100%), transparent);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s;
}

/* 맨 마지막 메뉴 항목(대개 화면 오른쪽 끝에 붙음)의 하위메뉴는 왼쪽 기준(left:0)으로 펼치면
   화면 밖으로 잘려 나간다 - 오른쪽 기준(right:0)으로 뒤집어서 항목의 오른쪽 끝에 맞춘다. */
.hf-menu--horizontal .hf-menu__item:last-child .hf-menu__sub {
    left: auto;
    right: 0;
}

.hf-menu--horizontal .hf-menu__item:hover .hf-menu__sub {
    opacity: 1;
    visibility: visible;
}

/* 메뉴 스타일(관리자 "메뉴 스타일" 선택) - 기본(속성값 없음/SIMPLE)은 위 밑줄 스윕 효과를 뺀 순수
   텍스트, UNDERLINE은 위에서 이미 만든 밑줄 스윕 그대로, PILL은 알약형 배경, MEGA(가로형 드롭다운 -
   확장형)는 호버한 그 항목 하나의 하위메뉴만 메뉴바 폭만큼 넓게 펼쳐지는 형태, MEGA_COLUMNS(진짜
   메가메뉴)는 마우스를 메뉴 위 어디에 올려도 모든 1차 메뉴의 하위메뉴가 동시에 나타나 각자 자기
   상위 메뉴 글자 바로 아래에 컬럼처럼 정렬되는 형태다(madex.co.kr 참고 요청). */
.hf-menu[data-style="SIMPLE"] .hf-menu__label::after {
    display: none;
}

.hf-menu[data-style="PILL"] .hf-menu__label::after {
    display: none;
}

.hf-menu[data-style="PILL"] .hf-menu__label {
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hf-menu[data-style="PILL"] .hf-menu__item:hover .hf-menu__label {
    background-color: var(--color-bg-soft);
    color: var(--color-primary);
}

.hf-menu[data-style="MEGA"] .hf-menu__item {
    position: static;
}

.hf-menu[data-style="MEGA"] .hf-menu__sub {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 14px 20px;
    border-radius: 0 0 12px 12px;
    border-left: none;
    border-right: none;
}

.hf-menu[data-style="MEGA"] .hf-menu__sub li {
    flex: 0 1 auto;
}

/* MEGA_COLUMNS(진짜 메가메뉴): 각 상위메뉴의 하위메뉴 패널은 그대로 자기 상위메뉴 아래(position:
   absolute, 기본 위치)에 남아있되, 특정 항목 하나가 아니라 메뉴 줄 전체(.hf-menu__list) 위에
   마우스가 있는 동안 모든 패널이 한꺼번에 나타난다 - 그래서 각 패널이 자기 상위 메뉴 글자 바로
   아래 컬럼처럼 정렬된 채로, 카테고리 전체를 한 번에 훑어볼 수 있다.
   패널 하나하나가 각자 배경/테두리/그림자를 갖고 있으면 여러 개로 쪼개진 상자처럼 보이므로,
   패널 자체는 배경 없이 글자만 담고(.hf-menu__sub), 뒤에 딱 하나 깔리는 통짜 판(.hf-menu__mega-
   backdrop)이 메뉴 줄 전체 폭을 채워 하나로 이어진 것처럼 보이게 한다. 판의 높이(가장 긴 하위
   메뉴 기준)는 내용에 따라 달라지므로 JS(layout.html)가 호버 시점에 계산해서 넣는다. */
.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__list {
    position: relative;
}

.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__sub {
    min-width: 170px;
    padding: 10px 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__list:hover .hf-menu__sub {
    opacity: 1;
    visibility: visible;
}

/* 메뉴 위젯이 바둑판 칸 일부만 차지해도(예: 12칸 중 8칸), 메가메뉴 판은 항상 화면 좌우 끝까지
   꽉 차야 한다 - 그래서 부모(.hf-menu__list) 너비를 따르지 않고 뷰포트 기준으로 폭을 깬다
   (left:50%+width:100vw+translateX(-50%) - 흔히 쓰는 "컨테이너 탈출" 기법). */
.hf-menu__mega-backdrop {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    height: 0;
    overflow: hidden;
    /* MEGA_COLUMNS 통짜 판도 하위메뉴와 같은 투명도 변수를 공유한다 - 관리자 입장에서는 "하위메뉴
       배경 투명도" 하나로 어떤 메뉴 스타일이든 일관되게 조절된다. */
    background-color: color-mix(in srgb, var(--color-bg) var(--hf-menu-sub-opacity, 100%), transparent);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    /* 판 자체는 위치 이동 없이 커튼처럼 높이만 스르륵 늘어난다(요청: 호버 시 움직임은 과하지 않게,
       내려오는 느낌은 살리기) - 글자(.hf-menu__sub)는 흔들리지 않게 빠른 페이드만 준다. */
    transition: height 0.25s ease, opacity 0.15s ease, visibility 0.25s;
    z-index: 9;
    pointer-events: none;
}

.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__list:hover .hf-menu__mega-backdrop {
    opacity: 1;
    visibility: visible;
}

.hf-menu--horizontal .hf-menu__sub li a {
    display: block;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.hf-menu--horizontal .hf-menu__sub li a:hover {
    background-color: var(--color-bg-soft);
    color: var(--color-primary);
    padding-left: 20px;
}

/* 확장형(--full, 위젯을 헤더 폭 대부분(≥8칸)에 배치했을 때 자동 적용) — 기존 메인 메뉴바처럼
   항목들이 좌우로 꽉 차게 균등 배분된다. 좁게(<8칸) 배치하면(일반형) 지정한 크기만큼만 압축되어
   로고 옆에 나란히 들어가는 컴팩트 형태를 유지한다(아래 기본 스타일). */
.hf-menu--horizontal.hf-menu--full .hf-menu__list {
    flex-wrap: nowrap;
    width: 100%;
}

.hf-menu--horizontal.hf-menu--full .hf-menu__item {
    flex: 1;
    text-align: center;
}

.hf-menu--horizontal.hf-menu--full .hf-menu__sub {
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
}

/* 확장형에서도 맨 마지막 항목은 화면 오른쪽 끝에 붙으므로, 가운데 정렬(위 규칙)이 아니라
   오른쪽 기준으로 뒤집어야 화면 밖으로 안 잘린다. */
.hf-menu--horizontal.hf-menu--full .hf-menu__item:last-child .hf-menu__sub {
    left: auto;
    right: 0;
    transform: none;
}

/* 확장형 메뉴는 관리자가 배치한 칸 너비와 무관하게 항상 행 전체(12칸)를 차지한다 - 메인페이지
   확장 배너(.hero-carousel)가 항상 자기 행을 통째로 차지하는 것과 완전히 같은 규칙. */
.free-grid__item:has(> .hf-menu--full) {
    grid-column: 1 / -1;
}

/* 확장형(--full) 메뉴의 배경/테두리는 헤더 캔버스(.hf-canvas, 최대 1100px)에 갇히지 않고 메가
   메뉴 판(.hf-menu__mega-backdrop)처럼 화면 좌우 끝까지 이어져야 한다("테두리도 확장일 때 같이
   확장" 요청). nav 자신의 배경/테두리는 지우고, 뷰포트 기준으로 너비를 깨는 ::before 레이어에
   실제 배경/테두리를 그린다 - 값은 th:style이 넣어둔 커스텀 프로퍼티(hf-menu-bg 계열, hf-menu-
   border 계열)로 받는다. */
.hf-menu--full {
    background: none !important;
    background-image: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.hf-menu--full::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--hf-menu-bg, none);
    background-image: var(--hf-menu-bg-image, none);
    background-size: cover;
    background-position: center;
    border-top: var(--hf-menu-border-top, none);
    border-bottom: var(--hf-menu-border-bottom, none);
    z-index: -1;
    pointer-events: none;
}

/* 햄버거 폴백 - 가로형(확장형 아님) 메뉴가 패딩/간격/글자 크기를 최소치까지 줄여도(layout.html의
   fitCompactMenus) 배치된 칸 폭에 다 들어가지 않으면 자동으로, 또는 관리자가 메뉴 스타일 콤보박스
   에서 "햄버거 버튼(왼쪽/오른쪽)"을 직접 고르면(section.menuStyle == HAMBURGER_LEFT/RIGHT,
   header-footer-content.html 참고) 항상, .hf-menu--overflow가 붙는다. 이때는 메뉴 목록 대신 햄버거
   버튼 하나만 남기고, 누르면 관리자 콘솔 사이드바(fragments/sidebar.html)의 데스크톱 동작과 같은
   방식 - 어두운 오버레이로 화면을 가리는 모달이 아니라, 페이지 전체(배너 포함)를 옆으로 밀어내고
   화면 가장자리에 계속 펼쳐둘 수 있는 고정 패널 - 로 전체 메뉴를 보여준다. 열림 상태는 layout.html의
   toggleHfMenuPanel()이 <body>에 클래스를 얹어 페이지 전체를 밀고, localStorage에 기억해뒀다가 다음
   방문에도 펼쳐진 채로 유지할 수 있다. 글자가 한없이 작아지거나 잘려서 옆 위젯(로고/버튼)과 겹쳐
   보이는 것을 막는다. */
.hf-menu__hamburger-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--hf-menu-color);
}

.hf-menu__hamburger-label {
    display: none;
}

.hf-menu--overflow.hf-menu--horizontal .hf-menu__list {
    display: none;
}

.hf-menu--overflow .hf-menu__hamburger-toggle {
    display: flex;
}

/* 햄버거 버튼 위치(관리자가 메뉴 스타일 콤보박스에서 고른 HAMBURGER_LEFT/RIGHT) - 기본은
   오른쪽(다음 위젯 쪽), hf-menu--hamburger-left가 붙으면 왼쪽(로고 쪽)에 붙는다. 슬라이드 패널도
   같은 쪽 화면 가장자리에서 나온다(관리자 사이드바가 항상 왼쪽에서 나오는 것과 같은 발상 - 버튼
   쪽에서 나와야 자연스럽다). 폭이 좁아서 자동으로 햄버거가 된 경우(hf-menu--force-hamburger 없음)는
   위젯 자리 안에서만 오른쪽/왼쪽으로 붙는다. */
.hf-menu--overflow.hf-menu--horizontal {
    justify-content: flex-end;
}

.hf-menu--overflow.hf-menu--horizontal.hf-menu--hamburger-left {
    justify-content: flex-start;
}

/* HAMBURGER_LEFT/RIGHT를 명시적으로 고른 메뉴는 위젯이 헤더의 어느 칸에 배치돼 있든 상관없이,
   접힌(닫힌) 상태의 버튼 자체를 화면 가장자리에 세로로 긴 탭 모양으로 고정한다 - 폭이 좁아서
   "우연히" 자동 축소된 다른 스타일(SIMPLE/PILL/MEGA 등)의 작은 인라인 아이콘과는 다르게, 명시적으로
   고른 이 스타일은 항상 화면 어디서든(스크롤해도) 눈에 띄는 탭으로 보이는 게 자연스럽기 때문이다. */
.hf-menu--force-hamburger.hf-menu--overflow .hf-menu__hamburger-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 4px;
    width: 40px;
    height: 128px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    z-index: 150;
}

.hf-menu--force-hamburger:not(.hf-menu--hamburger-left) .hf-menu__hamburger-toggle {
    right: 0;
    left: auto;
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.hf-menu--force-hamburger.hf-menu--hamburger-left .hf-menu__hamburger-toggle {
    left: 0;
    right: auto;
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.hf-menu--force-hamburger .hf-menu__hamburger-label {
    display: block;
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--hf-menu-color);
}

/* 페이지 전체 밀기 - 관리자 사이드바(body.sidebar-collapsed)와 같은 발상. 패널이 열리면 <body>에
   이 클래스가 붙어(layout.html의 toggleHfMenuPanel) 헤더의 배너를 포함한 모든 콘텐츠가 패널 폭만큼
   옆으로 밀려나 패널과 나란히 보인다 - 화면을 덮는 모달이 아니므로 열어둔 채로 계속 페이지를
   둘러볼 수 있다. */
body.hf-menu-panel-open-right {
    margin-right: var(--hf-offcanvas-width);
    transition: margin-right 0.25s ease;
}

body.hf-menu-panel-open-left {
    margin-left: var(--hf-offcanvas-width);
    transition: margin-left 0.25s ease;
}

.hf-menu--overflow .hf-menu__hamburger-toggle {
    position: relative;
    z-index: 202;
}

.hf-menu--overflow.is-open .hf-menu__list {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--hf-offcanvas-width);
    max-height: none;
    overflow-y: auto;
    background-color: var(--color-bg);
    border-left: 1px solid var(--color-border);
    padding: 56px 0 24px;
    gap: 0;
    z-index: 201;
    right: 0;
    left: auto;
}

/* 왼쪽 위치일 때 패널도 왼쪽에서 나온다(오른쪽은 위 기본값 그대로). */
.hf-menu--overflow.hf-menu--hamburger-left.is-open .hf-menu__list {
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid var(--color-border);
}

.hf-menu__offcanvas-close-item {
    display: none;
}

.hf-menu--overflow.is-open .hf-menu__offcanvas-close-item {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}

.hf-menu__offcanvas-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.hf-menu--overflow.is-open .hf-menu__mega-backdrop {
    display: none;
}

.hf-menu--overflow.is-open .hf-menu__item {
    width: 100%;
}

.hf-menu--overflow.is-open .hf-menu__label {
    position: static;
    display: block;
    padding: 12px 20px;
    white-space: nowrap;
}

.hf-menu--overflow.is-open .hf-menu__label::after {
    display: none;
}

.hf-menu--overflow.is-open .hf-menu__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    left: auto;
    right: auto;
    width: auto;
    min-width: 0;
    transform: none;
    margin: 0;
    padding: 0 0 8px 20px;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.hf-menu--overflow.is-open .hf-menu__sub li a {
    display: block;
    padding: 8px 20px;
    font-size: 13px;
    white-space: normal;
}

.hf-menu--vertical {
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden auto;
    transition: width 0.2s ease;
}

.hf-menu--vertical .hf-menu__collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    align-self: flex-end;
    margin: 6px 6px 0 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: var(--color-bg);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.hf-menu--vertical .hf-menu__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.hf-menu--vertical .hf-menu__list {
    gap: var(--hf-menu-item-gap);
}

.hf-menu--vertical .hf-menu__label {
    display: block;
    padding: 10px 16px;
    font-size: var(--hf-menu-font-size);
    font-family: var(--hf-menu-font-family);
    letter-spacing: var(--hf-menu-letter-spacing);
    font-weight: 600;
    color: var(--hf-menu-color);
}

.hf-menu--vertical .hf-menu__item:hover .hf-menu__label {
    color: var(--hf-menu-hover-color);
    background-color: var(--color-bg-soft);
}

.hf-menu--vertical .hf-menu__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 6px 12px;
}

.hf-menu--vertical .hf-menu__sub li a {
    display: block;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.hf-menu--vertical .hf-menu__sub li a:hover {
    color: var(--color-primary);
}

.hf-menu--vertical.is-collapsed {
    width: 44px;
}

.hf-menu--vertical.is-collapsed .hf-menu__collapse-toggle {
    transform: rotate(180deg);
}

.hf-menu--vertical.is-collapsed .hf-menu__label,
.hf-menu--vertical.is-collapsed .hf-menu__sub {
    display: none;
}

/* LANG_TOGGLE 위젯 - 기존 고정 헤더의 .site-nav__lang과 시각적으로 동일하게 맞춘다. */
.hf-lang {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

/* BANNER(버튼/링크) 위젯 — 메인페이지 배너 편집기(배경색/그라디언트/이미지/커스텀 HTML)로
   꾸민 결과를 그대로 쓰되, 헤더/푸터에서는 캐러셀 없이 카드 하나만 버튼처럼 그린다. */
.hf-button-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.hf-text {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 13px;
    line-height: 1.6;
    color: inherit;
    word-break: break-word;
    overflow: hidden;
}

/* 배경이 없는(THEME, 실서버의 "회원가입"/"로그인" 같은 고스트 버튼) 경우 글자 폭에 맞춰 자연스럽게
   줄어들게 하고, 배경을 실제로 칠한 버튼(SOLID/GRADIENT/IMAGE)만 배치한 칸 전체를 채운다 - 그래야
   좁은 칸에 넣은 짧은 텍스트 버튼이 억지로 줄바꿈되지 않는다. */
.hf-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-height: 38px;
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    text-align: center;
    padding: 8px 16px;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hf-button[style*="background"] {
    width: 100%;
    white-space: normal;
}

.hf-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.hf-button--image {
    color: #fff;
}

/* 글자가 버튼 폭보다 길 때 처리 방식 - 관리자 "글자가 버튼 폭보다 길 때" 선택. 기본(WRAP)은 위
   .hf-button 기본 규칙 그대로 둔다(자동 줄바꿈/축소). */
.hf-button--overflow-wrap { white-space: normal; }

.hf-button--overflow-clip .hf-button__label {
    display: block;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.hf-button--overflow-visible {
    overflow: visible;
}

.hf-button--overflow-scroll {
    overflow: hidden;
}

.hf-button--overflow-scroll .hf-button__label {
    display: inline-block;
    white-space: nowrap;
    animation: hf-button-marquee 6s linear infinite;
}

@keyframes hf-button-marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .hf-button--overflow-scroll .hf-button__label {
        animation: none;
        white-space: normal;
    }
}

/* 버튼 폭 자동으로 늘리기 - 배경이 있는 버튼(.hf-button[style*="background"], 배경색/그라데이션/
   UI색상/이미지 선택 시 width:100%; white-space:normal;로 강제하는 규칙)이 명시성으로 이겨버려서
   글자색만 바꿔도 늘리기가 안 먹히는 문제가 있었다 - width뿐 아니라 white-space도 !important로
   확실히 이기게 한다. */
.hf-button--overflow-autowidth {
    width: auto !important;
    max-width: 100%;
    white-space: nowrap !important;
}

/* 글자 크기 자동으로 줄이기 - 실제 축소는 JS(layout.html)가 렌더링 후 폭을 측정해서 처리한다.
   여기서는 줄바꿈 없이 한 줄로 유지해서 JS가 넘치는 만큼만 줄이도록 기준을 잡아준다. */
.hf-button--overflow-autoshrink .hf-button__label {
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

.hf-button__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hf-button__html,
.hf-button__label {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 700;
}

.hf-button__icon {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Normal banner (일반 배너) — 이미지+링크만 있는 단순 배너. 확장 배너(hero-carousel)와 달리 항상
   전체 폭을 차지하지 않고, 자유배치 그리드에서 지정된 칸(.free-grid__item) 크기를 그대로 채운다. */
.normal-banner {
    display: flex;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 160px;
}

.normal-banner__item {
    position: relative;
    flex: 1;
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: 6px;
}

.normal-banner__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 이미지 맞춤 모드(ImageFit) - 기본(채우기)은 위 cover 그대로, 나머지 3개만 전용 클래스로
   덮어쓴다. 항상 칸 중앙에 놓이고, 넘치는 부분은 부모의 overflow:hidden이 잘라낸다. */
.normal-banner__item img.nb-fit-width {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: unset;
    transform: none;
}

.normal-banner__item img.nb-fit-height {
    top: 0;
    left: 50%;
    width: auto;
    height: 100%;
    object-fit: unset;
    transform: translateX(-50%);
}

.normal-banner__item img.nb-fit-original {
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    object-fit: none;
    transform: translate(-50%, -50%);
}

/* Feature carousel - unlimited card posts, 3-up on desktop / 1-up on mobile, slides one card at a time */
.feature-carousel {
    position: relative;
    padding: 0 80px;
}

.feature-carousel__viewport {
    overflow: hidden;
}

.feature-carousel .carousel__arrow--prev {
    left: 4px;
}

.feature-carousel .carousel__arrow--next {
    right: 4px;
}

.feature-carousel__track {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    gap: 28px;
}

.card {
    display: block;
    flex: 0 0 280px;
    width: 280px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    background-color: var(--color-bg);
    /* 자기 배경을 칠하는 상자는 글자색도 자기가 정해야 한다 - 안 그러면 바깥 구역이
       글자색을 흰색으로 두었을 때(원본 초이스·영상 구역) 흰 카드에 흰 글이 된다. */
    color: var(--color-text);
    box-shadow: var(--shadow-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.card__img-wrap {
    position: relative;
    height: 168px;
    overflow: hidden;
    background-color: var(--color-bg-soft);
}

.card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.card__body {
    padding: 26px 24px 30px;
}

.card h3 {
    margin: 4px 0 10px;
    font-size: 18px;
    font-weight: 700;
}

.card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* OVERLAY 카드 스타일(MADEX "Why Exhibit" 참고) - 이미지가 카드 전체를 채우고, 제목/설명은
   하단에 어두운 그라데이션 스크림과 함께 겹쳐 보인다. 마크업은 CLASSIC과 완전히 동일하고
   (.feature-carousel--overlay 수정자 클래스만 다름) 이 규칙들이 각 파츠의 배치만 바꾼다. */
.feature-carousel--overlay .card {
    position: relative;
    height: 360px;
    text-align: left;
    background-color: var(--color-bg-soft);
    border: none;
}

.feature-carousel--overlay .card__img-wrap {
    position: absolute;
    inset: 0;
    height: 100%;
}

.feature-carousel--overlay .card__img {
    object-fit: cover;
}

.feature-carousel--overlay .card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .82) 100%);
    pointer-events: none;
}

.feature-carousel--overlay .card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 22px 24px;
    z-index: 1;
}

.feature-carousel--overlay .card h3 {
    color: #fff;
}

.feature-carousel--overlay .card p {
    color: rgba(255, 255, 255, .85);
}

/* Post list section - 제목과 "더보기"를 한 줄에 놓는 머리글. h2의 기본 중앙정렬/밑줄 장식은
   여기서 무효화하고, 정렬/여백은 이 머리글 행이 대신 담당한다. */
.post-list__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
}

.post-list__head h2 {
    margin: 0;
    padding-bottom: 0;
    text-align: left;
}

.post-list__head h2::after {
    display: none;
}

.post-list__more--standalone {
    display: block;
    margin-top: 12px;
}

.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.post-list__item {
    border-bottom: 1px solid var(--color-border);
}

.post-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 4px;
    transition: color 0.15s ease;
}

.post-list__link:hover {
    color: var(--color-primary);
}

.post-list__title {
    font-size: 15px;
    font-weight: 500;
}

.post-list__date {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.post-list__more {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

/* 목록 줄과 "더보기"는 폰에서 손가락으로 누르는 곳이다 - 글자 높이만큼만 두면
   (31px · 18px) 옆줄을 잘못 누르기 쉽다. */
@media (max-width: 720px) {
    .post-list__link {
        min-height: 48px;
    }

    .post-list__more {
        min-height: 36px;
        padding: 8px 2px;
    }
}

.post-list__more:hover {
    text-decoration: underline;
}

.free-grid__item:has(.post-list) .post-list__more {
    font-size: 11px;
}

/* 자유배치에서 동영상/지도 섹션은 기본적으로 16:9 비율(padding-top 트릭)로 자기 폭 기준
   높이를 정하지만, 그러면 옆 칸(특히 일반배너 - 세로 맞춤 모드)이 자바스크립트로 실제 렌더링
   높이에 맞춰져도 이 섹션 내부의 프레임은 그 늘어난 칸 높이를 채우지 못하고 빈 공간만 남는다.
   자유배치 칸(.free-grid__item) 안에서는 비율 대신 칸의 실제 높이를 그대로 채우게 한다. */
.free-grid__item > .section:has(.video-grid),
.free-grid__item > .section:has(.map-grid) {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.free-grid__item > .section:has(.video-grid) .video-grid,
.free-grid__item > .section:has(.map-grid) .map-grid {
    flex: 1;
    min-height: 0;
}

.free-grid__item > .section:has(.video-grid) .video-card,
.free-grid__item > .section:has(.map-grid) .map-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.free-grid__item > .section:has(.video-grid) .video-card__frame {
    flex: 1;
    padding-top: 0;
}

.free-grid__item > .section:has(.map-grid) .map-card__frame {
    flex: 1;
    padding-top: 0;
}

.free-grid__item > .section:has(.map-grid) .map-card__body {
    flex-shrink: 0;
}

/* Video (YouTube) section */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px;
}

.video-card__frame {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000000;
    box-shadow: var(--shadow-sm);
}

.video-card__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-card__title {
    margin: 10px 2px 0;
    font-size: 14px;
    font-weight: 600;
}

/* Map section */
.map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px;
}

.map-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.map-card__frame {
    position: relative;
    padding-top: 56.25%;
}

.map-card__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-card__body {
    padding: 16px 18px;
}

.map-card__body h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.map-card__body p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Stats(Facts & Figures) section */
.stats-section__desc {
    margin: 0 0 20px;
    color: var(--color-text-muted);
    font-size: 15px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(var(--stats-cols, auto-fit), minmax(min(140px, 100%), 1fr));
    gap: 24px;
    text-align: center;
}

.stats-grid__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-grid__value {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
}

.stats-grid__label {
    font-size: 13px;
    color: var(--color-text-muted);
}

.stats-section__more {
    display: inline-block;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.stats-section__more:hover {
    text-decoration: underline;
}

/* Social links */
.social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-links__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.social-links__item svg {
    width: 18px;
    height: 18px;
}

.social-links__item:hover {
    background: var(--color-primary);
    color: #fff;
}

/* 화면에는 안 보이지만 스크린리더에는 읽히는 텍스트 - 소셜 아이콘처럼 시각적으로는 아이콘만
   보여주고 싶지만 대체 텍스트(플랫폼 이름)는 접근성을 위해 DOM에 남겨둘 때 쓴다. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Countdown */
.countdown-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.countdown-widget__label {
    font-size: 14px;
    color: var(--color-text-muted);
}

.countdown-widget__digits {
    display: flex;
    gap: 16px;
}

.countdown-widget__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-muted);
}

.countdown-widget__unit b {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
}

.countdown-widget__expired {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
}

/* Form widget (newsletter / brochure download)
   제목(.section h2)은 다른 섹션처럼 가운데 정렬인데, 폼은 480px로 폭만 줄이고 가운데로 보내지 않아서
   넓은 칸에 두면 폼이 왼쪽에 붙고 제목만 가운데 떠 한쪽으로 쏠려 보였다. 설명·폼을 제목 축에 맞춘다. */
.form-widget__desc {
    max-width: 480px;
    margin: 0 auto 24px;
    color: var(--color-text-muted);
    font-size: 15px;
    text-align: center;
}

/* 제목 아래 48px 여백이 제목과 설명 사이를 너무 벌려 놓는다 - 제목이 있을 때만 당긴다
   (제목 없이 설명만 있는 폼을 위로 끌어올리지 않게). */
.form-widget h2 + .form-widget__desc {
    margin-top: -28px;
}

.form-widget__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.form-widget__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-widget__field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.form-widget__field input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.form-widget__consent {
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.form-widget__consent label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

/* 버튼도 폼 폭에 맞춘다 - 왼쪽에 작게 붙어 있으면 가운데 정렬한 폼이 다시 한쪽으로 기울어 보인다. */
.form-widget__submit {
    align-self: stretch;
}

.form-widget__message {
    margin: 0;
    font-size: 13px;
    color: var(--color-primary);
    text-align: center;
}

.form-widget__message--error {
    color: #9b1c1c;
}

.form-widget__download {
    display: inline-block;
    width: fit-content;
    align-self: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}

/* Footer */
.site-footer {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-accent), var(--color-highlight)) 1;
    background-color: var(--color-bg-soft);
}

.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Login page */
.login-wrap {
    max-width: 380px;
    margin: 90px auto;
    padding: 0 24px;
}

.login-wrap h1 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 32px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 15px;
}

.login-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(213, 28, 57, 0.12);
}

.login-signup-link {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 18px;
}

.login-signup-link a {
    color: var(--color-primary);
    font-weight: 600;
}

.login-error {
    color: var(--color-primary);
    font-size: 13px;
    text-align: center;
    margin: -4px 0 4px;
}

/* Signup page - dense table-style layout (Korean B2B/exhibition registration convention) */
.signup-wrap {
    max-width: 880px;
    margin: 44px auto 90px;
    padding: 0 20px;
}

.signup-wrap h1 {
    text-align: center;
    font-size: 22px;
    margin: 0 0 6px;
}

.signup-desc {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    margin-bottom: 28px;
}

.notice-body {
    max-width: 840px;
    margin: 0 auto 32px;
    padding: 0 4px;
    line-height: 1.8;
    font-size: 15px;
    color: var(--color-text);
}

.notice-body img {
    max-width: 100%;
}

.notice-body .fs-sm { font-size: 0.8em; }
.notice-body .fs-md { font-size: 1em; }
.notice-body .fs-lg { font-size: 1.3em; }
.notice-body .fs-xl { font-size: 1.7em; }

.notice-body .ff-sans { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; }
.notice-body .ff-serif { font-family: 'Batang', Georgia, serif; }
.notice-body .ff-mono { font-family: 'Consolas', 'Courier New', monospace; }
.notice-body .ff-round { font-family: 'Gungsuh', 'Comic Sans MS', cursive; }

.notice-body .notice-inline-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px 0;
    border-radius: 8px;
}

.notice-attachments {
    max-width: 840px;
    margin: 0 auto 32px;
    padding: 16px 18px;
    border: 1px solid var(--color-border, #eee);
    border-radius: 10px;
}

.notice-attachments h3 {
    margin: 0 0 10px;
    font-size: 14px;
}

.notice-attachments ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.notice-attachments a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 96px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}

.notice-attachments img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border, #eee);
}

.notice-attachments a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.notice-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.notice-popup-overlay.is-open {
    display: flex;
}

.notice-popup {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
    padding: 28px 24px 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
}

.notice-popup h3 {
    margin: 0 0 14px;
    font-size: 17px;
    padding-right: 28px;
}

.notice-popup__body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text);
}

.notice-popup__body .fs-sm { font-size: 0.8em; }
.notice-popup__body .fs-md { font-size: 1em; }
.notice-popup__body .fs-lg { font-size: 1.3em; }
.notice-popup__body .fs-xl { font-size: 1.7em; }

.notice-popup__body .ff-sans { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; }
.notice-popup__body .ff-serif { font-family: 'Batang', Georgia, serif; }
.notice-popup__body .ff-mono { font-family: 'Consolas', 'Courier New', monospace; }
.notice-popup__body .ff-round { font-family: 'Gungsuh', 'Comic Sans MS', cursive; }

.notice-popup__body .notice-inline-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 8px;
}

.notice-popup__close {
    position: absolute;
    top: 14px;
    right: 16px;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.notice-popup__dismiss {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* 게시판(관리자 자유 생성 Board_Category/Board_Post) - 공지사항과 동일하게 서버에서 허용목록
   기반으로 정제한 리치텍스트 HTML을 저장/렌더링한다(RichTextSanitizer, th:utext). 일반 방문자가
   쓴 글도 줄바꿈만 <br>로 바뀐 채 같은 정제 과정을 거치므로 안전하다. */
.board-body {
    max-width: 840px;
    margin: 0 auto 32px;
    padding: 0 4px;
    line-height: 1.8;
    font-size: 15px;
    color: var(--color-text);
    word-break: break-word;
}

.board-body .fs-sm { font-size: 0.8em; }
.board-body .fs-md { font-size: 1em; }
.board-body .fs-lg { font-size: 1.3em; }
.board-body .fs-xl { font-size: 1.7em; }

.board-body .ff-sans { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; }
.board-body .ff-serif { font-family: 'Batang', Georgia, serif; }
.board-body .ff-mono { font-family: 'Consolas', 'Courier New', monospace; }
.board-body .ff-round { font-family: 'Gungsuh', 'Comic Sans MS', cursive; }

.board-body .board-inline-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 14px 0;
    border-radius: 8px;
}

.board-attachments {
    max-width: 840px;
    margin: 0 auto 32px;
    padding: 16px 18px;
    border: 1px solid var(--color-border, #eee);
    border-radius: 10px;
}

.board-attachments h3 {
    margin: 0 0 10px;
    font-size: 14px;
}

.board-attachments ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.board-attachments a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 96px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}

.board-attachments img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border, #eee);
}

.board-attachments a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.board-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    padding: 60px 0;
}

/* 게시판마다 관리자가 고른 강조색(--board-accent, 인라인 style로 주입)을 여기서 전부 이어받는다. */
.board-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.board-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 6px;
    text-decoration: none;
    color: var(--color-text);
}

.board-list__title {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-list__item:hover .board-list__title {
    color: var(--board-accent, var(--color-primary));
}

.board-list__meta {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.board-list__author {
    font-weight: 600;
    color: var(--color-text);
}

/* LIST(기본) - 줄마다 구분선이 있고(BORDERED) 없고(PLAIN)를 고를 수 있다. */
.board-list--list.board-list--bordered .board-list__item {
    border-bottom: 1px solid var(--color-border);
}

.board-list--list.board-list--plain .board-list__item {
    border-bottom: none;
}

/* CARD - 각 글이 카드 하나. */
.board-list--card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 16px;
}

.board-list--card .board-list__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
}

.board-list--card.board-list--plain .board-list__item {
    box-shadow: none;
    border-color: transparent;
    background: var(--color-bg-soft);
}

.board-list--card .board-list__title {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* GALLERY - CARD보다 더 넓고 여유 있게. */
.board-list--gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 24px;
}

.board-list--gallery .board-list__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    background: var(--color-bg);
}

.board-list--gallery .board-list__title {
    font-size: 18px;
    white-space: normal;
}

/* GALLERY 전용 카드(제목+이미지만) - 썸네일이 카드 폭을 꽉 채우고, 없으면 빈 배경만 남는다. */
.board-list__item--gallery {
    padding: 0 0 16px;
    overflow: hidden;
}

.board-list__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--color-bg-soft);
    overflow: hidden;
}

.board-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.board-list__item--gallery .board-list__title {
    padding: 0 18px;
}

.board-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.board-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
}

.board-pagination a.current {
    background: var(--board-accent, var(--color-primary));
    color: #fff;
    font-weight: 700;
}

.board-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.board-write-btn {
    background: var(--board-accent, var(--color-primary));
    border-color: var(--board-accent, var(--color-primary));
}

.board-lock {
    text-align: center;
    padding: 60px 20px;
}

.board-lock__msg {
    font-size: 15px;
    color: var(--color-text);
    margin: 0 0 16px;
}

.board-lock__error {
    color: #9b1c1c;
    font-size: 13px;
    margin: 0 0 14px;
}

.board-lock__form {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.board-lock__form input[type="password"] {
    max-width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
}

/* 게시글 댓글 - 게시판마다 "댓글 사용"을 켰을 때만 board-detail.html에 나타난다. */
.board-comments {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}

.board-comments__title {
    font-size: 16px;
    margin: 0 0 16px;
}

.board-comments__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.board-comments__item {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-soft);
}

.board-comments__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.board-comments__author {
    font-size: 13px;
    font-weight: 600;
}

.board-comments__date {
    font-size: 12px;
    color: var(--color-text-muted);
}

.board-comments__contents {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.board-comments__delete-btn {
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.board-comments__delete-btn:hover {
    color: #9b1c1c;
    text-decoration: underline;
}

.board-comments__delete-form {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.board-comments__delete-form input[type="password"] {
    flex: 1;
    max-width: 220px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
}

.board-comments__empty {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

.board-comments__form .field-row {
    margin-bottom: 12px;
}

.board-comments__form input[type="text"],
.board-comments__form input[type="password"],
.board-comments__form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.board-comments__form-actions {
    text-align: right;
}

.board-write-form .field-row {
    margin-bottom: 18px;
}

.board-write-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.board-write-form input[type="text"],
.board-write-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
    font-family: inherit;
}

.board-write-secret label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text-muted);
}

.board-write-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
}

/* 게시판 리치텍스트 에디터(글쓰기/본인 글 수정) - 관리자 공지사항/게시글 관리 화면과 동일한
   구조·동작(글자 크기/글꼴/색상 span, 이미지 마커 드래그 위치 지정)을 그대로 쓴다. */
.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    background: #fafafa;
}

.rte-toolbar button {
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
}

.rte-toolbar button:hover {
    background: #f0f0f0;
}

.rte-toolbar select {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 12px;
}

.rte-toolbar input[type="color"] {
    width: 30px;
    height: 28px;
    padding: 1px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    cursor: pointer;
    background: #fff;
}

.rte-editor {
    min-height: 160px;
    max-height: 420px;
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.7;
    outline: none;
}

.rte-editor:focus {
    border-color: var(--board-accent, var(--color-primary));
}

.rte-editor.drag-over {
    outline: 2px dashed var(--board-accent, var(--color-primary));
    outline-offset: -2px;
}

.rte-editor .fs-sm { font-size: 0.8em; }
.rte-editor .fs-md { font-size: 1em; }
.rte-editor .fs-lg { font-size: 1.3em; }
.rte-editor .fs-xl { font-size: 1.7em; }

.rte-editor .ff-sans { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; }
.rte-editor .ff-serif { font-family: 'Batang', Georgia, serif; }
.rte-editor .ff-mono { font-family: 'Consolas', 'Courier New', monospace; }
.rte-editor .ff-round { font-family: 'Gungsuh', 'Comic Sans MS', cursive; }

.rte-editor .ne-marker {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 2px 4px;
    cursor: grab;
}

.rte-editor .ne-marker__img {
    display: block;
    max-width: 200px;
    max-height: 120px;
    border-radius: 6px;
}

.rte-editor .ne-marker__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #9b1c1c;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.rte-editor .ne-marker__remove:hover {
    background: #a93226;
}

.attach-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
    margin-top: 8px;
}

.attach-zone.drag-over {
    border-color: var(--board-accent, var(--color-primary));
    background: rgba(0, 0, 0, .02);
    color: var(--board-accent, var(--color-primary));
}

.attach-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 6px 0 0;
}

/* Page head - gradient banner used on signup/participation/mypage instead of plain text */
.page-head {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    border-radius: var(--radius-lg);
    padding: 34px 24px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 28px;
    box-shadow: var(--shadow-md);
}

.page-head h1 {
    margin: 0 0 8px;
    font-size: 23px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.page-head p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
}

.signup-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .signup-choice {
        grid-template-columns: 1fr;
    }
}

.signup-choice__card {
    display: block;
    padding: 28px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.signup-choice__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.signup-choice__card h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--color-primary);
}

.signup-choice__card p {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.login-type-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
}

.login-type-tabs a {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.login-type-tabs a.is-active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-color: transparent;
    color: #ffffff;
}

/* 로그인 화면 나누기 - 누구로 로그인할지 먼저 고르는 카드 */
.login-choice {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.login-choice__card {
    flex: 1 1 200px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 22px 20px;
    text-align: center;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login-choice__card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.login-choice__card strong {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
}

.login-choice__card span {
    font-size: 13px;
    color: var(--color-text-muted);
}

.login-kind {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px;
}

.login-kind a {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
    text-decoration: underline;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--color-text-muted);
    margin: -2px 0 4px;
}

.login-find {
    text-align: center;
    font-size: 13px;
    margin: 14px 0 0;
    color: var(--color-text-muted);
}

.login-find a {
    color: var(--color-text-muted);
    text-decoration: underline;
    margin: 0 4px;
}

.find-result {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 14px;
    background: #fff;
}

.find-result strong {
    font-size: 18px;
    letter-spacing: .5px;
}

.find-result__meta {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.find-result .btn {
    margin-top: 14px;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-primary);
}

.lang-switch {
    text-align: center;
    font-size: 13px;
    margin: 0 0 12px;
}

.lang-switch a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.form-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.form-section--notice {
    border-color: var(--color-highlight);
}

.form-section--notice .form-row__field {
    background-color: #fffbe0;
}

.form-section__title {
    margin: 0;
    padding: 13px 20px;
    background-color: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.form-section__title::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-primary);
    margin-right: 8px;
}

.form-table {
    display: grid;
    grid-template-columns: 160px 1fr;
}

.form-row__label,
.form-row__field {
    padding: 10px 18px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
}

.form-table .form-row:first-child .form-row__label,
.form-table .form-row:first-child .form-row__field {
    border-top: none;
}

.form-row {
    display: contents;
}

.form-row__label {
    display: flex;
    align-items: center;
    background-color: #fafafa;
    border-right: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 500;
}

.form-row__field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.required {
    color: var(--color-primary);
    margin-left: 2px;
}

.form-table input[type="text"],
.form-table input[type="password"],
.form-table input[type="email"],
.form-table input[type="number"],
.form-table input[type="file"],
.form-table select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-table input:focus,
.form-table select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(213, 28, 57, 0.12);
}

.field-select {
    flex: 0 0 240px;
}

.field-grow {
    flex: 1 1 220px;
    min-width: 0;
}

.field-narrow {
    flex: 0 0 100px;
}

.field-sep {
    color: var(--color-text-muted);
    font-size: 12px;
}

.choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
}

.mail-same-check {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
}

.mail-address-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.terms-agree-wrap {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.terms-agree-wrap .form-section__title {
    margin: 0;
}

.terms-agree-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
}

.choice-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text);
    font-weight: 400;
    cursor: pointer;
}

.signup-submit {
    text-align: center;
    margin-top: 28px;
}

.signup-submit .btn {
    min-width: 220px;
    padding: 12px 20px;
    font-size: 15px;
}

/* .signup-submit는 텍스트 정렬(inline 흐름)로 버튼을 가로로 늘어놓는데, <form>은 기본이
   block이라 그 안에 버튼을 넣으면(예: 삭제 버튼) 혼자 다음 줄로 떨어진다 - inline으로 맞춘다. */
.signup-submit form.inline-form {
    display: inline-block;
    margin: 0;
}

@media (max-width: 640px) {
    .form-table {
        grid-template-columns: 1fr;
    }

    .form-row__label {
        border-right: none;
        border-bottom: none;
        padding-bottom: 4px;
        font-size: 12px;
        color: var(--color-text-muted);
    }

    .form-row__field {
        padding-top: 4px;
    }

    .form-table .form-row:not(:first-child) .form-row__label {
        border-top: 1px solid var(--color-border);
    }

    .form-table .form-row:not(:first-child) .form-row__field {
        border-top: none;
    }

    .survey-q-row--pair {
        flex-direction: column;
        gap: 18px;
    }
}

/* Survey (preregister) */
.survey-intro {
    padding: 18px 20px 4px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.survey-list {
    /* 제목 띠 바로 아래에 첫 문항이 붙지 않게 위를 띄운다. 예전에는 안내 문구(.survey-intro)가
       늘 있어서 그 여백이 대신 메워줬는데, 안내 없이 문항만 있는 화면(사전등록)에서는
       제목과 첫 문항이 맞닿아 보였다. */
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* 안내 문구가 있으면 그 문구가 이미 여백 역할을 하므로 위를 다시 띄우지 않는다. */
.survey-intro + .survey-list {
    padding-top: 4px;
}

.survey-block {
    display: flex;
    flex-direction: column;
}

.survey-block__title {
    margin: 4px 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.survey-q-row {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.survey-q-row:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.survey-q-row--pair {
    display: flex;
    gap: 20px;
}

/* 회원 유형에 따라 숨긴 문항·줄·설문 박스. display:flex 같은 규칙이 hidden 속성을 이기지 못하게 한다. */
.survey-q[hidden],
.survey-q-row[hidden],
.form-section[hidden],
.form-row[hidden],
/* .form-table 은 display:grid 라 hidden 속성만으로는 안 감춰진다(그 규칙이 이긴다).
   안의 줄이 조건 때문에 다 숨으면 테두리와 여백만 남아 흰 띠로 보인다. */
.form-table[hidden],
.survey-choice-group[hidden],
[data-member-types][hidden] {
    display: none !important;
}

.survey-q-row--pair > .survey-q {
    flex: 1 1 0;
    min-width: 0;
}

.survey-q__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.survey-q__text {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
    /* 질문 글에 줄을 바꿔 적은 안내문(※ ...)이 한 줄로 뭉개지지 않게 그대로 보여준다. */
    white-space: pre-line;
}

/* 질문 아래 줄에 적은 안내문은 조금 작고 연하게 - 질문 자체와 구분되도록. */
.survey-q__text::first-line {
    font-size: 15px;
}

.survey-q__link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: underline;
    white-space: nowrap;
}

.survey-q__link:hover {
    color: var(--color-primary);
}

.survey-choice-group {
    display: grid;
    /* auto-fill이 아니라 auto-fit - auto-fill은 넓은 화면에서 빈 열을 그대로 남겨 두기 때문에
       보기가 2~3개뿐인 문항(사업자 구분, 부스 타입 등)이 왼쪽에만 몰려 보였다. auto-fit은 빈 열을
       접어서 있는 보기들이 줄을 고르게 나눠 갖는다. */
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 10px;
    align-items: stretch;
}

.survey-choice-group--col2 {
    grid-template-columns: repeat(2, 1fr);
}

.survey-choice {
    position: relative;
    display: block;
}

.survey-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.survey-choice__box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.survey-choice__mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border);
    color: transparent;
    font-size: 12px;
    line-height: 1;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* 라디오형은 원형, 체크박스형은 둥근 사각형 마크 */
.survey-choice--radio .survey-choice__mark {
    border-radius: 50%;
}

.survey-choice--checkbox .survey-choice__mark {
    border-radius: 5px;
}

.survey-choice__box:hover {
    border-color: var(--color-accent);
}

.survey-choice__box:hover .survey-choice__mark {
    border-color: var(--color-accent);
}

.survey-choice input:checked + .survey-choice__box {
    border-color: var(--color-primary);
    background-color: var(--brand-blush);
    color: var(--brand-ink);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.survey-choice input:checked + .survey-choice__box .survey-choice__mark {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #ffffff;
}

.survey-choice--radio input:checked + .survey-choice__box .survey-choice__mark::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ffffff;
}

.survey-choice--checkbox input:checked + .survey-choice__box .survey-choice__mark::after {
    content: "\2713";
}

.survey-choice input:focus-visible + .survey-choice__box {
    outline: 2px solid var(--brand-ink);
    outline-offset: 2px;
}

.survey-choice input:active + .survey-choice__box {
    transform: scale(0.98);
}

.survey-q textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-bg);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.survey-q textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(213, 28, 57, 0.12);
}

/* 한 줄짜리 답변 칸 - 일반문항(이름·휴대폰·이메일), URL, SNS.
   바로 위 주관식 칸(textarea)과 같은 모양·같은 폭을 쓴다. 여기만 좁거나 기본 모양이면
   그 줄만 왼쪽으로 몰려 보여서 한 설문 안에서 칸 크기가 제각각이 된다. */
.survey-q input.survey-preset,
.survey-link input,
.survey-sns input,
.survey-sns select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.survey-q input.survey-preset:focus,
.survey-link input:focus,
.survey-sns input:focus,
.survey-sns select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(213, 28, 57, 0.12);
}

/* 날짜 칸은 폭을 다 쓸 이유가 없다(내용이 고정 길이). */
.survey-q input.survey-preset[type="date"] {
    max-width: 220px;
}

.survey-sns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.survey-sns select {
    flex: 0 0 auto;
    width: auto;
}

.survey-sns input {
    flex: 1 1 240px;
    min-width: 0;
}

.survey-link small,
.survey-sns small {
    flex-basis: 100%;
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.survey-error {
    margin: 0 0 16px;
    padding: 11px 16px;
    border: 1px solid #e9b7b7;
    border-radius: var(--radius-md);
    background-color: #fdf2f2;
    color: #9b1c1c;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.preregist-done {
    padding: 46px 24px;
    text-align: center;
}

.preregist-done__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #ffffff;
    font-size: 26px;
}

.preregist-done p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

@media (max-width: 768px) {
    .card {
        flex-basis: 100%;
        width: 100%;
    }

    .feature-carousel {
        padding: 0 56px;
    }

    .hero-slide {
        padding: 60px 20px;
    }

    .hero-slide__content h1 {
        font-size: 28px;
    }

    .row-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

/* 개인정보 동의 목록(가입·참가신청) - 관리자가 등록한 항목만 렌더링된다. */
.consent-list {
    padding: 4px 0;
}

.consent-item {
    padding: 13px 20px;
    border-top: 1px solid var(--color-border);
}

.consent-item:first-child {
    border-top: none;
}

.consent-item__check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    cursor: pointer;
}

.consent-item__check b {
    font-weight: 600;
}

.consent-required,
.consent-optional {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: 2px;
}

.consent-required {
    background-color: var(--brand-ink);
    color: #ffffff;
}

.consent-optional {
    background-color: #eef0f4;
    color: #4a5160;
}

.consent-item__body {
    margin: 5px 0 0 28px;
    font-size: 12px;
    color: #777;
    line-height: 1.6;
}

.consent-item__body p {
    margin: 0 0 2px;
}

/* =======================================================================
   Phase 6 콘텐츠 위젯 - 참가업체 디렉토리 / 배치도 / 배너존 / FAQ / 자료실 / 팝업
   ======================================================================= */

/* ---- 참가업체 디렉토리 ---- */
.directory__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.directory__search {
    flex: 1 1 240px;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
}

.directory__search:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.directory__count {
    font-size: 13px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.directory__grid {
    display: grid;
    grid-template-columns: repeat(var(--dir-cols, 3), minmax(0, 1fr));
    gap: 14px;
}

.directory__card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.directory__name {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
    word-break: keep-all;
}

.directory__booth {
    margin: 0;
    font-size: 13px;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.directory__label {
    display: inline-block;
    font-size: 11px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 1px 7px;
    margin-right: 5px;
}

.directory__items {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.directory__link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 6px;
    font-size: 12.5px;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.directory__empty,
.directory__nomatch {
    margin: 12px 0;
    font-size: 14px;
    color: var(--color-text-muted);
}

/* ---- 배치도 ---- */
.floorplan__stage {
    position: relative;
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-soft);
}

.floorplan__img {
    display: block;
    width: 100%;
    height: auto;
}

/* 이미지가 아직 없거나 깨졌을 때 - 영역만 덩그러니 떠 있지 않게 최소 높이를 준다. */
.floorplan__stage.is-missing { min-height: 180px; }
.floorplan__stage.is-missing .floorplan__img { display: none; }

.floorplan__zone {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--zone-color, var(--color-primary));
    background: color-mix(in srgb, var(--zone-color, var(--color-primary)) 16%, transparent);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: background .15s ease;
}

.floorplan__zone:hover,
.floorplan__zone:focus-visible {
    background: color-mix(in srgb, var(--zone-color, var(--color-primary)) 34%, transparent);
}

.floorplan__zone span {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    border-radius: 3px;
    padding: 1px 5px;
    max-width: 96%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floorplan__legend {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

/* ---- 스폰서 배너존 ---- */
.banner-zone__strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--bz-gap-y, 14px) var(--bz-gap-x, 26px);
}

/* 한 줄에 몇 개로 못 박고 싶을 때. 안 정하거나 0 이면 지금처럼 폭에 맞춰 흐른다 -
   원본 후원 구역은 3개씩 끊는다(.support_wrap{width:30.6%}).
   설정은 위젯 바깥 칸에 실리므로 "위 어딘가"를 보고 판단한다. */
[style*="--bz-cols:"] .banner-zone__item {
    flex: 0 0 calc((100% - (var(--bz-cols, 3) - 1) * var(--bz-gap-x, 26px)) / var(--bz-cols, 3));
}

[style*="--bz-cols:0;"] .banner-zone__item {
    flex: 0 0 auto;
}

.banner-zone__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 96px;
    /* 이름표를 달면 높이가 로고 높이보다 커져야 한다. */
    height: auto;
    min-height: var(--bz-logo-h, 56px);
    text-decoration: none;
}

.banner-zone__item img {
    max-height: var(--bz-logo-h, 56px);
    max-width: var(--bz-logo-w, 170px);
    width: auto;
    object-fit: contain;
    filter: grayscale(var(--bz-gray, 1));
    opacity: var(--bz-fade, .72);
    transition: filter .15s ease, opacity .15s ease;
}

.banner-zone__item:hover img,
.banner-zone__item:focus-visible img {
    filter: none;
    opacity: 1;
}

/* 로고 파일이 없거나 깨진 스폰서는 이름만이라도 보여준다(빈 칸으로 두지 않는다). */
/* 이름표. 기본은 안 보이고, 그림을 못 불러온 항목만 이름으로 대신 나온다.
   원본 후원 구역처럼 늘 보이게 하려면 "이름표 보이기"를 켠다. */
.banner-zone__name {
    display: none;
    font-size: var(--bz-name-fs, 13px);
    color: var(--color-text-muted);
}

[style*="--bz-name:1;"] .banner-zone__name {
    display: block;
    width: 100%;
    text-align: center;
    color: inherit;
    border-top: var(--bz-name-rule, 0px) solid currentColor;
    padding: var(--bz-name-pad, 0px) 0;
    margin-top: var(--bz-name-pad, 0px);
}
.banner-zone__item.is-text-only img { display: none; }
.banner-zone__item.is-text-only .banner-zone__name { display: inline; }

/* ---- FAQ ---- */
.faq__item {
    border-bottom: 1px solid var(--color-border);
}

.faq__q {
    list-style: none;
    cursor: pointer;
    padding: 15px 34px 15px 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    position: relative;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.faq__item[open] > .faq__q::after { content: "\2212"; }

.faq__a {
    padding: 0 2px 18px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--color-text-muted);
}

.faq__a :where(p, ul, ol) { margin: 0 0 8px; }

/* ---- 자료실 ---- */
.downloads__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.downloads__item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 2px;
    border-bottom: 1px solid var(--color-border);
}

.downloads__info { flex: 1 1 240px; min-width: 0; }

.downloads__title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.downloads__meta {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    word-break: break-all;
}

.downloads__desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.downloads__btn {
    flex: 0 0 auto;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.downloads__btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ---- 팝업 공지 ---- */
.popup-zone__item {
    position: fixed;
    z-index: 900;
    width: min(360px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.popup-zone__item--top_left { top: 90px; left: 16px; }
.popup-zone__item--top_right { top: 90px; right: 16px; }
.popup-zone__item--bottom_right { bottom: 16px; right: 16px; }
.popup-zone__item--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.popup-zone__head {
    padding: 14px 18px 0;
    font-size: 15px;
    color: var(--color-text);
}

.popup-zone__body {
    padding: 8px 18px 4px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.popup-zone__body img { max-width: 100%; height: auto; }

.popup-zone__more {
    display: inline-block;
    margin: 0 18px 8px;
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.popup-zone__foot {
    display: flex;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
}

.popup-zone__foot button {
    flex: 1;
    background: none;
    border: none;
    padding: 11px 8px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--color-text-muted);
    cursor: pointer;
}

.popup-zone__foot button + button { border-left: 1px solid var(--color-border); }
.popup-zone__foot button:hover { background: var(--color-bg-soft); color: var(--color-text); }

@media (max-width: 720px) {
    .directory__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
    .downloads__btn { width: 100%; text-align: center; }
    .popup-zone__item--top_left,
    .popup-zone__item--top_right,
    .popup-zone__item--bottom_right {
        left: 16px;
        right: 16px;
        width: auto;
    }
}


/* 헤더·푸터의 소셜 아이콘. 본문 위젯보다 줄이 좁아서 한 단계 작게 그린다. */
.hf-social { display: flex; align-items: center; gap: 6px; }
.hf-social .social-links__item { width: 30px; height: 30px; }
.hf-social .social-links__item svg { width: 17px; height: 17px; }

/* 폰에서는 손가락으로 눌러야 하니 다시 키운다(마우스 커서는 1px 도 맞히지만
   손끝은 그렇지 않다). 줄 간격이 넉넉한 푸터라 키워도 줄이 밀리지 않는다. */
@media (max-width: 720px) {
    .hf-social { gap: 8px; }
    .hf-social .social-links__item { width: 40px; height: 40px; }
    .hf-social .social-links__item svg { width: 19px; height: 19px; }
}


/* 사전등록 확인 화면 */
.prc-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px;
    text-align: center;
}

.prc-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    text-align: center;
    margin: 0 0 22px;
}

.prc-form {
    max-width: 420px;
    margin: 0 auto 24px;
}

.prc-empty {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
}

.prc-card {
    max-width: 520px;
    margin: 0 auto 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px 22px;
    background: #fff;
}

.prc-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.prc-card__head strong {
    font-size: 17px;
    color: var(--color-primary);
}

.prc-no {
    font-size: 12px;
    color: var(--color-text-muted);
}

.prc-facts {
    display: grid;
    grid-template-columns: minmax(96px, 34%) 1fr;
    gap: 8px 14px;
    margin: 0;
    font-size: 14px;
}

.prc-facts dt {
    color: var(--color-text-muted);
    font-weight: 500;
    word-break: keep-all;
}

.prc-facts dd {
    margin: 0;
    word-break: break-word;
}

.prc-answers {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.prc-answers h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
}


/* 본문(메인·커스텀 페이지)에 놓은 버튼/로고 위젯 - 모양은 헤더와 같은 .hf-button/.hf-logo를 쓰고
   여기서는 본문 배치에 필요한 여백·정렬만 더한다. */
.body-button,
.body-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100%;
}

.body-button .hf-button-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.body-logo .hf-logo {
    max-width: 100%;
    height: 100%;
}


/* 머리글·꼬리글의 로고를 감싸는 칸. 본문의 .body-logo 와 같은 자리를 맡는다 - 크기 맞춤
   클래스를 걸 데가 필요해서 둔 것이라, 아무 설정이 없을 때는 예전처럼 보여야 한다. */
.hf-logo-box {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
}

/* 위젯 "크기 맞춤" - 배치 화면에서 정한 칸 안에서 버튼·로고를 어떻게 채울지.
     자동 맞춤(AUTO)    : 칸을 가로·세로 모두 채운다
     너비만(WIDTH_ONLY) : 가로만 채우고 세로는 내용 크기
     높이만(HEIGHT_ONLY): 세로만 채우고 가로는 내용 크기
     고정(FIXED, 기본)  : 관리자가 적은 px 그대로(비우면 내용 크기)

   세로를 채우려면 위젯 칸 자체에 실제 높이가 있어야 한다 - 자유배치 그리드의 칸은 기본이
   "내용만큼"이라, 게시글목록(.post-list)에서 쓰는 것과 같은 계산식으로 저장된 칸 수(--rh)를
   실제 높이로 만들어 준다(1칸 55px + 칸 사이 24px). */
.free-grid__item:has(.body-button.fit-AUTO),
.free-grid__item:has(.body-button.fit-HEIGHT_ONLY),
.free-grid__item:has(.body-logo.fit-AUTO),
.free-grid__item:has(.body-logo.fit-HEIGHT_ONLY),
.free-grid__item:has(.hf-logo-box.fit-AUTO),
.free-grid__item:has(.hf-logo-box.fit-HEIGHT_ONLY) {
    height: calc(var(--rh, 1) * var(--grid-unit, 55px) + (var(--rh, 1) - 1) * var(--grid-row-gap, 24px));
}

.body-button.fit-AUTO,
.body-button.fit-HEIGHT_ONLY,
.body-logo.fit-AUTO,
.body-logo.fit-HEIGHT_ONLY,
.hf-logo-box.fit-AUTO,
.hf-logo-box.fit-HEIGHT_ONLY {
    height: 100%;
}

.body-button.fit-AUTO .hf-button-wrap,
.body-button.fit-WIDTH_ONLY .hf-button-wrap {
    width: 100%;
}

.body-button.fit-AUTO .hf-button,
.body-button.fit-WIDTH_ONLY .hf-button,
.body-logo.fit-AUTO .hf-logo,
.body-logo.fit-WIDTH_ONLY .hf-logo,
.hf-logo-box.fit-AUTO .hf-logo,
.hf-logo-box.fit-WIDTH_ONLY .hf-logo {
    width: 100%;
    max-width: 100%;
}

/* 높이: .hf-button은 기본이 min-height:38px짜리 "내용 높이"라, 칸을 채우려면 명시적으로 늘린다. */
.body-button.fit-AUTO .hf-button,
.body-button.fit-HEIGHT_ONLY .hf-button,
.body-logo.fit-AUTO .hf-logo,
.body-logo.fit-HEIGHT_ONLY .hf-logo,
.hf-logo-box.fit-AUTO .hf-logo,
.hf-logo-box.fit-HEIGHT_ONLY .hf-logo {
    height: 100%;
    min-height: 0;
}

/* 한 축만 늘리는 모드에서는 반대 축을 내용 크기로 둔다. */
.body-button.fit-WIDTH_ONLY .hf-button,
.body-logo.fit-WIDTH_ONLY .hf-logo,
.hf-logo-box.fit-WIDTH_ONLY .hf-logo {
    height: auto;
}

.body-button.fit-HEIGHT_ONLY .hf-button,
.body-logo.fit-HEIGHT_ONLY .hf-logo,
.hf-logo-box.fit-HEIGHT_ONLY .hf-logo {
    width: auto;
}

/* 자동 맞춤에서 이미지형 버튼·로고는 칸을 채우되 잘리지 않게. */
.body-button.fit-AUTO .hf-button__bg,
.body-logo.fit-AUTO img,
.hf-logo-box.fit-AUTO img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 고정 사이즈는 인라인 style로 width/height가 직접 들어온다 - 부모가 늘리지 못하게만 막는다. */
.body-button.fit-FIXED .hf-button-wrap,
.body-logo.fit-FIXED .hf-logo,
.hf-logo-box.fit-FIXED .hf-logo {
    flex: 0 0 auto;
}

/* 고정 크기를 적었으면 버튼 자체가 그 크기를 그대로 따라간다(감싼 칸이 아니라 버튼이 커져야 한다). */
.body-button.fit-FIXED .hf-button-wrap[style] .hf-button {
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-height: 0;
}

/* 비밀번호 찾기 - 재발송 */
.find-resend { margin: 18px 0 14px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.find-resend__hint { margin: 0 0 10px; font-size: 12.5px; color: var(--color-text-muted, #888); line-height: 1.6; }
.find-resend__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.find-resend__btns .btn { flex: 1 1 140px; justify-content: center; }
.login-form .btn--ghost.btn--block { margin-top: 8px; }

/* 직접 입력 보기(예: 기타) */
.survey-other {
    margin-top: 8px;
}

.survey-other input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    background-color: var(--color-bg);
}

.survey-other input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* 안내문 문항(답 없음) - 납입처 계좌 안내 등 */
.survey-guide {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-soft, #fafafa);
    font-size: 13.5px;
    line-height: 1.8;
    white-space: pre-line;
    word-break: break-all;
}

/* ======================================================================
   모바일 공통 규칙  (계획서 P1-3 · P1-4 · P1-5)

   기준 폭은 280px - 갤럭시 폴드를 접은 상태까지 좌우로 흔들리지 않게 한다.
   여기 있는 규칙은 폰 폭에서만 켜지므로 데스크톱 화면은 그대로다.
   ====================================================================== */
@media (max-width: 720px) {

    /* --- P1-3 입력칸 글꼴 16px ---------------------------------------
       아이폰 사파리는 16px 미만 입력칸을 누르면 화면을 확대하고, 확대된 채로
       되돌아오지 않는다. 폼 하나 채우는 내내 좌우로 밀리는 원인이다. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px;
    }

    /* 글꼴을 키우면 칸도 같이 커지므로 위아래 여백을 조금 줄여 균형을 맞춘다. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
        padding-block: 9px;
    }

    /* --- P1-4 터치 대상 최소 44px ------------------------------------ */
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    select {
        min-height: 44px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
    }

    /* 체크 상자 자체는 22px 이 한계다. 실제로 누르는 곳은 글자까지 포함한 한 줄이므로
       상자를 품은 이름표를 44px 짜리 줄로 만든다(동의 항목·약관 동의가 여기 해당한다).
       :has 를 모르는 브라우저에서는 지금과 똑같이 보인다 - 나빠지지 않는다. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        min-height: 44px;
    }

    /* --- 고정 폭 때문에 화면 밖으로 나가는 것들 -----------------------
       min-width 로 잡아 둔 값은 폰 화면보다 넓을 수 있다. 폰에서는 화면 폭을 따른다. */
    .btn,
    button,
    input,
    select,
    textarea,
    img,
    video,
    iframe {
        max-width: 100%;
    }

    /* 제출 버튼(min-width:220px)은 280px 화면에서 그대로 밖으로 나간다 - 한 줄 꽉 채운다. */
    .signup-submit .btn,
    .signup-submit form.inline-form {
        min-width: 0;
        width: 100%;
    }

    .signup-submit {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* 플렉스 자식은 기본값(min-width:auto) 때문에 내용보다 좁아지지 못한다.
       그래서 파일 선택칸 하나가 줄 전체를, 나아가 페이지 전체를 넓혀 버린다. */
    .form-row__label,
    .form-row__field,
    .form-row {
        min-width: 0;
    }

    /* 파일 선택칸은 "파일 선택 + 선택된 파일 없음" 이 붙어 있어 폭을 크게 요구한다. */
    input[type="file"] {
        width: 100%;
        max-width: 100%;
    }

    /* --- P1-5 넓은 표는 페이지가 아니라 표만 옆으로 밀리게 ------------ */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 칸이 좁아 글자가 세로로 한 자씩 쪼개지는 걸 막는다(표는 옆으로 밀면 된다). */
    table th,
    table td {
        white-space: nowrap;
    }
}

/* 아주 좁은 화면(갤럭시 폴드 접은 상태 280px)에서만 한 단계 더 좁힌다. */
@media (max-width: 340px) {
    .signup-wrap,
    .apply-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .btn {
        padding-inline: 14px;
        font-size: 13.5px;
    }

    .page-head h1 {
        font-size: 20px;
    }
}

/* 화면마다 <style> 로 직접 적어 둔 글꼴 크기가 남아 있어, 이 규칙만 !important 로 못 박는다.
   16px 미만이면 아이폰이 입력칸을 누를 때마다 화면을 확대하고 되돌리지 않는다 -
   글꼴 크기 하나만 강제하는 것이라 배치에는 영향이 없다. */
@media (max-width: 720px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ======================================================================
   메인페이지 자유배치(위젯) 화면의 모바일 처리  (계획서 P1-2 · P2)

   .free-grid 는 12칸 격자에 칸 사이 40px 를 두고 위젯을 앉힌다. 폰 폭에서는
   칸 사이 간격(11 × 40 = 440px)만으로 이미 화면보다 넓어서, 칸 폭이 0 이하로
   찌그러지고 위젯이 화면 밖으로 밀린다(280px 에서 지도·영상 위젯이 실제로 넘쳤다).
   폰에서는 좌표를 무시하고 위에서 아래로 한 줄씩 쌓는다.
   ====================================================================== */
@media (max-width: 720px) {
    /* 헤더·푸터(.hf-free-grid)는 자기 규칙(줄간격 4px·여백 0)이 따로 있다 - 여기서 같이 건드리면
       위젯이 많은 헤더가 화면 절반을 먹는다. 본문 자유배치에만 적용한다. */
    .free-grid:not(.hf-free-grid) {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 18px;
        padding: 28px 16px;
    }

    /* 인라인 style 로 들어오는 --gc/--gr 좌표를 폰에서는 쓰지 않는다. */
    .free-grid:not(.hf-free-grid) > .free-grid__item {
        grid-column: 1 / -1;
        grid-row: auto;
        min-width: 0;
        max-width: 100%;
    }

    /* 관리자가 저장한 칸 높이(--rh)도 폰에서는 의미가 없다 - 내용 높이를 따르게 둔다. */
    .free-grid__item > .section {
        max-width: 100%;
    }

    .row-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* 태블릿 폭에서도 칸 사이 40px 는 넓다 - 절반으로 줄인다. */
@media (min-width: 721px) and (max-width: 1024px) {
    .free-grid:not(.hf-free-grid) {
        column-gap: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 하위메뉴는 항목 왼쪽 기준(left:0)으로 절대배치돼서, 좁은 화면에서는 화면 밖으로 나간다.
   보이지 않는 상태(visibility:hidden)여도 스크롤 폭은 만들기 때문에 페이지가 좌우로 흔들린다. */
@media (max-width: 720px) {
    .hf-menu--horizontal .hf-menu__sub,
    .hf-menu[data-style="MEGA"] .hf-menu__sub,
    .hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__sub {
        min-width: 0;
        max-width: calc(100vw - 24px);
        left: auto;
        right: 0;
    }

    .hf-menu__mega-backdrop {
        max-width: 100vw;
    }
}

/* 가로 메뉴가 화면보다 길 때. 메뉴 위젯은 폭을 재서 스스로 햄버거로 바뀌지만
   (fitCompactMenus), 위젯이 여러 개 있는 헤더에서는 그 판단이 빗나가 항목이 화면 밖으로
   나가는 경우가 있다. 이때 줄바꿈을 시키면 헤더가 세로로 길어져 화면 절반을 먹으므로,
   메뉴 안에서만 옆으로 밀리게 한다 - 페이지는 흔들리지 않고 헤더 높이도 그대로다.
   (햄버거로 바뀐 메뉴는 목록이 display:none 이라 이 규칙의 영향을 받지 않는다.) */
@media (max-width: 720px) {
    .hf-menu--horizontal .hf-menu__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hf-menu--horizontal .hf-menu__list::-webkit-scrollbar {
        display: none;
    }

    /* 헤더가 화면 세로를 너무 많이 먹지 않게 로고 크기를 제한한다. */
    .hf-logo img {
        max-height: 44px;
        width: auto;
    }
}

/* ======================================================================
   폰에서 위젯 높이 해제  (계획서 2단계 - 첫인상)

   자유배치 위젯은 관리자가 저장한 칸 수(--rh)만큼의 높이를 정확히 차지하고 넘치는
   내용은 감춘다 - 옆 칸과 높이를 맞추기 위해서다. 그런데 폰에서는 위젯이 한 줄에
   하나씩 쌓이므로 맞출 옆 칸이 없다. 고정 높이가 하는 일은 내용을 자르는 것뿐이다
   (공지가 몇 개만 늘어도 뒤가 잘려 보이지 않는다).
   ====================================================================== */
@media (max-width: 720px) {
    .free-grid:not(.hf-free-grid) > .free-grid__item:has(.post-list),
    .free-grid:not(.hf-free-grid) > .free-grid__item:has(.body-button.fit-AUTO),
    .free-grid:not(.hf-free-grid) > .free-grid__item:has(.body-button.fit-HEIGHT_ONLY) {
        height: auto;
        overflow: visible;
    }

    .free-grid:not(.hf-free-grid) > .free-grid__item:has(.post-list) > .section {
        height: auto;
        overflow: visible;
    }

    /* 좁은 높이에 맞춰 줄여 둔 글자·여백도 원래대로 돌린다. */
    .free-grid:not(.hf-free-grid) .post-list__title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ======================================================================
   폰에서의 읽기 편의  (계획서 2단계)
   ====================================================================== */
@media (max-width: 720px) {
    /* 보기를 2열로 고정해 둔 문항. 폰에서는 한 칸이 130px 남짓이라 글자가 답답하다.
       (기본 보기 배치는 이미 좁아지면 한 줄로 접힌다 - 이건 2열로 못 박은 경우) */
    .survey-choice-group--col2 {
        grid-template-columns: 1fr;
    }

    /* 목록 제목은 폰에서 본문 그 자체다. 한 줄로 잘라 "..."로 끝내면 무슨 글인지 알 수 없다.
       데스크톱은 한 줄에 제목·날짜를 나란히 두느라 잘라야 하지만, 폰에서는 두 줄로 편다. */
    .board-list__title,
    .post-list__title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .board-list__item {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    /* 공지 팝업: 화면을 꽉 채우지 않게 여백을 남기고, 닫기 버튼을 누르기 좋은 크기로. */
    .notice-popup {
        max-height: 76vh;
    }

    .notice-popup__close {
        min-width: 44px;
        min-height: 44px;
    }

    .notice-popup__dismiss {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

/* ---------------------------------------------------------------------------
   탭 메뉴 (TAB_NAV)

   수치는 전부 원본 카페쇼 CSS 를 재서 적은 것이다(kor/src/css/contents.css).
     section.sub_tap  { border-bottom:1px solid #d4d4d4 }
     div.sub_tap_wrap { max-width:1160px; margin:0 auto }
     li               { float:left; width:25% }  .two 50% .three 33.3% .five 20%
     li a             { display:block; padding:12px 0 12px; font-size:15px }
     li.on a          { font-weight:500; color:#000; padding:12px 0 9px;
                        border-bottom:4px solid #da1f3d }

   모두 var(--x, 원본값) 이라 설정을 안 만들면 원본과 같은 모양이 나온다.
   숫자가 이 파일에 박혀 있는 것이 아니라 "기본값"으로만 있는 것이 핵심이다.
   --------------------------------------------------------------------------- */
.tab-nav {
    width: 100%;
    border-bottom: var(--tab-line-h, 1px) solid var(--tab-line-c, #d4d4d4);
}

.tab-nav__wrap {
    max-width: var(--tab-w, 1160px);
    margin: 0 auto;
}

.tab-nav__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 탭이 많으면 가로로 밀린다 - 폰에서 줄바꿈보다 이쪽이 읽히기 좋다.
       페이지 전체가 아니라 이 줄만 밀린다. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tab-nav__list::-webkit-scrollbar { display: none; }

.tab-nav__item {
    flex: 1 0 auto;
    text-align: var(--tab-align, center);
}

/* 칸 나누기 - 원본은 개수마다 클래스를 갈아 끼웠다(five=20%).
   여기서는 개수를 세서 숫자를 넣으므로 탭을 하나 더해도 폭이 알아서 맞는다. */
.tab-nav__list--2 > .tab-nav__item { width: 50%; }
.tab-nav__list--3 > .tab-nav__item { width: 33.3%; }
.tab-nav__list--4 > .tab-nav__item { width: 25%; }
.tab-nav__list--5 > .tab-nav__item { width: 20%; }
.tab-nav__list--6 > .tab-nav__item { width: 16.6%; }

.tab-nav__item > a,
.tab-nav__item > span {
    display: block;
    padding: var(--tab-pad-y, 12px) 10px;
    font-size: var(--tab-fs, 15px);
    color: var(--tab-c, var(--color-text, #222));
    text-decoration: none;
    white-space: nowrap;
    /* 활성 탭이 밑줄 두께만큼 위로 올라오지 않게 자리를 미리 비워 둔다. */
    border-bottom: var(--tab-on-bar, 4px) solid transparent;
}

.tab-nav__item > a:hover { color: var(--tab-on-c, #000); }

.tab-nav__item > a.is-on {
    font-weight: var(--tab-on-w, 500);
    color: var(--tab-on-c, #000);
    /* 원본은 활성 탭의 아래 여백을 12px → 9px 로 줄였다.
       12+12=24 와 9+4+12=25 로 1px 어긋나 있는데, 원본 그대로가 기본값이고
       높이를 딱 맞추고 싶으면 관리자가 이 값을 8 로 바꾸면 된다. */
    padding-bottom: var(--tab-on-pad-b, 9px);
    border-bottom-color: var(--tab-on-bar-c, var(--hm-accent, var(--color-primary)));
}

@media (max-width: 640px) {
    /* 좀은 화면에서는 균등 나누기를 풀고 글자 폭만큼만 차지한다 -
       280px 에서 5등분이면 한 칸이 56px 라 글자가 잘린다. */
    .tab-nav__list > .tab-nav__item { width: auto; flex: 0 0 auto; }
    .tab-nav__item > a,
    .tab-nav__item > span { padding-left: 14px; padding-right: 14px; }
}

/* ---------------------------------------------------------------------------
   항목 나열 (DEF_LIST)

   원본 수치(kor/src/css/result.css):
     ul.ev_cont_text li      { font-size:14px; color:#2a2a2a; line-height:1.3em; margin-bottom:6px }
     ul.ev_cont_text li span { font-weight:normal }
     li span.block           { display:block; padding-left:10px }
   회색 박스(div.ev_cont_box)는 #f9f9f9 였다.

   줄머리 "- "는 원본이 값에 직접 써 넣었는데, 여기서는 CSS 로 붙인다 -
   관리자가 내용에 기호를 섮지 않게 하기 위해서다.
   --------------------------------------------------------------------------- */
.def-list {
    background: var(--dl-bg, transparent);
    padding: var(--dl-pad, 0);
}

.def-list__title {
    margin: 0 0 12px;
    font-size: var(--hm-fs-title, 20px);
    font-weight: var(--hm-weight-bold, 500);
    color: var(--hm-title, var(--color-text, #222));
}

.def-list__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.def-list__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    font-size: var(--dl-fs, 14px);
    color: var(--dl-c, #2a2a2a);
    line-height: var(--dl-lh, 1.3);
    margin-bottom: var(--dl-gap, 6px);
}

.def-list__row:last-child { margin-bottom: 0; }

/* 줄머리 - 기본은 원본과 같은 대시다. */
.def-list__row::before {
    content: var(--dl-marker, "- ");
    flex: none;
}

.def-list__label {
    flex: none;
    /* 0 이면 글자 폭만큼(원본 방식), 값을 주면 고정돼 값이 세로로 맞는다. */
    min-width: var(--dl-label-w, 0);
}

.def-list__label::after { content: " :"; }

.def-list__value {
    font-weight: var(--dl-val-w, 400);
    /* 켜면 값이 아랫줄로 간다(원본 span.block). */
    display: var(--dl-val-disp, inline);
    padding-left: var(--dl-val-pad, 0);
}

@media (max-width: 480px) {
    /* 좀은 화면에서는 이름과 값이 위아래로 쌓인다 -
       옆으로 붙여 두면 280px 에서 값이 잘린다. */
    .def-list__label { min-width: 0; }
    .def-list__value { display: block; width: 100%; padding-left: var(--dl-val-pad, 0); }
}

/* ---------------------------------------------------------------------------
   표 (DATA_TABLE)

   원본 수치(kor/src/css/result.css 의 #eve_table):
     표        { width:100%; font-size:15px; line-height:1.5em;
                   border-top/left/right: 1px solid #ddd }
     tr         { border-bottom: 1px solid #ddd }
     th         { font-size:15px; font-weight:500; color:#000 }
     th, td     { padding:8px 5px; border-right:1px solid #ddd }
   --------------------------------------------------------------------------- */
.data-table__title {
    margin: 0 0 12px;
    font-size: var(--hm-fs-title, 20px);
    font-weight: var(--hm-weight-bold, 500);
    color: var(--hm-title, var(--color-text, #222));
}

/* 칸이 많은 표는 이 상자 안에서만 밀린다 - 페이지 전체가 가로로 흔들리면 안 된다. */
.data-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table__t {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tb-fs, 15px);
    line-height: var(--tb-lh, 1.5);
    color: var(--hm-text, var(--color-text, #222));
    border-top: 1px solid var(--tb-line, #dddddd);
    border-left: 1px solid var(--tb-line, #dddddd);
    border-right: 1px solid var(--tb-line, #dddddd);
}

.data-table__t th,
.data-table__t td {
    padding: var(--tb-pad-y, 8px) var(--tb-pad-x, 5px);
    border-right: 1px solid var(--tb-line, #dddddd);
    border-bottom: 1px solid var(--tb-line, #dddddd);
    vertical-align: middle;
    /* 줄바꿈을 막지 않는다 - 막으면 긴 글이 표를 끝없이 늘린다. */
    word-break: keep-all;
}

.data-table__t th:last-child,
.data-table__t td:last-child { border-right: none; }

.data-table__t th {
    font-weight: var(--tb-head-w, 500);
    color: var(--tb-head-c, #000000);
    text-align: center;
}

/* 줄무늬는 기본이 꺼져 있다(원본이 안 쌀다). 설정을 켜면 --tb-stripe 가 1 이 된다. */
.data-table__t tbody tr:nth-child(even) td {
    background: var(--tb-stripe-bg, transparent);
}

@media (max-width: 480px) {
    .data-table__t { font-size: calc(var(--tb-fs, 15px) - 1px); }
    .data-table__t th,
    .data-table__t td { padding: var(--tb-pad-y, 8px) 6px; }
}

/* ---------------------------------------------------------------------------
   페이지 머리 (PAGE_HEADER)

   원본 수치(kor/src/css/contents.css):
     section.sub_visual      { width:100%; height:170px; background:...no-repeat center center }
     article.sub_head_title  { width:100%; text-align:center }
     h2.sub                  { padding-top:23px; color:#fff; text-shadow:0 1px 1px #000 }
     h2.sub strong           { display:block; font-size:24px; color:#fff }
     p.h2_line               { margin:10px auto; width:50px; height:1px; background:#d4d4d4 }
     p.navigation            { width:100%; text-align:center; height:30px; line-height:30px;
                               font-size:13px; color:#fff }
     p.navigation img        { margin:0 10px }

   이름이 pg-head 인 이유: page-head 는 섹션이 하나도 없는 커스텀 페이지의 제목 블록이
   이미 쓰고 있다(templates/page.html). 같은 이름을 쓰면 그쪽이 깨진다.
   --------------------------------------------------------------------------- */
.pg-head {
    width: 100%;
    min-height: var(--head-h, 170px);
    display: flex;
    align-items: center;
    background-color: var(--head-bg-color, transparent);
    background-position: var(--head-bg-pos, center center);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* 사진이 있을 때만 배경을 입힌다. 없으면 --head-bg 가 없어 그대로 지나간다. */
.pg-head--img { background-image: var(--head-bg); }

/* 사진 위 글자가 안 읽힐 때만 쓴다. 기본은 0 이라 아무 일도 안 일어난다. */
.pg-head--img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, calc(var(--head-overlay, 0) / 100));
    pointer-events: none;
}

.pg-head__inner {
    position: relative;
    width: 100%;
    max-width: var(--hm-w-body, 1160px);
    margin: 0 auto;
    padding: var(--head-pad-top, 23px) 20px 16px;
    text-align: var(--head-align, center);
    color: var(--head-color, #ffffff);
    text-shadow: var(--head-shadow, 0 1px 1px #000);
}

.pg-head__title {
    margin: 0;
    font-size: var(--head-title-fs, var(--hm-fs-title, 20px));
    font-weight: var(--hm-weight-bold, 500);
    line-height: 1.35;
    color: inherit;
}

/* 작은제목이 줄바꿈되면 큰제목이 아랫줄로 간다(원본 display:block). */
.pg-head__title > strong {
    display: var(--head-eyebrow-disp, block);
    font-size: var(--head-eyebrow-fs, 24px);
    color: inherit;
}

.pg-head__rule {
    width: var(--head-rule-w, 50px);
    height: var(--head-rule-h, 1px);
    margin: var(--head-rule-m, 10px) auto;
    background: var(--head-rule-c, #d4d4d4);
    border: 0;
}

.pg-head__desc {
    margin: 8px 0 0;
    font-size: var(--hm-fs-body, 15px);
    color: inherit;
    opacity: .92;
}

.pg-head__crumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    min-height: var(--crumb-h, 30px);
    font-size: var(--crumb-fs, 13px);
    color: var(--crumb-c, #ffffff);
}

.pg-head__crumb li { display: flex; align-items: center; }

/* 원본은 구분자가 사진이고 좌우 여백이 10px 이었다. 같은 자리에 글자를 둔다. */
.pg-head__crumb li + li::before {
    content: "\203A";
    margin: 0 var(--crumb-sep-m, 10px);
    opacity: .7;
}

.pg-head__crumb a { color: inherit; text-decoration: none; }
.pg-head__crumb a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    /* 폰에서는 높이를 60% 로 줄인다 - 170px 그대로면 화면의 절반을 먹는다. */
    .pg-head { min-height: calc(var(--head-h, 170px) * 0.6); }
    .pg-head__inner { padding-top: calc(var(--head-pad-top, 23px) * 0.6); }
    .pg-head__title > strong { font-size: calc(var(--head-eyebrow-fs, 24px) * 0.8); }
}

/* ---------------------------------------------------------------------------
   출품작 (SHOWCASE)

   목록 모양(열 수·사진 비율·카드 모양)은 __LIST__ 설정 26개를 그대로 읽는다 -
   POST_LIST·디렉토리와 같은 이름을 쓰므로 나중에 목록 조각으로 합칠 때 그대로 간다.
   --------------------------------------------------------------------------- */
.sc-grid__title {
    margin: 0 0 14px;
    font-size: var(--hm-fs-title, 20px);
    font-weight: var(--hm-weight-bold, 500);
    color: var(--hm-title, var(--color-text, #222));
}

.sc-grid__empty {
    margin: 0;
    padding: 28px 0;
    text-align: center;
    color: var(--hm-text-sub, var(--color-text-muted, #6e6e6e));
    font-size: var(--hm-fs-body, 15px);
}

.sc-grid__list {
    display: grid;
    grid-template-columns: repeat(var(--ls-col-pc, 3), minmax(0, 1fr));
    gap: var(--ls-gap, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--ls-card-r, 0);
    background: var(--ls-bg, transparent);
    overflow: hidden;
}

.sc-card__link:hover .sc-card__title { text-decoration: underline; }

.sc-card__thumb {
    display: block;
    aspect-ratio: var(--ls-img-ratio, 4 / 3);
    background: var(--hm-bg-soft, var(--color-bg-soft, #f6f6f6));
    overflow: hidden;
}

.sc-card__thumb > img {
    width: 100%;
    height: 100%;
    object-fit: var(--ls-img-fit, cover);
    display: block;
}

.sc-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 2px 0;
    text-align: var(--ls-align, left);
}

.sc-card__award {
    align-self: flex-start;
    font-size: var(--hm-fs-small, 13px);
    font-weight: var(--hm-weight-bold, 500);
    color: var(--hm-accent, var(--color-primary));
}

.sc-card__title {
    font-size: var(--hm-fs-body, 15px);
    font-weight: var(--hm-weight-bold, 500);
    color: var(--ls-fg, var(--hm-title, var(--color-text, #222)));
    /* 줄 수가 다르면 카드 높이가 어긋난다 - 넘치면 … 로 줄인다. */
    display: -webkit-box;
    -webkit-line-clamp: var(--ls-title-ln, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc-card__company,
.sc-card__meta {
    font-size: var(--hm-fs-small, 13px);
    color: var(--hm-text-sub, var(--color-text-muted, #6e6e6e));
}

.sc-card__meta { display: flex; gap: 8px; flex-wrap: wrap; }

.sc-card__summary {
    font-size: var(--hm-fs-small, 13px);
    color: var(--hm-text, var(--color-text, #222));
    display: -webkit-box;
    -webkit-line-clamp: var(--ls-body-ln, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .sc-grid__list { grid-template-columns: repeat(var(--ls-col-tb, 2), minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    /* 280px 에서 2열이면 카드 하나가 130px 다 - 기본을 1열로 둔다. */
    .sc-grid__list { grid-template-columns: repeat(var(--ls-col-mo, 1), minmax(0, 1fr)); }
}

/* 설정만 실어 나르는 겉상자. 모양은 건드리지 않는다 - CSS 변수를 위젯 안으로
   흘려보내려고 둘렀을 뿐이다(변수는 상속된다). display:contents 를 쓰면 격자에서
   상자가 아예 사라지므로 안쪽 위젯이 원래 자리를 그대로 차지한다. */
.sec-vars {
    display: contents;
}

/* ============================================================================
   구역 골격 (.sec-frame) — 원본 카페쇼의 구역 뼈대.

   원본 main.asp 의 intro · parti · Event · support · sponsor · partner 여섯 구역은
   마크업만 여섯 벌이고 모양은 하나다. main_today.css 에서 잰 값 그대로:

       section { font-size:10px; padding:0 7%; letter-spacing:-0.3px; }
       h2      { width:25%; float:left; border-top:1px solid #000;
                 font-size:8em(=80px) 또는 5.4em(=54px); font-weight:500;
                 padding-top:80px; }
       h2 p    { font-size:17px; margin-top:30px; line-height:1.76; width:90%; }
       article { width:75%; border-top:1px solid #000; border-left:1px solid #000;
                 padding:80px 0 80px 80px; }

   그래서 위젯을 여섯 개 만들지 않았다. 어느 위젯에나 켤 수 있는 골격 하나를 두고
   숫자만 설정으로 바꾼다. 아래 var() 의 뒷값은 전부 원본에서 잰 값이므로,
   설정을 하나도 안 만들면 원본과 같은 모양이 나온다.

   골격을 켜지 않은 위젯에는 이 클래스가 아예 안 붙는다 - 기존 화면은 그대로다.
   ========================================================================= */
.sec-frame {
    /* 원본은 구역이 화면 전체를 쓰고 좌우를 7%씩 띄운다. */
    padding-top: var(--fr-sec-pt, 100px);
    padding-bottom: var(--fr-sec-pb, 0px);
    padding-left: calc(var(--fr-sec-px, 7) * 1%);
    padding-right: calc(var(--fr-sec-px, 7) * 1%);
    width: 100%;
    max-width: none;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--fr-bg, transparent);
    color: var(--fr-fg, inherit);
}

.sec-frame__inner {
    display: grid;
    grid-template-columns: calc(var(--fr-head-w, 25) * 1%) auto;
    max-width: var(--fr-max-w, none);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* 제목 기둥. 원본 h2 그대로 - 위에 실선 하나, 글씨는 크고 500. */
.sec-frame__head {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 0;
    padding: var(--fr-head-pt, 80px) 0 0 0;
    border-top: var(--fr-rule-w, 1px) solid var(--fr-rule-color, #000);
    /* 원본 #parti h2{font-size:8em} 인데 그 구역의 글자 크기가 10px 이라 80px 이다.
       10px 를 구역 전체에 상속시키면 위젯 안의 em 값이 죄다 줄어 엉뚱한 데가 무너지므로,
       제목에만 곱해서 같은 결과를 낸다. */
    font-size: calc(var(--fr-head-fs, 8) * var(--fr-head-unit, 10px));
    font-weight: 500;
    line-height: 1.1;
    text-align: left;
    letter-spacing: var(--fr-letter, -0.3px);
    word-break: keep-all;
}

/* 제목 아래 한 줄 설명(원본 h2 p). */
.sec-frame__head p {
    font-size: var(--fr-desc-fs, 17px);
    font-weight: normal;
    letter-spacing: normal;
    margin: var(--fr-desc-mt, 30px) 0 var(--fr-desc-mb, 0px);
    line-height: 1.76;
    width: 90%;
}

/* 본문. 원본 article 그대로 - 위와 왼쪽에 선, 안쪽 여백 80px. */
.sec-frame__body {
    grid-column: 2;
    grid-row: 1;
    border-top: var(--fr-rule-w, 1px) solid var(--fr-rule-color, #000);
    border-left: var(--fr-rule-w, 1px) solid var(--fr-rule-color, #000);
    padding: var(--fr-body-pt, 80px) 0 var(--fr-body-pb, 80px) var(--fr-body-pl, 80px);
    box-sizing: border-box;
    min-width: 0;
}

/* 게시글목록은 저장된 칸 수만큼 높이를 못 박고 넘치는 것을 자른다 - 한 줄에 나란히
   놓인 옆 칸과 키를 맞추려는 규칙이다(위 .free-grid__item:has(.post-list) 참고).
   골격을 켜면 높이를 정하는 것은 골격이므로 그 고정 높이는 내용을 자르기만 한다. */
.free-grid__item.sec-frame:has(.post-list) {
    height: auto;
    overflow: visible;
}

.free-grid__item.sec-frame:has(.post-list) > .sec-frame__inner .sec-frame__body > .section {
    height: auto;
    overflow: visible;
    padding: 0;
}

/* 골격 안에서는 위젯이 자기 폭·여백을 따로 잡지 않는다 - 그건 골격이 정했다. */
.sec-frame__body > .section,
.sec-frame__body > .pg-head,
.sec-frame__body > .data-table,
.sec-frame__body > .def-list,
.sec-frame__body > .tab-nav {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 제목 자리를 오른쪽으로. 원본에는 없는 배치다(원본은 여섯 구역 모두 왼쪽이다 -
   #Event 는 article 이 float:right 지만 폭이 75% 라 결과가 같다).
   변화를 주고 싶을 때 쓰라고 남겨 둔 선택지다. 칸 순서를 바꾸고 선도 반대쪽으로 옮긴다. */
.sec-frame[style*="--fr-head-side:right;"] .sec-frame__inner {
    grid-template-columns: auto calc(var(--fr-head-w, 25) * 1%);
}

.sec-frame[style*="--fr-head-side:right;"] .sec-frame__head {
    grid-column: 2;
}

.sec-frame[style*="--fr-head-side:right;"] .sec-frame__body {
    grid-column: 1;
    border-left: 0;
    border-right: var(--fr-rule-w, 1px) solid var(--fr-rule-color, #000);
    padding-left: 0;
    padding-right: var(--fr-body-pl, 80px);
}

/* 제목이 가운데 오는 모양. 원본의 두 번째 뼈대다(초이스 · 영상 · 업체검색).
   잰 값: #choice h2{font-size:7em(=70px); font-weight:500}
          #choice h2 span{display:block; font-size:17px; font-weight:300; margin:24px 0 50px}
          #choice{background:#000; color:#fff; text-align:center; padding-top:120px}
   기둥이 없으므로 한 칸이고, 내용을 가르던 세로선도 없다. */
.sec-frame[style*="--fr-head-side:center;"] .sec-frame__inner {
    grid-template-columns: 1fr;
}

.sec-frame[style*="--fr-head-side:center;"] .sec-frame__head {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    border-top: 0;
    padding-top: 0;
}

.sec-frame[style*="--fr-head-side:center;"] .sec-frame__head p {
    width: auto;
    font-weight: 300;
}

.sec-frame[style*="--fr-head-side:center;"] .sec-frame__body {
    grid-column: 1;
    grid-row: 2;
    border-top: 0;
    border-left: 0;
    padding: 0;
}

/* 폰에서는 기둥이 의미가 없다. 원본도 폰은 따로 만든 화면(/kor/m)으로 보냈다 -
   여기서는 한 줄로 쌓고 세로선을 없앤다. */
@media (max-width: 860px) {
    .sec-frame__inner,
    .sec-frame[style*="--fr-head-side:right;"] .sec-frame__inner {
        grid-template-columns: 1fr;
    }

    .sec-frame__head,
    .sec-frame[style*="--fr-head-side:right;"] .sec-frame__head {
        grid-column: 1;
        grid-row: 1;
        /* 원본 값을 그대로 쓰면 폰에서 글자 하나가 화면을 넘는다. */
        font-size: clamp(28px, calc(var(--fr-head-fs, 8) * var(--fr-head-unit, 10px) * 0.7), 64px);
    }

    .sec-frame__head p {
        width: 100%;
    }

    .sec-frame__body,
    .sec-frame[style*="--fr-head-side:right;"] .sec-frame__body {
        grid-column: 1;
        grid-row: 2;
        border-left: 0;
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 32px;
    }
}

/* ============================================================================
   비주얼 글상자 (BANNER 위젯) — 원본 카페쇼의 #visual .vis_box.

   원본은 사진 위에 어두운 네모를 얹고 그 안에 글을 왼쪽으로 붙여 넣는다.
   main_today.css 에서 잰 값 그대로:

       .vis_box { background:rgba(0,0,0,.8); width:600px; height:504px;
                  position:absolute; bottom:-50px; left:7.29%;
                  padding-top:115px; padding-left:80px; color:#fff;
                  text-align:left; }
       h2     { font-size:1.7em(=17px); font-weight:bold; color:#CB0023; }
       strong { font-size:6.4em(=64px); }
       i      { font-size:2.2em(=22px); font-weight:200; }

   (em 기준이 10px 인 것은 구역 골격과 같은 이유다 - 원본 section{font-size:10px}.)

   글상자를 켜지 않으면(hbOn) 이 규칙은 하나도 걸리지 않는다 - 지금 배너 그대로다.
   ========================================================================= */
[style*="--hb-on:1;"] .hero-slide {
    /* 원본은 글을 가운데 띄우지 않는다 - 상자가 자리를 정한다. */
    display: block;
    padding: 0;
    text-align: left;
    /* 상자가 아래로 삐져나오므로 잘리면 안 된다. */
    overflow: visible;
}

[style*="--hb-on:1;"] .hero-slide__content {
    position: absolute;
    bottom: var(--hb-drop, -50px);
    left: calc(var(--hb-inset, 7.29) * 1%);
    right: auto;
    width: var(--hb-w, 600px);
    max-width: calc(100% - var(--hb-pad-l, 80px));
    /* 높이 0 은 "글 높이만큼". 원본은 504px 로 못 박는다. */
    height: var(--hb-h, 504px);
    box-sizing: border-box;
    padding: var(--hb-pad-t, 115px) var(--hb-pad-l, 80px) 0 var(--hb-pad-l, 80px);
    /* 색과 진하기를 따로 정할 수 있어야 해서 color-mix 로 섞는다.
       못 알아듣는 브라우저는 바로 위 줄의 불투명한 색을 쓴다 - 글은 그대로 읽힌다. */
    background: var(--hb-bg, #000);
    background: color-mix(in srgb, var(--hb-bg, #000) calc(var(--hb-bg-alpha, 0.8) * 100%), transparent);
    color: var(--hb-fg, #fff);
    text-align: left;
    z-index: 20;
}

/* 상자가 붙는 쪽. 원본은 왼쪽이다. */
[style*="--hb-side:right;"] .hero-slide__content {
    left: auto;
    right: calc(var(--hb-inset, 7.29) * 1%);
}

[style*="--hb-side:center;"] .hero-slide__content {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* 상자 안의 글. 원본 h2 / strong / i 에 해당한다. */
[style*="--hb-on:1;"] .hero-slide__content .hero__eyebrow {
    display: block;
    padding: 0;
    margin: 0 0 10px;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: bold;
    font-size: calc(var(--hb-eye-fs, 1.7) * var(--hb-unit, 10px));
    color: var(--hb-eye-color, #cb0023);
}

[style*="--hb-on:1;"] .hero-slide__content h1 {
    margin: 0 0 12px;
    font-size: calc(var(--hb-title-fs, 6.4) * var(--hb-unit, 10px));
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--hb-fg, #fff);
    text-shadow: none;
    word-break: keep-all;
}

[style*="--hb-on:1;"] .hero-slide__content p {
    margin: 0 0 14px;
    font-size: calc(var(--hb-body-fs, 2.2) * var(--hb-unit, 10px));
    font-weight: 200;
    color: var(--hb-fg, #fff);
    opacity: 1;
}

/* 상자가 아래로 걸쳐 있으면 그만큼 자리를 비워 둬야 다음 구역을 덮지 않는다. */
[style*="--hb-on:1;"] .hero-carousel,
.free-grid__item[style*="--hb-on:1;"] {
    margin-bottom: calc(-1 * var(--hb-drop, -50px));
    overflow: visible;
}

/* 폰에서는 600px 상자가 화면보다 넓다. 원본도 폰은 따로 만든 화면으로 보냈다 -
   여기서는 상자를 사진 아래 한 줄로 내려 놓는다. */
@media (max-width: 720px) {
    [style*="--hb-on:1;"] .hero-slide__content {
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 28px 20px;
    }

    [style*="--hb-on:1;"] .hero-slide__content h1 {
        font-size: clamp(26px, calc(var(--hb-title-fs, 6.4) * var(--hb-unit, 10px) * 0.55), 48px);
    }

    [style*="--hb-on:1;"] .hero-carousel,
    .free-grid__item[style*="--hb-on:1;"] {
        margin-bottom: 0;
    }
}

/* 출품작 분류 고르기 · 검색창 · 쪽 번호. 값은 목록 위젯 설정(--ls-*)을 그대로 따른다. */
.sc-grid__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.sc-grid__filter a {
    /* 손가락으로 누르는 자리라 36px 밑으로 내리지 않는다. */
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}

.sc-grid__filter a.is-now {
    border-color: currentColor;
    font-weight: 700;
}

.sc-grid__search {
    display: flex;
    gap: 8px;
    margin: 0 0 20px;
}

.sc-grid__search input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 320px;
    /* 16px 밑으로 내리면 아이폰이 칸을 누를 때 화면을 확대한다. */
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
}

.sc-grid__search button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
}

.sc-grid__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}

.sc-grid__pages a {
    /* 손가락으로 누르는 자리라 36px 밑으로 내리지 않는다. */
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}

.sc-grid__pages a.is-now {
    border-color: currentColor;
    font-weight: 700;
}

/* ============================================================================
   출품작 카드 — 무엇을 보이고 사진을 어디 둘지.

   설정은 위젯 바깥 칸에 CSS 변수로 실려 온다. 그래서 자바 코드는 손대지 않고
   여기서 숨기고 옮긴다. 값 뒤 쌍반점까지 보는 이유는 --ls-col-pc:1 이
   --ls-col-pc:12 에 잘못 맞는 일을 막는 것과 같다.

   기본은 전부 보임 · 사진 위 - 설정을 만들지 않으면 지금 화면 그대로다.
   ========================================================================= */
[style*="--sc-f-award:0;"] .sc-card__award,
[style*="--sc-f-company:0;"] .sc-card__company,
[style*="--sc-f-summary:0;"] .sc-card__summary {
    display: none;
}

/* 분류와 부스는 같은 줄(.sc-card__meta) 안에 나란히 있다.
   둘 다 끄면 그 줄까지 없애야 빈 줄이 안 남는다. */
[style*="--sc-f-category:0;"] .sc-card__meta > span:first-child,
[style*="--sc-f-booth:0;"] .sc-card__meta > span:last-child {
    display: none;
}

[style*="--sc-f-category:0;"][style*="--sc-f-booth:0;"] .sc-card__meta {
    display: none;
}

/* 사진 자리 */
[style*="--sc-img-pos:none;"] .sc-card__thumb {
    display: none;
}

[style*="--sc-img-pos:left;"] .sc-card__link,
[style*="--sc-img-pos:right;"] .sc-card__link {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ls-gap, 12px);
}

[style*="--sc-img-pos:right;"] .sc-card__link {
    flex-direction: row-reverse;
}

/* 사진이 옆에 붙으면 폭을 정해 줘야 한다 - 안 그러면 글이 사진을 밀어낸다. */
[style*="--sc-img-pos:left;"] .sc-card__thumb,
[style*="--sc-img-pos:right;"] .sc-card__thumb {
    flex: 0 0 calc(var(--sc-img-w, 38) * 1%);
    max-width: calc(var(--sc-img-w, 38) * 1%);
}

[style*="--sc-img-pos:left;"] .sc-card__body,
[style*="--sc-img-pos:right;"] .sc-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0;
}

/* 폰에서는 옆에 붙이면 둘 다 좁아 못 읽는다. 사진을 위로 되돌린다. */
@media (max-width: 480px) {
    [style*="--sc-img-pos:left;"] .sc-card__link,
    [style*="--sc-img-pos:right;"] .sc-card__link {
        flex-direction: column;
    }

    [style*="--sc-img-pos:left;"] .sc-card__thumb,
    [style*="--sc-img-pos:right;"] .sc-card__thumb {
        flex: 0 0 auto;
        max-width: 100%;
    }

    [style*="--sc-img-pos:left;"] .sc-card__body,
    [style*="--sc-img-pos:right;"] .sc-card__body {
        padding-top: 10px;
    }
}

/* 참가업체 거르기 축. 가나다 색인은 단추가 40개까지 되므로 줄을 접어 흐르게 둔다. */
.directory__axes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 18px;
}

.directory__axis {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.directory__axis-label {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.directory__axis nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.directory__axis a {
    /* 손가락으로 누르는 자리라 36px 밑으로 내리지 않는다. */
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

.directory__axis a.is-now {
    border-color: currentColor;
    font-weight: 700;
}

/* 명단 내려받기 단추. 목록 위가 아니라 검색줄 밑에 둔다 - 먼저 걸러 보고 받는 순서다. */
.directory__download {
    margin: 0 0 16px;
}

.directory__download a {
    /* 손가락으로 누르는 자리라 36px 밑으로 내리지 않는다. */
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}

/* 마이페이지 맨 아래 탈퇴 링크. 눈에 먼저 들어오면 안 되지만 못 찾아도 안 된다. */
.mypage-withdraw {
    margin: 40px 0 0;
    text-align: right;
}

.mypage-withdraw a {
    /* 손가락으로 누르는 자리라 36px 밑으로 내리지 않는다. */
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 13px;
    text-decoration: underline;
}

/* ============================================================================
   견적서 위젯 — 원본 estimate.asp.
   종이로 뽑는 것이 목적이라 인쇄할 때는 입력칸 테두리와 단추를 지운다.
   ========================================================================= */
.est__who {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 0 0 18px;
}

.est__who label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.est__who input {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 10px;
    /* 16px 밑으로 내리면 아이폰이 칸을 누를 때 화면을 확대한다. */
    font-size: 16px;
    min-width: 0;
    width: 160px;
}

/* 표는 좁은 화면에서 제 상자 안에서만 밀린다 - 페이지 전체가 흔들리면 안 된다. */
.est__wrap { overflow-x: auto; }

.est__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.est__table th {
    background: var(--color-bg-soft, #f6f6f6);
    border-top: 2px solid var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 8px;
    font-size: 14px;
    text-align: left;
}

.est__table td {
    border-bottom: 1px solid var(--color-border);
    padding: 10px 8px;
    font-size: 14px;
}

.est__num { text-align: right; font-variant-numeric: tabular-nums; }

.est__qty {
    width: 72px;
    text-align: right;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px;
    font-size: 16px;
}

.est__sum {
    margin: 16px 0 0 auto;
    border-collapse: collapse;
    min-width: 240px;
}

.est__sum td { padding: 6px 8px; font-size: 14px; }

.est__sum .est__total td {
    border-top: 2px solid var(--color-text);
    font-size: 17px;
    font-weight: 700;
    padding-top: 10px;
}

.est__note {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: pre-line;
}

.est__actions { margin: 18px 0 0; }

.est__print {
    /* 손가락으로 누르는 자리라 36px 밑으로 내리지 않는다. */
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    cursor: pointer;
}

@media print {
    /* 종이에서는 입력칸이 칸처럼 보이면 안 된다 - 적힌 값만 남긴다. */
    .est__who input, .est__qty {
        border: 0;
        padding: 0;
        background: none;
    }
    .est__actions { display: none; }
}

/* 사전등록 확인 화면의 "확인서 보기". 등록번호 옆에 붙는다. */
.prc-slip {
    /* 손가락으로 누르는 자리라 36px 밑으로 내리지 않는다. */
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

/* 보기를 위아래로 한 줄에 하나씩. 문항마다 사무국이 고른다(안 고르면 위의 좌우 배치 그대로).
   보기 글이 긴 문항은 좌우로 갈리면 읽기 나쁘고, 짧은 문항은 세우면 화면만 길어진다.

   grid-auto-rows:1fr 인 이유 - 좌우로 놓을 때는 한 줄에 같이 선 보기들이 align-items:stretch 로
   키가 맞았다. 위아래로 세우면 보기마다 제 줄을 가져서 키가 제각각이 된다(설명이 달린 보기만
   한 줄 더 높아진다). 1fr 을 주면 줄들이 가장 큰 것에 맞춰져 좌우일 때와 같이 가지런하다. */
.survey-choice-group--stack {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
}

/* 보기 안쪽: 이름과 승인 뱃지는 한 줄에, 설명은 그 밑에.
   상자 자체가 가로 배치라서 한 겹 싸서 세로로 쌓는다. */
.survey-choice__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.survey-choice__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* 이 자리에서는 위·왼쪽 여백이 필요 없다(동의 목록에서 쓰던 값이라 들여쓰기가 들어 있었다). */
.survey-choice__text .consent-item__body {
    margin: 0;
}

/* 첨부파일 문항. 파일 고르기 칸은 손가락으로 누르는 자리라 36px 밑으로 내리지 않는다. */
.survey-file { display: flex; flex-direction: column; gap: 4px; }
.survey-file input[type=file] { font-size: 13px; min-height: 38px; }
.survey-file__hint { font-size: 11.5px; color: var(--color-text-muted, #777); }

/* ---------------------------------------------------------------------------
   참가비(부스) 표 - 가입 화면. "홈페이지 수정 3차" 6쪽 표를 그대로 옮긴 것이다.
   좁은 화면에서는 가로로 밀어 본다(칸이 7개라 줄이면 글자가 깨진다).
   --------------------------------------------------------------------------- */
/* 가로로 밀어 보게 하지 않는다 - 신청하는 자리에서 옆으로 밀어야 금액이 보이면 안 된다.
   좁아지면 아래에서 표를 칸(카드)으로 세운다. */
.booth-fee__wrap { overflow-x: visible; }

.booth-fee__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    /* 칸 너비를 내용이 정하게 두면 개수를 올려 비용 자릿수가 늘 때마다 그 칸이 넓어지면서
       표 전체가 들썩인다. 아래 colgroup 의 너비로 고정한다. */
    table-layout: fixed;
}

/* 칸을 고정했으니 안의 글이 밖으로 비어져 나오면 안 된다.
   숫자 <b>덩어리</b>만 안 쪼개고(1,200,000원), 덩어리 사이에서는 줄이 바뀌게 둔다 -
   통째로 nowrap 을 걸었더니 "700,000원/부스" 가 칸을 넘어갔다. */
.booth-fee__table td,
.booth-fee__table th { overflow-wrap: break-word; }

.booth-fee__table tfoot th,
.booth-fee__won,
.booth-fee__line,
#boothSupply, #boothVat, #boothTotal { white-space: nowrap; }

.booth-fee__unit { color: var(--color-text-muted, #888); font-size: 13px; }

/* 부스크기는 줄이 바뀌어도 된다 - 다만 '×' 뒤에서만 끊긴다(화면이 거기에 폭 없는 공백을 넣어 둔다).
   숫자 가운데가 잘리지 않게 keep-all 로 묶어 둔다. */
.booth-fee__size { word-break: keep-all; line-height: 1.5; }

.booth-fee__table th,
.booth-fee__table td {
    border: 1px solid var(--color-border, #e3e3e3);
    padding: 10px 12px;
    vertical-align: middle;
}

.booth-fee__table thead th {
    background: var(--color-bg-soft, #f7f7f8);
    font-weight: 700;
    white-space: nowrap;
}

.booth-fee__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.booth-fee__table thead .num { text-align: right; }

.booth-fee__name { font-weight: 700; word-break: keep-all; }

/* 부스 시안. 표가 사진에 밀려 길어지지 않게 높이를 묶어 둔다 - 누르면 원본을 새 창에서 본다. */
.booth-fee__shot { width: 150px; text-align: center; }
.booth-fee__shot img {
    width: 100%;
    max-width: 130px;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}
.booth-fee__noshot { color: var(--color-text-muted, #aaa); }

.booth-fee__qty {
    width: 72px;
    text-align: right;
    padding: 6px 8px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
}
.booth-fee__qty + small {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--color-text-muted, #999);
    white-space: nowrap;
}

.booth-fee__desc { font-size: 13px; line-height: 1.6; word-break: keep-all; }

.booth-fee__table tfoot th {
    text-align: right;
    background: var(--color-bg-soft, #fafafa);
    font-weight: 700;
}
.booth-fee__table tfoot td { font-weight: 700; }

/* 총 합계는 한눈에 보여야 한다 - 이 표를 보는 까닭이 그 숫자다.
   "총 합계(VAT 포함)" 는 한 줄로 둔다 - 두 줄로 접히면 그 줄만 키가 커져 표가 어긋나 보인다. */
.booth-fee__total th,
.booth-fee__total td {
    background: var(--brand-blush);
    color: var(--brand-ink);
    font-size: 16px;
    white-space: nowrap;
}

.booth-fee__note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--color-text-muted, #777);
}

.booth-fee__bank {
    margin: 10px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--color-bg-soft, #f7f7f8);
    font-size: 13px;
}
.booth-fee__bank small {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted, #888);
}

.booth-fee__lead { margin: 0 0 14px; font-size: 13.5px; color: var(--color-text-muted, #777); }
/* 혼자서는 못 고르는 줄(코너부스)에 다는 꼬리표. */
.booth-fee__name small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400;
    color: var(--color-text-muted, #999); }

/* 좁은 화면: 표를 줄줄이 세운다. 칸 이름은 각 줄 앞에 붙여 준다(data-label).
   가로 스크롤 없이 모든 값이 보이는 것이 목적이다. */
@media (max-width: 860px) {
    .booth-fee__table { min-width: 0; table-layout: auto; }
    .booth-fee__table colgroup { display: none; }
    .booth-fee__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .booth-fee__table tbody tr {
        display: block;
        border: 1px solid var(--color-border, #e3e3e3);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .booth-fee__table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        padding: 5px 0;
        text-align: left;
    }
    .booth-fee__table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 12.5px;
        color: var(--color-text-muted, #888);
    }
    .booth-fee__table tbody td.num { text-align: right; }
    /* 부스 이름과 시안은 이름표 없이 위에 크게 둔다 - 그 줄이 무엇인지부터 보여야 한다. */
    .booth-fee__table .booth-fee__name { font-size: 16px; padding-bottom: 8px; }
    .booth-fee__table .booth-fee__name::before,
    .booth-fee__table .booth-fee__shot::before { content: none; }
    .booth-fee__table .booth-fee__shot { display: block; width: auto; padding: 0 0 10px; }
    .booth-fee__table .booth-fee__shot img { max-width: 220px; }
    .booth-fee__table .booth-fee__desc { display: block; padding-top: 10px; }
    .booth-fee__table .booth-fee__desc::before { display: block; margin-bottom: 2px; }

    /* 합계 줄은 표 꼬리 그대로 두되, 빈 칸을 없애고 이름·숫자만 남긴다. */
    .booth-fee__table tfoot tr { display: flex; justify-content: space-between; gap: 12px; }
    .booth-fee__table tfoot th { flex: 1; text-align: left; border: 0; background: none; }
    .booth-fee__table tfoot td { border: 0; }
    .booth-fee__table tfoot td:empty { display: none; }
    .booth-fee__total th, .booth-fee__total td { background: var(--brand-blush); }
}

/* ============================================================================
   HANDMADE FESTA 2027 — 브랜드 레이어
   ---------------------------------------------------------------------------
   위쪽 :root 에서 색을 바꾼 것만으로 사이트 대부분이 따라온다(토큰을 쓰는 규칙이
   337 군데다). 여기서는 토큰만으로는 안 되는 것 — 글자 체계, 구역 리듬, 어두운
   바탕에서의 로고·표 — 만 손본다.

   대비(시인성)는 셋 중 하나만 쓴다.
       흰 바탕    + 먹색 글자        15.9:1
       먹색 바탕  + 흰 글자          15.9:1   / 연분홍 글자 11.7:1
       연분홍 바탕+ 먹색 글자        11.7:1
   연분홍을 흰 바탕 위 글자색으로 쓰는 조합(1.3:1)은 어디에도 두지 않는다.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 글자
   라틴 대문자 제목만 Poppins 가 받는다. 한글이 섞인 줄은 Pretendard 로 자연스럽게
   넘어간다 - Poppins 에는 한글이 없어서 브라우저가 알아서 다음 글꼴을 쓴다.
   --------------------------------------------------------------------------- */
h1, h2, h3,
.site-logo,
.hero-slide__content h1,
.section-title,
.page-title {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    word-break: keep-all;          /* 한글이 글자 단위로 끊기지 않게 */
}

h1, h2, h3 { text-wrap: balance; }

/* 영문 작은 라벨 - 브랜드 그래픽의 넓은 자간을 그대로 가져온다. */
.hero__eyebrow,
.brand-eyebrow {
    font-family: var(--font-display);
    letter-spacing: 0.14em;
}

/* 숫자가 세로로 줄 맞춰 읽혀야 하는 곳(금액·수량·날짜). */
.booth-fee__table td.num,
.booth-fee__table th.num,
.pd-table .num,
.pd-dl dd {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   2. 머리글
   로고가 검정 글자 그림(배경 투명)이라 머리글 바탕은 흰색을 지킨다 - 어두운 머리글로
   바꾸면 로고가 사라진다. 대신 아래 테두리를 연분홍으로 깔아 브랜드를 띄운다.
   --------------------------------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
}

.site-header::after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-ink) 0%, var(--brand-ink) 38%, var(--brand-blush) 38%, var(--brand-blush) 100%);
}

/* ---------------------------------------------------------------------------
   3. 꼬리글 - 여기만 먹색 바탕이다. 사이트를 아래에서 받쳐 주는 면.
   --------------------------------------------------------------------------- */
.site-footer {
    border-top: 0;
    border-image: none;
    background-color: var(--brand-ink);
    color: #ffffff;
}

.site-footer__inner {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--brand-blush); }

/* 로고·글자 그림은 검정 선으로 그려져 있어(배경 투명) 먹색 바탕에서는 보이지 않는다.
   파일을 고치지 않고 색만 뒤집어 흰 그림으로 쓴다 - 배경이 투명이라 네모가 생기지 않는다.

   꼬리글에 들어가는 그림은 사무국이 올리는 브랜드 마크다. 혹시 사진을 넣고 싶으면
   그 그림에 class="no-invert" 를 주면 이 규칙을 비껴간다. */
.site-footer .site-logo img,
.site-footer .hf-logo-box img,
.site-footer .hf-text img,
.site-footer .text-inline-image,
.site-footer img[alt*="로고"],
.site-footer img[alt*="logo"],
.site-footer img[alt*="LOGO"] {
    filter: invert(1);
}

.site-footer img.no-invert { filter: none; }

/* 꼬리글 숨통. 정보가 바닥에 붙어 있으면 읽다 만 것처럼 보인다. */
.site-footer .hf-canvas--footer {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   4. 구역 바탕 - 흰색 / 연분홍 / 먹색 셋을 번갈아 쓰면 페이지에 리듬이 생긴다.
   관리자가 섹션 배경색을 직접 고르는 길(Exhibit_Section.BgColor)은 그대로 두고,
   여기서는 그 색을 안 고른 구역이 쓰는 기본값만 다듬는다.
   --------------------------------------------------------------------------- */
.brand-band--blush {
    background: var(--brand-blush);
    color: var(--brand-ink);
}

.brand-band--ink {
    background: var(--brand-ink);
    color: #ffffff;
}

.brand-band--ink h1,
.brand-band--ink h2,
.brand-band--ink h3 { color: #ffffff; }

/* 먹색 구역 안의 강조 글자는 연분홍으로(11.7:1). */
.brand-band--ink .brand-accent { color: var(--brand-blush); }

/* ---------------------------------------------------------------------------
   5. 카드·표
   테두리를 연하게 하고 모서리를 키워 그래픽의 넓은 면 느낌을 따라간다.
   --------------------------------------------------------------------------- */
.pd-table thead th,
.booth-fee__table thead th {
    background: var(--brand-ink);
    color: #ffffff;
    border-color: var(--brand-ink);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pd-table tbody th,
.booth-fee__table tbody th {
    background: var(--brand-cream);
}

/* 합계 줄 - 연분홍 바탕에 먹색 글자. */
.booth-fee__total th,
.booth-fee__total td,
.pd-table tfoot th,
.pd-table tfoot td {
    background: var(--brand-blush);
    color: var(--brand-ink);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   6. 입력칸 - 포커스는 먹색 테두리로 또렷하게(연분홍은 흰 바탕에서 안 보인다).
   --------------------------------------------------------------------------- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px var(--brand-blush);
}

/* 키보드로 이동할 때 지금 어디인지 항상 보이게. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   7. 선택 영역 - 드래그했을 때도 브랜드 안에서 논다.
   --------------------------------------------------------------------------- */
::selection {
    background: var(--brand-blush);
    color: var(--brand-ink);
}

/* ---------------------------------------------------------------------------
   8. 카드 메뉴 (전시품목 · 참가신청 · 뉴스레터 …)
   브랜드 그래픽의 성격은 <둥근 모서리와 옅은 테두리>가 아니라 <각진 넓은 면>이다.
   모서리를 줄이고 테두리를 없애, 사진 면과 글자 면이 바로 맞붙게 한다.
   올리면 글자 면이 연분홍으로 바뀐다 - 먹색 글자가 그대로라 11.7:1 을 지킨다.
   --------------------------------------------------------------------------- */
.card {
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 0 var(--color-border);
    transition: transform .22s ease, box-shadow .22s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.card__img-wrap { border-radius: 0; }

.card__body {
    position: relative;
    background: #ffffff;
    transition: background-color .22s ease;
}

.card:hover .card__body { background: var(--brand-blush); }

/* 제목 아래 짧은 줄 하나. 카드마다 같은 자리에 와서 묶음으로 읽힌다. */
.card__body h3::after,
.card__body .card__title::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin: 10px auto 0;
    background: var(--brand-ink);
}

/* ---------------------------------------------------------------------------
   9. 글 목록 (공지사항 · FAQ)
   머리글은 먹색 굵은 글자, "더보기"는 빨강이 아니라 먹색 - 사이트에 빨강은 없다.
   --------------------------------------------------------------------------- */
.post-list__head {
    border-bottom: 2px solid var(--brand-ink);
    padding-bottom: 10px;
}

.post-list__more {
    color: var(--brand-ink);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.post-list__more:hover { text-decoration: underline; }

.post-list__item { border-bottom: 1px solid var(--color-border); }

.post-list__item:hover .post-list__title { color: var(--brand-ink); }

/* 목록에 마우스를 올리면 그 줄만 연분홍으로 들어온다 - 어디를 누르는지 분명해진다. */
.post-list__link:hover {
    background: var(--brand-blush);
    box-shadow: 0 0 0 6px var(--brand-blush);
    border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   10. 배너(히어로)
   눈썹 글자를 연분홍 판으로 바꿔 어두운 배너 위에 브랜드색을 한 번 올린다.
   먹색 글자가 올라가므로 11.7:1 이다 - 반투명 흰 판보다 또렷하다.
   --------------------------------------------------------------------------- */
.hero__eyebrow {
    background: var(--brand-blush);
    border: 0;
    color: var(--brand-ink);
    backdrop-filter: none;
    font-weight: 700;
    border-radius: 2px;
    padding: 7px 18px;
}

.hero-slide__content h1 {
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.18;
}

/* 배너 버튼 - 연분홍 채움에 먹색 글자. 어두운 배너에서 가장 먼저 눈에 들어온다. */
.hero-slide__content .btn--primary {
    background: var(--brand-blush);
    color: var(--brand-ink);
    border: 0;
    backdrop-filter: none;
    font-weight: 700;
    border-radius: 999px;
}

.hero-slide__content .btn--primary:hover {
    background: #ffffff;
    color: var(--brand-ink);
    border: 0;
}

/* ---------------------------------------------------------------------------
   11. 구역 제목 - 라틴은 Poppins, 아래에 짧은 먹색 줄.
   --------------------------------------------------------------------------- */
.section-title,
.hf-section__title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   12. 메인 배너 (hm-hero)
   위젯 편집기의 자유배치는 화면 폭마다 좌표를 따로 저장한다. 큰 글자를 쓰는 배너에서는
   그 방식이 폭마다 글자가 넘치거나 겹치는 쪽으로 간다 - 그래서 이 배너만 좌표 대신
   보통의 반응형 HTML 로 짰다(관리자 "콘텐츠 HTML" 칸에 들어 있다).
   --------------------------------------------------------------------------- */
.hm-hero {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;           /* 배경 링크를 막지 않는다. 버튼만 아래에서 되살린다 */
}

.hm-hero__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: 48px;
}

.hm-hero__eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 7px 14px;
    background: var(--brand-blush);
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.hm-hero__title {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(38px, 5.4vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.hm-hero__title span { display: block; }
/* 두 번째 줄만 연분홍 - 브랜드색을 어두운 바탕에 한 번 올린다(11.7:1). */
.hm-hero__title span + span { color: var(--brand-blush); }

.hm-hero__lead {
    margin: 0 0 30px;
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    line-height: 1.85;
    word-break: keep-all;
}

.hm-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hm-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.hm-btn--blush {
    background: var(--brand-blush);
    color: var(--brand-ink);          /* 연분홍 바탕 + 먹색 글자 = 11.7:1 */
}

.hm-btn--blush:hover { background: #ffffff; transform: translateY(-2px); }

.hm-btn--line {
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
}

.hm-btn--line:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }

/* 오른쪽 사실 패널 - 레퍼런스 그래픽의 연분홍 판을 그대로 가져온 자리다.
   날짜·장소·마감만 담는다. 배너에서 알아야 할 것이 그 셋이다. */
.hm-hero__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.hm-fact {
    background: var(--brand-blush);
    color: var(--brand-ink);
    padding: 16px 20px;
    display: grid;
    gap: 2px;
}

.hm-fact__k {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.72;
}

.hm-fact__v {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.hm-fact__dash { margin: 0 2px; }

.hm-fact__sub { font-size: 12.5px; opacity: 0.72; }

@media (max-width: 1023px) {
    .hm-hero__inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 36px 24px;
    }
    .hm-hero { align-items: center; }
    .hm-hero__facts { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .hm-fact { padding: 12px 14px; }
    .hm-fact__v { font-size: 18px; }
}

@media (max-width: 599px) {
    .hm-hero__lead { display: none; }   /* 좁은 화면에서는 제목과 버튼이 먼저다 */
    .hm-hero__facts { grid-template-columns: 1fr; }
    .hm-fact { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; }
    .hm-fact__k { opacity: .62; }
    .hm-fact__v { font-size: 17px; }
    .hm-fact__sub { margin-left: auto; }
}

/* 이 배너는 자체 어두운 바탕을 쓰므로, 위젯이 깔아 주는 반투명 덮개는 한 겹이면 충분하다. */
.hero-slide:has(.hm-hero) .hero-slide__overlay {
    background: linear-gradient(104deg, rgba(35, 31, 32, 0.96) 0%, rgba(35, 31, 32, 0.86) 48%, rgba(35, 31, 32, 0.72) 100%);
}

/* 콘텐츠 HTML 칸은 position:absolute 에 크기가 없어서 그대로 두면 칸이 0 이 된다. */
.hero-slide__html:has(.hm-hero) { inset: 0; }

/* ---------------------------------------------------------------------------
   13. 배너를 왼쪽으로 세운다
   가운데 정렬은 안내문처럼 읽히고, 왼쪽 정렬은 브랜드처럼 읽힌다. 큰 글자일수록
   시작선이 하나로 맞아 떨어지는 쪽이 정돈돼 보인다.
   --------------------------------------------------------------------------- */
.hero-slide:has(.hm-hero) { padding: 0; text-align: left; }
.hm-hero__inner { max-width: 1280px; padding: 0 clamp(24px, 5vw, 72px); gap: clamp(32px, 5vw, 80px); }
.hm-hero__left { text-align: left; }

/* 제목 왼쪽에 연분홍 세로선 - 브랜드 색을 글자 옆에 세워 둔다. */
.hm-hero__title {
    position: relative;
    padding-left: clamp(16px, 1.6vw, 26px);
}

.hm-hero__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.12em;
    bottom: 0.12em;
    width: 4px;
    background: var(--brand-blush);
}

.hm-hero__lead { max-width: 46ch; }

/* ---------------------------------------------------------------------------
   14. 카드 메뉴 다시 - 연분홍 면을 기본으로 쓴다
   사진 아래 글자 칸을 늘 연분홍으로 둔다. 먹색 글자가 올라가므로 11.7:1 이고,
   화면에 분홍 면이 늘 세 칸 이상 깔려 브랜드가 계속 보인다.
   --------------------------------------------------------------------------- */
.card {
    border-radius: 0;
    box-shadow: none;
    background: var(--brand-blush);
}

.card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(35, 31, 32, .16); }

.card__img-wrap { overflow: hidden; }

.card__img {
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
    filter: saturate(.92);
}

.card:hover .card__img { transform: scale(1.05); }

.card__body {
    background: var(--brand-blush);
    color: var(--brand-ink);
    padding: 22px 22px 26px;
    text-align: left;
}

.card:hover .card__body { background: var(--brand-ink); color: #ffffff; }

.card__body h3,
.card__body .card__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: inherit;
}

.card__body p { color: inherit; opacity: .78; font-size: 13.5px; line-height: 1.7; margin: 0; }

/* 제목 아래 줄은 왼쪽 정렬에 맞춰 왼쪽에서 시작한다. */
.card__body h3::after,
.card__body .card__title::after {
    margin: 10px 0 0;
    background: currentColor;
    opacity: .5;
}

/* 오른쪽 아래 화살표 - 누를 수 있는 칸이라는 표시. */
.card__body::after {
    content: "\2192";
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 17px;
    opacity: .45;
    transition: transform .25s ease, opacity .25s ease;
}

.card:hover .card__body::after { transform: translateX(4px); opacity: 1; }

/* ---------------------------------------------------------------------------
   15. 머리글 - 연분홍 띠를 얇게 한 줄 깔아 색이 위에서부터 보이게 한다.
   --------------------------------------------------------------------------- */
.site-header::after {
    height: 4px;
    background: linear-gradient(90deg,
        var(--brand-ink) 0%, var(--brand-ink) 26%,
        var(--brand-blush) 26%, var(--brand-blush) 100%);
}

/* 메뉴에 올렸을 때 밑줄은 먹색 대신 연분홍 - 흰 바탕이라 글자색은 그대로 먹색이다. */
.mega-nav__label::after { background: var(--brand-blush); height: 3px; }
.mega-nav__item:hover .mega-nav__label::after { width: 100%; }

/* ---------------------------------------------------------------------------
   16. 글 목록 머리글 - 작은 라틴 라벨과 연분홍 밑줄로 격을 맞춘다.
   --------------------------------------------------------------------------- */
.post-list__head {
    border-bottom: 0;
    position: relative;
    padding-bottom: 14px;
}

.post-list__head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-ink) 0 56px, var(--brand-blush) 56px);
}

.post-list__link:hover { box-shadow: 0 0 0 5px var(--brand-blush); }

/* ---------------------------------------------------------------------------
   17. 다듬기
   - 머리글 아래 띠는 연분홍 한 줄로. 두 색을 나눠 칠하니 끝나는 자리가 뜬금없었다.
   - 배너 아래 빈 공간을 줄인다.
   --------------------------------------------------------------------------- */
.site-header::after {
    height: 3px;
    background: var(--brand-blush);
}

/* 배너 안쪽 여백. 배너 자체의 키는 위젯 설정(--banner-height)이 정한다 - 내용이
   position:absolute 라서 min-height 를 지우면 배너가 통째로 사라진다. */
.hm-hero__inner { padding-top: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------------------
   18. 구역 제목 - 작은 라틴 라벨 + 큰 한글 제목. 명품 브랜드 페이지의 기본 짜임이다.
   --------------------------------------------------------------------------- */
.hm-sec-head {
    display: grid;
    gap: 10px;
    margin: 0 0 30px;
}

.hm-sec-head__label {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.hm-sec-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.hm-sec-head__title em {
    font-style: normal;
    background: linear-gradient(transparent 62%, var(--brand-blush) 62%);
}

/* ---------------------------------------------------------------------------
   19. 게시글 목록 - 줄 간격과 글자 크기를 올려 읽기 편하게.
   --------------------------------------------------------------------------- */
.post-list__link { padding: 12px 2px; }
.post-list__title { font-size: 14.5px; }
.post-list__date { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---------------------------------------------------------------------------
   20. 표 - 머리줄은 먹색, 테두리는 가늘게. 숫자는 자리 맞춰 세운다.
   --------------------------------------------------------------------------- */
.pd-table,
.booth-fee__table {
    border-collapse: collapse;
}

.pd-table th,
.pd-table td,
.booth-fee__table th,
.booth-fee__table td {
    border-color: var(--color-border);
}

/* ---------------------------------------------------------------------------
   21. 움직임을 줄여 달라고 한 사람에게는 움직이지 않는다.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   22. 배너 반응형 - 좁은 화면에서는 키를 놓아 준다
   위젯이 정한 배너 높이(--banner-height)는 넓은 화면을 보고 정한 값이다. 좁은 화면에서
   그 키를 그대로 지키면 글자가 넘치거나 반대로 빈 칸이 크게 남는다. 그래서 좁아지면
   내용이 키를 정하게 바꾼다 - 배너 내용을 흐름 안으로 되돌려(static) 놓으면 된다.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* 배너 칸 전체가 내용 키를 따르게 한다. 한 곳만 풀면 나머지가 550px 를 붙잡는다. */
    .hero-carousel:has(.hm-hero),
    .hero-carousel:has(.hm-hero) .hero-carousel__track,
    .hero-slide:has(.hm-hero) {
        height: auto;
        min-height: 0 !important;      /* 위젯이 인라인으로 넣는 값을 이긴다 */
    }
    .free-grid__item:has(.hm-hero) { grid-row: auto; height: auto; }
    /* 슬라이드가 flex 인 채로 두면 흐름으로 되돌린 내용이 가로로 쪼그라든다. */
    .hero-slide:has(.hm-hero) {
        display: block;
        padding: 0;
    }
    .hero-slide__html:has(.hm-hero) { position: static; width: 100%; }
    .hm-hero {
        position: static;
        display: block;
    }
    .hm-hero__inner {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    /* 덮개는 흐름에서 빠져 있으므로 배너 전체를 다시 덮게 둔다. */
    .hero-slide:has(.hm-hero) .hero-slide__overlay { position: absolute; inset: 0; }
}

@media (max-width: 760px) {
    .hm-hero__inner { padding-top: 40px; padding-bottom: 40px; gap: 26px; }
    .hm-hero__title { font-size: clamp(32px, 9vw, 46px); padding-left: 14px; }
    .hm-hero__title::before { width: 3px; }
    .hm-hero__eyebrow { font-size: 11px; letter-spacing: .12em; }
    .hm-hero__cta { gap: 8px; }
    .hm-btn { min-height: 46px; padding: 0 20px; font-size: 14px; flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   23. 화면이 좁을 때 전반
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
    /* 카드 - 한 줄에 하나. 사진이 너무 길어지지 않게 비율을 묶는다. */
    .card__img-wrap { aspect-ratio: 16 / 10; }
    .card__body { padding: 18px 18px 22px; }
    .card__body h3, .card__body .card__title { font-size: 17px; }

    /* 표는 본문을 밀지 않고 자기 칸 안에서만 가로로 민다. */
    .pd-tablebox, .booth-fee__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 구역 제목 */
    .hm-sec-head__title { font-size: 22px; }

    /* 꼬리글 로고가 화면을 가득 채우지 않게. */
    .site-footer .text-inline-image { max-width: 230px; }
}

/* 어떤 화면에서도 가로 스크롤은 생기지 않게 한다. */
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------------------
   24. 머리글 - 맨 위에서는 배너에 얹히고, 내리면 흰 바닥이 깔린다
   브랜드 사이트가 흔히 쓰는 방식이다. 배너 위에서는 틀이 사라져 사진·영상이 화면 끝까지
   이어지고, 글을 읽기 시작하면(= 스크롤) 머리글이 제 바닥을 되찾아 글을 가린다는 느낌이
   없어진다.

   로고는 검정 글자 그림이라 배너 위(어두움)에서는 뒤집어 흰 로고로 보여 준다 -
   내리면 다시 원래 검정으로 돌아온다. 어느 쪽에서도 로고가 묻히지 않는다.
   --------------------------------------------------------------------------- */
.site-header.hf-bar--overlap {
    /* 맨 위 - 완전히 투명하면 영상의 밝은 장면이 지나갈 때 메뉴 글씨가 사라진다.
       아주 옅은 먹색 유리를 한 겹 깔아 둔다: 영상은 비치고 글씨는 늘 읽힌다. */
    background: rgba(35, 31, 32, .30);
    border-bottom: 0;
    box-shadow: none;
    transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

/* 맨 위 - 배너 위에 얹힌 상태. 글자는 흰색. */
.site-header.hf-bar--overlap:not(.is-scrolled) { color: #ffffff; }

.site-header.hf-bar--overlap:not(.is-scrolled) a,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__label,
.site-header.hf-bar--overlap:not(.is-scrolled) .mega-nav__label,
.site-header.hf-bar--overlap:not(.is-scrolled) .site-nav__member {
    color: #ffffff;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .site-logo img,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-logo-box img {
    filter: invert(1);
}

/* 얹힌 상태에서는 아래 띠를 아주 연하게 - 선이 사진을 가로지르지 않게. */
.site-header.hf-bar--overlap:not(.is-scrolled)::after {
    background: rgba(250, 216, 231, .38);
    height: 1px;
}

/* 펼침 메뉴는 얹힌 상태에서도 바탕이 있어야 읽힌다. */
.site-header.hf-bar--overlap:not(.is-scrolled) .mega-nav__sub,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__sub {
    background: var(--brand-ink);
    color: #ffffff;
}

/* 내린 상태 - 흰 바닥 + 먹색 글자 + 연분홍 띠. */
/* 내리면 흰색으로 고정. 비침 없이 완전한 흰 바닥이라 글이 머리글에 가려 보이지 않는다. */
.site-header.hf-bar--overlap.is-scrolled {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(35, 31, 32, .06), 0 10px 30px rgba(35, 31, 32, .07);
}

.site-header.hf-bar--overlap.is-scrolled::after {
    height: 3px;
    background: var(--brand-blush);
}

/* 얹힘이 켜지면 본문이 머리글 아래로 들어가야 배너가 화면 끝까지 닿는다. */
.site-header.hf-bar--overlap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
}

/* 배너가 머리글 높이만큼 가려지지 않도록, 배너 안쪽 내용만 아래로 내린다. */
.hm-hero__inner { padding-top: 92px; }

@media (max-width: 1023px) {
    .hm-hero__inner { padding-top: 120px; }
}

/* ---------------------------------------------------------------------------
   25. 배너 배경 영상
   영상은 분위기이지 내용이 아니다. 먹색으로 깊게 덮어 글자가 어디서나 읽히게 한다.
   좁은 화면(휴대전화 데이터)에서는 아예 받지 않고 먹색 바탕만 보여 준다.
   --------------------------------------------------------------------------- */
.hero-slide__bg {
    filter: saturate(.85) contrast(1.02);
}

@media (max-width: 760px) {
    .hero-slide video.hero-slide__bg { display: none; }
}

/* ---------------------------------------------------------------------------
   26. 배너 글자가 영상 위에서 확실히 읽히게
   영상은 밝은 장면과 어두운 장면이 번갈아 나온다. 글자 쪽만 깊게 덮어 두면 어떤 장면이
   와도 대비가 유지되고, 반대쪽은 영상이 그대로 보인다 - 전체를 균일하게 덮는 것보다
   영상도 살고 글자도 산다.
   --------------------------------------------------------------------------- */
.hero-slide:has(.hm-hero) .hero-slide__overlay {
    background:
        linear-gradient(100deg,
            rgba(35, 31, 32, .94) 0%,
            rgba(35, 31, 32, .88) 38%,
            rgba(35, 31, 32, .58) 68%,
            rgba(35, 31, 32, .42) 100%),
        linear-gradient(180deg, rgba(35, 31, 32, .55) 0%, transparent 28%);
}

/* 글자 자체에도 아주 옅은 그림자를 둬서 밝은 장면이 지나갈 때의 경계를 지킨다. */
.hm-hero__title,
.hm-hero__lead {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.hm-hero__lead { color: rgba(255, 255, 255, .92); }

/* 배너가 길어졌으니 글자도 같이 큼직하게. */
.hm-hero__title { font-size: clamp(40px, 5.8vw, 86px); }
.hm-hero__lead { font-size: 16px; }
.hm-fact__v { font-size: 28px; }

@media (max-width: 1023px) {
    .hero-slide:has(.hm-hero) .hero-slide__overlay {
        background: linear-gradient(180deg, rgba(35, 31, 32, .92), rgba(35, 31, 32, .97));
    }
}

/* ---------------------------------------------------------------------------
   27. 얹힌 머리글에서의 작은 것들
   SNS 동그라미는 연한 바탕이 기본이라, 배너 위에서는 흰 아이콘이 흰 동그라미에
   묻혀 사라졌다. 얹힌 동안만 동그라미를 투명하게 둔다.
   --------------------------------------------------------------------------- */
.site-header.hf-bar--overlap:not(.is-scrolled) .social-links__item {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .34);
    color: #ffffff;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .social-links__item:hover {
    background: var(--brand-blush);
    color: var(--brand-ink);
    border-color: var(--brand-blush);
}



/* 머리글 안의 버튼(참가사 로그인 등)도 얹힌 동안은 테두리만 남긴다. */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-button {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .5);
    background: transparent;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .hf-button:hover {
    background: var(--brand-blush);
    color: var(--brand-ink);
    border-color: var(--brand-blush);
}

/* 메뉴에 올렸을 때 밑줄은 얹힌 상태에서도 연분홍으로. */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__label::after,
.site-header.hf-bar--overlap:not(.is-scrolled) .mega-nav__label::after {
    background: var(--brand-blush);
}

/* ---------------------------------------------------------------------------
   28. 배너 영상에 박혀 있는 로고 가리기
   영상 오른쪽 위에 로고가 찍혀 있다. 영상 파일을 고치지 않고, 화면을 조금 키워
   그 모서리가 틀 밖으로 나가게 한다 - 가운데 장면은 그대로다.
   --------------------------------------------------------------------------- */
.hero-slide video.hero-slide__bg {
    transform: scale(1.18) translate(-3.2%, 2.4%);
    transform-origin: center center;
}

/* ---------------------------------------------------------------------------
   29. 머리글 두 상태를 확실히 못 박는다
   위젯 쪽 규칙이 `.hf-bar--transparent { background-color: transparent !important }`
   라서 보통의 선언으로는 이길 수 없다. 두 상태 모두 같은 세기로 적어 둔다.

   맨 위   : 먹색을 머금은 반투명 유리 (영상이 비치되 글씨는 항상 읽힌다)
   내린 뒤 : 완전한 흰색 (비침 없음 - 글이 머리글에 묻히지 않는다)
   --------------------------------------------------------------------------- */
.site-header.hf-bar--overlap:not(.is-scrolled) {
    background-color: rgba(35, 31, 32, .58) !important;
    box-shadow: none;
}

/* 흐림(유리)은 쓰지 않는다. backdrop-filter 가 걸린 요소는 그 안의 position:fixed 자식에게
   <기준 상자>가 되어 버려서, 오른쪽 MENU 서랍이 화면 전체가 아니라 머리글 높이(143px)만큼만
   열렸다. 반투명 먹색 한 겹이면 영상 위에서도 글자가 충분히 읽힌다. */

.site-header.hf-bar--overlap.is-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(35, 31, 32, .07), 0 12px 32px rgba(35, 31, 32, .08);
}

/* 내린 뒤에는 모든 글자·아이콘이 먹색으로 돌아온다(흰 바탕이므로). */
.site-header.hf-bar--overlap.is-scrolled,
.site-header.hf-bar--overlap.is-scrolled a,
.site-header.hf-bar--overlap.is-scrolled .hf-menu__label,
.site-header.hf-bar--overlap.is-scrolled .mega-nav__label,
.site-header.hf-bar--overlap.is-scrolled .site-nav__member {
    color: var(--brand-ink);
}

.site-header.hf-bar--overlap.is-scrolled .site-logo img,
.site-header.hf-bar--overlap.is-scrolled .hf-logo-box img {
    filter: none;
}

/* ---------------------------------------------------------------------------
   30. SNS 아이콘 - 어느 서비스인지 바로 알아보게
   아이콘은 하나의 면으로 그려진 그림이다. 거기에 선(stroke)까지 입히면 획이 두꺼워져
   페이스북인지 인스타그램인지 구별이 안 된다. 채우기만 쓰고 선은 끈다.
   --------------------------------------------------------------------------- */
/* 아이콘마다 그리는 방식이 다르다 - 페이스북·X 는 면으로 채운 그림이고, 인스타그램·
   유튜브는 선으로 그린 그림(fill="none" stroke="currentColor")이다. 여기서 fill 이나
   stroke 를 한쪽으로 몰아 주면 선으로 그린 쪽이 통째로 칠해져 네모가 되어 버린다
   (실제로 그래서 무슨 서비스인지 알아볼 수 없었다). 색만 정해 주고 그리는 방식은
   각 그림이 가진 그대로 둔다. */
.social-links__item svg {
    width: 19px;
    height: 19px;
}

.social-links__item {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.social-links__item:hover { transform: translateY(-2px); }

/* 얹힌 머리글에서는 테두리만 있는 동그라미 + 흰 아이콘. */
.site-header.hf-bar--overlap:not(.is-scrolled) .social-links__item {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #ffffff;
}



/* 흰 머리글에서는 연분홍 동그라미에 먹색 아이콘. */
.site-header.hf-bar--overlap.is-scrolled .social-links__item {
    background: var(--brand-blush);
    border: 0;
    color: var(--brand-ink);
}

.site-header.hf-bar--overlap .social-links__item:hover {
    background: var(--brand-blush);
    color: var(--brand-ink);
    border-color: var(--brand-blush);
}

/* ---------------------------------------------------------------------------
   31. 배너 글자가 영상 어느 장면에서도 읽히게
   영상에는 밝은 흰 벽, 흰 종이 같은 장면이 지나간다. 글자 쪽 절반은 먹색으로 깊게
   덮어 두고, 글자 뒤쪽에만 한 겹 더 깐다 - 오른쪽은 영상이 그대로 보인다.
   --------------------------------------------------------------------------- */
.hero-slide:has(.hm-hero) .hero-slide__overlay {
    background:
        linear-gradient(98deg,
            rgba(35, 31, 32, .97) 0%,
            rgba(35, 31, 32, .95) 34%,
            rgba(35, 31, 32, .74) 58%,
            rgba(35, 31, 32, .46) 100%),
        linear-gradient(180deg, rgba(35, 31, 32, .72) 0%, rgba(35, 31, 32, 0) 34%);
}

/* 글자 자체도 받쳐 준다 - 덮개만으로는 밝은 장면이 지나갈 때 가장자리가 흐려진다. */
.hm-hero__title { text-shadow: 0 3px 26px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .5); }
.hm-hero__lead  { text-shadow: 0 2px 14px rgba(0, 0, 0, .8); color: rgba(255, 255, 255, .95); }
.hm-hero__eyebrow { box-shadow: 0 6px 20px rgba(35, 31, 32, .4); }

/* ---------------------------------------------------------------------------
   32. 배너 버튼 둘 다 또렷하게
   테두리만 있는 버튼은 뒤의 영상이 밝아지는 순간 사라졌다. 둘 다 면을 채운다 -
   연분홍(참가신청)과 흰색(사전등록). 둘 다 글자는 먹색이라 11.7:1 이상이다.
   --------------------------------------------------------------------------- */
.hm-btn--line {
    background: #ffffff;
    color: var(--brand-ink);
    border: 0;
    box-shadow: 0 8px 24px rgba(35, 31, 32, .35);
}

.hm-btn--line:hover {
    background: var(--brand-blush);
    color: var(--brand-ink);
}

.hm-btn--blush { box-shadow: 0 8px 24px rgba(35, 31, 32, .35); }

/* ---------------------------------------------------------------------------
   33. 머리글 버튼(참가사 로그인 / 마이페이지 / 로그아웃)
   글자만 있어서 어느 상태에서도 잘 안 보였다. 누르는 자리라는 것이 보이게 면을 준다.
   --------------------------------------------------------------------------- */
.site-header .hf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* 맨 위(반투명 먹색 위) - 흰 테두리에 흰 글자. */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-button {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .72);
    color: #ffffff;
}

/* 내린 뒤(흰 바탕) - 먹색을 채우고 흰 글자. 머리글에서 가장 눈에 띄어야 하는 자리다. */
.site-header.hf-bar--overlap.is-scrolled .hf-button {
    background: var(--brand-ink);
    border: 1.5px solid var(--brand-ink);
    color: #ffffff;
}

.site-header .hf-button:hover {
    background: var(--brand-blush);
    border-color: var(--brand-blush);
    color: var(--brand-ink);
}

/* ---------------------------------------------------------------------------
   34. 메뉴를 펼쳤을 때 - 맨 위에서는 먹색 판이 내려온다
   메뉴 글자 칸만 색이 바뀌면 영상 위에 글자가 떠 있는 것처럼 보여 읽기 어려웠다.
   판 하나가 통째로 내려오게 해 글자가 앉을 바닥을 만든다.
   --------------------------------------------------------------------------- */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__sub {
    background: var(--brand-ink);
    border: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .42);
    padding: 10px 0;
    min-width: 200px;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__sub a {
    color: rgba(255, 255, 255, .88);
    padding: 10px 20px;
    display: block;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__sub a:hover {
    background: rgba(250, 216, 231, .16);
    color: var(--brand-blush);
}

/* 내린 뒤에는 흰 판 + 먹색 글자, 올린 줄만 연분홍. */
.site-header.hf-bar--overlap.is-scrolled .hf-menu__sub {
    background: #ffffff;
    border: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 22px 44px rgba(35, 31, 32, .16);
    padding: 10px 0;
    min-width: 200px;
}

.site-header.hf-bar--overlap.is-scrolled .hf-menu__sub a {
    color: var(--brand-ink);
    padding: 10px 20px;
    display: block;
}

.site-header.hf-bar--overlap.is-scrolled .hf-menu__sub a:hover {
    background: var(--brand-blush);
}

/* 머리글 버튼은 위젯 편집기에서 글자색을 저장해 인라인으로 나온다(예: color:#21212d).
   인라인은 보통 규칙으로는 못 이긴다. 머리글은 상태에 따라 바탕이 먹색↔흰색으로 바뀌므로
   글자색도 같이 뒤집혀야 하고, 그래서 여기서만 !important 로 되찾는다. */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-button,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-button * {
    color: #ffffff !important;
}

.site-header.hf-bar--overlap.is-scrolled .hf-button,
.site-header.hf-bar--overlap.is-scrolled .hf-button * {
    color: #ffffff !important;
}

.site-header.hf-bar--overlap .hf-button:hover,
.site-header.hf-bar--overlap .hf-button:hover * {
    color: var(--brand-ink) !important;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .hf-button {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, .72) !important;
}

.site-header.hf-bar--overlap.is-scrolled .hf-button {
    background: var(--brand-ink) !important;
    border: 1.5px solid var(--brand-ink) !important;
}

.site-header.hf-bar--overlap .hf-button:hover {
    background: var(--brand-blush) !important;
    border-color: var(--brand-blush) !important;
}

/* 메뉴 글자도 같은 이유로 인라인 색이 올 수 있다. */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__label,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__list > li > a {
    color: #ffffff !important;
}

.site-header.hf-bar--overlap.is-scrolled .hf-menu__label,
.site-header.hf-bar--overlap.is-scrolled .hf-menu__list > li > a {
    color: var(--brand-ink) !important;
}

/* 머리글 버튼이 글자를 바짝 조이지 않게 - 위젯이 칸 크기를 잡아 두므로 넘칠 여지를 준다. */
.site-header .hf-button {
    padding: 0 20px;
    line-height: 1.2;
    overflow: visible;
}

/* 참가사 로그인 등 머리글 버튼 - 테두리는 빼고 글자만 둔다(요청).
   테두리가 없어도 보이도록, 맨 위에서는 흰 글자, 내린 뒤에는 먹색 글자로 또렷하게 두고
   올렸을 때만 연분홍 바탕이 살짝 깔린다. */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-button,
.site-header.hf-bar--overlap.is-scrolled .hf-button {
    border: 0 !important;
    background: transparent !important;
}

.site-header.hf-bar--overlap.is-scrolled .hf-button,
.site-header.hf-bar--overlap.is-scrolled .hf-button * {
    color: var(--brand-ink) !important;
}

.site-header.hf-bar--overlap .hf-button:hover {
    background: var(--brand-blush) !important;
    border: 0 !important;
}

.site-header.hf-bar--overlap .hf-button:hover,
.site-header.hf-bar--overlap .hf-button:hover * {
    color: var(--brand-ink) !important;
}

/* ---------------------------------------------------------------------------
   35. 메뉴를 펼쳤을 때 뒤에 깔리는 판(.hf-menu__mega-backdrop)
   이 판이 늘 흰색이라, 머리글이 반투명 먹색인 맨 위 상태에서 메뉴를 펼치면 흰 판만
   툭 내려와 머리글과 따로 놀았다. 머리글 상태를 그대로 따라가게 한다.
   --------------------------------------------------------------------------- */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__mega-backdrop {
    background: var(--brand-ink) !important;
    box-shadow: 0 26px 48px rgba(0, 0, 0, .45);
    border: 0;
}

.site-header.hf-bar--overlap.is-scrolled .hf-menu__mega-backdrop {
    background: #ffffff !important;
    box-shadow: 0 26px 48px rgba(35, 31, 32, .14);
    border: 0;
}

/* 판 위에 올라가는 글자도 같이 뒤집는다. */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__sub,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__mega,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__panel {
    background: transparent !important;
    color: #ffffff;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__sub a,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__mega a,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__panel a {
    color: rgba(255, 255, 255, .88) !important;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__sub a:hover,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__mega a:hover,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__panel a:hover {
    color: var(--brand-blush) !important;
    background: rgba(250, 216, 231, .14);
}

.site-header.hf-bar--overlap.is-scrolled .hf-menu__sub,
.site-header.hf-bar--overlap.is-scrolled .hf-menu__mega,
.site-header.hf-bar--overlap.is-scrolled .hf-menu__panel {
    background: transparent !important;
}

.site-header.hf-bar--overlap.is-scrolled .hf-menu__sub a,
.site-header.hf-bar--overlap.is-scrolled .hf-menu__mega a,
.site-header.hf-bar--overlap.is-scrolled .hf-menu__panel a {
    color: var(--brand-ink) !important;
}

.site-header.hf-bar--overlap.is-scrolled .hf-menu__sub a:hover,
.site-header.hf-bar--overlap.is-scrolled .hf-menu__mega a:hover,
.site-header.hf-bar--overlap.is-scrolled .hf-menu__panel a:hover {
    background: var(--brand-blush);
}

/* 햄버거로 여는 서랍 메뉴(좁은 화면)도 같은 먹색 판을 쓴다. */
.hf-menu__offcanvas,
.hf-menu__offcanvas a,
/* ---------------------------------------------------------------------------
   36. 머리글 바와 펼쳐진 메뉴 판을 하나의 면으로
   지금까지는 바는 반투명, 내려오는 판은 불투명이라 둘 사이에 경계가 보였다.
   메뉴를 펼치는 동안에는 바도 같이 불투명해지고, 판은 모서리·그림자·여백 없이
   바 아래에 딱 붙는다 - 두 덩어리가 아니라 한 덩어리가 내려온 것처럼 보인다.
   --------------------------------------------------------------------------- */

/* 1) 메뉴를 펼치는 동안 바를 불투명하게. */
/* 배너가 있는 화면에서만 먹색으로 바꾼다. 배너 없는 화면은 머리글이 흰색이고 글자가
   먹색이라, 바탕만 먹색이 되면 먹색 글자가 먹색 바탕에 올라가 통째로 사라진다. */
body:has(.hm-hero) .site-header.hf-bar--overlap:not(.is-scrolled):has(.hf-menu__item:hover),
body:has(.hm-hero) .site-header.hf-bar--overlap:not(.is-scrolled):has(.hf-menu__item:focus-within),
body:has(.hm-hero) .site-header.hf-bar--overlap:not(.is-scrolled):has(.hf-menu__mega-backdrop:hover) {
    background-color: var(--brand-ink) !important;
}

.site-header.hf-bar--overlap.is-scrolled:has(.hf-menu__item:hover),
.site-header.hf-bar--overlap.is-scrolled:has(.hf-menu__item:focus-within) {
    background-color: #ffffff !important;
}

/* 2) 내려오는 판은 화면 폭을 꽉 채우고, 바와 맞닿는 쪽은 아무 장식도 두지 않는다. */
.site-header .hf-menu__mega-backdrop {
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    transform: translateX(-50%);
    border-radius: 0 !important;
    border-top: 0 !important;
    margin-top: 0 !important;
}

.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__mega-backdrop {
    background: var(--brand-ink) !important;
    /* 아래쪽에만 그림자 - 위쪽에 그림자가 있으면 바와의 사이에 금이 간 것처럼 보인다. */
    box-shadow: 0 24px 44px rgba(0, 0, 0, .42);
}

.site-header.hf-bar--overlap.is-scrolled .hf-menu__mega-backdrop {
    background: #ffffff !important;
    box-shadow: 0 24px 44px rgba(35, 31, 32, .13);
}

/* 3) 각 묶음(스토리/전시개요…)을 담던 작은 상자의 테두리·그림자·모서리를 지운다.
      바탕은 위의 판 하나가 전부 맡는다. */
.site-header .hf-menu__sub,
.site-header .hf-menu__mega,
.site-header .hf-menu__panel {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 4) 바 아래 띠(연분홍/흰 줄)는 메뉴가 펼쳐진 동안 감춘다 - 바와 판 사이를 가로지른다. */
.site-header.hf-bar--overlap:has(.hf-menu__item:hover)::after,
.site-header.hf-bar--overlap:has(.hf-menu__item:focus-within)::after {
    opacity: 0;
}

.site-header.hf-bar--overlap::after {
    transition: opacity .2s ease;
}

/* ============================================================================
   37. 폼·로그인·게시판 — 브랜드 입히기
   입력하는 화면은 보기보다 읽기가 중요하다. 글자는 전부 먹색, 연분홍은 "지금 여기"를
   가리키는 데만 쓴다(고른 칸, 포커스 테두리, 필수 표시).
   ========================================================================== */

/* ---- 공통 입력칸 ---------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 15px;
    color: var(--brand-ink);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

input::placeholder, textarea::placeholder { color: #a9a1a4; }

/* 브라우저가 저장값을 채우면 연파랑으로 칠해 버린다 - 우리 색으로 되돌린다. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--brand-ink);
    box-shadow: 0 0 0 1000px #ffffff inset;
}

label { color: var(--brand-ink); }

/* 필수 표시는 빨강 대신 먹색 점 - 사이트에 빨강이 없다. */
.required-mark, .form-row__label .req { color: var(--brand-ink); }

/* 고르는 칸(체크박스·라디오)의 색만 브랜드로. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-ink); width: 17px; height: 17px; }

/* ---- 버튼 ---------------------------------------------------------------- */
.btn { border-radius: 999px; font-size: 15px; padding: 13px 26px; }
.btn--primary { background: var(--brand-ink); color: #ffffff; }
.btn--primary:hover { background: #000000; }

/* ---- 로그인·아이디찾기 같은 짧은 화면 ------------------------------------- */
.login-wrap {
    max-width: 440px;
    margin: 86px auto 110px;
    padding: 0 24px;
}

.login-wrap h1 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: center;
    margin: 0 0 8px;
}

/* 제목 아래 연분홍 짧은 줄 - 모든 화면에서 같은 자리에 온다. */
.login-wrap h1::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 16px auto 30px;
    background: var(--brand-blush);
}

.login-form {
    display: grid;
    gap: 12px;
    padding: 34px 30px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
}

.login-find, .login-signup-link { text-align: center; font-size: 13.5px; color: var(--color-text-muted); }
.login-find a, .login-signup-link a { color: var(--brand-ink); font-weight: 700; }
.login-find a:hover, .login-signup-link a:hover { background: var(--brand-blush); }

.login-error {
    background: #fdf2f2;
    border: 1px solid #e9b7b7;
    color: #9b1c1c;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 13.5px;
    margin: 0 0 14px;
}

/* 회원 종류 고르기 카드 */
.login-choice__card {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 26px 24px;
    background: #ffffff;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.login-choice__card:hover {
    background: var(--brand-blush);
    border-color: var(--brand-blush);
    transform: translateY(-3px);
}

/* ---- 긴 입력 화면(참가신청·사전등록) --------------------------------------- */
.page-head { margin: 0 0 30px; }

.page-head h1, .signup-wrap > h1 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 10px;
}

.form-section {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 26px 28px;
    margin: 0 0 18px;
    background: #ffffff;
}

.form-section__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-blush);
}

.form-section--notice {
    background: var(--brand-cream);
    border-color: var(--brand-blush);
}

.form-row { border-bottom: 1px solid var(--color-border); }
.form-row:last-child { border-bottom: 0; }
.form-row__label { font-weight: 700; font-size: 14px; }

/* ---- 체크리스트(제출 서류·신청) -------------------------------------------- */
/*  체크리스트의 브랜드 색은 여기가 아니라 apply.css 끝에 있다.
    apply.css 가 이 파일보다 <나중에> 실려서, 여기에 적으면 그 파일의 기본 규칙에
    그대로 덮인다 - 진행률 띠가 계속 회색 바탕에 먹색 그라데이션으로 남아 있던 것이
    그 때문이었다. 한 군데에서만 칠한다. */

/* ---- 게시판·공지 ---------------------------------------------------------- */
.board-list__item { border-bottom: 1px solid var(--color-border); }
.board-list__item:hover { background: var(--brand-cream); }
.board-list__title { font-weight: 600; color: var(--brand-ink); }
.board-list__date, .board-list__views, .board-list__author { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.pagination a, .pagination span {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

.pagination .is-current, .pagination .active {
    background: var(--brand-ink);
    color: #ffffff;
}

.pagination a:hover { background: var(--brand-blush); color: var(--brand-ink); }

/* ---------------------------------------------------------------------------
   38. 좁은 화면에서의 배너 마무리
   - 배너는 화면 끝까지 닿게 한다(옆에 흰 띠가 남으면 끼워 넣은 사진처럼 보인다).
   - 머리글이 제목을 가리지 않게, 머리글 실제 높이만큼 내려서 시작한다.
     그 높이는 레이아웃이 --fixed-header-height 로 알려 준다.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* 좌우 여백은 이 배너가 든 줄에서만 없앤다(다른 배너 위젯은 그대로 둔다). */
    .free-grid:has(.hm-hero),
    .free-grid__item:has(.hm-hero) {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }

    .hm-hero__inner {
        padding-top: calc(var(--fixed-header-height, 96px) + 28px);
        padding-bottom: 44px;
    }
}

@media (max-width: 599px) {
    /* 날짜·장소·마감은 한 줄에 "이름 / 값" 으로 두되, 값이 길면 줄을 바꾼다. */
    .hm-fact {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 13px 16px;
    }
    .hm-fact__sub { margin-left: 0; }
    .hm-fact__v { font-size: 22px; }

    .hm-hero__cta .hm-btn { flex: 1 1 calc(50% - 4px); }
}

/* 배너가 화면 끝까지 닿으면 안쪽 글자에는 숨 쉴 틈이 필요하다. */
@media (max-width: 1023px) {
    .hm-hero__inner { padding-left: 22px; padding-right: 22px; }
}

/* ---------------------------------------------------------------------------
   39. 좁은 화면의 머리글을 낮춘다
   휴대전화에서 머리글이 218px 였다 - 화면의 3할을 메뉴가 차지했다. 로고와 메뉴 단추만
   남기고, 가로로 늘어놓던 메뉴 줄과 SNS 아이콘은 접는다(메뉴는 오른쪽 MENU 단추로
   그대로 열 수 있고, SNS 는 꼬리글에 있다).
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .site-header .social-links { display: none; }

    /* 가로 메뉴 줄 - 좁은 화면에서는 접는다(서랍 메뉴로 연다). */
    .site-header .hf-menu--horizontal > .hf-menu__list { display: none; }

    /* 서랍이 열렸을 때는 당연히 보여야 한다. */
    .site-header .hf-menu--horizontal > .hf-menu__list.is-open,
    .site-header .hf-menu__list.hf-menu__offcanvas { display: block; }

    .site-header .hf-canvas--header { padding-top: 10px; padding-bottom: 10px; }
    .site-header .hf-free-grid { row-gap: 8px; }
    .site-header .hf-logo img { max-height: 40px; }
}

/* ---------------------------------------------------------------------------
   40. 배너가 없는 화면에서는 머리글만큼 본문을 내린다
   머리글을 배너 위에 얹으려고 position:fixed 로 띄웠다. 배너가 있는 메인은 그게 의도지만,
   안내 페이지·게시판처럼 첫 블록이 글인 화면에서는 제목이 머리글에 가려진다.
   머리글의 실제 높이는 레이아웃이 --fixed-header-height 에 담아 둔다.
   --------------------------------------------------------------------------- */
body:has(.site-header.hf-bar--overlap) main:not(:has(.hm-hero)) {
    padding-top: var(--fixed-header-height, 143px);
}

/* 배너가 있는 메인은 그대로 얹힌다(배너 안쪽에서 이미 머리글만큼 내려 두었다). */
body:has(.site-header.hf-bar--overlap) main:has(.hm-hero) {
    padding-top: 0;
}

/* ---------------------------------------------------------------------------
   41. 배너가 없는 화면의 머리글은 처음부터 흰색
   반투명은 "뒤에 영상·사진이 비친다"는 뜻이다. 흰 글 위에 반투명 먹색을 얹으면 그냥
   칙칙한 회색 띠가 된다. 배너(.hm-hero)가 없는 화면에서는 내린 상태와 같은 흰 머리글로 둔다.
   --------------------------------------------------------------------------- */
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(35, 31, 32, .07);
}

body:not(:has(.hm-hero)) .site-header.hf-bar--overlap::after {
    height: 3px;
    background: var(--brand-blush);
    opacity: 1;
}

body:not(:has(.hm-hero)) .site-header.hf-bar--overlap,
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap a,
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-menu__label,
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-menu__list > li > a,
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-button,
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-button * {
    color: var(--brand-ink) !important;
}

body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .site-logo img,
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-logo-box img {
    filter: none;
}

body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .social-links__item {
    background: var(--brand-blush);
    border: 0;
    color: var(--brand-ink);
}

body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-menu__mega-backdrop,
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-menu__sub {
    background: #ffffff !important;
    box-shadow: 0 24px 44px rgba(35, 31, 32, .13);
}

body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-menu__sub a {
    color: var(--brand-ink) !important;
}

body:not(:has(.hm-hero)) .site-header.hf-bar--overlap .hf-menu__sub a:hover {
    background: var(--brand-blush);
    /* 바탕을 칠하는 자리에서 글자색도 같이 정한다. 이걸 빼 두었더니 위쪽 규칙의
       "연분홍 글자"가 그대로 남아 연분홍 바탕에 연분홍 글자가 됐다. */
    color: var(--brand-ink) !important;
}

/* ---------------------------------------------------------------------------
   42. 메인 배너는 한 화면을 꽉 채운다
   위젯이 정한 높이(--banner-height) 대신 화면 높이를 쓴다. 1920x1080 이든 다른 크기든
   첫 화면이 배너 하나로 가득 찬다. 좁은 화면에서는 38 절에서 내용 높이를 따르게 두었다.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .hero-carousel:has(.hm-hero),
    .hero-carousel:has(.hm-hero) .hero-carousel__track,
    .hero-slide:has(.hm-hero) {
        height: 100vh;
        height: 100svh;              /* 주소창이 접히는 브라우저에서도 딱 맞게 */
        min-height: 100svh !important;
    }

    /* 이 배너가 든 칸만 격자의 행 높이에서 풀어 준다.
       .hero-carousel 전체에 걸면 사무국이 크기를 정한 <다른 배너 위젯>까지 저장된
       높이를 잃어 "늘려도 안 늘어난다"가 된다 - 실제로 그래서 한 번 깨졌다. */
    .free-grid__item:has(.hm-hero) { grid-row: auto; height: auto; }
    .free-grid:has(.hm-hero) { padding: 0; }
}

/* ---------------------------------------------------------------------------
   43. 배너 영상 - 오른쪽 위에 박힌 로고를 틀 밖으로 밀어낸다
   영상 파일을 고치지 않는 방법이다. 크게 키워 가운데만 쓰면 모서리의 로고는 보이지 않는다.
   키운 만큼 화질이 조금 무뎌지지만, 배경으로 깔리는 영상이라 눈에 띄지 않는다.
   --------------------------------------------------------------------------- */
.hero-slide video.hero-slide__bg {
    transform: scale(1.42) translate(-5.5%, 4.5%);
    transform-origin: center center;
}

/* ---------------------------------------------------------------------------
   44. 배너 글자 - 어떤 장면이 지나가도 읽히게
   덮개를 더 깊게 깔고, 글자에도 그림자를 겹쳐 둔다. 밝은 벽이나 흰 종이가 지나갈 때
   가장자리가 날아가던 것을 막는다.
   --------------------------------------------------------------------------- */
.hero-slide:has(.hm-hero) .hero-slide__overlay {
    background:
        linear-gradient(96deg,
            rgba(35, 31, 32, .985) 0%,
            rgba(35, 31, 32, .965) 36%,
            rgba(35, 31, 32, .82) 60%,
            rgba(35, 31, 32, .55) 100%),
        linear-gradient(180deg, rgba(35, 31, 32, .78) 0%, rgba(35, 31, 32, .08) 40%, rgba(35, 31, 32, .45) 100%);
}

.hm-hero__title {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, .85),
        0 6px 22px rgba(0, 0, 0, .75),
        0 0 48px rgba(0, 0, 0, .6);
}

.hm-hero__lead {
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .9), 0 4px 20px rgba(0, 0, 0, .7);
}

.hm-hero__eyebrow { box-shadow: 0 8px 26px rgba(0, 0, 0, .55); }
.hm-fact { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

/* ---------------------------------------------------------------------------
   45. (삭제됨) 배너 칸에 걸었던 덮개
   .hero-slide::after 로 덮개를 하나 더 깔았다가, 46절의 .hm-hero::before 와 두 겹이 됐다.
   바깥쪽 덮개는 배너 내용(.hero-slide__html)보다 뒤에 그려져 글자 위로 올라왔고,
   그래서 좁은 화면에서 본문이 통째로 어두워져 "글자가 안 보인다"가 됐다.
   덮개는 .hm-hero::before 하나만 둔다.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   46. 배너 안에 직접 넣은 배경 영상
   영상은 분위기일 뿐이라 못 받아도 화면이 깨지면 안 된다 - 배너 바탕이 먹색이므로
   영상이 없으면 그냥 먹색 배너가 된다.
   크게 키우는 것은 영상 오른쪽 위에 박힌 로고를 틀 밖으로 내보내기 위해서다.
   --------------------------------------------------------------------------- */
.hm-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    transform: scale(1.42) translate(-5.5%, 4.5%);
    transform-origin: center center;
    filter: saturate(.9);
}

/* 내용과 덮개는 영상 위에 온다. */
.hm-hero__inner { position: relative; z-index: 2; }

/* 덮개는 배너 칸이 아니라 배너 내용(.hm-hero) 안에 깔아 영상 바로 위에 오게 한다. */
.hm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(96deg,
            rgba(35, 31, 32, .96) 0%,
            rgba(35, 31, 32, .93) 36%,
            rgba(35, 31, 32, .74) 62%,
            rgba(35, 31, 32, .46) 100%),
        linear-gradient(180deg, rgba(35, 31, 32, .7) 0%, rgba(35, 31, 32, .05) 36%, rgba(35, 31, 32, .5) 100%);
}

@media (max-width: 1023px) {
    .hm-hero::before {
        background: linear-gradient(180deg, rgba(35, 31, 32, .93), rgba(35, 31, 32, .97));
    }
    /* 휴대전화에서는 62MB 를 받게 하지 않는다. 먹색 배너만 보여 준다. */
}

@media (max-width: 760px) {
    .hm-hero__video { display: none; }
}

/* ---------------------------------------------------------------------------
   47. 덮개를 걷어 영상이 보이게 한다
   앞서 글자를 살리려고 덮개를 계속 진하게 했더니 영상이 거의 안 보였다. 반대로 간다 -
   덮개는 <글자가 있는 왼쪽>에만 남기고 오른쪽은 거의 비운다. 글자는 덮개 대신 글자
   자신의 그림자로 지킨다. 그러면 영상도 살고 글자도 읽힌다.
   --------------------------------------------------------------------------- */
.hm-hero::before {
    background:
        /* 왼쪽 글자 자리만 받쳐 준다. 60% 지점부터는 거의 투명하다. */
        linear-gradient(94deg,
            rgba(35, 31, 32, .86) 0%,
            rgba(35, 31, 32, .74) 28%,
            rgba(35, 31, 32, .38) 52%,
            rgba(35, 31, 32, .10) 72%,
            rgba(35, 31, 32, .04) 100%),
        /* 머리글이 얹히는 위쪽과 아래 끝만 아주 옅게. */
        linear-gradient(180deg, rgba(35, 31, 32, .46) 0%, rgba(35, 31, 32, 0) 26%, rgba(35, 31, 32, 0) 76%, rgba(35, 31, 32, .3) 100%);
}

/* 덮개가 얇아진 만큼 글자 그림자로 버틴다. */
.hm-hero__title {
    text-shadow:
        0 2px 5px rgba(0, 0, 0, .92),
        0 6px 20px rgba(0, 0, 0, .82),
        0 0 60px rgba(0, 0, 0, .7);
}

.hm-hero__lead {
    text-shadow: 0 2px 7px rgba(0, 0, 0, .95), 0 4px 22px rgba(0, 0, 0, .8);
}

@media (max-width: 1023px) {
    /* 좁은 화면에서는 글자가 영상 위를 가로지르므로 조금 더 받쳐 준다. */
    .hm-hero::before {
        background: linear-gradient(180deg, rgba(35, 31, 32, .82) 0%, rgba(35, 31, 32, .88) 100%);
    }
}

/* ---------------------------------------------------------------------------
   50. 포스터 칸
   게시글 목록 뒤에는 아무 바탕도 깔지 않는다 - 전에 한 번 깔았다가 걷어냈다.
   목록은 흰 바탕에 글만 있는 편이 읽기 쉽고, 사무국이 정한 배경(Exhibit_Section.BgColor)
   이 있으면 그것만 쓰는 것이 맞다.
   --------------------------------------------------------------------------- */
.free-grid__item:has(> .normal-banner) > .normal-banner {
    height: 100%;
    overflow: hidden;
}


/* ---------------------------------------------------------------------------
   48. 개막 카운트다운
   앞선 시안은 먹색 띠에 분홍 숫자를 크게 박은 것이었는데, 광고 배너처럼 보였다.
   이번에는 반대로 간다 - 바탕은 흰색, 선은 머리카락처럼 가늘게, 숫자만 크고 담담하게.
   브랜드 사이트의 시계는 요란할수록 싸 보인다.

       왼쪽   개막까지 / 2027.03.12 KINTEX   (작은 대문자 라벨)
       오른쪽 156 : 17 : 45 : 02             (큰 숫자, 콜론은 연분홍)
                일   시   분   초             (아주 작은 단위)
   --------------------------------------------------------------------------- */
.countdown-widget {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 40px;
    height: 100%;
    padding: 30px clamp(8px, 2vw, 24px);
    background: transparent;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
}

/* 왼쪽 라벨 - 작게, 넓은 자간. 제목처럼 크게 쓰지 않는다. */
.countdown-widget__label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* 숫자 묶음 */
.countdown-widget__digits {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

/* 한 칸 = 숫자 + 그 아래 단위 */
.countdown-widget__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 clamp(14px, 2.2vw, 30px);
    position: relative;
}

/* 칸 사이 구분은 연분홍 세로선 한 줄. 콜론 글자보다 조용하다. */
.countdown-widget__unit + .countdown-widget__unit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 34%;
    width: 1px;
    background: var(--brand-blush);
}

.countdown-widget__unit b {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--brand-ink);
    font-variant-numeric: tabular-nums;
    /* 매 초 숫자가 바뀌어도 폭이 흔들리지 않게 자리를 잡아 둔다. */
    min-width: 2ch;
    text-align: center;
}

.countdown-widget__unit i {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--color-text-muted);
}

.countdown-widget__expired {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--brand-ink);
}

@media (max-width: 760px) {
    .countdown-widget {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 24px 0;
    }
    .countdown-widget__unit { padding: 0 12px; }
    .countdown-widget__unit b { font-size: 30px; }
}

/* ---------------------------------------------------------------------------
   52. 배너 아래쪽 개막 시계 (.hm-clock)
   배너 바닥에 가로로 걸치는 한 줄이다. 위젯이 아니라 배너 안에 든 것이라 다른 위젯의
   자리를 전혀 건드리지 않는다.

   모양은 조용하게 간다 - 숫자만 크고, 선은 머리카락처럼 가늘고, 바탕은 없다.
   배너 영상 위에 얹히므로 글자는 흰색, 구분선은 연분홍이다.
   --------------------------------------------------------------------------- */
.hm-clock {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 날짜 줄(hm-clock__when)을 지우고 두 전시 이름 줄을 첫 줄로 올렸으므로, 남은 둘
       (라벨·숫자)은 양끝으로 밀지 않고 가운데로 모은다 - 양끝 정렬은 둘만 남으면
       가운데가 텅 빈 두 토막으로 보인다. */
    justify-content: center;
    gap: 10px clamp(20px, 4vw, 56px);
    /* 좌우 여백을 변수로 둔다 - 이름 줄 아래 선이 이 여백만큼 바깥으로 뻗어야
       띠 폭을 꽉 채운다(글자 칸에서 끊기면 밑줄로 보인다). */
    --clock-pad: clamp(24px, 5vw, 72px);
    padding: 12px var(--clock-pad) 13px;
    /* 바닥 쪽만 살짝 눌러 숫자가 영상에 묻히지 않게. */
    background: linear-gradient(180deg, rgba(35, 31, 32, 0), rgba(35, 31, 32, .72));
    color: #ffffff;
}

.hm-clock__label {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.hm-clock__units {
    display: flex;
    align-items: flex-start;
}

.hm-clock__u {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 clamp(12px, 2vw, 26px);
}

/* 칸 사이 연분홍 세로선 - 콜론보다 조용하다. */
.hm-clock__u + .hm-clock__u::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 38%;
    width: 1px;
    background: var(--brand-blush);
    opacity: .55;
}

.hm-clock__u b {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 31px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    /* 매 초 바뀌어도 폭이 흔들리지 않게 자리를 잡아 둔다. */
    min-width: 2ch;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.hm-clock__u i {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--brand-blush);
}

/* 개막일이 지나면 숫자 대신 한 줄만 남긴다. */
.hm-clock.is-open .hm-clock__units { display: none; }
.hm-clock.is-open .hm-clock__label::after {
    content: " · 지금 열리고 있습니다";
    color: var(--brand-blush);
    letter-spacing: .04em;
}

@media (max-width: 1023px) {
    /* 좁은 화면에서는 배너가 흐름 안에 있으므로 시계도 흐름에 둔다.
       static 이 아니라 relative 로 둔다 - z-index 는 "위치가 지정된" 요소에만 먹는다.
       static 으로 두면 z-index:2 가 무시되어 배너 덮개(::before, z-index:1) 밑으로
       깔려 글자가 통째로 안 보인다. */
    .hm-clock {
        position: relative;
        justify-content: center;
        text-align: center;
        --clock-pad: 22px;
        padding: 20px 22px 26px;
        background: none;
        margin-top: 26px;
    }
}

@media (max-width: 599px) {
    .hm-clock__label { flex-basis: 100%; }
    .hm-clock__u { padding: 0 11px; }
    .hm-clock__u b { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   53. 지도 위젯
   지도는 "여기구나"를 한눈에 보여 주는 것이 전부다. 테두리와 모서리를 지우고 지도를
   칸에 꽉 채운 뒤, 아래에 주소와 길찾기 단추만 둔다.
   --------------------------------------------------------------------------- */
.map-card {
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
}

.map-card__frame {
    position: relative;
    overflow: hidden;
    background: var(--brand-cream);
    border-radius: 2px;
}

.map-card__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* 구글 지도 기본 색이 사이트보다 쨍하다. 아주 살짝 눌러 옆 칸들과 톤을 맞춘다. */
    filter: saturate(.88) contrast(.98);
}

.map-card__body {
    padding: 16px 2px 0;
}

.map-card__body h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 4px;
    color: var(--brand-ink);
}

.map-card__body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
    word-break: keep-all;
}

/* 길찾기 줄 */
.map-card__go {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--brand-blush);
}

.map-card__go-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-right: 4px;
}

.map-card__go-btn {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--brand-blush);
    color: var(--brand-ink);          /* 연분홍 바탕 + 먹색 글자 = 11.7:1 */
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.map-card__go-btn:hover {
    background: var(--brand-ink);
    color: #ffffff;
    transform: translateY(-1px);
}

.map-card__go-btn--ghost {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--brand-ink);
}

.map-card__go-btn--ghost:hover {
    background: var(--brand-ink);
    border-color: var(--brand-ink);
    color: #ffffff;
}

@media (max-width: 599px) {
    .map-card__go-label { flex-basis: 100%; margin-bottom: 2px; }
    .map-card__go-btn { flex: 1 1 calc(50% - 3px); justify-content: center; }
    .map-card__go-btn--ghost { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   54. 지도 제목과 지도 사이 간격
   구역 제목의 기본 아래 여백(48px)은 본문이 긴 구역을 염두에 둔 값이다. 지도처럼
   제목 바로 아래에 그림 한 장이 오는 칸에서는 제목이 혼자 떠 보인다 - 붙여 둔다.
   지도 칸에만 건다(다른 구역 제목 간격은 그대로).
   --------------------------------------------------------------------------- */
.section:has(.map-grid) > h2 {
    margin-bottom: 18px;
    padding-bottom: 12px;
}

/* ---------------------------------------------------------------------------
   55. 지도 카드 다듬기
   지도는 어느 사이트나 비슷하게 생겼다. 그래서 지도 자체보다 <틀과 그 아래 줄>로
   브랜드를 입힌다 - 지도 위 이름표, 가는 테두리, 아이콘을 단 길찾기 단추.
   --------------------------------------------------------------------------- */
.map-card__frame {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    /* 안쪽으로 아주 옅은 그림자 - 지도가 종이 위에 얹힌 것처럼 보인다. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 26px rgba(35, 31, 32, .07);
}

/* 지도 위 이름표 */
.map-card__pin {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 7px 12px;
    background: var(--brand-ink);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(35, 31, 32, .3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;      /* 지도를 끌 때 이름표가 가로채지 않게 */
}

/* 이름표 앞 작은 핀 */
.map-card__pin::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-blush);
}

/* 주소 앞에 선으로 그린 핀 하나 - 글만 있을 때보다 주소라는 것이 빨리 읽힌다. */
.map-card__body p {
    position: relative;
    padding-left: 17px;
}

.map-card__body p::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .42em;
    width: 7px;
    height: 7px;
    border: 2px solid var(--brand-blush);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

/* ---- 길찾기 ---- */
.map-card__go {
    display: block;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}

.map-card__go-label {
    display: block;
    margin-bottom: 9px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.map-card__go-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

/* 단추는 채우지 않고 테두리만 - 세 개가 나란히 있을 때 분홍을 다 채우면 시끄럽다.
   올리면 먹색으로 차오른다. */
.map-card__go-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 4px;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: #ffffff;
    color: var(--brand-ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.map-card__go-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-card__go-btn:hover {
    background: var(--brand-ink);
    border-color: var(--brand-ink);
    color: #ffffff;
    transform: translateY(-2px);
}

/* 그 아래 한 줄짜리 보조 링크 */
.map-card__go-more {
    display: inline-block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-ink);
    background: linear-gradient(transparent 82%, var(--brand-blush) 82%);
}

.map-card__go-more:hover { background: linear-gradient(transparent 0%, var(--brand-blush) 0%); }

@media (max-width: 599px) {
    .map-card__go-row { grid-template-columns: repeat(3, 1fr); }
    .map-card__go-btn { min-height: 52px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   56. 좁은 화면 배너 - 영상 재생과 글자 가림을 한꺼번에 바로잡는다
   세 가지가 겹쳐 있었다.

   1) 휴대전화에서 영상을 꺼 두었다(display:none). 62MB 를 모바일 데이터로 받게 하지
      않으려던 것인데, 영상이 아예 안 나오는 것이 더 문제라 다시 켠다.
      대신 좁은 화면에서는 미리 받지 않고(preload) 보일 때 받게 아래 JS 가 다룬다.

   2) 좁은 화면에서 .hm-hero 를 position:static 으로 두었다. 그러면
      - 안에 있는 영상과 덮개(absolute)가 .hm-hero 가 아니라 바깥 배너 칸을 기준으로 잡히고
      - .hm-hero 가 쌓임 맥락(stacking context)을 만들지 못해 z-index 가 서로 엉킨다.
      그래서 어떤 폭에서는 영상이 글자 위로 올라와 글자가 사라졌다.
      relative 로 바꿔 자기 안에서 층이 정리되게 한다.

   3) 시계 줄에 바탕이 없어, 영상의 밝은 장면이 지나가면 흰 글자가 사라졌다.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .hm-hero {
        position: relative;        /* static 이면 아래 층 정리가 전부 깨진다 */
        display: block;
        isolation: isolate;        /* 이 안에서만 z-index 를 셈한다 */
        overflow: hidden;
    }

    /* 영상은 배너 전체를 덮고 맨 아래 층에. */
    .hm-hero__video {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    /* 덮개는 영상 바로 위. 좁은 화면은 글자가 영상 전체를 가로지르므로 고르게 덮는다. */
    .hm-hero::before {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(35, 31, 32, .86) 0%, rgba(35, 31, 32, .9) 100%);
    }

    /* 글과 시계는 덮개 위. */
    .hm-hero__inner,
    .hm-clock {
        position: relative;
        z-index: 2;
    }

    /* 시계 줄에도 바탕을 깔아 둔다 - 덮개만 믿으면 밝은 장면에서 흰 글자가 날아간다. */
    .hm-clock {
        background: rgba(35, 31, 32, .55);
        margin-top: 22px;
        padding: 18px 22px 22px;
    }
}

/* 넓은 화면에서도 같은 이유로 층을 분명히 해 둔다. */
@media (min-width: 1024px) {
    .hm-hero { isolation: isolate; }
    .hm-hero__video { z-index: 0; }
    .hm-hero::before { z-index: 1; }
    .hm-hero__inner,
    .hm-clock { z-index: 2; }
}

/* 아주 좁은 화면에서는 글자가 커서 영상이 거의 안 보인다 - 덮개를 조금 걷어
   영상이 비치게 하되, 글자 그림자로 읽히는 것은 지킨다. */
@media (max-width: 599px) {
    .hm-hero::before {
        background: linear-gradient(180deg, rgba(35, 31, 32, .8) 0%, rgba(35, 31, 32, .88) 100%);
    }
}

/* ---------------------------------------------------------------------------
   57. 배너 덮개는 하나만 - 플랫폼 덮개를 끈다
   위젯은 배너 칸 안에 .hero-slide__overlay 를 z-index:1 로 깔아 둔다. 그런데 내용이
   들어가는 .hero-slide__html 은 z-index 가 auto 라서, 덮개가 <내용 위에> 그려진다.
   (원래 배너는 내용도 그 안에서 absolute 로 띄워 괜찮았지만, 이 배너는 보통의 흐름으로
   짰기 때문에 가려졌다 - 좁은 화면에서 글자가 통째로 어두워 보이던 원인이다.)

   덮개는 .hm-hero::before 하나로 충분하므로 플랫폼 덮개는 끈다. 그리고 내용 층을
   덮개보다 위에 못 박아 둔다.
   --------------------------------------------------------------------------- */
.hero-slide:has(.hm-hero) .hero-slide__overlay {
    display: none;
}

.hero-slide__html:has(.hm-hero) {
    z-index: 3;
}

/* ---------------------------------------------------------------------------
   59. 배너가 없는 화면(안내 페이지·게시판 등)의 메뉴 색을 끝까지 맞춘다
   펼침 판의 바탕은 흰색인데 판 자체의 글자색(color)이 흰색으로 남아 있었다. 링크는
   따로 먹색을 줘서 보였지만, 링크가 아닌 글(묶음 제목·설명)은 흰 바탕에 흰 글자가 된다.
   바탕을 정한 자리에서 글자색도 같이 정한다.
   --------------------------------------------------------------------------- */
body:not(:has(.hm-hero)) .site-header .hf-menu__sub,
body:not(:has(.hm-hero)) .site-header .hf-menu__mega,
body:not(:has(.hm-hero)) .site-header .hf-menu__panel,
body:not(:has(.hm-hero)) .site-header .hf-menu__mega-backdrop {
    color: var(--brand-ink);
}

body:not(:has(.hm-hero)) .site-header .hf-menu__sub .hf-menu__label,
body:not(:has(.hm-hero)) .site-header .hf-menu__mega .hf-menu__label {
    color: var(--brand-ink);
}

/* 같은 이유로, 배너가 있는 화면의 먹색 판에서도 판의 글자색을 흰색으로 못 박아 둔다. */
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__mega-backdrop {
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   62. 접는 버튼(.hf-menu__collapse-toggle)
   이 메뉴는 늘 햄버거 서랍으로 열리는 모양이라(hf-menu--force-hamburger), "접기" 버튼은
   접을 것이 없어 쓸 데가 없다. 플랫폼도 크기를 0 으로 두어 숨겨 놓았는데, 내가 색을
   맞춰 주겠다고 테두리와 크기를 줬더니 정체를 알 수 없는 동그라미 두 개가 머리글에
   나타났다. 숨기는 것이 맞다.
   --------------------------------------------------------------------------- */
.site-header .hf-menu--force-hamburger .hf-menu__collapse-toggle,
.site-header .hf-menu--overflow .hf-menu__collapse-toggle {
    display: none !important;
}



/* ---------------------------------------------------------------------------
   64. 오른쪽 MENU 서랍 — 열렸을 때만
   중요한 점: .hf-menu--overflow 는 <가로 메뉴일 때도> 붙어 있는 클래스다. 서랍이 열린
   상태는 .is-open 이 붙었을 때뿐이다. 이걸 빠뜨려서 가로 메뉴 글자까지 흰색·연분홍으로
   칠했고, 흰 머리글 페이지에서는 메뉴가 통째로 안 보였다.
   아래 규칙은 전부 .is-open 안에서만 산다.

   위치·크기는 플랫폼 규칙(1484행)이 이미 제대로 잡는다. 여기서는 색만 입힌다.
   --------------------------------------------------------------------------- */
.hf-menu--overflow.is-open .hf-menu__list {
    background-color: var(--brand-ink) !important;
    border-left: 0;
    box-shadow: -20px 0 56px rgba(0, 0, 0, .42);
}

/* 서랍 바탕이 먹색이므로 그 안의 글자는 언제나 밝다 - 머리글이 흰색이든 반투명이든. */
.site-header .hf-menu--overflow.is-open .hf-menu__list,
.site-header .hf-menu--overflow.is-open .hf-menu__list a,
.site-header .hf-menu--overflow.is-open .hf-menu__list span,
.site-header .hf-menu--overflow.is-open .hf-menu__list button,
.site-header.hf-bar--overlap .hf-menu--overflow.is-open .hf-menu__list,
.site-header.hf-bar--overlap .hf-menu--overflow.is-open .hf-menu__list a,
.site-header.hf-bar--overlap .hf-menu--overflow.is-open .hf-menu__list span,
.site-header.hf-bar--overlap .hf-menu--overflow.is-open .hf-menu__list button {
    color: #ffffff !important;
}

/* 묶음 제목은 연분홍으로 한 단계 올린다(먹색 바탕이라 11.7:1). */
.site-header .hf-menu--overflow.is-open .hf-menu__list .hf-menu__label,
.site-header.hf-bar--overlap .hf-menu--overflow.is-open .hf-menu__list .hf-menu__label {
    color: var(--brand-blush) !important;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.site-header .hf-menu--overflow.is-open .hf-menu__list a:hover,
.site-header.hf-bar--overlap .hf-menu--overflow.is-open .hf-menu__list a:hover {
    background: rgba(250, 216, 231, .14);
    color: var(--brand-blush) !important;
}

/* 서랍 안 하위 목록은 바탕·테두리 없이 글만. 서랍 바탕 하나로 충분하다. */
.hf-menu--overflow.is-open .hf-menu__sub {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* 닫기(✕) */
.hf-menu--overflow.is-open .hf-menu__offcanvas-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    background: transparent;
    color: #ffffff !important;
    font-size: 17px;
    cursor: pointer;
}

.hf-menu--overflow.is-open .hf-menu__offcanvas-close:hover {
    background: var(--brand-blush);
    border-color: var(--brand-blush);
    color: var(--brand-ink) !important;
}

/* ---------------------------------------------------------------------------
   65. 서랍 글자색 - 마지막으로 못 박는다
   앞서 색 규칙이 서로 이기고 지면서 흰 글자가 흰 바탕에, 먹색 글자가 먹색 바탕에
   올라가는 일이 반복됐다. 원인은 선택자 깊이 싸움이었다.

   41 절의 `body:not(:has(.hm-hero)) .site-header .hf-menu__sub a` 가 깊이 0-3-2 로
   서랍 안까지 먹색을 칠했다. 같은 깊이 이상으로 맞추고 맨 뒤에 둔다.
   서랍 바탕은 늘 먹색이므로 그 안의 글자는 늘 밝다 - 예외 없음.
   --------------------------------------------------------------------------- */
body .site-header .hf-menu--overflow.is-open .hf-menu__list,
body .site-header .hf-menu--overflow.is-open .hf-menu__list a,
body .site-header .hf-menu--overflow.is-open .hf-menu__list span,
body .site-header .hf-menu--overflow.is-open .hf-menu__list li,
body .site-header .hf-menu--overflow.is-open .hf-menu__list button,
body .site-header .hf-menu--overflow.is-open .hf-menu__sub,
body .site-header .hf-menu--overflow.is-open .hf-menu__sub a,
body .site-header .hf-menu--overflow.is-open .hf-menu__sub li {
    color: #ffffff !important;
}

body .site-header .hf-menu--overflow.is-open .hf-menu__list .hf-menu__label {
    color: var(--brand-blush) !important;
}

body .site-header .hf-menu--overflow.is-open .hf-menu__list a:hover,
body .site-header .hf-menu--overflow.is-open .hf-menu__sub a:hover {
    color: var(--brand-blush) !important;
    background: rgba(250, 216, 231, .14);
}

/* 서랍 안에서는 하위 목록을 늘 펼쳐 둔다 - 서랍에서 또 한 번 눌러 펼치게 할 이유가 없다. */
body .site-header .hf-menu--overflow.is-open .hf-menu__sub {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    min-width: 0;
    padding: 0;
}


/* ---------------------------------------------------------------------------
   66. 배너 없는 화면에서 메뉴를 펼쳤을 때
   머리글이 흰색으로 유지되므로 판과 글자도 흰 바탕 기준으로 못 박는다.
   서랍이 열렸을 때만 예외다 - 서랍 바탕은 먹색이라 글자가 밝아야 한다.
   --------------------------------------------------------------------------- */
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap,
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap:has(.hf-menu__item:hover),
body:not(:has(.hm-hero)) .site-header.hf-bar--overlap:has(.hf-menu__item:focus-within) {
    background-color: #ffffff !important;
}

body:not(:has(.hm-hero)) .site-header .hf-menu__mega-backdrop,
body:not(:has(.hm-hero)) .site-header .hf-menu__sub,
body:not(:has(.hm-hero)) .site-header .hf-menu__mega {
    background: #ffffff !important;
}

body:not(:has(.hm-hero)) .site-header .hf-menu__label,
body:not(:has(.hm-hero)) .site-header .hf-menu__item > a,
body:not(:has(.hm-hero)) .site-header .hf-menu__sub a,
body:not(:has(.hm-hero)) .site-header .hf-menu__mega a,
body:not(:has(.hm-hero)) .site-header .hf-menu__list > li > a {
    color: var(--brand-ink) !important;
}

body:not(:has(.hm-hero)) .site-header .hf-menu__sub a:hover,
body:not(:has(.hm-hero)) .site-header .hf-menu__mega a:hover {
    background: var(--brand-blush);
    color: var(--brand-ink) !important;
}

/* 서랍(오른쪽 MENU)이 열렸을 때만 먹색 판 + 밝은 글자. */
body:not(:has(.hm-hero)) .site-header .hf-menu--overflow.is-open .hf-menu__list {
    background-color: var(--brand-ink) !important;
}

body:not(:has(.hm-hero)) .site-header .hf-menu--overflow.is-open .hf-menu__list,
body:not(:has(.hm-hero)) .site-header .hf-menu--overflow.is-open .hf-menu__list a,
body:not(:has(.hm-hero)) .site-header .hf-menu--overflow.is-open .hf-menu__list span,
body:not(:has(.hm-hero)) .site-header .hf-menu--overflow.is-open .hf-menu__sub a {
    color: #ffffff !important;
}

body:not(:has(.hm-hero)) .site-header .hf-menu--overflow.is-open .hf-menu__sub,
body:not(:has(.hm-hero)) .site-header .hf-menu--overflow.is-open .hf-menu__mega-backdrop {
    background: transparent !important;
}

body:not(:has(.hm-hero)) .site-header .hf-menu--overflow.is-open .hf-menu__list .hf-menu__label {
    color: var(--brand-blush) !important;
}


/* ---------------------------------------------------------------------------
   67. 마지막 안전장치 - 연분홍을 꽉 채운 자리에는 반드시 먹색 글자
   지금까지 색이 사라진 경우는 모두 "바탕을 칠한 규칙"과 "글자색을 정한 규칙"이
   따로 있어서 짝이 어긋난 탓이었다. 꽉 찬 연분홍 바탕이 오는 자리를 모아
   글자색을 한 번 더 못 박는다. 연분홍 위 먹색은 11.7:1 이라 어디서나 읽힌다.
   --------------------------------------------------------------------------- */
.site-header .hf-menu__sub a:hover,
.site-header .hf-menu__mega a:hover,
.site-header .hf-menu__panel a:hover,
.site-header .hf-menu__list > li > a:hover {
    color: var(--brand-ink) !important;
    background: var(--brand-blush);
}

/* 단, 먹색 판 위에서는 반대다 - 판이 어두우니 글자는 밝아야 한다.
   (배너가 있는 화면의 얹힌 머리글, 그리고 오른쪽 MENU 서랍) */
body:has(.hm-hero) .site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__sub a:hover,
body:has(.hm-hero) .site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__mega a:hover,
body:has(.hm-hero) .site-header.hf-bar--overlap:not(.is-scrolled) .hf-menu__panel a:hover {
    color: var(--brand-blush) !important;
    background: rgba(250, 216, 231, .14);
}

body .site-header .hf-menu--overflow.is-open .hf-menu__list a:hover,
body .site-header .hf-menu--overflow.is-open .hf-menu__sub a:hover {
    color: var(--brand-blush) !important;
    background: rgba(250, 216, 231, .14);
}

/* ---------------------------------------------------------------------------
   68. 카드메뉴 오버레이 — 브랜드 입히기
   사진이 카드를 꽉 채우고 글자가 그 위에 얹히는 방식이다. 사진은 저마다 밝기가 달라서
   덮개 없이 흰 글자를 올리면 어떤 사진에서는 글자가 날아간다 - 아래쪽만 먹색으로
   깊게 덮고, 올리면 카드 전체가 먹색으로 차오르며 설명이 드러난다.
   --------------------------------------------------------------------------- */
.feature-carousel--overlay .card {
    height: clamp(300px, 26vw, 400px);
    border-radius: 2px;
    background-color: var(--brand-ink);
    box-shadow: none;
    overflow: hidden;
}

.feature-carousel--overlay .card__img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: saturate(.92);
    transition: transform .6s cubic-bezier(.2, .7, .3, 1), filter .4s ease;
}

.feature-carousel--overlay .card:hover .card__img {
    transform: scale(1.06);
    filter: saturate(1) brightness(.78);
}

/* 덮개 - 아래가 짙고 위로 갈수록 투명. 올리면 전체가 고르게 짙어진다. */
.feature-carousel--overlay .card::after {
    background: linear-gradient(180deg,
        rgba(35, 31, 32, .08) 0%,
        rgba(35, 31, 32, .22) 46%,
        rgba(35, 31, 32, .88) 100%);
    transition: background .4s ease;
}

.feature-carousel--overlay .card:hover::after {
    background: linear-gradient(180deg, rgba(35, 31, 32, .72) 0%, rgba(35, 31, 32, .92) 100%);
}

/* 글자 칸 - 사진 위에 얹히므로 바탕을 따로 두지 않는다(덮개가 바탕 노릇을 한다). */
.feature-carousel--overlay .card__body {
    background: transparent !important;
    padding: 0 24px 24px;
    z-index: 1;
}

.feature-carousel--overlay .card:hover .card__body {
    background: transparent !important;
}

.feature-carousel--overlay .card__body h3,
.feature-carousel--overlay .card__body .card__title {
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* 제목 아래 짧은 연분홍 줄 - 카드마다 같은 자리에 와서 묶음으로 읽힌다. */
.feature-carousel--overlay .card__body h3::after,
.feature-carousel--overlay .card__body .card__title::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin: 12px 0 0;
    background: var(--brand-blush);
    opacity: 1;
    transition: width .35s ease;
}

.feature-carousel--overlay .card:hover .card__body h3::after {
    width: 54px;
}

/* 설명은 평소에 접어 두고 올렸을 때 편다 - 첫눈에는 제목만, 관심을 보이면 설명까지. */
.feature-carousel--overlay .card__body p {
    color: rgba(255, 255, 255, .9);
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .4s ease, opacity .3s ease, margin .4s ease;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.feature-carousel--overlay .card:hover .card__body p {
    max-height: 6em;
    opacity: 1;
    margin-top: 12px;
}

/* 오른쪽 아래 화살표는 오버레이에서 제목 줄이 대신한다. */
.feature-carousel--overlay .card__body::after { content: none; }

/* 손가락으로 쓰는 화면에는 hover 가 없다 - 설명을 처음부터 펴 두고 덮개도 짙게 둔다. */
@media (hover: none) {
    .feature-carousel--overlay .card__body p { max-height: 6em; opacity: 1; margin-top: 12px; }
    .feature-carousel--overlay .card::after {
        background: linear-gradient(180deg, rgba(35, 31, 32, .3) 0%, rgba(35, 31, 32, .9) 100%);
    }
}

/* ---------------------------------------------------------------------------
   69. 카드메뉴 좌우 버튼
   꺾쇠 글자(&#8249;)는 글꼴마다 굵기도 위치도 달라서 원 안에서 늘 조금씩 비뚤다.
   글자를 숨기고 테두리 두 변을 돌려 꺾쇠를 직접 그린다 - 어느 글꼴에서나 같다.
   --------------------------------------------------------------------------- */
.feature-carousel .carousel__arrow {
    width: 46px;
    height: 46px;
    font-size: 0;                       /* 안의 꺾쇠 글자를 지운다 */
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(35, 31, 32, .08);
    box-shadow: 0 6px 20px rgba(35, 31, 32, .14);
    color: var(--brand-ink);
    opacity: .92;
    transition: background-color .25s ease, color .25s ease, opacity .25s ease,
                transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}

.feature-carousel .carousel__arrow::before {
    content: "";
    width: 9px;
    height: 9px;
    border: solid currentColor;
    border-width: 1.6px 1.6px 0 0;      /* 위·오른쪽 두 변만 - 돌리면 꺾쇠가 된다 */
    transition: border-color .25s ease;
}

.feature-carousel .carousel__arrow--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.feature-carousel .carousel__arrow--next::before { transform: rotate(45deg); margin-right: 3px; }

.feature-carousel .carousel__arrow:hover {
    background: var(--brand-ink);
    border-color: var(--brand-ink);
    color: #ffffff;
    opacity: 1;
    box-shadow: 0 10px 28px rgba(35, 31, 32, .26);
    transform: translateY(-50%) scale(1.07);
}

/* 누르는 순간에는 살짝 들어가게 - 눌렸다는 것이 보여야 한다. */
.feature-carousel .carousel__arrow:active { transform: translateY(-50%) scale(.96); }

.feature-carousel .carousel__arrow:focus-visible {
    outline: 2px solid var(--brand-blush-deep);
    outline-offset: 3px;
}

/* 손가락으로 쓰는 화면에서는 버튼을 조금 줄이고 가장자리에 붙인다. */
@media (max-width: 760px) {
    .feature-carousel { padding: 0 44px; }
    .feature-carousel .carousel__arrow { width: 40px; height: 40px; }
    .feature-carousel .carousel__arrow--prev { left: 0; }
    .feature-carousel .carousel__arrow--next { right: 0; }
}

/* 좁은 화면에서 카드 사진에 걸어 둔 16:10 비율은 오버레이 카드에는 해당이 없다 -
   오버레이는 사진이 카드를 통째로 채우는 것이 전제다. */
@media (max-width: 760px) {
    .feature-carousel--overlay .card__img-wrap { aspect-ratio: auto; }
}

/* ===========================================================================
   70. 속지 화면 - 머리띠(page-head)
   27개 화면이 .page-head 하나를 같이 쓴다. 여기 한 번만 제대로 만들면 전부 바뀐다.
   먹색 사각 상자 대신, 화면 폭을 꽉 채우는 사진 띠로 간다. 사진은 왼쪽이 짙고
   오른쪽으로 갈수록 옅어져서 - 글자가 앉는 왼쪽은 늘 어둡고 사진은 오른쪽에서 산다.
   =========================================================================== */
.page-head {
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw) 48px;
    padding: clamp(56px, 7vw, 92px) 0 clamp(50px, 6vw, 78px);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    color: #ffffff;
    background-color: var(--brand-ink);
    background-image:
        linear-gradient(100deg,
            rgba(35, 31, 32, .95) 0%,
            rgba(35, 31, 32, .86) 38%,
            rgba(35, 31, 32, .52) 72%,
            rgba(35, 31, 32, .34) 100%),
        url("/img/hero-general.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/*  띠는 화면 끝까지 가지만 글자는 본문과 같은 세로줄에 선다 - 안 그러면 따로 논다. */
.page-head > * {
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 20px;
}

/*  제목 위 짧은 연분홍 줄 - 메인의 카드·배너와 같은 신호다. */
.page-head h1 {
    font-family: var(--font-display);
    font-size: clamp(27px, 3.6vw, 44px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
    color: #ffffff;
    text-align: left;
    margin: 0 auto;
}

.page-head h1::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 0 22px;
    background: var(--brand-blush);
}

.page-head p {
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.75;
    text-align: left;
    color: rgba(255, 255, 255, .8);
}

.page-head p a {
    color: #ffffff;
    font-weight: 700;
    border-bottom: 1px solid var(--brand-blush);
    padding-bottom: 1px;
}

.page-head p a:hover { background: transparent; color: var(--brand-blush); }

/*  띠가 머리글 바로 아래에 붙게 - 본문 상자의 위 여백을 그만큼 거둔다. */
.signup-wrap:has(> .page-head),
main:has(> .page-head) { margin-top: 0; padding-top: 0; }

/*  화면 갈래마다 사진을 달리 둔다 - 들어온 곳이 어디인지 그림으로 먼저 안다. */
.board-page .page-head { background-image:
    linear-gradient(100deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.86) 38%, rgba(35,31,32,.52) 72%, rgba(35,31,32,.34) 100%),
    url("/img/hero-board.jpg"); }

.apply-page .page-head { background-image:
    linear-gradient(100deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.86) 38%, rgba(35,31,32,.52) 72%, rgba(35,31,32,.34) 100%),
    url("/img/hero-apply.jpg"); }

/*  좁은 화면에서는 사진을 세로로 눌러 담고 덮개를 위아래 방향으로 바꾼다 -
    가로 방향 그라데이션은 폭이 좁으면 글자 뒤가 밝아진다. */
@media (max-width: 760px) {
    .page-head {
        margin-bottom: 32px;
        padding: 46px 0 40px;
        background-image:
            linear-gradient(160deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.84) 55%, rgba(35,31,32,.6) 100%),
            url("/img/hero-general.jpg");
    }
    .board-page .page-head { background-image:
        linear-gradient(160deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.84) 55%, rgba(35,31,32,.6) 100%),
        url("/img/hero-board.jpg"); }
    .apply-page .page-head { background-image:
        linear-gradient(160deg, rgba(35,31,32,.95) 0%, rgba(35,31,32,.84) 55%, rgba(35,31,32,.6) 100%),
        url("/img/hero-apply.jpg"); }
    .page-head h1 { font-size: 25px; }
    .page-head h1::before { margin-bottom: 16px; }
    .page-head p { font-size: 14px; margin-top: 12px; }
}

/* ===========================================================================
   71. 로그인·아이디찾기·비밀번호 재설정
   화면 폭을 반으로 가르니 1920 모니터에서는 입력칸 네 개가 허허벌판에 떠 있었다.
   가운데에 폭이 정해진 한 장으로 모은다 - 왼쪽에 사진, 오른쪽에 입력.
   마크업은 손대지 않는다 - 사진 칸은 가상 요소로 만든다.
   =========================================================================== */
.login-wrap {
    /*  사진 칸 폭을 한 군데에만 적는다 - 칸, 사진, 경계선 셋이 늘 같은 값을 본다. */
    --auth-panel: 360px;
    /*  입력칸이 읽기 좋은 폭(--auth-measure)을 넘어 늘어나지 않게 한다.
        칸이 넓다고 입력칸까지 같이 늘리면 아이디 한 줄이 화면을 가로지른다. */
    --auth-pad: clamp(32px, 3.6vw, 52px);
    --auth-measure: 380px;
    position: relative;
    display: grid;
    grid-template-columns: var(--auth-panel) minmax(0, 1fr);
    align-content: center;
    width: min(980px, 100% - 48px);
    max-width: none;
    margin: 56px auto 96px;
    padding: 0 0 64px;
    min-height: 560px;
    background: #ffffff;
    border: 1px solid var(--brand-line);
    box-shadow: 0 30px 70px rgba(35, 31, 32, .1);
    overflow: hidden;
}

/*  머리글이 떠 있는(fixed) 화면에서는 그만큼 내려야 한다. 본문 전체에 걸린 padding-top 은
    사진 칸(가상 요소)까지 밀어 올려 한 장이 깨지므로, 여백이 아니라 바깥 간격으로 받는다. */
body:has(.site-header.hf-bar--overlap) .login-wrap {
    padding-top: 0 !important;
    margin-top: calc(var(--fixed-header-height, 143px) + 56px);
}

/*  한 장이 떠 보이게 바깥은 크림색으로. */
body:has(.login-wrap) { background: var(--brand-cream); }

/*  왼쪽 사진 칸. 흐름 밖(absolute)이라 글이 몇 줄이든 늘 끝까지 내려온다. */
.login-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--auth-panel);
    background-color: var(--brand-ink);
    background-image:
        linear-gradient(185deg, rgba(35, 31, 32, .3) 0%, rgba(35, 31, 32, .7) 100%),
        url("/img/auth-panel.jpg");
    background-size: cover;
    background-position: center;
}

/*  사진과 입력 칸이 맞닿는 선에 연분홍 실선 한 줄 - 두 칸이 한 벌로 묶인다. */
.login-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--auth-panel);
    width: 3px;
    background: var(--brand-blush);
}

.login-wrap > * {
    grid-column: 2;
    justify-self: center;
    width: 100%;
    min-width: 0;
    max-width: calc(var(--auth-measure) + 2 * var(--auth-pad));
    padding-inline: var(--auth-pad);
}

/*  제 테두리와 여백을 가진 알림 상자는 통째로 안으로 들여놓는다 -
    위 규칙의 좌우 여백이 상자 <안쪽> 여백을 덮어쓰면 글이 테두리에 붙는다. */
.login-wrap > .login-error,
.login-wrap > .signup-desc,
.login-wrap > .find-result {
    width: calc(100% - 2 * var(--auth-pad));
    margin-inline: var(--auth-pad);
    padding-inline: 18px;
}

/*  글 묶음은 한 장 가운데에 선다(align-content:center) - 위에 따로 여백을 더하면
    가운데가 아래로 밀린다. 위 여백은 min-height 가 대신 만든다. */
.login-wrap h1 {
    text-align: left;
    font-size: 34px;
    margin: 0;
}

.login-wrap h1::after { margin: 18px 0 30px; }

/*  이미 한 장 안이다 - 상자 안에 상자를 또 두지 않는다. */
.login-form {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 14px;
}

/*  입력칸은 긴 입력 화면과 같은 모양으로 - 사이트 안에서 칸 생김새가 달라지면 안 된다. */
.login-wrap input[type="text"],
.login-wrap input[type="email"],
.login-wrap input[type="tel"],
.login-wrap input[type="password"] {
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--brand-line, rgba(35, 31, 32, .12));
    border-radius: 2px;
    font-size: 15px;
    background: #ffffff;
    color: var(--brand-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.login-wrap input:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px var(--brand-blush);
}

.login-wrap .btn--block { min-height: 54px; font-size: 15.5px; }

.login-find, .login-signup-link { text-align: left; }
.login-find { margin-top: 26px; }
.login-signup-link { margin-top: 10px; }

/*  화면이 줄면 사진 칸부터 줄인다 - 입력 쪽이 먼저 좁아지면 글이 눌린다. */
@media (max-width: 1040px) {
    .login-wrap { --auth-panel: 300px; min-height: 520px; }
}

/*  좁은 화면 - 사진은 위쪽 띠로 내려앉고, 한 장은 화면 폭을 거의 다 쓴다. */
@media (max-width: 760px) {
    .login-wrap {
        grid-template-columns: 1fr;
        width: min(460px, 100% - 28px);
        --auth-pad: 26px;
        --auth-measure: 999px;
        margin: 28px auto 64px;
        padding: 0 0 44px;
        min-height: 0;
    }
    body:has(.site-header.hf-bar--overlap) .login-wrap {
        margin-top: calc(var(--fixed-header-height, 143px) + 24px);
    }
    .login-wrap::before {
        position: static;
        display: block;
        width: 100%;
        height: 160px;
        background-image:
            linear-gradient(170deg, rgba(35, 31, 32, .28) 0%, rgba(35, 31, 32, .62) 100%),
            url("/img/auth-panel.jpg");
        background-position: center 32%;
    }
    .login-wrap::after { top: 160px; bottom: auto; left: 0; width: 100%; height: 3px; }
    .login-wrap > * { grid-column: 1; max-width: none; }
    .login-wrap > h1 { padding-top: 34px; }
}

/* ===========================================================================
   72. 긴 입력 화면의 속 - 묶음 상자와 한 줄 한 줄
   연분홍(#fad8e7)은 바탕으로는 좋지만 흰 바탕 위 글자로 쓰면 안 읽힌다.
   필수 표시처럼 "눈에 띄어야 하는 분홍"은 한 단 더 내린 색을 따로 둔다.
   =========================================================================== */
:root {
    --brand-rose: #c25683;
    --brand-line: rgba(35, 31, 32, .12);
    --brand-line-soft: rgba(35, 31, 32, .08);
}

.form-section {
    padding: 0;
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    box-shadow: none;
    overflow: hidden;
    margin: 0 0 22px;
}

.form-section__title {
    padding: 19px 26px 17px;
    background: var(--brand-cream);
    border-bottom: 1px solid var(--brand-line-soft);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--brand-ink);
}

/* 동그란 점 대신 짧은 분홍 막대 - 카드·배너·머리띠와 같은 신호를 쓴다. */
.form-section__title::before {
    width: 18px;
    height: 3px;
    border-radius: 0;
    background: var(--brand-blush-deep);
    margin-right: 12px;
    vertical-align: middle;
    transform: translateY(-2px);
}

.form-table { padding: 4px 26px 20px; }

/* 이름 칸에 회색 바탕을 깔면 표처럼 보인다 - 선 하나로만 나눈다. */
.form-row__label {
    background: transparent;
    border-right: 0;
    border-top: 1px solid var(--brand-line-soft);
    padding: 17px 16px 17px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.form-row__field {
    border-top: 1px solid var(--brand-line-soft);
    padding: 12px 0;
}

.required { color: var(--brand-rose); font-weight: 700; }

.form-table input[type="text"],
.form-table input[type="password"],
.form-table input[type="email"],
.form-table input[type="tel"],
.form-table input[type="number"],
.form-table input[type="date"],
.form-table input[type="file"],
.form-table select,
.form-table textarea,
.signup-wrap .survey-list input[type="text"],
.signup-wrap .survey-list input[type="tel"],
.signup-wrap .survey-list input[type="email"],
.signup-wrap .survey-list select,
.signup-wrap .survey-list textarea {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    font-size: 14px;
    background-color: #ffffff;
    color: var(--brand-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-table input:focus,
.form-table select:focus,
.form-table textarea:focus,
.signup-wrap .survey-list input:focus,
.signup-wrap .survey-list select:focus,
.signup-wrap .survey-list textarea:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px var(--brand-blush);
}

/* 안내 상자 - 노란 경고색 대신 크림 바탕에 분홍 세로줄. */
.form-section--notice {
    background: var(--brand-cream);
    border-color: var(--brand-blush-deep);
}

.form-section--notice .form-row__label,
.form-section--notice .form-row__field { border-top: 0; }

/* 좁은 화면 - 이름이 입력칸 위로 올라간다. */
@media (max-width: 640px) {
    .form-table { padding: 2px 18px 16px; }
    .form-row__label { padding: 14px 0 2px; }
    .form-row__field { padding: 0 0 14px; border-top: 0; }
    .form-table .form-row:not(:first-child) .form-row__label {
        border-top: 1px solid var(--brand-line-soft);
    }
}

/* ===========================================================================
   73. 글 목록(공지·게시판) - 제목이 먼저 읽히게
   =========================================================================== */
.notice-list,
.board-list { border-top: 1px solid var(--brand-ink); }

.notice-list li,
.board-list li,
.notice-list__item,
.board-list__item { border-bottom: 1px solid var(--brand-line-soft); }

.notice-list a,
.board-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 6px 22px 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--brand-ink);
    transition: color .2s ease, padding-left .25s ease;
}

.notice-list a:hover,
.board-list a:hover {
    background: transparent;
    color: var(--brand-rose);
    padding-left: 10px;
}

.notice-list time,
.board-list time,
.notice-list .date,
.board-list .date {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   74. 속지 화면의 나머지 - 제출 줄, 쪽 번호, 고르기 카드, 글 보기
   =========================================================================== */

/* 제출 줄 - 긴 입력을 끝낸 자리다. 위에 선 하나 긋고 단추를 가운데로. */
.signup-submit {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--brand-line);
    text-align: center;
}

.signup-submit .btn { min-width: 220px; }

.signup-submit .btn--primary {
    padding: 16px 40px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: 0 10px 26px rgba(35, 31, 32, .18);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, background-color .22s ease;
}

.signup-submit .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(35, 31, 32, .26);
}

/* 쪽 번호 - 네모난 칸 대신 글자만. 지금 쪽만 먹색 알약. */
.board-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 44px;
}

.board-pagination a,
.board-pagination span {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    transition: background-color .2s ease, color .2s ease;
}

.board-pagination a:hover { background: var(--brand-blush); color: var(--brand-ink); }

.board-pagination a.current,
.board-pagination .current {
    background: var(--brand-ink);
    color: #ffffff;
}

/* 누구로 들어갈지 고르는 카드 - 메인 카드와 같은 각진 모서리로. */
.signup-choice,
.login-choice { gap: 18px; }

.login-choice__card,
.signup-choice__card {
    border-radius: 2px;
    border: 1px solid var(--brand-line);
    padding: 30px 26px;
}

.login-choice__card strong,
.signup-choice__card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}

.login-choice__card:hover,
.signup-choice__card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-ink);
    background: var(--brand-cream);
    box-shadow: 0 14px 30px rgba(35, 31, 32, .1);
}

/* 글 보기 - 제목과 본문 사이를 넉넉히. */
.board-view__title,
.board-detail__title {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.35;
    margin: 0 0 14px;
}

.board-view__meta,
.board-detail__meta {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--brand-ink);
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}

.board-view__body,
.board-detail__body {
    padding: 36px 0 44px;
    font-size: 15.5px;
    line-height: 1.85;
}

/* 날짜는 자릿수가 흔들리지 않게. */
.board-list__date, .notice-list__date {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------------------------
   75. 영상 위에 얹힌 로고의 시인성
   얹힌 머리글에서는 로고를 반전(invert)시켜 흰색으로 쓴다. 그런데 뒤에 깔린 영상은
   한 장면이 아니다 - 밝은 장면이 지나가면 흰 로고가 그대로 사라진다.
   색을 바꾸는 대신 그림자를 깔아 준다 - 어떤 장면에서도 테두리가 남는다.
   --------------------------------------------------------------------------- */
.site-header.hf-bar--overlap:not(.is-scrolled) .site-logo img,
.site-header.hf-bar--overlap:not(.is-scrolled) .hf-logo-box img {
    filter: invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .55))
                      drop-shadow(0 4px 14px rgba(0, 0, 0, .35));
}

/* ===========================================================================
   76. 속지 화면의 머리글은 비치면 안 된다
   머리글은 떠 있고(fixed) 속지의 사진 띠는 그 아래로 지나간다. 머리글이 조금이라도
   비치면 로고와 메뉴 글자가 지나가는 사진과 겹쳐 읽히지 않는다 - 실제로 회원가입
   화면을 내릴 때 그렇게 됐다.
   배너(.hm-hero)가 있는 메인만 비치는 머리글을 쓰고, 나머지는 어느 상태에서나
   완전한 흰 바닥으로 못 박는다. 비침을 켜는 쪽(.hf-bar--transparent, 얹힘 상태)이
   전부 !important 라서, 끄는 쪽도 같은 세기로 적어야 이긴다.
   =========================================================================== */
html body:not(:has(.hm-hero)) .site-header,
html body:not(:has(.hm-hero)) .site-header.hf-bar--transparent,
html body:not(:has(.hm-hero)) .site-header.hf-bar--overlap,
html body:not(:has(.hm-hero)) .site-header.hf-bar--overlap.hf-bar--transparent,
html body:not(:has(.hm-hero)) .site-header.hf-bar--overlap:not(.is-scrolled),
html body:not(:has(.hm-hero)) .site-header.hf-bar--overlap.is-scrolled {
    background-color: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 머리글 안쪽 칸들이 제 바탕을 또 칠하면 두 줄이 서로 다른 흰색이 된다 - 비워 둔다. */
html body:not(:has(.hm-hero)) .site-header .hf-canvas,
html body:not(:has(.hm-hero)) .site-header .hf-canvas--header,
html body:not(:has(.hm-hero)) .site-header .hf-free-grid,
html body:not(:has(.hm-hero)) .site-header .hf-menu--horizontal,
html body:not(:has(.hm-hero)) .site-header .hf-menu--horizontal > .hf-menu__list {
    background-color: transparent !important;
}

/* 흰 바닥이니 글자·로고는 먹색 그대로. 반전(invert)이 남아 있으면 흰 글이 된다. */
html body:not(:has(.hm-hero)) .site-header .site-logo img,
html body:not(:has(.hm-hero)) .site-header .hf-logo-box img {
    filter: none !important;
}

/* 아래 테두리는 연분홍 실선 한 줄 - 머리글이 어디서 끝나는지 늘 보인다. */
html body:not(:has(.hm-hero)) .site-header::after {
    height: 3px;
    background: var(--brand-blush) !important;
    opacity: 1;
}

/* ===========================================================================
   77. 참가규정 동의 줄 · 부스 안내 ※ 문단
   =========================================================================== */

/*  이름이 비어 있는 줄은 이름 칸을 아예 쓰지 않는다.
    빈 칸이 160px 를 차지하고 그 위에 선까지 그어져서, 체크 한 줄이 혼자 오른쪽으로
    밀려 있었다(참가규정 동의). 이름이 없으면 입력 칸이 두 칸을 다 쓴다. */
.form-row:has(> .form-row__label:empty) > .form-row__label { display: none; }
.form-row:has(> .form-row__label:empty) > .form-row__field { grid-column: 1 / -1; }

/*  체크·문구·별표·규정 링크는 한 줄에 선다. label 이 칸을 다 차지하면
    별표와 링크가 저마다 줄바꿈돼 네 줄이 된다. */
.terms-agree-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--brand-ink);
}

.terms-agree-check input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--brand-ink);
    flex: 0 0 auto;
}

.terms-agree-check .required { margin-left: 0; }

/*  "참가규정" 은 읽으러 가는 링크다 - 동의 문구와 붙어 보이지 않게 칸을 띄우고
    연분홍 밑줄을 깐다(사이트의 다른 링크와 같은 표시). */
.form-row__field > .survey-q__link {
    margin-left: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--brand-blush);
    padding-bottom: 2px;
    transition: border-color .2s ease, color .2s ease;
}

.form-row__field > .survey-q__link:hover {
    color: var(--brand-rose);
    border-bottom-color: var(--brand-rose);
    background: transparent;
}

/*  동의 한 줄만 들어 있는 묶음은 표처럼 보일 이유가 없다 - 위 선을 지운다. */
.form-row:has(.terms-agree-check) > .form-row__field { border-top: 0; padding: 6px 0 4px; }

/*  ※ 로 시작하는 주의 문단. 표에 바로 붙어 있어 숨 쉴 곳이 없었다.
    표와 사이를 띄우고, 줄 간격을 넓히고, 왼쪽에 연분홍 세로줄을 세워
    "본문이 아니라 덧붙이는 말"로 읽히게 한다. */
.booth-fee__note {
    margin: 26px 0 0;
    padding: 18px 22px;
    border-left: 3px solid var(--brand-blush-deep);
    background: var(--brand-cream);
    font-size: 13px;
    line-height: 2.15;
    color: var(--color-text-muted);
}

.booth-fee__bank {
    margin: 14px 0 0;
    padding: 16px 20px;
    border-radius: 2px;
    background: #ffffff;
    border: 1px solid var(--brand-line);
    font-size: 13.5px;
    line-height: 1.85;
}

.booth-fee__bank b {
    display: inline-block;
    margin-right: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--brand-blush);
    color: var(--brand-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.booth-fee__bank small { margin-top: 8px; }

/* ===========================================================================
   78. 아이디 찾기 · 비밀번호 찾기 - 읽는 차례대로 놓는다
   입력칸·단추·안내가 전부 같은 간격으로 쌓여 있어서 단추가 세 번째 입력칸처럼
   보였고, "어디로 보냅니다" 안내는 단추 <아래>에 있었다 - 무엇을 누르는지 모르는
   채로 누르게 된다. 무리를 나누고 안내를 위로 올린다.
   =========================================================================== */
.login-wrap .login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*  누르는 단추는 입력칸 묶음과 떨어져 있어야 한다. */
.login-wrap .login-form > .btn { margin-top: 12px; }

/*  메일로 / 문자로 처럼 짝지은 단추끼리는 붙여서 한 벌로 보이게. */
.login-wrap .login-form > .btn + .btn { margin-top: 0; }

/*  보내는 곳 안내는 맨 위에서 읽힌다(차례만 바꾼다 - 글의 순서는 그대로다). */
.login-wrap .login-form > .find-resend__hint {
    order: -1;
    margin: -10px 0 12px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--color-text-muted);
}

/*  둘째 단추는 둘째로 보이게 - 테두리만 두고 올리면 연분홍이 깔린다. */
.login-wrap .btn--ghost {
    background: transparent;
    border: 1px solid var(--brand-line);
    color: var(--brand-ink);
    font-weight: 600;
}

.login-wrap .btn--ghost:hover {
    background: var(--brand-blush);
    border-color: var(--brand-blush);
    color: var(--brand-ink);
}

/*  어느 쪽으로 찾는 중인지 알려 주는 줄 - 제목 바로 아래 작은 꼬리표로. */
.login-wrap .login-kind {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: -14px 0 26px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.login-wrap .login-kind > span:first-child {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--brand-blush);
    color: var(--brand-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

.login-wrap .login-kind a {
    color: var(--brand-ink);
    font-weight: 700;
    border-bottom: 1px solid var(--brand-blush-deep);
}

.login-wrap .login-kind a:hover { background: transparent; color: var(--brand-rose); }

/*  찾기에 성공했을 때 - 결과는 따로 선 판 위에서 읽힌다. */
.login-wrap .find-result {
    border: 1px solid var(--brand-line);
    border-left: 3px solid var(--brand-blush-deep);
    background: var(--brand-cream);
    padding: 24px 26px;
    font-size: 14.5px;
    line-height: 1.8;
}

.login-wrap .find-result strong {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
}

.login-wrap .find-result__meta { font-size: 12.5px; color: var(--color-text-muted); }

.login-wrap .find-result .btn--block { margin-top: 18px; }

.login-wrap .find-resend { margin-top: 18px; }
.login-wrap .find-resend__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.login-wrap .find-resend__btns .btn { flex: 1 1 150px; }

/* ===========================================================================
   79. 신청 받는 위젯(뉴스레터 구독 등)
   라벨과 입력칸이 한 줄씩 그냥 쌓여 있어서 페이지 가운데에 맨몸으로 떠 있었다.
   한 장의 판 위에 올리고, 이름·이메일처럼 짧은 칸은 두 칸씩 나란히 놓는다.
   =========================================================================== */
.section.form-widget {
    max-width: 760px;
    margin-inline: auto;
    padding: clamp(40px, 4.5vw, 64px) clamp(26px, 3.5vw, 54px) clamp(36px, 4vw, 56px);
    background: var(--brand-cream);
    border: 1px solid var(--brand-line);
    border-top: 3px solid var(--brand-blush-deep);
    border-radius: 2px;
}

.section.form-widget > h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: center;
    margin: 0;
}

.form-widget__desc {
    max-width: 46ch;
    margin: 14px auto 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--color-text-muted);
}

.form-widget__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    margin-top: 32px;
}

/* 소속·동의·단추·알림은 한 줄을 통째로 쓴다. */
.form-widget__field:nth-of-type(n+3),
.form-widget__consent,
.form-widget__submit,
.form-widget__message,
.form-widget__download { grid-column: 1 / -1; }

.form-widget__field { display: grid; gap: 7px; }

.form-widget__field label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}

.form-widget__field input {
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    background: #ffffff;
    font-size: 15px;
    color: var(--brand-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-widget__field input:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px var(--brand-blush);
}

.form-widget__consent {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13.5px;
}

.form-widget__consent label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.form-widget__consent-input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand-ink);
}

.form-widget__submit {
    justify-self: center;
    min-width: 240px;
    min-height: 54px;
    margin-top: 10px;
    font-size: 15.5px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(35, 31, 32, .18);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}

.form-widget__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(35, 31, 32, .26);
}

.form-widget__message {
    margin: 4px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--brand-blush-deep);
    background: #ffffff;
    font-size: 14px;
    text-align: left;
}

.form-widget__message--error { border-left-color: var(--brand-rose); color: var(--brand-rose); }

@media (max-width: 600px) {
    .form-widget__form { grid-template-columns: 1fr; }
    .form-widget__field:nth-of-type(n+1) { grid-column: 1 / -1; }
    .form-widget__submit { width: 100%; min-width: 0; }
}

/* ---------------------------------------------------------------------------
   80. 키를 정해 준 단추는 글자도 가운데에 와야 한다
   .btn 은 display:inline-block 이다. 거기에 min-height 만 주면 상자만 커지고
   글자는 위에 그대로 붙어 있다 - 체크리스트의 "신청하기" 가 위로 쏠려 보인 이유다.
   키를 정해 준 자리에서는 가운데 정렬이 되는 상자로 바꾼다.
   --------------------------------------------------------------------------- */
.login-wrap .btn--block,
.form-widget__submit,
.signup-submit .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*  구독 단추는 폭을 다 쓰지 않는다 - 가운데에 알약 하나로 선다(79절). */
.login-wrap .btn--block { width: 100%; }

/* ---------------------------------------------------------------------------
   81. 폰에서 배너 위에 흰 줄이 생기던 것
   폰에서는 자유배치 줄에 위아래 28px 여백을 준다(위젯끼리 붙지 않게). 그런데 배너가
   든 줄에도 그 여백이 걸려서, 머리글만큼 끌어올린 뒤에도 배너가 28px 아래에서
   시작했다 - 화면 맨 위에 바탕색 띠가 한 줄 남고 배너가 머리글과 완전히 겹치지 못했다.
   좌우 여백은 이미 없애 두었는데(43절) 위아래를 빠뜨린 것이다.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .free-grid:has(.hm-hero),
    .free-grid__item:has(.hm-hero) {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ---------------------------------------------------------------------------
   82. 내려오는 메뉴를 한 덩어리로
   뒤에 깔리는 판은 높이가 0.25초 동안 커튼처럼 늘어나는데, 그 위의 글자는 0.12초
   만에 떠 버렸다. 판이 아직 반쯤 내려왔는데 글자는 이미 다 보이니 두 장이 따로
   노는 것처럼 읽힌다. 둘을 같은 시간·같은 곡선에 묶는다.
   --------------------------------------------------------------------------- */
.hf-menu__mega-backdrop {
    transition: height .26s cubic-bezier(.2, .7, .3, 1),
                opacity .26s cubic-bezier(.2, .7, .3, 1),
                visibility .26s;
}

.hf-menu--horizontal .hf-menu__sub,
.hf-menu[data-style="MEGA"] .hf-menu__sub,
.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__sub {
    transition: opacity .26s cubic-bezier(.2, .7, .3, 1),
                visibility .26s;
}

/* 하위 항목 글자는 판이 내려오는 동안 같이 떠오른다 - 판보다 먼저 자리를 잡으면
   글자만 공중에 뜬 것처럼 보인다. */
.hf-menu--horizontal .hf-menu__sub li a,
.hf-menu[data-style="MEGA"] .hf-menu__sub li a,
.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__sub li a {
    transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}

/* ---------------------------------------------------------------------------
   83. 오른쪽 MENU 탭 - 어느 바탕 위에서도 보이게
   탭이 흰 바탕에 실선 한 줄이라, 흰 본문 위로 내려오면 테두리만 남아 사실상
   사라졌다(폰에서 "우측 메뉴가 안 보인다"). 화면에 늘 떠 있는 단추는 뒤에 무엇이
   오든 읽혀야 한다 - 먹색 바탕에 흰 글자로 바꾼다.
   --------------------------------------------------------------------------- */
.hf-menu--force-hamburger.hf-menu--overflow .hf-menu__hamburger-toggle {
    background-color: var(--brand-ink);
    border: 0;
    box-shadow: -6px 0 22px rgba(35, 31, 32, .28);
    transition: background-color .2s ease, width .2s ease;
}

.hf-menu--force-hamburger .hf-menu__hamburger-label { color: #ffffff; }

/* 햄버거 세 줄도 흰색으로. 아이콘은 선으로 그린 그림(stroke="currentColor")이라
   글자색만 주면 된다 - 바탕색을 주면 통째로 칠해져 흰 네모가 된다(실제로 그랬다). */
.hf-menu--force-hamburger.hf-menu--overflow .hf-menu__hamburger-toggle { color: #ffffff; }

.hf-menu--force-hamburger.hf-menu--overflow .hf-menu__hamburger-toggle:hover {
    background-color: var(--brand-rose);
}

/* 열려 있는 동안에는 연분홍으로 - 지금 이것 때문에 서랍이 나와 있다는 표시. */
.hf-menu--force-hamburger.hf-menu--overflow.is-open .hf-menu__hamburger-toggle {
    background-color: var(--brand-blush);
}

.hf-menu--force-hamburger.hf-menu--overflow.is-open .hf-menu__hamburger-label { color: var(--brand-ink); }

.hf-menu--force-hamburger.hf-menu--overflow.is-open .hf-menu__hamburger-toggle { color: var(--brand-ink); }

/* 구독 위젯 제목 밑줄 - 본문 구역 제목에 쓰는 밑줄이 그대로 따라와서, 가운데 정렬된
   이 카드에서는 설명 글 아래에 동떨어진 막대로 떨어졌다. 제목 바로 밑에 붙인다. */
/* 제목을 세로 flex 로 두면 밑줄이 칸 하나를 차지한다 - margin 으로 띄우면 그 여백이
   제목 밖으로 빠져나가(마진 상쇄) 밑줄이 설명 글자 위에 겹쳐 떨어졌다. */
.section.form-widget > h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.section.form-widget > h2::after {
    position: static;
    display: block;
    width: 34px;
    height: 3px;
    margin: 0;
    transform: none;
    background: var(--brand-blush-deep);
    background-image: none;
    border: 0;
}

/* 설명 글을 28px 끌어올리던 보정은 제목 아래 48px 여백을 메우려던 것이다. 제목을 다시
   짜면서 그 여백이 없어졌으니 보정도 거둔다 - 안 거두면 설명이 밑줄 위로 올라앉는다. */
.section.form-widget > h2 + .form-widget__desc { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   84. 폰에서 MENU 서랍이 빈 판으로 열리던 것
   39절에서 좁은 화면의 가로 메뉴 줄을 접으면서 "서랍이 열렸을 때는 보여 준다" 를
   `.hf-menu__list.is-open` 으로 적었다. 그런데 `.is-open` 은 목록이 아니라 그 바깥
   <nav>(.hf-menu--overflow)에 붙는다 - 그래서 예외가 한 번도 걸리지 않았고, MENU 를
   눌러도 흰 판만 나오고 메뉴가 없었다.
   덧붙여 좁은 화면에서는 서랍이 본문을 밀면 안 된다. 390px 에서 300px 서랍이 밀어내면
   남는 폭이 90px 이라 글자가 한 자씩 끊어진다 - 밀지 않고 위에 덮는다.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .site-header .hf-menu--overflow.is-open > .hf-menu__list { display: flex; }

    body.hf-menu-panel-open-right { margin-right: 0; }
    body.hf-menu-panel-open-left { margin-left: 0; }

    /* 서랍 뒤는 살짝 어둡게 - 지금 이것을 보고 있다는 표시이자, 바깥을 눌러 닫게 한다. */
    .hf-menu--overflow.is-open .hf-menu__list { box-shadow: -18px 0 60px rgba(35, 31, 32, .35); }
}

/* ---------------------------------------------------------------------------
   85. 브라우저가 멋대로 어둡게 칠하는 것을 막는다
   삼성 인터넷·크롬의 "다크 모드" 는 밝은 쪽으로 만든 쪽을 강제로 뒤집는다. 바탕과
   글자는 뒤집으면서 <그림은 그대로> 두기 때문에, 먹색으로 그린 로고가 어두워진
   바탕 위에 그대로 얹혀 보이지 않게 된다.
   이 쪽은 밝은 쪽 하나로만 만든 쪽이라고 알려 준다 - 그러면 브라우저가 손대지 않는다.
   --------------------------------------------------------------------------- */
:root { color-scheme: only light; }
/*  삼성 인터넷은 `only` 키워드가 붙어야 알아듣는다(삼성 개발자 포럼 권고).
    html 에도 한 번 더 못 박는다 - meta 를 못 읽는 판에서도 걸리게. */
html { color-scheme: only light; }

/* ---------------------------------------------------------------------------
   86. 브라우저가 멋대로 어둡게 칠할 때도 로고가 보이게

   `color-scheme: only light` 와 머리말 meta 로 "손대지 말라" 고 일러 두었는데도,
   삼성 인터넷 같은 일부 브라우저는 그 말을 듣지 않고 그릴 때 색을 뒤집는다. 그러면
   흰 머리글이 어두워지는데 로고 <그림>은 뒤집지 않아서 먹색 글자가 어둠에 묻힌다.

   흰 받침을 깔아 막아 보려 했지만 소용이 없었다 - 그 브라우저는 배경 그림까지 같이
   뒤집어서 받침이 검은 네모가 되어 버린다. 색으로 막을 수 있는 길은 없다.

   대신 <지금 뒤집혀 그려지고 있는지>를 알아낸다. 시스템 색(Canvas)은 브라우저가 실제로
   쓰는 색 체계를 따라간다 - 우리 말을 들어 주면 흰색, 무시하고 어둡게 칠하면 검은색이
   나온다. 레이아웃의 작은 스크립트가 이것을 재서 <html> 에 표를 붙이고, 그때만 로고를
   뒤집는다. 운영체제가 어두울 뿐 우리 말을 들어 준 브라우저에서는 표가 안 붙으므로
   흰 머리글에 흰 로고가 되는 일도 없다.
   --------------------------------------------------------------------------- */
/*  41·76 절이 흰 머리글에서 로고 반전을 꺼 두었다(`filter: none !important`).
    그 규칙과 깊이를 맞춰야(html+body+클래스 셋) 여기가 이긴다 - 뒤에 적혀 있으니
    같은 깊이면 이쪽이 쓰인다. */
html.is-browser-dark body .site-header .site-logo img,
html.is-browser-dark body .site-header .hf-logo-box img,
html.is-browser-dark body .site-footer .hf-logo-box img {
    filter: invert(1) !important;
}

/* 영상 위에 얹힌 머리글에서는 로고가 이미 흰색으로 뒤집혀 있다 - 한 번 더 뒤집으면
   도로 먹색이 된다. 거기서는 원래대로 두고 그림자만 남긴다. */
html.is-browser-dark .site-header.hf-bar--overlap:not(.is-scrolled) .site-logo img,
html.is-browser-dark .site-header.hf-bar--overlap:not(.is-scrolled) .hf-logo-box img {
    filter: invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .55))
                      drop-shadow(0 4px 14px rgba(0, 0, 0, .35)) !important;
}

/* ===========================================================================
   87. 사전등록 확인 - 한 가지 일만 하는 화면
   <main> 자체가 신청 위젯(.section.form-widget)이라, 79절에서 입힌 판 모양이 머리글에
   그대로 붙어 버렸다. 떼어 내 가운데에 한 장으로 띄우고, 바깥은 크림색으로 둔다.
   화면이 하는 일은 "번호 넣고 확인" 하나뿐이다 - 그 한 줄만 보이게 한다.
   =========================================================================== */
main.section.form-widget {
    width: min(560px, 100% - 40px);
    max-width: none;
    margin: 72px auto 96px;
    padding: 52px 46px 56px;
    border-top-width: 3px;
}

/*  머리글이 떠 있는 화면에서는 본문 전체에 걸린 여백이 판 <안쪽>을 밀어 벌린다 -
    여백이 아니라 바깥 간격으로 받는다(71절 로그인과 같은 방식). */
body:has(.site-header.hf-bar--overlap) main.section.form-widget {
    padding-top: 52px !important;
    margin-top: calc(var(--fixed-header-height, 143px) + 56px);
}

body:has(main.section.form-widget) { background: var(--brand-cream); }

main.section.form-widget .prc-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: center;
    margin: 0;
}

/*  제목 아래 연분홍 짧은 줄 - 사이트 어디서나 같은 신호. */
main.section.form-widget .prc-title::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin: 16px auto 0;
    background: var(--brand-blush-deep);
}

main.section.form-widget .prc-desc {
    max-width: 38ch;
    margin: 18px auto 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--color-text-muted);
}

main.section.form-widget .prc-form { margin-top: 32px; }

main.section.form-widget .survey-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}

main.section.form-widget .survey-label .req { color: var(--brand-rose); }

/*  번호 칸과 "인증번호 받기" 는 한 벌이다 - 같은 키로 나란히 세운다. */
main.section.form-widget .pv-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    /*  바탕 규칙이 줄바꿈을 허용해 두어서 단추가 아래로 떨어졌다. 한 줄로 묶는다. */
    flex-wrap: nowrap;
}

/*  인증번호 칸은 "인증번호 받기" 를 누르기 전까지 숨어 있어야 한다(hidden).
    display 를 덮어쓰면 그 약속이 깨진다 - 숨김을 다시 살려 둔다. */
main.section.form-widget .pv-row[hidden] { display: none; }

main.section.form-widget .pv-row input {
    /*  기준 폭을 0 으로 둬야 단추 자리를 남기고 알아서 줄어든다. */
    flex: 1 1 0;
    min-width: 0;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    font-size: 15px;
    background: #ffffff;
    color: var(--brand-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}

main.section.form-widget .pv-row input:focus {
    outline: none;
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 3px var(--brand-blush);
}

main.section.form-widget .pv-send,
main.section.form-widget .pv-check {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 0 18px;
    border: 1px solid var(--brand-ink);
    border-radius: 2px;
    background: #ffffff;
    color: var(--brand-ink);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

main.section.form-widget .pv-send:hover,
main.section.form-widget .pv-check:hover {
    background: var(--brand-ink);
    color: #ffffff;
}

main.section.form-widget .pv-code-row { margin-top: 8px; }
main.section.form-widget .pv-msg { display: block; margin-top: 8px; font-size: 12.5px; }
main.section.form-widget .pv-timer {
    align-self: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-rose);
    font-variant-numeric: tabular-nums;
}

main.section.form-widget .btn--block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin-top: 24px;
    font-size: 15.5px;
    font-weight: 700;
}

/* ---- 찾은 결과 ---- */
main.section.form-widget .prc-empty {
    margin-top: 28px;
    padding: 22px 24px;
    border-left: 3px solid var(--brand-blush-deep);
    background: #ffffff;
    font-size: 14.5px;
    line-height: 1.8;
    text-align: left;
}

main.section.form-widget .prc-card {
    margin-top: 28px;
    padding: 0;
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    background: #ffffff;
    overflow: hidden;
}

main.section.form-widget .prc-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 18px 22px;
    background: var(--brand-blush);
    border-bottom: 0;
}

main.section.form-widget .prc-card__head strong {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--brand-ink);
}

main.section.form-widget .prc-no {
    font-size: 12.5px;
    color: var(--brand-ink);
    opacity: .72;
    font-variant-numeric: tabular-nums;
}

main.section.form-widget .prc-slip {
    margin-left: auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--brand-ink);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
}

main.section.form-widget .prc-slip:hover { background: #000000; color: #ffffff; }

main.section.form-widget .prc-facts {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 0;
    margin: 0;
    padding: 6px 22px 18px;
    text-align: left;
}

main.section.form-widget .prc-facts dt,
main.section.form-widget .prc-facts dd {
    padding: 13px 0;
    border-top: 1px solid var(--brand-line-soft);
    margin: 0;
    font-size: 14px;
}

main.section.form-widget .prc-facts dt { font-weight: 700; color: var(--color-text-muted); font-size: 13px; }

@media (max-width: 560px) {
    main.section.form-widget { padding: 36px 24px 40px; }
    body:has(.site-header.hf-bar--overlap) main.section.form-widget {
        padding-top: 36px !important;
        margin-top: calc(var(--fixed-header-height, 143px) + 24px);
    }
    main.section.form-widget .pv-row { flex-wrap: wrap; }
    main.section.form-widget .pv-send { width: 100%; }
}

/* 흰 받침을 구워 넣은 로고(삼성 인터넷 전용 교체본)는 그 자체로 읽힌다 -
   86절의 반전까지 겹치면 받침이 검어진다. 이 그림만 빼 둔다. */
html.is-browser-dark body .site-header .hf-logo-box img.is-logo-plated,
html.is-browser-dark body .site-header .site-logo img.is-logo-plated {
    filter: none !important;
}

/* ---------------------------------------------------------------------------
   88. 이미 그 색으로 칠해 둔 로고에는 반전을 걸지 않는다
   영상 위에서는 흰색으로 칠해 둔 복사본을, 삼성 인터넷에서는 흰 받침을 깐 복사본을
   쓴다(layout.html). 거기에 filter: invert 까지 겹치면 도로 먹색이 된다.
   흰 복사본에는 그림자만 남긴다 - 밝은 장면이 지나가도 테두리가 보이게.
   --------------------------------------------------------------------------- */
/*  흰 로고에는 아주 가는 먹색 테를 두른다. 어두운 바탕에서는 테가 보이지 않지만,
    혹시 바탕이 흰색인 판에서는 이 테가 글자 모양을 그려 줘서 흰 로고가 사라지지 않는다.
    (삼성 인터넷에서 사이트별로 다크 모드를 꺼 둔 경우 같은 어긋남을 받아 낸다.) */
html body .site-header .hf-logo-box img.is-logo-white,
html body .site-header .site-logo img.is-logo-white,
html.is-browser-dark body .site-header .hf-logo-box img.is-logo-white,
html.is-browser-dark body .site-header .site-logo img.is-logo-white {
    filter: drop-shadow(0 0 1px rgba(35, 31, 32, .95))
            drop-shadow(0 1px 2px rgba(35, 31, 32, .8))
            drop-shadow(0 4px 14px rgba(0, 0, 0, .35)) !important;
}

html body .site-header .hf-logo-box img.is-logo-plated,
html body .site-header .site-logo img.is-logo-plated,
html.is-browser-dark body .site-header .hf-logo-box img.is-logo-plated,
html.is-browser-dark body .site-header .site-logo img.is-logo-plated {
    filter: none !important;
}

/* 꼬리글 그림도 머리글 로고와 같은 방식으로 <그림을 골라> 끼운다(layout.html).
   이미 그 색으로 칠해진 그림이니 CSS 가 또 뒤집으면 안 된다. */
html body .site-footer img.no-invert,
html.is-browser-dark body .site-footer img.no-invert {
    filter: none !important;
}

/* ---------------------------------------------------------------------------
   89. 내려오는 메뉴를 한 덩어리로 (82절의 이어지는 손질)
   시간을 맞춰 줬는데도 따로 놀았다. 재 보니 까닭은 <무엇이 움직이는가> 가 달라서였다.
   뒤판은 높이가 커튼처럼 자라고, 글자는 그 자리에서 또렷해지기만 한다. 그래서 판이
   아직 반쯤 내려왔는데 글자는 이미 다 보이고, 판 밖으로 글자가 삐져나와 있었다.

   같은 가장자리로 드러나게 바꾼다 - 글자도 위에서 아래로 <잘려 있다가 열린다>.
   판이 지나간 만큼만 글자가 보이므로 둘이 한 장처럼 내려온다.
   --------------------------------------------------------------------------- */
.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__sub {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .26s cubic-bezier(.2, .7, .3, 1),
                opacity .1s linear,
                visibility .26s;
}

.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__list:hover .hf-menu__sub,
.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__list:focus-within .hf-menu__sub {
    clip-path: inset(0 0 0 0);
}

/* 서랍(오른쪽 MENU)에서는 하위 목록을 늘 펼쳐 두는 자리라 자르면 안 된다. */
body .site-header .hf-menu--overflow.is-open .hf-menu__sub {
    clip-path: none !important;
}

/* 뒤판도 글자와 똑같이 <잘려 있다가 열리는> 방식으로 바꾼다.
   높이로 애니메이션을 걸면, 그 높이를 자바스크립트가 호버 순간에 재서 넣기 때문에
   한 프레임 늦게 출발한다 - 글자가 먼저 내려오는 것처럼 보이던 까닭이다.
   높이는 즉시 박아 넣고(움직이지 않는다), 열리는 것은 자르기로만 한다. */
.hf-menu__mega-backdrop {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .26s cubic-bezier(.2, .7, .3, 1),
                opacity .1s linear,
                visibility .26s;
}

.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__list:hover .hf-menu__mega-backdrop,
.hf-menu[data-style="MEGA_COLUMNS"] .hf-menu__list:focus-within .hf-menu__mega-backdrop {
    clip-path: inset(0 0 0 0);
}

body .site-header .hf-menu--overflow.is-open .hf-menu__mega-backdrop { clip-path: none !important; }

/* ===========================================================================
   90. 오른쪽 MENU 서랍 - 찾을 수 있게 정리한다
   스무 줄이 넘는 항목이 전부 같은 크기·같은 간격으로 쌓여 있어서 분류와 항목이
   구별되지 않았다("너무 어지럽다 찾기 어려워"). 눈이 먼저 분류를 훑고, 그다음
   그 안에서 고르게 층을 만든다.
     - 분류 이름 : 작게·자간 넓게·연분홍. 위에 가는 선과 넉넉한 여백을 둔다.
     - 항목     : 크게·흰색. 손가락이 닿을 만큼 줄 높이를 준다.
   =========================================================================== */
body .site-header .hf-menu--overflow.is-open .hf-menu__list {
    width: min(340px, 86vw);
    padding: 76px 0 40px;
    background-color: var(--brand-ink) !important;
}

/* 닫기 - 오른쪽 위 한 자리에 둔다. */
/*  자리는 감싼 <li> 가 잡는다. 단추까지 absolute 로 띄우면 그 li 가 단추 크기를 알 수
    없어 글자 폭(14px)으로 쪼그라들고, 동그라미가 세로로 길쭉한 타원이 된다. */
body .site-header .hf-menu--overflow.is-open .hf-menu__offcanvas-close-item {
    top: 18px;
    right: 18px;
}

body .site-header .hf-menu--overflow.is-open .hf-menu__offcanvas-close {
    position: static;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

body .site-header .hf-menu--overflow.is-open .hf-menu__offcanvas-close:hover {
    background: var(--brand-blush);
    border-color: var(--brand-blush);
    color: var(--brand-ink);
}

/* 분류 묶음 - 사이에 가는 선을 긋고 넉넉히 띄운다. */
body .site-header .hf-menu--overflow.is-open .hf-menu__item {
    display: block;
    margin: 0;
    padding: 26px 26px 6px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

body .site-header .hf-menu--overflow.is-open .hf-menu__item:first-of-type {
    border-top: 0;
    padding-top: 6px;
}

/* 분류 이름 - 누르는 것이 아니라 <이름표>라는 것이 보이게. */
body .site-header .hf-menu--overflow.is-open .hf-menu__list .hf-menu__label {
    display: block;
    padding: 0;
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.4;
    color: var(--brand-blush-deep) !important;
    pointer-events: none;
}

/* 분류 이름 옆 꺾쇠는 서랍에서 쓸 데가 없다 - 늘 펼쳐져 있다. */
body .site-header .hf-menu--overflow.is-open .hf-menu__list .hf-menu__label::after { display: none; }

/* 항목 - 손가락이 닿을 만한 줄 높이로. */
body .site-header .hf-menu--overflow.is-open .hf-menu__sub { margin: 0; padding: 0; }

body .site-header .hf-menu--overflow.is-open .hf-menu__sub li { margin: 0; padding: 0; }

body .site-header .hf-menu--overflow.is-open .hf-menu__sub a {
    display: block;
    position: relative;
    padding: 13px 0 13px 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.4;
    color: #ffffff !important;
    background: transparent !important;
    transition: color .18s ease, padding-left .18s ease;
}

/* 올리면 왼쪽에 짧은 분홍 막대가 서고 글자가 분홍으로 - 바탕을 칠하지 않는다
   (바탕을 칠하면 스무 줄이 전부 깜빡이는 띠가 되어 더 어지럽다). */
body .site-header .hf-menu--overflow.is-open .hf-menu__sub a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--brand-blush);
    transform: translateY(-50%);
    transition: height .22s ease;
}

body .site-header .hf-menu--overflow.is-open .hf-menu__sub a:hover,
body .site-header .hf-menu--overflow.is-open .hf-menu__sub a:focus-visible {
    color: var(--brand-blush) !important;
    background: transparent !important;
    padding-left: 20px;
}

body .site-header .hf-menu--overflow.is-open .hf-menu__sub a:hover::before,
body .site-header .hf-menu--overflow.is-open .hf-menu__sub a:focus-visible::before {
    height: 20px;
}

/* 지금 보고 있는 쪽 - 찾던 자리가 어디인지 바로 보이게. */
body .site-header .hf-menu--overflow.is-open .hf-menu__sub a[aria-current],
body .site-header .hf-menu--overflow.is-open .hf-menu__sub a.is-current {
    color: var(--brand-blush) !important;
    font-weight: 800;
}

/* ===========================================================================
   91. 신청 위젯이 쪽 하나를 통째로 쓸 때(뉴스레터) - 반으로 가른다
   흰 바탕 가운데에 입력칸만 떠 있어서 쪽이 비어 보였다. 왼쪽에 사진과 할 말을,
   오른쪽에 입력을 둔다. 로그인 화면과 같은 결이다.
   마크업은 손대지 않는다 - 제목·설명·폼 세 덩이를 칸에 나눠 앉히기만 한다.
   =========================================================================== */
.free-grid__item > .section.form-widget {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    gap: 0 clamp(28px, 4vw, 56px);
    width: min(940px, 100%);
    margin-inline: auto;
    padding: 0;
    min-height: 480px;
    border: 1px solid var(--brand-line);
    border-top-width: 1px;
    border-radius: 2px;
    background: #ffffff;
    overflow: hidden;
}

/*  왼쪽 사진 칸. 흐름 밖이라 글이 몇 줄이든 늘 끝까지 내려온다. */
.free-grid__item > .section.form-widget::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    background-color: var(--brand-ink);
    background-image:
        linear-gradient(180deg, rgba(35, 31, 32, .34) 0%, rgba(35, 31, 32, .78) 100%),
        url("/uploadImg/HANDMADE%20FESTA%202027/feature/13/kr/card-13.jpg");
    background-size: cover;
    background-position: center;
}

/*  제목과 설명은 사진 위에 얹힌다. */
.free-grid__item > .section.form-widget > h2,
.free-grid__item > .section.form-widget > .form-widget__desc {
    position: relative;
    grid-column: 1;
    justify-self: start;
    text-align: left;
    max-width: none;
    padding-inline: clamp(26px, 3.4vw, 44px);
    color: #ffffff;
}

.free-grid__item > .section.form-widget > h2 {
    display: block;
    align-self: end;
    padding-top: 48px;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
}

.free-grid__item > .section.form-widget > h2::after {
    margin: 16px 0 0;
    background: var(--brand-blush);
}

.free-grid__item > .section.form-widget > .form-widget__desc {
    align-self: start;
    margin: 16px 0 0;
    padding-bottom: 48px;
    color: rgba(255, 255, 255, .84);
    text-align: left;
}

/*  오른쪽은 입력만. 두 줄(제목·설명)에 걸쳐 세운다. */
.free-grid__item > .section.form-widget > .form-widget__form {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
    padding: 44px clamp(26px, 3.4vw, 44px) 44px 0;
    grid-template-columns: 1fr;
}

.free-grid__item > .section.form-widget .form-widget__field:nth-of-type(n+1) { grid-column: 1; }
.free-grid__item > .section.form-widget .form-widget__submit { justify-self: stretch; min-width: 0; }

/*  좁은 화면 - 사진은 위쪽 띠로 내려앉는다. */
@media (max-width: 760px) {
    .free-grid__item > .section.form-widget {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0;
    }
    .free-grid__item > .section.form-widget::before {
        position: static;
        display: block;
        width: 100%;
        height: 0;
    }
    .free-grid__item > .section.form-widget > h2,
    .free-grid__item > .section.form-widget > .form-widget__desc {
        grid-column: 1;
        color: var(--brand-ink);
        justify-self: center;
        text-align: center;
        padding-inline: 24px;
    }
    .free-grid__item > .section.form-widget > h2 { padding-top: 40px; }
    .free-grid__item > .section.form-widget > h2::after { margin-inline: auto; }
    .free-grid__item > .section.form-widget > .form-widget__desc {
        color: var(--color-text-muted);
        padding-bottom: 0;
    }
    .free-grid__item > .section.form-widget > .form-widget__form {
        grid-column: 1;
        grid-row: auto;
        padding: 28px 24px 40px;
    }
}

/* ===========================================================================
   92. 마이페이지 - 부스 신청내역 · 주문내역
   숫자가 줄줄이 늘어서는 자리라, 자릿수가 흔들리지 않게 하고 좁은 화면에서는
   표를 가로로 미는 대신 한 줄씩 카드처럼 쌓는다(표를 옆으로 밀게 하면 안 본다).
   =========================================================================== */
.my-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.my-table th,
.my-table td {
    padding: 13px 12px;
    border-top: 1px solid var(--brand-line-soft);
    text-align: left;
    vertical-align: middle;
}

.my-table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--brand-ink);
    padding-bottom: 11px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.my-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.my-table tfoot th,
.my-table tfoot td {
    border-top: 2px solid var(--brand-ink);
    font-weight: 800;
    font-size: 15px;
}

.my-table tfoot th { text-align: right; }

.my-table a { color: var(--brand-ink); font-weight: 700; }
.my-table a:hover { background: transparent; color: var(--brand-rose); }

/* 취소·반려된 줄은 흐리게 - 지워 버리면 "냈는데 왜 없지" 가 된다. */
.my-row--off { opacity: .55; }

.my-reject {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--brand-rose);
}

.my-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--brand-blush);
    color: var(--brand-ink);
    font-size: 11px;
    font-weight: 700;
}

/* 상태 - 체크리스트와 같은 표시(앞에 점). 사이트 안에서 같은 뜻은 같은 모양이어야 한다. */
.my-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.my-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.my-state--APPROVED { color: #2c6b3f; }
.my-state--SUBMITTED { color: #a97708; }
.my-state--REJECTED { color: var(--brand-rose); }
.my-state--CANCELLED { color: #9a9196; }
.my-pay--PAID { color: #2c6b3f; }
.my-pay--UNPAID { color: var(--brand-rose); }
.my-pay--NONE { color: #9a9196; }

/* 아직 아무것도 없을 때 - 빈 표 대신 다음에 할 일을 알려 준다. */
.mypage-empty {
    margin: 0;
    padding: 26px 26px 28px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--color-text-muted);
}

.mypage-empty a {
    color: var(--brand-ink);
    font-weight: 700;
    border-bottom: 2px solid var(--brand-blush);
    padding-bottom: 1px;
}

.mypage-more { margin: 0; padding: 4px 26px 24px; }

/* 맨 위 합계 - 숫자를 찾으러 표를 훑게 하지 않는다. */
.order-sum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin: 0 0 26px;
    padding: 0;
    background: var(--brand-line);
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    overflow: hidden;
}

.order-sum__cell {
    padding: 20px 22px;
    background: #ffffff;
}

.order-sum__label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}

.order-sum__cell strong {
    font-family: var(--font-display);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.order-sum__cell--total { background: var(--brand-ink); }
.order-sum__cell--total .order-sum__label { color: rgba(255, 255, 255, .6); }
.order-sum__cell--total strong { color: #ffffff; }

.order-sum__cell--due { background: var(--brand-blush); }
.order-sum__cell--due .order-sum__label { color: var(--brand-ink); opacity: .7; }
.order-sum__cell--due strong { color: var(--brand-rose); }

/* 좁은 화면 - 표를 옆으로 밀지 않고 한 줄씩 쌓는다. 머리글은 각 칸 앞에 붙여 둔다
   (data-label). 가로로 밀어야 하는 표는 사람들이 그냥 안 본다. */
@media (max-width: 700px) {
    .my-table, .my-table thead, .my-table tbody, .my-table tfoot,
    .my-table tr, .my-table th, .my-table td { display: block; width: auto; }

    .my-table thead { display: none; }

    .my-table tbody tr {
        padding: 14px 0;
        border-top: 1px solid var(--brand-line-soft);
    }

    .my-table tbody tr:first-child { border-top: 0; }

    .my-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        padding: 5px 0;
        border: 0;
        text-align: right;
    }

    .my-table tbody td::before {
        content: attr(data-label);
        flex: none;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--color-text-muted);
        text-align: left;
    }

    .my-table tbody td:first-child {
        display: block;
        text-align: left;
        font-size: 15.5px;
        font-weight: 700;
        margin-bottom: 6px;
    }

    .my-table tbody td:first-child::before { content: none; }

    .my-table tfoot tr { padding-top: 12px; border-top: 2px solid var(--brand-ink); }
    .my-table tfoot th { text-align: left; border: 0; padding: 0 0 4px; }
    .my-table tfoot td { border: 0; padding: 0; text-align: left; font-size: 17px; }
}

/* ===========================================================================
   93. 인보이스 고르기 - 범위 세 칸, 칸마다 결제여부 세 갈래
   갈래를 카드 하나씩 늘리면 아홉 장이 된다. 범위를 칸으로 두고 그 안에서
   결제여부를 고르게 하면 세 칸에 다 들어가고, 무엇이 다른지도 한눈에 읽힌다.
   =========================================================================== */
.inv-pick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    padding: 4px 26px 26px;
    align-items: stretch;
}

.inv-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px 22px 20px;
    border: 1px solid var(--brand-line);
    border-radius: 2px;
    background: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease,
                transform .2s cubic-bezier(.2, .7, .3, 1);
}

.inv-card:hover {
    border-color: var(--brand-ink);
    box-shadow: 0 14px 30px rgba(35, 31, 32, .1);
    transform: translateY(-2px);
}

/*  권하는 쪽 - 분홍 위선 한 줄로 눈이 먼저 가게 한다. */
.inv-card--lead {
    border-top: 3px solid var(--brand-blush-deep);
    background: var(--brand-cream);
}

.inv-card__tag {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--brand-blush);
    color: var(--brand-ink);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.inv-card--lead .inv-card__tag { background: var(--brand-ink); color: #ffffff; }

.inv-card__title {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--brand-ink);
}

.inv-card__desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-muted);
    /*  설명 줄 수가 달라도 아래 단추 줄이 맞게 두 줄 자리를 잡아 둔다. */
    min-height: 3.4em;
}

/*  결제여부 세 갈래. 전체는 채운 단추, 나머지 둘은 그 아래 작은 두 칸. */
.inv-card__pays {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
}

.inv-card__go {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 999px;
    background: var(--brand-ink);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    transition: background-color .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
}

.inv-card__go:hover { background: #000000; color: #ffffff; transform: translateY(-1px); }

.inv-card__sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--brand-ink);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.inv-card__sub:hover {
    background: var(--brand-blush);
    border-color: var(--brand-blush);
    color: var(--brand-ink);
}

.inv-card__view {
    align-self: center;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--brand-line);
    padding-bottom: 1px;
}

.inv-card__view:hover {
    background: transparent;
    color: var(--brand-rose);
    border-bottom-color: var(--brand-rose);
}

@media (max-width: 560px) {
    .inv-pick { padding: 4px 18px 20px; gap: 12px; }
    .inv-card { padding: 20px 18px 16px; }
    .inv-card__desc { min-height: 0; }
}

/* 체크리스트 맨 아래 인보이스 칸 - 신청 카드와 같은 결로 두되 묶음 하나처럼 보이게. */
.apply-invoice .inv-pick { padding: 4px 0 0; }
.apply-invoice .apply-group__desc { margin-bottom: 14px; }

/* 결제 완료 카드 - 초록 위선으로 "받는 돈이 아니라 받은 돈" 임을 구별한다. */
.inv-card--done { border-top: 3px solid #2c6b3f; }
.inv-card--done .inv-card__tag { background: #e9f2ec; color: #2c6b3f; }

/* ============================================================================
   94. 꼬리글을 화면 맨 아래로
   ----------------------------------------------------------------------------
   로그인·아이디 찾기처럼 내용이 짧은 화면에서 꼬리글이 글 바로 밑에 붙고 그 아래로
   흰 바닥이 남았다. 머리글·본문·꼬리글은 전부 <body> 의 직계라, body 를 세로 flex 로
   두고 꼬리글에 margin-top:auto 를 주면 내용이 짧든 길든 꼬리글이 바닥에 간다.

   본문 칸 하나를 지목해 flex:1 을 주는 방법도 있지만, 화면마다 그 칸의 이름이 달라
   (main · .free-grid · .page-head …) 빠뜨리는 화면이 생긴다. 꼬리글 한 곳만 건드린다.
   ============================================================================ */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;   /* 모바일 주소창이 접혔다 펴져도 흔들리지 않는다 */
}

/* 앞의 것이 아무리 짧아도 꼬리글은 바닥에 선다. */
body > .site-footer { margin-top: auto; }

/*  flex 칸 안에서는 가운데 맞춤(margin-inline:auto)이 "늘리기" 를 이긴다.
    그래서 body 를 flex 로 바꾼 순간, max-width 로 가운데에 놓던 쪽들이 글 길이만큼
    쪼그라들었다(사전등록 쪽이 880px 자리에 487px 로 나왔다).
    폭을 직접 줘서 되돌린다 - 다들 border-box 라 안쪽 여백이 넘치지 않고,
    max-width 는 그대로 상한으로 남는다. */
body > * { width: 100%; }

/* flex 자식은 기본으로 줄어든다(flex-shrink:1). 머리글·꼬리글이 눌려 납작해지지 않게. */
body > .site-header,
body > .site-footer { flex: 0 0 auto; }

/* ============================================================================
   95. 마이페이지 - 비밀번호 바꾸는 칸
   ----------------------------------------------------------------------------
   위의 "저장"과 아래의 "비밀번호 바꾸기"는 서로 다른 폼이다. 붙여 두면 주소만
   고치려다 비밀번호 칸까지 하나로 보여, 저장을 눌렀는데 왜 비밀번호를 묻느냐가 된다.
   사이를 띄우고 가는 줄 하나를 둬서 "여기부터는 다른 일" 임을 눈으로 가른다.
   ============================================================================ */
.pw-change {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--brand-line, #e6e0e2);
}

/* 지우는 단추가 아니라 다른 일이다 - 먹색 저장 단추와 같은 무게로 두지 않는다. */
.pw-change .signup-submit { margin-top: 24px; }

/* ============================================================================
   96. 메인 배너 포스터
   ----------------------------------------------------------------------------
   포스터가 오른쪽 정보 칸(DATE·VENUE·마감) 자리에 들어간다. 정보 칸은 지우지 않고
   숨긴다 - 관리자에서 포스터를 빼면 그대로 다시 나와야 한다.

   겹침을 먼저 정리했다. 단추를 포스터 밖으로 내밀었더니 오른쪽 MENU 손잡이와 부딪히고,
   뒤에 비스듬히 깔아 둔 분홍 종이는 아래 카운트다운 띠를 파고들었다. 둘 다 걷어내고
   <포스터 한 장 + 그 아래 조작 줄> 로 단순하게 두되, 테두리와 그림자로 격을 올린다.
   ============================================================================ */

/* 포스터가 들어온 배너에서만 정보 칸을 숨긴다. 포스터가 없는 배너는 예전 그대로다. */
.hm-hero__inner:has(.hm-hero__poster) .hm-hero__facts {
    display: none;
}

/* 글 칸이 쓰는 폭보다 훨씬 넓어서 글과 포스터 사이가 뻥 비어 보였다. 포스터 칸을 제 폭으로
   묶고 사이를 좁혀, 둘이 한 덩어리로 읽히게 한다.

   아래쪽 여백은 개막 시계 띠의 높이만큼이다. 띠는 배너 바닥에 겹쳐 떠 있어서(absolute)
   자리를 차지하지 않는다 - 비워 두지 않으면 포스터 아래 화살표가 띠에 깔린다. */
.hm-hero__inner:has(.hm-hero__poster) {
    /* 이 여백만큼 글·포스터가 위로 밀린다(가운데 맞춤이라 절반씩). 시계 띠(72px)를
       피할 만큼만 남기고 줄여, 둘을 조금 아래로 내렸다. */
    padding-bottom: clamp(36px, 4.5vh, 50px);
    /* auto 로 두면 안 보이는 옆 장까지 더해 칸이 1100px 로 부풀고 글 칸이 0 이 된다 -
       포스터 폭을 상한으로 못 박는다.

       글 칸도 상한을 둔다. 1fr 로 두면 글이 쓰지도 않는 780px 를 차지해 글과 포스터
       사이가 350px 넘게 벌어졌다 - 양쪽에 덩어리가 하나씩 떠 있고 가운데가 빈 모양이
       "언밸런스" 의 정체였다. 둘을 제 폭으로 묶고 가운데에 모아 세운다. */
    grid-template-columns: minmax(0, 560px) minmax(0, 340px);
    justify-content: center;
    gap: clamp(32px, 5vw, 76px);
}

.hm-hero__poster {
    /* 화면이 납작하면 포스터가 카운트다운 띠를 파고든다 - 높이로도 묶어 둔다.
       글 덩어리(약 360px 높이)와 너무 벌어지지 않게 세로도 한 단 줄였다. */
    width: min(100%, 340px, 37vh);
    /* 왼쪽 글이 쪽 가장자리에서 떨어진 만큼 오른쪽도 똑같이 떨어뜨린다 - 가운데 맞춤으로
       두면 칸 안에서 떠서 왼쪽 64px / 오른쪽 88px 처럼 어긋났다. */
    margin-inline: auto 0;
}

/* 실제로 미끄러지는 칸. 넘치는 것을 잘라 내야 옆 장이 미리 보이지 않는다. */
.hm-hero__poster-stage {
    position: relative;
    aspect-ratio: 778 / 1100;
    overflow: hidden;
    border-radius: 2px;
    /* 종이 끝을 긋는 가는 선 하나. 두꺼운 흰 테는 액자처럼 보여 되레 싸 보인다. */
    border: 1px solid rgba(255, 255, 255, .22);
    background: #120f10;
    /* 멀리·가까이 두 겹으로 띄운다 - 한 겹짜리 그림자는 스티커처럼 납작하다. */
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .3),
        0 24px 60px rgba(0, 0, 0, .45);
}

/* 위쪽에 아주 옅은 빛 한 줄 - 인쇄물 가장자리에 빛이 걸린 결. */
.hm-hero__poster-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%);
}

.hm-hero__poster-track {
    display: flex;
    height: 100%;
    transition: transform .72s cubic-bezier(.33, 0, .12, 1);
    will-change: transform;
}

.hm-hero__poster-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- 두 전시를 묶는 줄 - 개막 시계의 첫 줄 ----
   포스터 아래에 있던 줄을 시계 윗줄로 올렸다. "무엇을 / 언제 어디서 / 며칠 남았는지"가
   배너 바닥에서 한 덩어리로 읽힌다.
   판을 깔지 않고 글씨만 둔다. 대신 그림자를 여러 겹 겹쳐 글자 둘레에 어두운 테를 만든다 -
   한 겹짜리 그림자는 밝은 장면에서 그대로 묻힌다. */
.hm-hero__pair {
    /* 시계 줄(flex)의 첫 줄을 통째로 차지한다. order 로 올려 두면 markup 순서가 어떻든
       늘 시계 위에 선다. */
    flex: 1 1 100%;
    order: -1;
    margin: 0;
    text-align: center;
    color: #fff;
    word-break: keep-all;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .95),
        0 2px 8px rgba(0, 0, 0, .8),
        0 0 20px rgba(0, 0, 0, .6);
}

/* 선을 이름 줄 아래로 - 이름·날짜가 머리글이 되고, 그 아래가 시계 칸이 된다. */
.hm-hero__pair {
    position: relative;
    padding-bottom: 14px;
    /* 글씨가 시계 숫자만큼 커졌으므로 줄높이를 비율로 바꾼다 - 26px 로 못 박아 두면
       31px 짜리 글자가 제 줄에 갇혀 위아래가 잘린다. */
    line-height: 1.3;
}

.hm-hero__pair::after {
    content: "";
    position: absolute;
    left: calc(-1 * var(--clock-pad, 24px));
    right: calc(-1 * var(--clock-pad, 24px));
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, .18);
}

/* 시계 숫자(clamp(22px, 2.2vw, 31px))와 같은 크기로 간다 - 같은 자를 쓰므로 두 줄이
   한 덩어리로 읽히고, 화면이 좁아지면 숫자와 똑같이 함께 줄어든다. */
.hm-hero__pair-l {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 31px);
    font-weight: 800;
    letter-spacing: -.04em;
}

/* 곱하기 기호가 두 이름을 잇는다 - 글자보다 연하게 둬야 이름이 먼저 읽힌다. */
.hm-hero__pair-x {
    margin: 0 clamp(8px, .9vw, 13px);
    font-size: clamp(16px, 1.6vw, 23px);
    color: var(--brand-blush, #fad8e7);
}

/* 이름과 날짜 사이 - 연분홍 점 하나. 가운뎃점을 글자로 넣으면 그 앞뒤가 줄바꿈 자리가
   되어 점만 혼자 다음 줄로 떨어진다. */
.hm-hero__pair-sep {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 clamp(11px, 1.2vw, 18px);
    border-radius: 999px;
    background: var(--brand-blush, #fad8e7);
    vertical-align: middle;
    opacity: .85;
}

.hm-hero__pair-s {
    /* 날짜·장소도 시계 숫자와 같은 자(2.2vw)로 간다. 크기가 같아지므로 무엇이 제목인지는
       굵기(800 대 보통)와 밝기로 가른다 - 셋이 같은 자를 쓰니 띠 전체가 한 판으로 선다.
       아래 한계만 시계보다 낮춰 둔다(22px 로 두면 태블릿 폭에서 줄이 꺾인다). */
    font-family: var(--font-display);
    font-size: clamp(15px, 2.2vw, 31px);
    font-weight: 800;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .92);
    font-variant-numeric: tabular-nums;
}

/* ---- 포스터 아래 조작 줄 ---- */
.hm-hero__poster-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
}

/* 테두리만 있는 둥근 단추 - 흰 동그라미는 눈에 먼저 들어와 포스터를 이긴다. */
.hm-hero__poster-nav {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 3px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .88);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.hm-hero__poster-nav:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.hm-hero__poster-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hm-hero__poster-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hm-hero__poster-dot {
    position: relative;
    width: 6px;
    height: 6px;
    /* 좁은 화면 공통 규칙이 button 에 min-height:44px 을 줘서 6px 짜리 점이 44px 짜리
       기둥으로 늘어났다(실제로 겪었다). 여기서는 보이는 알약 크기를 지키고, 손가락이 누를
       자리는 아래 ::after 로 따로 넓힌다 - 누르기 쉬운 크기를 잃지 않는다. */
    min-height: 0;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: width .3s cubic-bezier(.33, 0, .12, 1), background-color .3s ease;
}

/* 눈에 보이지 않는 누름판 - 점은 6px 그대로, 누르는 자리는 24px 짜리 줄이 된다. */
.hm-hero__poster-dot::after {
    content: "";
    position: absolute;
    top: -9px;
    right: -3px;
    bottom: -9px;
    left: -3px;
}

/* 지금 보는 장은 길쭉한 선 - 색만 다르게 하면 작아서 구별이 안 된다. */
.hm-hero__poster-dot.is-on {
    width: 20px;
    background: var(--brand-blush, #fad8e7);
}

/* 좁은 화면: 두 칸이 한 줄로 쌓인다. 포스터가 너무 크면 글과 단추가 화면 밖으로 밀린다. */
@media (max-width: 899px) {
    /* 두 칸을 한 줄로 쌓는다. 공통 규칙(.hm-hero__inner)에도 같은 줄이 있지만,
       포스터가 든 배너는 :has() 로 더 무겁게 잡아 둬서 그쪽이 이긴다 - 여기서 다시 적는다.
       안 적으면 768px 에서도 두 칸이 버티며 글줄이 어색하게 꺾인다. */
    .hm-hero__inner:has(.hm-hero__poster) {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* 치수는 그림에만 건다 - 칸까지 좁히면 아래 설명 글이 그 너비에 갇혀 말 가운데서 꺾인다. */
    .hm-hero__poster { width: 100%; margin-inline: auto; }

    /* 태블릿 폭에서 줄을 다 채우면 포스터 하나가 1,000px 넘게 길어져 배너가 벽이 된다 -
       손에 쥐는 폭(600px 미만)에서만 꽉 채우고 여기서는 460px 에서 멈춘다. */
    .hm-hero__poster-stage { width: min(100%, 460px); margin-inline: auto; }
    .hm-hero__poster-ctrl { margin-top: 9px; gap: 12px; }
    .hm-hero__poster-nav { width: 30px; height: 30px; font-size: 18px; }
}

@media (max-width: 599px) {
    /* 손에 쥐는 화면에서는 포스터가 줄을 다 쓴다 - 작게 두면 포스터 안의 글씨가 안 읽힌다.
       두 전시가 함께 열린다는 것이 이 배너의 본론이라 가장 많이 보는 화면에서 가장 크게 둔다. */
    .hm-hero__poster-stage { width: 100%; }

    .hm-hero__poster-ctrl { margin-top: 8px; gap: 10px; }
    /* min-height:0 이 없으면 전역 터치 규칙이 28px 짜리 동그라미를 44px 짜리 타원으로
       만든다. 대신 36px 로 키워 누르기 어렵지 않게 한다. */
    .hm-hero__poster-nav { width: 36px; height: 36px; min-height: 0; font-size: 18px; }
}

/* 덜 움직이게를 켜 둔 사람에게는 미끄러지는 동작을 없앤다. */
@media (prefers-reduced-motion: reduce) {
    .hm-hero__poster-track,
    .hm-hero__poster-nav,
    .hm-hero__poster-dot { transition: none; }
}


/* ===========================================================================
   97. 메인 아래쪽 줄 맞추기 - 뉴스레터 칸
   배너 아래는 포스터·오시는 길·공지사항/FAQ 세 칸이 한 폭(1,050px 남짓)을 나눠 쓴다.
   그 아래 뉴스레터만 79절의 max-width:760px 에 걸려 가운데로 좁게 떠 있었고, 좌우 선이
   위 세 칸과 어긋나 한 쪽처럼 읽히지 않았다. 폭을 줄에 맞추고 키를 조금 낮춘다.
   =========================================================================== */
.free-grid__item > .section.form-widget {
    width: 100%;
    max-width: none;
    min-height: 380px;
}

/* 폭이 넓어졌으니 사진 쪽 글도 그 폭에 맞춰 숨 쉴 자리를 준다. */
.free-grid__item > .section.form-widget > h2 { padding-top: 56px; }
.free-grid__item > .section.form-widget > .form-widget__desc {
    max-width: 34ch;
    padding-bottom: 56px;
}

/* 입력칸이 한 칸을 통째로 쓰면 이메일 한 줄짜리 양식이 운동장처럼 넓어진다 -
   오른쪽 칸 안에서 다시 한 번 폭을 잡아 준다. */
.free-grid__item > .section.form-widget > .form-widget__form {
    width: min(100%, 420px);
    padding-right: clamp(26px, 3.4vw, 44px);
}

@media (max-width: 760px) {
    .free-grid__item > .section.form-widget > .form-widget__form {
        width: 100%;
        padding-right: 24px;
    }
}

/* ===========================================================================
   98. 배너 아래 - 배너와 격 맞추기
   배너는 공들여 만들어 놓고 그 아래로 내려오면 갑자기 관리자 표처럼 보였다. 까닭이 셋이다.
     (1) 공지사항·FAQ 가 "옆에 끼우는 좁은 칸"용 축소 서식을 그대로 쓰고 있었다
         (제목 15px, 글 12px, 말줄임). 이제 반 폭(500px 남짓)을 쓰는데 글씨만 작다.
     (2) 지도가 한 줄을 통째로 쓰면서 1,050×165 짜리 띠로 늘어났다 - 지도는 넓적할수록
         무엇을 보여 주는지 흐려진다.
     (3) 칸마다 제목 모양이 달랐다(왼쪽 라벨 / 가운데 큰 제목 / 사진 위 흰 글씨).
   셋을 하나의 서식으로 묶는다. 마크업은 손대지 않는다 - 위젯이 뱉는 그대로 받아 입힌다.
   =========================================================================== */

/* ---- 98-1. 네 칸이 같은 제목을 쓰게 한다 --------------------------------
   먹색 56px + 연분홍 나머지, 이 2px 줄 하나가 이 사이트의 제목 표식이다(16절).
   지도 칸은 가운데 큰 제목을 쓰고 있었는데, 옆 칸과 어긋나 혼자 떠 보였다. */
.free-grid__item > .section:has(.map-grid) > h2 {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 16px;
    text-align: left;
    font-family: var(--font-display);
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 800;
    letter-spacing: -.02em;
}

/* 기본 제목이 달고 다니는 가운데 48px 짜리 그라데이션 막대를 지우고, */
.free-grid__item > .section:has(.map-grid) > h2::after {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 2px;
    border-radius: 0;
    transform: none;
    background: linear-gradient(90deg, var(--brand-ink) 0 56px, var(--brand-blush) 56px);
}

/* ---- 98-2. 공지사항 · FAQ - 반 폭에 맞는 글 크기로 -----------------------
   827줄의 축소 서식은 네 칸짜리 좁은 기둥을 위한 것이었다. 한 줄에 둘씩 놓는 지금은
   그 값들이 전부 한 치수씩 작다. 말줄임(ellipsis)도 푼다 - 폭이 넉넉해 굳이 자를
   일이 없고, 자르면 제목이 무슨 말인지 모르게 끝난다. */
.free-grid__item:has(.post-list) > .section {
    padding: 0;
    overflow: visible;
}

.free-grid__item:has(.post-list) .post-list__head {
    margin: 0;
    padding-bottom: 16px;
    gap: 12px;
    align-items: baseline;
}

.free-grid__item:has(.post-list) .post-list__head h2 {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 800;
    letter-spacing: -.02em;
}

.free-grid__item:has(.post-list) .post-list__more {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--color-text-muted);
}

.free-grid__item:has(.post-list) .post-list__more:hover {
    color: var(--brand-ink);
    text-decoration: none;
}

.free-grid__item:has(.post-list) .post-list__link {
    position: relative;
    padding: 15px 2px;
    gap: 18px;
    transition: color .18s ease;
}

.free-grid__item:has(.post-list) .post-list__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.5;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
    /* 두 줄까지만 - 세 줄짜리 제목이 하나 끼면 두 칸의 키가 어긋난다. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.free-grid__item:has(.post-list) .post-list__date {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    color: var(--color-text-muted);
}

/* 손을 얹었을 때 - 연분홍 네모 반지(16절)는 목록 가운데서 툭 튀어나와 보인다.
   대신 왼쪽에 짧은 연분홍 막대가 자라고 글이 살짝 들어간다. */
.free-grid__item:has(.post-list) .post-list__link { box-shadow: none; }
/* 줄 목록 시절에는 줄 하나가 통째로 연분홍으로 들어왔다(10절). 카드 짜임에서는 카드가
   통째로 분홍 네모가 되어 버린다 - 바탕과 그림자를 모두 끈다(실제로 겪었다). */
.free-grid__item:has(.post-list) .post-list__link:hover {
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}

.free-grid__item:has(.post-list) .post-list__link::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 0;
    height: 14px;
    background: var(--brand-blush-deep, #e79ebd);
    transform: translateY(-50%);
    transition: width .22s cubic-bezier(.33, 0, .12, 1);
}

.free-grid__item:has(.post-list) .post-list__link:hover::before { width: 3px; }

/* 카드 짜임에서는 그 막대를 쓰지 않는다(위 규칙은 줄 목록 시절의 것이다). */
.free-grid__item:has(.post-list) .post-list__link:hover::before { width: auto; }

.free-grid__item:has(.post-list) .post-list__link:hover .post-list__title {
    color: var(--brand-ink);
}

/* ---- 98-3. 오시는 길 - 띠가 아니라 한 장의 그림으로 ----------------------
   넓은 줄에서는 지도를 왼쪽에 크게 두고 주소·길찾기를 오른쪽에 세운다. 지도가 제 비율을
   되찾고, 오른쪽 글이 그 옆을 받쳐 준다. 좁아지면 예전처럼 위아래로 쌓인다. */
@media (min-width: 900px) {
    .free-grid__item > .section:has(.map-grid) .map-card {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(290px, .85fr);
        gap: 0 clamp(26px, 3vw, 48px);
        align-items: stretch;
        height: 100%;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__frame {
        flex: none;
        height: 100%;
        min-height: 300px;
    }

    /* 오른쪽 칸 - 주소를 위, 길찾기를 아래에 붙여 두 끝이 지도의 위아래와 맞는다. */
    .free-grid__item > .section:has(.map-grid) .map-card__body {
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        padding: 2px 0 0;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__body h3 {
        font-size: clamp(19px, 1.7vw, 24px);
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__body p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__go {
        margin-top: auto;
        padding-top: 20px;
    }

    /* 좁은 칸에서는 세 단추가 한 줄에 다 안 들어간다 - 고르게 나눠 둔다. */
    .free-grid__item > .section:has(.map-grid) .map-card__go-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__go-btn {
        justify-content: center;
        padding: 0 8px;
        min-height: 40px;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__go-label {
        flex-basis: 100%;
        margin: 0 0 10px;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__go-more {
        margin-top: 12px;
    }
}

/* ---- 98-4. 좁은 화면 ------------------------------------------------------
   한 줄에 하나씩 쌓이므로 글 크기는 그대로 두되, 줄 간격만 조금 줄인다. */
@media (max-width: 599px) {
    .free-grid__item:has(.post-list) .post-list__link { padding: 13px 2px; gap: 12px; }
    .free-grid__item:has(.post-list) .post-list__title { font-size: 14px; }
    .free-grid__item:has(.post-list) .post-list__link::before { left: -10px; }
}

/* ===========================================================================
   99. 배너 아래 - 배너와 같은 격으로
   98절에서 글자 크기와 줄 맞춤은 바로잡았지만, 여전히 "잘 정리된 표"였지 배너처럼
   공들인 화면은 아니었다. 까닭은 짜임이 아니라 <결>에 있다 - 배너는 어두운 바탕에
   흰 글씨, 가는 선, 자간을 벌린 라틴 글씨로 한 장면을 만드는데, 그 아래는 처음부터
   끝까지 흰 종이에 검은 글씨만 이어진다. 눈이 쉴 곳도, 멈출 곳도 없다.

   그래서 쪽 전체에 가락을 넣는다.
       어두운 배너 → 흰 바탕(소식·FAQ) → 먹색 띠(오시는 길) → 사진 칸(뉴스레터)
   가운데 "오시는 길"을 화면 끝까지 번지는 먹색 띠로 만들어 배너와 짝을 맞춘다. 지도는
   그 어둠 위에 놓인 한 장의 그림이 되고(배너의 포스터와 같은 자리다), 길찾기 단추도
   배너의 화살표처럼 테두리만 있는 꼴로 바꾼다.
   =========================================================================== */

/* ---- 99-1. 소식·FAQ 두 칸 사이에 가는 세로선 ----------------------------
   편집물에서 단을 가르는 선이다. 두 목록이 "같은 줄의 두 단"으로 읽힌다. */
@media (min-width: 900px) {
    .free-grid__item:has(.post-list) + .free-grid__item:has(.post-list) > .section {
        padding-left: clamp(26px, 3vw, 46px);
        border-left: 1px solid var(--brand-line, #e6e0e2);
    }
}

/* 제목 줄의 먹색 토막을 조금 더 또렷하게, 나머지는 더 옅게 - 배너의 가는 선과 같은 결. */
.free-grid__item:has(.post-list) .post-list__head::after {
    height: 2px;
    background: linear-gradient(90deg, var(--brand-ink) 0 44px, rgba(35, 31, 32, .12) 44px);
}

/* 목록 줄 사이는 머리카락 한 올 - 표처럼 굵은 줄은 단숨에 사무적으로 보인다. */
.free-grid__item:has(.post-list) .post-list__item {
    border-bottom: 1px solid rgba(35, 31, 32, .08);
}

.free-grid__item:has(.post-list) .post-list__item:last-child { border-bottom: 0; }

/* ---- 99-2. 오시는 길 - 화면 끝까지 번지는 먹색 띠 -------------------------
   칸은 본문 폭 안에 있지만 바탕만 좌우로 흘려 보낸다. 100vw 를 쓰면 스크롤 막대 폭만큼
   가로로 넘쳐 흔들리므로, 그림자를 양옆으로 무한히 번지게 한 뒤 위아래만 잘라 낸다. */
.free-grid__item:has(.map-grid) { position: relative; }

.free-grid__item:has(.map-grid)::before {
    content: "";
    position: absolute;
    top: -52px;
    bottom: -52px;
    /* 칸은 본문 폭 안에 있지만 바탕만 화면 끝까지 늘인다. 처음에는 그림자를 100vmax 번지게
       해서 좌우를 칠했는데, 그림자는 <색>만 번지고 사진은 따라가지 않는다 - 그래서 사진이
       위젯 폭 안에서만 보였다. 가로를 통째로 100vw 로 잡아야 사진도 같이 흐른다.
       (가로 넘침은 위쪽 html, body { overflow-x: clip } 이 막아 준다.) */
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    z-index: 0;
    background: var(--brand-ink, #231f20);
}

.free-grid__item:has(.map-grid) > .section {
    position: relative;
    z-index: 1;
}

/* 제목 - 배너의 작은 라틴 글씨와 같은 자리를 차지한다. */
.free-grid__item > .section:has(.map-grid) > h2 {
    color: #ffffff;
    font-size: clamp(20px, 1.8vw, 25px);
    margin-bottom: 26px;
}

.free-grid__item > .section:has(.map-grid) > h2::after {
    background: linear-gradient(90deg, var(--brand-blush, #fad8e7) 0 44px, rgba(255, 255, 255, .22) 44px);
}

/* 지도 - 배너의 포스터와 같은 마감. 가는 흰 테두리 + 두 겹 그림자로 어둠 위에 띄운다. */
.free-grid__item > .section:has(.map-grid) .map-card__frame {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 2px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .35),
        0 26px 60px rgba(0, 0, 0, .45);
    background: #141112;
}

/* 어두운 바탕 위에서는 지도만 혼자 쨍하다 - 아주 조금 눌러 띠와 어울리게 한다. */
.free-grid__item > .section:has(.map-grid) .map-card__frame iframe {
    filter: saturate(.84) contrast(.96) brightness(.97);
}

/* 지도 위 이름표 - 먹색 위에 먹색 쪽지는 안 보인다. 연분홍으로 바꾼다. */
.free-grid__item > .section:has(.map-grid) .map-card__pin {
    background: var(--brand-blush, #fad8e7);
    color: var(--brand-ink, #231f20);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

.free-grid__item > .section:has(.map-grid) .map-card { background: transparent; }

.free-grid__item > .section:has(.map-grid) .map-card__body h3 { color: #ffffff; }

.free-grid__item > .section:has(.map-grid) .map-card__body p {
    color: rgba(255, 255, 255, .7);
}

/* 길찾기 - 연분홍 알약은 어둠 위에서 사탕처럼 튄다. 배너 화살표처럼 테두리만 남긴다. */
.free-grid__item > .section:has(.map-grid) .map-card__go {
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-label {
    color: rgba(255, 255, 255, .5);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .9);
    border-radius: 2px;
    font-weight: 600;
}

.free-grid__item > .section:has(.map-grid) .map-card__go-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--brand-ink, #231f20);
    transform: none;
}

.free-grid__item > .section:has(.map-grid) .map-card__go-btn svg {
    opacity: .8;
}

.free-grid__item > .section:has(.map-grid) .map-card__go-more {
    color: var(--brand-blush, #fad8e7);
}

/* ---- 99-3. 주차 안내 한 줄 ------------------------------------------------
   길찾기 아래에 한 줄. 단추 세 개와 같은 무게로 두면 넷 중 뭘 눌러야 할지 흐려진다 -
   한 줄짜리 띠로 따로 세워 "여기 한 가지가 더 있다"로 읽히게 한다. */
.map-card__parking {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid var(--color-border, #e6e0e2);
    border-radius: 2px;
    color: inherit;
    transition: border-color .18s ease, background-color .18s ease;
}

.map-card__parking svg {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .75;
}

.map-card__parking-txt {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.map-card__parking-txt b {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.map-card__parking-txt em {
    font-style: normal;
    font-size: 11.5px;
    color: var(--color-text-muted, #6a6a6a);
}

.map-card__parking-go {
    margin-left: auto;
    font-size: 15px;
    opacity: .5;
    transition: transform .18s ease, opacity .18s ease;
}

.map-card__parking:hover .map-card__parking-go { transform: translateX(3px); opacity: 1; }

/* 먹색 띠 위에서는 어둠에 맞춘 옷으로 갈아입는다. */
.free-grid__item > .section:has(.map-grid) .map-card__parking {
    border-color: rgba(255, 255, 255, .22);
    color: #ffffff;
}

.free-grid__item > .section:has(.map-grid) .map-card__parking:hover {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .06);
}

.free-grid__item > .section:has(.map-grid) .map-card__parking-txt em {
    color: rgba(255, 255, 255, .6);
}

/* ---- 99-4. 좁은 화면 ------------------------------------------------------
   띠는 그대로 두되(가락이 사라지면 다시 흰 종이가 된다) 위아래 여백만 줄인다. */
@media (max-width: 899px) {
    .free-grid__item:has(.map-grid)::before { top: -34px; bottom: -34px; }
}

@media (max-width: 599px) {
    .free-grid__item:has(.map-grid)::before { top: -26px; bottom: -26px; }
    .map-card__parking { padding: 12px 13px; gap: 10px; }
}

/* ---- 99-5. 오른쪽 칸을 지도 가운데에 맞춘다 ------------------------------
   98절은 길찾기를 칸 맨 아래로 밀어 지도의 아래 끝과 맞췄다. 그런데 주소가 두 줄뿐이라
   주소와 길찾기 사이에 사람 키만 한 빈 자리가 생겼다 - 맞춘 것이 아니라 벌어진 것으로
   보인다. 글 덩어리를 하나로 묶어 지도 한가운데에 세운다. */
.free-grid__item > .section:has(.map-grid) .map-card__body {
    justify-content: center;
}

.free-grid__item > .section:has(.map-grid) .map-card__go {
    margin-top: 26px;
}

/* ===========================================================================
   100. 뉴스레터 칸 - 먹색 띠 옆에서도 지지 않게
   가는 테두리를 두른 흰 네모라, 바로 위 먹색 띠를 보고 내려온 눈에는 빈 상자로 보였다.
   테두리를 걷고 오른쪽을 크림색으로 깔아 사진 칸과 한 덩어리가 되게 한다 - 두 쪽짜리
   한 장의 물건이지 두 개의 상자가 아니다.
   =========================================================================== */
.free-grid__item > .section.form-widget {
    border: 0;
    background: var(--brand-cream, #faf6f4);
    box-shadow: 0 1px 2px rgba(35, 31, 32, .06), 0 18px 44px rgba(35, 31, 32, .07);
}

/* 사진과 입력 칸이 맞닿는 자리에 머리카락 한 올 - 두 칸의 경계가 흐려지지 않게. */
.free-grid__item > .section.form-widget > .form-widget__form {
    padding-left: clamp(26px, 3.4vw, 44px);
}

.free-grid__item > .section.form-widget .form-widget__field input {
    background: #ffffff;
}

/* 좁은 화면에서는 사진이 아예 사라져(높이 0) 흰 종이에 입력칸만 남았다.
   얇은 띠로나마 남겨 두면 이 칸이 무엇인지 한눈에 들어온다. */
@media (max-width: 760px) {
    .free-grid__item > .section.form-widget::before {
        height: 132px;
    }

    .free-grid__item > .section.form-widget > h2 { padding-top: 32px; }
}

/* ===========================================================================
   101. 오시는 길 - 사진을 깔고, 먹색을 걷고, 분홍을 남긴다
   99절의 띠는 "검정 + 흰 글씨 + 네모 테두리"라 고급스럽기보다 사이버틱했다. 세 가지를 고친다.
     (1) 바탕에 전시장 사진을 깐다 - 킨텍스 외벽에 포스터가 걸린 사진이라, 오시는 길이라는
         말과 그림이 같은 이야기를 한다(지도 옆에 그 장소가 실제로 보인다).
     (2) 순수한 검정 대신 자줏빛이 도는 어둠으로 누른다. 같은 밝기라도 색기가 있으면
         화면이 아니라 인쇄물처럼 보인다. 위에 아주 옅은 알갱이(종이 결)를 한 겹 얹는다.
     (3) 분홍을 다시 불러온다 - 글귀 밑줄, 지도 이름표, 길찾기 테두리, 주차 줄까지
         이 띠 안의 포인트는 전부 연분홍 한 색으로 모은다.
   =========================================================================== */

.free-grid__item:has(.map-grid)::before {
    /* 맨 위부터: 종이 결 → 분홍 빛무리 → 어둠 → 사진.
       sRGB 로 섞이도록 두어야 어둠이 탁해지지 않는다. */
    background-color: #241a20;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 62% 74% at 88% 10%, rgba(250, 216, 231, .18), transparent 64%),
        radial-gradient(ellipse 70% 60% at 6% 96%, rgba(240, 185, 209, .1), transparent 62%),
        linear-gradient(101deg,
            rgba(28, 18, 24, .965) 0%,
            rgba(30, 21, 27, .94) 36%,
            rgba(34, 24, 30, .962) 66%,
            rgba(40, 28, 35, .978) 100%),
        url("/uploadImg/HANDMADE%20FESTA%202027/banner/17/kr/1787622904200.jpg");
    background-size: 180px 180px, auto, auto, auto, cover;
    background-position: center, center, center, center, center 42%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* ---- 101-1. 제목 - 작은 라틴 머리말을 얹는다 ------------------------------
   "LOCATION / 오시는 길". 큰 한글 제목 하나만 덩그러니 있는 것과, 그 위에 자간을 벌린
   작은 라틴 글씨가 한 줄 놓인 것은 격이 다르다. 지도 칸에만 거는 글귀라 뜻이 어긋날 일이 없다. */
.free-grid__item > .section:has(.map-grid) > h2::before {
    content: "LOCATION";
    display: block;
    margin-bottom: 11px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    color: var(--brand-blush, #fad8e7);
}

.free-grid__item > .section:has(.map-grid) > h2 {
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -.03em;
}

/* 제목 밑줄은 분홍 토막 하나로 - 흰 선까지 길게 끌면 다시 차가워진다. */
.free-grid__item > .section:has(.map-grid) > h2::after {
    background: linear-gradient(90deg, var(--brand-blush, #fad8e7) 0 52px, rgba(255, 255, 255, .14) 52px);
}

/* ---- 101-2. 지도 - 사진 위에 놓인 한 장의 인화지처럼 ----------------------- */
.free-grid__item > .section:has(.map-grid) .map-card__frame {
    border-color: rgba(250, 216, 231, .3);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .4),
        0 30px 70px rgba(0, 0, 0, .5),
        0 0 0 6px rgba(255, 255, 255, .045);
}

/* ---- 101-3. 글 ------------------------------------------------------------ */
.free-grid__item > .section:has(.map-grid) .map-card__body h3 {
    letter-spacing: -.03em;
}

.free-grid__item > .section:has(.map-grid) .map-card__body p {
    color: rgba(255, 255, 255, .76);
}

/* 주소 앞 핀은 원래 연분홍이다 - 어두운 바탕에서 더 또렷하게. */
.free-grid__item > .section:has(.map-grid) .map-card__body p::before {
    border-color: var(--brand-blush, #fad8e7);
}

/* ---- 101-4. 길찾기 - 분홍 테두리, 분홍으로 채워지는 단추 -------------------- */
.free-grid__item > .section:has(.map-grid) .map-card__go {
    border-top-color: rgba(250, 216, 231, .26);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-label {
    color: rgba(250, 216, 231, .8);
    letter-spacing: .2em;
}

.free-grid__item > .section:has(.map-grid) .map-card__go-btn {
    border-color: rgba(250, 216, 231, .32);
    color: rgba(255, 255, 255, .92);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-btn:hover {
    background: var(--brand-blush, #fad8e7);
    border-color: var(--brand-blush, #fad8e7);
    color: var(--brand-ink, #231f20);
}

/* ---- 101-5. 주차 안내 ------------------------------------------------------ */
.free-grid__item > .section:has(.map-grid) .map-card__parking {
    border-color: rgba(250, 216, 231, .26);
    background: rgba(255, 255, 255, .035);
}

.free-grid__item > .section:has(.map-grid) .map-card__parking:hover {
    border-color: var(--brand-blush, #fad8e7);
    background: rgba(250, 216, 231, .1);
}

.free-grid__item > .section:has(.map-grid) .map-card__parking svg {
    color: var(--brand-blush, #fad8e7);
    opacity: 1;
}

.free-grid__item > .section:has(.map-grid) .map-card__parking-txt em {
    color: rgba(255, 255, 255, .62);
}

.free-grid__item > .section:has(.map-grid) .map-card__parking-go {
    color: var(--brand-blush, #fad8e7);
    opacity: .9;
}

/* ===========================================================================
   102. 공지사항 · FAQ - 글씨를 한 치수 줄이고 결을 다듬는다
   98절에서 키운 글씨가 반 폭 칸에는 조금 컸다. 한 치수 줄이되, 줄 사이는 그대로 둬서
   빽빽해 보이지 않게 한다 - 글이 작아질수록 여백이 더 필요하다.
   =========================================================================== */
.free-grid__item:has(.post-list) .post-list__head h2 {
    font-size: clamp(16px, 1.25vw, 18px);
}

.free-grid__item:has(.post-list) .post-list__head {
    padding-bottom: 14px;
}

.free-grid__item:has(.post-list) .post-list__title {
    font-size: 13.5px;
    line-height: 1.55;
}

.free-grid__item:has(.post-list) .post-list__date {
    font-size: 11px;
    color: rgba(35, 31, 32, .42);
}

.free-grid__item:has(.post-list) .post-list__link {
    padding: 14px 2px;
}

/* 더보기 - 분홍 화살표 하나로 "눌러서 더 볼 수 있다"를 말한다. */
.free-grid__item:has(.post-list) .post-list__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: .04em;
}

.free-grid__item:has(.post-list) .post-list__more::after {
    content: "\2192";
    font-size: 12px;
    color: var(--brand-blush-deep, #f0b9d1);
    transition: transform .2s ease;
}

.free-grid__item:has(.post-list) .post-list__more:hover::after {
    transform: translateX(3px);
}

/* 손을 얹으면 제목이 분홍 밑줄을 얻는다 - 목록 전체가 눌리는 것임을 알려 준다. */
.free-grid__item:has(.post-list) .post-list__link:hover .post-list__title {
    text-decoration: underline;
    text-decoration-color: var(--brand-blush-deep, #f0b9d1);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

@media (max-width: 599px) {
    .free-grid__item:has(.post-list) .post-list__title { font-size: 13px; }
    .free-grid__item > .section:has(.map-grid) > h2::before { letter-spacing: .2em; }
}

/* ===========================================================================
   103. 소식·FAQ - 잡지의 색인처럼
   줄마다 "제목 ......... 날짜" 로 끝나는 짜임은 게시판의 기본값이지 디자인이 아니다.
   날짜를 줄머리로 옮겨 세로로 떨어지게 하면, 두 칸이 나란히 선 색인이 된다 - 날짜가
   한 줄로 정렬되어 "언제 무엇이 올라왔는지"가 훑어진다. 날짜는 사실이므로 번호를
   매기는 것과 달리 없는 뜻을 지어내지도 않는다.
   =========================================================================== */
.free-grid__item:has(.post-list) .post-list__link {
    align-items: baseline;
    gap: 17px;
}

.free-grid__item:has(.post-list) .post-list__date {
    order: -1;                 /* 날짜를 줄머리로 */
    flex: 0 0 auto;
    /* px 로 못 박는다. em 으로 두면 이 칸의 10.5px 가 아니라 줄(link)의 글자 크기를
       기준으로 잡혀, 날짜는 "2026-08- / 24" 로 꺾이고 아래 세로선은 제목 한가운데에
       가서 섰다(실제로 겪었다). */
    width: 74px;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(35, 31, 32, .38);
    transition: color .18s ease;
}

.free-grid__item:has(.post-list) .post-list__title {
    flex: 1 1 auto;
}

/* 날짜 칸과 제목 칸 사이에 아주 옅은 세로 선 - 색인의 격자가 보인다. */
.free-grid__item:has(.post-list) .post-list__link::after {
    content: "";
    position: absolute;
    left: 82px;                /* 날짜 칸 74px + 사이 8px */
    top: 11px;
    bottom: 11px;
    width: 1px;
    background: rgba(35, 31, 32, .08);
}

/* 손을 얹으면 그 줄만 아주 옅은 분홍으로 떠오른다 - 줄 전체가 눌린다는 신호. */
.free-grid__item:has(.post-list) .post-list__item {
    position: relative;
}

.free-grid__item:has(.post-list) .post-list__item::before {
    content: "";
    position: absolute;
    inset: 0 -14px;
    background: #fdf6fa;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.free-grid__item:has(.post-list) .post-list__item:hover::before { opacity: 1; }

.free-grid__item:has(.post-list) .post-list__link { z-index: 1; }

.free-grid__item:has(.post-list) .post-list__link:hover .post-list__date {
    color: var(--brand-rose, #c25683);
}

@media (max-width: 599px) {
    /* 좁은 칸에서는 날짜 칸이 제목을 너무 밀어낸다 - 제목 아래로 내린다. */
    .free-grid__item:has(.post-list) .post-list__link {
        flex-wrap: wrap;
        gap: 3px 0;
    }

    .free-grid__item:has(.post-list) .post-list__date {
        order: 1;
        width: auto;
        flex-basis: 100%;
    }

    .free-grid__item:has(.post-list) .post-list__title { flex-basis: 100%; }
    .free-grid__item:has(.post-list) .post-list__link::after { display: none; }
}

/* ===========================================================================
   104. 뉴스레터 - 한 장의 초대장처럼
   사진 + 흰 입력칸은 "폼이 붙은 배너"였다. 사진에는 브랜드 색을 입히고, 입력칸은
   네모 상자 대신 밑줄 한 줄로 바꾼다. 종이에 손으로 적어 넣는 칸처럼 보인다.
   단추는 배너의 "참가신청 하기"와 같은 연분홍 - 쪽 안에서 같은 행동은 같은 색이다.
   =========================================================================== */

/* 사진 위 덮개에 자줏빛을 섞는다 - 오시는 길 띠와 같은 색기라 두 칸이 한 집안으로 보인다. */
.free-grid__item > .section.form-widget::before {
    background-image:
        linear-gradient(168deg, rgba(46, 26, 36, .5) 0%, rgba(28, 18, 24, .86) 100%),
        url("/uploadImg/HANDMADE%20FESTA%202027/feature/13/kr/card-13.jpg");
    background-size: auto, cover;
    background-position: center, center;
}

/* 오른쪽 칸은 크림색 그대로 두되 위에서 아주 옅은 분홍이 내려앉게. */
.free-grid__item > .section.form-widget {
    background:
        radial-gradient(ellipse 60% 50% at 78% 0%, rgba(250, 216, 231, .4), transparent 62%),
        var(--brand-cream, #fbf6f8);
}

.free-grid__item > .section.form-widget > h2 {
    font-size: clamp(23px, 2.5vw, 32px);
    letter-spacing: -.035em;
}

/* 입력칸 - 테두리 상자를 걷고 밑줄만. 바탕이 비치니 칸이 종이의 일부처럼 보인다. */
.free-grid__item > .section.form-widget .form-widget__field input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(35, 31, 32, .26);
    border-radius: 0;
    padding-left: 2px;
    padding-right: 2px;
    transition: border-color .2s ease;
}

.free-grid__item > .section.form-widget .form-widget__field input:focus {
    border-bottom-color: var(--brand-rose, #c25683);
    box-shadow: none;
    outline: none;
}

.free-grid__item > .section.form-widget .form-widget__field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(35, 31, 32, .5);
}

/* 단추 - 배너의 으뜸 단추와 같은 연분홍 + 먹색 글씨(11.7:1). */
.free-grid__item > .section.form-widget .form-widget__submit {
    background: var(--brand-blush, #fad8e7);
    color: var(--brand-ink, #231f20);
    border: 1px solid var(--brand-blush, #fad8e7);
    box-shadow: 0 10px 26px rgba(194, 86, 131, .2);
}

.free-grid__item > .section.form-widget .form-widget__submit:hover {
    background: var(--brand-ink, #231f20);
    border-color: var(--brand-ink, #231f20);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(35, 31, 32, .26);
}

/* ===========================================================================
   105. 카드 배너 - 올리면 한 장이 살짝 앞으로 나온다
   이미 사진이 확대되고 설명이 펼쳐지지만, 카드와 카드 사이의 구분이 없어 띠 하나로
   보였다. 가는 분홍 테두리를 안쪽에 그려 넣어 "한 장"이라는 것을 분명히 한다.
   =========================================================================== */
.feature-carousel--overlay .card {
    position: relative;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.feature-carousel--overlay .card:hover { transform: translateY(-4px); }

/* 안쪽 테두리 - 사진 위에 그려지므로 ::after(덮개)보다 위에 와야 한다. */
.feature-carousel--overlay .card .card__body::before {
    content: "";
    position: absolute;
    inset: -14px 10px 10px;
    border: 1px solid rgba(250, 216, 231, .55);
    opacity: 0;
    transform: scale(1.015);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .3, 1);
    pointer-events: none;
}

@media (hover: hover) {
    .feature-carousel--overlay .card:hover .card__body::before {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===========================================================================
   106. 오시는 길 - 가림막을 걷고, 글은 흰 판 위로
   사진을 거의 검게 덮어 두니 "왜 사진을 깔았나" 싶게 안 보였다. 덮개를 반 넘게 걷어
   전시장 외벽과 포스터가 보이게 한다. 대신 글을 사진 위에 바로 얹으면 읽히지 않으므로,
   오른쪽 칸을 흰 판으로 세운다 - 지도(흰 인화지)와 글(흰 판)이 사진 위에 나란히 놓인
   두 장이 되어, 가림막에 기대지 않고도 또렷하다.
   =========================================================================== */
.free-grid__item:has(.map-grid)::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 62% 74% at 88% 8%, rgba(250, 216, 231, .2), transparent 66%),
        linear-gradient(101deg,
            rgba(30, 20, 26, .66) 0%,
            rgba(32, 22, 28, .55) 42%,
            rgba(36, 25, 31, .5) 74%,
            rgba(42, 29, 36, .54) 100%),
        url("/uploadImg/HANDMADE%20FESTA%202027/banner/17/kr/1787622904200.jpg");
    background-size: 180px 180px, auto, auto, cover;
    background-position: center, center, center, center 28%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

/* 제목은 사진 위에 그대로 - 덮개가 얇아진 만큼 글자 둘레에 어두운 테를 둘러 띄운다. */
.free-grid__item > .section:has(.map-grid) > h2 {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, .7),
        0 2px 16px rgba(0, 0, 0, .55);
}

.free-grid__item > .section:has(.map-grid) > h2::before {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
}

/* 지도 둘레의 흰 테를 조금 더 - 사진 위에 놓인 인화지처럼 보인다. */
.free-grid__item > .section:has(.map-grid) .map-card__frame {
    border-color: rgba(255, 255, 255, .5);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, .3),
        0 30px 70px rgba(0, 0, 0, .42),
        0 0 0 7px rgba(255, 255, 255, .12);
}

/* ---- 106-1. 오른쪽 흰 판 ---------------------------------------------------- */
.free-grid__item > .section:has(.map-grid) .map-card__body {
    padding: clamp(24px, 2.4vw, 34px);
    background: #ffffff;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, .22),
        0 30px 70px rgba(0, 0, 0, .34);
}

.free-grid__item > .section:has(.map-grid) .map-card__body h3 {
    color: var(--brand-ink, #231f20);
}

.free-grid__item > .section:has(.map-grid) .map-card__body p {
    color: var(--color-text-muted, #6a6a6a);
}

.free-grid__item > .section:has(.map-grid) .map-card__body p::before {
    border-color: var(--brand-blush-deep, #f0b9d1);
}

/* ---- 106-2. 흰 판 위의 길찾기 ------------------------------------------------ */
.free-grid__item > .section:has(.map-grid) .map-card__go {
    border-top-color: rgba(35, 31, 32, .1);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-label {
    color: rgba(35, 31, 32, .45);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-btn {
    border-color: rgba(35, 31, 32, .16);
    background: transparent;
    color: var(--brand-ink, #231f20);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-btn:hover {
    background: var(--brand-blush, #fad8e7);
    border-color: var(--brand-blush, #fad8e7);
    color: var(--brand-ink, #231f20);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-more {
    color: var(--brand-rose, #c25683);
}

/* ---- 106-3. 흰 판 위의 주차 안내 ---------------------------------------------- */
.free-grid__item > .section:has(.map-grid) .map-card__parking {
    border-color: rgba(35, 31, 32, .14);
    background: var(--brand-cream, #fbf6f8);
    color: var(--brand-ink, #231f20);
}

.free-grid__item > .section:has(.map-grid) .map-card__parking:hover {
    border-color: var(--brand-blush-deep, #f0b9d1);
    background: #fdf6fa;
}

.free-grid__item > .section:has(.map-grid) .map-card__parking svg {
    color: var(--brand-rose, #c25683);
}

.free-grid__item > .section:has(.map-grid) .map-card__parking-txt em {
    color: var(--color-text-muted, #6a6a6a);
}

.free-grid__item > .section:has(.map-grid) .map-card__parking-go {
    color: var(--brand-rose, #c25683);
}

/* 흰 판이 생겼으니 두 칸 사이가 조금 더 벌어져야 각각 한 장으로 읽힌다. */
@media (min-width: 900px) {
    .free-grid__item > .section:has(.map-grid) .map-card {
        gap: 0 clamp(20px, 2.4vw, 36px);
    }
}

/* ---- 106-4. 좁은 화면 - 지도가 눌려 사라지지 않게 --------------------------
   넓은 화면에서는 지도와 글이 나란히 서서 칸 높이를 나눠 쓰지만, 좁아지면 둘이 위아래로
   쌓인다. 그런데 칸 높이는 그대로라 흰 판이 커진 만큼 지도가 눌려 60px 짜리 띠가 됐다.
   좁은 화면에서는 높이를 내용에 맡기고, 지도에는 제 비율을 돌려준다. */
@media (max-width: 899px) {
    .free-grid__item > .section:has(.map-grid),
    .free-grid__item > .section:has(.map-grid) .map-grid,
    .free-grid__item > .section:has(.map-grid) .map-card {
        height: auto;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__frame {
        flex: none;
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .free-grid__item > .section:has(.map-grid) .map-card__body {
        margin-top: 16px;
    }
}

/* ===========================================================================
   107. 확장 배너와 카드 줄 사이 - 간격을 눈에 보이는 값으로 못 박는다
   격자에 빈 줄을 하나 더 주는 방법은 여기서 안 먹는다. 줄 높이가 minmax(55px, auto) 라
   내용이 적으면 줄이 줄어들어, 한 줄을 더 비워도 실제로는 줄간격 24px 만 벌어진다
   (실제로 겪었다 - 배너 바닥에서 카드까지 32px 이었다).
   그래서 칸 묶음 자체에 바깥 여백을 준다. 한 자리에서만 정해지므로 나중에 손대기도 쉽다.
   =========================================================================== */
.free-grid__item:has(.feature-carousel) {
    margin-top: clamp(16px, 1.8vw, 28px);
}

/* ===========================================================================
   108. 카드 메뉴 - 네 장이 아래 위젯과 같은 폭을 쓴다
   지금은 한 장 280px 고정에 양옆 80px 을 화살표 자리로 비워 둬서, 카드 줄만 안쪽으로
   들어가 보이고 넷째 장은 화면 밖으로 흘러 나갔다(1280px 에서 첫 장 왼끝 194px,
   넷째 장 오른끝 1398px - 아래 위젯은 114~1166px 이었다).
   네 장이 줄을 꽉 채우게 바꾸면 양 끝이 아래 공지·FAQ 칸의 끝과 같은 자리에 선다.
   =========================================================================== */
@media (min-width: 900px) {
    /* 양옆 80px 은 화살표 자리였다. 그 자리를 없애면 보이는 칸이 아래 위젯과 같은 폭이 된다. */
    .free-grid__item .feature-carousel--overlay { --fc-gap: clamp(16px, 1.8vw, 28px); padding: 0; }

    .free-grid__item .feature-carousel--overlay .feature-carousel__track {
        gap: var(--fc-gap);
    }

    /* 280px 고정을 푼다. 한 장이 "칸 폭에서 사이 셋을 뺀 것의 1/4" 을 쓰므로 넉 장이
       줄을 꽉 채우고, 다섯째부터는 넘기면 따라 나온다. */
    .free-grid__item .feature-carousel--overlay .card {
        flex: 0 0 calc((100% - var(--fc-gap) * 3) / 4);
        width: auto;
    }

}


/* ===========================================================================
   109. 위젯 사이 위아래 간격
   줄간격이 24px 이라 칸과 칸이 붙어 보였다. 메인에만 넓힌다 - 다른 페이지의 짜임은
   그대로 둬야 하므로 배너가 있는 격자(메인뿐이다)를 기준으로 건다.

   메인은 격자가 <둘>이다. 배너가 첫 격자를 혼자 쓰고, 그 아래 모든 위젯이 다음 격자에
   들어간다(배너 뒤에서 격자를 끊는 규칙이 따로 있다). 그래서 배너 격자에만 걸면 눈에
   보이는 것이 하나도 안 바뀐다 - 실제로 겪었다. 뒤따르는 격자까지 같이 건다.
   =========================================================================== */
.free-grid:has(.hm-hero),
.free-grid:has(.hm-hero) + .free-grid {
    row-gap: clamp(24px, 2vw, 32px);
}

/* ---- 카드 줄 화살표는 카드 밖으로 ----------------------------------------
   사진 위에 얹으면 그림과 글을 가린다. 줄 아래 오른쪽으로 내린다.
   양옆 바깥으로 빼는 방법도 있지만 1024px 아래에서는 바깥 여백이 20px 밖에 없어
   화살표가 화면 밖으로 나간다. 아래로 내리면 어느 폭에서도 겹치지 않는다. */
.free-grid__item .feature-carousel--overlay {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    /* 왼쪽 단추 · 표시줄 · 오른쪽 단추 차례로 가운데에 놓는다.
       DOM 순서는 (칸, 이전, 다음, 표시줄)이라 order 로 자리를 바꾼다. */
    justify-content: center;
    gap: 0;
    /* 화살표가 앉아 있던 양옆 여백(좁은 화면 56px)도 같이 없앤다 - 화살표가 아래로
       내려갔으니 그 자리를 비워 둘 까닭이 없고, 비워 두면 카드 줄만 안쪽으로 들어간다. */
    padding: 0;
}

.free-grid__item .feature-carousel--overlay .feature-carousel__viewport {
    flex: 0 0 100%;
}

.free-grid__item .feature-carousel--overlay .carousel__arrow {
    position: static;
    transform: none;
    margin-top: 18px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--brand-line, #e6e0e2);
    background: #fff;
    color: var(--brand-ink, #231f20);
    /* 글자(‹ ›)를 지우고 꺾쇠를 직접 그린다. 본문 글꼴에 따라 저 기호가 겹낫표처럼
       두 겹으로 보이거나 글자마다 굵기가 달라 보였다 - 선으로 그리면 어느 글꼴에서도 같다. */
    font-size: 0;
    line-height: 0;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.free-grid__item .feature-carousel--overlay .carousel__arrow::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}

/* 꺾쇠는 돌려 놓으면 무게 중심이 한쪽으로 쏠린다 - 반대쪽으로 조금 밀어 가운데를 맞춘다. */
.free-grid__item .feature-carousel--overlay .carousel__arrow--prev::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.free-grid__item .feature-carousel--overlay .carousel__arrow--next::before {
    transform: rotate(45deg);
    margin-right: 3px;
}

.free-grid__item .feature-carousel--overlay .carousel__arrow--prev { order: 1; }
.free-grid__item .feature-carousel--overlay .carousel__arrow--next { order: 3; }

.free-grid__item .feature-carousel--overlay .carousel__arrow:hover {
    transform: none;
    background: var(--brand-blush, #fad8e7);
    border-color: var(--brand-blush-deep, #f0b9d1);
    color: var(--brand-ink, #231f20);
}

/* 더 갈 곳이 없으면 눌러도 소용없다는 것을 보여 준다. */
.free-grid__item .feature-carousel--overlay .carousel__arrow:disabled,
.free-grid__item .feature-carousel--overlay .carousel__arrow[aria-disabled="true"] {
    opacity: .34;
    cursor: default;
    background: #fff;
    border-color: var(--brand-line, #e6e0e2);
}

/* ---- 카드 줄 아래 넘김 표시줄 -------------------------------------------
   단추만 있으면 "몇 장 중 어디쯤인지"를 알 수 없다. 가는 선 하나를 장 수만큼 나눠
   지금 칸만 먹색으로 채운다 - 동그라미 점보다 조용하고, 칸이 몇이든 폭이 일정하다. */
.free-grid__item .feature-carousel--overlay .carousel__dots {
    /* 기본 표시줄은 칸 안에 띄워 두는 꼴(absolute)이다 - 그대로 두면 두 단추 위에
       포개진다(실제로 겪었다). 흐름 안으로 되돌려 단추 사이에 끼운다. */
    position: static;
    transform: none;
    order: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 18px 16px 0;
}

.free-grid__item .feature-carousel--overlay .carousel__dot {
    width: 26px;
    height: 3px;
    min-height: 0;             /* 전역 터치 규칙이 44px 기둥으로 늘리는 것을 막는다 */
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--brand-line, #e6e0e2);
    cursor: pointer;
    transition: background-color .25s ease, width .25s ease;
}

.free-grid__item .feature-carousel--overlay .carousel__dot.is-active {
    width: 40px;
    background: var(--brand-ink, #231f20);
}

.free-grid__item .feature-carousel--overlay .carousel__dot:hover {
    background: var(--brand-blush-deep, #f0b9d1);
}

/* ===========================================================================
   110. 공지사항 - 줄을 통째로 쓰는 카드 띠
   반 폭 목록을 12칸으로 넓히면서 짜임도 바꾼다. 줄글 목록이 1,100px 를 가로지르면
   제목과 날짜 사이가 손바닥만큼 벌어져 눈이 길을 잃는다. 한 건을 한 장으로 끊고
   옆으로 굴린다 - 한 번에 넉 장이 보이고 나머지는 밀어서 본다(최대 여덟 장).
   =========================================================================== */
.free-grid__item:has(.post-list) {
    --nl-gap: clamp(16px, 1.8vw, 28px);
}

.free-grid__item:has(.post-list) .post-list {
    display: flex;
    gap: var(--nl-gap);
    overflow-x: auto;
    /* 손으로 밀면 한 장 단위로 멈춘다 - 반쯤 걸친 카드가 남지 않는다. */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 10px;
    margin: 0;
    list-style: none;
    scrollbar-width: thin;
}

.free-grid__item:has(.post-list) .post-list__item {
    flex: 0 0 calc((100% - var(--nl-gap) * 3) / 4);
    scroll-snap-align: start;
    border-bottom: 0;
    background: #faf7f8;
    border-radius: 2px;
    transition: background-color .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
}

/* 줄 목록에서 쓰던 옅은 분홍 덮개는 카드에서는 할 일이 없다. */
.free-grid__item:has(.post-list) .post-list__item::before { content: none; }

.free-grid__item:has(.post-list) .post-list__item:hover {
    background: #fdf6fa;
    transform: translateY(-3px);
}

.free-grid__item:has(.post-list) .post-list__link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 186px;
    padding: clamp(20px, 2vw, 26px);
}

/* 날짜는 카드 바닥으로. margin-top:auto 가 제목과 날짜 사이를 밀어 벌린다. */
.free-grid__item:has(.post-list) .post-list__date {
    order: 2;
    width: auto;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(35, 31, 32, .4);
}

/* 글씨를 키운다 - 카드 한 장이 품는 것이 제목뿐이라 제목이 주인공이다. */
.free-grid__item:has(.post-list) .post-list__title {
    order: 1;
    font-size: clamp(15px, 1.25vw, 17.5px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.02em;
    color: var(--brand-ink, #231f20);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 세로 칸막이 선은 줄 목록의 것이다 - 카드에서는 지운다. */
.free-grid__item:has(.post-list) .post-list__link::after { content: none; }

@media (max-width: 1023px) {
    .free-grid__item:has(.post-list) .post-list__item {
        flex-basis: calc((100% - var(--nl-gap) * 2) / 3);
    }
}

@media (max-width: 767px) {
    .free-grid__item:has(.post-list) .post-list__item {
        flex-basis: calc((100% - var(--nl-gap)) / 2);
    }
}

@media (max-width: 479px) {
    .free-grid__item:has(.post-list) .post-list__item { flex-basis: 78%; }
    .free-grid__item:has(.post-list) .post-list__link { min-height: 160px; }
}

/* ===========================================================================
   111. 맨 아래 FAQ 띠 - 바닥글과 맞붙는다
   왼쪽은 먹색 판에 묻는 말과 단추, 오른쪽은 사진. 화면 끝까지 번지되 글은 본문 폭에
   맞춰 들여 쓴다 - 글이 화면 맨 왼쪽에 붙으면 위의 다른 칸들과 줄이 안 맞는다.
   =========================================================================== */
/* 띠가 뉴스레터 위로 올라오면서 바닥글과는 멀어졌다 - 격자 아래 여백은 본래대로 둔다.
   띠 앞뒤 간격도 다른 위젯과 같은 방식(빈 줄 하나 + 줄간격 둘)으로만 띄운다. */

/* 코드 위젯의 껍데기를 걷는다 - 여백이 남으면 띠가 가운데로 밀려 들어간다.
   그리고 칸 높이를 띠가 끝까지 쓰게 한다. 칸은 격자가 정한 줄 수만큼 높이를 갖는데,
   띠가 그보다 낮으면 아래에 빈 자리가 남아 바닥글과 떨어진다(1440 에서 26px,
   900 에서 92px 떠 있었다). 늘여서 붙인다. */
.free-grid__item:has(.faq-band),
.free-grid__item:has(.faq-band) .section.code-block,
.free-grid__item:has(.faq-band) .code-block__body {
    display: flex;
    flex-direction: column;
}

.free-grid__item:has(.faq-band) .section.code-block,
.free-grid__item:has(.faq-band) .code-block__body {
    flex: 1 1 auto;
    padding: 0;
    margin: 0;
}

/* 띠에는 margin 을 0 으로 밀면 안 된다 - 화면 끝까지 번지게 하는 margin-left:-50vw 를
   같이 지워서 띠가 오른쪽으로 640px 밀려 나갔다(실제로 겪었다). 세로만 0 으로 둔다. */
.free-grid__item:has(.faq-band) .faq-band {
    flex: 1 1 auto;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.faq-band {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    min-height: clamp(260px, 26vw, 360px);
}

.faq-band__pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    background: var(--brand-ink, #231f20);
    color: #fff;
    /* 글의 왼쪽 끝을 본문 폭의 왼쪽 끝에 맞춘다. */
    padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 44px) clamp(32px, 4vw, 56px)
             max(24px, calc((100vw - var(--main-content-width, 1100px)) / 2 + 24px));
}

.faq-band__eyebrow {
    margin: 0;
    font-size: clamp(12.5px, 1.1vw, 14px);
    color: rgba(255, 255, 255, .66);
    word-break: keep-all;
}

.faq-band__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(21px, 2.3vw, 31px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.3;
    color: #fff;
    word-break: keep-all;
}

.faq-band__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    width: fit-content;
    min-height: 48px;
    margin-top: 12px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 2px;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.faq-band__btn em {
    font-style: normal;
    font-size: 16px;
    transition: transform .2s ease;
}

.faq-band__btn:hover {
    background: var(--brand-blush, #fad8e7);
    border-color: var(--brand-blush, #fad8e7);
    color: var(--brand-ink, #231f20);
}

.faq-band__btn:hover em { transform: translateX(4px); }

.faq-band__photo {
    background-image: url("/uploadImg/HANDMADE%20FESTA%202027/page/faq-band.jpg");
    background-size: cover;
    background-position: center 42%;
}

@media (max-width: 767px) {
    /* 좁은 화면에서는 사진을 아래로 내린다 - 옆으로 두면 둘 다 손바닥만 해진다. */
    .faq-band {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .faq-band__pane {
        padding: 36px 20px 40px;
    }

    .faq-band__photo {
        aspect-ratio: 16 / 9;
    }
}

/* ===========================================================================
   112. 공지사항 - 카드 한 장의 마감
   110절에서 짜임은 잡혔지만 회색 네모가 넉 장 늘어선 것에 가까웠다. 세 가지를 더한다.
     (1) 머리줄에 작은 라틴 글씨(NEWS)를 얹어 아래 칸들과 격을 맞춘다.
     (2) 칸마다 분홍 꼬리표 한 개 - 무엇을 모아 놓은 줄인지 카드 혼자서도 말하게.
     (3) 날짜 줄 위에 머리카락 한 올, 오른쪽 끝에 화살표. 손을 얹으면 분홍이 번진다.
   =========================================================================== */
.free-grid__item:has(.post-list) .post-list__head h2::before {
    content: "NEWS";
    display: block;
    margin-bottom: 9px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    color: var(--brand-rose, #c25683);
}

.free-grid__item:has(.post-list) .post-list__head h2 {
    font-size: clamp(19px, 1.7vw, 24px);
    letter-spacing: -.03em;
}

/* 카드 - 흰 바탕에 머리카락 테두리. 회색 덩어리보다 가볍고, 분홍이 들어갈 자리가 생긴다. */
.free-grid__item:has(.post-list) .post-list__item {
    background: #fff;
    border: 1px solid var(--brand-line, #e6e0e2);
}

.free-grid__item:has(.post-list) .post-list__item:hover {
    background: #fff;
    border-color: var(--brand-blush-deep, #f0b9d1);
    box-shadow: 0 14px 30px rgba(35, 31, 32, .08);
}

/* 날짜 줄 - 위에 가는 선을 긋고 오른쪽 끝에 화살표를 세운다. */
.free-grid__item:has(.post-list) .post-list__date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(35, 31, 32, .08);
    margin-top: auto;
    padding-top: 14px;
}

.free-grid__item:has(.post-list) .post-list__date::after {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 1.4px solid var(--brand-rose, #c25683);
    border-right: 1.4px solid var(--brand-rose, #c25683);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__date::after {
    transform: rotate(45deg) translate(2px, -2px);
}

/* 제목에 손을 얹었을 때의 밑줄은 카드에서는 거슬린다 - 카드 전체가 이미 반응한다. */
.free-grid__item:has(.post-list) .post-list__link:hover .post-list__title {
    text-decoration: none;
}

/* 카드 머리에 분홍 실선 한 올. 손을 얹으면 칸을 가로질러 자란다 -
   꼬리표 같은 글자를 더 얹지 않고도 "여기가 한 장"이라는 것이 보인다. */
.free-grid__item:has(.post-list) .post-list__item { position: relative; overflow: hidden; }

.free-grid__item:has(.post-list) .post-list__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--brand-blush-deep, #f0b9d1);
    transition: width .32s cubic-bezier(.2, .7, .3, 1);
}

.free-grid__item:has(.post-list) .post-list__item:hover::after { width: 100%; }

/* 제목에 숨 쉴 자리를 준다 - 카드가 품는 것이 제목뿐이다. */
.free-grid__item:has(.post-list) .post-list__title { padding-right: 6px; }

/* ---- 띠 안의 제목에는 위젯 공통 밑줄이 따라붙는다 - 걷어낸다 ---------------- */
.faq-band__title::after,
.faq-band__title::before { content: none; }

/* ===========================================================================
   113. 공지사항 - 네모 상자를 걷고 색인으로
   흰 카드에 테두리를 두르니 어느 사이트에나 있는 게시판 칸이 됐다. 상자를 없애고
   크림색 면 위에 <큰 번호 + 큰 제목>만 남긴다. 번호는 글이 아니라 자리표시라서
   연분홍 테두리 글자로 두어 제목을 가리지 않는다.
   손을 얹으면 칸이 통째로 먹색으로 뒤집힌다 - 조용한 면이 한 장씩 켜진다.
   =========================================================================== */
.free-grid__item:has(.post-list) .post-list { counter-reset: hm-notice; }

.free-grid__item:has(.post-list) .post-list__item {
    counter-increment: hm-notice;
    background: var(--brand-cream, #fbf6f8);
    border: 0;
    border-radius: 0;
    overflow: hidden;
    transition: background-color .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}

.free-grid__item:has(.post-list) .post-list__item:hover {
    background: var(--brand-ink, #231f20);
    border-color: transparent;
    box-shadow: none;
    transform: translateY(-4px);
}

/* 카드 머리의 분홍 실선은 상자가 사라진 지금 할 일이 없다. */
.free-grid__item:has(.post-list) .post-list__item::after { content: none; }

.free-grid__item:has(.post-list) .post-list__link {
    position: relative;
    min-height: 212px;
    padding: clamp(22px, 2.2vw, 30px);
}

/* 번호 - 테두리만 남긴 큰 숫자. 칸의 오른쪽 위에 걸어 둔다. */
.free-grid__item:has(.post-list) .post-list__link::before {
    content: counter(hm-notice, decimal-leading-zero);
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--font-display);
    font-size: clamp(46px, 4.6vw, 64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px var(--brand-blush-deep, #f0b9d1);
    transition: -webkit-text-stroke-color .3s ease, opacity .3s ease;
    pointer-events: none;
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__link::before {
    -webkit-text-stroke-color: rgba(250, 216, 231, .5);
}

/* 제목 - 이 칸의 주인공이다. 번호 아래로 내려 겹치지 않게 한다. */
.free-grid__item:has(.post-list) .post-list__title {
    margin-top: 58px;
    font-size: clamp(16px, 1.45vw, 19.5px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.035em;
    transition: color .3s ease;
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__title { color: #fff; }

.free-grid__item:has(.post-list) .post-list__date {
    border-top: 1px solid rgba(35, 31, 32, .1);
    font-family: var(--font-display);
    font-size: 11.5px;
    letter-spacing: .08em;
    transition: color .3s ease, border-color .3s ease;
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__date {
    color: rgba(255, 255, 255, .6);
    border-top-color: rgba(255, 255, 255, .22);
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__date::after {
    border-top-color: var(--brand-blush, #fad8e7);
    border-right-color: var(--brand-blush, #fad8e7);
}

@media (max-width: 479px) {
    .free-grid__item:has(.post-list) .post-list__link { min-height: 186px; }
    .free-grid__item:has(.post-list) .post-list__title { margin-top: 46px; }
}

/* ===========================================================================
   114. 공지사항 - 수제 공방의 라벨처럼
   113절의 커다란 테두리 숫자는 힙하긴 해도 운동화 광고 쪽이었다. 결을 바꾼다.
     · 바탕을 분홍빛 크림에서 <따뜻한 종이색>으로 - 공방에서 쓰는 크라프트지 쪽이다.
     · 번호는 크게 외치지 않고 작게, 자간을 벌려 라벨처럼. 옆에 분홍 실선 한 토막.
     · 제목에 자리를 많이 주고, 선은 전부 머리카락 한 올로.
     · 손을 얹으면 종이가 흰색으로 바래며 떠오르고 테두리가 생긴다 - 뒤집지 않는다.
   =========================================================================== */
.free-grid__item:has(.post-list) .post-list__item {
    background: #f6f1ec;
    /* 숫자의 윗머리가 상자 밖으로 조금 나간다 - 잘라 내면 번호가 반 토막 난다
       (실제로 겪었다). 넘침을 허용하고 대신 번호를 안쪽으로 들인다. */
    overflow: visible;
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color .32s ease, box-shadow .32s ease,
                transform .32s cubic-bezier(.2, .7, .3, 1);
}

.free-grid__item:has(.post-list) .post-list__item:hover {
    background: #fffdfb;
    box-shadow: inset 0 0 0 1px rgba(35, 31, 32, .14);
    transform: translateY(-5px);
}

.free-grid__item:has(.post-list) .post-list__link {
    min-height: 220px;
    padding: clamp(24px, 2.4vw, 32px);
}

/* 번호 - 판에 찍은 일련번호처럼 작게. 제목 위에 얌전히 얹힌다. */
.free-grid__item:has(.post-list) .post-list__link::before {
    position: static;
    /* 98절에서 줄 왼쪽에 자라게 해 둔 연분홍 막대가 이 자리를 쓰고 있다 - 바탕색을
       지우지 않으면 번호 뒤에 분홍 띠가 깔린다(실제로 겪었다). */
    background: transparent;
    width: auto;
    height: auto;
    transform: none;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    color: rgba(35, 31, 32, .42);
    -webkit-text-stroke: 0;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(35, 31, 32, .12);
    width: 100%;
    transition: color .32s ease, border-color .32s ease;
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__link::before {
    color: var(--brand-rose, #c25683);
    border-bottom-color: var(--brand-blush-deep, #f0b9d1);
}

.free-grid__item:has(.post-list) .post-list__title {
    margin-top: 0;
    font-size: clamp(15.5px, 1.35vw, 18.5px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.03em;
    color: var(--brand-ink, #231f20);
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__title {
    color: var(--brand-ink, #231f20);
}

/* 날짜 줄 - 선은 머리카락 한 올, 글씨는 자간을 벌린 작은 라틴. */
.free-grid__item:has(.post-list) .post-list__date {
    border-top: 1px solid rgba(35, 31, 32, .1);
    padding-top: 15px;
    font-size: 11px;
    letter-spacing: .12em;
    color: rgba(35, 31, 32, .4);
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__date {
    color: rgba(35, 31, 32, .55);
    border-top-color: rgba(35, 31, 32, .16);
}

.free-grid__item:has(.post-list) .post-list__date::after {
    border-top-color: rgba(35, 31, 32, .32);
    border-right-color: rgba(35, 31, 32, .32);
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__date::after {
    border-top-color: var(--brand-rose, #c25683);
    border-right-color: var(--brand-rose, #c25683);
}

/* 머리줄과 카드 사이의 선은 뺀다 - 카드마다 이미 선이 둘(번호 아래·날짜 위)이라
   줄 전체를 가로지르는 선이 하나 더 있으면 선만 눈에 들어온다. */
.free-grid__item:has(.post-list) .post-list__head::after { content: none; }

.free-grid__item:has(.post-list) .post-list__head {
    border-bottom: 0;
    padding-bottom: 18px;
    /* 더보기를 제목 글씨의 아랫줄에 맞춘다. baseline 으로 두면 제목 위의 NEWS 때문에
       제목 상자가 길어져서 더보기가 43px 위로 떠 있었다(실제로 겪었다). */
    align-items: flex-end;
}

/* 제목과 목록 사이를 가르던 선. 목록 쪽(.post-list)의 위 테두리였다 - 머리줄의
   ::after 만 지워서는 안 사라진다(실제로 겪었다). */
.free-grid__item:has(.post-list) .post-list {
    border-top: 0;
}

/* ===========================================================================
   116. 전시회 소식 받기 - 입력 칸 쪽의 꾸밈을 전부 걷는다
   크림색 바탕 + 분홍 빛무리 + 두 겹 그림자 + 둥근 모서리까지 겹쳐 있어 폼이 상자에
   담긴 것처럼 보였다. 사진 옆은 그냥 흰 면으로 두고, 칸은 밑줄 하나로만 말한다.
   =========================================================================== */
.free-grid__item > .section.form-widget {
    background: #fff;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

.free-grid__item > .section.form-widget .form-widget__field input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(35, 31, 32, .22);
    border-radius: 0;
    box-shadow: none;
}

.free-grid__item > .section.form-widget .form-widget__field input:focus {
    border-bottom-color: var(--brand-ink, #231f20);
    box-shadow: none;
    outline: none;
}

/* 단추에 깔려 있던 분홍 그림자도 뺀다 - 면이 깨끗해지니 그림자만 떠 보인다. */
.free-grid__item > .section.form-widget .form-widget__submit {
    box-shadow: none;
}

.free-grid__item > .section.form-widget .form-widget__submit:hover {
    box-shadow: none;
}

/* ===========================================================================
   117. 오시는 길 - 사진 띠를 걷고 밝은 면으로
   전시장 사진 위에 먹색 덮개를 씌운 띠는 혼자만 어두워 페이지에서 튀었고, 사진이
   덮개에 눌려 "무슨 사진인지 모를 어두운 무늬"로만 남았다. 띠를 걷어내고 위아래 칸과
   같은 밝은 면으로 둔다 - 지도와 글이 주인공이 되고, 분홍은 포인트로만 남는다.
   =========================================================================== */
.free-grid__item:has(.map-grid)::before { content: none; }

.free-grid__item > .section:has(.map-grid) > h2 {
    color: var(--brand-ink, #231f20);
    text-shadow: none;
}

.free-grid__item > .section:has(.map-grid) > h2::before {
    color: var(--brand-rose, #c25683);
    text-shadow: none;
}

.free-grid__item > .section:has(.map-grid) > h2::after {
    background: linear-gradient(90deg,
        var(--brand-ink, #231f20) 0 52px,
        rgba(35, 31, 32, .12) 52px);
}

/* 지도 - 어둠 위에 띄우던 두꺼운 그림자와 흰 테를 걷고 머리카락 한 올만 남긴다. */
.free-grid__item > .section:has(.map-grid) .map-card__frame {
    border: 1px solid rgba(35, 31, 32, .12);
    box-shadow: none;
    background: #f6f1ec;
}

.free-grid__item > .section:has(.map-grid) .map-card__frame iframe {
    filter: none;
}

/* 지도 위 이름표 - 밝은 면에서는 먹색이 또렷하다. */
.free-grid__item > .section:has(.map-grid) .map-card__pin {
    background: var(--brand-ink, #231f20);
    color: #fff;
    box-shadow: none;
}

/* 글 칸 - 흰 판으로 띄울 까닭이 없어졌다. 면 위에 그대로 올린다. */
.free-grid__item > .section:has(.map-grid) .map-card__body {
    padding: 0 0 0 clamp(4px, 1vw, 14px);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 899px) {
    .free-grid__item > .section:has(.map-grid) .map-card__body {
        padding: 0;
        margin-top: 20px;
    }
}

/* ===========================================================================
   118. 스크롤 - 아주 짧게 한 번
   앞서 초점 흐림 + 크기 + 큰 이동 + 제목·밑줄까지 따로 움직였더니 요란했고, 다 켜지는 데
   1초 넘게 걸려 화면을 기다리게 됐다. 전부 걷고 <올라오며 밝아지는 것> 하나만 남긴다.
   화면에 들어오기 전에 미리 시작해서, 눈에 닿을 때는 이미 거의 다 켜져 있게 한다.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .hm-rv {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        transition: opacity .62s ease-out, transform .68s cubic-bezier(.22, .61, .36, 1);
    }

    .hm-rv.is-in {
        opacity: 1;
        transform: none;
    }

    /* 칸 안의 장들은 아주 살짝만 늦게 - 셋째까지만 어긋나게 두고 그 뒤는 같이 켠다. */
    .hm-rv .card,
    .hm-rv .post-list__item {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        transition: opacity .55s ease-out, transform .6s cubic-bezier(.22, .61, .36, 1);
    }

    .hm-rv.is-in .card,
    .hm-rv.is-in .post-list__item {
        opacity: 1;
        transform: none;
    }

    .hm-rv.is-in .card:nth-child(2),
    .hm-rv.is-in .post-list__item:nth-child(2) { transition-delay: .08s; }
    .hm-rv.is-in .card:nth-child(3),
    .hm-rv.is-in .post-list__item:nth-child(3) { transition-delay: .16s; }
    .hm-rv.is-in .card:nth-child(n + 4),
    .hm-rv.is-in .post-list__item:nth-child(n + 4) { transition-delay: .22s; }

    /* 터울은 "처음 켜질 때"만 쓰는 것이다. 그대로 두면 손을 얹었을 때도 그만큼 기다렸다
       반응해서, 둘째 칸부터 느리게 끌리는 것처럼 보인다(실제로 겪었다). 호버에서는 0 으로. */
    .hm-rv.is-in .card:hover,
    .hm-rv.is-in .post-list__item:hover,
    .hm-rv.is-in .card:hover *,
    .hm-rv.is-in .post-list__item:hover * {
        transition-delay: 0s;
    }
}

/* ===========================================================================
   119. 카드 줄 뒤의 큰 색 띠 - 카드가 띠의 경계에 걸터앉는다
   사선 무늬는 종이결일 뿐 무늬라고 할 것이 못 됐다. 참고한 쪽(handarty COEX)이 쓰는
   방식은 <큰 색 면을 깔고 그 경계에 사진이 걸치게> 하는 것이다. 띠가 카드 중간에서
   끝나므로 카드 윗동강은 색 위에, 아랫동강은 흰 종이 위에 놓인다 - 면과 면 사이에
   물건이 하나 놓인 것처럼 보인다.
   카드 모서리는 한쪽만 크게 굴린다(알약). 네 귀를 다 굴리면 그냥 둥근 상자가 된다.
   =========================================================================== */
.free-grid__item:has(.feature-carousel) { position: relative; }

/* 띠는 카드 칸이 아니라 <격자>에 건다. 칸에 걸면 칸의 바깥 여백·격자 안쪽 여백만큼
   위가 모자라 배너와의 사이에 흰 줄이 남는다(29~34px 떠 있었다). 격자의 맨 위는 곧
   배너 바닥이라 0 에서 시작하면 틈이 생길 수 없다. */
.free-grid:has(.hm-hero) + .free-grid {
    position: relative;
}

.free-grid:has(.hm-hero) + .free-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    /* 카드 줄 중간쯤에서 끝난다 - 카드가 경계에 걸터앉는 자리다. */
    height: clamp(230px, 21vw, 310px);
    z-index: 0;
    /* 고동색 - 배너의 어둠이 한 단 풀리며 이어지는 색이다. 너무 짙으면 배너가 한 번 더
       이어지는 꼴이라 한 단 연하게 둔다. */
    background: #8a6f63;
    pointer-events: none;
}

.free-grid:has(.hm-hero) + .free-grid > .free-grid__item {
    position: relative;
    z-index: 1;
}

.free-grid__item:has(.feature-carousel) > .section {
    position: relative;
    z-index: 1;
}

/* 카드 메뉴는 네 귀를 그대로 둔다 - 사진이 꽉 찬 칸이라 한쪽만 크게 굴리면 사진이
   잘려 나간 것처럼 보인다(실제로 그렇게 보였다). 알약 모서리는 글만 든 칸에만 쓴다. */
.free-grid__item .feature-carousel--overlay .card {
    border-radius: 2px;
}

/* 공지 카드 - 글만 들어 있어 모서리를 굴려도 잘리는 것이 없다. */
.free-grid__item:has(.post-list) .post-list__item {
    border-radius: clamp(20px, 2.4vw, 38px) 2px clamp(20px, 2.4vw, 38px) 2px;
}

/* 지도도 그림이 꽉 찬 칸이라 같은 이유로 그대로 둔다. */
.free-grid__item > .section:has(.map-grid) .map-card__frame {
    border-radius: 2px;
}

@media (max-width: 767px) {
    .free-grid__item:has(.feature-carousel)::before { height: 52%; }
}



/* ---- 오시는 길 - 지도 옆 글 칸에 흰 판 ------------------------------------
   분홍 면이 칸 중간까지 올라와 있어서 글의 윗부분만 색 위에 뜬다. 흰 판을 깔아
   글 전체가 같은 바탕 위에 놓이게 한다 - 지도(인화지)와 글(흰 판) 두 장이 나란히 선다. */
.free-grid__item > .section:has(.map-grid) .map-card__body {
    padding: clamp(22px, 2.2vw, 32px);
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(35, 31, 32, .05), 0 14px 34px rgba(35, 31, 32, .07);
}

@media (max-width: 899px) {
    .free-grid__item > .section:has(.map-grid) .map-card__body {
        padding: clamp(20px, 4vw, 26px);
        margin-top: 16px;
    }
}

/* ===========================================================================
   120. 분홍을 앤틱하게 쓰는 법
   지금 쓰는 분홍(#fbe9f1)은 파란빛이 도는 사탕색이라, 넓게 깔면 값이 싸 보인다.
   앤틱한 분홍은 세 가지가 다르다.
     (1) 따뜻한 쪽으로 - 파랑을 빼고 흙(갈색) 기운을 아주 조금 섞는다. 바랜 장미 쪽이다.
     (2) 채도를 낮춘다 - 넓은 면일수록 더. 색이 "묻어 있는" 정도로만 남긴다.
     (3) 진한 분홍은 넓게 칠하지 않고 <가는 선과 작은 표시>에만 쓴다. 금박을 넓게
         바르지 않고 테두리에만 두르는 것과 같은 이치다.
   =========================================================================== */
:root {
    /* 바랜 장미 - 넓은 면에 쓰는 분홍 */
    --brand-rose-antique: #f1e3e0;
    /* 가는 선·작은 표시에 쓰는 진한 쪽. 기존 장미색보다 붉은 기를 덜고 흙을 더했다. */
    --brand-rose-deep: #a4646a;
}



/* 머리말과 작은 표시는 흙기 있는 장미로 - 자홍빛이 빠지면 단숨에 차분해진다. */
.free-grid__item > .section:has(.map-grid) > h2::before,
.free-grid__item:has(.post-list) .post-list__head h2::before {
    color: var(--brand-rose-deep, #a4646a);
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__link::before {
    color: var(--brand-rose-deep, #a4646a);
    border-bottom-color: rgba(164, 100, 106, .4);
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__date::after {
    border-top-color: var(--brand-rose-deep, #a4646a);
    border-right-color: var(--brand-rose-deep, #a4646a);
}

/* 지도 쪽 작은 표시들도 같은 색으로 모은다. */
.free-grid__item > .section:has(.map-grid) .map-card__body p::before,
.free-grid__item > .section:has(.map-grid) .map-card__go-more {
    color: var(--brand-rose-deep, #a4646a);
    border-color: var(--brand-rose-deep, #a4646a);
}

/* ===========================================================================
   121. 전체를 한 격으로 끌어올린다
   큰 색 도형을 깔아 꾸미는 쪽은 금방 흔해 보인다. 고급스러워 보이는 쪽은 반대다 -
   <덜 그리고, 여백을 더 주고, 선 하나를 정확히 긋는다>. 네 가지만 지킨다.
     (1) 구역 머리는 어디서나 같은 꼴 - 자간 벌린 작은 라틴 + 큰 제목 + 짧은 먹색 토막.
     (2) 그림자를 쓰지 않는다. 떠 보이게 할 일은 머리카락 한 올이면 된다.
     (3) 색은 사진이 낸다. 화면의 뼈대는 먹색과 종이색만 쓴다.
     (4) 여백은 아끼지 않는다.
   =========================================================================== */

/* ---- (1) 구역 머리 ---------------------------------------------------------
   뉴스레터에도 같은 머리말을 올려 셋(NEWS·LOCATION·NEWSLETTER)이 한 식구가 되게 한다. */
.free-grid__item > .section.form-widget > h2::before {
    content: "NEWSLETTER";
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    color: var(--brand-rose-deep, #a4646a);
}

.free-grid__item > .section:has(.map-grid) > h2,
.free-grid__item:has(.post-list) .post-list__head h2,
.free-grid__item > .section.form-widget > h2 {
    font-size: clamp(20px, 1.9vw, 27px);
    font-weight: 800;
    letter-spacing: -.04em;
}

/* ---- (2) 그림자를 걷는다 ---------------------------------------------------- */
.free-grid__item > .section:has(.map-grid) .map-card__body {
    box-shadow: none;
    border: 1px solid rgba(35, 31, 32, .1);
}

.free-grid__item:has(.post-list) .post-list__item:hover {
    box-shadow: none;
    transform: translateY(-3px);
}

.feature-carousel--overlay .card:hover {
    box-shadow: none;
}

/* ---- (3) 뼈대는 먹색과 종이색 -------------------------------------------------
   공지 카드의 종이색을 한 단 더 차분하게. 분홍은 작은 표시에만 남는다. */
.free-grid__item:has(.post-list) .post-list__item { background: #f7f4f1; }

/* ---- (4) 여백 ---------------------------------------------------------------
   칸 안쪽을 넉넉히 - 글이 테두리에 붙어 있으면 아무리 다듬어도 싸 보인다. */
.free-grid__item:has(.post-list) .post-list__link { padding: clamp(26px, 2.6vw, 36px); }

.free-grid__item > .section:has(.map-grid) .map-card__body { padding: clamp(26px, 2.6vw, 38px); }

/* ===========================================================================
   122. 보시는 분을 생각한 치수 - 품격은 결국 "편하게 읽힌다"에서 온다
   이 화면을 보시는 분들은 작은 글씨와 흐린 회색을 반기지 않는다. 멋을 부리느라
   11px 짜리 라틴 글씨에 자간을 잔뜩 벌리고, 날짜를 40% 회색으로 깔아 두면
   "세련됐다"가 아니라 "안 보인다"가 된다. 세 가지를 올린다.
     (1) 글씨 치수  - 본문과 제목을 한 단씩. 작은 라틴 글씨는 자간을 줄이고 키운다.
     (2) 또렷함     - 흐린 회색을 걷는다. 날짜·설명도 읽히는 농도로.
     (3) 누를 자리  - 링크와 단추는 손가락이 닿는 크기로.
   =========================================================================== */

/* ---- (1) 구역 머리말 - 멋보다 읽힘 ------------------------------------------ */
.free-grid__item > .section:has(.map-grid) > h2::before,
.free-grid__item:has(.post-list) .post-list__head h2::before,
.free-grid__item > .section.form-widget > h2::before {
    font-size: 12.5px;
    letter-spacing: .17em;
}

.free-grid__item > .section:has(.map-grid) > h2,
.free-grid__item:has(.post-list) .post-list__head h2,
.free-grid__item > .section.form-widget > h2 {
    font-size: clamp(22px, 2.1vw, 29px);
    letter-spacing: -.035em;
}

/* ---- (2) 공지 카드 ---------------------------------------------------------- */
.free-grid__item:has(.post-list) .post-list__title {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.6;
    color: var(--brand-ink, #231f20);
}

.free-grid__item:has(.post-list) .post-list__link::before {
    font-size: 12.5px;
    letter-spacing: .16em;
    color: rgba(35, 31, 32, .6);
}

.free-grid__item:has(.post-list) .post-list__date {
    font-size: 13px;
    letter-spacing: .06em;
    color: rgba(35, 31, 32, .62);
}

.free-grid__item:has(.post-list) .post-list__date::after {
    width: 9px;
    height: 9px;
    border-top-width: 1.8px;
    border-right-width: 1.8px;
    border-top-color: rgba(35, 31, 32, .55);
    border-right-color: rgba(35, 31, 32, .55);
}

/* 더보기 - 글씨를 키우고 손가락이 닿는 높이를 준다. */
.free-grid__item:has(.post-list) .post-list__more {
    min-height: 44px;
    padding: 0 2px;
    font-size: 14px;
    letter-spacing: 0;
    color: var(--brand-ink, #231f20);
}

.free-grid__item:has(.post-list) .post-list__more::after { font-size: 14px; }

/* ---- (3) 오시는 길 ---------------------------------------------------------- */
.free-grid__item > .section:has(.map-grid) .map-card__body h3 {
    font-size: clamp(19px, 1.7vw, 23px);
}

.free-grid__item > .section:has(.map-grid) .map-card__body p {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(35, 31, 32, .78);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-label {
    font-size: 13px;
    letter-spacing: .1em;
    color: rgba(35, 31, 32, .6);
}

.free-grid__item > .section:has(.map-grid) .map-card__go-btn {
    min-height: 52px;
    font-size: 15px;
}

.free-grid__item > .section:has(.map-grid) .map-card__go-more {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 14.5px;
}

.free-grid__item > .section:has(.map-grid) .map-card__parking { min-height: 64px; }
.free-grid__item > .section:has(.map-grid) .map-card__parking-txt b { font-size: 15.5px; }
.free-grid__item > .section:has(.map-grid) .map-card__parking-txt em { font-size: 13px; }

/* ---- (4) 뉴스레터 ----------------------------------------------------------- */
.free-grid__item > .section.form-widget .form-widget__desc {
    font-size: 16px;
    line-height: 1.75;
}

.free-grid__item > .section.form-widget .form-widget__field label {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: none;
    color: rgba(35, 31, 32, .7);
}

.free-grid__item > .section.form-widget .form-widget__field input {
    font-size: 16px;      /* 16px 밑으로 내리면 아이폰이 입력할 때 화면을 확대한다 */
    padding-top: 14px;
    padding-bottom: 14px;
}

.free-grid__item > .section.form-widget .form-widget__consent span { font-size: 14.5px; }

.free-grid__item > .section.form-widget .form-widget__submit {
    min-height: 56px;
    font-size: 16px;
}

/* ---- 공지 카드 호버 - 분홍으로 들어온다 ------------------------------------
   흰색으로 바래게 두니 무엇이 바뀌었는지 알 수 없었다. 종이색에서 <분홍으로> 물들게
   한다 - 손이 얹힌 칸이 한눈에 보인다. 사탕색이 아니라 바랜 장미 쪽으로 둔다. */
.free-grid__item:has(.post-list) .post-list__item:hover {
    background: #f6e4e6;
    box-shadow: inset 0 0 0 1px rgba(164, 100, 106, .22);
    transform: translateY(-3px);
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__link::before {
    color: var(--brand-rose-deep, #a4646a);
    border-bottom-color: rgba(164, 100, 106, .32);
}

.free-grid__item:has(.post-list) .post-list__item:hover .post-list__date {
    color: rgba(35, 31, 32, .66);
    border-top-color: rgba(164, 100, 106, .26);
}

/* ---- 공지 카드 모서리 - 평소엔 둥글게, 손을 얹으면 펴진다 --------------------
   가만히 있을 때는 한쪽 귀가 크게 굴어 알약처럼 보이고, 손을 얹으면 네 귀가 반듯하게
   펴지면서 분홍이 찬다. 모양이 "풀리는" 동작 자체가 고른 신호가 된다 -
   색만 바뀌는 것보다 눈에 잘 들어오고, 기울어 보이던 문제도 같이 사라진다. */
.free-grid__item:has(.post-list) .post-list__item {
    border-radius: clamp(20px, 2.4vw, 38px) 2px clamp(20px, 2.4vw, 38px) 2px;
    transition: background-color .3s ease, box-shadow .3s ease,
                border-radius .34s cubic-bezier(.22, .61, .36, 1),
                transform .3s cubic-bezier(.2, .7, .3, 1);
}

.free-grid__item:has(.post-list) .post-list__item:hover {
    border-radius: 2px;
}

/* ---- 날짜 줄은 어느 칸에서나 같은 높이에 -------------------------------------
   제목이 두 줄인 칸과 세 줄인 칸이 섞이면 날짜와 그 위 선이 칸마다 다른 높이에 섰다.
   칸(.post-list__item)은 서로 같은 높이로 늘어나는데 그 안의 링크는 안 늘어나서,
   "아래로 밀어붙이기(margin-top:auto)"가 밀 자리를 못 찾은 탓이다. 링크를 칸 높이만큼
   채우면 날짜가 언제나 바닥에 붙는다. */
.free-grid__item:has(.post-list) .post-list__link {
    height: 100%;
}

/* ===========================================================================
   123. 안 쓰는 사진을 받지 않게
   오시는 길 띠를 걷었는데도 그 바탕 사진(1.7MB)을 브라우저가 계속 받아 갔다 -
   ::before 를 content:none 으로 껐어도 background-image 선언이 살아 있으면
   어떤 브라우저는 그림을 미리 받는다(폰에서 5.1MB 중 1.7MB 가 이것이었다).
   선언 자체를 지운다.
   =========================================================================== */
.free-grid__item:has(.map-grid)::before {
    background-image: none;
}