/* ============================================================
   mealmate — 손그림 스타일 공통 디자인
   ============================================================

   화면을 종이에 스케치한 것처럼 보이게 한다.
   기록을 남기는 서비스라 완성된 제품보다 노트에 가까운 인상이 어울린다.

   글꼴은 두 벌을 함께 쓴다.
     Excalifont — Excalidraw 의 손글씨체. 라틴 문자만 들어 있다
     Gaegu      — 한글 손글씨체. Excalifont 에 없는 글자가 여기로 떨어진다

   브라우저는 앞의 글꼴에 없는 글자를 만나면 다음 글꼴로 넘어간다.
   그래서 영문은 Excalifont, 한글은 Gaegu 로 자동으로 갈린다.
   ============================================================ */

@font-face {
    font-family: 'Excalifont';
    src: url('/fonts/Excalifont-Regular-1875046d453a01bd92a9751985344c18.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

    /* 글꼴을 받는 동안 글자를 숨기지 않고 대체 글꼴로 먼저 보여준다.
       숨기면 화면이 잠깐 비어 보이는데, 그게 더 어색하다 */
    font-display: swap;
}

:root {
    --ink: #1b1b1b;         /* 펜 색 */
    --ink-soft: #6b6b6b;    /* 흐린 글씨 */
    --line: #1b1b1b;        /* 테두리 */
    --line-soft: #a8a8a8;   /* 연한 테두리. 검은 선이 너무 셀 때 쓴다 */
    --paper: #ffffff;
    --hover: #f6f6f6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Excalifont', 'Gaegu', -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

/* 종이 한 장. 좌우 세로선이 지면의 경계를 만든다 */
.sheet {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 32px 60px;
    border-left: 2px solid var(--line);
    border-right: 2px solid var(--line);
    min-height: 100vh;
}

/* ── 손그림 테두리 ────────────────────────────────────────────
   네 모서리의 반지름을 서로 다르게 주면 자로 잰 듯한 느낌이 사라진다.
   컴퍼스로 그린 원이 아니라 손으로 그린 상자처럼 보인다.
   ------------------------------------------------------------ */
.sketch {
    border: 2px solid var(--line);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    background: var(--paper);
}

/* 같은 모양이 반복되면 복사한 티가 난다. 짝수 번째는 방향을 뒤집는다 */
.sketch:nth-child(even) {
    border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px;
}

/* ── 머리말 ────────────────────────────────────────────────── */
.head {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 14px;
}

.logo {
    display: inline-block;
    padding: 10px 44px;
    font-size: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--ink);
}

/* 로고는 가운데, 사용자 이름은 오른쪽 끝에 둔다.
   흐름에서 빼내야 로고가 화면 정중앙을 유지한다 */
.who {
    position: absolute;
    right: 0;
    bottom: -6px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rule {
    height: 3px;
    background: var(--line);
    border-radius: 2px;
    margin-bottom: 26px;
}

/* ── 구역 제목 ────────────────────────────────────────────── */
.section {
    font-size: 19px;
    margin: 0 0 14px;
}

.section-gap { margin-top: 44px; }

/*
 * 제목 줄에 버튼을 같이 놓을 때 쓴다. 제목은 왼쪽, 버튼은 오른쪽 끝.
 *
 * justify-content: space-between 은 남는 공간을 둘 사이에 전부 몰아준다.
 * 이름이 길든 짧든 버튼은 항상 오른쪽 끝에 붙는다.
 */
.section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/*
 * 제목 옆에 놓는 작은 버튼.
 *
 * 제목보다 작아야 한다. 같은 크기면 무엇이 제목인지 흐려진다.
 * flex: none 은 '줄어들지 마라' 는 뜻이다. 이게 없으면 방 이름이 길 때
 * 버튼이 눌려 글자가 두 줄로 접힌다.
 */
.btn-mini {
    font-size: 14px;
    padding: 3px 12px;
    border-width: 1.5px;
    flex: none;
}

/*
 * 제목 줄에 들어가는 작은 고르는 칸(select).
 *
 * width: auto 로 되돌리는 이유:
 *   위쪽에 input·select·textarea 를 한꺼번에 width: 100% 로 두는 규칙이 있다.
 *   입력 칸은 폼 안에서 한 줄을 다 쓰는 것이 맞지만, 이건 제목 옆에 붙는 것이라
 *   그대로 두면 줄을 통째로 차지해 제목을 밀어낸다.
 */
.sort-select {
    width: auto;
    flex: none;
    font-size: 14px;
    padding: 4px 10px;
}

/* ── 방 카드 ──────────────────────────────────────────────── */
.rooms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.room {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 128px;
    padding: 16px 20px;
    text-decoration: none;
    color: var(--ink);
}

.room:hover { background: var(--hover); }
.room .name { font-size: 19px; }
.room .sub { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }

/* 새 방 만들기 칸. 점선으로 두어 '아직 없는 것' 임을 드러낸다 */
.room.add {
    border-style: dashed;
    align-items: center;
    color: var(--ink-soft);
    font-size: 34px;
}

/* ── 사진 격자 ──────────────────────────────────────────────
   사진은 방 카드보다 훨씬 약하게 흔든다.

   카드는 비어 있어서 테두리가 곧 형태지만, 사진은 안에 내용이 있다.
   테두리를 세게 흔들면 사진이 찌그러져 보이고 시선이 테두리로 간다.
   모서리를 몇 픽셀만 어긋나게 하는 정도가 알맞다.

   세 가지 변형을 번갈아 준다. 한 가지만 쓰면 모두 같은 모양이라
   손으로 그린 느낌이 나지 않고, 그냥 둥근 사각형으로 보인다.
   ------------------------------------------------------------ */
/*
 * 사진 격자.
 *
 * 열 수를 못 박지 않는다. 화면은 폰(약 360px)부터 노트북(약 900px)까지 제각각이고,
 * 크기마다 규칙을 따로 적으면 새 기기가 나올 때마다 또 적어야 한다.
 *
 * repeat(auto-fill, minmax(200px, 1fr)) 은
 *   "한 칸을 최소 200px 로 두고, 들어가는 만큼 열을 만들어라" 는 뜻이다.
 *   1fr 이 붙어 있어 남는 자리는 칸들이 나눠 가지므로 오른쪽이 비지 않는다.
 *
 *   태블릿(본문 약 700px)  → 3열, 한 장 약 220px
 *   노트북(본문 약 900px)  → 4열, 한 장 약 210px
 *
 * 폰은 아래 @media 에서 2열로 따로 정한다.
 * 200px 짜리 칸 두 개가 폰 폭에 안 들어가서 한 줄에 한 장씩 나오기 때문이다.
 * 폰에서도 칸 크기는 그 폰의 폭을 둘로 나눈 값이라, 기기마다 알아서 달라진다.
 */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/*
 * 요약 화면의 미리보기 격자. 네 장을 한 줄에 나란히 둔다.
 *
 * 처음에는 2열(2×2)로 두었는데 사진이 너무 커서 화면을 다 먹었다.
 * 요약 화면은 사진을 감상하는 자리가 아니라 '무엇이 있는지' 만 알려주는 자리다.
 * 크게 보고 싶으면 전체보기로 가면 된다. 여기서는 작게, 대신 한 줄에 끝낸다.
 *
 * 3열이 아니라 4열인 이유:
 *   3열에 네 장을 넣으면 첫 줄 셋 · 둘째 줄 하나가 되어 빈칸 둘이 남는다.
 *   4열이면 한 줄로 떨어지고 세로 자리도 절반만 쓴다.
 *
 * .gallery 를 한 번 더 붙인 이유:
 *   아래 모바일 규칙(@media)에 .gallery 를 2열로 되돌리는 줄이 있다.
 *   선택자 무게가 같으면 뒤에 적힌 쪽이 이기므로, 폰에서는 그쪽이 이겨 버린다.
 *   클래스를 하나 더 붙여 무게를 올리면 적힌 순서와 상관없이 이 규칙이 남는다.
 */
.gallery.gallery-preview {
    /*
     * 요약 미리보기의 열 수.
     *
     * 전체보기와 달리 사진이 딱 네 장이라 열 수를 화면에 맡기지 않고 직접 정한다.
     * 맡기면 넓은 화면에서 네 장이 한 줄로 늘어서 '요약' 이 아니라 띠처럼 보인다.
     *
     *   PC  → 3열. 네 장이 3 + 1 로 떨어진다
     *   폰  → 2열 (아래 @media). 네 장이 2 × 2 로 딱 떨어진다
     *
     * max-width 를 두는 이유:
     *   열 수는 '몇 개를 넣을지' 만 정할 뿐 '얼마나 클지' 는 정하지 않는다.
     *   칸 크기는 남는 폭을 열 수로 나눈 값이라, 막지 않으면 PC 본문 폭(약 896px)에서
     *   한 장이 292px 까지 커진다. 요약 화면 하나가 화면을 거의 다 먹는다.
     *   700px 에서 멈추면 한 장이 약 227px 로, 전체보기 목록(약 212px)과 비슷해진다.
     */
    grid-template-columns: repeat(3, 1fr);
    max-width: 700px;
}

.gallery .card {
    display: block;
    text-decoration: none;
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: 14px 7px 12px 9px / 9px 12px 7px 14px;

    /* 아주 살짝 기울인다. transform 은 배치에 영향을 주지 않아
       격자가 흐트러지지 않으면서 손으로 붙인 사진 같은 느낌만 남는다 */
    transform: rotate(-0.35deg);
}

.gallery .card:nth-child(2n) {
    border-radius: 7px 14px 9px 12px / 12px 9px 14px 7px;
    transform: rotate(0.4deg);
}

.gallery .card:nth-child(3n) {
    border-radius: 12px 9px 14px 7px / 14px 7px 12px 9px;
    transform: rotate(-0.15deg);
}

.gallery .card:hover { transform: rotate(0deg); }

.gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    color: var(--ink-soft);
    font-size: 15px;
}

/* ── 그 밖 ────────────────────────────────────────────────── */
.empty { color: var(--ink-soft); padding: 20px 0; }
.foot  { text-align: center; color: var(--ink-soft); font-size: 15px; padding: 24px 0; }

.btn {
    font-family: inherit;
    font-size: 16px;
    padding: 6px 16px;
    cursor: pointer;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--line);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

.btn:hover { background: var(--hover); }

.link { color: var(--ink); }

#sentinel { height: 1px; }

/* ── 안쪽 폭 ────────────────────────────────────────────────
   지면(.sheet)의 폭은 모든 화면에서 같게 둔다.
   화면을 옮길 때마다 좌우 세로선이 들썩이면 다른 사이트처럼 보인다.

   대신 안쪽 내용의 폭만 목적에 맞게 좁힌다.
     .column      입력이 주인 화면. 한 줄이 너무 길면 눈이 따라가기 힘들다
     .column-wide 읽고 보는 화면. 사진과 목록이 답답하지 않을 정도
   ------------------------------------------------------------ */
.column,
.column-wide {
    margin-left: auto;
    margin-right: auto;
}

.column      { max-width: 440px; }
.column-wide { max-width: 700px; }

/* ── 상자 ─────────────────────────────────────────────────── */
.box {
    padding: 18px 20px;
    margin-bottom: 20px;
}

.box h2 { font-size: 18px; margin: 0 0 12px; }

/* ── 약관·처리방침 ───────────────────────────────────────── */
/* 조항이 줄줄이 이어지는 긴 글이라, 제목 위를 넉넉히 띄워 어디서 끊기는지 보이게 한다 */
.legal h2 { font-size: 18px; margin: 28px 0 8px; }
.legal p,
.legal li { line-height: 1.7; }
.legal ul { padding-left: 20px; margin: 6px 0 12px; }

/* 계정 화면의 탈퇴 칸. 평소엔 접혀 있다 */
details.box > summary { cursor: pointer; font-size: 18px; }
details.box[open] > summary { margin-bottom: 12px; }
.withdraw-list { padding-left: 20px; margin: 6px 0 12px; line-height: 1.7; }

/* 가입 화면의 동의 줄 끝에 붙는 '보기' 링크 */
.agree-view { font-size: 15px; margin-left: 4px; }

/* ── 입력 ─────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; margin-bottom: 6px; }

input[type=text], input[type=email], input[type=password],
input[type=datetime-local], input[type=file], select, textarea {
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--line);
    border-radius: 12px 6px 10px 8px / 8px 10px 6px 12px;
}

textarea { resize: vertical; }

/* 체크박스는 폭을 100% 로 만들면 안 된다. 글자 옆에 붙어 있어야 한다 */
input[type=checkbox] { width: auto; }

.btn.wide { width: 100%; padding: 11px; font-size: 17px; }

/* 검색창처럼 입력칸과 버튼이 한 줄에 붙는 형태 */
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
.row .btn { white-space: nowrap; }

/* ── 안내 문구 ────────────────────────────────────────────── */
.msg {
    padding: 10px 14px;
    margin-bottom: 18px;
    border: 2px solid var(--line);
    border-radius: 12px 6px 10px 8px / 8px 10px 6px 12px;
}

/* 색을 바꾸는 대신 테두리 색만 바꾼다.
   손그림 화면에 배경색 덩어리가 들어가면 종이 느낌이 깨진다 */
.msg.err { border-color: #c04040; color: #a33; }

.hint { color: var(--ink-soft); font-size: 15px; margin-top: 8px; }

/* ── 목록 ─────────────────────────────────────────────────── */
.list { list-style: none; padding: 0; margin: 0; }

.list li {
    padding: 14px 0;
    border-bottom: 2px dashed #ddd;   /* 실선보다 손으로 그은 줄에 가깝다 */
}

.list li:last-child { border-bottom: none; }
.list a { color: var(--ink); text-decoration: none; }

/* ── 초대 코드 ────────────────────────────────────────────── */
.invite-code {
    display: inline-block;
    padding: 10px 18px;
    font-size: 26px;
    letter-spacing: 4px;
    border: 2px solid var(--line);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* ── 뒤로 가기 줄 ─────────────────────────────────────────── */
.back { margin-bottom: 16px; font-size: 16px; }
.back a { color: var(--ink-soft); text-decoration: none; }
.back a:hover { color: var(--ink); }

/* 화면이 좁으면 3열은 답답하다. 두 열로 줄인다 */
@media (max-width: 640px) {
    .sheet { padding: 20px 16px 40px; border-left: none; border-right: none; }
    .rooms, .gallery { grid-template-columns: repeat(2, 1fr); }

    /* 요약 미리보기는 폰에서 2열. 네 장이 2 × 2 로 떨어진다.
       PC 규칙과 무게가 같으므로 뒤에 적힌 이쪽이 이긴다 */
    .gallery.gallery-preview { grid-template-columns: repeat(2, 1fr); }
    .logo { font-size: 24px; padding: 8px 28px; }

    /* 머리말을 위아래로 쌓는다.
       .who 는 PC 에서 position: absolute 로 오른쪽 끝에 붙어 있는데,
       흐름에서 빠져 있어 자리를 차지하지 않는다. 그래서 화면이 좁아지면
       로고를 밀어내지 못하고 로고 박스 위에 그대로 겹쳐 버린다.
       static 으로 되돌려 흐름 안에 넣으면 로고 아래로 내려간다. */
    .head { flex-direction: column; gap: 10px; align-items: center; }

    /* 세로로 쌓은 상태에서 이 줄만 오른쪽으로 민다.
       align-items 는 부모가 자식 전체에 주는 정렬이고,
       align-self 는 자식 하나가 그걸 무시하고 자기만 다르게 두는 것이다.
       로고는 가운데, 사용자 줄만 오른쪽이 된다. */
    .who  { position: static; align-self: flex-end; font-size: 15px; }
}

/* ── 기록 상세: 왼쪽 사진, 오른쪽 댓글 ─────────────────────────
   인스타그램 게시물 화면과 같은 배치다.
   사진은 한 장씩 옆으로 넘겨 보고, 그 옆에 댓글 칸이 같은 높이로 붙는다.

   align-items: stretch 로 두는 이유:
     오른쪽 칸이 왼쪽 높이에 맞춰 늘어나야 두 칸이 나란히 보인다.
     start 로 두면 댓글이 적을 때 오른쪽만 짧게 떠서 배치가 어긋나 보인다.

   minmax(0, ..) 를 쓰는 이유:
     grid 칸의 기본 최소 폭은 '안의 내용이 안 줄어드는 크기' 다.
     긴 댓글 한 줄이 들어오면 그 칸이 밀려서 사진 쪽을 밀어낸다.
     최소를 0 으로 두면 칸이 정해진 비율을 지키고 내용이 안에서 줄바꿈된다.
   ------------------------------------------------------------ */
.detail {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* ── 사진 넘겨보기 ────────────────────────────────────────────
   자바스크립트 없이 만든다.
   가로로 스크롤되는 칸에 사진을 한 줄로 늘어놓고,
   scroll-snap 으로 아무 데서나 멈추지 않고 사진 경계에 딱 붙게 한다.
   ------------------------------------------------------------ */
.photo-frame {
    position: relative;
    border: 2px solid var(--line);
    border-radius: 18px 8px 16px 10px / 10px 16px 8px 18px;
    overflow: hidden;
    background: var(--paper);
}

.photo-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;   /* 사진 단위로만 멈춘다 */
    scroll-behavior: smooth;         /* 점을 눌렀을 때 미끄러지듯 넘어간다 */
    aspect-ratio: 1 / 1;             /* 사진 비율이 제각각이라 틀을 정사각으로 고정 */
}

/* 스크롤 막대는 감춘다. 점으로 위치를 알려주므로 없어도 된다 */
.photo-track::-webkit-scrollbar { display: none; }

.photo-track img {
    flex: 0 0 100%;                  /* 한 번에 한 장만 보이게 칸을 꽉 채운다 */
    width: 100%;
    height: 100%;
    object-fit: cover;               /* 늘리지 않고 넘치는 부분만 잘라낸다 */
    scroll-snap-align: center;
    display: block;
}

/* 지금 몇 번째 사진인지 알려주는 점.
   링크(a)로 만들어 누르면 그 사진으로 넘어간다. 자바스크립트가 필요 없다. */
.dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 4px;
}

.dots a {
    width: 9px;
    height: 9px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
}

.dots a:hover { background: var(--ink); }

/* ── 오른쪽 댓글 칸 ───────────────────────────────────────────
   위에서부터 [제목][댓글 목록][입력칸] 세 층으로 쌓는다.
   가운데 목록만 늘어나고 줄어들게 해서, 댓글이 많아져도
   입력칸이 화면 밖으로 밀려나지 않는다.
   ------------------------------------------------------------ */
.detail-side {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--line);
    border-radius: 10px 18px 8px 16px / 16px 8px 18px 10px;
    padding: 16px 18px;
    min-height: 0;                   /* 이게 없으면 안쪽 스크롤이 생기지 않는다 */
}

.detail-side .section { margin-top: 0; }

/* flex: 1 은 '남는 자리를 다 가져라', min-height: 0 은 '필요하면 줄어도 된다' 다.
   둘을 같이 줘야 목록이 넘칠 때 안에서 스크롤된다 */
.comment-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 14px;
}

