/* 운세 — 한지색 바탕, 오행 5색은 포인트로만 (DESIGN 7절). 모바일 1단이 기본이고 넓은 화면은 폭만 늘린다. */

:root {
  --bg: #f4ede0;      /* 한지 */
  --surf: #fbf7ef;
  --ink: #2b2520;
  --mut: #746a5f;
  --line: #e2d8c6;
  --wood: #3d7a4f;    /* 목 초록 */
  --fire: #c4492c;    /* 화 주홍 */
  --earth: #a97c34;   /* 토 황토 */
  --metal: #a9a49a;   /* 금 회백 */
  --water: #2d4674;   /* 수 남색 */
  --earth-ink: #8a652b;   /* 토 — 글자로 쓸 때만(배지·별점·소제목). --earth 는 대비 3.50 이라 글자로 못 쓴다 */
  --metal-line: #777166;  /* 금 — 막대·테두리 같은 그래픽용. --metal 은 2.32 로 3:1 도 미달 */
  --accent: #2d4674;      /* 링크·버튼 = 지금까지 --water 가 겸하던 역할 */
  --onfill: #fff;         /* 색 바탕 위에 얹는 글자 */
  --paper: #fff;          /* 입력창·결과 카드의 흰 면 */
  --r: 10px;
  --gutter: 16px;
  --pad: 18px;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리키므로 다크 블록이 기존 토큰을 바꾸면 같이 바뀐다(G:\workspace\DESIGN.md '토큰').
     실측(2026-10-16, WCAG): 라이트 --ink/--surf 14.16 · --mut/--surf 4.95 · --mut/--bg 4.54 · 흰 글자/--accent 9.38
                             다크   --ink/--surf 13.69 · --mut/--surf 4.71 · --mut/--bg 5.02 · --onfill/--accent 6.81 */
  --fb-bg: var(--bg);
  --fb-surface: var(--surf);
  --fb-ink: var(--ink);
  --fb-muted: var(--mut);
  --fb-line: var(--line);
  --fb-accent: var(--accent);
  --fb-on-accent: var(--onfill);
  --fb-display: "Noto Serif KR", serif;
  --fb-max: 960px;   /* 본문 .wrap 폭과 같게 — 760 이면 푸터 famousbros 목록이 한 줄로 길게 늘어졌다 */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
/* 키보드 포커스 — 링이 푸터 링크(.foot a)에만 있어서 나머지 화면에서는 지금 어디에 있는지
   알 수 없었다. --accent 는 바탕 8.04 · 카드 8.76, 다크 6.81 로 3:1 을 넉넉히 넘는다. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
p, ul, h1, h2 { margin: 0; }
img { max-width: 100%; height: auto; display: block; }  /* 2026-09-17 본문 이미지를 넣기 전까지 img 규칙이 아예 없었다 */
.wrap { max-width: 960px; margin: 0 auto; padding-inline: var(--gutter); }

/* 상단 — 틀은 fb.css 의 .fb-nav. 로고 글자만 사이트 것(푸터 .mark 도 같다) */
.mark, .fb-nav__logo { font: 900 23px/1 "Noto Serif KR", serif; letter-spacing: -.02em; color: var(--water); }
.mark { display: inline-flex; align-items: center; min-height: 44px; }
.wood { background: var(--wood); }
.fire { background: var(--fire); }
.earth { background: var(--earth); }
.metal { background: var(--metal); }
.water { background: var(--water); }

/* 카드 */
.page { padding-block: 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); display: flex; flex-direction: column; gap: 14px; }
.sec { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sec__t { font: 900 20px/1.35 "Noto Serif KR", serif; letter-spacing: -.02em; }
.sec__r { font-size: 12.5px; color: var(--mut); }

/* 본문 이미지 — 홈 히어로(.hero)와 띠 배너(.banner). 둘 다 장식이라 alt 는 비운다(옆 텍스트와 중복).
   한지색이 구워진 래스터라 다크 바탕에서는 밝은 판처럼 뜬다 → 테두리로 카드처럼 눌러 주고
   다크에서는 밝기·채도를 조금 낮춘다(아래 prefers-color-scheme 블록). */
.hero, .banner { width: 100%; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
.hero { aspect-ratio: 19 / 8; }
.banner { aspect-ratio: 1024 / 420; }

/* 소개·방침·약관 */
.prose { display: flex; flex-direction: column; gap: 12px; line-height: 1.8; font-size: 15px; }
.prose h2 { margin: 10px 0 0; font: 700 17px/1.4 "Noto Serif KR", serif; }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose a { color: var(--fire); text-decoration: underline; text-underline-offset: 3px; }

/* 공통 조각: 오행 배지·버튼·표 */
.hj { font-family: "Noto Serif KR", serif; color: var(--mut); margin-left: 2px; }
.el { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 20px; color: var(--onfill); white-space: nowrap; }
.el--wood { background: var(--wood); } .el--fire { background: var(--fire); } .el--earth { background: var(--earth-ink); }
.el--metal { background: var(--metal); color: var(--ink); } .el--water { background: var(--water); }
/* 기존 .btn 은 fb-btn 과 같은 알약 — 높이만 44px 로 맞춘다(템플릿의 class 는 그대로) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: var(--onfill); font-weight: 700; border: 1px solid var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.btn--line { background: transparent; color: var(--accent); }
.prose .btn { text-decoration: none; color: var(--onfill); } .prose .btn--line { color: var(--accent); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.lnk { color: var(--fire); text-decoration: underline; text-underline-offset: 3px; }
/* h2 에만 쓴다. 카드의 flex gap(14px)만 있으면 위아래 여백이 같아져 어느 덩어리의
   제목인지 읽히지 않는다 — 위를 12px 더 줘서 26px 대 14px 로 벌린다. */
.sub { font: 700 16px/1.4 "Noto Serif KR", serif; margin-top: 12px; }
.note { font-size: 12.5px; color: var(--mut); }
.alert { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--fire); color: var(--fire); font-size: 14px; }
.err { color: var(--fire); font-size: 13px; }
.crumb { font-size: 12.5px; color: var(--mut); }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 700; color: var(--mut); font-size: 13px; }
td a { color: var(--water); }
.cite { font-family: "Noto Serif KR", serif; font-size: 13px; margin-top: 4px; }
.cite a { color: var(--fire); text-decoration: underline; }

/* learn */
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* 명리 개념·60갑자 목록은 칩이 곧 줄 링크다 — 24+12+2=38px 이라 44 에 못 미쳤다. */
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); border-left-width: 4px; }
.chip--wood { border-left-color: var(--wood); } .chip--fire { border-left-color: var(--fire); } .chip--earth { border-left-color: var(--earth); }
.chip--metal { border-left-color: var(--metal-line); } .chip--water { border-left-color: var(--water); }
.facts { margin: 0; display: grid; gap: 8px; }
.facts div { display: flex; gap: 12px; }
.facts dt { min-width: 84px; color: var(--mut); font-size: 13px; }
.facts dd { margin: 0; }
/* 위와 같은 이유. 아래 2px 로 자기 본문에 붙이고 위는 gap 14px + 12px = 26px 로 띄운다. */
.interp h3 { margin: 12px 0 2px; font-size: 14px; color: var(--earth-ink); }

/* 사주 */
.pillars th, .pillars td { text-align: center; }
.gz { display: block; font-size: 18px; font-weight: 700; }
.gz .hj { display: block; font-size: 22px; color: var(--ink); margin: 0; }
.unk { color: var(--mut); }
.bars { width: 100%; max-width: 420px; height: auto; font-size: 13px; fill: var(--ink); }
.bar--wood { fill: var(--wood); } .bar--fire { fill: var(--fire); } .bar--earth { fill: var(--earth); }
.bar--metal { fill: var(--metal-line); } .bar--water { fill: var(--water); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form .row { display: flex; flex-direction: column; gap: 6px; }
.form .row > label { font-weight: 700; font-size: 14px; }
.form input[type=date], .form input[type=time], .form select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); max-width: 100%; }
.opts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.form .btn { align-self: flex-start; }

/* 운세 */
.stars { color: var(--earth-ink); letter-spacing: 1px; white-space: nowrap; }
.ttis { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tcard { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.tcard__n { font-weight: 700; }
.tcard__t { font-size: 13px; color: var(--mut); }
.ganjis { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
/* 칸을 꽉 채우고 가운데 정렬 — .chip 이 inline-flex 라 block 대신 flex 로 넓힌다. */
.ganjis .chip { display: flex; justify-content: center; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.tabs small { font-size: 11px; font-weight: 400; color: var(--mut); }
.tabs a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--onfill); }
.tabs a[aria-current] small { color: var(--onfill); opacity: .78; }
.fx { display: flex; flex-direction: column; gap: 10px; }
.fcard { padding: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: 6px; }
.fcard__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fcard h3 { margin: 0; font-size: 15px; }
.why summary, .period summary { cursor: pointer; }
.why summary { font-size: 13px; color: var(--water); }
.why ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.days, .lucky { font-size: 14px; }
.period { border-top: 1px solid var(--line); padding-top: 10px; }
.period summary { font-weight: 700; margin-bottom: 8px; }
.period small { font-weight: 400; color: var(--mut); margin-left: 4px; }

/* 푸터 — 틀은 fb.css 의 .fb-foot */
.fb-foot .mark { color: var(--water); }

@media (min-width: 768px) {
  :root { --gutter: 24px; --pad: 24px; }
  .page { padding-block: 24px 40px; gap: 20px; }
  .sec { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .sec__t { font-size: 22px; }
}

/* 다크(D1 먹지 중성). OS 설정만 따른다 — 수동 토글은 JS·쿠키가 필요해서 넣지 않았다.
   오행은 색상(H) 고정, 채도 -5~10%p, 명도 +7~8%p 로 옮겼다(수만 +25%p). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16141a; --surf: #1d1a23; --ink: #ece5d8; --mut: #8e8577; --line: #2d2935;
    --wood: #509064; --fire: #c96a4e; --earth: #be9245; --metal: #a9a49a; --water: #6584ba;
    --earth-ink: #be9245;   /* 먹지 위에서는 원색 그대로 6.03 이라 따로 어둡게 할 필요가 없다 */
    --metal-line: #a9a49a;  /* 위와 같은 이유로 --metal 과 동일값 (6.91) */
    --accent: #74a89c;      /* 옥색 */
    --onfill: #16141a;      /* 라이트와 정반대 — 밝아진 바탕 위에는 먹색 글자가 읽힌다 */
    --paper: #1d1a23;
  }
  /* 금 배지만 라이트와 글자색이 반대다: --ink 면 1.98, --onfill 이면 7.37. */
  .el--metal { color: var(--onfill); }
  /* 이미지는 한지색이 구워져 있어 먹지 위에서 그대로 두면 눈에 튄다. 반전(filter: invert)은
     담채의 색까지 뒤집어 못 쓰고, 밝기·채도만 살짝 내린다. */
  .hero, .banner { filter: brightness(.88) saturate(.92); }
}

/* 쿠팡 파트너스 칸(coupang.py) — 이 사이트 토큰만 쓴다. */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); }
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: var(--mut); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--line); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--accent); font-size: 14px; font-weight: 700; }
.cpn--top { margin: 12px 0 16px; padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }
.page > .cpn { margin-block: 0; }  /* .page 가 flex gap 으로 블록 사이를 띄운다 — 바깥 여백을 더하면 두 배가 된다 */