/* 랜딩 — 10단계 재설계
   🔴 tokens.css 변수만 쓴다. 색·크기를 직접 박지 않는다.
      (이전 판은 색을 40곳 넘게 직접 박아 두어 배경을 바꾸자 전부 어긋났다)
   🔴 사진이 주인공, 화면은 액자다. UI 가 사진보다 눈에 띄면 진 것이다. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-sans);background:var(--c-bg);color:var(--c-text);
  font-size:var(--t-body);line-height:var(--t-body-lh);-webkit-font-smoothing:antialiased;
  /* 16단계 실측 — **한글이 낱말 한가운데서 잘려 다음 줄로 넘어갔다.**
     「무료배송 · 주/문한 날」 「알려드립니/다」 「따로 사서 끼/우지」
     「선명하게 나옵니/다」 「사장님 사진으로 바꿔 주/세요」 — 다섯 군데를 눈으로 셌다.
     브라우저 기본값(word-break:normal)은 한글을 **아무 글자에서나** 끊는다.
     영문은 낱말 단위로 끊기지만 한글은 그렇지 않다 — keep-all 이 없으면 반드시 이렇게 된다.
     keep-all 만 주면 긴 URL·번호가 화면을 밀어내므로 break-word 를 함께 준다. */
  word-break:keep-all;overflow-wrap:break-word}
img,video{max-width:100%;display:block}
/* 🔴 16단계 owner 지적 — 「끄는 부분이 마우스 오버시 화이트가 아니고 블랙 배경같은데」
   원인: 손가락으로 누를 때 브라우저가 씌우는 **기본 검은 반투명**
   (-webkit-tap-highlight-color 기본값 = rgba(0,0,0,.18) 안팎).
   우리 CSS 는 흰색 35% 가 맞는데, 그 위에 브라우저가 검은 막을 한 겹 더 덮은 것이다.
   PC 마우스에서는 안 나오고 **폰에서 누를 때만** 나와서 여태 못 봤다.
   🔴 mixtiles 는 이걸 끈다 (앞선 감사에서 「우리는 안 쓴다」고 이미 지적됐다).
   끄더라도 누른 느낌은 남는다 — 우리는 :active 에서 크기가 줄어드는 반응을 이미 준다. */
html{-webkit-tap-highlight-color:transparent}
/* 🔴 서랍·팝업·도움말을 끝까지 내렸을 때 **뒤 페이지가 따라 움직이는 것**(스크롤 넘김)도 막는다.
   mixtiles 가 쓰는 것이고, 같은 감사에서 함께 지적됐다. */
.menu,.help-body,.lg-box,.help-panel{overscroll-behavior:contain}

a{color:inherit}
.wrap{max-width:var(--w-content);margin:0 auto;padding:0 var(--s5)}

/* 🔴 건너뛰기 링크 — 키보드 사용자가 내비를 매번 지나치지 않게 (WCAG 2.4.1) */
.skip{position:absolute;left:-9999px;top:0;background:var(--c-btn-bg);color:var(--c-btn-fg);
  padding:var(--s3) var(--s4);z-index:100}
.skip:focus{left:0}

/* ── 헤더 ────────────────────────────────────────────────
   🔴 2026-07-31 실측 (ops/devtools-rules.js · ops/_hdr.js).
      나는 "하나의 고정 헤더가 색만 바뀐다" 고 만들어 놨었다. **mixtiles 는 다르다.**

      폰 (<769px)   header{position:relative; background:#fff;
                           border-bottom:1px solid rgb(235,231,231)}   높이 56+1
                    ☰(12,12) 32×32 · 로고 가운데 · 💬(346,12)
                    색 rgb(43,5,20) / 로고 rgb(71,44,53)
                    🔴 스크롤하면 **상단바가 통째로 사라진다.** 고정 바가 없다
                       (스크롤 0·400·900·1600·2600·4000 여섯 지점에서 확인 —
                        고정 요소는 하단 CTA 하나뿐이었다)

      PC (≥769px)   header{position:absolute; background:transparent; width:100%}  높이 72
                    ☰(20,20) · 로고 가운데(666,29) · 💬(1388,20)  전부 흰색
                    스크롤하면 header 가 y=-1200 으로 밀려나고 **별도의 fixed 바**가 붙는다
                    → .gnb2 참고 */
.gnb{position:relative;z-index:100;
  background:var(--c-surface);border-bottom:1px solid var(--c-hdr-line);padding-top:env(safe-area-inset-top)/* 🔴 viewport-fit=cover 를 켜면 내용이 노치 밑까지 올라간다.
     상단 띠가 시계·카메라 구멍에 가리지 않게 그만큼 내린다. */}
.gnb .in{display:flex;align-items:center;
  padding:0 12px;min-height:56px}
/* 🔴 폰에서는 로고·아이콘이 어두운 자주다 (흰 배경이므로). mixtiles 실측값. */
.gnb .brand{color:var(--c-hdr-logo)}
.gnb .icon{color:var(--c-hdr-ink)}
.gnb .brand{flex:1;justify-content:center;order:2}
.gnb .icon{order:1}
.gnb .chat-btn{order:3}
/* 첫 화면 헤더에는 CTA 가 없다 (mixtiles 도 없다). 스크롤 후 .gnb2 가 갖는다. */
.gnb .cta{display:none}
/* 아이콘 버튼 — 반투명 동그라미 (mixtiles) */
/* 🔴 mixtiles 는 아이콘에 **배경 원이 없다.** 우리는 회색 원을 깔아 두어
   무겁고 눈에 먼저 띄었다 — 첫 화면의 주인공은 사진이어야 한다. */
.icon{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);border-radius:var(--r-pill);
  border:0;background:none;color:var(--c-text);
  line-height:1;cursor:pointer;text-decoration:none}
.icon svg{display:block}
/* 🔴 mixtiles 아이콘은 **32×32** 이고 폰에서 x=12, PC 에서 x=20 에 놓인다.
   우리는 누르는 영역을 48px 로 잡아 놔서(손가락 규칙) 중심이 8px 씩 밀렸다.
   → 보이는 그림은 32px 로 키우고, **바깥 여백을 -8px** 줘서 자리만 32px 인 척한다.
     누르는 영역은 48px 그대로 남는다. 보이는 모습은 같고 손가락은 편하다.
   (WCAG 2.5.5 는 '보이는 크기' 가 아니라 '누를 수 있는 크기' 를 본다) */
.gnb .icon,.gnb2 .icon{margin:-8px}
.gnb .icon svg,.gnb2 .icon svg{width:32px;height:32px}
/* 🔴 owner 지적(2026-08-01): "☰ 가 💬 보다 커 보인다". 재보니 맞는 말이었다.
   **상자는 둘 다 32×32 로 같은데 그 안에 그려진 그림이 달랐다.**
     ☰   그림 24.0 × 16.0px   (viewBox 24 · 선 3줄이 x=4~20, 길이 16단위)
     💬  그림 20.8 × 18.1px   (viewBox 32 · 면으로 그린 말풍선)
   가로로 3.2px 더 넓으니 눈에는 ☰ 가 더 크게 보인다. 상자를 맞춰도 소용없다 —
   **그려진 그림**을 맞춰야 한다.
   → index.html 의 ☰ path 두 곳(첫 화면 헤더·스크롤 고정 바)에서 선 길이를
      16 → 13.6 단위로 줄였다. 그림 폭이 20.8px 이 되어 💬 와 **정확히 같다.**
   🔴 세로는 16.0 vs 18.1px 로 2px 남겨 뒀다. 가로줄 아이콘과 둥근 아이콘은
      세로까지 같게 만들면 오히려 ☰ 가 뭉툭해 보인다 (둥근 쪽이 시각적으로 작아 보이는
      착시 때문에 원형 아이콘은 원래 조금 크게 그린다).
   🔴 여기 숫자를 바꾸려면 index.html 의 path 도 같이 봐야 한다. CSS 만으로는 못 맞춘다. */
/* 🔴 owner 추가 요청(2026-08-01): "☰ 가 10% 정도 더 작아야 될 것 같다".
   폭을 💬 와 **똑같이** 맞췄더니(20.8 = 20.8) 이번엔 ☰ 가 커 보인다고 하셨다 — 맞는 감각이다.
   가로줄 3개짜리는 폭을 가득 채워 그리므로, 같은 폭이어도 둥근 아이콘보다 크게 읽힌다.
   숫자로 같게 만드는 것과 **눈에 같게 보이는 것**은 다르다. 눈 쪽을 따른다.
   🔴 path 를 또 줄이지 않고 **svg 상자만 0.9배**로 줄인다.
      path 만 줄이면 선 굵기(stroke-width:2)는 그대로라 아이콘이 오히려 두꺼워 보인다.
      상자를 줄이면 선 굵기까지 같은 비율로 줄어 **모양이 안 변한 채 작아진다.**
   그래서 32 → 28.8px (0.9배) 로 줄였다.
   🔴 그런데 보시고 다시 **"10% 올려달라"** 고 하셨다 (같은 날). 28.8 × 1.1 = 31.68px.
      결과적으로 줄이기 전(32px)과 0.2px 차이라 **거의 되돌아온 셈**이다.
      숫자를 32 로 되돌리지 않고 31.68 로 둔 이유는, owner 가 말한 값이 그것이기 때문이다.
      다음에 또 조절할 일이 생기면 이 값에 배수를 곱하면 된다.
   결과:  ☰ 20.6 × 15.8px (선 2.64px)  ·  💬 20.8 × 18.1px (그대로)
   🔴 누르는 상자는 48px 그대로다. 손가락 규칙은 건드리지 않는다.
   🔴 위 `.gnb .icon svg` 규칙과 특정도가 같으므로 **반드시 그 아래**에 있어야 한다. */
.gnb .menu-btn svg,.gnb2 .menu-btn svg{width:31.68px;height:31.68px}
/* 🔴 채팅 아이콘은 **선이 아니라 면(fill)** 으로 그린 그림이다 (mixtiles 원본).
   위의 선 굵기·색 규칙이 적용되면 모양이 뭉개진다 — 이 아이콘만 따로 잡는다. */
.chat-svg{fill:currentColor;stroke:none}
.chat-svg path,.chat-svg rect{fill:currentColor;stroke:none}

/* ── PC 전용 고정 바 (히어로를 지나면) ─────────────────────────
   🔴 mixtiles 실측 규칙 그대로:
        position:fixed; top:0; z-index:100; height:56px; padding:12px;
        display:flex; justify-content:space-between; align-items:center;
        background:rgba(251,249,249,.9); backdrop-filter:blur(92px)
      안쪽 배치: ☰(12,12) + 로고(53,21) 왼쪽 묶음 · 버튼(1338,15) 90×27 오른쪽 */
.gnb2{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  height:56px;padding:12px;
  background:rgba(251,249,249,.9);
  backdrop-filter:blur(92px);-webkit-backdrop-filter:blur(92px);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease)}
.gnb2.is-on{opacity:1;transform:none;pointer-events:auto}
/* 🔴 왼쪽 묶음 — ☰ 와 로고가 **붙어 있다.** 실측 간격 53-(12+32)=9px. */
.gnb2-l{display:flex;align-items:center;gap:9px}
.gnb2 .icon{color:var(--c-hdr-ink)}
.gnb2 .brand{height:auto;color:var(--c-hdr-logo)}
/* 🔴 mixtiles 버튼은 90×27 이고 색이 rgb(235,35,113)=#EB2371 이다.
   색만 우리 #E51566 을 쓴다 — #EB2371 은 흰 글자 대비 4.19 로 기준(4.5) 미달이고,
   두 색은 **눈으로 구분되지 않는다** (tokens.css 에 그 근거가 이미 적혀 있다). */
.gnb2 .cta{display:inline-flex;align-items:center;justify-content:center;
  height:27px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--c-btn-point-bg);color:var(--c-btn-point-fg);
  font-size:13px;font-weight:700;letter-spacing:.1px;
  text-decoration:none;white-space:nowrap;
  transition:filter var(--m-fast) var(--m-ease),transform var(--m-fast) var(--m-ease)}
.gnb2 .cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.gnb2 .cta:active{transform:scale(var(--m-press))}
/* 🔴 16단계 owner 결정 — **폰에서도 이 바가 따라온다.**
   실측: mixtiles 는 폰에서 스크롤하면 상단바가 통째로 사라진다
        (스크롤 300·600·900·1400·2200 다섯 지점 전부 없음. 우리도 같았다).
   그런데 사장님이 "모바일 네비게이션바는 스크롤 하면 안따라오던데" 라고 지적하셨고,
   **따라오게** 하기로 정하셨다. 여기는 mixtiles 와 일부러 다르게 간다.
   이유: 스크롤을 내린 뒤 메뉴(☰)를 누르려면 맨 위까지 되돌아가야 했다.

   🔴 폰에서는 「사진 올리기」 버튼을 이 바에 **넣지 않는다.**
      하단 고정 핑크 바가 이미 그 역할을 한다 — 같은 버튼이 위아래로 둘이면
      어느 것을 눌러야 할지 알 수 없고, 좁은 폭에서 로고 자리도 빼앗는다. */
@media (max-width:768px){
  .gnb2{height:56px;padding:12px}
  .gnb2 .cta{display:none}
}

