:root {
  --bg: #eef1f5; --card: #ffffff; --line: #e6e8eb; --text: #191b1f; --sub: #5f6670; --muted: #9aa0a8;
  --accent: #2f6fed; --accent-bg: #e8f0fe;
  --deadline: #e5484d; --deadline-bg: #fdecec;
  --ex: #d97706; --ex-bg: #fdf3e2;
  --record: #2f6fed; --record-bg: #e8f0fe;
  --pay: #1f9d55; --pay-bg: #e6f6ec;
  --est: #c9ced6;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131417; --card: #1c1e22; --line: #2a2d33; --text: #eef0f3; --sub: #a3a9b2; --muted: #6d737c;
    --accent: #6c9bff; --accent-bg: #1d2a45;
    --deadline: #ff6b6f; --deadline-bg: #3a1d1f;
    --ex: #f0a43a; --ex-bg: #3a2a14;
    --record: #6c9bff; --record-bg: #1d2a45;
    --pay: #4cc983; --pay-bg: #16301f;
    --est: #3b3f46;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
/* 앱 화면은 휴대폰 크기에 고정: 두 번 톡·두 손가락으로 확대되지 않게 (2026-10-24 사용자 요청, 아이폰은 index.html의 스크립트가 같이 막는다) */
html { touch-action: pan-x pan-y; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  font-size: 15px; line-height: 1.5; word-break: keep-all; -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* 앱(아이폰·안드로이드)은 화면 맨 위 상태 표시줄 밑까지 그려서, 그만큼 띄운다. 홈 화면 웹앱은 이 값이 0 (2026-10-26) */
.top { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top)) 16px 8px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .logo { width: 30px; height: 30px; border-radius: 8px; }
.top h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.dev-badge { font-size: 11px; color: var(--sub); border: 1px solid var(--line); padding: 2px 8px; border-radius: 99px; }

main { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 0 0 1px rgba(20, 30, 50, .03); }
.card h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.muted { color: var(--muted); }
.sub { color: var(--sub); }
.small { font-size: 13px; }
.tiny { font-size: 11px; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.list > * + * { border-top: 1px solid var(--line); }
.item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; }
.item .l { min-width: 0; }
.item .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .r { text-align: right; flex-shrink: 0; }
.empty { text-align: center; padding: 28px 12px; color: var(--sub); }
.empty b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }

.hero .label { color: var(--sub); font-size: 13px; }
.hero .big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 10px; }
.hero .split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero .split div { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.hero .split b { display: block; font-size: 17px; }

.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.p-deadline { background: var(--deadline-bg); color: var(--deadline); }
.p-ex { background: var(--ex-bg); color: var(--ex); }
.p-record { background: var(--record-bg); color: var(--record); }
.p-pay { background: var(--pay-bg); color: var(--pay); }
.p-gray { background: var(--bg); color: var(--sub); }
.p-est { background: transparent; color: var(--sub); border: 1px dashed var(--muted); }

.seg { display: flex; background: var(--card); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 8px 0; border-radius: 9px; color: var(--sub); font-weight: 500; }
.seg button.on { background: var(--text); color: var(--card); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { border: 1px solid var(--line); background: var(--card); padding: 6px 12px; border-radius: 99px; font-size: 13px; white-space: nowrap; color: var(--sub); }
.chips button.on { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); font-weight: 600; }

.btn { border: 0; border-radius: 12px; padding: 12px 14px; font-weight: 600; background: var(--bg); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.danger { background: transparent; color: var(--deadline); }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.link { border: 0; background: none; color: var(--accent); font-size: 12px; padding: 2px 0; }
.star { border: 0; background: none; padding: 4px; color: var(--muted); font-size: 18px; line-height: 1; }
.star.on { color: #f5b301; }

/* 달력 */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head button { border: 0; background: var(--bg); width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.cal-head b { font-size: 17px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal .dow { font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal .dow:first-child { color: var(--deadline); }
.cal .day { border: 0; background: none; border-radius: 10px; padding: 6px 0 4px; min-height: 48px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cal .day.out { visibility: hidden; }
.cal .day.today .d { background: var(--text); color: var(--card); }
.cal .day.sel { background: var(--accent-bg); }
.cal .d { width: 26px; height: 26px; line-height: 26px; border-radius: 99px; font-size: 14px; }
.dots { display: flex; gap: 3px; height: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 99px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--sub); margin-top: 10px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 4px; }
.c-deadline { background: var(--deadline); } .c-ex { background: var(--ex); } .c-record { background: var(--record); } .c-pay { background: var(--pay); }

/* 막대그래프 */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: 8px; }
.bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.bars .b span { display: block; border-radius: 4px 4px 0 0; }
.bars .b .paid { background: var(--accent); }
.bars .b .est { background: var(--est); }
.bars .b .fix { background: var(--pay); }
.bars .b.now .paid, .bars .b.now .fix, .bars .b.now .est { outline: 2px solid var(--accent); outline-offset: 1px; }
i.lg { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 6px; }
i.lg:first-child { margin-left: 0; }
.bar-x { display: flex; gap: 4px; font-size: 11px; color: var(--muted); text-align: center; margin-top: 4px; }
.bar-x span { flex: 1; }

/* 하단 탭 */
.tabs {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 10;
}
.tabs button { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 4px 0; }
.tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs button.on { color: var(--text); font-weight: 600; }

/* 바텀시트 */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--card); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.sheet h3 { margin: 0; font-size: 18px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 13px; color: var(--sub); }
.field input { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 11px 12px; width: 100%; }
.field input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick { display: flex; gap: 6px; }
.quick button { flex: 1; }
.suggest { border: 1px solid var(--line); border-radius: 10px; max-height: 220px; overflow-y: auto; }
.suggest button { display: flex; justify-content: space-between; width: 100%; border: 0; background: none; padding: 10px 12px; text-align: left; }
.suggest button + button { border-top: 1px solid var(--line); }
.compare { background: var(--bg); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.err { color: var(--deadline); font-size: 13px; }
.notice { font-size: 12px; color: var(--sub); background: var(--card); border-radius: 12px; padding: 12px; }

/* 홈 */
.progress { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.next-pay .label { color: var(--sub); font-size: 13px; }
.next-pay .when { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.next-pay .amt { font-size: 22px; font-weight: 700; color: var(--pay); }
.empty-home { text-align: center; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-home b { font-size: 18px; }
.empty-home p { margin: 0 0 10px; }
.big-emoji { font-size: 40px; }
.go-link { border: 0; background: none; color: var(--sub); font-size: 14px; padding: 6px 4px; text-align: left; }

/* 홈: 이번 주 요약 */
.week-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.week-chips button { border: 1px solid transparent; background: var(--bg); border-radius: 12px; padding: 10px 12px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.week-chips button b { font-size: 18px; }
.week-chips button.on { border-color: var(--accent); background: var(--accent-bg); }
.week .list { margin-top: 6px; }
.more { width: 100%; border: 0; background: var(--bg); border-radius: 10px; padding: 10px; margin-top: 8px; color: var(--sub); font-weight: 500; }
.item[hidden] { display: none; }

/* 홈 구역 구분 (2026-10-22) — 구역마다 색 하나씩: 합계 파랑, 입금 초록, 이번 주 주황·빨강 */
/* 맨 위 합계 카드: 진한 색 대신 아주 옅은 파랑 + 진한 글자 (눈이 편하게) */
:root { --hero-bg: #eef4ff; --hero-ink: #1b2a4a; --hero-line: #d6e3fb; --week-bg: #fffaf2; --pay-card: #f3fbf6; }
@media (prefers-color-scheme: dark) {
  :root { --hero-bg: #1a2233; --hero-ink: #e6ecf8; --hero-line: #2a3650; --week-bg: #221e17; --pay-card: #17221b; }
  .card { box-shadow: none; }
}
.hero { background: var(--hero-bg); color: var(--hero-ink); box-shadow: 0 0 0 1px var(--hero-line); }
.hero .label { color: var(--sub); }
.hero .big { color: var(--hero-ink); }
.hero .progress { background: var(--hero-line); }
.hero .progress span { background: var(--accent); }
.hero-sub { margin: 6px 0 12px; color: var(--sub); }
.hero-sub b { color: var(--hero-ink); }
.hero .split div { background: var(--card); }
.hero .split .small { color: var(--sub); }

h2.sec { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; }
.ico { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-week { background: var(--ex-bg); color: var(--ex); }
.ico-pay { background: var(--pay); color: #fff; }
.ico-list { background: var(--accent-bg); color: var(--accent); }

.next-pay { background: var(--pay-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pay) 22%, transparent); }
.p-pay-solid { background: var(--pay); color: #fff; }

.week { background: var(--week-bg); }
.week-chips button { background: var(--card); }
.week-chips .wc-deadline b { color: var(--deadline); }
.week-chips .wc-pay b { color: var(--pay); }
.week-chips .wc-deadline.on { border-color: var(--deadline); background: var(--deadline-bg); }
.week-chips .wc-pay.on { border-color: var(--pay); background: var(--pay-bg); }
.week .list { background: var(--card); border-radius: 10px; padding: 0 12px; }

/* 로딩 화면: 앱 아이콘이 나타나고 금색 ₩ 핀이 달력 날짜에 '콕' 꽂힌다 (2026-10-24, 이름을 배당콕으로 바꾸며 동전 쌓기 대신)
   핀은 아이콘 위에서 떨어져(약 0.45초에 닿음) 살짝 눌렸다 튀어 오른 뒤 자리를 잡고(0.7초), 꽂힌 날짜에 금색 표시가 생기며 물결이 퍼진다
   (2026-10-27 켤 때 빨리 넘어가게 전체를 약 20% 빠르게 — 처음엔 1초)
   핀·그림자·물결은 opacity를 움직이지 않는다 — 크롬에서 opacity를 움직인 SVG 조각이 도중에 안 그려지는 일이 있었다 */
#splash { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: opacity .25s ease, visibility .25s; }
#splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.kok { width: 112px; height: 112px; margin-bottom: 16px; overflow: visible; }
.kok * { transform-box: fill-box; }
.kok .k-bg { transform-origin: center; animation: k-bg .26s cubic-bezier(.2, .8, .3, 1.2) both; }
.kok .k-cal { animation: k-cal .22s ease-out .06s both; }
.kok .k-dots circle { transform-origin: center; animation: k-dot .16s ease-out both; }
.kok .k-dots circle:nth-child(1) { animation-delay: .12s; }
.kok .k-dots circle:nth-child(2) { animation-delay: .15s; }
.kok .k-dots circle:nth-child(3) { animation-delay: .18s; }
.kok .k-dots circle:nth-child(4) { animation-delay: .21s; }
.kok .k-dots circle:nth-child(5) { animation-delay: .24s; }
.kok .k-pin { transform-origin: 50% 100%; animation: k-pin .44s .24s both; }
.kok .k-shadow { transform-origin: center; animation: k-shadow .44s .24s both; }
.kok .k-ring { transform-origin: center; animation: k-ring .4s ease-out .45s both; }
.kok .k-mark { transform-origin: center; animation: k-dot .18s cubic-bezier(.2, .8, .3, 1.4) .45s both; }
@keyframes k-bg { from { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.04); opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes k-cal { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes k-dot { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes k-pin {
  0% { transform: translateY(-330px); visibility: hidden; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  48% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
  58% { transform: translateY(0) scale(1.12, .84); animation-timing-function: ease-out; }
  74% { transform: translateY(-26px) scale(.96, 1.05); animation-timing-function: ease-in; }
  88% { transform: translateY(0) scale(1.04, .96); }
  100% { transform: translateY(0) scale(1); visibility: visible; }
}
@keyframes k-shadow { 0% { transform: scale(0); } 48% { transform: scale(1); } 74% { transform: scale(.75); } 100% { transform: scale(1); } }
@keyframes k-ring { 0% { transform: scale(.3); stroke-opacity: 0; } 1% { stroke-opacity: .95; } 100% { transform: scale(2.3); stroke-opacity: 0; } }
.splash-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.splash-sub { font-size: 13px; color: var(--sub); }
@media (prefers-reduced-motion: reduce) { #splash { transition: none; } .kok * { animation: none !important; } }

/* 검색 창: 화면 전체를 쓰고 목록 칸 높이를 고정 → 글자를 칠 때마다 창이 오르내리지 않게 */
.backdrop.full { align-items: stretch; }
.sheet.full { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; overflow: hidden; padding-top: calc(16px + env(safe-area-inset-top)); }
.sheet.full .suggest { flex: 1; max-height: none; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* 아이폰은 글자 크기가 16px보다 작은 입력칸을 누르면 화면을 확대해서 흔들려 보인다 */
input, select, textarea { font-size: 16px; }

/* 캡처로 한 번에 넣기 */
.scan-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px dashed var(--accent); background: var(--accent-bg); border-radius: 14px; padding: 12px 14px; }
.scan-btn b { display: block; font-size: 15px; }
.scan-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--card); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scan-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scan-wait { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.scan-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.scan-row { display: flex; gap: 10px; background: var(--bg); border-radius: 12px; padding: 12px; }
.scan-check input { width: 20px; height: 20px; margin-top: 2px; }
.scan-main { flex: 1; min-width: 0; }
.scan-main .name { font-weight: 600; }
.scan-name { width: 100%; font-weight: 600; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 8px; }
.scan-main .field input { background: var(--card); padding: 8px 10px; }
.scan-find { width: 100%; margin-top: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 8px 10px; }
.scan-pick { display: flex; flex-direction: column; }
.scan-pick button { text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 8px 4px; }

/* 종목명: 길면 가운데를 줄이고, 칸 높이는 모두 같게 */
.name.mid { display: flex; min-width: 0; }
.name.mid .nm-head { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.name.mid .nm-tail { flex-shrink: 0; white-space: nowrap; }
.suggest button { align-items: center; gap: 10px; min-height: 60px; }
.suggest .pick-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.suggest .pick-l .name { font-weight: 500; }
.suggest .pick-l .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest .pick-go { color: var(--muted); font-size: 18px; flex-shrink: 0; }

/* 순위 한 줄 */
.rank-row { gap: 8px; min-height: 62px; }
.rank-row .rank-no { width: 20px; text-align: right; flex-shrink: 0; }
.rank-row .l { flex: 1; min-width: 0; }
.rank-row .ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .rank-val { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rank-row .star { padding: 4px 0 4px 2px; }

/* 창 손잡이·닫기 */
.grabber { width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: -8px auto 2px; flex-shrink: 0; }
.sheet-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sheet { will-change: transform; }

/* 홈: 다가오는 배당 일정 (다음 입금 + 이번 주를 합침) */
.up-list { display: flex; flex-direction: column; }
.up-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.up-row:first-child { border-top: 0; }
.up-date { width: 46px; flex-shrink: 0; text-align: center; border-radius: 10px; padding: 5px 0; font-size: 11px; line-height: 1.25; }
.up-date b { display: block; font-size: 18px; font-weight: 700; }
.up-buy { background: var(--deadline-bg); color: var(--deadline); }
.up-pay { background: var(--pay-bg); color: var(--pay); }
.up-text { min-width: 0; flex: 1; }
.up-main { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-money { color: var(--pay); font-weight: 700; }
.up-legend { display: flex; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.up-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.up-right { flex-shrink: 0; text-align: right; min-width: 64px; }
.up-right .up-money { font-size: 16px; }
.pay-sum { font-size: 26px; font-weight: 700; color: var(--pay); letter-spacing: -0.02em; margin: 2px 0 4px; }
/* 같은 날짜가 이어지는 줄: 날짜 칸은 비우고 위 줄과 붙여 한 묶음처럼 */
.up-date.up-same { background: transparent; }
.up-row.same-day { border-top: 0; padding-top: 2px; }
/* 같은 날짜 묶음: 날짜 칸이 묶음 높이만큼 쭉 이어진다 */
.up-group { display: flex; gap: 12px; align-items: stretch; padding: 8px 0; border-top: 1px solid var(--line); }
.up-group:first-child { border-top: 0; }
.up-group .up-date { display: flex; flex-direction: column; justify-content: center; }
.up-items { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.up-items .up-row { padding: 6px 0; border-top: 0; gap: 10px; }
.up-items .up-row + .up-row { border-top: 1px dashed var(--line); }

/* 맨 위 합계 기준 버튼 + 산 날짜 안내 */
.hero-seg { display: flex; background: var(--card); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.hero-seg button { flex: 1; border: 0; background: transparent; padding: 7px 0; border-radius: 8px; font-size: 13px; color: var(--sub); }
.hero-seg button.on { background: var(--text); color: var(--card); font-weight: 600; }
.date-tip { margin-top: 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; border: 0; border-radius: 10px; padding: 9px 12px; background: var(--ex-bg); color: var(--ex); font-size: 12px; }
.date-tip b { white-space: nowrap; font-size: 13px; }
/* 산 날짜 한 번에 넣기 */
.date-row { display: flex; flex-direction: column; gap: 8px; background: var(--bg); border-radius: 12px; padding: 12px; }
.date-row .name { font-weight: 600; }
.date-opts { display: flex; gap: 8px; }
.date-opt { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; font-size: 14px; color: var(--sub); }
.date-opt.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.date-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; }
.yield-big { font-size: 17px; color: var(--accent); }

/* 맨 위 합계 칸을 조금 낮게 (2026-10-22): 여백·글자만 살짝 줄임 */
.hero { padding: 12px 14px; }
.hero-seg { margin-bottom: 8px; }
.hero-seg button { padding: 5px 0; font-size: 12.5px; }
.hero .big { font-size: 27px; margin: 0 0 6px; }
.hero-sub { margin: 4px 0 8px; }
.hero .split { gap: 6px; }
.hero .split div { padding: 7px 10px; }
.hero .split b { font-size: 15px; }
.date-tip { margin-top: 8px; padding: 7px 10px; }

/* 좌우 흔들림 막기 (2026-10-22): 아이폰 사파리는 날짜 입력칸이 기본 폭을 고집하고,
   스크롤되는 창은 내용이 조금만 넘쳐도 좌우로 출렁인다 → 가로 방향은 아예 고정 */
html, body { overflow-x: hidden; max-width: 100%; }
.sheet { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
.sheet * { max-width: 100%; }
.grid2 > *, .field, .quick > * { min-width: 0; }
.field input, .scan-main input, .date-row input { min-width: 0; max-width: 100%; box-sizing: border-box; }
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 44px; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.bars { overflow: hidden; }

/* 계좌 구분·금융소득·알림 (2026-10-22) */
.acct-pick button { padding: 7px 16px; }
.lot-r { display: flex; align-items: center; gap: 6px; }
.lot-acct { border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 8px; padding: 5px 6px; font-size: 13px; }
.progress.fin { margin: 10px 0 8px; }
.progress.fin.over span { background: var(--deadline); }
.fin-over { color: var(--deadline); }
.fin-rows { display: flex; flex-direction: column; gap: 5px; }
.fin-rows .row { align-items: center; }
.fin-sum { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.opt-list { display: flex; flex-direction: column; background: var(--bg); border-radius: 12px; padding: 4px 12px; }
.opt-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; }
.opt-row + .opt-row { border-top: 1px solid var(--line); }
.opt-row input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
#paste-box { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 10px; padding: 10px; font: 13px/1.4 ui-monospace, Menlo, monospace; resize: vertical; }
.bar-x span.now { color: var(--accent); font-weight: 700; }

/* 화면 정리 미리보기 (2026-10-22) */
.col-label { text-align: right; font-size: 11px; color: var(--muted); margin: 6px 0 -6px; }
.btn.bell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.btn.bell svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rank-head { align-items: center; margin-bottom: 4px; }
.rank-head .btn { flex-shrink: 0; }
.rank-sep { font-size: 12px; color: var(--muted); padding: 14px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.rank-row.past { opacity: .55; }
.edit-actions { display: grid; gap: 8px; }
.edit-area { display: flex; flex-direction: column; gap: 12px; }
.edit-actions[hidden], .edit-area[hidden] { display: none; }

/* 홈 이번 달·다음 달 칸을 누르면 그 달 배당 창 (2026-10-22) */
.hero .split .m-tile { background: var(--card); border: 0; border-radius: 10px; padding: 10px 12px; text-align: left; color: inherit; font: inherit; display: block; cursor: pointer; }
.hero .split .m-tile b { display: flex; align-items: center; justify-content: space-between; }
.m-tile .m-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.m-tile .m-label .pill { font-size: 10.5px; padding: 1px 7px; }
.hero .label .pill { font-size: 10.5px; padding: 1px 7px; vertical-align: 1px; }
.m-tile .chev { font-style: normal; color: var(--muted); font-size: 18px; font-weight: 400; }
.msum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.msum b { font-size: 24px; color: var(--pay); }
.up-row.got { opacity: .5; }
/* 월별 배당 창: 확정은 초록, 예상(공시 전)은 회색 점선 (2026-10-24) */
.p-got { background: var(--accent-bg); color: var(--accent); }
.up-state { margin-top: 3px; }
.up-row.est .up-money { color: var(--sub); font-weight: 600; }
.up-date.up-pay.est { background: transparent; color: var(--sub); border: 1px dashed var(--muted); }
.msum-parts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--sub); }
.msum-parts i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.msum-parts b { color: var(--text); font-weight: 600; }
.ms-got i { background: var(--accent); }
.ms-fix i { background: var(--pay); }
.ms-est i { border: 1px dashed var(--muted); }
.mp-note { margin: 12px 0 4px; line-height: 1.5; }

/* 위쪽 고정 창: 창 자체는 안 넘어가고 .sheet-scroll 목록만 넘어간다 (2026-10-22) */
.sheet.pinned-head { overflow: hidden; }
.sheet.pinned-head .sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; border-top: 1px solid var(--line); }
.backdrop { overscroll-behavior: contain; touch-action: none; }
.backdrop .sheet { touch-action: pan-y; }

/* 창 키우기: 손잡이를 위로 올리거나 톡 누르면 화면 가득 (2026-10-22) */
.sheet.expanded { height: calc(100vh - 16px); height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); max-height: none; }
.grabber { position: relative; cursor: pointer; }
.grabber::before { content: ""; position: absolute; inset: -14px -48px; } /* 손가락으로 잡기 쉽게 누르는 범위를 넓힘 */

/* 홈 '내 종목' 칸: 위 합계(파랑)와 이어져 보이지 않게 파란 글자를 빼고 차분한 무채색으로
   (2026-10-22 처음엔 연보라로 했다가 안 어울린다고 해서 바꿈 — 민트·베이지와 비교해 이걸 고름) */
.mine-card .ico-list { background: var(--bg); color: var(--sub); }
/* 배당수익률 숫자만 연한 코랄 (진한 빨강은 매수 마감용이라 그보다 부드럽게, 2026-10-22 사용자 요청) */
:root { --mine-yield: #ec6a5c; }
@media (prefers-color-scheme: dark) { :root { --mine-yield: #ff8f82; } }
.mine-card .yield-big { color: var(--mine-yield); }

/* 배당콕 플러스: 잠금 줄·흐림·안내 창 (2026-10-23) */
.lock-row { width: 100%; display: flex; align-items: center; gap: 10px; border: 1px dashed var(--accent); background: var(--accent-bg); color: var(--text); border-radius: 12px; padding: 12px; text-align: left; margin-top: 8px; font: inherit; cursor: pointer; }
.lock-ico { font-size: 18px; }
.lock-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.lock-go { color: var(--accent); font-weight: 700; font-size: 13px; white-space: nowrap; }
.blur-zone { filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; }
.plus-badge { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-bg); border-radius: 99px; padding: 3px 8px; white-space: nowrap; }
.pw-lead { font-size: 19px; font-weight: 700; margin: 0; line-height: 1.45; }
.pw-list { display: flex; flex-direction: column; gap: 12px; }
.pw-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.pw-ico { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.pw-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pw-plan { border: 1.5px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; color: var(--sub); font: inherit; }
.pw-plan b { font-size: 18px; color: var(--text); }
.pw-plan.on { border-color: var(--accent); background: var(--accent-bg); }

/* 첫 실행 안내·빈 홈 (2026-10-23) */
.welcome { display: flex; flex-direction: column; gap: 16px; padding: 28px 6px 12px; max-width: 420px; margin: 0 auto; }
.welcome h2 { margin: 0; font-size: 15px; color: var(--sub); }
.welcome-logo { width: 60px; height: 60px; border-radius: 14px; }
.welcome-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.welcome-btns .go-link { text-align: center; }
.empty-home .btn + .btn { margin-top: 2px; }
.how b { font-size: inherit; }
.how { text-align: left; margin: 10px 0 2px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
/* 매도 입력칸은 매수 입력칸과 같은 모양 */
.sell-area[hidden] { display: none; }
/* 약관·정책 링크 (2026-10-23) */
a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--text); }
.welcome-legal { text-align: center; margin: 0; }
.welcome-legal a { color: var(--sub); }
/* 다듬기 (2026-10-23) */
.ahead-head { margin: 14px 0 2px; font-weight: 600; }
/* 순위: 커버드콜 빼기 (예전엔 정렬·필터 창 안에만 있었다) */
.cc-toggle { margin-top: 6px; border: 1px dashed var(--line); background: var(--card); color: var(--sub); border-radius: 99px; padding: 4px 10px; font-size: 12px; }
.cc-toggle.on { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-bg); font-weight: 600; }
.bars .b[data-bar], .bar-x span[data-bar] { cursor: pointer; }
/* 설정 메뉴: 누르면 들어가는 목록 (2026-10-24) */
.menu { padding: 4px 0; overflow: hidden; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 12px 16px; text-align: left; color: var(--text); font: inherit; }
.menu-row + .menu-row { border-top: 1px solid var(--line); }
.menu-row:active { background: var(--bg); }
.m-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.m-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-txt b { font-size: 15px; font-weight: 600; }
.m-txt span { font-size: 12px; color: var(--sub); }
.m-end { display: flex; align-items: center; gap: 6px; flex: none; font-size: 13px; color: var(--muted); }
.m-end::after { content: "›"; font-size: 22px; line-height: 1; }
.menu-row.danger .m-ico { background: var(--deadline-bg); color: var(--deadline); }
.menu-row.danger b { color: var(--deadline); }
.menu-row.danger .m-end::after { content: none; }
.back-link { align-self: flex-start; border: 0; background: none; color: var(--accent); font-size: 15px; font-weight: 600; padding: 2px 0; }
.calc-list { display: flex; flex-direction: column; gap: 6px; }
.stale-tip { background: var(--ex-bg) !important; color: var(--text); }