/* 댓글 한 칸. 상자를 겹겹이 두르면 답답해서 점선 한 줄로만 나눈다 */
.comment {
    padding: 12px 0;
    border-bottom: 2px dashed #ddd;
}

.comment:last-child { border-bottom: none; }
.comment p { margin: 0 0 6px; }
.comment p:last-child { margin-bottom: 0; }

/* 수정·삭제는 평소에 눈에 띄지 않아야 한다. 읽는 것이 먼저다 */
.comment-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;   /* 오른쪽 끝에 붙인다 */
    margin-top: 8px;
}

.comment-tools .btn { padding: 3px 10px; font-size: 14px; }

.comment-tools details > summary {
    list-style: none;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 14px;
    padding: 3px 10px;
    border: 2px solid var(--line);
    border-radius: 12px 6px 10px 8px / 8px 10px 6px 12px;
}

.comment-tools details > summary::-webkit-details-marker { display: none; }
.comment-tools details > summary:hover { background: var(--hover); }

.comment-edit { margin-top: 10px; }
.comment-edit textarea { margin-bottom: 8px; }

/* 입력칸은 맨 아래에 붙어 있는다.
   입력칸과 등록 버튼을 한 줄에 두는 이유:
     버튼을 아래에 따로 두면 그만큼 목록이 차지할 자리가 줄어든다.
     댓글 한 줄 쓰자고 세로 공간을 두 층 쓸 일은 아니다.

   align-items: flex-end 는 두 개의 아래쪽을 맞춘다.
   입력칸이 여러 줄로 늘어나도 버튼은 바닥에 붙어 있는다. */
