/* ============================================================
   디자인 시스템 — 시안(모바일 앱) 참고
   패턴: 흰 배경 + 카드 그림자 / 히어로 배너 / 아이콘 카테고리 그리드
        / 2열 카드 그리드 / 중앙 FAB / 아이콘 중심 탭바
   컬러는 브랜드 정서(따뜻한 코랄 = "소망의 아카이브")를 유지한다.
   파랑 계열로 바꾸려면 --brand 계열 토큰만 교체하면 된다.
   ============================================================ */
:root {
    --brand:        #ff7043;
    --brand-strong: #f4511e;
    --brand-weak:   #fff1ec;
    --ink:          #1f2024;
    --ink-sub:      #6b7280;
    --ink-faint:    #9ca3af;
    --line:         #eceff3;
    --bg:           #f5f6f8;
    --surface:      #ffffff;
    --done:         #2e7d32;
    --done-weak:    #e8f5e9;
    --radius:       1rem;
    --radius-sm:    .7rem;
    --shadow:       0 2px 10px rgba(17, 24, 39, .06);
    --header-h:     3.5rem;
}

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

html { height: 100%; }
/* [앱 셸] 문서(body)는 스크롤하지 않고 .wrap 안쪽만 스크롤한다.
   position:fixed 로 탭바를 붙이면 iOS 고무줄 스크롤에서 탭바·FAB가 콘텐츠와 함께
   위로 딸려 올라간다(실기기에서 확인). 헤더·탭바를 flex 구조로 고정하면 그 현상이 사라진다. */
body {
    font-family: -apple-system, "Apple SD Gothic Neo", "Pretendard", sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* 문서 스크롤 자체를 없앤다 */
    overscroll-behavior: none;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
.wrap {
    flex: 1;
    min-height: 0;                 /* flex 자식이 넘칠 때 스크롤되게 하는 필수 값 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    padding: .9rem 1.1rem 1.4rem;
}

/* ── 상단 헤더 (로고 · 검색 · 프로필) ── */
.appbar {
    flex: none; z-index: 60;
    height: var(--header-h); background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.appbar .inner {
    max-width: 30rem; height: 100%; margin: 0 auto; padding: 0 1.1rem;
    display: flex; align-items: center; justify-content: space-between;
}
.appbar .logo {
    font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--brand); text-decoration: none;
}
.appbar .actions { display: flex; gap: .35rem; }
.appbar .icon-btn {
    width: 2.2rem; height: 2.2rem; margin: 0; padding: 0;
    display: grid; place-items: center; font-size: 1.1rem;
    background: transparent; color: var(--ink-sub); border-radius: .6rem;
}
.appbar .icon-btn:hover { background: var(--bg); }

/* ── 히어로 배너 (달성률/안내) ── */
.hero {
    display: flex; align-items: center; gap: .8rem;
    background: linear-gradient(135deg, var(--brand-weak), #fff8f4);
    border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}
.hero .text { flex: 1; min-width: 0; }
.hero h1 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .3rem; letter-spacing: -.02em; }
.hero p { font-size: .82rem; color: var(--ink-sub); margin: 0; line-height: 1.5; }
.hero .emoji { font-size: 2.6rem; line-height: 1; flex: none; }
.hero .progress { margin-top: .6rem; height: .35rem; border-radius: 999px; background: #ffffff9c; overflow: hidden; }
.hero .progress > i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* ── 아이콘 카테고리 그리드 ── */
.cat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem .3rem;
    margin-bottom: 1.4rem;
}
.cat-item {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    background: none; border: none; padding: .3rem 0; margin: 0; cursor: pointer;
    font-size: .72rem; color: var(--ink-sub); width: auto;
}
.cat-item .ico {
    width: 2.9rem; height: 2.9rem; display: grid; place-items: center;
    font-size: 1.3rem; border-radius: .9rem;
    background: var(--surface); box-shadow: var(--shadow);
}
.cat-item.on { color: var(--brand); font-weight: 700; }
.cat-item.on .ico { background: var(--brand); }
.cat-item .label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 섹션 헤더 ── */
.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0 0 .7rem;
}
.section-head h2 { font-size: 1.02rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.section-head .more { font-size: .8rem; color: var(--ink-faint); text-decoration: none; }

/* ── 검색 ── */
.search-row { position: relative; margin-bottom: 1rem; }
.search-row input {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 999px; padding-left: 2.4rem;
}
.search-row::before {
    content: "🔍"; position: absolute; left: .85rem; top: 50%;
    transform: translateY(-50%); font-size: .85rem; opacity: .6;
}

/* ── 2열 카드 그리드 (시안의 핵심 패턴) ── */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.bucket-card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
}
.bucket-card .thumb {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    background: linear-gradient(135deg, #f3f4f6, #e9ebef);
    display: grid; place-items: center; font-size: 1.6rem; color: var(--ink-faint);
}
.bucket-card .body { padding: .7rem .75rem .8rem; display: flex; flex-direction: column; gap: .25rem; }
.bucket-card .title {
    font-size: .88rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bucket-card .meta {
    font-size: .74rem; color: var(--ink-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bucket-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: .15rem; }

.badge {
    font-size: .68rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px;
    background: var(--brand-weak); color: var(--brand-strong);
}
.badge.done { background: var(--done-weak); color: var(--done); }
.badge.ghost { background: var(--bg); color: var(--ink-faint); }

.empty-note {
    grid-column: 1 / -1; text-align: center; color: var(--ink-faint);
    padding: 3rem 1rem; line-height: 1.7; font-size: .9rem;
}

/* ── 하단 탭바 (아이콘 중심) ── */
.tabbar {
    flex: none; z-index: 50;
    display: flex; background: var(--surface); border-top: 1px solid var(--line);
    padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}
.tabbar a {
    flex: 1; text-align: center; text-decoration: none;
    color: var(--ink-faint); font-size: .68rem; line-height: 1.35;
}
.tabbar a .ico { display: block; font-size: 1.3rem; filter: grayscale(1); opacity: .55; }
.tabbar a.active { color: var(--brand); font-weight: 700; }
.tabbar a.active .ico { filter: none; opacity: 1; }
/* 가운데 추가 버튼 — 바 안에 들어앉되 시각적으로만 강조한다 (떠 있으면 콘텐츠를 가린다) */
.tabbar a.tab-add { color: var(--brand); font-weight: 700; }
.tabbar a.tab-add .plus {
    display: grid; place-items: center; margin: 0 auto .1rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--brand); color: #fff;
    font-size: 1.05rem; line-height: 1;
}

/* ── 폼/카드 (공통) ── */
.card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.2rem; margin-bottom: 1rem;
}
h1 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .9rem; letter-spacing: -.02em; }
h2 { font-size: 1rem; font-weight: 800; margin: 0 0 .6rem; letter-spacing: -.02em; }
p  { color: var(--ink-sub); line-height: 1.6; margin: .4rem 0; }
label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-sub); margin: .9rem 0 .3rem; }
input, textarea, select {
    width: 100%; padding: .75rem .85rem; font-size: .95rem; font-family: inherit;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
}
input:focus, textarea:focus { outline: 2px solid var(--brand-weak); border-color: var(--brand); }
textarea { min-height: 4.5rem; resize: vertical; }

