/* =========================================================
   아씨방 — 원본 styles.css 에 없는 것만 여기에 씁니다.
   styles.css 는 원본에서 가져온 그대로라 손대지 않습니다.
   ========================================================= */

/* 메뉴를 눌러 이동할 때 고정된 상단 메뉴(높이 64/80px)에 제목이 가리지 않게 */
/* ⚠ scroll-behavior: smooth 는 일부러 안 씁니다 (2026-09-20).
   부드럽게 움직이는 도중에 다른 스크롤이 끼어들면 취소돼서
   "메뉴를 눌러도 아무 반응이 없는" 것처럼 보일 수 있습니다. 툭 이동이 확실합니다. */
html { scroll-padding-top: 72px; }
@media (min-width: 768px) { html { scroll-padding-top: 88px; } }

/* 작업 과정 슬라이드 — 스크롤바 숨김 (크롬·사파리) */
#process-track { scrollbar-width: none; }   /* 원본은 style 속성이었는데 CSP 때문에 여기로 옮김 */
#process-track::-webkit-scrollbar { display: none; }

/* =========================================================
   이불 샘플 (2026-09-20 추가) — 분류 버튼 · 사진 목록 · 크게 보기
   색은 원본 styles.css 의 색 변수(--brown 등)를 그대로 씁니다.
   ========================================================= */
.sample-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 40px 0 28px;
}
.sample-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--ivory);
  font-size: 14px; color: var(--foreground); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sample-tab span { font-size: 12px; color: var(--muted-foreground); }
.sample-tab:hover { background: var(--cream); }
.sample-tab[aria-pressed="true"] { background: var(--brown-dark); border-color: var(--brown-dark); color: #fff; }
.sample-tab[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); }

.sample-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px)  { .sample-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 768px)  { .sample-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sample-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }
.sample-card[hidden] { display: none; }

.sample-open {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 340 / 415; overflow: hidden;
  border-radius: 16px; background: var(--beige);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.sample-open img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sample-open:hover img { transform: scale(1.05); }
.sample-open:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
.sample-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; }
.sample-name { font-family: var(--font-serif); font-size: 15px; color: var(--brown-dark); }
.sample-cat { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }

.sample-more-wrap { text-align: center; margin-top: 32px; }
.sample-more {
  padding: 12px 28px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .2); border-color: color-mix(in oklab, var(--brown) 40%, transparent);
  background: var(--ivory); color: var(--brown-dark); font-size: 15px; font-weight: 500; cursor: pointer;
}
.sample-more:hover { background: var(--cream); }

/* 크게 보기 */
.sample-viewer {
  border: 0; padding: 0; background: transparent;
  max-width: min(92vw, 520px); width: 100%;
  margin: auto;               /* 원본 CSS 가 모든 여백을 0 으로 지워서, 가운데 정렬을 되살림 */
  max-height: 96vh; overflow: visible;
}
.sample-viewer::backdrop { background: rgba(30, 20, 14, .75); }
.sample-viewer__box { position: relative; background: var(--ivory); border-radius: 18px; overflow: hidden; }
.sample-viewer__box img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; background: var(--beige); }
.sample-viewer__close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .9); color: var(--brown-dark);
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.sample-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.sample-viewer__bar span { font-family: var(--font-serif); color: var(--brown-dark); font-size: 16px; text-align: center; flex: 1; }
.sample-viewer__bar button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--ivory); color: var(--brown-dark);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.sample-viewer__bar button:disabled { opacity: .35; cursor: default; }

/* =========================================================
   고객 후기 슬라이드 (2026-09-20) — PC 3장 · 태블릿 2장 · 휴대폰 1장씩 보임
   ========================================================= */
.review-track {
  display: flex; gap: 20px;
  list-style: none; margin: 0; padding: 4px 2px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.review-track::-webkit-scrollbar { display: none; }
.review-slide { flex: 0 0 86%; scroll-snap-align: start; }
@media (min-width: 640px)  { .review-slide { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) { .review-slide { flex-basis: calc((100% - 40px) / 3); } }
.review-card { background: var(--cream); display: flex; flex-direction: column; }
.review-card > p { flex: 1; }

.review-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.review-controls button { font-size: 22px; line-height: 1; color: var(--brown-dark); cursor: pointer; }
.review-dots { display: flex; gap: 8px; }
.review-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--border); cursor: pointer; transition: width .25s ease, background-color .25s ease;
}
.review-dots button[aria-current="true"] { width: 22px; background: var(--brown); }
.review-note { margin-top: 14px; text-align: center; font-size: 12px; color: var(--muted-foreground); }

/* =========================================================
   글 줄바꿈·간격 다듬기 (2026-09-20)

   한글은 기본값(break-word)으로 두면 "문의해 주세 / 요" 처럼
   단어 한가운데서 잘립니다. keep-all 을 주면 띄어쓰기 단위로만 줄이 바뀝니다.
   balance / pretty 는 마지막 줄에 한 글자만 남는 것을 막아줍니다.
   ========================================================= */
body {
  word-break: keep-all;        /* 한글: 단어 중간에서 자르지 않음 */
  overflow-wrap: break-word;   /* 단, 칸보다 긴 영문·주소는 잘라서 넘침 방지 */
}
h1, h2, h3 { text-wrap: balance; }
p, .review-card p, li { text-wrap: pretty; }

