@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  --ink: #16181D;
  --sub: #4A4E55;
  --line: #E2E5E9;
  --line-dark: #C5CAD1;
  --soft: #F4F6F8;
  --tile: #F0F2F5;
  /* 사이트 주색은 분홍 (2026-10-10 확정. 그 전에 파랑, 보라와 함께 비교했다) */
  --brand: #EE4F8B;
  --brand-deep: #D2386F;
  --brand-light: #FFBFD6;
  --brand-tint: #FFEDF3;
  /* 주색을 따라가는 나머지 색: 배너 돌기 무늬, 배너의 큰 글자, 팩과 단품 표시 바탕 */
  --brand-stud: #FFD8E4;
  --brand-stud-shade: #F6B6CA;
  --brand-accent: #FFE6EE;
  --tint-stud: #FFF5F8;
  --tint-stud-shade: #FADCE6;
  --unit-bg: #FCE4EC;
  /* 주색 배너의 바탕과 글자. 분홍은 넓은 면에 그대로 깔면 너무 진해서, 연한 분홍 바탕에 짙은 글자로 한다 */
  --banner-bg: #FFCBDB;
  --banner-fg: var(--ink);
  --red: #D8382C;
  --sticker: #FF7A9C;
  --wrap: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: #fff;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

.wrap { max-width: calc(var(--wrap) + 40px); margin: 0 auto; padding: 0 20px; }
.page { padding: 36px 0 96px; }
.num { font-variant-numeric: tabular-nums; }