.comment-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 2px dashed #ddd;   /* 목록과 입력칸의 경계 */
}

/* flex: 1 로 남는 자리를 입력칸이 다 가져간다.
   min-width: 0 이 없으면 입력칸이 자기 기본 폭을 고집해 버튼을 밀어낸다 */
.comment-form textarea {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.comment-form .btn {
    flex: 0 0 auto;              /* 글자 길이만큼만 차지하고 줄어들지 않는다 */
    padding: 8px 14px;
    font-size: 15px;
}

/* 좁은 화면에서는 좌우로 나눌 자리가 없다.
   사진 먼저, 댓글이 그 아래로 오는 한 줄 배치로 되돌린다.
   기준을 900px 로 잡은 이유는 지면(.sheet) 폭이 960px 이라,
   그보다 좁아지면 두 칸이 각각 400px 아래로 눌리기 때문이다 */
@media (max-width: 900px) {
    .detail { grid-template-columns: 1fr; gap: 20px; }
    .comment-list { overflow: visible; }
}

/* ── 댓글 쪽 이동 ─────────────────────────────────────────────
   [← 이전]   2 / 4   [다음 →]

   space-between 으로 양 끝에 밀어붙인다.
   이전이나 다음이 없을 때를 대비해 빈 span 을 자리 지킴으로 넣어두었다.
   그게 없으면 한쪽이 사라질 때 가운데 쪽수가 좌우로 튄다.
   ------------------------------------------------------------ */
.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 2px dashed #ddd;
}

