@charset "utf-8";
/* ==========================================================================
    common.css — 리셋 + 디자인 토큰 + 기본 타이포/폼 + 유틸리티
    ---------------------------------------------------------------------------
    [브레이크포인트 표준 — 전 파일 공통, 이 4개 외 사용 금지]
        @media (width <= 1280px)  GNB → 모바일 드로어 전환 (common.js 동기화)
        @media (width <= 1024px)  태블릿 (그리드 축소)
        @media (width <=  768px)  태블릿 세로 (테이블→카드, 슬라이드 모바일 이미지)
        @media (width <=  560px)  폰
    [토큰] --point 는 _header.php 에서 관리자 설정값으로 주입됨(사이트정보>브랜드컬러).
        모든 브랜드 파생색은 color-mix() 로 --point 에서 계산 — 직접 색상 하드코딩 금지.
   ========================================================================== */

/* ==========================================================================
    Reset
   ========================================================================== */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;}
input, textarea, select, button, fieldset, img {border: 0;}
em, i, cite, dfn{font-style: normal;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; line-height: normal;}
img {max-width: 100%; height: auto; vertical-align: middle;}
legend, caption {visibility: hidden; overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0;}
blockquote, q {quotes: none;}
blockquote::before, blockquote::after,
q::before, q::after {content: none;}
a, a:hover{color: inherit;}
a:link, a:visited, a:hover, a:active {text-decoration: none;}
ol, ul, li {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
label, select, input, button, textarea {font-family: inherit; font-size: inherit; color: inherit;}
input[type="checkbox"], input[type="radio"], label{cursor: pointer;}
input[type="checkbox"], input[type="radio"]{vertical-align: middle;}
textarea {overflow-y: auto;}
button {background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; white-space: nowrap;}
iframe, video {max-width: 100%; display: block;}

/* ==========================================================================
    Design Tokens
   ========================================================================== */
:root {
    /* 브랜드 — --point 는 _header.php 인라인 주입 (fallback 은 주입 실패 대비) */
    --point-strong: color-mix(in srgb, var(--point, #554023) 85%, #000);
    --point-soft:   color-mix(in srgb, var(--point, #554023) 12%, #fff);
    --point-faint:  color-mix(in srgb, var(--point, #554023) 6%, #fff);
    --point-border: color-mix(in srgb, var(--point, #554023) 30%, #fff);
    --point-deco: #c99846;
    --point-text:   #fff; /* --point 배경 위 텍스트 */

    /* 뉴트럴 */
    --ink: #222;      /* 본문 */
    --ink-2: #374151;    /* 보조 본문 */
    --ink-3: #6b7280;    /* 캡션/메타 */
    --ink-4: #9ca3af;    /* 플레이스홀더/비활성 */
    --ink-5: #aaa;    /* 플레이스홀더/비활성 */
    --line: #e5e7eb;     /* 기본 보더 */
    --line-soft: #f3f4f6;/* 옅은 구분선 */
    --bg: #fff;
    --bg-soft: #f9fafb;  /* 섹션/카드 배경 */

    /* 상태 */
    --danger: #dc2626;
    --success: #16a34a;

    /* 형태·엘리베이션 (모던 미니멀 — 절제) */
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-1: 0 1px 3px rgb(0 0 0 / .06);
    --shadow-2: 0 8px 24px rgb(0 0 0 / .10);

    /* 유동 타이포 스케일 */
    --fs-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --fs-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
    --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --fs-sm: .875rem;
    --fs-xs: .8125rem;

    /* 유동 간격 */
    --space-section: clamp(56px, 4vw + 32px, 120px);
    --space-block:   clamp(24px, 2vw + 12px, 48px);

    /* 레이아웃 */
    --wrap-max: 1280px;
    --wrap-pad: clamp(16px, 4vw, 24px);
    --header-h: 80px;
    --header-h-m: 60px;

    /* 폼 */
    --input-height: 48px;
    --input-bg: #F4F6F8;
    --form-fontsize: 1rem;
    --form-placeholder: var(--ink-4);

    /* 작업 */
    --view-height: calc(var(--vh, 1vh) * 100);
    --header-height: 80px;
    --white: #fff;
    --basic-trans: all 0.3s ease;
    --main-gap: 100px;
    --sub-gap: 80px;

    @media (width <= 1280px) {
        --header-height: 70px;
        --main-gap: 60px;
        --sub-gap: 48px;
    }
    @media (width <= 560px) {
        --header-height: 64px;
        --main-gap: 48px;
        --sub-gap: 36px;
    }
}
.obj-cover {position: relative; width: 100%; height: 100%;}
.obj-con {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

/* ==========================================================================
    Animation Keyframe
   ========================================================================== */
@keyframes scrollFadeDown {
    0% {transform: translateY(0px); opacity: 0;}
    100% {transform: translateY(5px); opacity: 0.8;}
}

@keyframes textFadeDown {
    0% {transform: translateY(-15px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

@keyframes imgZoom {
    0% {transform: scale(1.1);}
    100% {transform: scale(1);}
}

@keyframes imgRadius {
    0% {border-radius: 100px;}
    100% {border-radius: 8px;}
}

/* ==========================================================================
    Base Typography
   ========================================================================== */
/* overflow-x: clip — 화면 밖으로 슬라이드하는 드로어/팝업이 가로 스크롤을 만들지 않게.
   (hidden 과 달리 스크롤 컨테이너를 만들지 않아 position:sticky/fixed 가 정상 동작) */
html {min-width: 320px; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px;}
html:lang(ko){word-break: keep-all;}
body {font-family: 'Wanted Sans Variable', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; line-height: 1.6; color: var(--ink); background-color: var(--bg); text-rendering: optimizeLegibility; -ms-overflow-style: none;}
body::-webkit-scrollbar {display: none;}
i::before {margin: 0 !important;}
::selection {background: var(--point, #554023); color: var(--point-text);}
:focus-visible {outline: 2px solid var(--point, #554023); outline-offset: 2px;}
a[href^="tel"] {color: currentColor; text-decoration: none; pointer-events: none; /* 클릭도 막고 싶다면 */}

/* ==========================================================================
    Form Base (요소 셀렉터 — 프론트 전역 기본값)
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"]{
    width: 100%; height: var(--input-height); padding: 0 14px;
    font-size: var(--form-fontsize); color: var(--ink);
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
    outline: none; vertical-align: middle; appearance: none; -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
select{
    width: 100%; height: var(--input-height); padding: 0 36px 0 14px;
    font-size: var(--form-fontsize); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 14px) center;
    vertical-align: middle; appearance: none; -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
textarea{
    width: 100%; padding: 12px 14px; resize: vertical;
    font-size: var(--form-fontsize); color: var(--ink); line-height: 1.6;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
    outline: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 1000px var(--bg) inset;}
input::placeholder,
textarea::placeholder{font-weight: 300; color: var(--form-placeholder);}
input:disabled, select:disabled, textarea:disabled{background-color: var(--bg-soft); color: var(--ink-4); cursor: not-allowed;}
input[type=file]{border: 0; background: none; height: auto;}

/* ==========================================================================
    Utility
   ========================================================================== */
/* Screen Reader Only (.blind 는 뷰에서 쓰는 동의어) */
.sr-only, .blind {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
/* scr-none : 모바일 메뉴 열림 시 body 스크롤 잠금 (common.js) */
.scr-none {overflow-y: hidden; scrollbar-width: none;}
.scr-none::-webkit-scrollbar {display: none;}
[hidden] {display: none;}
.clearfix::after{content: ''; display: block; clear: both;}
.pre-box{white-space: pre-wrap; word-break: break-all;}
.fit-img{width: 100%; height: 100%; object-fit: cover;}
/* 유튜브 등 16:9 반응형 임베드 (에디터 콘텐츠용) */
.video-responsive{position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden;}
.video-responsive iframe{position: absolute; left: 0; top: 0; height: 100%; width: 100%;}

:where(.text_c){text-align: center;}
:where(.text_l){text-align: left;}
:where(.text_r){text-align: right;}

/* 반응형 표시/숨김 — 표준 브레이크포인트 4단계 */
.p-dsp, .tl-dsp, .m-dsp, .show-mobile{display: none;}
@media (width <= 1280px) {
    .p-dsp{display: block;}
    .p-dspn{display: none;}
}
@media (width <= 1024px) {
    .tl-dsp{display: block;}
    .tl-dspn{display: none;}
}
@media (width <= 768px) {
    .m-dsp{display: block;}
    .m-dspn{display: none;}
    .show-mobile{display: block;}
}

/* 여백 유틸 — 태블릿 이하 자동 축소 */
:where(.mat0){margin-top: 0;}
:where(.mab0){margin-bottom: 0;}
:where(.mab10){margin-bottom: 10px;}
:where(.mat20){margin-top: clamp(10px, 1.5vw, 20px);}
:where(.mab20){margin-bottom: clamp(10px, 1.5vw, 20px);}
:where(.mat30){margin-top: clamp(15px, 2.3vw, 30px);}
:where(.mab30){margin-bottom: clamp(15px, 2.3vw, 30px);}
:where(.mat40){margin-top: clamp(20px, 3vw, 40px);}
:where(.mab40){margin-bottom: clamp(20px, 3vw, 40px);}
:where(.mat60){margin-top: clamp(30px, 4.6vw, 60px);}
:where(.mab60){margin-bottom: clamp(30px, 4.6vw, 60px);}
:where(.mat80){margin-top: clamp(40px, 6vw, 80px);}
:where(.mab80){margin-bottom: clamp(40px, 6vw, 80px);}