/* ── 헤더 ─────────────────────────────── */
/* 맨 위 띠 공지: 색 라벨, 세로선, 문구 */
.benefit { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 40px; padding: 8px 16px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1.4; text-align: center; }
.benefit b { color: var(--brand-light); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; white-space: nowrap; }
.benefit i { flex: none; width: 1px; height: 12px; background: #5B616B; }
.benefit span { font-weight: 600; }
.sns-links { display: flex; align-items: center; gap: 16px; }
.sns-links img { width: 20px; height: 20px; }
.util { border-bottom: 1px solid var(--line); font-size: 13px; }
.util .wrap { display: flex; justify-content: space-between; height: 36px; align-items: center; }
.util-links { display: flex; align-items: center; gap: 18px; font-weight: 500; }
.util-btn { border: 0; background: none; padding: 0; font: inherit; }

/* 로고가 가운데, 상품 검색은 왼쪽 끝, 방송 상태와 장바구니는 오른쪽 끝 */
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "search logo act"; align-items: center; gap: 24px; height: 116px; }
/* 로고는 이미지 한 장. 높이만 정하고 너비는 이미지 비율을 따른다 */
.logo { grid-area: logo; display: block; height: 64px; }
.logo img { display: block; height: 100%; width: auto; }
/* 로고 이미지가 들어갈 자리. 이미지를 올리기 전까지 크기를 적어 보여 준다 */
.logo-slot { display: flex; align-items: center; justify-content: center; height: 100%; aspect-ratio: 230 / 64; background: #C9CED6; }
.logo-slot .size-tag { padding: 0; background: none; font-size: 12px; }
/* 로고 줄과 메뉴는 스크롤해도 화면 위에 붙어 따라온다. 붙은 뒤(.is-stuck, static/js/header.js)에는 로고 줄이 낮아진다.
   낮아진 만큼 아래 여백(--shrink)을 줘서 본문이 밀려 올라가지 않게 한다. */
/* overflow-anchor: 줄 높이가 바뀔 때 브라우저가 이 헤더를 기준으로 스크롤 위치를 다시 맞추지 않게 한다 (헤더 떨림 방지) */
#stick-mark { height: 1px; margin-bottom: -1px; overflow-anchor: none; }
.stick { --shrink: 44px; position: sticky; top: 0; z-index: 35; background: #fff; overflow-anchor: none; }
html { scroll-padding-top: 150px; }
@media (min-width: 641px) {
  .stick.is-stuck { margin-bottom: var(--shrink); }
  .stick.is-stuck .head { height: 72px; }
  .stick.is-stuck .logo { height: 44px; }
  .stick.is-stuck .logo-slot .size-tag { font-size: 10px; }
  .stick.is-stuck .search-big { height: 54px; }
  .stick.is-stuck .search-big label { top: 7px; font-size: 11px; }
  .stick.is-stuck .search-big input { padding-top: 18px; font-size: 17px; }
}
/* 검색: 왼쪽 끝 돋보기. 누르면 로고 줄을 덮는 큰 검색창이 뜬다 */
.head-zone { position: relative; }
/* 왼쪽 칸: 돋보기 */
.head-left { grid-area: search; justify-self: start; display: flex; align-items: center; gap: 10px; }
.search-open { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; }
.search-layer { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; background: #fff; }
.search-layer[hidden] { display: none; }
.search-layer .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.search-big { position: relative; flex: 1; min-width: 0; max-width: 880px; height: 64px; border: 2px solid var(--ink); border-radius: 2px; background: #fff; }
.search-big label { position: absolute; left: 18px; top: 9px; font-size: 12px; font-weight: 700; line-height: 1; }
.search-big input { width: 100%; height: 100%; padding: 22px 64px 4px 18px; border: 0; outline: 0; background: transparent; font-size: 19px; font-weight: 600; }
.search-big input::-webkit-search-cancel-button { display: none; }
.search-big button { position: absolute; right: 0; top: 0; width: 60px; height: 100%; display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; }
.search-close { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; padding: 0; }
.head-act { grid-area: act; justify-self: end; display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 14px; }
.onair { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 1px solid var(--ink); font-weight: 700; font-size: 13px; white-space: nowrap; }
.onair i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-dark); }
.onair.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.onair.is-on i { background: #fff; }
/* 장바구니: 아이콘 오른쪽 위에 담긴 상품 수 배지 */
.cart-link { position: relative; display: inline-flex; padding: 4px 9px 0 0; }
.cart-link svg { display: block; width: 21px; height: 21px; }
.cart-link b { position: absolute; right: 0; top: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 10px; line-height: 16px; font-weight: 800; text-align: center; }

.gnb { border-top: 1px solid var(--line); border-bottom: 1px solid var(--ink); }
/* 메뉴는 로고 아래 가운데에 한 줄. 좁아서 넘칠 때는 왼쪽부터 보이며 옆으로 밀린다 */
.gnb .wrap { position: relative; display: flex; gap: 30px; }
.gnb ul { position: relative; z-index: 1; display: flex; gap: 30px; }
.gnb ul:first-child { margin-left: auto; }
.gnb .gnb-sub { position: relative; margin-right: auto; padding-left: 30px; }
.gnb .gnb-sub::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--line-dark); }
.gnb a { position: relative; display: block; height: 50px; line-height: 50px; font-size: 16px; font-weight: 700; white-space: nowrap; }
/* 지금 보고 있는 탭: 글자 가운데 아래의 작은 점 (사이트 주색).
   스크립트가 꺼져 있을 때만 이 점이 보이고, 보통은 아래 .gnb-bar 가 대신한다 */
.gnb a.is-on::after { content: ''; position: absolute; left: calc(50% - 2.5px); top: calc(50% + 13px); width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.js .gnb a.is-on::after { content: none; }
/* 탭 표시 점 (static/js/header.js 가 메뉴 줄에 하나 만들고 위치를 정한다).
   탭을 옮기면 이전 탭 자리에서 새 탭 자리로 젤리처럼 늘어났다 붙으며 옮겨 간다 */
.gnb-bar { position: absolute; left: 0; top: calc(50% + 13px); width: 5px; height: 5px; border-radius: 99px; background: var(--brand); pointer-events: none; }
.gnb .gnb-sub a { font-weight: 500; font-size: 15px; }

/* ── 메인 상단 ────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; margin-top: 24px; }
.slider { position: relative; height: 384px; overflow: hidden; background: var(--soft); }
.slides { display: flex; height: 100%; transition: transform .45s ease; }
/* 블록 장난감 판처럼 동그란 돌기가 줄지어 있는 배경. 돌기와 그 아래 그늘 두 겹, 색은 배경마다 --stud / --stud-shade 로 준다 */
.studs {
  background-image:
    radial-gradient(circle at 50% 50%, var(--stud) 0 11px, transparent 11.6px),
    radial-gradient(circle at calc(50% + 1.5px) calc(50% + 2px), var(--stud-shade) 0 11.4px, transparent 12px);
  background-size: 40px 40px;
}
.slide { position: relative; flex: 0 0 100%; height: 100%; padding: 52px 56px; display: flex; flex-direction: column; overflow: hidden; }
.slide-kind { align-self: flex-start; height: 26px; line-height: 24px; padding: 0 10px; border: 1px solid currentColor; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.slide-title { margin-top: 22px; font-size: 42px; line-height: 1.22; font-weight: 800; letter-spacing: -0.04em; max-width: 60%; }
.slide-sub { margin-top: 14px; font-size: 18px; font-weight: 500; max-width: 60%; }
.slide-accent { position: absolute; right: 44px; bottom: 6px; font-size: 168px; line-height: 1; font-weight: 900; letter-spacing: -0.06em; }
.slide-img { position: absolute; right: 0; top: 0; width: 46%; height: 100%; object-fit: cover; }
.slide.t-brand { background-color: var(--banner-bg); color: var(--banner-fg); --stud: var(--brand-stud); --stud-shade: var(--brand-stud-shade); }
.slide.t-brand .slide-accent { color: var(--brand-accent); }
.slide.t-tint { background-color: var(--brand-tint); color: var(--ink); --stud: var(--tint-stud); --stud-shade: var(--tint-stud-shade); }
.slide.t-tint .slide-accent, .slide.t-tint .slide-kind { color: var(--brand); }
.slide.t-black { background-color: var(--ink); color: #fff; --stud: #22262D; --stud-shade: #0E1014; }
.slide.t-black .slide-accent, .slide.t-black .slide-kind { color: var(--brand-light); }
.slide.t-white { background-color: #EEF1F5; color: var(--ink); --stud: #F4F6F9; --stud-shade: #E2E6EC; }
.slide.t-white .slide-accent { color: #fff; }
.slide.t-red { background-color: var(--red); color: #fff; --stud: #DD453A; --stud-shade: #C52F24; }
.slide.t-red .slide-accent { color: var(--ink); }
.slider-nav { position: absolute; left: 56px; bottom: 40px; display: flex; align-items: center; background: #fff; color: var(--ink); height: 36px; }
.slider-nav button { width: 36px; height: 36px; border: 0; background: transparent; font-size: 17px; font-weight: 700; padding: 0; }
.slider-count { min-width: 52px; text-align: center; font-size: 13px; font-weight: 700; }

.qbox { background: #fff; border: 1px solid var(--ink); padding: 19px 21px 15px; display: flex; flex-direction: column; height: 384px; }
.qbox-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 17px; }
.qbox-state { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.qbox-state.is-on { color: var(--red); }
.qbox-label { margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--brand-deep); }
.qbox-now { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); min-height: 74px; }
.qbox-now-no { font-size: 46px; line-height: 1; font-weight: 900; color: var(--brand); letter-spacing: -0.04em; }
.qbox-now-name { font-size: 19px; font-weight: 800; }
.qbox-now-item { font-size: 13px; font-weight: 600; }
.qbox-empty { font-size: 15px; font-weight: 700; }
.qbox-list { flex: 1; margin-top: 4px; overflow: hidden; }
.qbox-list li { display: flex; align-items: center; gap: 12px; height: 34px; font-weight: 700; font-size: 14px; }
.qbox-list .no { width: 26px; color: var(--brand); font-weight: 800; }
.qbox-list .nick { flex: none; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbox-list .item { flex: 1; min-width: 0; text-align: right; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbox-foot { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; }

/* ── 첫 화면 팝업 ─────────────────────── */
.popup { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22, 24, 29, .5); }
.popup-box { position: relative; width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; background: #fff; }
/* 화면들을 같은 자리에 겹쳐 두고 하나만 보이게 한다. 상자 높이는 가장 긴 화면에 맞춰진다 */
.popup-slides { display: grid; }
.popup-slide { grid-area: 1 / 1; visibility: hidden; }
.popup-slide.is-on { visibility: visible; }
.popup-img { position: relative; background: var(--tile); display: flex; align-items: center; justify-content: center; }
.popup-img:not(:has(img)) { aspect-ratio: 4 / 3; }
.popup-img img { width: 100%; height: auto; }
.popup-text { padding: 22px 24px 26px; }
.popup-label { margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--brand-deep); }
.popup-text h2 { font-size: 23px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
.popup-body { margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.6; }
.popup-text .btn { margin-top: 16px; }
.popup-nav { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; height: 34px; background: #fff; }
.popup-nav button { width: 34px; height: 34px; border: 0; background: transparent; padding: 0; font-size: 17px; font-weight: 700; }
.popup-nav span { min-width: 44px; text-align: center; font-size: 13px; font-weight: 700; }
/* 장바구니 담기 안내: 같은 팝업 틀에 문구와 버튼 두 개만 */
.cart-box { max-width: 360px; }
.cart-msg { padding: 34px 24px 32px; text-align: center; font-size: 17px; font-weight: 700; line-height: 1.5; }
.popup-foot a { display: flex; align-items: center; justify-content: center; height: 50px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; }
.popup-foot:has(a[hidden]) { grid-template-columns: 1fr; }
.popup-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.popup-foot button { height: 50px; border: 0; background: #fff; font-size: 14px; font-weight: 700; }
.popup-foot button + button { background: var(--ink); color: #fff; }

/* ── 섹션 / 상품 ───────────────────────── */
.sec { margin-top: 68px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.sec-title { font-size: 25px; font-weight: 800; letter-spacing: -0.035em; }
.sec-more { font-size: 14px; font-weight: 600; }

.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 18px; }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: block; position: relative; }
.thumb { position: relative; aspect-ratio: 1 / 1; background: var(--tile); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 디자인 요청용: 이미지가 들어갈 자리의 크기 표시 */
.size-tag { flex: none; padding: 2px 7px; background: #C9CED6; color: var(--ink); font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.size-tag.is-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.thumb-blank { font-size: 14px; font-weight: 800; letter-spacing: -0.04em; color: #CBD1D9; }
/* 상품 태그. 이미지 왼쪽 위에 순위 → 태그 순으로 나란히 */
.tags { position: absolute; left: 0; top: 0; max-width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; }
/* 순위가 왼쪽 위를 차지하는 줄(베스트)에서는 태그를 오른쪽 위로 */
.tags.is-right { left: auto; right: 0; max-width: calc(100% - 34px); justify-content: flex-end; }
.tag { flex: none; height: 24px; line-height: 24px; padding: 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; word-spacing: 0.18em; white-space: nowrap; background: var(--brand); color: #fff; }
/* NEW: 단색 그대로 두고, 몇 초에 한 번 옅은 빛만 지나간다 */
.tag.t-NEW { position: relative; overflow: hidden; }
.tag.t-NEW::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: glint 5.5s ease-in-out 1.2s infinite;
}
.tag.t-BEST { background: var(--ink); }
.tag.t-EVENT { background: var(--sticker); color: var(--ink); }
/* HOT: 불꽃 색(붉은색 → 주황 → 노랑)이 천천히 일렁이고 앞에 작은 불꽃 */
.tag.t-HOT {
  display: flex; align-items: center; gap: 4px; color: var(--ink);
  background: linear-gradient(100deg, #FF5A36, #FF8A1F, #FFC53D, #FF8A1F, #FF5A36);
  background-size: 200% 100%;
  animation: holo 5s linear infinite;
}
.tag.t-HOT::before {
  content: ''; flex: none; width: 9px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%2316181D' d='M6.4 0c.5 3 4.4 4.9 4.4 9.3A5.3 5.3 0 0 1 5.5 16 5.3 5.3 0 0 1 .2 10.6c0-2.1 1-3.7 2.1-4.9.2 1.5.9 2.4 1.9 2.8C3.7 5 4.7 2.200 6.400 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* LIMITED: 홀로그램 카드처럼 옅은 무지개가 천천히 흐르고 가끔 빛이 한 번 지나간다 */
.tag.t-LIMITED {
  position: relative; overflow: hidden; color: var(--ink);
  background: linear-gradient(100deg, #FFB5C9, #FFD9A0, #FFF3A6, #B9F3CF, #A8DAFF, #CDB8FF, #FFB5C9);
  background-size: 200% 100%;
  animation: holo 8s linear infinite;
}
.tag.t-LIMITED::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation: glint 4s ease-in-out infinite;
}
@keyframes holo { to { background-position: 200% 0; } }
@keyframes glint { 0%, 60% { left: -45%; } 100% { left: 125%; } }
@media (prefers-reduced-motion: reduce) { .tag.t-LIMITED, .tag.t-LIMITED::after, .tag.t-HOT, .tag.t-NEW::after { animation: none; } }
/* 순위는 태그와 같은 높이로 맨 앞에 */
.rank { flex: none; min-width: 24px; height: 24px; line-height: 24px; padding: 0 7px; text-align: center; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
/* 남은 수량: 이미지 왼쪽 아래 */
.stock { position: absolute; left: 0; bottom: 0; height: 24px; line-height: 24px; padding: 0 8px; background: #fff; font-size: 12px; font-weight: 700; }
/* 재고 10개 미만: 남은 수량 자리에 빨간 LOW STOCK */
.stock.is-soon { background: var(--ink); color: #fff; }
.stock.is-low { background: var(--red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; word-spacing: 0.18em; }
.spec .stock.is-low { position: static; display: inline-block; margin-left: 8px; vertical-align: 1px; }
.spec .low { color: var(--red); font-weight: 800; }
/* 품절: 이미지를 어둡게 덮고 가운데에 글자만 */
.soldout { position: absolute; inset: 0; background: rgba(22, 24, 29, .5); display: flex; align-items: center; justify-content: center; }
.soldout b { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 0.12em; text-indent: 0.12em; }
.pd-img .soldout b { font-size: 36px; }
/* 구성 태그: 팩, 박스, 단품, 풀박스 */
.units { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
/* 테두리 없이 옅은 바탕색만. 낱개(팩, 단품)는 주색의 옅은 톤(분홍), 묶음(박스, 풀박스)은 옅은 민트 */
.unit { display: inline-block; height: 21px; line-height: 21px; padding: 0 8px; background: #ECEFF3; font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.unit.u-PACK, .unit.u-SINGLE { background: var(--unit-bg); }
.unit.u-BOX, .unit.u-FULLBOX { background: #DCF1E8; }
.card-name { margin-top: 7px; font-size: 15px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { margin-top: 7px; display: flex; align-items: baseline; gap: 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.card-price .rate { color: var(--red); }
.card-price small { font-size: 14px; font-weight: 700; }
.card-list { font-size: 13px; color: var(--sub); text-decoration: line-through; }

.strip { position: relative; margin-top: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 36px; height: 92px; background: var(--brand-tint); color: var(--ink); }
.strip-title { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.strip-date { font-size: 14px; font-weight: 700; color: var(--brand-deep); }

.boards { margin-top: 68px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.board-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.board-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.board li a { display: flex; align-items: center; gap: 12px; height: 50px; border-bottom: 1px solid var(--line); }
.board .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.board .d { flex: none; font-size: 13px; color: var(--sub); }
.flag { flex: none; font-size: 12px; font-weight: 800; }
.flag.is-red { color: var(--red); }

/* ── 목록 화면 ────────────────────────── */
.page-title { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
/* 큰 분류 안의 세부 탭 (TCG 카드 > 포켓몬, 원피스) */
.subtabs { display: flex; gap: 6px; margin-top: 20px; overflow-x: auto; }
.subtabs a { flex: none; height: 40px; line-height: 38px; padding: 0 18px; border: 1px solid var(--line-dark); font-size: 15px; font-weight: 700; }
.subtabs a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.listbar { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 26px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
/* 세부 카테고리 타일: 정사각형 이미지 아래에 이름 */
.cat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 18px; margin: 28px 0 56px; }
.cat-tile { display: block; text-align: center; }
.cat-tile .thumb.has-img { background: #fff; }
.cat-tile .thumb.has-img img { object-fit: contain; }
.cat-tile p { margin-top: 14px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sorts { display: flex; gap: 16px; font-size: 14px; font-weight: 500; }
.sorts a.is-on { font-weight: 800; }
.count { font-size: 14px; font-weight: 600; }
.empty { padding: 90px 0; text-align: center; font-weight: 600; }
/* 주문내역 조회 기간: 왼쪽에 기간 버튼, 오른쪽에 날짜 직접 선택 */
.period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 22px; }
.period-quick { display: flex; }
.period-quick a { min-width: 68px; height: 40px; line-height: 38px; padding: 0 12px; margin-left: -1px; border: 1px solid var(--line-dark); background: #fff; text-align: center; font-size: 14px; font-weight: 600; }
.period-quick a:first-child { margin-left: 0; }
.period-quick a.is-on { position: relative; background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.period-range { display: flex; align-items: center; gap: 8px; }
.period-range .input { width: 150px; height: 40px; padding: 0 10px; font-size: 14px; }
.period-range span { font-weight: 700; }
.period-range .btn { height: 40px; padding: 0 20px; font-size: 14px; }
.period-sum { margin: 26px 0 12px; font-size: 14px; font-weight: 600; }
.period-sum b { margin-right: 10px; font-size: 16px; font-weight: 800; }
.pager { margin-top: 56px; display: flex; justify-content: center; gap: 4px; }
.pager a, .pager span { min-width: 38px; height: 38px; line-height: 36px; text-align: center; border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.pager .is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── 상품 상세 ────────────────────────── */
.crumb { font-size: 13px; font-weight: 500; margin-bottom: 18px; display: flex; gap: 8px; }
.pd { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 60px; }
.pd-img { aspect-ratio: 1 / 1; background: var(--tile); display: flex; align-items: center; justify-content: center; position: relative; }
.pd-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-img .thumb-blank { font-size: 22px; }
.pd-media { min-width: 0; }
/* 큰 이미지 아래 작은 이미지 줄. 누른 것에 테두리 */
.pd-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pd-thumb { position: relative; aspect-ratio: 1 / 1; padding: 0; border: 0; background: var(--tile); overflow: hidden; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.is-on::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--ink); }
.pd-name { font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.035em; }
.pd-price { margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--ink); }
.pd-price.is-empty { margin-top: 0; }
.pd-price .list { font-size: 15px; color: var(--sub); text-decoration: line-through; }
.pd-price .now { display: flex; align-items: baseline; gap: 8px; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.pd-price .rate { color: var(--red); }
.pd-price .now small { font-size: 20px; font-weight: 700; }
.spec { margin-top: 6px; }
.spec div { display: flex; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt { width: 104px; flex: none; font-weight: 700; }
.spec dd { font-weight: 500; }
.pick + .pick { margin-top: 18px; }
.pick { margin: 22px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pick legend { padding: 0; margin-bottom: 10px; font-weight: 700; }
.pick-card { position: relative; display: block; cursor: pointer; }
.pick-card input { position: absolute; left: 16px; bottom: 0; width: 1px; height: 1px; opacity: 0; }
.pick-body { position: relative; display: block; height: 100%; padding: 16px; border: 1px solid var(--line-dark); border-radius: 2px; background: #fff; }
.pick-body b { display: block; padding-right: 30px; font-size: 16px; font-weight: 800; }
.pick-body small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.45; }
.pick-body::after { content: ''; position: absolute; right: 14px; top: 16px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-dark); background: #fff; }
.pick-card input:checked + .pick-body { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick-card.is-off { cursor: default; }
.pick-card.is-off .pick-body { background: var(--soft); }
.pick-card input:checked + .pick-body::after { border: 6px solid var(--brand); }
.pick-card input:focus-visible + .pick-body { outline: 2px solid var(--brand); outline-offset: 2px; }
.qty-row { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.qty { display: inline-flex; border: 1px solid var(--line-dark); height: 42px; }
.qty button { width: 42px; border: 0; background: #fff; font-size: 18px; font-weight: 600; padding: 0; }
.qty button[disabled] { background: var(--soft); color: #868C95; cursor: default; }
.qty input { width: 52px; border: 0; border-left: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); text-align: center; font-weight: 700; outline: 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; font-weight: 700; }
.sum-row b { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
/* 출시 전 상품의 오픈 카운트다운. 숫자 한 자리가 타일 하나 */
.drop { margin-top: 22px; padding: 22px 16px 20px; border: 1px solid var(--ink); border-radius: 2px; text-align: center; }
.drop-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 700; }
.drop-head b { height: 22px; line-height: 22px; padding: 0 8px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.drop-clock { display: flex; justify-content: center; align-items: flex-start; gap: 10px; margin-top: 18px; }
.drop-clock [hidden] { display: none; }
.drop-unit { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.drop-digits { display: flex; gap: 4px; }
.drop-digits i { position: relative; width: 46px; height: 60px; line-height: 60px; border-radius: 2px; background: var(--ink); color: #fff; font-style: normal; font-size: 34px; font-weight: 800; }
.drop-digits i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .22); }
.drop-unit small { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; }
.drop-sep { height: 60px; line-height: 56px; font-size: 28px; font-weight: 800; }
.pd-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
/* 품절 상품의 재입고 요청 버튼. 요청한 뒤에는 종이 채워지고 바탕이 바뀐다 */
.restock { gap: 8px; padding: 0 10px; white-space: nowrap; }
.restock svg { flex: none; }
.restock.is-done, .restock.is-done[disabled] { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-deep); }
.restock.is-done svg { fill: currentColor; }
.pd-body { margin-top: 72px; }
.pd-h { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.pd-desc { padding: 28px 0 56px; font-size: 16px; line-height: 1.8; white-space: pre-line; max-width: 760px; }
/* 편집기로 쓴 상품 설명: 글자 크기와 색은 글에 저장된 값을 그대로 따르고, 여기서는 간격과 이미지 배치만 잡는다 */
.pd-desc.is-rich { white-space: normal; max-width: 860px; }
.pd-desc.is-rich p { margin: 0 0 0.8em; }
.pd-desc.is-rich h2 { margin: 1.4em 0 0.5em; font-size: 24px; line-height: 1.35; font-weight: 800; letter-spacing: -0.03em; }
.pd-desc.is-rich h3 { margin: 1.2em 0 0.4em; font-size: 19px; line-height: 1.4; font-weight: 800; }
.pd-desc.is-rich ul, .pd-desc.is-rich ol { margin: 0 0 0.8em; padding-left: 1.4em; }
.pd-desc.is-rich ul { list-style: disc; }
.pd-desc.is-rich ol { list-style: decimal; }
.pd-desc.is-rich a { text-decoration: underline; }
.pd-desc.is-rich hr { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }
.pd-desc.is-rich img { display: block; max-width: 100%; height: auto; }
.pd-desc.is-rich figure.image { display: table; margin: 18px auto; max-width: 100%; }
.pd-desc.is-rich figure.image.image-style-align-left { margin-left: 0; }
.pd-desc.is-rich figure.image.image-style-align-right { margin-right: 0; }
.pd-desc.is-rich figure.image_resized img { width: 100%; }
.pd-desc.is-rich figcaption { margin-top: 6px; font-size: 13px; text-align: center; }
.pd-desc.is-rich > :first-child { margin-top: 0; }
.guide div { display: flex; padding: 14px 0; border-bottom: 1px solid var(--line); }
.guide dt { width: 130px; flex: none; font-weight: 700; }

/* ── 버튼 / 폼 ────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 2px; background: #fff; font-size: 16px; font-weight: 700; }
.btn.is-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.is-dark { background: var(--ink); color: #fff; }
.btn.is-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn.is-full { width: 100%; }
.btn[disabled] { background: #DDE1E6; border-color: #DDE1E6; color: var(--ink); cursor: default; }

.field { margin-top: 16px; }
.field label, .field .label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-dark); border-radius: 2px; background: #fff; outline: 0; }
.input:focus { border-color: var(--ink); }
/* 필수 표시와 빠뜨린 칸 */
.req { margin-left: 4px; color: var(--red); font-weight: 700; }
/* 칸 이름 오른쪽에 붙는 작은 빨간 안내 */
.label-note { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--red); }
.input.is-err, .input.is-err:focus { border-color: var(--red); }
.input::placeholder { color: #868C95; }
/* 검색으로만 채우는 칸: 눌러서 검색을 연다 */
.input[readonly] { background: var(--tile); cursor: pointer; }
.zip-row { display: flex; gap: 8px; }
.zip-row .input { width: 160px; }
.zip-row .btn { flex: none; height: 48px; padding: 0 18px; font-size: 14px; }
/* 주소 검색 창 */
.zip-layer { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22, 24, 29, .5); }
.zip-layer[hidden] { display: none; }
.zip-box { display: flex; flex-direction: column; width: 100%; max-width: 480px; height: 600px; max-height: 100%; background: #fff; }
.zip-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 6px 0 18px; border-bottom: 1px solid var(--ink); font-size: 16px; }
.zip-head b { font-weight: 800; }
.zip-head button { height: 40px; padding: 0 12px; border: 0; background: transparent; font-size: 14px; font-weight: 700; }
.zip-body { flex: 1; min-height: 0; }
.zip-wait { padding: 40px 0; text-align: center; font-size: 15px; font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.err { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--red); }
.notice-line { margin-bottom: 20px; padding: 13px 16px; border: 1px solid var(--ink); font-weight: 600; }
.checks { display: flex; gap: 8px; flex-wrap: wrap; }
.checks label { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 1px solid var(--line-dark); font-weight: 600; cursor: pointer; margin: 0; }
.checks input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.agree, .field label.agree { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 600; font-size: 14px; }
.agree input { accent-color: var(--ink); width: 17px; height: 17px; margin: 0; }

/* ── 장바구니 / 주문 ───────────────────── */
.two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; margin-top: 26px; }
.tbl th { height: 46px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; text-align: left; padding: 0 12px; }
.tbl td { padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl .r { text-align: right; }
.tbl .c { text-align: center; }
.line-item { display: flex; align-items: center; gap: 16px; }
.line-item .thumb { width: 72px; flex: none; }
.tbl .line-item .thumb { width: 56px; }
.line-item .thumb-blank { font-size: 10px; }
.line-item .n { font-weight: 600; }
.line-item .ty { font-size: 12px; font-weight: 700; }
.line-item .ty.is-live { color: var(--red); }
.link-btn { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 600; text-decoration: underline; }
/* 주문 요약은 따라 내려온다. 위에 붙어 있는 로고와 메뉴(124px) 바로 아래에 멈춘다 */
.side { border: 1px solid var(--ink); padding: 26px 24px; position: sticky; top: 144px; }
.side h2 { font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.side dl div { display: flex; justify-content: space-between; padding: 8px 0; font-weight: 500; }
.side .total { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); align-items: baseline; font-weight: 700; }
.side .total dd { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.side .btn { margin-top: 20px; }
.form-sec { margin-top: 44px; }
.form-sec:first-of-type { margin-top: 0; }
.form-sec h2 { font-size: 19px; font-weight: 800; padding-bottom: 12px; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; }
.form-sec h2 a { font-size: 13px; font-weight: 600; text-decoration: underline; }
.guest-mark { font-size: 13px; font-weight: 700; }

/* ── 주문 완료 / 조회 ──────────────────── */
.narrow { max-width: 620px; margin: 0 auto; }
.done-head { text-align: center; padding: 28px 0 34px; }
.done-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }
.done-head .done-lead { margin-top: 16px; font-size: 17px; font-weight: 600; line-height: 1.7; }
.done-head .done-sub { margin-top: 8px; font-size: 15px; line-height: 1.7; }
.done-head a { text-decoration: underline; text-underline-offset: 3px; }
.turn { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.turn div { padding: 24px 26px; }
.turn div + div { border-left: 1px solid var(--line); }
.turn dt { font-size: 13px; font-weight: 700; color: var(--brand-deep); }
.turn dd { margin-top: 4px; font-size: 38px; line-height: 1.1; font-weight: 900; letter-spacing: -0.04em; }
.turn dd small { font-size: 17px; font-weight: 700; margin-left: 3px; }
.info { margin-top: 28px; }
.info div { display: flex; padding: 13px 0; border-bottom: 1px solid var(--line); }
.info dt { width: 110px; flex: none; font-weight: 700; }
.info dd { font-weight: 500; }
.btn-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 32px; }
.btn-trio .btn { padding: 0 8px; font-size: 15px; }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }

/* ── 내 정보 ──────────────────────────── */
.my-sum { max-width: 816px; margin-top: 22px; padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--ink); }
.my-sum dl { margin: 0; }
.my-sum dt { font-size: 13px; font-weight: 700; color: var(--brand-deep); }
.my-sum dd { margin-top: 4px; font-size: 34px; line-height: 1.15; font-weight: 900; letter-spacing: -0.04em; }
.my-sum dd small { margin-left: 3px; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.my-form { max-width: 816px; margin-top: 26px; }
/* 잠깐 떴다 사라지는 알림 */
.toast { position: fixed; left: 50%; top: 28px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 13px 20px 13px 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(22, 24, 29, .10); font-size: 15px; font-weight: 600; white-space: nowrap; pointer-events: none; transform: translateX(-50%); animation: toast 2.8s ease forwards; }
.toast svg { flex: none; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  9%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation-duration: 3.2s; } }

/* ── 로그인 ───────────────────────────── */
.auth { max-width: 400px; margin: 0 auto; padding-top: 20px; }
.auth h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; text-align: center; margin-bottom: 26px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 24px; }
.auth-tabs button { height: 50px; border: 1px solid var(--line-dark); background: #fff; font-size: 15px; font-weight: 700; margin-right: -1px; }
.auth-tabs button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.auth .field { margin-top: 10px; }
.auth-opt { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 18px; font-size: 14px; }
.auth-links { display: flex; justify-content: center; gap: 20px; margin-top: 20px; font-size: 14px; font-weight: 600; }
.sns { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.sns .btn { border-color: transparent; font-size: 15px; }
.sns .kakao { background: #FEE500; }
.sns .naver { background: #03A94D; color: #fff; }
.sns .guest-buy { border-color: var(--ink); background: #fff; }
[hidden] { display: none !important; }

/* ── 게시판 ───────────────────────────── */
.post-list { margin-top: 22px; border-top: 2px solid var(--ink); }
.post-list a { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.post-list .t { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; }
.post-list .d { font-size: 14px; color: var(--sub); }
.post-head { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 24px 8px; margin-top: 22px; }
.post-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.post-head p { margin-top: 6px; font-size: 14px; color: var(--sub); }
.post-body { padding: 34px 8px 48px; font-size: 16px; line-height: 1.85; white-space: pre-line; border-bottom: 1px solid var(--line); }
.post-foot { margin-top: 24px; text-align: center; }
.ev-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.ev-thumb { height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 28px; background: var(--brand); color: #fff; position: relative; overflow: hidden; }
.ev-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-thumb strong { font-size: 27px; line-height: 1.25; font-weight: 800; letter-spacing: -0.04em; }
.ev-card:nth-child(4n+2) .ev-thumb { background: var(--ink); color: #fff; }
.ev-card:nth-child(4n+3) .ev-thumb { background: var(--brand-tint); color: var(--ink); }
.ev-card:nth-child(4n+4) .ev-thumb { background: #EEF1F5; color: var(--ink); }
.ev-card.is-end .ev-thumb { background: #DDE1E6; color: var(--ink); }
.ev-meta { display: flex; gap: 12px; align-items: center; margin-top: 12px; font-size: 14px; font-weight: 600; }

/* ── 문의 ─────────────────────────────── */
.board-top { display: flex; align-items: flex-end; justify-content: space-between; }
.inq-tbl { margin-top: 22px; }
.inq-tbl td { height: 58px; padding: 0 12px; }
.inq-tbl .kind { width: 110px; font-size: 14px; font-weight: 600; }
.inq-tbl .who { width: 110px; }
.inq-tbl .date { width: 120px; color: var(--sub); font-size: 14px; }
.inq-tbl .state { width: 96px; font-size: 14px; font-weight: 700; }
.inq-tbl .state.is-done { color: var(--brand-deep); }
.lock { display: inline-block; margin-right: 8px; padding: 0 6px; border: 1px solid var(--line-dark); font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: 2px; }
.form-narrow { max-width: 720px; margin-top: 22px; padding-top: 6px; border-top: 2px solid var(--ink); }
select.input { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2316181D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
textarea.input { height: 220px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.inq-ref { margin-top: 18px; padding: 12px 14px; background: var(--soft); font-weight: 600; }
.answer { margin-top: 0; padding: 28px 8px 36px; border-bottom: 1px solid var(--line); }
.answer h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--brand-deep); }
.answer p { font-size: 16px; line-height: 1.85; white-space: pre-line; }
.answer .wait { font-weight: 600; }

/* ── 라이브 순번 ───────────────────────── */
.live-top { display: grid; grid-template-columns: minmax(0, 1fr) 200px 200px; border: 1px solid var(--ink); margin-top: 22px; }
.live-top > div { padding: 28px 30px; }
.live-top > div + div { border-left: 1px solid var(--line); }
.live-top .lb { font-size: 13px; font-weight: 700; color: var(--brand-deep); }
.live-now { display: flex; align-items: center; gap: 20px; margin-top: 8px; min-height: 64px; }
.live-now .no { font-size: 60px; line-height: 1; font-weight: 900; color: var(--brand); letter-spacing: -0.04em; }
.live-now .nick { font-size: 24px; font-weight: 800; }
.live-now .item { font-size: 15px; font-weight: 600; }
.live-top .big { margin-top: 8px; font-size: 40px; line-height: 1.2; font-weight: 900; letter-spacing: -0.04em; }
.live-top .big small { font-size: 17px; font-weight: 700; margin-left: 3px; }
/* 위쪽 패널의 부드러운 분위기: 주색의 옅은 바탕, 둥근 모서리, 뒤에서 천천히 지나가는 흰 구름(.live-fx).
   구름은 한 가지 색의 평평한 도형이고 번짐이나 빛 효과는 쓰지 않는다. 바탕색은 사이트 주색의 옅은 톤이다 */
.live-top { position: relative; overflow: hidden; border: 0; border-radius: 20px; background: var(--brand-tint); container-type: inline-size; }
.live-top > div { position: relative; z-index: 1; }
.live-top > div + div { border-left-color: var(--tint-stud-shade); }
/* 순번이 바뀌면 순번과 닉네임이 살짝 떠오르며 다시 나타난다 (templates/shop/live.html 이 is-new 를 붙인다) */
.live-now.is-new { animation: live-in .5s cubic-bezier(.2, .8, .3, 1); }
.live-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* 구름마다 높이, 크기, 지나가는 데 걸리는 시간, 시작 위치(음수 지연)가 다르다.
   공통 규칙에는 animation 줄임 속성을 쓰지 않는다. 쓰면 구름마다 정한 시간이 지워져 움직이지 않는다 */
.fx-cloud { position: absolute; left: -200px; fill: #fff; animation-name: fx-drift; animation-timing-function: linear; animation-iteration-count: infinite; }
.fx-cloud.c1 { top: 10%; width: 150px; animation-duration: 80s; animation-delay: -12s; }
.fx-cloud.c2 { top: 52%; width: 104px; animation-duration: 62s; animation-delay: -38s; }
.fx-cloud.c3 { top: 24%; width: 84px; animation-duration: 96s; animation-delay: -64s; }
.fx-cloud.c4 { top: 60%; width: 132px; animation-duration: 74s; animation-delay: -58s; }
@keyframes live-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fx-drift { from { transform: translateX(0); } to { transform: translateX(calc(100cqw + 220px)); } }
@media (prefers-reduced-motion: reduce) { .live-now.is-new, .fx-cloud { animation: none !important; } }
.qtbl { margin-top: 34px; }
.qtbl th { height: 46px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); text-align: left; padding: 0 12px; font-size: 14px; }
.qtbl td { height: 54px; padding: 0 12px; border-bottom: 1px solid var(--line); font-weight: 500; }
.qtbl .no { width: 80px; font-size: 18px; font-weight: 800; }
.qtbl .nick { width: 220px; font-weight: 700; }
.qtbl .r { text-align: right; width: 90px; }
/* 라이브 순번의 닉네임: 글자 아래쪽 절반에만 연한 형광펜 띠를 깐다 (색 번짐 없이 한 가지 색) */
#live .nick .hl { padding: 0 4px; margin: 0 -4px; background: linear-gradient(transparent 55%, var(--tint-stud-shade) 55%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ── 떠 있는 바로가기 ─────────────────── */
/* 상자 없이 아이콘만. 넓은 화면은 오른쪽 가운데에 세로로 */
.fab { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 16px; }
.fab a { display: block; }
.fab img { width: 30px; height: 30px; }
/* 화면 옆 여백이 모자라면 카카오톡 하나만 오른쪽 아래에 */
@media (max-width: 1339px) {
  .fab { right: 16px; top: auto; bottom: 16px; transform: none; }
  .fab .fab-sns { display: none; }
  .fab img { width: 44px; height: 44px; }
}

/* ── 푸터 ─────────────────────────────── */
.foot { background: var(--soft); border-top: 1px solid var(--line); padding: 44px 0 56px; font-size: 13px; }
.foot-top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 26px; border-bottom: 1px solid var(--line-dark); }
.foot-cs b { display: block; font-size: 13px; }
.foot-cs strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 4px; }
.foot-links { display: flex; gap: 22px; font-weight: 700; font-size: 14px; }
.foot-info { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--sub); }
.foot-copy { margin-top: 14px; color: var(--sub); }

/* ── 반응형 ───────────────────────────── */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .qbox { height: auto; }
  .qbox-list { max-height: 180px; }
  .grid, .grid.c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd { grid-template-columns: 1fr; gap: 28px; }
  .two { grid-template-columns: 1fr; }
  .side { position: static; }
  .gnb .wrap { overflow-x: auto; }
  .head { gap: 16px; height: 96px; }
  .stick { --shrink: 24px; }
  .logo { height: 54px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .util { display: none; }
  .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 10px; margin: 20px 0 40px; }
  .cat-tile p { margin-top: 10px; font-size: 14px; }
  /* 좁은 화면: 한 줄에 돋보기, 로고, 방송 상태와 장바구니 */
  .head { height: 64px; gap: 8px; }
  .head-left { gap: 4px; }
  .head-act { gap: 10px; }
  .onair { height: 26px; padding: 0 7px; gap: 5px; font-size: 11px; }
  .onair i { width: 7px; height: 7px; }
  .onair-long { display: none; }
  .logo { height: 32px; }
  .logo-slot .size-tag { font-size: 10px; }
  .search-layer .wrap { gap: 4px; }
  .search-big { height: 48px; }
  .search-big label { left: 12px; top: 6px; font-size: 10px; }
  .search-big input { padding: 16px 46px 2px 12px; font-size: 16px; }
  .search-big button { width: 44px; }
  .search-big button svg { width: 21px; height: 21px; }
  .search-close { width: 38px; margin-right: -8px; }
  .gnb .wrap, .gnb ul { gap: 20px; }
  .gnb .gnb-sub { padding-left: 20px; }
  .gnb a { height: 46px; line-height: 46px; font-size: 15px; }
  .hero { margin-top: 16px; }
  .slider { height: 300px; }
  .slide { padding: 30px 24px; }
  .slide-title { font-size: 28px; max-width: 100%; }
  .slide-sub { font-size: 15px; max-width: 100%; }
  .slide-accent { font-size: 62px; right: 20px; bottom: 16px; }
  .slider-nav { left: 24px; bottom: 22px; }
  .sec, .strip, .boards { margin-top: 48px; }
  .sec-title { font-size: 21px; }
  .grid, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
  .restock { gap: 5px; padding: 0 4px; font-size: 15px; }
  .period { gap: 10px; }
  .period-quick { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .period-quick a { min-width: 0; margin: -1px 0 0 -1px; }
  .period-quick a:nth-child(-n+3) { margin-top: 0; }
  .period-quick a:nth-child(3n+1) { margin-left: 0; }
  .period-range { width: 100%; gap: 6px; }
  .period-range .input { flex: 1; width: 0; min-width: 0; padding: 0 6px; }
  .period-range .btn { flex: none; padding: 0 16px; }
  /* 주문내역: 표를 풀어서 주문 한 건을 세 줄로 (주문일과 상태 / 상품 / 주문번호와 금액) */
  .orders, .orders tbody { display: block; }
  .orders thead { display: none; }
  .orders tbody { border-top: 2px solid var(--ink); }
  .orders tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date state" "item item" "no total"; align-items: center; gap: 10px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .orders td { padding: 0; border: 0; }
  .orders .o-date { grid-area: date; font-weight: 700; }
  .orders .o-state { grid-area: state; text-align: right; font-size: 14px; font-weight: 700; }
  .orders .o-item { grid-area: item; }
  .orders .o-no { grid-area: no; font-size: 14px; }
  .orders .o-total { grid-area: total; }
  .orders td.empty { grid-column: 1 / -1; padding: 60px 0; }
  .drop { padding: 18px 8px 16px; }
  .drop-head { font-size: 15px; }
  .drop-clock { gap: 5px; }
  .drop-digits { gap: 3px; }
  .drop-digits i { width: 32px; height: 46px; line-height: 46px; font-size: 25px; }
  .drop-sep { height: 46px; line-height: 43px; font-size: 22px; }
  .drop-unit small { font-size: 10px; letter-spacing: 0.1em; }
  .restock svg { width: 18px; height: 18px; }
  .strip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 0 22px; height: 96px; }
  .strip-title { font-size: 18px; }
  .boards { grid-template-columns: 1fr; gap: 40px; }
  .page { padding: 24px 0 64px; }
  .page-title { font-size: 24px; }
  .done-head h1 { font-size: 23px; }
  .done-head .done-lead { font-size: 16px; }
  .listbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pd-name { font-size: 22px; }
  .field-row { grid-template-columns: 1fr; }
  .btn-trio { grid-template-columns: 1fr; }
  .my-sum { padding: 14px 16px; }
  .my-sum dd { font-size: 26px; }
  .tbl .hide-m { display: none; }
  .ev-grid { grid-template-columns: 1fr; }
  .live-top { grid-template-columns: 1fr 1fr; }
  .live-top > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--tint-stud-shade); }
  .live-top > div:nth-child(2) { border-left: 0; }
  .qtbl .nick { width: auto; }
  .qtbl .hide-m { display: none; }
  .foot-top { flex-direction: column; gap: 20px; }
}
@media (max-width: 380px) {
  /* 아주 좁은 화면: 로고를 조금 줄여 방송 상태 칸과 겹치지 않게 한다 */
  .logo { height: 28px; }
}