/*
Theme Name: noflik
Theme URI: https://noflik.shop
Description: noflik 자사몰 화면. Twenty Twenty-Five 위에 원본 노플릭 값만 얹었다.
             색·글꼴·모서리·격자는 noflik.shop 공개면에서 실측한 값이다
             (근거 = Cowork/noflik/site-archive/DESIGN_TOKENS.md).
Author: Daehan Global
Template: twentytwentyfive
Version: 0.1.0
Text Domain: noflik
*/

/* 원본의 모서리 0 규칙. 입력칸만 6px */
.wp-block-button__link,
.wc-block-components-button,
.wp-block-woocommerce-product-image,
.woocommerce img { border-radius: 0; }

input, select, textarea { border-radius: 6px; }

/* 원본 버튼은 대문자 14px */
.wp-block-button__link,
.wc-block-components-button {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0;
}

/* 상품 갤러리 — 슬라이더를 안 쓰므로 사진을 세로로 쌓는다 */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  display: block;
  margin-bottom: 8px;
}
.woocommerce div.product div.images img { width: 100%; height: auto; }

/* ① 상단 신뢰 바 */
.noflik-trustbar {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 9px 16px;
}
.noflik-trustbar__dot { opacity: 0.5; }

/* 첫 화면에서는 페이지 제목(Beranda)을 감춘다 — 히어로가 그 자리다 */
.home .wp-block-post-title { display: none; }

/* 히어로를 머리글 바로 밑에 붙인다 — 감춘 제목이 남긴 빈 띠를 걷는다 */
.home main { margin-top: 0 !important; }
.home main > .wp-block-group { padding-top: 0 !important; padding-bottom: 0 !important; }

/* 내비는 원본이 14px 대문자였다 */
.wp-block-navigation { font-size: 14px; text-transform: uppercase; }

/* 히어로 사진을 <picture> 로 감쌌다 — 감싼 상자도 칸을 꽉 채워야 한다 */
.noflik-hero picture.hero-media-pic { display: block; width: 100%; height: 100%; }

/* 사이즈 고르는 칸에서 글자가 잘렸다(2026-09-14 이하나 님).
   우커머스가 `height:3em`(39px)으로 못박는데 원본 CSS 의 줄높이 32px 에
   위아래 여백 11.7px 씩이 더해져 44px 가 필요하다. 높이를 내용에 맡긴다.
   16px 는 아이폰이 칸을 누를 때 화면을 확대하지 않는 최소값이다. */
.woocommerce table.variations td select,
.woocommerce div.product form.cart .variations select {
  height: auto;
  min-height: 44px;
  line-height: 1.3;
  font-size: 16px;
}

/* 상품 목록 맨 위 분류 줄. 폰에서 헤더 메뉴가 감춰져 여기가 유일한 길이다 */
.noflik-cats {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 12px 0 4px; padding-bottom: 6px; scrollbar-width: none;
}
.noflik-cats::-webkit-scrollbar { display: none; }
.noflik-cats__item {
  flex: 0 0 auto; padding: 9px 14px; border: 1px solid currentColor;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap; opacity: 0.6;
}
.noflik-cats__item.is-now { opacity: 1; background: var(--wp--preset--color--contrast, #111); color: var(--wp--preset--color--base, #fff); }

/* 🚨 데스크톱에서 분류 줄 끝이 화면 밖으로 잘려 있었다 — 열셋 중 열둘까지만 보이고
   「CELANA PENDEK CHINO」가 반쯤 잘린다(2026-09-15 실측 1440px). 옆으로 미는 것은
   손가락이 있는 폰의 방식이고 마우스에는 미는 손잡이가 안 보인다. 데스크톱은 접는다. */
@media (min-width: 768px) {
  .noflik-cats { flex-wrap: wrap; overflow-x: visible; }
}

/* 폰 서랍 메뉴. 꼴은 원본 component-drawers.css 가 내고 여닫는 것만 여기서 한다.
   ⛔원본의 html.js / html.no-js 갈래에 기대지 않는다 — 우리는 그 클래스를 안 단다. */
#drawer-menu .drawer-panel {
  --drawer-position: calc(-1 * var(--drawer-size));
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
}
#drawer-menu.is-open { visibility: visible; }
#drawer-menu.is-open .drawer-panel { --drawer-position: 0; opacity: 1; }
#drawer-menu > .page-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  opacity: 0; z-index: 0; transition: opacity .3s ease-in-out;
}
#drawer-menu.is-open > .page-overlay { z-index: 1; opacity: 1; }
.drawer-menu__title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.drawer-menu__group {
  margin: 18px 0 2px; padding: 0 calc(var(--drawer-padding) * 1.2);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.45;
}
.drawer-menu-nav .drawer-menu__item { text-decoration: none; }

