/* =====================================================================
   상상인 시작 키트 v1 — kit.css (2026-10-24)
   골격만 담는다. 색·글꼴·문구는 사이트마다 (README «쓰는 법»).
   - 빌드 없는 순수 CSS: 산출물 = 소스 (gate #11).
   - 전부 @layer kit 안: 사이트 CSS·Tailwind 유틸이 언제나 키트를 이긴다
     (장인 패스 함정 1 «레이어 밖 CSS 가 유틸을 이김» 을 키트 쪽에서 막음).
   - 숫자마다 «근거» 한 줄. 근거 없는 숫자는 넣지 않았다.
   - 질감(닳음·그레인·노이즈)은 넣지 않는다 — 나노바나나 몫.
   ===================================================================== */
@layer kit {

/* ── 1. 토큰 ─────────────────────────────────────────────────────── */
:root {
  /* 04 #1 강제 다크 옵트아웃 — head 의 meta 와 둘 다 (gate #12) */
  color-scheme: only light;

  /* 색 — 자리표시. 회색 중립값이며 어느 사이트 색도 아니다. 이대로 출고 금지.
     겨눔표 «색 하나» 로 --c-one 을 바꾸고, 나머지는 그 사이트 바탕·먹색으로. */
  --c-one:    #6f6f6f;  /* 겨눔표 색 하나 — 색 자리 3곳·주 버튼·초점선 */
  --c-on-one: #ffffff;  /* --c-one 위 글자 */
  --c-ink:    #1f1f1f;  /* 본문 글자 */
  --c-mute:   #6b6b6b;  /* 보조 글자 */
  --c-bg:     #ffffff;  /* 바탕 */
  --c-sub:    #f4f4f4;  /* 두 번째 바탕 */
  --c-line:   #dcdcdc;  /* 선 */
  --c-deep:   #1f1f1f;  /* 가장 진한 색 — 카드 그림자에 섞는다 (eco 손버릇 --ss-deep 자리) */

  /* 글꼴 — 허용 5종만: Pretendard · Plus Jakarta Sans · Noto Serif KR · Playfair Display · Raleway
     (근거: CLAUDE.md 폰트 라이선스 화이트리스트, gate #7). 제목 글꼴은 사이트마다 하나 고른다. */
  --font-body:    'Pretendard', system-ui, sans-serif;
  --font-display: var(--font-body);

  /* 타입 스케일 — 근거: homepage_garden_ecocleancare/src/input.css @theme (--text-display-*, --text-body-*, --leading-*) */
  --fs-d2xl: clamp(2.25rem, 4vw + 1.25rem, 4.5rem);
  --fs-dxl:  clamp(2rem, 3vw + 1.25rem, 3.75rem);
  --fs-dlg:  clamp(1.75rem, 2.25vw + 1.15rem, 3rem);
  --fs-dmd:  clamp(1.375rem, 1.55vw + 1rem, 2.25rem);
  --fs-lg:   1.125rem;
  --fs-base: 1rem;
  --fs-sm:   .875rem;
  --fs-xs:   .75rem;
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.6;

  /* 간격·폭 — 근거: eco input.css :root --gutter, @theme --spacing-section·--width-content-max/narrow, .section-padding(md 8rem) */
  --gutter:    1.5rem;
  --sec:       6rem;
  --sec-md:    8rem;
  --w-max:     1280px;
  --w-narrow:  960px;

  /* 헤더 높이 — 근거: shoppingmall_op/site/style.css:13 (.hd height 76px), :61 (모바일 60px) */
  --hdr-h:   76px;
  --hdr-h-m: 60px;

  /* 반지름 — 근거: eco @theme --radius-base·--radius-btn / 드롭다운 8px = CLAUDE.md */
  --r-base: 1.25rem;
  --r-btn:  9999px;
  --r-menu: 8px;

  /* 그림자 — 근거: eco input.css :root --shadow-sm/md/lg.
     카드 겹그림자 = eco .ss-card (손버릇 R6, input.css:475) 의 구조만, 섞는 색은 --c-deep */
  --sh-sm: 0 1px 3px rgba(0,0,0,.08);
  --sh-md: 0 4px 12px rgba(0,0,0,.10);
  --sh-lg: 0 16px 40px rgba(0,0,0,.12);
  --sh-card:
    0 0 0 1px color-mix(in srgb, var(--c-deep) 6%, transparent),
    0 1px 2px color-mix(in srgb, var(--c-deep) 5%, transparent),
    0 12px 24px -14px color-mix(in srgb, var(--c-deep) 16%, transparent),
    0 34px 64px -34px color-mix(in srgb, var(--c-deep) 24%, transparent);

  /* 움직임 — 곡선 하나 = 손버릇 R5 (skills/craft-pass-skill/SKILL.md, eco .ss-* 공통) · 나타남 .75s = eco .reveal-up */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-reveal: .75s;
  --dur-drawer: .45s;   /* 근거: op style.css:83 .drawer */

  /* 누르는 자리 — 04 #9 · gate #20 */
  --tap: 44px;
}

/* ── 2. 리셋 ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr-h); }
body {
  margin: 0;
  min-height: 100dvh;             /* h-screen 금지 — CLAUDE.md */
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* 근거: eco input.css base h1–h4 (굵기 700·자간 -0.02em). 제목에 색은 주지 않는다 — CLAUDE.md */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; }
[hidden] { display: none !important; }

