/* ==========================================================================
   명원타올 (MYUNGWON TOWEL) 공식 홈페이지 스타일시트
   - 로고 컬러 기반 골드 / 딥그레이 / 화이트 팔레트
   - Pretendard 폰트 사용
   - 반응형 + 스크롤 애니메이션 지원
   ========================================================================== */

:root {
    /* 로고에서 추출한 브랜드 컬러 */
    --gold: #a6986e;
    --gold-dark: #8c7f58;
    --gold-light: #d9cfb0;
    --gold-soft: #f2efe6;

    --dark: #434244;
    --dark-2: #2b2a2c;
    --dark-3: #1c1b1c;

    --white: #ffffff;
    --off-white: #f8f6f2;

    --text: #333333;
    --text-light: #767676;
    --border: #e7e3da;

    --shadow-sm: 0 2px 12px rgba(43, 42, 44, 0.06);
    --shadow-md: 0 10px 30px rgba(43, 42, 44, 0.10);
    --shadow-gold: 0 10px 24px rgba(166, 152, 110, 0.25);

    --header-h: 84px;
    --header-h-scrolled: 64px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
        'Malgun Gothic', system-ui, Roboto, sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 콘텐츠가 짧아도 footer가 항상 뷰포트 맨 아래에 붙도록 하는 sticky-footer 구조 */
#main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.site-footer { flex-shrink: 0; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 17px; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--dark);
    color: var(--white);
    padding: 10px 16px;
    z-index: 9999;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ==========================================================================
   이미지 플레이스홀더 (실제 사진 등록 전 레이아웃 유지용)
   ========================================================================== */

.ph {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    background-size: cover;
    background-position: center;
    display: block;
}
.ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease);
}
.ph img.img-error { display: none; }
.ph::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    color: var(--dark-2);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    background: linear-gradient(160deg, var(--gold-soft), var(--gold-light));
}
.ph.has-error::after { display: flex; }

/* ==========================================================================
   헤더
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0);
    transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), height 0.35s var(--ease);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    height: 100%;
}
.site-header .logo img { height: 42px; }
.site-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

/* 투명(히어로) 헤더에서는 흰 텍스트 로고, 스크롤/내부페이지(흰 배경) 헤더에서는 기본 로고 */
.site-header .logo-light { display: none; }
.site-header.has-hero:not(.scrolled) .logo-dark { display: none; }
.site-header.has-hero:not(.scrolled) .logo-light { display: block; }

.gnb { display: flex; gap: 8px; }
.gnb a {
    display: inline-block;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.01em;
    position: relative;
    transition: color 0.25s;
}
.gnb a::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 4px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}
.gnb a:hover::after,
.gnb a.active::after { transform: scaleX(1); }

.header-cta {
    display: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 32px;
    background: none;
    border: 0;
    padding: 4px;
}
.hamburger span {
    display: block;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: background 0.3s;
}

/* 스크롤 시 헤더 배경 흰색으로 전환 */
.site-header.scrolled,
.site-header.solid {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow-sm);
    height: var(--header-h-scrolled);
    backdrop-filter: blur(6px);
}
.site-header.scrolled .gnb a,
.site-header.solid .gnb a { color: var(--dark); }
.site-header.scrolled .hamburger span,
.site-header.solid .hamburger span { background: var(--dark); }

/* 내부 페이지(비 히어로)는 항상 solid 헤더 사용 */

@media (max-width: 980px) {
    .gnb { display: none; }
    .hamburger { display: flex; }

    .gnb.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--header-h-scrolled);
        left: 0; right: 0;
        background: var(--white);
        padding: 12px 24px 24px;
        box-shadow: var(--shadow-md);
        gap: 0;
    }
    .gnb.mobile-open a {
        color: var(--dark);
        padding: 14px 8px;
        border-bottom: 1px solid var(--border);
    }
    .gnb.mobile-open a::after { display: none; }
}

