/* ============================================================
   2027shopdemo — Design Tokens "Neutral Atelier"
   ------------------------------------------------------------
   Concept: 아이보리 라이트 베이스 + 차콜 잉크 + 넉넉한 여백
            + 얇은 라인 + 절제된 테라코타 포인트
   Refs   : 2027demo design-tokens.css 구조 차용 (패션 톤 재조정)
   Scope  : 쇼핑몰 메인페이지(www/index.jsp) 전용 — 모듈 페이지 미적용
   ============================================================ */

:root {
  /* ───── Surface ───── */
  --bg-base:    #ffffff;          /* 페이지 기본 */
  --bg-cream:   #faf7f1;          /* 섹션 교차 (아이보리) */
  --bg-sand:    #f1ece2;          /* 강조 블록 (샌드) */
  --bg-ink:     #1c1a17;          /* 다크 섹션 / 푸터 */
  --bg-ink-soft:#262320;

  /* ───── Ink (Text) ───── */
  --ink:        #1c1a17;          /* 헤딩 / 메인 액센트 */
  --ink-body:   #45413a;          /* 본문 */
  --ink-soft:   #6f6a5f;          /* 보조 */
  --ink-muted:  #9c968a;          /* 캡션 / 비활성 */
  --ink-inv:    #f7f4ee;          /* 다크 배경 위 텍스트 */

  /* ───── Line ───── */
  --line:       #e7e2d7;          /* 기본 보더 */
  --line-soft:  #f0ece3;          /* 옅은 보더 */
  --line-ink:   #1c1a17;          /* 강조 보더 */

  /* ───── Point (절제 사용) ───── */
  --point:      #a8472e;          /* 테라코타 — 세일가 / 강조 */
  --point-soft: #c97c52;          /* 라이트 테라코타 */
  --point-tint: #f3e4da;          /* 테라코타 틴트 (배경 강조) */
  --point-deep: #8c3a25;          /* 딥 테라코타 (호버) */
  --sale:       #b5402c;          /* 할인율 배지 */

  /* ───── Typography ───── */
  --font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-disp: "Poppins", "Pretendard Variable", "Noto Sans KR", sans-serif;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1.0625rem;  /* 17 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.625rem;   /* 26 */
  --fs-2xl:  2.25rem;    /* 36 */
  --fs-3xl:  3rem;       /* 48 */
  --fs-4xl:  4.25rem;    /* 68 */

  --ls-tight: -0.02em;
  --ls-disp:  -0.035em;
  --ls-wide:  0.02em;
  --ls-caps:  0.22em;    /* 영문 대문자 캡션 */

  /* ───── Layout ───── */
  --wrap:     1320px;
  --wrap-pad: clamp(20px, 4vw, 48px);
  --sec-py:   clamp(56px, 8vw, 110px);

  /* ───── Radius / Shadow ───── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  --sh-sm: 0 2px 10px rgba(28, 26, 23, 0.05);
  --sh-md: 0 10px 30px rgba(28, 26, 23, 0.08);
  --sh-lg: 0 20px 50px rgba(28, 26, 23, 0.12);

  /* ───── Motion ───── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* expo-out: 부드러운 감속 */
  --ease-soft: cubic-bezier(0.33, 0.85, 0.3, 1); /* 카드 미세 인터랙션 */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);    /* 강한 감속 (리빌) */
  --dur:  0.45s;

  /* ───── Header heights (스크롤 컴팩트) ───── */
  --hdr-h:         76px;   /* 기본 헤더 높이 */
  --hdr-h-compact: 60px;   /* 스크롤 시 축소 높이 */

  /* ───── z-index ───── */
  --z-progress: 540;       /* 스크롤 진행바 */
  --z-totop:    480;       /* back-to-top */
}

/* 미세 그레인 텍스처 — 히어로/다크 섹션 깊이감 */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ============================================================
   Reset
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.shopmain {
  background: var(--bg-base);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.shopmain img { max-width: 100%; display: block; }
/* :where() 로 명시도 0 — 버튼/링크의 자체 color 지정이 항상 우선되도록 */
:where(body.shopmain) a { color: inherit; text-decoration: none; }
body.shopmain ul, body.shopmain ol { list-style: none; }
body.shopmain button { font-family: inherit; cursor: pointer; border: 0; background: none; }

::selection { background: var(--ink); color: var(--ink-inv); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-cream); }
::-webkit-scrollbar-thumb { background: #d3cdbf; border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }