@charset "utf-8";

/**
 * 전역 공통 (사이트별: :root 토큰 · 헤더/푸터 크롬 교체)
 *
 * §1  :root · html/body 기본
 * §2  유틸리티 · 레이아웃 셸
 * §3  헤더 · 로그인 위젯
 * §4  드로어
 * §5  푸터
 * §6  버튼
 * §7  시스템 다이얼로그
 * §8  404
 * §9  반응형 (:root 타이포 px 바닥 · html 스케일)
 * §10 PC hover
 *
 * 컴포넌트 전용: form-fields.css · rich-content.css · auth.css · popup.css · board.css …
 */

/* ============================================
   §1. :root · html/body
   ============================================ */

:root {
    /* Motion */
    --ease: cubic-bezier(0.68, 0.03, 0.33, 1);

    /* Header · layout — Figma header 80 / pad 40 */
    --hdH: 80px;
    --hdIn: 40px;
    --adminBarH: 0px;
    --headerShadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    --in: 144rem;
    --in2: 124rem;
    --inPd: 20px; /* 화면 가장자리 거터 — rem 스케일 타지 않음 */

    /* Radius — 카드·박스 / 큰 이미지 (버튼·모달·폼은 각 영역 토큰) */
    --radius: 2rem;

    /* Color */
    --primary: #162038;
    --primaryLight: #264283;
    --primaryBg: #F5F5F5;
    --txtBlack1: #000000;
    --txtGray1: #444444;
    --txtGray2: #666666;
    --txtGray3: #888888;
    --lightBg: #E6E6E6;
    --borderColor1: #E6E6E6;

    /* Typography — main */
    --mainH1: 6rem;
    --mainH2: 4rem;
    --mainH3: 3.2rem;

    /* Typography — body scale */
    --bigTxt: max(2.8rem, 28px);
    --lgTxt: max(2.4rem, 24px);
    --midTxt: max(2rem, 20px);
    --txt: max(1.8rem, 18px);
    --smTxt: max(1.6rem, 16px);
    --smTxt2: max(1.5rem, 15px);
    --tinyTxt: max(1.4rem, 14px);

    /* Typography — sub page headings */
    --subH1: 6rem;
    --subH2: 4rem;
    --subH3: 3.2rem;

    /* Typography — line height */
    --titLine: 1.4;
    --txtLine: 1.5;

    /* Section rhythm — page-main · *-sect */
    --mainContPd: 20rem; /* 섹션 첫 상단·마지막 하단·인접 섹션 사이 공통 */
    --mainBoxPd: 7rem;   /* tit-box ↔ cont-wrap · box gap */

    /* Section rhythm — sub page */
    --subVisPd: 16rem;
    --subContPd: 18rem;
    --subContM: 9rem;

    /* Site button (CTA — 모달·게시판과 분리) */
    --btnPadY: max(1.4rem, 14px);
    --btnPadX: 4rem;
    --btnRadius: 100px;
    --btnRadiusMd: 8px;
    --btnFontWeight: 600;
    --btnPadYCompact: 0.8rem;
    --btnPadXCompact: 1.4rem;
    --btnFontWeightCompact: 500;
    --btnGap: 1rem;

    /* Dialog (alert · auth-modal) — Figma px 고정 (html rem 스케일과 분리) */
    /* Dialog — Figma alert-box (2111:373) */
    --dialogBtnH: 48px;
    --dialogBtnW: 100%;
    --dialogBtnWDual: 0;
    --dialogBtnGap: 12px;
    --dialogBtnPadY: 0px;
    --dialogBtnPadX: 20px;
    --dialogBtnFontWeight: 500;
    --dialogBtnFontSize: 16px;
    --dialogBtnPrimary: var(--primary);
    --dialogOverlay: rgba(0, 0, 0, 0.5);
    --dialogRadius: 20px;
    --dialogRadiusForm: 20px;
    --dialogShadow: none;
    --dialogW: 300px;
    --dialogWForm: 550px;
    --dialogPadX: 20px;
    --dialogPadY: 28px;
    --dialogPadB: 20px;
    --dialogMsgSize: 18px;
    --dialogContentBtnGap: 28px;

    /* Prose (rich-content.css) */
    --proseLine: var(--txtLine);
    --proseH1: max(2.6rem, 26px);
    --proseH2: max(2.4rem, 24px);
    --proseH3: max(2rem, 20px);
    --proseH4: max(1.8rem, 18px);
    --proseH5: max(1.6rem, 16px);
    --proseH6: max(1.5rem, 15px);
    --proseH1Margin: 4rem 0 1.6rem;
    --proseH2Margin: 5rem 0 2rem;
    --proseH3Margin: 4rem 0 1.5rem;
    --proseH4Margin: 3rem 0 1.2rem;
    --proseH5Margin: 2.4rem 0 1rem;
    --proseH6Margin: 2rem 0 0.8rem;
    --proseParaGap: 2.5rem;
    --proseBlockGap: 3rem;
}