/* 본문 줄간격을 조금 넉넉하게 (원본보다 읽기 편하게) */
p { line-height: 1.75; }
.text-\[15px\], .text-sm { line-height: 1.7; }

/* 문의 카드 안의 짧은 안내문은 줄간격을 과하지 않게 */
.field-note, .sample-cat, .review-note { line-height: 1.5; }

/* 첫 화면 큰 사진 — 샘플 10장이 부드럽게 바뀜 (2026-09-20) */
.hero-shots { background: var(--beige); }
.hero-shots .hero-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
.hero-shots .hero-slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-shots .hero-slide { transition: none; }
}

/* =========================================================
   고객 후기 페이지 (/reviews) — 2026-09-22
   ========================================================= */
.review-form input[type="text"], .review-form input:not([type]), .review-form textarea {
  width: 100%; background: var(--ivory);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; font-size: 16px;   /* 16px 미만이면 아이폰에서 화면이 확대됩니다 */
  color: var(--foreground);
}
.review-form input:focus, .review-form textarea:focus {
  outline: none; border-color: var(--brown);
}
.review-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .review-row { grid-template-columns: 1fr 1fr; } }
.req { color: #b3261e; }
.review-form input[type="file"] { font-size: 14px; color: var(--foreground); }
.review-hint { margin-top: 8px; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.6; }
/* 사진 고르기 버튼 · 고른 사진 미리보기 (2026-10-25, 최대 5장) */
.review-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.review-pick {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 16px; border-radius: 12px; cursor: pointer; user-select: none;
  border: 2px dashed color-mix(in oklab, var(--brown) 55%, transparent);
  background: var(--ivory); color: var(--brown-dark); font-size: 16px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.review-pick svg { width: 24px; height: 24px; flex: none; }
.review-pick:hover { background: var(--cream); border-color: var(--brown); }
.review-file:focus-visible + .review-pick { outline: 3px solid color-mix(in oklab, var(--brown) 45%, transparent); outline-offset: 2px; }
.review-pick-count { margin-left: 4px; padding: 2px 10px; border-radius: 999px; background: var(--beige); font-size: 13px; font-weight: 600; }
.review-pick.is-full { opacity: .55; cursor: default; border-style: solid; }
.review-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.review-thumbs[hidden] { display: none; }
.review-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--beige); }
.review-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-thumb button {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 999px;
  background: rgba(30, 20, 14, .72); color: #fff; font-size: 16px; line-height: 26px; padding: 0; cursor: pointer;
}
.review-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.review-submit {
  margin-top: 20px; width: 100%;
  background: var(--brown-dark); color: #fff;
  border: 0; border-radius: 8px; padding: 15px 16px;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.review-submit:hover { background: var(--brown); }
.review-submit:disabled { opacity: .6; cursor: default; }
.review-msg { margin-top: 12px; font-size: 14px; line-height: 1.6; }
.review-msg.is-good { color: #2f7d32; }
.review-msg.is-bad { color: #b3261e; }
.review-loading, .review-empty { text-align: center; color: var(--muted-foreground); padding: 28px 0; }

.review-item {
  display: grid; gap: 16px; align-items: start;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; margin-bottom: 16px;
}
@media (min-width: 640px) { .review-item:has(img) { grid-template-columns: 190px 1fr; } }
.review-item img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4 / 3; background: var(--beige); }
.review-text p { margin: 0; color: var(--foreground); }
.review-by { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--brown-dark); font-weight: 600; }

/* 홈 후기 칸 아래 "후기 남기기" 버튼 (2026-09-22) */
.review-cta { margin-top: 18px; text-align: center; }
.review-cta a {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brown) 40%, transparent);
  background: var(--ivory); color: var(--brown-dark);
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.review-cta a:hover { background: var(--cream); }

/* 개인정보처리방침 · 이용약관 본문 (2026-10-25) */
.legal { margin-top: 40px; color: var(--foreground); font-size: 15.5px; line-height: 1.8; }
.legal h2 { font-family: var(--font-serif, serif); font-size: 19px; color: var(--brown-dark); margin: 36px 0 10px; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 1.2em; list-style: disc; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--brown-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14.5px; background: var(--cream); border-radius: 12px; overflow: hidden; }
.legal th, .legal td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: color-mix(in oklab, var(--beige) 60%, var(--cream)); color: var(--brown-dark); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) {
  .legal thead { display: none; }
  .legal tr { display: block; border-bottom: 1px solid var(--border); }
  .legal th, .legal td { display: block; border: 0; padding: 8px 12px; white-space: normal; }
  .legal td:first-child { padding-top: 12px; font-weight: 600; color: var(--brown-dark); }
}
.review-consent { margin: 4px 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); }
.review-consent a { color: var(--brown-dark); text-decoration: underline; }

/* 후기 목록 — 사진 여러 장 (2026-10-25): 첫 장 크게, 나머지는 아래 작은 칸 */
.review-photos { display: grid; gap: 6px; }
.review-photos a { display: block; }
.review-photos .more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.review-photos .more img { aspect-ratio: 1; border-radius: 8px; }
@media (min-width: 640px) { .review-item:has(.review-photos) { grid-template-columns: 190px 1fr; } }