/* ══════════════════════════════════════════════════════════════════
   세븐.css — crowny.org/seven/ 레이아웃 전용 (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); }

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

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

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

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

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

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

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

/* 마무리 CTA */
.sv-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 .sv-grid, #compare .sv-grid, #area .sv-grid, #read .sv-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  #glanceGrid{ grid-template-columns:1fr; }
  .sv-grid{ grid-template-columns:1fr; }
  #count .sv-grid, #compare .sv-grid, #area .sv-grid, #read .sv-grid, #lang .sv-grid{ grid-template-columns:1fr; }
  .sv-hero .dm-display{ font-size:18px; }  /* 정본 제목 위계 18px */
}

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

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

/* 세븐 복합 마크(2026-10-13) — 히어로 제목 위, 색은 금빛 토큰 */
.sv-mark{width:80px;height:80px;flex:none;display:block;color:var(--dm-accent)}

/* ── 브라우저 홈 정본 연결(10-13 B2): /대문/브라우저홈.css 토큰 소비, 새 색 0 ── */
.dm-card-hero.sv-hero,.sv-hero{ background:var(--input); color:var(--text); border:1px solid var(--border); border-radius:22px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.sv-hero .dm-display{ color:var(--text); }
.sv-hero-desc,.sv-hero .dm-meta,.sv-hero .dm-label{ color:var(--text2); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sv-hero .dm-label,
  :root:not([data-theme="light"]) .sv-hero-desc,
  :root:not([data-theme="light"]) .sv-hero .dm-meta{ color:var(--text2); }
}
:root[data-theme="dark"] .sv-hero .dm-label,
:root[data-theme="dark"] .sv-hero-desc,
:root[data-theme="dark"] .sv-hero .dm-meta{ color:var(--text2); }
/* 활성 칩: 브라우저홈 매핑에서 --dm-on-accent 가 어두운 값이라 어두운 칩 위 글자가 사라짐 → 배경 토큰으로 되돌림 */
.dm-chip[aria-selected="true"], .dm-chip.on{ color:var(--bg); }

/* ── 처음 보는 사용자용 대시보드(2026-10-15 사장님): 영역 장 래퍼 + 장 밑 "지금 열려 있는 서비스" ──
   래퍼 .sv-area 가 그리드 칸이 되므로 .sv-grid > .dm-card 규칙을 래퍼 안 카드에도 그대로 준다. 새 색 0. */
.sv-grid > .sv-area{ display:flex; flex-direction:column; gap:var(--dm-sp-3); min-width:0; }
.sv-grid > .sv-area > .dm-card{ flex:1; gap:var(--dm-sp-4); padding:var(--dm-sp-6) var(--dm-sp-7); text-decoration:none; color:var(--dm-ink); }
.sv-grid > .sv-area > .dm-card-link:hover{ transform:translateY(-3px); box-shadow:var(--dm-shadow-up); border-color:var(--dm-accent); }
.sv-grid > .sv-area > .dm-card-link:focus-visible{ outline:none; box-shadow:var(--dm-ring-accent); }
.sv-status{ display:flex; flex-direction:column; gap:var(--dm-sp-2); padding:0 var(--dm-sp-2); }
.sv-status[hidden]{ display:none; }
.sv-status .dm-label{ margin:0; }
.sv-chips{ display:flex; flex-wrap:wrap; gap:var(--dm-sp-2); }
.sv-chips .dm-chip{ text-decoration:none; }
.sv-guide{ margin:0; }
@media (prefers-reduced-motion:reduce){
  .sv-grid > .sv-area > .dm-card-link{ transition:none; }
  .sv-grid > .sv-area > .dm-card-link:hover{ transform:none; }
}