/* 생성물 — 직접 수정 금지. 소스: theme/src/, 빌드: theme/build/build.sh */

/* ==========================================================================
   하루카재팬 — 디자인 토큰  [藍 아이 · 여백형]
   --------------------------------------------------------------------------
   원칙: 뉴트럴 베이스 + 액센트 1색.
   종합몰은 상품 사진이 이미 온갖 색을 갖고 있다. 테마 컬러가 세면 상품과 싸운다.
   그라운드는 흰색으로 비우고, 성격은 여백·정렬·헤어라인으로 낸다.

   이 파일이 모든 화면의 단일 소스다. 컴포넌트에서 리터럴 색상값 금지.
   ========================================================================== */

:root {

  /* ── 색: 그라운드 / 표면 ───────────────────────────────────────────── */
  --c-ground:        #FFFFFF;   /* 페이지 바탕 */
  --c-surface:       #F4F6F8;   /* 섹션 밴드, 썸네일 바탕 */
  --c-surface-2:     #EAEDF1;   /* 한 단 더 들어간 면 */

  /* ── 색: 경계 ──────────────────────────────────────────────────────── */
  --c-line:          #E4E7EC;   /* 기본 헤어라인. 藍의 주력 구분자 */
  --c-line-strong:   #CDD2DA;   /* 강조 구분선, 입력 필드 테두리 */

  /* ── 색: 잉크 ──────────────────────────────────────────────────────── */
  --c-ink:           #14181F;   /* 제목, 가격 */
  --c-ink-2:         #3C4250;   /* 본문 */
  --c-ink-3:         #6B7385;   /* 보조 설명, 메타 */
  --c-ink-4:         #9AA1B0;   /* 비활성, 자리표시자 */

  /* ── 색: 액센트 (쪽빛 藍) ──────────────────────────────────────────── */
  --c-accent:        #26397F;
  --c-accent-hover:  #1C2C63;
  --c-accent-press:  #16224E;
  --c-accent-soft:   #EEF0F8;   /* 뱃지·태그 바탕 */
  --c-on-accent:     #FFFFFF;

  /* ── 색: 의미 (액센트와 별개. 상태 전달용) ────────────────────────── */
  --c-sale:          #B3402C;   /* 할인율, 세일가 */
  --c-sale-soft:     #FBEFEC;
  --c-ok:            #2F5D50;   /* 재고 있음, 주문 완료 */
  --c-ok-soft:       #E8F0ED;
  --c-warn:          #8A6413;   /* 배송 지연, 품절 임박 */
  --c-warn-soft:     #FBF3E2;

  /* ── 타이포: 패밀리 ────────────────────────────────────────────────── */
  /* 웹폰트는 확정 후 교체. 지금은 시스템 스택 (한글 웹폰트는 용량이 커서
     LCP에 직접 영향 — 07-performance 참조. 서브셋 없이 넣지 않는다) */
  --f-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
            "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --f-num:  ui-monospace, "SF Mono", Menlo, monospace;

  /* ── 타이포: 스케일 ────────────────────────────────────────────────── */
  --t-display:  40px;   --lh-display:  1.15;  /* 히어로 헤드라인 */
  --t-h1:       32px;   --lh-h1:       1.20;  /* 페이지 제목 */
  --t-h2:       24px;   --lh-h2:       1.25;  /* 섹션 제목 */
  --t-h3:       19px;   --lh-h3:       1.35;  /* 카드 그룹 제목 */
  --t-lg:       16px;   --lh-lg:       1.60;  /* 리드 문단 */
  --t-base:     15px;   --lh-base:     1.60;  /* 본문 기본 */
  --t-sm:       13px;   --lh-sm:       1.55;  /* 상품명, 보조 */
  --t-xs:       12px;   --lh-xs:       1.45;  /* 메타, 캡션 */
  --t-2xs:      11px;   --lh-2xs:      1.40;  /* 라벨, 뱃지 */

  /* ── 타이포: 굵기 / 자간 ──────────────────────────────────────────── */
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;
  --w-heavy:    800;

  --ls-tight:  -.028em;   /* 큰 제목 — 한글도 크면 조여야 뭉치지 않는다 */
  --ls-snug:   -.018em;
  --ls-normal:  0;
  --ls-label:   .14em;    /* 대문자 라벨 */

  /* ── 간격 (4px 기준) ──────────────────────────────────────────────── */
  --s-1:   4px;   --s-2:   8px;   --s-3:  12px;   --s-4:  16px;
  --s-5:  20px;   --s-6:  24px;   --s-8:  32px;   --s-10: 40px;
  --s-12: 48px;   --s-16: 64px;   --s-20: 80px;   --s-24: 96px;

  /* 섹션 사이 리듬 — 藍의 여백은 여기서 나온다 */
  --s-section:       var(--s-16);   /* 데스크톱 섹션 간격 */
  --s-section-m:     var(--s-10);   /* 모바일 */

  /* ── 모서리 ────────────────────────────────────────────────────────── */
  /* 藍은 정밀·헤어라인 성격. 라운드를 크게 주지 않는다 */
  --r-none:  0;
  --r-sm:    2px;    /* 뱃지, 태그, 썸네일 */
  --r-md:    4px;    /* 카드, 버튼, 입력 */
  --r-lg:    8px;    /* 모달, 드롭다운 */
  --r-full:  999px;  /* 필 — 아주 제한적으로만 */

  /* ── 그림자 ────────────────────────────────────────────────────────── */
  /* 藍은 그림자 대신 헤어라인으로 층을 나눈다. 떠 있는 것에만 쓴다 */
  --sh-pop:  0 2px 4px rgba(20,24,31,.06), 0 12px 28px -12px rgba(20,24,31,.18);
  --sh-nav:  0 1px 0 var(--c-line);

  /* ── 레이아웃 ──────────────────────────────────────────────────────── */
  --w-container: 1280px;
  --gutter:      24px;
  --gutter-m:    16px;

  /* 상품 그리드 — 종합몰은 카테고리가 다양해 컬럼 수가 자주 바뀐다 */
  --grid-gap:    20px;
  --grid-gap-m:  12px;

  /* ── 모션 ──────────────────────────────────────────────────────────── */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --d-fast:  120ms;
  --d-base:  200ms;

  /* ── z-index ───────────────────────────────────────────────────────── */
  --z-base: 1;  --z-sticky: 100;  --z-drawer: 200;  --z-modal: 300;  --z-toast: 400;
}