/* ==========================================================================
   히어로
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--dark-3) 0%, var(--dark-2) 55%, var(--dark) 100%);
    overflow: hidden;
    color: var(--white);
    text-align: center;
}
.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0;
}
.hero-slide {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.15s ease, transform 7s ease;
}
.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(20,19,20,0.36) 0%, rgba(20,19,20,0.56) 48%, rgba(20,19,20,0.78) 100%), linear-gradient(180deg, rgba(20,19,20,0.32) 0%, rgba(20,19,20,0.66) 74%, rgba(20,19,20,0.9) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    padding: 0 24px;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--gold-light);
    margin-bottom: 22px;
    opacity: 0;
    transform: translateY(16px);
}
.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--gold);
}
.hero h1 {
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.28;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
}
.hero h1 .accent { color: var(--gold-light); }
.hero p {
    font-size: clamp(17px, 1.6vw, 20.5px);
    color: rgba(255,255,255,0.82);
    max-width: 560px;
    margin: 0 auto 36px;
    opacity: 0;
    transform: translateY(20px);
}
.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
}

.hero.play .hero-eyebrow,
.hero.play h1,
.hero.play p,
.hero.play .hero-actions {
    animation: heroUp 0.9s var(--ease) forwards;
}
.hero.play .hero-eyebrow { animation-delay: 0.1s; }
.hero.play h1 { animation-delay: 0.28s; }
.hero.play p { animation-delay: 0.46s; }
.hero.play .hero-actions { animation-delay: 0.62s; }

@keyframes heroUp {
    to { opacity: 1; transform: translateY(0); }
}

.hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    z-index: 2;
}
.hero-scroll::before {
    content: '';
    position: absolute;
    top: 6px; left: 50%;
    width: 4px; height: 4px;
    margin-left: -2px;
    background: var(--gold-light);
    border-radius: 50%;
    animation: scrollDot 1.6s ease-in-out infinite;
}
.hero-controls {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 78px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
}
.hero-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 50%;
    background: rgba(20,19,20,.28);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background .25s, border-color .25s, transform .25s;
}
.hero-arrow:hover,
.hero-arrow:focus-visible { background: var(--gold); border-color: var(--gold); transform: scale(1.06); }
.hero-dots { display: flex; align-items: center; gap: 9px; }
.hero-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255,255,255,.48);
    cursor: pointer;
    transition: width .3s, background .3s;
}
.hero-dots button.active { width: 30px; background: var(--gold-light); }
@keyframes scrollDot {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(12px); opacity: 0; }
    100% { opacity: 0; }
}

/* ==========================================================================
   버튼
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: all 0.28s var(--ease);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.btn-gold {
    background: var(--gold);
    color: var(--white);
    box-shadow: var(--shadow-gold);
}
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-2px); }

.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.55);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

.btn-dark {
    background: var(--dark);
    color: var(--white);
}
.btn-dark:hover { background: var(--dark-3); transform: translateY(-2px); }

.btn-line {
    background: transparent;
    border-color: var(--dark);
    color: var(--dark);
}
.btn-line:hover { background: var(--dark); color: var(--white); }

.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 15px; }

/* ==========================================================================
   섹션 공통
   ========================================================================== */

section { padding: 96px 0; }
.section-tight { padding: 70px 0; }
.bg-off { background: var(--off-white); }
.bg-dark { background: var(--dark-2); color: var(--white); }

.section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}
.section-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold-dark);
    margin-bottom: 12px;
    text-transform: uppercase;
}
.bg-dark .section-eyebrow { color: var(--gold-light); }
.section-head h2 {
    font-size: clamp(27.5px, 3vw, 39px);
    font-weight: 800;
    color: var(--dark-2);
    margin-bottom: 14px;
}
.bg-dark .section-head h2 { color: var(--white); }
.section-head p { color: var(--text-light); font-size: 17.5px; }
.bg-dark .section-head p { color: rgba(255,255,255,0.68); }

