/* packages/web-saju1/art.css — ★ /saju1 아이콘·타일 (2026-08-31 · 점신 계열)
 *
 * ★ art.js 가 붙이는 것들의 모양만 여기 있다. app.css 를 고치지 않는다
 *   (`/saju` 는 기능 검증용이라 ★ 유지한다 — 사용자 결정).
 * ★ 아이콘은 ★ 전부 SVG 다 (점신은 48×48 PNG). stroke=currentColor, 강조 조각만 `k`.
 *   그래서 어두운 모드가 ★ 색 규칙 없이 따라온다.
 */

/* ── 공통 선화 ── */
[data-site="saju1"] .tile-ic,
[data-site="saju1"] .ask-art {
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* ★ 강조 조각 — 점신의 노랑 포인트 자리. 우리는 금빛 */
[data-site="saju1"] .tile-ic .k,
[data-site="saju1"] .ask-art .k {
  fill: var(--point); stroke: var(--point); stroke-width: 1.6;
}

/* ═════════════════════════════════════════════════════════════
   타일 그리드 — ★ 점신 홈의 주인공
   48px 아이콘 + 13.3px/600 라벨 (실측값) · 4열
   ═════════════════════════════════════════════════════════════ */
/* ★ 4열 → ★ 2열/4열 반응형. 그림이 72px 이라 좁은 폭에서 4열은 글자가 눌린다 */
[data-site="saju1"] .tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 6px 16px;
  margin: 0 0 14px;
}
[data-site="saju1"] .tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; min-height: 128px; padding: 10px 2px 8px;
  background: transparent; border: 0; border-radius: 10px;
  font-family: inherit; color: var(--ink); cursor: pointer;
  text-align: center;
}
[data-site="saju1"] .tile:hover { background: var(--surface-2); }
[data-site="saju1"] .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ★★ 42px → 72px (2026-09-01)
   ★ 42px 은 ★ 내가 정한 값이지 지켜야 할 값이 아니었다. 그림을 넣으려면 자리를 만들면 된다.
   ★ 원판을 깔아 인물이 카드 위에 ★ 떠 있지 않고 ★ 자리를 갖게 한다 (물음 카드와 같은 규칙). */
