/* Hifun Studio 홈페이지 (68차)
 *
 * ── 왜 이 모습인가 ────────────────────────────────────────────────
 * 예전 사이트는 남색·보라의 "테크 스타트업" 톤이었다. 그런데 파는 물건은
 * 아이가 쓰는 따뜻한 크림빛 학습 앱이고, 보러 오는 사람은 부모다.
 * 사이트와 제품이 서로 다른 말을 하고 있었다.
 *
 * 그래서 제품의 색(주황·금빛·크림)을 그대로 가져오되, 전부 따뜻한 색만 쓰면
 * 물러 보이므로 차분한 청록을 하나 섞어 균형을 잡았다.
 * 글꼴은 흔한 본고딕 대신 고운바탕(제목)·고운돋움(본문)을 짝지었다 —
 * 한국어로 지은 글꼴이라 자간이 편하고, 흔한 기본값처럼 보이지 않는다.
 *
 * 구조는 앱의 뼈대를 그대로 쓴다: **한 칸씩 밟고 올라간다**.
 * 화면 왼쪽에 계단 모양 축을 두고 구획이 그 위에 하나씩 놓인다.
 */

:root {
  --ground: #fffbf2;
  --ground-2: #fff6e6;
  --card: #ffffff;
  --ink: #33291f;
  --ink-2: #5b4c3c;
  --muted: #816f5b;      /* 4.65:1 — 눈대중이 아니라 대비를 계산해 뽑은 값 */
  --line: rgba(120, 95, 62, .16);
  --primary: #e8622f;
  /* 작은 글자에 쓰는 주황. --primary 는 큰 글자·단추 배경에서만 대비가 나온다.
     13px 딱지에 그대로 쓰면 2.98:1 로 못 읽는다. */
  --primary-ink: #c04415;
  --primary-soft: #fdeee6;
  --gold: #f0b03c;
  --calm: #2d7968;      /* 4.51:1 on --calm-soft */
  --calm-soft: #e6f2ef;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(86, 62, 34, .09);
  --wrap: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: var(--ground);
  color: var(--ink);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  word-break: keep-all;   /* 한국어는 어절 단위로 줄이 바뀌어야 한다 — '밟 / 고' 로 갈리면 못 읽는다 */
  font-family: 'Gowun Batang', 'Apple SD Gothic Neo', serif;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }

/* ── 머리 ──────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 251, 242, .88);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 66px; padding-block: .5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Gowun Batang', serif; font-size: 1.22rem; font-weight: 700;
  text-decoration: none; letter-spacing: -0.02em;
}
.brand-logo { display: block; width: 150px; height: auto; object-fit: contain; object-position: center; }
.brand .brand em { font-style: normal; color: var(--primary); }
.site-nav { margin-left: auto; display: flex; gap: 1.35rem; flex-wrap: wrap; }
.site-nav a {
  text-decoration: none; color: var(--ink-2); font-size: .95rem;
  padding-block: .2rem; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }

/* ── 계단 축 ───────────────────────────────────────────────────────
   앱의 뼈대(한 칸씩 밟고 올라간다)를 사이트 구조로 옮긴 것. 장식이 아니라
   "이 회사가 만드는 것이 무엇인가"를 말하는 장치라 크게 쓰지 않는다. */
.step-rail { position: relative; }
@media (min-width: 980px) {
  .step-rail::before {
    content: ''; position: absolute; left: -34px; top: 12px; bottom: 12px; width: 2px;
    background: repeating-linear-gradient(
      to bottom, var(--line) 0 10px, transparent 10px 22px);
  }
  .step-rail::after {
    content: ''; position: absolute; left: -40px; top: 14px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 5px var(--ground);
  }
}

section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.eyebrow {
  display: inline-block; margin-bottom: .5rem;
  font-size: .84rem; font-weight: 700; letter-spacing: .08em;
  color: var(--calm);
}
.section-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .7rem; }
.section-lead { color: var(--ink-2); max-width: 60ch; }

/* ── 히어로 ──────────────────────────────────────────────────────
   앱을 켜면 실제로 보이는 시작 화면(제목 + 친구 아홉)을 그대로 앞세운다.
   홍보용으로 따로 그린 그림이 아니라 제품이라, 앱을 받은 부모가
   "홈페이지에서 본 그 화면"을 그대로 만난다.

   여기는 한 번 통째로 정리한 곳이다 (68차). 예전에는 히어로 규칙이 세 세대
   겹쳐 있었다 — 일러스트가 화면을 덮던 판, 2단 그리드에 폰 목업을 놓던 판,
   지금 판. `.hero` 가 두 번 선언돼 뒤엣것이 앞엣것을 덮고, 남아 있던
   `.hero .wrap` 2단 그리드가 새로 쓴 가운데 정렬을 이겨서 화면이 어긋났다.
   고칠 때는 이 블록 안에서만 고치고, 아래에 새 `.hero` 규칙을 덧붙이지 말 것. */
