/* ================================================================
   Yeon's Clipboard — Simple & Modern Stylesheet
   ---------------------------------------------------------------
   디자인 원칙:
   - 심플함: 장식 최소화, 여백으로 구조 표현
   - 실용성: 자주 쓰는 기능이 즉시 접근 가능
   - 반응형: 모바일 우선, PC는 자연스럽게 확장
   - 접근성: 터치 타겟 44px, 대비 AA
   ================================================================ */

/* ---------- 테마 변수 ---------- */
:root {
    --bg-app: #f6f7f9;
    --bg-surface: #ffffff;
    --bg-surface-2: #f2f4f7;
    --bg-raised: #ffffff;
    --bg-hover: #eef1f5;
    --bg-clip-hover: #f8fafc;
    --bg-badge: #e7f0ff;
    --bg-pill: #eef1f5;
    --bg-input: #ffffff;
    --bg-input-alt: #f2f4f7;
    --bg-toast: #1a1d22;
    --bg-modal-overlay: rgba(15, 18, 25, 0.55);
    --bg-banner: #fff8e1;
    --bg-ad-card: #ffffff;
    --bg-swipe-delete: #e5484d;
    --bg-dragging: #fffbe6;

    --text-primary: #1a1d22;
    --text-secondary: #5b6472;
    --text-muted: #7a8393;
    --text-faint: #9aa3af;
    --text-note: #8a6d3b;
    --text-badge: #0b57d0;
    --text-toast: #ffffff;
    --text-banner: #7a5d00;
    --text-on-primary: #ffffff;

    --border-color: #e4e7ec;
    --border-strong: #c7ccd4;
    --border-hover: #c7ccd4;   /* 버튼 호버 시 테두리 강조 (border-strong 과 동일) */
    --border-focus: #0b63d0;
    --border-clip-hover: #c7dfff;

    --primary: #0b63d0;
    --primary-hover: #0a54b0;
    --danger: #d93440;
    --danger-hover: #b9262f;
    --danger-bg: #fef2f2;
    --success: #10a760;
    --success-hover: #0e8f52;
    --warning-border: #f0b929;

    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-raised: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-modal: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-drag: 0 12px 32px rgba(16, 24, 40, 0.20);
    --shadow-sheet: 0 -8px 24px rgba(16, 24, 40, 0.12);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

body[data-theme="dark"] {
    --bg-app: #0f1115;
    --bg-surface: #181b20;
    --bg-surface-2: #22262d;
    --bg-raised: #1c1f25;
    --bg-hover: #262a31;
    --bg-clip-hover: #1e2229;
    --bg-badge: #1e2e4a;
    --bg-pill: #262a31;
    --bg-input: #1c1f25;
    --bg-input-alt: #22262d;
    --bg-toast: #eef1f5;
    --bg-modal-overlay: rgba(0, 0, 0, 0.72);
    --bg-banner: #3a2f0b;
    --bg-ad-card: #181b20;
    --bg-swipe-delete: #b42a33;
    --bg-dragging: #2a2518;

    --text-primary: #eef1f5;
    --text-secondary: #b0b6bf;
    --text-muted: #8a9199;
    --text-faint: #6f7680;
    --text-note: #f0c674;
    --text-badge: #8ab4f8;
    --text-toast: #1a1d22;
    --text-banner: #f0c674;
    --text-on-primary: #ffffff;

    --border-color: #2a2f37;
    --border-strong: #3d434d;
    --border-hover: #3d434d;   /* 버튼 호버 시 테두리 강조 (border-strong 과 동일) */
    --border-focus: #6ea2ff;
    --border-clip-hover: #2e466e;

    --primary: #4c8bf5;
    --primary-hover: #6ea2ff;
    --danger: #ef5a6a;
    --danger-hover: #f37884;
    --danger-bg: #2a1515;
    --success: #3bb67a;
    --success-hover: #4fc98d;
    --warning-border: #f0c674;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
    --shadow-drag: 0 12px 32px rgba(0, 0, 0, 0.65);
    --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.6);
}

/* OS 기본 다크 + data-theme 미설정 시 자동 다크 */
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) {
        --bg-app: #0f1115;
        --bg-surface: #181b20;
        --bg-surface-2: #22262d;
        --bg-raised: #1c1f25;
        --bg-hover: #262a31;
        --bg-clip-hover: #1e2229;
        --bg-badge: #1e2e4a;
        --bg-pill: #262a31;
        --bg-input: #1c1f25;
        --bg-input-alt: #22262d;
        --bg-toast: #eef1f5;
        --bg-modal-overlay: rgba(0, 0, 0, 0.72);
        --bg-banner: #3a2f0b;
        --bg-ad-card: #181b20;
        --bg-swipe-delete: #b42a33;
        --bg-dragging: #2a2518;
        --text-primary: #eef1f5;
        --text-secondary: #b0b6bf;
        --text-muted: #8a9199;
        --text-faint: #6f7680;
        --text-note: #f0c674;
        --text-badge: #8ab4f8;
        --text-toast: #1a1d22;
        --text-banner: #f0c674;
        --border-color: #2a2f37;
        --border-strong: #3d434d;
        --border-focus: #6ea2ff;
        --border-clip-hover: #2e466e;
        --primary: #4c8bf5;
        --primary-hover: #6ea2ff;
        --danger: #ef5a6a;
        --danger-hover: #f37884;
        --danger-bg: #2a1515;
        --success: #3bb67a;
        --success-hover: #4fc98d;
        --warning-border: #f0c674;
    }
}

html, body, .btn, .clip-item, .modal-content, header, #inputArea, .side-ad-card {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    width: 100%;
    /* body 스크롤 완전 차단 — #app 내부의 #clipListContainer 만 스크롤.
       이게 없으면 모바일에서 body 전체 스크롤이 발생해 입력창이 화면 밖으로 밀림.
       [중요] body에 position:fixed 는 사용하지 않음 — Pointer Events의 hit-testing과
              드래그 clone의 좌표계를 망가뜨릴 수 있기 때문. overflow:hidden 만으로 충분. */
    overflow: hidden;
    /* iOS Safari: pull-to-refresh 와 바운스 스크롤 차단 */
    overscroll-behavior: none;
    /* 터치 드래그에서 브라우저의 기본 스크롤/줌 동작 최소화 — 필요한 곳에서 명시적 개별 override */
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    background: var(--bg-app);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.hidden { display: none !important; }
.hidden-legacy { position: absolute; left: -9999px; pointer-events: none; }

/* ---------- 사이드 광고 (PC) ---------- */
.side-ad {
    position: fixed;
    top: 96px;
    width: 180px;
    z-index: 20;
    display: none;
}
.side-ad-card {
    min-height: min(600px, calc(100vh - 140px));
    max-height: calc(100vh - 140px);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-ad-card);
    box-shadow: var(--shadow-card);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-secondary);
    gap: 10px;
    overflow: hidden;
}
.side-ad-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-pill);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.side-ad-copy { font-size: 14px; }
.side-ad-note { font-size: 12px; color: var(--text-muted); }
.side-ad.is-live .side-ad-card { padding: 8px; border-style: solid; }
.adsbygoogle-block { display: block; width: 100%; min-height: 600px; }

/* ---------- 모바일 상단 광고 ---------- */
#topMobileAd {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
    padding-top: calc(8px + var(--safe-top));
    display: none;
}
#topMobileAd .top-ad-card {
    min-height: 56px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-ad-card);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}
#topMobileAd .top-ad-label {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-pill);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}
#topMobileAd.is-live .top-ad-card { border-style: solid; padding: 0; }
.adsbygoogle-top { display: block; width: 100%; min-height: 60px; }

/* ---------- 앱 레이아웃 ---------- */
#app {
    /* [틀고정 핵심] position: fixed 로 viewport 기준 절대 고정.
       어떤 상황(textarea 포커스, 키보드 올라옴, URL바 수축)에서도 움직이지 않음.
       flex 레이아웃으로 header → clipList(스크롤) → inputArea 분배.
       [주의] transform 은 사용하지 않음 — transform 은 자식의 position:fixed 에 대한
              containing block 을 새로 만들어 모달/토스트/드래그 clone 위치를 어긋나게 함. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
    /* 높이 우선순위: JS가 설정한 --app-h (visualViewport 기반, 키보드 대응) > 100dvh > 100vh
       구형 브라우저 폴백 순서: 100vh → 100dvh → --app-h (나중에 쓴 것이 이김) */
    height: 100vh;
    height: 100dvh;
    height: var(--app-h, 100dvh);
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    box-shadow: 0 0 0 1px var(--border-color);
    overflow: hidden;
}

