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

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

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

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

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

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

:root {
    --ink: #1b1b1b;         /* 펜 색 */
    --ink-soft: #6b6b6b;    /* 흐린 글씨 */
    --line: #1b1b1b;        /* 테두리 */
    --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; }

/* ── 방 카드 ──────────────────────────────────────────────── */
.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;
}

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

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

   세 가지 변형을 번갈아 준다. 한 가지만 쓰면 모두 같은 모양이라
   손으로 그린 느낌이 나지 않고, 그냥 둥근 사각형으로 보인다.
   ------------------------------------------------------------ */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.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; }

/* ── 입력 ─────────────────────────────────────────────────── */
.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); }
    .logo { font-size: 24px; padding: 8px 28px; }
}

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

   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; }