/* 토마토 철물점 자사몰 — 상점 화면 공통 스타일
   색·간격·둥글기 값은 '토마토 철물점 Design System_블랙'(templates/ds) 그대로.
   글자 크기만 발표용(1280×720) 대신 폰 화면용으로 따로 정함.
   규칙: 그림자·그라데이션·이모지·초록/파랑/노랑 금지. 강조색은 핑크 하나.
   버튼 채움은 --pink-500(흰 글자 대비 5.3:1). --pink-400은 검정 위 글자·강조에만(흰 글자 위에는 3.1:1이라 안 씀) */

@font-face{font-family:"Pretendard";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/Pretendard-Regular.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/Pretendard-SemiBold.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/Pretendard-Bold.subset.woff2") format("woff2")}

:root{
  --black-900:#0D0D0D; --black-800:#1A1A1A; --black-700:#262626; --black-600:#333333;
  --grey-500:#8C8C8C; --grey-200:#D3D3D3; --white:#FFFFFF;
  --pink-400:#E96781; --pink-500:#C75B7A; --pink-700:#8A3B54;
  --hover-lift:#2E2E2E; --hover-accent:#F07E93;

  --canvas:var(--black-900); --card:var(--black-800); --panel:var(--black-700); --line:var(--black-600);
  --text:var(--white); --body:var(--grey-200); --muted:var(--grey-500); --accent:var(--pink-400); --fill:var(--pink-500);

  /* 폰 화면용 글자 크기 */
  --fs-title:22px; --fs-section:17px; --fs-body:15px; --fs-small:13px; --fs-caption:12px; --fs-price:16px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --r-sm:4px; --r-md:8px; --r-pill:999px;

  --font:"Pretendard","Malgun Gothic","맑은 고딕",-apple-system,sans-serif;
  --wrap:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--body);font-family:var(--font);font-size:var(--fs-body);line-height:1.5;letter-spacing:-0.02em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3{margin:0;color:var(--text);font-weight:700;letter-spacing:-0.03em;line-height:1.3}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--pink-700);color:var(--white)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-4)}
.hidden{display:none!important}

/* ── 머리말(로고 + 메뉴) ── */
.hd{border-bottom:1px solid var(--line);background:var(--canvas)}
.hd-top{display:flex;align-items:center;gap:var(--s-2);height:56px}
.hd-logo{display:flex;align-items:center;gap:var(--s-2);color:var(--text);font-weight:700;font-size:16px}
.hd-logo img{width:36px;height:36px}
.gnb{display:flex;gap:var(--s-1);overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s-2)}
.gnb::-webkit-scrollbar{display:none}
.gnb a{flex:0 0 auto;padding:6px 12px;border-radius:var(--r-pill);font-size:var(--fs-small);font-weight:600;color:var(--muted);letter-spacing:0.02em}
.gnb a:hover{color:var(--text)}
.gnb a[aria-current="page"]{color:var(--text);background:var(--panel)}

/* ── 섹션 ── */
.sec{padding:var(--s-6) 0 0}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s-3)}
.sec-hd h2{font-size:var(--fs-section)}
.sec-hd a{font-size:var(--fs-small);color:var(--muted)}
.sec-hd a:hover{color:var(--text)}
.page-title{font-size:var(--fs-title);padding:var(--s-5) 0 var(--s-3)}

/* ── 첫 화면 ── */
.hero{padding:var(--s-7) 0 var(--s-5);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.hero img{width:72px;height:72px}
.hero h1{font-size:26px}
.hero p{color:var(--muted)}
.eyebrow{font-size:var(--fs-caption);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}

/* ── 분류 4칸 ── */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2)}
.cat{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:var(--r-md);padding:var(--s-4);color:var(--text);font-weight:600}
.cat:hover{background:var(--hover-lift)}
.cat span{color:var(--muted);font-weight:400;font-size:var(--fs-small)}

/* ── 분류 칩(SHOP 2단계) ── */
.chips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s-3)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:7px 14px;border-radius:var(--r-pill);background:var(--card);color:var(--body);font-size:var(--fs-small);font-weight:600}
.chip:hover{background:var(--hover-lift)}
.chip[aria-current="page"]{background:var(--fill);color:var(--white)}

/* ── 상품 카드 ── */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
@media (min-width:720px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;gap:var(--s-2);color:inherit}
.card:hover .card-name{color:var(--accent)}
.ph{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--panel)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-small)}
.card-name{color:var(--text);font-size:var(--fs-small);font-weight:600;line-height:1.4}
.card-meta{display:flex;align-items:baseline;gap:var(--s-2)}
.price{color:var(--text);font-weight:700;font-size:var(--fs-price)}
.sub{color:var(--muted);font-size:var(--fs-caption)}
.tag{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);background:var(--panel);color:var(--body);font-size:var(--fs-caption);font-weight:600}
.tag-accent{color:var(--accent)}

/* ── 상품 상세 ── */
.pd{display:grid;gap:var(--s-5);padding-top:var(--s-4)}
@media (min-width:720px){.pd{grid-template-columns:1fr 1fr;align-items:start;padding-top:var(--s-6)}}
.pd-info{display:flex;flex-direction:column;gap:var(--s-3)}
.pd-info h1{font-size:var(--fs-title)}
.pd-price{color:var(--text);font-size:24px;font-weight:700}
.opt-label{font-size:var(--fs-small);color:var(--muted);margin-top:var(--s-2)}
.swatches{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.swatch{padding:9px 16px;border-radius:var(--r-md);background:var(--card);color:var(--body);border:1px solid var(--line);font-size:var(--fs-small);font-weight:600;cursor:pointer}
.swatch:hover{background:var(--hover-lift)}
.swatch[aria-pressed="true"]{border-color:var(--accent);color:var(--text)}
/* 품절 색: 줄긋기 없이 '품절' 글자를 붙임 (스마트스토어 방식). 사진은 볼 수 있게 누를 수는 있음 */
.swatch.is-out{color:var(--muted)}
.swatch-out{margin-left:2px;font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);height:52px;border-radius:var(--r-md);background:var(--fill);color:var(--white);font-weight:700;font-size:16px;border:0;cursor:pointer;width:100%}
.btn:hover{background:var(--pink-700)}
.btn[aria-disabled="true"]{background:var(--panel);color:var(--muted);pointer-events:none}
.btn-ghost{background:var(--card);color:var(--text)}
.btn-ghost:hover{background:var(--hover-lift)}
.note{color:var(--muted);font-size:var(--fs-small)}
.panel{background:var(--card);border-radius:var(--r-md);padding:var(--s-4)}
.panel h2{font-size:var(--fs-body);margin-bottom:var(--s-2)}
.panel ul{margin:0;padding-left:1.1em;display:grid;gap:var(--s-1)}
.panel a{color:var(--accent)}

/* ── 준비 중·안내 화면 ── */
.empty{padding:var(--s-7) 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.empty h1{font-size:var(--fs-title)}
.empty p{color:var(--muted)}
.empty .btn{width:auto;padding:0 var(--s-5)}

/* ── 정책 문서 ── */
.doc{max-width:760px;padding-bottom:var(--s-6)}
.doc h1{font-size:var(--fs-title);padding:var(--s-5) 0 var(--s-2)}
.doc h2{font-size:var(--fs-body);margin:var(--s-5) 0 var(--s-2)}
.doc p,.doc li{color:var(--body);font-size:var(--fs-small);line-height:1.7}
.doc ol,.doc ul{padding-left:1.3em;margin:var(--s-1) 0}
.doc table{width:100%;border-collapse:collapse;font-size:var(--fs-small);margin:var(--s-2) 0}
.doc th,.doc td{border:1px solid var(--line);padding:var(--s-2);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.doc th{background:var(--card);color:var(--text);font-weight:600}
.doc th[scope="row"]{width:34%}
.doc .meta{color:var(--muted);font-size:var(--fs-caption)}
.doc a{color:var(--accent)}
.doc h3{font-size:var(--fs-small);margin:var(--s-3) 0 var(--s-1)}
.doc p.sub{padding-left:1.2em}
.doc strong{color:var(--text);font-weight:600}
.doc .toc{display:grid;gap:2px}
.doc .note-box{background:var(--card);border-radius:var(--r-md);padding:var(--s-3);margin:var(--s-2) 0}

/* 아직 대표 확인이 안 된 빈칸 — 배포 전 검사에서 하나라도 남으면 멈춤 */
.todo{color:var(--accent);font-weight:700}

/* ── 꼬리말(사업자 정보) ── */
.ft{margin-top:var(--s-7);border-top:1px solid var(--line);padding:var(--s-5) 0 var(--s-7);color:var(--muted);font-size:var(--fs-caption);line-height:1.8}
.ft-links{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-bottom:var(--s-3)}
.ft-links a{color:var(--body);font-weight:600}
.ft-links a:hover{color:var(--text)}
.ft-name{color:var(--body);font-weight:700;font-size:var(--fs-small);margin-bottom:var(--s-1)}
.ft dl{margin:0;display:flex;flex-wrap:wrap;gap:0 var(--s-3)}
.ft dl div{display:flex;gap:6px}
.ft dt{color:var(--muted)}
.ft dd{margin:0;color:var(--body);overflow-wrap:anywhere}
.ft dd a{color:var(--body);text-decoration:underline;text-underline-offset:3px}
.ft dd a:hover{color:var(--text)}
.ft-logo{width:28px;height:28px;opacity:.55;margin-top:var(--s-3)}