/* ==========================================================================
   마케팅 — 방향 C: 日影 Sunprint
   (dashboard/design/directions/C-sunprint.DESIGN.md)

   왜 여기만인가: UAE 가 주력 시장인데 화면에 이 지역이 하나도 없었다. 어느 나라
   제품이라고 해도 믿을 화면이었다. 파는 자리에서는 그게 가장 손해다.

   두 개의 재료에서 나왔다:
     1) **그림자** — 인류가 처음 쓴 시계다. 해시계는 근태 기록의 조상이고, 우리가
        파는 것과 같은 일을 3천 년 전에 하던 물건이다.
     2) **마슈라비야** — 걸프 건축의 목선반 격자창. 사막광을 막는 게 아니라
        **걸러서 무늬로 바꾼다**.

   규칙 하나: **면을 테두리가 아니라 그늘로 나눈다.**

   ⚠️ 제품 화면에는 쓰지 않는다. 그늘만으로 구분하는 방식은 밝은 주방·현장에서
   무너진다(원안에도 적어 둔 이 방향의 최대 약점이다). 여기는 사무실에서 보는
   판매 문서라 안전하고, 대비 폴백도 아래에 같이 둔다.
   ========================================================================== */

:root {
  /* 바탕이 종이가 아니라 **석회암**이다 — 걸프 건축의 실제 재료색 */
  --limestone:   #f0ece3;
  --limestone-2: #e6e0d3;
  --sand:        #dbd2c0;
  /* 그늘은 검정이 아니라 **藍**이다. 사막 그림자는 하늘빛 산란으로 실제로 푸르다.
     이 한 가지가 화면 전체를 하나로 묶는다. */
  --shade-1: rgba(28, 42, 66, .05);
  --shade-2: rgba(28, 42, 66, .10);
  --shade-3: rgba(28, 42, 66, .18);
  --deep:    #1c2a42;
  /* 유일한 온색. 액센트가 아니라 **빛**이다 — 강조하려고 칠하는 게 아니라
     빛이 닿는 곳에 생긴다. */
  --sunlight:      #d9a441;
  --sunlight-soft: #f0dcae;
  /* 텍스트도 변수로 둔다. 아래 다크 블록에서 **변수만 뒤집으면** 되고
     컴포넌트별 다크 규칙이 필요 없어진다 — 그 규칙들이 특이도 싸움을 일으켰다
     (다크의 a.btn 배경이 a.btn.ghost 의 transparent 를 이겨 글자가 사라졌다). */
  --ink-soft:  #3b4557;
  --ink-quiet: #5c6779;
  --win:       #2f6f52;
  --rule:      rgba(28, 42, 66, .10);
}

body { background: var(--limestone); }

/* 여백이 넓다 — 사막 건축의 중정처럼 빈 곳이 구조다 */
section { padding: var(--s8) 0 calc(var(--s8) + var(--s4)); border-bottom: 0; }
/* 구획은 선이 아니라 **빛의 띠**로 나눈다 */
section + section { border-top: 1px solid rgba(28, 42, 66, .08); }

h1, h2 { color: var(--deep); }
.lede { color: var(--ink-soft); }

/* ---- 그늘로 뜨는 카드 ----
   테두리가 없다. 빛을 받고 그늘을 드리운다. */
.card, .price > div, .tblwrap {
  background: var(--limestone);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px var(--shade-1), 0 10px 26px -10px var(--shade-2);
}
.card { padding: var(--s5); }

/* ⚠️ 대비 폴백. 그늘만으로 구분하면 밝은 화면·저시력 사용자에게 면이 사라진다.
   원안에도 "이 폴백 없이 배포하지 말 것"이라고 적어 뒀다. */
@media (prefers-contrast: more) {
  .card, .price > div, .tblwrap {
    border: 1px solid var(--shade-3);
    box-shadow: none;
  }
}

/* ---- 빛 ---- */
.mark {
  background: var(--deep); color: var(--limestone);
  border-radius: 12px;
  box-shadow: 0 2px 10px var(--shade-2);
}
a.btn {
  background: var(--deep); color: var(--limestone);
  border-radius: var(--r-md);
  box-shadow: 0 2px 6px var(--shade-2), 0 12px 24px -12px var(--shade-3);
}
a.btn:hover { filter: brightness(1.12); }
/* ghost 는 배경이 없다. 다크에서 이 한 줄이 a.btn 의 배경 규칙에 밀려
   글자색과 배경색이 같아지는 사고가 났었다 — 이제 다크 규칙 자체가 없어서 안전하다. */