.pager a {
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    padding: 3px 10px;
    border: 2px solid var(--line);
    border-radius: 12px 6px 10px 8px / 8px 10px 6px 12px;
}

.pager a:hover { background: var(--hover); }
.pager .hint { margin-top: 0; }

/* ── 사진 고르기 버튼 ─────────────────────────────────────────
   input type=file 은 브라우저마다 생김새가 제각각이라 꾸밀 수가 없다.
   그래서 입력칸은 숨기고 label 을 버튼처럼 만든다.
   label 을 누르면 안에 든 input 이 눌린 것과 같아진다.
   ------------------------------------------------------------ */
.pick-row {
    display: flex;
    gap: 10px;
}

.pick {
    flex: 1;
    text-align: center;
    cursor: pointer;
}

/*
 * 고른 사진의 미리보기 격자.
 *
 * :empty 로 숨기는 이유:
 *   아직 아무것도 고르지 않았을 때 이 칸이 빈 채로 자리를 차지하면,
 *   아래 항목들이 이유 없이 밀려 내려가 화면이 어긋나 보인다.
 *   내용이 생기는 순간에만 나타나게 한다. 자바스크립트로 여닫지 않아도 된다.
 */
.pick-preview {
    display: grid;

    /*
     * 열 수를 못 박지 않고 화면 폭에 맞춰 알아서 채운다.
     *
     * repeat(3, 1fr) 로 두었더니 칸 하나가 화면 폭의 3분의 1이라,
     * 폰에서 사진이 필요 이상으로 크게 나왔다. 여기서 볼 것은
     * '내가 고른 게 이 사진이 맞나' 뿐이라 크게 볼 이유가 없다.
     *
     * auto-fill 은 '한 칸을 최소 이만큼 두고, 들어가는 만큼 열을 만들어라' 는 뜻이다.
     * 열 수를 화면 크기마다 따로 정해줄 필요가 없다.
     *
     * 그 최솟값을 clamp 로 준다.
     *   clamp(가장 작게, 화면에 따라, 가장 크게)
     *   clamp(72px, 12vw, 120px) 은 "화면 폭의 12% 로 하되, 72px 보다 작아지지 말고
     *   120px 보다 커지지도 마라" 는 뜻이다. vw 는 화면 폭의 1% 를 가리킨다.
     *
     * 이러면 기기 목록을 적지 않아도 알아서 맞는다.
     *   폰   → 12% 가 작아서 72px 에 걸린다.  한 줄에 4개, 한 장 약 82px
     *   노트북 → 12% 가 커서 120px 에 걸린다. 한 줄에 3개, 한 장 약 140px
     *
     * 고정값 72px 만 쓰면 노트북에서도 폰과 똑같이 작게 나왔다. 그래서 clamp 를 얹었다.
     */
    grid-template-columns: repeat(auto-fill, minmax(clamp(72px, 12vw, 120px), 1fr));
    gap: 10px;
    margin-top: 12px;
}