html { font-size: 10px; margin-top: 0 !important; }

body.admin-bar { --adminBarH: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar { --adminBarH: 46px; }
    #wpadminbar { position: fixed !important; }
}

body::-webkit-scrollbar { width: 5px; height: 5px; }
body::-webkit-scrollbar-thumb { height: 5px; background: #A9A9A9; border-radius: 5px; }
svg { overflow: visible; }
html.scroll-none { overflow: hidden; }

/* ============================================
   §2. 유틸리티 · 레이아웃 셸
   ============================================ */

.in { position: relative; width: var(--in); max-width: 100%; padding: 0 var(--inPd); margin: 0 auto; }
.in2 { position: relative; width: var(--in2); max-width: 100%; padding: 0 var(--inPd); margin: 0 auto; }
.page_wrap { overflow: hidden; min-height: 100vh; }
.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ----- Main page section layout (page-main 내부 · Figma: docs/figma-naming.md §9)
 *
 *   <section class="{name}-sect">
 *     <div class="in">
 *       <div class="{name}-tit-box">
 *         <p class="desc">서브카피</p>
 *         <h2 class="tit">섹션 타이틀</h2>
 *         <p class="txt">보조 설명 (선택)</p>
 *       </div>
 *       <div class="cont-wrap">
 *         <div class="{element}-box">…</div>
 *       </div>
 *     </div>
 *   </section>
 *
 * .desc · .txt · .tit → *-tit-box 안에서만 (게시판·폼과 충돌 방지)
 * 섹션별 스타일 → assets/css/{name}.css · @id partial
 */

[class$="-sect"] {
    position: relative;
    padding-top: var(--mainContPd);
    padding-bottom: var(--mainContPd);
}

[class$="-sect"] + [class$="-sect"] { padding-top: var(--mainContPd); }

[class$="-sect"].sect--flush { padding-block: 0; }

[class$="-sect"].sect--tight {
    padding-top: var(--mainBoxPd);
    padding-bottom: var(--mainBoxPd);
}

[class$="-sect"].sect--tight + [class$="-sect"],
[class$="-sect"] + [class$="-sect"].sect--tight { padding-top: var(--mainBoxPd); }

[class$="-tit-box"] {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-bottom: var(--mainBoxPd);
}

[class$="-tit-box"]:last-child { margin-bottom: 0; }

[class$="-tit-box"] .desc {
    font-size: var(--midTxt);
    font-weight: 500;
    line-height: var(--txtLine);
    color: var(--txtGray1);
}

[class$="-tit-box"] .txt {
    font-size: var(--txt);
    font-weight: 400;
    line-height: var(--txtLine);
    color: var(--txtGray1);
}

[class$="-tit-box"] .tit {
    font-size: var(--mainH2);
    font-weight: 700;
    line-height: var(--titLine);
    color: var(--txtBlack1);
}

[class$="-tit-box"] h3.tit { font-size: var(--mainH3); }
[class$="-tit-box"] h4.tit { font-size: var(--subH3); }

[class$="-tit-box"].text-center { align-items: center; text-align: center; }

.cont-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--mainBoxPd);
}

.cont-wrap--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.cont-wrap--grid {
    display: grid;
    gap: var(--mainBoxPd);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}

/* 미리보기 데모 — sample-box 등 시각 확인용 (sect-layout 패널 제거 · common.css §2 참고) */

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }

.sr-only,
.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mo_over { display: block; }
.mo_only,
.mini_only,
.phone_only { display: none; }

@media screen and (max-width: 1000px) {
    .mini_over { display: none; }
    .mini_only { display: block; }
}

@media screen and (max-width: 1240px) {
    .mo_over { display: none; }
    .mo_only { display: block; }
}

@media screen and (max-width: 620px) {
    .phone_only { display: block; }
}

.main { padding-top: calc(var(--hdH) + var(--adminBarH)); }
.page-main { padding-top: 0; }
.page-main .banner-swiper-wrap { margin-top: calc(var(--hdH) + var(--adminBarH)); }

/* ============================================
   §3. 헤더 · 로그인 위젯
   Figma header (2111:317)
   header > header-in (grid 3 · h80 · px40)
     logo (250×50) | nav > ul > li > a (px36 · txt/600) | util-wrap
   ============================================ */

