:root {
  --desk: #EBEBED;        /* 바탕(책상) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --win: #FFFFFF;         /* 창·카드 */
  --bar: #F5F5F7;         /* 창 제목줄 */
  --label: #1D1D1F;
  --label2: #6E6E73;
  --label3: #AEAEB2;
  --sep: rgba(0, 0, 0, .1);
  --fill: rgba(118, 118, 128, .12);
  --blue: #007AFF;
  --red: #FF3B30;
  --sun: #E5534B;         /* 일요일·공휴일 숫자 (빨강보다 살짝 차분하게) */
  --sat: #4F7BC0;         /* 토요일 숫자 */
  --accent: #FF2D55;
  --shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.12);
  --shadow-sm: 0 0 0 .5px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
  --on-label: #fff;       /* 검정(라벨색) 바탕 위 글씨 */
  --glass: rgba(250,250,250,.94);     /* 반투명 막대·알림 */
  --glass-tab: rgba(250,250,252,.72);
  --glass2: rgba(246,246,246,.95);    /* 메뉴·경고창 */
  --pressed: #F2F2F5;     /* 누르는 동안 */
  --sel: rgba(0,0,0,.07); /* 고른 탭 캡슐 */
  --seg-on: #FFFFFF;      /* 둘 중 고르기에서 고른 칸 */
  --tick-b: rgba(60,60,67,.3);
  --dim: #D8D8DC;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
/* ── 다크모드: 설정 → 화면 모드 (자동이면 폰 설정 따라감) ── */
:root[data-theme="dark"] {
    --desk: #000000;
    --win: #1C1C1E;
    --bar: #2C2C2E;
    --label: #F5F5F7;
    --label2: #98989F;
    --label3: #5C5C61;
    --sep: rgba(255,255,255,.12);
    --fill: rgba(118,118,128,.24);
    --blue: #0A84FF;
    --red: #FF453A;
    --sun: #FF6B63;
    --sat: #6E9BE0;
    --shadow: 0 0 0 .5px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.6);
    --shadow-sm: 0 0 0 .5px rgba(255,255,255,.07);
    --on-label: #000;
    --glass: rgba(36,36,38,.92);
    --glass-tab: rgba(36,36,38,.72);
    --glass2: rgba(44,44,46,.95);
    --pressed: #2C2C2E;
    --sel: rgba(255,255,255,.12);
    --seg-on: #636366;
    --tick-b: rgba(235,235,245,.3);
    --dim: #3A3A3C;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #000000;
    --win: #1C1C1E;
    --bar: #2C2C2E;
    --label: #F5F5F7;
    --label2: #98989F;
    --label3: #5C5C61;
    --sep: rgba(255,255,255,.12);
    --fill: rgba(118,118,128,.24);
    --blue: #0A84FF;
    --red: #FF453A;
    --sun: #FF6B63;
    --sat: #6E9BE0;
    --shadow: 0 0 0 .5px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.6);
    --shadow-sm: 0 0 0 .5px rgba(255,255,255,.07);
    --on-label: #000;
    --glass: rgba(36,36,38,.92);
    --glass-tab: rgba(36,36,38,.72);
    --glass2: rgba(44,44,46,.95);
    --pressed: #2C2C2E;
    --sel: rgba(255,255,255,.12);
    --seg-on: #636366;
    --tick-b: rgba(235,235,245,.3);
    --dim: #3A3A3C;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;  color: var(--label); -webkit-font-smoothing: antialiased; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; letter-spacing: -.02em;
}
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
/* Netlify가 끼워 넣는 "Powered by Netlify" 표시 숨기기 (Netlify 설정에서 꺼도 됨) */
#nl-badge-frame, iframe[id^="nl-badge"] { display: none !important; }

/* ── 앱 틀 ── */
#app {
  position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--desk); /* 위(상태줄)부터 아래까지 한 색 */
  transition: transform .38s cubic-bezier(.32,.72,0,1), border-radius .38s, filter .38s; transform-origin: 50% 0;
  --tab-h: 60px; --tab-gap: max(10px, calc(var(--safe-bottom) - 12px)); --tab-room: calc(var(--tab-h) + var(--tab-gap));
}
#app.behind { transform: translateY(calc(var(--safe-top) + 8px)) scale(.93); border-radius: 12px; overflow: hidden; filter: brightness(.85); }
.view { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: var(--safe-top); padding-bottom: calc(var(--tab-room) + 24px); }
/* 아래 메뉴: 화면 위에 떠 있는 둥근 반투명 막대 */
.tabbar {
  position: absolute; left: 14px; right: 14px; bottom: var(--tab-gap); z-index: 10;
  max-width: 420px; margin: 0 auto; height: var(--tab-h); padding: 5px; box-sizing: border-box;
  display: flex; border-radius: 999px;
  background: var(--glass-tab); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.12);
}
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 10px; font-weight: 600; color: #6E6E73; border-radius: 999px; transition: background .2s, color .2s; }
.tabbar button.on { color: var(--label); background: var(--sel); }
.tabbar svg { width: 24px; height: 24px; }

/* ── 공통 그래픽 조각 ── */
/* 텍스트 선택 하이라이트 + 손잡이 */
/* 색은 애플 선택 파랑 하나만 — 멤버 색은 작은 점에만 */
.sel { background: rgba(0, 122, 255, .2); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 1px; }
.hs, .he { display: inline-block; position: relative; width: 2px; height: 1.2em; background: var(--blue); vertical-align: -.25em; }
.hs::before, .he::after { content: ''; position: absolute; left: 50%; width: max(8px, .34em); height: max(8px, .34em); border-radius: 50%; background: var(--blue); transform: translateX(-50%); }
.hs::before { top: calc(-1 * max(7px, .3em)); }
.he::after { bottom: calc(-1 * max(7px, .3em)); }