/* 데스크톱은 주 메뉴가 이미 있다 */
@media only screen and (min-width: 768px) { #drawer-menu { display: none !important; } }

/* 데스크톱 주 메뉴가 안 열리고 있었다(2026-09-14 실측 hover 전후 링크 0 → 0).
   원본은 쇼피파이 JS 가 .menu-item 에 .active 를 붙여 여는데 그 JS 를 안 가져왔다.
   글자 둘(Collection·Belanja)만 보이고 눌러도 아무 일이 안 났다 —
   오전에 고친 폰 햄버거와 같은 결함이다. hover 와 키보드 둘 다로 연다. */
@media only screen and (min-width: 768px) {
  .main-menu__item:hover > .submenu,
  .main-menu__item:focus-within > .submenu { display: flex; }
  .main-menu__item { cursor: default; }
}

/* 🚨 첫 화면에서 하위 메뉴 글자가 안 보였다(2026-09-14 실측 흰 바탕에 흰 글자
   rgb(255,255,255) / rgb(255,255,255)). 첫 화면 헤더는 히어로 위에 얹히느라
   overlay 로 글자를 희게 하는데, 하위 메뉴 패널은 제 바탕이 흰색이다.
   🔑 계측은 통과했다 — 링크 열일곱이 다 「보이는 것」으로 잡혔다. 눈으로 봐야 잡힌다.
   패널만 제 글자색으로 되돌린다. */
.main-menu .submenu { color: var(--color-foreground, #111111); }
.main-menu .submenu a { color: inherit; }

/* 바로구매 버튼 — 2026-09-15 이하나 님 요청(#ai_noflik_leads 15:24).
   장바구니는 그대로 두고 그 아래 한 줄을 통째로 쓴다. 폰에서 둘을 나란히 두면
   각 버튼이 좁아져 인니어 문구가 두 줄로 접힌다.
   되돌리기 = 이 블록 지우기. */
.noflik-buy-now {
  display: block;
  width: 100%;
  flex: 0 0 100%;
  margin-top: .75rem;
  padding: .9em 1em;
  background: transparent;
  color: #463863;
  border: 1px solid #463863;
  border-radius: 0;
  font: inherit;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.noflik-buy-now:hover,
.noflik-buy-now:focus-visible {
  background: #463863;
  color: #fff;
}

/* 상품 목록 썸네일을 키운다 — 2026-09-15 이하나 님 요청(#ai_noflik_leads 16:03
   「썸네일 크기 UI를 이정도로 변경해줄수있나요」·「지금은 너무 작습니다」).
   레퍼런스로 thisisapril.com 화면을 주셨다. 거기는 사진이 화면을 거의 꽉 채운다.

   🔑 바꾸는 것은 여백과 간격 둘뿐이다. 열 수도 사진 비율도 안 건드린다.
      폰 393px 기준으로 좌우 30px(--wp--preset--spacing--50 의 clamp 바닥값)에
      칸 사이 20px(1.25em)이 들어가 카드가 156px 였다. 10px·10px 로 줄여 181px 가 된다.
   🚨 root 여백 변수를 통째로 바꾸지 않는다 — 그러면 본문 글까지 가장자리에 붙는다.
      상품 목록 블록만 좌우로 펼치고 그 안에서 10px 를 준다.
   ⛔ 폰에서만 건다. 데스크톱은 1200px 안에서 이미 크게 보인다.
   되돌리기 = 이 블록 지우기. */
@media (max-width: 767px) {
  .wp-block-woocommerce-product-collection {
    /* 🚨 `--wp--style--root--padding-left` 로 상쇄하면 0 으로 계산된다(실측 — 그 변수가
       이 블록 자리에서 안 잡혀 좌우가 30+10=40px 이 됐다). clamp 원식을 직접 뺀다. */
    margin-inline: calc(10px - clamp(30px, 5vw, 50px)) !important;
    padding-inline: 0 !important;
    max-width: none !important;
  }
  .wc-block-product-template__responsive {
    /* 🚨 2열을 못박는다. 원식이 `auto-fill minmax(max(150px, 33.33% - …))` 라
       여백을 줄여 폭이 늘면 오히려 3열로 갈라져 사진이 작아진다(실측 500px 에서 3열).
       레퍼런스(thisisapril.com)도 폰에서 2열이다. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-gap: 10px;
  }
}

/* 목록 사진을 세로로 세운다 — 2026-09-15 이하나 님(#ai_noflik_leads 16:11
   「현재 가로로만 긴 느낌입니다. 세로도 맞게 조정해줄 수 있을까요」).

   🚨 우커머스 블록이 `<img>` 에 `aspect-ratio:1/1` 을 인라인으로 박는다.
      원본이 683x1024(2:3)인데 정사각으로 잘려 옷의 아래가 사라진다.
      칸을 넓히자 그 잘림이 눈에 띄게 됐다.
   🔑 인라인 스타일이라 `!important` 없이는 못 이긴다.
   🔑 2:3 은 지어낸 값이 아니라 업로드된 사진의 실제 비율이다(683/1024 = 0.667).
   ⛔ 폰만 걸지 않는다. 데스크톱에서도 같은 잘림이라 같은 결함이다.
   되돌리기 = 이 블록 지우기. */
.wc-block-components-product-image img {
  /* 🔑 값 2/3 이 곧 원본 비율이다(이하나 님 16:13 「원본 맞춤 비율로」).
     이 페이지 사진 16장이 전부 683x1024 이고 683/1024 = 0.667 = 2/3 이다.
     ⛔ `aspect-ratio:auto` 로 두는 길은 실측으로 버렸다 — 부모 쪽 높이 제약과
        부딪쳐 사진이 세로로 늘어나고 cover 가 얼굴만 남겼다.
     ⏰ 다른 비율의 사진이 올라오면 이 값을 다시 봐야 한다. */
  aspect-ratio: 2 / 3 !important;
}

/* 목록의 군더더기를 폰에서 감춘다 — 2026-09-15 이하나 님(#ai_noflik_leads 16:18~16:19
   「이 노락색 부분을 삭제해줄수있나요」·「opsi -> UI는 지저분해 보여서 지워주시면 좋겠습니다」).
   노란 표시가 둘이었다. 결과 수 안내(「Menampilkan 1-16 dari 75 hasil」)와 정렬 칸,
   그리고 카드마다 붙은 PILIH OPSI 단추다.

   ✅ 단추를 감춰도 상품으로 가는 길이 남는다 — 사진과 제목이 각각 링크다(실측).
      2026-09-14 에 「폰에서 상품 페이지로 못 간다」 사고가 있었던 자리라 먼저 쟀다.
   🆕 2026-09-15 16:23 이하나 님 「네 데스트탑도 지워주세요」 — 폰 한정을 풀었다.
      ⛔ 그래서 정렬 기능이 사이트 전체에서 사라진다. 되살리려면 이 블록에서
         `catalog-sorting` 줄만 빼면 된다.
   ⛔ 상품 상세의 장바구니·바로구매 단추와는 다른 것이다. 그쪽은 그대로다.
   되돌리기 = 이 블록 지우기. */
.wp-block-woocommerce-product-results-count,
.wp-block-woocommerce-catalog-sorting,
.wc-block-components-product-button {
  display: none !important;
}

/* 히어로를 슬라이드로 — 2026-09-15 이하나 님(#ai_noflik_leads 16:30
   「2) 메인 홈 정렬구조 입니다」·창고 #2131530). 레퍼런스 = cottonink.co.id.

   바꾸는 것 셋 = 높이 · 글과 SHOP NOW · 점.
   🚨 높이가 핵심이다. 원본은 100vh 라 아래 무엇을 놓아도 통째로 접힌 아래로 숨는다.
      레퍼런스도 히어로가 화면을 꽉 채우지 않고 다음 칸이 살짝 보인다.
   🔑 색은 지어내지 않았다 — #fff=base · #111111=contrast · #463863=accent
      (brand-tokens.md 의 noflik). 첫 화면은 `global-styles` 를 빼므로
      `var(--wp--preset--color--*)` 가 없다. 그래서 값을 그대로 쓴다.
   되돌리기 = 이 블록과 functions.php 의 히어로 필터·JS 지우기. */
.noflik-hero { position: relative; }

.hero-media-wrapper { height: 74vh; min-height: 420px; max-height: 760px; }
@media (max-width: 767px) {
  .hero-media-wrapper { height: 68vh; min-height: 380px; }
}

.noflik-hero__copy {
  position: absolute; z-index: 2;
  left: 50%; bottom: 13%; transform: translateX(-50%);
  width: 100%; max-width: 620px; padding: 0 20px;
  text-align: center; color: #fff;
}
.noflik-hero__title {
  margin: 0 0 20px;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.25; letter-spacing: -0.02em; font-weight: 400;
  /* 사진이 밝은 장이 있어 글이 묻힌다. 옅게만 깐다 */
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}
.noflik-hero__cta {
  display: inline-block; padding: 14px 42px;
  background: #fff; color: #111111; text-decoration: none;
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
  transition: background .2s, color .2s;
}
.noflik-hero__cta:hover,
.noflik-hero__cta:focus-visible { background: #463863; color: #fff; }

.noflik-hero__dots {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px;
  display: flex; justify-content: center; gap: 10px;
}
.noflik-hero__dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid #fff; background: transparent; cursor: pointer;
}
.noflik-hero__dot.is-now { background: #fff; }

/* 분류 타일 — 2026-09-15 이하나 님(#ai_noflik_leads 16:30 「2) 메인 홈 정렬구조」·창고 #2131530).
   레퍼런스(cottonink.co.id)는 폰에서 2열이고 타일마다 흰 라벨이 사진 위에 얹힌다.

   🔑 폰 2열은 상품 목록과 같은 격자다(좌우·칸 사이 10px). 사이트 안에서 두 격자가
      다른 여백을 쓰면 같은 화면을 두 사람이 만든 것처럼 보인다.
   🔑 사진 비율 2:3 도 상품 목록과 같은 값이고, 원본 사진 683x1024 가 그 값이다.
   ⛔ 데스크톱은 3열이다. 여섯을 4열로 깔면 둘째 줄에 둘만 남는다.
   되돌리기 = 이 블록과 functions.php 의 타일 필터 지우기. */
.noflik-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; padding: 10px;
}
@media (min-width: 768px) {
  /* 🔑 1200px 는 이 사이트의 본문 폭이다(theme.json contentSize). 안 묶으면 1440 에서
     타일 하나가 470x705 로 커져 상품 목록과 크기가 딴판이 된다. */
  .noflik-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px; padding: 14px;
    max-width: 1228px; margin-inline: auto;
  }
}

.noflik-tile {
  position: relative; display: block;
  background: #f5f5f5;   /* surface — 사진이 오기 전 빈 칸 */
  text-decoration: none;
}
.noflik-tile img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 3; object-fit: cover;
}
.noflik-tile__label {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  max-width: calc(100% - 24px);
  background: #fff; color: #111111;   /* base · contrast */
  padding: 10px 16px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3;
  text-align: center;
  transition: background .2s, color .2s;
}
@media (min-width: 768px) { .noflik-tile__label { font-size: 13px; padding: 11px 20px; } }
.noflik-tile__label b { display: block; font-weight: inherit; white-space: nowrap; }
.noflik-tile:hover .noflik-tile__label,
.noflik-tile:focus-visible .noflik-tile__label { background: #463863; color: #fff; }

.noflik-tiles__all {
  grid-column: 1 / -1;
  display: block; padding: 16px; margin-top: 4px;
  border: 1px solid #111111;
  text-align: center; text-decoration: none; color: #111111;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em;
  transition: background .2s, color .2s;
}
.noflik-tiles__all:hover,
.noflik-tiles__all:focus-visible { background: #111111; color: #fff; }

/* 분류 랜딩 배너 — 2026-09-15 이하나 님(#ai_noflik_leads 16:31 「3) 카테고리 랜딩시 ui 입니다」
   ·창고 #2131531·첨부 IMG_6157). 레퍼런스는 글자 없는 사진 한 띠다.

   🔑 우리 사진은 683x1024 세로뿐이라 가로로 잘라 쓰면 몸통만 남는다. 다섯 장을 옆으로
      세워 한 띠로 만든다 — 레퍼런스의 「모델 여럿」 구도와 같아지고 자르는 양도 준다.
   🔑 칸을 꽉 채우는 것은 상품 목록이 이미 쓰는 방식 그대로다(clamp 원식을 직접 뺀다).
      ⛔`--wp--style--root--padding-left` 로 상쇄하면 0 으로 계산된다(2026-09-15 실측).
   ⛔ 폰에서는 셋만 보인다. 다섯을 393px 에 세우면 한 칸이 78px 라 옷이 안 보인다.
   되돌리기 = 이 블록과 functions.php 의 배너 덩이 지우기. */
.noflik-catbanner {
  display: flex; gap: 2px;
  /* 🚨 `!important` 와 `max-width:none` 이 둘 다 있어야 한다. 블록 테마의 constrained
     레이아웃이 자식에 `margin-left/right: auto !important` 와 본문 폭 상한을 건다.
     2026-09-15 첫 판이 이 둘을 빼먹어 띠가 393 이 아니라 333 으로 섰다(실측). */
  margin-inline: calc(-1 * clamp(30px, 5vw, 50px)) !important;
  max-width: none !important;
  margin-bottom: 20px;
  background: #f5f5f5;   /* surface */
  overflow: hidden;
}
.noflik-catbanner img {
  flex: 1 1 0; min-width: 0;
  height: 240px; width: 100%;
  object-fit: cover;
  /* 🚨 22% 로 두면 사진이 셋뿐인 분류에서 이마가 잘린다(2026-09-15 실측 hoodie 1440px —
     칸이 480x380 이라 세로로 339px 를 버린다. 다섯 장이면 52px 뿐이라 안 드러났다).
     10% 는 셋일 때 머리를 살리고 다섯일 때는 거의 차이가 없다. */
  object-position: center 10%;
}
@media (max-width: 767px) {
  .noflik-catbanner img { height: 200px; }
  .noflik-catbanner img:nth-child(n + 4) { display: none; }
}
@media (min-width: 1024px) {
  .noflik-catbanner img { height: 380px; }
}

/* 구독 팝업 — 2026-09-15. 색은 brand-tokens.md 의 noflik 값만 쓴다.
   accent #463863 · base #ffffff · surface #f5f5f5. 남의 브랜드 색을 안 가져왔다.
   레퍼런스(thisisapril.com)는 검정 패널인데 우리 것은 브랜드 보라다.
   폰에서는 사진을 위로 올려 세로로 쌓는다. 되돌리기 = 이 블록 지우기. */
.noflik-pop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 17, 17, .55);
}
.noflik-pop__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(760px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: #fff;
}
.noflik-pop__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 2 / 3;
}
.noflik-pop__body {
  position: relative;
  padding: 32px 28px;
  background: #463863;
  color: #fff;
}
.noflik-pop__x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.noflik-pop__t {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.25;
  color: #fff;
}
.noflik-pop__p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  opacity: .9;
}
.noflik-pop__in,
.noflik-pop__go {
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 16px; /* 🚨 16px 미만이면 아이폰이 화면을 확대한다 */
}
.noflik-pop__in {
  margin-bottom: 10px;
  background: #fff;
  color: #111;
}
.noflik-pop__go {
  background: #fff;
  color: #463863;
  text-align: center;   /* 🚨 없으면 입력칸과 구분이 안 된다(실측) */
  font-weight: 600;
  cursor: pointer;
}
.noflik-pop__msg {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-size: 14px;
}
.noflik-pop__no {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}
.noflik-pop__fine {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: .75;
}
@media (max-width: 640px) {
  .noflik-pop__card { grid-template-columns: 1fr; }
  /* 🚨 `height:auto` 를 같이 안 주면 격자가 사진을 늘려 화면을 다 먹는다(실측). */
  /* 🚨 폰에서는 사진을 낮게 눕힌다. 16/10 으로 두면 카드가 화면보다 높아져
     손님이 스크롤해야 등록 단추를 본다(실측 500x668 에서 712px). */
  /* 🔑 폰에서 사진을 얼마나 세로로 두느냐가 곧 「얼마나 잘리느냐」다.
     사진이 800x1200(2:3)이라 카드 폭에 통째로 넣으면 높이가 590px 이고,
     본문 400px 를 더하면 990px 라 아이폰 세로(852px)를 넘는다. 그래서 자른다.
     5/2 는 너무 얇았다(이하나 님 17:21 「첫번째 사진은 왜 짤릴까요」).
     4/3 이면 295px 라 본문과 합쳐 695px, 화면에 들어가면서 옷이 거의 다 보인다. */
  .noflik-pop__img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 42%; }
  /* 🔑 18% 로 두면 얼굴만 나오고 옷이 안 보인다(실측). 캠페인 사진은 옷이 주인공이다. */
  .noflik-pop__body { padding: 24px 20px; }
  .noflik-pop__t { font-size: 22px; }
}

/* 가격 표시 — 2026-09-15 이하나 님 「지금은 뭐라는지 모르겠습니다」.
   정가와 할인가가 같은 검정이라 어느 것이 파는 값인지 안 갈렸다.
   레퍼런스(thisisapril.com)처럼 정가를 흐리게 내리고 할인율을 앞에 세운다.
   되돌리기 = 이 블록 지우기. */
.noflik-disc {
  display: block;
  margin-bottom: 2px;
  color: #463863;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.wc-block-components-product-price del,
.woocommerce div.product p.price del,
.price del {
  color: #8a8a8a;
  font-weight: 400;
  opacity: 1;
  /* 🚨 선을 여기서 명시한다. 원본 테마 CSS 가 `text-decoration:none` 을 걸어
     브라우저 기본 취소선이 지워져 있었다(이하나 님 17:43 「가격에 밑줄을 그어줄순 없나요」). */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.wc-block-components-product-price ins,
.woocommerce div.product p.price ins,
.price ins {
  text-decoration: none;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   상품 상세 화면 — 2026-09-16 이하나 님 요청
   #ai_noflik_leads · ts 1789525105(썸네일 왼쪽) · 1789525139(설명을 장바구니 아래로)
   레퍼런스 = 그분이 주신 DUMA OFFICIAL 상품 화면.

   고치기 전 실측(폭 1400) — 썸네일이 주사진 아래 가로로 깔려 384px 를 먹고,
   설명은 맨 아래 전체폭 탭이었다. 그런데 같은 글이 장바구니 위 짧은설명에도
   있었다(둘 다 434자·글자까지 같음). 곧 한 화면에 설명이 두 번 나오고 있었다.
   ───────────────────────────────────────────────────────────── */

@media (min-width: 782px) {

  /* ① 썸네일을 주사진 왼쪽에 세로로 */
  /* 세로로 쌓은 갤러리 — 2026-09-16 이하나 님 「밑으로 스크롤해가며 볼 수 있게」(ts 1789534913).
     ⛔슬라이더를 안 쓴다. 블록을 통째로 우리가 그린다(functions.php).
     🔑썸네일 칸은 붙박이(sticky)다 — 사진이 열 장이면 세로로 아주 길어서
        안 붙이면 스크롤하는 동안 썸네일이 화면 위로 사라진다. */
  body.single-product .noflik-gal {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  body.single-product .noflik-gthumbs {
    order: 1;
    flex: 0 0 64px;
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  body.single-product .noflik-shots {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }

}

/* ② 설명을 장바구니 아래로. 오른칸이 기본 block 이라 flex 로 바꿔 차례를 준다.
   🚨🔑 이 묶음은 일부러 미디어쿼리 **밖**이다. 처음에 782px 안에 넣었더니
   폰에서만 설명이 장바구니 위에 그대로 남아 살 단추가 아래로 밀렸다
   (390px 실측 — 설명 1092·장바구니 1451). 썸네일 왼쪽 세우기는 좁은 화면에서
   폭을 먹어 데스크톱 전용이 맞지만, 차례는 어느 폭에서나 같아야 한다. */
body.single-product .wp-block-columns > .wp-block-column:last-child {
  display: flex;
  flex-direction: column;
}
body.single-product .wp-block-columns > .wp-block-column:last-child > .wp-block-post-title { order: 1; }
body.single-product .wp-block-columns > .wp-block-column:last-child > .wp-block-woocommerce-product-price { order: 2; }
body.single-product .wp-block-columns > .wp-block-column:last-child > .wp-block-add-to-cart-form,
body.single-product .wp-block-columns > .wp-block-column:last-child > .wp-block-woocommerce-add-to-cart-form { order: 3; }
body.single-product .wp-block-columns > .wp-block-column:last-child > .noflik-desc { order: 4; }
body.single-product .wp-block-columns > .wp-block-column:last-child > .wp-block-woocommerce-product-meta { order: 5; }

/* ③ 접이식 설명. ⛔자바스크립트를 안 쓴다 — `<details>` 가 브라우저 기본으로 접고 편다. */
.noflik-desc {
  margin: 22px 0 0;
  border-top: 1px solid #e3e3e3;
}
.noflik-desc__t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #463863;
}
.noflik-desc__t::-webkit-details-marker { display: none; }   /* 사파리 기본 삼각형 */
.noflik-desc__t::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.noflik-desc[open] .noflik-desc__t::after { content: "\2212"; }   /* 빼기 기호 */
.noflik-desc__b { padding-bottom: 16px; }
.noflik-desc__b p:last-child { margin-bottom: 0; }

/* 첫 화면 — 2026-09-16 이하나 님 요청(ts 1789532011)

   ① 히어로 글을 눈에서 감춘다. ⛔지우지 않는다 — 그 줄이 첫 화면의 유일한 h1 이라
      빼면 h1 이 0개가 된다. 화면에서만 빼고 검색엔진과 화면낭독기에는 남긴다.
      🚨`display:none` 이면 낭독기에도 안 읽혀 남기는 뜻이 없어진다. */
.noflik-hero__title.is-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 글이 빠지면서 단추가 아래로 처진다. 있던 자리로 올린다. */
.noflik-hero__copy:has(.noflik-hero__title.is-hidden) { bottom: 18%; }

/* ② 분류 타일 라벨을 굵게. 앞은 `font-weight: inherit` 라 이름이 안 굵었다. */
.noflik-tile__label { font-weight: 700; }
.noflik-tile__label b { font-weight: 700; }

/* 컬러칩 — 2026-09-16 이하나 님 「상품페이지에 이전처럼 컬러칩을」(ts 1789534158).
   🔴 동그라미 안은 색이 아니라 **그 상품 사진**이다. Sand·Charcoal 의 색 코드가
      어디에도 없어서 지어 넣으면 화면 색과 실제 옷 색이 달라진다. */
.noflik-chips { margin: 0 0 18px; }
.noflik-chips__t {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #555;
}
.noflik-chips__t b { color: #111; font-weight: 600; }
.noflik-chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.noflik-chip {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ddd;
  transition: border-color .15s ease;
}
.noflik-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🔑 사진이 전신컷이라 그냥 넣으면 동그라미에 얼굴만 든다. 옷이 있는 위쪽으로 당긴다. */
  object-position: 50% 22%;
  display: block;
}
.noflik-chip:hover { border-color: #999; }
.noflik-chip.is-now { border-color: #463863; border-width: 2px; }

/* 색칠 동그라미. 🔑값은 원본 노플릭에서 캔 것이다(`swatches.php`).
   ⛔흰색 계열이 흰 바탕에서 안 보여 테두리를 안쪽에 하나 더 깐다. */
.noflik-chip__c {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* 세로로 쌓은 갤러리 — 폭에 상관없이 걸리는 부분 */
.noflik-shot { display: block; margin: 0 0 8px; }
.noflik-shot img { width: 100%; height: auto; display: block; }
.noflik-gthumb { display: block; }
.noflik-gthumb img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .55;
  transition: opacity .15s ease;
}
.noflik-gthumb:hover img,
.noflik-gthumb:focus-visible img { opacity: 1; }
/* 폰에서는 썸네일 칸을 안 세운다 — 폭을 먹으면 사진이 작아진다. */
@media (max-width: 781px) {
  .noflik-gthumbs { display: none; }
}
/* 세일 배지. 🚨왼쪽 위에 그냥 두면 첫 썸네일을 덮는다(2026-09-16 실측).
   썸네일 칸(64) 과 사이(12) 만큼 밀어 큰 사진 모서리에 붙인다.
   ⛔폰에서는 썸네일 칸이 없으므로 도로 왼쪽 끝이다.
   🚨🔑 `!important` 가 있어야 한다. 이것 없이 넣은 첫 판이 **조용히 졌다**
      — 우커머스의 `.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale`
      가 `left:-1rem` 을 거는데 점수가 (0,3,1) 이고 우리 것이 (0,2,0) 이었다.
      규칙은 파일에 있는데 값만 우커머스 것이 남아 배지가 첫 썸네일을 28px 덮고 있었다
      (2026-09-16 실측 · 배지 x 40~90 · 썸네일 x 62~126).
   ⛔선택자를 늘리는 쪽으로 이기려 하지 않는다 — 다음 판에 또 진다(같은 날 썸네일 폭에서 한 번 겪었다). */
.noflik-gal > .onsale { position: absolute; top: 0; left: 0 !important; z-index: 2; }
@media (min-width: 782px) {
  .noflik-gal > .onsale { left: 76px !important; }
}

/* 폰 갤러리 좌우 화살표 — 2026-09-16 이하나 님 「넘기는 아이콘으로」(ts 1789535612).
   🚨우커머스가 `flex-direction-nav` 에 스타일을 한 줄도 안 준다. 안 주면 사진 아래에
      글자만 덩그러니 남는다. 자리·색은 원본 미러 `.noflik-gridy-arrow` 를 그대로 옮겼다
      (배경 투명 · 색 `--color-button-background` = #463863 · 세로 가운데 absolute).
   🔑`z-index` 는 슬라이더(`flex-viewport`) 위, 확대 단추(`__trigger` 99) 아래다. */
.woocommerce div.product .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  color: #463863;
  text-decoration: none;
}
.woocommerce div.product .flex-direction-nav .flex-prev { left: 2px; }
.woocommerce div.product .flex-direction-nav .flex-next { right: 2px; }
.woocommerce div.product .flex-direction-nav .flex-disabled { opacity: .25; }

/* ─────────────────────────────────────────────────────────────
 * 안내 쪽(Pengiriman·Pengembalian 등)의 표와 목록.
 *
 * 🚨🔑 2026-09-18 이하나 대리 「카테고리 Pengiriman 부분 너무 지저분합니다.
 *      더 직관적이고 깔끔하게 수정해주세요」(#ai_noflik_leads 08:39).
 * 🔑 뿌리는 글이 아니라 표였다 — 이 테마에 표 규칙이 한 줄도 없어서
 *    배송비 표가 브라우저 기본값으로 떨어지고 있었다(실측 style.css 에 `table` 0건).
 *    폰에서 네 칸이 한 줄에 들어가는데 첫 칸에 지역 이름이 일곱 개까지 들어간다.
 * 🔑 폰에서는 머리줄을 감추고 칸마다 `data-label` 을 앞에 세워 카드로 쌓는다.
 *    우리 share 화면 규범과 같은 꼴이다(7열 이상 `data-label` 규칙).
 * ⛔ 색과 글꼴은 안 건드린다. 테두리와 여백만 준다.
 * 되돌리기 = 이 블록 지우기.
 * ───────────────────────────────────────────────────────────── */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0 1.6rem;
    font-size: 0.95rem;
}
.entry-content th,
.entry-content td {
    padding: 0.7rem 0.6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e5e5e5;
}
.entry-content thead th {
    border-bottom: 2px solid #111;
    font-weight: 600;
    white-space: nowrap;
}
.entry-content ul,
.entry-content ol {
    /* 🚨 원본 테마가 list-style:none 으로 점과 번호를 끈다(2026-09-18 실측).
     *    안내 쪽에서는 되살린다. ⛔ol 을 빠뜨리면 절차가 번호 없이 문단처럼 보인다. */
    padding-left: 1.3rem;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li {
    margin: 0.45rem 0;
    line-height: 1.6;
}

@media (max-width: 767px) {
    /* 머리줄을 화면에서만 감춘다 — 읽기 도구에는 남는다 */
    .entry-content thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .entry-content tbody tr {
        display: block;
        padding: 0.9rem 0;
        border-bottom: 1px solid #e5e5e5;
    }
    .entry-content tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.2rem 0;
        border: 0;
    }
    .entry-content tbody td::before {
        content: attr(data-label);
        color: #767676;
        flex: 0 0 auto;
    }
    /* 첫 칸은 카드 제목이라 이름표를 안 붙이고 한 줄을 다 쓴다 */
    .entry-content tbody td:first-child {
        display: block;
        font-weight: 600;
        margin-bottom: 0.35rem;
    }
    .entry-content tbody td:first-child::before {
        content: none;
    }
}

/* 헤더 검색칸 — 2026-09-21 이하나 대리 「Search 부분도 누르면 검색창이 안떠집니다」.
   원본 쇼피파이는 JS 서랍(predictive-search)이었고 그 JS 가 우리에게 없다.
   단추가 `#drawer-search` 를 가리키므로 `:target` 하나로 연다. ⛔JS 를 안 쓴다. */
/* 🚨 scroll-margin-top 이 없으면 브라우저가 이 칸을 화면 맨 위로 끌어올려 헤더가 밀려 나간다
   (2026-09-21 실측 = 누르니 로고와 메뉴가 통째로 사라졌다). 값이 칸 자리보다 크면 맨 위에 멈춘다. */
.nf-search { display: none; scroll-margin-top: 200px; }
.nf-search:target { display: block; }
.nf-search__form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
/* 🚨 색을 못박는다 — 원본 테마가 헤더 안 글자를 흰색으로 칠해 놓아서
   물려받으면 흰 바탕에 흰 글자가 된다(2026-09-21 실측 = 단추와 닫기가 안 보였다). */
.nf-search__input {
  flex: 1;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #111;
  font-size: 16px; /* 🚨 16px 미만이면 아이폰이 칸을 누를 때 화면을 확대한다 */
}
.nf-search__input::placeholder { color: #8a8a8a; opacity: 1; }
.nf-search__go {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: #111;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.nf-search__close {
  padding: 0 6px;
  color: #111;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
}