@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   무늬살림 — 리빙·잡화 편집숍
   조판 규칙 하나: **색이 화면을 지배한다.** 바탕은 비켜 준다.

   ☠ 브랜딩팀 가로 검수(2026-09-02)가 06·07·08 이 「한 사이트의 두 설정」처럼 보인다고 했다.
      지목된 원인은 «구획 패딩이 전 구획 동일» — 한 페이지 안에서 밀도가 한 번도 안 바뀐다는 것.
      **여기서는 구획마다 밀도를 바꾼다. 같은 값으로 통일하지 말 것.**
        색 판 40px(촘촘) · 진열 128px(넓게) · 읽는 글 72px(중간) · 약속 36px(좁게)
   ☠ 판형도 하나가 아니다 — 색 판은 «전폭», 읽는 글은 «640px 좁은 단», 진열만 1240px.
   ☠ `NN — English` 모노 라벨을 쓰지 않는다(라인의 아홉이 전부 그 형식이다).
   ⚠ 한글 최소 12px · 입력칸 16px(iOS 확대 방지)
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:#FFFFFF;      /* ★ 따뜻한 미색이 아니다. 상품 색이 살아야 해서 «차가운 흰» 이다 */
  --face:#F2F4F5;
  --ink:#16191C;
  --ink-2:#3D444B;
  --ink-3:#5F6A72;      /* 흰 바탕 4.5:1 을 넘긴 값 — 더 밝히지 말 것 */
  --line:#E3E7EA;
  --line-2:#C9D0D5;
  --wide:1240px;
  --narrow:640px;
  --serif:'Gowun Batang',serif;   /* 제목 */
  --sans:'Gowun Dodum',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
  /* ☠ 여기 `overflow-x:hidden` 이 있었다. 걷어냈다.
     가로 스크롤을 «안 보이게» 할 뿐 내용은 여전히 화면 밖에 있고,
     더 나쁘게는 **`body` 가 언제나 화면 안에 있는 조상이라 넘침 검사가 통째로 눈이 먼다**
     (짝 검수 2026-09-02 — home-09·10 만 이 덮개가 있었고 그 둘이 검사에서 빠지고 있었다).
     넘침이 나면 «덮지 말고 그 자리를 고친다». */
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.9;word-break:keep-all;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:700;line-height:1.4;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.lv-in{max-width:var(--wide);margin:0 auto;padding:0 28px}
.lv-narrow{max-width:var(--narrow);margin:0 auto;padding:0 24px}
.lv-h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
.lv-h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin-bottom:34px}
.lv-lead{font-size:17px;line-height:2;color:var(--ink-2);margin:22px 0 34px}
.lv-note{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-3);line-height:1.9}

/* ── 머리 ─────────────────────────────────────────────────── */
.lv-top{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:60}
.lv-top .lv-in{display:flex;align-items:center;gap:26px;height:68px}
.lv-bi{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.02em;margin-right:auto}
.lv-nav{display:flex;gap:22px}
.lv-nav a{font-size:15px;color:var(--ink-2)}
.lv-nav a:hover,.lv-nav a.on{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.lv-cart{font-size:14.5px;padding:8px 15px;border:1px solid var(--ink)}
.lv-cart b{font-weight:400}
.lv-cart:hover{background:var(--ink);color:var(--paper)}

/* ── 휴대폰 차림표 ─────────────────────────────────────────
   ☠ 2026-09-03 — `.lv-nav` 를 숨기기만 하고 여는 단추가 «없었다».
      휴대폰 손님이 물건·치수·세탁·배송 어디에도 못 갔다.
   ★ 들녘상회(farm)와 «같은 방식»으로 맞춘다 — 종이 달라도 손짓은 같아야 한다. */
.lv-burger{display:none;width:44px;height:44px;background:none;border:0;padding:11px;cursor:pointer}
.lv-burger i{display:block;height:1.5px;background:var(--ink);margin:5px 0}
.lv-drawer{position:fixed;inset:0;z-index:120}
.lv-drawer[hidden]{display:none}
.lv-dw-back{position:absolute;inset:0;background:rgba(22,25,28,.5)}
.lv-dw-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,300px);background:var(--paper);
  padding:26px 22px;overflow-y:auto}
.lv-dw-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:28px;line-height:1;
  color:var(--ink);cursor:pointer;width:44px;height:44px}
.lv-dw-panel ul{margin-top:34px;border-top:1px solid var(--line)}
.lv-dw-panel li{border-bottom:1px solid var(--line)}
/* ⚠ 손가락으로 누르는 자리라 44px 을 넘긴다 */
.lv-dw-panel a{display:block;padding:15px 0;font-size:17px;color:var(--ink)}

