/* 오늘 벙 없어? 정보 사이트 공통 셸(#3294, #2986).
 *
 * 홈·소개·가이드·법적 문서·계정 삭제 요청·404 가 이 파일 하나를 공유한다. 앱 링크 랜딩
 * (link.html)은 예외다 — Function 이 통째로 읽어 og 태그만 갈아 끼우는 파일이라
 * 스타일을 인라인으로 들고 있고, 이 파일을 참조하지 않는다.
 *
 * 외부 요청은 0 이다. 글꼴은 시스템 한글 글꼴만 쓰고 CDN 을 끌어오지 않는다. 처리방침
 * 15장의 "제3자 행태정보 수집 해당 없음" 선언과 맞추기 위해서다.
 *
 * 색은 CSS 변수로만 쓴다. 브랜드 주황(#FF8C00)과 진갈색 글자(#5C2E00)는 랜딩 카드의
 * 값이고, 다크 모드의 강조색(#FDB975)은 앱 다크 테마의 primary 계열
 * (lib/common/constants.dart)이다. 법적 문서처럼 항상 밝게 둘 페이지는 <html> 에
 * data-theme="light" 를 단다.
 */

:root {
  color-scheme: light dark;
  --brand: #FF8C00;
  --brand-ink: #5C2E00;
  --accent: #FF8C00;
  --bg: #ffffff;
  --surface: #f6f6f6;
  --ink: #1c1c1c;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --content-width: 720px;
  --wide-width: 960px;
  --gutter: 20px;
}

/* 다크 모드. data-theme="light" 를 단 페이지는 제외한다 — 밝은 토큰을 다시 적는 대신
   어두운 쪽을 좁혀서, 밝은 색은 위 :root 한 곳에서만 고친다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #FDB975;
    --bg: #121212;
    --surface: #1e1e1e;
    --ink: #eaeaea;
    --muted: #a3a3a3;
    --line: #2c2c2c;
  }
}

:root[data-theme="light"] { color-scheme: light; }

/* 다크 고정. 앱(#3852)이 가이드를 theme=dark 로 열면 기기 설정과 무관하게 어둡게 그린다
   (data-theme 은 가이드 페이지의 인라인 스크립트가 단다). 값은 위 미디어 쿼리 블록과 같다 —
   한쪽을 고치면 다른 쪽도 고친다. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #FDB975;
  --bg: #121212;
  --surface: #1e1e1e;
  --ink: #eaeaea;
  --muted: #a3a3a3;
  --line: #2c2c2c;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  /* 한글은 어절 단위로 줄을 바꾼다. 음절 사이에서 끊기면 안내문이 읽기 어렵다.
     overflow-wrap 은 anywhere 가 아니라 break-word 다. anywhere 는 min-content 폭에
     줄바꿈 기회를 넣어 표가 언제나 컨테이너 안에 들어가 버리고, 그러면 .table-wrap 의
     가로 스크롤이 켜질 일이 없어 좁은 칸에서 어절이 음절 단위로 끊긴다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.35; }

/* ---- 레이아웃 ---------------------------------------------------------- */

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container.wide { max-width: var(--wide-width); }

/* ---- 공통 헤더 --------------------------------------------------------- */

.site-header {
  height: 56px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.site-header .inner {
  max-width: var(--wide-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}

.site-nav { display: flex; gap: 16px; }

.site-nav a {
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}

/* 메뉴가 넷이 되며(#3851) 360px 에서 브랜드와 합친 폭이 화면을 넘는다. 좁은 화면에서만
   간격과 글자를 줄이고, 320px 에서는 브랜드도 줄인다. 줄이지 않으면 브랜드가 두 줄로 꺾인다. */
.brand,
.site-nav a { white-space: nowrap; }

@media (max-width: 400px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 0.875rem; }
}

@media (max-width: 340px) {
  .brand { font-size: 1rem; }
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 0.8125rem; }
}

/* ---- 공통 푸터 --------------------------------------------------------- */