.pick-preview:empty { display: none; }

/*
 * aspect-ratio 로 정사각형을 만들고 object-fit: cover 로 채운다.
 *
 * 높이를 정하지 않으면 세로 사진과 가로 사진의 높이가 제각각이라 줄이 들쭉날쭉해진다.
 * cover 는 비율을 지키면서 칸을 꽉 채우고 넘치는 부분만 잘라낸다.
 * 여기서는 어떤 사진인지 알아보기만 하면 되므로 잘려도 괜찮다.
 */
.pick-preview img,
.pick-noimg {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 2px solid var(--line);
    border-radius: 12px 6px 10px 8px / 8px 10px 6px 12px;
}

/* 브라우저가 그리지 못하는 형식일 때 파일 이름을 대신 보여주는 칸 */
.pick-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 12px;
    color: var(--ink-soft);
    text-align: center;
    word-break: break-all;
    overflow: hidden;
}

/* ── 촬영 버튼 ────────────────────────────────────────────────
   갤러리 끝에서 사진과 함께 스크롤된다.

   전에는 position: fixed 로 화면 아래에 늘 떠 있었다.
   항상 같은 자리에 붙어 있는 것이 어색하고 사진을 가려서, 본문 흐름 안으로 넣었다.
   fixed 를 걷어내면 문서의 한 요소로 돌아가 자기 자리에서 함께 움직인다.

   가운데 정렬을 flex 로 하는 이유:
     form 은 가로 폭을 다 차지하는 블록이라 그대로 두면 버튼이 왼쪽에 붙는다.
     margin: auto 는 폭을 정해줘야 먹히는데, 원의 크기는 .shot 이 정하고 있다.
     부모를 flex 로 만들어 가운데로 모으는 편이 크기를 몰라도 된다.
   ------------------------------------------------------------ */