.section-head.align-left {
    text-align: left;
    margin: 0 0 44px;
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* ==========================================================================
   회사 핵심 소개 카드 (index)
   ========================================================================== */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
    border-top: 1px solid rgba(168,150,106,.35);
    border-bottom: 1px solid rgba(168,150,106,.35);
}
.feature-card {
    position: relative;
    background: rgba(255,255,255,.72);
    border-right: 1px solid var(--border);
    padding: 46px 42px 42px;
    text-align: left;
    overflow: hidden;
    transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.feature-card:first-child { border-left: 1px solid var(--border); }
.feature-card::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.feature-card:hover {
    transform: translateY(-7px);
    background: var(--white);
    box-shadow: 0 20px 45px rgba(32,29,22,.11);
    z-index: 2;
}
.feature-card:hover::after { transform:scaleX(1); }
.feature-num { position:absolute; right:28px; top:25px; font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--gold-dark); }
.feature-icon {
    width: 72px; height: 72px;
    margin: 0 0 28px;
    border-radius: 18px;
    background: linear-gradient(145deg,#f1ede3,#e8dfca);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:transform .35s var(--ease),background .35s var(--ease);
}
.feature-card:hover .feature-icon { transform:rotate(-3deg) scale(1.04); background:var(--gold); color:#fff; }
.feature-icon svg { width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feature-card h3 { font-size: 23px; font-weight: 800; color: var(--dark-2); margin-bottom: 11px; }
.feature-card > p { color:var(--text-light); font-size:16px; line-height:1.65; margin-bottom:25px; }
.feature-card ul { padding-top:18px; border-top:1px solid var(--border); color: var(--text-light); font-size: 15px; line-height: 1.9; }
.feature-card li::before { content:'—'; color:var(--gold); margin-right:8px; }
.why-section { position:relative; background:linear-gradient(135deg,#fff 0%,#faf8f3 100%); overflow:hidden; }
.why-section::before { content:''; position:absolute; width:430px; height:430px; border:1px solid rgba(168,150,106,.13); border-radius:50%; top:-220px; right:-90px; box-shadow:0 0 0 70px rgba(168,150,106,.035),0 0 0 140px rgba(168,150,106,.025); }
.why-heading { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:70px; margin-bottom:58px; }
.why-heading h2 { font-size:clamp(32px,3.5vw,48px); line-height:1.28; color:var(--dark-2); }
.why-intro { padding-bottom:4px; }
.why-intro > p { color:var(--text-light); font-size:18px; line-height:1.8; margin-bottom:25px; }
.why-facts { display:flex; gap:0; }
.why-facts span { padding:0 22px; border-left:1px solid var(--border); color:var(--text-light); font-size:14px; }
.why-facts span:first-child { padding-left:0; border-left:0; }
.why-facts b { display:block; color:var(--gold-dark); font-size:21px; margin-bottom:2px; }
.why-link { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 30px; margin-top:30px; background:var(--dark-2); color:rgba(255,255,255,.72); font-size:15px; }
.why-link a { color:#fff; font-weight:700; white-space:nowrap; }
.why-link a b { display:inline-block; margin-left:8px; color:var(--gold-light); transition:transform .25s; }
.why-link a:hover b { transform:translateX(5px); }

/* ==========================================================================
   소재 카드
   ========================================================================== */

.material-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.material-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: var(--shadow-sm);
}
.material-card .ph { position: absolute; inset: 0; }
.material-card .card-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 20px;
    background: linear-gradient(0deg, rgba(28,27,28,0.92) 0%, rgba(28,27,28,0) 100%);
    color: var(--white);
    z-index: 2;
    transition: padding-bottom 0.35s var(--ease);
}
.material-card .card-caption .num {
    font-size: 13.5px;
    color: var(--gold-light);
    font-weight: 700;
    letter-spacing: 0.1em;
}
.material-card .card-caption h3 { font-size: 21.5px; font-weight: 800; margin: 6px 0 8px; }
.material-card .card-caption p {
    font-size: 15.5px;
    color: rgba(255,255,255,0.82);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease);
}
.material-card:hover .card-caption { padding-bottom: 26px; }
.material-card:hover .card-caption p { max-height: 100px; opacity: 1; }

/* 소재소개 페이지 상세 카드 */
.material-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.material-detail-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.material-detail-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.material-detail-card .ph { height: 220px; }
.material-detail-body { padding: 28px 30px 32px; }
.material-detail-body .tag {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gold-dark);
    background: var(--gold-soft);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.material-detail-body h3 { font-size: 24px; font-weight: 800; color: var(--dark-2); margin-bottom: 12px; }
.material-detail-body p.desc { color: var(--text-light); font-size: 16.5px; margin-bottom: 18px; }
.material-detail-body .rec-title { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    font-size: 15px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text);
    background: var(--off-white);
}

/* ==========================================================================
   제작 품목 그리드
   ========================================================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
    display: flex;
    flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); }
.product-card .ph { height: 190px; }
.product-card .ph img { transition: transform 0.5s var(--ease); }
.product-card:hover .ph img { transform: scale(1.08); }
.product-body { padding: 20px 20px 24px; flex: 1; display: flex; flex-direction: column; }
.product-body h3 { font-size: 19.5px; font-weight: 800; color: var(--dark-2); margin-bottom: 8px; }
.product-body p { font-size: 15.5px; color: var(--text-light); margin-bottom: 16px; flex: 1; }
.product-body .btn { margin-top: auto; }

/* 제작품목 상세 리스트형 */
.product-detail {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 48px;
    align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid var(--border);
}
.product-detail:last-child { border-bottom: 0; }
.product-detail.reverse { grid-template-columns: 1fr 420px; }
.product-detail.reverse .ph { order: 2; }
.product-detail .ph { border-radius: 8px; height: 300px; box-shadow: var(--shadow-sm); }
.product-detail-info .idx {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-dark);
    letter-spacing: 0.12em;
    margin-bottom: 10px;
    display: block;
}
.product-detail-info h3 { font-size: 29.5px; font-weight: 800; color: var(--dark-2); margin-bottom: 16px; }
.product-detail-info .info-row { margin-bottom: 14px; }
.product-detail-info .info-row .label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    display: block;
}