/* ── PC 첫 화면 헤더 — 사진 위에 투명하게 겹친다 ────────────── */
@media (min-width:769px){
  /* 🔴 fixed 가 아니라 absolute 다. 스크롤하면 그냥 위로 사라져야 한다. */
  .gnb{position:absolute;top:0;left:0;right:0;
    background:transparent;border-bottom:0}
  .gnb .in{padding:0 20px;min-height:72px}
  .gnb .brand,.gnb .icon{color:#FFFFFF}
  .gnb .brand{text-shadow:0 1px 10px rgba(0,0,0,.5)}
  /* 🔴 text-shadow 는 글자에만 걸린다. 아이콘은 그림(SVG)이라 안 먹는다. */
  .gnb .icon svg{filter:drop-shadow(0 1px 6px rgba(0,0,0,.55))}
  /* 🔴 로고 교체 (2026-07-31). 여기서만 배경이 **사진**이므로 흰색 로고를 쓴다.
     경계값 769px 은 위 `.gnb{background:transparent}` 와 **같은 값이어야 한다** —
     하나만 바꾸면 흰 바탕에 흰 로고가 뜨는 구간이 생겨 로고가 사라진다. */
  .gnb .brand .lg-b{display:none}
  .gnb .brand .lg-w{display:block;
    /* 🔴 밝은 사진 위에서 흰 로고가 묻히지 않게 그림자를 준다. 다만 아이콘(6px 번짐)보다
       **훨씬 좁게** 준다 — 로고는 세리프 획이 0.1px 대라 번짐이 넓으면 획이 그 안개에
       파묻혀 흐릿해 보인다. 실제로 6px 로 놨다가 로고만 뿌옇게 보였다. */
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
}

/* 🔴 로고 자리. 지금은 글자, owner 가 파일을 올리면 그림으로 바뀐다.
   자리·정렬이 바뀌지 않도록 높이를 미리 고정해 둔다. */
/* 🔴 mixtiles 로고는 자간을 크게 벌린다. 우리는 좁혀 놔서 덩어리로 뭉쳐 보였다. */
/* 🔴 14단계 3회차: height:32px 로 못 박혀 있어 누르는 상자가 32px 였다.
   min-height 로 바꿔 44px 를 보장한다. 로고 그림은 아래 .brand img 가 32px 로 잡는다 —
   **보이는 크기는 그대로, 누르는 자리만 커진다.** */
.brand{display:inline-flex;align-items:center;min-height:var(--tap);
  /* 🔴 .22em 은 영문 8글자(MIXTILES)에 맞는 값이다.
     한글 2글자(찍소)에 쓰면 「찍 소」 로 벌어져 두 단어처럼 보인다. */
  font-weight:700;font-size:21px;letter-spacing:.10em;
  text-decoration:none;color:var(--c-text)}
/* 🔴 로고 높이 28px (2026-07-31 owner: "조금만 더 작게" → 32 에서 내렸다).
   🔴 로고 파일이 같은 날 한 번 더 교체됐다. 처음 받은 것은 **디도 계열**이라
      세리프 가로획이 원본 0.56 단위 = 화면에서 0.12px 였다. 1픽셀보다 얇으니
      브라우저가 회색으로 뭉개 "흐릿하다" 는 지적이 나왔다 — 파일 자체의 문제였다.
      지금 파일은 획이 굵은 기하학 형태다: 가장 얇은 가로획이 **4.69px**(약 38배).
      크기를 바꿔도 뭉개지지 않는다.
   🔴 비율이 4.085:1 → 4.560:1 로 바뀌었다. 같은 28px 높이에서 폭이 114 → 128px 다.
      좁은 폰(320px)에서 헤더가 넘치지 않는지는 ops/audit-r1.js 가 본다. */
/* 🔴 16단계 owner: "로고 사이즈도 너무 큰것같은데 벨런스좋게 최적화해줘"
   실측 대조 (390px 폰):
     mixtiles  로고 98×**12**  ·  ☰ 아이콘 32px  →  헤더(56px)의 **21%**
     찍소(전)  로고 128×**28** ·  ☰ 아이콘 32px  →  헤더의 **50%**  = 높이 2.33배
   🔴 높이를 12px 로 맞추면 폭이 55px 이 되어 로고가 사라진다 —
      저쪽 글자는 가로세로비 8.2:1(MIXTILES 8글자)이고 우리는 4.56:1(JJIKSO 6글자)이라
      **둘 다 맞출 수 없다.** 눈에 들어오는 것은 「가로로 얼마를 차지하나」 이므로 폭을 맞춘다.
     20px → 폭 91px (저쪽 98) · 화면폭의 23.4% (저쪽 25.1%) · 아이콘 32px 에 안 눌린다.
   🔴 home.css 와 shop.css **양쪽을 같이** 바꿔야 한다. 한쪽만 고치면 화면을 넘길 때
      로고가 커졌다 작아져 같은 사이트가 아닌 것처럼 보인다. */
.brand img{height:20px;width:auto;display:block}
/* 🔴 폰 헤더·스크롤 고정 바·서랍은 전부 **흰 바탕**이다 → 검정 로고.
   흰색 로고는 위 PC 첫 화면 헤더에서만 켠다. 기본값은 꺼 둔다. */
.brand .lg-w{display:none}
@media (min-width:768px){ .brand{font-size:22px} }
.gnb .sp{flex:1}
.gnb .cart{display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s3);text-decoration:none;
  font-size:var(--t-sm);color:var(--c-text)}

/* ── 버튼 ────────────────────────────────────────────────
   🔴 화면당 주 버튼은 하나. 두 개면 손님이 무엇을 할지 고민하게 된다. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  /* 🔴 mixtiles 실제 값은 알약(999px)이 **아니라** radius 15px 이었다.
     내가 알약으로 만들어 놨었는데, 크롬으로 직접 재보니 달랐다.
     히어로 버튼 높이도 60px 이다(내가 56px). */
  min-height:60px;padding:0 var(--s7);border-radius:15px;
  font:inherit;font-size:var(--t-btn);font-weight:var(--t-btn-w);cursor:pointer;
  border:1px solid var(--c-btn-bg);background:var(--c-btn-bg);color:var(--c-btn-fg);
  /* 🔴 opacity 만 이어 주고 있었다. 그래서 색이 바뀌는 버튼은 **툭 튀었다.**
     mixtiles 는 0.2s 로 이어 준다 (실측). 바뀔 수 있는 것을 전부 적는다. */
  text-decoration:none;
  transition:opacity var(--m-base) var(--m-ease),
             background var(--m-base) var(--m-ease),
             color var(--m-base) var(--m-ease),
             border-color var(--m-base) var(--m-ease),
             transform var(--m-fast) var(--m-ease)}
.btn:hover{opacity:.88}
.btn--sec{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border-fn)}
.btn--point{background:var(--c-btn-point-bg);color:var(--c-btn-point-fg);
  border-color:var(--c-btn-point-bg)}
.btn--full{display:flex;width:100%}
/* 🔴 이 규칙은 **반드시 .btn 뒤에 와야 한다.** 앞에 두면 뒤의 .btn 이 color 를
   덮어써 흰 바탕에 흰 글자가 되어 버튼이 안 읽힌다. 실제로 그렇게 나갔다.
   (선택자 우선순위가 같으면 나중에 쓴 것이 이긴다)

   여기까지 오는 데 네 번 틀렸다. 짧게만 남긴다 —
     1차 흰 알약 94%          → "안 똑같다"
     2차 어두운 유리          → "모두 반투명이고 테두리도 없는데"
     3차 반투명+진한 자주 글자 → "완전 틀리잖아, 불투명도 효과라니까"
     4차 **개발자도구 규칙 원문을 그대로 가져옴** ← 지금
   1~3차는 전부 **computed 값만 읽고 규칙을 안 읽어서** 생긴 일이다. */
/* ══════════════════════════════════════════════════════════════════
   🔴 2026-07-31 — **크롬 개발자도구 규칙 원문**을 그대로 가져와 맞췄다.
      (CDP 의 CSS.getMatchedStylesForNode — DevTools Styles 탭이 쓰는 그 API.
       ops/_devtools.js. getComputedStyle 은 계산된 값이라 :hover 가 안 보인다.)

   그동안 세 번 틀린 이유: **computed 값만 읽고 규칙을 안 읽었다.**
   그래서 (1) hover 의 blur 40→60 을 놓쳤고 (2) **모바일 규칙이 아예 다른 것**을
   몰랐다. mixtiles 는 폰에서 유리 버튼을 안 쓴다.

   ── mixtiles 실제 규칙 ────────────────────────────────────────────
   모바일 (<769px)  .coclEH
       width:100%; height:52px; max-height:52px; padding:0; border:0;
       background-color:rgba(236,0,91,.88); border-radius:10px;
       color:#fff; font-size:20px; font-weight:700; letter-spacing:.1px;
       transition:transform .1s;
       :hover  background-color:rgb(215,42,110)
       ※ 히어로 안이 아니라 **화면 하단 고정** (position:fixed · 372×52 · y=783)

   PC (@media min-width:48.0625em)  .fifPkI
       color:white; font-size:20px; font-weight:700; border-radius:15px;
       background:rgba(231,216,225,.3); backdrop-filter:blur(40px);
       padding:20px 40px; outline:none; border:none;
       cursor:pointer; transition:.2s;
       :hover  background:rgba(231,216,225,.7); color:rgb(215,42,110);
               backdrop-filter:blur(60px); transform:scale(.97)

   🔴 딱 하나만 안 베낀다: **outline:none.**
      키보드로 쓰는 분이 지금 어디에 있는지 알 수 없게 된다 (WCAG 2.4.7).
      보이는 모습에는 아무 영향이 없다 — 마우스로는 원래 안 나오는 테두리다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 모바일 기본 — 하단 고정 핫핑크 바 ── */
/* 🔴 모바일 3회감사 [치명] — **뒤 페이지 글자가 버튼 안에 겹쳐 읽혔다.**
     「사진 올리기」가 두 벌(버튼 글자 + 뒤 구역 제목), 「어떤 크기로 뽑을까요?」가
     버튼을 왼쪽 끝에서 오른쪽 끝까지 관통했다. 액자 그림도 버튼을 뚫고 보였다.
   원인은 owner 가 지시하신 **불투명도 85%** 가 이 고정 버튼에도 걸린 것이다.
   🔴 owner 지시를 되돌리지 않는다 — **문맥을 가른다.**
     85% 는 히어로 **안**(제목·가격줄·PC 유리버튼)에 그대로 두고,
     폰 하단 고정 버튼만 불투명으로 되돌린다. 거기는 사진 위가 아니라 **본문 위**다.
   🔴 버튼 위아래 9px 틈으로도 본문이 비쳤다 — mixtiles 처럼 서리판을 깐다
     (저쪽 실측: rgba(253,251,252,.5) + blur(20px), 판 390×70, 버튼 372×52). */
/* 🔴 2026-08-02 — 사장님이 아이폰에서 「사진 올리기 버튼이 안 보인다」고 하셨다.
   원인: 이 바가 화면 **맨 아래 끝**(bottom:0)에 붙어 있는데,
   아이폰 사파리는 그 자리에 **자기 주소창**을 띄우고, 홈 인디케이터(가로 막대)도 거기 있다.
   헤드리스 크롬에는 그 둘이 없어서 검사는 「보인다」고 답했다 — 검사가 못 보는 자리였다.
   → 안전영역만큼 아래를 띄운다. 그 값은 기기가 알려준다 (아이폰 34px · 안드로이드 0).
   🔴 max() 를 쓴다. 안전영역이 0인 기기에서도 원래 여백 9px 는 지킨다. */
#herobar{position:fixed;left:0;right:0;bottom:0;z-index:35;
  background:rgba(253,251,252,.5);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:9px;padding-bottom:max(9px, env(safe-area-inset-bottom));
  display:flex}
.btn--glass{width:100%;height:52px;min-height:52px;max-height:52px;
  padding:0;border:0;border-radius:10px;
  /* 🔴 3회감사 — 12% 비쳐서 **뒤 글자가 버튼 안에 겹쳐 읽혔다.**
     owner 승인 예외는 「이 분홍색·이 대비」이지 「뒤가 비치는 것」이 아니다.
     색조는 그대로 두고 불투명하게만 바꾼다 (눈으로는 거의 같다). */
  background:rgb(236,0,91);color:#FFFFFF;
  font-size:20px;font-weight:700;letter-spacing:.1px;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  transition:transform .1s;opacity:.85}
/* 🔴 폰 하단 CTA 는 배경색 **하나만** 바뀌었다 (WCAG 1.4.1).
   폰에는 마우스가 없어 실제로는 안 보이지만, 색 하나에만 기대는 습관을 남기지 않는다.
   🔴 이 규칙을 파일 끝에 따로 쓰면 `.btn--glass:hover` 가 **두 벌**이 되고,
      대비 검사가 배경 없는 두 번째 벌을 읽어 "색을 못 읽음" 으로 실패한다.
      한 벌로 합쳐 둔다. */
.btn--glass:hover{background:rgb(215,42,110);opacity:1;transform:scale(var(--m-press))}
/* 🔴 하단 바가 마지막 구역을 가린다. 그만큼 아래를 비워 둔다. */
/* 🔴 마무리 버튼이 보이면 하단 고정 바를 접는다 (app.js watchClosing).
   움직임을 끈 분에게도 갑자기 사라지지 않게 부드럽게 내린다. */
#herobar{transition:opacity var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease)}
#herobar.is-off{opacity:0;transform:translateY(100%);pointer-events:none}
/* 🔴 폰 하단 고정 버튼만 불투명으로. 히어로 안의 85%(owner 지시)는 건드리지 않는다. */
#herobar .btn--glass{opacity:1}
/* 🔴 바가 마지막 구역을 가린다. 안전영역까지 더해 비운다. */
body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}

/* 🔴 마우스를 올렸을 때 — mixtiles 를 **실측해서** 따라간다.
     평상시  rgba(231,216,225,.30) · 흰 글자
     올림    rgba(231,216,225,.70) · rgb(215,42,110) 핑크 글자 · scale(0.97)
     누름    올림과 같음  ← mixtiles 는 **누를 때가 아니라 올릴 때** 줄어든다

   🔴 owner 결정(2026-07-31): **mixtiles 값을 그대로 쓴다.**
      대비는 기준 미달이다. 세 번 알려 드렸고 세 번 다 "똑같이 해 달라" 셨다.
      기록만 남긴다 — 20px/700 = 큰 글씨, AAA 기준 4.5:1 인데 실측은 이렇다:

        PC 평상시  rgba(231,216,225,.3) + 흰 글자   순백 사진 1.07 · 순검 사진 6.7
        PC 올림    rgba(231,216,225,.7) + #D72A6E   순백 3.81 · 중간 2.61 · 순검 1.68
        모바일     rgba(236,0,91,.88)  + 흰 글자    흰 바탕 4.15 (기준 4.5)

      mixtiles 자기 사이트에서도 같은 값이 나온다 — 그쪽은 히어로 영상을 직접
      골라서 버틴다. 사장님 사진이 밝으면(눈밭·흰 벽·역광) 글자가 흐려진다.
      → 실제 히어로 사진을 올리신 뒤 **그 사진으로 다시 재서** 보고드린다.
      → 모바일은 핑크를 #EC005B → #E51566 로 한 칸만 바꾸면 4.53 으로 통과한다
        (눈으로는 구분이 안 되는 차이다). 원하시면 그때 바꾼다. */
@media (min-width:769px){
  /* 🔴 16단계 owner 지적 — PC 유리 버튼이 **뿌옇게 떠 보였다.**
     폰 하단 고정바를 고치려고 넣은 서리판(rgba(253,251,252,.5) + blur(20px))이
     PC 에도 그대로 걸려, 사진 위 유리 버튼 위에 **흰 반투명 판이 한 겹 더** 덮였다.
     PC 는 고정바가 아니라 히어로 **안**에 있는 버튼이라 판이 필요 없다. 되돌린다. */
  #herobar{position:static;padding:0;justify-content:center;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  /* 🔴 폰 고정바용으로 켠 불투명(.btn--glass{opacity:1})도 PC 에서는 owner 지시(85%)로 되돌린다. */
  #herobar .btn--glass{opacity:.85}
  .btn--glass{width:auto;height:auto;min-height:0;max-height:none;
    /* 🔴 padding 20px 위아래 + 글자 20px = 60px 이어야 mixtiles 와 같다.
       줄 높이를 안 묶으면 본문 줄 높이(1.7)가 들어와 74px 이 된다. */
    padding:20px 40px;line-height:1;border-radius:15px;
    background:rgba(231,216,225,.3);color:#FFFFFF;
    backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
    transition:.2s}
  .btn--glass:hover{background:rgba(231,216,225,.7);color:rgb(215,42,110);
    backdrop-filter:blur(60px);-webkit-backdrop-filter:blur(60px);
    transform:scale(.97);
    /* 🔴 .btn:hover 의 opacity:.88 을 되돌린다. mixtiles 에는 그런 게 없다. */
    opacity:1}
  body{padding-bottom:0}
}

/* ── 히어로 — 전체 화면 사진/영상 위에 흰 글자 (mixtiles 방식) ──
   🔴 좌우 여백 없이 화면을 꽉 채운다. .wrap 을 쓰지 않는다. */
/* 🔴 실측 (2026-07-31): mixtiles 히어로는 **72vh** 다 — 폰 844→608, PC 900→648.
   나는 78vh 로 만들어 놔서 한 화면을 더 많이 먹었다.
   안쪽 여백도 44px 10px 로 정해져 있다.
   🔴 그리고 **세로 정렬이 화면 크기마다 다르다.**
        폰  : 제목이 **위쪽에 붙는다** (y=101 = 헤더 57 + 여백 44)
              → 가운데였으면 y=309 이어야 하는데 아니었다
        PC  : 가운데 (y=245, 계산상 241)
      나는 둘 다 가운데로 만들어 놔서 폰에서 제목이 200px 아래에 있었다. */
/* 🔴 2026-08-02 — 여기 있던 `overflow:hidden` 을 `.hero .shot` 으로 옮겼다.
   그 규칙은 **영상을 자르려고** 있던 것이다 (영상이 118.94% 크기라 삐져나온다).
   그런데 그것이 히어로 안의 `position:fixed` 단추까지 잘랐다 —
   크롬은 안 자르고 **iOS 사파리만** 자른다. 사장님 아이폰에서 「사진 올리기」가 통째로 사라졌다.
   🔴 처음에는 단추를 히어로 **밖으로** 꺼내 고쳤는데, 그러니 PC 에서
      `position:static` 인 단추가 흐름을 따라가 **사진 밖 아래로** 밀렸다 (또 사라졌다).
   → 단추는 제자리에 두고, **자르는 일만** 영상 상자로 내린다.
      영상은 `.shot{position:absolute;inset:0}` 이라 거기서 잘라도 결과가 같다. */
.hero{position:relative;min-height:72vh;display:grid;justify-items:center;
  align-items:start;padding:44px 10px;
  background:var(--c-text)}
/* 폰 주소창이 접혔다 펴지며 100vh 가 튀는 문제 — dvh 를 쓸 수 있으면 쓴다 */
@supports (height:100dvh){ .hero{min-height:72dvh} }
/* 🔴 PC 에서는 히어로 내용이 **가운데**다 (폰은 위쪽). mixtiles 실측: 제목 y=245.
   🔴 이 규칙은 반드시 .hero 정의 **뒤에** 있어야 한다.
      처음엔 위쪽 PC 헤더 블록 안에 써 놨는데, 아래의 align-items:start 가
      나중에 나와서 이겨 버렸다 — 제목이 PC 에서도 맨 위(y=44)에 붙었다.
   🔴 헤더가 absolute 라 히어로 위에 그냥 겹친다. 음수 여백으로 당길 필요가 없다. */
@media (min-width:769px){ .hero{align-items:center} }
/* 🔴 16단계 실측 — **폰을 눕히면(가로 모드) 히어로 제목이 헤더 로고를 덮는다.**
   844×390 에서 로고 상자 y22~50, 제목 첫 줄 상자 y38~119 → 세로 12.0px 겹침.
   812×375 · 896×414 · 932×430 도 전부 12.0px (1024×600 이상은 안 겹침).
   원인: 가로 모드에서는 화면 세로가 390px 뿐이라 히어로가 min-height 를 넘겨 커지고,
        align-items:center 가 가운데로 당길 여유가 없어 제목이 헤더(72px) 자리로 올라온다.
   → 세로가 짧을 때는 가운데 정렬을 포기하고 **헤더 아래에서 시작**하게 한다. */
@media (min-width:769px) and (max-height:560px){
  /* 🔴 모바일 3회감사 — 가로 모드에서 히어로가 화면의 **94~98%** 를 먹었다 (mixtiles 72%).
     첫 화면이 거의 전부 히어로라 아래에 뭐가 있는지 안 보인다.
     위 여백을 줄이면 약 73.6% 로 저쪽 대역에 들어온다. 세로 폰에는 영향 없다. */
  /* 🔴 88px 로 줄여도 81~85% 였다(목표 72%). 히어로 높이를 **직접 잡는다** —
     내용이 커져도 화면의 72% 를 넘지 않게 한다. 넘치면 그때 늘어난다. */
  .hero{align-items:start;padding:72px 10px 16px;min-height:0;height:72vh}
  .hero h1{font-size:30px;line-height:36px}
}
/* 🔴 16단계 owner 지적 — 「메인 영상이 mixtiles 는 **좌우에 간격이 있는데** 우리는 없다」
   실측(두 사이트 폭 10종을 같은 조건으로):
        폭      mixtiles          찍소(전)
       320~414  100% 꽉 참        100%  ← 같음
       500      90%  (좌우 25)    100%  🔴
       600      75%  (좌우 75)    100%  🔴
       700      64%  (좌우 125)   100%  🔴
       768      59%  (좌우 159)   100%  🔴
       820 이상  100% 꽉 참        100%  ← 같음
   저쪽은 **영상 폭을 450px 로 못 박아** 두고 화면이 넓어져도 안 늘린다.
   세로로 긴 영상이라 억지로 늘리면 좌우가 크게 잘리기 때문이다.
   🔴 폰(414 이하)과 큰 화면(820 이상)은 이미 같으므로 **그 사이 구간만** 손댄다. */
/* 🔴 자르는 일은 여기서 한다 (위 .hero 주석 참고). 영상이 118.94% 라 반드시 필요하다. */
.hero .shot{position:absolute;inset:0;overflow:hidden}
@media (min-width:415px) and (max-width:819px){
  .hero .shot{left:50%;right:auto;transform:translateX(-50%);width:min(450px,100%)}
  /* 🔴 여백이 생기면 그 자리에 히어로 바탕(어두운 자주)이 드러난다.
     mixtiles 실측: 그 자리가 **흰색 rgb(251,249,249)** 이다 (본문 바탕과 같다).
     어두운 자주로 두면 영상이 검은 액자에 갇힌 것처럼 보인다. */
  .hero{background:var(--c-bg)}
}
/* 🔴 3:2 사진을 세로로 긴 폰 화면에 cover 로 넣으면 좌우가 크게 잘린다.
   위쪽을 기준으로 맞춰 사람·액자가 화면 위쪽에 남게 한다.
   (가운데 기준이면 인물 사진에서 얼굴이 잘리는 일이 잦다) */
/* 🔴 2026-08-05 — **여기 있던 118.94% 확대를 지웠다.** 지운 이유를 남긴다.
   원래 있던 것: `.hero .shot video{position:relative;height:118.94%;top:-9.47%}`
   왜 있었나: 그때 올라와 있던 영상 파일에 **검은 띠가 구워져** 있었다
     (상자 1920×1080인데 그림은 1920×908 — 위 84행·아래 88행이 순검정).
     띠를 화면 밖으로 밀어내려고 1080/908 = 1.1894 배로 키워 두고,
     주석에 「영상을 새로 올리시면 이 두 줄만 지우면 된다」고 적어 뒀다.
   왜 지우나: 사장님이 2026-08-05 00:49 에 **1080×1920 세로 영상**을 새로 올리셨다.
     세 시점(30·120·210 프레임)을 픽셀로 재 보니 **위아래 검은 행이 0**이다. 띠가 없다.
     띠가 없는 영상을 19% 키우면 화질만 버리고 **좌우까지 잘린다** —
     실측(아이폰 12): 상자 390px 인데 영상이 407px 로 그려져 좌우 17px 이 날아갔다. */
.hero .shot img,.hero .shot video{width:100%;height:100%;object-fit:cover;
  object-position:center 35%}

/* ── 🔴 첫 화면 영상은 **올린 그대로의 비율**로 (2026-08-05, owner 지시) ──────
   owner: 「사이즈가 아이폰이랑 갤럭시 다 틀린 것 같은데 · 1080x1920 비율로 해야 하는 거 아니냐」

   그랬다. 상자를 `72vh` 로 잡아 두어 **기기 세로가 다르면 상자 비율이 달라졌고**,
   object-fit:cover 가 그 차이만큼 영상을 잘라 냈다. 실측(2026-08-05):
       아이폰 SE   375×480  비율 0.781 → 영상의 **72.0%** 만 보임 (186px 잘림)
       아이폰 12~15 390×608  비율 0.642 → 84.1%          (115px)
       갤럭시 S8~S10 360×533  비율 0.676 → **83.2%**      (107px)
       갤럭시 S20~   360×576  비율 0.625 → 84.1%          (109px)
     같은 영상인데 기기마다 다른 그림이 보였다. 사장님이 보신 그대로다.

   → 상자 비율을 **영상 비율에 맞춘다.** 그러면 어느 폰에서든 같은 그림이 보인다.
   🔴 9/16 을 코드에 박지 않는다 — app.js 가 실제 영상의 videoWidth/Height 를 읽어
      `--shot-ratio` 로 넣어 준다 (owner 원칙: 동적으로, 하드코딩 없이).
      다음에 다른 비율을 올리셔도 화면이 저절로 따라간다. 9/16 은 값이 오기 전 잠깐 쓰는 기본값이다.
   🔴 **영상일 때만** 건다(.hero--video). 사진(3:2)까지 9:16 상자에 넣으면 좌우가 크게 잘린다.
   🔴 **세로일 때만** 건다. 눕히면(가로) 예전 그대로 72vh 다 —
      가로 화면에서 세로 영상 비율을 그대로 쓰면 상자가 화면 세로의 두 배가 넘는다.
   🔴 `.hero.hero--video` 로 클래스를 둘 겹친다. `.hero{min-height:72dvh}` 와
      우선순위가 같으면 **파일에서 나중에 나온 쪽이 이긴다** — 이 프로젝트에서
      여섯 번 겪은 함정이라, 순서에 기대지 않고 우선순위로 못 박는다.

   🔴🔴 2026-08-05 두 번째 판 — **첫 판은 좌우를 잘랐다. 그대로 적어 둔다.**
      첫 판은 `.hero{aspect-ratio:var(--shot-ratio)}` 였다. 그런데 영상 상자(.shot)는
      바로 위 `@media (min-width:415px) and (max-width:819px)` 에서 **폭이 450px 로 묶여** 있다.
      히어로 높이는 **화면 폭 전체**로 잡히는데 영상 상자 폭은 450 에서 멈추니 둘이 어긋난다:
          실측 480×1000 → 히어로 높이 853, 영상 상자 450×853 = 비율 0.527
                          영상(0.5625)이 cover 로 세로를 채우며 **좌우 30px 이 잘렸다**
      폭 450 이하 폰에서는 안 드러나서 첫 측정(360~430)을 전부 통과했다.
      **재는 구간을 좁게 잡아 놓고 「통일됐다」고 말한 것이 잘못이다.**
      → 높이를 화면 폭이 아니라 **영상 상자의 실제 폭**(min(100vw,450px))에서 뽑는다.
        aspect-ratio 를 안 쓰는 이유가 이것이다 — 그건 제 폭을 기준으로만 잡힌다.
      🔴 min-height 로 준다(height 가 아니라). 글자가 길어지면 상자가 늘 수 있어야 한다.
      🔴 819px 까지 넓힌다 — 450px 묶음이 걸리는 구간이 정확히 거기까지다
        (폴더블 펼친 화면·태블릿 세로가 여기 들어온다). */