[data-site="saju1"] .tile-ic {
  width: 72px; height: 72px; margin-bottom: 6px;
  object-fit: contain; object-position: center bottom;
  background: var(--surface-2); border-radius: 50%;
}
/* ★ 폴백(SVG) 은 면색 위에서 탁해지므로 원판을 걷는다 */
[data-site="saju1"] .tile-ic-svg {
  background: none; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
[data-site="saju1"] .tile .tl {
  font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em;
}
[data-site="saju1"] .tile .tn {
  font-size: 11px; color: var(--ink-3); line-height: 1.3; letter-spacing: -.03em;
}

/* ★ 좁아지면 ★ 열을 줄인다 — 그림을 줄이지 않는다.
   ★ 그림을 36px 로 줄이면 인물이 회색 얼룩이 된다(실측). 4열을 고집할 이유가 없다. */
@media (max-width: 560px) {
  [data-site="saju1"] .tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  [data-site="saju1"] .tiles { grid-template-columns: repeat(2, 1fr); padding: 12px 4px 14px; }
  [data-site="saju1"] .tile { min-height: 132px; }
  [data-site="saju1"] .tile-ic { width: 76px; height: 76px; }
  [data-site="saju1"] .tile .tl { font-size: 13px; }
}


/* ═════════════════════════════════════════════════════════════
   물음 카드 — 점신의 배너 카드 자리. 아이콘 좌측 + 사용자의 말
   ═════════════════════════════════════════════════════════════ */
[data-site="saju1"] .asks { gap: 8px; }
[data-site="saju1"] .ask {
  display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; row-gap: 3px;
  align-items: center;
  padding: 12px 15px;
  background: var(--surface);
  border: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
[data-site="saju1"] .ask:hover { border-color: var(--line-strong); background: var(--surface); }

/* ★ 일러스트 표지 (2026-09-01)
   ★ 44px 을 96px 로 키운 이유 = 그 아래에서는 인물이 회색 얼룩이 된다(실측).
   ★ object-fit: contain — 원본이 정사각이 아니어도 잘리지 않는다.
   ★ 배경 원판을 깐다: 투명 PNG 를 흰 카드 위에 그냥 놓으면 ★ 인물이 카드에 떠 있는 게 아니라
     ★ 잘린 것처럼 보인다. 옅은 면색 원이 ★ 그림의 자리를 만들어 준다. */
[data-site="saju1"] .ask-art {
  grid-row: 1 / span 2; width: 96px; height: 96px;
  align-self: center; justify-self: center;
  object-fit: contain; object-position: center bottom;
  background: var(--surface-2);
  border-radius: 50%;
}
/* ★ 폴백(SVG) 이 걸리면 원판을 걷는다 — 선화는 면색 위에서 탁해진다 */
[data-site="saju1"] .ask-art-svg {
  background: none; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
[data-site="saju1"] .ask .q { grid-column: 2; font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
[data-site="saju1"] .ask .a { grid-column: 2; font-size: 13px; }

/* ═════════════════════════════════════════════════════════════
   신뢰 장치 — ★ 제거됨 (2026-09-01 사용자 지시: "우리 시스템에 대한 설명은 필요 없어")
   ★ art.js 의 trustLine() 과 ★ 한 벌이다. 되살릴 땐 ★ 둘 다 되살린다 —
     한쪽만 되살리면 ★ 아무 일도 안 일어나면서 에러도 안 난다.
   ═════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════
   하단 안내 카드 (2026-09-01) — 시스템 설명을 걷어낸 자리
   ★ 광고 문구지만 ★ 조용하게. 큰 글씨·느낌표·색 남발은 중장년 사용자에게
     신뢰가 아니라 소음으로 읽힌다. 강조는 ★ 금빛 한 군데만.
   ═════════════════════════════════════════════════════════════ */
[data-site="saju1"] .pitch { padding: 20px 18px 18px; }
[data-site="saju1"] .pitch > h2 { margin: 0 0 4px; }
[data-site="saju1"] .pitch-list { display: grid; }
[data-site="saju1"] .pitch-it { padding: 14px 0; border-bottom: 1px solid var(--line); }
[data-site="saju1"] .pitch-it:last-child { border-bottom: 0; }
[data-site="saju1"] .pitch .ph {
  margin: 0 0 5px; font-size: 15.5px; font-weight: 700; letter-spacing: -.025em; color: var(--ink);
}
[data-site="saju1"] .pitch .pd {
  margin: 0; font-size: 14px; line-height: 1.68; color: var(--ink-2);
}
[data-site="saju1"] .pitch .pd .em {
  color: var(--point); font-weight: 700;
}
[data-site="saju1"] .pitch-cta {
  display: block; width: 100%; margin: 16px 0 0;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  min-height: 48px; padding: 0 18px;
  color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 10px;
}
[data-site="saju1"] .pitch-cta:hover { background: var(--accent-hover); }
[data-site="saju1"] .pitch-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═════════════════════════════════════════════════════════════
   절 앞 칩 — 경쟁 3곳이 예외 없이 갖고 있는 것. ★ 번호로 붙인다
   ═════════════════════════════════════════════════════════════ */
[data-site="saju1"] .sec-no {
  display: inline-block; vertical-align: 2px;
  margin-right: 8px; padding: 2px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--point); background: var(--point-soft);
  border-radius: 4px;
}

@media (max-width: 400px) {
  /* ★ 좁아도 ★ 76px 아래로는 안 줄인다 — 그 밑에서 인물이 뭉갠다 */
  [data-site="saju1"] .ask { grid-template-columns: 76px 1fr; column-gap: 12px; padding: 10px 12px; }
  [data-site="saju1"] .ask-art { width: 76px; height: 76px; }
}

/* ═════════════════════════════════════════════════════════════
   메인 배너 — ★ 열두 시진 눈금 위의 지금 자리 (2026-08-31)

   ★★★ 점신은 이 자리를 캐릭터 일러스트로 채운다. 우리는 그 자산이 0장이고
     이미지 생성 도구도 없다 → ★ 흉내 내면 빈 회색 상자만 남는다.
     ★ 그래서 우리만 있는 것을 놓았다. 이건 그림이 아니라 ★ 계기다.
   ★ 눈금 = 세로 기둥이라 ★ 로고와 같은 언어다. 지금 칸만 굵고 금빛.
   ★ 움직이지 않는다 — 시계는 조용해야 한다 (연출은 /saju2 의 몫).
   ═════════════════════════════════════════════════════════════ */
[data-site="saju1"] .banner {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 16px;
  margin: 16px 0 12px;
}
@media (min-width: 520px) {
  [data-site="saju1"] .banner { grid-template-columns: 1fr 264px; align-items: center; gap: 18px; }
}

[data-site="saju1"] .bn-chip {
  display: inline-block; margin-bottom: 9px; padding: 3px 9px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--point); background: var(--point-soft); border-radius: 5px;
}
[data-site="saju1"] .bn-h {
  margin: 0 0 7px;
  font-size: 23px; font-weight: 800; letter-spacing: -.04em; line-height: 1.25;
  color: var(--ink);
}
[data-site="saju1"] .bn-p {
  margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--ink-2);
  max-width: 34em;
}
[data-site="saju1"] .bn-cta {
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  min-height: 44px; padding: 0 18px;
  color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 10px;
}
[data-site="saju1"] .bn-cta:hover { background: var(--accent-hover); }
[data-site="saju1"] .bn-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-site="saju1"] .bn-note {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
}