.shot-form {
    display: flex;
    justify-content: center;
    /* 위로는 마지막 사진과 떨어뜨리고, 아래로는 아이폰 홈 인디케이터를 피한다 */
    margin: 34px 0 calc(12px + env(safe-area-inset-bottom, 0px));
}

.shot {
    /* 글자 두 줄이 들어갈 만큼 키웠다. 66px 이면 글자가 테두리에 닿는다 */
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--paper);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    /* 바깥 선. 검정(--line)은 이 크기의 원에서 너무 세게 보여 회색으로 낮췄다 */
    border: 2px solid var(--line-soft);

    /*
     * 안쪽에 선을 한 겹 더 둘러 이중 테두리를 만든다.
     * border 는 한 겹만 그릴 수 있어서 inset 그림자를 겹쳐 쓴다.
     *
     * inset 은 먼저 쓴 것이 위에 덮이므로 바깥에서 안쪽 순으로 적는다.
     *   3px 종이색  → 두 선 사이의 빈 틈
     *   5px 회색    → 그 안쪽의 두 번째 선(3~5px 구간만 남는다)
     * 실제 카메라 셔터 버튼이 이 구조라 눌러야 할 곳으로 읽힌다.
     */
    box-shadow:
        inset 0 0 0 3px var(--paper),
        inset 0 0 0 5px var(--line-soft),
        /* 종이 위에 올려둔 것처럼 옅은 그림자. 선이 연해진 만큼 같이 낮췄다 */
        0 3px 10px rgba(0, 0, 0, .14);
}