.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding: 32px var(--gutter);
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer .inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.site-footer p { margin: 0; }

/* ---- 홈 ---------------------------------------------------------------- */

/* 주황 위 흰 글자는 대비가 2.3:1 이라 큰 글자 기준(3:1)에도 못 미친다. 랜딩 카드의
   버튼과 같은 진갈색을 쓴다(4.9:1). */
.hero {
  background: var(--brand);
  color: var(--brand-ink);
  text-align: center;
  padding: 64px var(--gutter);
}

.hero h1 {
  margin: 0 0 12px;
  font-size: 2.25rem;
}

.hero .tagline {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
}

.hero .lede {
  max-width: 32em;
  margin: 0 auto;
}

/* 스토어 배지(#3907). 공식 배지는 고치지 않고 높이만 맞춘다. 44px 이면 둘이 폭 360px
   기기에 한 줄로 들어가고, 넘치면 줄을 바꾼다. 랜딩(link.html)은 이 파일을 읽지 않아
   같은 값을 따로 든다. */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
}

.stores img {
  display: block;
  width: auto;
  height: 44px;
}

/* 트랙 최소값을 0 으로 두는 이유는 소개 페이지의 .feature-list 주석과 같다. */
.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.feature {
  position: relative;
  padding: 24px;
  border-radius: 16px;
  background: var(--surface);
}

.feature h2,
.feature h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
}

.feature p {
  margin: 0;
  color: var(--muted);
}

/* 홈 대표 기능 절의 제목. 첫 카드 줄은 제목이 숨어 있어 여백을 카드 위에 두지만, 이 절은
   제목이 보이므로 여백을 제목 위로 옮긴다. */
.section-title {
  margin: 64px 0 0;
  font-size: 1.375rem;
  text-align: center;
}

.section-title + .features { margin-top: 24px; }

/* 대표 기능 카드는 제목의 링크를 카드 전체로 늘린다. 카드 안에 다른 링크가 없어 겹치지 않는다.
   누를 수 있다는 표시는 제목 뒤의 꺾쇠 하나다. 꺾쇠는 장식이라 대체 텍스트를 비운다(`/ ""` 를
   모르는 엔진은 앞 선언을 쓴다). 카드 제목 중 h3 는 링크 카드뿐이라(첫 카드 줄은 h2) 꺾쇠를
   `:has(a)` 없이 h3 에 단다 — `:has()` 를 모르는 엔진에서 규칙째 무시되어 유일한 표시가
   사라지지 않게. 링크 없는 h3 카드를 두게 되면 셀렉터를 다시 좁힌다. */
.feature h3 a {
  color: inherit;
  text-decoration: none;
}

.feature h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.feature h3::after {
  content: " ›";
  content: " ›" / "";
  color: var(--muted);
}

/* 터치 기기는 탭한 카드에 :hover 가 남아, 소개로 갔다 뒤로 오면 테두리가 붙은 채 보인다.
   마우스가 있는 환경에서만 켠다. */
@media (hover: hover) {
  .feature h3 a:hover::after { box-shadow: inset 0 0 0 2px var(--accent); }
}

/* 포커스 외곽선은 카드 밖, 페이지 배경 위에 그려진다. 라이트의 주황(#FF8C00)은 흰 배경과
   2.3:1 이라 비텍스트 대비 3:1 에 못 미쳐 글자색을 쓴다. */
.feature h3 a:focus-visible { outline: none; }

.feature h3 a:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- 버튼 -------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--brand-ink);
  font-weight: 700;
  text-decoration: none;
}

/* ---- 문서형 페이지(소개·법적 문서·계정 삭제 요청) ---------------------- */

.page { padding: 40px 0 0; }

.page h1 {
  margin: 0 0 16px;
  font-size: 1.75rem;
}

.page h2 {
  margin: 40px 0 12px;
  font-size: 1.25rem;
}

.page h3 {
  margin: 28px 0 8px;
  font-size: 1.0625rem;
}