.header {
    position: fixed;
    top: var(--adminBarH);
    width: 100%;
    height: var(--hdH);
    font-size: var(--txt);
    background-color: #fff;
    z-index: 200;
    transform: translateY(0);
    box-shadow: none;
    transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
    will-change: transform;
}

.header.is-hidden { transform: translateY(-100%); pointer-events: none; }
.header.header-down { box-shadow: var(--headerShadow); }

.header .header-in {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: var(--hdH);
    padding: 0 var(--hdIn);
    box-sizing: border-box;
    background: #fff;
}

/* logo — 높이 px 고정(html rem 스케일과 분리) · 너비는 이미지 비율 */
.header .logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    width: max-content;
    max-width: min(320px, 100%);
    height: 50px;
    min-height: 44px;
}

.header .logo a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    height: 100%;
}

.header .logo img,
.header .logo .logo-img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

/* 화이트 로고 — 기본 숨김. 사이트에서 .header.is-logo-white 로 전환 */
.header .logo .logo-img--white {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}

.header.is-logo-white .logo-img--color {
    opacity: 0;
}

.header.is-logo-white .logo-img--white {
    opacity: 1;
}

/* nav — Figma col-2 center */
.header .nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.header .nav .menu,
.header .nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.header .nav .menu > li,
.header .nav ul > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Figma: a px 36 · txt/600 (18 · 600 · --txtLine) · h≈27 */
.header .nav .menu > li > a,
.header .nav ul > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    padding: 0 3.6rem;
    font-size: var(--txt);
    font-weight: 600;
    line-height: var(--txtLine);
    color: var(--txtBlack1);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.header .nav .menu > li > a > span,
.header .nav ul > li > a > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header .nav .menu li.current-menu-item > a,
.header .nav ul li.current-menu-item > a {
    color: var(--primary);
}

/* util-wrap — Figma col-3 end (슬롯 · 사이트별 확장) */
.header .util-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    min-width: 0;
    min-height: 36px;
}

.pc-login-widget { display: flex; align-items: center; }
.login-widget:not(.logged-in) { display: flex; align-items: center; gap: 8px; }
.login-widget.logged-in .user-menu { display: flex; align-items: center; gap: 8px; }

/* ============================================
   §4. 드로어 (nav-mode: inc/drawer-menu.php)
   열기: .drawer-toggle · 닫기: .drawer-close (아이콘 분리 · 사이트 커스텀)
   z-index: header(200) < overlay/menu(210/220) < quick-menu mobile(240)
   ============================================ */

.drawer-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.drawer-toggle__line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--txtBlack1);
    border-radius: 2px;
}