/* 원 안의 글자. 두 줄이라 줄간격을 좁힌다 */
.shot-text {
    font-size: 17px;
    line-height: 1.15;
    text-align: center;
    color: var(--ink);
    user-select: none;   /* 길게 눌러도 글자가 선택되지 않게 */
}

/* 누르는 동안 두 선이 함께 진해진다. 배경만 바뀌면 눌린 느낌이 약하다 */
.shot:active {
    background: var(--hover);
    border-color: var(--ink-soft);
    box-shadow:
        inset 0 0 0 3px var(--hover),
        inset 0 0 0 5px var(--ink-soft),
        0 2px 6px rgba(0, 0, 0, .14);
}

/* 전송 중에는 눌리지 않게 하고 흐리게 둔다.
   사진이 큰 경우 몇 초 걸리는데, 그동안 반응이 없으면 또 누른다 */
.shot-form.sending .shot { opacity: .45; pointer-events: none; }

/* 촬영 버튼이 본문 안으로 들어와 더는 화면을 가리지 않는다.
   아래를 크게 비워둘 이유가 없어졌다 */
.sheet { padding-bottom: 60px; }

/*
 * 마우스로 쓰는 기기에서는 촬영 버튼을 감춘다.
 *
 * input 의 capture 속성은 '가능하면 카메라를 열어달라' 는 힌트일 뿐이다.
 * PC 브라우저는 이 속성을 무시하고 그냥 파일 탐색기를 연다.
 * 그러면 '촬영하기' 라고 적힌 버튼에서 파일 고르기 창이 뜨는 셈이라 말이 어긋난다.
 * PC 에는 이미 '사진 올리기' 경로가 따로 있으므로 여기서는 숨긴다.
 *
 * 화면 너비가 아니라 pointer 로 판단하는 이유:
 *   너비로 나누면 창을 좁게 줄인 PC 가 폰으로 오해받고,
 *   가로로 눕힌 태블릿은 폰인데도 넓다는 이유로 빠진다.
 *   여기서 가르고 싶은 것은 '화면이 좁은가' 가 아니라 '카메라가 달렸는가' 다.
 *
 *   pointer: fine   → 마우스·트랙패드처럼 한 점을 정확히 찍는 기기
 *   pointer: coarse → 손가락처럼 뭉툭한 기기 (폰·태블릿)
 *
 * fine 을 숨기는 쪽으로 적은 이유:
 *   이 조건을 모르는 낡은 브라우저는 규칙을 통째로 건너뛴다.
 *   그 경우 버튼이 남는데, 안 나오는 것보다 나온 채로 남는 편이 덜 위험하다.
 *   터치가 되는 노트북은 두 조건을 다 만족해 fine 으로 잡히지만,
 *   그런 기기는 뒷카메라가 없어 어차피 촬영 버튼이 쓸모없다.
 */