.hero {
  background:
    radial-gradient(900px 420px at 82% -12%, var(--ground-2) 0%, transparent 62%),
    var(--ground);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.6rem, 4vw, 3rem) clamp(2rem, 5vw, 3.4rem);
}
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.2rem); margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero-lead { font-size: clamp(1rem, 1.7vw, 1.12rem); color: var(--ink-2); max-width: 52ch; }
.hero-note { margin-top: .9rem; font-size: .86rem; color: var(--ink-2); }
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* 시작 화면 액자. 넓은 화면에서는 글 왼쪽 · 그림 오른쪽 2단 —
   그림을 860px 로 키워 가운데 두면 제목이 첫 화면 아래로 밀려, 스크롤 전엔
   이 회사가 뭘 파는지 안 보였다. 좁은 화면에서는 그림이 먼저, 글이 아래. */
.hero-grid { display: grid; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.hero-frame {
  margin: 0; width: 100%;
  border-radius: 24px; overflow: hidden;
  border: 6px solid #fff; box-shadow: var(--shadow), 0 3px 0 rgba(120, 95, 62, .1);
}
.hero-frame img { display: block; width: 100%; height: auto; }
@media (min-width: 980px) {
  .hero { padding-block: clamp(2.4rem, 5vw, 4rem); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(400px, 520px); }
}
@media (max-width: 979px) {
  .hero-frame { order: -1; max-width: 640px; margin-inline: auto; }
}

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .78rem 1.4rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; font-size: 1rem;
  border: 2px solid transparent; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
/* 흰 글자는 --primary(#e8622f) 위에서 3.38:1 — 단추라도 16px 글자는 4.5 가 필요하다. 한 단계 짙은 주황. */
.btn-primary { background: var(--primary-ink); color: #fff; box-shadow: 0 6px 18px rgba(192, 68, 21, .28); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
/* 출시 상태는 단추 흉내를 내지 않는다 — 못 누르는 단추는 눌러 보고 실망하게 만든다 */
.cta-soon {
  display: inline-flex; align-items: center; gap: .35rem; flex-basis: 100%; order: 9;
  font-size: .84rem; font-weight: 700; color: var(--calm);
}
.cta-soon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* ── 앱 카드 ───────────────────────────────────────────────────── */
.app-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.8rem; }
.app-card {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem; text-decoration: none; box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease;
}
.app-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.app-card-top { display: flex; align-items: center; gap: .75rem; }
.app-icon {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--ground-2); border: 1px solid var(--line); overflow: hidden;
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-card h3 { font-size: 1.16rem; }
.app-age { font-size: .82rem; color: var(--muted); }
.app-card p { color: var(--ink-2); font-size: .95rem; }
.tag {
  align-self: flex-start; margin-top: auto;
  font-size: .78rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px;
}
.tag-beta { background: var(--primary-soft); color: var(--primary); }

/* ── 약속 3가지 ────────────────────────────────────────────────── */
.promises { background: var(--ground-2); border-block: 1px solid var(--line); }
.promise-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1.6rem; }
.promise { background: var(--card); border-radius: var(--radius); padding: 1.3rem; border: 1px solid var(--line); }
.promise .ic { font-size: 1.7rem; }
.promise h3 { font-size: 1.08rem; margin: .5rem 0 .35rem; }
.promise p { color: var(--ink-2); font-size: .94rem; }

/* ── 스튜디오 이야기 ───────────────────────────────────────────── */

/* ── 앱 상세 ───────────────────────────────────────────────────── */
.detail-head { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.detail-head .app-icon { width: 74px; height: 74px; border-radius: 20px; font-size: 2.2rem; }
.detail-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.point-list { list-style: none; display: grid; gap: .9rem; margin-top: 1.6rem; }
.point-list li {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.15rem;
}
.point-list .n {
  /* 금빛(--gold)에 흰 글자를 얹으면 1.91:1 로 사실상 안 보인다.
     번호는 읽으라고 있는 것이므로 짙은 색으로 둔다. */
  width: 26px; height: 26px; border-radius: 50%; background: #8a5a12; color: #fff;
  display: grid; place-items: center; font-size: .82rem; font-weight: 800;
}
.point-list b { display: block; margin-bottom: .15rem; }
.point-list span { color: var(--ink-2); font-size: .95rem; }
.shots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 1.8rem; }
.shots figure { margin: 0; }
.shots img { border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.shots figcaption { margin-top: .5rem; font-size: .86rem; color: var(--muted); text-align: center; }

/* ── 가격 (전자상거래법상 상품 표시) ───────────────────────────── */
.plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1.6rem; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.plan.best { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.plan h3 { font-size: 1.05rem; color: var(--muted); font-family: inherit; font-weight: 700; }
.plan .price { font-family: 'Gowun Batang', serif; font-size: 1.9rem; margin: .3rem 0 .1rem; }
.plan .per { font-size: .86rem; color: var(--muted); }
.plan p { margin-top: .6rem; font-size: .93rem; color: var(--ink-2); }
.plan-note { margin-top: 1rem; font-size: .9rem; color: var(--muted); }

/* ── 글 페이지 (약관·방침·환불) ────────────────────────────────── */
.doc { max-width: 74ch; }
.doc h1 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); margin-bottom: .3rem; }
.doc .meta { color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
.doc h2 { font-size: 1.14rem; margin: 2rem 0 .5rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul, .doc ol { margin: .5rem 0 .5rem 1.2rem; }
.doc li { margin: .3rem 0; }
.doc table { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .93rem; }
.doc th, .doc td { border: 1px solid var(--line); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.doc th { background: var(--ground-2); font-weight: 700; color: var(--ink); }
.callout {
  background: var(--calm-soft); border: 1px solid rgba(46, 125, 107, .25);
  border-radius: 14px; padding: 1rem 1.15rem; margin: 1.2rem 0;
}
.callout b { color: var(--calm); }
/* 청록 배경(--calm-soft) 위에서는 기본 링크색이 4.49:1 로 0.01 모자란다.
   반올림해서 통과시키지 않는다 — 기준은 넘거나 못 넘거나다. */
.callout a { color: #b94214; }

/* ── 꼬리말: 사업자 정보 (전자상거래법 제10조) ─────────────────
   법이 두라고 해서 두는 글이다. 읽으라고 외치는 글이 아니라 찾으면 있는 글이라,
   작고 연하게(그래도 3:1 은 넘게) 한 덩어리로 흘려 둔다. */
.site-foot {
  background: #2b241c; color: #ded3c4; margin-top: 3rem;
  padding-block: 2.2rem 1.6rem; font-size: .88rem; line-height: 1.8;
}
.site-foot a { color: #e9d7b5; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-top { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; align-items: center; }
/* 로고 밑의 'STUDIO' 글자가 남색이라 갈색 위에서는 안 보였다 — 밝은 판 위에 올린다 */
.site-foot .brand { display: inline-block; padding: .4rem .8rem; border-radius: 14px; background: #fdf7ec; }
.site-foot .brand-logo { width: 120px; }
.foot-links { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .86rem; }
.biz {
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; column-gap: 1.1rem; row-gap: .1rem;
  color: #9a8e7e; font-size: .76rem; line-height: 1.8;   /* 4.77:1 */
}
.biz a { color: inherit; }
.copyright { margin-top: .6rem; color: #9a8e7e; font-size: .74rem; }

@media (max-width: 860px) {
  .site-nav { gap: .9rem; font-size: .9rem; }
  .brand-logo { width: 124px; }
}
@media (max-width: 520px) {
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .app-card:hover { transform: none; }
}

/* 출시 특가 표시 (68차) — '할인 종료 후'는 앞으로의 값이라 취소선을 긋지 않는다.
   그은 가격은 '지나간 정가'라는 뜻이 되어, 판 적 없는 값에 쓰면 이중가격 표시가 된다. */
.plan-sale {
  display: inline-block; margin-bottom: .4rem; padding: .18rem .6rem; border-radius: 999px;
  background: #ffe6d8; color: #b03f18; font-size: .78rem; font-weight: 700;
}
.plan-was { color: var(--ink-2); font-size: .84rem; margin: -.2rem 0 .5rem; }

/* 출시 상태 딱지 (68차) — 베타는 '받을 수 있다', 준비 중은 '아직 아니다'.
   색으로 구분해서, 부모가 목록을 훑을 때 한눈에 갈라 보이게 한다. */
.tag-beta { background: #e2f4ec; color: #1f6b52; }
.tag-soon { background: #f0ece4; color: #726758; }
.site-nav a[aria-current="page"] { color: var(--primary-ink); font-weight: 700; }
.hero-lead { font-size: clamp(1rem, 1.6vw, 1.1rem); color: var(--ink-2); max-width: 46ch; }
.hero-note { margin-top: .9rem; font-size: .86rem; color: var(--ink-2); }

/* 대표 앱은 카드 하나로 크게 — 나머지는 목록으로 */
.feature-app {
  margin: 1.8rem 0 2.2rem; padding: clamp(1.2rem, 3vw, 2rem);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.feature-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.feature-head h2 { font-size: 1.4rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.feature-points { list-style: none; display: grid; gap: .7rem; margin: 0 0 1.4rem; }
.feature-points li { display: grid; gap: .1rem; }
.feature-points b { color: var(--ink); }
.feature-points span { color: var(--ink-2); font-size: .93rem; }
.feature-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.feature-shots figure { margin: 0; }
.feature-shots img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ground-2);
}
.feature-shots figcaption { margin-top: .45rem; font-size: .82rem; color: var(--ink-2); text-align: center; }
.feature-cta { display: flex; gap: .7rem; flex-wrap: wrap; }

@media (max-width: 860px) {
  .feature-shots { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
}

/* ── 지표 한 줄 (68차) ───────────────────────────────────────────
   '78개 단원'처럼 셀 수 있는 것을 첫 화면에 둔다. 형용사보다 숫자가 빨리 읽힌다. */
.stat-row { display: flex; gap: clamp(1.2rem, 3vw, 2.4rem); margin: 1.5rem 0; flex-wrap: wrap; }
.stat-row > div { display: grid; }
.stat-row dt { order: 2; font-size: .8rem; color: var(--muted); letter-spacing: .04em; }
.stat-row dd {
  order: 1; font-family: 'Gowun Batang', serif; font-size: 2rem; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-row dd .stat-unit { font-size: .95rem; color: var(--ink-2); margin-left: 2px; }
/* ── 세 걸음 ─────────────────────────────────────────────────────
   번호를 붙인 건 실제로 순서가 있기 때문이다 — 쓰고, 막히면 짚고, 보호자가 받는다. */
.flow { background: var(--ground-2); border-block: 1px solid var(--line); }
.flow-steps { list-style: none; display: grid; gap: clamp(1.6rem, 4vw, 3rem); margin-top: 2rem; }
.flow-steps li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 420px;
  gap: clamp(1rem, 3vw, 2rem); align-items: center;
}
.flow-no {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-ink); color: #fff; font-family: 'Gowun Batang', serif; font-size: 1.2rem;
}
.flow-text h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.flow-text p { color: var(--ink-2); max-width: 52ch; }
.flow-steps img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card);
}
.soon-card {
  padding: clamp(1.4rem, 4vw, 2.4rem); background: var(--card);
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.soon-card h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.soon-card p { color: var(--ink-2); max-width: 60ch; }
.soon-note { margin-top: .8rem; color: var(--muted); font-size: .9rem; }

@media (max-width: 860px) {
  .flow-steps li { grid-template-columns: auto minmax(0, 1fr); }
  .flow-steps img { grid-column: 1 / -1; max-width: 420px; justify-self: center; }
}

/* ── 페이지 머리 (교육·게임·소개) ─────────────────────────────── */
.page-head { padding-block: clamp(2.2rem, 6vw, 3.6rem) clamp(1rem, 3vw, 1.6rem); background: var(--ground-2); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin-bottom: .6rem; }
.stack-top { margin-top: 2.4rem; }

/* ── 소식 ────────────────────────────────────────────────────────
   '지금 무엇을 하고 있나'. 소식이 오래 안 바뀌면 버려진 사이트로 보이므로,
   올릴 게 없으면 content.mjs 의 NEWS 를 비운다 — 그러면 이 구역이 통째로 사라진다. */
.news-list { list-style: none; display: grid; gap: 0; margin-top: 1.6rem; border-top: 1px solid var(--line); }
.news-item {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(.8rem, 3vw, 2rem); padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.news-meta { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.news-meta time { color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
.news-tag {
  padding: .12rem .6rem; border-radius: 999px;
  background: var(--calm-soft); color: var(--calm); font-size: .76rem; font-weight: 700;
}
.news-body h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.news-body h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.news-body h3 a:hover { color: var(--primary); border-color: currentColor; }
.news-body p { color: var(--ink-2); max-width: 62ch; }

/* 메뉴를 탭처럼 — 지금 보고 있는 곳에 밑줄이 붙는다 */
.site-nav { gap: 1.4rem; }
.site-nav a {
  position: relative;
  /* 누를 자리는 44px 이상. '홈'처럼 글자가 짧으면 폭이 15px 까지 줄어서
     손가락으로 정확히 누르기 어렵다 (WCAG 2.5.5). 글자 크기는 그대로 두고 자리만 넓힌다. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: .35rem;
}
.site-nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: .35rem; right: .35rem; bottom: 6px; height: 2px;
  background: var(--primary); border-radius: 2px;
}

@media (max-width: 700px) {
  /* 메뉴 다섯이 두 줄로 접히면 고정 머리가 130px — 폰 화면 1/3 을 스크롤 내내 가린다.
     로고가 곧 '홈'이니 글자 메뉴는 빼고, 남은 넷을 한 줄에 둔다. */
  .site-nav { gap: .15rem; flex-wrap: nowrap; }
  .site-nav a { padding-inline: .3rem; font-size: .88rem; min-width: 40px; }
  .site-nav a[href="/"] { display: none; }
  .brand-logo { width: 96px; }
  .site-head .wrap { gap: .6rem; }
  .news-item { grid-template-columns: 1fr; }
  .news-meta { flex-direction: row; align-items: center; gap: .6rem; }
}


/* ── 무엇을 담고 있나 ─────────────────────────────────────────────
   부모가 제일 먼저 묻는 것은 "우리 애 학년이 있나"다. 형용사 대신 표로 답한다.
   숫자는 전부 앱 소스에서 센 값이라, 바꿀 때는 다시 세야 한다. */
.coverage { background: var(--ground-2); border-block: 1px solid var(--line); }
.cov-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin-top: 1.8rem;
}
/* 다섯 단계가 한 줄 — 한 장만 가로로 길면 그 장이 튀어 보인다. 같은 크기로 나란히 세운다. */
@media (min-width: 980px) {
  .cov-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
  .cov-card { padding: 1.1rem 1rem; display: grid; align-content: start; }
  .cov-top { flex-direction: column; align-items: flex-start; gap: .4rem; }
}
.cov-card {
  padding: 1.3rem 1.4rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.cov-top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.cov-top h3 { font-size: 1.15rem; }
.cov-count {
  padding: .12rem .6rem; border-radius: 999px; white-space: nowrap;
  background: var(--primary-soft); color: var(--primary-ink);
  font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cov-who { color: var(--muted); font-size: .86rem; margin-top: .15rem; }
.cov-what { color: var(--ink); margin-top: .7rem; }
.cov-note { color: var(--ink-2); font-size: .9rem; margin-top: .35rem; }

/* 키보드로 다니는 사람에게 지금 어디에 있는지 보여 준다.
   마우스로만 쓰는 사람에게는 안 보이고(:focus-visible), 탭으로 넘길 때만 나타난다. */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 4.49:1 로 0.01 모자랐다. 반올림해서 통과시키지 않고 색을 바꾼다 —
   기준은 넘거나 못 넘거나지, 가까운 것은 못 넘은 것이다. */
/* 본문 링크 기본색 — 4.5:1 을 넘긴다.
   특이도를 낮게(요소 하나) 둔다. `a[href^="mailto:"]` 처럼 쓰면 특이도가 .site-foot a 와
   같아져서, 나중에 선언된 이쪽이 이겨 푸터 링크가 어두운 배경 위에서 2.97:1 이 된다. */
a { color: var(--primary-ink); }

.stat-note { margin-top: .6rem; font-size: .84rem; color: var(--muted); }


/* ── 화면에 들어오면 떠오르기 ─────────────────────────────────
   기본은 '보이는 상태'다. motion.js 가 js-motion 을 붙인 뒤에만 숨긴다 —
   스크립트가 막히면 움직임 없는 평범한 페이지가 될 뿐, 내용이 사라지지 않는다. */
.js-motion .reveal { opacity: 0; transform: translateY(14px); }
.js-motion .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; }
}

/* 세 걸음 — 좌우를 번갈아. 같은 모양이 세 번 반복되면 눈이 미끄러진다 */
.flow-alt li:nth-child(even) { direction: rtl; }
.flow-alt li:nth-child(even) > * { direction: ltr; }

.stat-unit { font-size: .95rem; color: var(--ink-2); margin-left: 2px; }

@media (max-width: 720px) {
  .flow-alt li:nth-child(even) { direction: ltr; }
}

/* ══ 홈 개편 (69차) ══════════════════════════════════════════════
   한 달 동안 앱에서 정한 것들을 사이트로 옮긴다 —
   '별까지'(한 칸씩 밟고 올라간다), 손글씨, 알→박사 성장, 아빠가 만든 앱, 실측 숫자만.
   글보다 앱 화면이 먼저 말하게 하고, 글은 그 옆에 짧게 둔다. */

/* ── 손으로 쓴다 ── */
.hand { background: var(--ground); }
.hand-grid { display: grid; gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 861px) { .hand-grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); } }
.hand-shot { margin: 0; border-radius: 22px; overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow); background: #fff; }
.hand-shot img { display: block; width: 100%; height: auto; }
.hand-points { list-style: none; display: grid; gap: .8rem; margin-top: 1.4rem; }
.hand-points li { display: grid; grid-template-columns: 7.5em 1fr; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.hand-points b { color: var(--primary-ink); font-family: 'Gowun Batang', serif; }
.hand-points span { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 520px) { .hand-points li { grid-template-columns: 1fr; gap: .15rem; } }

/* ── 친구가 자란다 ── */
.grow { background: var(--ground); border-block: 1px solid var(--line); text-align: center; }
.grow .section-lead { margin-inline: auto; }
.grow-stages {
  list-style: none; display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap;
  gap: .2rem; margin: 2rem auto 1.6rem; padding: 1.2rem 1rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 880px;
}
.grow-stages li { display: grid; justify-items: center; gap: .2rem; }
.grow-stages img { display: block; height: auto; filter: drop-shadow(0 6px 10px rgba(86, 62, 34, .15)); }
.grow-stages li:nth-child(1) img { width: 72px; }
.grow-stages li:nth-child(3) img { width: 84px; }
.grow-stages li:nth-child(5) img { width: 96px; }
.grow-stages li:nth-child(7) img { width: 110px; }
.grow-stages li:nth-child(9) img { width: 128px; }
.grow-stages span { font-size: .82rem; color: var(--muted); }
.grow-arrow { align-self: center; color: var(--primary-ink); font-size: 1.6rem; padding: 0 .3rem .9rem; font-family: 'Gowun Batang', serif; }
.grow-friends {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 auto;
}
.grow-friends li { display: grid; justify-items: center; gap: .1rem; }
.grow-friends img { width: 76px; height: 76px; object-fit: contain; transition: transform .2s ease; }
.grow-friends li:hover img { transform: translateY(-4px) scale(1.06); }
.grow-friends span { font-size: .8rem; color: var(--ink-2); }
.grow-note { margin-top: 1.2rem; color: var(--muted); font-size: .9rem; max-width: 60ch; margin-inline: auto; }
@media (max-width: 520px) {
  .grow-stages { gap: 0; padding: .9rem .3rem .7rem; flex-wrap: nowrap; }
  .grow-stages li:nth-child(1) img { width: 40px; } .grow-stages li:nth-child(3) img { width: 46px; }
  .grow-stages li:nth-child(5) img { width: 54px; } .grow-stages li:nth-child(7) img { width: 62px; }
  .grow-stages li:nth-child(9) img { width: 74px; }
  .grow-stages span { font-size: .72rem; }
  .grow-arrow { font-size: 1rem; padding: 0 .05rem .7rem; }
  /* 아홉 친구는 3×3 — 4·4·1 로 갈리면 하나가 외롭다 */
  .grow-friends { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 300px; gap: .5rem; }
  .grow-friends img { width: 64px; height: 64px; }
}

/* ── 세 걸음: 폰 화면 셋을 나란히 ── */
.flow-phones { list-style: none; display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); margin-top: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-phones li { display: grid; justify-items: start; gap: .35rem; }
.flow-phones picture { display: block; width: 100%; margin-bottom: .8rem; }
.flow-phones img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  border: 5px solid #fff; box-shadow: var(--shadow); background: var(--card);
}
.flow-phones h3 { font-size: 1.15rem; }
.flow-phones p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 700px) {
  .flow-phones { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}

/* ── 만든 사람 ── */
.story { background: var(--ground-2); border-block: 1px solid var(--line); }
.story-wrap { max-width: 760px; }
.story-quote {
  margin: .6rem 0 0; padding: clamp(1.4rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.6rem);
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow);
  position: relative;
}
.story-quote::before {
  content: '“'; position: absolute; top: -.1em; left: .4rem; font-family: 'Gowun Batang', serif;
  font-size: 5rem; line-height: 1; color: var(--gold); opacity: .6;
}
.story-quote p { font-family: 'Gowun Batang', serif; font-size: clamp(1.02rem, 1.6vw, 1.14rem); color: var(--ink); line-height: 1.9; }
.story-quote p + p { margin-top: .9rem; }
.story-quote p:first-child { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 700; }
.story-quote footer { margin-top: 1.2rem; color: var(--muted); font-size: .9rem; }
.story-quote footer a { display: inline-block; padding: .6rem .2rem; color: var(--primary-ink); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ── 가격 ── */
.price-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1.6rem; }
.price-card {
  display: grid; gap: .3rem; align-content: start; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem;
  transition: transform .16s ease, border-color .16s ease;
}
.price-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.price-card.best { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.price-name { font-size: .9rem; color: var(--muted); font-weight: 700; }
.price-amt { font-family: 'Gowun Batang', serif; font-size: 1.9rem; line-height: 1.1; }
.price-amt small { font-size: .85rem; color: var(--muted); margin-left: .15rem; }
.price-sale { justify-self: start; padding: .15rem .6rem; border-radius: 999px; background: #ffe6d8; color: #b03f18; font-size: .76rem; font-weight: 700; }
.price-was { color: var(--ink-2); font-size: .82rem; }
.price-desc { margin-top: .4rem; color: var(--ink-2); font-size: .9rem; }
.price-note { margin-top: 1rem; color: var(--muted); font-size: .9rem; }

/* ── 계단 축: 사이트 왼쪽에 '한 칸씩' ── 넓은 화면에서만, 장식은 작게 */
@media (min-width: 1180px) {
  .coverage .wrap, .grow .wrap, .flow .wrap, .price .wrap { position: relative; }
  .coverage .wrap::before, .grow .wrap::before, .flow .wrap::before, .price .wrap::before {
    content: ''; position: absolute; left: -44px; top: .9rem; width: 12px; height: 12px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 4px var(--ground-2);
  }
}

/* ══ 게임 (69차) ═══════════════════════════════════════════════════
   교육 앱은 크림빛, 게임은 네온·어둠 — 다른 세계라 띠 색을 바꿔 구분한다.
   한 편 = 표지(왼쪽) · 소개(오른쪽) · 폰 화면 셋(아래). 게임마다 accent 색을 game.json 에서 가져온다. */
.games { background: #1b1724; color: #e9e4f2; border-block: 1px solid rgba(255,255,255,.06); }
.games .eyebrow { color: #c9b8ff; }
.games .section-title { color: #fff; }
.games .section-lead { color: #b7aecb; }
.game-list { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); margin-top: 2rem; }
.game-row {
  display: grid; gap: 1.2rem clamp(1.2rem, 3vw, 2.4rem);
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  grid-template-areas: 'cover copy' 'shots shots';
  padding: clamp(1.2rem, 3vw, 2rem); border-radius: 22px;
  background: #231e30; border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.game-cover { grid-area: cover; align-self: start; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.game-cover img { display: block; width: 100%; height: auto; }
.game-copy { grid-area: copy; display: grid; align-content: center; gap: .5rem; }
.game-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.game-emoji { font-size: 1.5rem; }
.game-head h2, .game-head h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: #fff; margin: 0; }
.games .tag-soon { background: #3a3350; color: #ece6f8; }
.games .tag-beta { background: #1f6b52; color: #dff7ea; }
.game-tagline { font-family: 'Gowun Batang', serif; font-size: 1.1rem; color: var(--accent); }
.game-summary { color: #cfc7e0; font-size: .95rem; max-width: 52ch; }
.game-points { list-style: none; display: grid; gap: .45rem; margin-top: .5rem; }
.game-points li { display: grid; grid-template-columns: 9em 1fr; gap: .6rem; font-size: .92rem; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.08); }
.game-points b { color: #fff; }
.game-points span { color: #bdb4d0; }
.game-meta { color: #8f86a3; font-size: .84rem; }
.game-shots { grid-area: shots; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.game-shots li { display: grid; gap: .4rem; justify-items: center; }
.game-shots picture { display: block; width: 100%; max-width: 220px; }
.game-shots img { display: block; width: 100%; height: auto; border-radius: 18px; border: 3px solid rgba(255,255,255,.12); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.game-shots span { font-size: .8rem; color: #a99fbf; text-align: center; }
.games-foot { margin-top: 2rem; text-align: center; }
.games .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.games .btn-ghost:hover { border-color: var(--gold); }
.games a:focus-visible { outline-color: var(--gold); }
@media (max-width: 860px) {
  .game-row { grid-template-columns: 1fr; grid-template-areas: 'cover' 'copy' 'shots'; }
  .game-points li { grid-template-columns: 1fr; gap: .1rem; }
}
@media (max-width: 520px) {
  .game-shots { gap: .5rem; }
  .game-shots img { border-radius: 12px; border-width: 2px; }
  .game-shots span { font-size: .72rem; }
}

/* ══ 메뉴 (69차) ══════════════════════════════════════════════════
   주업은 교육이다. '교육 앱'은 단추처럼 앞세우고, 게임은 다른 세계라 메뉴에 따로 두되 크기는 보조다. */
.site-nav a.nav-edu {
  background: var(--primary-ink); color: #fff; border-radius: 999px; padding-inline: .95rem; min-height: 38px;
  border-bottom: 0;
}
.site-nav a.nav-edu:hover { background: #a93a10; color: #fff; }
.site-nav a.nav-edu[aria-current="page"] { color: #fff; box-shadow: 0 0 0 3px var(--primary-soft); }
.site-nav a.nav-edu[aria-current="page"]::after { display: none; }
.site-nav a.nav-game[aria-current="page"] { color: #5a46b3; }
.site-nav a.nav-game[aria-current="page"]::after { background: #7c5cff; }
.world, .site-nav a { white-space: nowrap; }
@media (max-width: 700px) {
  .site-nav { gap: .1rem; }
  .site-nav a { font-size: .84rem; padding-inline: .3rem; min-width: 0; }
  .site-nav a.nav-edu { padding-inline: .7rem; min-height: 34px; }
  .brand-logo { width: 84px; }
}
@media (max-width: 420px) {
  .site-nav a[href="/about"] { display: none; }   /* 소개는 푸터에도 있다 */
}

/* 홈의 게임 띠 — 곁가지답게 작게. 표지 석 장과 한 줄. */
.games-strip { background: #1b1724; color: #e9e4f2; border-block: 1px solid rgba(255,255,255,.06); padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.games-strip .eyebrow { color: #c9b8ff; }
.games-strip .section-title { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.games-strip .section-lead { color: #b7aecb; font-size: .95rem; }
.strip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.games-strip .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.games-strip .btn-ghost:hover { border-color: var(--gold); }
.strip-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.strip-list a { display: grid; gap: .3rem; text-decoration: none; color: inherit; }
.strip-list img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); transition: transform .16s ease; }
.strip-list a:hover img { transform: translateY(-3px); }
.strip-name { font-weight: 700; color: #fff; margin-top: .3rem; }
.strip-line { font-size: .86rem; color: #b7aecb; }
.games-strip a:focus-visible { outline-color: var(--gold); }
@media (max-width: 700px) { .strip-list { grid-template-columns: 1fr; max-width: 420px; } }

/* ── 게임 세계: 머리부터 어둡다 ── */
body[data-world="game"] { background: #1b1724; color: #e9e4f2; }
body[data-world="game"] .site-head { background: rgba(27, 23, 36, .9); border-bottom-color: rgba(255,255,255,.08); }
body[data-world="game"] .site-head .brand { display: inline-block; padding: .25rem .6rem; border-radius: 12px; background: #fdf7ec; }
body[data-world="game"] .brand-logo { width: 120px; }
body[data-world="game"] .site-nav a.nav-game[aria-current="page"] { color: #fff; }
body[data-world="game"] .site-nav a.nav-edu { color: #fff; }
body[data-world="game"] .site-nav a { color: #cfc7e0; }
body[data-world="game"] .site-nav a:hover { color: #fff; border-bottom-color: #fff; }
body[data-world="game"] .page-head { background: #221c31; border-bottom-color: rgba(255,255,255,.08); }
body[data-world="game"] .page-head h1 { color: #fff; }
body[data-world="game"] .page-head .hero-lead { color: #bdb4d0; }
body[data-world="game"] .eyebrow { color: #c9b8ff; }
body[data-world="game"] .games { border-block: 0; }
body[data-world="game"] .site-foot { margin-top: 0; }
body[data-world="game"] a:focus-visible { outline-color: var(--gold); }
.game-honest { background: #161320; color: #e9e4f2; border-top: 1px solid rgba(255,255,255,.06); }
.game-honest .section-title { color: #fff; }
.honest-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1.6rem; }
.honest { background: #221c31; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 1.3rem; }
.honest h3 { font-size: 1.08rem; color: #fff; margin-bottom: .4rem; }
.honest p { color: #bdb4d0; font-size: .94rem; }
.honest b { color: #fff; }
.honest a { color: #ffd27d; }
.world, .site-nav a { white-space: nowrap; }
@media (max-width: 700px) {
  body[data-world="game"] .site-head .brand { padding: .15rem .4rem; }
  body[data-world="game"] .brand-logo { width: 74px; }
}

/* ── 소개: 글 옆에 손글씨 화면 ── */
.about-grid { display: grid; gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
@media (min-width: 861px) { .about-grid { grid-template-columns: 380px minmax(0, 1fr); } }
.about-shot { margin: 0; position: sticky; top: 90px; }
.about-shot img { display: block; width: 100%; height: auto; border-radius: 20px; border: 6px solid #fff; box-shadow: var(--shadow); }
.about-shot figcaption { margin-top: .6rem; font-size: .86rem; color: var(--muted); text-align: center; }
.about-body { max-width: 64ch; }
.about-body p { font-family: 'Gowun Batang', serif; font-size: clamp(1.02rem, 1.6vw, 1.12rem); line-height: 1.95; color: var(--ink); }
.about-body p + p { margin-top: 1rem; }
.about-body p:first-child { font-size: clamp(1.2rem, 2.2vw, 1.4rem); font-weight: 700; }
@media (max-width: 860px) { .about-shot { position: static; max-width: 420px; margin-inline: auto; } }


/* ══ 고친 기록 (2026-08-24) ═══════════════════════════════════════ */
.fixlog { background: var(--ground); }
.fixlog-wrap { display: grid; gap: clamp(1.2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 861px) { .fixlog-wrap { grid-template-columns: minmax(0, 1fr) 320px; } }
.fixlog-card {
  display: grid; gap: .15rem; padding: 1.4rem 1.5rem; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease;
}
.fixlog-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.fixlog-big { font-family: 'Gowun Batang', serif; font-size: 3.2rem; line-height: 1; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.fixlog-label { font-weight: 700; color: var(--ink); }
.fixlog-latest { margin-top: .5rem; font-size: .84rem; color: var(--muted); }
.fixlog-note { font-size: .88rem; color: var(--ink-2); }

.log-list { list-style: none; display: grid; gap: 1.6rem; margin-top: 1.6rem; max-width: 74ch; }
.log-date { display: flex; align-items: baseline; gap: .6rem; font-size: 1.15rem; margin-bottom: .5rem; }
.log-count { font-family: 'Gowun Dodum', sans-serif; font-size: .8rem; color: var(--calm); background: var(--calm-soft); padding: .1rem .55rem; border-radius: 999px; }
.log-day ul { list-style: none; display: grid; gap: .5rem; }
.log-item { display: grid; grid-template-columns: 5.2em 1fr; gap: .6rem; padding: .7rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.log-ver { font-family: ui-monospace, Consolas, monospace; font-size: .84rem; color: var(--muted); }
.log-note { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 520px) { .log-item { grid-template-columns: 1fr; gap: .15rem; } }

/* 푸터: 대표자·주소·전화는 접어 둔다 */
.biz-more { display: inline-block; }
.biz-more > summary { cursor: pointer; list-style: none; color: #b8aa98; text-decoration: underline dotted; padding: .2rem 0; }
.biz-more > summary::-webkit-details-marker { display: none; }
.biz-more > summary::after { content: ' ▾'; font-size: .7em; }
.biz-more[open] > summary::after { content: ' ▴'; }
.biz-more-body { display: flex; flex-wrap: wrap; column-gap: 1.1rem; row-gap: .1rem; margin-top: .3rem; width: 100%; }