/* 닫기(X) — 토글과 동일 슬롯 크기 · 드로어 안 우측 상단 */
.drawer-close {
    position: absolute;
    top: calc((var(--hdH) - 36px) / 2);
    right: var(--hdIn, 40px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.drawer-close__icon {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
}

.drawer-close__line {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--txtBlack1);
    border-radius: 2px;
}

.drawer-close__line:nth-child(1) {
    transform: translateY(-50%) rotate(45deg);
}

.drawer-close__line:nth-child(2) {
    transform: translateY(-50%) rotate(-45deg);
}

body.nav-mode-auto .header .nav,
body.nav-mode-inline .header .nav,
body.nav-mode-both .header .nav { display: flex; }
body.nav-mode-drawer .header .nav { display: none; }
body.nav-mode-auto .drawer-toggle,
body.nav-mode-drawer .drawer-toggle,
body.nav-mode-both .drawer-toggle { display: none; }
body.nav-mode-inline .drawer-menu,
body.nav-mode-inline .drawer-overlay { display: none !important; }

@media screen and (min-width: 769px) {
    body.nav-mode-auto .drawer-menu,
    body.nav-mode-auto .drawer-overlay { display: none !important; }
}

@media screen and (max-width: 768px) {
    body.nav-mode-auto .header .nav { display: none; }
    body.nav-mode-auto .drawer-toggle,
    body.nav-mode-drawer .drawer-toggle,
    body.nav-mode-both .drawer-toggle { display: flex; }

    /* 드로어만 보일 때: logo | util(login + drawer) 2열 */
    body.nav-mode-auto .header .header-in,
    body.nav-mode-drawer .header .header-in {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.nav-mode-auto .header .util-wrap,
    body.nav-mode-drawer .header .util-wrap {
        grid-column: 2;
    }

    .drawer-close {
        right: var(--inPd);
    }
}

@media screen and (min-width: 769px) {
    body.nav-mode-drawer .drawer-toggle,
    body.nav-mode-both .drawer-toggle { display: flex; }

    /* drawer 전용 모드: PC도 nav 없음 → 2열 */
    body.nav-mode-drawer .header .header-in {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.nav-mode-drawer .header .util-wrap {
        grid-column: 2;
    }
}

.drawer-overlay {
    display: none;
    position: fixed;
    top: var(--adminBarH);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--adminBarH));
    height: calc(100dvh - var(--adminBarH));
    background: rgba(0, 0, 0, 0.4);
    z-index: 210;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.drawer-overlay.is-active { display: block; opacity: 1; pointer-events: auto; }

.drawer-menu {
    display: none;
    position: fixed;
    z-index: 220;
    pointer-events: none;
}

.drawer-menu.is-open { display: block; pointer-events: auto; }

.drawer-menu__panel { display: none; height: 100%; background: #fff; }
.drawer-menu.is-open .drawer-menu__panel--mobile,
.drawer-menu.is-open .drawer-menu__panel--desktop { display: block; }

/* — drawer · mobile — */
@media screen and (max-width: 768px) {
    .drawer-menu {
        top: var(--adminBarH);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--adminBarH));
        height: calc(100dvh - var(--adminBarH));
    }

    .drawer-menu.is-open .drawer-menu__panel--desktop { display: none !important; }

    .drawer-menu__panel--mobile {
        width: 100%;
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .drawer-menu.is-open .drawer-menu__panel--mobile { transform: translateY(0); opacity: 1; }
    .drawer-menu__inner { padding: calc(var(--hdH) + 1.2rem) var(--inPd) 3rem; }

    .drawer-menu-list--mobile { list-style: none; display: flex; flex-direction: column; }

    .drawer-menu-list--mobile li a {
        display: block;
        padding: 1.5rem 0;
        font-size: var(--txt);
        color: var(--txtBlack1);
        font-weight: 500;
        border-bottom: 1px solid var(--borderColor1);
        transition: color 0.2s ease;
    }
}

/* — drawer · desktop — */
@media screen and (min-width: 769px) {
    .drawer-menu.is-open { box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08); }

    .drawer-menu {
        top: var(--adminBarH);
        right: 0;
        left: auto;
        width: min(42rem, 92vw);
        height: calc(100vh - var(--adminBarH));
        height: calc(100dvh - var(--adminBarH));
    }

    .drawer-menu.is-open .drawer-menu__panel--mobile { display: none !important; }

    .drawer-menu__panel--desktop {
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.35s var(--ease);
    }

    .drawer-menu.is-open .drawer-menu__panel--desktop { transform: translateX(0); }
    .drawer-menu__inner { padding: calc(var(--hdH) + 2rem) 3rem 3rem; }

    .drawer-menu-list--desktop { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }

    .drawer-menu-list--desktop li a {
        display: block;
        padding: 1.2rem 0;
        font-size: var(--midTxt);
        color: var(--txtBlack1);
        font-weight: 600;
        border-bottom: 1px solid var(--borderColor1);
        transition: color 0.2s ease;
    }
}

/* ============================================
   §5. 푸터
   ============================================ */

.footer { padding: 4rem 0 6rem; border-top: 1px solid var(--formBorder); }

.footer-data {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--txtGray1);
}

.footer-data a { color: inherit; text-decoration: none; }
.footer-data__company { font-size: 1.6rem; font-weight: 600; color: var(--txtBlack1); }
.footer-data__reach,
.footer-data__address,
.footer-data__copy { margin: 0; }

.footer-data__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
    align-items: center;
}

.footer-data__legal,
.footer-data__sns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    align-items: center;
}

.footer-data__sep { opacity: 0.45; }

/* ============================================
   §6. 버튼 (btn btn--primary + compact/md/block)
   모달 패딩 → §7 · 게시판 CTA → .btn-write / .btn-list
   ============================================ */

.btn,
.dialog__btn,
.auth-btn-submit,
a.auth-btn-submit,
button.auth-btn-submit,
.auth-btn-secondary,
a.auth-btn-secondary,
button.auth-btn-secondary,
.contact-form__submit,
.my-account__submit,
.btn-write,
.btn-list,
.error-404-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--btnRadius);
    background: #fff;
    line-height: 1.2;
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* CTA 크기 — compact · 모달 · 게시판 CTA · 목록 검색 아이콘 제외 */
.btn:not(.dialog__btn):not(.auth-btn-submit):not(.auth-btn-secondary):not(.btn-write):not(.btn-list):not(.btn--compact):not(.archive-search-submit),
.contact-form__submit,
.my-account__submit,
.error-404-btn {
    padding-block: var(--btnPadY);
    padding-inline: var(--btnPadX);
    font-size: var(--smTxt);
    font-weight: var(--btnFontWeight);
}

