@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Montserrat:wght@500&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* MITO 일반쇼핑몰 — 화이트&블랙 모노 v2.0 (2026-08-27 대표 지시: 전체 화이트앤블랙 미니멀 톤)
   전신: Japandi 시스템 v1.x (briefs/06 — 레이아웃·타이포(세리프+산세리프)·호버 모션은 유지,
   컬러 시스템만 모노크롬으로 전환. 액센트 = 블랙, 기능색(error)만 예외).
   클래스 어휘는 v0.2와 호환 유지 — shop/ 화면과 shop.js·auth.js 훅을 그대로 재스킨한다.
   세라믹쇼핑몰(landing/)·대시보드는 이 파일을 쓰지 않는다. */

/* 폰트: 한글·영문 모두 Pretendard (2026-08-27 대표 재지시 "한국어도 프리탠다드로") —
   부크크명조 @font-face 제거. 두 토큰 모두 Pretendard 우선이라 헤딩·본문이 단일 서체로 통일된다. */

:root {
  /* 모노크롬 팔레트 (화이트&블랙 미니멀) */
  --paper: #FFFFFF;        /* 페이지 바탕 — 화이트 */
  --card: #FFFFFF;         /* 카드·패널 — 플랫 화이트 (구분은 헤어라인으로) */
  --surface: #F5F5F5;      /* 밴드·비활성 배경 — 연회색 */
  --sand: #E0E0E0;
  --ink: #111111;
  --muted: #666666;        /* 본문 보조 — 화이트 위 5.7:1 */
  --accent: #111111;       /* 모노 — 액센트도 블랙 (활성 밑줄·배지·보더·아이콘) */
  --line: #E5E5E5;         /* 최소한의 헤어라인 */
  --line-strong: #767676;  /* 입력 필드 보더 — 화이트 위 4.5:1 */
  --error: #B3261E;        /* 폼 오류 전용 예외 (기능색 유지) */
  /* 인버스(다크 토큰 세트 — 푸터·강조 밴드 전용) */
  --inverse-bg: #111111;
  --inverse-surface: #1D1D1D;
  --inverse-border: #3A3A3A;
  --inverse-text: #FFFFFF;
  --inverse-muted: rgba(255, 255, 255, 0.72);
  /* 타이포 — 영문 제목·UI는 Cinzel, 한글 본문은 Pretendard */
  --font-serif: "Cinzel", "Pretendard Variable", Pretendard, -apple-system,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, "Inter", -apple-system,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-label: "Cinzel", "Pretendard Variable", Pretendard, "Inter", -apple-system,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  /* 레이아웃 (Design Guide: 12컬럼 · 거터 24 · 마진 48 · 여백 32) */
  --gutter: 24px;
  --space: 32px;
  --page-margin: 48px;
  /* 풀블리드+유동형(2026-08-27 대표 지시): 고정 프레임 없이 화면 전폭 사용.
     1800px 상한도 제거(대표 재지시 "양옆으로 꽉 차게") — 좌우 여백은 --page-margin만 */
  --container: none;
  --section: 96px;
  /* 미니멀 — 라운드 제거 (모노 전환과 함께 직선 마감) */
  --radius: 0;
  --radius-lg: 0;
  /* 모션 */
  --duration: 350ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* == Base == */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--page-margin); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 세리프 헤드라인 + 산세리프 본문 페어링 */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.35; letter-spacing: -0.005em; word-break: keep-all; }
.page-title { font-size: 44px; font-weight: 400; }   /* H1 스케일 */
.section-title { font-size: 28px; font-weight: 400; } /* H2 스케일 */
.small { font-size: 15px; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; letter-spacing: 0.01em; color: var(--muted); }
.muted { color: var(--muted); }
/* 사양 표기: 모노 대신 차분한 산세리프 소형 (Japandi — 기술 문양 배제) */
.spec {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 킥커: 소형 대문자 + 넓은 자간 */
.kicker {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}

/* == Buttons == */
.btn {
  font-family: var(--font-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding-inline: 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid rgba(17, 17, 17, 0.6);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
    border-color var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
/* 호버: 액센트는 보더로만 — 라벨 텍스트는 잉크 유지(AA) */
.btn:hover { border-color: var(--accent); color: var(--ink); background: var(--paper); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: #2E2E2E; color: var(--paper); border-color: #2E2E2E; }
.btn-sm { height: 44px; padding-inline: 20px; font-size: 14px; }
/* 준비 중(disabled): 톤 그루핑 유지 + AA (muted on surface 4.8:1) */
.btn[disabled] {
  background: var(--surface);
  color: var(--muted); /* muted on surface 4.77:1 */
  border-color: transparent;
  cursor: default;
}
.btn[disabled]:hover { background: var(--surface); color: var(--muted); border-color: transparent; }
.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
  transition: opacity var(--duration) var(--ease);
}
.text-link:hover { opacity: 0.75; }
.text-btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
  cursor: pointer;
  transition: opacity var(--duration) var(--ease);
}
.text-btn:hover { opacity: 0.75; }
.text-btn[disabled] { color: var(--muted); text-decoration-color: var(--line-strong); cursor: default; }
.text-btn[disabled]:hover { opacity: 1; }

/* == Forms == */
label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 8px; }
/* email·tel·url·password가 빠져 있어 그 칸만 브라우저 기본 크기로 나왔다 (2026-08-28 대표 지적) */
input[type="text"], input[type="search"], input[type="number"],
input[type="email"], input[type="tel"], input[type="url"], input[type="password"], select {
  height: 48px;
  width: 100%;
  padding-inline: 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
input::placeholder { color: var(--muted); }
select:disabled, input:disabled { background: var(--surface); color: var(--muted); border-color: transparent; }

/* == Header: 로고 좌 / 카테고리 메뉴 중앙 / 우측 유틸(쇼핑몰 구분 축소 + 아이콘 3종) == */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 16px;
}
/* 브랜드: 세리프 레터스페이스 워드마크 — 각 몰 홈 링크 (2026-08-27 대표 지시) */
.brand {
  font-family: var(--font-label);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-decoration: none;
}
.site-header .brand {
  font-size: 17px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
/* 3영역 센터링: 로고(flex:1) / 메뉴(중앙) / 유틸(flex:1 우측) —
   transform 미사용(메가 메뉴의 position:fixed가 뷰포트 기준이 되도록) */
.site-header .brand-slot { flex: 1 0 0; } /* 폭 확보는 래퍼가 — 앵커 클릭 영역은 워드마크 크기로 한정 */
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 78px;
}
.nav a {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--duration) var(--ease);
}
.nav a:hover { opacity: 0.7; }
.nav .active { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--accent); }

.site-header .nav > .nav-link,
.site-header .nav-item > .nav-link { font-weight: 700; }
/* 우측 유틸: 쇼핑몰 구분(축소) + 검색·견적함·프로필 아이콘 */
.header-utils { flex: 1 0 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.track-nav { display: flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 1px solid var(--line); }
.track-nav a {
  font-size: 12px;
  text-decoration: none;
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--duration) var(--ease);
}
.track-nav a:hover { color: var(--ink); }
.track-nav [aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ink);
  border-radius: 50%;
  transition: background-color var(--duration) var(--ease);
}
.icon-btn:hover { background: var(--surface); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn[aria-current="page"] { background: var(--surface); }
.cart-badge {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  padding-inline: 4px;
}
/* 중앙 메뉴가 좌우 요소와 부딪히기 전에 랩 레이아웃으로 전환 */
@media (max-width: 1360px) {
  .site-header .container { height: auto; flex-wrap: wrap; padding-block: 10px; row-gap: 6px; }
  .site-header .brand-slot { flex: 0 0 auto; order: 1; }
  .header-utils { flex: 0 0 auto; order: 2; margin-left: auto; }
  .site-header .nav { order: 3; width: 100%; gap: 36px; }
}
.notice-bar { background: var(--surface); }
.notice-bar .container { padding-block: 10px; }

/* == Footer: 인버스 다크 밴드 (다크 토큰 세트) == */
/* 인버스 영역: 잉크색 포커스 링이 배경과 동일해 비가시 → 화이트로 오버라이드 */
.site-footer :focus-visible { outline-color: var(--inverse-text); }
.site-footer { background: var(--inverse-bg); color: var(--inverse-text); padding-block: 56px; margin-top: var(--section); }
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
  align-items: baseline;
}
.site-footer .brand { color: var(--inverse-text); }
.site-footer .ph-tag { color: var(--inverse-muted); }
.ph-tag { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }

/* == Placeholder 이미지: 흰 바탕 + 잉크 테두리 박스 (실사 수령 전 — 2026-08-27 대표 지시) == */
.ph-img {
  position: relative;
  border: 1px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
  background: #EAEAEA; /* 예시 사진 자리 — 연한 회색 (2026-08-27 대표 지시) */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
.ph-img .caption { display: none; }
.ph-img .ph-tag {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0;
  padding: 3px 8px;
  color: var(--muted);
}
.ph-note {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  color: var(--muted);
}

/* == Breadcrumb == */
.breadcrumb { padding-block: 20px 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li { font-size: 13px; color: var(--muted); }
.breadcrumb li + li::before { content: "·"; margin-right: 8px; color: var(--sand); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb [aria-current] { color: var(--ink); }

/* == 목록: 페이지 헤드 · 탭 · 툴바 == */
.page-head { padding-block: 56px 0; }
.page-head .page-title { margin-bottom: 10px; }
.page-head .kicker { margin-bottom: 14px; }

/* 페이지 제목 드롭다운 — 타일·8분류 이동 (2026-08-30 대표 지시 "제품을 클릭하면 드롭다운") */
.title-drop { position: relative; display: inline-block; }
.title-drop-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; display: inline-flex; align-items: baseline; gap: 12px;
}
.title-caret { font-size: 16px; color: var(--muted); transition: transform var(--duration) var(--ease); }
.title-drop-btn[aria-expanded="true"] .title-caret { transform: rotate(180deg); }
.title-drop-menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 180px; list-style: none; padding: 6px 0;
  background: #FFFFFF; border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
}
.title-drop-menu a {
  display: block; padding: 10px 20px; text-decoration: none;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
}
.title-drop-menu a:hover { background: var(--surface); }
.title-drop-menu a[aria-current="true"] { font-weight: 600; }

/* 상품 목록 상단 카테고리 — 현재 분류 아래에서 다른 분류로 바로 이동 */
.category-nav {
  width: 100%;
  margin-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.category-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.category-nav a {
  position: relative;
  display: block;
  padding-block: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.category-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}
.category-nav a:hover,
.category-nav a[aria-current="page"] { color: var(--ink); }
.category-nav a[aria-current="page"] { font-weight: 700; }
.category-nav a:hover::after,
.category-nav a[aria-current="page"]::after { transform: scaleX(1); }

.tabs { margin-top: 36px; }
.tabs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; }
.tabs a {
  display: inline-block;
  padding-block: 12px;
  font-size: 15px;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color var(--duration) var(--ease);
}
.tabs a:hover { color: var(--ink); }
.tabs [aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
}
.toolbar .result-count { font-size: 14px; color: var(--muted); }
.toolbar .controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.toolbar select { width: auto; min-width: 150px; }
.toolbar .search input { width: 240px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding-inline: 14px;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
  border: none;
  border-radius: 17px;
}

/* == 상품 그리드: 밝은 카드 패널 (톤 그루핑) == */
.grid-products {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  padding-block: 24px 0;
}
/* SHOP 썸네일을 TILE과 같은 크기·간격·반응형 열 수로 통일한다. */
.grid-products.grid-6 { grid-template-columns: repeat(4, 1fr); gap: 44px 24px; }
@media (max-width: 1440px) { .grid-products.grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .grid-products.grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-products.grid-6 { grid-template-columns: 1fr; } }
/* 플랫 카드(풀블리드 개편): 패널·라운드 없이 이미지+텍스트 — 이미지가 화면과 이어지는 인상 */
.p-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.p-card > a { text-decoration: none; display: block; }
.p-card .ph-img { aspect-ratio: 4 / 3; margin: 0 0 16px; border-radius: 0; transition: transform var(--duration) var(--ease); }
.p-card:hover .ph-img { transform: scale(1.03); }
.p-card .cat { margin-bottom: 4px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; }
.p-card h3 { font-size: 19px; margin-bottom: 6px; }
.p-card h3 a { text-decoration: none; }
.p-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.p-card .spec { margin-bottom: 12px; }
.p-card .status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.badge {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: none;
  border-radius: 0;
  padding: 4px 10px;
  letter-spacing: 0.06em;
}
.p-card .cta-row { display: flex; align-items: center; gap: 16px; margin-top: auto; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding-block: 64px 0; }
.pagination a, .pagination span {
  font-family: var(--font-sans);
  font-size: 14px;
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 50%;
}
.pagination [aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 500; }
.pagination a:hover { background: var(--surface); }
.pagination .ph-tag { min-width: auto; height: auto; margin-left: 12px; }

/* == 상세 (플레이스홀더 페이지 포함) == */
.detail-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  padding-block: 40px 0;
}
.gallery-main.ph-img { aspect-ratio: 2 / 3; margin-bottom: 16px; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; }
.thumbs .ph-img { aspect-ratio: 1 / 1; padding: 8px; }
.detail-info .cat { margin-bottom: 8px; }
.detail-info .page-title { margin-bottom: 12px; }
.detail-info .desc { color: var(--muted); margin-bottom: 20px; }
.detail-info .status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.opt-group { margin-bottom: 20px; }
.qty-row { display: flex; align-items: end; gap: 16px; margin-bottom: 32px; }
.qty-row .opt-group { margin-bottom: 0; flex: 1; }
.qty-row input { width: 120px; }
.cta-stack { display: flex; flex-direction: column; gap: 12px; }
.cta-stack .text-btn { align-self: flex-start; font-size: 15px; margin-top: 8px; }
.detail-info .note { margin-top: 24px; }
.detail-section { padding-top: var(--section); }
.detail-section .section-title { margin-bottom: 32px; }
.spec-table { width: 100%; border-collapse: collapse; max-width: 720px; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th { font-size: 14px; font-weight: 600; width: 180px; color: var(--muted); }
.spec-table td { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.02em; }
.related-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.related-grid .p-card .ph-img { aspect-ratio: 1 / 1; }

/* == 견적함 == */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(540px, 700px) minmax(420px, 480px);
  justify-content: center;
  gap: clamp(48px, 5vw, 76px);
  align-items: center;
  padding-block: 40px 0;
}
.quote-consult-visual {
  position: relative;
  top: auto;
  width: 100%;
  aspect-ratio: 7 / 6;
  margin: 0;
  align-self: center;
  overflow: hidden;
  background: #e8e2da;
}
.quote-consult-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}
.cart-layout > .summary {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.cart-list { list-style: none; background: var(--card); border-radius: var(--radius-lg); padding: 8px 24px; }
.cart-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-list .cart-row:last-child { border-bottom: none; }
.cart-row .ph-img { aspect-ratio: 1 / 1; padding: 8px; }
.cart-row h3 { font-size: 18px; margin-bottom: 4px; }
.cart-row .spec { display: block; margin-bottom: 8px; }
.cart-row .row-actions { display: flex; flex-direction: column; align-items: end; gap: 12px; }
.cart-row .qty { width: 88px; height: 40px; }

/* 요약 패널: 카드 톤 그루핑 */
.summary { background: var(--card); border-radius: var(--radius-lg); padding: 28px 24px; }
.summary .section-title { font-size: 22px; margin-bottom: 16px; }
.summary .info-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}
.summary .info-row .spec { font-size: 14px; }
.summary .hint { margin-block: 20px 24px; }
.summary .cta-stack { gap: 12px; }
.summary .cta-stack .text-btn { align-self: flex-start; font-size: 15px; margin-top: 8px; }
.upload-box {
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  margin-block: 24px;
}
.upload-box .caption { display: block; margin-top: 6px; }