.page p,
.page ul,
.page ol { margin: 0 0 16px; }

.page hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* 처리방침의 표는 폭이 넓어 좁은 화면에서 잘린다. 표마다 이 래퍼로 감싼다. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
}

.page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.page th,
.page td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.page th { background: var(--surface); }

/* ---- 소개·계정 삭제 요청(#3296) ---------------------------------------- */

/* h1 바로 아래 한 줄. 계정 삭제 요청의 앱·개발자 이름이 여기 온다. */
.page .byline {
  margin: -8px 0 24px;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* 계정 삭제 요청의 "앱 없이 요청하기" 상자. Play 는 요청 경로가 눈에 띌 것을 요건으로
   둔다. */
.callout {
  margin: 0 0 16px;
  padding: 20px 24px;
  border-left: 4px solid var(--accent);
  border-radius: 16px;
  background: var(--surface);
}

.callout p:last-child { margin: 0; }

/* 소개 페이지 상단의 절 바로가기. 절이 아홉이라 페이지가 길다. 좁은 화면에서는 줄을
   바꿔 감긴다. */
.page .toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.page .toc a {
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9375rem;
  text-decoration: none;
}

/* 소개 페이지의 절마다 딸린 기능 카드. 넓은 화면에서 두 줄로 놓는다. 카드 문구가
   스토어 스크린샷 문구의 원본이라 제목 한 줄과 한두 문장으로 짧다.
   트랙은 `1fr` 이 아니라 `minmax(0, 1fr)` 이다. `1fr` 의 최소값 auto 는 min-content 라,
   keep-all 에서 줄바꿈 기회가 없는 긴 어절이 있으면 트랙이 그보다 좁아지지 못해 좁은 화면에서
   가로로 넘친다. break-word 는 min-content 를 줄이지 않는다(body 주석). 가운뎃점(·)으로 이은
   나열이 그런 어절이 될 수 있다 — Chrome 은 lang="ko" 에서 가운뎃점 뒤를 끊지만, 가운뎃점의
   줄바꿈 등급(AI)을 어떻게 풀지는 엔진마다 다르다. 최소값을 0 으로 두면 어느 엔진에서든
   break-word 가 배치 시점에 끊는다. 그래도 어절 중간이 끊기면 읽기 어려우니 긴 나열은 쉼표와
   공백으로 쓴다. */
.page .feature-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .page .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page .feature-list li {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--surface);
}

.page .feature-list h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.page .feature-list p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* 소개 페이지 끝의 스토어 배지 줄. .stores 와 같이 쓰며, 이 규칙이 뒤에 있어 위 여백만
   이 값으로 넓힌다. */
.cta {
  margin-top: 48px;
  text-align: center;
}

/* 홈 대표 기능 아래의 '기능 모두 보기' 버튼 줄. */
.more {
  margin: 32px 0 0;
  text-align: center;
}

/* ---- 앱 가이드(#3851) -------------------------------------------------- */

/* 앱(#3852)이 ?from=app 으로 연 가이드. 앱의 AppBar 가 대신하므로 사이트 헤더·푸터와 스토어
   문구를 숨긴다. data-app 은 가이드 페이지의 인라인 스크립트가 단다. */
:root[data-app] .site-header,
:root[data-app] .site-footer,
:root[data-app] .cta { display: none; }

:root[data-app] .page { padding: 20px 0 32px; }

/* h1 아래 한 줄 요약. */
.page .lead {
  margin: -8px 0 24px;
  color: var(--muted);
}

/* 장 위의 목차 링크. */
.page .guide-crumb {
  margin: 0 0 4px;
  font-size: 0.875rem;
}

.page .guide-crumb a {
  color: var(--muted);
  text-decoration: none;
}

.page .guide-crumb a::before { content: "‹ "; }

/* 목차의 장 목록. 번호는 순서대로 매긴다 — 장에 번호를 박지 않아 장을 끼워 넣어도
   고칠 것이 없다. */
