/* ===== 폰트: 네이버 나눔스퀘어라운드 (hangeul.pstatic.net) ===== */
@font-face { font-family: 'NanumSquareRound'; font-weight: 300; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.woff2) format('woff2'), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.woff) format('woff'); }
@font-face { font-family: 'NanumSquareRound'; font-weight: 400; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff2) format('woff2'), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff) format('woff'); }
@font-face { font-family: 'NanumSquareRound'; font-weight: 700; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff2) format('woff2'), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff) format('woff'); }
@font-face { font-family: 'NanumSquareRound'; font-weight: 800; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff2) format('woff2'), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff) format('woff'); }

/* ===== 테마: 파란색 계열 ===== */
:root {
  --b900: #0a2b6b;
  --b800: #103a8c;
  --b700: #1a4fb5;
  --b600: #2160d6;
  --b500: #2f7cf6;
  --b300: #8fbaff;
  --b200: #c4dbff;
  --b100: #dfebff;
  --b50:  #eef4ff;
  --bg:   #f3f7ff;
  --card: #ffffff;
  --ink:  #141c33;
  --ink2: #3f4c68;   /* 보조 글씨: 대비를 높여 진하게 */
  --ink3: #67718c;   /* 흐린 글씨도 읽히는 수준으로 */
  --line: #d6e0f0;
  --pink: #ffb3c6;
  --pink-deep: #e0577a;
  --gold: #f0b429;
  --gold-deep: #b8871c;
  --danger: #e04b5c;
  --ok: #22a06b;
  --shadow: 0 6px 20px rgba(16, 58, 140, .10);
  --shadow-lg: 0 18px 40px rgba(16, 58, 140, .18);
  --radius: 20px;
  --font: 'NanumSquareRound', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --nav-h: 64px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  overscroll-behavior-y: contain; -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word; /* 한글은 단어(어절) 단위로 줄바꿈 */
}
.linkbox { word-break: break-all; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea {
  width: 100%; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff;
  outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--b500); }