/* keep-all — 손버릇 R3 (eco input.css:423–428). text-wrap 줄임말은 nowrap 까지 덮으므로 text-wrap-style 만 */
body { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3 { text-wrap-style: balance; }
p, li, dd { text-wrap-style: pretty; }
.num { font-variant-numeric: tabular-nums lining-nums; } /* eco .ss-num */
/* 세로 글 — 장인 패스 함정 2: vertical-rl + rotate 만 쓰면 한글이 거꾸로 선다 → sideways 를 같이 */
.vert { writing-mode: vertical-rl; text-orientation: sideways; }

/* ── 3. 초점 — 04 #6 (근거: op style.css:128 한 줄) ─────────────── */
:focus-visible { outline: 2px solid var(--c-one); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ── 4. 누르는 자리 44px — 04 #9 ──────────────────────────────────
   모양은 작아도 누르는 상자는 44×44. ::after 를 이미 쓰는 요소는 .tap-b(::before).
   top/left 를 px 로 풀리는 calc 로 둔다 — gate #20 이 계산값 px 로 상자를 잰다. */
.tap, .tap-b { position: relative; }
.tap::after, .tap-b::before {
  content: "";
  position: absolute;
  top:  calc(50% - var(--tap) / 2);
  left: calc(50% - var(--tap) / 2);
  width: var(--tap);
  height: var(--tap);
}
.icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); }

/* ── 5. 나타남 — 04 #5: JS 가 없으면 처음부터 보인다 (html.js 일 때만 숨김, gate #16) ── */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px); /* 근거: eco .reveal-up */
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* ── 6. 틀 ──────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: var(--w-narrow); }
.section { padding-block: var(--sec); }

/* 모바일 하단 고정 바(코퍼스 110 sticky_mobile_action_bar)를 쓰면 body 에 .has-bottombar
   = Tailwind `pb-20 md:pb-0` (5rem / 768px↑ 0). 근거: pgsection_data/hunt/2026-10/01_등록_장부.md 110 «조립 주의» */
body.has-bottombar { padding-bottom: 5rem; }

/* ── 7. 버튼 — 근거: eco .btn-primary/.btn-outline/.btn-ghost (padding .75rem 2.5rem, 굵기 700, 자간 .02em, 떠오름 -2px) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap);
  padding: .75rem 2.5rem;
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  font-weight: 700; letter-spacing: .02em;
  transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--c-one); color: var(--c-on-one); }
.btn-outline { border-color: var(--c-one); color: var(--c-one); }
.btn-ghost   { color: var(--c-one); }

/* ── 8. 카드 — 겹그림자(R6). 3등분 카드 단독 배치는 금지.md ──────── */
.card {
  background: var(--c-bg);
  border-radius: var(--r-base);
  box-shadow: var(--sh-card);
  padding: var(--gutter);
}

/* ── 9. 헤더·GNB·서랍 (components/header.html) ─────────────────── */
.hd {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--gutter);
  padding-inline: var(--gutter);
  background: var(--c-bg);
}
.brand { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); }
.gnb ul { display: flex; align-items: center; gap: var(--gutter); }
.gnb a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 16px; letter-spacing: 0; } /* GNB 16px·자간 0 = CLAUDE.md */
.menu-btn { display: none; }

/* 근거: op style.css:83–84 (옆에서 밀려 들어오는 전면 서랍, 닫히면 visibility hidden) */
.drawer {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  padding: var(--gutter);
  background: var(--c-bg);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-drawer) var(--ease), visibility 0s var(--dur-drawer);
}
.drawer.open { transform: none; visibility: visible; transition: transform var(--dur-drawer) var(--ease); }
.drawer-top { display: flex; justify-content: flex-end; align-items: center; min-height: var(--tap); }
.drawer nav a { display: flex; align-items: center; min-height: var(--tap); border-bottom: 1px solid var(--c-line); }
body.lock { overflow: hidden; }

/* ── 10. 히어로 틀 (components/hero.html) ──────────────────────────
   물건 자리는 첫 화면 폭의 1/3 이상 — 근거: 겨눔표 «물건폭≥1/3» 토큰 · gate #22 · 합본 2단계 «손님 물건» */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(100% / 3), 1fr);
  align-items: center;
  gap: var(--gutter);
  min-height: calc(100dvh - var(--hdr-h));
  padding-inline: var(--gutter);
}
.hero-object { min-width: 0; }
.hero-object > img { width: 100%; }

/* ── 11. 돋보기 (components/magnifier.js) — 04 #16 ─────────────────
   렌즈 220px / 모바일 150px · 그림자 = 근거: op style.css:150, :233 */
.loupe-box { position: relative; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.loupe-box > img { width: 100%; height: 100%; object-fit: cover; }
.loupe {
  position: absolute; left: 62%; top: 58%;
  width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--c-bg) 90%, transparent);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  background-repeat: no-repeat;
}

/* ── 12. 폭 ─ 768px = Tailwind md (110 «md:pb-0» 과 같은 경계, eco 모바일 메뉴 max-width:767px) ── */
@media (max-width: 767px) {
  .hd { min-height: var(--hdr-h-m); }
  html { scroll-padding-top: var(--hdr-h-m); }
  .gnb { display: none; }
  .menu-btn { display: inline-grid; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-block: var(--gutter); }
  .loupe { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
}
@media (min-width: 768px) {
  .section { padding-block: var(--sec-md); }
  body.has-bottombar { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .drawer, .drawer.open, .btn { transition: none; }
  .btn:hover { transform: none; }
}

} /* @layer kit */