:root { --navy:#173b67; --blue:#2f80ed; --blue-soft:#eef4fd; --green:#228b5a; --green-soft:#eef8f2; --page:#f3f6fa; --card:#fff; --border:#dbe3ee; --text:#263445; --sub:#667487; --muted:#7c8796; --radius:12px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--text); font-family:Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; line-height:1.45; }
button, input, textarea { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
.page { width:min(100%, 720px); min-height:100vh; margin:0 auto; padding:12px 12px 92px; }
.app-header { background:var(--navy); color:white; padding:17px 18px; border-radius:var(--radius); display:flex; justify-content:space-between; align-items:flex-start; box-shadow:0 3px 10px rgba(23,59,103,.12); }
.eyebrow,.section-kicker { margin:0; font-size:11px; font-weight:800; letter-spacing:1px; color:#9cc0ec; }
.app-header h1 { margin:3px 0; font-size:20px; letter-spacing:-.3px; }.header-date { margin:0; color:#c9dbef; font-size:13px; }.header-mark { border:1px solid #9cc0ec; color:#9cc0ec; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; }
.content { display:grid; gap:12px; margin-top:12px; }.card,.progress-card,.tomorrow-card,.review-hero,.guide-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }.card { padding:16px; }.card-heading { margin-bottom:14px; }.card-heading h2,.progress-card h2,.tomorrow-card h2,.review-hero h2,.settings-card h2,.guide-card h2 { margin:3px 0 0; font-size:17px; letter-spacing:-.2px; }.card-heading p:last-child,.progress-card>p,.tomorrow-card p,.review-hero p,.settings-card>p,.settings-note,.guide-card li { color:var(--sub); font-size:13px; }.section-kicker { color:var(--blue); }.section-row { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }.section-row strong { color:var(--navy); font-size:22px; }.progress-card { padding:16px; }.progress-track { height:7px; margin:12px 0 4px; border-radius:99px; background:#e6edf6; overflow:hidden; }.progress-track span { display:block; height:100%; border-radius:inherit; background:var(--blue); transition:width .2s ease; }
.tomorrow-card { padding:15px 16px; background:var(--blue-soft); border-color:#c8dcf8; display:flex; align-items:center; justify-content:space-between; gap:12px; }.tomorrow-card .section-kicker { color:var(--navy); }.tomorrow-card p { margin:4px 0 0; }
.link-field { display:grid; gap:6px; margin-top:12px; color:var(--text); font-size:13px; font-weight:700; }.input-with-action { display:flex; gap:7px; }.input-with-action input { min-width:0; flex:1; }.input-with-action a { min-width:58px; display:grid; place-items:center; background:var(--blue-soft); border:1px solid #c8dcf8; color:var(--blue); border-radius:8px; font-size:12px; font-weight:800; text-decoration:none; }
input,textarea { width:100%; border:1px solid var(--border); border-radius:8px; background:white; color:var(--text); padding:10px 11px; font-size:16px; outline:none; } textarea { resize:vertical; line-height:1.45; } input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }.steps { list-style:none; padding:0; margin:0; display:grid; gap:2px; }.step { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--border); }.step:first-child { border-top:0; padding-top:0; }.step--done h3 { color:var(--green); text-decoration:line-through; text-decoration-color:#9bceb5; }.step--done { background:linear-gradient(90deg,var(--green-soft),transparent 80%); }.check { flex:0 0 28px; width:28px; height:28px; margin-top:2px; border:1.5px solid #abc0d8; border-radius:50%; background:white; color:white; font-weight:900; cursor:pointer; }.step--done .check { background:var(--green); border-color:var(--green); }.step-label { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.5px; }.step h3 { margin:1px 0 2px; font-size:15px; }.step p { margin:0; color:var(--sub); font-size:13px; }.sentence-form { padding:14px 0; border-top:1px solid var(--border); display:grid; gap:9px; }.sentence-form label { display:grid; gap:5px; color:var(--sub); font-size:12px; font-weight:700; }.sentence-number { display:flex; align-items:center; gap:8px; }.sentence-number span { color:var(--navy); font-size:13px; font-weight:900; }.sentence-number input { width:88px; padding:7px 9px; font-size:14px; }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:0; right:0; min-height:66px; display:flex; justify-content:center; padding:6px 8px max(6px, env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); }.bottom-nav button { width:min(33.33%, 160px); border:0; background:transparent; color:var(--muted); display:grid; place-items:center; gap:1px; font-size:12px; font-weight:700; cursor:pointer; }.bottom-nav button span { font-size:19px; line-height:19px; }.bottom-nav button.active { color:var(--navy); }.button { min-height:42px; padding:0 14px; border:1px solid var(--navy); border-radius:8px; background:var(--navy); color:white; font-size:13px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-grid; place-items:center; }.button--light { background:white; color:var(--navy); }.button--complete { background:var(--green); border-color:var(--green); margin-top:10px; }.review-hero,.guide-card { padding:16px; background:var(--navy); border-color:var(--navy); color:white; }.review-hero .section-kicker,.review-hero p { color:#c9dbef; }.review-list,.history-list { display:grid; gap:10px; }.review-item { padding:12px; border:1px solid var(--border); border-radius:8px; }.review-meta { display:flex; gap:7px; color:var(--blue); font-size:11px; font-weight:800; }.review-meta span+span { color:var(--sub); }.original { margin:7px 0 0; font-weight:700; font-size:15px; }.mine { margin:5px 0 0; color:var(--sub); font-size:13px; }.history-item { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--border); }.history-item:first-child { border-top:0; padding-top:0; }.history-item div { display:grid; gap:2px; }.history-item strong { font-size:14px; }.history-item span { color:var(--sub); font-size:12px; }.history-status { color:var(--green)!important; font-weight:800; white-space:nowrap; }.empty { padding:16px 4px 4px; text-align:center; }.empty strong { font-size:14px; }.empty p { margin:5px 0 0; color:var(--sub); font-size:13px; }.settings-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }.file-button input { display:none; }.settings-note { margin:10px 0 0; }.guide-card { background:white; color:var(--text); }.guide-card ol { margin:12px 0 0; padding-left:20px; }.notice { margin:0; padding:10px 12px; background:var(--green-soft); border:1px solid #b7dec8; border-radius:8px; color:var(--green); font-size:13px; font-weight:700; }
@media (min-width:600px) { .page { padding-top:22px; }.app-header { border-radius:14px; }.content { grid-template-columns:repeat(2,1fr); }.progress-card,.tomorrow-card,.sources-card,.checklist-card,.sentences-card,.review-hero,.review-list-card,.history-card,.settings-card,.guide-card { grid-column:1/-1; }.sources-card { display:grid; grid-template-columns:150px 1fr 1fr; align-items:end; gap:12px; }.sources-card .card-heading { margin:0; }.link-field { margin:0; }.sentence-form { grid-template-columns:100px 1fr 1fr; align-items:start; }.sentence-number { padding-top:4px; }.sentence-number input { width:65px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }