/* 공통 껍데기 — 머리 · 공지 띠 · 검색 패널 · 모바일 서랍 · 꼬리말 * ═══════════════════════════════════════════════════════════════════════ * 왜 파일 하나로 두나 * 전에는 이 규칙들이 index · category · howto · product 에 네 벌로 * 복사돼 있었다. 머리를 한 번 고치려면 네 곳을 같이 고쳐야 했고, * 실제로 꼬리말은 index 만 새 판이고 category · howto 는 옛 판으로 * 남아 화면마다 다른 꼬리말이 나왔다. * * 무엇이 여기 있고 무엇이 없나 * 여기 있는 것 — 머리(.hd) · 공지 띠(.nbar) · 검색 패널(.spanel) · * 모바일 서랍(.mnav) · 꼬리말(footer), 그리고 그것들이 쓰는 토큰. * 여기 없는 것 — 바탕 초기화(*·body·a·button)와 각 화면의 본문. * product.html 의 본문은 tw.css 가 그리므로 그 기준을 덮으면 안 된다. * * 토큰 * index.html 이 쓰는 값과 같다(index 는 본문용 토큰을 더 갖는다). * 각 화면의 :root 가 뒤에 오므로 값이 겹쳐도 같은 값으로 덮인다. * ═══════════════════════════════════════════════════════════════════════ */ :root{ --blue:#006BC8; --blue-d:#005AA8; --blue-l:#E8F1FA; --red:#FC1D01; --orange:#FF8000; --org-l:#FFF7EE; --g500:#1EC95B; --g600:#18A149; --g50:#ECFBF2; --g200:#A5E9BD; --n50:#F9F9F9; --n100:#E2E2E5; --n200:#CCCCCC; --t01:#000; --t02:#333; --t03:#666; --t04:#999; --bd:#DADADA; --bd-l:#E4E8F1; --bg-sky:#F3FAFD; --r1:3.6px; --rd8:8px; --rd12:12px; --rdf:9999px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s15:60px; --s20:80px; --s30:120px; /* 본문 좌우 여백. 1920 에서 120px(그리드 시안), 1240px 아래에서 20px. 그 사이(1240~1440)는 본문이 1200px 으로 고정된다 — 예전 1208px 과 사실상 같아서 노트북에서는 아무것도 달라지지 않는다. 1440 을 넘어서면 여백이 120px 에 멈추고 본문이 1680px 까지 자란다. */ --gut: clamp(20px, calc((100vw - 1200px) / 2), 120px); --h:60px; } /* 좌우만 정한다. padding 단축 표기로 적으면 위아래까지 0 으로 못박아, 이 클래스를 쓰는 tw 화면의 pb-14 같은 아래 여백이 통째로 죽는다 (실제로 장바구니·주문서·상세의 바닥 여백이 사라졌다). */ /* 본문 칸. 폭 자체는 1920 까지 열어 두고 안쪽 여백(--gut)이 글의 폭을 정한다 — 1920 에서 1680px 이 남는다(118px 12칸 + 24px 거터 11개). padding 을 단축으로 적으면 아래 여백까지 0 이 되어 장바구니·주문서의 바닥 여백이 사라진다. 좌우만 적는다. */ .wrap{width:100%;max-width:1680px;margin:0 auto; padding-left:var(--gut);padding-right:var(--gut)} /* ── 껍데기 안의 단추 초기화 ───────────────────────────────────────── 껍데기는 제 모양을 스스로 정한다. 화면마다 button 초기화가 있다고 믿으면 안 된다 — 공지·404 는 tw.css 도 안 쓰고 제 초기화도 없어서, 검색·로그아웃·햄버거가 브라우저 기본 회색 상자(2px outset)로 섰다. 아래 규칙들보다 먼저 두어 각 단추가 제 바탕·테두리를 다시 정할 수 있게 한다. 색과 크기는 주지 않는다 — 이 규칙이 .ubtn 보다 선택자 점수가 높아서,