/* 게시판 CTA — +글쓰기 · 목록으로 · 취소/등록 */
.btn-write,
.btn-list {
    padding-block: var(--btnPadY);
    padding-inline: var(--btnPadX);
    font-size: var(--smTxt);
    font-weight: 500;
    line-height: var(--txtLine);
    border-radius: var(--btnRadius);
}

.btn--compact,
.login-widget .btn {
    padding-block: var(--btnPadYCompact);
    padding-inline: var(--btnPadXCompact);
    font-size: var(--tinyTxt);
    font-weight: var(--btnFontWeightCompact);
}

.btn--md:not(.btn-write):not(.btn-list),
.contact-form__submit,
.my-account__submit,
.board-write-submit-wrap .btn:not(.btn-write):not(.btn-list),
.board-write-denied-actions .btn:not(.btn-write):not(.btn-list),
.board-access-denied .btn:not(.btn-write):not(.btn-list) {
    border-radius: var(--btnRadiusMd);
}

.btn--primary,
.dialog__btn--primary,
.auth-btn-submit,
a.auth-btn-submit,
button.auth-btn-submit,
.contact-form__submit,
.my-account__submit:not(.btn--secondary):not(.my-account__submit--secondary),
.btn-write,
.error-404-btn,
.login-btn,
.logout-btn {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.btn--accent,
.register-btn,
.myinfo-btn {
    border-color: var(--primaryLight);
    background: var(--primaryLight);
    color: #fff;
}

.btn--secondary,
.dialog__btn--secondary,
.auth-btn-secondary,
a.auth-btn-secondary,
button.auth-btn-secondary {
    border-color: var(--borderColor1);
    background: #fff;
    color: var(--txtGray1);
}

.btn-list { border-color: var(--borderColor1); background: #fff; color: var(--txtGray1); }

.btn--danger,
.dialog__btn--danger {
    border-color: var(--formError);
    background: var(--formError);
    color: #fff;
}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"],
.dialog__btn:disabled,
.auth-btn-submit:disabled,
.contact-form__submit:disabled,
.my-account__submit:disabled,
.btn-write[aria-disabled="true"],
.btn-write.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.btn--block,
.auth-form .auth-btn-submit:not(.dialog__btn) { width: 100%; }

.auth-form > .auth-btn-submit:not(.dialog__btn),
.auth-tab-content > .auth-btn-submit:not(.dialog__btn) { margin-top: var(--dialogContentBtnGap); }

.auth-form .form-group:last-of-type,
.auth-tab-content > .form-group:last-of-type { margin-bottom: 0; }

.btn-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--btnGap); }
.btn-group--stretch { justify-content: stretch; }

.btn-group--stretch > .btn,
.btn-group--stretch > .dialog__btn,
.btn-group--stretch > .auth-btn-submit,
.btn-group--stretch > .auth-btn-secondary {
    flex: 1;
    min-width: 0;
    width: auto;
    margin-top: 0;
}

.btn-group--center { justify-content: center; }

/* ============================================
   §7. 시스템 다이얼로그 (main-popup 제외)
   ============================================ */

.dialog {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--dialogOverlay);
}

.dialog.is-open { display: flex; animation: dialog-fade-in 0.22s ease-out; }