textarea { resize: vertical; min-height: 80px; }
label.f { display: block; font-size: 13.5px; color: var(--ink); margin: 12px 0 6px; font-weight: 800; }
.app { min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
[hidden] { display: none !important; }
b, strong, h1, h2, h3 { font-weight: 800; }

/* ===== 아이콘 (lucide 스프라이트) ===== */
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; flex: none; display: inline-block; }
.ic.lg { width: 1.5em; height: 1.5em; }
.emoji { font-size: 1.15em; line-height: 1; }
.icimg { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: -0.3em; border-radius: 6px; }
.task .ico .icimg, .iconpreview .ico .icimg { width: 36px; height: 36px; }
.mini .ico .icimg, .item .ico .icimg { width: 26px; height: 26px; }
.avatar .icimg { width: 24px; height: 24px; border-radius: 50%; }
.avatar.lg .icimg { width: 34px; height: 34px; }
table.grid th .icimg { display: block; margin: 0 auto 3px; width: 22px; height: 22px; }
.icongrid button.img img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }
.icongrid[data-uploaded]:empty { display: none; }
.icongrid[data-uploaded] { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.iconpreview .btn { flex: none; }

/* ===== 헤더 ===== */
.header {
  background: linear-gradient(150deg, var(--b900), var(--b700) 65%, var(--b500));
  color: #fff; padding: calc(14px + env(safe-area-inset-top)) 18px 22px; position: relative; overflow: hidden;
  border-radius: 0 0 30px 30px; box-shadow: var(--shadow);
}
.header::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.07); }
.header::after { content: ''; position: absolute; left: -60px; bottom: -110px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.05); }
.header .row { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.header .title { font-size: 21px; line-height: 1.25; letter-spacing: -.5px; min-width: 0; font-weight: 800; }
.header .title small { display: block; font-size: 12.5px; opacity: .85; margin-top: 4px; letter-spacing: 0; font-weight: 400; }
.header .who {
  margin-left: auto; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border-radius: 999px;
  padding: 6px 12px 6px 6px; font-size: 13px; backdrop-filter: blur(6px); color: #fff; flex: none; max-width: 46%; font-weight: 700;
}
.header .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--b100); color: var(--ink); flex: none; }
.avatar .ic { width: 18px; height: 18px; vertical-align: 0; color: var(--b900); opacity: .85; }
.avatar.lg { width: 44px; height: 44px; font-size: 24px; }
.avatar.lg .ic { width: 24px; height: 24px; }
.header .greet { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; position: relative; z-index: 1; }
.chara-disc { position: relative; flex: none; display: grid; place-items: center; }
.chara-disc::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.55) 70%, rgba(255,255,255,0) 72%); }
.chara-disc .chara { position: relative; }
.header .greet .chara-disc { width: 86px; height: 86px; }
.header .greet .chara { width: 78px; height: 78px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.bubble {
  background: #fff; color: var(--ink); border-radius: 16px; padding: 10px 14px; font-size: 14px; position: relative; flex: 1;
  box-shadow: var(--shadow); animation: pop .35s cubic-bezier(.2,1.4,.4,1);
}
.bubble::before { content: ''; position: absolute; left: -8px; bottom: 14px; border: 8px solid transparent; border-right-color: #fff; border-left: 0; }
.bubble b { color: var(--b700); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--b100); color: var(--b800); }
.chip.pink { background: #ffe1e9; color: var(--pink-deep); }
.chip.gold { background: #fff1cc; color: var(--gold-deep); }
.chip.gray { background: #e6ebf3; color: #3a4762; border: 1px solid #cfd8e6; }
.chip.blue { background: var(--b600); color: #fff; }

/* ===== 본문 ===== */
.view { padding: 14px 14px 0; max-width: 640px; margin: 0 auto; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; animation: rise .3s ease both; }
.card h3 { margin: 0 0 10px; font-size: 17px; color: var(--b800); display: flex; align-items: center; gap: 8px; }
.card h3 .ic { color: var(--b500); }
.card h3 .chip, .card h3 .right { margin-left: auto; }
.muted { color: var(--ink2); font-size: 13.5px; font-weight: 700; }
.tiny { font-size: 12.5px; color: var(--ink2); font-weight: 700; }
.center { text-align: center; }
.empty { text-align: center; color: var(--ink2); padding: 28px 10px; font-weight: 700; font-size: 15px; }
.empty .em { margin-bottom: 8px; color: var(--b300); }
.empty .em .ic { width: 44px; height: 44px; stroke-width: 1.5; }

/* 주 이동 */
.weeknav { display: flex; align-items: center; gap: 6px; margin: 2px 0 14px; }
.weeknav .lbl { flex: 1; text-align: center; font-weight: 800; font-size: 15px; }
.weeknav .lbl .chip { margin-left: 6px; vertical-align: middle; }
.weeknav .dates { display: block; font-size: 12px; color: var(--ink2); font-weight: 400; margin-top: 2px; }
.iconbtn { width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; font-size: 18px; color: var(--b700); transition: transform .1s; }
.iconbtn .ic { vertical-align: 0; }
.iconbtn:active { transform: scale(.92); }
.iconbtn.ghost { background: #fff; box-shadow: none; border: 2px solid var(--b200); }
.iconbtn.sm { width: 34px; height: 34px; font-size: 15px; }
.iconbtn:disabled { opacity: .35; }

/* 진행률 */
.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ring { width: 64px; height: 64px; flex: none; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--b800); }
.progress .txt { flex: 1; }
.progress .txt b { font-size: 17px; color: var(--b800); }
.bar { height: 10px; border-radius: 999px; background: var(--b100); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--b500), var(--b300)); border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }

/* 할일 목록 */
.tasks { display: flex; flex-direction: column; gap: 10px; }
.task {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--b50); border: 2px solid transparent;
  transition: background .2s, border-color .2s, transform .1s;
}
.task.done { background: #fff; border-color: var(--b200); }
.task.verified { background: linear-gradient(135deg, #fff 60%, var(--b100)); border-color: var(--b300); }
.ico { display: grid; place-items: center; flex: none; color: var(--ink); }
.task .ico { width: 50px; height: 50px; border-radius: 16px; font-size: 27px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.05); }
.task .ico .ic { width: 27px; height: 27px; vertical-align: 0; stroke-width: 1.8; }
.task .body { flex: 1; min-width: 0; }
.task .t { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task .s { font-size: 13.5px; color: var(--ink2); margin-top: 2px; font-weight: 700; }
.task.done .t { color: var(--b800); }
.task .meta { font-size: 12.5px; color: var(--ink2); margin-top: 3px; display: flex; align-items: center; gap: 4px; font-weight: 700; }
.checkbtn {
  width: 50px; height: 50px; border-radius: 16px; flex: none; display: grid; place-items: center;
  border: 3px solid var(--b200); background: #fff; color: transparent; transition: all .18s; position: relative;
}
.checkbtn .ic { width: 26px; height: 26px; stroke-width: 3; vertical-align: 0; }
.checkbtn:active { transform: scale(.9); }
.checkbtn.on { background: var(--b600); border-color: var(--b600); color: #fff; }
.checkbtn.on.v { background: linear-gradient(135deg, var(--b700), var(--b500)); border-color: var(--b700); }
.checkbtn.lock { opacity: .55; }
.checkbtn.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.checkbtn .badge { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.checkbtn .badge .ic { width: 12px; height: 12px; fill: #fff; stroke-width: 2; }
.vbtn { padding: 9px 14px; border-radius: 12px; font-size: 14px; font-weight: 800; background: #fff; color: var(--b700); border: 2px solid var(--b500); flex: none; transition: all .15s; display: inline-flex; align-items: center; gap: 4px; }
.vbtn.on { background: var(--b700); color: #fff; border-color: var(--b700); }
.vbtn:disabled { cursor: not-allowed; background: var(--b100); color: var(--b800); border: 2px solid var(--b300); } /* 체크 전: '칭찬 메모' 버튼과 같은 연파랑 스타일 */
.vbtn:active { transform: scale(.95); }

/* 검수 섹션 */
.member { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.member .nm { font-weight: 800; }
.member .st { margin-left: auto; font-size: 12px; color: var(--ink2); }
.mini-tasks { display: flex; flex-direction: column; gap: 8px; }
.mini { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--b50); }
.mini .ico { width: 36px; height: 36px; border-radius: 12px; font-size: 20px; }
.mini .ico .ic { width: 20px; height: 20px; vertical-align: 0; }
.mini .t { flex: 1; font-size: 15px; font-weight: 800; min-width: 0; }
.mini .t small { display: block; font-weight: 700; font-size: 12.5px; color: var(--ink2); margin-top: 1px; }

.note-box { background: #fff4f7; border: 2px dashed var(--pink); border-radius: 16px; padding: 12px 14px; }
.note-box .h { font-weight: 800; color: var(--pink-deep); font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.note-box p { margin: 0; white-space: pre-wrap; font-size: 14px; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 15px; background: var(--b700); color: #fff; transition: transform .1s, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; }
.btn.block { width: 100%; }
.btn.ghost { background: #fff; color: var(--b800); border: 2px solid var(--b200); }
.btn.soft { background: var(--b100); color: var(--b800); border: 2px solid var(--b300); }
.btn.danger { background: #ffe1e5; color: var(--danger); }
.btn.note { background: #e3f6ec; color: #1b7f55; border: 2px solid #6fcf9a; } /* 칭찬 메모: 녹색 계열 */
.btn.note .ic { color: #1b7f55; }
.btn.sm { padding: 8px 12px; font-size: 13px; border-radius: 11px; }
.btn.xs { padding: 6px 10px; font-size: 12px; border-radius: 10px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row .grow { flex: 1; }
.right { margin-left: auto; }
.mt { margin-top: 12px; }
.mb { margin-bottom: 12px; }

/* 세그먼트 / 필 */
.seg { display: flex; background: var(--b50); border-radius: 14px; padding: 4px; gap: 4px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1; padding: 9px 8px; border-radius: 11px; font-weight: 700; font-size: 13px; color: var(--ink2); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.seg button.on { background: #fff; color: var(--b800); box-shadow: var(--shadow); }
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 6px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--ink); border: 2px solid var(--b200); }
.pill.on { border-color: var(--b500); color: var(--b800); }
.pill .avatar { width: 26px; height: 26px; font-size: 15px; }
.pill small { font-weight: 400; margin-left: 2px; }
.pill small::before { content: '·'; margin-right: 3px; }
.pill .avatar .ic { width: 15px; height: 15px; }

/* 기록 그리드 */
.gridwrap { overflow-x: auto; margin: 0 -4px; }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
table.grid th, table.grid td { text-align: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
table.grid th { font-size: 11.5px; line-height: 1.3; color: var(--ink); font-weight: 800; background: var(--b50); vertical-align: top; }
table.grid th:first-child, table.grid td:first-child { width: 76px; }
table.grid th:first-child { border-radius: 12px 0 0 0; vertical-align: middle; font-size: 15px; font-weight: 800; color: var(--b800); }
table.grid th:last-child { border-radius: 0 12px 0 0; }
table.grid th .ic { display: block; margin: 0 auto 3px; width: 20px; height: 20px; color: var(--b700); }
table.grid th .emoji { display: block; font-size: 20px; }
table.grid td:first-child { text-align: center; font-weight: 800; font-size: 13px; white-space: nowrap; cursor: pointer; }
table.grid td:first-child small { display: block; font-weight: 700; font-size: 11px; color: var(--ink2); }
table.grid tr.cur td { background: #f4f8ff; }
table.grid tr.cur td:first-child { color: var(--b600); }
table.grid tr.cur td:first-child small { color: var(--b500); }
/* 구성원 목록: 담당 관리자 아래 사용자 표시 */
.item .sub { color: var(--b300); font-weight: 800; font-size: 18px; margin-right: 2px; line-height: 1; flex: none; }
.cell { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; border: 2px solid var(--line); background: #fff; color: transparent; cursor: pointer; transition: transform .1s; }
.cell:active { transform: scale(.9); }
.cell.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
.cell.total { cursor: default; }
/* 용돈 합계표 */
table.grid.sum th, table.grid.sum td { font-size: 12.5px; padding: 8px 3px; white-space: nowrap; }
table.grid.sum th:first-child, table.grid.sum td:first-child { width: auto; text-align: left; padding-left: 6px; font-size: 13px; cursor: default; }
table.grid.sum td:first-child .avatar { width: 22px; height: 22px; vertical-align: middle; display: inline-grid; }
table.grid.sum td:first-child .avatar .ic { width: 13px; height: 13px; }
table.grid.sum td.bad { color: var(--danger); font-weight: 700; }
table.grid.sum td.good { color: var(--ok); font-weight: 700; }
table.grid.sum tr.total td { background: var(--b50); font-weight: 800; border-bottom: 0; }
@media (max-width: 380px) {
  .view { padding: 12px 10px 0; }
  .card { padding: 14px 10px; }
  table.grid th:first-child, table.grid td:first-child { width: 68px; }
  .cell { width: 27px; height: 27px; }
}
.cell .ic { width: 16px; height: 16px; stroke-width: 3; vertical-align: 0; }
.cell.done { background: var(--b100); border-color: var(--b300); color: var(--b800); }
.cell.ver { background: var(--b700); border-color: var(--b700); color: #fff; }
.cell.miss { background: #ffe1e5; border-color: #ffc2cb; color: var(--danger); }
.cell.na { border-style: dashed; opacity: .5; }
.cell.week-ok { background: linear-gradient(135deg, var(--gold), #f7d67c); border-color: var(--gold); color: #fff; }
.cell.week-ok .ic { fill: #fff; }
.cell.week-wait { background: #eef1f5; border-color: #e1e6ee; color: #b7bfcc; }
.cell.week-wait .ic { fill: #c9d0da; stroke: #b7bfcc; }
/* 관리자 전체완료 처리: 사용자 체크 없이 완료된 칸은 녹색, 그 주의 별은 자주색 */
.cell.excused { background: #22a06b; border-color: #22a06b; color: #fff; }
.cell.week-excused { background: linear-gradient(135deg, #c2338a, #e05aa6); border-color: #c2338a; color: #fff; }
.cell.week-excused .ic { fill: #fff; }
.chip.magenta { background: #fbe1f0; color: #b02a7a; }
/* 할일 담당자 칩: 사용자 아바타 색 배경, 큰 글씨 */
.chip.assignee { font-size: 14px; padding: 5px 12px 5px 8px; color: var(--ink); border: 1.5px solid rgba(0,0,0,.06); gap: 6px; }
.chip.assignee .ic, .chip.assignee .icimg { width: 18px; height: 18px; }
.chip.assignee .emoji { font-size: 16px; }
.chip.assignee.gray { color: var(--ink2); }
.chip.green { background: #dff5ea; color: #1b7f55; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); margin-top: 10px; }
.legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend span.cell { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; cursor: default; pointer-events: none; transition: none; transform: none; }
.legend .cell .ic { width: 11px; height: 11px; }

/* 벌점/용돈 */
.money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.money div { background: var(--b50); border-radius: 14px; padding: 10px 6px; text-align: center; }
.money b { display: block; font-size: 17px; color: var(--b800); }
.money.red b { color: var(--danger); }
.money small { font-size: 11px; color: var(--ink2); }
.wk { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wk:last-child { border-bottom: 0; }
.wk .d { flex: 1; min-width: 0; }
.wk .d b { font-size: 14px; }
.wk .d small { display: block; font-size: 12.5px; color: var(--ink2); font-weight: 700; }
.wk .pt { font-weight: 800; font-size: 15px; color: var(--ink3); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.wk .pt.ok { color: var(--ok); }
/* 오른쪽 열: 상태 칩(고정 폭, 가운데) + 금액(고정 폭, 오른쪽 정렬) → 줄마다 세로로 맞춰짐 */
.wk .r { display: flex; align-items: center; gap: 8px; flex: none; }
.wk .r .chip { min-width: 72px; justify-content: center; white-space: nowrap; }
.wk .r .pt { min-width: 84px; justify-content: flex-end; }
@media (max-width: 380px) { .wk .r .chip { min-width: 64px; font-size: 11px; } .wk .r .pt { min-width: 72px; font-size: 13.5px; } }
.wk.waived .pt { text-decoration: line-through; color: var(--ink3); }

/* 관리자 */
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--b50); }
.item .ico { width: 42px; height: 42px; border-radius: 13px; font-size: 22px; }
.item .ico .ic { width: 22px; height: 22px; vertical-align: 0; }
.item .t { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; }
.item .t small { display: block; font-weight: 700; font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .acts { display: flex; gap: 2px; flex: none; }
.item .acts .iconbtn.sm { width: 30px; height: 30px; }
.item.archived { opacity: .6; }
.icongrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.icongrid button { aspect-ratio: 1; border-radius: 12px; background: var(--b50); border: 2px solid transparent; display: grid; place-items: center; color: var(--ink); }
.icongrid button .ic { width: 22px; height: 22px; vertical-align: 0; }
.icongrid button.on { border-color: var(--b500); background: #fff; color: var(--b700); }
.iconpreview { display: flex; align-items: center; gap: 10px; }
.iconpreview .ico { width: 50px; height: 50px; border-radius: 16px; }
.iconpreview .ico .ic { width: 27px; height: 27px; }
.iconpreview input { flex: 1; }
.colors { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.colors button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.colors button.on { box-shadow: 0 0 0 3px var(--b600); }
.qr { display: block; margin: 8px auto; width: 220px; height: 220px; border-radius: 16px; border: 6px solid var(--b50); }
.linkbox { background: var(--b50); border-radius: 12px; padding: 10px; font-size: 12px; word-break: break-all; color: var(--ink2); }
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-list label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--b50); font-size: 14px; cursor: pointer; border: 2px solid transparent; }
.radio-list label:has(input:checked) { border-color: var(--b500); background: #fff; }
.radio-list input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--b600); }
.radio-list small { display: block; color: var(--ink2); font-size: 12px; }
.switch { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.switch input { width: 22px; height: 22px; accent-color: var(--b600); }
.feed { display: flex; flex-direction: column; gap: 6px; }
.feed div { font-size: 13.5px; padding: 8px 10px; border-radius: 12px; background: var(--b50); }
.feed small { color: var(--ink3); margin-left: 6px; font-size: 11px; }
.charslot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.charslot div { text-align: center; background: var(--b50); border-radius: 14px; padding: 8px; }
.charslot .pv { height: 90px; display: grid; place-items: center; }
.charslot .pv img, .charslot .pv svg { max-height: 86px; max-width: 100%; }
.charslot small { display: block; font-size: 12px; color: var(--ink2); margin: 4px 0 6px; }

/* ===== 하단 탭 ===== */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; justify-content: space-around; z-index: 20;
}
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--ink3); font-weight: 700; }
.nav button .ic { width: 24px; height: 24px; transition: transform .2s; vertical-align: 0; }
.nav button.on { color: var(--b700); }
.nav button.on .ic { transform: translateY(-2px) scale(1.1); }

/* ===== 모달 / 토스트 / 오버레이 ===== */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 30, 70, .45); animation: fade .2s; }
.modal .sheet {
  background: #fff; width: 100%; max-width: 560px; border-radius: 26px 26px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto; animation: up .28s cubic-bezier(.2,.9,.3,1);
}
.modal .sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.modal h2 { font-size: 19px; margin: 0 0 6px; color: var(--b800); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal h2 .ic { color: var(--b500); }
.modal p { margin: 6px 0 14px; color: var(--ink2); font-size: 14.5px; line-height: 1.6; }
.modal .btns { display: flex; gap: 8px; margin-top: 16px; }
.modal .btns .btn { flex: 1; }
.modal.center-sheet { align-items: center; padding: 20px; }
.modal.center-sheet .sheet { border-radius: 24px; text-align: center; }
.modal.center-sheet h2 { justify-content: center; }
.warn-icon { margin-bottom: 6px; color: var(--gold); }
.warn-icon.danger { color: var(--danger); }
.warn-icon.blue { color: var(--b500); }
.warn-icon .ic { width: 48px; height: 48px; stroke-width: 1.8; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; z-index: 60; max-width: 90vw; text-align: center; animation: pop .25s; box-shadow: var(--shadow-lg); }
.toast.err { background: var(--danger); }

/* 캐릭터 팝업 (체크 시) */
.chara-pop { position: fixed; right: 12px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; animation: slidein .4s cubic-bezier(.2,1.3,.4,1); }
.chara-pop.out { animation: slideout .3s ease forwards; }
.chara-pop .chara { width: 160px; height: 160px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); }
.chara-pop .bubble { max-width: 230px; font-size: 15px; font-weight: 700; margin-bottom: 60px; border: 2.5px solid var(--b500); box-shadow: var(--shadow-lg); }
.chara-pop .bubble::before { left: auto; right: -9px; bottom: 12px; border-right: 0; border-left: 9px solid var(--b500); }
.chara-pop .bubble::after { content: ''; position: absolute; right: -5px; bottom: 14px; border: 6px solid transparent; border-right: 0; border-left: 6px solid #fff; }

/* 축하 오버레이 */
.overlay { position: fixed; inset: 0; z-index: 45; background: radial-gradient(circle at 50% 30%, rgba(47,124,246,.92), rgba(10,43,107,.96)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 24px; animation: fade .3s; overflow: hidden; }
.overlay .chara-disc { width: min(66vw, 280px); height: min(66vw, 280px); animation: jump 1.1s ease-in-out infinite; }
.overlay .chara { width: min(60vw, 260px); height: min(60vw, 260px); filter: drop-shadow(0 16px 24px rgba(0,0,0,.35)); }
.overlay h1 { font-size: 28px; margin: 10px 0 4px; text-shadow: 0 3px 10px rgba(0,0,0,.25); animation: pop .5s cubic-bezier(.2,1.5,.4,1); }
.overlay p { margin: 0 0 20px; font-size: 16px; opacity: .95; max-width: 320px; line-height: 1.6; }
.overlay .btn { background: #fff; color: var(--b800); min-width: 160px; }
.confetti { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall linear forwards; }

/* 캐릭터 SVG 애니메이션 */
.chara { display: block; }
.chara .eye-happy, .chara .mouth-big, .chara .arm-up, .chara .sparkle { opacity: 0; }
.chara .arm-up { transform-origin: 130px 152px; }
.chara.idle .eye-open { animation: blink 4.5s infinite; }
.chara.happy .eye-open, .chara.cheer .eye-open { opacity: 0; }
.chara.happy .eye-happy, .chara.cheer .eye-happy { opacity: 1; }
.chara.happy .mouth-small, .chara.cheer .mouth-small { opacity: 0; }
.chara.happy .mouth-big, .chara.cheer .mouth-big { opacity: 1; }
.chara.happy .blush, .chara.cheer .blush { opacity: .9; }
.chara.happy .head { animation: nod .6s ease-in-out infinite alternate; transform-origin: 100px 120px; }
.chara.cheer .arm-down { opacity: 0; }
.chara.cheer .arm-up { opacity: 1; animation: wave .5s ease-in-out infinite alternate; }
.chara.cheer .sparkle { opacity: 1; animation: twinkle 1s ease-in-out infinite; }
.chara.cheer .sparkle:nth-child(2) { animation-delay: .3s; }
.chara.cheer .sparkle:nth-child(3) { animation-delay: .6s; }
.chara .blush { opacity: .5; }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slidein { from { transform: translateX(120%); } to { transform: none; } }
@keyframes slideout { to { transform: translateX(130%); opacity: 0; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes nod { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes wave { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .8; } }

@media (min-width: 640px) {
  /* PC: 헤더·본문·하단 메뉴를 모두 같은 폭(640px)으로 가운데 정렬 */
  .app { max-width: 640px; margin: 0 auto; }
  .header { border-radius: 0 0 40px 40px; }
  .nav { max-width: 640px; margin: 0 auto; border-radius: 20px 20px 0 0; border: 1px solid var(--line); border-bottom: 0; }
  body { background: #e9f0fb; }
  .app { background: var(--bg); min-height: 100vh; box-shadow: 0 0 40px rgba(16, 58, 140, .08); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }