/* ═══════════════════════════════════════════════════════════════
   옥황상제 사주 — 공통 스타일

   1. 모바일 우선. 유입의 대부분이 유튜브 쇼츠에서 오는 세로 화면이다.
   2. 모든 글자 크기는 rem이다. 우측 하단 글씨 크기 버튼이 html의
      font-size를 바꾸면 본문 전체가 함께 커진다. 어르신 이용자가 많다.
   3. 폭이 320px(iPhone SE)인 화면에서도 잘리는 곳이 없어야 한다.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* 바탕 — 깊은 밤하늘 */
  --ink:        #0b0a12;
  --ink-2:      #14131f;
  --ink-3:      #1b1a29;
  --ink-4:      #100f19;
  --line:       #2b2940;
  --line-soft:  #221f33;

  /* 글자 */
  --text:       #f0edf8;
  --text-2:     #c8c3da;
  --text-dim:   #9c96b5;
  --text-faint: #6d6788;

  /* 옥(玉)과 금(金) */
  --gold:       #d4a955;
  --gold-lit:   #f2dda6;
  --gold-deep:  #8f6d29;
  --jade:       #6fc9b0;
  --jade-deep:  #2f7a68;
  --royal:      #8b6fd4;

  /* 오행 */
  --el-wood:  #7fd3a3;
  --el-fire:  #e88b8b;
  --el-earth: #e0b478;
  --el-metal: #d6d6e4;
  --el-water: #a893e6;

  --radius:    16px;
  --radius-sm: 11px;
  --maxw:      620px;

  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --serif: 'Nanum Myeongjo', 'Apple SD Gothic Neo', 'Batang', Georgia, serif;

  /* 가장자리 여백 — 노치 기기 대응 */
  --pad-x: 18px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html {
  font-size: 16px;               /* 글씨 크기 버튼이 이 값을 바꾼다 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 50% -12%, #2a2246 0%, transparent 62%),
    radial-gradient(700px 400px at 12% 22%, rgba(47, 122, 104, 0.10) 0%, transparent 58%),
    var(--ink);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.78;
  letter-spacing: -0.011em;
  word-break: keep-all;          /* 한국어는 어절 단위로 끊어야 읽기 좋다 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  /* 우측 하단 글씨 크기 버튼에 마지막 내용이 가리지 않도록 */
  padding-bottom: calc(96px + var(--safe-b) + var(--anchor-h, 0px));
}

a { color: var(--gold-lit); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left:  calc(var(--pad-x) + var(--safe-l));
  padding-right: calc(var(--pad-x) + var(--safe-r));
  padding-bottom: 40px;
}

/* ── 헤더 ─────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 10, 18, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding-top: var(--safe-t);
}
.site-header .inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 11px calc(var(--pad-x) + var(--safe-r)) 11px calc(var(--pad-x) + var(--safe-l));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* 헤더는 본문이 아니라 길잡이다. 글씨를 최대로 키워도 브랜드와 메뉴가
   서로 밀고 들어오지 않도록 clamp로 상한을 둔다. */
.brand {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-family: var(--serif); font-size: clamp(16px, 1.125rem, 22px); font-weight: 800;
  color: var(--gold-lit); text-decoration: none; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand:hover { text-decoration: none; }
.brand .sigil {
  flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(145deg, var(--gold-lit) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow: 0 0 0 1px rgba(242, 221, 166, 0.28), 0 3px 10px rgba(0, 0, 0, 0.5);
  display: grid; place-items: center;
  color: #1a1424; font-family: var(--serif); font-size: clamp(14px, 0.95rem, 18px); font-weight: 800;
}
.nav-link {
  flex: none;
  color: var(--text-dim); font-size: clamp(12px, 0.85rem, 15px); white-space: nowrap;
  padding: 6px 0;
}

/* ── 히어로 ───────────────────────────────────────────────── */
.hero { padding: 40px 0 4px; text-align: center; }
.hero .eyebrow {
  display: inline-block;
  font-family: var(--serif); font-size: 0.8rem; letter-spacing: 0.22em;
  color: var(--gold); margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7.6vw, 2.5rem);
  line-height: 1.34; margin: 0 0 16px; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
}
.hero h1 .em {
  background: linear-gradient(96deg, #fff3d4 0%, var(--gold-lit) 40%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--text-2); margin: 0 0 6px; font-size: 1rem; }
.hero .sub { color: var(--text-faint); font-size: 0.85rem; margin-top: 10px; }

/* 장식 구분선 */
.rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 22px 0 6px; color: var(--gold); font-size: 0.7rem;
}
.rule::before, .rule::after {
  content: ''; height: 1px; flex: 1; max-width: 96px;
  background: linear-gradient(90deg, transparent, rgba(212, 169, 85, 0.55), transparent);
}

.badge-row { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin: 18px 0 4px; }
.badge {
  font-size: 0.78rem; color: var(--gold-lit); line-height: 1.5;
  border: 1px solid rgba(212, 169, 85, 0.34);
  background: rgba(212, 169, 85, 0.08);
  padding: 5px 11px; border-radius: 999px;
}

/* ── 카드 ─────────────────────────────────────────────────── */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-4) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin: 18px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}
/* 카드 상단의 가는 금선 */
.card::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 169, 85, 0.5), transparent);
}
.card h2 {
  font-family: var(--serif); font-size: 1.25rem; margin: 0 0 15px;
  color: var(--gold-lit); font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.45;
  display: flex; align-items: baseline; gap: 9px;
}
.card h2::before {
  content: ''; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px rgba(212, 169, 85, 0.8);
  transform: translateY(-3px);
}
.card h3 {
  font-size: 1.02rem; margin: 22px 0 8px; color: #fff; font-weight: 700;
  line-height: 1.55;
}
.card p { margin: 0 0 13px; color: var(--text); font-size: 1rem; }
.card p:last-child { margin-bottom: 0; }
.lead {
  font-family: var(--serif); font-size: 1.06rem; color: var(--gold-lit);
  line-height: 1.72;
}
.muted { color: var(--text-2); font-size: 0.92rem; }
.faint { color: var(--text-faint); font-size: 0.85rem; line-height: 1.7; }

/* ── 입력 폼 ──────────────────────────────────────────────── */
.form-group { margin-bottom: 22px; }
.form-group > label {
  display: block; font-size: 0.92rem; color: var(--text-2);
  margin-bottom: 9px; font-weight: 600;
}
.field-row { display: flex; gap: 8px; }
.field-row > * { min-width: 0; }

input[type="number"], input[type="text"], select {
  width: 100%; padding: 14px 12px;
  background: #0c0b14; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1.05rem; line-height: 1.3;
  appearance: none; -webkit-appearance: none;
  min-height: 54px;
}
input::placeholder { color: #514c68; }
input:focus, select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 169, 85, 0.16);
}
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239c96b5' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px;
  padding-right: 36px;
  text-overflow: ellipsis;
}

/* 양력/음력, 남/여 선택 */
.seg { display: flex; gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  flex: 1; text-align: center; padding: 13px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #0c0b14; color: var(--text-dim);
  font-size: 1rem; cursor: pointer; user-select: none;
  min-height: 54px; display: flex; align-items: center; justify-content: center;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.seg input:checked + label {
  border-color: var(--gold); color: #1a1424; font-weight: 700;
  background: linear-gradient(145deg, var(--gold-lit), var(--gold));
}
.seg input:focus-visible + label { box-shadow: 0 0 0 3px rgba(212, 169, 85, 0.3); }
/* 그해에 없는 윤달처럼, 고를 수 없는 선택지 */
.seg input:disabled + label {
  opacity: 0.38; cursor: not-allowed;
  text-decoration: line-through; text-decoration-thickness: 1px;
}

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 58px;
  padding: 15px 16px; border: none; border-radius: 13px;
  background: linear-gradient(145deg, var(--gold-lit) 0%, var(--gold) 62%, #c1953f 100%);
  color: #1a1424; font-size: 1.08rem; font-weight: 800;
  cursor: pointer; letter-spacing: -0.015em; text-align: center;
  line-height: 1.4; text-decoration: none;
  box-shadow: 0 6px 18px rgba(212, 169, 85, 0.18);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  color: var(--text-2); font-weight: 600; font-size: 1rem; box-shadow: none;
}

.form-note { color: var(--text-faint); font-size: 0.8rem; margin-top: 12px; text-align: center; line-height: 1.65; }
.error-msg {
  color: #ffb3b3; font-size: 0.92rem; margin-top: 12px; display: none;
  background: rgba(217, 123, 123, 0.12); border: 1px solid rgba(217, 123, 123, 0.3);
  border-radius: 10px; padding: 11px 13px;
}

/* ── 사주 원국판 ──────────────────────────────────────────── */
.pillars {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px;
  margin: 4px 0;
}
.pillars.no-time { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar {
  text-align: center; padding: 12px 2px 11px; min-width: 0;
  background: linear-gradient(180deg, #16151f 0%, #100f18 100%);
  border: 1px solid var(--line); border-radius: 13px;
}
.pillar .cap {
  font-size: clamp(10px, 0.72rem, 14px); color: var(--text-faint); margin-bottom: 8px;
  letter-spacing: 0.03em; white-space: nowrap;
}
.pillar .hanja {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 7vw, 1.75rem); line-height: 1.14;
  color: var(--gold-lit); font-weight: 700;
}
.pillar .kor { font-size: clamp(11px, 0.8rem, 15px); color: var(--text-dim); margin-top: 6px; white-space: nowrap; }
.pillar .el {
  font-size: clamp(10px, 0.7rem, 13px); margin-top: 8px; padding: 2px 8px;
  border-radius: 999px; display: inline-block; line-height: 1.6;
}
.el-목 { background: rgba(127,211,163,.14); color: var(--el-wood); }
.el-화 { background: rgba(232,139,139,.14); color: var(--el-fire); }
.el-토 { background: rgba(224,180,120,.14); color: var(--el-earth); }
.el-금 { background: rgba(214,214,228,.12); color: var(--el-metal); }
.el-수 { background: rgba(168,147,230,.16); color: var(--el-water); }

/* ── 오행 막대 ────────────────────────────────────────────── */
.elem-bar { margin: 12px 0 4px; }
.elem-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.elem-row .name { width: 1.9em; font-size: 0.92rem; color: var(--text-2); flex: none; }
.elem-row .track { flex: 1; min-width: 0; height: 10px; background: #100f18; border-radius: 999px; overflow: hidden; }
.elem-row .fill { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.7,.3,1); }
.elem-row .val { width: 3.4em; text-align: right; font-size: 0.8rem; color: var(--text-faint); flex: none; }
.fill-목 { background: linear-gradient(90deg,#3f8b60,var(--el-wood)); }
.fill-화 { background: linear-gradient(90deg,#a85454,var(--el-fire)); }
.fill-토 { background: linear-gradient(90deg,#a8783a,var(--el-earth)); }
.fill-금 { background: linear-gradient(90deg,#83839a,var(--el-metal)); }
.fill-수 { background: linear-gradient(90deg,#5f47a0,var(--el-water)); }

/* ── 점수 ─────────────────────────────────────────────────── */
.score-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 11px;
}
.score-head .lbl { color: var(--text-2); font-size: 0.92rem; }
.score-head .num {
  font-family: var(--serif); font-size: 2.2rem; color: var(--gold-lit);
  font-weight: 800; line-height: 1; white-space: nowrap;
}
.score-head .num small { font-size: 0.9rem; color: var(--text-faint); font-weight: 400; margin-left: 2px; }
.gauge {
  height: 11px; background: #100f18; border-radius: 999px;
  overflow: hidden; margin-bottom: 16px;
}
.gauge > div {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--royal), var(--gold));
  transition: width .8s cubic-bezier(.2,.7,.3,1);
}

/* 2열 정보 그리드 — 좁으면 자동으로 1열이 된다 */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px; margin-top: 4px;
}
.stat {
  background: #100f18; border: 1px solid var(--line);
  border-radius: 13px; padding: 13px 14px; min-width: 0;
}
.stat .k { font-size: 0.82rem; color: var(--text-faint); margin-bottom: 5px; }
.stat .v {
  font-family: var(--serif); font-size: 1.28rem; color: var(--gold-lit);
  font-weight: 700; line-height: 1.4;
}
.stat .v.sm { font-size: 1rem; font-family: var(--sans); font-weight: 600; }

/* ── 행운 정보 ────────────────────────────────────────────── */
.lucky-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 9px;
}
.lucky {
  background: #100f18; border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 13px; min-width: 0;
}
.lucky .k { font-size: 0.78rem; color: var(--text-faint); margin-bottom: 4px; }
.lucky .v { font-size: 1rem; color: var(--gold-lit); font-weight: 600; line-height: 1.5; }

/* ── 진행 표시 ────────────────────────────────────────────── */
.steps { display: flex; gap: 5px; margin: 20px 0 0; }
.steps .s { flex: 1; height: 4px; border-radius: 999px; background: var(--line); }
.steps .s.on { background: linear-gradient(90deg, var(--royal), var(--gold)); }
.step-label {
  font-size: clamp(11px, 0.8rem, 15px); color: var(--text-faint); text-align: center;
  margin-top: 9px; letter-spacing: 0.01em;
}

/* ── 다음 단계 ────────────────────────────────────────────── */
.next-block { margin: 30px 0 8px; }
.next-block .btn { margin-bottom: 10px; }
.next-block .btn:last-child { margin-bottom: 0; }

/* ── 광고 ─────────────────────────────────────────────────── */
/* 광고는 콘텐츠와 명확히 분리한다. 실수 클릭을 유도하는 배치는
   애드센스 무효 트래픽으로 잡혀 계정이 정지된다. 버튼과 광고 사이에는
   항상 충분한 여백을 둔다. */
.ad-slot {
  margin: 36px 0;
  padding-top: 9px;
  border-top: 1px dashed rgba(109, 103, 136, 0.3);
}
.ad-slot .ad-label {
  font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.1em; margin-bottom: 9px; text-align: center;
}
.ad-slot + .next-block { margin-top: 36px; }

/* 광고가 채워지지 않으면 슬롯을 통째로 접는다. 빈 광고 자리가 남아
   페이지에 커다란 공백이 생기는 것을 막는다. */
.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-slot.is-empty { display: none; }

/* ── 표 ───────────────────────────────────────────────────── */
.tbl-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 13px 0; border-radius: 10px;
}
/* 표가 화면보다 넓을 때만 붙는다. 오른쪽 끝을 흐리게 해서 더 있다는 것을 알린다. */
.tbl-scroll.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}
.tbl-hint {
  font-size: 12px; color: var(--gold); text-align: right;
  margin: -6px 0 14px; letter-spacing: -0.01em;
}
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { border-bottom: 1px solid var(--line); padding: 11px 9px; text-align: left; vertical-align: top; }
th { color: var(--gold-lit); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
/* 좁은 화면에서 표가 가로 스크롤 없이 줄바꿈되도록 한다. keep-all이 걸려 있어
   띄어쓰기에서 먼저 끊고, 도저히 안 될 때만 어절 안에서 끊는다. */
td { color: var(--text); overflow-wrap: anywhere; }
tr:last-child th, tr:last-child td { border-bottom: none; }

/* ── 아티클 (가이드 글) ───────────────────────────────────── */
.article h1 {
  font-family: var(--serif); font-size: clamp(1.5rem, 6.2vw, 1.85rem);
  line-height: 1.42; margin: 30px 0 10px; color: #fff; font-weight: 800;
  letter-spacing: -0.02em;
}
.article .meta { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 26px; }
.article h2 {
  font-family: var(--serif); font-size: 1.28rem; margin: 36px 0 13px;
  color: var(--gold-lit); padding-bottom: 9px; border-bottom: 1px solid var(--line);
  font-weight: 800; line-height: 1.5;
}
.article h3 { font-size: 1.06rem; margin: 26px 0 9px; color: #fff; font-weight: 700; line-height: 1.55; }
.article p { margin: 0 0 17px; font-size: 1rem; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 17px; }
.article li { margin-bottom: 9px; font-size: 1rem; }
.article li > ul, .article li > ol { margin-top: 9px; }
.article blockquote {
  margin: 20px 0; padding: 14px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(212, 169, 85, 0.07); border-radius: 0 10px 10px 0;
  color: var(--text-2); font-size: 0.95rem;
}
.article strong { color: #fff; font-weight: 700; }

/* ── 목록 카드 ────────────────────────────────────────────── */
.list-item {
  display: block; padding: 15px 0; border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { text-decoration: none; }
.list-item .t { color: #fff; font-size: 1.02rem; font-weight: 700; margin-bottom: 5px; line-height: 1.5; }
.list-item .d { color: var(--text-2); font-size: 0.88rem; line-height: 1.65; }

/* ── 푸터 ─────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line-soft); margin-top: 48px;
  padding: 28px calc(var(--pad-x) + var(--safe-r)) 32px calc(var(--pad-x) + var(--safe-l));
  text-align: center;
}
.site-footer .links {
  display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px;
}
.site-footer a { color: var(--text-dim); font-size: 0.85rem; padding: 4px 0; }
.site-footer .copy { color: var(--text-faint); font-size: 0.78rem; line-height: 1.9; }

/* ── 면책 ─────────────────────────────────────────────────── */
.disclaimer {
  margin-top: 26px; padding: 15px 16px;
  background: rgba(109, 103, 136, 0.08); border: 1px solid var(--line-soft);
  border-radius: 13px; color: var(--text-faint); font-size: 0.82rem; line-height: 1.78;
}

/* ═══════════════════════════════════════════════════════════
   글씨 크기 조절 — 우측 하단 고정

   어르신 이용자가 많아 항상 보이는 자리에 둔다. 이 위젯 자체는
   rem을 쓰지 않는다. 본문이 커져도 버튼 크기는 그대로여야 한다.
   ═══════════════════════════════════════════════════════════ */
.fontctl {
  position: fixed;
  right: calc(10px + var(--safe-r));
  /* --anchor-h 는 하단 앵커 광고의 높이다. 광고가 뜨면 그만큼 위로 올라간다. */
  bottom: calc(12px + var(--safe-b) + var(--anchor-h, 0px));
  z-index: 60;
  transition: bottom .25s ease, opacity .2s ease, transform .2s ease;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: 66px;
  padding: 6px 6px 5px;
  background: rgba(20, 18, 30, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--gold);
  border-radius: 17px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(212, 169, 85, 0.12);
  user-select: none;
}
/* 처음 몇 초 동안 금빛 파장을 내보내 눈에 띄게 한다.
   어르신 이용자가 이 버튼을 놓치면 사이트를 못 읽고 그냥 나간다. */
.fontctl.is-calling { animation: fontctl-ring 1.6s ease-out 3; }
@keyframes fontctl-ring {
  0%   { box-shadow: 0 8px 28px rgba(0,0,0,.65), 0 0 0 0 rgba(212,169,85,.55); }
  70%  { box-shadow: 0 8px 28px rgba(0,0,0,.65), 0 0 0 16px rgba(212,169,85,0); }
  100% { box-shadow: 0 8px 28px rgba(0,0,0,.65), 0 0 0 0 rgba(212,169,85,0); }
}
/* 광고 위를 지나갈 때는 비켜준다. 애드센스는 광고를 가리는 고정 요소를
   허용하지 않는다. 광고가 지나가면 다시 나타난다. */
.fontctl.is-away {
  opacity: 0; pointer-events: none; transform: scale(0.86);
}
.fontctl-title {
  font-size: 11px; line-height: 1.15; text-align: center;
  color: var(--gold-lit); letter-spacing: 0;
  margin: 2px 0 6px; font-weight: 800;
}
.fontctl-btn {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  width: 100%; height: 50px; padding: 0;
  background: linear-gradient(160deg, #262238, #1b1a28);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--gold-lit);
  cursor: pointer;
}
/* '크게'가 주된 동작이다. 금색으로 채워 먼저 눈에 들어오게 한다. */
.fontctl-btn[data-font="up"] {
  background: linear-gradient(150deg, var(--gold-lit), var(--gold));
  border-color: var(--gold-lit);
  color: #1a1424;
}
.fontctl-btn:active { transform: scale(0.95); }
.fontctl-btn:disabled { opacity: 0.3; cursor: default; }
.fontctl-btn:focus-visible { outline: 3px solid var(--gold-lit); outline-offset: 2px; }
/* '가' 글자 — 크게/작게를 글자 크기 차이로 한눈에 보여준다 */
.fontctl-glyph { font-family: var(--serif); font-size: 23px; line-height: 1; font-weight: 800; }
.fontctl-glyph.sm { font-size: 13px; }
.fontctl-sign { font-size: 16px; line-height: 1; font-weight: 800; }

/* ── 첫 방문 안내 말풍선 ──────────────────────────────────────── */
.fontctl-coach {
  position: fixed;
  right: calc(84px + var(--safe-r));
  bottom: calc(34px + var(--safe-b) + var(--anchor-h, 0px));
  z-index: 62;
  max-width: min(230px, calc(100vw - 108px));
  padding: 13px 15px;
  background: linear-gradient(150deg, var(--gold-lit), var(--gold));
  color: #1a1424;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  font-size: 14px; line-height: 1.5; font-weight: 600;
  animation: coach-in .35s ease-out both;
}
.fontctl-coach b { font-weight: 800; }
/* 위젯을 가리키는 꼬리 */
.fontctl-coach::after {
  content: ''; position: absolute; right: -9px; bottom: 22px;
  border: 9px solid transparent; border-left-color: var(--gold);
  border-right-width: 0;
}
.fontctl-coach-close {
  display: block; width: 100%; margin-top: 9px; padding: 7px;
  background: rgba(26, 20, 36, 0.14); border: 1px solid rgba(26, 20, 36, 0.28);
  border-radius: 9px; color: #1a1424; font-size: 13px; font-weight: 700; cursor: pointer;
}
@keyframes coach-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}
.fontctl-coach.is-gone { display: none; }

/* 현재 단계 표시 */
.fontctl-meter { display: flex; gap: 3px; justify-content: center; padding: 6px 0; }
.fontctl-meter i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--line); transition: background .15s ease;
}
.fontctl-meter i.on { background: var(--gold); }

/* 크기를 바꿀 때 잠깐 뜨는 안내 */
.fontctl-toast {
  position: fixed; left: 50%; bottom: calc(28px + var(--safe-b) + var(--anchor-h, 0px));
  transform: translateX(-50%);
  z-index: 61;
  background: rgba(20, 19, 31, 0.96);
  border: 1px solid rgba(212, 169, 85, 0.42);
  color: var(--gold-lit);
  padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.fontctl-toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 아주 좁은 화면 (iPhone SE 320px 등) ──────────────────── */
@media (max-width: 359px) {
  :root { --pad-x: 13px; }
  .fontctl { width: 60px; right: calc(7px + var(--safe-r)); }
  .fontctl-btn { height: 46px; }
  .fontctl-coach { right: calc(74px + var(--safe-r)); max-width: calc(100vw - 92px); font-size: 13px; }
  .pillars { gap: 5px; }
  .pillar { padding: 10px 1px 9px; }
  .pillar .cap { font-size: 0.68rem; }
  .pillar .kor { font-size: 0.74rem; }
  .card { padding: 18px 14px; }
  .card::before { left: 14px; right: 14px; }
  .badge { font-size: 0.74rem; padding: 4px 9px; }
  .score-head .num { font-size: 1.9rem; }
}

/* ── 태블릿 이상 ──────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --pad-x: 24px; }
  .hero { padding: 60px 0 10px; }
  .card { padding: 26px 24px; }
  .card::before { left: 24px; right: 24px; }
  .fontctl { right: calc(20px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); }
}

/* 가로 모드 낮은 화면에서 헤더가 자리를 너무 먹지 않게 */
@media (max-height: 460px) and (orientation: landscape) {
  .site-header { position: static; }
  .hero { padding: 24px 0 4px; }
}