/* 맥 창 */
.titlebar.slim { height: 20px; padding: 0 9px; }
.titlebar.slim .lights i { width: 9px; height: 9px; } /* 맥 창 신호등 색은 iOS 코어 포인트라 유지 */
.win { background: var(--win); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.titlebar { height: 30px; display: flex; align-items: center; padding: 0 10px; background: var(--bar); border-bottom: .5px solid var(--sep); position: relative; flex: none; }
.titlebar .t { position: absolute; left: 60px; right: 60px; text-align: center; font-size: 12.5px; font-weight: 600; color: #4a4a4f; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar .tools { margin-left: auto; display: flex; gap: 2px; color: var(--label2); position: relative; }
.titlebar .tools button { width: 28px; height: 26px; display: grid; place-items: center; }
.titlebar .tools svg { width: 16px; height: 16px; stroke-width: 2; }
.lights { display: flex; gap: 7px; position: relative; z-index: 1; }
.lights i, .lights button { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); display: block; }
.lights > :nth-child(2) { background: #FEBC2E; }
.lights > :nth-child(3) { background: #28C840; }
.lights button { position: relative; }
.lights button::after { content: ''; position: absolute; inset: -12px; }

/* 알림 배너 */
.noti { display: block; width: 100%; text-align: left; background: var(--glass); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 10px 14px 12px; }
.noti + .noti { margin-top: 8px; }
.noti:active { background: var(--pressed); }
.noti-head { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--label2); letter-spacing: .4px; margin-bottom: 5px; }
.noti-head .time { margin-left: auto; letter-spacing: 0; }
.app-ic { width: 20px; height: 20px; border-radius: 5px; background: var(--c, var(--accent)); color: #fff; display: grid; place-items: center; flex: none; }
.app-ic svg { width: 13px; height: 13px; stroke-width: 2.4; }
.noti b { display: block; font-size: 15px; font-weight: 600; }
.noti p { margin: 1px 0 0; font-size: 15px; line-height: 1.35; color: var(--label); word-break: keep-all; overflow-wrap: anywhere; }
.noti p + p { margin-top: 3px; }
.noti .who { font-weight: 600; margin-right: 4px; }

/* 아이폰 편집 메뉴 (복사 | 공유 >) */
.edit-menu { display: inline-flex; background: var(--win); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; font-size: 14px; vertical-align: middle; }
.edit-menu button { padding: 7px 13px; }
.edit-menu button + button { border-left: .5px solid var(--sep); }
.edit-menu button:active { background: var(--fill); }
.edit-menu button.liked { font-weight: 600; }

/* 파인더 폴더 */
.folder { stroke: none; width: 64px; height: 50px; }
.folder .back { fill: var(--f2, #3D9BEA); }
.folder .front { fill: var(--f1, #7CC4F8); }
.folder .shine { fill: rgba(255,255,255,.25); }

/* 큰 글자 */
.big-head { padding: 10px 18px 14px; }
.big-head h1 { margin: 0; font-size: 50px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.thin { font-weight: 300; color: var(--label2); }
.label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--label2); margin: 30px 20px 10px; }
.label .add { font-size: 14px; letter-spacing: 0; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 3px; }
.label .add svg { width: 15px; height: 15px; stroke-width: 2.6; }
.empty { text-align: center; color: var(--label2); font-size: 15px; padding: 50px 32px; line-height: 1.5; }

/* ── 달력 ── */
#view-cal { display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(var(--tab-room) + 8px); }
.cal-head { padding: 0 16px 6px; flex: none; }
.topbar { display: flex; align-items: center; gap: 6px; height: 40px; }
/* 공간 고르기: [공간 색 짧은 막대] 이름 ⌄ — 막대는 일정 막대와 같은 모양 */
.space-btn { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; padding: 6px 4px; max-width: 52vw; }
.space-btn .sp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bars { display: inline-flex; gap: 2px; margin-right: 3px; flex: none; }
.sp-bars i { width: 3.5px; height: 15px; border-radius: 2px; background: var(--c); }
.space-btn svg { width: 13px; height: 13px; stroke-width: 2.8; color: var(--label2); flex: none; }
.spacer { flex: 1; }
.pill-btn { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 16px; background: var(--win); box-shadow: var(--shadow-sm); }
.round-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--label); color: var(--on-label); display: grid; place-items: center; }
.round-btn svg { width: 18px; height: 18px; stroke-width: 2.6; }
.month-row { display: flex; align-items: flex-end; gap: 6px; margin-top: 0; }
.month-row h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.month-row .year { font-size: 22px; font-weight: 300; color: var(--label2); letter-spacing: -.03em; padding-bottom: 3px; flex: 1; }
.month-nav { display: flex; gap: 2px; padding-bottom: 2px; }
.month-nav button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--label); }
.month-nav svg { stroke-width: 2.4; width: 20px; height: 20px; }
.cal-sub { display: flex; align-items: center; gap: 12px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 2px; }
.cal-sub::-webkit-scrollbar { display: none; }
.dday { font-size: 13px; color: var(--label2); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.dday svg { width: 12px; height: 12px; fill: var(--accent); stroke: none; }
.dday b { color: var(--label); font-weight: 600; }
.tag { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--label); }
.tag::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.tag.off { color: var(--label3); }
.tag.off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }

.cal-win { margin: 0 6px; flex: 1; min-height: 0; display: flex; flex-direction: column; transition: transform .15s; touch-action: pan-y; }
.cal-win.zoom-in { animation: zoomIn .28s cubic-bezier(.32,.72,0,1); }
.cal-win.zoom-out { animation: zoomOut .28s cubic-bezier(.32,.72,0,1); }
@keyframes zoomIn { from { transform: scale(.88); opacity: .4; } }
@keyframes zoomOut { from { transform: scale(1.1); opacity: .4; } }
.view-seg { margin-right: 4px; }
.view-seg button { padding: 4px 9px; font-size: 13px; }

/* 연 보기 */
.year-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 12px 10px; align-content: start; }
.mini { text-align: left; min-width: 0; }
.mini b { display: block; font-size: 15px; font-weight: 700; margin: 0 0 4px 2px; }
.mini b.now { color: var(--red); }
.mini-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1px; }
.mini-days i { font-style: normal; font-size: 8.5px; text-align: center; line-height: 13px; color: var(--label); position: relative; font-variant-numeric: tabular-nums; }
.mini-days i.red { color: var(--red); }
.mini-days i.busy::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--label2); }
.mini-days i.today { background: var(--accent); color: #fff; border-radius: 50%; font-weight: 700; }
.mini:active { opacity: .6; }

/* 주 보기 */
.week-list { flex: 1; min-height: 0; overflow-y: auto; }
.wk-day { display: flex; gap: 12px; padding: 10px 12px; min-height: 64px; cursor: pointer; }
.wk-day + .wk-day { border-top: .5px solid var(--sep); }
.wk-day:active { background: var(--fill); }
.wk-day.today { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wk-date { width: 32px; text-align: center; flex: none; }
.wk-date small { display: block; font-size: 11px; color: var(--label2); }
.wk-date b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.wk-date.red b, .wk-date.red small { color: var(--red); }
.wk-date.blue b { color: var(--blue); }
.wk-day.today .wk-date b { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 18px; }
.wk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.wk-ev { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c) 14%, transparent); border-left: 3px solid var(--c); }
.wk-ev span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wk-ev small { font-size: 12px; color: var(--label2); flex: none; }
.wk-ev.fixed { background: none; border: 0; padding: 0; font-size: 13px; color: color-mix(in srgb, var(--accent) 75%, #000); }
.wk-ev.fixed.red { color: var(--red); }
.wk-line { font-size: 13px; color: var(--label2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-empty { font-size: 13px; color: var(--label3); padding-top: 6px; }
.wk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.wk-moods { display: flex; }
.wk-moods .emo { width: 18px; height: 18px; }
.wk-thumb { width: 40px; height: 40px; border-radius: 6px; background: center/cover; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; font-weight: 600; color: var(--label2); text-align: center; padding: 5px 0; border-bottom: .5px solid var(--sep); flex: none; }
.weekdays span:first-child { color: var(--sun); }
.weekdays span:last-child { color: var(--sat); }
.grid { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(var(--weeks), minmax(0, 1fr)); touch-action: pan-y; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 0; position: relative; overflow: hidden; }
.bars { position: absolute; inset: 0; pointer-events: none; }
.bars .chip, .bars .more { position: absolute; top: calc(28px + var(--lane) * 17px); left: calc(var(--c0) * 100% / 7 + 2px); width: calc(var(--n, 1) * 100% / 7 - 4px); }
.bars .chip { pointer-events: auto; cursor: pointer; }
/* 여러 날 일정: 이어지는 막대, 가운데 제목 */
/* 공간 = 둥근 네모 ■, 사람 = 동그라미 ● (모양으로 구분) */
i.label-dot { border-radius: 3px; }
.row.cal-opt > i { border-radius: 3.5px; }
span.sp-tag::before { border-radius: 2px; }
.tag.sq::before { border-radius: 3px; }
.color-now i.sq { border-radius: 4px; }
.dot-stack .label-dot { border-radius: 3px; }

/* 기분 고르는 창 묶음 제목 */
.mood-group-title { font-size: 13px; font-weight: 600; color: var(--label2); margin: 16px 20px 4px; }
.mood-group-title:first-child { margin-top: 4px; }

/* 공간 버튼·메뉴의 색 점 */
.space-btn .label-dot, .menu .label-dot { margin-right: 0; flex: none; }
.space-btn { gap: 6px; }
.menu .label-dot { margin-left: -2px; }
.dot-stack { display: inline-flex; }
.dot-stack .label-dot { margin-right: -3px; box-shadow: 0 0 0 1.5px var(--desk); }
.dot-stack .label-dot:last-child { margin-right: 0; }

/* 일정 끌어서 옮기기 */
.chip { -webkit-touch-callout: none; }
.chip.lifted { opacity: .3; }
.drag-ghost { position: fixed !important; left: 0; top: 0; z-index: 200; pointer-events: none; height: 22px !important; line-height: 22px !important; font-size: 12px !important; border-radius: 6px !important; padding: 0 8px !important; background: var(--win) !important; box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.1) !important; border-left: 3px solid var(--c) !important; text-align: left !important; }
.cell.drop-on { background: rgba(0, 122, 255, .12); box-shadow: inset 0 0 0 1.5px var(--blue); border-radius: 6px; }

/* 함께 일정: 두 사람 색 반반 */
/* 여럿이 함께: 사람 수만큼 똑같이 나눈 색 (JS가 --grad/--gsolid 만들어 줌) */
.chip.duo { background: var(--grad); box-shadow: inset -2px 0 var(--c2); }
.chip.timed.duo { background: none; box-shadow: none; }
.chip.timed.duo::before { background: var(--gsolid); }
.app-ic.duo, .color-now i.duo { background: var(--gdiag); }
.wk-ev.duo { background: var(--grad); box-shadow: inset -3px 0 var(--c2); }
.chip.span { text-align: center; border-radius: 3px; background: color-mix(in srgb, var(--c) 20%, transparent); }
.chip.span.duo { background: var(--grad); }
.chip.cont-l { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; left: calc(var(--c0) * 100% / 7); width: calc(var(--n) * 100% / 7 - 2px); }
.chip.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; width: calc(var(--n) * 100% / 7 - 2px); }
.chip.cont-l.cont-r { width: calc(var(--n) * 100% / 7); }
.week + .week { border-top: .5px solid var(--sep); }
.cell { min-width: 0; padding: 4px 1.5px 2px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.cell:active { background: var(--fill); }
.cell.out { opacity: .32; }
.cell-top { position: relative; height: 22px; display: flex; justify-content: center; align-items: center; flex: none; }
.num { font-size: 13px; font-weight: 500; padding: 1px 3px; position: relative; }
.cell.sun .num { color: var(--sun); }
.cell.sat .num { color: var(--sat); }
/* 오늘: 아이폰 캘린더처럼 동그라미 (내 테마 색) */
.cell.today .num { width: 23px; height: 23px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.thumb { position: absolute; right: 1px; top: 1px; width: 15px; height: 15px; background: #fff center/cover; border: 1.5px solid #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.2); }
.rec-dot { position: absolute; right: 4px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.chip {
  font-size: 10px; font-weight: 600; line-height: 15px; height: 15px; padding: 0 3px; flex: none;
  white-space: nowrap; overflow: hidden;
  background: rgba(118, 118, 128, .11); border-left: 2px solid var(--c); color: var(--label);
}
.chip.timed { background: transparent; border-left: 0; padding-left: 1px; color: var(--label); font-weight: 500; }
.chip.timed::before { content: ''; display: inline-block; width: 3px; height: 10px; border-radius: 1.5px; background: var(--c); margin-right: 3px; vertical-align: -1px; }
.more { font-size: 10px; color: var(--label2); padding-left: 3px; line-height: 13px; }
.chip.anniv { pointer-events: none; background: none; border-left: 0; text-align: center; color: var(--label2); font-weight: 600; border-radius: 3px; }
.chip.anniv::before { content: '♥ '; color: var(--accent); }
.chip.holiday { pointer-events: none; background: none; border-left: 0; color: var(--label3); font-weight: 500; text-align: center; padding: 0; }
.holiday-noti .app-ic { --c: var(--red); }
.emo { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.cell-moods { position: absolute; left: 0; top: 4px; display: flex; }
.cell-moods .emo { width: 11px; height: 11px; }
.cell-moods .emo + .emo { margin-left: -3px; }
.mood .emo { width: 30px; height: 30px; display: block; }
.memory-moods .emo { width: 24px; height: 24px; margin-right: 2px; }

/* 기분 고르기 */
.mood-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 2px 12px 4px; }
.mood { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 8px 0 7px; border-radius: 12px; }
.mood small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mood-more { display: flex; align-items: center; gap: 3px; margin: 2px auto 0; font-size: 13px; color: var(--blue); padding: 6px 10px; }
.mood-more svg { width: 13px; height: 13px; stroke-width: 2.4; }
.mood span { line-height: 1; transition: transform .15s; }
.mood small { font-size: 11px; color: var(--label2); }
.mood.on { background: rgba(0, 122, 255, .16); box-shadow: inset 0 0 0 1.5px var(--blue); }
.mood.on small { color: var(--blue); font-weight: 600; }
.mood:active span { transform: scale(.85); }
.mood-others { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 22px 0; font-size: 14px; }
.mood-others span { display: flex; align-items: center; gap: 6px; }
.mood-others i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mood-others em { font-style: normal; color: var(--label3); }
.anniv-noti .app-ic { --c: var(--accent); }
.anniv-noti .app-ic svg { fill: #fff; stroke: none; }

/* 1년 전 오늘 (추억) */
.memory { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; width: calc(100% - 28px); margin: 0 14px; min-height: 150px; padding: 16px 18px; border-radius: 18px; text-align: left; background: var(--win) center/cover; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.memory.has-photo { min-height: 240px; color: #fff; }
.memory.has-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), transparent 40%, rgba(0,0,0,.55)); }
.memory > span { position: relative; }
.memory-top small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .4px; opacity: .7; }
.memory-top b { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.memory-body p { margin: 2px 0 0; font-size: 15px; }
.memory-body .who { font-weight: 600; margin-right: 5px; }
.memory.has-photo .memory-body .who { color: #fff !important; }
.memory-body .dim { opacity: .7; font-size: 13px; }
.memory-moods { font-size: 20px; display: block; margin-bottom: 4px; }
.member-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px 18px; }
.member-card .av { width: 64px; height: 64px; font-size: 26px; }
.member-card b { font-size: 22px; font-weight: 700; }
.inline-note { display: inline; font-size: 12px; color: var(--label2); margin-left: 8px; }

/* 공간 순서 편집 */
.ro-row { transition: transform .2s cubic-bezier(.32,.72,0,1); background: var(--win); padding-top: 8px; padding-bottom: 8px; }
.ro-row.dragging { transition: none; z-index: 2; box-shadow: var(--shadow); border-radius: 12px; }
.ro-fold .folder { width: 38px; height: 30px; display: block; }
.drag-h { display: flex; flex-direction: column; gap: 4px; padding: 12px 4px 12px 14px; cursor: grab; touch-action: none; }
.drag-h i { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--label3); }

/* 로그인 */
.login { position: fixed; inset: 0; z-index: 120; background: var(--grain), var(--desk); display: grid; place-items: center; padding: 24px; }
.login-box { width: 100%; max-width: 360px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.login-ic { width: 76px; height: 76px; border-radius: 18px; background: var(--win); color: var(--red); display: grid; place-items: center; box-shadow: var(--shadow); margin-bottom: 6px; }
.login-ic svg { width: 42px; height: 42px; stroke-width: 1.6; }
.login h1 { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -.045em; }
.login p { margin: 0 0 14px; font-size: 16px; color: var(--label2); line-height: 1.5; }
.login p b { color: var(--label); font-weight: 600; }
.login-input { width: 100%; border: 0; outline: none; font: inherit; font-size: 17px; padding: 15px 16px; border-radius: 14px; background: var(--win); box-shadow: var(--shadow-sm); color: var(--label); }
.login-input.code { text-align: center; font-size: 28px; font-weight: 700; letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.login-input.code::placeholder { font-size: 17px; letter-spacing: 0; font-weight: 400; }
.login-btn { width: 100%; padding: 15px; border-radius: 14px; background: var(--label); color: var(--on-label); font-size: 17px; font-weight: 600; }
.login-btn:disabled { opacity: .5; }
.login-link { color: var(--blue); font-size: 15px; padding: 6px; }
.login small { font-size: 13px; color: var(--label2); line-height: 1.5; }
.code-input { width: 100%; border: 0; outline: none; background: none; text-align: center; font: inherit; font-size: 44px; font-weight: 800; letter-spacing: 8px; font-variant-numeric: tabular-nums; color: var(--label); }

/* 알림 배너 (누르면 이동) */
.banner { position: fixed; left: 8px; right: 8px; top: calc(var(--safe-top) + 8px); max-width: 440px; margin: 0 auto; z-index: 101; display: flex; gap: 11px; align-items: center; text-align: left; padding: 11px 14px; border-radius: 22px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); transform: translateY(-160%); transition: transform .45s cubic-bezier(.32,.72,0,1); }
.banner.show { transform: none; }
.banner .app-ic { width: 38px; height: 38px; border-radius: 9px; }
.banner .app-ic svg { width: 21px; height: 21px; }
.bn-text { flex: 1; min-width: 0; }
.bn-text small { display: flex; font-size: 12px; color: var(--label2); }
.bn-text small em { font-style: normal; margin-left: auto; }
.bn-text b { display: block; font-size: 15px; font-weight: 600; }
.bn-text span { display: block; font-size: 14px; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-ic { width: 30px; height: 30px; border-radius: 7px; background: var(--c); color: #fff; display: grid; place-items: center; flex: none; }
.set-ic svg { width: 18px; height: 18px; stroke-width: 2; }
.row .grow small { display: block; }

/* 기록할 공간 */
.rec-space { display: inline-flex; align-items: center; gap: 2px; margin: 10px 20px 0; font-size: 13px; color: var(--label2); }
.rec-space svg { width: 13px; height: 13px; stroke-width: 2.4; margin-left: 2px; }
.sp-row .ro-fold .folder { width: 32px; height: 26px; }
.sp-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-other { margin: 8px 22px 0; font-size: 13px; color: var(--label2); }
.rec-other button { color: var(--c); font-weight: 600; font-size: 13px; }
.sp-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--label2); background: rgba(118,118,128,.1); padding: 1px 7px 1px 6px; border-radius: 8px; margin-left: 6px; white-space: nowrap; }
.sp-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.head-acts { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.head-acts .pill-btn { margin-bottom: 0; }

/* 그날 페이지: 계획 / 오늘의 기록 두 덩어리 */
.my-line { font-weight: 600; }
.day-sec { display: flex; align-items: center; gap: 8px; margin: 28px 20px 10px; }
.day-sec > span { display: flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.day-sec > span svg { width: 20px; height: 20px; color: var(--label2); stroke-width: 2; }
.day-sec .add { margin-left: auto; display: flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 600; color: var(--blue); }
.day-sec .add svg { width: 15px; height: 15px; stroke-width: 2.6; }
.day-sec .rec-space { margin: 0 0 0 auto; font-size: 13px; padding: 4px 10px; border-radius: 14px; background: var(--win); box-shadow: var(--shadow-sm); color: var(--label); gap: 5px; }
.rec-sec { margin-top: 34px; }
.plan-row { min-height: 46px; gap: 10px; }
.plan-row .plan-bar { width: 4px; align-self: stretch; margin: 9px 0; border-radius: 2px; background: var(--c); flex: none; }
.plan-row .plan-bar.duo { background: var(--gsolid); }
.plan-row b { font-weight: 500; font-size: 16px; }
.plan-row .grow small { margin-top: 0; font-size: 12px; }
.plan-time { font-size: 13px; color: var(--label2); flex: none; }
.plan-row.fixed { font-size: 15px; gap: 10px; }
.plan-row.fixed svg { width: 18px; height: 18px; }
.plan-row.fixed small { font-size: 12px; color: var(--label3); }
.plan-row.red { color: var(--red); }
.plan-row.anniv { color: color-mix(in srgb, var(--accent) 80%, #000); }
.plan-row.anniv svg { fill: currentColor; stroke: none; }
.plan-empty { color: var(--label3); font-size: 14px; justify-content: center; }
.plan-card .todo-row { padding-top: 10px; padding-bottom: 10px; }
.lines-card { padding: 4px 0; }
.line-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; position: relative; }
.line-row + .line-row::before { content: ''; position: absolute; top: 0; left: 68px; right: 0; height: .5px; background: var(--sep); }
.mood-btn { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(118,118,128,.1); color: var(--label3); position: relative; }
.mood-btn .emo { width: 30px; height: 30px; }
.mood-btn.set { background: none; }
.mood-btn > svg { width: 22px; height: 22px; }
.mood-btn > i { position: absolute; bottom: -14px; font-style: normal; font-size: 10px; color: var(--label3); white-space: nowrap; }
.mood-btn.none { background: rgba(118,118,128,.06); }
.line-main { flex: 1; min-width: 0; padding-top: 4px; }
.line-row .line-text { font-size: 19px; line-height: 1.45; }
.line-row .line-text.muted { font-size: 15px; padding-top: 6px; }
.line-row .line-ph { font-size: 16px; padding: 5px 12px; }
.line-row .line-by { margin-top: 6px; }

/* 일기 나만 보기 */
.h4-acts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.lock-pill { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--label2); background: rgba(118,118,128,.12); padding: 5px 10px 5px 8px; border-radius: 13px; letter-spacing: 0; }
.lock-pill svg { width: 13px; height: 13px; stroke-width: 2.2; }
.lock-pill.on { background: var(--label); color: var(--on-label); }
.note-card.private { box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--sep); background: var(--win); }
.note-card.from-other { display: block; width: calc(100% - 28px); text-align: left; }
.note-card.from-other:active { opacity: .8; }
.lock-note { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--label2); margin-top: 6px; }
.lock-note svg { width: 12px; height: 12px; }

/* 가고 싶은 곳 */
.todo-seg { margin-top: 16px; }
.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 6px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips.in-sheet { flex-wrap: wrap; padding: 0 4px; overflow: visible; }
.cat-chips .pill-chip { display: flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.cat-chips .emo { width: 18px; height: 18px; }
/* 장소 지도 */
.cat-row { display: flex; align-items: center; }
.cat-row .cat-chips { flex: 1; min-width: 0; padding-right: 8px; }
.map-toggle { flex: none; display: flex; align-items: center; gap: 4px; margin: 0 16px 4px 0; padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--label); color: var(--on-label); font-size: 14px; font-weight: 600; }
.map-toggle svg { width: 16px; height: 16px; stroke-width: 2.2; }
.map-box { position: relative; margin: 6px 14px 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); height: min(58vh, 460px); background: var(--fill); }
#place-map { position: absolute; inset: 0; }
.map-loc { position: absolute; right: 10px; bottom: 10px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: var(--win); color: var(--blue); box-shadow: var(--shadow); display: grid; place-items: center; }
.map-loc svg { width: 20px; height: 20px; fill: currentColor; }
.map-add { position: absolute; left: 10px; bottom: 10px; z-index: 5; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--win); color: var(--blue); box-shadow: var(--shadow); display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }
.map-add svg { width: 18px; height: 18px; stroke-width: 2.6; }
.map-hint { margin: 8px 20px 0; font-size: 13px; color: var(--label2); line-height: 1.4; }
.map-pin { display: flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; background: #fff; color: #1D1D1F; box-shadow: 0 2px 8px rgba(0,0,0,.25); font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 140px; transform: translateY(-6px); position: relative; }
.map-pin span { overflow: hidden; text-overflow: ellipsis; }
.map-pin .emo { width: 20px; height: 20px; flex: none; }
.map-pin::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.map-pin.visited { opacity: .6; }
.map-me { display: block; width: 16px; height: 16px; border-radius: 50%; background: #0A84FF; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(10,132,255,.2), 0 1px 4px rgba(0,0,0,.3); }
.ps-row small { display: block; font-size: 13px; color: var(--label2); margin-top: 2px; }
.ps-row b { font-weight: 600; }
.ps-dist { flex: none; font-size: 13px; color: var(--label2); }
.pl-pin { color: var(--red); display: grid; margin-right: 10px; }
.empty.small { padding: 24px 24px; font-size: 14px; }
.place-row { align-items: center; }
.pl-ic .emo { width: 28px; height: 28px; display: block; }
.place-row.visited .todo-text b { color: var(--label2); }
.pl-link { font-size: 13px; font-weight: 600; color: var(--blue); background: rgba(0,122,255,.1); padding: 6px 11px; border-radius: 14px; text-decoration: none; flex: none; }
.link-row-field { gap: 8px; }
.link-row-field .text-btn { flex: none; margin: 0; }
a.row { text-decoration: none; }
.row.link-row svg { width: 18px; height: 18px; }
.dc-place { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: 14px; font-weight: 600; }
.dc-place .emo { width: 18px; height: 18px; }

/* 할 일: 오늘·예정·언젠가 칸 */
.todo-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 6px; }
.todo-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 8px 4px; padding: 10px; border-radius: 14px; background: var(--win); box-shadow: var(--shadow-sm); text-align: left; min-width: 0; }
.todo-tile .tt-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; }
.todo-tile .tt-ic svg { width: 15px; height: 15px; stroke-width: 2.2; }
.todo-tile b { font-size: 21px; font-weight: 700; justify-self: end; letter-spacing: -.02em; }
.todo-tile small { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--label2); white-space: nowrap; }
/* 내 목록: 칸 아래 가로 줄, 목록 제목, 아이콘 고르기 */
.list-chips { display: flex; gap: 8px; padding: 6px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.list-chips::-webkit-scrollbar { display: none; }
.list-chip { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--win); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 600; white-space: nowrap; }
.list-chip .emo { width: 18px; height: 18px; }
.list-chip b { font-size: 13px; color: var(--label2); font-weight: 600; }
.list-chip.on { background: var(--label); color: var(--on-label); }
.list-chip.on b { color: rgba(255,255,255,.7); }
.list-chip.add { color: var(--label2); background: transparent; box-shadow: inset 0 0 0 1px var(--sep); }
.list-chip.add svg { width: 16px; height: 16px; }
.list-title { display: flex; align-items: center; gap: 8px; padding: 18px 20px 8px; }
.list-title .emo { width: 26px; height: 26px; }
.list-title h2 { flex: 1; margin: 0; font-size: 22px; font-weight: 700; }
.list-hero { display: grid; place-items: center; padding: 8px 0 16px; }
.list-hero .emo { width: 56px; height: 56px; }
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 0 4px; }
.icon-pick { aspect-ratio: 1; border-radius: 50%; background: var(--win); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.icon-pick .emo { width: 26px; height: 26px; }
.icon-pick.on { box-shadow: 0 0 0 2.5px var(--label); }
.color-now .emo { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
/* 루틴: 반복 표시, 요일 고르기 */
.todo-text .rep { display: inline-flex; align-items: center; gap: 3px; }
.todo-text .rep svg { width: 12px; height: 12px; stroke-width: 2.2; }
.wd-chips { display: flex; gap: 6px; padding: 10px 4px 0; }
.wd-chip { flex: 1; height: 36px; border-radius: 50%; max-width: 40px; aspect-ratio: 1; font-size: 14px; font-weight: 600; background: var(--win); box-shadow: var(--shadow-sm); color: var(--label2); }
.wd-chip.on { background: var(--label); color: var(--on-label); }
.todo-tile.on { background: var(--c); }
.todo-tile.on b, .todo-tile.on small { color: #fff; }
.todo-tile.on .tt-ic { background: #fff; color: var(--c); }
.late-label { color: var(--red); }
.label-count { margin-left: 6px; color: var(--label3); font-weight: 500; }
.label { justify-content: flex-start; }
.label .add, .label .label-acts { margin-left: auto; }
.fab-wrap { position: sticky; bottom: calc(-24px - var(--tab-room)); padding: 18px 16px calc(var(--tab-room) + 14px); background: linear-gradient(transparent, var(--desk) 40%); margin-top: 10px; }
.fab { display: flex; align-items: center; gap: 8px; color: var(--blue); font-size: 17px; font-weight: 600; }
.fab svg { width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--blue); color: #fff; stroke-width: 2.8; }
.date-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.pill-chip { position: relative; font-size: 15px; padding: 8px 14px; border-radius: 18px; background: var(--win); box-shadow: var(--shadow-sm); cursor: pointer; }
.pill-chip.on { background: var(--label); color: var(--on-label); font-weight: 600; }
/* 날짜 칩 위에 투명한 날짜 칸을 그대로 덮음 → 아이폰은 누르면 바로 달력이 뜸 (16px 이상이어야 화면 확대 안 됨) */
.pill-chip .hidden-date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; margin: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* 할 일 */
/* 할 일 = 어디서나 동그라미 체크 (일정은 막대) */
.tick { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.6px solid var(--tick-b); color: transparent; margin-top: 1px; }
.tick svg { width: 14px; height: 14px; stroke-width: 3; }
.tick.on { background: var(--c); border-color: var(--c); color: #fff; }
.tick.add { border: 0; background: rgba(118,118,128,.12); color: var(--blue); }
.tick.add svg { width: 15px; height: 15px; stroke-width: 2.6; }
.todo-edit-title .tick { margin-top: 0; }
.todo-edit-title input { font-size: 17px; }
.todo-row { align-items: flex-start; padding: 11px 16px; }
.todo-text { flex: 1; min-width: 0; }
.todo-text b { display: block; font-size: 16px; font-weight: 400; word-break: keep-all; overflow-wrap: anywhere; }
.todo-text small { display: block; font-size: 13px; color: var(--label2); margin-top: 2px; }
.todo-text .late { color: var(--red); }
.todo-row.done .todo-text b { color: var(--label3); text-decoration: line-through; }
.todo-add { display: flex; align-items: center; gap: 12px; padding: 0 16px; position: relative; }
.sw + .todo-add::before { content: ''; position: absolute; top: 0; left: 52px; right: 0; height: .5px; background: var(--sep); }
.todo-add input { padding: 12px 0; font-size: 16px; }
.todo-group .sw + .sw { border-top: 0; }
.todo-group .sw + .sw::before { content: ''; position: absolute; top: 0; left: 52px; right: 0; height: .5px; background: var(--sep); z-index: 1; }
.done-head { display: flex; justify-content: space-between; padding: 0 12px 6px; }
.red-text { color: var(--red); }
.label-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 7px; }
.text-btn { color: var(--blue); font-size: 15px; margin-left: 10px; }
.lock-ic { color: var(--label3); }
.lock-ic svg { width: 18px; height: 18px; }
/* 달력 규칙: 일정 = 색 막대 (시간 일정은 짧은 세로 막대) / 할 일 = 동그라미 (완료하면 꽉 찬 ●) */
.chip.todo { background: none; border-left: 0; padding-left: 1px; color: var(--label2); font-weight: 500; }
.chip.todo::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px var(--c); margin-right: 3px; vertical-align: -1px; box-sizing: border-box;
  font-size: 8px; line-height: 9px; text-align: center; font-weight: 900; color: var(--c); text-decoration: none; }
.chip.todo.done { color: var(--label3); text-decoration: line-through; }
.chip.todo.done::before { background: var(--c); box-shadow: none; }
.chip.todo:active { opacity: .5; }
.wk-ev.todo { background: none; border: 0; padding: 2px 0; gap: 7px; }
.wk-ev.todo .tick { width: 15px; height: 15px; border: 1.4px solid var(--c); border-radius: 50%; margin: 0; }
.wk-ev.todo.done span { color: var(--label3); text-decoration: line-through; }
.wk-ev.todo.done .tick { background: var(--c); }
.wk-ev.todo .tick svg { width: 11px; height: 11px; stroke-width: 3; }

/* 모아보기 카드 */
.day-tile { display: block; width: 100%; }
.day-card { display: block; width: calc(100% - 28px); margin: 0 14px 12px; text-align: left; background: var(--win); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.day-card:active { opacity: .85; }
.dc-photos { display: grid; gap: 2px; height: 190px; }
.dc-photos span { display: block; background: var(--fill) center/cover; position: relative; min-height: 0; }
.dc-photos.n2 { grid-template-columns: 1fr 1fr; }
.dc-photos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.dc-photos.n3 span:first-child { grid-row: span 2; }
.dc-photos em { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); color: #fff; font-style: normal; font-size: 18px; font-weight: 600; }
.dc-body { display: block; padding: 12px 16px 14px; }
.dc-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.dc-head b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.dc-head small { font-size: 13px; color: var(--label2); }
.dc-moods { margin-left: auto; display: flex; gap: 2px; align-self: center; }
.dc-moods .emo { width: 22px; height: 22px; }
.dc-line { display: flex; gap: 8px; align-items: baseline; margin: 3px 0 0; font-size: 15px; font-weight: 500; }
.dc-line i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; transform: translateY(-1px); }
.dc-diary { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--label2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-diary b { color: var(--label); font-weight: 600; margin-right: 4px; }

/* 기록 관리: 선택·삭제 */
.head-row { display: flex; align-items: flex-end; justify-content: space-between; }
.head-row .pill-btn { margin-bottom: 6px; }
.rec-sum { font-size: 13px; color: var(--label2); margin-top: 10px; }
.month-label small { font-size: 13px; font-weight: 500; color: var(--label2); margin-left: 8px; letter-spacing: 0; }
.ph.dim, .print.dim, .sw.dim { opacity: .35; }
.pick { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(0,0,0,.2); display: grid; place-items: center; color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pick svg { width: 15px; height: 15px; stroke-width: 3; }
.pick.on { background: var(--blue); color: #fff; }
.pick.lock { display: none; }
.print .frame { position: relative; }
.sw { position: relative; overflow: hidden; }
.sw + .sw { border-top: .5px solid var(--sep); }
.sw:not(.open) .sw-del { visibility: hidden; }
.sw-front .log-date { width: 34px; text-align: center; flex: none; }
.sw-front .log-date b { display: block; font-size: 20px; font-weight: 600; line-height: 1.1; }
.sw-front .log-date small { display: block; font-size: 11px; color: var(--label2); }
.sw-del { position: absolute; right: 0; top: 0; bottom: 0; width: 84px; background: var(--red); color: #fff; font-size: 15px; font-weight: 600; }
.sw-front { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--win); transition: transform .25s cubic-bezier(.32,.72,0,1); cursor: pointer; }
.sw-front:active { background: var(--pressed); }
.sw-front .pick { position: static; flex: none; align-self: center; border-color: var(--label3); background: none; box-shadow: none; }
.sw-front .pick.on { background: var(--blue); border-color: var(--blue); }
.sw-front .pick.lock { display: block; visibility: hidden; }
.rec-text { flex: 1; min-width: 0; }
.rec-by { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--label2); margin-bottom: 2px; }
.rec-by i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.rec-line { font-size: 16px; font-weight: 500; letter-spacing: -.02em; word-break: keep-all; overflow-wrap: anywhere; }
.rec-diary { font-size: 15px; line-height: 1.45; color: var(--label); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sel-bar, .inline-sel { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--label2); }
.sel-bar { position: sticky; bottom: calc(var(--tab-room) - 14px); margin: 16px 12px 0; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); z-index: 5; }
.inline-sel { margin: 14px 22px 0; }
.sel-bar .danger, .inline-sel .danger { display: flex; align-items: center; gap: 5px; color: #fff; background: var(--red); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 10px; }
.sel-bar .danger svg, .inline-sel .danger svg { width: 16px; height: 16px; }
.sel-bar .danger:disabled, .inline-sel .danger:disabled { background: rgba(118,118,128,.2); color: var(--label3); }
.more-btn { margin-left: auto; width: 30px; height: 26px; display: grid; place-items: center; border-radius: 13px; color: var(--label2); }
.more-btn:active { background: var(--fill); }
.more-btn svg { width: 20px; height: 20px; stroke-width: 2.2; }
.note-card h4 .more-btn { margin-left: auto; }
.label-acts { display: flex; gap: 14px; align-items: center; }
.menu button.danger { color: var(--red); }
.menu .kbd svg { width: 17px; height: 17px; }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; border-radius: 12px; background: rgba(118,118,128,.08); font-size: 13px; font-weight: 500; color: var(--label); }
.type-btn svg { width: 22px; height: 22px; color: var(--label2); }
.type-btn.on { background: rgba(0, 122, 255, .14); box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); font-weight: 600; }
.type-btn.on svg { color: var(--blue); }
.memory-wrap:not(:empty) { margin-bottom: 22px; }
.memory-wrap .memory-top small::after { content: ' · 1년 전 오늘'; }

select { -webkit-appearance: none; appearance: none; border: 0; background: rgba(118,118,128,.12); color: var(--label); font: inherit; font-size: 17px; padding: 6px 12px; border-radius: 7px; outline: none; }

/* ── iOS 그룹 리스트 (설정·일정 입력) ── */
.section { margin: 0 16px 22px; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; font-size: 13px; color: var(--label2); padding: 0 16px 7px; }
.section-foot { font-size: 13px; color: var(--label2); padding: 7px 16px 0; line-height: 1.4; }
.group { background: var(--win); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; position: relative; width: 100%; text-align: left; font-size: 17px; }
.row + .row::before { content: ''; position: absolute; top: 0; right: 0; left: 16px; height: .5px; background: var(--sep); }
.row.with-icon + .row::before, .row + .row.with-icon::before { left: 58px; }
button.row:active, label.row:active { background: var(--fill); }
.row .grow { flex: 1; min-width: 0; }
.row b { font-weight: 400; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row small { display: block; font-size: 13px; color: var(--label2); margin-top: 1px; }
.row.col { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 14px; }
.row.danger { color: var(--red); }
.row.center { justify-content: center; }
.row.link-row { color: var(--blue); }
.row .chev-r { color: var(--label3); display: flex; }
.row .chev-r svg { width: 14px; height: 14px; stroke-width: 2.4; }
.row .check { color: var(--blue); display: flex; }
.row .check svg { stroke-width: 2.4; width: 20px; height: 20px; }
.lbl { flex: none; }
.badge { font-size: 11px; font-weight: 600; color: var(--label2); background: var(--fill); padding: 2px 6px; border-radius: 6px; margin-left: 6px; vertical-align: 2px; }
.field input, .field textarea, input.plain, textarea.plain {
  border: 0; background: none; font: inherit; font-size: 17px; color: var(--label); width: 100%; outline: none; padding: 12px 0; resize: none;
}
input.right { text-align: right; color: var(--label2); }
::placeholder { color: var(--label3); }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: var(--ink, #fff); font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; }
.av.sm { width: 22px; height: 22px; font-size: 11px; }

.switch { -webkit-appearance: none; appearance: none; width: 51px; height: 31px; border-radius: 16px; background: rgba(120,120,128,.16); position: relative; transition: background .25s; flex: none; margin: 0; cursor: pointer; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .25s; }
.switch:checked { background: #34C759; }
.switch:checked::after { transform: translateX(20px); }

.seg { display: flex; background: rgba(118,118,128,.14); border-radius: 9px; padding: 2px; }
.seg button { flex: 1; font-size: 13px; font-weight: 500; padding: 6px 8px; border-radius: 7px; transition: background .2s; white-space: nowrap; }
.seg button.on { background: var(--seg-on); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight: 600; }
.seg-wrap { padding: 4px 16px 18px; }

input[type=date], input[type=time] {
  -webkit-appearance: none; appearance: none; border: 0; background: rgba(118,118,128,.12); color: var(--label);
  font: inherit; font-size: 17px; padding: 6px 10px; border-radius: 7px; min-height: 34px; outline: none;
}
.dt { display: flex; gap: 6px; }

.dots { display: flex; flex-wrap: wrap; gap: 12px; }
.auto-color { align-self: flex-start; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; padding: 6px 12px 6px 8px; border-radius: 16px; background: rgba(118,118,128,.1); }
.auto-color::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
.auto-color.on { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); background: rgba(0,122,255,.1); }
.cal-opt > i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.row.cal-opt .grow small { display: inline; margin-left: 8px; }
.color-now { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; align-items: center; gap: 6px; font-size: 15px; color: var(--label2); }
.color-now i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.more-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 2px auto 0; font-size: 13px; color: var(--blue); padding: 6px 10px; }
.more-toggle svg { width: 13px; height: 13px; stroke-width: 2.4; }
.dot { display: grid; place-items: center; color: var(--ink, #fff); }
.dot > svg { width: 16px; height: 16px; stroke-width: 3; }
.dot.used::before { content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--label2); box-shadow: 0 0 0 2px var(--win); }
.pick-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.pick-head small { flex-basis: 100%; font-size: 12px; color: var(--label2); margin-top: -4px; }
.sq-mark { width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
.me-row { padding-top: 10px; padding-bottom: 10px; }
.me-row .av { width: 44px; height: 44px; font-size: 18px; }
.me-row b { font-weight: 600 !important; font-size: 18px; }
.base-color .color-now i { width: 22px; height: 22px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.used-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--label2); }
.used-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--label2); }
.dot.custom { display: grid; place-items: center; cursor: pointer; overflow: visible; }
.dot.custom:not(.on) { background: conic-gradient(#FF3B30, #FFCC00, #34C759, #00C7BE, #007AFF, #AF52DE, #FF2D55, #FF3B30); }
.dot.custom svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 1px rgba(0,0,0,.4)); }
.dot.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.custom-lbl { align-self: center; font-size: 13px; color: var(--label2); }
.dots-title { font-size: 12px; color: var(--label2); margin-bottom: -2px; }
.dots + .dots-title { margin-top: 6px; }
.dot { width: 30px; height: 30px; border-radius: 50%; background: var(--c); position: relative; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.dot.on::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--c); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.pill { display: flex; align-items: center; gap: 6px; font-size: 15px; padding: 7px 14px 7px 10px; border-radius: 18px; background: var(--win); box-shadow: var(--shadow-sm); }
.pill::before { content: ''; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); }
.pill.on { background: var(--c); color: var(--ink, #fff); font-weight: 600; }
.pill.on::before { background: var(--ink, #fff); box-shadow: none; }

/* ── 시트 ── */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.sheet-wrap.open { pointer-events: auto; }
.backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.25); opacity: 0; transition: opacity .35s; }
.open > .backdrop { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto;
  top: calc(var(--safe-top) + 14px + var(--depth, 0) * 10px);
  background: var(--grain), var(--desk); border-radius: 14px 14px 0 0; display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(105%); transition: transform .4s cubic-bezier(.32,.72,0,1), filter .4s;
  box-shadow: 0 -2px 20px rgba(0,0,0,.12);
}
.open > .sheet { transform: none; }
.open > .sheet.behind { transform: scale(.94); filter: brightness(.9); transform-origin: 50% 0; }
.grab { width: 36px; height: 5px; border-radius: 3px; background: var(--label3); margin: 6px auto 0; flex: none; }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; padding: 0 16px; flex: none; }
.nav > :first-child { justify-self: start; }
.nav > :last-child { justify-self: end; }
.nav button { color: var(--blue); font-size: 17px; padding: 8px 0; }
.nav button.bold { font-weight: 600; }
.nav button:disabled { color: var(--label3); cursor: default; }
.nav-title { font-size: 17px; font-weight: 600; text-align: center; }
.day-nav { display: flex; align-items: center; gap: 2px; }
.day-nav button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: var(--label); }
.day-nav svg { stroke-width: 2.4; width: 20px; height: 20px; }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 calc(var(--safe-bottom) + 40px); overscroll-behavior: contain; }

/* ── 그날 페이지 ── */
.day-title { padding: 0 20px; }
.day-title .stamp { font-size: 13px; color: var(--label2); }
.day-title h2 { margin: 2px 0 0; font-size: 46px; font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.notis { padding: 0 12px; }
.lines { padding: 0 22px; }
.line { margin: 8px 0 26px; }
.line-text { font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -.03em; word-break: keep-all; overflow-wrap: anywhere; }
.line-view { display: block; width: 100%; text-align: left; font: inherit; letter-spacing: inherit; line-height: inherit; }
.line-ph { display: inline-flex; align-items: center; gap: 8px; color: var(--label3); font-size: 19px; font-weight: 400; padding: 6px 14px; border: 1.5px dashed var(--sep); border-radius: 12px; }
.line-ph svg { width: 18px; height: 18px; }
.line-input { display: block; width: calc(100% + 12px); border: 0; outline: none; resize: none; background: rgba(0,122,255,.08); border-radius: 8px; padding: 2px 6px; margin: 0 -6px; font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--label); caret-color: var(--blue); overflow: hidden; }
.line-text.muted { color: var(--label3); font-weight: 400; font-size: 17px; }
.line-by .who .av { width: 8px; height: 8px; font-size: 0; }
.line-by { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--label2); }
.line-by .who { display: flex; align-items: center; gap: 6px; }
.note-card { background: var(--win); border-radius: 18px; box-shadow: var(--shadow-sm); margin: 0 14px 10px; padding: 12px 18px 16px; }
.note-card .stamp { text-align: center; font-size: 12px; color: var(--label2); }
.note-card h4 { margin: 10px 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; display: flex; align-items: center; gap: 8px; }
.note-card textarea { min-height: 110px; line-height: 1.55; padding: 4px 0; font-size: 16px; caret-color: var(--blue); }
.note-card .text { font-size: 16px; line-height: 1.55; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; padding: 4px 0; }
.prints { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; padding: 0 22px; }
.print { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.print .frame { width: 100%; aspect-ratio: 4 / 5; background: #fff; padding: 5px; box-shadow: var(--shadow-sm); }
.print .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.print small { font-size: 12px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label .add { cursor: pointer; }
.photo-empty { display: flex; align-items: center; gap: 14px; margin: 0 14px; padding: 16px 18px; border-radius: 18px; background: var(--win); box-shadow: var(--shadow-sm); cursor: pointer; }
.photo-empty:active { background: var(--pressed); }
.photo-empty .folder { width: 52px; height: 41px; }
.photo-empty b { display: block; font-size: 16px; font-weight: 600; }
.photo-empty small { display: block; font-size: 13px; color: var(--label2); margin-top: 2px; }

/* ── 기록 탭 ── */
.big-head .seg { margin-top: 18px; }
.day-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 12px; }
.day-tile { aspect-ratio: 1; border-radius: 12px; background: var(--fill) center/cover; position: relative; overflow: hidden; text-align: left; box-shadow: var(--shadow-sm); }
.day-tile::before { content: ''; position: absolute; inset: 0 0 50% 0; background: linear-gradient(rgba(0,0,0,.45), transparent); }
.day-tile span { position: absolute; left: 12px; top: 10px; color: #fff; }
.day-tile b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.day-tile small { font-size: 12px; opacity: .85; }
.month-label { font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin: 6px 18px 10px; }
.month-block + .month-block { margin-top: 24px; }
/* 달 접고 펴기: 접힌 달은 흰 줄 한 개 (기분·사진 몇 장 미리보기) */
.month-label.mfold { display: flex; align-items: center; width: calc(100% - 36px); text-align: left; }
.month-label.mfold small { flex: none; }
.fold-peek { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.fold-moods .emo { width: 18px; height: 18px; margin-left: -3px; }
.m-year { font-size: 15px; font-weight: 300; color: var(--label2); margin-left: 5px; letter-spacing: 0; align-self: baseline; }
.month-label.mfold { align-items: baseline; }
.month-label.mfold .fold-peek, .month-label.mfold .fold-chev { align-self: center; }
.fold-chev { flex: none; margin-left: auto; padding-left: 8px; color: var(--label3); display: grid; }
.fold-chev svg { width: 18px; height: 18px; }
.fold-peek + .fold-chev { margin-left: 0; }
/* 접힌 달은 카드 말고 얇은 줄로 (구분선만) */
.month-block.closed + .month-block { margin-top: 0; }
.month-block.closed .month-label { margin: 0 18px; padding: 14px 2px; font-size: 19px; border-bottom: .5px solid var(--sep); }

/* ── 공간 탭 ── */
.folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; padding: 4px 12px 0; }
.fold { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.fold .folder { width: 74px; height: 58px; }
.fold:active .folder { opacity: .75; }
.fold .name { font-size: 13px; font-weight: 600; padding: 1px 6px; border-radius: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold.on .name { background: var(--blue); color: #fff; }
.fold small { font-size: 11px; color: var(--label2); margin-top: -4px; }
.fold.new .folder .back, .fold.new .folder .front { fill: #D1D1D6; }
.fold.new { position: relative; }
.fold.new .plus { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #fff; }
.fold.new .plus svg { width: 22px; height: 22px; stroke-width: 3; }
.cc { background: var(--glass); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 6px; margin: 0 16px; }
.cc-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 14px; }
.cc-row:active { background: var(--fill); }
.cc-row .av { width: 34px; height: 34px; font-size: 14px; }
.cc-row b { display: block; font-size: 15px; font-weight: 600; }
.cc-row small { display: block; font-size: 13px; color: var(--label2); }
.cc-row .grow { flex: 1; min-width: 0; }
.cc-row.add .av { background: rgba(118,118,128,.16); color: var(--blue); }
.cc-row.add .av svg { width: 18px; height: 18px; }

/* 초대 */
.invite { text-align: center; padding: 34px 20px 10px; }
.invite .code { font-size: 46px; font-weight: 800; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
.invite .edit-menu { margin-top: 22px; }
.invite p { font-size: 15px; color: var(--label2); line-height: 1.5; margin: 22px 0 26px; }

/* ── 맥 경고창 ── */
.alert-wrap { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(0,0,0,.2); opacity: 0; transition: opacity .2s; }
.alert-wrap.open { opacity: 1; }
.alert { width: min(290px, 84vw); background: var(--glass2); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 18px; box-shadow: var(--shadow); padding: 20px 16px 14px; text-align: center; transform: scale(1.08); transition: transform .25s cubic-bezier(.32,.72,0,1); }
.alert-wrap.open .alert { transform: none; }
.alert .app { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 14px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,.2); }
.alert .app svg { width: 30px; height: 30px; }
.alert h3 { font-size: 16px; font-weight: 700; margin: 0 0 5px; }
.alert p { font-size: 13px; color: var(--label2); margin: 0 0 16px; line-height: 1.4; word-break: keep-all; }
.alert button { display: block; width: 100%; height: 36px; border-radius: 9px; font-size: 14px; font-weight: 600; margin-top: 8px; background: var(--fill); }
.alert button.primary { background: var(--blue); color: #fff; }
.alert button.danger { background: #FFD5D3; color: #E0352B; }

/* ── 맥 메뉴 ── */
.menu-wrap { position: fixed; inset: 0; z-index: 92; }
.menu { position: absolute; min-width: 230px; background: var(--glass2); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 12px; box-shadow: var(--shadow); padding: 5px; transform-origin: top left; transform: scale(.92); opacity: 0; transition: transform .18s, opacity .18s; }
.menu-wrap.open .menu { transform: none; opacity: 1; }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px 8px 28px; border-radius: 7px; font-size: 15px; position: relative; text-align: left; }
.menu button.on::before { content: '✓'; position: absolute; left: 10px; font-weight: 600; }
.menu button:active { background: var(--blue); color: #fff; }
.menu button:active .kbd { color: rgba(255,255,255,.8); }
.menu .kbd { margin-left: auto; color: var(--label3); font-size: 13px; padding-left: 18px; }
.menu .sep { height: .5px; background: var(--sep); margin: 5px 10px; }

/* ── 사진 크게 보기 (미리보기 창) ── */
.viewer { position: fixed; inset: 0; z-index: 80; background: rgba(232,232,234,.97); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--safe-top) + 16px) 10px calc(var(--safe-bottom) + 16px); opacity: 0; transition: opacity .2s; }
.viewer.open { opacity: 1; }
.pv { display: flex; flex-direction: column; max-height: 100%; }
.pv img { display: block; width: 100%; min-height: 0; flex: 1; max-height: 72vh; object-fit: contain; background: var(--bar); }
.pv-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; color: var(--label2); border-top: .5px solid var(--sep); }
.pv-foot b { color: var(--label); font-weight: 600; }
.pv-foot .count { margin-left: auto; }

/* ── 상단 알림 (토스트) ── */
.toast { position: fixed; left: 10px; right: 10px; top: calc(var(--safe-top) + 8px); max-width: 420px; margin: 0 auto; z-index: 100; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; box-shadow: var(--shadow); padding: 11px 14px; display: flex; gap: 11px; align-items: center; transform: translateY(-150%); transition: transform .4s cubic-bezier(.32,.72,0,1); pointer-events: none; }
.toast.show { transform: none; pointer-events: auto; }
.toast .app-ic { width: 36px; height: 36px; border-radius: 9px; }
.toast .app-ic svg { width: 20px; height: 20px; }
.toast small { display: block; font-size: 12px; color: var(--label2); }
.toast div { font-size: 15px; }