/* ★ 배너가 위에 서므로 히어로는 ★ 조용해진다 — 굵기는 한 곳에만 쓴다 */
[data-site="saju1"] .hero {
  background: transparent; border: 0; box-shadow: none;
  padding: 18px 4px 6px; margin: 0 0 6px;
}
[data-site="saju1"] .hero h1 { font-size: 22px; }
[data-site="saju1"] .hero p { font-size: 14px; margin-bottom: 14px; }

/* ── 윤도(輪圖) — ★ 이 배너의 signature ──
   ★ 조선의 나침반. 동심 고리에 십이지가 새겨져 있다 — 사주·풍수의 실제 기물이다.
   ★ 장식이 아니라 ★ 읽는 장치다: 바늘이 지금 시진을 가리킨다.
   ★ 돌지 않는다 — 회전시키면 광고가 되고, 정적판(/saju1)의 성격과도 어긋난다. */
/* ★ 배너 그림 자리 — ★ 인물(주인공) + 윤도(계기) 둘을 나란히 (2026-09-01)
   ★ 인물이 크고 윤도가 작다. 둘이 같은 크기면 ★ 무엇을 봐야 할지 알 수 없다. */
[data-site="saju1"] .bn-fig {
  min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: 10px;
}
[data-site="saju1"] .bn-seer {
  display: block; width: auto; height: auto;
  max-width: 168px; max-height: 228px;
  flex: 0 1 auto;
}
[data-site="saju1"] .yundo { display: block; width: 100%; max-width: 124px; height: auto; flex: 0 1 auto; }

@media (max-width: 519px) {
  /* ★ 좁은 화면 = 그림이 글 아래로 내려온다. 여기서는 인물을 더 키운다 */
  [data-site="saju1"] .bn-fig { gap: 14px; }
  [data-site="saju1"] .bn-seer { max-width: 148px; max-height: 202px; }
  [data-site="saju1"] .yundo { max-width: 104px; }
}
@media (max-width: 360px) {
  /* ★ 아주 좁으면 계기를 접는다 — 인물 하나만 남기는 편이 낫다 */
  [data-site="saju1"] .yundo { display: none; }
  [data-site="saju1"] .bn-seer { max-width: 168px; max-height: 228px; }
}

[data-site="saju1"] .yundo .yd-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
[data-site="saju1"] .yundo .yd-core { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.2; }
[data-site="saju1"] .yundo .yd-div  { stroke: var(--line); stroke-width: 1; }
[data-site="saju1"] .yundo .yd-tick { stroke: var(--line-strong); stroke-width: 1; opacity: .7; }
[data-site="saju1"] .yundo .yd-tick-lg { stroke: var(--ink-3); stroke-width: 1.4; opacity: 1; }
[data-site="saju1"] .yundo .yd-on   { fill: var(--point-soft); stroke: var(--point); stroke-width: 1.4; }
[data-site="saju1"] .yundo .yd-lb   { font-size: 15px; font-weight: 700; fill: var(--ink-3); }
[data-site="saju1"] .yundo .yd-lb-on{ font-size: 17px; font-weight: 800; fill: var(--point); }
[data-site="saju1"] .yundo .yd-needle { stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; fill: none; }
[data-site="saju1"] .yundo .yd-tip  { fill: var(--point); stroke: var(--accent); stroke-width: 1.6; }
[data-site="saju1"] .yundo .yd-hub  { fill: var(--accent); }

/* ── 배너 왼쪽 — ★ 큰 글자 하나가 먼저 읽힌다 ── */
[data-site="saju1"] .bn-big { margin: 0 0 8px; display: flex; align-items: baseline; gap: 3px; }
[data-site="saju1"] .bn-jiji {
  font-size: 46px; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: var(--accent);
}
[data-site="saju1"] .bn-si { font-size: 22px; font-weight: 700; color: var(--ink-3); letter-spacing: -.04em; }
@media (max-width: 400px) { [data-site="saju1"] .bn-jiji { font-size: 38px; } }

/* ★ 배너에 아주 옅은 깊이만 — 카드가 평평하면 계기가 종이에 인쇄된 것처럼 보인다 */
[data-site="saju1"] .banner {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  padding: 20px 18px 18px;
}