.page .guide-toc {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: chapter;
}

.page .guide-toc li { counter-increment: chapter; }

.page .guide-toc a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  text-decoration: none;
}

.page .guide-toc a::before {
  content: counter(chapter);
  grid-row: span 2;
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--brand-ink);
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}

.page .guide-toc .name { font-weight: 700; }

.page .guide-toc .desc {
  font-size: 0.875rem;
  color: var(--muted);
}

/* 0장(들어가며)의 낱말 풀이. */
.page .terms {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0 0 16px;
}

.page .terms dt { font-weight: 700; }
.page .terms dd { margin: 0; color: var(--muted); }

/* 1장(시작하기)의 단계. 번호 원은 목차와 같은 모양이다. */
.page .steps {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.page .steps li {
  position: relative;
  padding-left: 44px;
  counter-increment: step;
}

.page .steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--brand-ink);
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.page .steps h2 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  line-height: 30px;
}

/* 장마다 한 장 두는 대표 캡처. 짚을 버튼은 캡처를 고치지 않고 .mark 테두리를 얹는다 —
   위치·크기는 캡처에 대한 % 로 style 의 --x·--y·--w·--h 에 적는다. 넓은 화면에서는
   오른쪽에 띄워 글과 나란히 둔다. */
.page .shot {
  width: min(260px, 100%);
  margin: 0 auto 24px;
}

@media (min-width: 640px) {
  .page .shot {
    float: right;
    margin: 0 0 24px 24px;
  }
}

.page .shot .frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.page .shot img { width: 100%; }

.page .shot .mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 3px solid var(--brand);
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.25);
}

.page .shot figcaption {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
}

/* 항목 목록. 항목이 한두 문장이라 줄 사이를 조금만 띄운다. */
.page .shot ~ ul li,
.page h2 + ul li { margin: 0 0 6px; }

/* 덧붙이는 한 줄. flow-root 라 넓은 화면에서 오른쪽에 띄운 캡처 밑으로 배경이 깔리지 않는다. */
.page .note {
  display: flow-root;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.9375rem;
}

/* 역할 표시. 정보용 라벨이라 앱의 라벨 칩처럼 브랜드 틴트·곡률 3 이다. */
.page .role {
  display: inline-block;
  margin-right: 4px;
  padding: 0 6px;
  border-radius: 3px;
  background: rgba(255, 140, 0, 0.16);
  color: var(--brand-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: 1px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page .role { color: var(--accent); }
}

:root[data-theme="dark"] .page .role { color: var(--accent); }

/* 역할별 권한 장의 표(#3987). 폰 폭에 다섯 열이 들어가도록 글자·여백을 줄인다. 줄 머리(th)는
   보통 글씨에 배경 없이 두고, 역할 칸은 가운데 맞춘다. */
.page .roles { font-size: 0.875rem; }

.page .roles th,
.page .roles td { padding: 6px; }

.page .roles tbody th {
  background: none;
  font-weight: 400;
}

.page .roles td,
.page .roles thead th:not(:first-child) { text-align: center; }

/* 각주 번호가 줄 높이를 늘리지 않게 한다. */
.page .roles sup { line-height: 0; }

/* 표 아래 각주. 번호가 표 칸의 위첨자와 같다. */
.page .table-notes {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* 장 아래의 이전·목차·다음. 캡처의 float 를 여기서 끊는다. */
.page .guide-nav {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 48px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}

.page .guide-nav a { text-decoration: none; }

.page .guide-nav .label {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
}

.page .guide-nav .next { text-align: right; }

.page .guide-nav .contents {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
}

/* ---- 404 --------------------------------------------------------------- */

.notfound {
  text-align: center;
  padding: 96px var(--gutter);
}

.notfound h1 {
  margin: 0 0 12px;
  font-size: 1.5rem;
}

.notfound p {
  margin: 0 0 28px;
  color: var(--muted);
}