/* ============================================================================
   찍소 디자인 토큰 — 10단계 재설계 (흰 배경 · AAA)
   🔴 값만 바꾸면 전체가 바뀌어야 한다. 화면에 색·크기를 직접 쓰지 않는다.
   🔴 외부 CDN 금지. 폰트는 /fonts 에 로컬 호스팅한다.

   ── 10단계에서 바뀐 것 ──────────────────────────────────────────────
   owner 결정(2026-07-30): 배경을 **흰색**으로. mixtiles.com 처럼 사진이
   유일한 색이 되게 한다.

   🔴 그래서 기존 팔레트를 그대로 쓸 수 없다. 계산 결과:
        brand-rose   #B97882  3.46:1  실패 (AA 4.5 도 못 넘음)
        brand-mauve  #8A7481  4.29:1  실패
        brand-slate  #6F818E  4.03:1  실패
        brand-sage   #647769  4.79:1  AA 만
        brand-clay   #9B654E  4.81:1  AA 만
      색이 나쁜 게 아니라 **베이지(#F6F1EA) 위에서 맞춘 값**이라
      흰 배경으로 옮기면 어긋난다.
      색상(hue)·채도는 유지하고 **명도만 낮춰** 7:1 을 넘긴 값으로 교체했다.

   🔴 목표는 AA(4.5)가 아니라 **AAA(7:1)** 이다. 아래 값은 전부 계산한 것이고
      주석의 숫자가 실제 대비다. 눈대중으로 고르지 않았다.
      확인: ops/check-contrast.sh (WCAG 2.1 상대휘도 정의)
   ============================================================================ */

/* 🔴 subset 필수 — 전체 한글 11,172자를 넣으면 2,009KB 다. LCP 2.5초 목표에 불리하다.
   사이트에서 쓰는 글자 + 상용 한글 + 라틴/기호만 남겨 153KB (8%) 로 줄였다.
   새 문구를 추가하면 ops/subset-font.sh 를 다시 돌린다. */
@font-face{
  font-family:'Pretendard Variable';
  src:url('/fonts/PretendardSubset.woff2') format('woff2-variations');
  font-weight:45 920; font-style:normal; font-display:swap;
  /* 폰트에 없는 글자는 시스템 폰트로 폴백된다 */
}