/* ==========================================================================
   갤러리
   ========================================================================== */

.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.gallery-filter button {
    padding: 10px 20px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    transition: all 0.25s var(--ease);
}
.gallery-filter button:hover { border-color: var(--gold); color: var(--gold-dark); }
.gallery-filter button.active {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.gallery-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.gallery-card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); }
.gallery-card.hidden-item { display: none; }
.gallery-card .ph { height: 210px; }
.gallery-card .ph img { transition: transform 0.5s var(--ease); }
.gallery-card:hover .ph img { transform: scale(1.08); }
.gallery-body { padding: 20px; }
.gallery-body .cat {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 8px;
    display: block;
}
.gallery-body h3 { font-size: 19.5px; font-weight: 800; color: var(--dark-2); margin-bottom: 8px; }
.gallery-meta { display: flex; gap: 10px; font-size: 15px; color: var(--text-light); margin-bottom: 10px; flex-wrap: wrap; }
.gallery-meta span { background: var(--off-white); padding: 3px 10px; border-radius: 4px; }
.gallery-body p.desc { font-size: 15.5px; color: var(--text-light); margin-bottom: 14px; }

/* 갤러리 상세 */
.gallery-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: flex-start;
}
.gallery-detail .ph { border-radius: 8px; aspect-ratio: 4/3; box-shadow: var(--shadow-md); }
.gallery-detail-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 12px; }
.gallery-detail-thumbs .ph { aspect-ratio: 1/1; border-radius: 4px; }
.gallery-detail-info .cat {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.gallery-detail-info h1 { font-size: 32px; font-weight: 800; color: var(--dark-2); margin: 10px 0 20px; }
.gallery-detail-info dl { border-top: 1px solid var(--border); margin-bottom: 24px; }
.gallery-detail-info dl > div { display: flex; padding: 14px 0; border-bottom: 1px solid var(--border); }
.gallery-detail-info dt { width: 110px; flex-shrink: 0; font-weight: 700; color: var(--dark); font-size: 16px; }
.gallery-detail-info dd { color: var(--text-light); font-size: 16px; }
.gallery-detail-info .desc { color: var(--text); font-size: 16.5px; margin-bottom: 28px; line-height: 1.8; }
.gallery-back { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--text-light); margin-bottom: 24px; }
.gallery-back:hover { color: var(--gold-dark); }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

/* ==========================================================================
   CTA (문의 유도) 섹션
   ========================================================================== */

.cta-section {
    background: linear-gradient(135deg, var(--dark-3), var(--dark-2));
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(166,152,110,0.28), transparent 70%);
}
.cta-section .cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.cta-section h2 { font-size: clamp(25px, 3vw, 34px); font-weight: 800; margin-bottom: 16px; }
.cta-section p { color: rgba(255,255,255,0.75); margin-bottom: 32px; font-size: 17.5px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   페이지 상단 배너 (서브페이지 공통)
   ========================================================================== */

.page-banner {
    position: relative;
    padding: calc(var(--header-h) + 64px) 0 64px;
    background: linear-gradient(150deg, var(--dark-3), var(--dark-2));
    color: var(--white);
    text-align: center;
    overflow: hidden;
}
.page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(166,152,110,0.22), transparent 60%);
}
.page-banner .inner { position: relative; z-index: 1; }
.page-banner .eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold-light);
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block;
}
.page-banner h1 { font-size: clamp(29.5px, 3.6vw, 43.5px); font-weight: 800; margin-bottom: 14px; }
.page-banner p { color: rgba(255,255,255,0.72); font-size: 16.5px; }
.breadcrumb {
    margin-top: 20px;
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    display: flex;
    gap: 8px;
    justify-content: center;
}
.breadcrumb a:hover { color: var(--gold-light); }