@media (max-width:819px) and (orientation:portrait){
  .hero.hero--video{min-height:calc(min(100vw, 450px) * var(--shot-hw, 1.7778))}
}
@media (min-width:900px){ .hero .shot img,.hero .shot video{object-position:center} }
/* 🔴 사진 위 흰 글자는 사진에 따라 안 읽힌다. 다만 **화면 전체를 어둡게 하면
   사진이 죽는다.** 처음에 45%/28%/55% 로 깔았더니 밝은 스튜디오 사진이
   회색 진흙이 됐다 (직접 찍어 보고 알았다).
   → 전체는 아주 옅게만 덮고(사진을 살린다),
     **글자 뒤에만** 부드러운 그늘을 따로 깐다(글자를 살린다). 둘 다 얻는다. */
/* 🔴 나란히 비교해 보니 **타원 그늘이 얼룩처럼 보였다.**
   mixtiles 는 그런 게 없다 — 영상 위에 아주 옅은 위아래 그라데이션만 깔고,
   글자는 **그림자로** 띄운다. 얼룩이 안 생기고 사진이 안 죽는다.
   타원을 걷어내고 같은 방식으로 바꾼다. */
/* ── 🔴 2026-08-01: 영상 위 막을 **삭제했다** (owner 지시) ──────────────
   owner: "영상 위에 레이어가 있어서 영상의 질을 떨어뜨린다 / 그냥 삭제해놔라."
   이제 영상·사진이 **원본 밝기 그대로** 나온다. 덮는 것이 없다.

   🔴 되살릴 일이 생길 때를 위해 지웠던 값과 근거만 남긴다:
        .hero .shot::after{content:'';position:absolute;inset:0;
          background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.55) 32%,
                                             rgba(0,0,0,.56) 72%,rgba(0,0,0,.64) 100%)}
      .55 는 최악(순백 화면)에서도 글자 뒤 배경이 115 이하로 내려가게 잡은 값이었다.
        255 × (1-.55) = 115 → 흰 글자 4.63:1 ≥ 4.5 (큰 글씨 기준)
   🔴 막이 없으므로 흰 제목의 대비는 **올리는 영상·사진에 전적으로 달렸다.**
      밝은 화면을 올리면 제목이 묻힌다 (측정: 이 영상의 밝은 순간 216 → 1.6:1).
      제목은 아래 .hero h1 의 **그림자 세 겹**으로만 버틴다.

   🔴 owner 확인(2026-08-01) — 물어보고 받은 답이다. 추측이 아니다:
        · 영상·사진 **둘 다** 막 없이 둔다 (사진만 다시 씌우지 않는다)
        · 제목은 **그대로 둔다** (그림자를 더 진하게 하지 않는다)
      다음에 "제목이 안 보인다" 는 말이 나오면 이 결정을 먼저 확인할 것. */
/* 🔴 여백은 .hero 가 갖는다(44px 10px). 여기서 또 주면 두 번 밀린다. */
/* 🔴 z-index 를 **주면 안 된다.** 여기 `z-index:1` 이 있었고, 그것이
   폰에서 하단 「사진 올리기」 바 위로 본문 글자가 올라타던 원인이었다
   (owner 지적 2026-08-03 · 「직접 인화합니다」가 핑크 단추를 덮었다).

     왜: z-index 를 주면 이 상자가 **쌓임 맥락**이 된다. 그 안에 든 #herobar 는
         `position:fixed; z-index:35` 지만 그 35 는 **이 상자 안에서만** 통한다 —
         바깥 세상에서 바는 `.in` 과 같은 **1** 로 취급된다.
         아래쪽 `.duo-txt` 도 `z-index:1` 이고 문서에서 **뒤에** 있으니, 같은 1끼리는
         뒤에 온 쪽이 이긴다. 그래서 본문 글자가 고정 바를 덮었다.
     🔴 없어도 된다: `.hero .shot`(배경 사진·영상)이 이 상자보다 **앞**에 있어서
        `position:relative` 만으로도 글자가 사진 위에 온다. z-index 는 필요 없었다.
     🔴 다시 넣지 말 것. 넣는 순간 하단 바가 또 갇힌다. */
.hero .in{position:relative;text-align:center;max-width:760px}
/* 🔴 영상에 좌우 여백이 생기는 구간(415~819px)에서는 **글자도 영상 안에** 있어야 한다.
   안 그러면 흰 바탕으로 삐져나간 글자가 흰색이라 안 읽힌다 (찍어 보고 알았다).
   🔴 이 규칙은 위 원본 **뒤에** 와야 이긴다 — 앞에 뒀다가 또 졌다(일곱 번째). */
@media (min-width:415px) and (max-width:819px){
  .hero .in{max-width:min(450px,100%);padding:0 var(--s4)}
}
/* 🔴 owner: "버튼 사이즈도 작은 것 같은데" — 재보니 **버튼은 모든 폭에서 같았다.**
   작은 건 제목이었다. 폰에서 mixtiles 46.8px · 우리 34px (27% 작음).
   원인: clamp(34px, 7.2vw, 64px) 로 뭉뚱그려 놔서 390px 에서 7.2vw=28px 이
   최소값 34px 로 잘렸다. mixtiles 는 **12vw** 라 46.8px 이 나온다.

   ── mixtiles h1 규칙 원문 (ops/devtools-rules.js) ──
     기본                font-size:12vw; line-height:1.1; font-weight:700
     @media ≥30em(480)   font-size:50px
     @media ≥48.0625em   font-size:68px; line-height:70px; font-weight:600; width:100%
     @media ≥80em(1280)  white-space:unset
   ─────────────────────────────────────────────────
   🔴 자간만 우리 값(--ls-hero, -0.015em)을 지킨다. mixtiles 는 영문이라 normal 이지만
      한글은 큰 글씨에서 자간이 벌어져 보인다 — 글자 크기와는 무관한 문제다. */
/* 🔴 owner 요청(2026-08-01): "간격 넓게". 줄 간격 1.1 → 1.25.
   mixtiles 원문은 1.1 이지만 그건 **영문 기준**이다. 한글은 받침이 아래로 내려와
   1.1 에서는 첫 줄 받침(「담아,」의 쉼표)과 둘째 줄 머리(「소」)가 5px 겹쳤다 — 실측값이다.
   1.25 면 두 줄 사이가 12px 뜬다. 원본 규칙에서 의도적으로 벗어나는 곳이니 지우지 말 것. */
/* 🔴 16단계 실측 — 제목 줄높이가 mixtiles 보다 벌어져 있었다.
     폰  mixtiles 51.48px  ·  우리 58.5px  (46.8 × 1.25)
     PC  mixtiles 70px     ·  우리 85px    (68 × 1.25)
   두 줄짜리 제목이라 벌어진 만큼이 그대로 눈에 띈다. 저쪽 비율(1.10)로 맞춘다. */
/* 🔴 owner 지시(2026-08-01) — **글자를 줄이고, 한 줄로, 불투명도 90%.**
     크기  폰 12vw(46.8px) → 9vw(35.1px) → **8vw(31.2px)** · PC 68 → 56 → **48px**
     한 줄  index.html 의 <br> 을 뺐다. 폭이 좁으면 저절로 두 줄이 된다
     투명  90% → 80% → **85%** — 사진 위에 얹히는 글자라 조금 물러나 보이게 */
/* 🔴 owner 선택(2026-08-01) — 견본 3안 중 **2번(두껍게)** 을 고르시고 750 으로 조정.
     1 원본(폰700/PC600) · 2 두껍게(900) · 3 둥근 주아체 를 실제 화면에 올려 눈으로 고르셨다.
     굵기만 올린다 — 글꼴(Pretendard)·크기는 그대로라 파일이 안 늘고 로고와도 성격이 맞는다.
     Pretendard 는 45~920 사이 아무 굵기나 쓸 수 있다(가변 글꼴). */
.hero h1{font-size:8vw;line-height:1.2;opacity:.85;
  letter-spacing:var(--ls-hero);font-weight:750;margin:0;color:#FFFFFF;
  /* 🔴 막을 옅게 한 대신 그림자를 세 겹으로. 밝은 사진 위에서도 글자가 뜬다. */
  text-shadow:0 1px 2px rgba(0,0,0,.5), 0 3px 14px rgba(0,0,0,.42),
              0 0 42px rgba(0,0,0,.30)}
/* 🔴 owner 요청(2026-08-01): 두 줄의 첫 글자만 우리 핑크.
   🔴 그림자는 h1 이 이미 세 겹 갖고 있어 그대로 상속된다 — 여기서 또 주지 않는다.
   🔴 대비 주의: 이 핑크(#E51566)는 **밝은 사진 위에서 1.09:1** 까지 떨어진다(계산값).
      흰 글자(4.95:1)와 달리 글자가 사진에 묻힐 수 있다. owner 가 색을 정한 것이라
      그대로 두되, 대표 사진을 밝은 것으로 올리면 이 두 글자만 안 보일 수 있다.
      그때는 --brand-pink 대신 밝은 핑크를 새로 만들어야 한다 (CSS 만으로는 못 고친다). */
.hero h1 .hl{color:var(--brand-pink)}
/* 🔴 owner 요청(2026-08-01): 두 줄의 **끝을 정확히 맞춘다**(양쪽 맞춤).
   실측(폰 390): 윗줄 298.4px · 아랫줄 288.3px 로 10.1px 달랐다. 글자 크기도 글자 수(7개)도
   같았고, 차이는 **띄어쓰기 개수**뿐이었다 — 윗줄 2개, 아랫줄 1개. 그 한 칸을 늘려 맞춘다.
   🔴 width:fit-content 가 이 규칙의 핵심이다. 100%(=화면 폭) 로 두면 아랫줄 띄어쓰기가
      손가락 두 개만큼 벌어진다. fit-content 면 **넓은 쪽 줄의 자연폭**이 기준이 되어
      늘어나는 양이 딱 10.1px 로 끝난다.
   🔴 margin-inline:auto — 위 .hero h1 의 margin:0 중 좌우만 덮어쓴다. 가운데 정렬용이다.
   🔴 text-align-last 는 Safari 16.4 부터 된다. 그 아래 버전에서는 아랫줄이 그냥
      가운데 정렬로 보인다(예전 모습). 깨지지 않고 원래대로 보이는 것이라 그대로 둔다. */
.hero h1{width:fit-content;margin-inline:auto}
/* 🔴 owner 지시(2026-08-01) — 폰에서 제목을 **두 줄로 고정하고 양끝을 맞춘다.**
   실측(폭 8종): 윗줄 「찍는 순간을 담아,」 가 아랫줄 「소중한 기억으로」 보다
   항상 **0.0612em** 만큼 넓다 (글자 크기에 비례하므로 폭마다 다시 재지 않아도 된다).
   → 아랫줄 글자 사이를 그만큼 벌려 좌우 끝을 맞춘다.
   🔴 예전에는 text-align:justify 로 했다가 **낱말 사이가 2배로 벌어져** 깨져 보였다.
      낱말 사이가 아니라 **글자 사이**를 벌려야 한글에서 자연스럽다. */
.hero h1 .ln{display:block}
/* 🔴 실측값. **쉼표를 뺀 뒤** 다시 쟀다 —
     쉼표 있을 때 0.0612em → 뺀 뒤 **0.0266em** (폭 5종에서 모두 같다).
     처음에 쉼표 있는 값을 그대로 쓰다가 아랫줄이 8~10px 더 길어졌다. */
.hero h1 .ln2{letter-spacing:calc(var(--ls-hero) + 0.0266em)}
/* 🔴 owner 지시 — **폰에서는 쉼표를 뺀다.** 줄이 나뉘어 있어 쉼표가 없어도 읽힌다.
   🔴 지우지 않고 감춘다 — 넓은 화면에서는 한 줄이라 쉼표가 있어야 문장이 끊긴다.
      화면 낭독기에는 그대로 읽히게 font-size:0 대신 display:none 을 쓴다. */
.hero h1 .cm{display:none;font-style:normal}
/* 🔴 넓은 화면에서는 한 줄로 흐른다 — 나눌 이유가 없다. 자간·쉼표도 원래대로.
   🔴 이 블록은 위 .ln 규칙보다 **뒤에** 있어야 이긴다. 뒤쪽에 같은 규칙이 하나 더
      남아 있어 이걸 덮고 있었다 — 그 중복을 지웠다 (여덟 번째 겪는 함정).
   🔴 owner 선택 B (2026-08-01) — 경계를 769 → **900px** 로 올린다.
      769~899px 에서는 한 줄에 안 들어가 **어중간하게 두 줄로 흘러내렸다**
      (실측: 769px 에서 윗줄 317.3 / 아랫줄 295.6 로 끝이 안 맞음).
      그 구간은 폰과 같은 「두 줄 + 양끝 맞춤」 이 낫다. */
@media (min-width:900px){
  .hero h1 .ln{display:inline}
  .hero h1 .ln1::after{content:' '}
  .hero h1 .ln2{letter-spacing:var(--ls-hero)}
  .hero h1 .cm{display:inline}
}
/* 16단계 실측 — 2행의 낱말 사이가 1행의 **정확히 2배**로 벌어져 있었다
   (1행 15.17px vs 2행 30.33px). 「소중한  기억으로」 처럼 깨진 조판으로 읽힌다.
   양쪽 정렬(justify)이 짧은 줄을 억지로 늘린 것이다 — 두 어절짜리 줄에는 쓰면 안 된다.
   사이트에서 제일 큰 글씨(68px)이고 손님이 제일 먼저 보는 문장이다. */
/* 🔴 mixtiles 는 제목 **바로 아래가 버튼**이다. 가격 설명이 사이에 끼면
   "무엇을 하는 곳인가" 보다 "얼마인가" 를 먼저 읽게 되어 흐름이 끊긴다.
   버튼을 먼저 두고, 가격은 그 아래 작게 놓는다. */
