@font-face { font-family: "Paperlogy"; src: url("/fonts/Paperlogy-4Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("/fonts/Paperlogy-6SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("/fonts/Paperlogy-7Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("/fonts/Paperlogy-8ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --ink: #40352f; --muted: #81756d; --paper: #fbf7f0; --white: #fffdf9;
  --line: #e8ddd1; --coral: #e46f4f; --coral-dark: #bd4d34; --gold: #d8a341;
  --plum: #81657a; --blue: #557d89; --green: #617c65; --shadow: 0 14px 40px rgba(86, 62, 45, .08);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Paperlogy", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; font-size: 16px; line-height: 1.55; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 4px; color: var(--coral-dark); font-size: .82rem; font-weight: 750; letter-spacing: .04em; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 230px; padding: 30px 20px; background: #473a33; color: #fff8ee; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; align-items: center; padding: 0 8px 38px; font-size: 1.05rem; }
nav { display: grid; gap: 8px; }
.nav-item { padding: 13px 15px; border: 0; border-radius: 13px; text-align: left; color: #d9cec4; background: transparent; transition: .2s ease; }
.nav-item span { display: inline-block; width: 28px; color: #e9ac91; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.1); }
.logout { margin-top: auto; padding: 9px; border: 0; color: #cdbeb4; background: transparent; font-size: .82rem; }
.main { margin-left: 230px; padding: 44px clamp(28px, 5vw, 76px) 70px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.topbar h1 { margin: 0; font-family: "Paperlogy", sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.35rem); font-weight: 700; letter-spacing: -.03em; }
.icon-button { display: none; border: 0; background: none; font-size: 1.5rem; }
.month-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.circle-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); }
.month-title { border: 0; background: none; text-align: left; font-family: "Paperlogy", sans-serif; font-weight: 700; font-size: 1.25rem; }
.month-title small { display: block; color: var(--muted); font-family: inherit; font-size: .68rem; font-weight: 400; }
#monthPicker { position: absolute; opacity: 0; pointer-events: none; }
.button { padding: 11px 17px; border: 0; border-radius: 11px; font-weight: 750; transition: .2s; }
.button.primary { margin-left: auto; color: white; background: var(--coral); box-shadow: 0 6px 18px rgba(213, 91, 57, .18); }
.button.primary:hover { background: var(--coral-dark); transform: translateY(-1px); }
.button.wide { width: 100%; margin: 4px 0 0; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.summary-card { min-height: 145px; padding: 21px; border-radius: 18px; color: white; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.summary-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -26px; bottom: -35px; border: 18px solid rgba(255,255,255,.1); border-radius: 50%; }
.summary-card p { margin: 0 0 14px; font-size: .87rem; opacity: .82; }
.summary-card strong { display: block; font-family: "Paperlogy", sans-serif; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -.03em; }
.summary-card span { font-size: .78rem; opacity: .7; }
.summary-card.income { background: #617c65; }.summary-card.spending { background: #9a6c60; }.summary-card.balance { background: #d48256; }.summary-card.assets { background: #685a73; }
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
.panel { padding: 25px; border: 1px solid rgba(184,157,136,.25); border-radius: 19px; background: var(--white); box-shadow: var(--shadow); }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.panel h2, .section-intro h2, .modal-card h2 { margin: 0; font-family: "Paperlogy", sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.legend { color: var(--muted); font-size: .75rem; white-space: nowrap; }.legend span { display: inline-block; width: 8px; height: 8px; margin: 0 4px 0 8px; border-radius: 50%; }.income-dot { background: var(--green); }.spending-dot { background: #d89682; }.asset-dot { background: var(--gold); }
.year-chart { position: relative; height: 180px; margin: 25px 0 13px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; align-items: end; border-bottom: 1px solid var(--line); }
.bar-month { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 7px; }
.asset-overlay { position: absolute; z-index: 2; inset: 0 0 20px; pointer-events: none; }.asset-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }.asset-marker { position: absolute; transform: translate(-50%, -50%); }.asset-marker i { display: block; width: 12px; height: 12px; border: 3px solid var(--gold); border-radius: 50%; background: var(--white); box-shadow: 0 2px 7px rgba(111,77,27,.16); }.asset-marker b { display: none; position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%); padding: 3px 7px; border-radius: 7px; color: #735819; background: #fff5d9; font-size: .65rem; white-space: nowrap; }.asset-marker.latest b { display: block; }
.bars { height: 140px; width: 100%; display: flex; gap: 2px; align-items: end; justify-content: center; }
.bar { width: min(11px, 40%); min-height: 2px; border-radius: 5px 5px 1px 1px; transition: height .45s ease; }.bar.income { background: var(--green); }.bar.spending { background: #d89682; }.bar-month small { color: var(--muted); font-size: .64rem; }
.year-totals { display: grid; grid-template-columns: repeat(4,1fr); padding-top: 8px; }.year-totals div + div { border-left: 1px solid var(--line); padding-left: 18px; }.year-totals span, .cumulative-stats span { color: var(--muted); font-size: .76rem; }.year-totals strong, .cumulative-stats strong { display: block; margin-top: 3px; font-size: 1rem; }
.text-button { border: 0; background: none; color: var(--coral-dark); font-size: .78rem; font-weight: 700; }
.allocation-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; }
.allocation-card { min-width: 0; padding: 3px 20px 0; text-align: center; }.allocation-card + .allocation-card { border-left: 1px solid var(--line); }.allocation-card h3 { margin: 0 0 14px; font-family: "Paperlogy", sans-serif; font-size: 1rem; font-weight: 700; }
.mini-donut { width: 142px; height: 142px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; position: relative; }.mini-donut::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--white); }.mini-donut > div { z-index: 1; }.mini-donut strong { display: block; font-family: "Paperlogy", sans-serif; font-size: 1rem; font-weight: 700; }.mini-donut span { display: block; color: var(--muted); font-size: .68rem; }
.allocation-percent-list { display: grid; gap: 7px; margin-top: 16px; text-align: left; }.allocation-percent { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; font-size: .76rem; }.allocation-percent i { width: 8px; height: 8px; border-radius: 50%; }.allocation-percent span { color: var(--muted); }.allocation-percent b { font-size: .75rem; }.allocation-empty { margin: 8px 0; color: var(--muted); font-size: .76rem; text-align: center; }
.donut-wrap { display: flex; align-items: center; gap: 25px; margin-top: 28px; }
.donut { flex: 0 0 152px; width: 152px; height: 152px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--line) 0 100%); position: relative; }.donut::after { content: ""; position: absolute; inset: 21px; border-radius: 50%; background: var(--white); }.donut > div { z-index: 1; text-align: center; }.donut strong { display: block; font-family: "Paperlogy", sans-serif; font-size: 1.05rem; font-weight: 700; }.donut span { color: var(--muted); font-size: .7rem; }
.allocation-legend { flex: 1; display: grid; gap: 8px; }.allocation-item { display: grid; grid-template-columns: 9px 1fr auto; gap: 8px; align-items: center; font-size: .77rem; }.allocation-item i { width: 8px; height: 8px; border-radius: 50%; }.allocation-item span { color: var(--muted); }.allocation-item b { font-size: .75rem; }
.cumulative-panel { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 30px; background: #f0e8dc; box-shadow: none; }.cumulative-panel > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: .85rem; }.cumulative-stats { min-width: 55%; display: grid; grid-template-columns: repeat(3,1fr); }.cumulative-stats div { padding-left: 24px; border-left: 1px solid #d8c9ba; }
.section-intro { display: flex; justify-content: space-between; align-items: end; margin: 15px 0 25px; }.section-intro > div > p:last-child { margin: 7px 0 0; color: var(--muted); }.investment-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }.investment-overview span { color: var(--muted); font-size: .82rem; }.investment-overview strong { display: block; margin: 8px 0 2px; font-family: "Paperlogy", sans-serif; font-size: 1.55rem; font-weight: 700; }.investment-overview small { color: var(--muted); }.investment-total { color: white; background: #685a73; }.investment-total span, .investment-total small { color: rgba(255,255,255,.7); }
.investment-list { display: grid; gap: 11px; }.investment-row { display: grid; grid-template-columns: 52px 1.4fr 1fr 1fr auto; align-items: center; gap: 16px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }.category-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--coral-dark); background: #f8e8df; font-weight: 800; }.investment-row h3 { margin: 0; font-size: .98rem; }.investment-row p { margin: 2px 0 0; color: var(--muted); font-size: .76rem; }.row-stat span { display: block; color: var(--muted); font-size: .72rem; }.row-stat strong { font-size: .9rem; }.gain { color: var(--green); }.loss { color: var(--coral-dark); }.row-actions { display: flex; gap: 5px; }.row-actions button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: white; }.empty-state { padding: 70px 20px; text-align: center; color: var(--muted); }.empty-state h3 { color: var(--ink); }
.record-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }.record-overview span { color: var(--muted); font-size: .82rem; }.record-overview strong { display: block; margin: 8px 0 2px; font-size: 1.45rem; }.record-overview small { color: var(--muted); }.record-income { border-top: 4px solid var(--green); }.record-spending { border-top: 4px solid #9a6c60; }.record-list { display: grid; gap: 11px; }.record-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr auto; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }.record-month { display: flex; align-items: center; gap: 9px; }.record-month strong { font-size: .95rem; }.owner-pill { padding: 4px 8px; border-radius: 8px; color: #6e4437; background: #f8e2d8; font-size: .7rem; font-weight: 700; }.owner-pill.jing { color: #53664f; background: #e3ebdf; }.record-amount { min-width: 0; }.record-amount span { display: block; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.record-amount strong { font-size: .9rem; }.record-amount.income strong { color: var(--green); }.record-amount.spending strong { color: #8d5b51; }
.owner-tabs { width: fit-content; display: flex; gap: 5px; margin-bottom: 17px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: #eee6dc; }
.owner-tab { min-width: 130px; padding: 10px 18px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 700; }
.owner-tab.active { color: var(--ink); background: var(--white); box-shadow: 0 4px 12px rgba(86,62,45,.08); }
.portfolio-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
.portfolio-summary span { color: var(--muted); font-size: .82rem; }.portfolio-summary strong { display: block; margin: 8px 0 2px; font-family: "Paperlogy", sans-serif; font-size: 1.55rem; font-weight: 700; }.portfolio-summary small { color: var(--muted); }
.portfolio-highlight { color: white; background: #557d89; }.portfolio-highlight span, .portfolio-highlight small { color: rgba(255,255,255,.74); }
.portfolio-allocation { margin-bottom: 18px; }.portfolio-bars { display: grid; gap: 13px; margin-top: 20px; }.portfolio-bar-row > div:first-child { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: .8rem; }.portfolio-bar-row b { font-size: .76rem; }.portfolio-bar-track { height: 8px; overflow: hidden; border-radius: 99px; background: #eee5dc; }.portfolio-bar-track i { display: block; height: 100%; border-radius: inherit; }
.portfolio-list { display: grid; gap: 11px; }.portfolio-row { display: grid; grid-template-columns: 46px 1.3fr .65fr .8fr 1fr auto; align-items: center; gap: 15px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }.stock-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--plum); font-family: "Paperlogy", sans-serif; font-weight: 700; }.stock-name h3 { margin: 0; font-size: .98rem; }.stock-name p, .stock-stat p { margin: 2px 0 0; font-size: .74rem; }.stock-name p { color: var(--muted); }.stock-stat span { display: block; color: var(--muted); font-size: .7rem; }.stock-stat strong { font-size: .86rem; }
.trade-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }.trade-summary span { color: var(--muted); font-size: .82rem; }.trade-summary strong { display: block; margin: 8px 0 2px; font-family: "Paperlogy", sans-serif; font-size: 1.55rem; font-weight: 700; }.trade-summary small { color: var(--muted); }.trade-buy { border-top: 4px solid var(--coral); }.trade-sell { border-top: 4px solid var(--blue); }
.trade-list { display: grid; gap: 11px; }.trade-row { display: grid; grid-template-columns: 110px 1.15fr .85fr 1.2fr auto; align-items: center; gap: 18px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }.trade-date strong, .trade-date span, .trade-amount span { display: block; }.trade-date strong { font-size: .84rem; }.trade-date span, .trade-amount span { color: var(--muted); font-size: .71rem; }.trade-stock { display: flex; align-items: center; gap: 10px; }.trade-stock h3 { margin: 0; font-size: .94rem; }.trade-stock p, .trade-amount p { margin: 2px 0 0; color: var(--muted); font-size: .72rem; }.trade-badge { flex: 0 0 auto; padding: 4px 8px; border-radius: 8px; font-size: .7rem; font-weight: 750; }.trade-badge.buy { color: var(--coral-dark); background: #fbe8df; }.trade-badge.sell { color: #3d6975; background: #e4eff1; }.trade-amount strong { font-size: .9rem; }.trade-memo { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }.trade-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
dialog { width: min(590px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 22px; background: var(--white); box-shadow: 0 25px 80px rgba(55,35,25,.25); }dialog::backdrop { background: rgba(48,38,32,.48); backdrop-filter: blur(3px); }.modal-card { padding: 28px; }.modal-heading { display: flex; justify-content: space-between; margin-bottom: 24px; }.close-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 1.4rem; }.modal-card > label, .two-columns label { display: block; margin-bottom: 17px; font-size: .86rem; font-weight: 700; }.modal-card label > span { float: right; color: var(--muted); font-size: .7rem; font-weight: 400; }.modal-card input, .modal-card textarea, .modal-card select { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; background: white; }.modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(228,111,79,.11); }.money-input { position: relative; }.money-input input { padding-right: 43px; }.money-input b { position: absolute; right: 14px; top: 18px; font-size: .82rem; }.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }fieldset { margin: 0 0 19px; padding: 0; border: 0; }legend { margin-bottom: 7px; font-size: .86rem; font-weight: 700; }.segmented { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.segmented.two { grid-template-columns: repeat(2,1fr); }.segmented input { position: absolute; opacity: 0; }.segmented span { display: block; padding: 10px; border: 1px solid var(--line); border-radius: 10px; text-align: center; font-size: .82rem; }.segmented input:checked + span { color: var(--coral-dark); border-color: var(--coral); background: #fff2eb; font-weight: 700; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at 25% 15%, #f4d4bd 0, transparent 28%), radial-gradient(circle at 80% 85%, #d9ded0 0, transparent 25%), #f7f0e6; }.login-card { width: min(520px, 100%); padding: 44px; border: 1px solid rgba(255,255,255,.6); border-radius: 28px; background: rgba(255,253,249,.88); box-shadow: var(--shadow); backdrop-filter: blur(12px); }.login-card h1 { margin: 0; white-space: nowrap; font-family: "Paperlogy", sans-serif; font-size: clamp(1.65rem, 6vw, 2.35rem); font-weight: 700; letter-spacing: -.04em; }.login-copy { margin: 12px 0 28px; color: var(--muted); }.login-card label { display: block; font-size: .82rem; font-weight: 700; }.login-card input { width: 100%; margin: 8px 0 13px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; }.form-error { min-height: 20px; margin: 9px 0 0; color: var(--coral-dark); font-size: .8rem; text-align: center; }.toast { position: fixed; left: 50%; bottom: 25px; z-index: 100; padding: 11px 17px; color: white; background: #40352f; border-radius: 12px; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1050px) { .summary-grid { grid-template-columns: repeat(2,1fr); }.dashboard-grid { grid-template-columns: 1fr; }.allocation-panel { min-height: 260px; }.donut-wrap { justify-content: center; }.investment-row { grid-template-columns: 48px 1fr 1fr auto; }.investment-row .row-stat.location { display: none; }.portfolio-row { grid-template-columns: 46px 1.3fr .7fr 1fr auto; }.portfolio-row .stock-stat:nth-of-type(3) { display: none; }.trade-row { grid-template-columns: 95px 1fr .8fr auto; }.trade-memo { display: none; } }
@media (max-width: 760px) { .sidebar { transform: translateX(-100%); transition: .25s; }.sidebar.open { transform: translateX(0); }.main { margin-left: 0; padding: 25px 18px 50px; }.icon-button { display: block; }.topbar { margin-bottom: 22px; }.month-row { flex-wrap: wrap; }.month-row .button { width: 100%; margin: 5px 0 0; }.summary-card { min-height: 125px; padding: 18px; }.year-chart { gap: 3px; }.bar-month small { font-size: .55rem; }.cumulative-panel { display: block; }.cumulative-stats { min-width: 0; margin-top: 22px; }.cumulative-stats div { padding-left: 12px; }.investment-overview, .portfolio-summary, .trade-summary { grid-template-columns: 1fr; }.investment-row, .portfolio-row { grid-template-columns: 42px 1fr auto; }.investment-row .row-stat, .portfolio-row .stock-stat { display: none; }.trade-row { grid-template-columns: 1fr auto; gap: 10px; }.trade-date { grid-column: 1; }.trade-stock { grid-column: 1; }.trade-amount { grid-column: 1; }.trade-row .row-actions { grid-column: 2; grid-row: 1 / span 3; }.section-intro { align-items: start; gap: 15px; }.section-intro .button { white-space: nowrap; }.two-columns, .trade-choice-row { grid-template-columns: 1fr; gap: 0; }.login-card { padding: 32px 25px; }.allocation-charts { grid-template-columns: 1fr; }.allocation-card + .allocation-card { padding-top: 22px; border-left: 0; border-top: 1px solid var(--line); }.allocation-percent-list { max-width: 260px; margin-inline: auto; } }
@media (max-width: 760px) { .record-overview { grid-template-columns: 1fr; }.record-row { grid-template-columns: 1fr auto; gap: 9px 14px; }.record-month, .record-amount { grid-column: 1; }.record-row .row-actions { grid-column: 2; grid-row: 1 / span 3; }.record-amount { display: flex; justify-content: space-between; gap: 15px; }.record-amount span { display: inline; } }
@media (max-width: 460px) { .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.summary-card strong { font-size: 1.05rem; }.panel { padding: 19px; }.donut-wrap { align-items: start; gap: 17px; }.donut { flex-basis: 125px; width: 125px; height: 125px; }.year-totals strong, .cumulative-stats strong { font-size: .78rem; }.section-intro { display: block; }.section-intro .button { width: 100%; margin-top: 15px; }.modal-card { padding: 22px; }.owner-tabs { width: 100%; }.owner-tab { min-width: 0; flex: 1; padding-inline: 8px; } }
@media (max-width: 380px) { .login-card h1 { font-size: 1.3rem; } }
@media (max-width: 760px) { .panel-heading h2 { white-space: nowrap; font-size: 1.25rem; }.legend { font-size: .68rem; } }
@media (max-width: 760px) { .modal-card input, .modal-card textarea, .modal-card select { font-size: 16px; } }
.segmented input { width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.segmented label { display: block; min-width: 0; }
.modal-card .segmented label > span { float: none; width: 100%; text-align: center; }