/* == 견적·상담 요청 폼 == */
.req-form { margin-top: 24px; }
.req-form .field { margin-bottom: 16px; }
.req-form fieldset { border: 0; margin-bottom: 20px; }
.req-form legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 0;
  cursor: pointer;
}
input[type="radio"], input[type="checkbox"] {
  height: auto;
  width: auto;
  accent-color: var(--accent);
}
textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  resize: vertical;
}
textarea:disabled { background: var(--surface); color: var(--muted); border-color: transparent; }
.consent-row { display: flex; align-items: flex-start; gap: 8px; }
.consent-row label { font-weight: 400; font-size: 13px; color: var(--muted); margin-bottom: 0; cursor: pointer; }
.field-error { color: var(--error); font-size: 13px; margin-top: 6px; }
input.has-error, textarea.has-error { border-color: var(--error); }
.file-hint { display: block; margin-top: 6px; }
.request-done { background: var(--card); border-radius: var(--radius-lg); border-top: 3px solid var(--accent); padding: 24px; margin-top: 24px; }
.request-done h3 { font-size: 19px; margin-bottom: 8px; }
.request-done .spec { display: block; margin-block: 8px 12px; }

/* == 빈 상태 == */
.empty-state {
  background: var(--card);
  border: none;
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}
.empty-state .title { font-family: var(--font-serif); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 6px; }

/* 전체 보기 링크 (섹션 헤드 공용) */
.more-link {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--accent);
  transition: opacity var(--duration) var(--ease);
}
.more-link:hover { opacity: 0.7; }
/* == 모션 최소화 == */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .text-link, .text-btn, .nav a, .tabs a, .track-nav a, .more-link, .icon-btn,
  .p-card .ph-img { transition: none; }
  .p-card:hover .ph-img { transform: none; }
}

/* == 반응형 (검수 기준 360px) == */
@media (max-width: 1024px) {
  .grid-products { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 40px var(--gutter); }
  .detail-grid { grid-template-columns: 1fr; gap: 48px; }
  .cart-layout { grid-template-columns: 1fr; gap: 48px; }
  .quote-consult-visual { position: relative; top: auto; width: min(100%, 700px); }
}
@media (max-width: 768px) {
  :root { --page-margin: 20px; --gutter: 16px; --section: 64px; }
  html { scroll-padding-top: 76px; }
  .page-title { font-size: 32px; }
  .section-title { font-size: 23px; }
  .btn { height: 48px; }
  .nav .btn, .btn-sm { height: 44px; }
  .brand { font-size: 18px; }
  .quote-consult-visual { width: 100%; }
  .site-header .nav { gap: 16px; flex-wrap: wrap; row-gap: 4px; }
  .nav a { font-size: 12px; letter-spacing: 0.12em; }
  .track-nav a { font-size: 11px; }
  .header-utils { gap: 10px; }
  .header-utils .track-nav { padding-right: 10px; }
  .page-head { padding-block: 36px 0; }
  .category-nav { margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
  .category-nav::-webkit-scrollbar { display: none; }
  .category-nav ul { width: max-content; flex-wrap: nowrap; gap: 24px; padding-right: 20px; }
  .tabs ul { gap: 20px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .controls { flex-direction: column; align-items: stretch; }
  .toolbar .search input, .toolbar select { width: 100%; }
  .grid-products { grid-template-columns: 1fr; gap: 24px; }
  .related-grid { grid-template-columns: 1fr; }
  .cta-stack .btn { width: 100%; }
  .cart-list { padding: 4px 16px; }
  .cart-row { grid-template-columns: 80px 1fr; }
  .cart-row .row-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .site-footer .container { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .thumbs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}


/* ============================================================
   == 유로세라믹 형식 컴포넌트 v1.1 (2026-08-27) ==
   페이지 형식 참고: euroceramic.co.kr (구조만 — 스킨은 Japandi 유지)
   홈: 풀블리드 히어로 + 2분할 배너 / 목록: 링크 카드 / 상세: 구매 패널 + 탭 / 확장 푸터
   ============================================================ */

/* == 목록: 링크 카드 (버튼 없음 — 카드 전체가 상세 링크) == */
.grid-products.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* flex:1 이면 남는 세로 공간을 링크가 다 먹어 색상 스와치가 카드 맨 아래로 밀린다.
   그러면 색상 수가 적은 카드의 스와치 줄이 많은 카드와 어긋난다 (2026-08-31 대표 지적
   "색상이 적은 애들은 아래칸부터 시작하는데 윗칸부터 딱딱 맞아야 할 듯"). */
.p-card .p-link { text-decoration: none; display: flex; flex-direction: column; flex: 0 0 auto; }
.p-card .p-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.p-card .eng {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}
.p-card:not([data-compact-tile]) h3 {
  margin: 0 0 7px;
  font-size: 16px;
  line-height: 1.45;
}
.p-card .card-summary,
.p-card .card-size,
.p-card .card-color {
  display: block;
  color: var(--muted);
  font-family: var(--font-sans);
  line-height: 1.55;
}
.p-card .card-summary {
  margin-bottom: 3px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.p-card .card-size,
.p-card .card-color {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.p-card .card-color { margin-top: 2px; }

/* == 상세: 갤러리 + 구매 패널 == */
.pd-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  padding-block: 32px 0;
  align-items: start;
}
.buy-panel { background: var(--card); border-radius: var(--radius-lg); padding: 32px 28px; }
.buy-panel .cat { letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; margin-bottom: 8px; }
.buy-panel .pd-name { font-size: 30px; margin-bottom: 4px; }
.buy-panel .pd-eng {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 20px;
}
.price-block { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 14px; margin-bottom: 20px; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 6px; }
.price-row .label { font-size: 14px; color: var(--muted); }
.price-row .value { font-family: var(--font-serif); font-size: 18px; }
.price-row .value.caption { font-family: var(--font-sans); font-size: 13px; }

.qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.qty-stepper button {
  width: 44px;
  border: none;
  background: var(--card);
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
}
.qty-stepper button:hover { background: var(--surface); }
.qty-stepper button[disabled] { color: var(--muted); cursor: default; background: var(--surface); }
.qty-stepper input {
  width: 64px;
  height: 44px;
  border: none;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  font-size: 15px;
}
.buy-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block: 4px 20px; }
.buy-qty-row .label { font-size: 14px; font-weight: 600; }
.buy-actions { display: flex; flex-direction: column; gap: 10px; }
.buy-note { margin-top: 16px; }

/* == 상세: 탭 == */
.pd-tabs { margin-top: var(--section); }
.pd-tabs .tab-list { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tab-btn {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--muted);
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--duration) var(--ease);
}
.tab-btn:hover { color: var(--ink); }
.tab-btn[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tab-panel { padding-top: 40px; }
.tab-panel[hidden] { display: none; }

/* == 확장 푸터 (인버스 유지) == */
/* 구버전 한 줄 푸터의 flex 컨테이너를 3단 적층 구조로 전환 — 구분선이 전체 폭으로 그려지게 */
.site-footer .container { display: block; }
.site-footer .footer-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--inverse-border);
}
.site-footer .footer-quick a { font-size: 14px; color: var(--inverse-text); text-decoration: none; transition: opacity var(--duration) var(--ease); }
.site-footer .footer-quick a:hover { opacity: 0.7; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gutter); margin-bottom: 36px; }
.footer-col h3 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inverse-muted);
  margin-bottom: 12px;
}
.footer-col p { font-size: 14px; color: var(--inverse-muted); line-height: 1.8; }
.footer-col .strong { color: var(--inverse-text); }
.footer-legal { border-top: 1px solid var(--inverse-border); padding-top: 28px; display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: space-between; align-items: baseline; }
.footer-legal p { font-size: 13px; color: var(--inverse-muted); line-height: 1.8; max-width: 720px; }

/* == 반응형 보강 == */
@media (max-width: 1024px) {
  .grid-products.grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pd-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav { flex-wrap: wrap; row-gap: 6px; }
  .grid-products.grid-4 { grid-template-columns: 1fr; }
  .buy-panel { padding: 24px 20px; }
  .buy-panel .pd-name { font-size: 25px; }
  .pd-tabs .tab-list { gap: 0; }
  .tab-btn { padding: 12px 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-btn { transition: none; }
}

/* ============================================================
   == 메인 페이지 v1.2 (2026-08-27) ==
   형식 참고: usong.co.kr 메인 구성(11섹션) — 구조만 분석해 자체 재구현
   (원 사이트 코드·자산 미사용, 라이브러리 0 — briefs/07 기록)
   ============================================================ */

/* 메인 한정: 헤더 오버레이(fixed) — 히어로 사진 위에서도 메뉴가 읽히게
   흰색 바탕 + 투명도 약간 (2026-08-30 대표 지시 "히어로 사진때문에 안보이니") */
.main-page.js-on .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.main-page.js-on .site-header.scrolled {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--line);
}

/* == 1. 히어로 슬라이더 (풀스크린) == */
.hero-slider {
  position: relative;
  height: 100svh;
  min-height: 580px;
  background: #EAEAEA; /* 예시 사진 자리 — 연한 회색 */
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; /* 텍스트 수직 중앙 (2026-08-27 대표 지시) */
  background: #EAEAEA; /* 실사 수령 전 — 슬라이드별 이미지 자리 (연한 회색) */
  opacity: 0;
  visibility: hidden; /* 비활성 슬라이드를 포커스·스크린리더에서 제외 */
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 900ms;
}
.hero-slide.active { opacity: 1; visibility: visible; transition: opacity 900ms cubic-bezier(.22,.61,.36,1); z-index: 1; }
.hero-slide .container {
  width: 100%;
  padding-left: clamp(116px, 10vw, 160px);
}
.hero-slide > .container > * {
  opacity: 0;
  transform: translate(38px, 18px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.hero-slide.active > .container > * {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 560ms ease 260ms, transform 760ms cubic-bezier(.22,.61,.36,1) 260ms;
}
.hero-slide .slide-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  padding: 0;
  margin-bottom: 20px;
}
.hero-slide .slide-name {
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.hero-slide .slide-copy { color: var(--ink); font-size: 17px; max-width: 560px; margin-bottom: 28px; }
.hero-slide .btn-primary {
  height: auto;
  padding: 0 0 7px;
  gap: 10px;
  justify-content: flex-start;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
}
.hero-slide .btn-primary:hover {
  background: transparent;
  color: var(--ink);
  border-bottom-color: currentColor;
}
.hero-slide .btn-primary span { transition: transform 240ms var(--ease); }
.hero-slide .btn-primary:hover span { transform: translateX(4px); }
.hero-slider > .ph-tag {
  position: absolute;
  right: 14px;
  top: 90px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 8px;
}
/* 하단 페이저: 번호·얇은 진행선·재생 제어만 남긴다. */
.hero-pager {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
}
.hero-progress {
  width: clamp(120px, 14vw, 190px);
  height: 1px;
  background: rgba(17, 17, 17, .34);
  border: 0;
  overflow: hidden;
}
.hero-progress-fill { display: block; width: 0; height: 100%; background: #111; }
.hero-count {
  min-width: 18px;
  color: #111;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.hero-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.hero-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  transition: width var(--duration) var(--ease), height var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.hero-dot.active::after { width: 10px; height: 10px; background: var(--ink); }
.hero-dot[disabled] { cursor: default; }
.hero-scroll {
  position: absolute;
  right: var(--page-margin);
  bottom: 26px;
  z-index: 2;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 레시피 상세의 간결한 이미지 탐색 방식을 참고한 좌우 컨트롤.
   넓은 클릭 영역과 얇은 선형 화살표로 사진을 가리지 않게 한다. */
.hero-arrows {
  position: absolute;
  inset: 50% clamp(16px, 3vw, 48px) auto;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}
.hero-arrow {
  width: 54px;
  height: 68px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111;
  filter: drop-shadow(0 1px 5px rgba(255, 255, 255, .72));
  cursor: pointer;
  pointer-events: auto;
  transition: color 220ms var(--ease), opacity 220ms var(--ease);
}
.hero-arrow svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: .85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-arrow:hover svg { animation: hero-arrow-next 780ms ease-in-out infinite alternate; }
.hero-arrow--prev:hover svg { animation-name: hero-arrow-prev; }
@keyframes hero-arrow-prev {
  from { transform: translateX(4px); }
  to { transform: translateX(-5px); }
}
@keyframes hero-arrow-next {
  from { transform: translateX(-4px); }
  to { transform: translateX(5px); }
}
.hero-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.hero-arrow[disabled] { opacity: .35; cursor: default; }
.hero-slider[data-tone="dark"] .hero-arrow {
  color: #fff;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .58));
}

/* 전환 순간의 미세한 줌아웃으로 이미지가 끊기지 않고 자연스럽게 이어진다. */
.hero-slide .hero-media {
  transform: scale(1.035);
  transition: transform 5.4s cubic-bezier(.2,.65,.25,1);
  will-change: transform;
}
.hero-slide.active .hero-media { transform: scale(1); }

@media (max-width: 700px) {
  .hero-slide .container { padding-left: var(--page-margin); }
  .hero-arrows {
    inset: auto 12px 88px;
    transform: none;
  }
  .hero-arrow { width: 42px; height: 56px; }
  .hero-arrow svg { width: 27px; height: 27px; }
  .hero-pager { bottom: 27px; }
  .hero-progress { width: 96px; }
}

/* == 공통 섹션 셸 == */
.m-section { padding-block: var(--section) 0; }
.m-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.m-title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.m-sub { color: var(--muted); font-size: 15px; margin-top: 8px; }

/* == 2. NEW ARRIVAL: 대형 2열 카드 == */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-2 .ph-img { aspect-ratio: 16 / 10; }

/* == 3. 띠 배너 == */
.strip-banner { margin-top: var(--section); background: var(--surface); border-block: 1px solid var(--ink); }
.strip-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding-block: 22px;
}
.strip-banner .msg { font-family: var(--font-serif); font-size: 19px; }

/* == 캐러셀 공통 (scroll-snap — JS 없이도 스와이프 동작) == */
.carousel { position: relative; }
.car-track {
  list-style: none; /* 이름 앞 점(글머리표) 제거 — 2026-08-29 대표 지시 */
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.car-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.car-item-wide { width: min(620px, 82vw); }
.car-item { width: min(320px, 72vw); }
.car-item-logo {
  width: 220px;
  height: 110px;
}
.brand-showcase {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 24px 28px;
  background: var(--card);
  border: 1px solid var(--line);
}
.brand-showcase img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 54px;
  object-fit: contain;
}
.brand-track {
  scroll-snap-type: none;
  scrollbar-width: none;
}
.brand-track::-webkit-scrollbar { display: none; }
.car-btn {
  position: absolute;
  top: 34%;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration) var(--ease);
}
.car-btn:hover { background: var(--surface); }
.car-btn[disabled] { color: var(--muted); border-color: var(--line-strong); cursor: default; background: var(--surface); }
.car-btn.prev { left: -8px; }
.car-btn.next { right: -8px; }

/* == 4. 공간 스타일링 카드 == */
.space-card { position: relative; }
.space-card .ph-img { aspect-ratio: 16 / 10; margin-bottom: 14px; }
.space-card .name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.space-card .caption { display: block; margin-top: 2px; }

/* == 5. 영상 자리 == */
.video-ph { max-width: 1120px; margin-inline: auto; }
.video-ph .ph-img { aspect-ratio: 16 / 9; }

/* == 9. JOIN US 2카드 == */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); list-style: none; }
.duo-card { background: var(--card); padding: 44px 36px; }
.duo-card .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
}
.duo-card h3 { font-size: 24px; margin-bottom: 10px; }
.duo-card p { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 24px; }

/* == 10. CONTACT == */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); list-style: none; }
.contact-cell { border-top: 1px solid var(--ink); padding-top: 18px; }
.contact-cell .name { font-family: var(--font-serif); font-size: 19px; margin-bottom: 6px; }
.contact-cell p { font-size: 14px; color: var(--muted); line-height: 1.8; }

