/*
Theme Name: Youkkot Folkfloral
Theme URI: https://youkkot.com
Author: youkkot
Author URI: https://youkkot.com
Description: 유꽃(youkkot) 단일 작가 핸드메이드 부티크 독립 테마 — 톨페인팅 포크 플로럴(크림·로즈·블랙·골드). WooCommerce 일점일물(Edition 1 of 1) 카탈로그·블록 결제용. 부모 테마 없음.
Version: 1.1.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: youkkot
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, full-width-template
WC requires at least: 7.0
WC tested up to: 9.4
*/

/* 유꽃 folkfloral 독립 테마 스타일 — 디자인 정본 03_folkfloral.html에서 이식. (헤더 아래부터가 실제 스타일) */
/* ============================================================
   디자인 토큰 — 톨페인팅 포크 플로럴 (크림 페이퍼 · 장미 핑크 · 블랙 톨 · 골드)
   ============================================================ */
:root{
  /* 색 */
  --cream:       #F2E8D2;          /* 따뜻한 포크 페이퍼 바탕 */
  --cream-light: #FAF3E4;          /* 밝은 크림 — 패널·매트 */
  --cream-deep:  #E8DCC4;          /* 깊은 크림 — 구획 */
  --noir:        #191410;          /* 블랙 톨(검정 트레이) — 임팩트 */
  --noir-soft:   #241D17;
  --ink:         #241E18;          /* 본문 짙은 갈먹 */
  --ink-soft:    #473B30;
  --ink-faint:   rgba(36,30,24,.56);
  --rose:        #D24B73;          /* 포크 장미 핑크 — 주 액센트 */
  --rose-deep:   #A8385A;
  --rose-soft:   #E89BB0;
  --blue:        #2F6E8F;          /* 포크 블루 — 보조 */
  --gold:        #C79A3A;          /* 톨 골드 트림 */
  --gold-light:  #E3C168;
  --yellow:      #E8A93B;          /* 해바라기·꽃술 옐로 */
  --leaf:        #5A8A5C;          /* 세이지 잎 */
  --leaf-deep:   #3E7B54;
  --line:        rgba(36,30,24,.14);

  /* 타이포 — 고딕만 (명조·세리프 금지) */
  --font-display:'Black Han Sans','Do Hyeon',system-ui,'Apple SD Gothic Neo',sans-serif;
  --font-head:   'Do Hyeon','Black Han Sans',system-ui,'Apple SD Gothic Neo',sans-serif;
  --font-body:   'Noto Sans KR',system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;

  /* 간격 스케일 */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;

  --maxw:1200px;
}

/* ============================================================
   기본
   ============================================================ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink-soft);
  line-height:1.82;
  background-color:var(--cream);
  /* 포크 페이퍼 결 — 따뜻한 얼룩 + 미세 섬유 노이즈 */
  background-image:
    radial-gradient(120% 80% at 14% 0%, rgba(255,255,255,.42), transparent 58%),
    radial-gradient(90% 70% at 86% 10%, rgba(210,75,115,.05), transparent 55%),
    radial-gradient(100% 80% at 96% 96%, rgba(199,154,58,.06), transparent 58%),
    radial-gradient(110% 95% at 50% 102%, rgba(47,110,143,.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
  background-size:cover,cover,cover,cover,160px 160px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; color:var(--ink); line-height:1.18; }
p{ margin:0; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem); }
section{ position:relative; }

/* 접근성 — 본문 바로가기 */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--noir); color:var(--cream); padding:.6rem 1rem; z-index:200;
}
.skip:focus{ left:1rem; top:1rem; }

/* 포커스 가시 — 장미 핑크 */
a:focus-visible, button:focus-visible{
  outline:2.5px solid var(--rose-deep);
  outline-offset:3px; border-radius:2px;
}

/* ============================================================
   아기자기 손그림 아이콘 — 인라인 SVG 심볼 공용 클래스
   ============================================================ */
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-.14em; fill:currentColor; flex:0 0 auto; }

/* ============================================================
   브랜드 마크(톨 로즈 메달) 겸 섹션 마커
   ============================================================ */
.mark{ width:2.6em; height:2.6em; flex:0 0 auto; filter:drop-shadow(0 3px 8px rgba(25,20,16,.30)); }

/* 섹션 아이브로우 (공통) — 작은 손그림 꽃을 머리에 단다 */
.eyebrow{
  display:flex; align-items:center; font-size:.82rem; font-weight:500;
  letter-spacing:.16em; color:var(--ink-faint); margin-bottom:1rem;
}
.eyebrow .e-ic{ width:1.15em; height:1.15em; margin-right:.6em; color:var(--rose); }
.eyebrow .en{ margin-left:.7rem; font-weight:400; letter-spacing:.1em; color:rgba(36,30,24,.4); }

/* ============================================================
   헤더 / 내비
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); padding-block:.85rem; flex-wrap:wrap;
}
.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand .mark{ width:2.3em; height:2.3em; }
.brand__name{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); letter-spacing:.01em; line-height:1; }
.brand__sub{ font-family:var(--font-body); font-weight:400; color:var(--ink-faint); font-size:.56em; letter-spacing:.24em; margin-left:.5em; text-transform:lowercase; }

.nav{ display:flex; align-items:center; gap:clamp(.9rem,2.3vw,1.8rem); flex-wrap:wrap; }
.nav a{
  position:relative; font-size:1rem; font-weight:500; color:var(--ink-soft);
  padding:.2rem 0; letter-spacing:.01em;
}
/* 호버 시 작은 꽃이 톡 피어난다 */
.nav a::before{
  content:"\2740"; position:absolute; left:-.95em; top:50%;
  transform:translateY(-50%) scale(.3) rotate(-20deg); opacity:0;
  color:var(--rose); font-size:.78em;
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav a:hover::before, .nav a:focus-visible::before{ opacity:.95; transform:translateY(-50%) scale(1) rotate(0); }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:var(--rose); border-radius:2px; transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.nav a:hover::after, .nav a:focus-visible::after{ right:0; }

/* 로그인/내 계정 — 알약 버튼으로 눈에 띄게 */
.nav a.nav__account{
  padding:.42rem .95rem; border:1.5px solid var(--rose-soft); border-radius:999px;
  color:var(--rose-deep); font-weight:600;
}
.nav a.nav__account::before, .nav a.nav__account::after{ content:none; }
.nav a.nav__account:hover{ background:color-mix(in srgb, var(--rose-soft) 24%, transparent); }

/* 모바일 햄버거 토글 — 데스크톱에선 숨김(아래 ≤767 미디어쿼리에서 노출) */
.nav-toggle{
  display:none; appearance:none; -webkit-appearance:none; padding:0; cursor:pointer;
  width:46px; height:46px; border:1px solid var(--line); border-radius:13px;
  background:color-mix(in srgb, var(--cream-light) 72%, transparent);
  align-items:center; justify-content:center; color:var(--ink);
  transition:background .2s ease, border-color .2s ease;
}
.nav-toggle:hover{ background:color-mix(in srgb, var(--rose-soft) 26%, var(--cream-light)); border-color:var(--rose-soft); }
.nav-toggle:focus-visible{ outline:2.5px solid var(--rose-deep); outline-offset:3px; }
.nav-toggle__box{ position:relative; display:block; width:21px; height:14px; }
.nav-toggle__box::before, .nav-toggle__box::after, .nav-toggle__bar{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .2s ease, top .32s ease;
}
.nav-toggle__box::before{ top:0; }
.nav-toggle__bar{ top:6px; }
.nav-toggle__box::after{ top:12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::before{ top:6px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box::after{ top:6px; transform:rotate(-45deg); }

/* ============================================================
   사진 액자 — 크림 매트 + 골드 보더 + 비네트 + 워시테이프 (공통)
   ============================================================ */
.ph{
  position:relative; margin:0;
  border-radius:10px; padding:clamp(.5rem,1.7vw,.85rem);
  background:linear-gradient(158deg,#FBF5E8,#EFE3CB);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 24px 46px -34px rgba(25,20,16,.55);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.ph__img{
  position:relative; overflow:hidden; border-radius:5px;
  border:1px solid rgba(199,154,58,.55);
  box-shadow:0 2px 8px -4px rgba(25,20,16,.4);
}
.ratio-4x5 .ph__img{ aspect-ratio:4/5; }
.ratio-1x1 .ph__img{ aspect-ratio:1/1; }
.ratio-5x4 .ph__img{ aspect-ratio:5/4; }
.ph__img img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(var(--z,1)); transform-origin:var(--zo,50% 50%);
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
/* 가장자리 크림 비네트 — 배경 잡음을 눌러 큐레이션된 느낌 */
.ph__img::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:5px;
  box-shadow:inset 0 0 30px 7px rgba(248,241,224,.5), inset 0 0 0 1px rgba(255,255,255,.22);
  background:radial-gradient(122% 120% at 50% 42%, transparent 56%, rgba(242,232,210,.4) 100%);
}
/* 워시테이프 탭 — 반투명 줄무늬 테이프 */
.washi{
  position:absolute; z-index:7; top:-11px; left:50%; width:86px; height:25px;
  transform:translateX(-50%) rotate(-2.5deg);
  background:
    repeating-linear-gradient(46deg, rgba(255,255,255,.2) 0 4px, transparent 4px 8px),
    linear-gradient(180deg, rgba(232,155,176,.64), rgba(210,75,115,.5));
  border-left:1px dashed rgba(255,255,255,.55); border-right:1px dashed rgba(255,255,255,.55);
  border-radius:1px; box-shadow:0 3px 6px -3px rgba(25,20,16,.35);
}
.washi--gold{ background:
    repeating-linear-gradient(46deg, rgba(255,255,255,.22) 0 4px, transparent 4px 8px),
    linear-gradient(180deg, rgba(227,193,104,.7), rgba(199,154,58,.55)); }
/* 모서리에 핀 작은 손그림 꽃 (흰 후광으로 어떤 사진 위에서도 또렷) */
.ph__corner{
  position:absolute; z-index:8; right:-9px; bottom:-9px; width:30px; height:30px;
  color:var(--rose);
  filter:drop-shadow(0 0 2px #FBF5E8) drop-shadow(0 0 2px #FBF5E8) drop-shadow(0 2px 3px rgba(25,20,16,.3));
}
.ph__corner .ic{ width:100%; height:100%; }
/* 호버 시 작은 반짝임 */
.ph__spark{
  position:absolute; z-index:8; bottom:11px; left:11px; width:18px; height:18px;
  color:var(--gold-light); opacity:0;
  transform:scale(.5) rotate(-12deg); pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(227,193,104,.85));
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.ph__spark .ic{ width:100%; height:100%; }

/* ============================================================
   히어로
   ============================================================ */
.hero{ padding-block:clamp(2.5rem,7vw,5rem) clamp(1rem,3vw,2rem); overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(1.5rem,5vw,4rem); align-items:center;
}
.hero__text{ position:relative; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:500; letter-spacing:.18em; color:var(--rose-deep);
  background:rgba(210,75,115,.08); border:1px solid rgba(210,75,115,.22);
  padding:.4rem .85rem; border-radius:100px; margin-bottom:1.5rem;
}
.hero__eyebrow .ic{ width:1.05em; height:1.05em; color:var(--rose); }
.hero__eyebrow .en{ color:var(--ink-faint); font-weight:400; letter-spacing:.08em; }
.hero__thesis{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.1rem,5.6vw,3.7rem); line-height:1.18; letter-spacing:-.01em;
  margin-bottom:1.5rem;
}
.hero__thesis .rose{ color:var(--rose); }
.hero__lede{ font-size:1.08rem; max-width:31em; color:var(--ink-soft); }
.hero__lede .accent{ color:var(--rose-deep); font-weight:700; }

.hero__art{ position:relative; display:flex; flex-direction:column; align-items:center; }
.hero__art .watermark{
  position:absolute; top:-6%; right:-12%; width:58%; height:auto; z-index:0;
  opacity:.06; pointer-events:none;
}
.hero__ph{ position:relative; z-index:1; width:100%; max-width:430px; }
/* 히어로 주변에 떠다니는 아기자기 디테일 */
.hero__deco{ position:absolute; z-index:3; pointer-events:none; }
.hero__deco .ic{ width:100%; height:100%; }
.hero__deco--1{ width:30px; height:30px; top:2%; left:1%; color:var(--blue);
  filter:drop-shadow(0 0 2px #FBF5E8); animation:floaty 6s ease-in-out infinite; }
.hero__deco--2{ width:22px; height:22px; bottom:23%; right:2%; color:var(--gold);
  filter:drop-shadow(0 0 3px rgba(227,193,104,.7)); animation:floaty 5s ease-in-out .9s infinite; }
.hero__deco--3{ width:18px; height:18px; top:46%; left:-2%; color:var(--rose);
  filter:drop-shadow(0 0 2px #FBF5E8); animation:floaty 7s ease-in-out .4s infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-7px) rotate(7deg); } }
.hero__cap{ position:relative; z-index:1; margin-top:1.3rem; text-align:center; max-width:430px; }
.hero__cap .t{ font-family:var(--font-head); color:var(--ink); font-size:1.16rem; }
.hero__cap .c{ font-size:.85rem; color:var(--ink-faint); letter-spacing:.01em; margin-top:.35rem; }

/* ============================================================
   가랜드 디바이더 — 작은 꽃·점이 줄지어 가는 줄
   ============================================================ */
.divider{ display:flex; justify-content:center; padding-block:clamp(1.2rem,4vw,2.6rem); }
.garland{ width:min(440px,76%); height:auto; }

/* ============================================================
   섹션 공통
   ============================================================ */
.section{ padding-block:clamp(3rem,7vw,5.5rem); }
.section__head{ margin-bottom:clamp(2rem,4vw,3rem); max-width:46rem; }
.section__title{ font-family:var(--font-head); font-size:clamp(1.7rem,3.8vw,2.6rem); color:var(--ink); }
.section__title .rose{ color:var(--rose); }
.section__title .blue{ color:var(--blue); }
.section__desc{ margin-top:.9rem; font-size:1.04rem; color:var(--ink-soft); max-width:38em; }

/* ============================================================
   신작 — 작품 카드 갤러리 (사진)
   ============================================================ */
.works{
  display:grid; gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
.work{ display:flex; flex-direction:column; }
@media (hover:hover){
  .work:hover .ph{
    transform:translateY(-5px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 34px 56px -32px rgba(25,20,16,.55);
  }
  .work:hover .ph__img img{ transform:scale(calc(var(--z,1) + .045)); }
  .work:hover .ph__spark{ opacity:1; transform:scale(1) rotate(0); }
}
.badge{
  position:absolute; top:.7rem; left:.7rem; z-index:5;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.73rem; font-weight:700; letter-spacing:.04em;
  padding:.3rem .62rem; border-radius:100px;
}
.badge--limited{
  background:rgba(250,243,228,.94); color:var(--rose-deep);
  border:1px solid rgba(210,75,115,.35);
  box-shadow:0 4px 10px -6px rgba(25,20,16,.5);
}
.badge--limited .d{ width:.5em; height:.5em; border-radius:50%; background:var(--rose); }
.badge--cat{
  position:absolute; top:.7rem; right:.7rem; left:auto; z-index:5;
  background:var(--noir); color:var(--cream-light);
  font-weight:500; letter-spacing:.05em;
  box-shadow:0 4px 10px -6px rgba(25,20,16,.6);
}
.badge--cat .ic{ width:.95em; height:.95em; color:var(--gold-light); }
/* SOLD — 골드 테두리 블랙 톨 메달 */
.work[data-sold] .ph__img img{ filter:saturate(.62) opacity(.84); }
.sold-stamp{
  position:absolute; z-index:6; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-9deg);
  display:grid; place-items:center;
  width:6rem; height:6rem; border-radius:50%;
  background:var(--noir); color:var(--gold-light);
  font-family:var(--font-display); font-size:1.5rem; letter-spacing:.12em;
  border:2px solid var(--gold);
  box-shadow:inset 0 0 0 4px rgba(199,154,58,.25), 0 10px 22px -10px rgba(0,0,0,.6);
  opacity:.97;
}
.work__meta{ padding-top:1.05rem; }
.work__title{ font-family:var(--font-head); font-size:1.16rem; }
.work__title a{ transition:color .3s ease; }
.work__title a:hover{ color:var(--rose-deep); }
.work__caption{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--ink-faint); margin-top:.3rem; }
.work__caption .ic{ width:.95em; height:.95em; color:var(--leaf); }
.work__edition{ display:flex; align-items:center; gap:.45rem; font-size:.9rem; color:var(--ink-soft); margin-top:.5rem; }
.work__edition .ed{ color:var(--blue); }
.work__edition .price{ font-weight:700; color:var(--ink); }
.work__edition .heart{ width:.9em; height:.9em; color:var(--rose-soft); }

/* ============================================================
   시그니처 상세 — 이 한 점에 대하여
   ============================================================ */
.feature{
  background:
    radial-gradient(rgba(210,75,115,.05) 1.4px, transparent 1.6px) 0 0/20px 20px,
    var(--cream-light);
  border-block:1px solid var(--line);
}
.feature__grid{
  display:grid; grid-template-columns:.94fr 1.06fr; gap:clamp(1.8rem,4.5vw,3.6rem);
  align-items:center;
}
.feature__photo{ width:100%; max-width:480px; }
.feature__lead{ margin-top:1.2rem; font-size:1.06rem; color:var(--ink-soft); max-width:34em; }
.feature__body p + p{ margin-top:.9rem; }
.spec{ margin:1.5rem 0 .4rem; display:grid; gap:0; max-width:34em; }
.spec > div{
  display:grid; grid-template-columns:5.4rem 1fr; gap:.9rem;
  padding:.62rem 0; border-bottom:1px dotted rgba(36,30,24,.24);
}
.spec > div:first-child{ border-top:1px dotted rgba(36,30,24,.24); }
.spec dt{ font-family:var(--font-head); color:var(--ink); font-size:.92rem; display:flex; align-items:center; gap:.45rem; }
.spec dt .ic{ width:.95em; height:.95em; color:var(--rose); }
.spec dd{ margin:0; font-size:.95rem; color:var(--ink-soft); }

/* ============================================================
   작가의 손
   ============================================================ */
.story{ background:var(--cream-deep); border-block:1px solid var(--line); }
.story__grid{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(1.8rem,4vw,3.4rem);
  align-items:center;
}
.story__portrait figure{ margin:0; }
.story__portrait svg{ width:100%; height:auto; border:1px solid var(--line); border-radius:6px; background:var(--cream-light); }
.story__portrait figcaption{ font-size:.78rem; color:var(--ink-faint); margin-top:.7rem; }
.story__body p + p{ margin-top:1.1rem; }
.story__body .lead{ margin-top:1.3rem; font-size:1.06rem; color:var(--ink-soft); }
.story__sign{ display:flex; align-items:center; gap:.9rem; margin-top:1.8rem; }
.story__sign .mark{ width:2.6em; height:2.6em; }
.story__sign .who{ font-family:var(--font-head); color:var(--ink); font-size:1.02rem; line-height:1.4; }
.story__sign .who small{ display:block; font-family:var(--font-body); font-weight:400; color:var(--ink-faint); font-size:.82rem; }

/* ============================================================
   구획 — 도자 / 소품 / 그림 (대표 사진)
   ============================================================ */
.collection__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.6vw,1.8rem); }
.tile{
  position:relative; overflow:hidden; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--line); border-radius:6px; color:var(--ink);
  box-shadow:0 22px 44px -34px rgba(25,20,16,.5);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.tile__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tile::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(250,243,228,.04) 20%, rgba(250,243,228,.72) 58%, rgba(250,243,228,.97)); }
.tile__inner{ position:relative; z-index:2; }
.tile__label{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.tile__label .ic{ width:1.25rem; height:1.25rem; color:var(--rose); }
.tile__label h3{ font-family:var(--font-head); font-size:1.42rem; }
.tile__label .en{ color:var(--ink-faint); font-size:.86rem; letter-spacing:.06em; }
.tile__desc{ margin-top:.5rem; font-size:.96rem; color:var(--ink-soft); max-width:22em; }
.tile__cta{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-family:var(--font-head); color:var(--ink); letter-spacing:.02em;
}
.tile__cta .arrow{ color:var(--rose); transition:transform .35s ease; }
@media (hover:hover){
  .tile:hover{ transform:translateY(-4px); box-shadow:0 30px 52px -32px rgba(25,20,16,.55); }
  .tile:hover .tile__cta .arrow{ transform:translateX(5px); }
}

/* ============================================================
   주문제작
   ============================================================ */
.commission{
  background:linear-gradient(180deg, rgba(47,110,143,.07), rgba(199,154,58,.04)), var(--cream-deep);
  border-block:1px solid var(--line);
}
.commission__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem,4vw,3.5rem);
  align-items:center;
}
.commission__art{ display:flex; justify-content:center; }
.commission__art svg{ width:100%; max-width:300px; height:auto; }
.commission__body{ margin-top:1rem; font-size:1.06rem; color:var(--ink-soft); max-width:34em; }
/* 아기자기 불릿 리스트 */
.dlist{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem; }
.dlist li{ display:flex; align-items:flex-start; gap:.65rem; font-size:.98rem; color:var(--ink-soft); }
.dlist .ic{ width:1.05em; height:1.05em; margin-top:.34em; }
.dlist li:nth-child(1) .ic{ color:var(--rose); }
.dlist li:nth-child(2) .ic{ color:var(--blue); }
.dlist li:nth-child(3) .ic{ color:var(--gold); }

.btn{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.7rem;
  font-family:var(--font-head); font-size:1rem; letter-spacing:.02em;
  color:var(--gold-light); background:var(--noir);
  border:1.5px solid var(--noir); border-radius:100px;
  padding:.78rem 1.5rem; cursor:pointer;
  transition:background .35s ease, color .35s ease, transform .3s ease, border-color .35s ease;
}
.btn .ic{ width:1em; height:1em; color:var(--rose-soft); }
.btn:hover{ background:var(--rose); color:#FBF4E4; border-color:var(--rose); transform:translateY(-2px); }
.btn:hover .ic{ color:var(--gold-light); }

/* ============================================================
   배송 · 취급
   ============================================================ */
.care{ border-bottom:1px solid var(--line); }
.care .container{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2rem);
  padding-block:clamp(1.8rem,4vw,2.8rem); flex-wrap:wrap;
}
.care__icon{ flex:0 0 auto; }
.care__icon svg{ width:48px; height:54px; }
.care__txt h3{ font-family:var(--font-head); font-size:1.2rem; }
.care__txt p{ font-size:.98rem; color:var(--ink-soft); margin-top:.3rem; max-width:42em; }

/* ============================================================
   푸터
   ============================================================ */
.site-footer{ background:var(--noir); color:var(--cream); }
.site-footer .container{ padding-block:clamp(3rem,6vw,4.5rem); }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:clamp(1.8rem,4vw,3rem); }
.footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
/* 푸터 로고 — 투명 PNG(밝은 골드 로고)라 어두운 푸터 위에 칩 없이 그대로 얹는다 */
.footer__logo{ display:inline-flex; }
/* .site-footer 한정으로 특이도(0,2,0)를 올려 WC `.woocommerce-page img{height:auto}`가
   푸터 로고를 거대화하는 것을 막는다(내 계정·상점 등 WC 페이지, 헤더 로고와 동일 패턴) */
.site-footer .footer__logo-img{ height:clamp(32px,6vw,54px); width:auto; display:block; }
.footer__brand .tag{ font-size:.92rem; color:rgba(242,232,210,.62); max-width:21em; }
.footer__col h4{ font-family:var(--font-head); font-size:.98rem; color:var(--cream); margin:0 0 1rem; letter-spacing:.04em; }
.footer__col a, .footer__col p{ display:block; font-size:.94rem; color:rgba(242,232,210,.72); margin-bottom:.55rem; transition:color .3s ease; }
.footer__col a:hover{ color:var(--rose-soft); }
.footer__biz{ font-size:.82rem; color:rgba(242,232,210,.5); line-height:1.9; }
.footer__note{
  margin-top:clamp(1.8rem,4vw,2.6rem); padding-top:1.2rem;
  border-top:1px solid rgba(242,232,210,.16);
  font-size:.82rem; color:rgba(242,232,210,.55); display:flex; align-items:center; gap:.5rem;
}
.footer__note .ic{ width:1em; height:1em; color:var(--rose-soft); }
.footer__bottom{
  margin-top:1.2rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; color:rgba(242,232,210,.5);
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:980px){
  .collection__grid{ grid-template-columns:1fr; }
  .tile{ min-height:260px; }
}
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__text{ order:1; }
  .hero__art{ order:2; }
  .feature__grid{ grid-template-columns:1fr; }
  .feature__photo{ order:-1; max-width:440px; margin-inline:auto; }
  .story__grid{ grid-template-columns:1fr; }
  .story__portrait{ max-width:400px; }
  .commission__grid{ grid-template-columns:1fr; }
  .commission__art{ order:-1; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .site-header .container{ justify-content:center; row-gap:.7rem; }
  .nav{ justify-content:center; gap:1.1rem; font-size:.95rem; }
}
@media (max-width:460px){
  .footer__top{ grid-template-columns:1fr; }
  .nav{ gap:.85rem; }
  .nav a{ font-size:.9rem; }
}

/* ============================================================
   신작 카드 트리거 — 사진을 클릭/포커스하면 상세 모달이 열린다
   ============================================================ */
.work__trigger{
  position:absolute; inset:0; z-index:9;
  display:block; width:100%; height:100%;
  margin:0; padding:0; border:0; background:transparent;
  cursor:pointer; border-radius:10px;
  -webkit-tap-highlight-color:transparent;
}
.work__trigger:focus-visible{ outline:2.5px solid var(--rose-deep); outline-offset:4px; border-radius:11px; }
.work__hint{
  position:absolute; left:50%; bottom:14px;
  transform:translateX(-50%) translateY(6px);
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-head); font-size:.85rem; letter-spacing:.02em;
  color:var(--ink); background:rgba(250,243,228,.95);
  border:1px solid rgba(210,75,115,.32); border-radius:100px;
  padding:.34rem .82rem; box-shadow:0 6px 16px -8px rgba(25,20,16,.5);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.work__hint .ic{ width:.95em; height:.95em; color:var(--rose); }
@media (hover:hover){ .work:hover .work__hint{ opacity:1; transform:translateX(-50%) translateY(0); } }
.work__trigger:focus-visible .work__hint{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   작품 상세 라이트박스(모달) — 같은 페이지 안에서 열림 (네이티브 <dialog>)
   ============================================================ */
.lb{
  width:min(940px,94vw); max-width:94vw; max-height:92vh;
  padding:0; border:none; border-radius:16px; overflow:hidden;
  background:var(--cream-light); color:var(--ink-soft);
  box-shadow:0 40px 90px -30px rgba(25,20,16,.7);
}
.lb::backdrop{ background:rgba(25,20,16,.62); backdrop-filter:blur(4px); }
.lb[open]{ animation:lbIn .4s cubic-bezier(.2,.7,.2,1); }
@keyframes lbIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
.lb__panel{ display:grid; grid-template-columns:1.02fr .98fr; max-height:92vh; overflow:auto; }
.lb__close{
  position:absolute; top:.7rem; right:.7rem; z-index:12;
  width:2.5rem; height:2.5rem; display:grid; place-items:center;
  border-radius:50%; cursor:pointer; color:var(--cream-light);
  background:var(--noir); border:1.5px solid var(--gold);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55);
  transition:transform .35s ease, background .35s ease;
}
.lb__close .ic{ width:1.15rem; height:1.15rem; }
.lb__close:hover{ background:var(--rose); transform:rotate(90deg); }
.lb__media{
  position:relative;
  background:
    radial-gradient(rgba(210,75,115,.05) 1.4px, transparent 1.6px) 0 0/18px 18px,
    var(--cream-deep);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1.1rem,3vw,1.9rem);
}
.lb__spark{ position:absolute; top:.9rem; left:.9rem; z-index:3; width:20px; height:20px;
  color:var(--gold-light); pointer-events:none; filter:drop-shadow(0 0 3px rgba(227,193,104,.75)); }
.lb__spark .ic{ width:100%; height:100%; }
.lb__frame{
  position:relative; margin:0; width:100%;
  background:linear-gradient(158deg,#FBF5E8,#EFE3CB);
  border:1px solid var(--line); border-radius:10px;
  padding:clamp(.5rem,1.6vw,.8rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 18px 40px -28px rgba(25,20,16,.55);
}
.lb__frame img{
  width:100%; height:auto; max-height:min(60vh,560px);
  object-fit:contain; background:#fff;
  border-radius:6px; border:1px solid rgba(199,154,58,.5);
  box-shadow:0 2px 8px -4px rgba(25,20,16,.4);
}
.lb__corner{ position:absolute; z-index:2; right:-8px; bottom:-8px; width:30px; height:30px;
  color:var(--rose); filter:drop-shadow(0 0 2px #FBF5E8) drop-shadow(0 2px 3px rgba(25,20,16,.3)); }
.lb__corner .ic{ width:100%; height:100%; }
.lb__info{ padding:clamp(1.5rem,3.2vw,2.3rem); display:flex; flex-direction:column; }
.lb__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.lb__chips .badge{ position:static; top:auto; left:auto; right:auto; box-shadow:none; }
.badge--soldchip{ background:var(--noir); color:var(--gold-light); border:1px solid var(--gold); font-weight:700; }
.badge--soldchip .ic{ width:.95em; height:.95em; color:var(--gold-light); }
.lb__title{ font-family:var(--font-head); font-size:clamp(1.45rem,3vw,2rem); color:var(--ink); }
.lb__cap{ display:flex; align-items:center; gap:.45rem; font-size:.92rem; color:var(--ink-faint); margin-top:.55rem; }
.lb__cap .ic{ width:1em; height:1em; color:var(--leaf); flex:0 0 auto; }
.lb__spec{ margin:1.3rem 0 0; max-width:none; }
.lb__comment{ margin-top:1.3rem; font-size:1.02rem; color:var(--ink-soft); }
.lb__care{ display:flex; align-items:flex-start; gap:.5rem; margin-top:1rem; font-size:.9rem; color:var(--ink-faint); }
.lb__care .ic{ width:1.05em; height:1.05em; margin-top:.3em; color:var(--gold); flex:0 0 auto; }
.lb__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.lb__cta .btn{ margin-top:0; }
.btn--soft{ background:transparent; color:var(--ink); border-color:rgba(36,30,24,.3); }
.btn--soft .ic{ color:var(--rose); }
.btn--soft:hover{ background:var(--cream-deep); color:var(--ink); border-color:var(--rose); }
@media (max-width:780px){
  .lb{ width:100vw; max-width:100vw; max-height:100vh; height:100vh; border-radius:0; }
  .lb__panel{ grid-template-columns:1fr; max-height:100vh; }
  .lb__media{ padding:1.1rem; }
  .lb__frame img{ max-height:44vh; }
}

/* 움직임 최소화 존중 — 단, 사진 프레이밍용 기본 scale(var(--z))는 유지 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .ph, .tile, .btn{ transform:none !important; }
}

/* ============================================================
   브랜드 로고 이미지 (헤더)
   ============================================================ */
/* .site-header 한정으로 특이도(0,2,0)를 올려 WC `.woocommerce-page img{height:auto}` 오버라이드를 이긴다(상품/상점 페이지 로고 거대화 방지) */
.site-header .brand__logo{ height:clamp(38px,5.6vw,50px); width:auto; display:block; }

/* ============================================================
   모바일 하단 탭바 (pensioncrew/shopminbak am-tabbar 패턴 차용)
   ============================================================ */
.tabbar{ display:none; }
@media (max-width:767px){
  /* 모바일: 상단 햄버거 토글 + 드롭다운 메뉴 (하단 탭바와 병행) */
  .nav-toggle{ display:inline-flex; }
  .site-header .container{ justify-content:space-between; row-gap:0; }
  .site-header .nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:120;
    flex-direction:column; align-items:stretch; gap:0; flex-wrap:nowrap;
    background:color-mix(in srgb, var(--cream-light) 97%, #fff);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px -18px rgba(25,20,16,.55);
    padding:.4rem .6rem .7rem;
  }
  .nav-toggle[aria-expanded="true"] ~ .nav{ display:flex; }
  .site-header .nav ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .site-header .nav a{
    display:block; width:100%; padding:.9rem 1rem; font-size:1.05rem; font-weight:600;
    border-radius:11px; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  }
  .site-header .nav li:last-child a,
  .site-header .nav > a:last-child{ border-bottom:0; }
  .site-header .nav a::before, .site-header .nav a::after{ display:none; }
  .site-header .nav a:hover, .site-header .nav a:focus-visible{ background:color-mix(in srgb, var(--rose-soft) 30%, transparent); }
  .site-header .nav a.nav__account{
    border:0; border-radius:11px; text-align:center; margin-top:.3rem; font-weight:700;
    background:color-mix(in srgb, var(--rose-soft) 24%, transparent); color:var(--rose-deep);
  }
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:color-mix(in srgb, var(--cream-light) 95%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 18px rgba(25,20,16,.10);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar__item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:.5rem 0 .55rem; min-height:54px;
    font-size:11px; font-weight:600; letter-spacing:.01em;
    color:var(--ink-faint); text-decoration:none;
  }
  /* 아기자기 — 탭마다 포크 팔레트 색 + 같은 색의 옅은 동그라미 배경 */
  .tabbar__item .ic{
    width:33px; height:33px; padding:5.5px; box-sizing:border-box; border-radius:50%;
    color:var(--tc, var(--ink-soft));
    background:color-mix(in srgb, var(--tc, var(--ink-soft)) 14%, transparent);
    transition:transform .25s ease, color .25s ease, background .25s ease;
  }
  .tabbar__item:nth-child(1){ --tc:var(--blue); }    /* 도자 */
  .tabbar__item:nth-child(2){ --tc:var(--gold); }    /* 소품 */
  .tabbar__item:nth-child(3){ --tc:var(--leaf); }    /* 그림 */
  .tabbar__item:nth-child(4){ --tc:var(--rose); }    /* 주문제작 */
  .tabbar__item:nth-child(5){ --tc:var(--yellow); }  /* 문의 */
  .tabbar__item.is-active{ color:var(--rose-deep); }
  .tabbar__item.is-active .ic{ background:color-mix(in srgb, var(--tc, var(--rose)) 26%, transparent); transform:translateY(-2px) scale(1.08); }
  .tabbar__item:active .ic{ transform:scale(.92); }
  .tabbar__item:focus-visible{ outline:2px solid var(--rose-deep); outline-offset:-4px; border-radius:10px; }
  /* 탭바에 콘텐츠가 가려지지 않게 하단 여백 확보 */
  body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   테마 글루 — wp_nav_menu(primary)가 <ul>/<li>로 렌더될 때도
   시안의 .nav a 스타일이 그대로 적용되도록 리스트 리셋만 추가.
   ============================================================ */
.nav ul{ display:flex; align-items:center; gap:clamp(.9rem,2.3vw,1.8rem); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.nav li{ margin:0; padding:0; }
.nav li::before{ content:none; }

/* 신작 섹션이 비었을 때 안내 */
.works__empty{ grid-column:1 / -1; color:var(--ink-faint); font-size:1rem; padding:2rem 0; }

/* ============================================================
   WooCommerce — 크림·로즈·골드 톤 입히기 (상점·상품·장바구니·결제)
   독립 테마라 부모 충돌은 없으나, 블록 결제가 주입하는 강한 스타일 위에
   색·폰트만 얹기 위해 일부 !important 사용. 레이아웃은 건드리지 않는다.
   ============================================================ */
.woocommerce, .woocommerce-page{ font-family:var(--font-body); color:var(--ink-soft); }

/* 상점/아카이브/상품 페이지 컨테이너 상하 여백 (woocommerce.php가 .container.woocommerce-wrap로 감쌈) */
.woocommerce-wrap{ padding-block:clamp(2.4rem,5vw,4.2rem); }

/* ============================================================
   카테고리/상점 장식 배너 — 카테고리명을 손으로 그린 명패처럼
   (--cat / --cat-flower 는 배너 인라인 스타일로 카테고리별 주입)
   ============================================================ */
.cat-banner{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  padding-block:clamp(2.6rem,5.5vw,4.4rem); margin-bottom:-.5rem;
  background:
    radial-gradient(58% 130% at 50% -6%, color-mix(in srgb, var(--cat,var(--rose)) 16%, transparent), transparent 68%),
    linear-gradient(180deg, var(--cream-light), var(--cream));
  border-bottom:1px solid var(--line);
}
.cat-banner__inner{ position:relative; z-index:2; }
/* 상단 워시테이프 */
.cat-banner__washi{
  position:absolute; z-index:1; top:-9px; left:50%; transform:translateX(-50%) rotate(-2.5deg);
  width:118px; height:28px; border-radius:3px; opacity:.7;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--cat,var(--rose)) 32%, #fff) 0 7px,
    color-mix(in srgb, var(--cat,var(--rose)) 12%, #fff) 7px 14px);
}
/* 흩뿌린 손그림 꽃·잎 */
.cat-banner__deco{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cat-banner__deco .d{ position:absolute; display:block; }
.cat-banner__deco .d1{ left:7%;   top:24%;  width:30px; height:30px; color:var(--cat-flower,var(--rose)); opacity:.5; transform:rotate(-12deg); }
.cat-banner__deco .d2{ left:14%;  top:64%;  width:22px; height:22px; color:var(--leaf); opacity:.5; }
.cat-banner__deco .d3{ right:8%;  top:30%;  width:34px; height:34px; color:var(--cat-flower,var(--rose)); opacity:.5; transform:rotate(10deg); }
.cat-banner__deco .d4{ right:15%; top:66%;  width:18px; height:18px; color:var(--gold); opacity:.6; }
.cat-banner__deco .d5{ left:50%;  bottom:9%;width:22px; height:22px; color:var(--blue); opacity:.42; transform:translateX(-50%); }
/* 크레스트 아이콘 */
.cat-banner__crest{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; margin-bottom:.55rem;
  background:color-mix(in srgb, var(--cat,var(--rose)) 14%, transparent);
  border:1.5px solid color-mix(in srgb, var(--cat,var(--rose)) 38%, transparent);
}
.cat-banner__crest .ic{ width:27px; height:27px; color:var(--cat,var(--rose)); }
/* 명패 제목 — 카테고리 색 디스플레이 글자 + 좌우 꽃 */
.cat-banner__title{
  display:flex; align-items:center; justify-content:center; gap:clamp(.5rem,2vw,1.2rem);
  margin:0; font-family:var(--font-head); font-weight:400; line-height:1.05; letter-spacing:.01em;
  font-size:clamp(2.3rem,6.4vw,3.7rem);
  color:color-mix(in srgb, var(--cat,var(--ink)) 80%, var(--ink)); /* 카테고리 색을 약간 깊게 — 가독성 */
}
.cat-banner__title .bloom{ width:clamp(34px,7vw,52px); height:clamp(34px,7vw,52px); flex:none; }
.cat-banner__title .bloom--l{ transform:rotate(-8deg); }
.cat-banner__title .bloom--r{ transform:rotate(8deg); }
/* 골드 룰 + 중앙 꽃 */
.cat-banner__rule{ display:flex; align-items:center; justify-content:center; gap:.55rem; margin:.75rem 0 .15rem; }
.cat-banner__rule::before, .cat-banner__rule::after{ content:""; width:clamp(28px,9vw,72px); height:2px; border-radius:2px; }
.cat-banner__rule::before{ background:linear-gradient(90deg, transparent, var(--gold)); }
.cat-banner__rule::after{ background:linear-gradient(90deg, var(--gold), transparent); }
.cat-banner__rule .ic{ width:18px; height:18px; color:var(--cat-flower,var(--rose)); }
/* 영문 라벨 */
.cat-banner__en{
  display:block; font-family:var(--font-body); font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; font-size:.72rem;
  color:var(--ink-faint); margin-top:.25rem;
}
/* 한 줄 설명 */
.cat-banner__desc{
  max-width:36rem; margin:.7rem auto 0; color:var(--ink-soft);
  font-size:clamp(.92rem,1.4vw,1rem); line-height:1.65;
}
@media (max-width:560px){
  .cat-banner__title .bloom--l{ display:none; }
}

/* 페이지 제목 / 루프 제목 — 고딕 헤드 */
.woocommerce-products-header__title,
.woocommerce .product_title,
.woocommerce h2.woocommerce-loop-product__title,
.woocommerce-Tabs-panel h2,
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2{ font-family:var(--font-head); color:var(--ink); }
.woocommerce-products-header__title{ font-size:clamp(1.7rem,3.8vw,2.6rem); }

/* 결과 수 / 정렬 */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ color:var(--ink-faint); font-size:.9rem; }
.woocommerce .woocommerce-ordering select{
  font-family:var(--font-body); padding:.45rem .7rem; border:1px solid var(--line);
  border-radius:6px; background:var(--cream-light); color:var(--ink);
}

/* 상품 그리드 (아카이브) — 신작 .works 와 동일 그리드 */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid; gap:clamp(1.6rem,3vw,2.6rem); margin:0 0 2rem; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{ margin:0; width:auto; float:none; text-align:left; }
.woocommerce ul.products li.product::before{ content:none; }
/* 카드 이미지 보정 — WC `li.product a img{height:auto}` + 중간 a로 퍼센트높이 미해결 → 절대배치로 4:5 프레임을 확실히 채움 */
.woocommerce ul.products li.product.work .ph__img{ position:relative; }
.woocommerce ul.products li.product.work .ph__img .ph__link{ position:absolute; inset:0; z-index:1; display:block; }
.woocommerce ul.products li.product.work .ph__img .ph__link img{ width:100%; height:100%; object-fit:cover; }
/* WC `.columns-N li.product{width:%}`가 그리드 트랙 기준으로 카드를 쪼그라뜨리는 것 방지(트랙 채움). 특이도(0,4,2)로 columns 규칙을 이김 */
.woocommerce ul.products li.product.work,
.woocommerce-page ul.products li.product.work{ width:auto; }

/* 가격 — 공통 */
.woocommerce .price,
.woocommerce span.price,
.woocommerce ul.products li.product .price{ color:var(--ink); font-weight:700; }
.woocommerce .price del{ color:var(--ink-faint); font-weight:400; opacity:.7; }
.woocommerce .price ins{ text-decoration:none; color:var(--rose-deep); }

/* 버튼 — 블랙 톨 → 호버 로즈 (메인 .btn 과 같은 톤) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.wc-block-components-button{
  font-family:var(--font-head); font-weight:400; letter-spacing:.02em;
  color:var(--gold-light) !important; background:var(--noir) !important;
  border:1.5px solid var(--noir) !important; border-radius:100px !important;
  padding:.7rem 1.4rem !important; box-shadow:none !important;
  transition:background .35s ease, color .35s ease, transform .3s ease, border-color .35s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.wc-block-components-button:hover{
  background:var(--rose) !important; color:#FBF4E4 !important; border-color:var(--rose) !important;
  transform:translateY(-2px);
}
.woocommerce .button.disabled,
.woocommerce button.button:disabled,
.woocommerce a.button.disabled{ opacity:.5; transform:none !important; }

/* 알림(notice) — 크림 패널 + 로즈 라인 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner{
  background:var(--cream-light) !important; color:var(--ink-soft) !important;
  border-top:3px solid var(--rose); border-radius:6px;
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--rose); }
.woocommerce-error{ border-top-color:var(--rose-deep); }

/* 단일 상품 페이지 */
.woocommerce div.product .product_title{ font-size:clamp(1.6rem,3.5vw,2.4rem); }
.woocommerce div.product p.price,
.woocommerce div.product span.price{ color:var(--rose-deep); font-size:1.4rem; font-weight:700; }
.woocommerce div.product .images img,
.woocommerce-product-gallery__image img{
  border-radius:6px; border:1px solid rgba(199,154,58,.4); background:#fff;
}
.woocommerce div.product form.cart .quantity input.qty{
  border:1px solid var(--line); border-radius:6px; padding:.5rem; background:var(--cream-light);
}
.woocommerce .stock.in-stock{ color:var(--leaf-deep); font-weight:600; }
.woocommerce .stock.out-of-stock{ color:var(--rose-deep); font-weight:700; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:var(--cream-deep); border-color:var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ background:var(--cream-light); border-bottom-color:var(--cream-light); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-family:var(--font-head); color:var(--ink); }

/* 폼·입력 (장바구니·결제·계정·고전 체크아웃) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.select2-container--default .select2-selection--single{
  border:1px solid var(--line) !important; border-radius:6px !important;
  background:var(--cream-light); color:var(--ink); font-family:var(--font-body);
}

/* 장바구니 표 */
.woocommerce table.shop_table{
  border:1px solid var(--line); border-radius:8px;
  background:color-mix(in srgb, var(--cream-light) 70%, transparent);
}
.woocommerce table.shop_table th{ font-family:var(--font-head); color:var(--ink); }
.woocommerce table.shop_table td{ color:var(--ink-soft); }

/* 블록 카트·체크아웃 (WC Blocks) — 색·폰트만, 레이아웃 불간섭 */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{ font-family:var(--font-body); color:var(--ink-soft); }
.wc-block-components-title,
.wc-block-checkout__main h1,
.wc-block-checkout__main h2,
.wc-block-components-checkout-step__title{ font-family:var(--font-head) !important; color:var(--ink) !important; }
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount{ color:var(--ink); }
.wc-block-components-checkout-step__description,
.wc-block-components-totals-item__label{ color:var(--ink-soft); }

/* 페이지네이션 */
.woocommerce nav.woocommerce-pagination ul{ border:1px solid var(--line); border-radius:100px; overflow:hidden; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{ color:var(--ink-soft); padding:.5em .9em; }
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{ background:var(--rose); color:#FBF4E4; }

/* 작품 루프 카드(.work)가 WC <li.product> 안에서도 동일하게 보이도록 보강 */
.woocommerce ul.products li.product.work a.ph__link{ display:block; }

/* ============================================================
   일반 페이지 / 폴백 본문 (page.php · index.php)
   ============================================================ */
.page-body{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.page-body .section__head{ margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.page-body .entry-content > * + *{ margin-top:1.1rem; }
.page-body .entry-content a{ color:var(--rose-deep); text-decoration:underline; text-underline-offset:2px; }
.page-body .entry-content h2{ font-family:var(--font-head); color:var(--ink); margin-top:1.6rem; }
.page-body .entry-content img{ border-radius:6px; }
.post-card{ padding-bottom:1.6rem; margin-bottom:1.6rem; border-bottom:1px dotted rgba(36,30,24,.24); }
.post-card:last-child{ border-bottom:0; }

/* ============================================================
   내 계정 (My Account) — 토스 스타일 대시보드
   크림 카드 + 로즈 단일 액센트. 사이드바는 아이콘·활성 알약·셰브론 행,
   본문은 둥근 카드. 레이아웃만 grid로 얹고 색·폰트는 토큰을 따른다.
   (로그인 폼은 건드리지 않도록 :has(내비)로 로그인 상태에만 그리드 적용)
   ============================================================ */

/* 페이지 제목 — "내 계정" : 헤드 고딕(Do Hyeon)으로 통일 */
.woocommerce-account .entry-title{
  font-family:var(--font-head); color:var(--ink);
  font-size:clamp(1.9rem,4.4vw,2.8rem); line-height:1.15;
  margin-bottom:clamp(1.3rem,3vw,2.1rem);
}

/* 로그인 상태(내비 존재) — 사이드바 + 본문 2열 그리드 */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;
  grid-template-columns:clamp(218px,24vw,272px) minmax(0,1fr);
  gap:clamp(1.1rem,2.4vw,2rem);
  align-items:start;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-MyAccount-content{
  float:none; width:auto;   /* WC 기본 float(30%/68%) 해제 — 그리드 미지원 시엔 float 폴백 유지 */
}

/* ---- 사이드바 메뉴 카드 ---- */
.woocommerce-account .woocommerce-MyAccount-navigation{
  min-width:0;
  background:var(--cream-light);
  border:1px solid var(--line); border-radius:18px;
  padding:.5rem;
  box-shadow:0 16px 34px -28px rgba(25,20,16,.6);
  position:sticky; top:84px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:2px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0; padding:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li::before{ content:none; }

.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:flex; align-items:center; gap:.7rem;
  padding:.78rem .85rem; border-radius:12px;
  font-family:var(--font-body); font-weight:500; font-size:.98rem; line-height:1.2;
  color:var(--ink-soft); text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
/* 좌측 라인 아이콘 (CSS mask) — currentColor로 틴트 */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
  content:""; flex:0 0 auto; width:1.3em; height:1.3em;
  background-color:currentColor; opacity:.82;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
/* 우측 셰브론 */
.woocommerce-account .woocommerce-MyAccount-navigation li a::after{
  content:""; flex:0 0 auto; margin-left:auto; width:.82em; height:.82em;
  background-color:currentColor; opacity:.26;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
  transition:opacity .2s ease, transform .2s ease;
}

/* per-item 라인 아이콘 */
.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5'/%3E%3Cpath d='M6 10.5V19h12v-8.5'/%3E%3Cpath d='M10 19v-4h4v4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5'/%3E%3Cpath d='M6 10.5V19h12v-8.5'/%3E%3Cpath d='M10 19v-4h4v4'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-.9 10.2a1.5 1.5 0 0 1-1.5 1.3H8.4a1.5 1.5 0 0 1-1.5-1.3L6 8z'/%3E%3Cpath d='M9.2 8V7a2.8 2.8 0 0 1 5.6 0v1'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-.9 10.2a1.5 1.5 0 0 1-1.5 1.3H8.4a1.5 1.5 0 0 1-1.5-1.3L6 8z'/%3E%3Cpath d='M9.2 8V7a2.8 2.8 0 0 1 5.6 0v1'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v8.5'/%3E%3Cpath d='M8 9.5l4 4 4-4'/%3E%3Cpath d='M5.5 18.5h13'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v8.5'/%3E%3Cpath d='M8 9.5l4 4 4-4'/%3E%3Cpath d='M5.5 18.5h13'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5c4-3.6 6.5-6.8 6.5-10A6.5 6.5 0 0 0 5.5 10.5c0 3.2 2.5 6.4 6.5 10z'/%3E%3Ccircle cx='12' cy='10.3' r='2.4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5c4-3.6 6.5-6.8 6.5-10A6.5 6.5 0 0 0 5.5 10.5c0 3.2 2.5 6.4 6.5 10z'/%3E%3Ccircle cx='12' cy='10.3' r='2.4'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 19.5c.6-3.6 3.4-5.5 7-5.5s6.4 1.9 7 5.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 19.5c.6-3.6 3.4-5.5 7-5.5s6.4 1.9 7 5.5'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2.4'/%3E%3Cpath d='M3.5 10h17'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2.4'/%3E%3Cpath d='M3.5 10h17'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.5H7A2.5 2.5 0 0 0 4.5 7v10A2.5 2.5 0 0 0 7 19.5h2.5'/%3E%3Cpath d='M15 8l4 4-4 4'/%3E%3Cpath d='M19 12H9.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.5H7A2.5 2.5 0 0 0 4.5 7v10A2.5 2.5 0 0 0 7 19.5h2.5'/%3E%3Cpath d='M15 8l4 4-4 4'/%3E%3Cpath d='M19 12H9.5'/%3E%3C/svg%3E");
}

/* hover */
@media (hover:hover){
  .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
    background:color-mix(in srgb, var(--rose-soft) 18%, var(--cream-light));
    color:var(--rose-deep);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a:hover::after{ opacity:.5; transform:translateX(2px); }
}
/* active(is-active) — 로즈 알약 */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:color-mix(in srgb, var(--rose-soft) 32%, var(--cream-light));
  color:var(--rose-deep); font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rose) 30%, transparent);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before{ opacity:1; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after{ opacity:.55; }

/* 로그아웃 — 구분선 + 차분한 톤 */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout{
  margin-top:5px; padding-top:5px;
  border-top:1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--ink-faint); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover{ color:var(--rose-deep); }

/* ---- 본문 카드 ---- */
.woocommerce-account .woocommerce-MyAccount-content{
  min-width:0;
  background:var(--cream-light);
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(1.5rem,3.2vw,2.6rem);
  box-shadow:0 16px 34px -28px rgba(25,20,16,.6);
  color:var(--ink-soft);
}
.woocommerce-account .woocommerce-MyAccount-content > p{ margin-bottom:1rem; line-height:1.85; }
.woocommerce-account .woocommerce-MyAccount-content > p:last-child{ margin-bottom:0; }
/* 대시보드 인사말 — 첫 문단을 한 톤 키워 환영 헤드라인처럼 */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{ font-size:1.14rem; color:var(--ink); }
.woocommerce-account .woocommerce-MyAccount-content strong{ color:var(--rose-deep); }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button){
  color:var(--rose-deep); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--rose) 45%, transparent);
  transition:color .2s ease, text-decoration-color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover{
  color:var(--rose); text-decoration-color:var(--rose);
}

/* ---- 반응형 — 모바일에선 사이드바를 상단 가로 스크롤 칩으로 ---- */
@media (max-width:860px){
  /* 사이드바를 본문 위에 '세로 메뉴' 카드로 쌓는다(데스크톱 세로 리스트 그대로, 폭만 전체) */
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){ grid-template-columns:minmax(0,1fr); }
  .woocommerce-account .woocommerce-MyAccount-navigation{ position:static; }
}