#herobar{margin-top:var(--s5);display:flex;gap:var(--tap-gap);
  justify-content:center;flex-wrap:wrap;order:2}
/* 🔴 14단계 2회차: 16px/400 흰 글자는 **7:1** 이 필요한데 사진 위에서 4.7~5.6 이었다.
   막을 더 어둡게 하면 사진이 죽는다(이미 .55~.64 다).
   19px 굵게로 올리면 WCAG 「큰 글씨」(18.66px 굵게)가 되어 **4.5 기준**이 적용된다 —
   같은 막에서 5.6:1 이므로 통과한다. 글자를 키우는 쪽이 사진을 더 죽이지 않는다. */
/* 🔴 owner 지시 — 불투명도 90% */
/* 🔴 owner 요청(2026-08-01): 제목 **위 여백과 아래 여백을 같게.**
   실측(폰 390): 헤더 아래→제목 44px · 제목→가격줄 24px 로 위가 20px 더 넓었다.
   위쪽 44px 은 .hero 의 padding-top 이다 — 아래를 거기에 맞춘다.
   🔴 이 값은 .hero{padding:44px 10px} 과 **같은 숫자여야 한다.** 한쪽만 고치면 다시 어긋난다.
   🔴 폰에서만 건다. PC 는 히어로가 가운데 정렬이라 이미 112 / 108 로 맞아 있고,
      여기에 44 를 더 주면 오히려 아래가 넓어진다 (실측 확인). */
.hero .in{display:flex;flex-direction:column;align-items:center}
/* 🔴 owner 지시(2026-08-01)로 가격 안내 줄(.meta)을 없앴다.
   그 줄에 걸려 있던 규칙들(크기·색·그림자·order·불투명도)도 함께 지웠다 —
   안 쓰는 규칙을 남기면 다음 사람이 「있는 줄 알고」 찾게 된다. */
.hero h1{order:1}
/* 🔴 mixtiles 와 같은 두 지점에서 꺾는다 (480px · 769px). */
@media (min-width:480px){ .hero h1{font-size:36px} }
/* 🔴 line-height 는 mixtiles 원문이 70px(=1.03)이지만 위와 같은 이유로 1.25 를 쓴다.
   폰과 PC 가 다른 간격이면 창을 줄일 때 제목이 덜컹거린다 — **같은 값**으로 둔다. */
/* 🔴 width 는 mixtiles 원문이 100% 이지만 fit-content 로 바꿨다. 위 양쪽 맞춤 규칙이
   기준으로 삼는 폭이라, 여기서 100% 로 되돌리면 PC 에서 아랫줄이 화면 끝까지 벌어진다. */
/* 🔴 PC 는 mixtiles 실측 **70px 고정**이다 (68 × 1.029). 비율이 아니라 값으로 맞춘다. */
@media (min-width:769px){ .hero h1{font-size:48px;line-height:54px;font-weight:750;width:fit-content} }
/* 🔴 사진이 아직 없으면 어두운 배경에 흰 글자만 남는다 — 그것도 읽힌다.
   회색 네모를 보여주지 않는다. */
.hero--nophoto{min-height:auto;background:var(--c-bg)}
.hero--nophoto .shot{display:none}
.hero--nophoto .in{padding:var(--s9) var(--s5)}
.hero--nophoto h1{color:var(--c-text-strong);text-shadow:none}
.hero--nophoto .meta{color:var(--c-text-sub)}

/* 🔴 여기에 78vh → 70vh → 76vh 를 화면 크기별로 짐작해서 넣어 뒀었다.
   그 중 76vh 가 PC 에서 이겨서 히어로가 684px 이 됐다 (mixtiles 는 648).
   위쪽 .hero 를 72vh 로 고쳐 놓고도 값이 안 바뀌길래 한참 찾았다 —
   **짐작으로 넣은 오버라이드가 실측값을 덮고 있었다.**
   mixtiles 는 폰·PC 모두 72vh 하나다 (844→608 · 900→648). 전부 지운다. */

/* ── 주문 3단계 — 저절로 넘어가는 목록 ───────────────────────
   🔴 기준을 900px 로 뒀더니 **태블릿(820px)에서 1열**로 떨어져
      사진이 목록 저 아래로 밀렸다. 나란히 놓여야 "글 바뀜 ↔ 사진 바뀜" 이 보인다.
      태블릿에서도 가로로 놓이게 768px 로 낮춘다. */
.steps-sec .in{display:grid;gap:var(--s6)}
@media (min-width:768px){
  .steps-sec .in{grid-template-columns:1fr 1.15fr;gap:var(--s7);align-items:center}
}
@media (min-width:1024px){ .steps-sec .in{gap:var(--s9)} }

/* ── 구역 ────────────────────────────────────────────────
   🔴 mixtiles 가 넓어 보이는 이유의 절반이 여백이다. 아끼지 않는다. */
.sec{padding:var(--s8) 0}
/* 🔴 16단계 실측 — **PC 구역 사이가 mixtiles 의 1.5~1.8배**라 화면이 텅 비어 보였다.
   글자·그림이 실제로 있는 구간 사이의 빈 띠를 재니
     우리      117 · 256 · 181 · 273 · 256 · 256 · 224 · 145
     mixtiles   69 · 158 · 111 · 134 · 140 · 174 · 116 · 83 · 61
   최대 273 vs 174. 128px 짜리 위아래 여백이 여섯 구역에 똑같이 걸려 있었다.
   → 96px 로 내리면 구역 사이가 192px 이 되어 저쪽 대역(140~174)에 가까워진다.
   🔴 **폰(64px)은 그대로 둔다** — 실측하니 폰은 이미 mixtiles 와 같은 대역이다. */
@media (min-width:900px){ .sec{padding:var(--s9) 0} }
.sec--soft{background:var(--c-surface-soft)}
.sec--paper{background:var(--c-surface-paper)}
.sec h2{font-size:var(--t-sec);line-height:var(--t-sec-lh);
  letter-spacing:var(--ls-head);font-weight:700;color:var(--c-text-strong)}
.sec .lede{margin-top:var(--s3);color:var(--c-text-sub);max-width:52ch}
.sec .body{margin-top:var(--s6)}

/* ── 크기 목록 ───────────────────────────────────────────
   🔴 실제 비율로 그린다. 숫자만 적으면 4x6 과 5x7 의 차이가 안 와닿는다. */
/* 🔴 owner 지시(2026-08-03) — 첫 화면의 크기 카드 구역을 뺐다.
   (.sizes 격자 · .size 카드 · .size .paper/.sheet/.nm/.mm/.pr 이 여기 있었다)
   🔴 안 쓰는 규칙을 남겨 두지 않는다 — 다음 사람이 「아직 쓰는 것」으로 읽는다. */

/* ── 사진이 들어가는 구역 ────────────────────────────────── */
.shots{display:grid;gap:var(--s4)}
@media (min-width:768px){ .shots--3{grid-template-columns:repeat(3,1fr);gap:var(--s5)} }
/* 🔴 종이 칸 — 파는 종이 수만큼만 만든다 (2가지든 3가지든).
   칸 수를 못 박으면 종이가 늘거나 줄 때마다 오른쪽이 비거나 넘친다
   (크기·액자 카드에서 이미 두 번 겪은 함정이다). */
@media (min-width:768px){
  .shots--fit{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s5)}
}
/* 🔴 16단계 실측 — 오른쪽 글이 짧아 **아래 318px 이 빈 벽**이 됐다.
   사진은 왼쪽에 무겁게 가라앉고 글은 오른쪽 위에 얹혀 대각선으로 기울어 보였다.
   가운데로 맞추면 빈 자리가 위아래 159px 씩 갈라져 눈에 덜 띈다. */
@media (min-width:900px){ .shots--2{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center} }

/* ── 나란히 두 칸 (직접 인화 | 액자) ─────────────────────────
   🔴 owner 지시(2026-08-03):
     · PC 는 **한 줄에 두 칸**, 반반
     · 폰은 **한 칸씩** 위아래로
     · 글은 **사진 안쪽**에, 잘 읽히게
   🔴 칸 안 순서를 CSS 로 바꾸지 않는다. HTML 에 적힌 순서 그대로 읽혀야
      읽어 주기(스크린리더)와 눈으로 보는 순서가 어긋나지 않는다. */
.duo{display:grid;gap:var(--s6)}
@media (min-width:900px){
  .duo{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
}

/* 칸 — 사진이 바탕이고 글이 그 안에 얹힌다 */
.duo-cell{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-surface-alt)}
.duo-ph figure{margin:0}
/* 🔴 세로가 너무 길면 폰에서 한 화면을 다 먹는다. 4:3 으로 잡는다. */
.duo-ph .ph{aspect-ratio:4/3}
.duo-ph .ph img{width:100%;height:100%;object-fit:cover;display:block}

/* 🔴 글 뒤 어둡기 — **위쪽만**. 사진 주인공(아래쪽)은 안 건드린다.
   owner 지시(2026-08-03): 「폰트를 위쪽으로 배치해주면 좋을 것 같은데」
   🔴 위쪽은 아래쪽보다 훨씬 밝다 — 실측으로 다시 잡았다:
        work_1     위 35% 가장 밝은 곳 L=1.000 (창문 순백) → 흰 글자 1.00:1 (아예 안 보임)
        frame_wall 위 35% 가장 밝은 곳 L=0.943            → 1.06:1
      본문 기준 7:1 을 넘기려면 62% 가 필요하다 → 맨 위를 .66 으로 두고 아래로 투명하게 뺀다.
   🔴 아래쪽 40% 는 완전히 투명하다 — 「사진 위에 레이어」가 아니다. */

/* 글 — 사진 안 왼쪽 위 */
.duo-txt{position:absolute;left:0;right:0;top:0;z-index:1;
  padding:var(--s5);color:#FFFFFF}
/* 🔴 글자 그림자 — **글자에 딱 붙게, 최소로** (owner 지시 2026-08-03)
   그전에는 24~28px 짜리 넓은 그림자를 깔았다. 그러면 글자 둘레가 **뿌옇게 번져**
   「그림자가 이상하다」로 보인다. 사장님 지적이 정확했다.

   🔴 어떻게 바꿨나 — 넓게 옅게(X) → **좁게 진하게**(O)
     · 1px 짜리 테두리 같은 그림자로 글자 윤곽을 또렷하게 세우고
     · 2px 짜리 하나로 바탕에서 살짝 띄운다
     퍼지는 폭이 작아 사진을 거의 안 가리면서, 글자 가장자리 대비는 오히려 더 오른다.
   🔴 핑크는 되돌렸다 — 사장님 지시(2026-08-03): 「기존의 흰색으로 해주고」.
     실측으로는 밝은 벽 쪽(왼쪽)에서 핑크가 3.38:1 로 흰색 1.34:1 보다 나았지만,
     보시기에 어색하다고 하셨다. 색은 사장님이 정하신다. */
/* 🔴 owner 지시(2026-08-03): 「그냥 그림자 삭제하고 기존의 그라데이션을 넣어주는데
     기존보다 반은 옅게」 → 글자 그림자를 **없애고**, 위쪽 그라데이션을 절반 진하기로 되살렸다.
     그때 문제는 그림자가 그라데이션과 겹쳐 **뿌옇게 번지는 것**이었다.

   🔴🔴 2026-08-12 — 사장님이 **다시 넣기로** 정하셨다. 그냥 되돌린 게 아니다:
     ① 실측: 사진 위 흰 제목의 **밝은 부분 대비가 2.37** 이다 (큰 글씨 기준 3.0 미달).
        평균은 3.34~6.01 로 괜찮지만, 사진에서 밝은 데 걸친 글자가 흐려진다.
        (검사가 말한 1.07 은 **틀린 값**이었다 — 사진과 그라데이션을 못 보고
         회색 자리표시자 색만 읽은 것이다. 픽셀을 직접 재서 바로잡았다)
     ② 08-03 에 빼신 이유(번짐)를 피하려고 **번지는 그림자를 안 쓴다.**
        퍼짐 2px 짜리 한 겹뿐이다 — 후광(glow)이나 두꺼운 흐림은 금지.
        세 가지 견본을 실제 화면에 얹어 찍어 보시고 이 값을 고르셨다.
   🔴 이 값을 키우지 말 것. 흐림을 4px 이상으로 올리면 08-03 의 그 번짐이 돌아온다. */
.duo-txt h2{margin:0 0 var(--s2);color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.duo-txt .lede{margin:0;color:#FFFFFF;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.55)}

/* 🔴 위쪽 그라데이션 — **기존의 절반** 진하기
     기존 .68 / .68 / .34  →  지금 .34 / .34 / .17
   🔴 실측으로 알려 드린 값 (2026-08-03): 이 진하기에서 흰 글자는 밝은 곳 기준 2.52:1 이다.
      (기존 .68 일 때는 8.07:1 이었다) 사장님이 보시고 정하신 값이다.
   🔴 퍼지는 모양은 기존 그대로 — 위 56% 까지 유지하고 아래로 빠진다.
      글상자가 폰에서 카드 높이의 51% 를 차지해서, 56% 아래로 내리면 글 밑이 막 밖으로 나간다. */
/* 🔴 owner 지시(2026-08-03): 「그라데이션 사이 좀 3/2 로 줄여도 되겠는데?」
     → 띠 길이를 92% → 62% 로 (약 3분의 2). 진하기(.34)는 그대로 둔다.
     띠가 짧아지면 사진 아래쪽이 더 많이 드러난다. */
.duo-cell::after{content:'';position:absolute;left:0;right:0;top:0;height:62%;
  background:linear-gradient(180deg,
    rgba(0,0,0,.34) 0%, rgba(0,0,0,.34) 56%, rgba(0,0,0,.17) 78%, rgba(0,0,0,0) 100%);
  pointer-events:none}
/* 🔴 폰에서는 여백을 줄인다 — 글이 사진을 너무 덮으면 사진을 보러 온 뜻이 없다 */
@media (max-width:599px){ .duo-txt{padding:var(--s4)} }

/* 🔴 움직임 — 칸이 화면에 들어올 때 사진이 아주 천천히 제자리를 찾는다.
   owner: 「소비자가 딱 보고 뭔가 애니메이션 효과도 있으면 참 좋아 보인다」
   🔴 크게 움직이지 않는다. 1.06 → 1.00 이면 눈에 「살아 있다」로만 남는다.
   🔴 동작 줄이기를 켜신 분에게는 안 움직인다 (motion.css 끝에 규칙이 있다). */
.js-motion .duo-cell .ph img{transform:scale(1.06);
  transition:transform 900ms var(--m-ease)}
.js-motion .duo-cell.is-in .ph img{transform:none}
@media (prefers-reduced-motion:reduce){
  .js-motion .duo-cell .ph img{transform:none !important;transition:none !important}
}
.shot-card figure{margin:0}
.shot-card .ph{width:100%;background:var(--c-surface-alt);
  border-radius:var(--r-lg);overflow:hidden}
.shot-card .ph img{width:100%;height:100%;object-fit:cover}
.shot-card figcaption{margin-top:var(--s3);font-size:var(--t-sm);color:var(--c-text-sub)}
.shot-card .t{display:block;font-weight:700;color:var(--c-text);font-size:var(--t-body)}

/* ── 액자 목록 ───────────────────────────────────────────── */
/* 16단계 실측 — 폰에서 액자가 1개뿐인데 칸을 2개로 못 박아 두어
   카드가 왼쪽 절반에만 웅크리고 **오른쪽 183px 가 통째로 비었다.**
   바로 위 크기 카드 4장은 좌우를 꽉 채우는데 여기만 반쪽이라
   「상품을 빠뜨렸나」 로 읽힌다. 들어가는 만큼만 만들고 가운데로 모은다. */
/* 🔴 owner 지시(2026-08-03) — 첫 화면의 **액자 상품 카드를 뺐다.**
   (.frames 격자 · .frame .nm/.sub/.pr/.out 이 여기 있었다)
   값이 붙은 칸의 사진이 아직 임시 이미지라, 바로 위 실물 사진과 나란히 서니 어색했다.
   첫 화면은 「액자도 해 드립니다」를 알리는 자리로 두고,
   고르고 사는 것은 담은 뒤 권유와 액자 안내(/products/frame/)에서 한다.
   🔴 안 쓰는 규칙을 남겨 두지 않는다 — 다음 사람이 「아직 쓰는 것」으로 읽는다. */

/* ── 가운데 큰 띠 (2026-08-04) ─────────────────────────────
   🔴 owner 지시 — mixtiles 의 「Museum-Quality Prints」 띠.
      화면 폭을 꽉 채운 영상/사진 위, 한가운데에 흰 글자 한 줄.
   🔴 사진과 글을 **같은 격자 칸**에 겹친다 (마무리 구역 PC 와 같은 수법).
      절대 위치를 쓰면 띠 높이를 사람이 못 박아야 하는데, 이러면 사진이 높이를 정한다.
   🔴 display:grid 를 걸어도 [hidden] 이 안 깨진다 — 이 파일 아래쪽에
      `[hidden]{display:none !important}` 가 있다. 없었다면 사진을 안 올리셨을 때
      **빈 검은 띠**가 나왔을 것이다.
   🔴 배경을 검게 둔다. 투명 PNG 를 올리셔도 흰 글자가 흰 바탕에 얹히지 않는다. */
.band{display:grid;position:relative;overflow:hidden;background:#000}
.band .band-ph,
.band .band-t{grid-area:1 / 1}
.band .band-ph{line-height:0}
/* 🔴 넓은 화면에서 16:9 를 그대로 두면 1440px 폭에서 높이가 810px 이라
      띠 하나가 화면을 다 먹는다. 70vh 로 잘라 납작하게 만든다(가운데 기준).
      그래서 위 자리 설명에 「중요한 것은 가운데 띠 안에」라고 적어 두었다.
   🔴 폰은 3:2 다 (2026-08-04 실측 후 고침). 16:9 그대로 두었더니 390px 폰에서
      띠 높이가 **219px** 뿐이라, 글자가 띠를 거의 꽉 채워 답답했다.
      3:2 로 잡으면 260px 이 되고 좌우로 16% 만 잘린다 — 글 자리(가운데)는 그대로다. */
.band .band-ph img,
.band .band-ph video{
  width:100%;display:block;
  aspect-ratio:3/2;max-height:min(70vh, 720px);
  object-fit:cover;object-position:center}
@media (min-width:768px){
  .band .band-ph img,
  .band .band-ph video{aspect-ratio:16/9}
}
/* 🔴 글 자리에만 막을 깐다 — 위아래 1/5 은 손대지 않는다.
   owner 가 첫 화면에서 「영상 위에 레이어가 있어서 질이 떨어진다」 하셨다.
   막을 통째로 씌우지 않고 **글이 지나가는 가로 띠**에만 깐 이유다.
   🔴 진하기는 사장님이 올리실 영상을 미리 잴 수 없어서 **가장 나쁜 경우(순백 화면)** 로
      계산해 정한다. 흰 글자(#FFF) 기준:
        .66 → 대비 7.26:1 (가게 본문 기준 7:1 통과)
        .55 → 대비 4.76:1  ◀ 지금 값
      **.55 로 내렸다** (2026-08-04). .66 으로 찍어 보니 임시 이미지처럼 밝고 평평한
      그림에서는 가운데가 **잿빛 띠**로 번져 보였다. 이 글자는 28~42px 굵은 글씨라
      큰 글자 기준이 걸린다 — AA 3:1, AAA 4.5:1. .55 는 순백에서도 AAA 를 넘긴다.
      (7:1 은 작은 본문 기준이다. 여기엔 본문이 없다)
   🔴 더 옅게 하시려면 .5 부터는 순백에서 3.98:1 로 **AAA 가 깨진다.**
      그때는 「어두운 영상만 올린다」는 약속이 함께 있어야 한다. */
.band::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 12%, rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.55) 60%, rgba(0,0,0,0) 88%)}
.band .band-t{
  position:relative;z-index:1;
  align-self:center;justify-self:center;
  margin:0;padding:0 var(--s5);max-width:22ch;
  color:#FFFFFF;text-align:center;
  font-size:var(--t-sec);line-height:var(--t-sec-lh);
  letter-spacing:var(--ls-head);font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ── 마무리 ──────────────────────────────────────────────── */
/* ── 마무리 ──────────────────────────────────────────────────
   🔴 owner 지시(2026-08-03): 사진을 배경으로 깔고 그 위에 문구와 단추.
   🔴 글은 **왼쪽**. 실측으로 정했다 — 배경 사진 왼쪽은 밝아서(L 0.83~0.91)
      먹색 글자가 15.5~17.0 : 1 로 나온다. 막도 그림자도 필요 없다.
   🔴 사진이 없으면 예전처럼 가운데 정렬 글자만 나온다 (.closing--photo 가 안 붙는다). */
.closing{text-align:center;padding:var(--s9) var(--s5)}
.closing h2{font-size:var(--t-sec);line-height:var(--t-sec-lh);
  letter-spacing:var(--ls-head);color:var(--c-text-strong)}
.closing .acts{margin-top:var(--s6);display:flex;justify-content:center;gap:var(--s3);
  flex-wrap:wrap}

/* 사진이 있을 때 */
.closing--photo{padding:0;text-align:left;position:relative}
.closing--photo .closing-ph{line-height:0}

/* 🔴 폰 — owner 지적(2026-08-03): 「모바일은 이상한데」
   사진을 통째로 넣으면 **왼쪽 빈 벽이 화면의 40%** 를 먹는다.
   그 여백은 PC 에서 글을 얹으려고 비워 둔 자리지, 폰에서는 쓸 데가 없다.
   폰에서는 글이 사진 아래에 따로 서므로 여백이 필요 없다.
   → 주인공(폰을 든 손)이 있는 **오른쪽을 살려** 잘라 넣는다.
     4:3 으로 잡아 사진이 화면을 너무 먹지 않게 한다. */
.closing--photo .closing-ph .ph,
.closing--photo .closing-ph img{
  width:100%;display:block;
  aspect-ratio:4/3;object-fit:cover;object-position:right center}
/* 🔴 폰 — owner 선택(2026-08-03): 「사진 안에 · 옅은 막」
   이 사진은 밝은 자리와 폰(주인공)이 **좌우로 나란히** 있어,
   폰 화면처럼 좁은 데서는 둘 다 담을 수 없다 (실측으로 확인).
     글이 읽히게 자르면(3:4 왼쪽) 폰이 잘려 나가고
     폰을 살리면(4:3 오른쪽) 글 자리가 먹색 1.4:1 · 흰색 1.1:1 로 안 보인다.
   → 폰을 살리고, 글이 앉는 **아래쪽에만** 막을 깐다. 흰 글자로 얹는다.
   🔴 진하기 60% 는 실측으로 정했다:
     아래 45% 띠에서 가장 밝은 곳 L=0.904 → 흰 글자 7:1 을 넘기려면 60% 가 필요하다.
     (49% 면 4.5:1 — 제목만 통과하고 본문이 못 넘는다) */
.closing--photo{position:relative}
/* 🔴 owner 지시(2026-08-03): 폰은 **위쪽 · 가운데 정렬**. */
.closing--photo .closing-in{
  position:absolute;left:0;right:0;top:0;
  padding:var(--s6) var(--s5) var(--s6);
  color:#FFFFFF;text-align:center}
.closing--photo .closing-in .acts{justify-content:center}
/* 🔴 z-index:-1 을 쓰면 안 된다 — 막이 **사진 뒤로** 들어가 아무 소용이 없다
   (2026-08-03 실측: 글 뒤 배경이 0.958 그대로였다, 대비 1.04:1).
   막은 사진 위·글 아래에 있어야 한다. 그래서 막은 0, 글은 1 로 쌓는다. */
/* 🔴 %로 잡으면 글이 막의 **옅은 부분**에 앉는다 (실측: 제목 자리가 0.34 → 2.73:1).
   글상자 전체가 진한 자리에 오도록 px 로 잡는다:
     글상자 아래 96px 동안 .33 → 0 으로 빠지고, 글상자 안은 **내내 .33** 이다.
   🔴 값이 세 번 바뀌었다. 그 자취를 남긴다 — 다음에 또 만지실 때 근거가 된다:
        .62 → 실측 6.36:1 (모자람)
        .66 → 실측 7.34:1 (가게 기준 7:1 통과)
        .33 → owner 지시(2026-08-03) 「불투명도 절반으로」. 사진을 더 살리는 쪽을 고르셨다.
      계산보다 **실측이 맞다** — 그려진 화면을 재서 정한다. */
.closing--photo .closing-in::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:-96px;z-index:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.33) 0, rgba(0,0,0,.33) calc(100% - 96px), rgba(0,0,0,0) 100%)}
.closing--photo .closing-in > *{position:relative;z-index:1}
/* 🔴 2026-08-12 — `.duo-txt` 와 **같은 그림자**를 준다. 사정은 그쪽 주석에 적어 뒀다.
   실측: 이 제목의 밝은 부분 대비가 2.37 이었다 (평균 3.34). 흐림 2px 한 겹만 쓴다. */
