/* =====================================================================
   Latuis shop — 다크 차콜 + 골드, 하이엔드 주얼리 하우스 톤 (Bootstrap 5 위에 얹음)
   변수 이름은 기존(ink/paper/sand)을 유지하고 값만 반전한다.
   ===================================================================== */
:root {
    --ink: #f1ebe0;          /* 본문 텍스트 (아이보리) */
    --ink-soft: #a39b90;     /* 보조 텍스트 */
    --paper: #0f0e0c;        /* 페이지 배경 */
    --sand: #1c1a17;         /* 카드/패널 배경 */
    --line: #2c2925;         /* 경계선 */
    --accent: #c9a96e;       /* 골드 */
    --radius: 6px;
}

/* 전역 smooth scroll 은 뒤로가기 위치 복원까지 애니메이션시켜 화면이 저절로 움직이므로 쓰지 않는다. 앵커 이동은 shop.js 에서 처리. */
body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.01em;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
/* 버튼: btn-dark = 골드 프라이머리, btn-outline-dark = 아이보리 아웃라인 */
.btn-dark { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: #141210; --bs-btn-hover-bg: #d9bb84; --bs-btn-hover-border-color: #d9bb84; --bs-btn-hover-color: #141210; --bs-btn-active-bg: #b8944f; --bs-btn-active-border-color: #b8944f; --bs-btn-disabled-bg: #4a4136; --bs-btn-disabled-border-color: #4a4136; --bs-btn-disabled-color: #8a8075; letter-spacing: .04em; }
.btn-outline-dark { --bs-btn-color: var(--ink); --bs-btn-border-color: #5a544c; --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #141210; --bs-btn-active-bg: var(--ink); --bs-btn-active-color: #141210; --bs-btn-disabled-color: #5a544c; --bs-btn-disabled-border-color: #3a3530; }
.btn-outline-secondary { --bs-btn-color: var(--ink-soft); --bs-btn-border-color: #5a544c; --bs-btn-hover-bg: #2c2925; --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: #5a544c; }
.btn-secondary { --bs-btn-bg: #2c2925; --bs-btn-border-color: #2c2925; --bs-btn-color: var(--ink-soft); --bs-btn-disabled-bg: #2c2925; --bs-btn-disabled-border-color: #2c2925; --bs-btn-disabled-color: #6f675e; }
.btn-outline-danger { --bs-btn-color: #e08a93; --bs-btn-border-color: #6a3a40; --bs-btn-hover-bg: #6a3a40; --bs-btn-hover-color: #fff; }
.btn-link.text-dark { color: var(--ink-soft) !important; }
.btn-link.text-dark:hover { color: var(--accent) !important; }
.text-muted { color: var(--ink-soft) !important; }
.text-dark { color: var(--ink) !important; }
.form-control, .form-select { background: #14120f; color: var(--ink); border-color: #3a3530; }
.form-control::placeholder { color: #6f675e; }
.form-control:focus, .form-select:focus { background: #14120f; color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(201, 169, 110, .15); }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a39b90' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
.form-select option { background: #14120f; color: var(--ink); }
.form-label { color: var(--ink-soft); font-size: .85rem; }
.form-text { color: #6f675e; }
.invalid-feedback { color: #e08a93; }
.alert-success { --bs-alert-bg: #1d2a1f; --bs-alert-border-color: #2f4a34; --bs-alert-color: #b9dcbf; }
.alert-danger { --bs-alert-bg: #2e1b1d; --bs-alert-border-color: #5a2f35; --bs-alert-color: #e9b4ba; }
.dropdown-menu { --bs-dropdown-bg: #1c1a17; --bs-dropdown-border-color: var(--line); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: #2c2925; --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-divider-bg: var(--line); }
.dropdown-item-text { color: var(--ink-soft); }
/* 계정 메뉴: 아이콘 없이 텍스트만, 절제된 간격 */
.account-menu { min-width: 220px; padding: .6rem 0; border-radius: 6px; }
.account-menu .account-name { padding: .35rem 1.25rem .6rem; font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: .95rem; color: var(--ink); border-bottom: 1px solid var(--line); margin-bottom: .35rem; }
.account-menu .dropdown-item { padding: .55rem 1.25rem; font-size: .88rem; letter-spacing: .02em; color: var(--ink-soft); }
.account-menu .dropdown-item:hover { color: var(--accent); background: transparent; padding-left: 1.45rem; transition: padding-left .15s, color .15s; }
.account-menu .dropdown-divider { margin: .35rem 0; }
.offcanvas { --bs-offcanvas-bg: var(--paper); --bs-offcanvas-color: var(--ink); }
.btn-close { filter: invert(1) grayscale(1); }
.breadcrumb-item.active { color: var(--ink-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: #5a544c; }
hr { border-color: var(--line); opacity: 1; }
.badge.text-bg-warning { background: #7a5a12 !important; color: #f6e3b4 !important; }
.badge.text-bg-primary { background: var(--accent) !important; color: #141210 !important; }
.badge.text-bg-info { background: #1f4a5a !important; color: #bfe6f3 !important; }
.badge.text-bg-success { background: #234a2c !important; color: #bfe3c5 !important; }
.badge.text-bg-secondary { background: #3a3530 !important; color: var(--ink-soft) !important; }

/* ---------- header ---------- */
.site-header { background: rgba(15, 14, 12, .9); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 1rem; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.45rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--ink) !important; }
.brand-mark { width: 28px; height: 28px; flex: 0 0 auto; }
.header-search { flex: 1; max-width: 420px; margin-left: auto; position: relative; }
.header-search .form-control { border-radius: 999px; padding-right: 2.6rem; background: var(--sand); border-color: var(--line); }
.header-search .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
/* 헤더(데스크톱) 검색은 평소 아이콘만 — 커머스 볼륨을 낮추고 열 때만 입력창 확장 */
.site-header .header-search { flex: 0 1 auto; min-width: 40px; min-height: 40px; justify-content: flex-end; }
.site-header .header-search .btn { right: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 1.25rem; }
.site-header .header-search .btn:hover { background: var(--sand); }
.site-header .header-search .form-control { width: 0; min-width: 0; opacity: 0; padding-left: 0; padding-right: 38px; background: transparent; border-color: transparent; transition: width .25s ease, opacity .2s ease, background-color .2s ease; }
.site-header .header-search.open .form-control { width: min(300px, 38vw); opacity: 1; padding-left: 1rem; background: var(--sand); border-color: var(--line); }
/* 로그인 — 버튼 대신 조용한 텍스트 링크 */
.login-link { font-size: .82rem; letter-spacing: .06em; color: var(--ink-soft); padding: .4rem 0 .4rem .5rem; white-space: nowrap; }
.login-link:hover { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.header-search + .header-actions, .util-links + .header-actions { margin-left: 0; }
/* 검색 아이콘 ↔ 찜 아이콘 간격을 아이콘들끼리의 간격(.25rem)과 동일하게 — header-row gap(1rem) 상쇄 */
@media (min-width: 768px) { .site-header .header-search + .header-actions { margin-left: -.75rem; } }
@media (max-width: 767px) { .site-header .header-actions { margin-left: auto; } } /* 검색 폼이 d-none 이라 위 인접 셀렉터가 auto 를 지워버림 */
/* 아이콘 광학 중심 보정 — bootstrap-icons ::before 의 vertical-align:-.125em 때문에 하트·백 글리프가 로고·텍스트 중심선보다 5px 아래에 그려짐 */
.site-header .icon-link i, .site-header .header-search .btn i, .site-header .header-row > button i { display: flex; align-items: center; justify-content: center; line-height: 1; }
.site-header .icon-link i::before, .site-header .header-search .btn i::before, .site-header .header-row > button i::before { vertical-align: 0; }
/* 모바일 햄버거: btn-link 밑줄 제거 + 40px 높이 박스로 세로 중심 고정 */
.site-header .header-row > button { display: flex; align-items: center; height: 40px; text-decoration: none; }
/* 모바일: 햄버거+로고+아이콘 3종+로그인이 350px 컨테이너를 넘쳐 로그인이 오른쪽 여백을 침범하던 문제 */
@media (max-width: 575px) {
    .header-row { gap: .5rem; }
    .brand { font-size: 1.3rem; letter-spacing: .2em; }
}
/* 상단 유틸 링크 (하우스 소개 · 고객 안내) — 검색창과 아이콘 사이 */
.util-links { display: flex; gap: 1.1rem; margin-left: .75rem; margin-right: .5rem; font-size: .82rem; letter-spacing: .04em; }
.util-links a { color: var(--ink-soft); white-space: nowrap; }
.util-links a:hover, .util-links a.active { color: var(--accent); }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.25rem; color: var(--ink); }
.icon-link:hover { background: var(--sand); color: var(--ink); }
.icon-link.dropdown-toggle::after { display: none; }
.cart-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #141210; font-size: .7rem; line-height: 18px; text-align: center; font-weight: 700; }

.cat-nav { display: flex; gap: 1.75rem; height: 44px; align-items: stretch; }
.cat-nav > a, .cat-item > a { display: flex; align-items: center; font-size: .95rem; font-weight: 500; color: var(--ink-soft); border-bottom: 2px solid transparent; }
.cat-nav > a.active, .cat-item > a.active, .cat-nav > a:hover, .cat-item > a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.cat-item { position: relative; display: flex; }
.cat-drop { position: absolute; top: 100%; left: -12px; min-width: 180px; padding: .5rem 0; background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.5); display: none; z-index: 20; }
.cat-drop a { display: block; padding: .45rem 1rem; font-size: .9rem; color: var(--ink-soft); }
.cat-drop a:hover { background: var(--sand); color: var(--ink); }
.cat-item:hover .cat-drop { display: block; }

.offcanvas .brand { font-size: 1.3rem; }
.mnav-top { display: block; padding: .6rem 0; font-weight: 600; border-top: 1px solid var(--line); }
.mnav-sub a { display: block; padding: .35rem 0 .35rem 1rem; color: var(--ink-soft); font-size: .95rem; }

/* ---------- layout ---------- */
.site-main { min-height: 60vh; }
/* 주의: .section/.section-sm/.mz-* 는 .container 와 같은 요소에 얹히는 경우가 많다.
   padding 쇼트핸드로 좌우를 0 으로 덮으면 컨테이너 거터가 사라지므로 상하만 지정한다. */
.section { padding-top: 3rem; padding-bottom: 3rem; }
.section-sm { padding-top: 1.5rem; padding-bottom: 3rem; }
/* 모바일: 컨테이너 좌우 여백을 부트스트랩 기본(12px)보다 넉넉한 20px 로 */
@media (max-width: 767px) {
    .container { padding-left: 1.25rem; padding-right: 1.25rem; }
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; }
.section-head h2 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.5rem; font-weight: 400; letter-spacing: .04em; margin: 0; }
.section-head .more { font-size: .9rem; color: var(--ink-soft); }
.list-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.list-title { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.7rem; font-weight: 400; letter-spacing: .03em; margin: 0; }
.breadcrumb { --bs-breadcrumb-divider: '›'; margin-bottom: .75rem; }
.breadcrumb a { color: var(--ink-soft); }

/* ---------- hero ---------- */
.hero { padding-top: 1.25rem; }
.hero-box { position: relative; min-height: 520px; border-radius: 10px; background-size: cover; background-position: center right; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); }
.hero-box::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,14,12,.92) 0%, rgba(15,14,12,.6) 45%, rgba(15,14,12,0) 75%); }
.hero-text { position: relative; padding: 2.5rem 3rem; max-width: 560px; }
.hero-kicker { letter-spacing: .25em; font-size: .8rem; color: var(--accent); font-weight: 600; margin-bottom: .75rem; }
.hero-text h1 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 400; line-height: 1.2; margin-bottom: 1rem; letter-spacing: .01em; }
.hero-sub { color: var(--ink-soft); margin-bottom: 1.5rem; max-width: 22em; }
@media (max-width: 767px) {
    .hero-box { min-height: 360px; background-position: 70% center; }
    .hero-text { padding: 1.75rem 1.5rem; }
}

/* ---------- category tiles ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.cat-tile { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.25rem; background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .15s, border-color .15s; }
.cat-tile:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--ink); }
.cat-tile-name { font-weight: 600; }
.cat-tile-count { font-size: .8rem; color: var(--ink-soft); }

/* ---------- perks ---------- */
.perk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.perk { display: flex; gap: .9rem; align-items: center; padding: 1.1rem 1.25rem; background: var(--sand); border-radius: var(--radius); }
.perk i { font-size: 1.6rem; color: var(--accent); }
.perk strong { display: block; font-size: .95rem; }
.perk span { font-size: .8rem; color: var(--ink-soft); }

/* ---------- product card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.25rem 1.5rem; }
@media (max-width: 991px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem .75rem; } }
.product-card { display: flex; flex-direction: column; height: 100%; }
.pc-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .pc-img img { transform: scale(1.04); }
.pc-badge { position: absolute; left: 10px; top: 10px; padding: .2rem .5rem; border-radius: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.pc-badge.sale { background: var(--accent); color: #141210; }
.pc-badge.soldout { background: rgba(15,14,12,.85); color: var(--ink); border: 1px solid var(--line); }
.pc-badge.limited { background: rgba(15,14,12,.7); color: var(--accent); border: 1px solid var(--accent); }
.pc-wish { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(15,14,12,.55); color: var(--ink); font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.product-card:hover .pc-wish, .pc-wish.on { opacity: 1; }
@media (hover: none) { .pc-wish { opacity: 1; } }
.pc-wish.on, .js-wish.on { color: var(--accent); }
.pc-body { padding: .8rem .1rem 0; display: flex; flex-direction: column; flex: 1; }
.pc-cat { font-size: .72rem; color: var(--accent); letter-spacing: .12em; text-transform: uppercase; }
/* 상품명 2줄 고정 높이, 가격 줄 1줄 고정 → 카드 높이 동일 */
.pc-name { display: -webkit-box; margin: .15rem 0 .3rem; font-weight: 400; font-size: .95rem; line-height: 1.4; min-height: calc(1.4em * 2); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-price { min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.pc-price .now { font-weight: 500; color: var(--ink-soft); }
.pc-price .now { font-weight: 700; }
.pc-price .was { margin-left: .4rem; color: #6f675e; font-size: .85rem; }

/* ---------- list helpers ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip { padding: .35rem .9rem; border: 1px solid #3a3530; border-radius: 999px; background: transparent; font-size: .85rem; color: var(--ink-soft); }
.chip.active, .chip:hover { background: var(--accent); border-color: var(--accent); color: #141210; }
.sort-row { display: flex; gap: 1rem; margin-bottom: 1.25rem; font-size: .875rem; }
.sort-row a { color: var(--ink-soft); }
.sort-row a.active { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.empty-box { text-align: center; padding: 4rem 1rem; color: var(--ink-soft); }
.empty-box i { font-size: 2.5rem; display: block; margin-bottom: .75rem; color: #4a4136; }
.pagination { --bs-pagination-bg: transparent; --bs-pagination-border-color: var(--line); --bs-pagination-color: var(--ink); --bs-pagination-hover-bg: var(--sand); --bs-pagination-hover-color: var(--accent); --bs-pagination-hover-border-color: var(--line); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-active-color: #141210; --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: #4a4136; --bs-pagination-disabled-border-color: var(--line); --bs-pagination-focus-box-shadow: none; }

/* ---------- product detail ---------- */
.gallery-main { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--sand); border: 1px solid var(--line); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; }
.thumb { flex: 0 0 72px; width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--sand); }
.thumb.active { border-color: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.buy-panel { position: sticky; top: 124px; }
.pd-name { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.9rem; font-weight: 400; line-height: 1.25; }
.pd-ref { font-size: .78rem; color: var(--ink-soft); letter-spacing: .08em; margin-top: .35rem; }
.pd-summary { color: var(--ink-soft); }
.pd-price { display: flex; align-items: baseline; gap: .6rem; margin: 1rem 0; }
.pd-price .now { font-size: 1.7rem; font-weight: 600; }
.pd-price .was { color: #6f675e; }
.pd-price .rate { color: var(--accent); font-weight: 700; }
.pd-info { display: grid; grid-template-columns: 64px 1fr; gap: .4rem .5rem; font-size: .9rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.pd-info dt { color: var(--ink-soft); font-weight: 500; }
.pd-info dd { margin: 0; }
.qty-row { display: flex; align-items: center; margin-bottom: 1rem; }
.qty-ctl { display: inline-flex; border: 1px solid #3a3530; border-radius: 6px; overflow: hidden; background: #14120f; }
.qty-ctl button { width: 36px; height: 38px; border: 0; background: transparent; font-size: 1.1rem; color: var(--ink); }
.qty-ctl button:hover { background: var(--sand); }
.qty-ctl input { width: 48px; border: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; background: transparent; color: var(--ink); }
.qty-ctl input::-webkit-outer-spin-button, .qty-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-desc { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.pd-desc-body { white-space: pre-line; line-height: 1.9; color: #cfc6b8; max-width: 760px; }
.pd-guide { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.pd-steps { color: #cfc6b8; line-height: 1.85; padding-left: 1.2rem; margin: 0; max-width: 46ch; }
.pd-steps li { margin-bottom: .6rem; }

.spec-table { width: 100%; max-width: 760px; border-top: 1px solid var(--line); font-size: .92rem; margin-top: 1rem; }
.spec-table th, .spec-table td { padding: .7rem .25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 130px; color: var(--ink-soft); font-weight: 500; text-align: left; }
.pd-note { display: flex; gap: .75rem; padding: .9rem 1rem; background: var(--sand); border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; }
.pd-note i { color: var(--accent); }

/* ---------- cart / checkout / orders ---------- */
.card-box, .summary-box { background: var(--sand); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; }
.cart-list { background: var(--sand); border: 1px solid var(--line); border-radius: 8px; }
.cart-row { display: grid; grid-template-columns: 96px 1fr auto auto 32px; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.cart-row:last-child { border-bottom: 0; }
.cart-img img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; background: var(--sand); }
.cart-name { display: block; font-weight: 500; }
.cart-line { min-width: 90px; text-align: right; }
.cart-del { border: 0; background: transparent; color: #6f675e; }
.cart-del:hover { color: var(--accent); }
@media (max-width: 575px) {
    .cart-row { grid-template-columns: 72px 1fr 32px; }
    .cart-img img { width: 72px; height: 72px; }
    .cart-qty { grid-column: 2; }
    .cart-line { grid-column: 2; text-align: left; }
}
.sum-row { display: flex; justify-content: space-between; padding: .3rem 0; color: var(--ink-soft); }
.sum-row strong { color: var(--ink); font-weight: 600; }
.sum-row.total { font-size: 1.1rem; }
.sum-row.total strong { font-weight: 700; }
.co-line { display: flex; gap: .9rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.co-line:last-child { border-bottom: 0; }
.co-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--sand); }
.pay-method { display: flex; gap: .9rem; align-items: center; padding: 1rem; background: #14120f; border: 1px solid var(--line); border-radius: 6px; }
.pay-method i { font-size: 1.5rem; color: var(--accent); }
.kv { display: grid; grid-template-columns: 90px 1fr; gap: .4rem .75rem; font-size: .93rem; margin: 0; }
.kv dt { color: var(--ink-soft); font-weight: 500; }
.kv dd { margin: 0; }
.order-list { display: flex; flex-direction: column; gap: .6rem; }
.order-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--sand); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.order-row:hover { border-color: var(--accent); color: var(--ink); }
.placed-box { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; background: #1d2a1f; border: 1px solid #2f4a34; border-radius: 8px; margin-bottom: 1.5rem; color: #d8ecd9; }
.placed-box i { font-size: 2rem; color: #7fc58a; }

/* ---------- 아카이브 (완판 작품) ---------- */
.archive-wrap { padding: 2rem; border: 1px solid rgba(201,169,110,.35); border-radius: 12px; background: radial-gradient(ellipse at top left, #1f1b14 0%, #0f0e0c 70%); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.archive-card { display: flex; gap: 1rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(28,26,23,.6); color: var(--ink); transition: border-color .15s, transform .15s; }
.archive-card:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); }
.ac-img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 6px; overflow: hidden; background: var(--sand); }
.ac-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.ac-body { min-width: 0; }
.ac-name { font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: .15rem 0 .4rem; }
.ac-meta { display: flex; gap: .6rem; align-items: center; font-size: .82rem; flex-wrap: wrap; }
.ac-sold { padding: .1rem .5rem; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; font-size: .72rem; letter-spacing: .04em; }
@media (max-width: 991px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .archive-grid { grid-template-columns: 1fr; } .archive-wrap { padding: 1.25rem; } }

/* ---------- 맞춤 사양 ---------- */
.pd-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin-bottom: 1.1rem; }
.pd-options .opt-field:has(input) { grid-column: 1 / -1; }
.opt-line { color: var(--accent); }
@media (max-width: 575px) { .pd-options { grid-template-columns: 1fr; } }

/* ---------- 리뷰 / 문의 ---------- */
.stars { color: var(--accent); letter-spacing: .05em; }
.stars.sm { font-size: .85rem; }
.pd-rating { margin-top: .4rem; }
.pd-rating .stars { text-decoration: none; }
.pd-rating .stars span { color: var(--ink); margin-left: .3rem; font-weight: 600; }
.pc-stars { font-size: .78rem; color: var(--accent); min-height: 1.2em; margin-bottom: .15rem; }
.pc-stars span:not(.text-muted) { color: var(--ink); font-weight: 600; }
.pd-reviews { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.rating-box { background: var(--sand); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; text-align: center; }
.rating-avg { font-family: Georgia, serif; font-size: 3rem; line-height: 1; margin-bottom: .3rem; }
.rating-bars { margin-top: 1rem; display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; }
.rb { display: grid; grid-template-columns: 12px 14px 1fr 36px; gap: .4rem; align-items: center; }
.rb i { color: var(--accent); font-size: .7rem; }
.rb-track { height: 6px; background: #2c2925; border-radius: 3px; overflow: hidden; }
.rb-fill { height: 100%; background: var(--accent); }
.review { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.review header { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.review p { color: #cfc6b8; line-height: 1.75; margin: 0; white-space: pre-line; }
.review-form { margin: .25rem 0 .75rem 5rem; padding: .75rem 1rem; background: #14120f; border: 1px solid var(--line); border-radius: 6px; }
.review-form summary { cursor: pointer; color: var(--accent); font-size: .9rem; list-style: none; }
.review-form summary::-webkit-details-marker { display: none; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; margin-bottom: .5rem; }
.star-input input { display: none; }
.star-input label { cursor: pointer; color: #3a3530; font-size: 1.4rem; transition: color .1s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--accent); }
.inq-list { display: flex; flex-direction: column; gap: .6rem; }
.inq-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--sand); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.inq-row:hover { border-color: var(--accent); color: var(--ink); }
.inq-thread { display: flex; flex-direction: column; gap: 1rem; }
.inq-msg { padding: 1.1rem 1.25rem; border-radius: 8px; border: 1px solid var(--line); background: var(--sand); }
.inq-msg.answer { border-color: rgba(201,169,110,.4); background: #1a1712; }
.inq-msg .who { font-size: .8rem; color: var(--ink-soft); margin-bottom: .4rem; display: flex; justify-content: space-between; }
.inq-msg .who b { color: var(--accent); }
.inq-msg p { margin: 0; white-space: pre-line; line-height: 1.75; color: #e6dfd3; }
@media (max-width: 575px) { .review-form { margin-left: 0; } }

/* ---------- 예약 달력 ---------- */
.cal-wrap { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1.25rem; align-items: start; }
.cal { background: #14120f; border: 1px solid var(--line); border-radius: 8px; padding: .9rem; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.cal-head strong { font-weight: 500; letter-spacing: .04em; }
.cal-nav { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.1rem; line-height: 1; }
.cal-nav:hover { border-color: var(--accent); color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-size: .7rem; color: var(--ink-soft); padding: .25rem 0; letter-spacing: .05em; }
.cal-dow.sun { color: #a56a70; }
.cal-day { aspect-ratio: 1; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font-size: .9rem; }
.cal-day:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal-day.off { color: #4a4136; text-decoration: line-through; }
.cal-day.sel, .cal-day.sel:hover { background: var(--accent); border-color: var(--accent); color: #141210; font-weight: 600; }
.cal-slots { background: #14120f; border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1rem; min-height: 100%; }
.cal-slots-head { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.slot-btn { padding: .7rem .5rem; border: 1px solid #3a3530; border-radius: 6px; background: transparent; color: var(--ink); font-size: .92rem; }
.slot-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.slot-btn.sel, .slot-btn.sel:hover { background: var(--accent); border-color: var(--accent); color: #141210; font-weight: 600; }
.slot-btn.taken { color: #4a4136; text-decoration: line-through; border-style: dashed; }
.slot-grid.loading .slot-btn { opacity: .45; pointer-events: none; transition: opacity .15s; }
@media (max-width: 575px) { .cal-wrap { grid-template-columns: 1fr; } }

/* ---------- 컬렉션 목록 (에디토리얼) ---------- */
.lst-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: end; padding: 1rem 0 2.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.lst-intro-text p { color: #cfc6b8; line-height: 1.85; max-width: 40em; margin: 1rem 0 0; word-break: keep-all; }
.lst-intro-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--sand); }
.lst-intro-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.lst-intro-cover:hover img { transform: scale(1.03); }
.lst-intro-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.1rem .8rem; font-size: .8rem; color: var(--ink); background: linear-gradient(180deg, rgba(15,14,12,0), rgba(15,14,12,.85)); }
.lst-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.lst-tabs { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.lst-tabs a { padding: .35rem 0; font-size: .9rem; color: var(--ink-soft); border-bottom: 1px solid transparent; }
.lst-tabs a.active, .lst-tabs a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.lst-sort-btn { background: transparent; border: 0; border-bottom: 1px solid #3a3530; padding: .3rem 0 .35rem; font-size: .85rem; color: var(--ink); letter-spacing: .02em; display: inline-flex; gap: .4rem; align-items: center; }
.lst-sort-btn i { font-size: .7rem; color: var(--ink-soft); transition: transform .15s; }
.lst-sort-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.lst-sort-btn:hover { border-bottom-color: var(--accent); }
.sort-menu { min-width: 180px; }
.sort-menu .dropdown-item.active { background: transparent; color: var(--accent); }
.lst-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 3rem 2rem; }
.lst-stars { font-size: .8rem; color: var(--ink-soft); }
.lst-stars .bi-star-fill { color: var(--accent); font-size: .72rem; }

/* 카테고리 하단: 비교표 + 고르는 기준·FAQ */
.lst-compare { margin-top: 3.5rem; }
.lst-compare h2, .lst-house h2 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .04em; margin-bottom: 1rem; }
.table-scroll { overflow-x: auto; }
.cmp-table { width: 100%; border-top: 1px solid var(--line); font-size: .9rem; }
.cmp-table th, .cmp-table td { padding: .65rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.cmp-table thead th { color: var(--ink-soft); font-weight: 500; font-size: .8rem; letter-spacing: .06em; }
.cmp-table td a { color: var(--ink); }
.cmp-table td a:hover { color: var(--accent); }
.cmp-table td:last-child { color: var(--accent); }
.lst-house { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.lst-house ol { color: #cfc6b8; line-height: 1.85; padding-left: 1.2rem; margin: 0; }
.lst-house ol li { margin-bottom: .4rem; }

.lst-card { display: flex; flex-direction: column; color: var(--ink); }
.lst-card:hover { color: var(--ink); }
.lst-card.wide { grid-column: span 2; }
.lst-img { position: relative; overflow: hidden; border-radius: 4px; background: var(--sand); aspect-ratio: 4 / 5; }
.lst-card.wide .lst-img { aspect-ratio: 16 / 9; }
.lst-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.lst-card:hover .lst-img img { transform: scale(1.03); }
.lst-body { display: flex; flex-direction: column; gap: .15rem; padding: .9rem .1rem 0; }
.lst-name { font-size: .95rem; line-height: 1.4; }
.lst-card.wide .lst-name { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.25rem; }
.lst-price { font-size: .85rem; color: var(--ink-soft); }
.lst-sub { font-size: .85rem; color: var(--ink-soft); margin-top: .25rem; max-width: 48em; }
.lst-more { text-align: center; padding: 3rem 0 1rem; }
.lst-more-btn { background: transparent; border: 0; border-bottom: 1px solid var(--accent); color: var(--ink); font-size: .85rem; letter-spacing: .08em; padding: 0 0 .25rem; margin: 0; cursor: pointer; }
.lst-more-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 991px) { .lst-intro { grid-template-columns: 1fr; gap: 1.25rem; } .lst-grid { gap: 2rem 1.25rem; } }
@media (max-width: 575px) { .lst-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem .75rem; } .lst-card.wide { grid-column: span 2; } .lst-tabs { gap: 1rem; } }

/* ---------- FAQ / About ---------- */
.faq-toc { display: flex; flex-direction: column; gap: .25rem; border-left: 1px solid var(--line); }
.faq-toc a { padding: .4rem 1rem; color: var(--ink-soft); font-size: .9rem; border-left: 2px solid transparent; margin-left: -1px; }
.faq-toc a:hover { color: var(--accent); border-left-color: var(--accent); }
.faq-group { margin-bottom: 2.5rem; scroll-margin-top: 130px; } /* 고정 헤더(64+44px) 아래로 정확히 정렬 */
.faq-toc a.active { color: var(--accent); border-left-color: var(--accent); }
#reviews, .pd-desc { scroll-margin-top: 120px; }
.faq-group-title { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.2rem; font-weight: 400; letter-spacing: .04em; color: var(--accent); margin-bottom: .75rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1rem; font-weight: 500; margin: 0; }
.faq-item summary i { color: var(--ink-soft); transition: transform .2s; }
.faq-item[open] summary i { transform: rotate(45deg); color: var(--accent); }
.faq-item p { color: #cfc6b8; line-height: 1.8; margin: 0 0 1.1rem; max-width: 70ch; }
.about { max-width: 960px; margin: 0 auto; }
.about-head { text-align: center; padding: 1.5rem 0 2.5rem; }
.about-head h1 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 1rem; }
.about-head .lead { color: var(--ink-soft); font-size: 1.05rem; max-width: 62ch; margin: 0 auto; line-height: 1.8; }
.about-img { position: relative; overflow: hidden; aspect-ratio: 16 / 7; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 2.5rem; }
.about-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.about-cols h2 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .04em; margin-bottom: .75rem; }
.about-cols p { color: #cfc6b8; line-height: 1.85; }
.about-collections { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .93rem; margin: 0; }
.about-collections dt { color: var(--accent); font-weight: 500; white-space: nowrap; }
.about-collections dd { margin: 0; color: #cfc6b8; }

/* 법적 고지 (개인정보처리방침 / 이용약관) — about·faq 문법을 따른다 */
.legal { counter-reset: legal; }
.legal-date { letter-spacing: .18em; font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; }
.legal-sec { border-top: 1px solid var(--line); padding: 1.9rem 0 1.4rem; counter-increment: legal; }
.legal-sec h2 { display: flex; align-items: baseline; gap: .8rem; font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.2rem; letter-spacing: .04em; margin-bottom: .9rem; }
.legal-sec h2::before { content: counter(legal, decimal-leading-zero); font-size: .72rem; letter-spacing: .15em; color: var(--accent); }
.legal-sec p, .legal-sec dd { color: #cfc6b8; line-height: 1.85; max-width: 70ch; }
.legal-sec p:last-child { margin-bottom: 0; }
.legal-sec ul { list-style: none; padding: 0; margin: 0; max-width: 70ch; }
.legal-sec ul li { position: relative; padding-left: 1.15rem; margin-bottom: .45rem; color: #cfc6b8; line-height: 1.8; }
.legal-sec ul li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.legal-sec .legal-keep { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; max-width: 46ch; margin: .75rem 0 0; font-size: .93rem; }
.legal-sec .legal-keep dt { font-weight: 400; color: #cfc6b8; }
.legal-sec .legal-keep dd { margin: 0; color: var(--accent); text-align: right; white-space: nowrap; }
.legal-note { color: var(--ink-soft); font-size: .88rem; }
@media (max-width: 767px) {
    .about-cols { grid-template-columns: 1fr; gap: 1.75rem; }
    .about-img { aspect-ratio: 4 / 3; }
    .section { padding-top: 2rem; padding-bottom: 2rem; }
    .hero-text h1 { font-size: 1.9rem; }
    .pd-name { font-size: 1.5rem; }
    .buy-panel { position: static; }
    .list-title { font-size: 1.4rem; }
}

/* ---------- footer ---------- 
.site-footer { margin-top: 4rem; padding: 3rem 0 2rem; background: #0a0908; border-top: 1px solid var(--line); }
.site-footer h6 { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .75rem; }
.site-footer a { color: var(--ink-soft); }
.site-footer li { margin-bottom: .3rem; }
.footer-bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- toast ---------- */
.toast-area { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 1080; pointer-events: none; }
.toast-msg { padding: .7rem 1.2rem; background: var(--accent); color: #141210; border-radius: 999px; font-size: .9rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: toast-in .2s ease-out; }
.toast-msg.err { background: #9b2c2c; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 맨 위로 버튼 ---------- */
.back-to-top { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(201,169,110,.5); background: rgba(15,14,12,.85); color: var(--accent); font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 1070; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--accent); color: #141210; }
@media (max-width: 575px) { .back-to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; } }

/* =====================================================================
   메인 — 매거진 레이아웃 (mz-*). 그리드 반복 대신 작품 하나·글·디테일 컷의 리듬.
   골드는 작은 라벨(eyebrow)과 밑줄 링크에만 쓴다.
   ===================================================================== */
.mz-eyebrow { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.mz-link { display: inline-block; margin-top: 1.25rem; padding-bottom: .2rem; border-bottom: 1px solid var(--accent); color: var(--ink); font-size: .85rem; letter-spacing: .08em; }
.mz-link:hover { color: var(--accent); }
.mz-muted { color: var(--ink-soft); font-size: .88rem; }

/* 1. 히어로: 좌 이미지 2 / 우 카피 1, 비대칭 */
.mz-hero { display: grid; grid-template-columns: 1.6fr 1fr; min-height: calc(100vh - 108px); border-bottom: 1px solid var(--line); }
.mz-hero-media { position: relative; overflow: hidden; }
.mz-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 히어로 슬로우 줌(켄 번즈) — 영상 없이 캠페인 무드, LCP 영향 없음 */
@keyframes mz-hero-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.mz-hero-media img { animation: mz-hero-zoom 18s ease-out both; }
@media (prefers-reduced-motion: reduce) { .mz-hero-media img { animation: none; } }
.mz-hero-links { display: flex; gap: 2rem; align-items: baseline; flex-wrap: wrap; }
.mz-hero-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 4rem clamp(1.5rem, 5vw, 4.5rem) 4.5rem; }
.mz-hero-copy h1 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.2; margin: 0 0 1rem; }
.mz-hero-sub { color: var(--ink-soft); max-width: 34ch; line-height: 1.75; margin-bottom: 1.5rem; }
.mz-hero-meta { display: flex; gap: 1.5rem; font-size: .8rem; letter-spacing: .08em; color: var(--ink-soft); }
.mz-hero-meta span:last-child { color: var(--ink); }

/* 2. 컬렉션 인덱스 */
.mz-index { display: flex; flex-wrap: wrap; gap: 0 3rem; padding-top: 2.25rem; padding-bottom: .5rem; }

/* 2-1. 메종 스트립 (차별화 서사 + 팩트) */
.mz-house { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; padding-top: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.mz-house-text h2 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.mz-house-text p { color: #cfc6b8; line-height: 1.85; max-width: 52ch; margin-bottom: 1.25rem; }
.mz-house-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin: 0; }
.mz-house-facts div { border-left: 1px solid var(--line); padding-left: 1rem; }
.mz-house-facts dt { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.25rem; color: var(--accent); }
.mz-house-facts dd { margin: .15rem 0 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 767px) { .mz-house { grid-template-columns: 1fr; gap: 2rem; } }
.mz-index a { display: flex; align-items: baseline; gap: .6rem; padding: .6rem 0; font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.25rem; color: var(--ink); border-bottom: 1px solid transparent; }
.mz-index a:hover { border-bottom-color: var(--accent); color: var(--ink); }
.mz-index-no { font-family: inherit; font-size: .7rem; letter-spacing: .15em; color: var(--ink-soft); }

/* 3. 스포트라이트 */
.mz-spot { padding-top: 3.5rem; padding-bottom: 4rem; }
.mz-spot-grid { display: grid; grid-template-columns: 1.35fr .65fr 1fr; grid-template-rows: auto auto; gap: 1rem 1.5rem; }
.mz-spot-main { grid-row: 1 / 3; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--sand); }
.mz-spot-main img, .mz-spot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.mz-spot-main:hover img, .mz-spot-thumb:hover img { transform: scale(1.03); }
.mz-spot-side { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 1rem; }
.mz-spot-thumb { flex: 1; overflow: hidden; border-radius: 4px; background: var(--sand); aspect-ratio: 1; }
.mz-spot-text { grid-row: 1 / 3; align-self: end; padding-bottom: .5rem; }
.mz-spot-text h2 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.7rem; line-height: 1.25; margin-bottom: 1rem; }
.mz-spot-desc { color: #cfc6b8; line-height: 1.8; margin-bottom: 1.25rem; }
.mz-spot-specs { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .84rem; margin: 0 0 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mz-spot-specs dt { color: var(--ink-soft); font-weight: 400; }
.mz-spot-specs dd { margin: 0; }

/* 4. 스테이트먼트 */
.mz-statement { padding: 5.5rem 0; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mz-statement p:first-child { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.65; max-width: 26em; margin: 0 auto 1.25rem; word-break: keep-all; }
.mz-statement-note { word-break: keep-all; max-width: 40em; margin: 0 auto; }
.mz-statement-note { color: var(--ink-soft); font-size: .85rem; letter-spacing: .04em; }

/* 5. 에디토리얼 그리드: 3열, 0·4번째는 세로로 긴 카드 */
.mz-edit { padding-top: 4rem; padding-bottom: 4rem; }
.mz-edit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.mz-edit-head h2 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.5rem; margin: 0; }
.mz-edit-head .mz-link { margin-top: 0; }
.mz-edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 2.5rem 1.5rem; align-items: start; }
.mz-card { display: flex; flex-direction: column; color: var(--ink); }
.mz-card.tall { grid-row: span 2; }
.mz-card-img { overflow: hidden; border-radius: 4px; background: var(--sand); aspect-ratio: 1; }
/* 세로 카드: 정사각 2장 + 행 간격(2.5rem) + 캡션 높이만큼 — 과도한 확대 크롭 방지 */
.mz-card.tall .mz-card-img { aspect-ratio: 1 / 2.25; }
.mz-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.mz-card:hover .mz-card-img img { transform: scale(1.03); }
.mz-card:hover { color: var(--ink); }
.mz-card-body { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .1rem 0; }
.mz-card-coll { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.mz-card-name { font-size: .95rem; line-height: 1.4; }
.mz-card-price { font-size: .78rem; color: var(--ink-soft); opacity: .8; letter-spacing: .02em; }

/* 6. 아카이브 */
.mz-archive { padding-top: 4rem; padding-bottom: 5rem; margin-top: 1rem; border-top: 1px solid var(--line); }
.mz-archive-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: stretch; }
.mz-archive-main { position: relative; display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 10; background: var(--sand); }
.mz-archive-main img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); }
.mz-archive-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.75rem 1.5rem; background: linear-gradient(180deg, rgba(15,14,12,0), rgba(15,14,12,.92)); display: flex; flex-direction: column; gap: .2rem; color: var(--ink); }
.mz-archive-cap strong { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.3rem; }
.mz-archive-cap .mz-eyebrow { margin-bottom: .4rem; }
.mz-archive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.mz-archive-list li { border-bottom: 1px solid var(--line); }
.mz-archive-list li:first-child { border-top: 1px solid var(--line); }
.mz-archive-list a { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem .25rem; color: var(--ink); }
.mz-archive-list a:hover .mz-archive-name { color: var(--accent); }
.mz-archive-name { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.05rem; }

@media (max-width: 991px) {
    .mz-hero { grid-template-columns: 1fr; min-height: auto; }
    .mz-hero-media { aspect-ratio: 4 / 3; }
    .mz-hero-copy { padding: 2rem 1.25rem 2.5rem; }
    .mz-spot-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
    .mz-spot-main { grid-row: 1; grid-column: 1; }
    .mz-spot-side { grid-row: 1; grid-column: 2; }
    .mz-spot-text { grid-row: 2; grid-column: 1 / -1; padding-top: .5rem; }
    .mz-edit-grid { grid-template-columns: repeat(2, 1fr); }
    .mz-archive-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .mz-index { gap: 0 1.5rem; }
    .mz-index a { font-size: 1.05rem; }
    .mz-spot-grid { grid-template-columns: 1fr; }
    .mz-spot-side { grid-row: 2; grid-column: 1; flex-direction: row; }
    .mz-spot-text { grid-row: 3; }
    .mz-edit-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; }
    .mz-card.tall { grid-row: auto; }
    .mz-card.tall .mz-card-img { aspect-ratio: 1; }
    .mz-statement { padding: 3.5rem 0; }
}

.err-page { padding: 7rem 0 6rem; text-align: center; }
.err-eyebrow { font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.6rem; }
.err-code { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 300; font-size: clamp(4.5rem, 12vw, 8rem); line-height: 1; letter-spacing: .04em; color: var(--ink); margin: 0 0 1.2rem; }
.err-title { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.45rem; margin-bottom: .8rem; }
.err-text { color: var(--ink-soft); max-width: 520px; margin: 0 auto 2rem; line-height: 1.8; }
.err-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.err-contact { margin-top: 3rem; font-size: .82rem; color: var(--ink-soft); }
.err-contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form-note { padding: .75rem 1rem; border: 1px solid #5a2f35; border-left: 3px solid #c46a74; background: #1f1618; color: #e9b4ba; font-size: .88rem; margin-bottom: 1.25rem; }

.lst-progress { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-bottom: 1.4rem; }
.lst-progress-text { font-size: .78rem; letter-spacing: .08em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lst-progress-text b { font-weight: 500; color: var(--ink); }
.lst-progress-bar { display: block; width: 120px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.lst-progress-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); transition: width .4s ease; }
.lst-end p { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.05rem; color: var(--ink); margin: .4rem 0 1rem; }
.lst-end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; }
.lst-end-links a { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .15rem; }
.lst-end-links a:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- 저널 ---------- */
.jnl-head { padding: .5rem 0 2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.jnl-head p { color: #cfc6b8; margin: .8rem 0 0; line-height: 1.8; max-width: 40em; word-break: keep-all; }
.jnl-tabs { margin-bottom: 2rem; }
.jnl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; }
.jnl-card { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.jnl-card:hover { color: var(--ink); }
.jnl-card.lead { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.jnl-img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--sand); }
.jnl-card.lead .jnl-img { aspect-ratio: 16 / 9; }
.jnl-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.jnl-card:hover .jnl-img img { transform: scale(1.03); }
.jnl-body { padding-top: 1rem; }
.jnl-card.lead .jnl-body { padding-top: 0; }
.jnl-cat { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.jnl-title { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.15rem; line-height: 1.45; margin: .5rem 0 .4rem; word-break: keep-all; }
.jnl-card.lead .jnl-title { font-size: 1.7rem; }
.jnl-card:hover .jnl-title { color: var(--accent); }
.jnl-excerpt { font-size: .88rem; color: var(--ink-soft); line-height: 1.75; margin: 0 0 .6rem; word-break: keep-all;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jnl-card.lead .jnl-excerpt { -webkit-line-clamp: 3; }
.jnl-meta { font-size: .74rem; color: #8a8075; font-variant-numeric: tabular-nums; }

.jnl-article-head { max-width: 720px; margin: 1.5rem auto 0; text-align: center; }
.jnl-article-head h1 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.4; margin: .8rem 0 1rem; word-break: keep-all; }
.jnl-standfirst { color: #cfc6b8; line-height: 1.85; word-break: keep-all; margin: 0 0 1rem; }
.jnl-article .jnl-meta { display: block; margin-bottom: 2rem; }
.jnl-cover { max-width: 960px; margin: 0 auto 2.5rem; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 4px; background: var(--sand); }
.jnl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jnl-content { max-width: 680px; margin: 0 auto; font-size: 1.02rem; line-height: 2; color: var(--ink); word-break: keep-all; }
.jnl-content p { margin: 0 0 1.6rem; }
.jnl-content h2 { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-weight: 400; font-size: 1.3rem; margin: 2.6rem 0 1rem; letter-spacing: .02em; }
.jnl-content blockquote { border-left: 2px solid var(--accent); margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem; color: #cfc6b8; font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.08rem; line-height: 1.9; }
.jnl-products { max-width: 960px; margin: 4rem auto 0; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.jnl-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.jnl-related { max-width: 960px; margin: 3.5rem auto 0; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.jnl-related .jnl-grid { gap: 2rem 1.5rem; }
@media (max-width: 991px) { .jnl-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; } .jnl-card.lead { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 575px) { .jnl-grid { grid-template-columns: 1fr; } .jnl-products-grid { grid-template-columns: 1fr 1fr; gap: .75rem; } }
.jnl-products .section-title, .jnl-related .section-title { font-family: Georgia, "Noto Serif KR", "Times New Roman", serif; font-size: 1.3rem; font-weight: 400; letter-spacing: .04em; margin: 0 0 1.5rem; }

.jnl-content figure { margin: 2.4rem -40px; }
.jnl-content figure img { width: 100%; border-radius: 4px; display: block; background: var(--sand); }
.jnl-content figcaption { font-size: .78rem; color: #8a8075; margin-top: .6rem; text-align: center; letter-spacing: .02em; }
@media (max-width: 767px) { .jnl-content figure { margin: 2rem 0; } }

.mz-journal { padding-top: 4.5rem; padding-bottom: 4rem; }
@media (max-width: 575px) { .jnl-grid.home { grid-template-columns: 1fr; } }