header {
    background: var(--bg-surface);
    padding: 12px 16px 10px;
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    /* flex 첫 아이템 + flex-shrink: 0 으로 상단 자연 고정.
       #app 이 overflow: hidden 이므로 sticky 는 무의미. */
    z-index: 10;
    min-width: 0;   /* flexbox overflow 방지 */
}

/* 상단 타이틀 바 */
.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    min-width: 0;
    width: 100%;
}
h1 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;   /* ellipsis 동작을 위해 필요 */
    flex: 1 1 auto;
}
.header-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* 헤더 하단 안전 안내 문구 */
.header-safety-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.header-safety-note .safety-icon {
    flex-shrink: 0;
    font-size: 13px;
    margin-top: 1px;
}

/* 아이콘 버튼 (44px 터치 타겟)
   [UX 개선] 배경 투명 → 반투명 배경으로 "버튼 느낌" 명확화 */
.icon-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s;
    font-family: inherit;
    gap: 4px;
}
.icon-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover, var(--border-color));
}
.icon-btn:active { background: var(--bg-pill); transform: scale(0.96); }
.icon-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
/* 편집 모드 진입 시 "완료" 상태 — 파란색 primary 스타일로 눈에 띄게 */
.icon-btn.primary {
    background: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    min-width: 56px;
    padding: 0 14px;
}
.icon-btn.primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* 검색 + 그룹 필터 */
.search-row {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;   /* flex 항목 overflow 방지 */
    width: 100%;
}
.search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
}
#searchBox {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    /* [iOS auto-zoom 방지] 16px 이상 */
    font-size: 16px;
    background: var(--bg-input-alt);
    color: var(--text-primary);
    min-height: 38px;
    font-family: inherit;
}
#searchBox:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-input);
    box-shadow: 0 0 0 3px rgba(11, 99, 208, 0.12);
}
.group-pill {
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--bg-input-alt);
    color: var(--text-primary);
    min-height: 38px;
    font-family: inherit;
    max-width: 140px;
    cursor: pointer;
}
.group-pill:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* 편집 모드 액션바 */
.edit-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

/* 공통 버튼 */
.btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
    min-height: 36px;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.danger.ghost { border-color: var(--border-color); }
.btn.primary {
    background: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
}
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.ghost {
    background: var(--bg-surface-2);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.btn.ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---------- 클립 목록 ---------- */
/* [레이아웃] 스크롤은 #clipListContainer 가 담당.
   #clipList 는 클립 카드만, 푸터는 컨테이너 내 마지막 요소로 스크롤 끝에서만 보임.
   이 구조로 body 스크롤이 사라지고, 입력창이 항상 하단 고정됨. */
#clipListContainer {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
}
#clipList {
    padding: 12px 16px 16px;
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;  /* 푸터가 항상 아래로 밀리도록 */
}

/* ============================================================
   상단 고정 (Pin) 섹션 — #clipListContainer 의 첫 자식, #clipList 위에 배치
   ============================================================ */
.pinned-section {
    flex-shrink: 0;
    background: var(--bg-app);
    /* 시각적 분리 — 고정 영역과 일반 영역 사이에 미세한 구분선 */
    border-bottom: 1px dashed var(--border-color);
    margin: 0;
    padding: 0;
}
.pinned-section.hidden { display: none; }

.pinned-header {
    /* 버튼이지만 기본 스타일 제거 후 토글 행처럼 보이게 */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pinned-header:active {
    background: var(--bg-hover);
}
.pinned-header-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pinned-count {
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 2px;
}
.pinned-toggle-icon {
    color: var(--text-muted);
    font-size: 11px;
    transition: transform 0.2s ease;
}
.pinned-section.collapsed .pinned-toggle-icon {
    transform: rotate(-90deg);  /* 접힘 시 ▶ 모양으로 */
}
.pinned-section.collapsed .pinned-list {
    display: none;
}

.pinned-list {
    padding: 12px 16px 14px;
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 카드 안의 핀 배지 — 시간 옆에 작게 */
.clip-pin-badge {
    font-size: 12px;
    line-height: 1;
    margin-left: 2px;
    opacity: 0.85;
}

/* 고정된 카드는 미세한 좌측 강조 — 시각적으로 "특별함" */
.pinned-list .clip-item-wrapper .clip-item {
    border-left: 3px solid var(--primary);
}

.clip-item-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    animation: slideIn 0.2s;
}
.clip-item-wrapper.is-dragging {
    z-index: 100;
    opacity: 0.95;
    overflow: visible;
}
.clip-item-wrapper.is-dragging .clip-item {
    box-shadow: var(--shadow-drag);
    background: var(--bg-dragging);
    transform: scale(1.02);
}
.clip-item-wrapper.drag-placeholder {
    opacity: 0.08;
    pointer-events: none;
}
.clip-item-wrapper.drag-placeholder .clip-item {
    border-style: dashed;
    background: transparent;
}
.clip-item-wrapper .swipe-delete-bg {
    position: absolute;
    inset: 0;
    background: var(--bg-swipe-delete);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 24px;
    font-weight: 600;
    font-size: 14px;
    gap: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.clip-item-wrapper.swiping .swipe-delete-bg { opacity: 1; }

.clip-item {
    position: relative;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    will-change: transform;
    touch-action: pan-y;
    box-shadow: var(--shadow-card);
}
.clip-item.clickable {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.clip-item.clickable:hover {
    background: var(--bg-clip-hover);
    border-color: var(--border-clip-hover);
}
.clip-item.clickable:active { transform: scale(0.995); }
.clip-item.clickable:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* 편집 모드 — 카드 본문의 텍스트 선택/컨텍스트 메뉴 방지.
   touch-action: none 은 오직 드래그 핸들(.clip-drag-handle)에만 걸림 — 스크롤 조상까지
   전파하면 편집 모드에서 리스트 스크롤이 막혀 사용자가 드래그 이동 범위가 제한됨.
   현재 설계는 핸들에서 즉시 setPointerCapture 하므로, 조상 touch-action 상속이 불필요함. */
body.edit-mode-on .clip-item {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* 편집 모드에서는 자식 텍스트에서도 선택/캘릭 방지 */
body.edit-mode-on .clip-text,
body.edit-mode-on .clip-image,
body.edit-mode-on .clip-item-body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;  /* 편집 모드에서 본문 터치는 비활성 — 드래그는 핸들만 */
}
/* 체크박스, 버튼, 드래그 핸들은 예외 — 이들은 이벤트를 받아야 함 */
body.edit-mode-on .clip-checkbox,
body.edit-mode-on .clip-checkbox-wrapper,
body.edit-mode-on .clip-drag-handle,
body.edit-mode-on .clip-item button {
    pointer-events: auto;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.clip-checkbox-wrapper {
    flex-shrink: 0;
    padding-top: 2px;
    display: none;
}
body.edit-mode-on .clip-checkbox-wrapper { display: block; }
.clip-checkbox {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* 드래그 핸들 — 편집 모드에서 카드 우측에 표시.
   [설계]
   - 버튼으로 만들어 접근성/시맨틱 확보
   - 48x56 터치 영역 (iOS HIG / Material 권장 최소 44x44 이상)
   - 시각적으로 "잡을 수 있는 손잡이" 느낌
   - touch-action: none 으로 OS 스크롤과의 경쟁 차단 (버튼 영역에서만) */
.clip-drag-handle {
    flex-shrink: 0;
    width: 44px;
    min-height: 48px;
    align-self: stretch;  /* 카드 높이 전체 커버 */
    display: none;         /* 기본 숨김. edit-mode-on 에서 활성화 */
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;  /* 카드 안쪽 padding 에 맞춰 자연스럽게 배치 */
    background: var(--bg-input-alt);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s, border-color 0.15s;
}
body.edit-mode-on .clip-drag-handle { display: flex; }
.clip-drag-handle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.clip-drag-handle:active {
    cursor: grabbing;
    background: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
}

/* 6개 점을 2열 3행 그리드로 배치 — "쥘 수 있는 손잡이" 느낌 */
.drag-dots {
    display: grid;
    grid-template-columns: 4px 4px;
    grid-template-rows: 4px 4px 4px;
    gap: 4px;
    pointer-events: none;  /* 점 자체는 이벤트 무시 — 핸들 버튼이 받음 */
}
.drag-dots > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    display: block;
}

.clip-main { flex: 1; min-width: 0; }
.clip-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 8px;
}
.clip-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.clip-time { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.group-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-badge);
    color: var(--text-badge);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.clip-actions {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.clip-actions button {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    min-height: 28px;
    font-family: inherit;
}
.clip-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.clip-more-btn {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    border: 1px solid var(--border-color);
    background: var(--bg-surface-2);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.clip-more-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.clip-content {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    line-height: 1.5;
    font-size: 14px;
    color: var(--text-primary);
}
.clip-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--radius-sm);
    display: block;
    margin-top: 6px;
    cursor: pointer;
    background: var(--bg-surface-2);
    /* 모바일 long-press 기본 메뉴(이미지 저장 등) 차단 — 편집 모드 드래그와 충돌 방지 */
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}
/* 편집 모드에서는 이미지 선택/드래그 기본 동작까지 완전히 차단 */
body.edit-mode-on .clip-image {
    pointer-events: none;
}
.clip-filename {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    word-break: break-all;
}

.empty-state {
    text-align: center;
    color: var(--text-faint);
    padding: 48px 20px;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- 입력 영역 ---------- */
#inputArea {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: 10px 16px;
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    padding-bottom: calc(10px + var(--safe-bottom));
    flex-shrink: 0;
    /* position: sticky 제거됨 — #app이 height 100dvh로 고정되었으므로
       flex 레이아웃의 마지막 항목으로 자연스럽게 하단 고정됨 */
}
/* [편집 모드] 입력창 완전 숨김 — 편집 모드에서는 순서 변경/삭제/그룹 변경만 하므로
   텍스트 입력이 불필요. 또한 입력창을 터치하면 모바일 키보드가 올라오면서 레이아웃이
   밀리는 문제가 있어, 아예 숨김 처리.
   편집 모드 종료 시 자동으로 다시 표시되며, textInput 의 작성 중이던 값은 유지됨. */
body.edit-mode-on #inputArea {
    display: none;
}
.input-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.input-topbar-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}
#groupInput {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    /* [iOS auto-zoom 방지] 16px 이상으로 유지 */
    font-size: 16px;
    background: var(--bg-input-alt);
    color: var(--text-primary);
    min-height: 30px;
    font-family: inherit;
    flex: 1;
    max-width: 200px;
}
#groupInput:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-input);
}

