/*
  오이북 공통 스타일. 웹과 앱이 같은 것을 쓴다.

  ★ 기본 글씨를 크게 잡는다. '조부모 모드'를 따로 만들지 않기로 했다(15장) —
    화면을 두 벌 유지하는 부담이 크고, 무엇보다 '노인용 모드'라는 이름 자체가
    기분을 상하게 한다. 조부모에게 필요한 것이 젊은 사람에게 나쁠 이유가 없다.
*/

:root {
    /*
      오이색. 폐하께서 정하셨다 — 이름이 오이북이니 색도 오이여야 한다.
      껍질의 진한 초록을 주된 색으로, 속살의 연한 연두를 강조에 쓴다.

      ★ 2026-08-20 에 색조와 채도를 폐하께서 직접 고르셨다(dev\color-lab).
        hsl(80 56%) — 옛것(hsl 95 45%)보다 노란 쪽으로 가고 더 선명하다.
        오이 껍질에 가깝다.

      ★ --oi 위에는 흰 글씨가 올라간다(단추). 그래서 밝기를 마음대로 못 올린다.
        폐하께서 처음 주신 값은 밝기 37%(#70932a)였는데 흰 글씨 대비가 3.56 이라,
        고르신 색조·채도를 그대로 두고 밝기만 32% 로 내렸다 — 대비 4.75.
        <조부모가 단추 글씨를 읽기 어려워진다>는 이 파일의 오래된 약속을
        지키려는 것이다. 되돌리시려면 이 한 줄만 바꾸면 된다.
    */
    --oi: #527f24;
    --oi-lit: #a0d831;

    /* --oi 위에 올라가는 글씨. 밝은 화면과 어두운 화면에서 서로 뒤집힌다. */
    --on-oi: #ffffff;

    /*
      바탕. 순백이 아니라 아주 옅은 종이색이다.

      ★ 순백은 사진 옆에서 사진보다 밝아 눈이 먼저 그쪽으로 간다. 종이 쪽으로
        아주 조금만 눕히면 사진이 앞으로 나온다 — 미술관 벽이 순백이 아닌 이유다.
        이름이 오이북이니 종이색인 것도 맞다.
    */
    --bg: #fbfbf7;

    /* 사진 칸·판이 올라앉는 면. 바탕보다 반 걸음 밝다. */
    --surface: #ffffff;

    --ink: #1b1f24;
    --ink-2: #5a626c;
    --line: #e3e5dd;
    --danger: #96323f;

    /* 기본 18px. 브라우저 기본(16px)보다 한 단계 크다. */
    --text: 1.125rem;
    --text-lead: 1.375rem;

    /* 손가락으로 누르는 최소 크기. 이보다 작으면 조부모가 못 누른다. */
    --touch: 3rem;
}

/*
  ★ 어두운 화면 규칙을 걷어냈다. 폰이 어두운 모드면 앱도 따라 어두워졌는데,
    가족 사진을 새까만 바탕에서 보면 느와르 영화처럼 된다. 폐하께서 이틀 쓰시고
    그렇게 말씀하셨다.

    사진을 보는 화면은 밝아야 한다 — 어두운 바탕은 밝은 사진을 실제보다 더 세게
    보이게 하고, 어두운 사진은 바탕에 묻어 버린다.

  ★ color-scheme 을 light 로 못 박는다. 이것이 없으면 폰이 어두운 모드일 때
    입력칸과 선택창 같은 <운영체제가 그리는 것들>만 어두워져서, 밝은 화면에
    검은 칸이 박힌 모양이 된다.

  밤에 어둡게 보고 싶다는 말이 나오면 그때 화면에 스위치를 단다 —
  운영체제를 따라가는 것과는 다른 이야기다.
*/
:root { color-scheme: light; }

html {
    font-size: 18px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic',
        system-ui, -apple-system, sans-serif;
    font-size: var(--text);
    line-height: 1.7;
    word-break: keep-all;
}

/* 누르는 것은 전부 손가락 크기 이상으로 */
button, input, select, textarea {
    font-family: inherit;
    font-size: var(--text);
    min-height: var(--touch);
}

/* ★ 어떤 칸도 자기 자리를 넘지 않는다.
     입력칸은 폭을 정해 주지 않으면 브라우저가 <글자 스무 자>만큼을 잡는데,
     우리 글씨가 커서 그것이 폰 화면보다 넓다. 화면마다 width:100% 를 적어 두는
     것으로는 언젠가 한 곳을 빠뜨린다 — 실제로 '내 계정'의 이름 칸이 그렇게
     화면 밖으로 나갔다. 여기서 한 번 막아 둔다. */
input, select, textarea {
    box-sizing: border-box;
    max-width: 100%;
}

/* ── 적는 칸의 생김새 ─────────────────────────────────────────
   ★ 화면 이름을 붙이지 않는다. 이것이 이 파일에서 가장 중요한 규칙이다.

     예전에는 .amber-signin input 에만 적혀 있었다. 그래서 화면을 하나 만들 때마다
     같은 것을 다시 적어야 했고, 빠뜨려도 아무도 알려 주지 않는다 — 화면은 뜨고,
     칸만 스무 글자 폭으로 쪼그라들어 이름표 옆에 붙어 선다. '알리기' 화면에서
     실제로 그랬다(2026-08-17). 위 주석이 같은 교훈을 이미 적어 두었는데도
     max-width 만 막아 두어서, <덜 커지는 쪽>은 여전히 화면마다 적어야 했다.

     이제 칸의 생김새는 칸이 갖는다. 화면은 <다른 점>만 적는다.

   ★ 체크상자·라디오·파일 고르개는 뺀다. 그것들은 폭을 채우는 것이 아니라
     제 크기대로 서야 한다. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    width: 100%;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;

    /* 입력칸은 바탕보다 밝다 — 적는 자리라는 것이 눈에 보여야 한다. */
    background: var(--surface);
    color: var(--ink);

    /* 인증번호처럼 숫자가 들어오는 칸은 자리를 맞춰 두면 읽기 쉽다. */
    font-variant-numeric: tabular-nums;

    /* ★ 키보드가 올라올 때 칸이 키보드에 딱 붙지 않게 한다. 브라우저는 초점이
         놓인 칸을 '보이는 자리'로만 굴려 주는데, 그 자리가 화면 맨 아래라
         키보드와 맞닿아 답답하다(2026-08-16 폐하 보고). scroll-margin 은
         굴려 줄 때 그만큼 더 띄우라는 뜻이다 — 칸 자체는 커지지 않는다. */
    scroll-margin-bottom: 5rem;
}

/* 여러 줄 칸. 위아래 여백이 없으면 첫 줄이 테두리에 붙는다. */
textarea {
    padding: 0.75rem 1rem;
    line-height: 1.6;
    resize: vertical;
}

button {
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    padding: 0 1.25rem;
}

button.primary {
    background: var(--oi);
    border-color: var(--oi);
    color: var(--on-oi);
    font-weight: 700;
    width: 100%;
}

button.primary:disabled {
    opacity: 0.5;
    cursor: default;
}

button.link {
    border: none;
    color: var(--oi);
    text-decoration: underline;
    text-underline-offset: 3px;
    width: 100%;
}

/* 키보드로 다니는 사람이 지금 어디 있는지 늘 보이게 */
:focus-visible {
    outline: 3px solid var(--oi-lit);
    outline-offset: 2px;
}

/* ── 로그인 ──────────────────────────────────────────────────── */

.amber-signin {
    max-width: 24rem;
    margin: 0 auto;

    /* ★ 아래를 넉넉히 둔다. 키보드가 올라오면 화면이 줄어드는데, 여백이 없으면
         마지막 칸이 키보드에 딱 붙어 답답하다(2026-08-16 폐하 보고).
         칸마다 걸어 둔 scroll-margin-bottom 과 함께 쓴다 — 그쪽은 굴려 줄 때
         띄우는 것이고, 이쪽은 굴릴 자리 자체를 만들어 준다. */
    padding: 3rem 1.5rem 6rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 로고. 색은 파일 안에 있다 - <img> 는 바깥 색을 물려주지 못한다. */
.amber-signin .logo {
    margin-bottom: 0.25rem;
}

.amber-signin h1 {
    margin: 0;
    font-size: 2.25rem;
    letter-spacing: -0.02em;
}

/* 이름 안의 '북'. 로고의 오이와 같은 색이라야 그림과 글자가 한 덩어리로 보인다.
   --oi 는 밝은 화면에서 진한 오이색, 어두운 화면에서 연한 오이색으로 바뀐다. */
.amber-signin h1 .accent {
    color: var(--oi);
}

.amber-signin .lead {
    margin: 0 0 1.5rem;
    font-size: var(--text-lead);
    color: var(--ink-2);
}

.amber-signin label {
    font-weight: 700;
}

/* 로그인 화면의 칸에는 이 화면만의 것이 없다 — 생김새는 위쪽의 이름 없는
   규칙이 준다. 예전에는 여기에 전부 적혀 있었고, 그것이 화면을 늘릴 때마다
   같은 것을 다시 적게 만든 원인이었다. */

/* ★ 아이폰이 비밀번호 칸 안에 그리는 대문자 잠금 표시를 감춘다.
     칸 높이(--touch)에 맞춰 늘어나면서 위아래로 찌그러진 화살표가 된다 —
     폐하께서 "위아래로 늘려놓은 듯한 아이콘"이라 하신 것이 이것이다.
     폰에서는 키보드가 이미 대문자 상태를 보여 주므로 없어도 잃는 것이 없다.

   ★ 비밀번호 관리자 단추(-webkit-credentials-auto-fill-button)는 감추지 않는다.
     그것까지 없애면 저장해 두신 비밀번호를 꺼내 쓰실 수 없다 — 외우는 것보다
     관리자를 쓰시는 편이 안전하고, 우리가 그렇게 권해 두었다. */
input[type="password"]::-webkit-caps-lock-indicator {
    display: none;
}

.amber-signin .hint {
    margin: 0.25rem 0 0;
    color: var(--ink-2);
    font-size: 1rem;
}

/* 이메일 로그인과 소셜 로그인을 눈으로 갈라 준다 */
.amber-signin .divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0.25rem;
    color: var(--ink-2);
}

.amber-signin .divider::before,
.amber-signin .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* 웹에서는 링크이고 앱에서는 단추다 — 웹은 주소창을 옮기고, 앱은 운영체제가
   주는 로그인 창을 띄운다. 생김새는 하나라야 한다. 사람에게는 같은 것이다.

   ★ font 를 물려받게 해 두지 않으면 단추 쪽만 브라우저 기본 글꼴로 나와
     링크와 나란히 놓였을 때 둘이 다른 것처럼 보인다. */
.amber-signin .social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--touch);
    padding: 0 1.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.amber-signin button.social:disabled {
    opacity: 0.55;
    cursor: default;
}

.error {
    color: var(--danger);
    font-weight: 700;
}

/* ── 타임라인 ────────────────────────────────────────────────── */

/* 글과 그림이 가운데 한 덩어리로 모여 있어야 한다.
   ★ 폭을 가두지 않으면 1920px 화면에서 가족 이름은 맨 왼쪽, 단추는 맨 오른쪽으로
     벌어져 서로 남남처럼 보인다. 그것이 '대충 만든 느낌'의 가장 큰 원인이었다.
     사진을 보는 화면이라 글보다는 넓게, 그래도 눈이 한 번에 훑을 만큼만 둔다. */
.amber-shell {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.amber-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 좁은 화면에서는 줄을 바꾼다. 다만 묶음 단위로 바뀐다 —
       예전에는 넷이 따로 흩어져서 '내 계정' 만 혼자 가운데로 떨어졌다. */
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 0 1rem;
    border-bottom: 1px solid var(--line);
}