.closing--photo .closing-in h2{color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.closing--photo h2{margin:0}
.closing--photo .acts{justify-content:flex-start}

/* 🔴 폰에서는 겹치지 않는다 — 사진 아래에 글이 따로 선다.
   좁은 화면에서 얹으면 주인공(폰을 든 손) 위로 글자가 올라탄다. */
@media (min-width:900px){
  .closing--photo{display:grid}
  /* 사진과 글을 **같은 칸**에 겹쳐 놓는다. 절대 위치를 안 써서 높이가 저절로 맞는다. */
  .closing--photo .closing-ph,
  .closing--photo .closing-in{grid-area:1 / 1}
  .closing--photo .closing-ph .ph,
  .closing--photo .closing-ph img{
    /* 🔴 PC 는 가로로 넓게 — 왼쪽 빈 자리에 글이 얹힌다. 폰의 4:3 자르기를 되돌린다. */
    aspect-ratio:auto;height:auto;
    max-height:640px;object-fit:cover;object-position:right center}
  /* 🔴 owner 지적(2026-08-03): 「너무 좌측으로 되어 있는 거 아니야?
       위에 넓이랑 완전 상반돼서」 — 맞다.
       다른 구역은 전부 가운데 상자(.wrap · max-width var(--w-content))를 기준으로 서는데
       여기만 화면 맨 왼쪽에서 시작해 글 기준선이 어긋났다.
     → **다른 구역과 똑같은 상자**를 씌운다. 그러면 왼쪽 선이 위와 정확히 맞는다.
       글 폭만 그 안에서 46% 로 묶어 폰을 든 손 위로 넘어가지 않게 한다. */
  .closing--photo .closing-in{
    /* 🔴 PC 는 막이 없다 — 왼쪽이 밝아 먹색 글자가 15~17:1 로 나온다.
       폰에서 쓴 절대 위치·흰 글자·막을 전부 되돌린다. */
    position:static;align-self:center;text-align:left;
    width:100%;
    max-width:var(--w-content);
    margin:0 auto;
    padding:0 var(--s5);          /* .wrap 과 같은 좌우 여백 */
    color:var(--c-text);
  }
  .closing--photo .closing-in::before{content:none}
  .closing--photo .closing-in .acts{justify-content:flex-start}
  .closing--photo .closing-in h2{color:var(--c-text-strong)}
  .closing--photo .closing-in > *{ max-width:min(46%, 520px) }
  .closing--photo h2{font-size:var(--t-sec);color:var(--c-text-strong)}
}

/* ── 푸터 ────────────────────────────────────────────────────
   🔴 20단계 — 「footer.css」로 옮겼다. 여기 두면 안 되는 이유:
      (파일 이름 앞에 별표를 붙이지 않는다 — `**` + `/` 가 주석을 그 자리에서
       닫아 버려 아랫줄들이 CSS 로 읽힌다. 감사 2회에서 실제로 그랬다.)
      이 파일은 첫 화면 전용인데 푸터는 손님 화면 15개가 모두 쓴다.
      도움말(help.css)에서 똑같은 사고를 이미 겪었다 — 첫 화면 밖에서 열면
      스타일이 하나도 없는 날 HTML 이 나왔다.
   🔴 옛 규칙(.ft nav / .ft .miss)을 여기에 남겨 두지 않는다.
      같은 우선순위면 나중에 실리는 쪽이 이기는데, home.css 가 footer.css 보다
      **먼저** 실린다. 남겨 두면 조용히 이기거나 지면서 두 화면이 달라진다. */

/* ── 상태 ────────────────────────────────────────────────── */
.state{color:var(--c-text-sub);padding:var(--s5) 0}
.state--err{color:var(--c-text-error)}

/* ── 🔴 CLS(화면 밀림) 방지 ───────────────────────────────
   JS 가 나중에 채우는 자리는 **미리 높이를 잡아 둔다.**
   안 잡으면 데이터가 도착하는 순간 아래 내용이 통째로 밀린다.
   손님이 누르려던 버튼이 눌리는 순간 다른 곳으로 도망간다.

   사진 자리는 aspect-ratio 로 잡는다 — 높이를 고정하면 화면 폭이 바뀔 때
   비율이 깨지지만, aspect-ratio 는 폭에 맞춰 높이가 따라온다.
   글자 자리는 min-height 로 잡는다. */
/* 🔴 `.hero .shot` 에는 aspect-ratio 를 주면 안 된다.
   10단계에서 CLS(화면 밀림) 방지로 4/5 를 줬는데, 11단계에서 히어로가
   **전체화면(position:absolute; inset:0)** 으로 바뀌면서 이게 높이를 이겨버렸다.
     390px 폭 × 4/5 = 488px  →  히어로 658px 중 **170px 이 빈 검은 띠**가 됐다.
   전체화면 히어로는 inset:0 이 이미 자리를 잡으므로 CLS 걱정이 없다.
   (실측으로 잡았다 — 화면을 직접 찍어 보고서야 알았다) */
.shot-card .ph{aspect-ratio:3/2}
/* 🔴 20단계 — `#biz{min-height:170px}` 이 여기 있었다. 그 자리는 푸터 안으로
   옮겨졌고 id 도 없앴다(법정 3화면과 id 가 겹쳐 조용히 틀리는 사고를 막으려고).
   푸터는 화면 맨 아래라 늦게 채워져도 위 내용을 밀지 않는다 — 자리를 안 잡아도 된다. */

/* 단계 목록 안의 설명 줄 */
.steps-auto .sub{display:block;font-size:var(--t-sm);font-weight:400;
  color:var(--c-text-sub);margin-top:2px}
/* 🔴 켜진 단계의 설명까지 핑크로 물들이지 않는다 — 작은 글씨라 대비가 모자란다 */
.steps-auto li.is-on .sub{color:var(--c-text-sub)}

/* 🔴 `hidden` 속성이 **클래스 선택자에 진다.**
   브라우저 기본 스타일은 `[hidden]{display:none}` 인데 우선순위가 가장 낮다.
   `.help-panel{display:flex}` 처럼 클래스로 display 를 주면 그게 이겨서
   **숨겨야 할 것이 그대로 보인다.** 실제로 도움말 패널이 처음부터 열려
   화면 절반을 가리고 있었다 (내가 화면을 안 봐서 못 잡았다).
   전역으로 못 박는다 — 앞으로 어떤 클래스를 붙여도 hidden 이 이긴다. */
[hidden]{display:none !important}

/* 도움말: 사이트의 흰 카드·분홍 포인트를 사용하고 본문만 스크롤한다. */
.help{position:fixed;inset:0;z-index:150;pointer-events:none}
.help-backdrop{position:absolute;inset:0;background:rgba(var(--brand-ink-rgb),.28);pointer-events:auto}
.help-panel{position:absolute;right:24px;bottom:24px;width:min(400px,calc(100vw - 48px));
  height:min(680px,calc(100vh - 48px));height:min(680px,calc(100dvh - 48px));
  display:flex;flex-direction:column;min-height:0;overflow:hidden;pointer-events:auto;
  color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border);border-radius:20px;
  box-shadow:0 16px 48px rgba(var(--brand-ink-rgb),.18)}
.help-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;background:var(--c-surface);border-bottom:1px solid var(--c-border);flex:0 0 auto}
.help-kicker{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--c-text-sub)}
.help-hi{margin:0;font-size:20px;line-height:1.4;font-weight:700;letter-spacing:var(--ls-head)}
.help-hi:focus,.help-hi:focus-visible{outline:none}
.help-x{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;
  margin:0;padding:0;border:1px solid var(--c-border);border-radius:50%;background:var(--c-surface);
  color:var(--c-text);font-size:26px;line-height:1;cursor:pointer}
.help-x:hover{border-color:var(--c-btn-point-bg);background:var(--c-surface-point)}
.help-body{min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;
  padding:16px;scroll-padding:16px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(var(--brand-ink-rgb),.25) transparent}
.help-body::-webkit-scrollbar{width:8px}
.help-body::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:rgba(var(--brand-ink-rgb),.25);background-clip:content-box}
.help-card{margin:0 0 12px;padding:16px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;box-shadow:none}
.help-card:last-child{margin-bottom:0}
.help-card-title{margin:0 0 10px;font-size:14px;line-height:1.5;font-weight:700}
.help-search{position:relative;margin:0 0 8px}
.help-q{width:100%;min-height:48px;padding:10px 42px 10px 12px;font:inherit;font-size:16px;
  border:1px solid var(--c-border);border-radius:8px;color:var(--c-text);background:var(--c-bg)}
.help-q::placeholder{color:var(--c-text-sub)}
.help-q::-webkit-search-cancel-button,.help-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.help-search svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--c-text-sub);pointer-events:none}
.help-panel :is(button,a,input):focus-visible{outline:2px solid var(--c-btn-point-bg);outline-offset:2px}
.help-q:focus{border-color:var(--c-btn-point-bg);outline:2px solid var(--c-btn-point-bg);outline-offset:-1px}
.help-none,.help-empty{margin:12px 0;font-size:13px;line-height:1.7;color:var(--c-text-sub)}
.help-none a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-text);text-underline-offset:3px}
.faq{list-style:none;margin:0;padding:0}
.faq li:not([hidden])~li:not([hidden]){border-top:1px solid var(--c-border)}
.faq button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;
  padding:12px 0;text-align:left;background:none;border:0;font:inherit;font-size:14px;line-height:1.6;
  color:var(--c-text);cursor:pointer}
.faq button::after{content:'+';flex:0 0 16px;color:var(--c-btn-point-bg);font-size:20px;text-align:center}
.faq button[aria-expanded=true]::after{content:'−'}
.faq .a{padding:0 0 14px;font-size:13px;color:var(--c-text-sub);line-height:1.8}
.help-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 0;text-decoration:none;color:var(--c-text)}
.help-row+.help-row{border-top:1px solid var(--c-border)}
.help-row:hover .help-row-t b{text-decoration:underline;text-underline-offset:3px}
.help-row-t{flex:1;min-width:0}
.help-row-t b{display:block;font-size:14px;line-height:1.6}
.help-row-t small{display:block;margin-top:4px;font-size:12px;line-height:1.6;color:var(--c-text-sub)}
.help-go{flex:0 0 16px;color:var(--c-btn-point-bg);font-size:20px}
.help-quick{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:0;
  padding:12px;font-size:14px;line-height:1.6;border-radius:10px;text-decoration:none}
.help-legal nav{display:grid;gap:4px;margin:0}
.help-legal a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;
  padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.6;color:var(--c-text);text-decoration:none}
.help-legal a::after{content:'›';color:var(--c-btn-point-bg);font-size:20px;line-height:1}
.help-legal a:hover{background:var(--c-surface-point);color:var(--c-text)}
.help-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:0 0 auto;
  padding:10px 16px max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--c-border);background:var(--c-surface)}
.help-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 8px;
  border:1px solid transparent;border-radius:10px;background:var(--c-surface);font:inherit;font-size:13px;font-weight:600;
  line-height:1.5;color:var(--c-text-sub);cursor:pointer}
.help-tabs button svg{width:20px;height:20px;flex:0 0 20px}
.help-tabs button.is-on{border-color:var(--c-btn-point-bg);background:var(--c-surface-point);color:var(--c-text)}
.help-tabs button:hover{background:var(--c-bg);color:var(--c-text)}
@media (max-width:480px){
  .help-panel{right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);
    height:calc(100vh - 24px);height:calc(100dvh - 24px);border-radius:16px}
  .help-head{padding:14px 16px}
  .help-hi{font-size:18px}
  .help-body{padding:12px;scroll-padding:12px}
  .help-card{padding:14px}
  .help-tabs{padding-left:12px;padding-right:12px}
}
@media (max-height:520px){
  .help-panel{right:8px;bottom:8px;width:min(400px,calc(100vw - 16px));height:calc(100vh - 16px);height:calc(100dvh - 16px)}
  .help-head{padding:10px 16px}
  .help-kicker{display:none}
  .help-hi{font-size:18px}
  .help-tabs{padding-top:6px;padding-bottom:6px}
}
/* 소리로만 읽히는 글자 */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 🔴 핑크 글자를 쓰는 규칙에는 **같은 규칙 안에 크기**를 적는다.
   물려받아서 실제로는 19px 이 맞지만, 검사기는 규칙 하나만 본다 —
   나중에 누가 크기를 바꿔도 이 줄이 같이 눈에 띄어야 안전하다. */
.steps-auto li.is-on button:hover{color:var(--c-text-brand);transform:translateX(3px);
  font-size:var(--t-btn)}
/* 켜지지 않은 단계에 마우스를 올리면 왼쪽 막대가 살짝 진해진다 */
.steps-auto li:hover::before{background:var(--c-border-fn)}

.gnb .cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.gnb .cta:active{transform:scale(var(--m-press))}

.icon{transition:transform var(--m-fast) var(--m-ease),opacity var(--m-base) var(--m-ease),
                 background-color var(--m-fast) var(--m-ease)}
.icon:hover{transform:scale(1.1)}
.icon:active{transform:scale(var(--m-press))}
/* 🔴 owner 요청(2026-08-01): 마우스를 올리면 **반투명 동그라미 바탕**.
   (동그란 모양은 위 .icon 의 border-radius:var(--r-pill) 이 이미 갖고 있다)

   🔴 **검정 반투명이다. 흰색이 아니다.** owner 가 두 번 말했다.
      처음에 currentColor(아이콘 색)를 섞도록 만들어 놨더니 사진 위 헤더에서는
      아이콘이 흰색이라 **흰 원**이 나왔다. 그것을 지적받고 한 번 더 잘못 알아들어
      "밝은 바에서는 원을 없앤다" 로 갔다가, owner 가 다시 "흰색 말고 블랙" 이라고
      확인해 주어 **모든 자리에서 검정 14%** 로 통일했다.
      → currentColor 를 쓰지 않는다. 아이콘 색을 따라가면 흰 원이 다시 생긴다.

   🔴 검정이면 어디서나 보인다 (덮으면 어두워지므로):
        사진 위 헤더(막 씌운 사진)  → 원 자리가 더 어두워짐
        밝은 상단바 #FFFFFF        → #DBDBDB 회색 원
   🔴 **손가락 기기에는 걸지 않는다** (@media (hover:hover)).
      폰에서는 탭한 뒤에도 hover 가 남아 원이 켜진 채로 멈춘다 — 눌린 줄 알고 다시 누른다.
   🔴 이 색은 tokens.css 변수를 쓰지 않는다. 「반투명 검정 막」 은 특정 브랜드 색이 아니라
      어느 배경에서나 같은 양만큼 어둡게 덮는 장치라서, 변수로 바꾸면 의미가 흐려진다. */
@media (hover:hover){
  .icon:hover{background-color:rgba(0,0,0,.14)}
}
/* 🔴 키보드로 옮겨 다니는 분에게도 같은 자리에 같은 표시를 준다 (WCAG 2.4.7). */
.icon:focus-visible{background-color:rgba(0,0,0,.14)}
/* 🔴 owner 결정(2026-08-01): "마우스 올렸을 때 왜 커지지?"
   위 scale(1.1) 은 14단계에서 넣은 것이다 — 그때는 아이콘에 **아무 반응이 없어서**
   누를 수 있는 것인지 알 수 없었다(같은 파일 「마우스를 올렸을 때」 주석 참고).
   이제 원이 그 역할을 하므로 크기까지 바꿀 이유가 없다. 반응이 둘이면 부산스럽다.
   owner 가 고른 규칙은 **"원이 뜨는 자리에서는 크기 변화를 뺀다"** 였고,
   원이 모든 자리로 넓어졌으므로 크기 변화도 모든 자리에서 뺀다.
   🔴 조건이 위 원 규칙과 **똑같아야 한다.** 하나만 바꾸면
      "원도 없고 크기도 안 변하는" 자리가 생긴다.
   🔴 눌렀을 때 쑥 들어가는 반응(:active)은 살린다. `.icon:hover`(0,2,0)와
      `.icon:active`(0,2,0)는 특정도가 같아 **나중에 쓴 쪽이 이긴다** — 아래 순서를 지킬 것. */
@media (hover:hover){
  .icon:hover{transform:none}
  .icon:active{transform:scale(var(--m-press))}
}

/* 크기 카드는 테두리로 반응하고 있었다 — 살짝 떠오르는 느낌을 더한다 */
.size{transition:border-color var(--m-base) var(--m-ease),
                 transform var(--m-base) var(--m-ease),
                 box-shadow var(--m-base) var(--m-ease)}
.size:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* ── 전체 메뉴 서랍 ──────────────────────────────────────────
   🔴 mixtiles 는 ☰ 가 **왼쪽**이므로 서랍도 왼쪽에서 나온다.
      오른쪽에서 나오게 만들면 누른 자리와 나오는 자리가 어긋나 어색하다.
   🔴 z-index 는 도움말 동그라미(40)보다 위여야 한다. 안 그러면 서랍을 열어도
      채팅 아이콘이 그 위에 떠 있다. */
/* 🔴 막 색을 짐작하지 않고 **화면에서 재서** 맞췄다.
   mixtiles 평상시 바탕 (251,249,249) → 서랍 열면 (125,124,124).
   역산하면 검정 알파 0.502. 내가 처음 넣은 .45 는 조금 옅었다. */
/* 🔴 14단계: 서랍이 **헤더에 가려져 있었다.**
   1단계에서 서랍을 45/46 으로 만들 때 헤더는 z-index 30 이었다.
   2단계에서 헤더를 mixtiles 실측값 **100** 으로 올리면서 순서가 뒤집혔다 —
   서랍을 열면 헤더가 그 위에 그려져 **서랍의 로고와 닫기(×)가 가려졌다.**
   사장님이 "찍소가 겹쳐 보인다" 고 한 것이 이것이다.
   🔴 검사 6회차를 돌고도 못 잡았다. 어느 검사도 **"열린 것이 실제로 보이는가"** 를
      안 봤기 때문이다 (menu-test 는 x 좌표와 hidden 만 봤다).
      → menu-test 에 가림 검사를 넣었다. */
.menu-back{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.50);
  opacity:0;transition:opacity var(--m-base) var(--m-ease)}
.menu-back.is-open{opacity:1}

/* 🔴 모바일 3회감사 — 오른쪽 위 모서리가 각졌다. mixtiles 는 둥글다. */
.menu{border-radius:0 16px 16px 0;
  position:fixed;top:0;left:0;bottom:0;z-index:121;
  /* 🔴 실측 320px. 내가 360px 로 만들어 놨었다. */
  width:min(86vw,320px);background:var(--c-surface);
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4) var(--s4) var(--s7);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:2px 0 32px rgba(0,0,0,.18);
  /* 🔴 닫힌 상태를 **transform 으로** 둔다. display 로 감추면 미끄러지는
     움직임이 아예 안 나온다 (transition 은 display 를 못 잇는다). */
  transform:translateX(-100%);
  transition:transform var(--m-slow) var(--m-ease)}
.menu.is-open{transform:translateX(0)}

/* 🔴 로고 줄 아래에 **전체 폭 구분선**이 있다 (mixtiles). 내가 빼먹었다.
   서랍 좌우 여백을 넘어 끝까지 그어야 해서 음수 여백으로 밀어낸다. */
/* 🔴🔴 2026-08-09 owner 지시 — 서랍 안 내용의 왼쪽 기준선을 x=16 → x=24 로 옮긴다.
   🔴 첫 화면은 menu.css 를 안 싣는다 (index.html 에 정적 서랍이 있고 menu-auto.js 도
      안 부른다). 그래서 **menu.css 와 여기 둘 다** 같은 값으로 고쳐야 서랍이 안 갈라진다.
   🔴 head·auth·list·foot 네 곳을 같이 옮긴다 — 줄만 옮기면 이름·버튼과 어긋난다. */
.menu-head{display:flex;align-items:center;justify-content:space-between;
  min-height:var(--tap);
  margin:0 calc(var(--s4) * -1) var(--s4);
  padding:0 var(--s4) var(--s3) var(--s5);
  border-bottom:1px solid var(--c-border)}
.menu-head .brand{color:var(--c-text)}
/* 🔴 모바일 3회감사 — mixtiles 보다 작고 훨씬 진했다. 크기를 키우고 색을 낮춘다. */
.menu-x{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);margin-right:calc(var(--s3) * -1);
  border:0;background:none;color:var(--c-text-mute);cursor:pointer;border-radius:var(--r-pill);
  transition:color var(--m-fast) var(--m-ease),transform var(--m-fast) var(--m-ease)}
.menu-x:hover{color:var(--c-text);transform:scale(1.12)}
.menu-x:active{transform:scale(var(--m-press))}

/* 🔴 16단계 — 서랍 맨 위 로그인 자리. mixtiles 실측(390px 폰)에 맞췄다.
     저쪽:  안내 글 16px → 핑크 채운 버튼 165×36 · 16px/700 · radius 6px
            구분선은 좌우 20px 을 뺀 **280px** (서랍 폭 320)
     우리(전): 흰 테두리 버튼 121×48 · 14px/700 · radius 15px  ← 정반대였다
   🔴 높이만 우리 것을 지킨다. 36px 은 손가락 기준(48px) 미달이다 — owner 결정. */
/* 🔴 2026-08-09 — 왼쪽 기준선 8px 이동 (위 .menu-head 주석 참고). 이름·버튼이 여기 산다. */
.menu-auth{margin-bottom:var(--s4);padding-bottom:var(--s4);padding-left:var(--s2);
  border-bottom:1px solid var(--c-border)}
/* 🔴 모바일 3회감사 — mixtiles 보다 2px 작고 흐렸다. */
.menu-note{margin:0 0 var(--s3);color:var(--c-text);
  font-size:var(--t-body);line-height:1.5}
.menu-note b{color:var(--c-text)}
/* 🔴 모바일 3회감사 — mixtiles 대비 글자 2px 작고 판이 44px 좁았다. */
.menu-auth-btn{align-self:flex-start;min-height:var(--tap);
  padding:0 var(--s6);font-size:var(--t-body);border-radius:var(--r-md)}
/* 로그인하신 뒤 — 이름과 두 개의 길(내 정보 · 로그아웃) */
.menu-who{display:block;margin:0 0 var(--s3);font-weight:700;
  font-size:var(--t-lg);line-height:var(--t-lg-lh);color:var(--c-text-strong);
  overflow-wrap:anywhere}   /* 🔴 이름이 길어도 서랍을 밀어내지 않게 */
.menu-auth .row{display:flex;gap:var(--s3);flex-wrap:wrap}

/* 🔴 서랍 안 주 버튼. mixtiles 는 **내용 폭**이고 왼쪽에 붙는다.
   내가 가로로 꽉 채워 놨었다 — 그러면 서랍이 버튼 하나로 꽉 찬 인상이 된다. */

.menu-list{list-style:none;margin:0;padding:0}
/* 🔴 묶음 사이는 **줄**로 나눈다. 여백만으로 나누면 화면이 작을 때 붙어 버린다. */
.menu-list--top{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--c-border)}
/* 🔴 16단계 실측 — 서랍 왼쪽 기준선이 **16 / 28 / 76 세 갈래**라 세로줄이 안 맞았다.
   항목만 왼쪽에 12px 을 더 먹고 있었다. 왼쪽 여백을 0 으로 해 전부 x=16 에 세운다.
   🔴 2026-08-09 owner 지시로 그 기준선을 **x=24** 로 옮겼다. 여기 8px 은 그 몫이다 —
      혼자 바꾸지 말 것. head·auth·foot 도 같은 8px 을 먹고 있다(위 주석).
      배경(눌리는 자리)은 여전히 16px 에서 시작한다 — padding 으로 밀었기 때문이다. */
.menu-list a,
.menu-list button{display:flex;align-items:center;gap:var(--s4);width:100%;
  min-height:var(--tap);padding:0 var(--s3) 0 var(--s2);
  border:0;background:none;border-radius:var(--r-lg);
  font:inherit;font-size:var(--t-body);font-weight:600;
  color:var(--c-text);text-align:left;text-decoration:none;cursor:pointer;
  transition:background var(--m-fast) var(--m-ease),
             color var(--m-fast) var(--m-ease),
             transform var(--m-fast) var(--m-ease)}
/* 🔴 16단계 mixtiles 실측 대조 — 우리가 굵고 아이콘이 작았다.
     글자   저쪽 16px/**400**  ·  우리 16px/**600**
     아이콘 저쪽 **32px**      ·  우리 **24px**
   서랍은 훑어보는 곳이라 굵은 글씨가 줄줄이 늘어서면 무겁게 읽힌다. */
/* 🔴 모바일 3회감사 — mixtiles 는 500 이다 (우리 400). 한 단계 올린다. */
.menu-list a,.menu-list button{font-weight:500}

/* 🔴 서랍 맨 아래 — mixtiles 는 **아이콘 없는 14px 글씨** 묶음이다 (실측 38px 간격).
   우리는 이 자리가 통째로 비어 있었다. */
.menu-foot{list-style:none;margin:var(--s5) 0 0;padding:var(--s4) 0 0;
  border-top:1px solid var(--c-border)}
/* 🔴 2026-08-09 — 왼쪽 기준선 8px 이동 (위 .menu-head 주석 참고). */
.menu-foot a{display:flex;align-items:center;min-height:var(--tap);
  padding-left:var(--s2);
  font-size:var(--t-sm);color:var(--c-text-sub);text-decoration:none;
  transition:color var(--m-base) var(--m-ease),transform var(--m-fast) var(--m-ease)}
.menu-foot a:hover{color:var(--c-text);text-decoration:underline;text-decoration-thickness:2px;
  transform:translateX(2px)}
.menu-foot a:active{transform:scale(var(--m-press))}
/* 🔴 처음에 올리면 핑크 글자로 바꾸려 했다. --c-text-brand 는 4.53:1 로
   **18px 굵게 이상에만** 쓸 수 있는 색이다. 여기 글자는 17px 라 규칙 위반이다.
   바탕색과 밀림으로만 알린다 — 색 하나에 기대지 않는다(WCAG 1.4.1). */
.menu-list a:hover,
.menu-list button:hover{background:var(--c-surface-soft);transform:translateX(3px)}
.menu-list a:active,
.menu-list button:active{transform:scale(var(--m-press))}

/* 🔴 아이콘. 선 굵기·색을 여기서 한 번에 정한다 — 인라인 SVG 마다 적으면
   나중에 하나만 고쳐지고 나머지가 남는다. flex 안에서 찌그러지지 않게 shrink 0. */
/* 🔴 16단계 재실측 — 예전 주석의 「아이콘 24px」 은 **반쪽만 맞았다.**
     mixtiles svg **상자** 32×32  ·  그 안에 **실제로 그려진 그림** 14~17px
     글자는 아이콘 시작점에서 **51px** 떨어져 시작한다.
   우리는 상자 24 + 간격 16 = **40px** 이라 11px 좁았다 — 목록이 빽빽해 보인다.
   → 상자를 32 로 키워 40 → **48px** 로 맞춘다 (저쪽 51 과 3px 차이).
   ⚠ 그림 자체는 우리가 더 굵다(우리 viewBox 24 를 꽉 채워 그림 ≈24px, 저쪽 14~17px).
     아이콘을 다시 그리지 않는 한 완전히 같게는 못 만든다 — **확인된 차이로 남긴다.** */
.menu-list svg{flex:0 0 auto;width:32px;height:32px;fill:none;
  stroke:var(--c-text-sub);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--m-fast) var(--m-ease)}
.menu-list a:hover svg,
.menu-list button:hover svg{stroke:var(--c-text)}

/* 서랍이 열려 있는 동안 뒤 화면이 따라 움직이지 않게 */
/* 🔴 16단계 실측: `overflow:hidden` 하나로는 **보던 자리를 잃는다.**
   페이지 600px 지점에서 메뉴를 열면 scrollY 가 0 으로 무너지고,
   닫으면 손님이 **맨 위로 튕겨 나간다** (600 → 0 → 0 으로 실측).
   뒤 화면이 안 밀리는 것(잠금)은 맞았지만 자리 보존이 안 됐다.
   → body 를 화면에 고정하고 **원래 자리만큼 위로 끌어올린다.**
     그러면 보이는 그림은 그대로이면서 스크롤이 완전히 잠긴다.
     닫을 때 menu.js 가 그 자리로 되돌려 놓는다.
   🔴 top 값은 menu.js 가 넣는다 — 여기 고정값을 쓰면 안 된다. */
body.menu-open,body.help-open{overflow:hidden;position:fixed;left:0;right:0;width:100%}

/* 🔴 움직임을 줄여 달라고 설정한 분에게는 미끄러지지 않고 그냥 나타난다. */
@media (prefers-reduced-motion:reduce){
  .menu,.menu-back{transition:none}
}


/* 🔴 14단계 6회차: 랜딩 로고도 올려도 눌러도 변화가 없었다 (햄버거·채팅은 있는데). */
.brand{transition:opacity var(--m-base) var(--m-ease),transform var(--m-fast) var(--m-ease)}
/* 🔴 owner(2026-08-01): "왜 마우스 오버시 움직이지?" — 로고가 1px 떠오르고 있었다.
   아이콘의 크기 변화는 뺐는데 로고는 **다른 규칙**이라 그대로 남아 있었다.
   움직임만 뺀다. 흐려지는 반응은 남긴다 — 누를 수 있는 것임을 알려야 한다(14단계 근거).
   🔴 :active(누를 때 쑥 들어감)는 그대로 둔다. 그건 "움직임" 이 아니라 눌린 표시다. */
.brand:hover{opacity:.75}
.brand:active{transform:scale(var(--m-press))}


/* ══ 🔴 14단계 6회차 · 남은 것 ══ */
/* 🔴 20단계 — 푸터 링크 반응(hover/active)은 footer.css 의 `.ft-lnk` 로 옮겼다.
   여기 남겨 두면 `.ft nav a` 가 새 구조에는 안 맞아 아무 데도 안 걸린 채
   「고친 줄 알았는데 안 걸리는 규칙」으로 남는다. */
/* 3단계 목록 버튼 — 올리면 변하는데 **누른 느낌이 없었다** */
.steps-auto button:active{transform:scale(var(--m-press))}