/* 소개용 홈페이지. 정적 파일만 올린다 — 실행되는 코드가 없으면 그만큼 사고도 없다.
   서비스 화면(amber.css)과 달리 여기는 읽는 곳이라, 본문 폭을 좁게 잡는다. */

:root {
    /* 오이색. 서비스 화면(amber.css)과 같은 값을 쓴다 —
       소개 페이지와 서비스가 다른 색이면 같은 곳이라는 느낌이 끊긴다. */
    --bg: #f8faf5;
    --panel: #ffffff;
    --line: #e0e6d8;
    --text: #23281f;
    --dim: #5f6659;
    --accent: #527f24;   /* 오이 껍질의 초록 */
    --on-accent: #ffffff;
    --radius: 8px;
}

/* ★ 어두운 화면 규칙을 걷어냈다(2026-08-16, 폐하 지시). 서비스 화면과
     관리자 콘솔이 밝은 화면 하나로 못 박혔는데 소개 페이지만 운영체제를
     따라가면, 같은 곳이라는 느낌이 문 앞에서부터 끊긴다.

     폐하께서 "배경이 검정이라 느와르 같다"고 하셨다. 이 서비스가 보여주려는
     것은 밝은 날 풀밭 위의 오이지 밤거리가 아니다.

   ★ color-scheme 을 light 로 못 박는다. 이것이 없으면 PC 가 어두운 모드일 때
     입력칸·선택창처럼 운영체제가 그리는 것들만 어두워져서, 밝은 화면에 검은
     칸이 박힌 모양이 된다. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    /* 조부모도 읽는다. 16px 아래로 내리지 않는다. */
    font: 17px/1.75 "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
    word-break: keep-all;   /* 한글이 단어 중간에서 끊기지 않게 */
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }

/* 머리글. 소개 장(index)은 <header class="site"> 안에 .bar 를 두어 띠를 화면
   끝까지 늘리고, 법적 고지 세 장은 예전처럼 .wrap 안에 <header> 하나로 둔다.
   ★ 둘이 «같은 모양»으로 서야 한다 — 그래서 규칙을 갈라 쓰지 않고 함께 적는다. */
header, .bar {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    flex-wrap: wrap;
}

header.site { display: block; padding: 0; border-bottom: 0; }

.brand { font-size: 1.25rem; font-weight: 700; text-decoration: none; color: var(--text); }
.brand span { color: var(--accent); }

/* 머리글의 로고. 글자와 밑선을 맞춘다. */
.brand img { vertical-align: -7px; margin-right: 6px; }

header nav, .bar nav { margin-left: auto; display: flex; gap: 1rem; font-size: 0.9rem; }
header nav a, .bar nav a { color: var(--dim); text-decoration: none; }
header nav a:hover, .bar nav a:hover { color: var(--text); text-decoration: underline; }

main { padding: 2.5rem 0 4rem; }

h1 { font-size: 1.75rem; line-height: 1.4; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }

.lede { font-size: 1.1rem; color: var(--dim); margin: 0 0 2rem; }
.updated { color: var(--dim); font-size: 0.85rem; margin: 0 0 2rem; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.5rem; }
li { margin: 0 0 0.4rem; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 600; white-space: nowrap; }

.box {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
}

.box h3 { margin-top: 0; }
.box p:last-child { margin-bottom: 0; }

a { color: var(--accent); }

/* 아직 채우지 못한 값. 눈에 걸리게 두는 것이 목적이다 —
   빈칸을 조용히 두면 그대로 공개된다. */
.todo {
    background: #e4f0d4;
    color: #3a5420;
    padding: 0.05em 0.35em;
    border-radius: 3px;
    font-size: 0.95em;
}

@media (prefers-color-scheme: dark) {
    .todo { background: #2c3d1e; color: #cbe6ab; }
}

/* 좁은 화면에서는 표를 세로로 쌓는다.
   두 칸을 나란히 두면 값이 한 글자씩 줄바꿈되어 읽기가 어렵다 —
   이 문서를 전화기로 읽는 사람이 대부분이다. */
@media (max-width: 34rem) {
    th, td { display: block; border-bottom: none; padding: 0.1rem 0; }

    th { white-space: normal; padding-top: 0.9rem; }

    /* 행 사이를 선으로 나눈다. 칸마다 선을 그으면 표가 아니라 목록처럼 보인다. */
    tr { display: block; border-bottom: 1px solid var(--line); padding-bottom: 0.7rem; }
    tr:last-child { border-bottom: none; }
}

footer {
    border-top: 1px solid var(--line);
    padding: 1.5rem 0 3rem;
    color: var(--dim);
    font-size: 0.85rem;
}

footer p { margin: 0 0 0.35rem; }
footer a { color: var(--dim); }

/* 앱 안내. 설치 파일로 링크하지 않는다 — 아직 닫힌 시험이라
   받는 주소는 초대받으신 분께만 따로 보낸다. */
.apps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 2rem;
}

.app {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.app img { display: block; flex: none; border-radius: 0.6rem; }
.app strong { display: block; }
.app span { color: var(--dim); font-size: 0.9rem; }
/* ══════════════════════════════════════════════════════════════════
   소개 장의 «보이는 것» (2026-09-02, 폐하 청)

   폐하 말씀 — 비슷한 서비스의 홈페이지와 「꾸밈이 너무 차이가 나니까 사실 좀..
   창피한 기분이 듭니다」. 그전까지 이 장은 글자뿐이었다.

   ★★ 그림을 «문서 안에» 그린다(인라인 SVG). 이 네 장에는 <script> 와 바깥
     주소를 못 넣게 시험이 막고 있어(StaticPageTests), 바깥에서 받아 오는
     그림도 두지 않는다. 받아 오는 것이 없으면 늦게 뜨는 일도, 새는 일도 없다.
   ★★★ 그리고 «진짜 가족 사진»을 쓰지 않는다. 여기는 아무나 보는 자리다.
     앨범처럼 보이는 자리는 «색»으로만 그린다.
   ══════════════════════════════════════════════════════════════════ */

/* 아이콘 모음. 화면에 자리를 차지하지 않게 접어 둔다. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 첫 화면만 폭을 넓힌다. 본문은 «읽는 곳»이라 44rem 그대로 둔다 —
   글줄이 길면 조부모께서 다음 줄을 찾기 어렵다. */
.wrap.wide { max-width: 60rem; }

/* ★★ 「푸르고 싱그럽게」 — 폐하 청 2026-09-02.

   ★ 처음에는 위쪽에 옅은 «살구빛»을 얹었다. 따뜻하기는 한데 폐하께서 원하신 것은
     <b>오이북 같은 싱그러움</b>이었다. 살구는 그 반대쪽 색이다 — 걷어냈다.
   ★★ 대신 초록을 «두 겹»으로 깐다. 넓게 퍼지는 옅은 것 하나와, 전화기 뒤에서
     피어오르는 진한 것 하나. 한 겹이면 색종이처럼 평평해 보이고, 두 겹이면
     빛이 드는 것처럼 보인다.
   ★ 그래도 글씨 자리(왼쪽)는 «밝게» 남긴다. 초록을 왼쪽까지 끌고 오면
     조부모께서 읽으실 때 대비가 깎인다. */
.hero {
    background:
        radial-gradient(52rem 26rem at 82% 18%, rgba(122, 168, 74, 0.30), transparent 62%),
        radial-gradient(70rem 30rem at 55% 0%, rgba(176, 209, 130, 0.34), transparent 70%),
        linear-gradient(170deg, #e6f0d6 0%, #eff5e6 46%, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr minmax(15rem, 20rem);
    gap: 2.5rem;
    align-items: center;
    padding: 3rem 1.25rem 3.25rem;
}

.hero h1 { font-size: 2.4rem; line-height: 1.25; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.hero .lede { font-size: 1.12rem; margin: 0 0 1.75rem; }

.hero-do { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; }

/* 첫 화면에서 할 일은 하나다 — 열어 보시는 것. 그래서 단추도 하나만 둔다. */
.cta {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    text-decoration: none;
}

.cta:hover { background: #456c1e; }
.hero-do .note { color: var(--dim); font-size: 0.9rem; }

.hero-shot { justify-self: center; }
.phone { display: block; width: 100%; max-width: 17rem; height: auto; }

/* 전화기 그림 안의 것들. 실제 화면(amber.css)의 짜임을 따라 그린다 —
   여기서 본 것과 열었을 때 본 것이 다르면 그 사이에서 믿음이 깎인다. */
.phone .case { fill: #ffffff; stroke: var(--line); }
.phone .screen { fill: var(--bg); }
.phone .chrome { fill: #eef2e7; }
.phone .notch { fill: #23281f; }
.phone .ring { fill: none; stroke: var(--line); }
.phone .dot { fill: #b4432f; }
.phone .line { stroke: var(--dim); stroke-width: 1.4; stroke-linecap: round; }

.phone text { font-family: inherit; }
.phone .t-title { font-size: 15px; font-weight: 700; fill: var(--text); }
.phone .t-dim { font-size: 10px; fill: var(--dim); }
.phone .t-day { font-size: 11px; font-weight: 700; fill: var(--dim); }
.phone .t-name { font-size: 10px; fill: #ffffff; }

.phone .pill-on { fill: var(--accent); }
.phone .t-on { font-size: 11px; font-weight: 700; fill: var(--on-accent); text-anchor: middle; }
.phone .pill { fill: #ffffff; stroke: var(--line); }
.phone .t-pill { font-size: 11px; fill: var(--dim); text-anchor: middle; }

.phone .badge { fill: rgba(0, 0, 0, 0.55); }
.phone .t-badge { font-size: 10px; fill: #ffffff; text-anchor: middle; }
.phone .play { fill: #ffffff; opacity: 0.9; }

.phone .fab { fill: var(--accent); }
.phone .fab-plus { stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; }
.phone .t-fab { font-size: 12px; font-weight: 700; fill: var(--on-accent); }

/* ── 무엇을 해 주는가 ─────────────────────────────────────────
   ★ 여섯 칸을 화면 넓이에 따라 셋·둘·하나로 접는다. 칸 수를 화면마다
     적어 두면 그 사이 넓이에서 어그러진다. */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 0.9rem;
    margin: 2.5rem 0 1rem;
}

.cards .box { margin: 0; padding: 1.15rem 1.25rem; }

/* 제목 옆의 그림. ★ 그림만 두지 않는다 — 조부모께서는 그림만으로는 모르신다.
   글씨가 본문이고 그림은 «찾기 쉽게» 하는 표다. */
.box h3 { display: flex; align-items: center; gap: 0.55rem; }

.ico {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── 화면 둘 ───────────────────────────────────────────────── */
.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
    margin: 0 0 1rem;
}

.shots figure { margin: 0; }

.card-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.shots figcaption { color: var(--dim); font-size: 0.9rem; margin-top: 0.5rem; }

.card-shot text { font-family: inherit; }
.card-shot .screen { fill: var(--panel); stroke: var(--line); }
.card-shot .t-title { font-size: 14px; font-weight: 700; fill: var(--text); }
.card-shot .t-title.s { font-size: 13px; }
.card-shot .t-dim { font-size: 10px; fill: var(--dim); }
.card-shot .t-cell { font-size: 11px; fill: var(--text); }
.card-shot .pill-on { fill: var(--accent); }
.card-shot .t-on { font-size: 11px; font-weight: 700; fill: var(--on-accent); text-anchor: middle; }
.card-shot .dot-cal { fill: var(--accent); }
.card-shot .dot-cal.alt { fill: #cf8d86; }
.card-shot .row { fill: var(--bg); stroke: var(--line); }
.card-shot .t-row { font-size: 11px; fill: var(--text); }
.card-shot .t-row.num { text-anchor: end; fill: var(--dim); }
.card-shot .t-amount { font-size: 20px; font-weight: 700; fill: var(--text); }
.card-shot .bar-bg { fill: #eef2e7; }
.card-shot .bar { fill: var(--accent); }
.card-shot .bar.alt { fill: #a9c47f; }

/* 좁은 화면에서는 말이 위, 화면이 아래로 간다. 그리고 큰 제목을 줄인다 —
   전화기에서 2.4rem 은 한 줄에 서너 글자밖에 안 들어간다. */
@media (max-width: 46rem) {
    .hero-grid { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.25rem 1.25rem 2.5rem; }
    .hero h1 { font-size: 1.9rem; }
    .phone { max-width: 14rem; }
}

/* ★ 글줄은 좁게 둔다. 첫 화면과 카드는 60rem 으로 넓혔지만, «읽는 글»까지
     넓히면 조부모께서 다음 줄을 찾기 어렵다 — 왼쪽 끝은 카드와 맞춰 둔다. */
.prose { max-width: 44rem; }


/* ══════════════════════════════════════════════════════════════════
   글의 «결»에 화면을 맞춘다 (2026-09-02, 폐하 청)

   폐하께서 두 이야기를 홈페이지에 넣으신 뒤 「그 극적인 내용에 맞추어 홈페이지
   분위기도 같이 꾸며 달라」 하셨다.

   ★ 무엇을 하지 «않았는가»부터 적는다 —
     · 진짜 가족 사진을 쓰지 않았다. 여기는 아무나 보는 자리이고, 오이북이
       지키려는 것이 바로 그 사진이다. 광고에 쓰면 스스로를 뒤집는 일이 된다
     · 사람을 그리지 않았다. 어설프게 그린 사람은 «싸구려»로 보이고,
       그러면 이야기까지 함께 싸구려가 된다
     · 색을 더 넣지 않았다. 오이색 한 벌 안에서만 밝기를 달리했다 —
       홈페이지만 다른 색이면 앱에 들어왔을 때 「다른 곳에 왔나」 싶어진다

   ★★ 대신 «결»을 바꿨다. 구획을 화면 끝까지 닿는 띠로 나누어, 스크롤하다
     이야기에 이르면 읽는 결이 달라지게 했다. 사진 자리는 색으로만 그렸다.
   ══════════════════════════════════════════════════════════════════ */

/* 화면 끝까지 닿는 띠. 안쪽은 늘 .wrap 이 잡는다. */
.band { padding: 3rem 0 3.25rem; }

.band.warm {
    background:
        radial-gradient(48rem 20rem at 50% 0%, rgba(176, 209, 130, 0.26), transparent 68%),
        linear-gradient(180deg, #f1f7e6 0%, #eaf2dc 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* 띠 안의 제목은 위에 선을 긋지 않는다 — 띠 자체가 이미 나눈 자리다. */
.band h2 { border-top: 0; margin-top: 0; padding-top: 0; }

/* 이야기로 들어가는 첫 줄. 본문보다 조금 크게 세운다. */
.why-lede { font-size: 1.15rem; margin: 0 0 1.75rem; }

/* ── 이야기 ─────────────────────────────────────────────────── */
.story {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.35rem 1.5rem;
    margin: 0 0 1.25rem;
}

.story h3 { margin: 0 0 0.7rem; font-size: 1.15rem; color: #3f6318; }
.story p { margin: 0 0 0.75rem; }
.story p:last-child { margin-bottom: 0; }

/* 이야기가 «어디로 가는지»를 맺는 한 줄. 앞의 문장들과 갈라 세운다. */
.story .so {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    color: #3f6318;
}

/* 이야기마다 붙는 작은 그림. 사람을 그리지 않고 «사진 카드»로만 말한다 —
   ①은 손에서 손으로 건네지는 한 장, ②는 나란히 선 셋이다. */
.story .mark { display: block; width: 64px; height: 48px; margin: 0 0 0.35rem -0.25rem; }
.story .mark .a { fill: #cfe3a8; }
.story .mark .b { fill: #ffd9a0; }
.story .mark .c { fill: #f2c4bd; }
.story .mark .arrow {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── 맺는 자리 ──────────────────────────────────────────────── */
.band.close { text-align: center; padding: 3.25rem 0 3.5rem; }

.fan { display: block; width: 220px; height: auto; margin: 0 auto 1.25rem; }
.fan .card rect { filter: drop-shadow(0 2px 6px rgba(35, 40, 31, 0.14)); }

.close-say {
    font-size: 1.35rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 1.5rem;
}

.close-do { margin: 0; }

@media (max-width: 46rem) {
    .band { padding: 2.25rem 0 2.5rem; }
    .close-say { font-size: 1.15rem; }
    .fan { width: 170px; }
}

/* ★ 이야기 띠 안에서는 글줄을 «더» 좁힌다. 카드 설명은 두어 줄이라 60rem 에서도
     읽히지만, 이야기는 문단이 이어져서 줄이 길면 다음 줄을 찾다가 결이 끊긴다.
   ★★ 좁히면 가운데로 모이는데, 그것이 이 자리에는 맞다 — 여기만은 «읽는 자리»다. */
.band .prose { max-width: 46rem; }

/* ── 사진 띠 (폐하 청 2026-09-02 — 「사진을 풍부하게」) ───────────
   ★ 화면 끝까지 닿게 둔다. 여백을 두면 「그림 여섯 장」이 되고,
     끝까지 닿으면 「사진첩」이 된다. 뜻이 달라진다.
   ★★ 글이 없는 자리가 하나쯤 있어야 그다음 글이 읽힌다. */
.strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    background: var(--line);
}

.strip img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* 좁은 화면에서는 셋씩 두 줄. 여섯을 한 줄로 두면 한 장이 손톱만 해진다. */
@media (max-width: 46rem) {
    .strip { grid-template-columns: repeat(3, 1fr); }
}

/* ── 맺는 자리의 바탕 사진 ──────────────────────────────────────
   숲길을 가족이 «함께 걸어가는 뒷모습». 이 장에서 하고 싶은 말이 그 한 장에 있다.

   ★ 사진 위의 글씨는 «읽히지 않으면 없는 것»이다. 그래서 옅은 막을 한 겹 덮고,
     글자는 그대로 검은 쪽을 쓴다 — 흰 글씨로 바꾸면 이 장에서 여기만 결이 튄다. */
.band.close { position: relative; overflow: hidden; }

.band.close .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

/* ★ 막을 «얇게» 둔다. 처음에 흰 막을 두껍게 덮었더니 사진이 뿌옇게 보였다 —
     폐하께서 「뿌연 것은 빼 달라」 하신 그 느낌이 «내가 만든 것»으로 돌아왔다.
   ⇒ 사진은 또렷하게 두고, 글은 «흰 판»에 얹어 대비를 따로 확보한다.
     막은 사진에 깊이를 주는 정도로만 얹는다. */
.band.close::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35, 40, 31, 0.10) 0%, rgba(35, 40, 31, 0.20) 100%);
}

.band.close > .wrap { position: relative; z-index: 1; }

/* 사진 위에 얹히므로 카드에 흰 테를 둘러 «떠 있게» 만든다. */
.fan .card rect { filter: drop-shadow(0 3px 10px rgba(35, 40, 31, 0.28)); }

/* 사진 위의 글은 «판»에 얹는다. 막을 두껍게 덮어 대비를 만들면 사진이 뿌옇게
   되고, 흰 글씨로 바꾸면 이 장에서 여기만 결이 튄다. 판이 둘 다 피한다. */
.band.close { padding: 4.5rem 0 5rem; }

.close-panel {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.75rem 2rem 2rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 6px 28px rgba(35, 40, 31, 0.18);
}

@media (max-width: 46rem) {
    .band.close { padding: 2.75rem 0 3rem; }
    .close-panel { padding: 1.35rem 1.25rem 1.5rem; }
}

/* ── 사진 무리 (폐하 청 2026-09-02 — 「최대한 써 주십시오」) ──────
   ★ 열두 장을 여섯 칸씩 두 줄로 깐다. 화면 끝까지 닿게 두어 «사진첩»으로 읽히게 한다.
   ★★ 여기에 이름을 붙이지 않는다. 「보리」·「애기」는 «글»에서 한 번 말했고,
     사진마다 이름을 달면 설명서가 된다 — 사진첩은 말이 적어야 사진이 보인다. */
.band.album { padding: 3rem 0 0; }

.album-say { color: var(--dim); margin: 0 0 1.75rem; }

/* ★ 넉 칸이다. 맨 앞이 두 칸씩(4칸) 먹고 나머지 열둘 = 16칸 = 4×4 로 «딱» 맞는다.
     사진을 더하거나 뺄 때 이 셈을 다시 맞춘다 — 안 맞으면 「이빨이 빠진」 자리가 생긴다
     (폐하께서 2026-09-02 에 그렇게 짚어 주셨다). */
.grid-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    background: var(--line);
}

.grid-photos img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* 좁은 화면에서는 셋씩 넉 줄. 여섯을 한 줄로 두면 한 장이 손톱만 해진다. */
@media (max-width: 46rem) {
    /* 좁은 화면은 두 칸 — 맨 앞 4 + 열둘 = 16 = 2×8 로 역시 딱 맞는다. */
    .grid-photos { grid-template-columns: repeat(2, 1fr); }
    .band.album { padding: 2.25rem 0 0; }
}

/* 맨 앞 한 장은 «두 칸씩» 차지한다. 열두 장이 다 같은 크기면 격자가 되고,
   하나가 크면 «사진첩»이 된다 — 눈이 어디부터 볼지 알게 된다. */
.grid-photos .lead { grid-column: span 2; grid-row: span 2; }

@media (max-width: 46rem) {
    /* 좁은 화면에서는 두 칸(=셋 중 둘)만 차지한다. 넉넉히 두면 한 줄을 다 먹는다. */
    .grid-photos .lead { grid-column: span 2; grid-row: span 2; }
}

/* 지금 서 있는 판. 발밑에 작게 둔다 — 늘 볼 것은 아니지만,
   고장 신고를 받을 때 「어느 판에서 나셨나」가 첫 물음이라 «있어야» 한다. */
.build { color: var(--dim); font-size: 0.8rem; margin-top: 0.6rem; }