/* ★ 구분선 아래 간격은 <머리줄이> 챙긴다. 예전에는 그 자리에 올리기 상자가
     있어 간격을 만들어 주었는데, 그것을 오른쪽 아래로 옮기자(2026-08-20)
     알약 줄이 선에 바로 붙었다 — 폐하께서 두 번 지적하신 자리다.

   ★ 뒤따르는 것마다 위 여백을 주지 않는다. 다음에 오는 것이 알약 줄일 때도
     있고(이은 집이 있는 가족), 날짜 머리글일 때도 있고, 텅 빈 안내일 때도
     있다 — 그때마다 고치면 언젠가 하나를 빠뜨린다. 간격을 옆 것에 기대어
     두고 있었던 것이 이 사달의 뿌리다.

   ★ 사진첩(.amber-shell)에만 준다. 같은 머리줄을 여덟 화면이 쓰는데, 그쪽들은
     사이에 올리기 상자가 있던 적이 없어 지금 간격이 맞다 — 한 화면의 문제로
     여덟을 함께 흔들지 않는다. */
.amber-shell .amber-header { margin-bottom: 1.25rem; }

/* ★ 사진첩의 머리줄. 두 줄이지만 얇다 — 첫 줄에 집 이름·얼굴·종·햄버거,
     둘째 줄에 용량이다(2026-08-21 폐하 지시로 순서를 이렇게 잡았다).
     예전에는 229px 였고 지금은 그 절반 아래다. */
.amber-shell .amber-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.7rem 0 0.6rem;
    position: relative;
}

/* ★★ 옛 규칙 하나를 여기서 덮는다.
     좁은 화면(max-width: 30rem)에 `.amber-header .acts { width: 100% }` 가 있다 —
     단추 묶음이 <둘째 줄로 내려가던> 옛 배치를 위한 것이었다. 이제 같은 줄에
     서므로, 그 규칙이 남아 있으면 단추가 줄의 폭을 <전부> 차지하고 집 이름칸을
     0px 로 눌러 버린다. 2026-08-21 에 폐하 폰에서 실제로 그렇게 되었고
     (이름과 용량이 사라지고 단추가 왼쪽으로 쏠렸다), 재어 보고 잡았다.

     다른 일곱 화면은 그 옛 규칙이 아직 맞으므로 건드리지 않는다 —
     한 화면의 문제로 여덟을 함께 흔들지 않는다. */
@media (max-width: 30rem) {
    .amber-shell .amber-header .acts { width: auto; padding-top: 0; }
    .amber-shell .amber-header { padding-bottom: 0.6rem; }
}

/* 집 이름과 내 얼굴. 이름이 먼저 서고 얼굴이 그 뒤다. */
.amber-header .house {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

/* 이름과 얼굴 사이는 조금 더 띄운다 — 그림·이름은 한 덩어리이고
   얼굴은 다른 것이다. */
.amber-header .house > .me { margin-left: 0.35rem; }

.amber-header .house h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 집 그림. 오이색으로 두어 이 줄에 우리 색이 한 점 남게 한다 —
   로고를 얼굴로 바꾸면서 그것이 사라졌다. */
.amber-header .house > svg,
.amber-header .house .pick > svg:first-child {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--oi);
}

/* ── 집을 고르는 단추 ─────────────────────────────────────────────
   속한 집이 둘 이상일 때만 나온다. 이름 자체가 단추가 되고, 오른쪽에
   아래쪽 화살이 "고를 것이 더 있다" 를 알린다. */
.amber-header .house .pick {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0.1rem 0.4rem 0.1rem 0;
    border: none;
    background: none;

    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.amber-header .house .pick:hover { background: none; color: var(--oi); }

/* 이름은 h1 과 같은 크기로 — 단추가 되었다고 작아질 이유가 없다. */
.amber-header .house .pick > span {
    font-size: 1.5rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 아래쪽 화살은 작고 조용하게. 이름을 가리지 않는다. */
.amber-header .house .pick > svg:last-child {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--ink-2);
}

/* 고르는 판. 햄버거 서랍과 같은 생김새이나 <왼쪽>에 붙는다 —
   누른 자리 아래에서 열려야 무엇을 고르는 것인지 안다. */
.amber-header .drawer.houses {
    right: auto;
    left: 0;
    min-width: 13rem;
}

.amber-header .drawer.houses .nm { flex: 1; min-width: 0; text-align: left; }

/* 지금 열고 있는 집. 어디에 있는지 모르면 바꾸는 단추가 있어도 쓸 수 없다. */
.amber-header .drawer.houses button.on { color: var(--oi); font-weight: 700; }

.amber-header .drawer.houses .here {
    flex: none;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-2);
}

/* 내 얼굴이 계정으로 가는 문이다. 단추처럼 보이지 않게 두되 손가락 크기는 지킨다. */
.amber-header .me {
    flex: none;
    width: auto;
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 999px;
    line-height: 0;
}

.amber-header .me:hover { background: none; }

/* 용량은 아래 줄을 통째로 쓴다. 작고 조용하게 — 늘 보되 읽으라고 조르지 않는다. */
.amber-shell .amber-header > .quota {
    flex: 0 0 100%;
    order: 9;
    font-size: 0.9rem;
    color: var(--ink-2);
}