#inputWrapper {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
#textInput {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    /* [iOS auto-zoom 방지] iOS Safari/Chrome 은 input/textarea font-size 가 16px 미만이면
       포커스 시 자동으로 화면을 확대함. 16px 이상이면 확대 안 됨. */
    font-size: 16px;
    resize: none;
    max-height: 120px;
    font-family: inherit;
    background: var(--bg-input-alt);
    color: var(--text-primary);
    min-height: 40px;
    line-height: 1.4;
}
#textInput:focus {
    outline: none;
    border-color: var(--border-focus);
    background: var(--bg-input);
    box-shadow: 0 0 0 3px rgba(11, 99, 208, 0.1);
}

#fileBtn, #sendBtn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}
#fileBtn {
    background: var(--bg-input-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
#fileBtn:hover { background: var(--bg-hover); color: var(--text-primary); }
#fileBtn:active { transform: scale(0.93); }

/* [모바일 제한] 터치 기기에서는 이미지 첨부·복사 API가 안정적이지 않음.
   pointer: coarse = 주된 입력 장치가 손가락. 하이브리드 기기도 터치가 우선이면 숨김.
   이미지 프리셋 관련 UI 자체를 제거해 사용자 혼선 방지.

   [중요] @media 와 .is-touch-device 클래스 두 경로로 확실하게 숨김.
   JS가 로드되기 전에도 @media로 먼저 숨기고, JS가 판정 후 더 정확한 class로 보강. */
@media (pointer: coarse) {
    #fileBtn { display: none !important; }
    #fileInput { display: none !important; }
}
html.is-touch-device #fileBtn,
html.is-touch-device #fileInput {
    display: none !important;
}
/* 터치 기기에서 이미지 클립의 인라인 "다운로드" 액션 버튼도 숨김 (이중 안전장치).
   뷰포트 600px 이하에선 .clip-actions 전체가 숨겨지지만, 가로 넓은 태블릿 등에서는
   @media만으로는 숨겨지지 않으므로 touch device 클래스로 확실히 숨김. */
html.is-touch-device .clip-actions button[data-action="download"] {
    display: none !important;
}
.input-hint-mobile { display: none; }
#sendBtn {
    background: var(--primary);
    color: var(--text-on-primary);
}
#sendBtn:hover { background: var(--primary-hover); }
#sendBtn:active { transform: scale(0.93); }
#sendBtn:disabled { background: var(--border-strong); cursor: not-allowed; }
#fileInput { display: none; }