/* ══ 색 판 — 첫 화면이자 항해. «전폭 · 촘촘» ══════════════
   ⚠ 여기가 이 템플릿의 성격이다. 사진 머리그림으로 바꾸지 말 것. */
.lv-board{padding:40px 0 0}
.lv-board-h{max-width:var(--wide);margin:0 auto 26px;padding:0 28px}
.lv-board-h h1{font-size:clamp(30px,5vw,54px);letter-spacing:-.03em}
.lv-board-h p{margin-top:12px;font-size:16px;color:var(--ink-2);max-width:34em}
.lv-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}   /* 전폭 · 틈을 좁게 */
.lv-swatches a{display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:3/4;padding:14px;background:var(--sw);color:var(--swi);
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.lv-swatches a:hover{transform:translateY(-6px)}
.lv-swatches .nm{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.2}
.lv-swatches .ct{font-size:12.5px;opacity:.72;margin-top:3px}
.lv-board.is-compact{padding:0}
.lv-board.is-compact .lv-swatches a{aspect-ratio:5/2;padding:10px 12px}
.lv-board.is-compact .nm{font-size:15px}
.lv-board.is-compact .ct{display:none}

/* ══ 진열 — «가장 넓은» 구획 ══════════════════════════════ */
.lv-show{padding:128px 0}
.lv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 48px}
/* ☠ `.ph` 는 «span» 이다. span 은 기본이 `display:inline` 이라
   `aspect-ratio` 도 `overflow:hidden` 도 «조용히 무시된다» — 오류도 경고도 없다.
   실측(2026-09-02, 390px): 카드 높이가 사진 높이(420px)에서 끝나고
   상품 이름·값 줄(157px)이 «카드 밖으로» 밀려나 다음 카드 사진에 깔렸다.
   → 블록 전용 성질을 걸 때는 `display` 를 «먼저» 정한다. */