@keyframes dialog-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog__panel {
    position: relative;
    box-sizing: border-box;
    width: min(var(--dialogW), 100%);
    max-width: var(--dialogW);
    padding: var(--dialogPadY) var(--dialogPadX) var(--dialogPadB, var(--dialogPadY));
    background: var(--dialog-panel-bg, #fff);
    border-radius: var(--dialog-panel-radius, var(--dialogRadius));
    box-shadow: var(--dialogShadow);
    text-align: center;
    animation: dialog-panel-in 0.24s ease-out;
}

.dialog__panel:focus {
    outline: none;
}

.dialog__panel--form {
    width: min(var(--dialogWForm), 100%);
    max-width: var(--dialogWForm);
    text-align: left;
}

@keyframes dialog-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dialog__close {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--txtGray2);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.dialog__close svg { width: 1.8rem; height: 1.8rem; }

/* 시스템 알럿(sm) — 닫기 버튼 없음. 입력형(form) 모달만 유지 */
.dialog__panel--sm .dialog__close {
    display: none !important;
}

.dialog__head { margin-bottom: 0; }
.dialog__head:has(+ .dialog__body:not([hidden])) .dialog__message { margin-bottom: 0; }

.dialog__title {
    font-size: var(--bigTxt);
    font-weight: 700;
    line-height: var(--titLine);
    color: var(--txtBlack1);
    margin-bottom: 1rem;
}

/*
 * alert-box(sm)는 Figma상 message only.
 * title은 aria-labelledby용으로만 두고 화면에서는 숨김
 * (예전엔 weight 400 작은 타이틀이 위에 가늘게 떠 “잔상”처럼 보였음)
 */
.dialog__panel--sm .dialog__title:not([hidden]):not(:empty) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.dialog__title:empty,
.dialog__title[hidden] {
    display: none !important;
    margin: 0;
}

.dialog__message {
    font-size: var(--smTxt);
    font-weight: 500;
    line-height: var(--txtLine);
    color: var(--txtGray1);
    margin-bottom: 0;
    white-space: pre-line;
}

/* Figma alert-box txt / 400 */
.dialog__panel--sm .dialog__message {
    font-size: var(--dialogMsgSize);
    font-weight: 400;
    line-height: var(--txtLine);
    color: var(--txtBlack1);
}

.dialog__message:empty,
.dialog__message[hidden] {
    display: none !important;
    margin: 0;
}

/* 간격은 btn-wrap padding-top 만 (Figma pt 30) — message margin 이중 적용 금지 */
.dialog__head:has(+ .dialog__actions) .dialog__message:not(:empty) { margin-bottom: 0; }
.dialog__head:has(+ .dialog__actions) .dialog__title:last-child { margin-bottom: 0; }

.dialog--error .dialog__panel--sm .dialog__message,
.dialog--success .dialog__panel--sm .dialog__message {
    color: var(--txtBlack1);
}

.dialog__body { margin-bottom: 2rem; text-align: left; }
.dialog__body[hidden] { display: none !important; }

.dialog__form-row { display: flex; gap: 1rem; margin-bottom: 1rem; }

.dialog__form-row input[type="text"],
.dialog__form-row input[type="password"] {
    flex: 1;
    height: var(--formInpH);
    padding: 0 1.6rem;
    border: 1px solid var(--formBorder);
    border-radius: var(--formRadius);
    font-size: var(--txt);
    color: var(--txtBlack1);
    background: #fff;
}

.dialog__form-row input:focus { outline: none; border-color: var(--primary); }

.dialog__inline-error { display: none; margin-bottom: 1.5rem; font-size: var(--smTxt); color: var(--formError); text-align: center; }
.dialog__inline-error.is-visible { display: block; }

.dialog__body-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: var(--smTxt);
    color: var(--txtGray1);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.dialog__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Figma btn-wrap — pt 28 · gap 12 */
.dialog__panel--sm .dialog__actions,
.dialog__panel--sm .btn-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--dialogBtnGap);
    padding-top: var(--dialogContentBtnGap);
    margin: 0;
}
.dialog__panel--form .dialog__actions { justify-content: stretch; }

.dialog__actions--form,
.auth-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
    justify-content: stretch;
    margin-top: var(--dialogContentBtnGap);
}

.dialog__actions--form .btn,
.dialog__actions--form .dialog__btn,
.dialog__actions--form .auth-btn-submit,
.dialog__actions--form .auth-btn-secondary,
.auth-form-actions .btn,
.auth-form-actions .dialog__btn,
.auth-form-actions .auth-btn-submit,
.auth-form-actions .auth-btn-secondary {
    flex: 1;
    min-width: 0;
    width: auto;
    margin-top: 0;
}

.auth-form-actions .auth-btn-submit,
.auth-form-actions .auth-btn-secondary { width: auto; margin-top: 0; }

.dialog__panel--form.auth-modal,
.dialog-demo__panel.auth-modal {
    padding: 48px 64px;
    border-radius: var(--dialogRadiusForm);
    overflow: visible;
    text-align: left;
}

.dialog__panel--sm .dialog__btn {
    box-sizing: border-box;
    flex: 1 0 0;
    width: auto;
    min-width: 0;
    height: var(--dialogBtnH);
    min-height: var(--dialogBtnH);
    padding-block: var(--dialogBtnPadY);
    padding-inline: var(--dialogBtnPadX);
    border: 0;
    border-radius: 100px;
    font-size: var(--dialogBtnFontSize);
    font-weight: var(--dialogBtnFontWeight);
    line-height: var(--txtLine);
}

