/* K-Booth 내 앨범(/album). 바탕·단추·시트·어두운 화면은 dl.css(다운로드 페이지) 토큰과 규칙을 그대로 쓰고, 앨범 것만 여기 */

/* 맨 아래(로그아웃 줄)가 화면 고정 문의 단추 밑에 깔리지 않게 아래 여백 */
.al { padding-bottom: calc(max(24px, env(safe-area-inset-bottom)) + 72px); }

/* 로그인 링크 결과·알림 띠 */
.al-banner {
  margin: 0 auto; width: 100%; max-width: 640px; padding: 10px 14px; border-radius: 12px; text-align: center;
  background: var(--accent-soft); color: var(--ink); font-size: 15px; font-weight: 700;
}
.al-banner[data-k="bt_alb_exp"], .al-banner[data-k="bt_alb_full"], .al-banner[data-k="bt_alb_daily"], .al-banner[data-k="bt_alb_err"],
.al-banner[data-k="al_link_bad"], .al-banner[data-k="al_session_end"] { background: var(--warn-soft); }

/* 로그인 */
.al-out { width: 100%; max-width: 440px; margin: 0 auto; display: grid; gap: 14px; text-align: center; padding-top: 4vh; }
.al-out .kba-ask, .al-out .kba-sent { text-align: start; }
.al-out .kba-fine, .al-out .kba-d, .al-out .kba-sent-t, .al-out .kba-to { text-align: center; }

/* 목록 */
.al-list { display: grid; gap: 16px; }
.al-head { display: grid; gap: 6px; text-align: center; }
.al-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .al-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } }
.al-card-in {
  width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; text-align: start;
  border: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 8px 22px rgba(20, 20, 22, .06);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
button.al-card-in:hover { box-shadow: 0 0 0 1.5px var(--accent), 0 10px 26px rgba(20, 20, 22, .10); }
button.al-card-in:active { transform: scale(.98); }
button.al-card-in:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.al-thumb { position: relative; aspect-ratio: 3 / 4; min-width: 0; overflow: hidden; background: var(--surface-2); }
.al-thumb img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; display: block; filter: drop-shadow(0 2px 6px rgba(20, 20, 22, .14)); }
.al-thumb--gone { color: var(--muted); display: grid; place-items: center; }
.al-thumb--gone svg { width: 36px; height: 36px; }
.al-meta { display: grid; gap: 6px; align-content: start; padding: 10px 12px 12px; min-width: 0; }
.al-date { margin: 0; font-weight: 800; font-size: 15px; line-height: 1.3; }
.al-chip {
  margin: 0; justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent); font-feature-settings: "tnum" 1;
}
.al-chip.is-last { background: var(--warn-soft); color: var(--ink); }
.is-deleted .al-card-in { cursor: default; box-shadow: 0 0 0 1px var(--line); background: var(--surface-2); }
.al-gone { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.al-card-rm, .al-remove, .al-logout {
  justify-self: start; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--ink-2); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; border-radius: 8px;
}
.al-card-rm:hover, .al-remove:hover, .al-logout:hover { color: var(--ink); }
.al-card-rm:focus-visible, .al-remove:focus-visible, .al-logout:focus-visible, .al-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.al-empty { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 6vh 0 2vh; max-width: 440px; margin: 0 auto; }
.al-empty .dl-btn { width: 100%; }

/* 한 네컷 */
.al-detail { display: grid; gap: 12px; }
.al-back {
  justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px;
  border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.al-back .dl-ico { width: 20px; height: 20px; }
/* 오른쪽→왼쪽(ar·he): 「목록으로」 꺾쇠(‹)를 읽는 방향으로 뒤집는다 */
[dir="rtl"] .al-back .dl-ico { transform: scaleX(-1); }
.al-ready .dl-side { gap: 12px; }
#alDTitle:focus { outline: none; }
.al-h2 { margin: 6px 0 0; font-size: 17px; font-weight: 800; }
.al-shots-box { display: grid; gap: 10px; text-align: start; }
.al-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.al-shot { display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.al-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--surface-2); display: block; }
.al-shot-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }   /* 저장·공유를 위아래로(긴 낱말 Enregistrer·Compartir 가 들어가게) */
.al-mini { min-height: 44px; padding: 6px 8px; font-size: 14px; border-radius: 10px; min-width: 0; }
.al-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-remove { justify-self: center; margin-top: 4px; }
.al-danger { background: #c62828; color: #fff; width: 100%; }
.al-danger:hover { background: #b71c1c; }
.al-danger:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#alConfirm .dl-btn-line { width: 100%; }

/* 누구로 로그인·로그아웃(목록·상세 맨 아래) */
.al-who { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.al-who .al-logout { font-size: 14px; }
/* 소식 받기 켜고 끄기: 위 버튼 폭(440px) 안에서 가운데, 버튼 가까이 */
#alNewsSw { justify-content: center; max-width: 440px; margin: 4px auto 0; }
#alNewsMore { text-align: center; max-width: 440px; margin: 2px auto 0; }

@media (min-width: 760px) {
  .al-ready { align-items: start; }
  .al-ready .dl-side { text-align: start; }
  .al-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-color-scheme: dark) {
  .al-danger { background: #ef5350; color: #1a0a0a; }
  .al-danger:hover { background: #f26b69; }
}