.lv-card .ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--face)}
.lv-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.lv-card:hover .ph img{transform:scale(1.03)}
.lv-card .dots{position:absolute;left:14px;bottom:14px;display:flex;gap:6px}
.lv-card .dots i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.lv-card .bd{display:block;padding-top:18px}
.lv-card b{font-family:var(--serif);font-size:21px;font-weight:700}
.lv-card .pr{display:inline-block;margin-left:10px;font-size:16px;color:var(--ink-2)}
.lv-card .sm{display:block;margin-top:8px;font-size:15px;color:var(--ink-2);line-height:1.85}
.lv-card .op{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-3)}
.lv-card .op em{font-style:normal;color:#A8442F}

/* ══ 읽는 글 — «좁은 단 · 중간 밀도» ══════════════════════ */
.lv-read{padding:72px 0;background:var(--face)}
.lv-read-top{background:var(--paper);padding:56px 0 40px}
.lv-read h2{font-size:21px;margin:34px 0 10px}
.lv-read p{font-size:16px;color:var(--ink-2);line-height:2;margin-bottom:14px}

/* ══ 약속 — «가장 좁은» 구획 ══════════════════════════════ */
.lv-facts{padding:36px 0;border-top:1px solid var(--line)}
.lv-facts ul{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lv-facts b{display:block;font-family:var(--serif);font-size:16px}
.lv-facts span{display:block;margin-top:4px;font-size:14px;color:var(--ink-3)}

/* ── 푸터 ─────────────────────────────────────────────────── */
.lv-foot{border-top:1px solid var(--line);padding:56px 0 90px}
.lv-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px}
.lv-foot .bi{font-family:var(--serif);font-size:20px;font-weight:700}
.lv-foot .tl{margin-top:6px;font-size:14.5px;color:var(--ink-3)}
.lv-foot .lbl{font-size:14px;color:var(--ink-3);margin-bottom:10px}
.lv-foot li a{display:block;padding:5px 0;font-size:14.5px;color:var(--ink-2)}
.lv-foot li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.lv-foot .pay{margin-top:14px;font-size:14px;color:var(--ink-2)}
.lv-foot .sh-biz{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.sh-biz .t{font-size:13px;color:var(--ink-3);margin-bottom:10px}
.sh-biz li{display:flex;gap:10px;font-size:13px;color:var(--ink-2);line-height:2}
.sh-biz li b{flex:0 0 140px;font-weight:400;color:var(--ink-3)}
.sh-biz .miss{color:#A8442F;border-bottom:1px dashed #A8442F}

/* ── WooCommerce 위에 얹는 것 ─────────────────────────────
   ⚠ Woo 색 토큰부터 바꾼다. 개별 선택자로 이기려 하면 새는 곳이 계속 생긴다. */
:root{
  --wc-primary:#16191C; --wc-primary-text:#FFFFFF;
  --wc-secondary:#F2F4F5; --wc-secondary-text:#16191C;
  --wc-highlight:#A8442F; --wc-highlight-text:#FFFFFF;
  --wc-content-bg:#FFFFFF; --wc-subtext:#5F6A72;
}
.lv-woo{padding:56px 0 90px}
.woocommerce .lv-woo a.button,.woocommerce .lv-woo button.button,
.woocommerce .lv-woo input.button,.woocommerce .lv-woo button.single_add_to_cart_button{
  background:var(--ink);color:var(--paper);border-radius:0;font-family:var(--sans);font-weight:400}
.woocommerce .lv-woo a.button:hover,.woocommerce .lv-woo button.button:hover,
.woocommerce .lv-woo button.single_add_to_cart_button:hover{background:#A8442F;color:#fff}
.woocommerce .lv-woo .price,.woocommerce .lv-woo .price bdi,
.woocommerce .lv-woo .woocommerce-Price-currencySymbol{color:var(--ink)}
.woocommerce .lv-woo ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif);font-size:19px;font-weight:700}
.woocommerce .lv-woo h1.product_title{font-family:var(--serif);font-size:clamp(26px,3vw,38px)}
.woocommerce .lv-woo table.shop_table{border:1px solid var(--line);border-radius:0}
.woocommerce .lv-woo input[type=text],.woocommerce .lv-woo input[type=email],
.woocommerce .lv-woo input[type=tel],.woocommerce .lv-woo textarea,
.woocommerce .lv-woo select{font-size:16px}   /* iOS 확대 방지 */
/* 조합 고르는 자리 — 이 템플릿의 핵심이라 크게 */
.woocommerce .lv-woo table.variations th,.woocommerce .lv-woo table.variations td{
  padding:12px 0;font-size:15px}
.woocommerce .lv-woo table.variations select{padding:12px 14px;border:1px solid var(--line-2);border-radius:0}

/* ══ 태블릿 ══ */
@media (max-width:1023px){
  .lv-in{padding:0 20px}
  .lv-swatches{grid-template-columns:repeat(4,1fr)}
  .lv-grid{grid-template-columns:1fr;gap:44px}
  .lv-show{padding:80px 0}
  .lv-read{padding:56px 0}
  .lv-facts ul{grid-template-columns:1fr;gap:16px}
  .lv-foot .cols{grid-template-columns:1fr 1fr}
}

/* ══ 휴대전화 ══ */
@media (max-width:719px){
  .lv-top .lv-in{height:58px;gap:14px}
  .lv-bi{font-size:19px}
  .lv-nav{display:none}
  .lv-burger{display:block}   /* ☠ 숨기는 줄과 «반드시» 짝이다. 하나만 두면 길이 끊긴다 */
  .lv-board{padding:24px 0 0}
  .lv-board-h{margin-bottom:18px}
  .lv-swatches{grid-template-columns:repeat(2,1fr)}
  .lv-swatches a{aspect-ratio:2/1}
  .lv-show{padding:56px 0}
  .lv-read{padding:44px 0}
  .lv-foot{padding:40px 0 80px}
  .lv-foot .cols{grid-template-columns:1fr;gap:26px}
  .sh-biz li{flex-direction:column;gap:0;margin-bottom:8px}
  .sh-biz li b{flex:none}
}

/* ── 진열 머리줄 ────────────────────────────────────────────
   ☠ 우커머스의 정렬 드롭다운(`기본순`)은 «브라우저 기본 모양» 그대로 나온다.
      나머지를 아무리 다듬어도 여기 하나가 화면을 싸구려로 만든다.
   ⚠ `appearance:none` 을 걸면 화살표가 사라진다 — 배경 그림으로 «다시» 그려 준다.
   ⚠ 입력칸 글자는 16px 아래로 내리지 말 것(아이폰이 화면을 확대해 버린다). */
.woocommerce-ordering select,
.woocommerce-ordering .orderby{
  -webkit-appearance:none; appearance:none;
  font:16px/1.4 var(--sans); color:var(--ink);
  background:var(--paper) no-repeat right 12px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235F6A72' stroke-width='1.4'/></svg>");
  border:1px solid var(--line-2); border-radius:0;
  padding:9px 36px 9px 14px; margin:0; line-height:1.4;
}
.woocommerce-ordering select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
.woocommerce-result-count{ font:13px/1.6 var(--sans); color:var(--ink-3); margin:0 }