.dialog__panel--sm .dialog__actions .dialog__btn:only-child,
.dialog__panel--sm .btn-wrap--oneBtn .dialog__btn:only-child {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.dialog__panel--sm .btn-wrap--twoBtn .dialog__btn {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
}

.dialog__panel--sm .dialog__btn--primary,
.dialog__panel--sm .dialog__btn--danger {
    border: 0;
    background: var(--dialog-btn-primary-bg, var(--dialogBtnPrimary));
    color: var(--dialog-btn-primary-color, #fff);
}

.dialog__panel--sm .dialog__btn--secondary {
    border: 0;
    background: var(--dialog-btn-secondary-bg, rgba(0, 0, 0, 0.15));
    color: var(--dialog-btn-secondary-color, var(--txtBlack1));
}

/* 브라우저 기본 파란 focus ring 제거 — 디자인 보더로만 표시 */
.dialog__btn:focus {
    outline: none;
}

.dialog__btn:focus-visible {
    outline: 2px solid var(--txtBlack1);
    outline-offset: 2px;
}

.dialog__panel--sm .dialog__btn--secondary:focus-visible {
    border-color: var(--txtBlack1);
}

.dialog__panel--sm .dialog__btn--primary:focus-visible,
.dialog__panel--sm .dialog__btn--danger:focus-visible {
    outline-color: var(--dialog-btn-primary-bg, var(--dialogBtnPrimary));
}

.dialog__btn,
.dialog .auth-btn-submit,
.dialog .auth-btn-secondary,
.dialog-demo__panel .auth-btn-submit,
.dialog-demo__panel .auth-btn-secondary {
    font-size: var(--smTxt);
    font-weight: var(--dialogBtnFontWeight);
}

.dialog__panel--form .dialog__btn,
.dialog .auth-btn-submit,
.dialog .auth-btn-secondary,
.dialog-demo__panel .auth-btn-submit,
.dialog-demo__panel .auth-btn-secondary {
    padding-block: max(1.4rem, 14px);
    padding-inline: var(--dialogBtnPadX);
    font-size: var(--smTxt);
    font-weight: var(--dialogBtnFontWeight);
}

/* ============================================
   §8. 404
   ============================================ */

.error-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15rem 0;
    gap: 2rem;
}

.error-404-number { font-size: 16rem; font-weight: 900; color: var(--borderColor1); line-height: 1; }
.error-404-title { font-size: var(--subH2); font-weight: 700; color: var(--txtBlack1); }
.error-404-desc { font-size: var(--txt); color: var(--txtGray2); }
.error-404-btn { margin-top: 2rem; }

/* ============================================
   §9. 반응형 — html 스케일 · :root 타이포(px 바닥)
   ============================================ */

@media screen and (max-width: 1640px) {
    html { font-size: 7.5px !important; }

    :root {
        /* Typography — main */
        --mainH1: 54px;
        --mainH2: 36px;
        --mainH3: 29px;

        /* Typography — sub page headings */
        --subH1: 54px;
        --subH2: 36px;
        --subH3: 29px;

        /* Typography — body scale */
        --bigTxt: 21px;
        --lgTxt: 20px;
        --midTxt: 18px;
        --txt: 17px;
        --smTxt: 15px;
        --smTxt2: 14px;
        --tinyTxt: 13px;

        /* Prose (rich-content.css) */
        --proseH1: 23px;
        --proseH2: 21px;
        --proseH3: 18px;
        --proseH4: 16px;
        --proseH5: 15px;
        --proseH6: 13px;
    }
}

@media screen and (max-width: 1240px) {
    html { font-size: 7px !important; }

    :root {
        /* Header · layout */
        --hdH: 70px;
        --hdIn: var(--inPd);

        /* Typography — main */
        --mainH1: 50px;
        --mainH2: 33px;
        --mainH3: 27px;

        /* Typography — sub page headings */
        --subH1: 50px;
        --subH2: 33px;
        --subH3: 27px;

        /* Typography — body scale */
        --bigTxt: 20px;
        --lgTxt: 19px;
        --midTxt: 17px;
        --txt: 16px;
        --smTxt: 14px;
        --smTxt2: 13px;
        --tinyTxt: 12px;

        /* Prose (rich-content.css) */
        --proseH1: 22px;
        --proseH2: 20px;
        --proseH3: 17px;
        --proseH4: 15px;
        --proseH5: 14px;
        --proseH6: 12px;
    }
}

@media screen and (max-width: 768px) {
    html { font-size: 7px !important; }

    :root {
        /* Header · layout */
        --hdH: 60px;
        --hdIn: var(--inPd);
        /* inPd·radius는 모바일에서도 명시값 없이 rem 스케일 그대로 사용 */

        /* Typography — main */
        --mainH1: 34px;
        --mainH2: 26px;
        --mainH3: 20px;

        /* Typography — sub page headings */
        --subH1: 34px;
        --subH2: 26px;
        --subH3: 20px;

        /* Typography — body scale */
        --bigTxt: 18px;
        --lgTxt: 17px;
        --midTxt: 16px;
        --txt: 16px;
        --smTxt: 14px;
        --smTxt2: 13px;
        --tinyTxt: 12px;

        /* Section rhythm — page-main · *-sect */
        --mainContPd: 80px;
        --mainBoxPd: 30px;

        /* Section rhythm — sub page */
        --subVisPd: 100px;
        --subContPd: 80px;
        --subContM: 30px;

        /* Site button */
        --btnPadY: max(1.2rem, 12px);
        --btnPadX: 3.6rem;

        /* Dialog */
        --dialogContentBtnGap: 28px;

        /* Prose (rich-content.css) */
        --proseH1: 20px;
        --proseH2: 18px;
        --proseH3: 16px;
        --proseH4: 15px;
        --proseH5: 14px;
        --proseH6: 13px;
        --proseParaGap: 1.8rem;
        --proseBlockGap: 2.4rem;
    }

    .header .header-in { padding: 0 var(--inPd); }

    .mo-col { flex-direction: column; }
    .mo-center { justify-content: center; align-items: center; }
    .mo-start { justify-content: flex-start; align-items: flex-start; }
    .mo-full { width: 100%; }
    .mo-text-center { text-align: center; }
    .mo-hidden { display: none !important; }

    .footer { padding: 3rem 0 5rem; }
    .footer-data { font-size: var(--smTxt); }
    .footer-data__company { font-size: var(--txt); }

    .footer-data__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* 게시판 CTA — +글쓰기 · 목록으로 · 취소/등록 */
    .btn-write,
    .btn-list {
        padding-block: max(1rem, 10px);
        padding-inline: 4rem;
    }

    /* 시스템 모달 — sm 패널 (Figma pad 유지 · 레이아웃만) */
    .dialog__panel--sm {
        padding: var(--dialogPadY) var(--dialogPadX) var(--dialogPadB, var(--dialogPadY));
    }

    /* 입력형 모달 — form 패널 (auth-modal 제외 셸) */
    .dialog__panel--form:not(.auth-modal) {
        padding: 24px 20px;
    }

    .dialog__panel--form .dialog__form-row input[type="text"],
    .dialog__panel--form .dialog__form-row input[type="password"] {
        font-size: 14px;
    }
}

@media screen and (max-width: 1240px) {
    .header .logo {
        height: 48px;
        max-width: min(280px, 100%);
    }
}

@media screen and (max-width: 768px) {
    .header .logo {
        height: 44px;
        min-height: 44px;
        max-width: min(220px, 55vw);
    }

    .header .util-wrap {
        gap: 8px;
    }

    .header .pc-login-widget .btn--compact {
        padding-inline: 1.4rem;
        padding-block: 0.9rem;
    }
}


/* ============================================
   §10. PC hover (1241px+, hover 가능 기기)
   ============================================ */

@media screen and (min-width: 1241px) and (hover: hover) {
    .header .nav .menu > li > a:hover { color: var(--primary); }

    .drawer-menu-list--mobile li a:hover,
    .drawer-menu-list--desktop li a:hover { color: var(--primary); }

    .footer-data a:hover { color: var(--primary); }

    .btn--primary:hover,
    .dialog__btn--primary:hover,
    .auth-btn-submit:hover:not(:disabled),
    a.auth-btn-submit:hover,
    .contact-form__submit:hover:not(:disabled),
    .my-account__submit:not(.btn--secondary):not(.my-account__submit--secondary):hover:not(:disabled),
    .btn-write:hover,
    .error-404-btn:hover,
    .login-btn:hover,
    .logout-btn:hover {
        background: color-mix(in srgb, var(--primary) 85%, black);
        border-color: color-mix(in srgb, var(--primary) 85%, black);
        color: #fff;
    }

    .btn--accent:hover,
    .register-btn:hover,
    .myinfo-btn:hover {
        background: color-mix(in srgb, var(--primaryLight) 75%, var(--primary));
        border-color: color-mix(in srgb, var(--primaryLight) 75%, var(--primary));
        color: #fff;
    }

    .btn--secondary:hover,
    .dialog__btn--secondary:hover,
    .auth-btn-secondary:hover,
    a.auth-btn-secondary:hover,
    button.auth-btn-secondary:hover {
        border-color: var(--txtGray1);
        color: var(--txtBlack1);
    }

    .btn-list:hover {
        border-color: var(--primary);
        background: var(--primary);
        color: #fff;
    }

    .btn--danger:hover,
    .dialog__btn--danger:hover {
        background: color-mix(in srgb, var(--formError) 85%, black);
        border-color: color-mix(in srgb, var(--formError) 85%, black);
        color: #fff;
    }

    .dialog__close:hover { color: var(--txtBlack1); background: var(--lightBg); }
    .dialog__body-link:hover { color: var(--primary); }
}