/* RW-037: 팔레트 재설정(04_자료\참고자료\팔레트_재설정_방향.md 후보 A 샴페인 아이보리) -
   기존 인디고·바이올렛 계열을 웜 아이보리+앤틱골드로 교체(무료, CSS 토큰만 변경). */
:root{
  --bg:#faf6ef; --text:#3a2e22; --muted:#766553;
  --accent:#8f6a2e; --accent2:#d4a373; --border:#e8ddc9;
  --card:#ffffff; --shadow:0 4px 18px rgba(120,90,40,.12);
  --banner-ad-height:0px; /* ads.js가 네이티브에서 실측 배너 높이로 갱신(RW-017) */
  /* 안전영역을 CSS 변수로 한 번 실어 둔다 (2026-09-03 전체계획 #164 · 지시 §24·§30).
     ★ 왜 필요한가 — env(safe-area-inset-*) 는 **CSS 안에서만** 읽힌다. JS 에서는 못 읽는다.
       ads.js 의 지금창폭() 이 getPropertyValue("--sal")/("--sar") 로 이 값을 읽어
       [실제로 쓸 수 있는 폭] 을 잰다 — 그 폭으로 adaptive 배너를 다시 만든다(ads.js:194).
       이 네 줄이 없으면 그 두 읽기가 늘 빈 문자열이라 0 으로 떨어져, 노치·펀치홀이 있는
       가로 방향에서 배너 폭이 화면 폭으로 과대 계산된다.
     ★ 값이 0 이 아니려면 <meta viewport> 에 viewport-fit=cover 가 있어야 한다
       (index.html:6 · entry.html:6 · worry.html:5). 없는 화면에서는 그냥 0 이라 무해하다. */
  --sat:env(safe-area-inset-top,0px);
  --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
}
@media (prefers-color-scheme: dark){
  :root{
    /*  2026-09-12 사람 지시 [곳곳에 남은 브라운 창 모두 삭제] — 다크모드 표면을 브라운에서 남색으로.
        옛 값 --bg:#211a12 / --card:#2c2318 / --border:#40331f 는 리뉴얼 전 갈색 테마의 잔재였고,
        리뉴얼된 화면들(phys-landing #100c1c · 사주집 랜딩 navy · village night)이 그 위를 덮고 있어
        **안 덮은 자리에서만 갈색이 드러났다**(2026-09-12 실측: 청운 화면 픽셀 89.9% 가 #211a12).
        새 값은 지어낸 색이 아니라 이 앱이 이미 쓰는 village.css 의 [night] 팔레트 그대로다.
        대비는 오히려 좋아졌다(재계산): text 14.30→15.20 · muted 7.47→7.94 · accent 4.11→4.37.
        ★ 금색 계열(--accent/--accent2)은 그대로 둔다 — 샴페인골드는 이 앱의 정체성이고
          사람이 지운 것은 [브라운 창(표면)]이지 금색 포인트가 아니다. */
    --bg:#10132a; --text:#f3e9d8; --muted:#b9a98c;
    --accent:#a37236; --accent2:#a8823c; --border:#262c57;
    --card:#1a1f3d; --shadow:0 4px 20px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; gap:20px; background:var(--bg); color:var(--text);
  font-family:var(--font-ui,"Malgun Gothic",sans-serif); padding:28px 20px 36px;
}
/* RW-039: coins.js .tarot-coin-widget(fixed, 우상단)가 겹치지 않도록 헤더 제목에
   배지용 우측 여백을 확보(좁고 긴 화면비율에서도 안전한 값) - width:100%로 박스를
   본문 너비에 맞춰야 padding-right가 정확히 그만큼의 여백으로 반영된다. */
h1{ font-size:1.5rem; margin:0; text-align:center; width:100%; padding-right:160px; }
.sub{ color:var(--muted); font-size:.92rem; margin-top:-12px; text-align:center; }

/* 메인화면 사주+타로 통합형(RW-034/035) - "오늘의 카드"는 독립 섹션으로 축소하고,
   타로 리딩/사주풀이 두 진입점을 entry-grid로 대등하게 배치한다(사주가 타로의
   부가기능처럼 보이던 기존 문제 해소, 기존 타로 핵심 플로우는 그대로 유지). */
.today-card-section{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:20px 20px 24px; box-shadow:var(--shadow); width:100%; max-width:300px;
}
.today-card-section h2{
  margin:0; font-size:.86rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}

.card-area{
  width:200px; height:340px; perspective:1000px;
}
.card-inner{
  position:relative; width:100%; height:100%; transition:transform .5s;
  transform-style:preserve-3d; cursor:pointer;
}
.card-inner.flipped{ transform:rotateY(180deg); }
.card-face{
  position:absolute; inset:0; border-radius:16px; backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14px; box-shadow:var(--shadow); border:1px solid var(--border);
  overflow:hidden;
}
.card-back{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-size:2.4rem;
}
.card-front{
  background:var(--card); transform:rotateY(180deg); text-align:center;
}
.card-front .art{
  width:100%; height:170px; object-fit:cover; border-radius:10px; margin-bottom:8px;
  border:1px solid var(--border);
}
.card-front .art.reversed{ transform:rotate(180deg); }
.card-front .name-ko{ font-size:1.15rem; font-weight:700; margin:2px 0 2px; }
.card-front .name-en{ font-size:.8rem; color:var(--muted); margin-bottom:6px; }
.card-front .keywords{ font-size:.76rem; color:var(--accent); margin-bottom:6px; }
.card-front .meaning{ font-size:.8rem; line-height:1.4; overflow-y:auto; max-height:80px; }

button{
  background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:12px 22px; font-size:.95rem; font-weight:600; cursor:pointer;
  font-family:inherit; min-height:44px; /* RW-074: WCAG 최소 탭 영역 44px */
}
button:hover{ filter:brightness(1.08); }

/* RW-074(2026-08-18): PC/태블릿 반응형 - 두번째씬_마을맵_기획.md §10-4 표를 앱
   전역(전체 화면 공통 요소)에도 적용. 모바일 레이아웃(360~412px 기준)은 그대로 두고
   태블릿·PC에서만 본문 폭·텍스트 크기를 넓힌다(신규 브레이크포인트 체계 신설 안 함,
   기존 calc()/CSS 변수 기반 원칙 유지). */
@media (min-width:768px){
  h1{ font-size:clamp(1.5rem, 2.4vw, 1.9rem); }
  .today-card-section, .entry-grid{ max-width:420px; }
  .card-area{ width:clamp(200px, 22vw, 250px); height:clamp(340px, 37vw, 420px); }
}
@media (min-width:1024px){
  body{ padding:36px 24px 44px; }
  .today-card-section, .entry-grid{ max-width:480px; }
  .card-area{ width:clamp(200px, 16vw, 280px); height:clamp(340px, 27vw, 470px); }
}

/* 타로 리딩 / 사주풀이 진입점 - 두 축을 동일한 카드 크기·스타일로 대등하게 배치(RW-034/035) */
.entry-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:300px;
}
.entry-card{
  display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none;
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:22px 12px; box-shadow:var(--shadow); color:var(--text); text-align:center;
}
.entry-card:hover{ filter:brightness(1.05); }
.entry-card .entry-icon{
  font-size:2.1rem; line-height:1; width:1.3em; height:1.3em;
  display:flex; align-items:center; justify-content:center;
}
.entry-card .entry-icon svg{ width:1em; height:1em; display:block; }
.entry-card .entry-title{ font-size:.95rem; font-weight:700; }
.entry-card .entry-desc{ font-size:.72rem; color:var(--muted); line-height:1.3; }

/* 카드 사전(RW-008)·리딩 히스토리(RW-009) 진입 링크 - 둘 다 무료 기능이라 배지 없음 */
.nav-links{ display:flex; gap:14px; margin-top:-4px; }
.nav-links a{
  color:var(--muted); font-size:.82rem; text-decoration:none;
  border:1px solid var(--border); border-radius:999px; padding:6px 14px;
}
.nav-links a:hover{ color:var(--accent); border-color:var(--accent); }

footer{ color:var(--muted); font-size:.78rem; text-align:center; max-width:320px; }

/* 하단 배너 광고(네이티브 오버레이)가 콘텐츠를 가리지 않도록 여백 확보 - ads.js가 부여.
   고정 px 대신 실측 --banner-ad-height 변수 기반(기기별 adaptive banner 높이가 달라짐, RW-017) */
body.has-banner-ad{ padding-bottom:calc(var(--banner-ad-height) + 48px); }