/* ---------- 토스트 ---------- */
#toast {
    position: fixed;
    bottom: calc(100px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-toast);
    color: var(--text-toast);
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 3000;
    max-width: calc(100% - 32px);
    text-align: center;
    box-shadow: var(--shadow-raised);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#toast.show {
    opacity: 0.98;
    pointer-events: auto;
}
#toast .toast-action {
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: inherit;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
#toast .toast-action:hover { background: rgba(255, 255, 255, 0.28); }
#toast .toast-action:active { background: rgba(255, 255, 255, 0.38); }

/* ---------- 배지 ---------- */
.offline-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-pill);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ---------- 편집 모드 배너 ---------- */
.edit-mode-banner {
    background: var(--bg-banner);
    border-bottom: 1px solid var(--warning-border);
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-banner);
    text-align: center;
    font-weight: 500;
}
.edit-mode-banner.has-pending {
    font-weight: 600;
    animation: pendingPulse 1.6s ease-in-out infinite;
}
@keyframes pendingPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.72; }
}

/* ---------- 모달 ---------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-modal-overlay);
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
    animation: modalFadeIn 0.16s ease-out;
}
.modal.show { display: flex; }

#confirmModal,
#lockSetupModal {
    z-index: 6000;
}

#confirmMessage,
#lockSetupHelp {
    white-space: pre-wrap;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.modal-content {
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 22px;
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal);
    animation: modalSlideUp 0.2s ease-out;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.modal-content.large { max-width: 520px; }
.modal-content h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.modal-content p { margin-bottom: 14px; line-height: 1.55; }
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.modal-actions-spaced { margin-top: 14px; }
.select-compact { width: auto; min-width: 120px; }
.modal-help {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: -4px;
    margin-bottom: 14px;
    line-height: 1.55;
}

.welcome-lead {
    line-height: 1.65;
    margin-bottom: 14px;
    font-size: 14px;
}
.welcome-tips {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tip-item {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 !important;
    padding: 8px 10px;
    background: var(--bg-surface-2);
    border-radius: var(--radius-sm);
}
.tip-item b { color: var(--text-primary); }

.modal-textarea {
    width: 100%;
    min-height: 220px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    /* [iOS auto-zoom 방지] 16px 이상 */
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
}
.modal-textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(11, 99, 208, 0.12);
}

.modal-field { margin-bottom: 14px; }
.modal-field:last-of-type { margin-bottom: 14px; }
.modal-field.hidden { display: none; }
.modal-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 6px;
}
.modal-select,
.modal-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    /* [iOS auto-zoom 방지] 16px 이상 */
    font-size: 16px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
}
.modal-select:focus,
.modal-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(11, 99, 208, 0.12);
}

/* ---------- 설정 모달 ---------- */
.setting-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.setting-section:last-of-type {
    border-bottom: none;
    margin-bottom: 14px;
}
.setting-section-title {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}
.setting-label-wrap {
    flex: 1;
    min-width: 0;
}
.setting-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.setting-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.setting-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 8px;
}
.setting-buttons .btn {
    flex: 0 1 auto;
    min-height: 34px;
    font-size: 12px;
}

/* ---------- 잠금 화면 ---------- */
.lock-screen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: var(--bg-app);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-top: calc(24px + var(--safe-top));
    padding-bottom: calc(24px + var(--safe-bottom));
}
.lock-screen.hidden { display: none; }
.lock-panel {
    max-width: 360px;
    width: 100%;
    background: var(--bg-surface);
    padding: 28px 22px 22px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised);
    text-align: center;
}
.lock-icon { font-size: 40px; margin-bottom: 8px; }
.lock-panel h2 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.lock-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.lock-hint {
    font-size: 12px;
    color: var(--danger);
    margin-top: 10px;
    min-height: 16px;
}
.lock-warning-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 14px;
    line-height: 1.5;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