:root{
  /* ── 브랜드 원색 ────────────────────────────────────────────────
     🔴 로고를 만드실 때 쓰는 색은 ink · rose 두 가지뿐이다.
        (.document/10단계-디자인-마스터프롬프트.md 2-3절)
        32px 로 줄었을 때 세 가지 색은 뭉개진다.                      */
  --brand-white:#FFFFFF;
  --brand-ink:#1A1A1A;        /* 17.40:1 — 로고·본문 */
  --brand-rose:#824550;       /*  7.20:1 — 로고 포인트 · 강조 */

  /* 파생 — 면·경계용 (글자로 쓰지 않는다) */
  --brand-surface:#FFFFFF;
  --brand-paper:#FAF7F3;      /* 이야기 구역 배경. 먹색 글씨 16.30:1 */
  --brand-rose-soft:#FBF4F5;  /* 포인트 구역 배경. 먹색 글씨 16.05:1 */
  --brand-sand:#F1F1F3;       /* 채움(썸네일 자리·표 머리·진행바). 먹색 15.43:1 */
  --brand-linen:#E4E4E7;      /* 장식 구분선 */
  --brand-charcoal:#525252;   /*  7.81:1 — 보조 글자 */

  /* 상태색 — 전부 흰 배경에서 7:1 을 넘긴 값 */
  --brand-slate:#4B5962;      /*  7.23:1 (원색 #6F818E 는 4.03 이었다) */
  --brand-sage:#4D5C51;       /*  7.08:1 (원색 #647769 는 4.79) */
  --brand-clay:#734F3A;       /*  7.22:1 (원색 #9B654E 는 4.81) */
  --brand-brick:#90403C;      /*  7.04:1 (원색 #8C403B 는 7.21 — 원래 통과했다) */

  /* ── 🔴 접근성 파생색 (텍스트·경계 전용) ────────────────────────
     주석의 숫자는 **흰 배경(#FFFFFF) 기준 대비**다.
     🔴 #666666(5.74:1) 이하는 쓰지 않는다. "조금 더 흐리게" 가 필요하면
        색이 아니라 **글자 크기나 여백**으로 처리한다.                 */
  --c-text-brand:#824550;    /* 7.20 */
  --c-text-accent:#5B4A54;   /* 8.60 — 로즈 계열 보조 */
  --c-text-info:#4B5962;     /* 7.23 */
  --c-text-success:#4D5C51;  /* 7.08 */
  --c-text-warning:#734F3A;  /* 7.22 */
  --c-text-error:#90403C;    /* 7.04 */
  /* 🔴 WCAG 1.4.11 — 입력칸·버튼 테두리는 비텍스트 3:1 이 필요하다.
     장식 구분선(--c-border)과 반드시 구분해서 쓴다.                    */
  --c-border-strong:#8E8E96; /* 3.25 */
  --c-border-input:#8E8E96;  /* 3.25 */

  /* ── 의미 토큰 (화면은 이것만 쓴다) ─────────────────────────── */
  --c-bg:var(--brand-white);           /* 페이지 바탕 */
  --c-surface:var(--brand-white);      /* 카드·입력칸·보조버튼 — 경계선으로 구분한다 */
  --c-surface-soft:#F7F7F8;            /* 구역 띠. 먹색 글씨 16.26:1 */
  --c-surface-alt:var(--brand-sand);   /* 채움(썸네일 자리·표 머리·진행바) */
  --c-surface-paper:var(--brand-paper);/* 이야기 구역 */
  --c-surface-point:var(--brand-rose-soft);
  --c-text:var(--brand-ink);           /* 17.40 */
  --c-text-strong:#111111;             /* 18.88 — 큰 제목 */
  --c-text-sub:var(--brand-charcoal);  /*  7.81 */
  --c-text-mute:#595959;               /*  7.00 — 🔴 AAA 바닥. 이보다 흐리게 가지 않는다 */
  --c-border:var(--brand-linen);       /* 장식 구분선 (3:1 불필요) */
  --c-border-fn:var(--c-border-strong);/* 기능적 경계 (입력·버튼) */
  --c-focus:var(--brand-ink);          /* 17.40 */
  --c-btn-bg:var(--brand-ink);         --c-btn-fg:var(--brand-white);  /* 17.40 */
  --c-btn-point-bg:var(--brand-rose);  --c-btn-point-fg:var(--brand-white); /* 7.20 */
  --c-btn-danger-bg:var(--brand-brick);--c-btn-danger-fg:var(--brand-white);/* 7.04 */
  --c-selected:var(--brand-rose);      /* 선택 상태 '면'에만. 그 위 글자는 흰색 */

  /* ── 타이포 ──────────────────────────────────────────────────
     한글 UI·본문: Pretendard Variable (로컬)
     ⚠️ MaruBuri(에디토리얼)·Instrument Sans(영문)는 아직 미확보 →
        확보 전까지 시스템 세리프/산세리프로 폴백한다.
     🔴 본문 16px 아래로 내려가지 않는다. iOS 사파리는 16px 미만 입력칸에
        초점이 가면 화면을 확대해 버린다 — 주문서에서 나면 손님이 길을 잃는다.
     🔴 한글 줄간격은 1.7. 영문 기준(1.5)이면 받침 때문에 답답해 보인다. */
  --f-sans:'Pretendard Variable',system-ui,-apple-system,sans-serif;
  --f-serif:'MaruBuri','Noto Serif KR',Georgia,serif;

  --t-hero:clamp(32px,7vw,52px);       --t-hero-lh:1.2;
  --t-sec:clamp(26px,4.5vw,36px);      --t-sec-lh:1.3;
  --t-prod:clamp(21px,3vw,26px);       --t-prod-lh:1.35;
  --t-lg:clamp(18px,2vw,20px);         --t-lg-lh:1.4;
  --t-body:clamp(16px,1.2vw,17px);     --t-body-lh:1.7;
  --t-sm:14px;                         --t-sm-lh:1.6;
  --t-cap:13px;                        --t-cap-lh:1.5;

  /* 🔴 products.css · policy.css 가 --t-h1 / --t-h3 을 쓰는데 **정의가 없었다.**
     약관·개인정보처리방침·환불안내·상품 안내 4곳의 제목이 타입 계단을 벗어나
     브라우저 기본값(2em/1.5em)으로 그려지고 있었다. 법정 고지 화면이다.
     계단 안의 값으로 이어 준다. */
  --t-h1:var(--t-sec);
  --t-h3:var(--t-prod);

  /* 🔴 큰 글씨만 자간을 좁힌다. 본문(16~17px)에 음수 자간을 주면 오히려 읽기 어렵다. */
  --ls-hero:-0.03em; --ls-head:-0.02em; --ls-body:0;

  /* ── 여백 (4px 배수) ─────────────────────────────────────────
     🔴 mixtiles 가 넓어 보이는 이유의 절반이 여백이다. 아끼지 않는다. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ── 모양 ────────────────────────────────────────────────────
     🔴 똑같이 둥근 카드를 벽처럼 나열하지 않는다. 모양 수를 최소로. */
  --r-sm:2px; --r-md:4px; --r-lg:8px; --r-pill:999px;
  --tap:44px;                          /* 최소 터치 타겟 */
  --w-content:1200px;                  /* 1440px+ 에서 늘어지지 않게 */

  /* ── 모션 (160~240ms) ──────────────────────────────────────── */
  --m-fast:160ms; --m-base:200ms; --m-slow:240ms;
  --m-ease:cubic-bezier(.2,.6,.3,1);

  /* ── 브레이크포인트 (참고값. @media 에 직접 씀) ──────────────
     compact 360–599 / medium 600–1023 / expanded 1024–1439 / large 1440+ */
}

/* 🔴 모션 감소 설정 존중 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 🔴 키보드 포커스는 어디서나 보여야 한다. 흰 배경이라 먹색 링이 잘 보인다.
   outline-offset 을 줘서 요소에 파묻히지 않게 한다. */
:focus-visible{outline:2px solid var(--c-focus); outline-offset:2px}

/* ── Photo Edge 모티프 ────────────────────────────────────────
   착안: 인화된 사진의 열린 모서리 / 인화지의 흰 여백 / 재단 경계
   🔴 절제해서 쓴다. 모든 카드에 붙이지 않는다.
   🔴 흑백에서도 알아볼 수 있어야 한다 → 색이 아니라 '형태'로 만든다.   */
.photo-edge{position:relative}
.photo-edge::after{
  content:''; position:absolute; right:0; bottom:0;
  width:18px; height:18px; pointer-events:none;
  border-right:2px solid var(--c-text); border-bottom:2px solid var(--c-text);
}
.photo-edge--print::before{           /* 인쇄 영역 경계 */
  content:''; position:absolute; inset:8px; pointer-events:none;
  border:2px dashed var(--c-text);
}
.photo-edge--safe::before{            /* 안전 영역 */
  content:''; position:absolute; inset:16px; pointer-events:none;
  border:1px dotted var(--c-text-sub);
}