/* --------------------------------------------------------------------------
   반응형 — 좁은 화면에서 스케일을 낮춘다.
   pocketosaka가 344·360·375px 구간에서 깨졌다(99-pitfalls). 처음부터 잡는다.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --t-display: 26px;
    --t-h1:      23px;
    --t-h2:      19px;
    --t-h3:      16px;
    --gutter:    var(--gutter-m);
    --grid-gap:  var(--grid-gap-m);
  }
}

@media (max-width: 380px) {
  :root {
    --t-display: 23px;
    --t-h1:      21px;
    --gutter:    12px;
  }
}

/* --------------------------------------------------------------------------
   다크모드 — v1 미지원 (의도적)
   국내 쇼핑몰에서 다크 스토어프론트는 드물고, 상품 사진이 흰 배경 전제로
   촬영돼 있어 다크 그라운드에서 떠 보인다. 지원한다면 상품 이미지 정책부터
   다시 잡아야 하므로 별도 과제로 둔다.  → docs/theme-strategy.md §5
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   가격 — 단일 컴포넌트
   --------------------------------------------------------------------------
   pocketosaka는 한 페이지 안에서 `3,100원`과 `W 4,700`이 섞여 있었다.
   섹션마다 다른 마크업으로 가격을 찍었기 때문. 여기서만 찍는다.

   통화 표기: ₩ 기호 (2026-08-27 확정)
     이윰 스킨이 `₩ 24,800` 으로 출력하므로 우리 컴포넌트도 여기에 맞춘다.
     중요한 건 기호 선택이 아니라 **사이트 전체가 하나로 통일되는 것**이다.
     pocketosaka 는 `3,100원` 과 `W 4,700` 이 섞여 있었다.

   마크업:
     <p class="price">
       <span class="price__off">18%</span>
       <span class="price__was">₩ 30,200</span>
       <b   class="price__now">₩ 24,800</b>
     </p>
   순서 주의: 할인율 → 정가 → 판매가. 눈이 최종가에서 멈추게 한다.
   ========================================================================== */

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  font-variant-numeric: tabular-nums;   /* 그리드에서 자릿수가 흔들리지 않게 */
}

.price__now {
  font-size: var(--t-lg);
  font-weight: var(--w-heavy);
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
}

.price__was {
  font-size: var(--t-xs);
  font-weight: var(--w-regular);
  color: var(--c-ink-4);
  text-decoration: line-through;
}

.price__off {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--c-sale);
  letter-spacing: var(--ls-snug);
}