/* ==========================================================================
   회사소개 페이지
   ========================================================================== */

.about-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.about-hero .ph { height: 420px; border-radius: 8px; box-shadow: var(--shadow-md); }
.about-hero h2 { font-size: 29.5px; font-weight: 800; color: var(--dark-2); margin-bottom: 20px; }
.about-hero p { color: var(--text-light); margin-bottom: 16px; font-size: 17px; }
.about-hero .lead { font-size: 19.5px; color: var(--dark); font-weight: 600; margin-bottom: 22px; }

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
}
.about-stats .stat { text-align: center; padding: 30px 16px; border: 1px solid var(--border); border-radius: 8px; }
.about-stats .stat strong { display: block; font-size: 34px; font-weight: 800; color: var(--gold-dark); margin-bottom: 6px; }
.about-stats .stat span { font-size: 15.5px; color: var(--text-light); }

.value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.value-item {
    display: flex;
    gap: 18px;
    padding: 26px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.value-item .num { font-size: 25px; font-weight: 800; color: var(--gold-light); -webkit-text-stroke: 1px var(--gold-dark); flex-shrink: 0; }
.value-item h3 { font-size: 19px; font-weight: 800; color: var(--dark-2); margin-bottom: 8px; }
.value-item p { font-size: 15.5px; color: var(--text-light); }

/* ==========================================================================
   오시는 길
   ========================================================================== */

.location-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}
.map-box {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-height: 420px;
    border: 1px solid var(--border);
}
.map-box iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }

.map-box-static {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--dark-3), var(--dark-2));
    position: relative;
    overflow: hidden;
}
.map-box-static::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
}
.map-static-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 40px 32px;
}
.map-static-inner .map-pin { margin: 0 auto 18px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); }
.map-static-addr { color: var(--white); font-size: 20.5px; font-weight: 800; margin-bottom: 8px; }
.map-static-sub { color: rgba(255,255,255,0.6); font-size: 15.5px; margin-bottom: 26px; }

.info-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 36px;
}
.info-card h3 { font-size: 23px; font-weight: 800; color: var(--dark-2); margin-bottom: 24px; }
.info-list > div {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.info-list > div:last-child { border-bottom: 0; }
.info-list .ic {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}
.info-list .label { font-size: 14px; color: var(--text-light); margin-bottom: 3px; }
.info-list .value { font-size: 17px; font-weight: 700; color: var(--dark); }
.copy-btn {
    margin-top: 22px;
    font-size: 15px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--off-white);
    color: var(--dark);
    font-weight: 600;
}
.copy-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.copy-btn.copied { background: var(--gold); color: var(--white); border-color: var(--gold); }

/* ==========================================================================
   제작문의 폼
   ========================================================================== */

.inquiry-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 44px;
    align-items: flex-start;
}
.inquiry-side {
    background: var(--dark-2);
    color: var(--white);
    border-radius: 8px;
    padding: 32px 28px;
    position: sticky;
    top: calc(var(--header-h-scrolled) + 24px);
}
.inquiry-side h3 { font-size: 20.5px; font-weight: 800; margin-bottom: 14px; }
.inquiry-side p { font-size: 15.5px; color: rgba(255,255,255,0.7); margin-bottom: 24px; }
.inquiry-side .contact-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.inquiry-side .contact-row .label { font-size: 13.5px; color: var(--gold-light); font-weight: 700; }
.inquiry-side .contact-row .value { font-size: 16.5px; font-weight: 700; }

.form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 40px;
}
.form-row { margin-bottom: 22px; }
.form-row label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}
.form-row label .req { color: #c0392b; margin-left: 3px; }
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=tel],
.form-row input[type=date],
.form-row input[type=number],
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 16.5px;
    color: var(--text);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(166,152,110,0.18);
}
.form-row textarea { min-height: 140px; resize: vertical; }
.form-row .field-invalid,
.checkbox-row .field-invalid { border-color: #c0392b !important; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--off-white);
    padding: 16px;
    border-radius: 6px;
    font-size: 15.5px;
    color: var(--text-light);
}
.checkbox-row input { margin-top: 3px; }
.checkbox-row a { color: var(--gold-dark); text-decoration: underline; }