/* == 11. 슬로건 밴드 == */
.slogan-band {
  margin-top: var(--section);
  position: relative;
  min-height: clamp(430px, 42vw, 650px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #1b1714;
  color: var(--inverse-text);
  text-align: left;
}
.slogan-band::before,
.slogan-band::after {
  content: "";
  position: absolute;
  inset: -4%;
  pointer-events: none;
}
.slogan-band::before {
  background: url("assets/hero/slogan-bigslab-livingroom.png") center calc(50% + var(--slogan-shift, 0px)) / cover no-repeat;
  opacity: 0.56;
  transform: scale(1.08);
  transition:
    opacity 1500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.slogan-band::after {
  background: linear-gradient(90deg, rgba(17, 14, 12, 0.62) 0%, rgba(17, 14, 12, 0.27) 50%, rgba(17, 14, 12, 0.06) 100%);
}
.slogan-band.is-visible::before {
  opacity: 1;
  transform: scale(1);
}
.slogan-band .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 0 clamp(54px, 6vw, 88px);
}
.slogan-band__accent {
  display: block;
  width: 0;
  height: 2px;
  margin-bottom: 20px;
  background: #fff;
  transition: width 850ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
.slogan-band.is-visible .slogan-band__accent {
  width: 72px;
}
.slogan-band .line {
  font-family: var(--font-sans);
  font-size: clamp(27px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.035em;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}
.slogan-band .line strong {
  display: inline-block;
  font-family: "Cinzel", var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #fff;
}
.slogan-band__lead,
.slogan-band__closing {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.slogan-band__lead { transition-delay: 260ms; }
.slogan-band__closing { transition-delay: 650ms; }
.slogan-band.is-visible .slogan-band__lead,
.slogan-band.is-visible .slogan-band__closing {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.slogan-band.is-scroll-linked .slogan-band__lead,
.slogan-band.is-scroll-linked .slogan-band__closing {
  opacity: var(--slogan-copy-opacity, 0);
  transform: translate3d(0, var(--slogan-copy-y, 70px), 0);
  transition: none;
  will-change: opacity, transform;
}
.slogan-band.is-scroll-linked .slogan-band__closing {
  opacity: var(--slogan-closing-opacity, 0);
  transform: translate3d(0, var(--slogan-closing-y, 94.5px), 0);
}
.slogan-band.is-scroll-linked .container {
  opacity: var(--slogan-stage-opacity, 0);
  clip-path: inset(0 0 var(--slogan-stage-clip, 22%) 0);
  filter: blur(var(--slogan-stage-blur, 20px));
  transform: translate3d(0, var(--slogan-stage-y, 170px), 0) scale(var(--slogan-stage-scale, .9));
  transform-origin: 50% 42%;
  will-change: opacity, clip-path, filter, transform;
}
.slogan-band.is-scroll-linked .slogan-band__accent {
  width: var(--slogan-accent-width, 0px);
  transition: none;
}
.slogan-band.is-scroll-linked::before {
  opacity: var(--slogan-bg-opacity, .5);
  transform: scale(var(--slogan-bg-scale, 1.075));
  transition: none;
  will-change: opacity, transform, background-position;
}
.slogan-band.is-visible .line strong {
  background: linear-gradient(105deg, #111 0%, #111 38%, #fff 56%, #fff 100%);
  background-size: 250% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: slogan-gold-sweep 1250ms cubic-bezier(0.22, 1, 0.36, 1) 950ms forwards;
}
.slogan-band.is-scroll-linked.is-visible .line strong {
  animation: none;
  background-position: var(--slogan-sweep-position, 0%) 0;
}
.slogan-band :focus-visible { outline-color: var(--inverse-text); }

@keyframes slogan-gold-sweep {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

/* == 메인 스크롤 등장 효과 == */
.js-on .scroll-reveal,
.js-on .scroll-reveal-item {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-on .scroll-reveal.is-visible,
.js-on .scroll-reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js-on .scroll-zoom {
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center center;
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1050ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  overflow: hidden;
}
.js-on .scroll-zoom.is-zoom-visible {
  opacity: 1;
  transform: scale(1);
}

/* == 메인 반응형 == */
@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .duo-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero-slider { min-height: 520px; }
  .hero-slide .container { padding-bottom: 96px; }
  .hero-slider > .ph-tag { top: 150px; }
  .m-title { font-size: 30px; }
  .grid-2 { grid-template-columns: 1fr; }
  .car-item-logo { width: 180px; height: 90px; }
  .brand-showcase { padding: 20px 24px; }
  .car-btn { display: none; } /* 모바일은 스와이프 */
  .duo-card { padding: 32px 24px; }
  .slogan-band {
    min-height: 430px;
  }
  .slogan-band::before { background-position: 42% calc(50% + var(--slogan-shift, 0px)); }
  .slogan-band .container { padding-block: 0 44px; }
  .slogan-band .line { font-size: clamp(23px, 7vw, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide > .container > *,
  .hero-slide .hero-media,
  .hero-arrow { transition: none; }
  .car-btn { transition: none; }
  .hero-progress { display: none; }
  .hero-dot::after { transition: none; }
  .js-on .scroll-reveal,
  .js-on .scroll-reveal-item,
  .js-on .scroll-zoom {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .slogan-band::before,
  .slogan-band__accent,
  .slogan-band__lead,
  .slogan-band__closing {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .slogan-band__accent { width: 72px; }
  .slogan-band.is-visible .line strong { animation: none; color: #fff; background: none; }
}

/* == v1.2.1 검수 반영 (2026-08-27) == */
/* 슬로건 밴드 CTA — 인라인 대신 클래스(호버 피드백 복원) */
.slogan-band .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.slogan-band .btn-primary:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }
/* 브랜드 로고 자리 비율 */
.car-item-logo .ph-img { aspect-ratio: 5 / 2; }
/* 히어로 자동 전환 일시정지 토글 (WCAG 2.2.2) */
.hero-pause {
  width: 18px;
  height: 22px;
  padding: 0;
  margin-left: 2px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 180ms ease;
}
.hero-pause:hover { opacity: .48; }
.hero-pause[disabled] { color: var(--muted); cursor: default; }

/* == SHOP 메가 메뉴 (2026-08-27 대표 지시 — 하위 메뉴는 SHOP에만) ==
   형식 참고: 유로세라믹 SHOP 드롭다운(전폭 패널 + 그룹 열) — 구성은 우리 취급 범위 임시 편성 */
.nav-item { display: flex; align-items: center; }
.has-mega { height: 76px; } /* 링크~패널 사이 호버 공백 제거 */
.mega {
  position: fixed;
  left: 0;
  right: 0;
  top: 76px; /* 단일 행 헤더 높이 기준 — 랩 레이아웃(≤1360px)에서는 비표시 */
  background: #FFFFFF; /* 2026-08-31 대표 지시 "반투명 말고 흰색 바탕으로" — 뒤 사진이 비쳐 글자가 읽기 어려웠다 */
  border-bottom: 1px solid var(--line);
  padding-block: 48px 40px; /* 여유 있는 패널 높이 — 글자 잘림 방지 */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease), visibility 0s linear var(--duration);
  z-index: 9;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration) var(--ease);
}
/* 주의: container 클래스를 겸용하면 .site-header .container(플렉스·중앙·76px 고정)가
   특이도에서 이겨 열 정렬·패널 높이가 깨진다 — 반드시 자체 완결 그리드로 유지 */
.mega-inner {
  display: grid;
  grid-template-columns: repeat(4, 160px);
  justify-content: center;
  align-items: start;
  column-gap: 80px;
  row-gap: 8px;
  padding-inline: 48px;
}
.mega-col { min-width: 0; }
.mega-head {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.mega-head a { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; }
.mega-head a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.mega-col > a, .mega-flat > a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  text-decoration: none;
  padding-block: 5px;
  transition: color var(--duration) var(--ease);
}
.mega-col > a:hover, .mega-flat > a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }
/* 그룹 없이 8분류를 순서대로 편 배치 (2026-08-31 대표 지시) — 4열 × 2행 */
.mega-flat { row-gap: 2px; }
.mega-flat > a { font-size: 15px; color: var(--ink); }
.mega-note { grid-column: 1 / -1; text-align: center; margin-top: 20px; }
/* SHOP 호버·포커스 중 — 하위 메뉴가 흰 바탕이므로 헤더도 같은 흰색으로 이어 붙인다
   (2026-08-31 대표 지시 "반투명 말고 흰색 바탕으로") */
.site-header:has(.has-mega:hover),
.site-header:has(.has-mega:focus-within) {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent; /* 메뉴 패널과 한 덩어리로 보이게 헤더 아래 선은 감춘다 */
}
@media (max-width: 1360px) {
  .mega { display: none; } /* 랩 레이아웃·터치 환경 — 카테고리는 제품 페이지 탭 이용 */
  .has-mega { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
}
/* == 히어로 실사 슬롯 (2026-08-27 — 대표 제공 이미지, assets/hero/hero-NN.jpg) ==
   이미지가 없으면 onerror로 래퍼 제거 -> 회색 플레이스홀더 유지. 좌측 스크림으로 텍스트 가독 확보 */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 42%, rgba(255, 255, 255, 0) 72%);
}
.hero-slide > .container { position: relative; z-index: 1; }

/* 홈 섹션 헤드 우측 링크 묶음 (타일 보기 + 전체 제품 보기) */
.m-links { display: flex; align-items: center; gap: 24px; }

/* == 타일 전용 목록 (2026-08-27 대표 지시 — 유로세라믹 product/list 형식 자체 재구현) ==
   좌 필터 사이드바(스티키) + 우 정사각 카드 3열. 필터 항목값은 실데이터 대기 플레이스홀더 */
.listing-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px 56px;
  align-items: start;
  padding-top: 8px;
}
.filter-panel { position: sticky; top: 100px; }
.tile-filter { max-height: calc(100vh - 120px); overflow-y: auto; overflow-x: hidden; padding-right: 10px; overscroll-behavior: contain; scrollbar-width: none; }
.tile-filter::-webkit-scrollbar { display: none; }
.tile-filter .filter-head { position: sticky; top: 0; z-index: 2; background: #FFFFFF; }
.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.filter-head .t {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filter-reset {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.filter-reset[disabled] { cursor: default; }
.filter-cats { list-style: none; padding-block: 14px; border-bottom: 1px solid var(--line); }
.filter-cats a {
  display: block;
  font-size: 14px;
  padding-block: 6px;
  text-decoration: none;
  color: var(--muted);
  transition: color var(--duration) var(--ease);
}
.filter-cats a:hover { color: var(--ink); }
.filter-cats a[aria-current] { color: var(--ink); font-weight: 600; }
.filter-group { border-bottom: 1px solid var(--line); }
.filter-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: "+"; font-size: 16px; color: var(--muted); }
.filter-group[open] summary::after { content: "\2013"; }
.filter-group .fg-body { padding-bottom: 14px; }
.listing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  margin-bottom: 12px; /* 구분선 제거 + 목록과 간격 좁게 (2026-08-27 대표 지시) */
}
.listing-topbar .total { font-family: var(--font-sans); font-size: 14px; }
.listing-topbar .total strong { font-weight: 700; }
.listing-controls { display: flex; align-items: center; gap: 12px; }
.listing-controls select { width: 140px; height: 40px; font-size: 14px; }
.listing-controls .search input { height: 40px; width: 200px; font-size: 14px; }
.grid-products.tile-grid { grid-template-columns: repeat(4, 1fr); gap: 44px 24px; }
.tile-grid .p-card { position: relative; }
.tile-grid .ph-img { aspect-ratio: 1 / 1; }
.tile-grid .p-card[data-compact-tile] h3 { margin: 0 0 6px; }
.tile-grid .p-card[data-compact-tile] .eng { margin: 0; }
.tile-grid .p-card[data-compact-tile] .card-finish { display: block; margin-top: 4px; color: var(--muted); font-family: var(--font-sans); font-size: 12px; line-height: 1.5; }
.p-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  padding: 5px 8px;
  text-transform: uppercase;
}
.p-price { font-family: var(--font-sans); font-size: 14px; color: var(--ink); margin-top: 4px; display: block; }
.p-price.ph { color: var(--muted); }
@media (max-width: 1440px) {
  .grid-products.tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .listing-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .tile-filter { max-height: min(70vh, 600px); }
  .grid-products.tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-products.tile-grid { grid-template-columns: 1fr; }
}
/* == 홈 NEW ARRIVAL: 좌 렌더링 스테이지 + 우 타일 슬라이드 (2026-08-27 대표 지시)
   데이터는 shop.js PRODUCTS(타일 품목)에서 생성 — 선택 시 assets/renders/<id>.jpg 로 교체 == */
/* NA 개편(2026-08-27 대표 지시): 좌 큰 사진 6:9 가로, 우 타일 1:2 세로 — 좌측 높이에 맞춤 */
.na-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: stretch; }
.na-stage { margin: 0; }
.na-stage-box { position: relative; aspect-ratio: 9 / 6; }
.na-stage-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.na-stage-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
}
.na-stage-cap { font-family: var(--font-sans); font-size: 13px; color: var(--muted); margin-top: 10px; }
/* 스와치 크기는 shop.js sizeNaSwatches()가 좌측 스테이지 높이에서 직접 계산해 px로 지정
   (브라우저별 flex+aspect-ratio 해석 차이로 겹침·비율 붕괴가 나서 JS 확정 방식으로 전환) */
.na-slider .na-track { gap: 24px; padding-bottom: 4px; }
.na-item { flex: 0 0 auto; }
.na-item > button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  display: block;
}
.na-swatch {
  display: block;
  width: 200px;   /* JS 미동작 폴백 — 2:3 세로 */
  height: 300px;
  background: #EAEAEA;
  /* 검은 테두리 제거 (2026-08-28 대표 지시) — 사진이 들어간 뒤로는 선이 사진을 가둬 보인다.
     선택 표시는 아래 aria-pressed 아웃라인이 계속 담당한다. */
  border: 0;
  margin-bottom: 10px;
  transition: transform var(--duration) var(--ease);
}
.na-item > button:hover .na-swatch { transform: scale(1.03); }
.na-item > button[aria-pressed="true"] .na-swatch { outline: 2px solid var(--ink); outline-offset: 2px; }
.na-en { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.na-nm { display: block; font-size: 14px; color: var(--ink); }
.na-slider .car-btn { display: none; } /* 화살표 제거 (대표 재지시) */
/* 스크롤바 제거 + 마우스로 집어서 드래그 (대표 재지시 — shop.js initNaDrag) */
.na-slider .na-track {
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  padding-bottom: 4px;
}
.na-slider .na-track::-webkit-scrollbar { display: none; }
.na-slider .na-track.dragging { cursor: grabbing; }
.na-track img { -webkit-user-drag: none; }
@media (max-width: 900px) {
  .na-layout { grid-template-columns: minmax(0, 1fr); } /* 1fr만 쓰면 트랙 최소폭이 그리드를 밀어냄 (모바일 가로 붕괴 원인) */
}
@media (prefers-reduced-motion: reduce) {
  .na-swatch { transition: none; }
  .na-item > button:hover .na-swatch { transform: none; }
}
/* == v0.8 DB 카탈로그 — 실사진 카드·더 보기 == */
.ph-img.has-photo { background: #FFFFFF; border-color: var(--line); }
.ph-img.has-photo > div { display: none; } /* 플레이스홀더 문구 숨김 */
.ph-img.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.na-swatch { position: relative; overflow: hidden; }
.na-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.load-more-row { display: flex; justify-content: center; padding-block: 36px 8px; }
.filter-cats .cnt, .tabs .cnt { color: var(--muted); font-size: 12px; margin-left: 6px; }
.gallery-main.has-photo { background: #FFFFFF; border-color: var(--line); }
/* 2026-08-28 대표 확정: 프레임은 2:3 세로로 고정하고, 사진은 잘리지 않고
   그 프레임 안에 들어갈 수 있는 최대 크기로 줄여서 전체를 보인다. */
.gallery-main.has-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}

.gallery-main { position: relative; }

/* 메인 이미지의 현재 슬라이드 표시 — 배경 박스 없이 점만 보인다. */
.gallery-main.has-photo > .gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  background: transparent;
}
.gallery-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.gallery-dot[aria-current="true"] { background: #FFFFFF; }
.gallery-dot:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* 목록·상세 상품명 — Montserrat Medium 500, 한글은 Pretendard 500 폴백 */
.p-card h3,
.pd-name {
  font-family: "Montserrat", "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 500;
}

/* v0.9: 갤러리 썸네일 버튼 — 시리즈 타일 컷 스와치·상세 이미지 미리보기 */
.thumbs .thumb-btn { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--line); background: #FFFFFF; cursor: pointer; }
.thumbs .thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs .thumb-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* v0.9: 상세 정보 탭 하단 — 카페24 상세 이미지 세로 스택
   원본이 750~860px대라 전폭으로 늘리면 흐릿해짐 → 860px 캡 + 중앙, 연속 컷은 틈 없이 */
.pd-detail-imgs { margin-top: 12px; max-width: 520px; margin-inline: auto; display: grid; gap: 28px; }
.pd-detail-imgs img { width: 100%; height: auto; display: block; }
.pd-detail-copy { margin: 0; padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 68px); color: #242424; background: transparent; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; text-align: center; }

/* buildThumbs가 숨긴 .thumbs — author display:grid가 UA [hidden]을 이기지 않게 */
.thumbs[hidden] { display: none; }

/* v0.9: 구매란 옵션 사진 스와치 (euroceramic 형식 — 대표 지시) */
.opt-picked { font-family: var(--font-sans); font-size: 13px; color: var(--muted); margin: 10px 0 8px; }
.opt-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.opt-sw { width: 72px; height: 72px; padding: 0; border: 1px solid var(--line); background: #FFFFFF; cursor: pointer; font-family: var(--font-sans); font-size: 11px; }
.opt-sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt-sw[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* v0.10: 구매란 euroceramic 구조 (대표 지시 "구조 똑같이") */
.pd-spec-head { display: block; margin-top: 6px; }
.pd-div { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.pd-combo-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pd-combo { font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
/* 주의: .pd-combo-row 안으로 한정 — 무한정 .icon-btn을 잡으면 헤더 아이콘(238행)까지
   흰 배경 + 회색 원 테두리로 덮어쓴다 (2026-08-27 대표 지적) */
.pd-combo-row .icon-btn {
  flex: none; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); background: #FFFFFF; color: var(--ink);
  border-radius: 0;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.opt-title { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.size-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
  min-width: 140px; padding: 10px 14px; border: 1px solid var(--line-strong);
  background: #FFFFFF; color: var(--ink); font-family: var(--font-sans); font-size: 13px;
}
.size-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* 시리즈 사이즈 전환 버튼 — 눌리지 않은 것만 클릭 유도 (2026-08-30) */
.size-btn:not([disabled]):not([aria-pressed="true"]) { cursor: pointer; }
.size-btn:not([disabled]):not([aria-pressed="true"]):hover { border-color: var(--ink); }
/* 옵션 목록 담기 — [+ 옵션 추가] 버튼과 선택 목록 (2026-08-30 대표 지시 "추가하기 버튼, 디자인 해치지 않게") */
.opt-add-btn {
  width: 100%; padding: 10px 14px; margin-bottom: 20px;
  border: 1px solid var(--line-strong); background: #FFFFFF;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink); cursor: pointer;
}
.opt-add-btn:hover { border-color: var(--ink); }
.mini-cart { border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; margin-bottom: 20px; }
.mini-cart-head { margin-bottom: 8px; }
.mini-cart-list { display: flex; flex-direction: column; gap: 8px; }
.mini-line { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mini-name { flex: 1 1 auto; min-width: 0; }
.mini-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); background: #FFFFFF; }
.mini-qty button { width: 26px; height: 26px; background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1; }
.mini-qty-n { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.mini-price { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.mini-del { background: none; border: 0; cursor: pointer; font-size: 16px; color: var(--muted); padding: 2px 4px; }
.mini-del:hover { color: var(--ink); }
/* 옵션 목록 모드에선 단일 수량칸 숨김 — 줄마다 수량을 조절한다 */
#pd-panel[data-minicart="1"] .buy-qty-row { display: none; }
.qty-block { margin-bottom: 20px; }
.qty-head { font-family: var(--font-sans); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.qty-note { border: 1px solid var(--line); background: var(--surface); padding: 10px 12px; margin-bottom: 10px; }
.qty-total { text-align: right; }
.total-row {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--ink); margin-top: 18px; padding-top: 14px; margin-bottom: 16px;
}
.total-row .label { font-family: var(--font-sans); font-size: 14px; font-weight: 700; }
.total-val { font-family: var(--font-sans); font-size: 17px; font-weight: 600; }
.buy-actions.cafe { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.buy-actions.cafe .btn { margin: 0; }
.buy-actions.cafe .btn-primary { flex: 1; }
.buy-actions.cafe > a.btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; }
.wish-btn { width: 52px; flex: none; padding-inline: 0; font-size: 17px; }
.wish-btn[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* 상품 정보 표 — 조금 더 작은 글씨 (대표 지시) */
.spec-table th, .spec-table td { font-size: 13px; }

/* v0.10: 목록 카드 시리즈 스와치 (euroceramic 형식 — 대표 지시 "목록에서도 타일이미지") */
.card-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card-sw { display: block; width: 64px; height: 64px; border: 1px solid var(--line); } /* 1:1 정사각·조금 크게 (대표 재지시) */
.card-sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-sw:hover, .card-sw:focus-visible { border-color: var(--ink); }

/* v0.10: 구매란 내 안내 탭 (잭슨카멜레온 형식 — 대표 지시) */
.panel-tabs { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 4px; }
/* 잭슨카멜레온식 좌우 맞춤 — 첫 탭은 왼끝, 마지막 탭은 오른끝 (대표 재지시) */
.ptab-list { display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: space-between; }
.ptab {
  appearance: none; border: 0; background: none; padding: 8px 0;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.02em;
  color: var(--muted); cursor: pointer;
}
.ptab[aria-selected="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.ptab-panel { padding: 10px 0 2px; }
.ptab-panel p { font-family: var(--font-sans); font-size: 12px; line-height: 1.8; color: var(--muted); }

/* v0.9: 상세 전폭 레이아웃(대표 지시 — euroceramic product/item 참고)
   ① 컨테이너 상한 해제(전폭, 좌우 여백만 유지) ② 메인 사진 1:1 정사각
   ③ 우측 구매 패널 스크롤 고정 — 상세 탭까지 그리드 좌측 열(2행)에 넣어
   패널 영역(2행 관통)이 페이지 끝까지 이어져야 sticky가 상세를 읽는 내내 유지된다 */
.pd-container { max-width: none; }
.pd-grid {
  gap: 48px clamp(40px, 5vw, 96px);
  grid-template-areas: "gallery panel" "spec panel" "tabs panel" "reviews panel" "qna panel";
}
.pd-grid .gallery { grid-area: gallery; min-width: 0; }
.pd-grid .buy-panel { grid-area: panel; }
.pd-grid .pd-tabs { grid-area: tabs; margin-top: 0; min-width: 0; }
.pd-grid .pd-photos { grid-area: tabs; min-width: 0; } /* 탭 제거 후 상세 사진이 좌측 2행 차지 */
/* 리뷰·문의는 좌측 열 폭만 쓴다 — 우측 구매란을 침범하지 않게 (2026-08-31 대표 지시) */
.pd-grid .pd-reviews { grid-area: reviews; min-width: 0; }
.pd-grid .pd-qna { grid-area: qna; min-width: 0; }
/* 제품 규격 — 표와 치수 도면을 나란히 (2026-08-31) */
.pd-grid .pd-spec { grid-area: spec; min-width: 0; }
.pd-spec { padding-top: 40px; border-top: 1px solid var(--line); }
.spec-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 20px; }
.spec-tbl { width: 100%; border-collapse: collapse; }
.spec-tbl th, .spec-tbl td {
  padding: 11px 4px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.spec-tbl th { width: 34%; color: var(--muted); font-weight: 400; font-family: var(--font-sans); }
.spec-tbl td { color: var(--ink); }
.spec-draw { margin: 0; }
.spec-draw img { width: 100%; height: auto; display: block; background: #FFFFFF; }
.spec-draw figcaption { margin-top: 8px; font-family: var(--font-sans); font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .spec-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* 그리드 행 간격(gap)이 이미 있으므로 섹션 자체 margin은 뺀다 — 안 그러면 간격이 두 배가 된다 */
.pd-grid .pd-reviews, .pd-grid .pd-qna { margin-top: 0; }
/* 메인 사진은 화면 안에 들어오는 높이로 제한한다. 슬라이드 중 영역 크기는 고정하고
   사진 자체는 contain으로 보여 세로·가로 이미지 모두 위아래가 잘리지 않게 한다. */
.gallery-main.ph-img {
  aspect-ratio: auto;
  width: 100%;
  height: min(500px, calc(100dvh - 250px));
  min-height: 260px;
  padding: 0;
  border: 0;
  background: #FFFFFF;
}
.gallery-main.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  display: block;
}

/* 썸네일 줄: 6개 보이는 가로 슬라이드 (넘치면 좌우 버튼 — 대표 지시) */
.thumbs-shell { position: relative; }
.thumbs { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs > li { flex: 0 0 calc((100% - 60px) / 6); } /* 12px 간격 × 5 = 60 */
.th-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.th-prev { left: -6px; }
.th-next { right: -6px; }
/* sticky 패널이 화면보다 길면 아래가 잘려서 영영 안 보인다 — 스크롤해도 패널이 따라오기 때문
   (2026-09-01 대표 지적 "구매란 아래 상품소개는 밑에가 잘리는데").
   패널 안에 스크롤을 다는 2중 스크롤은 대표가 반려 — 대신 여백을 줄여 화면에 담는다. */
.buy-panel { position: sticky; top: 100px; align-self: start; }

/* 구매 패널 압축 (2026-09-01 "비율을 좀더 줄여") — 약 200px 감축.
   글자 크기는 건드리지 않고 세로 여백만 줄인다. */
#pd-buybox .opt-group { margin-bottom: 8px; }
.mini-cart:empty, .mini-cart[hidden] { display: none; margin: 0; }
.pd-div { margin: 8px 0; }
.total-row { margin-top: 8px; padding-top: 8px; margin-bottom: 8px; }
#pd-buybox > .caption { margin-top: 8px; }
.panel-tabs { margin-top: 8px; }
.ptab-panel .spec-table th,
.ptab-panel .spec-table td { padding: 5px 12px; }
/* 화면이 낮아 패널이 다 안 들어가면 JS(fitStickyPanel)가 이 클래스를 붙여 고정을 푼다 —
   그러면 페이지가 통째로 스크롤되어 아래쪽까지 전부 보인다. */
.buy-panel.is-unstuck { position: static; }

/* 간결한 제품 상세 우측 패널 */
.pd-facts { margin: 0 0 26px; }
.pd-facts__row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.pd-facts__row[hidden] { display: none; }
.pd-facts__row:first-child { padding-top: 0; }
.pd-facts dt { color: var(--muted); font: 500 13px/1.6 var(--font-sans); }
.pd-facts dd { min-width: 0; margin: 0; font: 500 14px/1.6 var(--font-sans); overflow-wrap: anywhere; }
.pd-facts .pd-name { margin: -5px 0 0; line-height: 1.35; }
#pd-buybox > .opt-group:first-child > label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}
#size-group[hidden] { display: none; }
/* 선택한 옵션은 바로 견적함에 담는다. 별도 '+ 옵션 추가' 단계는 노출하지 않는다. */
#pd-panel .opt-add-btn { display: none; }
#pd-buybox .buy-actions.cafe { margin-top: 22px; }
.buy-panel .panel-tabs { margin-top: 24px; }
.buy-panel .ptab-list { justify-content: flex-start; gap: 28px; }
.buy-panel .ptab { font-size: 13px; }
.pd-next-tiles { margin: 84px 0 96px; }
.pd-next-tiles[hidden] { display: none; }
.pd-next-tiles__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.pd-next-tiles__head h2 { margin: 0; font: 600 20px/1.4 var(--font-sans); }
.pd-next-tiles__controls { display: flex; gap: 8px; }
.pd-next-tiles__arrow { width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 300 28px/1 var(--font-sans); cursor: pointer; }
.pd-next-tiles__arrow:hover { background: var(--ink); color: #fff; }
.pd-next-tiles__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.pd-next-tiles__track::-webkit-scrollbar { display: none; }
.pd-next-tiles__track li { min-width: 0; scroll-snap-align: start; }
.pd-next-tiles__card { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #e9e6e0; color: #fff; }
.pd-next-tiles__card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.pd-next-tiles__name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.58); color: #fff; font: 500 18px/1.45 var(--font-sans); text-align: center; opacity: 0; transition: opacity .35s ease; }
.pd-next-tiles__card:hover img, .pd-next-tiles__card:focus-visible img { transform: scale(1.045); }
.pd-next-tiles__card:hover .pd-next-tiles__name, .pd-next-tiles__card:focus-visible .pd-next-tiles__name { opacity: 1; }
@media (max-width: 900px) {
  .pd-next-tiles__track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
}
@media (max-width: 640px) {
  .pd-next-tiles { margin: 60px 0 72px; }
  .pd-next-tiles__track { grid-auto-columns: 74%; gap: 14px; }
  .pd-next-tiles__name { opacity: 1; align-items: flex-end; background: linear-gradient(transparent 48%, rgba(0,0,0,.6)); font-size: 15px; }
}
@media (max-width: 640px) {
  .gallery-main.ph-img { height: min(calc(100vw - 40px), calc(100dvh - 230px)); min-height: 240px; }
  .pd-facts__row { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 1024px) {
  .pd-grid { grid-template-areas: "gallery" "panel" "spec" "tabs" "reviews" "qna"; } /* 1열: 갤러리→패널→규격→상세→리뷰→문의 */
  .buy-panel { position: static; } /* 1열 전환 시 고정 해제 */
}
/* v0.3(2026-08-28): 간편가입 버튼 — 각 사 브랜드 색.
   주의: 카카오·구글 모두 '공식 버튼 이미지(심볼 포함)' 사용이 가이드 강제 사항이다.
   심볼은 상표라 임의로 그리지 않는다 — 공식 리소스를 받으면 배경 이미지로 교체할 것
   (카카오: 개발자센터 [도구]>[리소스 다운로드], 구글: Branding Guidelines). */
.btn-oauth { width: 100%; gap: 8px; letter-spacing: 0.02em; }
.btn-kakao { background: #FEE500; border-color: #FEE500; color: #191919; }
.btn-kakao:hover { background: #F2DA00; border-color: #F2DA00; color: #191919; }
.btn-google { background: #FFFFFF; border-color: #DADCE0; color: #3C4043; }
.btn-google:hover { background: #F7F8F8; border-color: #C9CCD1; color: #1F1F1F; }
.btn-oauth:disabled { opacity: .45; cursor: default; }
.btn-naver { background: #03C75A; border-color: #03C75A; color: #FFFFFF; }
.btn-naver:hover { background: #02B351; border-color: #02B351; color: #FFFFFF; }

/* v0.4(2026-08-28): 로그인 화면 — euroceramic 로그인 페이지 형식 재구현 (대표 지시)
   큰 LOG IN 제목 / 소셜 버튼 530×60 각진 모서리 / 가입 안내 한 줄 / 아래에 비회원 경로 */
/* 정중앙 정렬 (2026-08-28 대표 지시) — 블록을 가운데로, 내부 정렬은 유로세라믹과 동일하게 좌측 */
.login-panel { max-width: 530px; margin: 24px auto 0; }
/* 제목은 사이트 제목 스케일을 따른다 — weight 800/48px는 참고 사이트 톤이라 뺀다
   (2026-08-28 대표 지시 "우리 홈페이지 글꼴로") */
.login-title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.35;
  text-align: center;
  margin: 0 0 28px;
}
.login-actions { display: flex; flex-direction: column; gap: 12px; }
.login-actions .btn-oauth { height: 60px; font-size: 14px; font-weight: 800; border-radius: 0; }
.login-note { text-align: center; font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.btn-guest {
  display: flex;
  width: 100%;
  height: 60px;
  margin-top: 56px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  border-radius: 0;
  text-decoration: none;
}
.btn-guest:hover { background: var(--surface); }
.login-consent { margin-top: 20px; }
@media (max-width: 600px) {
  .btn-guest { margin-top: 36px; }
}

/* .btn의 display:inline-flex가 UA 기본 [hidden]{display:none}을 이겨서
   hidden 버튼이 그대로 보였다 (2026-08-28 발견 — 네이버·구글 버튼 노출 사고).
   .thumbs[hidden]·.tab-panel[hidden]과 같은 처리. */
.btn[hidden] { display: none; }

/* v0.4: 요청 폼 자동 채움 안내 — 로그인 정보에서 가져온 칸이 있을 때만 뜬다 */
.prefill-note {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
  border-left: 2px solid var(--ink);
  padding: 10px 14px;
  margin: 0 0 20px;
}

/* 마이페이지: 가운데 정렬은 '로그인 전' 화면에만 남긴다.
   2026-08-28 대표 지시로 로그인 후 화면까지 가운데였으나, 좌측 메뉴가 붙으면서
   로그인 후 화면은 좌측 정렬 2열이 됐다(사이드바와 본문 시작선을 맞춘다).
   로그인·가입 화면(.login-panel·.signup-panel)의 가운데 정렬은 그대로 유지한다. */
#account-page .page-head { text-align: left; }
#account-page #acc-loading { text-align: center; }
/* 제목이 없는 로그인 화면이 헤더 바로 아래 붙지 않게 여백 */
.login-panel { margin-top: 64px; }
@media (max-width: 600px) { .login-panel { margin-top: 40px; } }

/* == 마이페이지 좌측 메뉴 (2026-08-28) ==
   규격은 목록 화면의 .listing-layout(280px + minmax(0,1fr), 스티키, 1024에서 1열)을 그대로 따른다.
   대시보드의 .sidebar는 앱 셸(min-height:100vh)이라 헤더·푸터가 있는 이 페이지에 못 얹는다. */
#account-page #acc-signed-in { margin-top: 24px; }
.acc-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px 56px;
  align-items: start;
}
/* 필수 — display:grid가 UA 기본 [hidden]{display:none}을 이긴다.
   이 두 줄이 없으면 로그아웃 상태에서 마이페이지 전체가 그대로 노출된다
   (.btn[hidden] 사고와 같은 원인, 위 1515~1518행 참조). */
#acc-signed-in[hidden] { display: none; }
.acc-panel[hidden] { display: none; }
/* 같은 이유로 목록 컨테이너에도 반드시 필요하다 (2026-08-29, 찜·최근 본 상품 패널 추가분).
   .grid-products는 display:grid, .q-list는 display:flex라 둘 다 UA 기본 [hidden]을 이긴다.
   이 두 줄이 없으면 loading·error·empty 상태에서도 목록이 살아 있어 4분기 배타가 깨지고,
   '이 브라우저에서 목록 비우기'를 눌러도 카드가 그대로 남는다(= 안 지워진다고 읽힌다). */
.grid-products[hidden] { display: none; }
.q-list[hidden] { display: none; }

.acc-nav { position: sticky; top: 100px; }
.acc-nav-grade { margin-top: 12px; }
.acc-nav .g-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 20px;
}
.acc-nav .filter-cats { padding-block: 8px 14px; }
.acc-nav-out { margin-top: 28px; }

@media (max-width: 1024px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr); } /* 1fr만 쓰면 메뉴 행 최소폭이 그리드를 밀어내 잘림 (na-layout과 같은 원인) */
  .acc-nav { position: static; }
  /* 메뉴 링크는 가로 스크롤 칩 한 줄로 — 그룹 라벨은 줄을 나눠 버려서 숨긴다.
     ul이 여럿이라 display:contents로 펼쳐 하나의 flex 행으로 합친다. */
  .acc-nav .acc-nav-links {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ink);
  }
  .acc-nav .acc-nav-links .g-label { display: none; }
  .acc-nav .acc-nav-links .filter-cats { display: contents; }
  .acc-nav .acc-nav-links li { flex: 0 0 auto; }
  .acc-nav .filter-cats a { white-space: nowrap; padding-block: 12px; }
  /* 로그아웃은 칩 행 밖 별도 줄 — 가로 스크롤 중 오탭 방지 */
  .acc-nav-out { margin-top: 16px; margin-bottom: 8px; }
}

/* v0.5(2026-08-28): 소셜 가입 3단계 화면 — 약관동의 → 정보입력 → 가입완료 (대표 지시, 유송타일 형식) */
.signup-panel { max-width: 560px; margin: 64px auto 0; }
.signup-steps { list-style: none; display: flex; justify-content: center; gap: 0; margin: 0 0 40px; padding: 0; }
.signup-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; position: relative; color: var(--muted); font-size: 13px; }
.signup-steps li + li::before { content: ""; position: absolute; left: -50%; top: 23px; width: 100%; height: 1px; background: var(--line); }
.signup-steps .s-num {
  position: relative; z-index: 1;
  display: grid; place-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); color: var(--muted);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
}
.signup-steps .is-current { color: var(--ink); font-weight: 600; }
.signup-steps .is-current .s-num { background: var(--ink); color: var(--paper); }
.signup-steps .is-done .s-num { background: var(--ink); color: var(--paper); opacity: .45; }
.signup-title { font-family: var(--font-serif); font-size: 30px; font-weight: 400; letter-spacing: -0.005em; text-align: center; margin: 0 0 24px; }
.su-lead { text-align: center; margin-bottom: 24px; }
.req-mark { color: var(--error); }
.agree-box { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.agree-row { display: flex; align-items: center; gap: 10px; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.agree-row:last-child { border-bottom: 0; }
.agree-row input { width: 17px; height: 17px; accent-color: var(--ink); flex: none; }
.agree-row b { font-weight: 600; }
.agree-all { background: var(--surface); font-weight: 600; }
.signup-panel .field { margin-bottom: 18px; }
.su-actions { display: flex; gap: 10px; margin-top: 28px; }
.su-actions .btn { flex: 1; }
.su-next { width: 100%; margin-top: 24px; }
.su-done-title { font-family: var(--font-serif); font-size: 22px; text-align: center; margin: 32px 0 10px; }
#su-stage-3 .caption { text-align: center; }

/* ── 약관·개인정보처리방침 본문 (2026-08-28) ──
   조문이 길어 표가 많다. 좁은 화면에서 표만 가로로 스크롤되고 본문은 안 밀리게 한다. */
.legal-doc { max-width: 900px; margin: 28px 0 80px; }
.legal-doc h2 {
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  margin: 36px 0 12px; padding-top: 22px; border-top: 1px solid var(--line);
}
.legal-doc > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-doc h3 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
.legal-doc p { font-size: 14px; line-height: 1.9; margin-bottom: 12px; }
.legal-doc p.lg-note {
  font-size: 13px; color: var(--muted); background: var(--surface);
  padding: 12px 14px; margin-bottom: 14px;
}
.legal-doc ul, .legal-doc ol { margin: 0 0 14px 22px; }
.legal-doc li { font-size: 14px; line-height: 1.9; margin-bottom: 4px; }
.legal-doc a { text-decoration: underline; text-underline-offset: 3px; }
.lg-table-wrap { overflow-x: auto; margin: 0 0 18px; }
.lg-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.lg-table th, .lg-table td {
  border: 1px solid var(--line); padding: 8px 10px;
  text-align: left; vertical-align: top; line-height: 1.7;
}
.lg-table th { background: var(--surface); font-weight: 600; }
/* 가입 동의 항목 아래 전문 링크 (2026-08-28) */
/* 동의 줄 + 오른쪽 전문 보기 (2026-08-28 대표 지시) —
   줄의 밑선은 감싸는 쪽이 그리고, 안쪽 label은 밑선을 지운다. */
.agree-row-line { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.agree-row-line:last-child { border-bottom: 0; }
.agree-row-line .agree-row { flex: 1; min-width: 0; border-bottom: 0; }
.agree-view {
  flex: none; font-size: 12px; color: var(--muted); white-space: nowrap;
  padding: 15px 4px 15px 12px; text-decoration: underline; text-underline-offset: 3px;
}
.agree-view:hover { color: var(--ink); }

/* ── 약관 팝업 (2026-08-28 대표 지시 "새창 말고 팝업, 스윽 열리고 스윽 꺼지게") ── */
.legal-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.legal-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(26, 26, 26, 0.42);
  opacity: 0;
  transition: opacity 260ms ease;
}
.legal-modal__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: min(880px, 100%); max-height: min(86vh, 940px);
  background: var(--paper, #fff);
  box-shadow: 0 24px 64px rgba(26, 26, 26, 0.18);
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  /* 감속이 뒤로 길게 남는 곡선 — 툭 멈추지 않고 스윽 붙는다 */
  transition: opacity 300ms ease, transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.legal-modal.is-open .legal-modal__scrim { opacity: 1; }
.legal-modal.is-open .legal-modal__panel { opacity: 1; transform: none; }
.legal-modal.is-closing .legal-modal__scrim { opacity: 0; transition-duration: 200ms; }
.legal-modal.is-closing .legal-modal__panel {
  opacity: 0; transform: translateY(8px) scale(0.99);
  transition-duration: 200ms, 220ms;
}
.legal-modal__panel:focus { outline: none; }

.legal-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--line);
  flex: none;
}
.legal-modal__title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.legal-modal__x {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 34px; height: 34px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: color 160ms ease;
}
.legal-modal__x:hover { color: var(--ink); }
.legal-modal__x svg { width: 18px; height: 18px; }

.legal-modal__body { overflow-y: auto; padding: 22px 24px 32px; -webkit-overflow-scrolling: touch; }
.legal-modal__lead { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.legal-modal__body .legal-doc { max-width: none; margin: 0; }
.legal-modal__body .legal-doc h2 { font-size: 17px; margin-top: 28px; padding-top: 18px; }
.legal-modal__body .legal-doc > h2:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .legal-modal { padding: 0; align-items: stretch; }
  .legal-modal__panel { width: 100%; max-height: 100%; }
  .legal-modal__head { padding: 18px 18px 14px; }
  .legal-modal__body { padding: 18px 18px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-modal__scrim, .legal-modal__panel { transition: none; }
}
/* 푸터는 어두운 배경 — 링크가 기본 잉크색이면 배경에 묻힌다 (2026-08-28 수정) */
.footer-legal a { color: var(--inverse-text); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { opacity: 0.78; }
/* 로그인 팝업 창은 세션만 받고 바로 닫힌다 — 그 사이 화면이 번쩍이지 않게 감춘다 (2026-08-28) */
html[data-oauth-popup] body { visibility: hidden; }

/* v0.6(2026-08-28): 마이페이지 견적 요청 내역 — 카드 목록 + 상태 배지.
   대시보드 .status(초록·주황 점)를 복사해 오지 않는다 — 이 팔레트는 순수 모노크롬이라
   (--success/--warning 없음, --error만 예외, --radius: 0) 색 대신 채움·외곽선·점선으로 구분하고
   배지 안의 텍스트를 항상 함께 읽힌다. 제목은 #acc-signed-in .section-title 규칙(1535행)을 따라
   가운데 정렬되고, 카드 내용은 좌측 정렬이다 — 기존 .summary 패턴과 같다. */
.q-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.q-card {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 20px;
  text-align: left;
}
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-date { font-family: var(--font-sans); font-size: 13px; color: var(--muted); }
.q-status {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--paper);
}
.q-status.is-live { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.q-status.is-done { background: var(--surface); color: var(--muted); border-color: var(--line); }
.q-status.is-off { border-style: dashed; color: var(--muted); }
.q-title { font-size: 16px; font-weight: 600; line-height: 1.5; margin-top: 12px; }
.q-next { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 6px; }

.q-items { margin-top: 12px; }
.q-items > summary {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
.q-items > summary::-webkit-details-marker { display: none; }
.q-items > summary:hover { color: var(--ink); }
.q-items ul { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.q-items ul li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.q-items ul li:last-child { border-bottom: 0; }
.q-msg { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.q-ref { font-family: var(--font-sans); font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ── 어두운 히어로 슬라이드 (2026-08-28 대표 지시 "글자 흰색으로")
   검은 세라믹 슬랩처럼 배경이 어두운 컷에서는 글자를 뒤집는다.
   흰 그라데이션을 그대로 두면 어두운 사진 위에서 회색으로 떠 지저분하므로
   그라데이션도 검은 쪽으로 바꿔 글자를 받쳐 준다. ── */
.hero-slide[data-tone="dark"] .hero-media::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 42%, rgba(0, 0, 0, 0) 72%);
}
.hero-slide[data-tone="dark"] .slide-label,
.hero-slide[data-tone="dark"] .slide-name,
.hero-slide[data-tone="dark"] .slide-copy { color: #FFFFFF; }
.hero-slide[data-tone="dark"] .slide-label {
  border: 0;
  padding: 0;
}
.hero-slide[data-tone="dark"] .btn-primary {
  background: transparent;
  color: #FFFFFF;
  border-color: transparent;
}
.hero-slide[data-tone="dark"] .btn-primary:hover { background: transparent; color: #FFFFFF; border-bottom-color: #FFFFFF; }

/* 페이저는 슬라이드 밖에 있어 색이 고정된다 — 현재 슬라이드가 어두우면 같이 뒤집는다.
   (hero.js가 슬라이더에 data-tone을 옮겨 준다) */
.hero-slider[data-tone="dark"] .hero-dot { border-color: rgba(255, 255, 255, 0.72); }
.hero-slider[data-tone="dark"] .hero-dot::after { background: #FFFFFF; }
.hero-slider[data-tone="dark"] .hero-dot.active::after { background: #FFFFFF; }
.hero-slider[data-tone="dark"] .hero-progress { background: rgba(255, 255, 255, 0.28); }
.hero-slider[data-tone="dark"] .hero-progress-fill { background: #FFFFFF; }
.hero-slider[data-tone="dark"] .hero-count { color: #FFFFFF; }
.hero-slider[data-tone="dark"] .hero-pause,
.hero-slider[data-tone="dark"] .hero-scroll { color: #FFFFFF; }

/* ── New Arrival 자리표시 정리 (2026-08-28 대표 지시 "검은색 표시 지워") ──
   ① .na-stage-ph 가 display:flex 라 UA의 [hidden] 규칙을 이겨서, 사진이 뜬 뒤에도
      [렌더링 사진 자리] 라벨이 사진 위에 그대로 남아 있었다. (.btn[hidden] 때와 같은 원인)
   ② 사진이 들어온 스테이지에는 회색 배경·검은 테두리가 필요 없다. */
.na-stage-ph[hidden] { display: none; }
.na-stage-box.ph-img { border: 0; padding: 0; background: transparent; }
/* 선택 표시는 테두리 대신 확대로 (2026-08-31 대표 지시 "프레임을 쓰지 말고 타일이 확대되게끔")
   ⚠ 카드(.na-swatch) 자체를 키우면 사방으로 커져서 아래 품명·규격 글자를 덮는다(대표 지적).
   그래서 카드 크기는 그대로 두고 .na-swatch(overflow:hidden) 안의 사진만 확대한다 —
   레이아웃이 밀리지 않으면서 타일 무늬는 실제로 크게 보인다. */
.na-item > button[aria-pressed="true"] .na-swatch { outline: none; transform: none; }
.na-swatch img { transition: transform var(--duration) var(--ease); }
.na-item > button[aria-pressed="true"] .na-swatch img { transform: scale(1.1); }
.na-item > button:hover .na-swatch { transform: none; }          /* 카드 확대(1.03) 취소 — 같은 이유 */
.na-item > button:hover .na-swatch img { transform: scale(1.05); }
.na-item > button[aria-pressed="true"]:hover .na-swatch img { transform: scale(1.13); }
@media (prefers-reduced-motion: reduce) {
  .na-swatch img, .na-item > button[aria-pressed="true"] .na-swatch img { transition: none; transform: none; }
  .na-item > button:not([aria-pressed="true"]) .na-swatch { opacity: 0.72; } /* 모션을 끈 환경에서는 농도로 구분 */
}

/* 규격 필터 목록 (2026-08-29) — 분류 목록과 같은 규격을 쓰되 값이 짧아 2열로 */
.filter-sizes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.filter-sizes a {
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 0; font-size: 13px; color: var(--muted); text-decoration: none;
}
.filter-sizes a:hover { color: var(--ink); }
.filter-sizes a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.filter-sizes .cnt { color: var(--muted); font-size: 11px; }

/* ── New Arrival 배경·모션 (2026-08-29 대표 지시) ── */
/* 바탕을 아주 연한 라이트 그레이로 — 홈에서 이 구역만 살짝 가라앉힌다 */
.na-section { background: #F7F7F8; padding-bottom: 64px; }
/* 드래그가 딱딱했던 원인: 카드 단위 강제 스냅. 자유 스크롤 + 관성으로 전환 */
.na-slider .na-track { scroll-snap-type: none; scroll-behavior: auto; }

/* ── NA 스테이지 전환 + 적용 중 타일 표시 (2026-08-29 대표 지시) ── */
/* 렌더링 교체는 스르륵 — 살짝 어두워졌다가 새 사진으로 */
#na-stage-img { transition: opacity 240ms ease; }
#na-stage-img.is-fading { opacity: 0; }
/* 적용 중인 타일: 사진에서 4px 띄운 잉크 헤어라인 액자 — 굵은 선 없이 갤러리 매팅처럼 */
.na-item > button .na-swatch {
  outline: 1px solid transparent;
  outline-offset: 4px;
  transition: transform var(--duration) var(--ease), outline-color 260ms ease;
}
.na-item > button[aria-pressed="true"] .na-swatch { outline-color: var(--ink); }
.na-item > button[aria-pressed="true"] .na-nm { font-weight: 600; }

/* 카드 스와치 "+N" — 옵션이 5칸을 넘을 때 (2026-08-29) */
.card-sw-more {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--surface); text-decoration: none;
}
.card-sw-more:hover { border-color: var(--ink); }

/* ── New Arrival 모바일 (2026-08-29 대표 지시) ──
   세로 화면에서는 스테이지가 위, 타일 줄이 아래로 쌓인다.
   스와치를 손가락 폭에 맞게 줄이고, 줄이 화면 밖까지 이어짐이 보이게 오른쪽 여백을 연다. */
@media (max-width: 900px) {
  .na-section { padding-bottom: 40px; }
  .na-stage { margin-bottom: 20px; }
  .na-slider { margin-inline: calc(-1 * var(--page-margin)); }
  .na-slider .na-track { padding-inline: var(--page-margin); }
  .na-item > button .na-swatch { outline-offset: 3px; }
  .na-en { font-size: 10px; }
  .na-nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── NA 라벨 듀오세라 형식 + 캡션 제거 + 프레임 잘림 (2026-08-30 대표 지시) ── */
/* 렌더링 사진 아래 문구 제거 */
.na-stage-cap { display: none; }
/* 번호 · 이름(볼드) · 브랜드+규격 서브라인 */
.na-cap { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; text-align: left; }
.na-no { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.na-captext { display: block; }
.na-cap .na-nm { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.na-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }
.na-item > button[aria-pressed="true"] .na-nm { font-weight: 700; }
/* 선택 액자(outline offset 4px)가 트랙 위 가장자리에서 잘리던 문제 — 숨 쉴 여백 확보 */
.na-slider .na-track { padding-top: 8px; padding-bottom: 8px; }

/* ── NA 스테이지 호버: 은은한 흰 베일 + "제품 보러가기" (2026-08-30 대표 지시) ── */
.na-stage-box { position: relative; }
.na-stage-go {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-start;
  padding-left: 28px;
  background: rgba(255, 255, 255, 0);
  opacity: 0;
  transition: opacity 340ms ease, background 340ms ease;
  text-decoration: none;
}
.na-stage-go[hidden] { display: none; }
.na-stage-box:hover .na-stage-go:not([hidden]),
.na-stage-go:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.30); }
.na-stage-go span {
  font-size: 13px; letter-spacing: 0.14em; color: #111111;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.na-stage-go span::after { content: " →"; }
@media (prefers-reduced-motion: reduce) { .na-stage-go { transition: none; } }

/* 사업자 할인가 표시 (2026-08-30) — 일반가 취소선 + 사업자가 + 배지 */
.price-was { opacity: 0.55; margin-right: 2px; font-weight: 400; }
.price-biz { font-weight: 700; color: #111111; }
.price-biz-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; letter-spacing: 0.08em; vertical-align: 1px;
  border: 1px solid currentColor; border-radius: 999px; color: #6b5d4f;
}

/* 필터 검색란 (2026-08-30 대표 지시 "밑줄만 — 사각 테두리는 없어 보인다") — 미니멀 언더라인 */
.filter-search { margin: 4px 0 22px; position: relative; }
.filter-search input {
  width: 100%; padding: 8px 22px 8px 1px; font-size: 13px; letter-spacing: 0.03em;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink);
  transition: border-color 0.2s ease;
}
.filter-search input:focus { outline: none; border-bottom-color: var(--ink); }
.filter-search input::placeholder { color: var(--muted); letter-spacing: 0.06em; }
/* 우측 돋보기 — 장식용 아이콘 (CSS만, 이미지 없이) */
.filter-search::after {
  content: ""; position: absolute; right: 2px; top: 50%; transform: translateY(-62%);
  width: 9px; height: 9px; border: 1.4px solid var(--muted); border-radius: 50%;
  pointer-events: none;
}
.filter-search::before {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(18%) rotate(45deg);
  width: 5px; height: 1.4px; background: var(--muted);
  pointer-events: none;
}

/* ============================================================
   모바일 최적화 — 아이폰·갤럭시 (2026-08-30 대표 지시 "핸드폰으로 볼때 최적화")
   ============================================================ */
/* 가로 붕괴 안전망 — 어떤 요소가 넘쳐도 문서가 옆으로 늘어나 축소되지 않게.
   주의: max-width:100%는 na-slider의 풀블리드 마이너스 마진과 충돌해 우측 라인을 깨뜨림 — min-width만. */
html, body { overflow-x: clip; }
.carousel, .na-slider, .car-track { min-width: 0; }

/* ── 홈 New Arrival: 최근 등록 타일 카드 슬라이드 (2026-09-15) ── */
.na-section {
  overflow: hidden;
  background: #fff;
  padding-block: clamp(72px, 8vw, 118px);
}
.arrival-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(42px, 5vw, 68px);
}
.arrival-heading {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: end;
  column-gap: 34px;
  row-gap: 6px;
}
.arrival-eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
}
.arrival-title {
  margin: 0;
  font-size: clamp(27px, 2.15vw, 36px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.arrival-copy {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 15px;
}
.arrival-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding-bottom: 5px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.arrival-more span { font-size: 26px; font-weight: 300; line-height: .7; }
.arrival-more:hover { color: var(--ink); }
.arrival-carousel { position: relative; }
.arrival-viewport { overflow: hidden; }
.arrival-track {
  display: flex;
  gap: clamp(18px, 2vw, 28px);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
}
.arrival-track::-webkit-scrollbar { display: none; }
.arrival-item {
  flex: 0 0 calc((100% - 3 * clamp(18px, 2vw, 28px)) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
.arrival-card { display: block; color: var(--ink); text-decoration: none; }
.arrival-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  margin-bottom: 24px;
  background: #f1f1f1;
}
.arrival-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 320ms ease;
}
.arrival-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.arrival-media.is-empty::before {
  content: "IMAGE";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #aaa;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .18em;
}
.arrival-card:hover .arrival-media img { transform: scale(1.025); }
.arrival-card:hover .arrival-media::after { background: rgba(255, 255, 255, .08); }
.arrival-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: "Montserrat", var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arrival-detail {
  display: block;
  min-height: 20px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arrival-quote {
  display: block;
  margin-top: 17px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.arrival-arrow {
  position: absolute;
  top: 39%;
  z-index: 3;
  width: 48px;
  height: 64px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .86);
  color: #777;
  font-size: 42px;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 180ms ease, opacity 180ms ease;
}
.arrival-arrow--prev { left: -64px; }
.arrival-arrow--next { right: -64px; }
.arrival-arrow:hover { color: #111; }
.arrival-arrow:disabled { opacity: .22; cursor: default; }
.arrival-empty { margin: 36px 0; color: var(--muted); text-align: center; }
.arrival-empty[hidden] { display: none; }
@media (max-width: 1280px) {
  .arrival-arrow--prev { left: -16px; }
  .arrival-arrow--next { right: -16px; }
}
@media (max-width: 900px) {
  .arrival-heading { grid-template-columns: 1fr; }
  .arrival-title { grid-row: 2; }
  .arrival-copy { grid-row: 3; }
  .arrival-item { flex-basis: calc((100% - 18px) / 2); }
  .arrival-arrow { display: none; }
  .arrival-viewport { overflow: visible; }
  .arrival-track { margin-right: calc(-1 * var(--page-margin)); padding-right: var(--page-margin); }
}
@media (max-width: 560px) {
  .na-section { padding-block: 58px; }
  .arrival-head { align-items: flex-start; margin-bottom: 34px; }
  .arrival-heading { gap: 4px; }
  .arrival-copy { max-width: 240px; font-size: 13px; }
  .arrival-more { padding-top: 21px; }
  .arrival-item { flex-basis: 78%; }
  .arrival-media { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .arrival-track { scroll-behavior: auto; }
  .arrival-media img { transition: none; }
}

@media (max-width: 640px) {
  /* 헤더: 메뉴는 한 줄 가로 스크롤 — 3줄로 쌓여 화면을 먹지 않게 */
  .site-header .nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 26px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .site-header .nav::-webkit-scrollbar { display: none; }
  .site-header .nav a { white-space: nowrap; }

  /* iOS는 입력 글씨가 16px 미만이면 포커스 때 화면을 강제 확대한다 */
  input, select, textarea { font-size: 16px; }
  .filter-search input { font-size: 16px; }
  .qty-stepper input { font-size: 16px; }

  /* 터치 타깃 — 애플·구글 권장 44px 근접 */
  .size-btn { min-height: 44px; }
  .opt-add-btn { min-height: 44px; }
  .qty-stepper button { min-width: 44px; min-height: 44px; }
  .title-drop-menu a { padding: 13px 20px; }
  .filter-sizes a { padding-block: 6px; }

  /* 상세 구매 버튼 줄 — 좁은 화면에서 겹치지 않게: 찜+담기 한 줄, 상품 문의는 아랫줄 전체 */
  .buy-actions.cafe { flex-wrap: wrap; gap: 10px; }
  .buy-actions.cafe .btn { flex: 1 1 auto; white-space: nowrap; }
  .buy-actions.cafe .wish-btn { flex: 0 0 52px; }
  .buy-actions.cafe a.btn { flex: 1 1 100%; }
  .total-row { flex-wrap: wrap; gap: 6px; }

  /* ── 상세 구매 바텀시트 (2026-08-30 대표 지시 "구매쪽 부분은 핸드폰 아래에서 올라오게끔") ── */
  body.buysheet-on #pd-buybox {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #FFFFFF;
    border-top: 1px solid var(--line-strong);
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 20px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform 320ms var(--ease);
    box-shadow: 0 -14px 44px rgba(17, 17, 17, 0.16);
  }
  body.buysheet-open #pd-buybox { transform: translateY(0); }
  .buysheet-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(17, 17, 17, 0.38); }
  .buysheet-handle {
    display: block; width: 48px; height: 5px; border-radius: 3px;
    background: var(--line-strong); border: 0; padding: 0;
    margin: 8px auto 16px; cursor: pointer;
  }
  .buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #FFFFFF; border-top: 1px solid var(--line);
    padding: 6px 16px calc(10px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    touch-action: none; /* 위로 끌어 시트 열기 제스처 (2026-08-30) */
  }
  .buybar .buybar-handle { margin: 0 auto; } /* 접힌 바에도 짝대기 표시 (대표 재지시) */
  .buybar .btn { width: 100%; }
  body.buysheet-on main { padding-bottom: 104px; } /* 핸들만큼 커진 바 높이 반영 */
  body.buysheet-open .buybar { display: none; }
  body.buysheet-on main { padding-bottom: 88px; } /* 고정 바가 본문 끝을 가리지 않게 */
  @media (prefers-reduced-motion: reduce) {
    body.buysheet-on #pd-buybox { transition: none; }
  }
}

/* ============================================================
   리뷰 · 상품 문의 (2026-08-30 대표 지시 — 잭슨카멜레온 형식 자체 재구현)
   ============================================================ */
.pd-reviews, .pd-qna { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--ink); }
.rev-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rev-head .section-title { margin: 0; }
.rev-count { color: var(--muted); font-size: 18px; }
.rev-avg { font-family: var(--font-sans); font-size: 15px; }
.rev-avg .rev-stars { color: var(--ink); letter-spacing: 2px; }
.rev-head .btn { margin-left: auto; }

.rev-form { border: 1px solid var(--line); background: var(--surface); padding: 18px 20px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 12px; }
.rev-form textarea { width: 100%; resize: vertical; }
.rev-form-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-star-pick { display: inline-flex; gap: 2px; }
.rev-star-btn { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; padding: 2px; color: var(--ink); }
.rev-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rev-check { display: flex; align-items: center; gap: 8px; }
.rev-check input { width: auto; }

.rev-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rev-item { display: flex; gap: 16px; border: 1px solid var(--line); padding: 16px; background: #FFFFFF; }
.rev-photo { width: 120px; height: 120px; object-fit: cover; flex: 0 0 auto; }
.rev-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rev-item .rev-stars { letter-spacing: 2px; font-size: 14px; }
.rev-text { font-size: 14px; line-height: 1.6; white-space: pre-line; word-break: break-word; }
.rev-meta { margin-top: auto; }
.rev-del { color: var(--muted); }

.qna-list { list-style: none; border-top: 1px solid var(--line-strong); }
.qna-item { border-bottom: 1px solid var(--line); }
.qna-q {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: none; border: 0; padding: 14px 4px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
}
.qna-badge {
  flex: 0 0 auto; font-size: 11px; letter-spacing: 0.04em; padding: 4px 8px;
  border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap;
}
.qna-badge.is-done { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.qna-qtext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qna-meta { flex: 0 0 auto; white-space: nowrap; }
.qna-a { padding: 4px 4px 18px 4px; background: var(--surface); padding: 14px 16px; margin-bottom: 14px; }
.qna-a p { font-size: 14px; line-height: 1.6; white-space: pre-line; word-break: break-word; }

@media (max-width: 640px) {
  .rev-list { grid-template-columns: minmax(0, 1fr); }
  .rev-photo { width: 96px; height: 96px; }
  .qna-qtext { white-space: normal; }
  .qna-meta { display: none; }
  .pd-reviews, .pd-qna { margin-top: 48px; padding-top: 28px; }
}

/* ============================================================
   브랜드 배지 · 비타일 상품 1:1 썸네일 (2026-08-31 대표 지시)
   ============================================================ */
/* 카드 썸네일 왼쪽 위 브랜드 로고 — 사진 위에 얹히므로 흰 후광으로 대비 확보 */
/* .ph-img.has-photo img(inset:0·100%)보다 뒤·구체적이어야 배지가 사진 크기로 늘어나지 않는다 */
.ph-img img.card-brand, .ph-img.has-photo img.card-brand {
  position: absolute; inset: auto; left: 14px; top: 14px; z-index: 2;
  width: 68px; height: auto; padding: 0; object-fit: contain;
  opacity: 0.92; pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}
/* HOT 배지 — 사진 오른쪽 위 (2026-08-31 대표 지시)
   브랜드 로고(왼쪽 위)와 대칭이 되게 같은 여백을 쓴다. */
.ph-img .card-hot, .ph-img.has-photo .card-hot {
  position: absolute; inset: auto; right: 14px; top: 14px; z-index: 3;
  padding: 3px 8px; border-radius: 2px;
  background: var(--accent, #C8102E); color: #FFFFFF;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; line-height: 1.4; pointer-events: none;
}
@media (max-width: 560px) {
  .ph-img .card-hot, .ph-img.has-photo .card-hot { right: 10px; top: 10px; font-size: 10px; padding: 2px 6px; }
}
/* 타일을 제외한 모든 상품 카드는 정사각 썸네일 — 제품컷이 잘리지 않게 contain */
.p-card[data-cat]:not([data-cat="타일"]) .ph-img { aspect-ratio: 1 / 1; }
.p-card[data-cat]:not([data-cat="타일"]) .ph-img.has-photo img:not(.card-brand) { object-fit: cover; padding: 0; }
@media (max-width: 560px) {
  .ph-img img.card-brand, .ph-img.has-photo img.card-brand { width: 55px; left: 10px; top: 10px; }
}

/* 브랜드 필터 = 로고 칩 (2026-08-31 대표 지시 "이름보다 로고로 · 숫자 빼고 선택표시는 다른 방식")
   개수를 지운 대신 선택 상태는 테두리·농도·배경으로 보인다. */
/* TILE·SHOP 공통 2열 브랜드 그리드 — 로고가 너무 작아지지 않으면서
   한 화면에서 빠르게 비교할 수 있도록 두 줄로 정돈한다. */
#brand-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
#brand-list li { min-width: 0; }
#brand-list a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 62px; padding: 14px 10px;
  border: 1px solid var(--line); background: #FFFFFF;
  font-size: 13px; color: var(--muted); text-decoration: none;
  opacity: 0.55; transition: opacity var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
#brand-list a:hover { opacity: 0.85; border-color: var(--line-strong); }
#brand-list a[aria-current="true"] {
  opacity: 1; border-color: var(--ink); color: var(--ink); box-shadow: none;
}
/* 워드마크마다 가로세로비가 크게 달라(대림 4.4:1, 아메리칸스탠다드 9:1) 높이 고정은 안 된다 —
   폭을 기준으로 맞추고 높이는 상한만 둔다 */
.brand-logo { width: auto; height: auto; max-width: 96%; max-height: 24px; object-fit: contain; display: block; }
/* MITO 워드마크는 글자가 굵고 커서 같은 폭이어도 크게 보인다 — 한 단계 줄인다 (2026-08-31 대표 지시) */
.brand-logo[alt="MITO"] { max-width: 82px; max-height: 18px; }
.tile-filter .filter-sizes { grid-template-columns: minmax(0, 1fr); gap: 0; }
.tile-filter #brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.tile-filter #brand-list a { justify-content: center; min-height: 64px; padding: 15px 10px; border: 1px solid var(--line); background: #FFFFFF; opacity: .82; }
.tile-filter #brand-list a[aria-current="true"] { border: 1px solid var(--ink); box-shadow: none; background: #FFFFFF; opacity: 1; }
.tile-filter #brand-list .brand-logo { width: auto; height: auto; max-width: 96%; max-height: 25px; }
.tile-filter #brand-list .brand-logo[alt="MITO"] { width: auto; height: auto; max-width: 82px; max-height: 19px; }
.tile-filter .filter-check { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 13px; color: var(--muted); cursor: pointer; }
.tile-filter .filter-check:hover, .tile-filter .filter-check:has(input:checked) { color: var(--ink); }
.tile-filter .filter-check input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.tile-filter .filter-check .cnt { margin-left: auto; }
/* ── 홈 CATEGORY: 실제 등록 제품 4×2 원형 탐색 카드 (2026-09-21) ── */
.home-category{padding:clamp(52px,6vw,84px) 0;background:#f7f6f3}
.home-category__head{text-align:center;margin-bottom:clamp(30px,4vw,48px)}
.home-category__eyebrow{margin:0 0 10px;font-family:"Cinzel",serif;font-size:13px;font-weight:700;letter-spacing:.24em;color:#6e6a64}
.home-category__title{margin:0;font-size:clamp(24px,2.2vw,34px);font-weight:500;letter-spacing:-.04em}
.home-category__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.8vw,48px) clamp(20px,3vw,42px);max-width:980px;margin:0 auto;padding:0;list-style:none}
.home-category__card{display:flex;align-items:center;flex-direction:column;text-align:center;color:#111;text-decoration:none}
.home-category__visual{position:relative;display:block;width:min(100%,178px);aspect-ratio:1;border:1px solid #c6c1b8;border-radius:50%;overflow:hidden;background:#fff;transition:transform .65s cubic-bezier(.22,1,.36,1),box-shadow .65s ease}
.home-category__visual img,.home-category__split{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.home-category__product{opacity:1;object-fit:contain!important;padding:8%;background:#fff}
.home-category__space{opacity:0;object-fit:cover!important;padding:0;background:#fff;transform:scale(1.06)}
.home-category__space--relaxed{padding:0;background:#f2f0eb;transform:scale(1)}
.home-category__card:hover .home-category__visual,.home-category__card:focus-visible .home-category__visual{transform:translateY(-7px);box-shadow:0 22px 45px rgba(21,18,13,.14)}
.home-category__card:hover .home-category__product,.home-category__card:focus-visible .home-category__product{opacity:0;transform:scale(.96)}
.home-category__card:hover .home-category__space,.home-category__card:focus-visible .home-category__space{opacity:1;transform:scale(1)}
.home-category__card:hover .home-category__space--relaxed,.home-category__card:focus-visible .home-category__space--relaxed{transform:scale(1)}
.home-category__split{background-image:url("assets/categories/tile-mt15-actual.png");background-repeat:no-repeat;background-size:200% 100%}
.home-category__split--product{background-position:left center;opacity:1}
.home-category__split--space{background-position:right center;opacity:0;transform:scale(1.08)}
.home-category__card--split:hover .home-category__split--product,.home-category__card--split:focus-visible .home-category__split--product{opacity:0;transform:scale(.96)}
.home-category__card--split:hover .home-category__split--space,.home-category__card--split:focus-visible .home-category__split--space{opacity:1;transform:scale(1)}
.home-category__ko{margin-top:15px;font-size:15px;font-weight:600;letter-spacing:-.02em}
.home-category__en{margin-top:5px;font-family:"Cinzel",serif;font-size:12px;font-weight:700;letter-spacing:.14em;color:#77716a}
@media(max-width:800px){.home-category__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}.home-category__visual{width:min(100%,164px)}}
@media(max-width:420px){.home-category{padding:64px 0}.home-category__grid{gap:32px 14px}.home-category__ko{margin-top:14px;font-size:14px}.home-category__en{font-size:10px}}

/* 메인 스크롤 모션 — 스크롤 위치를 직접 따라가므로 위·아래 어느 방향에서도 되감긴다. */
.home-scroll-motion{opacity:0;will-change:transform,opacity,clip-path;transition:opacity .14s linear,transform .18s cubic-bezier(.22,1,.36,1),clip-path .2s cubic-bezier(.22,1,.36,1)}
.home-scroll-motion[data-motion-kind="stage"]{clip-path:inset(0 16% 0 0)}
.home-scroll-motion[data-motion-kind="hero"]{opacity:1}
@media(prefers-reduced-motion:reduce){.home-scroll-motion{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}}

/* 공간별 제품 추천 — 텍스트에서 이미지로 이어지는 인터랙티브 탭 */
.space-recommend{padding:clamp(82px,9vw,140px) 0;background:#fff}
.space-recommend__head{margin-bottom:clamp(48px,6vw,84px)}
.space-recommend__eyebrow{margin:0 0 10px;font-family:"Cinzel",var(--font-serif);font-size:12px;letter-spacing:.25em;color:#6f6a64}
.space-recommend__title{margin:0;font-size:clamp(30px,3.5vw,48px);font-weight:500;letter-spacing:-.045em}
.space-recommend__layout{--space-gap:clamp(72px,9vw,138px);display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:var(--space-gap);align-items:center;max-width:1120px;margin:0 auto}
.space-recommend__tabs{display:grid;gap:clamp(24px,3vw,42px)}
.space-recommend__tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:0;border:0;background:transparent;color:#77716b;text-align:left;cursor:pointer;transition:color .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.space-recommend__tab::after{content:"";position:absolute;left:calc(100% + 18px);top:50%;width:0;height:1px;background:#171512;transform:translateY(-50%);transition:width .55s cubic-bezier(.22,1,.36,1)}
.space-recommend__tab strong{font-size:clamp(20px,2vw,27px);font-weight:600;letter-spacing:-.035em;line-height:1.25}
.space-recommend__tab span{margin-top:2px;font-family:var(--font-sans);font-size:13px;letter-spacing:.02em}
.space-recommend__tab:hover,.space-recommend__tab:focus-visible,.space-recommend__tab.is-active{color:#111;transform:translateX(5px)}
.space-recommend__tab:hover::after,.space-recommend__tab:focus-visible::after,.space-recommend__tab.is-active::after{width:calc(var(--space-gap) - 30px)}
.space-recommend__tab:focus-visible{outline:1px solid #111;outline-offset:8px}
.space-recommend__stage{position:relative;height:clamp(390px,48vw,610px);overflow:hidden;background:#ebe9e5}
.space-recommend__image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.035);transition:opacity .82s cubic-bezier(.4,0,.2,1),transform 1.35s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.space-recommend__image.is-visible{opacity:1;transform:scale(1)}
.space-recommend__meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:42px 34px 26px;color:#fff;background:linear-gradient(180deg,transparent,rgba(10,9,8,.72))}
.space-recommend__copy{font-size:14px;letter-spacing:.02em}
.space-recommend__link{color:#fff;font-size:13px;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:4px}
@media(max-width:760px){.space-recommend{padding:64px 0}.space-recommend__head{margin-bottom:34px}.space-recommend__layout{display:block}.space-recommend__tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;margin-bottom:30px}.space-recommend__tab::after{display:none}.space-recommend__tab:hover,.space-recommend__tab:focus-visible,.space-recommend__tab.is-active{transform:none}.space-recommend__tab strong{font-size:19px}.space-recommend__stage{height:430px}.space-recommend__meta{padding:40px 20px 20px}}