/* 할인 없는 상품 — 할인율/정가 요소를 아예 렌더하지 않는다.
   빈 span을 남기면 baseline이 어긋난다 */

/* 카드 안에서는 한 단 작게 */
.card .price__now { font-size: var(--t-base); }
.card .price__off { font-size: var(--t-xs); }

/* 상품 상세 등 큰 표기 */
.price--lg .price__now { font-size: var(--t-h2); }
.price--lg .price__off { font-size: var(--t-lg); }
.price--lg .price__was { font-size: var(--t-sm); }

/* 엔화 병기 (직구몰 — 환율 변동 안내용) */
.price__yen {
  font-size: var(--t-xs);
  color: var(--c-ink-3);
  font-weight: var(--w-medium);
}
/* ==========================================================================
   상품 카드 — 사이트 전체에서 이 컴포넌트 하나만 쓴다
   --------------------------------------------------------------------------
   pocketosaka는 BEST SELLERS와 SPECIAL PRICE의 카드가 서로 달랐다.
   섹션이 늘 때마다 카드가 하나씩 늘어난 결과. 여기서는 variant로만 조절한다.

   마크업:
     <a class="card" href="...">
       <div class="card__media">
         <img class="card__img" src="..." alt="" loading="lazy" width="400" height="400">
         <span class="card__flag card__flag--sale">세일</span>
       </div>
       <div class="card__body">
         <span class="card__brand">시세이도</span>
         <h3 class="card__name">아넷사 퍼펙트 UV 스킨케어 밀크 60mL</h3>
         <p class="price">…</p>
         <p class="card__meta">관부가세 포함 · 5–14일</p>
       </div>
     </a>
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-md);
  /* 카드에 테두리·그림자를 두르지 않는다. 藍은 여백으로 나눈다 */
}

/* ── 이미지 ──────────────────────────────────────────────────────────── */
.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-surface);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--d-base) var(--e-out);
}

/* 이미지 누락 시 회색 사각형이 그대로 보이는 걸 막는다.
   (pocketosaka: 디렉토리 소유자가 www-data가 아니면 thumbnail()이 빈값 반환) */
.card__img[src=""],
.card__img:not([src]) { visibility: hidden; }

@media (hover: hover) {
  .card:hover .card__img { transform: scale(1.03); }
}

/* ── 플래그 (세일/품절/신상) ─────────────────────────────────────────── */
.card__flag {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  font-size: var(--t-2xs);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.card__flag--sale { background: var(--c-sale-soft);  color: var(--c-sale); }
.card__flag--new  { background: var(--c-ok-soft);    color: var(--c-ok); }

/* 품절 — 카드 전체를 눌러 표현. 플래그만으로는 그리드에서 안 읽힌다 */
.card--soldout .card__media { opacity: .45; }
.card--soldout .card__name,
.card--soldout .price       { color: var(--c-ink-4); }
.card--soldout .price__now  { color: var(--c-ink-4); }

/* ── 본문 ────────────────────────────────────────────────────────────── */
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.card__brand {
  font-size: var(--t-2xs);
  font-weight: var(--w-semi);
  color: var(--c-ink-3);
  letter-spacing: var(--ls-normal);
}

.card__name {
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--w-medium);
  color: var(--c-ink-2);
  margin: 0;
  /* 상품명 길이가 제각각이라 그리드가 들쭉날쭉해진다 → 2줄 고정 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--t-sm) * var(--lh-sm) * 2);
}

.card:hover .card__name { color: var(--c-ink); }

.card__meta {
  font-size: var(--t-2xs);
  color: var(--c-ink-3);
  margin: 0;
  margin-top: var(--s-1);
}

/* ── 접근성 ──────────────────────────────────────────────────────────── */
.card:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ── variant ─────────────────────────────────────────────────────────── */

/* 가로형 — 장바구니, 주문서, 최근 본 상품 */
.card--row {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--s-4);
}
.card--row .card__media { flex: 0 0 84px; }
.card--row .card__name  { -webkit-line-clamp: 2; min-height: 0; }

/* 컴팩트 — 사이드바, 추천 슬라이더 */
.card--compact { gap: var(--s-2); }
.card--compact .card__name  { font-size: var(--t-xs); }
.card--compact .card__brand { display: none; }
.card--compact .card__meta  { display: none; }

