:root {
  --paper: #f5f1e9;
  --card: #fffdf9;
  --ink: #292824;
  --muted: #857f74;
  --line: #e5dfd4;
  --forest: #315c4c;
  --forest-soft: #dfe9df;
  --brick: #9d5545;
  --gold: #bd8b44;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 13px/1.6 var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.auth-page { min-height: 100vh; }
.auth-shell { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr); min-height: 100vh; }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; padding: 46px clamp(34px, 6vw, 86px); background: var(--forest); color: var(--paper); }
.auth-brand { color: var(--paper); width: fit-content; }
.auth-brand .brand-mark { background: var(--paper); color: var(--forest); }
.auth-story .kicker { color: #b9cebd; }
.auth-story h1 { margin: 12px 0 18px; font: clamp(42px, 5vw, 72px)/1.02 var(--serif); letter-spacing: -1.4px; }
.auth-story h1 em { color: #dcb468; font-style: normal; }
.auth-story p { color: #c6d4c9; }
.auth-serial { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; opacity: .72; }
.auth-panel { display: grid; place-items: center; padding: 36px; background: var(--paper); }
.auth-card { width: min(100%, 420px); padding: 44px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 22px 55px rgba(41,40,36,.08); }
.auth-card h2 { margin: 7px 0 10px; font: 34px/1.18 var(--serif); letter-spacing: -.4px; }
.auth-description { margin: 0 0 30px; color: var(--muted); font-size: 12px; }
.google-button, .signup-button { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--line); font-weight: 700; transition: .2s ease; }
.google-button { position: relative; background: #fff; }
.google-button:hover, .signup-button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(41,40,36,.08); }
.google-mark { position: absolute; left: 17px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #4285f4; border: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.signup-button { background: var(--forest); color: #fff; border-color: var(--forest); }
.test-login-button { display: flex; min-height: 42px; align-items: center; justify-content: center; margin-top: 10px; border: 1px dashed var(--gold); background: #fbf5e9; color: #856529; font-size: 10px; font-weight: 700; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--muted); font-size: 10px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-note { margin: 16px 0 0; color: var(--muted); text-align: center; font-size: 9px; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 246px; padding: 34px 27px 27px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(255,253,249,.48); flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.7px; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--forest); color: #fffdf9; font: 18px var(--serif); }
.brand-dot { color: var(--brick); }
.sidebar-label, .kicker, .panel-meta { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.sidebar-label { margin: 66px 0 18px 10px; }
.nav-list { display: grid; gap: 7px; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 6px; color: var(--muted); font-size: 12px; transition: .2s ease; }
.nav-item:hover, .nav-item.is-active { background: var(--forest-soft); color: var(--forest); }
.nav-item.is-active { font-weight: 700; }
.nav-icon { width: 17px; text-align: center; font-size: 17px; line-height: 1; }
.sidebar-note { margin-top: auto; padding: 19px 14px; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 10px; font: 14px/1.45 var(--serif); }
.note-icon, .spark { color: var(--gold); font-size: 18px; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); }
.profile-link { display: flex; gap: 9px; align-items: center; min-width: 0; }
.avatar, .icon-button { display: grid; place-items: center; border-radius: 50%; background: var(--brick); color: white; width: 30px; height: 30px; font-size: 11px; font-weight: 700; }
.profile-link strong, .profile-link small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 115px; }
.profile-link strong { font-size: 11px; }
.profile-link small { color: var(--muted); font-size: 9px; }
.logout-link { color: var(--muted); font-size: 18px; }
.main-content { width: min(1180px, 100%); padding: 66px 6vw 80px; margin: 0 auto; }
.page-header { position: relative; z-index: 20; display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 45px; }
.page-header h1 { margin: 4px 0 2px; font: 48px/1.1 var(--serif); letter-spacing: -.7px; }
.title-period { color: var(--brick); }
.lede { margin: 0; color: var(--muted); font-size: 12px; }
.header-actions { display: flex; gap: 15px; align-items: center; }
.period-button { border: 1px solid var(--line); background: transparent; padding: 9px 13px; border-radius: 4px; color: var(--muted); font-size: 11px; cursor: pointer; }
.period-button span { margin-left: 20px; color: var(--ink); }
.icon-button { border: 0; cursor: pointer; }
.metric-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.metric-card { min-height: 150px; padding: 20px 21px; background: var(--card); border: 1px solid var(--line); }
.metric-featured { background: var(--forest); color: #f5f1e9; border-color: var(--forest); }
.metric-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: 1.1px; font-weight: 700; }
.metric-featured .metric-top { color: #b9cebd; }
.metric-symbol { color: var(--gold); font-size: 16px; line-height: 1; }
.metric-card strong { display: block; margin-top: 25px; font: 37px/1 var(--serif); letter-spacing: -.5px; }
.metric-card strong small { font: 16px var(--sans); letter-spacing: 0; }
.metric-change { margin: 10px 0 0; color: #adcdb3; font-size: 10px; font-weight: 700; }
.metric-change span, .metric-caption { color: var(--muted); font-weight: 400; }
.metric-caption { margin: 10px 0 0; font-size: 10px; }
.content-grid { display: grid; grid-template-columns: 1.38fr 1fr; gap: 12px; margin-bottom: 42px; }
.panel { background: var(--card); border: 1px solid var(--line); padding: 26px 27px; min-height: 294px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.section-heading h2 { margin: 4px 0 0; font: 27px/1.2 var(--serif); letter-spacing: -.3px; }
.section-heading h2 em { color: var(--forest); font-style: normal; }
.panel-meta { padding-top: 5px; }
.heatmap-wrap { margin-top: 27px; }
.heatmap-calendar { min-width: 0; overflow-x: auto; padding-bottom: 4px; }
.heatmap-month-row, .heatmap-grid-row { display: grid; grid-template-columns: 30px auto; gap: 9px; justify-content: start; }
.heatmap-month-row { margin-bottom: 7px; }
.heatmap-months { display: grid; grid-template-columns: repeat(12,10px); gap: 4px; color: #aaa399; font-size: 7px; font-weight: 700; }
.heatmap-months span { overflow: visible; white-space: nowrap; }
.weekday-labels { display: grid; grid-template-rows: repeat(7,10px); gap: 4px; width: 30px; color: #aaa399; font-size: 7px; align-items: center; }
.weekday-labels span:nth-last-child(-n+2) { color: var(--brick); }
.heatmap { display: grid; grid-template-rows: repeat(7,10px); grid-template-columns: repeat(12,10px); grid-auto-flow: column; gap: 4px; }
.heat-cell { position: relative; border-radius: 2px; background: #ebe7df; cursor: pointer; }
.heat-cell[data-level="1"] { background: #c7d8c8; } .heat-cell[data-level="2"] { background: #91b69d; } .heat-cell[data-level="3"] { background: #568d70; } .heat-cell[data-level="4"] { background: var(--forest); }
.heat-cell.is-today { outline: 1px solid var(--brick); outline-offset: 2px; }
.heat-cell.is-future { background: repeating-linear-gradient(135deg,#f3efe7,#f3efe7 2px,#ebe6dc 2px,#ebe6dc 3px); cursor: default; opacity: .55; }
.heat-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.heatmap-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; }.heatmap-footer > p { margin: 0; color: var(--muted); font-size: 8px; }.heatmap-legend { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--muted); font-size: 8px; }.heatmap-legend i { width: 10px; height: 10px; border-radius: 2px; background: #ebe7df; }.heatmap-legend .level-1 { background: #c7d8c8; }.heatmap-legend .level-2 { background: #91b69d; }.heatmap-legend .level-3 { background: #568d70; }.heatmap-legend .level-4 { background: var(--forest); }
.insight-panel { background: #efe5d5; border-color: #e9ddca; }.insight-item { display: grid; grid-template-columns: 27px 1fr; gap: 5px; margin-top: 23px; padding-top: 14px; border-top: 1px solid rgba(157,85,69,.18); }.insight-index { color: var(--brick); font: 14px var(--serif); }.insight-item h3 { margin: 3px 0 1px; font: 17px/1.2 var(--serif); }.insight-item p { margin: 0; color: #7e7164; font-size: 10px; }.insight-eyebrow { color: var(--brick) !important; font-size: 8px !important; font-weight: 700; letter-spacing: 1.1px; }
.current-section { padding-top: 4px; }.section-heading-wide { align-items: end; margin-bottom: 20px; }.text-link { color: var(--forest); font-size: 11px; font-weight: 700; }.text-link span { margin-left: 7px; font-size: 17px; }.current-book { display: grid; grid-template-columns: 165px 1fr 210px; min-height: 208px; background: var(--forest); color: #f5f1e9; }.book-cover { position: relative; min-height: 208px; display: grid; place-items: center; background: #a55d4c; background-size: cover; background-position: center; overflow: hidden; }.book-cover::before { content: ''; position: absolute; inset: 15px 21px; border: 1px solid rgba(255,255,255,.4); }.book-cover span { position: relative; font: 64px var(--serif); color: rgba(255,253,249,.8); }.book-details { padding: 28px 32px; }.book-details .kicker { color: #b9cebd; }.book-details h3 { margin: 7px 0 0; font: 31px/1.15 var(--serif); }.book-author { color: #b9cebd; margin: 1px 0 27px; font-size: 11px; }.progress-row { display: flex; justify-content: space-between; color: #b9cebd; font-size: 10px; }.progress-row strong { color: #f5f1e9; }.progress-track { height: 4px; margin-top: 8px; background: rgba(255,255,255,.2); }.progress-track span { display: block; height: 100%; background: #dcb468; }.last-reading { color: #b9cebd; font-size: 9px; margin-top: 18px; }.last-reading strong { color: #f5f1e9; margin-left: 4px; }.book-quote { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 25px; background: rgba(0,0,0,.09); }.book-quote span { color: #dcb468; font: 42px/0 var(--serif); }.book-quote p { display: -webkit-box; margin: 12px 0; overflow: hidden; font: 15px/1.4 var(--serif); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }.book-quote small { color: #b9cebd; font-size: 8px; }.book-quote.is-empty span { font: 25px/1 var(--serif); }.book-quote.is-empty p { margin: 11px 0 5px; font-size: 16px; }.book-quote.is-empty a { width: fit-content; margin-top: 15px; padding-bottom: 2px; border-bottom: 1px solid #dcb468; color: #e7c77f; font-size: 8px; font-weight: 700; }.empty-reading { display: flex; align-items: center; gap: 22px; min-height: 150px; padding: 28px; background: var(--card); border: 1px dashed #cfc6b7; }.empty-book { display: grid; place-items: center; width: 70px; height: 94px; background: #e9dfce; color: var(--brick); font-size: 27px; }.empty-reading h3 { margin: 0 0 4px; font: 23px var(--serif); }.empty-reading p { margin: 0; max-width: 450px; color: var(--muted); font-size: 11px; }.primary-button { margin-left: auto; padding: 11px 14px; background: var(--forest); color: #fff; font-size: 10px; font-weight: 700; }.primary-button span { margin-left: 14px; font-size: 16px; }
.shelf-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.shelf-header h1 { margin: 7px 0 10px; font: clamp(42px, 5vw, 62px)/1.02 var(--serif); letter-spacing: -1px; }
.shelf-header h1 em { color: var(--forest); font-style: normal; }
.shelf-total { display: grid; place-items: center; align-content: center; width: 98px; height: 98px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: var(--card); }
.shelf-total strong { font: 34px/1 var(--serif); color: var(--forest); }
.shelf-total span { margin-top: 7px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 1.3px; }
.shelf-tools { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; padding-bottom: 17px; border-bottom: 1px solid var(--line); animation-delay: .08s; }
.shelf-filters { display: flex; align-items: center; gap: 7px; }
.shelf-filter { padding: 8px 12px; border-radius: 20px; color: var(--muted); font-size: 10px; font-weight: 700; transition: .2s ease; }
.shelf-filter span { margin-left: 5px; opacity: .65; }
.shelf-filter:hover, .shelf-filter.is-active { background: var(--forest); color: #fff; }
.shelf-search { position: relative; width: min(100%, 245px); }
.shelf-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.shelf-search input { width: 100%; height: 38px; padding: 0 40px 0 13px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 10px var(--sans); outline: none; }
.shelf-search input:focus { border-color: var(--forest); }
.shelf-search button { position: absolute; top: 0; right: 0; width: 39px; height: 38px; border: 0; background: transparent; color: var(--forest); font-size: 18px; cursor: pointer; }
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 34px clamp(18px, 2.7vw, 34px); animation-delay: .14s; }
.shelf-book { min-width: 0; }
.shelf-add-book button { display: flex; width: 100%; aspect-ratio: 2/3; flex-direction: column; align-items: center; justify-content: center; padding: 20px; border: 1px dashed #bdb4a5; background: rgba(255,253,249,.45); color: var(--muted); text-align: center; cursor: pointer; transition: .22s ease; }
.shelf-add-book button:hover, .shelf-add-book button:focus-visible { transform: translateY(-5px); border-color: var(--forest); background: var(--forest-soft); color: var(--forest); box-shadow: 0 13px 26px rgba(41,40,36,.09); outline: none; }
.shelf-add-symbol { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 18px; border: 1px solid currentColor; border-radius: 50%; font: 29px/1 var(--serif); }
.shelf-add-book strong { color: var(--ink); font: 17px/1.2 var(--serif); }.shelf-add-book small { max-width: 125px; margin-top: 7px; font-size: 8px; line-height: 1.5; }
.shelf-cover { position: relative; isolation: isolate; aspect-ratio: 2 / 3; overflow: hidden; background-color: #9d5545; background-size: cover; background-position: center; box-shadow: 0 11px 24px rgba(41,40,36,.13); transition: transform .25s ease, box-shadow .25s ease; }
.shelf-book:hover .shelf-cover { transform: translateY(-5px); box-shadow: 0 17px 32px rgba(41,40,36,.18); }
.shelf-cover::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to bottom, transparent 63%, rgba(20,25,22,.18) 69%, rgba(18,28,24,.94) 100%); pointer-events: none; }
.shelf-cover.has-cover-image::after { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 27%, rgba(0,0,0,.08)); pointer-events: none; }
.shelf-cover-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 20px 17px; color: #fff9ed; }
.shelf-cover-fallback::before { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(255,255,255,.35); }
.shelf-cover-fallback > * { position: relative; }
.shelf-cover-fallback span { font-size: 7px; font-weight: 700; letter-spacing: 1.3px; opacity: .72; }
.shelf-cover-fallback strong { margin: auto 0; font: clamp(21px, 2.2vw, 30px)/1.06 var(--serif); overflow-wrap: anywhere; }
.shelf-cover-fallback small { margin-bottom: 78px; font-size: 8px; opacity: .72; }
.cover-tone-0 { background-color: #315c4c; }.cover-tone-1 { background-color: #9d5545; }.cover-tone-2 { background-color: #7b705c; }.cover-tone-3 { background-color: #516276; }.cover-tone-4 { background-color: #9a7a45; }
.cover-progress { position: absolute; z-index: 2; right: 14px; bottom: 13px; left: 14px; color: #fff; }
.cover-progress-meta { display: flex; align-items: end; justify-content: space-between; }
.cover-progress-meta span { color: #cbd7ce; font-size: 7px; font-weight: 700; letter-spacing: 1.1px; }
.cover-progress-meta strong { font: 22px/1 var(--serif); }
.cover-progress-track { height: 3px; margin: 8px 0 6px; overflow: hidden; background: rgba(255,255,255,.24); }
.cover-progress-track span { display: block; height: 100%; background: linear-gradient(90deg, #d9ad62, #f4d99e); }
.cover-progress small { color: #cbd7ce; font-size: 7px; }
.shelf-book-meta { padding: 14px 2px 0; }
.shelf-book-meta h2 { margin: 0; overflow: hidden; font: 17px/1.25 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.shelf-book-meta p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.shelf-empty { display: grid; min-height: 360px; place-items: center; align-content: center; padding: 45px 20px; border: 1px dashed #cfc6b7; background: rgba(255,253,249,.42); text-align: center; animation-delay: .14s; }
.shelf-empty > span { color: var(--gold); font-size: 38px; }
.shelf-empty h2 { margin: 12px 0 3px; font: 29px var(--serif); }
.shelf-empty p { margin: 0; color: var(--muted); font-size: 11px; }
.shelf-empty a { margin-top: 20px; padding-bottom: 2px; border-bottom: 1px solid var(--forest); color: var(--forest); font-size: 10px; font-weight: 700; }
.flash-stack { position: fixed; z-index: 30; top: 22px; right: 24px; display: grid; gap: 8px; width: min(360px, calc(100vw - 36px)); }
.flash-message { padding: 12px 15px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 10px 25px rgba(41,40,36,.12); font-size: 10px; }
.flash-message.is-success { border-left: 3px solid var(--forest); }.flash-message.is-danger { border-left: 3px solid var(--brick); }
.book-log-header { position: relative; display: flex; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.book-log-heading { min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 31px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.back-link span { color: var(--forest); font-size: 16px; }
.book-log-heading h1 { max-width: 720px; margin: 5px 0 2px; font: clamp(40px, 5vw, 57px)/1.05 var(--serif); letter-spacing: -.8px; overflow-wrap: anywhere; }
.book-log-heading > p:last-child { margin: 0; color: var(--muted); font-size: 11px; }.book-log-heading > p:last-child span { margin: 0 8px; }
.book-menu-wrap { position: relative; flex: 0 0 auto; }
.book-menu-button { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; letter-spacing: 2px; }
.book-menu { position: absolute; z-index: 8; top: 51px; right: 0; width: 165px; padding: 6px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 14px 32px rgba(41,40,36,.13); }
.book-menu[hidden] { display: none; }
.book-menu button, .book-menu a { display: block; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--muted); text-align: left; font-size: 10px; cursor: pointer; }
.book-menu button:hover, .book-menu a:hover { background: var(--forest-soft); color: var(--forest); }
.book-log-summary { display: grid; grid-template-columns: 74px minmax(180px, 1fr) auto; align-items: center; gap: 22px; margin-bottom: 46px; padding: 18px 22px; border: 1px solid var(--line); background: var(--card); animation-delay: .06s; }
.book-log-cover { display: grid; width: 74px; aspect-ratio: 2/3; place-items: center; background-size: cover; background-position: center; box-shadow: 0 5px 13px rgba(41,40,36,.14); }
.book-log-cover span { color: rgba(255,255,255,.8); font: 34px var(--serif); }
.book-log-progress { max-width: 420px; }
.book-log-progress > strong { display: block; margin-top: 3px; font: 31px/1 var(--serif); }.book-log-progress > strong small { font: 13px var(--sans); }
.book-log-progress > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 8px; }
.detail-progress-track { height: 4px; margin-top: 9px; background: var(--line); }.detail-progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--forest), #75a080); }
.book-serial { display: grid; gap: 3px; margin: 0; color: var(--muted); font-size: 10px; letter-spacing: 1px; }.book-serial span { font-size: 7px; font-weight: 700; letter-spacing: 1.3px; }
.reading-journal-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr); gap: clamp(32px, 5vw, 70px); align-items: start; animation-delay: .12s; }
.journal-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.journal-section-heading h2 { margin: 4px 0 0; font: 29px var(--serif); }.journal-section-heading > span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: 1px; }
.reading-day-list { display: grid; }
.reading-day { display: grid; grid-template-columns: 62px 1fr; gap: 19px; padding: 27px 0; border-bottom: 1px solid var(--line); }
.reading-day > time { display: grid; align-content: start; color: var(--muted); text-align: center; }.reading-day > time strong { color: var(--forest); font: 31px/1 var(--serif); }.reading-day > time span { margin-top: 5px; font-size: 7px; letter-spacing: 1px; }
.reading-day-records { display: grid; gap: 11px; }
.reading-record { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); }
.reading-record-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 1px; }.reading-record-meta span { color: var(--brick); }
.reading-record p { margin: 9px 0 0; color: #514d46; font-size: 11px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.reading-history-empty { display: grid; min-height: 310px; place-items: center; align-content: center; text-align: center; }.reading-history-empty span { color: var(--gold); font-size: 29px; }.reading-history-empty h3 { margin: 10px 0 2px; font: 22px var(--serif); }.reading-history-empty p { margin: 0; color: var(--muted); font-size: 10px; }
.reading-compose { position: sticky; top: 30px; padding: 29px; background: var(--forest); color: var(--paper); box-shadow: 0 18px 38px rgba(49,92,76,.16); }
.reading-compose .kicker { color: #aec5b6; }.reading-compose h2 { margin: 5px 0 24px; font: 27px/1.2 var(--serif); }
.reading-compose form { display: grid; }.reading-compose label { margin: 15px 0 6px; color: #c2d2c7; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.page-input-wrap { position: relative; }.page-input-wrap input { padding-right: 52px !important; }.page-input-wrap span { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.reading-compose input, .reading-compose textarea { width: 100%; padding: 12px 13px; border: 1px solid rgba(255,255,255,.15); background: #fffdf9; color: var(--ink); font: 10px/1.6 var(--sans); outline: none; resize: vertical; }
.reading-compose input:focus, .reading-compose textarea:focus { border-color: #dfbd7e; box-shadow: 0 0 0 2px rgba(223,189,126,.15); }
.journal-submit, .finish-reading-button { min-height: 43px; border: 0; cursor: pointer; font-size: 9px; font-weight: 700; }
.journal-submit { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 0 15px; background: #dfbd7e; color: #29382f; }.journal-submit span { font-size: 16px; }
.finish-reading-button { margin-top: 9px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #dbe5dd; }
.modal-copy { margin: -14px 0 18px; color: var(--muted); font-size: 10px; }.split-actions { justify-content: space-between; }.split-actions .primary-button { margin-left: 0; }
.book-modal select, .book-modal textarea { width: 100%; padding: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; outline: none; }
.journal-tabs { display: flex; gap: 27px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.journal-tabs a { position: relative; padding: 0 2px 13px; color: var(--muted); font-size: 11px; font-weight: 700; }
.journal-tabs a::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.journal-tabs a.is-active { color: var(--forest); }.journal-tabs a.is-active::after { background: var(--forest); }
.journal-tabs span { margin-left: 5px; color: var(--gold); font-size: 8px; }
.reading-journal-grid.is-bookmark-tab { grid-template-columns: 1fr; }
.bookmark-tab-panel { min-width: 0; }
.linked-bookmark-list { display: grid; gap: 14px; margin-top: 22px; }
.linked-bookmark-card { display: grid; grid-template-columns: 150px minmax(0,1fr); min-height: 245px; border: 1px solid var(--line); background: var(--card); }
.linked-bookmark-image { overflow: hidden; background: #161b17; }.linked-bookmark-image img { width: 100%; height: 100%; object-fit: cover; }
.linked-bookmark-content { padding: 24px 26px; }
.linked-bookmark-heading { display: flex; justify-content: space-between; gap: 18px; }.linked-bookmark-heading span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }.linked-bookmark-heading h3 { margin: 4px 0 0; font: 22px var(--serif); letter-spacing: .5px; }.linked-bookmark-heading a { align-self: start; padding-bottom: 2px; border-bottom: 1px solid var(--forest); color: var(--forest); font-size: 9px; font-weight: 700; }
.bookmark-action-label { margin: 7px 0 17px; color: var(--brick); font-size: 8px; font-weight: 700; }
.linked-bookmark-content form { display: grid; grid-template-columns: 1fr auto; gap: 7px 9px; }.linked-bookmark-content label { grid-column: 1 / -1; color: var(--muted); font-size: 8px; font-weight: 700; }.linked-bookmark-content textarea { min-height: 65px; padding: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 10px/1.5 var(--sans); resize: vertical; outline: none; }.linked-bookmark-content form button { padding: 0 13px; border: 0; background: var(--forest); color: #fff; font-size: 8px; font-weight: 700; cursor: pointer; }
.mobile-flow-header { margin-bottom: 32px; }.mobile-flow-header h1 { margin: 5px 0 11px; font: clamp(42px, 5vw, 59px)/1.02 var(--serif); }.mobile-flow-header h1 em { color: var(--forest); font-style: normal; }.mobile-flow-header > p:last-child { max-width: 520px; margin: 0; color: var(--muted); font-size: 11px; }
.bookmark-connect-card { max-width: 760px; padding: clamp(22px,4vw,38px); border: 1px solid var(--line); background: var(--card); animation-delay: .08s; }
.connect-device { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 22px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }.connect-device img { width: 92px; height: 118px; object-fit: cover; background: #171b17; }.connect-device div { display: grid; }.connect-device span, .settings-device-preview > span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }.connect-device strong { margin: 5px 0 2px; font: 24px var(--serif); letter-spacing: .5px; }.connect-device small { color: var(--forest); font-size: 8px; }
.exclude-linked-form { margin: 20px 0 14px; }.exclude-linked-form label { display: flex; align-items: center; gap: 8px; width: fit-content; color: var(--muted); font-size: 9px; cursor: pointer; }.exclude-linked-form input { position: absolute; opacity: 0; }.exclude-linked-form label > span { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid var(--line); background: #fff; }.exclude-linked-form input:checked + span { border-color: var(--forest); background: var(--forest); }.exclude-linked-form input:checked + span::after { content: '✓'; color: #fff; font-size: 9px; }
.connect-book-list { display: grid; gap: 8px; }.connect-book-option { position: relative; display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 13px; padding: 10px 12px; border: 1px solid var(--line); cursor: pointer; transition: .2s ease; }.connect-book-option:hover { border-color: #aabaae; }.connect-book-option > input { position: absolute; opacity: 0; }.connect-book-option:has(input:checked) { border-color: var(--forest); background: var(--forest-soft); }.connect-book-cover { display: grid; width: 42px; aspect-ratio: 2/3; place-items: center; background-size: cover; background-position: center; color: rgba(255,255,255,.8); font: 20px var(--serif); }.connect-book-copy { display: grid; min-width: 0; }.connect-book-copy strong, .connect-book-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.connect-book-copy strong { font: 15px var(--serif); }.connect-book-copy small { color: var(--muted); font-size: 8px; }.connect-book-copy em { width: fit-content; margin-top: 4px; color: var(--brick); font-size: 7px; font-style: normal; font-weight: 700; }.connect-check { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; }.connect-book-option:has(input:checked) .connect-check { border-color: var(--forest); background: var(--forest); color: #fff; }
.connect-submit { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 0 17px; border: 0; background: var(--forest); color: #fff; font-size: 9px; font-weight: 700; cursor: pointer; }.connect-submit span { font-size: 16px; }.connect-empty { padding: 36px 15px; text-align: center; }.connect-empty p { color: var(--muted); }.connect-empty a { color: var(--forest); font-weight: 700; }
.bookmark-settings-layout { display: grid; grid-template-columns: minmax(210px,.55fr) minmax(360px,1fr); gap: 18px; max-width: 850px; animation-delay: .08s; }.settings-device-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 29px; background: #161b17; color: #fff; }.settings-device-preview img { width: min(100%,190px); max-height: 360px; object-fit: cover; }.settings-device-preview > span { margin-top: 17px; color: #aebbb2; }.settings-device-preview > strong { margin-top: 4px; font: 20px var(--serif); letter-spacing: .5px; }
.bookmark-settings-form { padding: 31px; border: 1px solid var(--line); background: var(--card); }.bookmark-settings-form fieldset { display: grid; gap: 8px; margin: 0 0 23px; padding: 0; border: 0; }.bookmark-settings-form legend, .settings-field { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .7px; }.bookmark-settings-form legend { margin-bottom: 9px; }.action-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); cursor: pointer; }.action-option > input { accent-color: var(--forest); }.action-option > span { display: grid; }.action-option strong { color: var(--ink); font-size: 10px; }.action-option small { color: var(--muted); font-size: 8px; }.action-option i { margin-left: auto; color: var(--brick); font-size: 7px; font-style: normal; }.action-option:has(input:checked) { border-color: var(--forest); background: var(--forest-soft); }
.settings-field { display: grid; gap: 7px; margin-top: 14px; }.settings-field select, .settings-field textarea { width: 100%; padding: 11px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 10px/1.5 var(--sans); outline: none; }.unlink-form { max-width: 850px; margin-top: 13px; text-align: right; }.unlink-form button { border: 0; background: transparent; color: var(--brick); font-size: 8px; cursor: pointer; text-decoration: underline; }
.reveal { animation: rise .55s both; }.metric-grid { animation-delay: .08s; }.content-grid { animation-delay: .16s; }.current-section { animation-delay: .24s; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) { .sidebar { width: 205px; padding-left: 18px; padding-right: 18px; }.main-content { padding-left: 32px; padding-right: 32px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.content-grid { grid-template-columns: 1fr; }.reading-journal-grid { grid-template-columns: 1fr; }.reading-compose { position: static; grid-row: 1; } }
@media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; }.auth-story { min-height: 310px; padding: 30px 24px; }.auth-story h1 { font-size: 43px; }.auth-panel { padding: 24px 16px; }.auth-card { padding: 30px 24px; }.shelf-header { align-items: center; }.shelf-total { width: 78px; height: 78px; }.shelf-total strong { font-size: 28px; }.shelf-tools { align-items: stretch; flex-direction: column; gap: 13px; }.shelf-search { width: 100%; max-width: none; }.shelf-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 27px 15px; }.bookmark-settings-layout { grid-template-columns: 1fr; }.settings-device-preview { min-height: 290px; }.settings-device-preview img { max-height: 235px; }.linked-bookmark-card { grid-template-columns: 115px minmax(0,1fr); } }
@media (max-width: 640px) { .app-shell { display: block; }.sidebar { position: sticky; z-index: 10; top: 0; width: 100%; height: 62px; padding: 12px 18px; flex-direction: row; align-items: center; background: rgba(245,241,233,.94); backdrop-filter: blur(12px); }.sidebar-label, .sidebar-note, .sidebar-footer, .nav-item span:not(.nav-icon) { display: none; }.nav-list { display: flex; margin-left: auto; }.nav-item { padding: 9px; }.brand { font-size: 16px; }.main-content { padding: 38px 18px 55px; }.page-header { display: block; margin-bottom: 30px; }.page-header h1 { font-size: 40px; }.header-actions { margin-top: 20px; justify-content: space-between; }.metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.metric-card { min-height: 125px; padding: 15px; }.metric-card strong { font-size: 29px; margin-top: 20px; }.content-grid { gap: 8px; }.panel { padding: 21px 16px; overflow: hidden; }.section-heading h2 { font-size: 23px; }.heatmap-month-row, .heatmap-grid-row { grid-template-columns: 25px auto; gap: 6px; }.heatmap { grid-template-columns: repeat(12,9px); grid-template-rows: repeat(7,9px); gap: 3px; }.heatmap-months { grid-template-columns: repeat(12,9px); gap: 3px; }.weekday-labels { width: 25px; gap: 3px; grid-template-rows: repeat(7,9px); }.heatmap-footer { align-items: flex-start; flex-direction: column; }.current-book { grid-template-columns: 100px 1fr; }.book-cover { min-height: 180px; }.book-details { padding: 20px 17px; }.book-details h3 { font-size: 24px; }.book-quote { display: none; }.empty-reading { align-items: flex-start; flex-wrap: wrap; }.primary-button { margin-left: 92px; }.lede { max-width: 300px; }.flash-stack { top: 72px; right: 18px; }.book-log-heading h1 { font-size: 38px; }.book-log-summary { grid-template-columns: 58px 1fr; gap: 15px; padding: 14px; }.book-log-cover { width: 58px; }.book-serial { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }.reading-day { grid-template-columns: 48px 1fr; gap: 11px; }.reading-compose { padding: 23px 19px; }.linked-bookmark-card { grid-template-columns: 92px minmax(0,1fr); }.linked-bookmark-content { padding: 17px 15px; }.linked-bookmark-content form { grid-template-columns: 1fr; }.linked-bookmark-content form button { min-height: 36px; }.bookmark-connect-card { padding: 19px 15px; }.connect-device { grid-template-columns: 72px 1fr; gap: 14px; }.connect-device img { width: 72px; height: 100px; }.bookmark-settings-form { padding: 22px 17px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.profile-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 38px; }
.profile-header h1 { margin: 7px 0 10px; font: clamp(44px,5vw,64px)/1.02 var(--serif); letter-spacing: -1px; }.profile-header h1 em { color: var(--forest); font-style: normal; }
.profile-header > div > p:last-child { max-width: 540px; margin: 0; color: var(--muted); font-size: 11px; word-break: keep-all; }
.profile-home-link { display: inline-flex; align-items: center; gap: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--forest); color: var(--forest); font-size: 9px; font-weight: 700; }.profile-home-link span { font-size: 14px; }
.profile-layout { display: grid; grid-template-columns: minmax(245px,.72fr) minmax(410px,1.45fr); gap: 14px; align-items: stretch; animation-delay: .08s; }
.profile-identity-card { position: relative; display: flex; min-height: 470px; flex-direction: column; padding: 27px; overflow: hidden; background: var(--forest); color: var(--paper); }.profile-identity-card::after { content: ''; position: absolute; right: -78px; bottom: -112px; width: 245px; height: 245px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018); }
.profile-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; }.profile-card-label, .profile-account-state { color: #b8cbbd; font-size: 7px; font-weight: 700; letter-spacing: 1.3px; }.profile-account-state { display: flex; align-items: center; gap: 6px; }.profile-account-state i { width: 6px; height: 6px; border-radius: 50%; background: #dfbd76; box-shadow: 0 0 0 3px rgba(223,189,118,.12); }
.profile-avatar-large { position: relative; z-index: 1; display: grid; width: 106px; height: 106px; place-items: center; margin: 57px auto 29px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: var(--brick); box-shadow: 0 0 0 10px rgba(255,255,255,.05); font: 48px var(--serif); }
.profile-person { position: relative; z-index: 1; text-align: center; }.profile-person p { margin: 0 0 5px; color: #b8cbbd; font-size: 7px; font-weight: 700; letter-spacing: 1.3px; }.profile-person h2 { margin: 0; font: 30px/1.15 var(--serif); overflow-wrap: anywhere; }.profile-person > span { display: block; margin-top: 5px; color: #b8cbbd; font-size: 9px; overflow-wrap: anywhere; }
.profile-provider { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }.profile-google-mark { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--paper); color: #4285f4; font-size: 11px; font-weight: 700; }.profile-provider div { display: grid; }.profile-provider small { color: #9fb5a5; font-size: 6px; font-weight: 700; letter-spacing: 1px; }.profile-provider strong { font-size: 9px; }
.profile-main-column { display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.profile-activity { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); background: var(--card); }.profile-activity article { position: relative; min-height: 125px; padding: 19px 20px; border-right: 1px solid var(--line); }.profile-activity article:last-child { border: 0; }.profile-activity article > span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 1.1px; }.profile-activity strong { display: block; margin-top: 13px; color: var(--forest); font: 35px/1 var(--serif); }.profile-activity small { color: var(--muted); font-size: 8px; }
.profile-about-card { display: flex; min-height: 331px; flex-direction: column; padding: 28px 30px; border: 1px solid var(--line); background: var(--card); }.profile-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.profile-section-heading h2 { margin: 4px 0 0; font: 27px/1.2 var(--serif); }.profile-section-heading > span { padding-top: 5px; color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }
.profile-form-description { margin: 11px 0 17px; color: var(--muted); font-size: 9px; word-break: keep-all; }.profile-about-card textarea { width: 100%; min-height: 130px; flex: 1; padding: 15px 16px; border: 1px solid var(--line); background: #faf8f3; color: var(--ink); font: 11px/1.75 var(--sans); resize: vertical; outline: none; }.profile-about-card textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(49,92,76,.08); }.profile-about-card textarea::placeholder { color: #aca59a; }
.profile-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 13px; }.profile-form-footer small { color: var(--muted); font-size: 7px; }.profile-form-footer button { display: inline-flex; min-height: 39px; align-items: center; gap: 26px; padding: 0 14px; border: 0; background: var(--forest); color: #fff; font-size: 8px; font-weight: 700; cursor: pointer; }.profile-form-footer button span { font-size: 14px; }
.profile-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; animation-delay: .14s; }.profile-shortcuts > a { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 14px; min-height: 82px; padding: 16px 20px; border: 1px solid var(--line); background: var(--card); transition: transform .2s ease, border-color .2s ease; }.profile-shortcuts > a:hover { transform: translateY(-2px); border-color: #a7b8ac; }.profile-shortcut-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: var(--forest-soft); color: var(--forest); font-size: 17px; }.profile-shortcuts div { display: grid; }.profile-shortcuts small { color: var(--muted); font-size: 6px; font-weight: 700; letter-spacing: 1.1px; }.profile-shortcuts strong { margin-top: 2px; font: 16px var(--serif); }.profile-shortcuts b { color: var(--forest); font-size: 16px; font-weight: 400; }
.profile-account { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 44px; padding-top: 25px; border-top: 1px solid var(--line); animation-delay: .2s; }.profile-account h2 { margin: 3px 0 2px; font: 22px var(--serif); }.profile-account div > p:last-child { margin: 0; color: var(--muted); font-size: 8px; }.profile-account > a { display: inline-flex; gap: 18px; padding-bottom: 3px; border-bottom: 1px solid var(--brick); color: var(--brick); font-size: 9px; font-weight: 700; }.profile-account > a span { font-size: 13px; }
@media (max-width: 900px) { .profile-layout { grid-template-columns: minmax(225px,.65fr) minmax(330px,1fr); }.profile-activity article { padding: 16px 14px; }.profile-about-card { padding: 24px 22px; } }
@media (max-width: 760px) { .profile-layout { grid-template-columns: 1fr; }.profile-identity-card { min-height: 420px; }.profile-avatar-large { margin-top: 38px; }.profile-shortcuts { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .profile-header { display: block; }.profile-header h1 { font-size: 43px; }.profile-home-link { margin-top: 20px; }.profile-identity-card { min-height: 390px; padding: 23px; }.profile-avatar-large { width: 88px; height: 88px; margin: 31px auto 22px; font-size: 40px; }.profile-person h2 { font-size: 27px; }.profile-activity article { min-width: 0; min-height: 108px; padding: 15px 10px; }.profile-activity article > span { font-size: 6px; letter-spacing: .6px; }.profile-activity strong { font-size: 29px; }.profile-about-card { padding: 22px 17px; }.profile-form-footer { align-items: flex-start; flex-direction: column; }.profile-form-footer button { align-self: stretch; justify-content: space-between; }.profile-account { align-items: flex-start; flex-direction: column; } }

/* Public landing */
.landing-page { overflow-x: hidden; }
.landing-header { position: relative; z-index: 10; display: flex; width: min(1180px, calc(100% - 48px)); height: 88px; align-items: center; justify-content: space-between; margin: 0 auto; border-bottom: 1px solid var(--line); }
.landing-nav { display: flex; align-items: center; gap: 34px; color: var(--muted); font-size: 10px; font-weight: 700; }
.landing-nav > a { transition: color .2s ease; }.landing-nav > a:hover { color: var(--forest); }
.landing-nav .landing-logout { color: var(--brick); }
.landing-nav .landing-login { padding: 11px 15px; border: 1px solid var(--forest); color: var(--forest); }.landing-nav .landing-login span { margin-left: 17px; font-size: 15px; }
.landing-hero { display: grid; width: min(1180px, calc(100% - 48px)); min-height: 655px; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(30px, 5vw, 80px); margin: 0 auto; padding: 62px 0 72px; }
.hero-copy { position: relative; z-index: 2; }.hero-copy h1 { margin: 12px 0 24px; font: clamp(52px, 6.1vw, 82px)/.98 var(--serif); letter-spacing: -2px; }.hero-copy h1 em { color: var(--forest); font-style: normal; }
.hero-lede { max-width: 510px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; word-break: keep-all; }
.hero-actions { display: flex; align-items: center; gap: 23px; margin-top: 35px; }
.landing-primary { display: inline-flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 33px; padding: 0 18px; background: var(--forest); color: #fff; font-size: 10px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }.landing-primary:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(49,92,76,.18); }.landing-primary span { font-size: 17px; }
.landing-secondary { padding-bottom: 3px; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 700; }
.landing-test-login { color: var(--brick); font-size: 9px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin: 50px 0 0; color: var(--muted); font-size: 9px; }.hero-note span { color: var(--gold); font-size: 14px; }
.hero-visual { position: relative; min-height: 515px; isolation: isolate; background: radial-gradient(circle at 52% 45%, #ede4d5 0 31%, transparent 32%); }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid #dcd4c6; border-radius: 50%; }.hero-orbit-one { inset: 40px 56px; }.hero-orbit-two { inset: 94px 110px; }
.hero-device { position: absolute; z-index: 2; top: 24px; left: 50%; width: 180px; height: 468px; overflow: hidden; transform: translateX(-50%) rotate(7deg); filter: drop-shadow(0 25px 25px rgba(31,39,31,.22)); }.hero-device img { width: 100%; height: 100%; object-fit: cover; }
.hero-stat-card, .hero-quote-card { position: absolute; z-index: 3; border: 1px solid var(--line); background: rgba(255,253,249,.94); box-shadow: 0 18px 35px rgba(41,40,36,.1); backdrop-filter: blur(9px); }
.hero-stat-card { top: 76px; left: 3px; width: 176px; padding: 18px; }.hero-stat-card > span { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }.hero-stat-card strong { display: block; margin: 10px 0; font: 30px/1 var(--serif); }.hero-stat-card strong small { font: 11px var(--sans); }.hero-stat-card p { margin: 0; color: var(--muted); font-size: 7px; }.hero-stat-card i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #6d9a75; }
.hero-quote-card { right: 0; bottom: 55px; width: 210px; padding: 20px 21px; }.hero-quote-card .quote-mark { color: var(--gold); font: 35px/1 var(--serif); }.hero-quote-card p { margin: -3px 0 13px; font: 15px/1.5 var(--serif); word-break: keep-all; }.hero-quote-card small { color: var(--muted); font-size: 7px; }
.hero-tap { position: absolute; right: 26px; top: 38px; color: var(--brick); font-size: 7px; font-weight: 700; letter-spacing: 1.1px; transform: rotate(7deg); }.hero-tap b { display: grid; width: 29px; height: 29px; place-items: center; margin: 7px auto; border: 1px solid var(--brick); border-radius: 50%; font-size: 16px; }
.landing-intro { padding: 105px max(24px, calc((100vw - 1180px) / 2)); background: #ece4d7; }
.landing-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }.landing-section-heading h2, .trend-heading h2 { margin: 8px 0 0; font: clamp(40px, 5vw, 62px)/1.03 var(--serif); letter-spacing: -1px; }
.intro-copy { width: min(100%, 470px); margin: -70px 0 52px auto; color: #776f65; font-size: 12px; line-height: 1.8; word-break: keep-all; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ddd3c4; }
.feature-card { position: relative; min-height: 350px; padding: 30px; border-right: 1px solid #ddd3c4; background: var(--card); }.feature-card:last-child { border: 0; }.feature-card-dark { background: var(--forest); color: var(--paper); }.feature-card-warm { background: #f4ebdc; }
.feature-number { position: absolute; top: 24px; right: 25px; color: var(--muted); font: 13px var(--serif); }.feature-card-dark .feature-number, .feature-card-dark .kicker, .feature-card-dark > p:last-child { color: #b9cebd; }
.feature-icon { display: grid; width: 68px; height: 68px; place-items: center; margin: 20px 0 56px; border: 1px solid #7f9c89; border-radius: 50%; color: #e1bd77; font-size: 32px; }
.feature-card h3 { margin: 7px 0 13px; font: 26px/1.2 var(--serif); }.feature-card > p:last-child { max-width: 290px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; word-break: keep-all; }
.mini-chart { display: flex; height: 90px; align-items: flex-end; gap: 7px; margin: 1px 0 53px; padding: 0 7px 10px; border-bottom: 1px solid var(--line); }.mini-chart i { flex: 1; max-width: 18px; background: var(--forest); opacity: .28; }.mini-chart i:nth-last-child(-n+2) { opacity: 1; }
.feature-lines { display: grid; gap: 10px; margin: 25px 0 66px; }.feature-lines i { height: 1px; background: #ccbba2; }.feature-lines i:nth-child(2) { width: 78%; }.feature-lines i:nth-child(3) { width: 52%; }
.trend-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 112px 0 120px; }
.trend-heading { display: grid; grid-template-columns: 1fr 400px; align-items: end; gap: 60px; margin-bottom: 54px; }.trend-heading h2 em { color: var(--brick); font-style: normal; }.trend-heading > p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.8; word-break: keep-all; }
.trend-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; padding-top: 34px; border-top: 1px solid var(--line); }
.trend-feature { display: grid; grid-template-columns: minmax(210px, .72fr) 1fr; align-items: center; gap: 39px; }.trend-feature-copy h3 { margin: 10px 0 17px; font: clamp(28px, 3vw, 41px)/1.12 var(--serif); }.trend-feature-copy > p:not(.trend-category) { color: var(--muted); font-size: 10px; line-height: 1.8; word-break: keep-all; }.trend-feature-copy a { display: inline-flex; gap: 28px; margin-top: 20px; padding-bottom: 3px; border-bottom: 1px solid var(--forest); color: var(--forest); font-size: 9px; font-weight: 700; }.trend-feature-copy a span { font-size: 15px; }
.trend-cover { position: relative; display: flex; aspect-ratio: 2/3; flex-direction: column; overflow: hidden; padding: 22px 19px; color: #fff9ed; box-shadow: 0 18px 30px rgba(41,40,36,.16); }.trend-cover::after { content: ''; position: absolute; inset: 11px; border: 1px solid rgba(255,255,255,.34); }.trend-cover span { position: relative; z-index: 1; margin: auto 0; font: 26px/1.02 var(--serif); }.trend-cover small { position: relative; z-index: 1; font-size: 6px; letter-spacing: 1px; opacity: .7; }.trend-cover-main { background: linear-gradient(145deg,#263d34,#315c4c 56%,#98814f); }.trend-cover-main span { font-size: clamp(31px, 3.5vw, 48px); }.trend-cover-blue { background: linear-gradient(145deg,#343e52,#56667d); }.trend-cover-red { background: linear-gradient(145deg,#884f43,#b16855); }
.trend-category { margin: 0; color: var(--brick); font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }.trend-list { display: grid; gap: 28px; }.trend-item { position: relative; display: grid; grid-template-columns: 102px 1fr; align-items: center; gap: 21px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }.trend-item:last-child { border: 0; }.trend-item h3 { margin: 7px 0; font: 21px/1.2 var(--serif); }.trend-item > div:last-child > p:last-child { margin: 0; color: var(--muted); font-size: 8px; }.trend-rank { position: absolute; top: 0; right: 0; color: #d7cfc3; font: 24px var(--serif); }
.landing-cta { display: grid; min-height: 430px; place-items: center; align-content: center; padding: 70px 24px; background: var(--forest); color: var(--paper); text-align: center; }.cta-symbol { color: #deb96f; font-size: 22px; }.landing-cta .kicker { margin-top: 14px; color: #abc1b0; }.landing-cta h2 { margin: 7px 0 10px; font: clamp(42px, 5vw, 61px)/1.1 var(--serif); }.landing-cta > p:not(.kicker) { margin: 0 0 28px; color: #bfd0c2; font-size: 11px; }.landing-primary-light { background: var(--paper); color: var(--forest); }
.landing-footer { display: flex; min-height: 116px; align-items: center; justify-content: space-between; gap: 25px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; }.landing-footer p, .landing-footer > span { color: var(--muted); font-size: 8px; }.landing-footer > span { letter-spacing: 1px; }
@media (max-width: 900px) { .landing-hero { min-height: auto; grid-template-columns: 1fr; padding-top: 76px; }.hero-copy { max-width: 650px; }.hero-visual { width: min(100%,610px); margin: 0 auto; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 300px; border-right: 0; border-bottom: 1px solid #ddd3c4; }.trend-heading { grid-template-columns: 1fr; gap: 24px; }.trend-layout { grid-template-columns: 1fr; }.trend-feature { max-width: 720px; }.trend-list { grid-template-columns: 1fr 1fr; gap: 20px; }.trend-item { grid-template-columns: 90px 1fr; } }
@media (max-width: 640px) { .landing-header { width: calc(100% - 36px); height: 70px; }.landing-nav { gap: 10px; }.landing-nav > a:not(.landing-login):not(.landing-logout) { display: none; }.landing-nav .landing-logout { font-size: 9px; }.landing-nav .landing-login { padding: 8px 11px; }.landing-hero, .trend-section { width: calc(100% - 36px); }.landing-hero { padding: 54px 0 65px; }.hero-copy h1 { font-size: clamp(45px,14vw,62px); letter-spacing: -1px; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-note { margin-top: 34px; }.hero-visual { min-height: 420px; margin-top: 20px; }.hero-orbit-one { inset: 25px 5px; }.hero-orbit-two { inset: 65px 45px; }.hero-device { width: 138px; height: 360px; }.hero-stat-card { top: 55px; width: 142px; padding: 13px; }.hero-quote-card { right: -5px; bottom: 22px; width: 165px; padding: 15px; }.hero-quote-card p { font-size: 12px; }.hero-tap { display: none; }.landing-intro { padding: 78px 18px; }.landing-section-heading { display: block; }.intro-copy { margin: 24px 0 38px; }.feature-card { min-height: 290px; padding: 25px; }.trend-section { padding: 78px 0 85px; }.trend-feature { grid-template-columns: 1fr; }.trend-cover-main { width: min(76%, 265px); }.trend-list { grid-template-columns: 1fr; }.trend-item { grid-template-columns: 92px 1fr; }.landing-cta h2 { font-size: 39px; }.landing-footer { align-items: flex-start; flex-direction: column; padding: 32px 0; }.landing-footer p { margin: 0; } }

/* Toss-inspired landing refresh */
.landing-v2 { --landing-blue: #3182f6; --landing-gray: #f2f4f6; --landing-text: #191f28; background: #fff; color: var(--landing-text); font-family: 'Noto Sans KR',var(--sans); }
.landing-v2 .landing-header { position: sticky; top: 0; z-index: 20; width: 100%; height: 72px; padding: 0 max(24px,calc((100vw - 1180px)/2)); border: 0; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); }
.landing-v2 .brand { font-family: var(--sans); font-weight: 800; }.landing-v2 .brand-mark { border-radius: 10px; background: var(--forest); font-family: var(--serif); }
.landing-v2 .landing-nav { gap: 30px; color: #6b7684; font-size: 13px; font-weight: 600; }.landing-v2 .landing-nav .landing-login { padding: 10px 18px; border: 0; border-radius: 12px; background: var(--forest); color: #fff; }.landing-v2 .landing-nav .landing-login span { margin-left: 8px; }.landing-v2 .landing-nav .landing-logout { color: #8b95a1; }
.landing-v2 .landing-hero { position: relative; width: min(1240px,calc(100% - 40px)); min-height: 720px; grid-template-columns: .92fr 1.08fr; gap: 20px; margin: 14px auto 0; padding: 72px clamp(36px,6vw,88px); overflow: hidden; border-radius: 40px; background: linear-gradient(135deg,#f3f7f5 0%,#f9f6ed 54%,#eef5ff 100%); }
.landing-v2 .landing-hero::before { content: ''; position: absolute; width: 520px; height: 520px; right: -100px; top: -150px; border-radius: 50%; background: rgba(255,255,255,.6); }.landing-v2 .landing-hero::after { content: ''; position: absolute; width: 160px; height: 160px; left: 47%; bottom: -90px; border-radius: 50%; background: #ffdf89; opacity: .45; }
.landing-v2 .hero-copy { max-width: 585px; animation: landing-fade-up .7s both; }.hero-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 12px 7px 7px; border-radius: 999px; background: rgba(255,255,255,.8); color: #4e5968; font-size: 12px; font-weight: 600; box-shadow: 0 6px 22px rgba(33,50,40,.06); }.hero-badge span { padding: 4px 8px; border-radius: 999px; background: #ff7d6e; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.landing-v2 .hero-copy h1 { margin: 0 0 25px; color: var(--landing-text); font: 800 clamp(46px,5.2vw,72px)/1.18 'Noto Sans KR',sans-serif; letter-spacing: -3.3px; word-break: keep-all; }.landing-v2 .hero-copy h1 em { color: var(--forest); font-style: normal; }
.landing-v2 .hero-lede { max-width: 535px; color: #6b7684; font-size: 17px; font-weight: 500; line-height: 1.75; letter-spacing: -.35px; }.landing-v2 .hero-actions { gap: 18px; margin-top: 35px; }.landing-v2 .landing-primary { min-height: 56px; gap: 20px; padding: 0 22px; border-radius: 14px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 24px rgba(49,92,76,.16); }.landing-v2 .landing-secondary { border: 0; color: #4e5968; font-size: 14px; }.landing-v2 .landing-test-login { color: #8b95a1; font-size: 12px; }
.landing-v2 .hero-note { gap: 7px; margin-top: 28px; color: #8b95a1; font-size: 12px; }.landing-v2 .hero-note span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #dff4e8; color: var(--forest); font-size: 11px; font-weight: 800; }
.landing-v2 .hero-visual { position: relative; z-index: 2; min-height: 570px; background: none; animation: landing-float-in .9s .08s both; }.landing-v2 .hero-visual::before { content: ''; position: absolute; inset: 48px 0 18px 9%; border-radius: 46% 54% 48% 52% / 55% 45% 55% 45%; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8),0 30px 60px rgba(67,78,91,.08); transform: rotate(-5deg); }
.landing-v2 .hero-device { top: -58px; left: 50%; width: min(470px,85%); height: 690px; overflow: visible; transform: translateX(-50%) rotate(1deg); filter: drop-shadow(0 28px 34px rgba(37,49,43,.18)); }.landing-v2 .hero-device img { object-fit: contain; }
.comic-pop { position: absolute; z-index: 4; display: grid; place-items: center; border: 3px solid var(--landing-text); background: #fff; color: var(--landing-text); font-weight: 900; box-shadow: 5px 6px 0 var(--landing-text); transform: rotate(-8deg); }.comic-pop-one { top: 74px; left: 3%; width: 74px; height: 62px; border-radius: 52% 48% 46% 54%; font-size: 21px; }.comic-pop-two { right: 0; top: 165px; padding: 12px 16px; border-radius: 50%; background: #ffda69; font-size: 13px; transform: rotate(8deg); }
.hero-reading-chip { position: absolute; z-index: 4; right: 1%; bottom: 48px; display: grid; min-width: 162px; padding: 17px 19px; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 18px 38px rgba(31,41,55,.12); }.hero-reading-chip span { color: #8b95a1; font-size: 10px; font-weight: 600; }.hero-reading-chip strong { margin-top: 2px; font-size: 28px; line-height: 1.2; letter-spacing: -1.5px; }.hero-reading-chip i { margin-top: 5px; color: var(--forest); font-size: 10px; font-style: normal; font-weight: 700; }
.landing-v2 .landing-intro { padding: 140px max(24px,calc((100vw - 1180px)/2)); background: #fff; }.landing-v2 .landing-section-heading { display: block; text-align: center; }.landing-v2 .landing-section-heading .kicker,.landing-v2 .trend-heading .kicker { color: var(--forest); font-size: 12px; letter-spacing: .4px; }.landing-v2 .landing-section-heading h2,.landing-v2 .trend-heading h2 { margin-top: 14px; color: var(--landing-text); font: 800 clamp(38px,4.3vw,58px)/1.25 'Noto Sans KR',sans-serif; letter-spacing: -2.6px; }.landing-v2 .intro-copy { width: min(100%,650px); margin: 23px auto 58px; color: #6b7684; font-size: 16px; line-height: 1.8; text-align: center; }
.landing-v2 .feature-grid { gap: 18px; border: 0; }.landing-v2 .feature-card { min-height: 420px; padding: 34px; overflow: hidden; border: 0; border-radius: 30px; background: #f2f4f6; }.landing-v2 .feature-card-dark { background: #e8f4ef; color: var(--landing-text); }.landing-v2 .feature-card-warm { background: #fff4df; }.landing-v2 .feature-number { top: 29px; right: 31px; color: #b0b8c1; font: 700 13px var(--sans); }.landing-v2 .feature-card-dark .feature-number,.landing-v2 .feature-card-dark .kicker,.landing-v2 .feature-card-dark > p:last-child { color: #6b7684; }.landing-v2 .feature-icon { width: 82px; height: 82px; margin: 25px 0 70px; border: 0; background: var(--forest); color: #fff; font-size: 35px; box-shadow: 0 14px 28px rgba(49,92,76,.18); }.landing-v2 .feature-card h3 { margin: 8px 0 14px; font: 800 27px/1.35 'Noto Sans KR',sans-serif; letter-spacing: -1.2px; }.landing-v2 .feature-card > p:last-child { color: #6b7684; font-size: 13px; line-height: 1.7; }.landing-v2 .mini-chart { height: 112px; margin-bottom: 57px; border: 0; }.landing-v2 .mini-chart i { max-width: 24px; border-radius: 8px 8px 3px 3px; background: var(--landing-blue); }.landing-v2 .feature-lines { gap: 14px; margin: 39px 0 83px; }.landing-v2 .feature-lines i { height: 10px; border-radius: 999px; background: #e7c98a; }
.landing-v2 .trend-section { width: auto; margin: 0; padding: 130px max(24px,calc((100vw - 1180px)/2)); background: #f7f8fa; }.landing-v2 .trend-heading { grid-template-columns: 1fr 430px; margin-bottom: 60px; }.landing-v2 .trend-heading h2 em { color: var(--forest); }.landing-v2 .trend-heading > p { color: #6b7684; font-size: 15px; line-height: 1.8; }.landing-v2 .trend-layout { gap: 24px; padding: 0; border: 0; }.landing-v2 .trend-feature { gap: 34px; padding: 34px; border-radius: 32px; background: #fff; }.landing-v2 .trend-cover { border-radius: 20px; box-shadow: 0 18px 35px rgba(31,41,55,.13); }.landing-v2 .trend-cover::after { border-radius: 13px; }.landing-v2 .trend-feature-copy h3 { font: 800 clamp(26px,3vw,38px)/1.35 'Noto Sans KR',sans-serif; letter-spacing: -1.5px; }.landing-v2 .trend-feature-copy > p:not(.trend-category) { color: #6b7684; font-size: 13px; }.landing-v2 .trend-feature-copy a { border: 0; color: var(--forest); font-size: 12px; }.landing-v2 .trend-list { gap: 14px; }.landing-v2 .trend-item { grid-template-columns: 95px 1fr; gap: 20px; padding: 22px; border: 0; border-radius: 28px; background: #fff; }.landing-v2 .trend-item h3 { font: 800 19px/1.4 'Noto Sans KR',sans-serif; letter-spacing: -.8px; }.landing-v2 .trend-rank { top: 17px; right: 20px; color: #d1d6db; font: 700 19px var(--sans); }
.landing-v2 .landing-cta { min-height: 480px; margin: 110px max(20px,calc((100vw - 1240px)/2)); border-radius: 40px; background: linear-gradient(135deg,#174c3b,#35725d); }.landing-v2 .landing-cta h2 { font: 800 clamp(38px,4.5vw,58px)/1.25 'Noto Sans KR',sans-serif; letter-spacing: -2.4px; }.landing-v2 .landing-cta > p:not(.kicker) { color: #c5d7cf; font-size: 15px; }.landing-v2 .landing-primary-light { color: var(--forest); box-shadow: none; }.landing-v2 .landing-footer { min-height: 150px; }.landing-v2 .landing-footer p,.landing-v2 .landing-footer > span { color: #8b95a1; font-size: 10px; }
@keyframes landing-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes landing-float-in { from { opacity: 0; transform: translateY(35px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .landing-v2 .hero-copy,.landing-v2 .hero-visual { animation: none; } }
@media (max-width: 900px) { .landing-v2 .landing-hero { grid-template-columns: 1fr; padding-top: 70px; }.landing-v2 .hero-visual { min-height: 590px; }.landing-v2 .feature-grid { grid-template-columns: 1fr; }.landing-v2 .feature-card { min-height: 350px; }.landing-v2 .trend-heading { grid-template-columns: 1fr; }.landing-v2 .trend-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .landing-v2 .landing-header { width: 100%; padding: 0 18px; }.landing-v2 .landing-nav { gap: 10px; }.landing-v2 .landing-hero { width: calc(100% - 20px); min-height: auto; margin-top: 5px; padding: 52px 24px 24px; border-radius: 28px; }.landing-v2 .hero-copy h1 { font-size: clamp(38px,11vw,50px); line-height: 1.22; letter-spacing: -2.4px; }.landing-v2 .hero-lede { font-size: 15px; }.landing-v2 .hero-actions { flex-direction: row; flex-wrap: wrap; }.landing-v2 .landing-primary { min-height: 52px; }.landing-v2 .hero-visual { min-height: 455px; margin-top: 0; }.landing-v2 .hero-visual::before { inset: 46px -15px 20px; }.landing-v2 .hero-device { top: -35px; width: min(390px,105%); height: 520px; }.comic-pop-one { top: 60px; left: -5px; width: 58px; height: 50px; font-size: 17px; }.comic-pop-two { right: -7px; top: 130px; padding: 9px 12px; font-size: 10px; }.hero-reading-chip { right: -3px; bottom: 35px; min-width: 135px; padding: 13px 15px; }.hero-reading-chip strong { font-size: 23px; }.landing-v2 .landing-intro,.landing-v2 .trend-section { padding: 90px 18px; }.landing-v2 .landing-section-heading h2,.landing-v2 .trend-heading h2 { font-size: 36px; letter-spacing: -1.8px; }.landing-v2 .intro-copy { font-size: 14px; }.landing-v2 .feature-card { min-height: 330px; padding: 27px; border-radius: 24px; }.landing-v2 .feature-icon { margin-bottom: 45px; }.landing-v2 .trend-feature { grid-template-columns: 1fr; padding: 23px; }.landing-v2 .trend-cover-main { width: min(72%,240px); }.landing-v2 .trend-list { grid-template-columns: 1fr; }.landing-v2 .trend-item { grid-template-columns: 88px 1fr; }.landing-v2 .landing-cta { min-height: 420px; margin: 70px 10px; padding: 55px 22px; border-radius: 28px; }.landing-v2 .landing-cta h2 { font-size: 36px; letter-spacing: -1.6px; }.landing-v2 .landing-footer { width: calc(100% - 36px); } }

/* Product screens — shared design system */
.product-page { --ui-bg:#f7f8fa; --ui-card:#fff; --ui-text:#191f28; --ui-muted:#6b7684; --ui-line:#e5e8eb; background:var(--ui-bg); color:var(--ui-text); font-family:'Noto Sans KR',var(--sans); font-size:14px; }
.product-page .app-shell { min-height:100vh; }.product-page .sidebar { position:sticky; top:0; width:260px; height:100vh; padding:28px 22px 22px; border:0; background:#fff; box-shadow:1px 0 0 var(--ui-line); }.product-page .brand { font-family:var(--sans); font-size:19px; font-weight:800; }.product-page .brand-mark { width:32px; height:32px; border-radius:10px; }
.product-page .sidebar-label { margin:58px 0 14px 12px; color:#adb5bd; font-size:10px; letter-spacing:1.2px; }.product-page .nav-list { gap:7px; }.product-page .nav-item { min-height:48px; gap:13px; padding:0 14px; border-radius:13px; color:var(--ui-muted); font-size:14px; font-weight:600; }.product-page .nav-item:hover,.product-page .nav-item.is-active { background:#eaf4ef; color:var(--forest); }.product-page .nav-icon { font-size:19px; }
.product-page .sidebar-note { margin-top:auto; padding:20px; border:0; border-radius:20px; background:#f2f7f5; }.product-page .sidebar-note p { color:#576b63; font-size:11px; line-height:1.7; }.product-page .note-icon { color:var(--forest); }.product-page .sidebar-footer { margin-top:14px; padding:16px 4px 2px; }.product-page .avatar,.product-page .icon-button { width:36px; height:36px; background:var(--forest); }.product-page .profile-link strong { font-size:12px; }.product-page .profile-link small { color:#8b95a1; font-size:9px; }
.product-page .main-content { width:calc(100% - 260px); max-width:none; padding:52px clamp(34px,5vw,76px) 80px; background:var(--ui-bg); }.product-page .kicker,.product-page .panel-meta { color:#8b95a1; font-size:10px; letter-spacing:.7px; }.product-page .page-header { margin-bottom:34px; }.product-page .page-header h1,.product-page .shelf-header h1,.product-page .book-log-heading h1,.product-page .mobile-flow-header h1,.product-page .profile-header h1 { color:var(--ui-text); font-family:'Noto Sans KR',sans-serif; font-weight:800; line-height:1.2; letter-spacing:-2.5px; }.product-page .page-header h1 { margin:8px 0 10px; font-size:clamp(42px,5vw,62px); }.product-page .title-period,.product-page .page-header h1 em,.product-page .shelf-header h1 em,.product-page .mobile-flow-header h1 em,.product-page .profile-header h1 em { color:var(--forest); }.product-page .lede { color:var(--ui-muted); font-size:14px; }.product-page .period-button { min-height:42px; padding:0 15px; border:0; border-radius:12px; background:#fff; color:#4e5968; box-shadow:0 1px 4px rgba(0,0,0,.05); font-size:12px; }
.product-page .metric-grid { gap:14px; margin-bottom:18px; }.product-page .metric-card { min-height:166px; padding:23px; border:0; border-radius:24px; background:#fff; box-shadow:0 2px 10px rgba(31,41,55,.035); }.product-page .metric-featured { background:linear-gradient(135deg,#245541,#3b755f); }.product-page .metric-top { font-size:10px; }.product-page .metric-card strong { margin-top:27px; font-family:var(--sans); font-size:38px; font-weight:800; }.product-page .metric-card strong small { font-size:15px; font-weight:700; }.product-page .metric-change,.product-page .metric-caption { font-size:10px; }
.product-page .content-grid { gap:14px; margin-bottom:46px; }.product-page .panel { min-height:320px; padding:30px; border:0; border-radius:26px; background:#fff; box-shadow:0 2px 10px rgba(31,41,55,.035); }.product-page .section-heading h2,.product-page .journal-section-heading h2,.product-page .reading-compose h2,.product-page .book-modal h2 { font-family:'Noto Sans KR',sans-serif; font-weight:800; letter-spacing:-1.3px; }.product-page .section-heading h2 { font-size:26px; }.product-page .insight-panel { background:#fff4df; }.product-page .insight-item { border-color:rgba(157,85,69,.12); }.product-page .current-book { overflow:hidden; border-radius:28px; background:linear-gradient(135deg,#214c3d,#376c58); box-shadow:0 15px 32px rgba(49,92,76,.13); }.product-page .book-cover::before { border-radius:12px; }.product-page .book-details h3 { font-family:'Noto Sans KR',sans-serif; font-weight:800; letter-spacing:-1px; }.product-page .empty-reading { min-height:170px; padding:28px; border:0; border-radius:24px; background:#fff; }.product-page .empty-book { border-radius:16px; }.product-page .primary-button { min-height:46px; margin-left:auto; padding:0 18px; border:0; border-radius:12px; font-size:11px; }
.product-page .shelf-header { margin-bottom:38px; }.product-page .shelf-header h1 { font-size:clamp(42px,5vw,60px); }.product-page .shelf-total { width:108px; height:92px; border:0; border-radius:24px; background:#eaf4ef; }.product-page .shelf-total strong { font-family:var(--sans); font-weight:800; }.product-page .shelf-tools { margin-bottom:30px; padding:12px; border:0; border-radius:18px; background:#fff; }.product-page .shelf-filter { padding:9px 14px; font-size:11px; }.product-page .shelf-filter:hover,.product-page .shelf-filter.is-active { background:var(--forest); }.product-page .shelf-search input { height:42px; border:0; border-radius:12px; background:var(--ui-bg); font-size:11px; }.product-page .shelf-search button { height:42px; }.product-page .shelf-grid { gap:38px clamp(20px,3vw,36px); }.product-page .shelf-cover { overflow:hidden; border-radius:18px; box-shadow:0 12px 26px rgba(31,41,55,.14); }.product-page .shelf-cover-fallback::before { border-radius:11px; }.product-page .shelf-book-meta h2 { font-family:'Noto Sans KR',sans-serif; font-size:16px; font-weight:700; }.product-page .shelf-add-book button { border:0; border-radius:18px; background:#eef1f4; }.product-page .shelf-add-book button:hover { background:#e8f4ef; }.product-page .shelf-empty { border:0; border-radius:28px; background:#fff; }
.product-page .back-link { margin-bottom:26px; color:#8b95a1; font-size:10px; }.product-page .book-log-header { margin-bottom:28px; }.product-page .book-log-heading h1 { font-size:clamp(38px,5vw,56px); }.product-page .book-menu-button { width:46px; height:46px; border:0; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); }.product-page .book-menu { border:0; border-radius:16px; box-shadow:0 16px 38px rgba(31,41,55,.14); }.product-page .book-menu button,.product-page .book-menu a { border-radius:10px; font-size:11px; }.product-page .book-log-summary { margin-bottom:32px; padding:22px 25px; border:0; border-radius:24px; background:#fff; }.product-page .book-log-cover { overflow:hidden; border-radius:12px; }.product-page .book-log-progress > strong { font-family:var(--sans); font-weight:800; }.product-page .journal-tabs { gap:8px; padding:7px; border:0; border-radius:14px; background:#e9edf1; }.product-page .journal-tabs a { padding:9px 15px; border-radius:10px; }.product-page .journal-tabs a::after { display:none; }.product-page .journal-tabs a.is-active { background:#fff; color:var(--forest); box-shadow:0 1px 5px rgba(0,0,0,.06); }.product-page .reading-journal-grid { gap:34px; }.product-page .journal-section-heading { padding-bottom:18px; border-color:var(--ui-line); }.product-page .reading-day { border-color:var(--ui-line); }.product-page .reading-record { margin-bottom:10px; padding:18px; border-radius:16px; background:#fff; }.product-page .reading-compose { top:28px; padding:27px; border:0; border-radius:24px; background:#eaf4ef; }.product-page .reading-compose input,.product-page .reading-compose textarea { border:0; border-radius:12px; background:#fff; }.product-page .journal-submit { min-height:46px; border-radius:12px; }.product-page .finish-reading-button { border-radius:12px; }.product-page .reading-history-empty { border:0; border-radius:24px; background:#fff; }
.product-page .linked-bookmark-card { overflow:hidden; border:0; border-radius:24px; background:#fff; }.product-page .linked-bookmark-image { padding:18px 8px; background:linear-gradient(135deg,#edf4f1,#fff5df); }.product-page .linked-bookmark-image img { object-fit:contain; }.product-page .linked-bookmark-content textarea { border:0; border-radius:10px; background:var(--ui-bg); }.product-page .linked-bookmark-content form button { border-radius:10px; }
.product-page .mobile-flow-header { margin-bottom:36px; }.product-page .mobile-flow-header h1 { font-size:clamp(40px,5vw,58px); }.product-page .mobile-flow-header > p:last-child { color:var(--ui-muted); font-size:13px; }.product-page .bookmark-connect-card { padding:30px; border:0; border-radius:28px; background:#fff; }.product-page .connect-device { padding:20px; border:0; border-radius:20px; background:linear-gradient(135deg,#edf4f1,#fff6e6); }.product-page .connect-device img { height:130px; border-radius:12px; object-fit:contain; background:transparent; }.product-page .connect-device strong { font-family:var(--sans); font-weight:800; }.product-page .connect-book-option { padding:13px 15px; border-color:var(--ui-line); border-radius:15px; }.product-page .connect-book-option:has(input:checked) { border-color:var(--forest); background:#edf6f1; }.product-page .connect-book-cover { overflow:hidden; border-radius:8px; }.product-page .connect-submit { min-height:50px; border-radius:13px; font-size:11px; }.product-page .bookmark-settings-layout { gap:16px; }.product-page .settings-device-preview { overflow:hidden; border-radius:28px; background:linear-gradient(145deg,#e6f1ec,#fff2d8); color:var(--ui-text); }.product-page .settings-device-preview img { max-height:380px; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(31,41,55,.14)); }.product-page .settings-device-preview > span { color:#8b95a1; }.product-page .settings-device-preview > strong { font-family:var(--sans); }.product-page .bookmark-settings-form { padding:30px; border:0; border-radius:28px; background:#fff; }.product-page .action-option { padding:16px; border-color:var(--ui-line); border-radius:14px; }.product-page .action-option:has(input:checked) { background:#edf6f1; }.product-page .settings-field select,.product-page .settings-field textarea { border:0; border-radius:12px; background:var(--ui-bg); }.product-page .unlink-form button { color:#e05252; }
.product-page .profile-header h1 { font-size:clamp(42px,5vw,60px); }.product-page .profile-identity-card { border-radius:28px; }.product-page .profile-activity,.product-page .profile-about-card { border:0; border-radius:24px; background:#fff; }.product-page .profile-activity { overflow:hidden; }.product-page .profile-about-card textarea { border:0; border-radius:13px; background:var(--ui-bg); }.product-page .profile-section-heading h2,.product-page .profile-person h2,.product-page .profile-shortcuts strong,.product-page .profile-account h2 { font-family:'Noto Sans KR',sans-serif; font-weight:800; }.product-page .profile-shortcuts > a { border:0; border-radius:20px; background:#fff; }.product-page .profile-form-footer button { min-height:44px; border-radius:12px; }.product-page .profile-account { border-color:var(--ui-line); }
.product-page .book-modal { border:0; border-radius:28px; box-shadow:0 24px 70px rgba(31,41,55,.2); }.product-page .book-modal input,.product-page .book-modal select,.product-page .book-modal textarea { border:0; border-radius:11px; background:var(--ui-bg); }.product-page .secondary-button { min-height:44px; border-radius:11px; }.product-page .modal-close { border-radius:50%; }.product-page .flash-message { padding:14px 17px; border:0; border-radius:14px; font-size:11px; }
.auth-v2 { background:#f2f4f6; font-family:'Noto Sans KR',var(--sans); }.auth-v2 .auth-shell { width:min(1180px,calc(100% - 40px)); min-height:720px; margin:20px auto; grid-template-columns:1.05fr .95fr; overflow:hidden; border-radius:36px; background:#fff; box-shadow:0 24px 70px rgba(31,41,55,.1); }.auth-v2 .auth-story { position:relative; overflow:hidden; padding:44px 52px; background:linear-gradient(145deg,#174c3b,#397760); }.auth-v2 .auth-story h1 { position:relative; z-index:2; font:800 clamp(38px,4.3vw,58px)/1.2 'Noto Sans KR',sans-serif; letter-spacing:-2.5px; }.auth-v2 .auth-story h1 em { color:#ffda69; }.auth-v2 .auth-story p { position:relative; z-index:2; font-size:13px; }.auth-v2 .auth-bookmark-visual { position:absolute; z-index:1; right:-100px; bottom:-235px; width:470px; height:705px; object-fit:contain; transform:rotate(12deg); opacity:.68; filter:drop-shadow(0 22px 28px rgba(0,0,0,.2)); }.auth-v2 .auth-panel { padding:50px; background:#fff; }.auth-v2 .auth-card { width:min(100%,430px); padding:0; border:0; box-shadow:none; }.auth-v2 .auth-card h2 { font:800 34px/1.3 'Noto Sans KR',sans-serif; letter-spacing:-1.5px; }.auth-v2 .auth-description { font-size:13px; line-height:1.7; }.auth-v2 .google-button,.auth-v2 .signup-button { min-height:52px; border:0; border-radius:13px; font-size:13px; }.auth-v2 .google-button { background:#f2f4f6; }.auth-v2 .signup-button { background:var(--forest); }.auth-v2 .test-login-button { min-height:46px; border:0; border-radius:12px; background:#fff4df; font-size:11px; }
@media (max-width:980px) { .product-page .sidebar { width:220px; }.product-page .main-content { width:calc(100% - 220px); padding:42px 30px 65px; }.product-page .metric-grid { grid-template-columns:1fr 1fr; }.product-page .content-grid { grid-template-columns:1fr; }.auth-v2 .auth-shell { grid-template-columns:1fr 1fr; }.auth-v2 .auth-story { padding:38px; }.auth-v2 .auth-panel { padding:38px; } }
@media (max-width:760px) { .product-page .bookmark-settings-layout { grid-template-columns:1fr; }.product-page .settings-device-preview { min-height:320px; }.auth-v2 .auth-shell { grid-template-columns:1fr; }.auth-v2 .auth-story { min-height:330px; }.auth-v2 .auth-bookmark-visual { right:-60px; bottom:-320px; }.auth-v2 .auth-panel { padding:42px 24px; } }
@media (max-width:640px) { .product-page .app-shell { display:block; }.product-page .sidebar { position:sticky; z-index:20; top:0; width:100%; height:68px; padding:14px 18px; flex-direction:row; align-items:center; box-shadow:0 1px 0 var(--ui-line); }.product-page .sidebar-label,.product-page .sidebar-note,.product-page .sidebar-footer,.product-page .nav-item span:not(.nav-icon) { display:none; }.product-page .nav-list { display:flex; margin-left:auto; }.product-page .nav-item { min-height:40px; padding:0 11px; }.product-page .main-content { width:100%; padding:36px 18px 58px; }.product-page .page-header,.product-page .profile-header { display:block; }.product-page .page-header h1,.product-page .shelf-header h1,.product-page .profile-header h1 { font-size:40px; letter-spacing:-2px; }.product-page .header-actions { margin-top:20px; }.product-page .metric-grid { gap:10px; }.product-page .metric-card { min-height:140px; padding:18px; border-radius:20px; }.product-page .metric-card strong { font-size:31px; }.product-page .panel { padding:23px 18px; border-radius:22px; }.product-page .current-book { grid-template-columns:100px 1fr; border-radius:22px; }.product-page .primary-button { margin-left:auto; }.product-page .shelf-header { align-items:center; }.product-page .shelf-total { width:86px; height:78px; border-radius:20px; }.product-page .shelf-tools { padding:10px; }.product-page .shelf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 14px; }.product-page .book-log-summary { grid-template-columns:58px 1fr; }.product-page .reading-day { grid-template-columns:48px 1fr; }.product-page .reading-compose { padding:22px 18px; }.product-page .linked-bookmark-card { grid-template-columns:92px 1fr; }.product-page .bookmark-connect-card,.product-page .bookmark-settings-form { padding:21px 17px; border-radius:22px; }.product-page .connect-device { grid-template-columns:72px 1fr; padding:15px; }.product-page .profile-activity article { padding:15px 10px; }.auth-v2 .auth-shell { width:calc(100% - 20px); min-height:calc(100vh - 20px); margin:10px auto; border-radius:26px; }.auth-v2 .auth-story { min-height:300px; padding:28px 24px; }.auth-v2 .auth-story h1 { font-size:38px; }.auth-v2 .auth-bookmark-visual { right:-90px; bottom:-350px; }.auth-v2 .auth-panel { padding:34px 22px; } }