/* ══════════════════════════════════════════════════════════════════
   세계관.css — crowny.org/worldview/ 레이아웃 전용 (O1)
   대문.css(--dm-* 토큰)·조각-기본.css·조각-영역.css를 소비만 한다.
   색·둥글기·그림자 신규 리터럴 0건. 여백은 --dm-sp-1…10만.
   전제 <link> 순서: 크라우니디자인.css → 대문.css → 조각-기본.css
                     → 조각-영역.css → 세계관.css
   ══════════════════════════════════════════════════════════════════ */

/* 아이콘 스프라이트의 ic-asset-* 는 stroke="var(--gold)" 를 쓴다.
   신규 색이 아니라 등재 토큰 --dm-accent 로 잇는 별칭만 선언한다. */
:root{ --gold: var(--dm-accent); }

/* landing.html 과 같은 리셋 — 없으면 .dm-wrap 의 padding 이 width:100% 에 더해져 가로 넘침 */
*{ box-sizing:border-box; }

body{ margin:0; padding:var(--dm-sp-8) 0 var(--dm-sp-10); }

#wvMain{ gap:var(--dm-sp-8); align-items:stretch; }
/* .dm-wrap 의 margin:0 auto 는 세로 플렉스에서 교차축 auto 마진이라 stretch 를 무효화한다
   (폭이 내용 크기로 제각각 잡힘). 폭만 100% 로 되돌려 정본 --dm-max 로 나란히 맞춘다. */
#wvMain > .dm-wrap{ width:100%; }

/* 상단 줄 — 칩 가로 배치 */
.wv-top{ gap:var(--dm-sp-3); flex-wrap:wrap; justify-content:center; }

/* 히어로 — 정의 한 줄 */
.wv-hero{ text-align:left; }
/* 히어로 제목 = 정본 디스플레이 위계(.dm-display 34px/800/-1px/1.1) 그대로.
   색은 인라인 style 이 아니라 여기서 토큰으로만 준다(라이트=흰 잉크 / 다크=어두운 잉크). */
.wv-hero .dm-display{ color:var(--dm-on-accent); margin:0; }
.wv-hero-desc{ color:var(--dm-on-dark-sub); }
.wv-hero .dm-meta{ color:var(--dm-on-dark-sub); }
.wv-hero .dm-label{ margin:0; }

/* 다크에서 .dm-card-hero 바탕(--dm-ink-strong)이 크림으로 반전되므로 그 위 글자를
   어두운 잉크(--dm-on-accent)로 되돌린다 — 조각-기본.css 의 히어로 다크 규칙과 같은 방식.
   새 색 도입 0건, 대문.css 등재 토큰만 교체 소비. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wv-hero .dm-label,
  :root:not([data-theme="light"]) .wv-hero-desc,
  :root:not([data-theme="light"]) .wv-hero .dm-meta{ color:var(--dm-on-accent); }
}
:root[data-theme="dark"] .wv-hero .dm-label,
:root[data-theme="dark"] .wv-hero-desc,
:root[data-theme="dark"] .wv-hero .dm-meta{ color:var(--dm-on-accent); }

/* 한눈에 표 — 3열 */
#glanceGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--dm-sp-5);
  text-align:left;
}
#glanceGrid > .dm-card{ gap:var(--dm-sp-4); padding:var(--dm-sp-6) var(--dm-sp-7); text-decoration:none; color:var(--dm-ink); }
#glanceGrid > .dm-card-link:hover{ transform:translateY(-3px); box-shadow:var(--dm-shadow-up); border-color:var(--dm-accent); }
#glanceGrid > .dm-card-link:focus-visible{ outline:none; box-shadow:var(--dm-ring-accent); }
#glanceGrid .dm-icon{ flex:none; }

/* 절 섹션 */
.wv-sec{ gap:var(--dm-sp-5); scroll-margin-top:var(--dm-sp-8); text-align:left; }
.wv-sec > .dm-row{ gap:var(--dm-sp-4); flex-wrap:wrap; }
.wv-sec > .dm-row > .dm-hr{ min-width:var(--dm-sp-10); }

.wv-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--dm-sp-5);
  text-align:left;
}
.wv-grid > .dm-card{ gap:var(--dm-sp-4); padding:var(--dm-sp-6) var(--dm-sp-7); text-decoration:none; color:var(--dm-ink); }
.wv-grid > .dm-card-link:hover{ transform:translateY(-3px); box-shadow:var(--dm-shadow-up); border-color:var(--dm-accent); }
.wv-grid > .dm-card-link:focus-visible{ outline:none; box-shadow:var(--dm-ring-accent); }
.wv-grid .dm-icon{ flex:none; }
.wv-grid .dm-meta{ margin:0; }

/* 셈법·비교는 3열, 영역은 조각-영역 리듬과 같은 3열 */
#count .wv-grid, #compare .wv-grid, #area .wv-grid, #read .wv-grid{ grid-template-columns:repeat(3,1fr); }
#lang .wv-grid{ grid-template-columns:repeat(2,1fr); }

/* 시즌 — 칩 가로 타임라인 */
.wv-timeline{ gap:var(--dm-sp-3); flex-wrap:wrap; }

/* 마무리 CTA */
.wv-close-cta{ gap:var(--dm-sp-3); flex-wrap:wrap; justify-content:center; }

/* 반응형 — 조각-영역.css 브레이크포인트 재사용 */
@media (max-width:980px){
  #glanceGrid{ grid-template-columns:repeat(2,1fr); }
  #count .wv-grid, #compare .wv-grid, #area .wv-grid, #read .wv-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  #glanceGrid{ grid-template-columns:1fr; }
  .wv-grid{ grid-template-columns:1fr; }
  #count .wv-grid, #compare .wv-grid, #area .wv-grid, #read .wv-grid, #lang .wv-grid{ grid-template-columns:1fr; }
  .wv-hero .dm-display{ font-size:18px; }  /* 정본 제목 위계 18px */
}

@media (prefers-reduced-motion:reduce){
  #glanceGrid > .dm-card-link, .wv-grid > .dm-card-link{ transition:none; }
  #glanceGrid > .dm-card-link:hover, .wv-grid > .dm-card-link:hover{ transform:none; }
}

@media print{
  body{ padding:var(--dm-sp-4) 0; }
  .wv-top, .wv-close-cta{ display:none; }
}