/* 다른 화면들이 쓰는 옛 묶음. 사진첩은 위의 .house 를 쓴다. */
.amber-header .who {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.amber-header .who h1,
.amber-header .who .quota {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amber-header h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.amber-header .quota {
    display: block;
    color: var(--ink-2);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

/* 오른쪽 묶음 — 누를 것들. 서로 붙어 있어야 한 벌로 읽힌다.

   ★ 밑줄 친 글자에서 알약 모양 단추로 바꿨다(2026-08-17 폐하 지시).
     글자만 있으면 누르는 자리라는 것이 약하고, 넷이 나란히 서면 빽빽했다.
     사진 위의 앨범 줄과 같은 모양이라야 앱 안에서 누르는 것이 한 가지로 읽힌다. */
.amber-header .acts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* ★ 글자만 두지 않고 그림을 함께 둔다(2026-08-20 폐하 요청). 셋이 나란히 선
     알약 단추가 글자뿐이면 무엇을 누르는 자리인지 약하다 — 특히 '내 계정' 이
     설정으로 들어가는 문이라는 것이 보이지 않았다. */
.amber-header .acts button {
    width: auto;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: 999px;
    font-size: 1rem;

    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* 그림은 글씨 색을 따라간다(currentColor) — 단추에 마우스를 얹으면 함께 바뀐다. */
.amber-header .acts svg {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
}

.amber-header .acts button:hover { border-color: var(--oi); color: var(--oi); }

/* ── 햄버거와 그 안 ────────────────────────────────────────────────

   가족·앨범·내 계정이 이 안에 있다(2026-08-21 폐하 설계). 자주 누르는 것이
   아니라 머리줄을 늘 차지할 이유가 없다 — 사진첩에서 사람이 하는 일은
   <사진을 보는 것>이다. */
.amber-header .acts button.menu {
    padding: 0 0.7rem;
}

.amber-header .acts button.menu svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* 열리면 머리줄 아래로 내려온다.

   ★ 자리를 밀지 않는다(position: absolute). 밀면 열 때마다 사진이 아래로
     내려가고, 닫으면 다시 올라와 화면이 튄다. */
.amber-header .drawer {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;

    display: flex;
    flex-direction: column;
    min-width: 11rem;
    padding: 0.4rem;

    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);

    /* 사진 위에 뜨는 것이라 떠 있는 것처럼 보여야 한다. */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.amber-header .drawer button {
    width: 100%;
    justify-content: flex-start;
    min-height: var(--touch);
    padding: 0 0.7rem;
    border: none;
    border-radius: 0.5rem;
    background: none;
    font-size: 1rem;

    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.amber-header .drawer button:hover {
    background: color-mix(in srgb, var(--oi) 8%, transparent);
    color: var(--oi);
}

.amber-header .drawer svg { flex: none; width: 1.15rem; height: 1.15rem; }

/* 몇 쥔이 모였는지. 수가 없으면 줄 자체를 내지 않으니 0 은 없다. */
.amber-header .drawer .count {
    margin-left: auto;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--oi);
    color: var(--on-oi);
    font-size: 0.8rem;
    font-weight: 700;
}

/* ── 알림 종 ──────────────────────────────────────────────────────

   ★ 이 단추만 글씨가 없다. 폐하께서 넷이 나란히 서면 빽빽하다 하셨고
     (2026-08-17), 종은 배우지 않아도 아는 그림이라 글씨를 더하면 도리어
     읽을 것이 많아진다. 대신 <숫자>가 글씨 몫을 한다. */
.amber-header .acts button.bell {
    position: relative;
    padding: 0 0.7rem;
}

.amber-header .acts button.bell svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* 안 읽은 수. 종의 오른쪽 위에 얹는다 — 폰에서 익숙한 자리다.

   ★ 붉은색을 쓴다. 오이색으로 두면 단추 테두리와 섞여 <눈에 걸리지 않는다> —
     알림 뱃지는 걸려야 하는 것이 일이다. 이 화면에서 붉은색이 쓰이는 다른
     자리는 '지금 완전히 지우기' 하나뿐이라 뜻이 헷갈리지 않는다. */
.amber-header .acts button.bell .count {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;

    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.28rem;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background: var(--danger);
    color: #fff;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;

    /* 종과 겹치는 자리라 테두리로 떼어 놓는다. 없으면 숫자가 종에 붙어 보인다. */
    border: 2px solid var(--surface);
}

/* ★ '내 계정' 은 앞의 둘과 성격이 다르다 — 가족·앨범은 <사진을 보는 길>이고
     이것은 <나를 설정하는 문>이다. 사이에 선을 하나 세워 그 다름을 보인다. */
.amber-header .acts .apart {
    align-self: stretch;
    width: 1px;
    margin: 0.35rem 0.25rem;
    background: var(--line);
}

/* 좁은 화면에서는 이름 아래로 내려가 한 줄을 차지한다 — 옆으로 밀려
   가족 이름이 잘리는 것보다 낫다. */
@media (max-width: 30rem) {
    .amber-header .acts {
        margin-left: 0;
        width: 100%;

        /* ★ 용량 글씨와 단추가 달라붙어 있었다(2026-08-20 폐하 지적).
             gap 은 <묶음 사이>만 띄우고, 줄이 바뀐 뒤의 위쪽은 비어 있었다. */
        padding-top: 0.25rem;
    }

    /* 단추와 아래 구분선 사이도 띄운다. 선에 단추가 닿아 있으면 눌린 것처럼 보인다. */
    .amber-header { padding-bottom: 1.25rem; }
}

/* ── 새 판이 나왔습니다 ────────────────────────────────────────
   안드로이드에서만 나오는 띠. 까닭은 IAppUpdate 에 적어 두었다.

   ★ 붉지 않다. 잘못된 일이 아니라 좋은 일을 알리는 자리라서, 오이색 쪽으로
     아주 옅게 눕힌 면에 왼쪽 띠 하나만 세운다. 경고처럼 그리면 사진첩을
     열자마자 무언가 잘못된 줄 아신다.

   ★ 창으로 띄우지 않는다. 사진을 보러 오신 길을 막을 만한 일이 아니다. */
.amber-newver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--oi);
    border-radius: 0.75rem;
    background: var(--surface);
}

/* 글 묶음이 남는 자리를 다 먹고, 단추는 제 너비만 갖는다. */
.amber-newver .say {
    flex: 1 1 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.amber-newver .say strong { font-size: 1rem; }

/* 무엇이 바뀌었는지. 한 줄이지만 좁은 화면에서는 접히게 둔다 — 잘라 버리면
   그 한 줄을 적어 둔 뜻이 사라진다. */
.amber-newver .what {
    font-size: 0.95rem;
    color: var(--ink-2);
}

.amber-newver .mine {
    font-size: 0.85rem;
    color: var(--ink-2);
}

/* 브라우저를 열지 못한 경우. 주소를 그대로 보여 드려야 하므로 줄이 길다 —
   좁은 화면에서 넘치지 않게 어디서든 끊어지게 둔다. */
.amber-newver .stuck {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--danger);
}

.amber-newver .stuck code {
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    color: var(--ink);
}

.amber-newver .acts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

/* 단추는 글자만큼만. 여기서는 화면 너비를 다 쓰는 단추가 아니다. */
.amber-newver .acts .primary {
    width: auto;
    min-height: 2.6rem;
    padding: 0 1.2rem;
    border-radius: 999px;
    font-size: 1rem;
}

.amber-newver .acts .link {
    min-height: 2.6rem;
    padding: 0 0.5rem;
    color: var(--ink-2);
    font-size: 0.95rem;
}

/* 좁은 화면에서는 단추가 아래로 내려가 오른쪽에 붙는다. */
@media (max-width: 26rem) {
    .amber-newver .acts { width: 100%; justify-content: flex-end; }
}

/* ── 사진 피드 ─────────────────────────────────────────────────
   찍은 날로 묶어 흘러내린다.

   ★ 머리글이 없으면 사진 수백 장이 한 덩어리로 붙어, 어디까지가 어제이고
     어디부터가 지난 여름인지 알 수가 없다. 가족 사진첩에서 찾는 것은
     대개 "그때 그 날"이다. */
.amber-day { padding-top: 0.5rem; }

.amber-day h2 {
    /* 스크롤을 내려도 지금 보고 있는 날이 위에 붙어 있는다. 사진 사이를 한참
       내려가다 보면 어느 날을 보고 있는지 잊는다. */
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 0.6rem 0 0.5rem;
    background: var(--bg);
    color: var(--ink-2);
    font-size: 1rem;
    font-weight: 700;
}

.amber-timeline {
    display: grid;
    /* ★ 한 값으로는 양쪽을 만족시킬 수 없다.
         160px 이면 넓은 화면에서 여덟 칸이 되어 우표만 해지고,
         200px 이면 폰에서 한 줄에 하나만 들어가 앨범이 아니라 목록이 된다.
         그래서 폰에서는 150px, 넓은 화면에서는 200px 로 나눠 잡는다.

         ★ minmax(min(45%, 200px), 1fr) 로 한 줄에 끝내려 했는데 안 됐다 —
           auto-fill 안에서는 그 계산이 무효가 되어 규칙째 버려진다.
           눈으로 확인하지 않았으면 모르고 넘어갈 뻔했다. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    padding: 0.25rem 0 1.5rem;
}

/* 폰을 벗어나면 사진을 더 크게 본다. */
@media (min-width: 40rem) {
    .amber-timeline {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* 타일은 단추다 — 눌러서 크게 볼 수 있어야 한다. div 에 onclick 만 걸면
   키보드로 못 열고, 읽어 주는 기능도 누를 것이 있다는 사실을 알리지 못한다.
   그래서 button 으로 두고 단추의 기본 생김새만 벗긴다. */
.amber-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
    border: none;
    border-radius: 0.6rem;
    /* 사진이 오기 전의 자리. 종이보다 조금 진한 회색이라야 빈 칸으로 보인다. */
    background: #eceee7;
    cursor: pointer;
}

/* 눌릴 수 있다는 것을 손이 먼저 알아채도록. 마우스가 없는 기기에서는
   hover 가 없으므로 :focus-visible 도 함께 둔다. */
.amber-tile:hover img { transform: scale(1.03); }
.amber-tile:focus-visible { outline: 3px solid var(--oi); outline-offset: 2px; }

/* 날짜가 사진 위에 올라간다. 밝은 사진이면 흰 글씨가 사라지므로
   아래쪽만 어둡게 덮어 준다 — 사진을 가리지 않을 만큼만. */
.amber-tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
}

.amber-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.15s ease-out;
}

/* 날짜 대신 <누가 올렸는지>를 얹는다. 날짜는 이제 머리글이 말해 주고,
   같은 날 사진 사이에서 궁금한 것은 "이건 누가 찍었지"다.

   ★ ::after 덮개보다 위에 있어야 한다 — 아니면 덮개가 글씨를 덮는다. */
.amber-tile .who {
    position: absolute;
    z-index: 1;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.45rem;
    overflow: hidden;
    color: #fff;
    font-size: 0.875rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ── 크게 보기 ─────────────────────────────────────────────────
   그 자리에 띄운다. 새 화면으로 넘기면 돌아왔을 때 목록이 맨 위로 올라가,
   스무 장쯤 내려간 자리에서 한 장 열어 본 사람이 그 자리를 잃는다. */
/* ★ 사진을 크게 보는 동안 뒤의 목록이 굴러가지 않게 못 박는다.
     예전에는 위로 밀면 사진은 그대로인데 <뒤의 타임라인>이 굴러가서, 닫고
     보면 엉뚱한 자리에 있었다 — 폐하께서 "오류 동작으로 인식된다" 하셨다
     (2026-08-20). 그 말이 맞다.

   ★ :has() 로 한다. 자바스크립트를 쓰면 화면을 닫는 길이 여럿(닫기 단추·바깥
     누르기·뒤로 가기)이라 어느 하나에서 풀어 주는 것을 빠뜨리고, 그때 페이지가
     영영 굴러가지 않는 상태로 남는다. CSS 는 요소가 사라지면 저절로 풀린다. */
html:has(.amber-viewer) { overflow: hidden; }

.amber-viewer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;

    /* 창 안에서 끝까지 굴린 뒤의 힘이 뒤 페이지로 넘어가지 않게 한다.
       :has() 를 못 알아듣는 낡은 브라우저에서도 이것이 절반은 막아 준다. */
    overscroll-behavior: contain;
    /* 사진을 보는 동안만은 어둡게 둔다. 밝은 바탕에 사진을 얹으면
       흰 여백이 사진의 밝기를 잡아먹는다.

       ★ 거의 불투명하게. 반투명으로 두었더니 뒤의 타일이 희미하게 비쳐
         사진 위에 얼룩처럼 보였다. */
    background: #0b0c0a;
}

/* ★ 좁은 화면에서는 사진 아래로, 넓은 화면에서는 사진 오른쪽으로 —
     폐하께서 그렇게 요청하셨다. 화면(razor)은 하나로 두고 여기서만 나눈다.
     화면을 둘로 만들면 한쪽만 고치는 날이 오고, 그날 앱과 웹이 서로 달라진다. */
.amber-viewer .frame {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: min(100%, 60rem);
    max-height: 100%;
    min-height: 0;
}

/* ★★ flex: none 이 이 칸의 생명이다.
     기본값(flex: 0 1 auto)이면 사진이 <줄어드는 쪽>이 된다. 댓글이 자리를
     요구하면 flexbox 가 만만한 사진부터 누르는데, 사진에는 최소 높이가 없어서
     <끝까지 눌린다>. 폐하께서 "댓글이 많아지면 사진이 위로 밀려 올라간다"
     하신 것이 이것이었다(2026-08-21) — 실제로 재어 보니 최대 406px 로 둔
     사진이 <53px> 로 짜부라져 있었다.

     사진은 max-height(50dvh)가 이미 위를 막고 있으니, 아래로 줄어들 이유가
     없다. 남은 자리를 갖는 쪽은 말 칸이고, 그 안에서 목록이 흐른다. */
.amber-viewer .shot {
    display: flex;
    flex: none;
    justify-content: center;
    min-height: 0;

    /* 넘김 화살표가 사진 위에 앉을 자리를 만든다. */
    position: relative;
}

/* ── 이전·다음 사진 ────────────────────────────────────────────
   2026-08-22 폐하 요청으로 옆으로 쓸어 넘기게 했다. 화살표를 함께 두는 까닭은
   <쓸 수 있다는 것을 아무도 눈치채지 못하기> 때문이다 — 알약 줄에서 같은 것을
   배웠다. 컴퓨터에는 손가락이 없으니 거기서는 이것이 유일한 길이기도 하다.

   ★ 갈 곳이 없는 쪽은 <내지 않는다>(화면이 만들지 않는다). 흐리게 두면 눌러도
     아무 일이 없어 고장으로 느껴진다. */
.amber-viewer .shot .step {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;

    width: 2.6rem;
    height: 2.6rem;
    min-height: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    /* 사진이 밝든 어둡든 보이게. 검은 알약이 가장 안전하다. */
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
}

/* 「소리 켜기」 — 영상이 소리 없이 시작한다는 것을 알려 주는 자리
   (2026-08-23 폐하 요청). 말해 주지 않으면 「소리가 안 나는 영상」으로 아신다.

   ★ 왼쪽 위에 둔다. 아래는 재생 막대가 쓰고, 오른쪽은 넘김 화살표가 쓴다. */
.amber-viewer .shot .hush {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 4;

    width: auto;
    min-height: 2.2rem;
    padding: 0 0.85rem;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}

.amber-viewer .shot .hush:hover { background: rgba(0, 0, 0, 0.8); }

.amber-viewer .shot .step.back { left: 0.5rem; }
.amber-viewer .shot .step.on { right: 0.5rem; }

.amber-viewer .shot .step svg { width: 1.3rem; height: 1.3rem; }

.amber-viewer .shot .step:hover { background: rgba(0, 0, 0, 0.7); }

.amber-viewer img,
.amber-viewer video {
    min-height: 0;
    max-width: 100%;
    /* 좁은 화면에서는 사진이 위쪽 절반을 넘지 않게 둔다.
       넘기면 아래의 댓글이 화면 밖으로 밀려 보이지 않는다. */
    max-height: 50dvh;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* 말이 오가는 칸. 사진이 자기 높이를 지키고 <남은 자리를 이것이 갖는다>.

   ★★ 흐르는 것이 <이 칸 전체>다(2026-08-21 폐하 요청). 예전에는 안쪽의
     .thread 만 흘렀는데, 그러면 공개범위·올린 사람·메모가 늘 자리를 차지해
     남는 자리가 좁았다 — 폐하께서 "댓글이 스크롤되는 저 공간이 너무 좁아서
     답답한 느낌" 이라 하셨다. 사진을 뺀 나머지가 다 올라가면 댓글이 화면
     아래쪽 전부를 쓴다.

   ★ 사진은 함께 올라가지 않는다. 사진을 보면서 말을 읽는 것이 이 화면의
     뜻이고, 사진이 사라지면 무엇에 대한 말인지 알 수 없다. */
/* 말 칸과 한마디 단추를 담는 칸. 좁은 화면에서는 사진 아래, 넓은 화면에서는
   사진 오른쪽에 선다 — 그 나눔은 아래 미디어 규칙이 한다. */
.amber-viewer .side {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 0;
}

.amber-viewer .talk {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 0;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── 올린 사람 ─────────────────────────────────────────────────
   프로필 사진을 이름 앞에 둔다(2026-08-20 폐하 요청). 가운데 정렬이었던 것을
   왼쪽으로 옮긴다 — 동그라미가 앞에 서면 가운데 정렬은 어색하다. */
.amber-viewer .by {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
}

.amber-viewer .by .who { flex: 1; min-width: 0; }

/* ── 어떻게 지울까 ─────────────────────────────────────────────
   두 갈래를 나란히 두고 <무엇이 다른지> 함께 적는다(2026-08-20 폐하 결정).
   설명 없이 단추만 두면 어느 쪽이 되돌릴 수 있는지 모르고 누른다. */
.amber-viewer .drop-ask {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.amber-viewer .drop-ask .head {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

/* 고르는 단추. 굵은 제목 아래 설명이 붙는 모양이라 왼쪽 맞춤이다. */
.amber-viewer .drop-ask .pick {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    text-align: left;
    color: #fff;
}

.amber-viewer .drop-ask .pick strong { display: block; font-size: 0.95rem; }

.amber-viewer .drop-ask .pick span {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.55;
}

.amber-viewer .drop-ask .pick span strong {
    display: inline;
    color: #fff;
    font-size: inherit;
}

/* 휴지통 쪽을 눈에 띄게 둔다 — 되돌릴 수 있는 길이 기본이라야 한다. */
.amber-viewer .drop-ask .pick.keep {
    border: 1px solid var(--oi-lit);
    background: color-mix(in srgb, var(--oi) 30%, transparent);
}

/* 즉시 지우기는 붉게. 되돌릴 수 없는 일이라는 것이 색으로도 보여야 한다. */
.amber-viewer .drop-ask .pick.gone {
    border: 1px solid color-mix(in srgb, var(--danger) 70%, #fff 30%);
    background: color-mix(in srgb, var(--danger) 30%, transparent);
}

.amber-viewer .drop-ask .link {
    width: auto;
    align-self: flex-start;
    min-height: 2.2rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.amber-viewer .drop-ask .amber-status { margin: 0; color: rgba(255, 255, 255, 0.75); }
.amber-viewer .by .who strong { display: block; font-size: 1rem; }

.amber-viewer .by .when {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* ── 올린 사람이 남기는 메모 ───────────────────────────────────
   댓글 위에 앉는다. 폐하께서 "메모 아래 댓글이 달리면 자연스럽겠다" 하셨다. */
.amber-viewer .memo {
    flex: none;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--oi-lit);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* 아직 메모가 없을 때. 남길 문만 낸다 — 빈 칸을 그려 두면 무엇인지 모른다. */
.amber-viewer .memo.empty {
    padding: 0;
    border-left: none;
    background: none;
}

.amber-viewer .memo .link {
    width: auto;
    min-height: auto;
    padding: 0;
    margin-left: 0.5rem;
    color: var(--oi-lit);
    font-size: 0.85rem;
}

.amber-viewer .memo.empty .link { margin-left: 0; }

.amber-viewer .memo-edit {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.5rem;
}

.amber-viewer .memo-edit textarea {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.amber-viewer .memo-edit textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.amber-viewer .memo-edit .say { display: flex; align-items: center; gap: 0.6rem; }
.amber-viewer .memo-edit .say .primary { width: auto; flex: none; padding: 0 1.1rem; }
.amber-viewer .memo-edit .say .link { width: auto; color: rgba(255, 255, 255, 0.75); }

/* ── 어디까지 보이는가 ────────────────────────────────────────

   ★ 늘 보이게 둔다. 접어 두면 자기 사진이 어디까지 나가 있는지 모르는 채로
     지내게 된다 — 폐하 댁 사정에서는 그것이 가장 위험하다. */
/* ★ 올린 사람 <위>에, 작게, 왼쪽으로 붙인다(2026-08-20 폐하 지적).
     예전에는 이름 아래 가운데에 큰 알약으로 앉고 '바꾸기' 가 또 한 줄을
     먹어서, 사진 아래 세 줄이 표 하나에 쓰였다. */
.amber-viewer .scope {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.amber-viewer .scope .link {
    width: auto;
    min-height: auto;
    padding: 0;
    font-size: 0.8rem;
}

/* ★ 지우기는 이 줄의 <오른쪽 끝>으로 밀어 둔다(2026-08-23 폐하 지적).

   같은 줄이라도 <범위 바꾸기>와 <지우기>는 무게가 다르다. 하나는
   다시 돌릴 수 있고 하나는 휴지통으로 간다. 붙여 두면 손가락이 미끄러진다 —
   둘 사이를 비워 놓는 것이 그 자체로 막음이다. */
.amber-viewer .scope .drop.link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.6);
}

.amber-viewer .scope .drop.link svg { flex: none; width: 1rem; height: 1rem; }

/* ★ 오이색을 입힌다. 예전에는 흰색 25%·85% 투명만 써서, 어두운 바탕에서
     흐릿하고 우리 색과도 무관했다(2026-08-20 폐하 지적).

     테두리를 연두로, 바탕을 오이색 옅게 깔고 글씨는 흰색 그대로 — 어두운
     화면에서 튀지 않으면서 <우리 것>으로 읽힌다. 꽉 채운 연두는 사진 옆에서
     너무 세다. */
/* 작게. 사진 아래에서 눈에 먼저 드는 것은 사진이지 이 표가 아니다. */
.amber-viewer .scope .mark {
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--oi-lit);
    border-radius: 999px;
    background: color-mix(in srgb, var(--oi) 40%, transparent);
    color: #fff;
    font-size: 0.75rem;
    white-space: nowrap;
}

.amber-viewer .scope-edit {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.amber-viewer .scope-edit label { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; }
.amber-viewer .scope-edit .hint { margin: 0; color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; }
.amber-viewer .scope-edit .hint a { color: #cfe6b4; }

/* 어두운 바탕 위의 고르는 칸. 밝은 바탕의 기본값을 그대로 두면 글씨가 안 보인다. */
.amber-viewer .scope-edit select {
    min-height: var(--touch);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.amber-viewer .scope-edit option { background: #23301c; color: #fff; }

.amber-viewer .scope-edit .check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--touch);
    color: #fff;
    font-size: 0.9rem;
}

.amber-viewer .scope-edit .check input[type="checkbox"] { min-height: 0; margin: 0; }

/* 단추 두 개가 나란히. 위 한마디 칸과 같은 생김새를 쓴다. */
.amber-viewer .scope-edit .say { align-items: center; }
.amber-viewer .scope-edit .say .link { color: rgba(255, 255, 255, 0.75); }

/* 오간 말들.

   ★ 스스로 흐르지 않는다 — 흐르는 것은 부모(.talk)다. 여기에도 overflow 를
     두면 <창 안의 창>이 되어, 손가락이 어느 것을 굴리는지 사람이 알 수 없다.
     2026-08-21 에 이 칸만 흐르던 것을 부모로 옮겼다. */
.amber-viewer .thread {
    flex: none;
}

.amber-viewer .thread .none {
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

/* 프로필 사진이 왼쪽, 글이 오른쪽. 사진이 이름과 글월 둘 다에 걸쳐 서야
   "누가 썼는지" 가 한눈에 들어온다(2026-08-20 폐하 요청). */
.amber-viewer .said {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.amber-viewer .said:first-child { border-top: none; }

/* 글 쪽이 남는 자리를 다 먹는다. min-width 를 0 으로 두지 않으면 긴 말이
   동그라미를 밀어낸다. */
.amber-viewer .said > .body { flex: 1; min-width: 0; }

.amber-viewer .said .head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.amber-viewer .said .when {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

.amber-viewer .said .link {
    width: auto;
    min-height: auto;
    margin-left: auto;
    padding: 0;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

.amber-viewer .said p {
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
    /* 줄바꿈을 적으신 그대로 보여 준다. 한 줄로 붙이면 주소나 목록이 뭉개진다. */
    white-space: pre-wrap;
}

/* 적는 칸. 언제나 맨 아래에 붙어 있어야 한다 — 말이 길어져도 찾지 않으신다. */
/* 늘 놓여 있던 입력칸 대신 서는 단추(2026-08-21 폐하 요청).

   ★★ <떠 있다>(2026-08-21 폐하 추가 요청). 줄로 놓여 있으면 47px 를 늘
     차지하는데, 떠 있으면 그 자리도 댓글에게 간다 — 폐하께서 "오른쪽에
     플로팅으로 떠 있으면 댓글목록이 더 시원해 지지 않을까" 하셨다.

   ★ 대신 마지막 댓글을 가린다. 그래서 흐르는 칸 아래에 그만큼 빈자리를
     둔다(.talk 의 padding-bottom) — 그것이 없으면 맨 아래 한마디를
     영영 다 읽을 수 없다.

   ★ 오른쪽에 둔다. 왼쪽에 두면 위의 댓글 얼굴들과 한 줄로 보여서
     "누가 쓴 말" 처럼 읽힌다. */
.amber-viewer .say-open {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;

    width: auto;
    min-height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid var(--oi-lit);
    border-radius: 999px;
    background: color-mix(in srgb, var(--oi) 88%, #000);
    color: #fff;
    font-size: 0.95rem;

    /* 사진 위에 떠 있는 것이라 떠 있는 것처럼 보여야 한다. */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);

    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* 떠 있는 단추가 마지막 한마디를 가리지 않게.

   ★ 단추가 <있을 때만> 둔다. 입력칸을 열면 단추가 사라지므로, 늘 두면
     입력칸 위에 헛공간이 남는다. :has() 는 이 파일이 이미 쓰고 있다. */
.amber-viewer .side:has(> .say-open) .talk { padding-bottom: 3.6rem; }

.amber-viewer .say-open:hover {
    border-color: var(--oi-lit);
    background: color-mix(in srgb, var(--oi) 30%, transparent);
    color: #fff;
}

.amber-viewer .say-open svg { flex: none; width: 1.05rem; height: 1.05rem; }

.amber-viewer .say {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
}

/* 닫기 ✕. 쓰던 것을 그만두는 자리다. */
.amber-viewer .say > .link {
    flex: none;
    width: auto;
    min-height: 0;
    padding: 0 0.3rem;
    color: rgba(255, 255, 255, 0.6);
}

/* 내 얼굴. 입력칸 앞에 서서 "내가 쓰고 있다" 를 보인다(2026-08-21 폐하 요청).

   ★ 위의 댓글에 붙는 것보다 작게 둔다. 그것들은 <누가 말했나>를 알리는 것이고
     이것은 <내가 쓴다>는 표시라, 같은 크기면 입력칸을 그만큼 좁힌다. */
.amber-viewer .say > .amber-avatar {
    flex: none;
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
}

.amber-viewer .say input {
    flex: 1;
    min-width: 0;
    min-height: var(--touch);
    padding: 0 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
}

.amber-viewer .say input::placeholder { color: rgba(255, 255, 255, 0.45); }

.amber-viewer .say .primary { width: auto; flex: none; padding: 0 1.1rem; }

.amber-viewer .error { color: #ffb4a8; }

/* 넓은 화면 — 사진 왼쪽, 말은 오른쪽. */
@media (min-width: 60rem) {
    .amber-viewer .frame {
        flex-direction: row;
        align-items: stretch;
        max-width: min(100%, 78rem);
    }

    .amber-viewer .shot {
        flex: 1;
        min-width: 0;
        align-items: center;
    }

    .amber-viewer img,
    .amber-viewer video {
        /* 옆으로 놓이면 세로를 다 쓸 수 있다. */
        max-height: calc(100dvh - 2rem);
    }

    /* ★ 규칙이 .side 에 붙는다(.talk 이 아니다). 폭과 경계선은 <칸>의 것이고,
         .talk 은 그 칸 안에서 흐르는 부분일 뿐이다. */
    .amber-viewer .side {
        flex: none;
        width: 24rem;
        max-height: calc(100dvh - 2rem);
        padding-left: 1rem;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* 오른쪽은 닫기 단추에게 비켜 준다 — 비켜 주지 않으면 공개 범위 표 위에
       ✕ 가 얹힌다. 예전에는 .caption 이 이 자리였고, 이제 맨 위에 오는 것이
       공개 범위 줄이다. */
    .amber-viewer .scope { padding-right: 3rem; }
}

.amber-viewer .close {
    position: absolute;
    top: max(0.75rem, env(safe-area-inset-top));
    right: 0.75rem;
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

/* 수가 붙은 타일에서는 이름이 그 자리를 비켜 준다. 비켜 주지 않으면 긴 이름이
   수 밑으로 파고든다. :has 를 모르는 아주 옛 브라우저에서는 이 줄만 무시되고
   나머지는 그대로 보인다. */
.amber-tile:has(.talked) .who { right: 3.2rem; }

/* 말이 오간 사진에 붙는 수. 오른쪽 아래에 두어 왼쪽의 이름과 부딪히지 않게 한다. */
.amber-tile .talked {
    position: absolute;
    z-index: 1;
    right: 0.5rem;
    bottom: 0.45rem;
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.amber-tile .play::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.75rem 0 0.75rem 1.25rem;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

/* ── 비어 있을 때 ────────────────────────────────────────────── */

.amber-empty {
    max-width: 26rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    text-align: center;
}

.amber-empty h2 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.amber-empty p {
    margin: 0 0 1.5rem;
    color: var(--ink-2);
}

.amber-status {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--ink-2);
}

/* ── 잘 됐다고 알리는 글 ──────────────────────────────────────
   ★ 이 셋은 화면이 부르고 있었는데 규칙이 아예 없었다. 2026-08-18 에
     ClassNameTests 를 가족 앱에도 붙이고서야 드러났다 — 관리자 콘솔에는 그 시험이
     있었고 여기엔 없어서, 세 자리가 조용히 아무 모양도 없이 나오고 있었다.

     없는 이름을 부르는 것은 오류가 아니다. 그냥 아무 일도 일어나지 않는다. */

/* 인증번호를 보냈다는 알림(EmailCodeStep). 실패(.error)와 눈으로 갈라져야 한다 —
   둘이 같은 자리에 번갈아 나오므로, 같아 보이면 보낸 것인지 틀린 것인지 모른다. */
.notice {
    color: var(--oi);
    font-weight: 700;
}

/* 신고를 잘 받았다는 알림(Report). .amber-status 위에 색만 얹는다. */
.amber-status.ok {
    color: var(--oi);
    font-weight: 700;
}

/* 인증번호를 적는 칸(ForgotPassword). 숫자가 자리를 맞춰 서야 읽기 쉽고,
   글자 사이를 벌려 두면 여섯 자리를 눈으로 세기 쉽다. */
.code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.25em;
}

/* ── 올리기 ──────────────────────────────────────────────────── */

.amber-upload {
    padding: 1.25rem 0 0;
}

/* 여는 단추. 누르면 판이 올라오고, 파일 창은 그 안에서 연다 —
   무엇을 고를 수 있는지 알기 전에 창이 열리는 것은 순서가 뒤집힌 것이다
   (2026-08-20 폐하 요청). */
/* ★ 폭을 꽉 채운 얇은 점선 띠였다. 1400px 짜리 선 하나에 가운데 작은 글씨라
     자리표시자처럼 보였다. 높이를 주고 모서리를 둥글려 '놓는 자리' 로 만든다. */
.amber-upload .picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 5rem;
    padding: 0 1.25rem;
    border: 2px dashed var(--line);
    border-radius: 0.75rem;
    cursor: pointer;
    color: var(--oi);
    font-weight: 700;
}

.amber-upload .picker svg { flex: none; width: 1.3rem; height: 1.3rem; }

.amber-upload .picker:hover { border-color: var(--oi); }

.amber-upload .picker.busy {
    cursor: default;
    opacity: 0.7;
}

/* ── 올리기 판 ─────────────────────────────────────────────────
   고르기 전에 한도와 영상 처리를 말해 주는 자리. */
.amber-upload .upload-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.6rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

/* 판 안의 <실제로 파일 창을 여는> 자리. 여는 단추와 생김새를 갈라 둔다 —
   둘이 똑같이 보이면 어느 것을 눌러야 할지 모른다. */
.amber-upload .upload-panel .pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--touch);
    padding: 0 1.2rem;
    border: 1px solid var(--oi);
    border-radius: 8px;
    background: var(--oi);
    color: var(--on-oi);
    font-weight: 700;
    cursor: pointer;
}

.amber-upload .upload-panel .pick svg { flex: none; width: 1.2rem; height: 1.2rem; }

.amber-upload .upload-panel .pick input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ★★ 올리는 동안 고르는 칸을 <감춘다 — 지우지 않는다>.

     화면에서 지우면(@if 의 else 로 빼면) <input type="file"> 이 DOM 에서 빠지고,
     브라우저는 그때 <고른 파일을 놓아 버린다>. 그러면 올리는 도중에 파일이
     사라져 "파일을 읽지 못했습니다" 가 된다 — 2026-08-22 폐하 아이폰.

     display:none 은 그리기만 멈출 뿐 DOM 에 남으므로 파일이 그대로 있다.
     이 한 줄이 그 차이다. 자리를 비우는 다른 방법(visibility·opacity)을 쓰면
     빈 자리가 남아 진행 띠 아래가 벌어진다. */
.amber-upload .upload-panel .pick.away { display: none; }

/* ── 끌어다 놓기 (2026-08-23 폐하 요청) ─────────────────────────
   컴퓨터에서 파일 창을 열면 사진이 어느 폴더에 있는지 기억해 내야 한다.
   사진첩 창을 옆에 띄워 두고 끌어다 놓는 편이 훨씬 쉽다.

   ★ 안내는 넓은 화면에서만 낸다. 폰에는 끌어 올 창이 없고, 좁은 화면에서
     두 줄을 더 먹는다. 놓는 것을 받는 일 자체는 어디서나 걸어 두어도 해가
     없으므로 화면을 가려 끄지는 않는다. */
.amber-upload .upload-panel .drop-hint { display: none; }

@media (min-width: 40rem) {
    .amber-upload .upload-panel .drop-hint {
        display: block;
        margin: 0;
        padding: 0.85rem 1rem;
        border: 2px dashed var(--line);
        border-radius: 0.75rem;
        color: var(--ink-2);
        font-size: 0.92rem;
        text-align: center;
    }
}

/* 끌고 들어온 동안. <여기 놓으면 된다>를 몸으로 알려 주는 것이라 색을 뚜렷하게. */
.amber-upload .upload-panel.over { border-color: var(--oi); }

.amber-upload .upload-panel.over .drop-hint {
    border-color: var(--oi);
    background: color-mix(in srgb, var(--oi) 8%, transparent);
    color: var(--oi);
}

/* 무엇을 몇 개까지. 줄로 나누어 두면 한 문단으로 뭉쳐 있을 때보다 훨씬 읽힌다. */
.amber-upload .rules {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink-2);
    font-size: 0.92rem;
    line-height: 1.65;
}

.amber-upload .rules li + li { margin-top: 0.2rem; }
.amber-upload .rules .quiet { margin-top: 0.5rem; color: var(--ink-2); }

/* ── 진행 띠 ───────────────────────────────────────────────────
   ★ 수로만 알려 주면 <멈춘 것>과 <느린 것>을 구별할 수 없다. 띠가 자라는 것이
     보이면 기다릴 수 있다(2026-08-20 폐하 요청). */
.amber-upload .progress {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.amber-upload .progress .bar {
    height: 100%;
    border-radius: 999px;
    background: var(--oi);
    transition: width 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .amber-upload .progress .bar { transition: none; }
}

.amber-upload .now {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.92rem;
}

/* 지금 다루는 파일 이름. 길면 줄이 밀리므로 한 줄로 자른다. */
.amber-upload .now .file {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

/* 무엇을 몇 개까지 올릴 수 있는가. 단추 바로 아래에 붙어 있어야
   누르기 <전에> 읽힌다 — 눌러 보고 아는 것은 안내가 아니다. */
.amber-upload .upload-hint {
    margin: 0.5rem 0 0;
    color: var(--ink-2);
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
}

/* ── 사진이 생기면 오른쪽 아래로 ───────────────────────────────
   2026-08-20 폐하 요청. 점선 상자가 첫 화면의 절반을 차지해 사진 보는 것을
   방해했다. 사진이 없을 때는 그대로 크게 두고(그때는 그것이 유일한 할 일이다),
   생기면 손 닿는 자리에 늘 떠 있는 단추로 바꾼다.

   ★ 아이콘만 두지 않는다. 조부모께서는 그림만으로는 무엇인지 모르신다 —
     글씨를 함께 둔다. */
.amber-upload-corner {
    position: fixed;
    right: 1rem;
    z-index: 40;

    /* 폰의 아래 제스처 막대를 피한다. env() 를 모르는 브라우저에서는 0 이 되어
       1rem 만 남으므로 어디서나 안전하다. */
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.amber-upload-corner .amber-upload { padding: 0; }

/* 안내문은 접어 둔다 — 늘 떠 있는 단추 옆에 두 줄을 붙여 두면 사진을 가린다.
   한도는 고르는 창에서 걸러지고, 넘으면 그때 알려 준다. */
.amber-upload-corner .upload-hint { display: none; }

.amber-upload-corner .picker {
    min-height: 3.5rem;
    padding: 0 1.4rem;
    border: 1px solid var(--oi);
    border-radius: 999px;
    background: var(--oi);
    color: var(--on-oi);

    /* 사진 위에 떠 있으므로 그림자로 띄워 준다 — 없으면 사진에 박힌 것처럼 보인다. */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.amber-upload-corner .picker:hover { border-color: var(--oi); filter: brightness(1.08); }

/* 올리는 중에도 무슨 일이 벌어지는지 보여야 한다. 목록은 단추 위로 띄운다. */
.amber-upload-corner .upload-log {
    position: absolute;
    right: 0;
    bottom: 4.25rem;
    width: min(20rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    list-style: none;
    font-size: 0.9rem;
}

/* 사진이 없을 때. 예전 그대로 크게 둔다. */
/* 자리만 잡는다 — 생김새는 .amber-upload 가 갖는다.

   ★ 아래와 띄운다. 이것 뒤에 알약 줄이 올 수 있는데(구성원이 둘 이상인 새 집),
     여백이 없으면 점선 상자에 알약이 달라붙는다 — 폐하께서 지적하신 자리다
     (2026-08-22). 간격을 옆 것에 기대어 두지 않는다. */
.amber-upload-open { margin-bottom: 1.5rem; }

/* ── 지운 뒤 되돌리는 띠 ───────────────────────────────────────
   30일 안에는 되돌릴 수 있다는 것을 말해 주는 자리. 아무 말이 없으면
   "영영 없어졌다" 로 아신다. */
.amber-undo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--oi);
    border-radius: 0.75rem;
    background: var(--surface);
    font-size: 0.95rem;
}

.amber-undo .acts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex: none;
}

.amber-undo .primary {
    width: auto;
    min-height: 2.5rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-size: 0.95rem;
}

.amber-undo .link {
    width: auto;
    min-height: 2.5rem;
    padding: 0 0.5rem;
    color: var(--ink-2);
    font-size: 0.95rem;
}

/* 즉시 파기한 뒤의 띠. 되돌릴 수 없다는 것이 색으로도 보여야 한다. */
.amber-undo.gone { border-left-color: var(--danger); }

/* ── 아래에 닿으면 더 받는 자리 ────────────────────────────────
   이 칸이 화면에 들어오면 amber.js 가 알려 주고, 다음 쪽이 이어 붙는다. */
.amber-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0 2.5rem;
}

.amber-more .amber-status { margin: 0; }

/* ── 프로필 사진 동그라미 ──────────────────────────────────────
   댓글·구성원 목록·내 계정이 같은 것을 쓴다. 사진이 없는 분은 이름 첫 글자를
   그린다 — 빈 동그라미는 고장으로 보인다(2026-08-20 폐하 요청).

   ★ flex: none 이 중요하다. 없으면 옆의 글이 길 때 동그라미가 찌그러져
     타원이 된다. */
.amber-avatar {
    flex: none;

    /* ★★ 빗장이다. 까닭은 <부트스트랩>이었다 — 2026-08-23 에 뿌리를 찾았다.

       2026-08-22 에 알림 목록의 동그라미가 좁은 타원으로 나왔다. 상자는 완전한
       정사각형이고 파일도 정사각형인데, 이 <img> 의 계산된 안쪽 여백이
       <padding: 0 13.5px> 였다. box-sizing 이 border-box 라 속살이 13px 만 남고
       그림은 거기에만 그려진 것이다.

       그날은 규칙을 못 찾았다. 다음 날 폰의 크롬에 붙어 CSS.getMatchedStylesForNode
       로 물으니 한 줄에 나왔다:

           .row > *  { padding-left/right: calc(var(--bs-gutter-x) * .5) }

       ★ 부트스트랩 격자다. 우리 알림 줄이 class="row" 를 쓰고 있었고, 그것이
         부트스트랩의 .row 와 <이름이 부딪혔다>. --bs-gutter-x 기본값 1.5rem 의
         절반 = 0.75rem = 13.5px(폐하 브라우저 기본 글씨 18px).

         그날 나는 "값이 그 줄의 gap: 0.75rem 과 같다" 고 적었는데 <우연의 일치>였다.
         맞는 숫자를 보고 틀린 이야기를 지어낸 것이다.

       뿌리는 알림 줄의 이름을 .line 으로 바꿔 없앴다. 이 한 줄은 그래도 남긴다 —
       얼굴 동그라미는 여러 화면에서 쓰이고, 언젠가 누가 또 class="row" 를 쓴다. */
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
}

/* 첫 글자로 그리는 것. 색은 이름에서 짜내 화면이 style 로 넣어 준다. */
.amber-avatar.letter {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;

    /* 글씨가 한 글자라 자간이 붙어 보이지 않게 살짝 띄운다. */
    letter-spacing: 0.02em;
    user-select: none;
}

/* 큰 것 — '내 계정' 에서 바꾸는 자리. */
.amber-avatar.is-lg {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 2.2rem;
}

/* ── 프로필 사진 바꾸는 자리 ('내 계정') ─────────────────────── */
.amber-account .avatar-edit {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.amber-account .avatar-edit .acts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* 파일 고르개는 기본 모양이 제각각이라 라벨로 감싸 단추처럼 만든다. */
.amber-account .avatar-edit .pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    padding: 0 1.1rem;
    border: 1px solid var(--oi);
    border-radius: 8px;
    background: var(--oi);
    color: var(--on-oi);
    font-weight: 700;
    cursor: pointer;
}

.amber-account .avatar-edit .pick input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.amber-account .avatar-edit .pick.busy { opacity: 0.6; cursor: default; }

/* ── 방금 담긴 사진 ────────────────────────────────────────────
   타임라인은 <찍은 날>로 묶으므로, 어제 찍은 사진을 오늘 올리면 어제 칸으로
   들어간다. 이 표가 없으면 올린 분이 찾지 못한다(2026-08-20 폐하 지적). */
.amber-tile .fresh {
    position: absolute;
    z-index: 1;
    top: 0.45rem;
    left: 0.45rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--oi);
    color: var(--on-oi);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.amber-upload .upload-log {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
    font-size: 1rem;
    color: var(--ink-2);
}

/* ── 초대 ────────────────────────────────────────────────────── */

/* 링크는 길다. 줄바꿈을 허용하고 고르기 쉽게 둔다 —
   복사가 막힌 브라우저에서는 직접 골라야 한다. */
.invite-link {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    font-size: 1rem;
    word-break: break-all;
    user-select: all;
}

.amber-header .invite {
    width: auto;
    white-space: nowrap;
}

/* ── 도움말 ─────────────────────────────────────────────
   조부모가 읽는 글이다. 본문 폭을 좁게 잡아 한 줄이 길어지지 않게 한다. */

.amber-help { max-width: 40rem; margin: 0 auto; padding: 1rem 1.25rem 4rem; }

.amber-help h1 { margin: 0 0 0.25rem; }
.amber-help .lead { color: var(--dim, #666); margin: 0 0 2rem; }

/* 목차. 항목이 늘어나면 위에서 훑어 고를 수 있어야 한다. */
.help-toc { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin: 0 0 2.5rem; }
.help-toc a { font-size: 1rem; }

.help-item { margin: 0 0 2.5rem; }
.help-item h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
.help-item p { margin: 0 0 0.9rem; }
/* ── 알리기 ───────────────────────────────────────────────────
   쓰다가 겪은 것을 보내는 자리. 내 계정과 같은 폭·같은 판 모양을 쓴다 —
   화면마다 생김새가 다르면 같은 앱으로 느껴지지 않는다. */

.amber-report {
    max-width: 34rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.amber-report .lead { color: var(--ink-2); margin: 0 0 1.25rem; }

.amber-report .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1rem 0 2rem;
}

.amber-report .panel > *:last-child { margin-bottom: 0; }

/* 칸의 생김새는 이름 없는 규칙이 준다.
   ★ 예전에는 여기에 select 와 textarea 만 적어 두고 input 을 빠뜨렸다. 그래서
     '한 줄로 하면' 칸만 스무 글자 폭으로 쪼그라들어 이름표 옆에 붙어 섰다. */

/* ── 고장 신고에 붙인 것 ─────────────────────────────────────
   ★ 폐하 청 2026-08-27. 보내기 전에 고른 사진들의 목록이다.

   ★ 그림을 미리 보여 주지 않는다. 폰에서 10MB 짜리 갈무리 열 장을 그리면 그것만
     으로 화면이 버벅이고, 여기서 필요한 것은 <무엇을 골랐는지>와 <뺄 수 있는가>
     뿐이다. 이름만으로 충분하다. */
.amber-report .picked {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.amber-report .picked li {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

/* 이름이 길면 줄이 밀려 '빼기' 가 화면 밖으로 나간다. 이름만 줄인다. */
.amber-report .picked .what {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 0.92rem;
    color: var(--ink-2);
}

.amber-report .picked .link {
    flex: none;
    width: auto;
    min-height: auto;
    padding: 0.2rem 0;
    font-size: 0.85rem;
}

.amber-report h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; }

/* 내가 보낸 것. 목록이라기보다 "어디까지 왔나"를 훑는 자리라 표를 쓰지 않는다. */
.report-list { list-style: none; margin: 0; padding: 0; }

.report-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
}
.report-list li:last-child { border-bottom: none; }

.report-title { display: block; }
.report-meta { display: block; margin-top: 0.15rem; color: var(--ink-2); font-size: 0.9rem; }

/* ── 누가 올린 것을 볼까 ──────────────────────────────────────
   타임라인 위에 서는 줄. 앨범을 따로 만들지 않고 사람 이름으로 나눈다 —
   사진을 올릴 때 아무것도 더 고르지 않아도 저절로 나뉜다. */

/* ★ 접지 않고 <옆으로 흐른다>(2026-08-21 폐하 요청).
     사람이 늘면 아래로 접혀 사진이 그만큼 밀려 내려간다 — 가족이 여섯이면
     두 줄, 열이면 세 줄이다. 옆으로 흐르게 두면 몇 명이 늘어도 한 줄이다.

   ★ scroll-snap 으로 <하나씩> 넘어간다. 관성으로 미끄러지면 알약이 반쯤 잘린
     자리에서 멈춰, 무엇을 누르는지 헷갈린다.

   ★ 스크롤 막대는 감춘다. 손가락으로 미는 자리에 막대가 보이면 그것을 잡으려
     한다 — 폰에서는 잡을 수 없는 것이다. */
.amber-albums {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1.5rem;

    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    /* 옆으로 흐르니 끝에서 힘이 페이지로 넘어가지 않게 한다. */
    overscroll-behavior-x: contain;

    scrollbar-width: none;
}

.amber-albums::-webkit-scrollbar { display: none; }

.amber-albums button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-size: 1rem;
    scroll-snap-align: start;

    /* 이름이 길어도 알약이 접히지 않게 — 접히면 줄 높이가 들쭉날쭉해진다. */
    white-space: nowrap;
}

/* ── 옆으로 더 있다는 표시 ─────────────────────────────────────────

   ★ 폐하 말씀(2026-08-22): 옆으로 흐르게 해 놓고 <숨겨진 것이 있다는 것을
     알리지 않으면> 아무도 밀어 보지 않는다. 그러면 흐르게 만든 뜻이 없다.

   ★ 감싸는 자리를 기준으로 삼는다. 흐르는 칸 안에 두면 화살표가 내용과 함께
     굴러가 버린다. */
.amber-albums-wrap {
    position: relative;
    margin: 0 0 1.5rem;
}

/* 알약 줄 자신의 아래 여백은 감싸는 것이 갖는다 — 둘 다 주면 두 배가 된다. */
.amber-albums-wrap > .amber-albums { margin: 0; }

/* 가장자리 화살표.

   ★ 기본은 <보이지 않는다>. amber.js 가 can-left·can-right 를 붙일 때만 나온다 —
     늘 보이면 끝까지 밀었는데도 더 있다고 말하는 것이 되어 못 믿게 된다.

   ★ 종이색으로 그러데이션을 깔아 알약이 그 아래로 사라지는 것처럼 보이게 한다.
     화살표만 얹으면 알약 위에 겹쳐 앉아 글자를 가린다. */
.amber-albums-wrap > .edge {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;

    display: none;
    align-items: center;

    width: 3rem;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    color: var(--ink-2);
}

.amber-albums-wrap > .edge.right {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(to right, transparent, var(--bg) 62%);
}

.amber-albums-wrap > .edge.left {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(to left, transparent, var(--bg) 62%);
}

.amber-albums-wrap > .edge:hover { color: var(--oi); background-color: transparent; }

.amber-albums-wrap > .edge svg { flex: none; width: 1.5rem; height: 1.5rem; }

/* 여기가 이 장치의 심장이다 — 흐를 자리가 있을 때만 나온다. */
.amber-albums.can-right ~ .edge.right,
.amber-albums.can-left ~ .edge.left { display: flex; }

/* 넓은 화면에서는 옆으로 늘어뜨려 놓고 하나씩 눌러 보는 것이 편하다
   (2026-08-21 폐하 말씀). 접혀도 자리가 넉넉하니 흐를 필요가 없다.
   흐르지 않으니 화살표도 나올 일이 없다. */
@media (min-width: 60rem) {
    .amber-albums {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .amber-albums-wrap > .edge { display: none !important; }
}

/* 지금 보고 있는 것. 색만으로 알리지 않고 굵기도 함께 바꾼다. */
.amber-albums button.on {
    background: var(--oi);
    border-color: var(--oi);
    color: var(--on-oi);
    font-weight: 700;
}

.amber-albums .count { font-size: 0.85rem; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* 이은 집에서 온 사진의 집 이름. 올린 사람 이름 앞에 붙는다 —
   우리 집 것과 섞여 흐르므로 어느 집 것인지가 먼저 보여야 한다. */
.amber-tile .who .house {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.22);
    font-weight: 700;
}

/* 고를 것이 여럿인 자리(어느 집에 보일까). 줄 전체가 손가락 크기다.

   ★ 상자 자체의 폭은 손대지 않는다 — 이름 없는 규칙이 체크상자를 이미 빼 두었다.
     여기서 다시 정하면 그 규칙이 둘이 되고, 시험이 그것을 잡는다(실제로 잡혔다). */
.amber-report .check,
.amber-members .check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--touch);
    font-weight: 400;
}

/* 상자가 줄 높이만큼 늘어나지 않게만 눌러 준다. */
.amber-report .check input[type="checkbox"],
.amber-members .check input[type="checkbox"] { min-height: 0; margin: 0; }

/* ── 가입할 때 받는 동의 ──────────────────────────────────────

   ★ 상자와 글이 <윗줄에> 맞아야 한다. 가운데로 맞추면 글이 두 줄로 넘어갈 때
     상자가 그 가운데로 내려가서, 어느 줄의 상자인지 헷갈린다. */
.amber-agree { margin: 1rem 0 0.5rem; }

.amber-agree .check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: var(--touch);
    padding: 0.35rem 0;
    line-height: 1.5;
    cursor: pointer;
}

/* 손가락으로 누르는 자리라 기본 상자보다 키운다. 줄 높이만큼 늘어나지는 않게. */
.amber-agree .check input[type="checkbox"] {
    flex: none;
    min-height: 0;
    margin: 0.15rem 0 0;
    width: 1.15rem;
    height: 1.15rem;
}

.amber-agree .check em { color: var(--muted); font-style: normal; }

/* ── 약관·처리방침 ────────────────────────────────────────────

   읽으라고 내놓는 글이다. 폭을 재워 한 줄이 너무 길지 않게 한다 —
   긴 줄은 다음 줄 첫 글자를 눈이 못 찾는다. */
.amber-doc {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
    line-height: 1.75;
}

.amber-doc .version { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.9rem; }
.amber-doc section { margin-bottom: 2rem; }
.amber-doc h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.amber-doc ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.amber-doc li { margin-bottom: 0.35rem; }

/* ★ 옆으로 흐르게 두지 않는다. 읽으라고 내놓은 글인데 오른쪽이 잘려 있으면
     읽지 않으시고, 읽지 않은 문서에 받은 동의는 동의가 아니다.
     칸 안에서 줄을 바꿔 폭 안에 들어오게 한다. */
.amber-doc table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.amber-doc th, .amber-doc td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.amber-doc th { color: var(--muted); font-size: 0.85rem; }

/* '언제' 칸은 짧은 낱말뿐이다. 좁혀 두어야 '왜' 칸에 자리가 간다. */
.amber-doc td:nth-child(2), .amber-doc th:nth-child(2) { width: 6.5rem; }

/* 좁은 화면에서는 글자를 줄여 세 칸이 다 들어오게 한다. */
@media (max-width: 30rem) {
    .amber-doc table { font-size: 0.9rem; }
    .amber-doc th, .amber-doc td { padding: 0.45rem 0.35rem; }
    .amber-doc td:nth-child(2), .amber-doc th:nth-child(2) { width: 4.5rem; }
}

/* ── 가족 구성원 ──────────────────────────────────────────────
   누가 있는가. 이름을 누르면 그분이 올린 사진으로 간다. */

.amber-members {
    max-width: 34rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.amber-members .lead { color: var(--ink-2); margin: 0 0 1.5rem; }

.member-list { list-style: none; margin: 0; padding: 0; }

.member-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line);
}
.member-list li:last-child { border-bottom: none; }

/* 이름 쪽이 통째로 누르는 자리다. 단추처럼 보이지 않게 두되 손가락 크기는 지킨다.
   프로필 사진이 왼쪽에 서므로 가로로 늘어놓는다(2026-08-20). */
.member-list .who {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    border: none;
    background: none;
    padding: 0.6rem 0;
    min-height: var(--touch);
}

/* 이름과 함께한 날은 사진 오른쪽에 위아래로 쌓인다. */
.member-list .who > .said {
    flex: 1;
    min-width: 0;
    display: block;
}

.member-list .name { display: block; font-weight: 700; }
.member-list .when { display: block; margin-top: 0.15rem; color: var(--ink-2); font-size: 0.9rem; }
.member-list .count { flex: none; color: var(--ink-2); font-size: 0.9rem; white-space: nowrap; }

/* ★★ 줄 안의 link 단추는 <제 글자만큼만> 차지한다 (2026-08-22 폐하 지적).

   button.link 에는 width: 100% 가 붙어 있다 — 판 안에서 위아래로 쌓이는
   단추들('돌아가기'·'인증번호 다시 받기')을 위한 것이고, 그 자리에서는 맞다.

   ★ 그런데 앨범 목록은 그 단추를 <줄 안에> 세운다. 그러면 단추가 줄 전체 폭을
     달라고 하고, 옆의 이름 칸(flex: 1, min-width: 0)이 거의 0 까지 줄어든다.
     그래서 '시댁' 과 '사진 0장 · 이은 집 모두' 가 한 글자씩 위아래로 늘어섰다.

   ※ 이것이 amber.css 에서 세 번째로 만나는 같은 결의 일이다 — 사진이 짜부라진
     것, 머리글이 무너진 것, 그리고 이것. <줄 안에 서는 것에는 제 크기를 못
     박는다> 를 규칙으로 삼는다. */
.member-list button.link {
    flex: none;
    width: auto;
    white-space: nowrap;
}

/* '나'·'관리' 같은 짧은 표. 이름 옆에 붙어 선다. */
.member-list .tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 400;
    vertical-align: middle;
}

/* ── 화면을 단락으로 가른다 ───────────────────────────────────
   구성원 → 이은 가족 → 잇기 청하기가 글자로만 이어져 한 덩어리로 읽혔다
   (2026-08-20 폐하 지적). 제목이 구분선 노릇을 하게 한다. */
.amber-members h2 {
    margin: 2.5rem 0 0.35rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    font-size: 1.15rem;
}

.amber-members .hint {
    margin: 0.6rem 0 1rem;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* 이을 집을 청하는 자리. 입력 칸과 단추가 달라붙어 있었다 —
   판에 담고, 사이는 gap 하나로 띄운다(칸마다 여백을 주면 어긋난다). */
.amber-members .panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1.15rem 1.25rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface);
}

.amber-members .panel label { font-weight: 700; font-size: 0.95rem; }
.amber-members .panel .hint { margin: 0; }

/* ── 내 계정 ──────────────────────────────────────────────────
   이름 고치기·로그인 수단·로그아웃·계정 삭제. 칸을 나눠 두어야
   무엇이 무엇에 딸린 단추인지 헷갈리지 않는다 — 특히 삭제가 그렇다. */

.amber-account {
    max-width: 34rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.amber-account .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1rem 0;
}

.amber-account .panel h2 {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
}

.amber-account .panel > *:last-child { margin-bottom: 0; }

/* 위험한 칸은 테두리로 갈라 둔다. 다른 칸과 같은 모습이면 잘못 누른다. */
.amber-account .panel.danger { border-color: var(--danger); }

.amber-account .warn {
    color: var(--danger);
    font-weight: 600;
}

.amber-account button.danger { background: var(--danger); color: #fff; }
.amber-account button.link.danger { background: none; color: var(--danger); }

/* 이름을 고치는 칸. 생김새는 이름 없는 규칙이 주고, 여기서는 위아래 여백만 준다 —
   같은 앱 안에서 칸이 서로 다르게 생기면 그것이 '대충 만든 느낌'이 된다. */
.amber-account input[type="text"] {
    display: block;
    margin: 0.5rem 0 0.75rem;
}

/* 로그인 수단 목록. 이름과 값을 두 칸으로 놓는다. */
.amber-account .rows {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    align-items: baseline;
}

/* 아직 안 이은 소셜 계정을 잇는 단추.

   ★ 로그인 화면의 .social 을 그대로 쓰지 못한다. 그 규칙은 .amber-signin 안에만
     걸려 있어서(이 파일 위쪽), 여기서는 아무 모양도 받지 못하고 브라우저 기본
     단추로 나온다. 화면 이름을 붙인 규칙의 값을 여기서 치르는 셈이다.

     이름을 새로 두고 생김새만 같게 맞춘다 — 로그인 화면과 여기서 <같은 일을 하는
     단추>가 서로 달라 보이면 안 된다. */
.amber-account .link-provider {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
    min-height: var(--touch);
    padding: 0 1.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.amber-account .link-provider:disabled {
    opacity: 0.55;
    cursor: default;
}

.amber-account .rows dt { color: var(--ink-2); }
.amber-account .rows dd { margin: 0; overflow-wrap: anywhere; }

.amber-account .rows dd button.link {
    margin-left: 0.5rem;
    min-height: auto;
    padding: 0;
}

/* 앱 잠금 화면. 로그인 화면과 같은 모습이라야 한다 — 잠금이 풀리기 전과 뒤가
   다른 앱처럼 보이면 사람이 무엇을 잘못한 줄 안다.

   ★ 화면 전체를 덮는다. 아래가 비쳐 보이면 잠금이 아무것도 아니게 된다. */
.amber-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 100dvh;
    padding: 1.5rem;
    background: var(--bg);
    text-align: center;
}

.amber-lock h1 { margin: 0; }
.amber-lock .lead { color: var(--ink-2); margin: 0 0 0.5rem; }
.amber-lock .primary { min-width: 12rem; }

/* 내 기기. 이름과 마지막으로 쓴 때를 왼쪽에, 끊는 단추를 오른쪽 끝에 둔다 —
   눈이 왼쪽 줄을 훑다가 낯선 것에서 멈추면 그 줄 끝에 단추가 있다. */
.amber-account .devices {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0;
}

.amber-account .devices li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
}

/* ★ 이름 쪽이 남은 자리를 다 갖는다. 이것이 없으면 button.link 의
     width:100% 가 줄의 절반 넘게 차지해서, "Windows · Edge" 같은 짧은 이름도
     두 줄로 접힌다. */
.amber-account .devices li > div {
    flex: 1;
    min-width: 0;
}

.amber-account .devices li:first-child { border-top: none; }

.amber-account .devices .when {
    display: block;
    color: var(--ink-2);
    font-size: 0.9rem;
}

.amber-account .devices button.link {
    width: auto;
    flex: none;
    min-height: auto;
    padding: 0;
    white-space: nowrap;
}

/* 한 줄에 단추가 둘이다(이름·끊기). 붙여 두면 어느 것을 눌렀는지 헷갈린다. */
.amber-account .devices .acts {
    display: flex;
    flex: none;
    gap: 0.9rem;
}

/* 이름을 붙이는 중. 줄 전체를 차지한다 — 옆에 이름이 함께 보이면
   어느 것이 고치는 칸인지 헷갈린다. */
.amber-account .devices .rename {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

/* 줄 안에 서는 칸이라 자리와 크기만 다르다. 생김새는 이름 없는 규칙이 준다. */
.amber-account .devices .rename input {
    flex: 1;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0 0.75rem;
}

/* '모두 끊기' 는 줄 안이 아니라 목록 아래에 홀로 선다. */
.amber-account .devices + button.link { width: auto; padding: 0; }

/* '이 기기' 표. 이것이 없으면 낯선 기기를 끊으려다 자기 것을 끊는다. */
.amber-account .badge {
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--oi);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: 0.1em;
}

/* 페이지의 바닥. 없으면 사진 아래가 그냥 잘려서 끝난 것처럼 보인다.
   여기서 이름을 한 번 더 보여 준다 — 화면 위쪽은 가족 이름이 차지하고 있다. */
.amber-foot {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 0.95rem;
    text-align: center;
}

.amber-foot .accent { color: var(--oi); }

/* 지금 돌고 있는 판. 하루에 여러 번 올리면 손에 든 것이 새 것인지 알아야 한다.
   본문보다 조용하게 둔다 — 늘 보이지만 찾을 때만 눈에 든다.

   ★ 색을 새로 부르지 않고 opacity 로 눕힌다. 이 파일에는 var(--muted) 를 쓰는
     자리가 넷 있는데 그 변수가 <아무 데도 정의되어 있지 않다> — 그런 declaration 은
     브라우저가 통째로 버리므로, 넷 다 조용한 척만 하고 실은 부모 색 그대로다.
     같은 함정에 하나를 더 보태지 않는다. */
.amber-foot .build {
    display: block;
    margin-top: 0.35rem;
    opacity: 0.7;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* 글 속의 링크. 두지 않으면 브라우저 기본 파랑이 나와 오이색과 어긋난다 —
   회원가입 링크가 실제로 그랬다. */
.amber-signin a:not(.social),
.amber-account a {
    color: var(--oi);
    text-underline-offset: 3px;
}

/* 초대 코드. 손으로 옮겨 적는 것이라 크고 또렷해야 한다 —
   조부모가 종이에서 화면으로 여덟 글자를 옮기신다. */
.invite-code {
    margin: 0.5rem 0;
    padding: 1rem;
    border: 2px dashed var(--oi);
    border-radius: 0.75rem;
    background: var(--surface);
    color: var(--oi);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
    /* 자리를 맞춰 두면 눈으로 세기 쉽다. */
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* 라벨 옆의 곁말. '(받으셨으면)' 처럼 없어도 되는 것. */
.amber-signin .soft { color: var(--ink-2); font-weight: 400; font-size: 0.9rem; }
/* ══ 알림 게시판 ═════════════════════════════════════════════════

   폐하께서 청하신 세 가지 중 하나다(2026-08-20) — 푸시 · 앱 아이콘 뱃지 ·
   알림 게시판. 이 화면이 <푸시 열쇠가 붙기 전에도 온전히 돌아가는> 부분이다. */

.amber-notify {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.amber-notify .amber-header .acts { display: flex; gap: 0.75rem; align-items: center; }

/* ★★ 세로 여백만 바꾸려다 <가운데 맞추기를 죽였다> (2026-08-23 폐하 지적).

     .amber-empty 는 max-width: 26rem 과 margin: 0 auto 를 함께 갖는다 — 좁힌
     폭을 가운데로 옮기는 한 쌍이다. 여기서 margin: 3rem 0 으로 덮으니 폭은
     좁은 채 자리가 왼쪽에 남아, 글만 그 안에서 가운데 정렬되어 <왼쪽으로 쏠려>
     보였다. 폐하께서 「좌우 정렬이 맞지 않는듯」 하신 것이 이것이다.

     ★ 규칙: 한 쌍으로 일하는 값(max-width + margin auto) 가운데 하나만
       덮어쓰지 않는다. 세로만 바꿀 때도 가로는 auto 로 <다시 적어> 둔다. */
.amber-notify .amber-empty {
    margin: 3rem auto;
    text-align: center;
    color: var(--ink-2);
    line-height: 1.7;
}

/* 맺음말도 같은 기둥 안에서 가운데. 「그냥 두었습니다」가 왼쪽으로 쏠려 있었다. */
.amber-asks > .amber-status {
    max-width: 26rem;
    margin: 2rem auto 0;
    text-align: center;
}

.notify-list { list-style: none; margin: 0; padding: 0; }

.notify-list li { border-bottom: 1px solid var(--line); }
.notify-list li:last-child { border-bottom: none; }

/* 줄 전체가 누르는 자리다. 얼굴·글·사진 어디를 눌러도 그 사진으로 간다 —
   누를 수 있는 곳을 좁게 두면 조부모님이 몇 번씩 헛짚는다. */
.notify-list .line {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 0.85rem 0.25rem;
    min-height: var(--touch);

    border: none;
    background: none;
    text-align: left;
}

.notify-list .line:hover { background: color-mix(in srgb, var(--oi) 6%, transparent); }

.notify-list .say { flex: 1; min-width: 0; display: block; }

.notify-list .what {
    display: block;
    font-weight: 700;
    line-height: 1.35;
}

.notify-list .more,
.notify-list .when {
    display: block;
    color: var(--ink-2);
    font-size: 0.9rem;
}

.notify-list .more { margin-top: 0.1rem; }
.notify-list .when { margin-top: 0.15rem; }

/* 어느 사진의 일인가. 글자만으로는 알 수 없다. */
.notify-list .shot {
    flex: none;

    /* ★ 같은 빗장. 까닭(부트스트랩 .row 와의 이름 충돌)은 .amber-avatar 에 적어 두었다.
         이름은 .line 으로 바꿔 뿌리를 없앴지만, 빗장은 남겨 둔다. */
    padding: 0;

    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: var(--line);
}

/* 사진이 그새 지워졌을 때. 빈 자리를 그대로 두면 줄들의 글이 서로 어긋나 보인다 —
   자리는 지키고 그림만 비운다. */
.notify-list .shot.gone { display: block; opacity: 0.45; }

/* 안 읽은 것. 굵게만 두면 읽은 것과 구분이 약해서 점을 하나 더 둔다. */
.notify-list li.fresh .line { background: color-mix(in srgb, var(--oi-lit) 10%, transparent); }

.notify-list .dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--oi);
}

/* 읽은 것은 한 걸음 물러선다. 지우지 않는다 — 언제 무슨 일이 있었는지는
   남아 있어야 하고, 그것이 이 화면이 '게시판' 인 까닭이다. */
.notify-list li.read .what { font-weight: 400; }
.notify-list li.read .line { opacity: 0.72; }

/* ── 사진 크게 보기 ────────────────────────────────────────────────
   2026-08-23 황후 폐하 말씀 — 「사진 크게 보기 기능이 없다」.

   ★ 뷰어 위에 한 겹 더 얹는다(z-index 60 > 뷰어 50). 뷰어를 그대로 두는 까닭:
     닫으면 <보던 사진 앞으로> 돌아와야 한다. 목록으로 튕기면 스무 장쯤 내려간
     자리를 잃는다. */
.amber-big {
    position: fixed;
    inset: 0;
    z-index: 60;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 사진만 남기려고 뷰어보다 더 어둡게 둔다. */
    background: #000;
    overflow: hidden;

    /* 브라우저가 손짓을 먼저 가로채지 않게 한다 — 벌리기·옮기기는 우리가 한다. */
    touch-action: none;
}

.amber-big img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    /* 확대·이동은 JS 가 transform 으로 준다. 여기서 부드럽게만 해 둔다. */
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

/* 키운 동안에는 손짓이 그림을 옮기는 것이니, 잡는 손 모양을 보여 준다. */
.amber-big.zoomed { cursor: grab; }

.amber-big .shut,
.amber-big .step {
    position: absolute;
    z-index: 2;

    width: 2.8rem;
    height: 2.8rem;
    min-height: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.amber-big .shut:hover,
.amber-big .step:hover { background: rgba(0, 0, 0, 0.8); }

/* 닫기는 오른쪽 위 — 폰에서 엄지가 닿기 어려운 자리다. 실수로 닫히면 안 된다. */
.amber-big .shut {
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    right: 0.75rem;
    font-size: 1.1rem;
}

.amber-big .step { top: 50%; transform: translateY(-50%); }
.amber-big .step.back { left: 0.75rem; }
.amber-big .step.on { right: 0.75rem; }
.amber-big .step svg { width: 1.4rem; height: 1.4rem; }

/* 손짓은 말해 주지 않으면 모른다. 키우면 사라진다 — 그때는 이미 아셨다. */
.amber-big .tip {
    position: absolute;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2;

    margin: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    white-space: nowrap;
    pointer-events: none;
}

.amber-big.zoomed .tip { display: none; }

/* 손가락이 없는 화면에서는 벌릴 수 없다 — 두 번 두드리기만 말해 준다. */
@media (hover: hover) {
    .amber-big .tip::after { content: ""; }
}

/* ── 크게 보기로 들어가는 단추 ─────────────────────────────────────
   누를 수 있다는 것을 말해 준다. 사진을 눌러도 되지만, 눌러도 된다는 것을
   아무도 모른다 — 알약 줄의 화살표에서 배운 것이다. */
.amber-viewer .shot .grow {
    /* 가운데 아래에 둔다 — 양옆은 넘김 화살표가 쓰고, 왼쪽 위는 「소리 켜기」가
       쓴다. 위아래로 짧은 사진(가로로 긴 것)에서도 겹치지 않는 유일한 자리다. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.5rem;
    z-index: 4;

    width: 2.4rem;
    height: 2.4rem;
    min-height: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
}

.amber-viewer .shot .grow:hover { background: rgba(0, 0, 0, 0.75); }
.amber-viewer .shot .grow svg { width: 1.15rem; height: 1.15rem; }

/* ── 「이 사진은 어떨까요」 ─────────────────────────────────────────
   폐하 착상(2026-08-23). 남의 사진을 지우자고 <청하는> 자리다.
   지우기와 같은 줄에 서지만 말과 무게가 다르다 — 이것은 청함이다. */
.amber-viewer .by .drop.sent,
.amber-viewer .scope .drop.sent {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* 까닭 고르기. 판을 크게 벌이지 않는다 — 사진을 보다 잠깐 들르는 자리다. */
.amber-viewer .ask {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.5rem;

    margin-top: 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
}

.amber-viewer .ask .head {
    margin: 0 0 0.2rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    line-height: 1.55;
}

.amber-viewer .ask .head strong { color: #fff; }

/* 까닭 하나하나. 누르면 곧바로 전해진다 — 고른 뒤 또 보내게 하면
   그 한 걸음에서 사람이 그만둔다. */
.amber-viewer .ask .pick {
    width: 100%;
    min-height: var(--touch);
    padding: 0 0.9rem;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    text-align: left;
    font-size: 0.95rem;
}

.amber-viewer .ask .pick:hover:not(:disabled) {
    border-color: var(--oi-lit);
    background: color-mix(in srgb, var(--oi) 25%, transparent);
}

.amber-viewer .ask .pick:disabled { opacity: 0.5; }

.amber-viewer .ask > .link {
    width: auto;
    min-height: auto;
    padding: 0.2rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* ── 직접 적는 칸 ────────────────────────────────────────────
   ★★ 이 칸이 없어서 폐하께서 「직접 적겠습니다」를 누르시고 "아무것도 나오지
     않는다" 하셨다(2026-08-23). 단추의 말은 <적겠다>인데 적을 자리가 없었다.

   ★ 두 줄로 시작하고 늘리지 않는다(resize: none). 넓히면 이것이 또 하나의
     댓글칸이 되고, 지우자는 청이 말다툼의 자리가 된다. */
.amber-viewer .ask .note {
    width: 100%;
    padding: 0.6rem 0.7rem;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;

    font: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: none;
}

.amber-viewer .ask .note::placeholder { color: rgba(255, 255, 255, 0.45); }

.amber-viewer .ask .note:focus-visible {
    outline: none;
    border-color: var(--oi-lit);
}

/* 보내기와 되돌아가기를 한 줄에. 보내기가 앞에 서고 눈에 띈다 — 되돌아가기는
   글씨만 남긴다. */
.amber-viewer .ask .acts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.amber-viewer .ask .acts .pick.send {
    width: auto;
    padding: 0 1.4rem;
    border-color: var(--oi-lit);
    background: var(--oi);
    text-align: center;
    font-weight: 700;
}

.amber-viewer .ask .acts .pick.send:disabled {
    border-color: rgba(255, 255, 255, 0.2);
    background: transparent;
}

.amber-viewer .ask .acts .link {
    width: auto;
    min-height: auto;
    padding: 0.2rem 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* ── 「이 사진은 어떨까요」 가 모이는 자리 (/suggestions) ────────────
   올린 분이 한자리에서 훑고 정하는 화면. 이것이 있어야 폐하께서 말씀하신
   <용량 관리>가 실제로 된다 — 한 장씩 찾아다니게 두면 아무도 하지 않는다. */
.amber-asks .head {
    margin: 0 0 1.25rem;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.7;
}

.amber-asks .amber-empty .quiet {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.7;
}

.ask-list { list-style: none; margin: 0; padding: 0; }

.ask-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem;

    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.ask-list li:last-child { border-bottom: none; }

/* 사진. 눌러서 크게 볼 수 있다 — 무엇을 지우는지 보지 않고 정할 수는 없다. */
.ask-list .shot {
    flex: none;
    padding: 0;
    width: 5rem;
    height: 5rem;
    min-height: 0;
    border: none;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--line);
}

.ask-list .shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ask-list .shot img.gone { opacity: 0.45; }

.ask-list .said {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ask-list .who {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
}

.ask-list .who .amber-avatar { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; }

.ask-list .why { font-weight: 700; }

.ask-list .note { color: var(--ink-2); font-size: 0.95rem; }

.ask-list .when { color: var(--ink-2); font-size: 0.88rem; }

/* 두 단추의 무게를 다르게 둔다. 지우는 것은 되돌리기 어렵고, 그냥 두는 것은
   아무 일도 아니다 — 같은 크기로 나란히 두면 손이 아무 쪽으로나 간다. */
.ask-list .acts {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 9rem;
}

.ask-list .acts .primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
}

.ask-list .acts .primary svg { flex: none; width: 1rem; height: 1rem; }

.ask-list .acts .link {
    width: 100%;
    min-height: auto;
    padding: 0.3rem 0;
    color: var(--ink-2);
    font-size: 0.9rem;
}