/* 은결담 — 원본 실측값(refs/measure.json · origin.json)으로 옮긴 토큰 */
:root {
  --ink: #000;
  --ink2: #222;
  --ink3: #333;
  --mute: #666;
  --mute2: #767676;
  --mute3: #6b6b6b;           /* 원본 #888 → 흰 바탕 대비 4.5:1 미달이라 어둡게 */
  --line: #ddd;
  --line2: #eee;
  --card: #eee;
  --foot: #555;
  --accent: #c94f1b;          /* 로고 · 강조. 원본 #db5b22 를 흰 바탕 대비 4.5:1 이 되게 한 단계 어둡게 */
  --accent-big: #db5b22;      /* 24px 이상 큰 글씨용 (원본 실측) */
  --dark: #333;
  --w: 1100px;                /* 하위 페이지 본문 폭 (원본 1100) */
  --w-home: 1392px;           /* 홈 본문 폭 (원본 1392) */
  --ease: ease;               /* 원본 transition 이징 1035건 중 1035건이 ease */
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --f: 'Hanken Grotesk', 'Noto Sans KR', 'Malgun Gothic', sans-serif;   /* Theinhardt 대체 */
  --f-kr: 'Noto Sans KR', 'Malgun Gothic', sans-serif;                   /* NotoSans */
  --f-logo: 'Cormorant Garamond', 'Noto Serif KR', serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f); color: var(--ink2); background: #fff; font-size: 16px; line-height: 1.5; letter-spacing: -0.7px; word-break: keep-all; overflow-wrap: break-word; }
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
input { font: inherit; letter-spacing: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 0; top: -60px; z-index: 300; background: #000; color: #fff; padding: 10px 16px; font-family: var(--f-kr); }
.skip:focus { top: 0; }
:focus-visible { outline: 2px dashed currentColor; outline-offset: 2px; }
svg { display: block; }

/* ── 버튼 ── */
.btn-line { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border: 1px solid #222; color: #222; font-size: 14px; font-weight: 500; letter-spacing: -0.35px; background: #fff; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.btn-line:hover { background: #3a3a3a; color: #fff; border-color: #3a3a3a; }
.btn-line.big { height: 52px; min-width: 164px; font-size: 18px; }
.btn-line.sm { height: 34px; padding: 0 14px; font-size: 13px; font-weight: 700; }
.btn-black { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; background: #222; color: #fff; font-size: 18px; font-weight: 500; border: 1px solid #222; transition: background-color .4s var(--ease); }
.btn-black:hover { background: #000; }
.btn-black.sm { height: 34px; padding: 0 20px; font-size: 13px; }
.btn-black.big { min-width: 164px; }
.btn-black.wide { width: 300px; height: 48px; font-size: 15px; }
.btn-grey { height: 40px; padding: 0 18px; background: #888; color: #fff; font-size: 15px; }
.txt-link { display: inline-block; font-size: 14px; padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.kicker { font-size: 18px; color: var(--mute2); margin-bottom: 8px; }
.note { font-size: 13px; color: var(--mute2); }
.form-msg { min-height: 0; font-size: 14px; color: #c42b1c; font-family: var(--f-kr); }
.form-msg:empty { display: none; }
.form-msg.ok { color: #1d6b3a; }

/* ── 헤더 (원본: 2단 · 123px · 아래 1px 선) ── */
.hdr { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); transition: transform .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease); }
.hdr.is-hide { transform: translateY(-100%); }
.hdr-top { position: relative; width: var(--w); margin: 0 auto; height: 76px; display: flex; align-items: flex-start; justify-content: space-between; padding-top: 16px; }
.logo { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); color: var(--accent); transition: color .4s var(--ease); }
.logo-word { font-family: var(--f-logo); font-size: 38px; font-weight: 500; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.lang { position: relative; z-index: 3; }
.lang-btn { display: flex; align-items: center; gap: 8px; font-family: var(--f-kr); font-size: 15px; letter-spacing: -0.5px; height: 22px; transition: color .4s var(--ease); }
.lang-btn svg { width: 15px; transition: transform .25s var(--ease); }
.lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-list { position: absolute; top: 30px; left: 0; width: 230px; background: #fff; border: 1px solid #000; padding: 12px 0; display: none; font-family: var(--f-kr); font-size: 14px; letter-spacing: 0; color: #000; }
.lang-list.open { display: block; }
.lang-list a, .lang-list span { display: block; padding: 5px 17px; line-height: 20px; }
.lang-list .on { background: #eee; }
.lang-list span { color: var(--mute); }
.util { display: flex; align-items: center; font-family: var(--f-kr); font-size: 15px; height: 22px; transition: color .4s var(--ease); }
.util > a + a::before, .util .srch-btn::before { content: ''; display: inline-block; width: 1px; height: 12px; background: #ccc; margin: 0 15px; vertical-align: -1px; }
.srch-btn { display: flex; align-items: center; }
.srch-btn svg { width: 18px; height: 18px; }
.srch-btn .i-x, .srch-btn[aria-expanded="true"] .i-o { display: none; }
.srch-btn[aria-expanded="true"] .i-x { display: block; }
.burger { display: none; }
.gnb > ul { display: flex; justify-content: center; gap: 0 40px; height: 46px; }
.gnb-li { position: static; }
.gnb-a { position: relative; display: block; font-size: 16px; line-height: 38px; letter-spacing: normal; color: var(--mute); transition: color .4s var(--ease); }
.gnb-a::before { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: #000; opacity: 0; transition: opacity .3s var(--ease); }
.gnb-li.on > .gnb-a, .gnb-li:hover > .gnb-a, .gnb-li.open > .gnb-a { color: #000; }
.gnb-li:hover > .gnb-a::before, .gnb-li.open > .gnb-a::before { opacity: 1; }
.gnb-sub { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); visibility: hidden; opacity: 0; transition: opacity .25s var(--ease), visibility 0s .25s; }
.gnb-li.open .gnb-sub { visibility: visible; opacity: 1; transition: opacity .25s var(--ease); }
.gnb-sub > ul { position: relative; display: flex; gap: 0 30px; width: max-content; margin: 0 auto; padding: 0 0 14px; font-family: var(--f-kr); font-size: 15px; letter-spacing: 0; }
.gnb-sub a { display: block; line-height: 34px; color: var(--mute); transition: color .2s var(--ease); }
.gnb-sub a:hover, .gnb-sub a:focus-visible { color: #000; }
.gnb-sub3 a { font-size: 14px; color: var(--mute2); }

/* 홈: 키비주얼 위 투명 헤더 (원본: 로드 뒤 흰 바탕이 400ms 에 빠지고 글자가 흰색으로) */
.hdr.is-home { position: fixed; left: 0; right: 0; }
.hdr.is-clear:not(:hover):not(.is-open) { background: transparent; border-color: transparent; }
.hdr.is-clear:not(:hover):not(.is-open) .logo,
.hdr.is-clear:not(:hover):not(.is-open) .lang-btn,
.hdr.is-clear:not(:hover):not(.is-open) .util,
.hdr.is-clear:not(:hover):not(.is-open) .gnb-a { color: #fff; }
.hdr.is-clear:not(:hover):not(.is-open) .gnb-a::before { background: #fff; }
.hdr.is-clear.t-dark:not(:hover):not(.is-open) .logo,
.hdr.is-clear.t-dark:not(:hover):not(.is-open) .lang-btn,
.hdr.is-clear.t-dark:not(:hover):not(.is-open) .util,
.hdr.is-clear.t-dark:not(:hover):not(.is-open) .gnb-a { color: #222; }

/* 검색 레이어 */
.srch { position: absolute; left: 0; right: 0; top: 76px; background: #fff; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.srch.open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.srch-form { width: 700px; margin: 0 auto; padding: 36px 0 20px; text-align: center; }
.srch-row { display: flex; gap: 10px; align-items: center; }
.srch-ic { width: 22px; margin: 0 12px 0 16px; }
.srch-row input { flex: 1; height: 52px; border: 0; border-bottom: 2px solid #222; padding: 0 0 0 0; font-size: 17px; font-family: var(--f-kr); outline-offset: 4px; }
.srch-row { border-bottom: 0; }
.srch-row .srch-ic + label + input { margin-left: -50px; padding-left: 50px; }
.srch-row .btn-black { width: 90px; font-size: 16px; font-weight: 700; }
.srch .form-msg { margin-top: 10px; text-align: left; }
.srch-close { display: inline-flex; align-items: center; gap: 8px; margin-top: 38px; font-family: var(--f-kr); font-size: 15px; }
.srch-close svg { width: 15px; transform: rotate(180deg); }
.dim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .5); visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility 0s .3s; }
.dim.on { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }

/* 모바일 메뉴 */
.mnav { position: fixed; inset: 0; z-index: 200; visibility: hidden; transition: visibility 0s .35s; }
.mnav.open { visibility: visible; transition: none; }
.mnav-in { position: absolute; inset: 0; background: #fff; transform: translateX(-100%); transition: transform .35s var(--ease-out); overflow-y: auto; padding: 0 20px 40px; }
.mnav.open .mnav-in { transform: none; }
.mnav-top { position: relative; height: 56px; }
.mnav-top .logo { top: 12px; }
.mnav-top .logo-word { font-size: 28px; }
.mnav-x { position: absolute; right: 0; top: 16px; width: 24px; height: 24px; }
.mnav-list { border-top: 1px solid #000; margin-top: 8px; }
.mnav-list > li { border-bottom: 1px solid var(--line2); }
.m-a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; font-size: 18px; font-weight: 500; text-align: left; }
.m-btn svg { width: 16px; transition: transform .25s var(--ease); }
.m-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.acc-panel > * { overflow: hidden; }
.acc-panel.open { grid-template-rows: 1fr; }
.mnav .acc-panel ul { padding: 0 0 6px 10px; }
.mnav .acc-panel a { display: block; padding: 8px 0; font-family: var(--f-kr); font-size: 15px; color: var(--mute); }
.mnav .acc-panel a.deep { padding-left: 14px; font-size: 14px; }
.mnav-util { display: flex; gap: 20px; margin-top: 24px; font-family: var(--f-kr); font-size: 15px; }

/* ── 꼬리 (원본: 링크 15px #555 · 저작권 13px #767676) ── */
.ftr { margin-top: 0; border-top: 1px solid var(--line2); font-family: var(--f-kr); letter-spacing: .36px; }
.ftr-row { width: var(--w); margin: 0 auto; height: 56px; display: flex; align-items: center; }
.ftr-links { display: flex; flex-wrap: wrap; font-size: 15px; color: var(--foot); }
.ftr-links li + li::before { content: ''; display: inline-block; width: 1px; height: 12px; background: #ccc; margin: 0 14px; }
.ftr-links .b { font-weight: 700; }
.ftr-links a:hover { color: #000; }
.ftr-info { border-top: 1px solid var(--line2); }
.ftr-info p { width: var(--w); margin: 0 auto; font-size: 15px; color: var(--foot); }
.ftr-info p:first-child { padding-top: 22px; }
.ftr-info .copy { font-size: 13px; color: var(--mute2); padding: 4px 0 30px; }
.to-top { position: fixed; right: calc(50% - 550px - 7px); bottom: 0; z-index: 80; width: 60px; height: 60px; background: rgba(70, 70, 70, .8); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(60px); transition: opacity .2s ease-out, transform .2s ease-out; }
.to-top svg { width: 26px; }
.to-top.on { opacity: 1; transform: none; }

/* ── 등장 (원본: aos-init/aos-animate, 페이드업) ── */
[data-aos] { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
[data-aos].in { opacity: 1; transform: none; }

/* ══════════ 홈 ══════════ */
.main-home { padding-top: 0; }
.kv { position: relative; height: 507px; overflow: hidden; }
.kv-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1s var(--ease); }
.kv-slide.on { opacity: 1; pointer-events: auto; z-index: 1; }
.kv-slide a { display: block; height: 100%; }
.kv-img, .kv-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kv-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 60%); }
.t-dark .kv-img::after { background: linear-gradient(90deg, rgba(255, 245, 235, .78), rgba(255, 245, 235, 0) 62%); }
.kv-txt { position: absolute; left: 130px; top: 276px; color: #fff; }
.t-dark .kv-txt { color: #222; }
.kv-s { display: block; font-size: 18px; line-height: 27px; letter-spacing: -0.7px; }
.kv-m { display: block; margin-top: 10px; font-size: 36px; line-height: 54px; font-weight: 700; letter-spacing: -0.7px; }
.kv-slide.on .kv-s { animation: kv-text 1.3s linear .3s both; }
.kv-slide.on .kv-m { animation: kv-text 1.3s linear .5s both; }
@keyframes kv-text { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
.kv-ctrl { position: absolute; z-index: 3; left: 130px; top: 415px; display: flex; align-items: center; gap: 12px; }
.kv-bar { width: 420px; height: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.kv-fill { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(.25); transition: transform 1s var(--ease); }
.kv.t-dark .kv-bar { background: rgba(0, 0, 0, .15); }
.kv.t-dark .kv-fill { background: #222; }
.kv-pause, .pick-pause { width: 20px; height: 20px; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; color: #fff; }
.kv.t-dark .kv-pause { color: #222; }
.kv-pause svg, .pick-pause svg { width: 12px; }
.i-play, .paused .i-pause { display: none; }
.paused .i-play { display: block; }
.kv-arw, .pick-arw { position: absolute; z-index: 3; top: 220px; width: 68px; height: 68px; background: rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center; color: #222; transition: background-color .4s var(--ease); }
.kv-arw:hover, .pick-arw:hover { background: rgba(255, 255, 255, .7); }
.kv-arw svg, .pick-arw svg { width: 26px; }
.kv-arw.prev { left: 0; }
.kv-arw.next { right: 0; }

.h-sec { width: var(--w-home); margin: 120px auto 0; }
.h-tit { font-size: 28px; line-height: 42px; font-weight: 700; color: #000; letter-spacing: -0.7px; margin-bottom: 20px; }
.pick { position: relative; }
.pick-view { overflow: hidden; }
.pick-track { display: flex; gap: 24px; transition: transform 1s var(--ease); }
.pc { flex: 0 0 calc((100% - 48px) / 3); text-align: center; }
.pc-img { display: block; aspect-ratio: 1; background: var(--card); overflow: hidden; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pc a:hover .pc-img img { transform: scale(1.04); }
.pc-name { display: block; margin-top: 26px; font-size: 20px; line-height: 30px; font-weight: 700; color: #000; letter-spacing: -0.5px; }
.pc-en { display: block; font-size: 16px; line-height: 24px; color: var(--ink3); letter-spacing: -0.4px; }
.pc-price { display: block; margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 500; color: #000; letter-spacing: -0.4px; }
.pick-arw { top: 193px; background: rgba(255, 255, 255, .55); }
.pick-arw.prev { left: 0; }
.pick-arw.next { right: 0; }
.pick-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; }
.pick-bar { width: 420px; height: 3px; background: var(--line); overflow: hidden; }
.pick-fill { display: block; height: 100%; background: #000; transform-origin: 0 50%; transform: scaleX(.333); transition: transform 1s var(--ease); }
.pick-pause { color: #000; }

.best-ban { position: relative; display: block; height: 522px; overflow: hidden; background: #f3d6c0; }
.best-ban img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.best-ban:hover img { transform: scale(1.03); }
.best-ban::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 244, 236, .9) 0, rgba(255, 244, 236, .55) 35%, rgba(255, 244, 236, 0) 60%); }
.best-txt { position: absolute; z-index: 1; left: 163px; top: 50%; transform: translateY(-50%); color: #222; }
.best-txt strong { display: block; font-size: 32px; line-height: 48px; font-weight: 700; letter-spacing: -0.8px; }
.best-txt > span:not(.btn-line) { display: block; margin: 12px 0 28px; font-size: 18px; line-height: 27px; letter-spacing: -0.45px; }
.best-txt .btn-line { background: transparent; }

.season { display: grid; grid-template-columns: 330fr 684fr 330fr; gap: 24px; height: 512px; }
.ss-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 16px 36px; background: var(--card); text-align: center; overflow: hidden; }
.ss-img { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 34px 0 20px; }
.ss-img img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; }
.ss-card strong { font-size: 20px; line-height: 30px; font-weight: 700; color: #000; }
.ss-card .pc-en { color: var(--mute3); font-size: 14px; }
.ss-card .pc-price { margin-top: 8px; }
.ss-main { position: relative; display: block; overflow: hidden; }
.ss-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ss-main:hover img { transform: scale(1.03); }
.ss-main::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(0deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); }
.ss-txt { position: absolute; z-index: 1; left: 36px; bottom: 30px; }
.ss-txt strong { display: block; font-size: 24px; line-height: 36px; font-weight: 700; color: #000; letter-spacing: -0.6px; }
.ss-txt span { font-size: 16px; color: var(--mute); letter-spacing: -0.4px; }

.h-store { margin: 40px 0 0; text-align: center; padding-bottom: 66px; }
.store-img { display: block; height: 335px; overflow: hidden; }
.store-img img { width: 100%; height: 100%; object-fit: cover; }
.h-store h2 { margin: 18px 0 16px; font-size: 28px; line-height: 42px; font-weight: 700; color: #222; }
.h-store .btn-line { width: 136px; }

/* ══════════ 하위 공통 ══════════ */
.sub-tabs ul { display: flex; justify-content: center; gap: 30px; padding: 28px 0 22px; font-family: var(--f-kr); font-size: 16px; letter-spacing: -0.5px; }
.sub-tabs a { color: var(--mute2); padding-bottom: 6px; border-bottom: 2px solid transparent; }
.sub-tabs a.on { color: #000; font-weight: 700; border-color: #000; }

/* 드롭다운 공통 */
.dd { position: relative; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dd-btn svg { width: 15px; transition: transform .25s var(--ease); }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #222; display: none; font-family: var(--f-kr); }
.dd-list.open { display: block; }
.dd-list a, .dd-list button { display: block; width: 100%; text-align: left; padding: 9px 16px; font-size: 15px; color: var(--mute); }
.dd-list a:hover, .dd-list button:hover, .dd-list .on { color: #000; background: #f4f4f4; }

/* ══════════ 카테고리 (원본: 배너 1100×258 · 4열 263px · 거터 16) ══════════ */
.cat { width: var(--w); margin: 0 auto; padding-bottom: 80px; }
.cat-ban { height: 258px; overflow: hidden; background: #e8682c; }
.cat-ban img { width: 100%; height: 100%; object-fit: cover; }
.cat-filter { display: flex; align-items: stretch; margin-top: 40px; border-bottom: 1px solid var(--line); height: 56px; }
.cat-filter > .dd { width: 170px; flex: none; margin-right: 0; white-space: nowrap; }
.cat-filter .dd-btn { height: 56px; width: 100%; padding: 0 16px 0 20px; font-family: var(--f-kr); font-size: 17px; font-weight: 500; color: #222; }
.cat-tabs { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; padding: 0 30px; background: #fbfbfa; font-family: var(--f-kr); font-size: 15px; font-weight: 500; }
.cat-tabs a { color: var(--mute3); line-height: 56px; }
.cat-tabs a.on { color: #222; font-weight: 700; }
.cat-tabs a:hover { color: #222; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.cc a { position: relative; display: flex; flex-direction: column; height: 393px; padding: 22px 20px 0; background: var(--card); font-family: var(--f-kr); overflow: hidden; }
.cc-name { font-size: 18px; line-height: 22px; font-weight: 700; color: #222; padding-right: 30px; }
.cc-en { margin-top: 4px; font-family: var(--f); font-size: 14px; line-height: 15px; color: #444; }
.cc-price { margin-top: 22px; font-size: 18px; line-height: 18px; font-weight: 700; color: #222; }
.cc-vol { margin-top: 6px; font-size: 12px; color: var(--mute); }
.cc-img { flex: 1; margin: 20px -20px 0; overflow: hidden; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cc a:hover .cc-img img { transform: scale(1.04); }
.badge { position: absolute; z-index: 2; top: 0; right: 10px; width: 36px; padding: 12px 0; background: #000; color: #fff; font-family: var(--f); font-size: 15px; font-weight: 600; letter-spacing: .5px; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 46px; font-size: 15px; color: var(--mute3); }
.pager .pg-now { color: #000; font-weight: 700; }
.pager button { width: 38px; height: 38px; background: #ddd; color: #fff; display: flex; align-items: center; justify-content: center; }
.pager button svg { width: 16px; }
.pager button:disabled { opacity: .45; cursor: default; }
.pager .pg-prev { margin-right: 8px; }
.pager .pg-next { margin-left: 8px; }
.empty { margin-top: 60px; text-align: center; color: var(--mute); }

/* ══════════ 베스트 셀러 ══════════ */
.bs-head { text-align: center; padding: 40px 0 34px; }
.bs-head h1 { font-size: 30px; line-height: 30px; font-weight: 500; color: #000; letter-spacing: normal; }
.bs-head p { margin-top: 12px; font-size: 15px; font-weight: 500; color: #000; letter-spacing: -0.15px; }
.bs-row { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 64px; }
.bs-ph { aspect-ratio: 1; overflow: hidden; }
.bs-ph img { width: 100%; height: 100%; object-fit: cover; }
.bs-info { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.bs-cut { width: 210px; height: 250px; overflow: hidden; margin-bottom: 36px; }
.bs-cut img { width: 100%; height: 100%; object-fit: cover; }
.bs-info strong { font-size: 18px; line-height: 27px; font-weight: 700; color: #000; letter-spacing: -0.18px; }
.bs-info p { margin-top: 8px; font-size: 13.5px; line-height: 18px; font-weight: 500; color: #000; }
.bs-price { margin: 10px 0 24px; font-size: 16.5px; font-weight: 700; color: #000; }
.bs-slide { position: relative; width: var(--w); margin: 0 auto; padding: 100px 80px 150px; }
.bsl { text-align: center; }
.bsl-img { display: block; height: 260px; overflow: hidden; margin: 0 20px 34px; }
.bsl-img img { width: 100%; height: 100%; object-fit: cover; }
.bsl strong { font-size: 16.5px; line-height: 24.75px; font-weight: 700; color: #000; }
.bsl p { margin-top: 8px; font-size: 13px; line-height: 18px; color: #000; }
.bsl-price { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: #000; }
.bsl-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; font-size: 12px; color: var(--mute); }
.bsl-go svg { width: 10px; }

/* 슬라이더 공통 */
[data-slider] { position: relative; }
.sl-view { overflow: hidden; }
.sl-track { display: flex; transition: transform 1s var(--ease); }
.sl-track > li { flex: 0 0 calc(100% / var(--per, 1)); min-width: 0; }
.sl-arw { position: absolute; top: 50%; z-index: 3; width: 60px; height: 60px; margin-top: -30px; display: flex; align-items: center; justify-content: center; color: #222; background: rgba(255, 255, 255, .7); transition: background-color .3s var(--ease), opacity .3s var(--ease); }
.sl-arw svg { width: 24px; }
.sl-arw.prev { left: 0; }
.sl-arw.next { right: 0; }
.sl-arw.box { background: #fff; border: 1px solid #000; width: 60px; height: 60px; }
.sl-arw:disabled { opacity: .3; cursor: default; }
.bs-slide .sl-arw { top: 220px; }
.sl-dots { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
.sl-dots button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #444; background: #fff; }
.sl-dots button[aria-current="true"] { background: #444; }

/* ══════════ 제품 상세 ══════════ */
.pdp { padding-bottom: 120px; }
.pdp-top { width: var(--w); margin: 40px auto 0; display: grid; grid-template-columns: 540px 1fr; gap: 0 60px; }
.pdp-gal { background: var(--card); height: 690px; }
.pdp-gal .sl-view, .pdp-gal .sl-track { height: 540px; }
.pdp-gal .sl-track li { height: 540px; }
.pdp-gal .sl-track img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gal .sl-arw { top: 270px; width: 68px; height: 68px; margin-top: -34px; background: rgba(255, 255, 255, .5); }
.pdp-gal .sl-dots { margin-top: 36px; }
.pdp-gal .badge { right: 20px; padding: 14px 0; width: 36px; }
.pdp-info { position: relative; padding-top: 0; }
.pdp-tags { font-family: var(--f-kr); font-size: 15px; color: var(--mute); }
.pdp-name { margin-top: 12px; font-size: 32px; line-height: 42px; font-weight: 500; color: #222; }
.pdp-en { margin-top: 8px; font-size: 19px; color: var(--mute2); }
.share { position: absolute; right: 0; top: 30px; width: 38px; height: 38px; border-radius: 50%; background: #e4e4e4; color: #888; display: flex; align-items: center; justify-content: center; }
.share svg { width: 18px; }
.pdp-rate { display: flex; align-items: center; gap: 4px; margin-top: 72px; font-size: 16px; }
.stars { display: inline-flex; gap: 2px; color: #222; }
.stars svg { width: 20px; }
.pdp-rate button { text-decoration: underline; text-underline-offset: 3px; }
.pdp-desc { margin-top: 8px; font-family: var(--f-kr); font-size: 18px; line-height: 27px; color: #222; }
.pdp-price { margin-top: 36px; font-size: 24px; font-weight: 700; color: #222; }
.pdp-price span { font-size: 21px; }
.pdp-vol { margin-top: 12px; font-family: var(--f-kr); font-size: 16px; }
.pdp-vol span { margin-right: 18px; }
.pdp-spec { margin-top: 64px; font-family: var(--f-kr); font-size: 16px; }
.pdp-spec > div { display: flex; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid #e4e4e4; }
.pdp-spec dt::before { content: ''; display: inline-block; width: 10px; height: 10px; border: 1px solid #222; margin-right: 8px; vertical-align: 0; }
.pdp-btns { display: flex; gap: 18px; margin-top: 86px; }
.buy { width: 242px; }
.buy-btn { width: 100%; justify-content: space-between; font-size: 16px; font-weight: 700; }
.buy-btn svg { width: 16px; transform: rotate(180deg); }
.buy-btn[aria-expanded="true"] svg { transform: none; }
.buy-list { top: auto; bottom: 100%; border-color: #222; }
.buy-list a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; }
.buy-list strong { color: #222; font-size: 15px; }
.buy-list span { font-size: 13px; color: var(--mute2); }
.pdp-btns .btn-line.big { width: 242px; font-size: 16px; font-weight: 700; }
.pdp-nav { position: sticky; top: 0; z-index: 50; margin-top: 80px; background: #fff; border-bottom: 1px solid #f0f0f0; }
.pdp-nav ul { width: var(--w); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-family: var(--f-kr); font-size: 20px; }
.pdp-nav button { display: block; line-height: 66px; color: var(--mute); border-bottom: 2px solid transparent; }
.pdp-nav button.on { color: #000; font-weight: 700; border-color: #222; }
.pdp-detail { width: 720px; margin: 80px auto 0; }
.pd-blk { position: relative; height: 640px; overflow: hidden; background: var(--bg, #ddd); }
.pd-blk + .pd-blk { margin-top: 0; }
.pd-blk img { width: 100%; height: 100%; object-fit: cover; }
.pd-blk::after { content: ''; position: absolute; inset: 0 0 auto; height: 55%; background: linear-gradient(180deg, rgba(255, 250, 245, .85), rgba(255, 250, 245, 0)); }
.pd-txt { position: absolute; z-index: 1; left: 0; right: 0; top: 80px; text-align: center; padding: 0 70px; font-family: var(--f-kr); color: #111; }
.pd-txt p { font-size: 22px; line-height: 38px; }
.pd-txt strong { display: block; margin-top: 18px; font-size: 34px; font-weight: 700; }
.pd-how { padding: 60px 0 0; font-family: var(--f-kr); }
.pd-how h3 { font-size: 22px; margin-bottom: 14px; }
.pd-how ol { list-style: decimal; padding-left: 20px; line-height: 2; color: var(--ink3); }
.pdp-acc { width: var(--w); margin: 100px auto 0; font-family: var(--f-kr); scroll-margin-top: 70px; }
.pdp-acc h2 { font-size: 30px; font-weight: 700; color: #222; padding-bottom: 24px; }
.rv-head { display: flex; align-items: center; gap: 16px; padding: 24px 0 50px; border-bottom: 1px solid #e4e4e4; }
.rv-head .stars svg { width: 30px; }
.rv-avg { font-size: 18px; }
.sort { margin-left: auto; width: 216px; }
.sort .dd-btn { width: 100%; height: 44px; border-bottom: 1px solid #222; padding: 0 14px; font-size: 18px; color: var(--mute); }
.rv { display: grid; grid-template-columns: 250px 1fr; padding: 44px 0 40px; border-bottom: 1px solid #e4e4e4; }
.rv-meta { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--mute2); }
.rv-meta .stars svg { width: 22px; }
.rv-body p { font-size: 19px; line-height: 30px; color: #444; }
.rv-img { display: block; width: 136px; height: 180px; margin-top: 30px; overflow: hidden; }
.rv-img img { width: 100%; height: 100%; object-fit: cover; }
.with { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.with a { display: block; text-align: center; }
.with-img { display: block; aspect-ratio: 1; background: var(--card); overflow: hidden; margin-bottom: 18px; }
.with-img img { width: 100%; height: 100%; object-fit: cover; }
.with strong { display: block; font-size: 18px; }
.with span:last-child { font-size: 15px; color: var(--mute); }
.acc { border-top: 1px solid #222; }
.acc-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 22px 6px; font-size: 18px; font-weight: 500; border-bottom: 1px solid #e4e4e4; text-align: left; }
.acc-btn svg { width: 16px; transition: transform .25s var(--ease); }
.acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc .acc-panel p { padding: 20px 6px 26px; font-size: 15px; line-height: 1.8; color: #444; border-bottom: 1px solid #e4e4e4; }
.pdp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 1px solid #eee; transform: translateY(100%); transition: transform .4s var(--ease); }
.pdp-bar.on { transform: none; }
.pdp-bar-in { width: var(--w); margin: 0 auto; height: 100px; display: flex; align-items: center; gap: 18px; }
.pdp-bar-in > div { flex: 1; }
.pdp-bar strong { display: block; font-size: 30px; font-weight: 500; color: #222; }
.pdp-bar span { font-size: 19px; color: var(--mute2); }
.pdp-bar .btn-black, .pdp-bar .btn-line { width: 256px; font-size: 16px; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 130px; z-index: 120; transform: translate(-50%, 10px); background: #222; color: #fff; padding: 12px 22px; font-family: var(--f-kr); font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ══════════ 라인 소개 (원본: 윤조 · 자음생 소개, 섹션 높이 855 · 1050 · 885 · 885 · 2130 · 957 · 825 · 1174 · 498 · 835) ══════════ */
.ln section { position: relative; }
.ln-kv { height: 855px; overflow: hidden; }
.ln-kv > img { width: 100%; height: 100%; object-fit: cover; }
.ln-kv::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .45)); }
.ln-kv-txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 110px; text-align: center; color: #fff; }
.ln-kv-txt p { font-size: 22px; font-weight: 500; }
.ln-kv-txt h1 { font-size: 56px; line-height: 1.3; font-weight: 700; letter-spacing: -1.5px; }
.ln-intro { height: 1050px; background: linear-gradient(115deg, #fbe4d3 0, var(--g1) 45%, var(--g2) 100%); text-align: center; padding-top: 120px; overflow: hidden; }
.ln-s { font-size: 22px; font-weight: 500; color: #222; }
.ln-intro h2 { margin-top: 18px; font-size: 40px; font-weight: 700; color: #222; letter-spacing: -1px; }
.ln-intro-img { width: 620px; height: 720px; margin: 50px auto 0; overflow: hidden; }
.ln-intro-img img { width: 100%; height: 100%; object-fit: cover; }
.ln-stats { min-height: 885px; display: flex; flex-direction: column; justify-content: center; text-align: center; background: #fff; }
.ln-stats h2 { font-size: 34px; font-weight: 700; color: #222; }
.ln-stats ul { display: grid; grid-template-columns: repeat(3, 1fr); width: var(--w); margin: 70px auto 40px; }
.ln-stats li + li { border-left: 1px solid var(--line); }
.ln-stats strong { display: block; font-size: 48px; font-weight: 700; color: var(--accent-big); letter-spacing: -1px; }
.ln-stats span { display: block; margin-top: 10px; font-size: 18px; color: var(--ink3); }
.ln-cta { height: 885px; display: grid; grid-template-columns: 712px 1fr; align-items: center; padding: 150px 0; }
.ln-cta-img { height: 720px; overflow: hidden; }
.ln-cta-img img { width: 100%; height: 100%; object-fit: cover; }
.ln-cta-info { padding-left: 180px; }
.ln-cta-info h2 { font-size: 32px; font-weight: 700; color: #222; }
.ln-cta-info .en { margin-top: 10px; font-size: 18px; font-weight: 600; color: var(--mute3); }
.ln-cta-info .tl { margin-top: 36px; font-size: 18px; font-weight: 700; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 44px; max-width: 320px; font-size: 19px; }
.sizes span { color: var(--mute3); margin-right: 8px; }
.sizes strong { font-weight: 700; color: #222; }
.ln-cta .btns { display: flex; gap: 10px; margin-top: 60px; }
.ln-story { min-height: 2130px; padding: 200px 0 160px; background: #fff; }
.ln-story-txt { width: var(--w); margin: 0 auto; text-align: center; }
.ln-story-txt h2 { font-size: 40px; font-weight: 700; letter-spacing: -1px; }
.ln-story-txt p { width: 640px; margin: 30px auto 0; font-size: 19px; line-height: 34px; color: var(--ink3); }
.ln-story-imgs { position: relative; width: var(--w); height: 1300px; margin: 120px auto 0; }
.ln-story-imgs span { position: absolute; overflow: hidden; }
.ln-story-imgs span:first-child { left: 0; top: 0; width: 600px; height: 760px; }
.ln-story-imgs span:last-child { right: 0; top: 480px; width: 440px; height: 600px; }
.ln-story-imgs img { width: 100%; height: 100%; object-fit: cover; }
.ln-ing { min-height: 957px; background: #1b1512; color: #fff; display: flex; align-items: center; }
.ln-ing ul { width: var(--w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.ln-ing h3 { font-size: 34px; font-weight: 700; color: #f4b48c; }
.ln-ing p { margin-top: 24px; font-size: 18px; line-height: 32px; color: #e6e1dd; }
.ln-tech { min-height: 825px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: #f7f2ee; }
.ln-tech-img { height: 825px; overflow: hidden; }
.ln-tech-img img { width: 100%; height: 100%; object-fit: cover; }
.ln-tech-txt { padding: 0 120px; }
.ln-tech-txt h2 { font-size: 36px; font-weight: 700; }
.ln-tech-txt p { margin-top: 24px; font-size: 18px; line-height: 32px; color: var(--ink3); }
.ln-steps { min-height: 1174px; padding: 180px 0 0; text-align: center; }
.ln-steps h2 { font-size: 40px; font-weight: 700; letter-spacing: -1px; }
.ln-steps ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; width: var(--w); margin: 90px auto 50px; }
.ln-steps li { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--accent-big); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ln-steps span { font-size: 18px; color: var(--ink3); }
.ln-steps strong { margin-top: 6px; font-size: 32px; font-weight: 700; color: var(--accent-big); }
.ln-video { height: 498px; overflow: hidden; }
.ln-video > img { width: 100%; height: 100%; object-fit: cover; }
.ln-video::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.ln-video-txt { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; }
.ln-video-txt h2 { font-size: 36px; font-weight: 700; }
.ln-video-txt p { margin-top: 16px; font-size: 18px; }
.ln-heritage { min-height: 835px; display: grid; grid-template-columns: 1fr 560px; gap: 80px; align-items: center; width: var(--w); margin: 0 auto; }
.ln-heritage h2 { font-size: 36px; font-weight: 700; }
.ln-heritage p { margin-top: 24px; font-size: 18px; line-height: 32px; color: var(--ink3); }
.ln-heritage > span { height: 620px; overflow: hidden; }
.ln-heritage img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════ 기프트 ══════════ */
.g-kv { position: relative; height: 801px; overflow: hidden; }
.g-kv > img { width: 100%; height: 100%; object-fit: cover; }
.g-kv::after { content: ''; position: absolute; inset: 0; background: rgba(40, 14, 4, .42); }
.g-kv-txt { position: absolute; z-index: 1; left: 0; right: 0; top: 300px; text-align: center; color: #fff; }
.g-kv-txt h1 { font-size: 48px; font-weight: 500; letter-spacing: -1px; }
.g-kv-txt p { margin: 24px 0 30px; font-family: var(--f-kr); font-size: 17px; line-height: 28px; }
.g-wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 893px; }
.g-wrap-img { height: 893px; overflow: hidden; }
.g-wrap-img img { width: 100%; height: 100%; object-fit: cover; }
.g-wrap-txt { padding: 0 140px; }
.g-wrap-txt h2 { font-size: 40px; font-weight: 700; }
.g-wrap-txt .en { font-size: 18px; color: var(--mute3); margin: 6px 0 30px; }
.g-wrap-txt p:last-child { font-size: 18px; line-height: 32px; color: var(--ink3); }
.g-kinds { padding: 72px 0 0; text-align: center; min-height: 683px; }
.g-kinds h2 { font-size: 34px; font-weight: 700; }
.g-kinds ul { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: var(--w); margin: 48px auto 0; text-align: left; }
.g-kinds li > span { display: block; height: 330px; overflow: hidden; }
.g-kinds img { width: 100%; height: 100%; object-fit: cover; }
.g-kinds h3 { margin-top: 20px; font-size: 22px; }
.g-kinds p { margin-top: 8px; font-size: 16px; color: var(--mute); }
.g-engrave { padding: 100px 0 100px; min-height: 1617px; }
.g-eng-head { width: var(--w); margin: 0 auto; text-align: center; }
.g-eng-head h2 { font-size: 34px; font-weight: 700; }
.g-eng-head p { margin-top: 16px; font-size: 18px; color: var(--ink3); }
.g-eng-head dl { margin: 30px 0; font-size: 16px; }
.g-eng-head dt { font-weight: 700; margin-bottom: 4px; }
.g-eng-imgs { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 20px; margin-top: 90px; height: 800px; }
.g-eng-imgs li { overflow: hidden; }
.g-eng-imgs li:nth-child(2) { margin-top: 120px; }
.g-eng-imgs img { width: 100%; height: 100%; object-fit: cover; }
.g-info { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 846px; }
.g-info-img { height: 846px; overflow: hidden; }
.g-info-img img { width: 100%; height: 100%; object-fit: cover; }
.g-info > p { padding: 0 120px; font-size: 26px; line-height: 42px; font-weight: 500; color: #222; }
.g-set { background: #fdeee5; padding: 116px 0 116px; }
.g-set .btn-black { background-color: #222; }
.g-set ul { display: grid; grid-template-columns: repeat(3, 297px); gap: 22px; justify-content: center; }
.g-set li { text-align: center; }
.g-set-img { display: block; height: 370px; background: #fff; overflow: hidden; margin-bottom: 26px; }
.g-set-img img { width: 100%; height: 100%; object-fit: cover; }
.g-set strong { display: block; font-size: 21px; font-weight: 700; color: #000; }
.g-set-price { display: block; margin: 4px 0 20px; font-size: 21px; color: #000; }
.g-set-price small { font-size: 17px; }
.g-set .btn-black.sm { width: 176px; }

/* ══════════ 스파 ══════════ */
.spa-1 { padding: 118px 0 0; text-align: center; }
.spa-logo { display: inline-flex; align-items: baseline; gap: 12px; color: var(--accent); }
.spa-logo span:last-child { font-size: 22px; letter-spacing: 3px; color: #222; }
.spa-hero { width: 816px; height: 460px; margin: 88px auto 0; overflow: hidden; }
.spa-hero img { width: 100%; height: 100%; object-fit: cover; }
.spa-lead { width: 573px; margin: 60px auto 0; }
.spa-lead .b { font-size: 22px; font-weight: 700; color: #222; }
.spa-lead p:last-child { margin-top: 18px; font-size: 17px; line-height: 30px; color: var(--ink3); }
.spa-2 { padding: 110px 0 100px; text-align: center; }
.spa-rl { font-size: 20px; line-height: 34px; font-weight: 500; color: #222; }
.spa-2 ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: var(--w); margin: 60px auto 0; }
.spa-2 li { position: relative; height: 283px; overflow: hidden; }
.spa-2 img { width: 100%; height: 100%; object-fit: cover; }
.spa-2 li span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent); color: #fff; font-size: 16px; text-align: left; }
.spa-3 { position: relative; height: 889px; overflow: hidden; color: #fff; }
.spa-bg-i { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.spa-bg-i.on { opacity: 1; }
.spa-bg-i img { width: 100%; height: 100%; object-fit: cover; }
.spa-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .52); }
.spa-3-in { position: relative; z-index: 1; width: var(--w); margin: 0 auto; padding-top: 120px; }
.spa-3 h2 { font-size: 32px; font-weight: 700; }
.spa-tabs { display: flex; gap: 10px; margin: 60px 0 50px; }
.spa-tabs button { min-width: 120px; height: 46px; border: 1px solid rgba(255, 255, 255, .7); color: #fff; font-size: 17px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.spa-tabs button[aria-selected="true"] { background: #fff; color: #222; }
.spa-panel { width: 653px; }
.spa-panel h3 { font-size: 28px; font-weight: 700; }
.spa-panel p { margin-top: 18px; font-size: 18px; line-height: 30px; }

/* 모달 */
.modal { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: 600px; max-width: calc(100% - 40px); background: #fff; padding: 36px 30px 26px; text-align: center; font-family: var(--f-kr); }
.modal-x { position: absolute; right: 18px; top: 16px; width: 20px; height: 20px; }
.modal-logo { color: var(--accent); }
.modal-box h2 { margin-top: 40px; font-size: 16px; font-weight: 700; color: #222; }
.modal-box p { font-size: 15px; line-height: 24px; color: var(--ink3); }
.modal-ok { margin-top: 26px; width: 146px; }
.chk { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 15px; color: var(--mute); text-align: left; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: #222; }

/* ══════════ 플래그십 ══════════ */
.fs-kv { position: relative; height: 740px; overflow: hidden; }
.fs-kv > img { width: 100%; height: 100%; object-fit: cover; }
.fs-kv::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.fs-kv h1 { position: absolute; z-index: 1; left: 0; right: 0; top: 200px; text-align: center; color: #fff; font-size: 42px; line-height: 68px; font-weight: 600; letter-spacing: 3px; }
.fs-scroll { position: absolute; z-index: 1; left: 50%; bottom: 22px; transform: translateX(-50%); color: #fff; font-size: 12px; letter-spacing: 1px; }
.fs-intro { width: 760px; margin: 0 auto; padding: 120px 0; text-align: center; }
.fs-intro h2 { font-size: 30px; font-weight: 700; }
.fs-intro p { margin-top: 24px; font-size: 18px; line-height: 32px; color: var(--ink3); }
.fs-gallery { width: var(--w); margin: 0 auto; text-align: center; }
.fs-gallery h2, .fs-history h2, .fs-rooms h2 { font-size: 30px; font-weight: 500; letter-spacing: 3px; }
.fs-gtabs, .fs-rtabs { display: flex; justify-content: center; gap: 30px; margin: 34px 0 30px; font-family: var(--f-kr); font-size: 17px; }
.fs-gtabs button, .fs-rtabs button { color: var(--mute2); padding-bottom: 6px; border-bottom: 2px solid transparent; }
.fs-gtabs button[aria-selected="true"], .fs-rtabs button[aria-selected="true"] { color: #000; font-weight: 700; border-color: #000; }
.fs-gp { height: 600px; overflow: hidden; }
.fs-gp img { width: 100%; height: 100%; object-fit: cover; }
.fs-quote { padding: 120px 0 60px; text-align: center; font-size: 22px; font-weight: 500; letter-spacing: 1px; color: #222; }
.fs-history { position: relative; width: 1440px; max-width: 100%; margin: 0 auto; padding: 60px 0 120px; min-height: 1800px; }
.fs-history h2 { text-align: center; }
.fs-h-txt { position: relative; z-index: 1; width: 600px; margin: 80px 0 0 120px; }
.fs-h-item { margin-bottom: 420px; }
.fs-h-item h3 { font-size: 24px; font-weight: 700; line-height: 1.5; }
.fs-h-item p { margin-top: 16px; font-size: 17px; line-height: 30px; color: var(--ink3); }
.fs-h-figs .fig { position: absolute; overflow: hidden; }
.fs-h-figs img { width: 100%; height: 100%; object-fit: cover; }
.fig1 { right: 0; top: 150px; width: 688px; height: 600px; }
.fig2 { left: 0; top: 560px; width: 520px; height: 374px; }
.fig3 { right: 0; top: 820px; width: 688px; height: 452px; }
.fig4 { left: 0; top: 1060px; width: 600px; height: 520px; }
.fig5 { right: 0; top: 1350px; width: 688px; height: 368px; }
.fs-rooms { width: var(--w); margin: 0 auto; text-align: center; padding-bottom: 120px; }
.fs-rp [data-slider] { --per: 3; }
.fs-rp .sl-track > li { padding: 0 10px; text-align: left; }
.rm-img { display: block; height: 380px; overflow: hidden; }
.rm-img img { width: 100%; height: 100%; object-fit: cover; }
.fs-rp strong { display: block; margin-top: 18px; font-size: 19px; }
.fs-rp strong em { font-style: normal; font-weight: 400; color: var(--mute3); }
.fs-rp p { font-size: 15px; color: var(--mute); }
.fs-rp .sl-arw { top: 190px; }
.fs-service, .fs-visit { width: var(--w); margin: 0 auto; padding: 100px 0; border-top: 1px solid var(--line); text-align: center; }
.fs-service h2, .fs-visit h2 { font-size: 26px; font-weight: 500; letter-spacing: 3px; }
.fs-service h3 { margin-top: 30px; font-size: 22px; }
.fs-service dl, .fs-visit dl { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 12px 60px; margin-top: 30px; font-family: var(--f-kr); font-size: 16px; text-align: left; }
.fs-service dl > div, .fs-visit dl > div { display: flex; gap: 16px; }
.fs-service dt, .fs-visit dt { font-weight: 700; min-width: 70px; }

/* ══════════ 브랜드 스토리 ══════════ */
.dotnav { position: fixed; left: 22px; top: 50%; z-index: 60; transform: translateY(-50%); }
.dotnav ul { display: flex; flex-direction: column; gap: 9px; }
.dotnav button { display: block; width: 13px; height: 13px; border-radius: 50%; background: #888; border: 1px solid #888; position: relative; transition: background-color .3s var(--ease); }
.dotnav button.on { background: #fff; border-color: var(--accent-big); }
.dotnav button span { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; color: #222; background: #fff; padding: 2px 8px; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.dotnav button:hover span, .dotnav button:focus-visible span { opacity: 1; }
.st-hero { padding: 120px 0 0; }
.st-hero-img { width: 1220px; max-width: calc(100% - 80px); height: 580px; margin: 0 auto; overflow: hidden; }
.st-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.st-film { position: relative; height: 540px; margin-top: 118px; overflow: hidden; }
.st-film img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.st-film-logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.st-film-logo .logo-word { font-size: 64px; }
.st-film-logo span:last-child { font-family: var(--f-logo); font-size: 22px; letter-spacing: 1px; }
.st-sec { width: 1170px; max-width: calc(100% - 80px); margin: 0 auto; padding: 160px 0 120px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; align-items: end; }
.st-sec.st-r .st-imgs { order: 2; }
.st-imgs { display: flex; gap: 16px; align-items: flex-start; }
.st-imgs span { flex: 1; height: 430px; overflow: hidden; }
.st-imgs span + span { height: 258px; }
.st-imgs img { width: 100%; height: 100%; object-fit: cover; }
.st-txt .kicker { color: #000; font-size: 19.5px; font-weight: 600; letter-spacing: -1px; }
.st-txt h2 { font-size: 39px; line-height: 48px; font-weight: 600; letter-spacing: -1px; color: #000; margin-bottom: 40px; }
.st-txt p:not(.kicker) { font-size: 15px; line-height: 25px; color: var(--ink3); }
.st-txt p + p:not(.kicker) { margin-top: 16px; }
.st-journey { position: relative; height: 1800px; background: var(--dark); color: #fff; }
.st-j-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 calc(50% - 600px); }
.st-j-pin h2 { font-size: 52.5px; font-weight: 500; letter-spacing: 2.6px; }
.st-j-view { margin-top: 30px; }
.st-j-track { display: flex; gap: 70px; width: max-content; align-items: flex-end; height: 420px; will-change: transform; }
.st-j-track li { width: 232px; display: flex; flex-direction: column; }
.st-j-track li.j1 { margin-bottom: 110px; }
.st-j-track li.j2 { margin-bottom: 40px; }
.st-j-track li.j3 { margin-bottom: 150px; }
.j-img { height: 160px; overflow: hidden; margin-bottom: 14px; filter: grayscale(1); }
.j-img img { width: 100%; height: 100%; object-fit: cover; }
.st-j-track strong { font-size: 45px; font-weight: 700; line-height: 1; }
.st-j-track b { margin-top: 10px; font-size: 22.5px; font-weight: 800; }
.st-j-track span:last-child { font-size: 15px; line-height: 25px; font-weight: 500; }
.st-j-line { margin-top: 40px; width: 1200px; height: 1px; background: #5c5c5c; }
.st-j-line span { display: block; height: 1px; background: #fff; width: 0; }

/* ══════════ 지속가능성 ══════════ */
.su-top { text-align: center; padding: 70px 0 0; }
.su-top h1 { font-size: 42px; font-weight: 700; color: #000; font-family: var(--f-kr); letter-spacing: -0.7px; }
.su-top .en { margin-top: 14px; font-size: 21px; font-weight: 500; color: #3d3d3d; }
.su-intro { width: 760px; margin: 30px auto 0; font-size: 16.5px; line-height: 26.4px; font-weight: 500; color: #000; }
.su-hero { height: 680px; margin-top: 60px; overflow: hidden; background: linear-gradient(180deg, #fff, #e8e8e8); }
.su-hero img { width: 100%; height: 100%; object-fit: cover; }
.su-pillars { display: grid; grid-template-columns: repeat(3, 210px); gap: 70px; justify-content: center; margin-top: 70px; }
.su-pillars span { display: block; height: 250px; overflow: hidden; }
.su-pillars img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.su-pillars button:hover img { transform: scale(1.05); }
.su-pillars em { display: block; margin-top: 16px; font-style: normal; font-size: 18px; font-weight: 500; color: var(--mute3); line-height: 1.2; }
.su-pillars strong { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; font-family: var(--f-kr); }
.su-report { margin-top: 90px; height: 170px; padding-top: 30px; background: linear-gradient(180deg, #fff 0, #fff 25%, #e86e25 75%, #be4d09 100%); font-size: 19.5px; font-weight: 700; color: #000; display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
.su-report span svg { width: 18px; }
.su-sec { width: 1080px; margin: 0 auto; padding: 160px 0; display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start; }
.su-sec-img { height: 400px; overflow: hidden; }
.su-sec-img img { width: 100%; height: 100%; object-fit: cover; }
.su-sec-txt h2 { font-size: 36px; font-weight: 800; color: #000; font-family: var(--f-kr); }
.su-sec-txt .en { margin: 8px 0 34px; font-size: 18px; font-weight: 500; color: var(--mute3); }
.su-sec-txt p:not(.en) { font-size: 16.5px; line-height: 26.4px; font-weight: 500; color: var(--ink3); }
.su-sec-txt p + p:not(.en) { margin-top: 14px; }
.su-sec-txt h3 { margin-top: 56px; font-size: 25.5px; font-weight: 500; color: #3d3d3d; }
.su-sec-txt ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; font-size: 15px; }
.su-sec-txt ol li { border-top: 1px solid #222; padding-top: 10px; }
.su-sec-txt ol span { display: block; color: var(--mute3); font-size: 13px; }
.su-sec-txt .btn-line { margin-top: 30px; }
.su-film { position: relative; width: 1290px; max-width: calc(100% - 40px); height: 640px; margin: 0 auto; overflow: hidden; }
.su-film img { width: 100%; height: 100%; object-fit: cover; }
.su-film::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.su-film p { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-logo); font-size: 48px; color: #fff; letter-spacing: 1px; }
.su-env { background: #f4f3f1; margin-top: 160px; padding-bottom: 120px; }
.su-metric { width: 1080px; margin: 0 auto 90px; display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: center; }
.su-metric.rev { grid-template-columns: 380px 1fr; }
.su-metric.rev > span { order: -1; }
.su-metric h3 { font-size: 22.5px; font-weight: 700; color: #000; }
.su-metric p { margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--ink3); }
.su-metric .num { margin-top: 20px; font-size: 27px; font-weight: 700; color: #be4d09; }
.su-metric .num strong { font-size: 60px; font-weight: 500; margin-right: 6px; }
.su-metric > span { height: 260px; overflow: hidden; }
.su-metric img { width: 100%; height: 100%; object-fit: cover; }
.dotnav.sm a { width: 11px; height: 11px; background: #e4e4e4; border-color: #e4e4e4; }
.dotnav.sm a.on { background: #fff; border-color: #e86e25; }

/* ══════════ 위조품 방지 (원본: 본문 1100, 40/28/18px · 굵기 800) ══════════ */
.ac { width: var(--w); margin: 0 auto; padding: 120px 0 100px; text-align: center; font-family: var(--f-kr); }
.ac h1 { font-size: 40px; line-height: 60px; font-weight: 800; color: #000; letter-spacing: -0.8px; }
.ac-lead { margin-top: 46px; font-size: 20px; line-height: 36px; font-weight: 600; color: #000; }
.ac section { margin-top: 110px; }
.ac h2 { font-size: 28px; line-height: 41px; font-weight: 800; color: #000; letter-spacing: -1.68px; margin-bottom: 30px; }
.ac section > p { font-size: 16px; line-height: 30px; font-weight: 500; color: #000; }
.ac section > p + p { margin-top: 20px; }
.ac-box { border: 1px solid #e4e4e4; border-radius: 8px; padding: 60px 40px 54px; }
.ac-box h3 { font-size: 18px; line-height: 30px; font-weight: 800; }
.ac-box p { font-size: 16px; line-height: 30px; font-weight: 500; margin-bottom: 30px; }
.ac-box p:last-child { margin-bottom: 0; }
.ac-sellers { background: #f5f5f5; border: 1px solid #e4e4e4; border-radius: 8px; padding: 60px 120px 70px; }
.ac-sellers h2 { font-size: 34px; letter-spacing: -2.04px; line-height: 50px; }
.ac-sellers .b { margin-top: 40px; font-size: 18px; line-height: 30px; font-weight: 700; }
.ac-mark { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; margin-top: 20px; padding: 40px; background: #fff; text-align: left; }
.ac-seal { width: 200px; height: 200px; border-radius: 50%; background: #e8682c; color: #fff; display: flex; align-items: center; justify-content: center; }
.ac-seal .logo-word { font-size: 30px; }
.ac-mark p { font-size: 16px; line-height: 26px; color: var(--ink3); }
.ac-mark strong { display: block; margin: 8px 0; font-size: 22px; line-height: 32px; color: #b8410f; }
.ac-sellers .btn-black { margin-top: 20px; }
.ac-partners { display: flex; justify-content: center; gap: 50px; margin-top: 24px; font-family: var(--f-logo); font-size: 22px; color: #222; }

/* ══════════ 문화전 ══════════ */
.cu { width: var(--w); margin: 0 auto; padding-bottom: 80px; }
.cu-ban { position: relative; height: 280px; overflow: hidden; }
.cu-ban img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); }
.cu-ban::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.cu-ban > div { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; }
.cu-ban h1 { font-size: 50px; line-height: 75px; font-weight: 400; }
.cu-ban p { font-size: 18px; line-height: 27px; }
.cu-list li { display: grid; grid-template-columns: 552px 1fr; gap: 60px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cu-img { height: 362px; overflow: hidden; }
.cu-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cu-img:hover img { transform: scale(1.04); }
.cu-txt { padding-top: 34px; }
.cu-txt .yr { font-size: 33.6px; line-height: 43.68px; color: var(--mute2); }
.cu-txt h2 { margin-top: 8px; font-size: 42.4px; line-height: 46.64px; font-weight: 400; color: var(--ink3); letter-spacing: -3px; }
.cu-txt .pd { margin-top: 22px; font-size: 16px; color: var(--mute2); }
.cu-txt p:not(.pd) { margin-top: 8px; font-family: var(--f-kr); font-size: 16px; line-height: 24px; color: var(--mute2); letter-spacing: -0.8px; }
.cu-txt .btn-line { margin-top: 30px; border-color: #333; color: #333; }
.cd-kv { position: relative; height: 900px; overflow: hidden; }
.cd-kv > img { width: 100%; height: 100%; object-fit: cover; }
.cd-kv::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.cd-kv-txt { position: absolute; z-index: 1; left: 0; right: 0; top: 230px; text-align: center; color: #fff; }
.cd-kv-txt p { font-size: 20px; font-weight: 700; }
.cd-kv-txt h1 { margin-top: 10px; font-size: 48px; font-weight: 700; }
.cd-kv-txt .pd { margin-top: 40px; font-size: 18px; letter-spacing: 4px; font-weight: 500; }
.cd-down { position: absolute; z-index: 1; left: 50%; bottom: 120px; transform: translateX(-50%); color: #fff; }
.cd-down svg { width: 34px; }
.cd-intro { width: 900px; margin: 0 auto; padding: 50px 0 300px; text-align: center; font-family: var(--f-kr); font-size: 18px; line-height: 34px; color: var(--ink3); }
.cd-intro .b { font-weight: 700; color: #222; }
.cd-works { background: #3b2f28; color: #fff; padding: 110px 0 140px; }
.cd-works > .kicker, .cd-works > h2 { width: var(--w); margin: 0 auto; }
.cd-works .kicker { color: #d6cbc3; }
.cd-works h2 { font-size: 32px; font-weight: 700; border-left: 3px solid #fff; padding-left: 16px; }
.cd-slider { width: var(--w); margin: 50px auto 0; }
.cd-slider .sl-track li { height: 640px; }
.cd-slider img { width: 100%; height: 100%; object-fit: cover; }
.cd-slider .sl-arw { background: transparent; color: #fff; left: -80px; }
.cd-slider .sl-arw.next { left: auto; right: -80px; }
.cd-slider .sl-dots button { border-color: #fff; background: transparent; }
.cd-slider .sl-dots button[aria-current="true"] { background: #fff; }
.cd-note { position: relative; width: 980px; margin: -10px auto 0; background: #fff; color: #222; padding: 50px 60px; text-align: center; font-family: var(--f-kr); font-size: 16px; line-height: 30px; }
.cd-note .b { font-weight: 700; font-size: 18px; }
.cd-how { background: #5a4636; color: #fff; padding: 110px 0; text-align: center; }
.cd-how h2 { font-size: 30px; font-weight: 700; }
.cd-how > div { width: 1000px; max-width: 100%; height: 560px; margin: 50px auto 40px; border: 1px solid rgba(255, 255, 255, .25); padding: 10px; overflow: hidden; }
.cd-how img { width: 100%; height: 100%; object-fit: cover; }
.cd-how p { font-family: var(--f-kr); font-size: 17px; line-height: 30px; }
.cd-artist { width: var(--w); margin: 0 auto; padding: 110px 0 100px; }
.cd-artist h2 { font-size: 32px; font-weight: 700; border-left: 3px solid #222; padding-left: 16px; }
.cd-art-in { display: grid; grid-template-columns: 650px 1fr; gap: 60px; align-items: center; margin-top: 40px; }
.cd-art-in span { height: 520px; overflow: hidden; }
.cd-art-in img { width: 100%; height: 100%; object-fit: cover; }
.cd-art-in p { font-family: var(--f-kr); font-size: 18px; line-height: 34px; font-weight: 500; }
.cd-pn { width: var(--w); margin: 0 auto 100px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-top: 1px solid #222; border-bottom: 1px solid var(--line); padding: 24px 0; font-family: var(--f-kr); font-size: 15px; }
.cd-pn a { display: flex; align-items: center; gap: 10px; }
.cd-pn a:last-child { justify-content: flex-end; }
.cd-pn a span { color: var(--mute2); }
.cd-pn svg { width: 16px; }
.cd-pn .cd-list { padding: 8px 22px; border: 1px solid #222; justify-content: center; }

/* ══════════ 살롱 (원본 강조 #db5b22 · 글자 #2f2f33) ══════════ */
.sa-kv { position: relative; height: 716px; overflow: hidden; }
.sa-kv > img { width: 100%; height: 100%; object-fit: cover; }
.sa-kv::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
.sa-kv h1 { position: absolute; z-index: 1; left: 0; right: 0; top: 300px; text-align: center; font-size: 54px; line-height: 75.6px; font-weight: 700; color: #fff; letter-spacing: -0.25px; }
.sa-intro { padding: 188px 0 120px; text-align: center; color: #2f2f33; }
.sa-intro h2 { font-size: 41.25px; line-height: 49.5px; font-weight: 700; letter-spacing: -0.25px; }
.sa-intro h2 em { font-style: normal; color: var(--accent-big); }
.sa-intro p { margin-top: 40px; font-size: 18px; line-height: 27px; font-weight: 500; }
.sa-intro p + p { margin-top: 24px; }
.sa-events { padding-bottom: 0; }
.sa-ev-slider { width: 1220px; max-width: calc(100% - 40px); margin: 0 auto; padding: 0 60px; }
.sa-ev-slider .sl-track > li { padding: 0 10px; }
.sa-ev-slider .sl-arw { background: transparent; top: 230px; }
.sa-card { display: block; width: 100%; text-align: center; }
.sa-c-img { position: relative; display: block; height: 456px; overflow: hidden; }
.sa-c-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6); transition: filter .4s var(--ease); }
.sa-card[aria-selected="true"] .sa-c-img img, .sa-card:hover .sa-c-img img { filter: none; }
.sa-c-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); color: #fff; font-size: 21px; }
.sa-card[aria-selected="true"] .sa-c-state { background: rgba(0, 0, 0, .15); }
.sa-c-no { display: block; margin-top: 26px; font-size: 16px; color: #8a3a12; }
.sa-card strong { display: block; margin-top: 6px; font-size: 21px; line-height: 28px; font-weight: 600; color: #2f2f33; }
.sa-c-ko { display: block; margin-top: 4px; font-size: 16px; color: #4c4c4f; }
.sa-c-go { display: inline-block; margin-top: 18px; padding: 10px 20px; border: 1px solid #000; font-family: var(--f-kr); font-size: 15px; font-weight: 500; }
.sa-card[aria-selected="true"] .sa-c-go { background: #000; color: #fff; }
.sa-panels { background: #f0f0f0; margin-top: 100px; padding: 180px 0 160px; }
.sa-p { width: 1133px; max-width: calc(100% - 40px); margin: 0 auto; color: #2f2f33; }
.sa-p-no { font-size: 27px; line-height: 40.5px; color: #a84616; }
.sa-p h2 { margin-top: 8px; font-size: 41.25px; line-height: 61.875px; font-weight: 700; }
.sa-p-ko { font-size: 21px; line-height: 31.5px; font-weight: 500; color: #4c4c4f; }
.sa-p-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 60px 0 50px; }
.sa-p-imgs li { height: 480px; overflow: hidden; }
.sa-p-imgs img { width: 100%; height: 100%; object-fit: cover; }
.sa-p > p { font-size: 18px; line-height: 27px; font-weight: 500; }
.sa-p dl { display: flex; gap: 50px; margin-top: 24px; font-size: 17px; }
.sa-p dt { font-weight: 700; margin-right: 10px; display: inline; }
.sa-p dd { display: inline; }

/* ══════════ 프로젝트 ══════════ */
.pj { width: var(--w); margin: 0 auto; padding: 59px 0 140px; }
.pj-ban { position: relative; height: 280px; overflow: hidden; }
.pj-ban img { width: 100%; height: 100%; object-fit: cover; }
.pj-ban::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.pj-ban h1 { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 37.5px; font-weight: 300; }
.pj-txt { margin-top: 36px; text-align: center; font-size: 15px; line-height: 24px; font-weight: 500; color: #000; }
.pj-txt p + p { margin-top: 24px; }
.pj-list { display: grid; grid-template-columns: repeat(3, 220px); gap: 60px; justify-content: center; margin-top: 32px; }
.pj-list strong { display: block; margin-top: 16px; font-size: 21px; line-height: 31.5px; font-weight: 500; color: #000; }
.pj-list a > span:not(.pj-cover) { display: block; font-size: 16.5px; color: #000; }
.pj-list a > em { font-style: normal; font-size: 13.5px; color: #000; }
.pj-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 220px; height: 257px; padding: 14px; background: #e05d1f; color: #fff; transition: transform .4s var(--ease); }
.pj-list a:hover .pj-cover { transform: translateY(-6px); }
.pj-cover.white { background: #fff; border: 1px solid var(--line); color: #c94f1b; }
.pj-c-top { display: flex; justify-content: space-between; font-size: 7px; line-height: 1.4; letter-spacing: 1px; }
.pj-c-logo { font-family: var(--f-logo); font-size: 32px; line-height: 1; text-align: center; }
.pj-c-logo em { display: block; margin-top: 6px; font-family: var(--f); font-size: 11px; letter-spacing: 4px; font-style: normal; }
.pjs-head { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: center; }
.pjs-head h1 { font-size: 40px; font-weight: 700; }
.pjs-head h1 span { font-weight: 400; color: var(--mute2); }
.pjs-head p:not(.kicker) { margin-top: 16px; font-size: 18px; line-height: 30px; }
.pjs-head dl { display: flex; gap: 40px; margin-top: 24px; }
.pjs-head dt { font-weight: 700; }
.pjs-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 70px; }
.pjs-imgs li { position: relative; height: 420px; overflow: hidden; }
.pjs-imgs img { width: 100%; height: 100%; object-fit: cover; }
.pjs-imgs span { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: #fff; font-size: 14px; }
.pjs-nav { display: flex; justify-content: center; gap: 12px; margin-top: 60px; }
.pjs-nav a { padding: 10px 20px; border: 1px solid var(--line); font-size: 15px; }
.pjs-nav a.on { border-color: #000; font-weight: 700; }

/* ══════════ 브랜드 뉴스 (원본: 3열 313 · 계절 제목 28px · 필터 2개) ══════════ */
.nw { width: var(--w); margin: 0 auto; padding: 46px 0 100px; font-family: var(--f-kr); }
.nw-filter { display: flex; justify-content: flex-end; gap: 12px; }
.nw-filter .dd { width: 180px; }
.dd.under .dd-btn { width: 100%; height: 44px; padding: 0 12px 0 18px; border-bottom: 1px solid #222; font-size: 15px; color: var(--mute2); }
.nw-grp { padding: 4px 0 60px; border-bottom: 1px solid var(--line); }
.nw-grp + .nw-grp { padding-top: 54px; }
.nw-grp h2 { display: inline-block; font-size: 28px; line-height: 28px; font-weight: 700; color: #000; letter-spacing: 1.12px; padding-bottom: 18px; border-bottom: 2px solid #000; margin-bottom: 20px; }
.nw-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 17px; }
.nw-list li[hidden] { display: none; }
.nw-img { display: block; height: 204px; overflow: hidden; }
.nw-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.nw-list a:hover img { transform: scale(1.04); }
.nw-list strong { display: block; margin-top: 26px; font-size: 18px; line-height: 30px; font-weight: 700; color: var(--ink3); letter-spacing: -0.25px; }
.nw-list p { margin-top: 2px; font-size: 14px; line-height: 21px; color: var(--mute2); }
.nw-meta { display: flex; align-items: center; margin-top: 18px; font-size: 14px; color: var(--mute2); }
.nw-meta i { width: 1px; height: 10px; background: #888; margin: 0 10px; }
.nw-more { display: flex; align-items: center; gap: 8px; margin: 60px auto 0; font-size: 18px; font-weight: 700; color: #222; }
.nw-more svg { width: 20px; color: #222; }
.nw-more[hidden] { display: none; }
.nw-empty { margin-top: 60px; text-align: center; color: var(--mute); }
.nd { width: var(--w); margin: 0 auto; }
.nd-head { text-align: center; padding: 80px 0 50px; font-family: var(--f-kr); }
.nd-head h1 { font-size: 34px; font-weight: 700; color: #222; }
.nd-head p { margin-top: 20px; font-size: 16px; line-height: 28px; color: var(--ink3); }
.nd-meta strong { margin-right: 6px; }
.nd-slider .sl-track li { height: 630px; }
.nd-slider img { width: 100%; height: 100%; object-fit: cover; }
.nd-body { width: 760px; margin: 100px auto; font-family: var(--f-kr); }
.nd-body h2 { font-size: 26px; font-weight: 700; padding-bottom: 20px; border-bottom: 1px solid #222; }
.nd-body dl > div { display: flex; gap: 30px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.nd-body dt { width: 80px; font-weight: 700; }

/* ══════════ 명작 컬렉션 (원본: 1280 폭 배너 4장) ══════════ */
.mp { width: 1280px; max-width: 100%; margin: 0 auto 80px; }
.mp-ban { position: relative; height: 600px; overflow: hidden; }
.mp-ban > img { width: 100%; height: 100%; object-fit: cover; }
.mp-ban::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240, 238, 236, .92), rgba(240, 238, 236, .5) 40%, rgba(240, 238, 236, 0) 62%); }
.mp-ban.dark::after { background: linear-gradient(90deg, rgba(40, 24, 18, .88), rgba(40, 24, 18, .45) 40%, rgba(40, 24, 18, 0) 62%); }
.mp-txt { position: absolute; z-index: 1; left: 88px; top: 90px; color: #222; font-family: var(--f-kr); }
.mp-ban.dark .mp-txt { color: #fff; }
.mp-txt p { font-size: 20px; }
.mp-txt h2 { margin: 20px 0 40px; font-size: 46px; line-height: 60px; font-weight: 400; }
.mp-ban.dark .btn-line { background: transparent; color: #fff; border-color: #fff; }

/* ══════════ 매장 · 사이트맵 · 검색 · 로그인 · 정책 ══════════ */
.stw { width: var(--w); margin: 0 auto; padding: 0 0 100px; font-family: var(--f-kr); }
.st-tabs { display: flex; gap: 30px; padding: 28px 0 24px; }
.st-tabs button { font-size: 16px; color: var(--mute2); padding-bottom: 6px; border-bottom: 2px solid transparent; }
.st-tabs button[aria-selected="true"] { color: #000; font-weight: 700; border-color: #000; }
.st-form { display: flex; width: 275px; border: 1px solid var(--line); }
.st-form input { flex: 1; min-width: 0; height: 38px; border: 0; padding: 0 14px; font-size: 13px; }
.st-form .btn-grey { height: 38px; }
.stw .form-msg { margin-top: 8px; }
.st-chips { display: flex; gap: 8px; margin-top: 30px; }
.st-chips button { height: 36px; padding: 0 16px; border: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.st-chips button[aria-pressed="true"] { border-color: #222; background: #222; color: #fff; }
.st-count { margin-top: 30px; font-size: 15px; color: var(--mute); }
.st-count strong { color: #000; }
.st-list { margin-top: 12px; border-top: 1px solid #222; }
.st-list li { display: grid; grid-template-columns: 90px 1fr; gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.st-list li[hidden] { display: none; }
.st-type { grid-row: span 3; align-self: start; font-size: 13px; color: var(--accent); border: 1px solid currentColor; text-align: center; padding: 2px 0; }
.st-list strong { font-size: 17px; }
.st-list p { font-size: 15px; color: var(--mute); }
.st-sub span + span::before { content: ''; display: inline-block; width: 1px; height: 11px; background: #ccc; margin: 0 10px; }
.st-online { border-top: 1px solid #222; }
.st-online li { display: flex; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.st-online span { color: var(--mute); }
.stw .note { margin-top: 20px; }

.smap { width: var(--w); margin: 0 auto 80px; background: #eee; padding: 40px; font-family: var(--f-kr); }
.sm-in { background: #fff; padding: 80px 40px 60px; }
.sm-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.sm-c { padding: 0 36px; min-height: 780px; }
.sm-c + .sm-c { border-left: 1px solid var(--line); }
.sm-col + .sm-col { margin-top: 100px; }
.sm-col h2 { font-size: 26px; line-height: 31px; font-weight: 400; color: #222; min-height: 62px; }
.sm-col > ul { margin-top: 30px; }
.sm-col li a { display: block; padding: 10px 0; font-size: 16px; color: #444; }
.sm-col li li a { padding: 4px 0 8px; font-size: 13px; color: var(--mute2); }
.sm-col a:hover { color: #000; }
.sm-util { display: flex; gap: 44px; margin-top: 60px; padding-top: 50px; border-top: 1px solid var(--line); font-size: 16px; }

.sr-page { width: 940px; margin: 20px auto 100px; font-family: var(--f-kr); }
.sr-title { height: 40px; padding: 0 20px; background: #767676; color: #fff; font-size: 20px; font-weight: 400; line-height: 40px; }
.sr-form { display: flex; gap: 10px; margin-top: 24px; }
.sr-form input { flex: 1; height: 48px; border: 0; border-bottom: 2px solid #222; font-size: 16px; padding: 0 8px; }
.sr-form .btn-black { height: 48px; font-size: 15px; }
.sr-page .form-msg { margin-top: 8px; }
.sr-list { margin-top: 20px; }
.sr-list li { border-bottom: 1px solid var(--line2); }
.sr-list a { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; padding: 18px 0; }
.sr-list .im { height: 150px; background: var(--card); overflow: hidden; }
.sr-list img { width: 100%; height: 100%; object-fit: cover; }
.sr-list strong { display: block; font-size: 18px; font-weight: 400; color: #444; }
.sr-list p { margin-top: 10px; font-size: 14px; color: #222; }
.sr-list mark { background: #fde3d3; color: inherit; }
.sr-empty { margin-top: 60px; text-align: center; color: var(--mute); }

.p-login { background: #fff; }
.lg { font-family: var(--f-kr); letter-spacing: -0.8px; }
.lg-bar { position: relative; height: 54px; border-bottom: 1px solid #f0f0f0; text-align: center; font-size: 18px; font-weight: 500; line-height: 54px; color: #252525; }
.lg-x { position: absolute; left: calc(50% + 220px); top: 17px; width: 20px; height: 20px; color: #222; }
.lg-in { width: 480px; max-width: calc(100% - 40px); margin: 0 auto; padding: 62px 0 80px; }
.lg-panel h2 { font-size: 23px; line-height: 32.2px; font-weight: 700; color: #000; text-align: center; letter-spacing: -1px; margin-bottom: 40px; }
.lg-form input:not([type="checkbox"]) { display: block; width: 100%; height: 50px; border: 1px solid #ddd; border-radius: 4px; padding: 0 12px; font-size: 16px; margin-bottom: 12px; }
.lg-form input:focus { border-color: #222; outline: 0; }
.lg-form input:focus-visible { outline: 2px solid #222; outline-offset: 0; }
.lg-form input.err { border-color: #c42b1c; }
.chk.round input { accent-color: #2b8ef0; }
.lg-form .chk { margin: 8px 0 14px; color: #252525; }
.lg-submit { width: 100%; height: 54px; border-radius: 4px; background: #222; color: #fff; font-size: 18px; margin-top: 10px; }
.lg-form .form-msg { margin-top: 6px; }
.lg-sns { display: flex; justify-content: center; gap: 66px; margin-top: 20px; padding: 20px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.lg-sns button { display: flex; flex-direction: column; align-items: center; font-size: 15px; line-height: 18.45px; color: #252525; }
.lg-sns .ic { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #fff; }
.lg-sns .ic svg { width: 22px; }
.lg-sns .c1 { background: #5e6ad2; }
.lg-sns .c2 { background: #2d2d2d; }
.lg-sns .c3 { background: #eee; color: #898989; }
.lg-find { display: flex; justify-content: center; margin-top: 20px; font-size: 15px; color: #6b6b6b; }
.lg-find button + button::before { content: ''; display: inline-block; width: 1px; height: 11px; background: #ccc; margin: 0 10px; }
.lg-join { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 36px; height: 44px; padding: 0 20px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
.lg-join strong { display: flex; align-items: center; gap: 4px; font-weight: 500; }
.lg-join svg { width: 12px; }

.po { width: var(--w); margin: 0 auto 100px; font-family: var(--f-kr); }
.po h1 { margin-top: 40px; font-size: 32px; font-weight: 700; }
.po-date { margin: 10px 0 40px; color: var(--mute2); }
.po section { padding: 24px 0; border-top: 1px solid var(--line); }
.po h2 { font-size: 18px; font-weight: 700; }
.po section p { margin-top: 8px; font-size: 16px; line-height: 28px; color: var(--ink3); }

/* ══════════ 반응형 (원본: 1024 아래 모바일 헤더 · 1단 카드) ══════════ */
@media (max-width: 1180px) {
  :root { --w: calc(100vw - 48px); --w-home: calc(100vw - 48px); }
  .to-top { right: 20px; }
  .ln-cta { grid-template-columns: 1fr 1fr; }
  .ln-cta-info { padding-left: 60px; }
  .fs-history { min-height: 0; }
  .fs-h-txt { width: auto; margin: 60px 24px 0; }
  .fs-h-item { margin-bottom: 40px; }
  .fs-h-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 24px; }
  .fs-h-figs .fig { position: static; width: auto; height: 300px; }
  .st-j-pin { padding-left: 24px; }
  .st-j-line { width: calc(100% - 24px); }
  .su-sec, .su-metric, .su-metric.rev { width: auto; margin-left: 24px; margin-right: 24px; }
  .cd-slider .sl-arw { left: 0; }
  .cd-slider .sl-arw.next { right: 0; left: auto; }
  .cd-note { width: auto; margin-left: 24px; margin-right: 24px; }
  .cd-art-in { grid-template-columns: 1fr 1fr; }
  .cu-list li { grid-template-columns: 1fr 1fr; }
  .sm-c { padding: 0 16px; }
}
@media (max-width: 1024px) {
  .hdr, .hdr.is-home { position: sticky; }
  .hdr.is-home { position: fixed; }
  .hdr-top { width: auto; height: 56px; padding: 0 16px; align-items: center; }
  .logo { top: 12px; }
  .logo-word { font-size: 28px; }
  .lang, .util > a, .gnb { display: none; }
  .util { order: 2; }
  .util .srch-btn::before { display: none; }
  .srch-btn svg { width: 22px; height: 22px; }
  .burger { display: block; order: 1; width: 24px; height: 24px; }
  .srch { top: 56px; }
  .srch-form { width: auto; padding: 24px 16px 16px; }
  .kv { height: 440px; }
  .kv-txt { left: 24px; right: 24px; top: 96px; text-align: center; }
  .kv-m { font-size: 26px; line-height: 38px; }
  .kv-ctrl { left: 24px; right: 24px; top: auto; bottom: 20px; }
  .kv-bar { flex: 1; width: auto; }
  .kv-arw { display: none; }
  .h-sec { margin-top: 70px; }
  .h-tit { text-align: center; font-size: 22px; }
  .pc { flex-basis: 100%; }
  .pick-arw { width: 40px; height: 40px; top: 40%; }
  .pick-bar { flex: 1; width: auto; }
  .best-ban { height: 460px; }
  .best-txt { left: 24px; top: auto; bottom: 30px; transform: none; }
  .best-ban::after { background: linear-gradient(0deg, rgba(255, 244, 236, .92), rgba(255, 244, 236, 0) 60%); }
  .season { grid-template-columns: 1fr 1fr; height: auto; }
  .ss-main { grid-column: 1 / -1; order: -1; height: 300px; }
  .ss-card { padding-bottom: 20px; }
  .ss-img img { max-height: 160px; }
  .store-img { height: 220px; }
  .h-store h2 { font-size: 22px; }
  .ftr-row { height: auto; padding: 18px 0; }
  .ftr-links { font-size: 13px; row-gap: 6px; }
  .ftr-links li + li::before { margin: 0 8px; }
  .ftr-info p { font-size: 13px; }
  .cat-filter { flex-direction: column; height: auto; }
  .cat-filter > .dd { width: 100%; }
  .cat-tabs { padding: 0 16px; gap: 0 18px; }
  .cat-tabs a { line-height: 44px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cc a { height: 330px; padding: 16px 14px 0; }
  .cc-name { font-size: 16px; }
  .cc-img { margin: 14px -14px 0; }
  .bs-row, .bs-row.rev { grid-template-columns: 1fr; margin-bottom: 30px; }
  .bs-row .bs-ph { order: -1; }
  .bs-slide { padding: 50px 50px 80px; }
  .bs-slide [data-slider], .bs-slide { --per: 1; }
  .pdp-top { grid-template-columns: 1fr; gap: 30px; }
  .pdp-gal { height: auto; padding-bottom: 20px; }
  .pdp-gal .sl-view, .pdp-gal .sl-track, .pdp-gal .sl-track li { height: 360px; }
  .pdp-gal .sl-arw { top: 180px; }
  .pdp-rate { margin-top: 30px; }
  .pdp-spec { margin-top: 30px; }
  .pdp-btns { margin-top: 30px; flex-direction: column; }
  .buy, .pdp-btns .btn-line.big { width: 100%; }
  .pdp-nav ul { font-size: 14px; }
  .pdp-nav button { line-height: 50px; }
  .pdp-detail { width: auto; margin: 40px 16px 0; }
  .pd-blk { height: 420px; }
  .pd-txt { top: 40px; padding: 0 20px; }
  .pd-txt p { font-size: 16px; line-height: 26px; }
  .pd-txt strong { font-size: 22px; }
  .pdp-acc h2 { font-size: 22px; }
  .rv-head { flex-wrap: wrap; padding-bottom: 24px; }
  .sort { width: 100%; }
  .rv { grid-template-columns: 1fr; gap: 12px; }
  .rv-body p { font-size: 16px; line-height: 26px; }
  .with { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .with strong { font-size: 14px; }
  .pdp-bar-in { height: 70px; }
  .pdp-bar-in > div, .pdp-bar .btn-line { display: none; }
  .pdp-bar .btn-black { width: 100%; }
  .ln-kv { height: 560px; }
  .ln-kv-txt h1 { font-size: 34px; }
  .ln-intro { height: auto; padding: 70px 0 0; }
  .ln-intro h2 { font-size: 30px; }
  .ln-intro-img { width: auto; height: 460px; margin: 40px 24px 0; }
  .ln-stats { min-height: 0; padding: 80px 0; }
  .ln-stats h2 { font-size: 24px; }
  .ln-stats ul { grid-template-columns: 1fr; gap: 30px; margin: 40px auto; }
  .ln-stats li + li { border-left: 0; border-top: 1px solid var(--line); padding-top: 30px; }
  .ln-stats strong { font-size: 34px; }
  .ln-cta { grid-template-columns: 1fr; height: auto; padding: 60px 0; }
  .ln-cta-img { height: 400px; }
  .ln-cta-info { padding: 40px 24px 0; }
  .ln-story { min-height: 0; padding: 80px 0; }
  .ln-story-txt h2 { font-size: 26px; }
  .ln-story-txt p { width: auto; font-size: 16px; line-height: 28px; }
  .ln-story-imgs { height: auto; margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ln-story-imgs span { position: static; width: auto !important; height: 300px !important; }
  .ln-ing { min-height: 0; padding: 80px 0; }
  .ln-ing ul { grid-template-columns: 1fr; gap: 40px; }
  .ln-ing h3 { font-size: 24px; }
  .ln-tech { grid-template-columns: 1fr; }
  .ln-tech-img { height: 360px; }
  .ln-tech-txt { padding: 50px 24px 70px; }
  .ln-tech-txt h2, .ln-video-txt h2, .ln-heritage h2 { font-size: 26px; }
  .ln-steps { min-height: 0; padding: 80px 0; }
  .ln-steps h2 { font-size: 26px; }
  .ln-steps ul { grid-template-columns: repeat(2, 1fr); }
  .ln-steps strong { font-size: 24px; }
  .ln-heritage { grid-template-columns: 1fr; gap: 30px; min-height: 0; padding: 80px 0; }
  .ln-heritage > span { height: 360px; }
  .g-kv { height: 560px; }
  .g-kv-txt { top: 180px; padding: 0 20px; }
  .g-kv-txt h1 { font-size: 34px; }
  .g-wrap, .g-info { grid-template-columns: 1fr; min-height: 0; }
  .g-wrap-img, .g-info-img { height: 380px; }
  .g-wrap-txt { padding: 40px 24px 60px; }
  .g-wrap-txt h2 { font-size: 28px; }
  .g-info > p { padding: 40px 24px; font-size: 20px; line-height: 32px; }
  .g-kinds ul { grid-template-columns: 1fr; }
  .g-kinds h2, .g-eng-head h2 { font-size: 24px; }
  .g-engrave { min-height: 0; padding: 70px 0; }
  .g-eng-imgs { grid-template-columns: 1fr; height: auto; gap: 12px; margin-top: 40px; }
  .g-eng-imgs li { height: 300px; margin: 0 !important; }
  .g-set { padding: 60px 0; }
  .g-set ul { grid-template-columns: 1fr; padding: 0 24px; }
  .spa-1 { padding-top: 60px; }
  .spa-hero { width: auto; height: 300px; margin: 40px 24px 0; }
  .spa-lead { width: auto; padding: 0 24px; }
  .spa-2 ul { grid-template-columns: 1fr; }
  .spa-3 { height: auto; padding-bottom: 80px; }
  .spa-3-in { padding-top: 70px; }
  .spa-tabs { flex-wrap: wrap; }
  .spa-tabs button { min-width: 0; flex: 1 1 40%; }
  .spa-panel { width: auto; }
  .fs-kv { height: 500px; }
  .fs-kv h1 { font-size: 26px; line-height: 44px; top: 160px; }
  .fs-intro { width: auto; padding: 70px 24px; }
  .fs-intro h2 { font-size: 22px; }
  .fs-gtabs, .fs-rtabs { flex-wrap: wrap; gap: 10px 18px; font-size: 15px; }
  .fs-gp { height: 320px; }
  .fs-gallery h2, .fs-history h2, .fs-rooms h2 { font-size: 22px; }
  .fs-rp [data-slider] { --per: 1; }
  .fs-service dl, .fs-visit dl { grid-template-columns: 1fr; }
  .fs-h-figs { grid-template-columns: 1fr; }
  .dotnav { display: none; }
  .st-hero { padding-top: 40px; }
  .st-hero-img { max-width: calc(100% - 32px); height: 300px; }
  .st-film { height: 320px; margin-top: 50px; }
  .st-film-logo .logo-word { font-size: 40px; }
  .st-sec, .st-sec.st-r { grid-template-columns: 1fr; padding: 80px 0 40px; max-width: calc(100% - 32px); gap: 30px; }
  .st-sec.st-r .st-imgs { order: 0; }
  .st-imgs span { height: 260px; }
  .st-txt h2 { font-size: 28px; line-height: 38px; margin-bottom: 20px; }
  .st-j-pin h2 { font-size: 34px; }
  .st-j-track { gap: 30px; height: 380px; }
  .st-j-track li { width: 190px; }
  .su-top h1 { font-size: 28px; padding: 0 20px; }
  .su-top .en { font-size: 15px; }
  .su-intro { width: auto; padding: 0 24px; font-size: 15px; }
  .su-hero { height: 340px; }
  .su-pillars { grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 16px; }
  .su-pillars span { height: 140px; }
  .su-pillars em { font-size: 12px; }
  .su-sec { grid-template-columns: 1fr; padding: 80px 0; }
  .su-sec-txt ol { grid-template-columns: 1fr; }
  .su-film { height: 320px; }
  .su-film p { font-size: 28px; }
  .su-metric, .su-metric.rev { grid-template-columns: 1fr; }
  .su-metric .num strong { font-size: 44px; }
  .ac { padding: 60px 0; }
  .ac h1 { font-size: 28px; line-height: 40px; }
  .ac-lead { font-size: 16px; line-height: 28px; }
  .ac h2 { font-size: 22px; line-height: 32px; letter-spacing: -1px; }
  .ac-box { padding: 30px 20px; }
  .ac-sellers { padding: 40px 20px; }
  .ac-sellers h2 { font-size: 24px; line-height: 34px; }
  .ac-mark { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px; }
  .btn-black.wide { width: 100%; }
  .cu-list li { grid-template-columns: 1fr; gap: 20px; }
  .cu-img { height: 240px; }
  .cu-txt { padding-top: 0; }
  .cu-txt h2 { font-size: 28px; line-height: 34px; letter-spacing: -1.5px; }
  .cu-ban h1 { font-size: 34px; }
  .cu-ban p { font-size: 14px; padding: 0 16px; }
  .cd-kv { height: 600px; }
  .cd-kv-txt { top: 140px; padding: 0 20px; }
  .cd-kv-txt h1 { font-size: 30px; }
  .cd-kv-txt .pd { font-size: 14px; letter-spacing: 1px; }
  .cd-intro { width: auto; padding: 50px 24px 100px; font-size: 16px; line-height: 30px; }
  .cd-slider .sl-track li { height: 300px; }
  .cd-note { padding: 30px 20px; }
  .cd-how > div { height: 300px; margin: 30px 16px; }
  .cd-art-in { grid-template-columns: 1fr; }
  .cd-art-in span { height: 300px; }
  .cd-pn { grid-template-columns: 1fr; text-align: center; }
  .cd-pn a, .cd-pn a:last-child { justify-content: center; }
  .sa-kv { height: 460px; }
  .sa-kv h1 { font-size: 36px; top: 190px; }
  .sa-intro { padding: 80px 20px 60px; }
  .sa-intro h2 { font-size: 26px; line-height: 34px; }
  .sa-intro p { font-size: 16px; }
  .sa-ev-slider { --per: 1; padding: 0 40px; }
  .sa-c-img { height: 340px; }
  .sa-panels { margin-top: 50px; padding: 70px 0; }
  .sa-p h2 { font-size: 28px; line-height: 38px; }
  .sa-p-no { font-size: 18px; }
  .sa-p-imgs { grid-template-columns: 1fr; }
  .sa-p-imgs li { height: 280px; }
  .sa-p dl { flex-direction: column; gap: 8px; }
  .pj-list { grid-template-columns: 220px; }
  .pjs-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pjs-head dl { justify-content: center; }
  .pjs-imgs { grid-template-columns: 1fr; }
  .pjs-imgs li { height: 300px; }
  .pjs-nav { flex-wrap: wrap; }
  .nw-filter .dd { width: 50%; }
  .nw-list { grid-template-columns: 1fr; }
  .nw-img { height: 210px; }
  .nd-head h1 { font-size: 26px; }
  .nd-slider .sl-track li { height: 300px; }
  .nd-body { width: auto; margin: 60px 0; }
  .mp-ban { height: 480px; }
  .mp-ban::after { background: linear-gradient(180deg, rgba(240, 238, 236, .92), rgba(240, 238, 236, 0) 70%); }
  .mp-ban.dark::after { background: linear-gradient(180deg, rgba(40, 24, 18, .88), rgba(40, 24, 18, 0) 70%); }
  .mp-txt { left: 24px; right: 24px; top: 40px; }
  .mp-txt p { font-size: 15px; }
  .mp-txt h2 { font-size: 28px; line-height: 38px; margin: 12px 0 20px; }
  .st-list li { grid-template-columns: 1fr; }
  .st-type { grid-row: auto; width: 70px; }
  .st-form { width: 100%; }
  .st-online li { flex-direction: column; gap: 4px; }
  .smap { padding: 16px; }
  .sm-in { padding: 30px 20px; }
  .sm-grid { grid-template-columns: 1fr 1fr; gap: 30px 0; }
  .sm-c { min-height: 0; padding: 0 12px; border: 0 !important; }
  .sm-col h2 { font-size: 20px; min-height: 0; }
  .sm-col + .sm-col { margin-top: 30px; }
  .sm-col > ul { margin-top: 10px; }
  .sr-page { width: auto; margin: 20px 16px 80px; }
  .sr-title { font-size: 16px; }
  .sr-list a { grid-template-columns: 100px 1fr; gap: 14px; }
  .sr-list .im { height: 100px; }
  .sr-list strong { font-size: 16px; }
  .lg-x { left: auto; right: 16px; }
  .lg-in { padding-top: 40px; }
  .lg-sns { gap: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1; transform: none; }
}
/* 살롱 상세: 프로그램 · 아티스트 소개 (원본 탭 패널 3152px) */
.sa-p-prog { margin-top: 120px; }
.sa-p-prog h3, .sa-p-artist > h3 { font-size: 27px; line-height: 40.5px; font-weight: 700; letter-spacing: -0.54px; }
.sa-p-prog p { margin-top: 16px; font-size: 18px; line-height: 27px; font-weight: 500; }
.sa-p-wide { display: block; height: 640px; margin-top: 40px; overflow: hidden; }
.sa-p-wide img, .sa-p-artist span img { width: 100%; height: 100%; object-fit: cover; }
.sa-p-artist { margin-top: 120px; }
.sa-p-artist > h3 { font-size: 41.25px; line-height: 61.875px; color: #a84616; }
.sa-p-artist > div { display: grid; grid-template-columns: 500px 1fr; gap: 60px; align-items: center; margin-top: 40px; }
.sa-p-artist span { display: block; height: 600px; overflow: hidden; }
.sa-p-artist strong { font-size: 24px; line-height: 36px; }
.sa-p-artist p { margin-top: 16px; font-size: 18px; line-height: 27px; font-weight: 500; }
@media (max-width: 1024px) {
  .sa-p-prog, .sa-p-artist { margin-top: 60px; }
  .sa-p-wide { height: 300px; }
  .sa-p-artist > h3 { font-size: 28px; line-height: 40px; }
  .sa-p-artist > div { grid-template-columns: 1fr; gap: 24px; }
  .sa-p-artist span { height: 320px; }
}
/* 제품상세 이미지 묶음 (원본: 720px 폭 세로 이미지 연속) */
.pd-blk { height: 960px; }
.pd-stat { height: 900px; background: var(--bg); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--f-kr); }
.pd-stat.light { color: #222; }
.pd-stat p { font-size: 22px; }
.pd-stat strong { margin: 20px 0; font-size: 72px; font-weight: 700; letter-spacing: -2px; }
.pd-stat span { margin-top: 40px; font-size: 14px; opacity: .8; }
.pd-ing { padding: 120px 60px 0; background: #f6efe8; font-family: var(--f-kr); text-align: center; }
.pd-ing h3 { font-size: 30px; }
.pd-ing ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 50px 0 60px; }
.pd-ing li { padding: 26px 10px; background: #fff; }
.pd-ing strong { display: block; font-size: 17px; }
.pd-ing li span { font-size: 14px; color: var(--mute); }
.pd-ing img { width: 100%; height: 520px; object-fit: cover; }
.pd-test { padding: 120px 70px; font-family: var(--f-kr); background: #fff; }
.pd-test h3 { font-size: 30px; text-align: center; margin-bottom: 60px; }
.pd-test li { display: grid; grid-template-columns: 80px 1fr 70px; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line2); font-size: 18px; }
.pd-test i { height: 10px; background: linear-gradient(90deg, var(--accent-big) var(--v), #eee var(--v)); }
.pd-test b { text-align: right; color: var(--accent); }
.pd-test p { margin-top: 30px; font-size: 13px; color: var(--mute2); }
@media (max-width: 1024px) {
  .pd-blk { height: 520px; }
  .pd-stat { height: 480px; }
  .pd-stat strong { font-size: 44px; }
  .pd-ing { padding: 60px 16px 0; }
  .pd-ing ul { grid-template-columns: 1fr; }
  .pd-ing img { height: 300px; }
  .pd-test { padding: 60px 16px; }
}
/* 원본 높이에 맞춘 간격 (지속가능성 7639 · 위조품 방지 3864) */
.su-sec { padding: 220px 0; }
.su-sec-img { height: 560px; }
.su-hero { height: 820px; }
.su-metric { margin-bottom: 140px; }
.su-metric > span { height: 340px; }
.su-env { padding-bottom: 160px; }
.su-film { height: 760px; }
.ac { padding: 160px 0 160px; }
.ac section { margin-top: 160px; }
.ac-box { padding: 80px 40px 74px; }
.ac-sellers { padding: 80px 120px 90px; }
.ac-sellers .b { margin-top: 60px; }
.ac-mark { padding: 60px 40px; }
/* 뉴스 상세: 원본은 사진 띠 + 색 띠 구역이 이어진다 */
.nd-band { padding: 120px 0; text-align: center; font-family: var(--f-kr); }
.nd-band.navy { background: #183452; color: #fff; }
.nd-band.beige { background: #f2eee9; }
.nd-band h2 { font-size: 28px; font-weight: 700; }
.nd-band p { margin-top: 16px; font-size: 17px; line-height: 30px; }
.nd-band ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: var(--w); margin: 50px auto 0; }
.nd-band li span { display: block; height: 380px; overflow: hidden; }
.nd-band li img { width: 100%; height: 100%; object-fit: cover; }
.nd-band li strong { display: block; margin-top: 14px; font-size: 17px; }
@media (max-width: 1024px) {
  .su-sec { padding: 80px 0; }
  .su-sec-img { height: 340px; }
  .su-hero { height: 340px; }
  .su-film { height: 320px; }
  .ac { padding: 60px 0; }
  .ac section { margin-top: 80px; }
  .ac-sellers { padding: 40px 20px; }
  .nd-band { padding: 70px 16px; }
  .nd-band ul { grid-template-columns: 1fr; width: auto; }
  .nd-band li span { height: 260px; }
}
.nd-band { padding: 160px 0; }
.nd-band li span { height: 460px; }
.nd-wide { display: block; width: var(--w); height: 760px; margin: 60px auto 0; overflow: hidden; }
.nd-wide img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) { .nd-band { padding: 70px 16px; } .nd-wide { width: auto; height: 300px; } .nd-band li span { height: 260px; } }
.srch-ic { position: relative; z-index: 1; pointer-events: none; }
.srch-row input { background: transparent; }
/* impeccable 대응 — 대비 · 안쪽 여백 · 제목 순서 */
.pd-blk { background: none; }
.pd-stat { padding: 0 60px; }
.pd-ing h2, .pd-test h2 { font-size: 30px; }
.pd-test h2 { text-align: center; margin-bottom: 60px; }
.pd-how h2 { font-size: 22px; margin-bottom: 14px; }
.cat-filter { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
.cat-tabs { padding: 8px 30px; }
.cat-tabs a { line-height: 40px; }
.cu-txt .btn-line:hover { color: #fff; border-color: #3a3a3a; }
.sa-c-state { background: rgba(0, 0, 0, .55); }
.sa-card[aria-selected="true"] .sa-c-state { background: rgba(0, 0, 0, .45); }
.pj-cover { background: #b8460f; }
.pj-cover.white { color: #b8460f; }
.pj-c-top { font-size: 11px; letter-spacing: .5px; }
.ln-intro { background: linear-gradient(115deg, #fbe4d3 0, var(--g1) 100%); }
.btn-grey { background: #6b6b6b; }
.fs-gallery h2, .fs-history h2, .fs-rooms h2, .fs-service h2, .fs-visit h2 { letter-spacing: 1.5px; }
.fs-kv h1 { letter-spacing: 2px; }
.ln-stats li { padding: 0 24px; }
.ln-steps li { padding: 12px; }
.su-sec-txt ol li { padding: 10px 8px 0; }
.ln-ing { padding-left: 24px; padding-right: 24px; }
.sa-panels { padding-left: 20px; padding-right: 20px; }
.spa-3-in { padding-left: 24px; padding-right: 24px; }
.sa-kv::after { background: rgba(0, 0, 0, .45); }
.fs-scroll { letter-spacing: .5px; }
.fs-kv h1 { letter-spacing: .04em; }
.sa-c-state, .sa-card[aria-selected="true"] .sa-c-state { background: rgba(0, 0, 0, .65); }
.st-j-pin { padding-top: 40px; padding-bottom: 40px; padding-right: 24px; }
.ac-seal { padding: 20px; }
/* ── 모션 비교 뒤 수정 (refs/motion-compare.html) ──
   원본 헤더: 흰 바탕은 ::before(opacity 400ms linear), 아래 선은 ::after(opacity 400ms ease) 가 꺼지며 투명해진다.
   스크롤 중 헤더 이동 트랜지션이 없다 → 고정 헤더가 아니라 문서와 함께 올라간다. */
.hdr { position: relative; background: transparent; border-bottom: 0; }
.hdr::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: 1; transition: opacity .4s linear; }
.hdr::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); opacity: 1; transition: opacity .4s ease; }
.hdr.is-home { position: absolute; left: 0; right: 0; top: 0; }
.hdr.is-clear:not(:hover):not(.is-open) { background: transparent; }
.hdr.is-clear:not(:hover):not(.is-open)::before, .hdr.is-clear:not(:hover):not(.is-open)::after { opacity: 0; }
/* 맨 위로: 원본은 top 0 → -60px 200ms ease-out */
.to-top-wrap { position: fixed; z-index: 80; right: calc(50% - 550px - 7px); bottom: 0; width: 60px; height: 0; }
.to-top { position: absolute; left: 0; top: 0; right: auto; bottom: auto; transform: none; transition: top .2s ease-out, opacity .2s ease-out; }
.to-top.on { top: -60px; transform: none; }
@media (max-width: 1180px) { .to-top-wrap { right: 20px; } }
@media (max-width: 1024px) { .hdr { position: relative; } .hdr.is-home { position: absolute; } }
.hdr { transition: none; }
.lg-h1 { font-size: 18px; font-weight: 500; line-height: 54px; margin: 0; }
.cu-list li { grid-template-columns: 552px minmax(0, 1fr); } .cu-txt { min-width: 0; } .cu-txt h2 { overflow-wrap: anywhere; }
@media (max-width: 1180px) { .cu-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1024px) { .cu-list li { grid-template-columns: minmax(0, 1fr); } }
.buy { position: relative; }
@media (max-width: 1024px) { .cd-how > div { width: auto; max-width: none; } }
@media (max-width: 1024px) {
  .sub-tabs ul { flex-wrap: wrap; gap: 8px 18px; padding: 20px 16px 16px; font-size: 15px; }
  .ln-cta { grid-template-columns: minmax(0, 1fr); }
  .ln-cta .btns { flex-wrap: wrap; }
  .ln-cta .btns > a { flex: 1 1 140px; min-width: 0; }
}
/* 쪽 안 이동을 단추로 바꾼 뒤 모양 유지 */
.pdp-nav button { width: 100%; }
.pdp-rate button { text-decoration: underline; text-underline-offset: 3px; }
.su-pillars button { display: block; width: 100%; }
.dotnav button { padding: 0; }
.cd-down { background: none; }
.txt-link { padding: 0 0 2px; }
.skip { border: 0; cursor: pointer; }