/* ---------- 바텀시트 ---------- */
#bottomSheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: var(--bg-modal-overlay);
    align-items: flex-end;
    justify-content: center;
}
#bottomSheet.show { display: flex; }
#bottomSheet .sheet-panel {
    width: 100%;
    max-width: 560px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    box-shadow: var(--shadow-sheet);
    padding: 6px 0 calc(12px + var(--safe-bottom));
    animation: sheetUp 0.22s ease-out;
    max-height: 80vh;
    overflow-y: auto;
}
@keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    margin: 8px auto 10px;
}
.sheet-btn {
    width: 100%;
    padding: 14px 20px;
    text-align: left;
    background: none;
    border: 0;
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    font-family: inherit;
}
.sheet-btn:hover, .sheet-btn:active { background: var(--bg-hover); }
.sheet-btn.danger { color: var(--danger); }
.sheet-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* ---------- 도움말 모달 ---------- */
.help-section {
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.help-section:last-of-type {
    border-bottom: none;
    margin-bottom: 14px;
    padding-bottom: 0;
}
.help-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.help-section p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.help-section p:last-child { margin-bottom: 0; }
.help-section ul {
    padding-left: 18px;
    margin-bottom: 6px;
}
.help-section li {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.help-section li b { color: var(--text-primary); }
.help-section p b { color: var(--text-primary); }
.help-legal-links a {
    color: var(--primary);
    text-decoration: none;
}
.help-legal-links a:hover { text-decoration: underline; }

/* FAQ details/summary */
.faq-item {
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-surface-2);
}
.faq-item summary {
    cursor: pointer;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    list-style: none;
    position: relative;
    padding-right: 32px;
    transition: background 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 400;
    transition: transform 0.2s;
}
.faq-item[open] summary::after {
    content: "−";
}
.faq-item summary:hover {
    background: var(--bg-hover);
}
.faq-item p {
    padding: 0 12px 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.65;
}

/* ---------- 앱 푸터 ----------
   [UX] #clipListContainer 내부 마지막 자식으로 배치됨.
   사용자가 스크롤 끝까지 내리면 자연스럽게 보임 — 평소엔 안 보여서 입력창을 가리지 않음. */
.app-footer {
    background: var(--bg-app);
    padding: 18px 16px 24px;
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    text-align: center;
    flex-shrink: 0;
    margin-top: auto;  /* 리스트 비어있을 때도 컨테이너 하단에 붙음 */
}
.app-footer-inner {
    max-width: 800px;
    margin: 0 auto;
}
.app-footer-copyright {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.app-footer-links {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
}
.app-footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
}
.app-footer-links a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}
.app-footer-links span {
    color: var(--text-faint);
}

/* ---------- 레거시 드롭다운 (JS 참조용, 안 보임) ---------- */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
}
.dropdown.show .dropdown-content { display: block; }

/* ---------- 반응형 ---------- */
/* PC (1208px 이상) — 항상 양쪽에 사이드 광고 2개 노출 (고정 배치).
   앱 폭 800px + 사이드 광고 180px × 2 + 여백을 포함한 최소 값. */
@media (min-width: 1208px) {
    .side-ad { display: block; }
    /* 좁은 PC(~1480px)에서도 겹치지 않도록 위치 계산을 뷰포트 기반으로 보강 */
    .side-ad-left  { left:  max(12px, calc(50% - 400px - 180px - 16px)); }
    .side-ad-right { right: max(12px, calc(50% - 400px - 180px - 16px)); }
}

/* 모바일/태블릿 (1207px 이하) — 사이드 광고 숨김, 상단 모바일 광고만 */
@media (max-width: 1207px) {
    .side-ad { display: none !important; }
    #topMobileAd { display: block; }
}

/* 태블릿 / 작은 PC — 900px 이하 */
@media (max-width: 900px) {
    h1 { font-size: 16px; }
    #app { box-shadow: none; }
    header { padding: 10px 14px 8px; }
}

/* 모바일 — 600px 이하 */
@media (max-width: 600px) {
    h1 { font-size: 15px; }
    header { padding: 10px 12px 8px; }
    .header-main { margin-bottom: 8px; }
    .icon-btn { min-width: 38px; height: 38px; font-size: 17px; }
    .icon-btn.primary { min-width: 54px; font-size: 12.5px; }

    .header-safety-note {
        font-size: 10.5px;
        padding: 7px 9px;
    }

    #clipList { padding: 10px 12px 14px; }
    .clip-item { padding: 12px; gap: 8px; }
    .clip-actions { display: none; }
    .clip-more-btn { display: inline-flex; }
    .clip-header { flex-direction: row; margin-bottom: 6px; }
    .clip-time { font-size: 10px; }
    .clip-content { font-size: 14px; }

    /* 그룹 셀렉트 축소 — 16px 유지 (iOS auto-zoom 방지). 텍스트는 max-width 로 줄임 */
    .group-pill { max-width: 96px; font-size: 13px; padding: 9px 8px; }
    /* #searchBox 는 16px 유지 — 모바일에서도 iOS auto-zoom 방지 우선 */

    #inputArea { padding: 8px 12px; padding-bottom: calc(8px + var(--safe-bottom)); }
    #inputWrapper { gap: 6px; }
    #groupInput { max-width: 120px; }
    /* #textInput 도 16px 유지 — iOS 우선 */
    #fileBtn, #sendBtn { width: 38px; height: 38px; font-size: 18px; }

    .edit-actions .btn { font-size: 12px; padding: 6px 10px; min-height: 32px; flex: 1 1 auto; }

    .modal-content { padding: 18px 16px; border-radius: var(--radius-md); }
    .setting-buttons .btn { flex: 1 1 calc(50% - 4px); }

    /* 모바일에서 편집 모드 메모리 배너 사이즈 */
    .edit-mode-banner { font-size: 11px; padding: 7px 12px; }

    /* 웰컴 모달 tip 항목 사이즈 */
    .tip-item { font-size: 12px; padding: 7px 9px; }
}

