@charset "utf-8"; /*================================================================== studio.css — 새 틀 (2026-08-27) shared/studio/head.php 가 이 파일 하나만 읽는다. 옛 틀(표 레이아웃)은 css/mall.css 다. 한 페이지가 둘 다 읽는 일은 없다. ★ 무엇이 다른가 — mall.css 와의 차이 넷 ① 폭이 고정이 아니다. mall.css 는 --page-w:1000px 고정 + body{zoom} 사다리로 화면 크기에 대응했다. 여기는 창을 따라 흐른다. 🔴 그래서 이 파일을 쓰는 페이지에는 **세로 높이 예산(779px)이 없다.** zoom 사다리가 없으므로 페이지가 길어져도 꼬리말이 잘리지 않는다. ② DOCTYPE 이 (full standards) 다. mall.css 쪽은 표 레이아웃 때문에 HTML 4.01 almost-standards 에 묶여 있다. ③ 리셋이 있다 (* {margin:0;padding:0;box-sizing:border-box}). mall.css 는 일부러 리셋을 안 넣었다 — 넣으면 표 레이아웃이 어긋난다. ④ 모바일이 여기 같이 산다. m/css/m.css 를 쓰는 별벌 페이지는 옛 틀이 남아 있는 동안만 존재한다. ★ 색 — mall.css 의 :root 색 블록과 **같은 값을 다시 적어뒀다.** 두 파일이 동시에 살아 있는 동안은 어쩔 수 없다(한 페이지가 둘 다 읽지 않으므로 공유할 방법이 없다). mall.css 쪽 색을 고치면 여기도 같이 고칠 것. 옛 틀이 전부 사라지면 mall.css 와 함께 이 주석도 지운다. 🔴 새 코드에 #RRGGBB 를 직접 쓰지 말 것 (CLAUDE.md 12절). 아래 이름을 쓴다. ★ 크기 — rem 하나로 흐른다 폭·여백·글자를 전부 rem 으로 적고, html{font-size} 만 창 크기를 따라 움직인다. 그래서 화면이 커지면 레이아웃 전체가 같은 비율로 커진다. mall.css 의 zoom 사다리가 하던 일을 표준 방식으로 바꿔 놓은 것이다. (zoom 은 표준이 아니고 Firefox 가 오래 지원하지 않았다) ==================================================================*/ /*------------------------------------------------------------------ 글꼴 — mall.css 와 같은 파일 하나를 나눠 쓴다. @font-face 를 두 파일에 적어도 브라우저는 같은 URL 이면 한 번만 받는다. ------------------------------------------------------------------*/ @font-face{ font-family: 'Pretendard'; src: url('/fonts/PretendardVariable.woff2') format('woff2-variations'); font-weight: 45 920; font-style: normal; font-display: swap; } /*================================================================== 리셋 ★ box-sizing:border-box — 이 한 줄이 없으면 padding 을 줄 때마다 폭이 늘어나서, 아래의 % 격자 계산이 전부 어긋난다. ==================================================================*/ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box } ul, ol { list-style:none } /* 링크는 색을 물려받는다. 밑줄은 필요한 곳에서만 다시 켠다. ★ 이 사이트에서 링크는 대부분 사진과 메뉴다 — 파란 밑줄이 붙으면 그것이 사진보다 먼저 눈에 들어온다. 글 안의 링크만 .st-a 로 밑줄을 준다. */ a { color:inherit; text-decoration:none } /* 제목 태그는 뜻(문서 구조)만 갖고 모양은 갖지 않는다. ★ 그래야 "여기는 h2 여야 하는데 크기가 안 맞아서 div 로 둔다" 가 없어진다. 크기는 자리마다 클래스가 정한다. */ h1, h2, h3, h4, h5, h6 { font-size:inherit; font-weight:inherit } img, picture, svg, video { display:block; max-width:100% } button { font:inherit; color:inherit; background:none; border:0 } /*================================================================== 뿌리 — 크기 사다리 html{font-size} 하나가 페이지 전체의 축척이다. 좁은 화면 14px ~ 16px 로 흐른다 (창 폭의 3.6%) 901px 이상 16px 고정 — 여기부터는 레이아웃이 자리를 잡는다 아주 넓은 화면 17 -> 18px. 손님 연령대가 높아 큰 화면에서 더 키운다 🔴 px 로 적은 이유 — rem/em/% 로 적으면 브라우저 기본 글자크기 설정이 두 번 곱해진다. 대신 clamp() 의 min 을 14px 로 잡아 너무 작아지지 않게 했다. ※ 사용자가 브라우저에서 글자를 키우면 여기 값과 무관하게 커진다 (font-size 를 px 로 적어도 브라우저 확대(ctrl +)는 그대로 먹는다). ==================================================================*/ html{ /* 🔴 하한 15px — 14px 이었을 때 tools/responsive-check.js 가 320px 화면에서 **가장 작은 글씨 9.6px** 을 잡아냈다. 주 고객층 연령을 생각하면 그 크기는 못 읽는다. 하한을 올리고, 가장 작은 클래스도 .75rem 으로 올렸다 (지금은 어느 폭에서도 11px 아래로 안 내려간다). */ /* 🔴 하한 15px — 14px 이었을 때 tools/responsive-check.js 가 320px 화면에서 **가장 작은 글씨 9.6px** 을 잡아냈다. 주 고객층 연령을 생각하면 그 크기는 못 읽는다. 하한을 올리고 가장 작은 클래스도 .75rem 으로 올려서, 지금은 어느 폭에서도 11.3px 아래로 안 내려간다. ★ 마크업이나 글자 크기를 고친 뒤에는 그 도구를 다시 돌릴 것 — 넘침 개수와 함께 '가장 작은 글씨' 도 폭마다 찍어준다. */ font-size: clamp(15px, 3.6vw, 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* 스크롤바가 있는 페이지와 없는 페이지 사이에서 창 폭이 달라지는 것을 막는다. mall.css 의 html{overflow-y:scroll} 과 같은 목적인데, 이쪽은 표준 속성이라 스크롤바 자리를 미리 잡아둘 뿐 늘 막대를 그리지는 않는다. */ scrollbar-gutter: stable; } @media (min-width:901px){ html{ font-size:16px } } @media (min-width:1600px){ html{ font-size:17px } } @media (min-width:2000px){ html{ font-size:18px } } :root{ /*--- 색 (mall.css 의 :root 와 같은 값 — 위 머리말 참고) ---*/ --bg: #ffffff; --bg-raise: #F7F7F6; --color-text: #1A1A1A; --color-dim: #6E6C67; --color-mute: #8C8A85; --rule: #E2E0DC; --line: #D8D6D1; --color-brand:#8A5A0C; --color-now: #8C8A85; /* "지금 여기" — 안 고른 것이 검정일 때만 통한다 */ --color-danger:#B3261E; --color-accent: #1A1A1A; /* 선택 테두리·강조선·화살표 */ --color-on-accent:#ffffff; /* 위 색을 바탕으로 깔았을 때 그 위 글자 */ /* 덮개 메뉴(좁은 화면)의 검은 막. 색이 아니라 '가림막' 이라 별도로 둔다 */ --scrim: rgba(0,0,0,.88); /*--- 글꼴 ---*/ --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; /* 아래 셋은 shared/layer_popup.php 가 자기