.form-notice {
    font-size: 15px;
    color: var(--text-light);
    margin-top: 14px;
}

.alert-box {
    padding: 16px 18px;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 24px;
}
.alert-success { background: #eef6ee; color: #2e7d32; border: 1px solid #c8e6c9; }
.alert-error { background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; }

.result-section {
    flex: 1;
    display: flex;
    align-items: center;
}
.result-section .container { width: 100%; }

.result-box {
    text-align: center;
    padding: 60px 24px;
}
.result-box .ic {
    width: 72px; height: 72px;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    font-weight: 800;
}
.result-box.success .ic { background: #eef6ee; color: #2e7d32; }
.result-box.error .ic { background: #fdecea; color: #c0392b; }
.result-box h2 { font-size: 25px; font-weight: 800; color: var(--dark-2); margin-bottom: 12px; }
.result-box p { color: var(--text-light); margin-bottom: 28px; }

/* ==========================================================================
   푸터
   ========================================================================== */

.site-footer {
    background: var(--dark-3);
    color: rgba(255,255,255,0.72);
    padding: 56px 0 28px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 24px;
}
.footer-logo img { height: 30px; margin-bottom: 14px; filter: brightness(0) invert(1); opacity: 0.92; }
.footer-info p { font-size: 15.5px; line-height: 2; }
.footer-nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-nav a { font-size: 16px; color: rgba(255,255,255,0.72); }
.footer-nav a:hover { color: var(--gold-light); }
.footer-bottom {
    font-size: 14px;
    color: rgba(255,255,255,0.42);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-admin-link {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 6px 14px;
    border-radius: 20px;
    transition: color 0.25s, border-color 0.25s;
    flex-shrink: 0;
}
.footer-admin-link:hover { color: var(--gold-light); border-color: var(--gold); }

/* ==========================================================================
   스크롤 애니메이션 (IntersectionObserver 연동)
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.55s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.65s; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > *, .hero-eyebrow, .hero h1, .hero p, .hero-actions {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .hero-slide { transition: opacity .01s !important; transform: none !important; }
}

/* ==========================================================================
   반응형
   ========================================================================== */

@media (max-width: 1080px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .why-heading { grid-template-columns: 1fr; gap: 24px; }
    .why-heading h2 br { display:none; }
    .why-section .feature-grid { grid-template-columns: 1fr; border-bottom:0; }
    .why-section .feature-card { border-left:1px solid var(--border); border-bottom:1px solid var(--border); }
    .material-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .material-detail-grid { grid-template-columns: 1fr; }
    .about-hero { grid-template-columns: 1fr; }
    .about-hero .ph { height: 300px; }
    .location-wrap { grid-template-columns: 1fr; }
    .inquiry-layout { grid-template-columns: 1fr; }
    .inquiry-side { position: static; }
    .gallery-detail { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .only-desktop { display: none; }
    section { padding: 64px 0; }
    .feature-grid,
    .material-grid,
    .product-grid,
    .gallery-grid,
    .about-stats,
    .value-grid,
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    .why-heading { margin-bottom:38px; }
    .why-intro > p { font-size:16px; }
    .why-facts { display:grid; grid-template-columns:repeat(3,1fr); }
    .why-facts span { padding:0 10px; font-size:12px; }
    .why-facts span:first-child { padding-left:0; }
    .why-facts b { font-size:18px; }
    .feature-card { padding:36px 28px 32px; }
    .why-link { align-items:flex-start; flex-direction:column; padding:22px; }
    .product-detail,
    .product-detail.reverse {
        grid-template-columns: 1fr;
        padding: 36px 0;
        gap: 24px;
    }
    .product-detail.reverse .ph { order: 0; }
    .product-detail .ph { height: 220px; }
    .cta-actions { flex-direction: column; align-items: stretch; }
    .cta-actions .btn { width: 100%; }
    .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .hero-controls { bottom: 72px; gap: 12px; }
    .hero-arrow { width: 38px; height: 38px; }
    .footer-top { flex-direction: column; }
}