/* 좁은 모바일 — 400px 이하 */
@media (max-width: 400px) {
    .header-right { gap: 2px; }
    .icon-btn { width: 36px; height: 36px; font-size: 16px; }
    .group-pill { max-width: 82px; font-size: 12px; }
    #groupInput { max-width: 100px; }  /* font-size 16px 유지 (iOS auto-zoom 방지) */
    .header-safety-note { font-size: 10px; line-height: 1.4; }
}

/* 아주 작은 화면 — 340px 이하 */
@media (max-width: 340px) {
    .group-pill { display: none; }  /* 공간이 너무 작으면 그룹 필터 숨김 */
    h1 { font-size: 14px; }
}

/* PC — 인풋은 더 넉넉하게 (900px+ 은 데스크탑/대형 태블릿이라 iOS auto-zoom 영향 없음) */
@media (min-width: 900px) {
    #textInput { font-size: 14px; }
    .clip-content { font-size: 14px; }
}

/* ============================================================
   [모바일 Sticky Hover 수정 — 매우 중요]
   Android Chrome / 모바일 브라우저는 터치 후 :hover 상태를 다음 터치까지 유지함.
   이 때문에 버튼을 탭하고 나면 배경색이 남아 "선택된 것처럼" 보이는 현상 발생.

   해결: hover: none (터치 전용 기기) 환경에서는 모든 :hover 스타일을 무력화.
   :active 와 :focus-visible 은 실제 동작 순간에만 적용되므로 문제없이 유지.

   @media (hover: none) 는 2018년 이후 모든 주요 브라우저에서 지원됨.
   ============================================================ */
@media (hover: none) {
    /* 모든 버튼/상호작용 요소의 hover 스타일 제거 — 기본 상태로 복귀 */
    .btn:hover,
    .btn.danger:hover,
    .btn.primary:hover,
    .btn.ghost:hover,
    .icon-btn:hover,
    .icon-btn.primary:hover,
    .clip-item.clickable:hover,
    .clip-drag-handle:hover,
    .clip-actions button:hover,
    .clip-more-btn:hover,
    #fileBtn:hover,
    #sendBtn:hover,
    #toast .toast-action:hover,
    .help-legal-links a:hover,
    .faq-item summary:hover,
    .app-footer-links a:hover {
        background: initial;
        background-color: inherit;
        color: inherit;
        border-color: inherit;
        text-decoration: none;
    }

    /* 특정 요소는 base 상태의 배경을 명시적으로 복원 */
    .btn:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); }
    .btn.danger:hover { background: var(--bg-surface); color: var(--danger); border-color: var(--danger); }
    .btn.primary:hover { background: var(--primary); color: var(--text-on-primary); border-color: var(--primary); }
    .btn.ghost:hover { background: var(--bg-surface-2); color: var(--text-secondary); border-color: var(--border-color); }
    .icon-btn:hover { background: var(--bg-surface-2); color: var(--text-primary); border-color: var(--border-color); }
    .icon-btn.primary:hover { background: var(--primary); color: var(--text-on-primary); border-color: var(--primary); }
    .clip-drag-handle:hover { background: var(--bg-input-alt); color: var(--text-secondary); border-color: var(--border-color); }
    #sendBtn:hover { background: var(--primary); }
    #fileBtn:hover { background: var(--bg-input-alt); color: var(--text-secondary); }
    .clip-more-btn:hover { background: transparent; color: var(--text-muted); }
}