/* 폰 상단 바 가운데 로고는 폰 폭에서만(아래 @media) */
.topbar-logo { display: none; }
/* 아직 없는 장소별·인물별(disabled)은 흐리게, 누를 수 없게(모든 폭) */
.place-switch button:disabled { opacity: .3; cursor: default; }
/* 보관함(index.html)의 휴대폰 폭 배치. 다른 보관함 CSS 뒤에 읽어 그 위에 덮는다.
   데스크톱 배치는 건드리지 않는다. 아이폰 앱(ios/)의 WKWebView 도 이 규칙으로 보인다. */

/* 폰 전용으로 만든 요소(library-mobile.js). 넓은 화면에서는 기존 상단바를 그대로 쓴다. */
.mobile-account-btn,
.mobile-account-menu,
.mobile-photos-btn { display: none; }

@media (max-width: 760px) {
  /* INDEX 도구를 오른쪽 세로 막대에서 화면 아래 가로 막대로 옮긴다.
     세로 막대 자리(오른쪽 68px)를 비워 둘 필요가 없어져 본문이 화면 폭을 다 쓴다. */
  :root { --remote-gutter: 12px; --dock-space: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(#dashboardView:not(.hidden)) .shell { padding-bottom: calc(var(--dock-space) + 24px) !important; }

  body:has(#dashboardView:not(.hidden)) .actionbar {
    left: 50% !important;
    right: auto !important;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    flex-direction: row;
    width: auto;
    border-radius: 28px;
  }
  .actionbar:before { display: none; }
  .actionbar .action {
    width: 56px;
    min-height: 50px;
    border-bottom: 0;
    border-right: 1px solid #000000a6;
  }
  .actionbar .action:last-child { border-right: 0; }

  /* 화면 테마 단추는 프로필(마이페이지)로 옮겼다. */
  .theme-toggle { display: none !important; }
}

@media (max-width: 620px) {
  /* 머리 부분: 메뉴 버튼과 로고를 한 줄에, 계정 메뉴를 그 아래 한 줄에 둔다.
     전에는 메뉴 버튼이 혼자 한 줄을 차지해 칸이 어긋나 보였다. */
  .topbar.library-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .topbar.library-topbar .sidebar-toggle {
    width: 58px;
    border-right: 4px solid var(--line-strong);
    border-bottom: 4px solid var(--line-strong);
  }
  .topbar.library-topbar .library-brand { grid-column: 2; }
  .topbar.library-topbar .account-nav { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  /* 사진 파일과 앨범을 가로 2개씩. 폭이 반으로 줄어드는 만큼 여백과 글자를 줄인다.
     library-sidebar.css 가 같은 자리를 auto-fill(최소 236px)로 잡아 폰에서는 한 줄에 하나가 된다.
     그 규칙과 같은 선택자로 덮는다. */
  body:has(#dashboardView:not(.hidden)) .library-section .album-grid,
  body:has(#dashboardView:not(.hidden)) .library-section .file-grid,
  .album-grid, .file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .album-grid .item-card, .file-grid .item-card { padding: 8px 8px 12px !important; }
  .file-grid .item-card h3, .album-grid .item-card h3 { font-size: 18px; }
  .item-selector { top: 12px; left: 12px; }

  /* 상단바: 메뉴, 알림, 원형 회원 아이콘만 남긴다. */
  .topbar.library-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 58px;
    border-width: 3px;
    overflow: visible;   /* 회원 팝업이 헤더 밖으로 나온다. 데스크톱은 hidden 그대로 */
    /* 칸(테두리·바탕·그림자)으로 따로 떼지 않고 화면 바탕에 바로 그린다(2026-09-30 사용자) */
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  /* 앨범 · 기록장 전환도 한 번 더 감싸는 칸 없이 아이콘만(고른 쪽만 채운다) */
  .topbar.library-topbar .home-switch { border: 0; background: none; padding: 0; margin-left: 0; }
  /* 관리자 단추는 상단 바에 두지 않고 회원 팝업(library-mobile.js ITEMS)에서 연다 */
  .topbar.library-topbar .account-nav .admin-page-button { display: none !important; }
  .topbar.library-topbar .library-brand { display: none; }
  .topbar.library-topbar .sidebar-toggle {
    grid-column: 1;
    width: 42px;
    height: 46px;
    border: 0;
  }
  .topbar.library-topbar .account-nav {
    grid-column: 4;
    background: none;
    width: auto;
    min-height: 0;
    gap: 0;
    padding-right: 2px;
    border: 0;
  }
  /* 회원 팝업(library-mobile.js)으로 옮긴 버튼들. 숨겨도 팝업에서 대신 눌러 준다. */
  .topbar.library-topbar .account-nav .my-page-button,
  .topbar.library-topbar .account-nav .install-app-button,
  .topbar.library-topbar .account-nav .friend-button,
  .topbar.library-topbar .account-nav .logout-button { display: none !important; }
  /* 친구 아이콘의 "!"(2026-10-07 사용자): 답할 요청이나 안 읽은 메시지가 있을 때, 친구 화면 상단 아이콘과 같은 모양 */
  .topbar.library-topbar .account-nav .notification-badge { top: 3px; right: 1px; min-width: 0; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 999px; background: var(--danger, #f87171); font-size: 11px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 2px var(--bg); color: #fff; }
  .topbar.library-topbar .account-nav .notification-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    border: 0;
    background: none;
  }

  .mobile-account-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
  }
  .mobile-account-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-account-btn[aria-expanded="true"] { background: var(--fill); }
  /* 폰 사진 열람(library-mobile.js, 앱에서만). 알림 단추와 같은 크기·테두리 없음. */
  .mobile-photos-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: var(--ink);
  }
  button.mobile-photos-btn { padding: 0; border: 0; background: none; }
  .mobile-photos-btn svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  /* 상단 바: [≡][앨범|기록장] [로고] [분류·알림·회원]. 로고 자리를 남기려고 단추를 조금씩 좁힌다.
     상단 바·머리 줄 아이콘은 칸(테두리·바탕)으로 한 번 더 감싸지 않는다(2026-09-30 사용자, 따로 말하지 않는 한 모든 화면). */
  .topbar.library-topbar { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 0; }
  .topbar.library-topbar .home-switch button { width: 34px; }
  .topbar.library-topbar .account-nav .notification-button,
  .topbar.library-topbar .mobile-photos-btn { width: 38px; min-width: 38px; flex: 0 0 38px; }
  .topbar.library-topbar .mobile-account-btn { width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 10px; background: none; }
  .topbar.library-topbar .mobile-account-btn[aria-expanded="true"] { background: var(--fill); }
  /* 리딩룸 머리 줄: THE READING ROOM | 시간·장소·사람(library-mobile.js 가 옮겨 온다). 아이콘만, 고른 것은 진하게, 장소·사람(아직 없음)은 흐리게 */
  .library-overview-top { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; }
  .library-overview-top .library-lens-bar { display: flex; gap: 0; padding: 0 10px 0 0; }
  .library-overview-top .library-lens-button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0 !important; border-radius: 10px !important; background: none !important; color: var(--muted); }
  .library-overview-top .library-lens-button[aria-pressed="true"] { color: var(--ink); }
  .library-overview-top .library-lens-button[aria-pressed="true"] svg { stroke-width: 2.4; }
  .library-overview-top .library-lens-button:disabled { opacity: .3; }
  /* 가운데 로고: isle 글자만 */
  .topbar-logo { grid-column: 3; justify-self: center; display: inline-flex; align-items: center; height: 44px; pointer-events: none; }
  .topbar-logo-word { display: block; height: 22px; width: auto; }
  :root:not([data-theme="light"]) .topbar-logo-word { filter: invert(1); }

  .mobile-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 70;
    display: grid;
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 40px #000000a6;
  }
  .mobile-account-menu[hidden] { display: none; }
  .mobile-account-name {
    margin: 0;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }
  .mobile-account-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
  }
  .mobile-account-menu button svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-account-menu button:active { background: var(--fill); }
}

@media (max-width: 620px) {
  /* 카드가 반으로 좁아지면 날짜가 두 줄로 꺾이고 태그가 글자 하나까지 잘린다.
     날짜 줄을 넓게 쓰고, 태그는 첫 개만 보이되 말줄임으로 끊는다. */
  .library-section .golden-card .golden-info h3 {
    font-size: 14px !important;
    -webkit-line-clamp: 1;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .library-section .golden-card .golden-info .memory-tag:not(:first-child) { display: none; }
  .library-section .golden-card .golden-count { align-self: start; padding-top: 2px; }
}

@media (max-width: 620px) {
  /* 시간·장소·사람 버튼은 아이콘만(library-mobile.js). */
  .lens-icon-button {
    display: grid;
    place-items: center;
    width: 46px;
    min-width: 46px;
    height: 38px;
    padding: 0;
  }
  .lens-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* '나의 기억 책장' 줄: 영문 라벨과 숫자만 남기고 제목·설명을 지운다. */
  .library-overview-copy h1,
  .library-overview-copy p:not(.eyebrow),
  .shelf-help,
  #bookshelfHost .shelf-heading p { display: none !important; }
  .library-overview-copy { padding-bottom: 4px; }
}

@media (max-width: 620px) {
  /* 현황 숫자 줄(앨범·파일·사진 수)은 폰에서 뺀다. */
  .library-overview-stats { display: none !important; }

  /* 책장 '전체 날짜 보기'(달력 아이콘)는 폰에서 뺀다(2026-09-29 사용자). 고른 달이 없으면 하는 일이 없고, 달을 골랐을 때는
     목록 위 알림 줄(#shelfFilterNote)의 '전체 보기'가 같은 일을 한다. 그 단추만 있던 머리 줄도 접어 책장을 위로 올린다
     (연도를 펼쳤을 때 '접기'가 들어오면 그때만 보인다). */
  .shelf-reset { display: none !important; }
  #bookshelfHost > .shelf-heading:not(:has(.shelf-fold)) { display: none !important; }
}

@media (max-width: 620px) {
  /* 연도 아래 설명(2026 · 4개월). 연도는 책등에 이미 적혀 있고, 달 수는 연도를 열면 보인다. */
  .shelf-year-caption { display: none; }
}

@media (max-width: 620px) {
  /* 카드에서 단추를 뺀 자리를 사진에 준다. */
  .library-section .golden-card {
    aspect-ratio: 3 / 4;
    /* 아래 정보 칸이 남는 높이를 다 가져가서 사진이 눌렸다. 비율을 직접 정한다. */
    grid-template-rows: minmax(0, 3.4fr) minmax(0, 1fr);
  }
  .library-section .golden-card .golden-photo { grid-row: 1; padding: 3cqw; }
  .library-section .golden-card .golden-info { grid-row: 2; grid-column: 1; align-content: center; }
  .library-section .golden-card .golden-count { grid-row: 2; grid-column: 2; }
  .library-section .golden-card .golden-actions { display: none !important; }

  /* 리모콘: 이름 변경·삭제·저장·공유 네 칸. 새롭게 분류하기는 폰에서 쓰지 않는다. 앨범·편집은 열람 화면에서 연다. */
  .actionbar .action { width: 56px; }
  #newProjectBtn { display: none !important; }
  /* 세션 분리는 폰에서 쓰지 않는다. */
  #splitFileBtn { display: none !important; }

  /* 평소에는 리모콘을 숨기고, 파일(카드)을 고르면 아래에서 올라온다. 고른 것이 모두 풀리면 다시 내려간다. */
  body:has(#dashboardView:not(.hidden)) .actionbar {
    transform: translate(-50%, calc(100% + 32px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
  }
  body:has(#dashboardView:not(.hidden)):has(.library-section .item-card.selected) .actionbar {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .22s ease, opacity .18s ease, visibility 0s;
  }
}

@media (max-width: 620px) {
  /* 왼쪽 위 검은 원(선택 단추)은 없앤다. 카드 아무 곳이나 누르면 선택되고(app.js),
     선택된 카드는 테두리 색으로 알린다. */
  .library-section .golden-card .item-selector { display: none !important; }
  .library-section .golden-card.selected {
    outline: 3px solid var(--info) !important;
    outline-offset: -3px !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--info) 28%, transparent);
  }
}

/* 날짜 파일 정렬 방식(library-mobile.js): 세로(shorts) · 가로(strip).
   단추는 시간·장소·인물 줄 오른쪽에 붙는다. */
.card-style-switch { display: none; }

@media (max-width: 620px) {
  .card-style-switch {
    display: flex;
    gap: 4px;
    margin-left: auto;
  }
  /* 세로·가로 스위치: 손잡이가 없는 쪽 빈 칸에 색 — 세로(손잡이 왼쪽)는 오른쪽이 연한 파랑, 가로(손잡이 오른쪽)는 왼쪽이 연한 빨강 */
  .place-switch .card-style-toggle {
    position: relative;
    width: 58px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px !important;
    background: #bcd8ff;
    touch-action: pan-y;
    cursor: pointer;
    transition: background .22s ease;
  }
  .place-switch .card-style-toggle[aria-checked="true"] { background: #ffc4c4; }
  .card-style-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px #0000004d;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  }
  .place-switch .card-style-toggle[aria-checked="true"] .card-style-thumb { transform: translateX(26px); }
  .card-style-toggle:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
  .card-style-switch button[aria-pressed="true"] { border-color: var(--line-strong); background: var(--fill); color: var(--ink); }

  /* ── 쇼츠식: 사진이 카드를 가득 채우고 날짜가 사진 위에 얹힌다 ── */
  body.card-style-shorts .classification-section .golden-card {
    /* 카드 비율은 이 프로젝트가 원래 쓰던 황금비(21:34) 그대로. */
    aspect-ratio: 21 / 34;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 0 !important;   /* 사진이 카드를 끝까지 채운다 */
  }
  body.card-style-shorts .classification-section .golden-card .golden-photo {
    grid-area: 1 / 1;
    padding: 0 !important;
  }
  body.card-style-shorts .classification-section .golden-card .item-cover {
    border: 0 !important;
    border-radius: 0 !important;
  }
  body.card-style-shorts .classification-section .golden-card .item-selector { margin: 6px; }
  body.card-style-shorts .classification-section .golden-card .golden-info {
    grid-area: 1 / 1;
    align-self: end;
    z-index: 2;
    padding: 28px 10px 10px !important;
    background: linear-gradient(to top, #000000d9, #00000080 55%, transparent);
  }
  body.card-style-shorts .classification-section .golden-card .golden-info h3 {
    font-size: 15px !important;
    color: #fff !important;
  }
  body.card-style-shorts .classification-section .golden-card .golden-info p { color: #ffffffb8 !important; }
  body.card-style-shorts .classification-section .golden-card .golden-count {
    grid-area: 1 / 1;
    z-index: 2;
    align-self: start;
    justify-self: end;
    margin: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #000000a6;
    color: #fff;
  }
  body.card-style-shorts .classification-section .golden-card .golden-count strong { font-size: 14px; }
  body.card-style-shorts .classification-section .golden-card .memory-tags { display: none; }

  /* ── 가로 띠: 한 줄에 하나. 안에 든 사진이 칸을 꽉 채우고 날짜가 그 위에 뜬다 ── */
  body.card-style-strip:has(#dashboardView:not(.hidden)) .library-section .file-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.card-style-strip .classification-section .golden-card {
    aspect-ratio: 21 / 9;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    padding: 0 !important;
  }
  body.card-style-strip .classification-section .golden-card .golden-photo,
  body.card-style-strip .classification-section .golden-card .memory-tags,
  body.card-style-strip .classification-section .golden-card .golden-info p,
  body.card-style-strip .classification-section .golden-card .golden-count { display: none !important; }
  body.card-style-strip .classification-section .golden-card { position: relative; }
  /* 사진 칸을 카드에 딱 맞춘다. 높이가 정해져야 맨 왼쪽 사진이 칸 높이에 맞춰 비율대로 폭을 갖는다. */
  body.card-style-strip .classification-section .golden-card .card-fan {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  /* 층을 쌓듯 겹친다: 맨 왼쪽 사진이 가장 위이고, 오른쪽으로 갈수록 앞 사진 아래로 깔린다
     (겹침 순서는 library-mobile.js 가 z-index 로 준다). 나머지 사진은 남은 폭을 나눠 칸을 채운다.
     사진마다 오른쪽에 1px 경계를 두고, 아래 깔린 사진 쪽으로 옅은 그림자를 떨어뜨린다. */
  body.card-style-strip .classification-section .golden-card .card-fan img {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-right: 1px solid var(--paper);
    border-radius: 0;
    background: var(--surface-2);
    box-shadow: 8px 0 12px -6px #000000b3;
  }
  body.card-style-strip .classification-section .golden-card .card-fan img + img { margin-left: -22px; }
  /* 맨 왼쪽 사진은 자르지 않는다: 칸 높이에 맞춰 원래 비율 그대로 폭을 갖는다.
     다만 칸의 60% 에서 멈춘다. 넓은 가로 사진이 칸을 거의 다 차지하면 뒤에 깔린 사진이
     가느다란 띠만 남기 때문이다(그 경우 첫 사진의 양옆이 조금 잘린다). */
  body.card-style-strip .classification-section .golden-card .card-fan img:first-child {
    flex: 0 0 auto;
    width: auto;
    max-width: 60%;
  }

  /* 날짜는 사진 위에. 세로형과 같은 방식이다. */
  body.card-style-strip .classification-section .golden-card .golden-info {
    grid-area: 1 / 1;
    align-self: end;
    /* 사진마다 겹침 순서(z-index 1~8)를 주므로 날짜는 그보다 위여야 한다. */
    z-index: 20;
    min-height: 0 !important;
    grid-template-rows: auto !important;
    padding: 24px 12px 10px !important;
    background: linear-gradient(to top, #000000d9, #00000073 60%, transparent);
  }
  body.card-style-strip .classification-section .golden-card .golden-info h3 {
    font-size: 15px !important;
    color: #fff !important;
  }
}

@media (max-width: 620px) {
  /* 앨범 카드도 세로 규격 그대로: 황금비(21:34) 칸을 표지가 끝까지 채우고 날짜만 위에 얹는다.
     앨범은 표지가 곧 내용이라 가로 보기에서도 같은 규격을 쓴다.
     styles.css 의 `.library-section .golden-card.album-card` 규칙이 더 세므로 같은 모양으로 덮는다. */
  .library-section .golden-card.album-card {
    aspect-ratio: 21 / 34;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    overflow: hidden;
    padding: 0 !important;
  }
  .library-section .golden-card.album-card .golden-photo {
    grid-area: 1 / 1 !important;
    padding: 0 !important;
  }
  .library-section .golden-card.album-card .item-cover {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }
  .library-section .album-grid .album-card .polaroid-caption,
  .library-section .golden-card.album-card .golden-info {
    grid-area: 1 / 1 !important;
    align-self: end !important;
    align-items: flex-end !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 2;
    padding: 28px 10px 10px !important;
    background: linear-gradient(to top, #000000d9, #00000080 55%, transparent);
  }
  .library-section .golden-card.album-card .golden-info p,
  .library-section .golden-card.album-card .golden-info h3 { color: #fff !important; }
  .library-section .golden-card.album-card .item-selector { margin: 6px; }
}

@media (max-width: 620px) {
  /* 아이폰이 길게 누른 사진에 저장·공유 메뉴를 띄우지 않게 한다(꾹 눌러 고르기는 없앴다, 2026-10-02). */
  .library-section .item-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .15s ease;
  }
  .library-section .item-card img { -webkit-user-drag: none; }
}

/* 프로필의 언어·화면 선택(library-mobile.js). 화면 테마는 폰에서만 보인다(데스크톱은 오른쪽 아래 단추).
   언어는 보관함 영어 화면(library-i18n.js)을 고르는 자리라 데스크톱에서도 보인다. */
.my-page-form .profile-language.profile-theme { display: none; }
.my-page-form .profile-language:not(.profile-theme) { display: grid; }
.profile-language:not(.profile-theme) select { width: 100%; padding: 12px 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }

@media (max-width: 620px) {
  .my-page-form .profile-language.profile-theme { display: grid; }
  .profile-language select,
  .profile-theme select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
  }
}


@media (max-width: 620px) {
  /* iPhone 은 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대하고, 다 쓴 뒤에도 되돌리지 않는다
     (로그인 뒤 홈 화면 좌우가 잘려 보이던 원인). 폰에서는 입력칸 글자를 16px 로 둔다. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }
}

/* 사진 앱 변경 반영 알림(library-mobile.js, iOS 앱) */
.photo-changes-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  z-index: 90;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 28px #0006;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.photo-changes-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }

/* 카드 ⋮ 메뉴(library-mobile.js): 폰에서만. 날짜 파일·앨범 카드 오른쪽 아래, 사진 위에 얹는다.
   아래에서 올라오던 리모콘(이름 변경·삭제·공유)은 이 메뉴로 옮겨 폰에서는 숨긴다. */
.item-more { display: none; }
.item-more-menu[hidden] { display: none; }
@media (max-width: 620px) {
  body:has(#dashboardView:not(.hidden)) .actionbar { display: none !important; }
  /* 여러 파일을 골라야 쓰는 파일 통합·신규 앨범 생성은 폰에서 고를 길이 없어 숨긴다. */
  #mergeFilesBtn, #createAlbumFromFilesBtn { display: none !important; }
  .library-section .golden-card .item-more {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    z-index: 25;
    display: grid;
    place-items: center;
    width: 32px;
    height: 36px;
    margin: 0 2px 4px 0;
    padding: 0;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #fff;
    filter: drop-shadow(0 1px 2px #000a);
  }
  .library-section .golden-card .item-more svg { width: 20px; height: 20px; fill: currentColor; }
  /* 앨범 카드(보관함 앨범·자동 앨범)는 커버가 두 칸에 걸쳐 있으므로 ⋮ 도 커버 오른쪽 아래(커버 안쪽)에 둔다. */
  .library-section .golden-card.album-card .item-more { grid-column: 1 / -1; grid-row: 1; margin: 0 calc(4.3cqw + 2px) 4px 0; }
  .item-more-menu {
    position: fixed;
    z-index: 1000;
    display: grid;
    min-width: 132px;
    padding: 6px;
    border: 1px solid var(--line, #8883);
    border-radius: 14px;
    background: var(--surface-2, #fff);
    box-shadow: 0 12px 32px #0000004d;
  }
  .item-more-menu button {
    padding: 11px 14px;
    border: 0 !important;
    border-radius: 9px;
    background: none !important;
    color: var(--ink, inherit);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
  }
  .item-more-menu button:active { background: #8882 !important; }
  .item-more-menu button.is-danger { color: #e5484d; }
  .item-more-menu button:disabled { opacity: .35; }
}

/* 회원 태그 시트(friend-tag.js): 아래에서 올라오는 친구 목록 → 공유할지 묻기. 줄 모양은 친구 페이지와 같게
   [동그라미 44px | 굵은 이름 / 회색 소개 | 오른쪽 끝 작은 글], 줄 사이 1px 선. */
.friend-tag-sheet {
  inset: auto 0 0 0;
  width: 100%;
  max-width: 560px;
  max-height: min(78vh, 640px);
  margin: 0 auto;
  padding: 0 0 max(14px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--surface, #fff);
  color: var(--ink, #111);
  overflow: hidden;
}
.friend-tag-sheet[open] { display: flex; flex-direction: column; animation: friend-tag-up .22s ease; }
.friend-tag-sheet::backdrop { background: #0009; }
@keyframes friend-tag-up { from { transform: translateY(40px); opacity: 0; } }
.friend-tag-head { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 16px 20px 2px 12px; }
.friend-tag-close { order: -1; }
.friend-tag-head strong { font-size: 17px; }
.friend-tag-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0 !important; background: none !important; color: var(--ink-dim, #888) !important; }
.friend-tag-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.friend-tag-sub { margin: 0 20px 10px; color: var(--ink-dim, #888); font-size: 13px; }
.friend-tag-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.friend-tag-note { margin: 18px 20px 24px; color: var(--ink-dim, #888); font-size: 14px; text-align: center; }
.friend-tag-list { display: grid; }
.friend-tag-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 20px;
  border: 0 !important;
  border-bottom: 1px solid var(--line, #8883) !important;
  border-radius: 0;
  background: none !important;
  color: inherit;
  text-align: left;
}
.friend-tag-row:last-child { border-bottom: 0 !important; }
.friend-tag-row:active { background: #8881 !important; }
.friend-tag-text { display: grid; gap: 2px; min-width: 0; }
.friend-tag-text strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-tag-text small { color: var(--ink-dim, #888); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-tag-row em { color: var(--ink-dim, #888); font-size: 12px; font-style: normal; }
.friend-tag-letter { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #8883; font-weight: 700; }
.friend-tag-ask { padding: 14px 20px 6px; }
.friend-tag-ask p { margin: 0 0 16px; font-size: 16px; line-height: 1.45; text-align: center; }
.friend-tag-ask .friend-tag-error { margin-top: -8px; color: #e5484d; font-size: 13px; }
.friend-tag-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.friend-tag-actions button { padding: 13px; border: 0 !important; border-radius: 12px; background: #8882 !important; color: inherit; font-size: 15px; font-weight: 700; }
.friend-tag-actions button.is-primary { background: var(--info, #3b82f6) !important; color: #fff !important; }
.friend-tag-actions button:disabled { opacity: .5; }
.friend-tag-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2000;
  padding: 10px 16px; border-radius: 999px; background: #000c; color: #fff; font-size: 14px;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease;
}
.friend-tag-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }

/* 앨범 카드: 편집한 커버를 그리는 동안 대표 사진을 숨겨 대표 사진 → 커버 깜빡임을 없앤다(app.js card·hydrateDesignedCovers).
   다 그린 커버는 살짝 떠오른다. 커버를 못 그리면 awaiting-design 을 떼어 대표 사진을 보여 준다. */
.item-cover.awaiting-design { opacity: 0; }
.item-cover.item-cover-designed.is-fresh { animation: isle-cover-in .18s ease-out; }   /* 처음 그린 때만(다시 그릴 때는 그대로) */
@keyframes isle-cover-in { from { opacity: 0; } }

/* 마이페이지 앱 데이터 삭제(library-mobile.js, 2026-10-07) — 앱에서만 생긴다 */
.app-data-panel .app-data-reset { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid rgba(229, 72, 77, .45); background: transparent; color: #e5484d; font-weight: 600; }
.app-data-dialog .app-data-choice { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.app-data-dialog .app-data-choice input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.app-data-dialog .app-data-choice span { display: grid; gap: 2px; }
.app-data-dialog .app-data-choice small { opacity: .7; line-height: 1.4; }
.app-data-dialog .app-data-go { background: #e5484d; border-color: #e5484d; }
.app-data-dialog .app-data-error { color: #e5484d; }

/* 날짜 확인 필요 카드(app.js deviceDayCard suspect, 2026-10-07) */
.date-check-card .polaroid-caption p { color: #e0a100; font-weight: 600; }

/* 홈 리딩룸 아래 안내 문구 줄(#dashboardMessage — "선택한 자료를 삭제했습니다…" 같은 결과·오류 문구)은 폰에서 아예 보이지 않는다
   (2026-10-11 사용자). 문구를 쓰는 코드(app.js message)는 그대로 둔다. */
@media (max-width: 620px) {
  #dashboardMessage { display: none !important; }
}