@media (pointer: fine) {
    .shot-form { display: none; }
}

/* ── 작은 창(dialog) ────────────────────────────────────────
   초대 코드 입력처럼 화면을 옮기지 않고 한 가지만 받을 때 쓴다.
   ------------------------------------------------------------ */
dialog {
    width: min(420px, calc(100vw - 48px));
    padding: 22px 24px;
    border: 2px solid var(--line);
    background: var(--paper);
    color: var(--ink);
}

/* 열렸을 때만 보이게 한다. 이게 없으면 닫힌 창의 내용이 화면에 그대로 남는다 */
dialog:not([open]) { display: none; }

/*
 * ::backdrop 은 창 뒤에 브라우저가 깔아주는 층이다.
 * 뒤를 덮어 지금 답해야 할 것이 무엇인지 분명해진다.
 */
dialog::backdrop { background: rgba(0, 0, 0, .38); }

dialog h2 { font-size: 19px; margin: 0 0 6px; }
dialog .hint { margin: 0 0 14px; }

/* 닫기(✕)를 오른쪽 위로 보낸다 */
.dialog-x { display: flex; justify-content: flex-end; margin: -8px -8px 0 0; }

/*
 * 생김새 없는 버튼.
 *
 * 링크(<a>)로 만들지 않은 이유:
 *   링크는 '어딘가로 간다' 는 뜻인데 이건 창을 여는 동작이다.
 *   주소가 없는 링크는 키보드로 쓰는 사람에게 눌리지도 않는다.
 *   동작에는 button 을 쓰고 생김새만 링크처럼 맞춘다.
 */
.btn-plain {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.dialog-x .btn-plain { font-size: 20px; color: var(--ink-soft); padding: 4px 8px; }

/* 링크처럼 보여야 하는 버튼은 밑줄까지 맞춘다. 옆의 진짜 링크와 달라 보이면 안 된다 */
.btn-plain.link { text-decoration: underline; }