button, .btn {
    display: block; width: 100%; margin-top: .9rem; padding: .8rem;
    font-size: .95rem; font-weight: 700; text-align: center; text-decoration: none;
    border: none; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--ink); color: #fff; font-family: inherit;
}
.btn-accent { background: var(--brand); color: #fff; }
.btn-sub    { background: var(--bg); color: var(--ink); }
.btn-kakao  { background: #FEE500; color: #191919; }
.btn-danger { background: var(--surface); color: #c0392b; border: 1px solid #f3d7d2; }
button:disabled { opacity: .55; cursor: default; }
.btn-row { display: flex; gap: .6rem; }
.btn-row > * { flex: 1; }

.error-msg { color: #c0392b; font-size: .85rem; margin-top: .7rem; min-height: 1.1em; }
.hint { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }
.link-row { text-align: center; margin-top: 1rem; font-size: .85rem; }
.link-row a { color: var(--ink-sub); }

/* ── 뷰 토글 (리스트/지도) ── */
.view-toggle { display: inline-flex; background: var(--bg); border-radius: 999px; padding: .2rem; }
.view-toggle button {
    margin: 0; padding: .35rem .85rem; font-size: .78rem; width: auto;
    border-radius: 999px; background: transparent; color: var(--ink-sub);
}
.view-toggle button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ── 지도 ── */
#mapView { height: 62vh; border-radius: var(--radius); background: #e9ebef; overflow: hidden; }
.map-legend { display: flex; gap: 1rem; font-size: .78rem; color: var(--ink-sub); margin-top: .6rem; }
.map-legend .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; }
.map-legend .dot.want { background: var(--brand); }
.map-legend .dot.done { background: var(--done); }

/* ── 장소 자동완성 ── */
.ac-wrap { position: relative; }
.ac-dropdown {
    position: absolute; left: 0; right: 0; z-index: 40; margin-top: .3rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .12); max-height: 15rem; overflow-y: auto;
}
.ac-item { padding: .65rem .85rem; cursor: pointer; font-size: .88rem; border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--bg); }
.ac-item small { color: var(--ink-faint); }
.ac-empty { color: var(--ink-faint); cursor: default; }

/* ── 추가 폼 ── */
.pick-row { display: flex; align-items: center; gap: .7rem; }
.pick-row input[type=file] { flex: 1; min-width: 0; font-size: .82rem; border: none; padding-left: 0; }
.pick-thumb { width: 4.5rem; height: 4.5rem; flex: none; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg); }

/* ── 정리 모드 / 상세 ── */
.organize-img, .detail-img {
    width: 100%; max-height: 38vh; object-fit: contain;
    border-radius: var(--radius-sm); background: var(--bg);
}
.progress-note { text-align: center; font-size: .82rem; color: var(--ink-faint); margin-bottom: .7rem; }
.place-line { font-size: .85rem; color: var(--ink-sub); margin: .3rem 0 .8rem; }

/* ── 추억: 비포/애프터 ── */
.ba-row { display: flex; gap: .5rem; margin-top: .7rem; }
.ba-col { flex: 1; min-width: 0; text-align: center; }
.ba-col img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: var(--radius-sm); background: var(--bg);
}
.ba-col .cap { font-size: .7rem; color: var(--ink-faint); margin-top: .25rem; }

/* ── 친구 ── */
.friend-row { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.friend-row:last-child { border-bottom: none; }
.friend-row .info { flex: 1; min-width: 0; }
.friend-row .title { font-weight: 700; font-size: .92rem; }
.friend-row .meta { font-size: .78rem; color: var(--ink-faint); }
.friend-row .avatar {
    width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%;
    background: var(--brand-weak); color: var(--brand-strong);
    display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
.btn-inline { width: auto; margin: 0; padding: .42rem .8rem; font-size: .78rem; }

/* ── iOS 설치 배너 ── */
.ios-banner {
    padding: .75rem .9rem; margin-bottom: .9rem;
    background: #fff8e1; border: 1px solid #ffe0b2; border-radius: var(--radius-sm);
    font-size: .8rem; color: #6b5b3e;
}
.ios-banner button { display: inline; width: auto; margin: 0 0 0 .5rem; padding: .2rem .6rem; font-size: .72rem; background: var(--bg); color: var(--ink-sub); }

/* 보관함 정리 배너 — 보관함이 있을 때만 홈에 나타난다 */
.inbox-banner {
    display: flex; align-items: center; gap: .6rem; cursor: pointer;
    padding: .75rem .9rem; margin-bottom: 1.2rem; border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
    font-size: .85rem; color: var(--ink);
}
.inbox-banner .emoji { font-size: 1.2rem; }
.inbox-banner > div { flex: 1; min-width: 0; }
.inbox-banner .go { font-size: .8rem; font-weight: 700; color: var(--brand); white-space: nowrap; }