a.btn.ghost {
  background: transparent; color: var(--deep);
  border: 1px solid color-mix(in srgb, var(--deep) 30%, transparent); box-shadow: none;
}
a.btn.ghost:hover { background: color-mix(in srgb, var(--deep) 8%, transparent); }

/* 가격표의 추천 항목에만 빛이 닿는다 */
.price > div.best {
  background: var(--sunlight-soft);
  box-shadow: 0 2px 8px var(--shade-2), 0 16px 32px -14px var(--shade-3);
}

th { color: var(--ink-quiet); }
td, th { border-bottom-color: var(--rule); }
.win { color: var(--win); font-weight: 650; }
.sub { color: var(--ink-quiet); }

/* ---- 마슈라비야 ----
   격자는 **빈 자리와 구획 경계**에만 쓴다. 배경 전체에 깔면 문화 요소가 벽지가 되고
   그 순간 값어치가 사라진다. */
.screen, .state-empty {
  background-image:
    repeating-linear-gradient(45deg,  rgba(28, 42, 66, .05) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(28, 42, 66, .05) 0 1px, transparent 1px 12px);
}

/* ---- 시그니처: 빛의 각도 ----
   화면 위쪽의 빛이 **실제 시각**을 따라 기운다. 아침엔 길고 낮게, 정오엔 거의 사라지고,
   저녁엔 반대편으로. 흘긋 보면 지금이 하루 중 언제인지 읽기 전에 안다.
   --sun-angle 은 index.html 이 로컬 시각으로 넣는다. 스크립트가 없으면 기본값으로
   가만히 있는다 — 움직임이 없다고 화면이 깨지지는 않는다. */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: -40% -10% auto -10%; height: 70%;
  background: linear-gradient(var(--sun-angle, 160deg),
    rgba(217, 164, 65, .16) 0%, rgba(217, 164, 65, 0) 62%);
  pointer-events: none;
  transition: background 1.2s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .hero::before { transition: none; } }

/* 다크에서는 밤이다 — 그늘이 아니라 어둠이 바탕이 된다. 판매 문서라 낮 화면이
   정본이고 다크는 읽히기만 하면 된다.

   **변수만 뒤집는다.** 예전엔 여기서 a.btn / .mark / th 를 각각 다시 칠했는데,
   다크의 `a.btn` 배경 규칙이 `a.btn.ghost` 의 transparent 보다 특이도가 높아서
   고스트 버튼의 글자와 배경이 **같은 색**이 됐다(대비 1:1, 글자가 사라졌다).
   컴포넌트를 건드리지 않으면 그 싸움 자체가 없다.

   OS 설정과 명시적 data-theme 둘 다 받는다 — tokens.css 와 같은 규약이다.
   한쪽만 두면 테마 토글이 토큰만 바꾸고 이 파일은 안 바뀌어 화면이 반쯤 갈라진다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --limestone: #14202e; --limestone-2: #1a2939; --sand: #22303f;
    --deep: #cfd9e6;
    --sunlight-soft: #2c2416;
    --ink-soft: #c3cbd6; --ink-quiet: #9aa7b8; --win: #5fbf8e;
    --rule: rgba(207, 217, 230, .12);
    --shade-1: rgba(0, 0, 0, .3); --shade-2: rgba(0, 0, 0, .45); --shade-3: rgba(0, 0, 0, .6);
  }
}
[data-theme="dark"] {
  --limestone: #14202e; --limestone-2: #1a2939; --sand: #22303f;
  --deep: #cfd9e6;
  --sunlight-soft: #2c2416;
  --ink-soft: #c3cbd6; --ink-quiet: #9aa7b8; --win: #5fbf8e;
  --rule: rgba(207, 217, 230, .12);
  --shade-1: rgba(0, 0, 0, .3); --shade-2: rgba(0, 0, 0, .45); --shade-3: rgba(0, 0, 0, .6);
}

/* 마슈라비야 격자도 어둠에서는 밝은 실로 보인다 */
[data-theme="dark"] .screen, [data-theme="dark"] .state-empty {
  background-image:
    repeating-linear-gradient(45deg,  rgba(207, 217, 230, .05) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(207, 217, 230, .05) 0 1px, transparent 1px 12px);
}