/* ── 그리드 ──────────────────────────────────────────────────────────── */
/* 카테고리가 다양한 종합몰 — 컬럼 수를 고정하지 않고 폭에 맞춘다.
   pocketosaka의 카테고리 네비가 7+3으로 갈려 빈칸이 생긴 문제와 같은 뿌리 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   EB4 브릿지 — 벤더 CSS 가 만든 밀도/장식을 藍 성격으로 조정

   역할 분담:
     recolor.py     → 벤더 CSS 의 "색"을 바꾼다 (선택자 인식형 치환)
     eb4-bridge.css → 벤더 CSS 의 "여백·타이포·장식"을 바꾼다 (오버라이드)

   custom.css 는 EB4 가 가장 마지막에 로드하므로 같은 특정도면 여기가 이긴다.
   ══════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
  background: var(--c-ground);
  -webkit-font-smoothing: antialiased;
}

/* 제목 — 크게 쓸수록 자간을 조인다. 한글은 크면 벌어져 보인다 */
h1, .h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-weight: var(--w-heavy); color: var(--c-ink); }
h2, .h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-snug);  font-weight: var(--w-bold);  color: var(--c-ink); }
h3, .h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-snug);  font-weight: var(--w-bold);  color: var(--c-ink); }

a { color: var(--c-ink-2); transition: color var(--d-fast) var(--e-out); }
a:hover, a:focus { color: var(--c-accent); }
a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* 藍은 그림자 대신 헤어라인으로 층을 나눈다 */
.panel, .well, .card, .table-list-eb .table {
  box-shadow: none;
  border-color: var(--c-line);
  border-radius: var(--r-md);
}

/* 버튼 — 라운드를 줄이고 액센트를 단일화 */
.btn { border-radius: var(--r-md); font-weight: var(--w-semi); letter-spacing: var(--ls-snug); }
.btn-primary {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-on-accent);
}

/* 입력 필드 */
.form-control, input[type="text"], input[type="password"], input[type="email"], select, textarea {
  border-radius: var(--r-md);
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}
.form-control:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* 섹션 리듬 — pocketosaka 의 "8개 섹션이 전부 같은 헤딩" 문제 대응.
   장식을 걷어내고 여백으로 구분한다 */
.headline {
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-6);
}
.headline h1, .headline h2, .headline h3, .headline h4 {
  margin: 0;
  letter-spacing: var(--ls-snug);
}

/* 컨테이너 여백 */
@media (min-width: 769px) {
  .container, .container-fluid { padding-left: var(--gutter); padding-right: var(--gutter); }
}


/* ══════════════════════════════════════════════════════════════════════
   상품 아이콘 뱃지 (히트/추천/신상/인기/할인)
   --------------------------------------------------------------------
   기본값은 70×18px 블록이 세로로 최대 4개 쌓여 카드 가로의 29% 를 먹었다.
   상품 이미지가 주인공이어야 하는데 뱃지가 기둥을 만든다.
   개수는 유지하되(운영자가 붙인 라벨을 임의로 감추지 않는다) 크기를 줄인다.
   → 뱃지 70px → 32px, 카드 대비 29% → 13%

   ⚠️ 선택자 주의
   스킨은 색·크기를 PHP 안 인라인 <style> 로 body 에 렌더한다.
   custom.css 는 head 에 있으므로 **같은 특정도면 스킨이 순서로 이긴다.**
   스킨의 `.product-main-10 .rgba-banner` 는 (0,2,0) 이라 단순히
   `.item-main-wrap .rgba-banner` (0,2,0) 로는 못 이긴다.
   클래스를 한 번 더 붙여 특정도를 올린다 — !important 를 쓰지 않기 위함.
   ══════════════════════════════════════════════════════════════════════ */

.product-main-10 .rgba-banner-area.rgba-banner-area,
.product-main-20 .rgba-banner-area.rgba-banner-area,
.product-main-30 .rgba-banner-area.rgba-banner-area,
.product-main-40 .rgba-banner-area.rgba-banner-area,
.product-main-50 .rgba-banner-area.rgba-banner-area {
  top: var(--s-2);
  right: var(--s-2);
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.product-main-10 .rgba-banner.rgba-banner,
.product-main-20 .rgba-banner.rgba-banner,
.product-main-30 .rgba-banner.rgba-banner,
.product-main-40 .rgba-banner.rgba-banner,
.product-main-50 .rgba-banner.rgba-banner {
  width: auto;
  min-width: 0;
  font-size: var(--t-2xs);
  line-height: 1;
  padding: 3px 7px;
  margin: 0;
  border-radius: var(--r-sm);
  font-weight: var(--w-semi);
  letter-spacing: .02em;
}