/* 좁은 화면 대응 — 디자인 HTML 위에 얹는다.

   ★ 디자인 마크업은 인라인 스타일로 되어 있어 고칠 수가 없다(고쳐도 다시 만들 때 날아간다).
     그래서 바깥에서 덮는다. 인라인 스타일을 이기려면 !important 가 필요하다 — 여기만 예외다.
   ★ 노리는 것은 하나다: **가로 스크롤이 생기지 않게.**
     폰에서 화면이 옆으로 밀리면 글도 단추도 반쯤 잘려 아무것도 못 한다. */

/* 어떤 칸도 화면보다 넓어지지 않는다 */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* 그리드 칸 안의 긴 글자가 칸을 밀어내는 것을 막는다.
   minmax(0,1fr) 을 안 주면 내용이 트랙을 넘겨 가로 스크롤이 생긴다. */
[style*="grid-template-columns"] > * { min-width: 0; }
[style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0; }

@media (max-width: 900px) {
  /* 두 칸 이상으로 박아 둔 격자는 한 칸으로 */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  /* 본문 옆 여백 — 24px 은 폰에서 너무 넓다 */
  [style*="max-width:1120px"], [style*="max-width: 1120px"] {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  /* 큰 글자는 화면 폭에 맞춰 줄인다. 디자인이 clamp 를 쓴 곳은 그대로 둔다. */
  h1[style*="font-size:40px"], h1[style*="font-size: 40px"] { font-size: 28px !important; }
  h2[style*="font-size:34px"], h2[style*="font-size: 34px"] { font-size: 24px !important; }

  /* 가로로 늘어놓은 줄은 접히게 */
  [style*="display:flex"]:not([style*="flex-wrap"]) { flex-wrap: wrap; }

  /* 고정 폭으로 박힌 칸 — 화면을 넘지 않게 */
  [style*="width:520px"], [style*="width:480px"], [style*="width:420px"],
  [style*="width:400px"], [style*="width:360px"], [style*="width:320px"] {
    width: 100% !important; max-width: 100% !important;
  }

  /* 하단 고정 바는 폭을 꽉 쓴다 */
  [style*="position:fixed"][style*="bottom"] { left: 0 !important; right: 0 !important; }
}

@media (max-width: 520px) {
  /* 세 칸 격자도 한 칸으로. 두 칸이면 글자가 한 줄에 두 자씩 떨어진다. */
  [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* 단추는 손가락으로 누를 수 있게 */
  button, a[style*="border-radius:9999px"] { min-height: 44px; }
}

/* ==========================================================================
   모바일 실측 후 고침 (2026-09-22, 390x844 로 직접 재 보고)
   ========================================================================== */

/* ── ① 하단 고정 바가 내용을 가리던 것 ────────────────────
   홈은 카테고리 카드 윗부분을, 상품은 '사이즈' 고르는 줄을 덮고 있었다.
   첫 화면에서 옵션을 못 고르면 주문이 거기서 끊긴다. 바 높이만큼 발치를 비운다. */
@media (max-width: 900px) {
  body { padding-bottom: 104px !important; }
}

/* ── ② 손가락으로 누를 수 있게 ──────────────────────────
   메뉴·길잡이줄 링크의 실제 높이가 14px 이었다. 손가락 끝은 그보다 훨씬 굵다.
   ★ 보이는 크기는 그대로 두고 **누를 수 있는 넓이만** 키운다 —
     글자를 키우면 디자인이 무너지고, 안 키우면 못 누른다. 가운데를 잡는 방법이 이것이다. */
@media (max-width: 900px) {
  nav a, header a, [style*="position:sticky"] a,
  a[style*="font-size:14px"], a[style*="font-size:13px"], a[style*="font-size:12px"] {
    position: relative;
  }
  nav a::after, header a::after, [style*="position:sticky"] a::after,
  a[style*="font-size:14px"]::after, a[style*="font-size:13px"]::after,
  a[style*="font-size:12px"]::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 44px; min-width: 44px;
  }
  /* 작은 단추들 — ✕ · 수량 − + · 체크박스 */
  button { min-height: 40px; }
  button[style*="width:34px"], button[style*="width:36px"], button[style*="width:40px"] {
    min-width: 44px !important; min-height: 44px !important;
  }
  input[type="checkbox"] { width: 22px !important; height: 22px !important; }
}

/* ── ③ 머리줄이 화면 밖으로 넘치던 것 ────────────────────
   공동구매 화면에서 '마이페이지' 가 오른쪽으로 19px 잘려 있었다.
   메뉴를 줄바꿈하지 않고 **옆으로 밀어 보게** 한다 — 줄을 바꾸면 머리줄이 두 배로 두꺼워져
   첫 화면에서 보여 줄 내용이 그만큼 줄어든다. */
@media (max-width: 900px) {
  header nav, [style*="position:sticky"] nav {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-wrap: nowrap !important;
  }
  header nav::-webkit-scrollbar, [style*="position:sticky"] nav::-webkit-scrollbar { display: none; }
  header nav > *, [style*="position:sticky"] nav > * { flex: 0 0 auto; white-space: nowrap; }
}

/* ── ④ 히어로 인디케이터 ────────────────────────────────
   5x40px 이라 눌러도 안 눌렸다. 보이는 점 크기는 그대로 두고 누를 자리만 넓힌다. */
@media (max-width: 900px) {
  [style*="border-radius:9999px"][style*="width:5px"],
  [style*="border-radius:9999px"][style*="width:6px"] { position: relative; }
  [style*="border-radius:9999px"][style*="width:5px"]::after,
  [style*="border-radius:9999px"][style*="width:6px"]::after {
    content: ''; position: absolute; inset: -18px -10px;
  }
}

/* ==========================================================================
   갈래 메뉴 — 굵고 크게 (사장님, 2026-09-22: "아정당처럼 메뉴 좀 굵은 느낌으로")
   ========================================================================== */

/* ★ 디자인이 글자 크기·굵기를 인라인으로 박아 둬서(14px / 400) 바깥에서 이기려면
     !important 가 필요하다. 이 파일이 그걸 쓰기로 정해 둔 자리다.
   ★ 갈래로 가는 링크만 골라 굵힌다 — 상품 카드(/product.html)나 히어로 단추는
     같은 모양이 아니라 그대로 둔다. */
/* 하위 메뉴를 가진 링크도 같은 규칙을 쓴다. 패널 안의 링크는 제외한다. */
[style*="height:52px"] > a[href^="/products.html?cat="],
[style*="height:52px"] > .wf-sub > a[href^="/products.html?cat="],
[style*="height:52px"] > a[href="/size-guide.html"],
[style*="height:52px"] > a[href="/exchange.html"],
[style*="height:52px"] > a[href="/groupbuy.html"] {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
}

/* 지금 보고 있는 갈래는 파랑. 굵기만으로는 어디 있는지 안 보인다. */
[style*="height:52px"] > a[style*="inset 0 -2px 0 0 #0066cc"],
[style*="height:52px"] > .wf-sub > a[style*="inset 0 -2px 0 0 #0066cc"] { color: #0066cc !important; }

@media (max-width: 760px) {
  [style*="height:52px"] > a[href^="/products.html?cat="],
  [style*="height:52px"] > .wf-sub > a[href^="/products.html?cat="],
  [style*="height:52px"] > a[href="/size-guide.html"],
  [style*="height:52px"] > a[href="/exchange.html"],
  [style*="height:52px"] > a[href="/groupbuy.html"] { font-size: 15px !important; }
}

/* ── 아크릴 액자 하위 메뉴 (탁상용 · 벽걸이용) ──────────────
   js/header-dc.js 가 만든다. 여기서는 생김새만 맡는다. */
.wf-sub { position: relative; }
.wf-sub-panel {
  position: absolute; left: 0; top: 100%; z-index: 60;
  min-width: 208px; padding: 8px;
  display: grid; gap: 2px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.wf-sub:hover .wf-sub-panel,
.wf-sub:focus-within .wf-sub-panel,
.wf-sub-panel:hover {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
.wf-sub-panel a {
  display: block; padding: 11px 12px; border-radius: 9px;
  font-size: 15px !important; font-weight: 500 !important; letter-spacing: -0.24px;
  color: #1d1d1f; text-decoration: none; white-space: nowrap;
}
.wf-sub-panel a:hover { background: #f7fbff; color: #0066cc; }
.wf-sub-panel a small { display: block; margin-top: 2px; font-size: 12px; color: #7a7a7a; }

/* 폰에서는 뜨는 메뉴가 손가락에 안 맞는다 — 갈래 줄에 그냥 펼쳐 둔다 */
@media (max-width: 760px) {
  .wf-sub-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0; border: 0; background: transparent;
    display: none;
  }
}

/* 꽉 찬 상품 메뉴 + 우측 전체 메뉴. header-dc.js가 붙인 범위에만 적용한다. */
.wf-store-masthead {
  width: calc(100% - 44px); max-width: 1280px !important;
  box-sizing: border-box; padding-left: 0 !important; padding-right: 0 !important;
}
.wf-nav-shell {
  position: relative; display: flex; align-items: center; gap: 24px;
  width: calc(100% - 44px); max-width: 1280px; margin: 0 auto;
  box-sizing: border-box;
}
.wf-category-nav {
  flex: 1 1 auto; min-width: 0; max-width: none !important; margin: 0 !important;
  padding: 0 !important; height: 64px !important; gap: 18px !important;
  justify-content: space-between; flex-wrap: nowrap !important;
  overflow: visible !important;
}
.wf-category-nav > a, .wf-category-nav > .wf-sub { flex: 0 0 auto; }
.wf-category-nav > a, .wf-category-nav > .wf-sub > a {
  display: flex; align-items: center; height: 64px !important;
  color: #333; font-size: 17px; font-weight: 700; letter-spacing: -.4px;
  white-space: nowrap; text-decoration: none;
}
.wf-category-nav a:hover { color: #0066cc !important; }
.wf-menu-toggle {
  border-radius: 10px;
  flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 0; padding: 10px; background: transparent; color: #6b7684; cursor: pointer;
}
.wf-menu-toggle span { width: 24px; height: 2px; flex: 0 0 2px; background: currentColor; }
.wf-menu-toggle:hover, .wf-menu-toggle[aria-expanded="true"] { color: #0066cc; background: #f0f5ff; }
.wf-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
.wf-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wf-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-8px) rotate(-45deg); }
.wf-store-menu {
  border-radius: 18px;
  position: absolute; top: calc(100% + 1px); right: 0; z-index: 70;
  width: 760px; max-width: 100%; max-height: var(--wf-menu-room, 70vh);
  overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 28px 32px 24px; border: 1px solid #e5e8ed; background: #fff;
  box-shadow: 0 16px 48px rgb(25 38 57 / 14%); text-align: left;
}
.wf-store-menu[hidden] { display: none !important; }
.wf-store-menu *, .wf-store-menu *::before, .wf-store-menu *::after { box-sizing: border-box; }
.wf-nav-shell .wf-store-menu > * { min-width: 0; white-space: normal; }
.wf-store-menu-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.wf-store-menu-heading h2 { margin: 0; color: #191f28; font-size: 21px; font-weight: 750; letter-spacing: -.6px; }
.wf-menu-close {
  border-radius: 50%;
  width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center;
  padding: 8px; border: 0; background: transparent; color: #6b7684; cursor: pointer;
}
.wf-menu-close:hover { background: #f2f4f6; color: #191f28; }
.wf-menu-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.wf-menu-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.wf-menu-group h3 { margin: 0 0 12px; color: #8b95a1; font-size: 13px; font-weight: 600; }
.wf-menu-group ul { margin: 0; padding: 0; list-style: none; }
.wf-menu-group a {
  display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 5px 0;
  color: #333d4b; font-size: 15px; font-weight: 550; line-height: 1.5; text-decoration: none;
}
.wf-menu-group a:hover { color: #0066cc; }
.wf-menu-group a > span[aria-hidden] { color: #8b95a1; }
.wf-menu-business {
  border-radius: 12px;
  display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 20px;
  background: #f0f5ff; color: #0066cc; text-decoration: none;
}
.wf-menu-business:hover { background: #e6efff; text-decoration: none; }
.wf-menu-business > div { min-width: 0; }
.wf-menu-business > svg { width: 32px; height: 32px; flex: 0 0 32px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.wf-menu-business strong { font-size: 16px; font-weight: 700; }
.wf-menu-business p { margin: 6px 0 0; color: #64748b; font-size: 13px; line-height: 1.5; }
.wf-business-arrow { margin-left: auto; font-size: 24px; }
.wf-menu-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wf-menu-toggle:focus-visible, .wf-store-menu a:focus-visible, .wf-menu-close:focus-visible {
  outline: 2px solid #0066cc; outline-offset: 3px;
}
.wf-nav-shell.is-menu-open .wf-sub-panel { visibility: hidden !important; opacity: 0 !important; }
@media (max-width: 1100px) {
  .wf-nav-shell { gap: 14px; }
  .wf-category-nav { justify-content: flex-start; overflow-x: auto !important; overflow-y: hidden !important; gap: 24px !important; }
  .wf-category-nav::-webkit-scrollbar { display: none; }
  .wf-category-nav .wf-sub-panel { display: none; }
}
@media (max-width: 760px) {
  .wf-store-masthead, .wf-nav-shell { width: calc(100% - 32px); }
  .wf-nav-shell { gap: 8px; }
  .wf-category-nav { height: 56px !important; gap: 22px !important; }
  .wf-category-nav > a, .wf-category-nav > .wf-sub > a { height: 56px !important; font-size: 15px; }
  .wf-store-menu { padding: 20px; }
  .wf-store-menu-heading { margin-bottom: 18px; }
  .wf-menu-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .wf-menu-group:last-child { grid-column: 1 / -1; }
  .wf-menu-group:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .wf-menu-group a { min-height: 44px; font-size: 14px; }
  .wf-menu-business { gap: 12px; padding: 16px; margin-top: 20px; }
  .wf-menu-business > svg { display: none; }
  .wf-menu-business strong { font-size: 15px; }
  .wf-menu-business p { font-size: 12px; }
}

/* ==========================================================================
   마이페이지 — 갈래 메뉴를 왼쪽에 (사장님, 2026-09-22)
   가로줄은 스크롤을 내리면 화면 밖으로 나가 버려서, 다른 갈래로 가려면
   늘 맨 위까지 올라와야 했다. 왼쪽에 세워 두면 늘 같은 자리에 있다.
   ========================================================================== */
.wf-my {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 22px 0;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.wf-my-main { min-width: 0; }
/* 본문 칸들은 이미 제 여백을 갖고 있다 — 두 번 주면 오른쪽으로 밀린다 */
.wf-my-main > section { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

.wf-my-nav { position: sticky; top: 84px; }
.wf-my-nav > div {
  display: grid; gap: 2px;
  padding: 8px; border: 1px solid #e0e0e0; border-radius: 16px; background: #fff;
}
.wf-my-nav button {
  cursor: pointer; width: 100%; text-align: left;
  min-height: 44px; padding: 0 13px;
  display: flex; align-items: center;
  border: 0; border-radius: 10px; background: transparent;
  font-size: 15px; font-weight: 500; letter-spacing: -0.24px; color: #333;
  white-space: nowrap;
}
.wf-my-nav button:hover { background: #f7fbff; color: #0066cc; }
.wf-my-nav button.is-active { background: #eaf1fd; color: #0066cc; font-weight: 700; }
/* 아직 안 만든 갈래 — 흐리게 두되 숨기지는 않는다. 있을 예정이라는 것도 알려야 한다. */
.wf-my-nav button.is-soon { color: #a1a1a6; }

@media (max-width: 860px) {
  /* 폰에서는 왼쪽에 세울 자리가 없다. 다시 가로로 눕히고 옆으로 넘겨 보게 한다. */
  .wf-my { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 16px 0; }
  .wf-my-nav { position: static; }
  .wf-my-nav > div {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 0; border: 0; border-radius: 0; background: transparent;
  }
  .wf-my-nav > div::-webkit-scrollbar { display: none; }
  .wf-my-nav button {
    flex: 0 0 auto; width: auto; min-height: 36px; padding: 0 14px;
    border: 1px solid #e0e0e0; border-radius: 9999px; font-size: 14px;
  }
  .wf-my-nav button.is-active { border-color: #cfe0f7; }
}
/* Homepage finder and honest notices for not-yet-connected destinations. */
.wf-finder-progress {display:flex;gap:7px;margin-top:24px}
.wf-finder-progress span {width:24px;height:5px;background:#dbe6f4}
.wf-finder-progress .is-on {background:#0064d9}
.wf-finder-step {font-size:13px;color:#667385;margin:0 0 10px}
.wf-finder-card h3 {font-size:21px;line-height:1.4;margin:0 0 20px;color:#191f28}
.wf-finder-options {display:grid;gap:10px}
.wf-finder-options button {position:relative;text-align:left;padding:15px 40px 15px 18px;min-height:72px;border:1px solid #e2e6ec;border-radius:12px;background:#fff;cursor:pointer;font:inherit;color:#191f28}
.wf-finder-options button:hover {border-color:#0064d9;background:#f5f9ff}
.wf-finder-options strong,.wf-finder-options small {display:block}
.wf-finder-options strong {font-size:16px}
.wf-finder-options small {font-size:13px;line-height:1.5;color:#657184;margin-top:4px}
.wf-finder-options button>span {position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#0064d9;font-size:25px}
.wf-finder-back {display:block;min-height:44px;padding:10px 0;background:transparent;border:0;color:#536174;font:inherit;cursor:pointer;margin-top:14px}
.wf-finder-price {font-size:25px;font-weight:700;color:#0064d9;margin:10px 0}
.wf-finder-note {font-size:14px;line-height:1.6;color:#657184;margin:8px 0 18px}
.wf-finder-result {display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:9999px;background:#0064d9;color:#fff;text-decoration:none;box-sizing:border-box}
.wf-home-dialog {width:min(440px,calc(100% - 32px));box-sizing:border-box;padding:28px;margin:auto;background:#fff;color:#191f28;border:1px solid #dce2e9;border-radius:18px;max-height:85dvh;overflow:auto}
.wf-home-dialog::backdrop {background:rgba(0,0,0,.35)}
.wf-home-dialog h2 {font-size:20px;margin:0 0 16px}
.wf-home-dialog p {font-size:15px;line-height:1.7;color:#536174}
.wf-home-dialog-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.wf-home-dialog-actions a,.wf-home-dialog-actions button {display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:10px 16px;background:#0064d9;border:0;border-radius:9999px;color:#fff;text-decoration:none;font:inherit;cursor:pointer}
.wf-home-dialog-actions button {background:#eef1f5;color:#344154}
.wf-finder-card :is(a,button):focus-visible,.wf-home-dialog :is(a,button):focus-visible {outline:2px solid #0064d9;outline-offset:3px}

/* Inquiry reply states are plain text, not colored badges. Scope this to the
   first status span in each inquiry row, leaving filters and categories alone. */
#qna > div[style*="border-top"] > div > button > span:first-child {
  color: #000 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  font-weight: 400 !important;
}